import { ChangeDetectionStrategy , ChangeDetectorRef , Component , ElementRef , Input , OnChanges , OnInit , SimpleChanges , ViewEncapsulation } from '@angular/core' ; import { Platform } from '@angular/cdk/platform' ; import { coerceBooleanProperty , coerceNumberProperty } from '@angular/cdk/coercion' ; import { MDCComponent } from '@angular-mdc/web/base' ; import { MDCProgressIndicator } from '@material/progress-indicator/component' ; import { MDCLinearProgressFoundation , MDCLinearProgressAdapter } from '@material/linear-progress' ; @ Component ( { selector : 'mdc-linear-progress' , exportAs : 'mdcLinearProgress' , host : { 'role' : 'progressbar' , 'class' : 'mdc-linear-progress' , '[class.mdc-linear-progress--indeterminate]' : '!determinate' , '[attr.aria-label]' : 'label' , 'aria-valuemin' : '0' , 'aria-valuemax' : '100' } , templateUrl : 'linear-progress.html' , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush } ) export class MdcLinearProgress extends MDCComponent < MDCLinearProgressFoundation > implements MDCProgressIndicator , OnChanges , OnInit { _root ! : Element ; private _initialized : boolean = false ; @ Input ( ) label ? : string = undefined ; @ Input ( ) get progress ( ) : number { return this . _progress ; } set progress ( value ) { this . _progress = coerceNumberProperty ( value ) ; } private _progress = 0 ; @ Input ( ) get determinate ( ) : boolean { return this . _determinate ; } set determinate ( value ) { this . _determinate = coerceBooleanProperty ( value ) ; } private _determinate = false ; @ Input ( ) get buffer ( ) : number { return this . _buffer ; } set buffer ( value ) { this . _buffer = coerceNumberProperty ( value ) ; } private _buffer = 0 ; @ Input ( ) get reversed ( ) : boolean { return this . _reversed ; } set reversed ( value ) { this . _reversed = coerceBooleanProperty ( value ) ; this . _syncReversedWithFoundation ( ) ; } private _reversed = false ; getDefaultFoundation ( ) { const adapter = { addClass : ( className ) => this . _root . classList . add ( className ) , forceLayout : ( ) => ( < HTMLElement > this . _root ) . offsetWidth , setBufferBarStyle : ( styleProperty , value ) => { ( this . _root . querySelector ( MDCLinearProgressFoundation . strings . BUFFER_BAR_SELECTOR ) as HTMLElement ) . style . setProperty ( styleProperty , value ) ; } , setPrimaryBarStyle : ( styleProperty , value ) => { ( this . _root . querySelector ( MDCLinearProgressFoundation . strings . PRIMARY_BAR_SELECTOR ) as HTMLElement ) . style . setProperty ( styleProperty , value ) ; } , hasClass : ( className ) => this . _root . classList . contains ( className ) , removeClass : ( className ) => this . _root . classList . remove ( className ) , removeAttribute : ( name ) => this . _root . removeAttribute ( name ) , setAttribute : ( name , value ) => this . _root . setAttribute ( name , value ) } ; return new MDCLinearProgressFoundation ( adapter ) ; } constructor ( private _platform , private _changeDetectorRef , public elementRef ) { super ( elementRef ) ; this . _root = this . elementRef . nativeElement ; } ngOnInit ( ) { if ( this . _platform . isBrowser ) { this . _initialized = true ; this . _foundation . init ( ) ; this . _syncProgressWithFoundation ( ) ; this . _syncBufferWithFoundation ( ) ; this . _syncDeterminateWithFoundation ( ) ; this . _syncReversedWithFoundation ( ) ; this . _changeDetectorRef . markForCheck ( ) ; } } ngOnChanges ( changes ) { if ( ! this . _initialized ) { return ; } if ( changes [ 'progress' ] ) { this . _syncProgressWithFoundation ( ) ; } if ( changes [ 'buffer' ] ) { this . _syncBufferWithFoundation ( ) ; } if ( changes [ 'determinate' ] ) { this . _syncDeterminateWithFoundation ( ) ; } if ( changes [ 'reversed' ] ) { this . _syncReversedWithFoundation ( ) ; } } open ( ) { this . _foundation . open ( ) ; } close ( ) { this . _foundation . close ( ) ; } private _syncProgressWithFoundation ( ) { this . _foundation . setProgress ( this . progress ) ; } private _syncBufferWithFoundation ( ) { this . _foundation . setBuffer ( this . buffer ) ; } private _syncDeterminateWithFoundation ( ) { this . _foundation . setDeterminate ( this . determinate ) ; } private _syncReversedWithFoundation ( ) { this . _foundation . setReverse ( this . reversed ) ; } }