import { BooleanInput , coerceBooleanProperty } from '@angular/cdk/coercion' ; import { BreakpointObserver } from '@angular/cdk/layout' ; import { ScrollDispatcher } from '@angular/cdk/scrolling' ; import { AfterContentInit , ChangeDetectionStrategy , ChangeDetectorRef , Component , ContentChild , ContentChildren , ElementRef , EventEmitter , Inject , Input , NgZone , Output , QueryList , ViewChild , ViewEncapsulation , } from '@angular/core' ; import { startWith } from 'rxjs/operators' ; import { SbbSidebarBase , SbbSidebarContainerBase , SbbSidebarContentBase , SbbSidebarMobileCapableContainer , SBB_SIDEBAR_CONTAINER , } from '../sidebar-base' ; @ Component ( { selector : 'sbb-icon-sidebar-content' , template : '<ng-content></ng-content>' , host : { class : 'sbb-icon-sidebar-content sbb-scrollbar' , } , changeDetection : ChangeDetectionStrategy . OnPush , encapsulation : ViewEncapsulation . None , } ) export class SbbIconSidebarContent extends SbbSidebarContentBase { constructor ( elementRef , scrollDispatcher , ngZone ) { super ( elementRef , scrollDispatcher , ngZone ) ; } } @ Component ( { selector : 'sbb-icon-sidebar' , exportAs : 'sbbIconSidebar' , templateUrl : './icon-sidebar.html' , host : { class : 'sbb-icon-sidebar' , tabIndex : '-1' , '[attr.align]' : 'null' , role : 'navigation' , '[class.sbb-icon-sidebar-expanded]' : 'expanded && !_container._mobile' , '[class.sbb-icon-sidebar-collapsed]' : '!expanded && !_container._mobile' , } , changeDetection : ChangeDetectionStrategy . OnPush , encapsulation : ViewEncapsulation . None , } ) export class SbbIconSidebar extends SbbSidebarBase { _labelCollapse : string = typeof $localize === 'function' ? $localize `:Label to 'collapse' icon sidebar@@sbbSidebarCollapse:Collapse` : 'Collapse' ; _labelExpand : string = typeof $localize === 'function' ? $localize `:Label to 'expand' icon sidebar@@sbbSidebarExpand:Expand` : 'Expand' ; /** Whether the sidebar is expanded. */ @ Input ( ) get expanded ( ) : boolean { return this . _expanded ; } set expanded ( value ) { this . toggleExpanded ( coerceBooleanProperty ( value ) ) ; } private _expanded = false ; /** Event emitted when the icon sidebar expanded state is changed. */ @ Output ( ) readonly expandedChange : EventEmitter < boolean > = new EventEmitter < boolean > ( true ) ; constructor ( @ Inject ( SBB_SIDEBAR_CONTAINER ) container , private _changeDetectorRef , private _elementRef ) { super ( container ) ; } toggleExpanded ( expanded = ! this . _expanded ) { this . _expanded = expanded ; this . expandedChange . emit ( this . expanded ) ; } _mobileChanged ( mobile ) { this . _elementRef . nativeElement . querySelector ( '.sbb-icon-sidebar-inner-container' ) ! . scrollLeft = 0 ; this . _changeDetectorRef . markForCheck ( ) ; } } @ Component ( { selector : 'sbb-icon-sidebar-container' , exportAs : 'sbbIconSidebarContainer' , templateUrl : './icon-sidebar-container.html' , styleUrls : [ './icon-sidebar.css' ] , host : { class : 'sbb-icon-sidebar-container' , '[class.sbb-icon-sidebar-container-mobile]' : '_mobile' , } , changeDetection : ChangeDetectionStrategy . OnPush , encapsulation : ViewEncapsulation . None , providers : [ { provide : SBB_SIDEBAR_CONTAINER , useExisting : SbbIconSidebarContainer , } , ] , } ) export class SbbIconSidebarContainer extends SbbSidebarContainerBase < SbbIconSidebar > implements AfterContentInit , SbbSidebarMobileCapableContainer { /** All sidebars in the container. Includes sidebars from inside nested containers. */ @ ContentChildren ( SbbIconSidebar , { descendants : true , } ) override _allSidebars : QueryList < SbbIconSidebar > ; @ ContentChild ( SbbIconSidebarContent ) override _content : SbbIconSidebarContent ; @ ViewChild ( SbbIconSidebarContent ) override _userContent : SbbIconSidebarContent ; constructor ( ngZone , changeDetectorRef , breakpointObserver ) { super ( ngZone , changeDetectorRef , breakpointObserver ) ; } override ngAfterContentInit ( ) { super . ngAfterContentInit ( ) ; this . _sidebars . changes . pipe ( startWith ( null ) ) . subscribe ( ( ) => { this . _validateSidebars ( ) ; } ) ; this . _watchBreakpointObserver ( ) ; } }