import { AfterViewInit , Directive , ElementRef , Input , OnChanges , OnDestroy , SimpleChanges } from '@angular/core' ; import { coerceBooleanProperty } from '@angular/cdk/coercion' ; import { supportsPassiveEventListeners } from '@angular/cdk/platform' ; import { MdcRipple , MDCRippleCapableSurface } from './ripple.service' ; import { matches } from '@angular-mdc/web/dom' ; import { MDCRippleFoundation , MDCRippleAdapter } from '@material/ripple' ; @ Directive ( { selector : '[mdcRipple], mdc-ripple' , providers : [ MdcRipple ] , } ) export class MdcRippleDirective implements AfterViewInit , OnChanges , OnDestroy , MDCRippleCapableSurface { _root ! : Element ; @ Input ( ) get attachTo ( ) : any { return this . _attachTo ; } set attachTo ( element ) { this . _attachTo = element ; this . _attachTo ?. classList ?. add ( 'mdc-ripple-surface' ) ; } private _attachTo ? : any ; @ Input ( ) get primary ( ) : boolean { return this . _primary ; } set primary ( value ) { this . _primary = coerceBooleanProperty ( value ) ; } private _primary = false ; @ Input ( ) get secondary ( ) : boolean { return this . _secondary ; } set secondary ( value ) { this . _secondary = coerceBooleanProperty ( value ) ; } private _secondary = false ; @ Input ( ) get disabled ( ) : boolean { return this . _disabled ; } set disabled ( value ) { this . _disabled = coerceBooleanProperty ( value ) ; } private _disabled = false ; @ Input ( ) get unbounded ( ) : boolean { return this . _unbounded ; } set unbounded ( value ) { this . _unbounded = coerceBooleanProperty ( value ) ; } protected _unbounded = false ; constructor ( private _ripple , public elementRef ) { this . _root = this . elementRef . nativeElement ; this . _ripple = this . _createRipple ( ) ; } ngOnChanges ( changes ) { if ( changes [ 'primary' ] && this . attachTo ) { if ( this . _primary ) { this . attachTo . classList . add ( 'mdc-ripple-surface--primary' ) ; } else { this . attachTo . classList . remove ( 'mdc-ripple-surface--primary' ) ; } } if ( changes [ 'secondary' ] && this . attachTo ) { if ( this . _secondary ) { this . attachTo . classList . add ( 'mdc-ripple-surface--accent' ) ; } else { this . attachTo . classList . remove ( 'mdc-ripple-surface--accent' ) ; } } } ngAfterViewInit ( ) { this . _ripple . init ( ) ; } ngOnDestroy ( ) { this . _ripple . destroy ( ) ; } private _createRipple ( ) { const adapter = { ... MdcRipple . createAdapter ( this ) , addClass : ( className ) => this . attachTo ?. classList ?. add ( className ) , computeBoundingRect : ( ) => this . attachTo ?. getBoundingClientRect ( ) ?? ( { top : 0 , right : 0 , bottom : 0 , left : 0 , width : 0 , height : 0 } ) , isSurfaceActive : ( ) => matches ( this . attachTo , ':active' ) , isSurfaceDisabled : ( ) => this . _disabled , isUnbounded : ( ) => this . _unbounded , removeClass : ( className ) => this . attachTo ?. classList ?. remove ( className ) , updateCssVariable : ( varName , value ) => this . attachTo ?. style ?. setProperty ( varName , value ) , registerInteractionHandler : ( evtType , handler ) => this . attachTo ?. addEventListener ( evtType , handler , supportsPassiveEventListeners ( ) ) , deregisterInteractionHandler : ( evtType , handler ) => this . attachTo ?. removeEventListener ( evtType , handler , supportsPassiveEventListeners ( ) ) } ; return new MdcRipple ( this . elementRef , new MDCRippleFoundation ( adapter ) ) ; } }