import { AfterViewInit , Component , ElementRef , Input , Renderer2 , TemplateRef , ViewChild , } from "@angular/core" ; /**
 * This component is used to display a tooltip when a element is elementDisabled.
 * Normally, tooltips are not shown on elementDisabled elements, therefore this component creates the tooltip on a wrapping
 * div.
 */ @ Component ( { selector : "app-disabled-wrapper" , template : ` <div
    [matTooltip]="text"
    [matTooltipDisabled]="!elementDisabled"
    style="display: inline-block"
    #wrapper
  >
    <ng-container *ngTemplateOutlet="template"></ng-container>
  </div>` , } ) export class DisabledWrapperComponent implements AfterViewInit { /**
     * A template of an HTMLElement that can be disabled.
     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
     * for a list of HTML element with the disabled attribute.
     */ @ Input ( ) template : TemplateRef < HTMLElement > ; /**
     * The text which should be displayed in the tooltip
     */ @ Input ( ) text : string ; /**
     * Whether the element should be disabled.
     */ @ Input ( ) elementDisabled : boolean ; @ ViewChild ( "wrapper" ) wrapper : ElementRef < HTMLDivElement > ; constructor ( private renderer ) { } ngAfterViewInit ( ) { if ( this . elementDisabled ) { const innerElement = this . wrapper . nativeElement . children [ 0 ] ; this . renderer . setAttribute ( innerElement , "disabled" , "true" ) ; this . renderer . addClass ( innerElement , "mat-button-disabled" ) ; } } }