[AAE-6057] Customize text color in the header (#7325)

* [AAE-6057] Customize text color in the header

* [AAE-6057] Updates documents

* [AAE-6057] Use css variables to update header colors

* Revert "[AAE-6057] Updates documents"

This reverts commit 1915535c01b77c58d9a6d87bb242e04715bcbc6f.

* [AAE-6057] Fix for css name change

* [AAE-6057] Removing has-mat-color

* [AAE-6057] Removing redundant tests

demo-shell/src/app/components/header-data/header-data.component.html

@@ -26,6 +26,14 @@
             <p>*press enter for submitting new title</p>
         </div>
 
+        <div>
+            <label>Change header text color</label>
+            <input type="text" name="headerColor" (keyup.enter)="submitHeaderTextColor($any($event).target.value)"
+                   placeholder="{{ 'APP_LAYOUT.HEADER_TEXT_COLOR' | translate}}">
+            <p>*press enter for submitting new color text</p>
+            <p>*hex color</p>
+        </div>
+
         <div>
             <label>Change logo</label>
             <input type="text" placeholder="URL path" (keyup.enter)="submitLogo($any($event).target.value)">

demo-shell/src/app/components/header-data/header-data.component.ts

@@ -27,6 +27,11 @@ export class HeaderDataComponent {
     checkbox = true;
     position: 'start' | 'end' = 'start';
     hideSidenavToggle = false;
+    colorsHashesTests = [
+        /#[a-z0-9]{3}/i,
+        /#[a-z0-9]{4}/i,
+        /#[a-z0-9]{6}/i
+    ];
 
     constructor(private headerService: HeaderDataService) {
     }
@@ -45,6 +50,14 @@ export class HeaderDataComponent {
         }
     }
 
+    submitHeaderTextColor(color: string): void {
+        const isColorHashValid = this.colorsHashesTests.some(colorTest => colorTest.test(color));
+
+        if (isColorHashValid || !color) {
+            this.headerService.changeHeaderTextColor(color);
+        }
+    }
+
     submitLogo(logoPath: string) {
         if (logoPath) {
             this.headerService.changeLogo(logoPath);

demo-shell/src/app/components/header-data/header-data.service.ts

@@ -28,6 +28,7 @@ export class HeaderDataService {
 
     @Output() hideMenu = new EventEmitter<boolean>();
     @Output() color = new EventEmitter<ThemePalette>();
+    @Output() headerTextColor = new EventEmitter<string>();
     @Output() title = new EventEmitter<string>();
     @Output() logo = new EventEmitter<string>();
     @Output() redirectUrl = new EventEmitter<string | any[]>();
@@ -46,13 +47,16 @@ export class HeaderDataService {
 
     changeTitle(title: string) {
         this.title.emit(title);
-
     }
 
     changeLogo(logoPath: string) {
         this.logo.emit(logoPath);
     }
 
+    changeHeaderTextColor(color: string): void {
+        this.headerTextColor.emit(color);
+    }
+
     changeRedirectUrl(redirectUrl: string | any[]) {
         this.redirectUrl.emit(redirectUrl);
     }