import { Component , ViewEncapsulation , Output , EventEmitter , OnInit , Input , OnDestroy } from '@angular/core' ; import { Store } from '@ngrx/store' ; import { Observable , Subject } from 'rxjs' ; import { ContentActionRef } from '@alfresco/adf-extensions' ; import { AppStore , getHeaderColor , getAppName , getLogoPath , getHeaderImagePath , getHeaderTextColor } from '@alfresco/aca-shared/store' ; import { AppExtensionService } from '@alfresco/aca-shared' ; import { takeUntil } from 'rxjs/operators' ; @ Component ( { selector : 'app-header' , templateUrl : './header.component.html' , styleUrls : [ './header.component.scss' ] , encapsulation : ViewEncapsulation . None , host : { class : 'app-header' } } ) export class AppHeaderComponent implements OnInit , OnDestroy { private onDestroy$ : Subject < boolean > = new Subject < boolean > ( ) ; @ Output ( ) toggleClicked = new EventEmitter ( ) ; @ Input ( ) expandedSidenav = true ; appName$ : Observable < string > ; headerColor$ : Observable < any > ; headerTextColor$ : Observable < string > ; logo$ : Observable < string > ; actions : Array < ContentActionRef > = [ ] ; constructor ( store , private appExtensions ) { this . headerColor$ = store . select ( getHeaderColor ) ; this . headerTextColor$ = store . select ( getHeaderTextColor ) ; this . appName$ = store . select ( getAppName ) ; this . logo$ = store . select ( getLogoPath ) ; store . select ( getHeaderImagePath ) . subscribe ( ( path ) => { document . body . style . setProperty ( '--header-background-image' , `url('${ path }')` ) ; } ) ; } ngOnInit ( ) { this . appExtensions . getHeaderActions ( ) . pipe ( takeUntil ( this . onDestroy$ ) ) . subscribe ( ( actions ) => { this . actions = actions ; } ) ; this . headerTextColor$ . subscribe ( ( color ) => { document . documentElement . style . setProperty ( '--adf-header-text-color' , color ) ; } ) ; } ngOnDestroy ( ) { this . onDestroy$ . next ( true ) ; this . onDestroy$ . complete ( ) ; } trackByActionId ( _ , action ) { return action . id ; } }