From 2429bb4266140c122b819ce5b44893d7d236bdb2 Mon Sep 17 00:00:00 2001
From: Bartosz Sekula <bartosz.sekula@hyland.com>
Date: Thu, 25 May 2023 16:56:26 +0200
Subject: [PATCH] [AAE-14030] Custom header text color is not working on apa
 (#8592)

* [AAE-14030] Custom header text color is not working on apa

* CR

* Fix for demo app
---
 .../components/app-layout/app-layout.component.ts |  2 +-
 lib/core/src/lib/app-config/app-config.service.ts |  6 +++---
 .../components/header/header.component.html       |  1 +
 .../components/header/header.component.scss       |  2 +-
 .../layout/components/header/header.component.ts  | 15 +++++++++++++++
 lib/core/src/lib/styles/_index.scss               |  1 +
 6 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts
index fb8d0b0f43..476aed225c 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.ts
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts
@@ -138,7 +138,7 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
         this.headerService.headerTextColor
             .pipe(takeUntil(this.onDestroy$))
             .subscribe(headerTextColor => {
-                document.documentElement.style.setProperty('--theme-primary-color-default-contrast', headerTextColor);
+                document.documentElement.style.setProperty('--theme-header-text-color', headerTextColor);
             });
 
         this.headerService.logo
diff --git a/lib/core/src/lib/app-config/app-config.service.ts b/lib/core/src/lib/app-config/app-config.service.ts
index 03faa4fb6c..47d8c453fd 100644
--- a/lib/core/src/lib/app-config/app-config.service.ts
+++ b/lib/core/src/lib/app-config/app-config.service.ts
@@ -18,7 +18,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ObjectUtils } from '../common/utils/object-utils';
-import { Observable, Subject } from 'rxjs';
+import { Observable, ReplaySubject } from 'rxjs';
 import { map, distinctUntilChanged, take } from 'rxjs/operators';
 import { ExtensionConfig, ExtensionService, mergeObjects } from '@alfresco/adf-extensions';
 import { OpenidConfiguration } from '../auth/interfaces/openid-configuration.interface';
@@ -70,11 +70,11 @@ export class AppConfigService {
     };
 
     status: Status = Status.INIT;
-    protected onLoadSubject: Subject<any>;
+    protected onLoadSubject: ReplaySubject<any>;
     onLoad: Observable<any>;
 
     constructor(protected http: HttpClient, protected extensionService: ExtensionService) {
-        this.onLoadSubject = new Subject();
+        this.onLoadSubject = new ReplaySubject();
         this.onLoad = this.onLoadSubject.asObservable();
 
         extensionService.setup$.subscribe((config) => {
diff --git a/lib/core/src/lib/layout/components/header/header.component.html b/lib/core/src/lib/layout/components/header/header.component.html
index 30e07023e0..c266389b77 100644
--- a/lib/core/src/lib/layout/components/header/header.component.html
+++ b/lib/core/src/lib/layout/components/header/header.component.html
@@ -32,6 +32,7 @@
         >
         {{ title }}
     </h1>
+
     <ng-content></ng-content>
 
     <button
diff --git a/lib/core/src/lib/layout/components/header/header.component.scss b/lib/core/src/lib/layout/components/header/header.component.scss
index b1da435932..13eccdd07a 100644
--- a/lib/core/src/lib/layout/components/header/header.component.scss
+++ b/lib/core/src/lib/layout/components/header/header.component.scss
@@ -1,5 +1,5 @@
 adf-layout-header .mat-toolbar-single-row {
-    color: var(--theme-primary-color-default-contrast) !important;
+    color: var(--theme-header-text-color) !important;
     background-color: var(--theme-primary-color);
     position: relative;
     padding: 0 24px;
diff --git a/lib/core/src/lib/layout/components/header/header.component.ts b/lib/core/src/lib/layout/components/header/header.component.ts
index 3fab025ff5..532fed34ce 100644
--- a/lib/core/src/lib/layout/components/header/header.component.ts
+++ b/lib/core/src/lib/layout/components/header/header.component.ts
@@ -17,6 +17,8 @@
 
 import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
+import { AppConfigService } from '../../../app-config/app-config.service';
+import { filter, take } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-layout-header',
@@ -59,6 +61,19 @@ export class HeaderLayoutComponent implements OnInit {
     /** The side of the page that the drawer is attached to (can be 'start' or 'end') */
     @Input() position = 'start';
 
+    constructor(
+        private appConfigService: AppConfigService
+    ) {
+        this.appConfigService.select('headerTextColor')
+            .pipe(
+                filter((textColor) => !!textColor),
+                take(1)
+            )
+            .subscribe((textColor) => {
+                document.documentElement.style.setProperty('--theme-header-text-color', textColor);
+            });
+    }
+
     toggleMenu() {
         this.clicked.emit(true);
         this.expandedSidenav = !this.expandedSidenav;
diff --git a/lib/core/src/lib/styles/_index.scss b/lib/core/src/lib/styles/_index.scss
index aafe2ae587..57e7ac22d2 100644
--- a/lib/core/src/lib/styles/_index.scss
+++ b/lib/core/src/lib/styles/_index.scss
@@ -29,6 +29,7 @@
         // theme colors
         --theme-primary-color: mat.get-color-from-palette($primary),
         --theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
+        --theme-header-text-color: mat.get-color-from-palette($primary, default-contrast),
         --adf-theme-primary-50:mat.get-color-from-palette($primary, 50),
         --adf-theme-primary-100:mat.get-color-from-palette($primary, 100),
         --adf-theme-primary-300:mat.get-color-from-palette($primary, 300),