import { ChangeDetectionStrategy , Component , EventEmitter , HostBinding , Input , OnChanges , OnDestroy , Output , SimpleChanges , ViewEncapsulation } from '@angular/core' ; import { coerceNumberProperty } from '@angular/cdk/coercion' ; import { trigger } from '@angular/animations' ; import { bounceAnimation } from '../../animations/bounce.animation' ; const enum State { open = 'open' , peek = 'peek' , closed = 'closed' } @ Component ( { selector : 'ngx-nag' , exportAs : 'ngxNag' , templateUrl : './nag.component.html' , host : { role : 'dialog' , tabindex : '-1' , '[style.zIndex]' : 'zIndex' } , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush , styleUrls : [ './nag.component.scss' ] , animations : [ trigger ( 'bounce' , bounceAnimation ( ) ) ] } ) export class NagComponent implements OnDestroy , OnChanges { @ Input ( ) cssClass = '' ; @ Input ( ) state : State | keyof typeof State = State . closed ; @ Output ( ) stateChanged = new EventEmitter < string > ( ) ; get zIndex ( ) { return this . _zIndex ; } @ Input ( ) set zIndex ( val ) { this . _zIndex = coerceNumberProperty ( val ) ; } @ Input ( ) nagTitle = '' ; @ Input ( ) watch : any ; @ Input ( ) hide : any ; @ HostBinding ( 'class' ) get klass ( ) { return `ngx-nag ngx-nag-bottom ngx-nag-${ this . state } ${ this . cssClass }` ; } @ HostBinding ( '@bounce' ) bounce = 0 ; private _zIndex : number ; toggle ( ) { this . state = this . state !== State . open ? State . open : State . peek ; this . stateChanged . emit ( this . state ) ; } ngOnDestroy ( ) { this . stateChanged . emit ( this . state ) ; } ngOnChanges ( changes ) { if ( changes . hide && changes . hide . currentValue !== changes . hide . previousValue ) { if ( changes . hide . currentValue === true ) { this . state = State . closed ; this . stateChanged . emit ( this . state ) ; } } if ( changes . watch && ! this . hide ) { switch ( this . state ) { case State . closed : this . state = State . peek ; this . stateChanged . emit ( this . state ) ; break ; case State . peek : this . bounce = ( this . bounce + 1 ) % 1000 ; break ; } } } }