license import { coerceBooleanProperty } from '@angular/cdk/coercion' ; import { AfterContentInit , Attribute , ChangeDetectionStrategy , ChangeDetectorRef , Component , ContentChild , Directive , Input , OnChanges , OnDestroy , SimpleChanges , ViewEncapsulation , ViewChild , } from '@angular/core' ; import { MatButton } from '@angular/material/button' ; import { merge , of as observableOf , Subscription } from 'rxjs' ; import { MatDatepicker } from './datepicker' ; import { MatDatepickerIntl } from './datepicker-intl' ; /** Can be used to override the icon of a `matDatepickerToggle`. */ @ Directive ( { selector : '[matDatepickerToggleIcon]' } ) export class MatDatepickerToggleIcon { } @ Component ( { moduleId : module . id , selector : 'mat-datepicker-toggle' , templateUrl : 'datepicker-toggle.html' , styleUrls : [ 'datepicker-toggle.css' ] , host : { 'class' : 'mat-datepicker-toggle' , '[attr.tabindex]' : '-1' , '[class.mat-datepicker-toggle-active]' : 'datepicker && datepicker.opened' , '[class.mat-accent]' : 'datepicker && datepicker.color === "accent"' , '[class.mat-warn]' : 'datepicker && datepicker.color === "warn"' , '(focus)' : '_button.focus()' , } , exportAs : 'matDatepickerToggle' , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class MatDatepickerToggle < D > implements AfterContentInit , OnChanges , OnDestroy { private _stateChanges = Subscription . EMPTY ; /** Datepicker instance that the button will toggle. */ @ Input ( 'for' ) datepicker : MatDatepicker < D > ; /** Tabindex for the toggle. */ @ Input ( ) tabIndex : number | null ; /** Whether the toggle button is disabled. */ @ Input ( ) get disabled ( ) : boolean { return this . _disabled === undefined ? this . datepicker . disabled : ! ! this . _disabled ; } set disabled ( value ) { this . _disabled = coerceBooleanProperty ( value ) ; } private _disabled : boolean ; /** Whether ripples on the toggle should be disabled. */ @ Input ( ) disableRipple : boolean ; /** Custom icon set by the consumer. */ @ ContentChild ( MatDatepickerToggleIcon ) _customIcon : MatDatepickerToggleIcon ; /** Underlying button element. */ @ ViewChild ( 'button' ) _button : MatButton ; constructor ( public _intl , private _changeDetectorRef , @ Attribute ( 'tabindex' ) defaultTabIndex ) { const parsedTabIndex = Number ( defaultTabIndex ) ; this . tabIndex = ( parsedTabIndex || parsedTabIndex === 0 ) ? parsedTabIndex : null ; } ngOnChanges ( changes ) { if ( changes . datepicker ) { this . _watchStateChanges ( ) ; } } ngOnDestroy ( ) { this . _stateChanges . unsubscribe ( ) ; } ngAfterContentInit ( ) { this . _watchStateChanges ( ) ; } _open ( event ) { if ( this . datepicker && ! this . disabled ) { this . datepicker . open ( ) ; event . stopPropagation ( ) ; } } private _watchStateChanges ( ) { const datepickerDisabled = this . datepicker ? this . datepicker . _disabledChange : observableOf ( ) ; const inputDisabled = this . datepicker && this . datepicker . _datepickerInput ? this . datepicker . _datepickerInput . _disabledChange : observableOf ( ) ; const datepickerToggled = this . datepicker ? merge ( this . datepicker . openedStream , this . datepicker . closedStream ) : observableOf ( ) ; this . _stateChanges . unsubscribe ( ) ; this . _stateChanges = merge ( this . _intl . changes , datepickerDisabled , inputDisabled , datepickerToggled ) . subscribe ( ( ) => this . _changeDetectorRef . markForCheck ( ) ) ; } }