import { FocusableOption } from '@angular/cdk/a11y' ; import { LEFT_ARROW , RIGHT_ARROW } from '@angular/cdk/keycodes' ; import { AfterViewInit , Component , ElementRef , HostListener , Input , OnDestroy , ViewChild } from '@angular/core' ; import { BehaviorSubject , Observable , Subject } from 'rxjs' ; import { takeUntil } from 'rxjs/operators' ; import { getIconType , IconType } from '../../../../common/index' ; import { tick } from '../../../../common/operators/index' ; import { PageHeaderService } from '../../page-header.service' ; import type { PageHeaderNavigationItem } from '../navigation.component' ; import { PageHeaderNavigationService } from '../navigation.service' ; @ Component ( { selector : 'ux-page-header-horizontal-navigation-item' , templateUrl : './navigation-item.component.html' } ) export class PageHeaderNavigationItemComponent implements AfterViewInit , OnDestroy , FocusableOption { /** Access the data for this dropdown item */ @ Input ( ) set item ( item ) { this . _item = item ; this . _iconType = getIconType ( item . icon ) ; } get item ( ) : PageHeaderNavigationItem { return this . _item ; } /** Store the secondary state */ secondary$ : BehaviorSubject < boolean > = this . _pageHeaderService . secondary$ ; /** Store the open state of the item dropdown */ isOpen : boolean ; /** Store the item data */ _item : PageHeaderNavigationItem ; /** Store the icon type */ _iconType : IconType ; /** Update the tabindex based on keyboard input */ _tabindex : Observable < number > = this . _navigationService . getTabIndex ( this ) ; /** Access the navigation button element */ @ ViewChild ( 'navigationBtn' , { static : false } ) navigationBtn : ElementRef ; /** Unsubscribe when the component is destroyed */ private _onDestroy = new Subject < void > ( ) ; constructor ( public elementRef , private _pageHeaderService , private _navigationService ) { } ngAfterViewInit ( ) { this . _pageHeaderService . selected$ . pipe ( tick ( ) , takeUntil ( this . _onDestroy ) ) . subscribe ( selectedItem => { this . _pageHeaderService . updateItem ( this . item , selectedItem ) ; if ( selectedItem && this . isOpen ) { this . isOpen = false ; } } ) ; } ngOnDestroy ( ) { this . _onDestroy . next ( ) ; this . _onDestroy . complete ( ) ; } focus ( ) { this . navigationBtn . nativeElement . focus ( ) ; } select ( ) { if ( this . item . disabled || ( this . item . children && this . _pageHeaderService . secondary$ . getValue ( ) === false ) ) { return ; } if ( this . _pageHeaderService . secondaryNavigationAutoselect && Array . isArray ( this . item . children ) ) { this . item . children . forEach ( item => item . selected = false ) ; } this . _pageHeaderService . select ( this . item ) ; } @ HostListener ( 'keydown' , [ '$event' ] ) onKeydown ( event ) { if ( event . keyCode === LEFT_ARROW || event . keyCode === RIGHT_ARROW ) { this . _navigationService . onKeydown ( event ) ; } } }