import { AfterContentInit , Directive , ElementRef , Input , NgZone , OnDestroy } from '@angular/core' ; import { fromEvent , Subject } from 'rxjs' ; import { filter , takeUntil } from 'rxjs/operators' ; import { MDCComponent } from '@angular-mdc/web/base' ; import { MDCFloatingLabelFoundation , MDCFloatingLabelAdapter , cssClasses } from '@material/floating-label' ; @ Directive ( { selector : 'label[mdcFloatingLabel], mdc-floating-label' , exportAs : 'mdcFloatingLabel' , host : { 'class' : 'mdc-floating-label' , '[for]' : 'for' } } ) export class MdcFloatingLabel extends MDCComponent < MDCFloatingLabelFoundation > implements AfterContentInit , OnDestroy { /** Emits whenever the component is destroyed. */ private _destroy = new Subject < void > ( ) ; @ Input ( ) for ? : string ; getDefaultFoundation ( ) { const adapter = { addClass : ( className ) => this . _getHostElement ( ) . classList . add ( className ) , removeClass : ( className ) => this . _getHostElement ( ) . classList . remove ( className ) , getWidth : ( ) => this . _getHostElement ( ) . scrollWidth , registerInteractionHandler : ( ) => { } , deregisterInteractionHandler : ( ) => { } } ; return new MDCFloatingLabelFoundation ( adapter ) ; } constructor ( private _ngZone , public elementRef ) { super ( elementRef ) ; } ngAfterContentInit ( ) { this . _loadListeners ( ) ; } ngOnDestroy ( ) { this . _destroy . next ( ) ; this . _destroy . complete ( ) ; } /** Returns the width of the label element. */ getWidth ( ) { return this . _foundation . getWidth ( ) ; } /** Styles the label to produce the label shake for errors. */ shake ( shouldShake ) { this . _foundation . shake ( shouldShake ) ; } /** Styles the label to float or dock. */ float ( shouldFloat ) { this . _foundation . float ( shouldFloat ) ; } private _loadListeners ( ) { this . _ngZone . runOutsideAngular ( ( ) => fromEvent < AnimationEvent > ( this . _getHostElement ( ) , 'animationend' ) . pipe ( takeUntil ( this . _destroy ) , filter ( ( e ) => e . target === this . _getHostElement ( ) ) ) . subscribe ( ( ) => this . _ngZone . run ( ( ) => this . _getHostElement ( ) . classList . remove ( cssClasses . LABEL_SHAKE ) ) ) ) ; } /** Retrieves the DOM element of the component host. */ private _getHostElement ( ) { return this . elementRef . nativeElement ; } }