import { AfterViewInit , Component , ElementRef , OnDestroy , QueryList , ViewChildren } from '@angular/core' ; import { NavigationExtras } from '@angular/router' ; import { BehaviorSubject , Subject } from 'rxjs' ; import { distinctUntilChanged , takeUntil } from 'rxjs/operators' ; import { ResizeService } from '../../../directives/resize/index' ; import { PageHeaderNavigation , PageHeaderService } from '../page-header.service' ; import { PageHeaderNavigationItemComponent } from './navigation-item/navigation-item.component' ; import { PageHeaderNavigationService } from './navigation.service' ; @ Component ( { selector : 'ux-page-header-horizontal-navigation' , templateUrl : './navigation.component.html' , providers : [ PageHeaderNavigationService ] , host : { 'role' : 'menubar' } } ) export class PageHeaderNavigationComponent implements AfterViewInit , OnDestroy { @ ViewChildren ( PageHeaderNavigationItemComponent ) menuItems : QueryList < PageHeaderNavigationItemComponent > ; items$ : BehaviorSubject < PageHeaderNavigationItem [ ] > = this . _pageHeaderService . items$ ; indicatorVisible : boolean = false ; indicatorX : number = 0 ; indicatorWidth : number = 0 ; private _onDestroy = new Subject ( ) ; constructor ( elementRef , resizeService , private _navigationService , private _pageHeaderService ) { resizeService . addResizeListener ( elementRef . nativeElement ) . pipe ( takeUntil ( this . _onDestroy ) ) . subscribe ( this . updateSelectedIndicator . bind ( this ) ) ; _pageHeaderService . selected$ . pipe ( takeUntil ( this . _onDestroy ) , distinctUntilChanged ( ) ) . subscribe ( this . updateSelectedIndicator . bind ( this ) ) ; _pageHeaderService . secondary$ . pipe ( takeUntil ( this . _onDestroy ) , distinctUntilChanged ( ) ) . subscribe ( this . updateSelectedIndicator . bind ( this ) ) ; } ngAfterViewInit ( ) { this . updateSelectedIndicator ( ) ; this . _navigationService . initialize ( this . menuItems ) ; } ngOnDestroy ( ) { this . _onDestroy . next ( ) ; this . _onDestroy . complete ( ) ; } updateSelectedIndicator ( ) { setTimeout ( ( ) => { const selected = this . menuItems . find ( item => item . item . selected ) ; this . indicatorVisible = ! ! selected ; if ( selected ) { const styles = getComputedStyle ( selected . elementRef . nativeElement ) ; this . indicatorX = selected . elementRef . nativeElement . offsetLeft ; this . indicatorWidth = parseInt ( styles . getPropertyValue ( 'width' ) ) ; } } ) ; } } export interface PageHeaderNavigationItem { icon ? : string ; title : string ; selected ? : boolean ; routerLink ? : string | any [ ] ; routerExtras ? : NavigationExtras ; select ? : ( item : PageHeaderNavigationItem ) => void ; children ? : PageHeaderNavigationDropdownItem [ ] ; parent ? : PageHeaderNavigation ; disabled ? : boolean ; } export interface PageHeaderNavigationDropdownItem { title : string ; selected ? : boolean ; routerLink ? : string | any [ ] ; routerExtras ? : NavigationExtras ; select ? : ( item : PageHeaderNavigationDropdownItem ) => void ; children ? : PageHeaderNavigationDropdownItem [ ] ; parent ? : PageHeaderNavigation ; disabled ? : boolean ; } export interface PageHeaderSecondaryNavigationItem extends PageHeaderNavigationDropdownItem { }