[AAE-17807] fix for header background color (#9067)

* [AAE-17807] fix for header background color

* [AAE-17807] added unit tests

lib/core/src/lib/layout/components/header/header.component.html

@@ -1,5 +1,6 @@
 <mat-toolbar
     [color]="color"
+    [style.background-color]="color"
     [style.background-image]="'url(' + backgroundImage + ')'">
     <button
         *ngIf="showSidenavToggle && position === 'start'"

lib/core/src/lib/layout/components/header/header.component.spec.ts

@@ -72,6 +72,15 @@ describe('HeaderLayoutComponent', () => {
             expect(await host.getAttribute('ng-reflect-color')).toBe('primary');
         });
 
+        it('should change background color when custom is provided', async () => {
+            component.color = '#42f57e';
+            fixture.detectChanges();
+
+            const toolbarHarness = await loader.getHarness(MatToolbarHarness);
+            const toolbar = await toolbarHarness.host();
+            expect(await toolbar.getCssValue('background-color')).toBe('rgb(66, 245, 126)');
+        });
+
         it('should change background image when provided', async () => {
             component.backgroundImage = '/assets/someImage.png';
             fixture.detectChanges();

lib/core/src/lib/layout/components/header/header.component.stories.ts

@@ -41,7 +41,7 @@ export default {
     argTypes: {
         color: {
             control: 'radio',
-            options: ['primary', 'accent', 'warn', undefined],
+            options: ['primary', 'accent', 'warn', '#42f57e', undefined],
             defaultValue: undefined,
             description: `Background color for the header.
                 It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`,

lib/core/src/lib/layout/components/header/header.component.ts

@@ -46,7 +46,7 @@ export class HeaderLayoutComponent implements OnInit {
      * Background color for the header. It can be any hex color code or one
      * of the Material theme colors: 'primary', 'accent' or 'warn'.
      */
-    @Input() color: ThemePalette;
+    @Input() color: ThemePalette | string;
 
     /** Path to a background image for the header. */
     @Input() backgroundImage: string;