import { FocusableOption , FocusMonitor , FocusOrigin } from '@angular/cdk/a11y' ; import { ENTER , hasModifierKey , SPACE } from '@angular/cdk/keycodes' ; import { DOCUMENT } from '@angular/common' ; import { AfterViewInit , Attribute , ChangeDetectionStrategy , ChangeDetectorRef , Component , ElementRef , Host , HostListener , Inject , OnDestroy , ViewEncapsulation , } from '@angular/core' ; import { HasTabIndex , mixinTabIndex , TypeRef } from '@sbb-esta/angular/core' ; import { EMPTY , merge , Subscription } from 'rxjs' ; import { filter } from 'rxjs/operators' ; import { sbbExpansionAnimations } from './accordion-animations' ; import { SbbExpansionPanel } from './expansion-panel' ; docs-private abstract class SbbExpansionPanelHeaderBase { abstract readonly disabled : boolean ; } const _SbbExpansionPanelHeaderMixinBase = mixinTabIndex ( SbbExpansionPanelHeaderBase ) ; /**
 * This component corresponds to the header element of an `<sbb-expansion-panel>`.
 */ @ Component ( { selector : 'sbb-expansion-panel-header' , templateUrl : './expansion-panel-header.html' , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush , inputs : [ 'tabIndex' ] , animations : [ sbbExpansionAnimations . indicatorRotate ] , host : { class : 'sbb-expansion-panel-header sbb-expansion-panel-horizontal-padding' , role : 'button' , '[attr.id]' : 'panel._headerId' , '[attr.tabindex]' : 'tabIndex' , '[attr.aria-controls]' : '_getPanelId()' , '[attr.aria-expanded]' : '_isExpanded()' , '[attr.aria-disabled]' : 'disabled' , '[class.sbb-expanded]' : '_isExpanded()' , '[class.sbb-disabled]' : 'disabled' , } , } ) export class SbbExpansionPanelHeader extends _SbbExpansionPanelHeaderMixinBase implements AfterViewInit , OnDestroy , FocusableOption , HasTabIndex { private _parentChangeSubscription = Subscription . EMPTY ; constructor ( @ Host ( ) public panel , private _element , private _focusMonitor , private _changeDetectorRef , @ Inject ( DOCUMENT ) private _document ? , @ Attribute ( 'tabindex' ) tabIndex ? ) { super ( ) ; const accordionHideToggleChange = panel . accordion ? panel . accordion . _stateChanges . pipe ( filter ( ( changes ) => ! ! changes . hideToggle ) ) : EMPTY ; this . tabIndex = parseInt ( tabIndex || '' , 10 ) || 0 ; this . _parentChangeSubscription = merge ( panel . opened , panel . closed , accordionHideToggleChange , panel . _inputChanges . pipe ( filter ( ( changes ) => ! ! ( changes . hideToggle || changes . disabled ) ) ) ) . subscribe ( ( ) => this . _changeDetectorRef . markForCheck ( ) ) ; panel . closed . pipe ( filter ( ( ) => panel . _containsFocus ( ) ) ) . subscribe ( ( ) => _focusMonitor . focusVia ( _element , 'program' ) ) ; } docs-private get disabled ( ) { return this . panel . disabled ; } /** Toggles the expanded state of the panel. */ @ HostListener ( 'click' ) _toggle ( ) { if ( ! this . disabled ) { this . panel . toggle ( ) ; } } /** Gets whether the panel is expanded. */ _isExpanded ( ) { return this . panel . expanded ; } /** Gets the expanded state string of the panel. */ _getExpandedState ( ) { return this . panel . _getExpandedState ( ) ; } /** Gets the panel id. */ _getPanelId ( ) { return this . panel . id ; } /** Gets whether the expand indicator should be shown. */ _showToggle ( ) { return ! this . panel . hideToggle && ! this . panel . disabled ; } /** Handle keydown event calling to toggle() if appropriate. */ @ HostListener ( 'keydown' , [ '$event' ] ) _keydown ( event ) { switch ( event . keyCode ) { case SPACE : case ENTER : if ( ! hasModifierKey ( event ) && this . _isFocused ( ) ) { event . preventDefault ( ) ; this . _toggle ( ) ; } break ; default : if ( this . panel . accordion ) { this . panel . accordion . _handleHeaderKeydown ( event ) ; } return ; } } param origin docs-private focus ( origin ? , options ? ) { if ( origin ) { this . _focusMonitor . focusVia ( this . _element , origin , options ) ; } else { this . _element . nativeElement . focus ( options ) ; } } ngAfterViewInit ( ) { this . _focusMonitor . monitor ( this . _element ) . subscribe ( ( origin ) => { if ( origin && this . panel . accordion ) { this . panel . accordion . _handleHeaderFocus ( this ) ; } } ) ; } ngOnDestroy ( ) { this . _parentChangeSubscription . unsubscribe ( ) ; this . _focusMonitor . stopMonitoring ( this . _element ) ; } private _isFocused ( ) { return this . _document ?. activeElement === this . _element . nativeElement ; } }