import { ChangeDetectionStrategy , Component , ContentChild , Directive , ElementRef , Input , OnDestroy , OnInit , ViewEncapsulation } from '@angular/core' ; import { coerceBooleanProperty } from '@angular/cdk/coercion' ; import { MdcRipple } from '@angular-mdc/web/ripple' ; import { MdcIcon } from '@angular-mdc/web/icon' ; @ Directive ( { selector : 'mdc-button-label, [mdcButtonLabel]' , exportAs : 'mdcButtonLabel' , host : { 'class' : 'mdc-button__label' } } ) export class MdcButtonLabel { } @ Component ( { exportAs : 'mdcButton' , selector : 'button[mdc-button], a[mdc-button]' , host : { '[tabIndex]' : 'disabled ? -1 : 0' , 'class' : 'mdc-button' , '[class.mdc-button--raised]' : 'raised' , '[class.mdc-button--unelevated]' : 'unelevated' , '[class.mdc-button--outlined]' : 'outlined' , '[class.mdc-button--touch]' : 'touch' , '(click)' : 'onClick($event)' } , templateUrl : 'button.html' , providers : [ MdcRipple ] , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush } ) export class MdcButton implements OnInit , OnDestroy { @ Input ( ) get raised ( ) : boolean { return this . _raised ; } set raised ( value ) { this . _raised = coerceBooleanProperty ( value ) ; } private _raised : boolean = false ; @ Input ( ) get unelevated ( ) : boolean { return this . _unelevated ; } set unelevated ( value ) { this . _unelevated = coerceBooleanProperty ( value ) ; } private _unelevated : boolean = false ; @ Input ( ) get outlined ( ) : boolean { return this . _outlined ; } set outlined ( value ) { this . _outlined = coerceBooleanProperty ( value ) ; } private _outlined : boolean = false ; @ Input ( ) get touch ( ) : boolean { return this . _touch ; } set touch ( value ) { this . _touch = coerceBooleanProperty ( value ) ; } private _touch : boolean = false ; @ Input ( ) get disabled ( ) : boolean { return this . _disabled ; } set disabled ( value ) { this . setDisabled ( value ) ; } private _disabled : boolean = false ; @ ContentChild ( MdcIcon , { static : true } ) _icon ! : MdcIcon ; @ Input ( ) label ? : string ; constructor ( public elementRef , private _ripple ) { this . _ripple = new MdcRipple ( this . elementRef ) ; this . _ripple . init ( ) ; } ngOnInit ( ) { if ( this . _icon ) { this . _icon . elementRef . nativeElement . classList . add ( 'mdc-button__icon' ) ; } } ngOnDestroy ( ) { this . _ripple . destroy ( ) ; } setDisabled ( disabled ) { this . _disabled = coerceBooleanProperty ( disabled ) ; if ( this . _disabled ) { this . getHostElement ( ) . setAttribute ( 'disabled' , 'true' ) ; this . getHostElement ( ) . setAttribute ( 'aria-disabled' , 'true' ) ; } else { this . getHostElement ( ) . removeAttribute ( 'disabled' ) ; this . getHostElement ( ) . removeAttribute ( 'aria-disabled' ) ; } } /** Focuses the button. */ focus ( ) { this . getHostElement ( ) . focus ( ) ; } getHostElement ( ) { return this . elementRef . nativeElement ; } onClick ( event ) { if ( this . disabled ) { event . preventDefault ( ) ; event . stopImmediatePropagation ( ) ; } } }