[ACA] Header - custom color (#114)

* custom header color

* use SecurityContext.STYLE

src/app/components/header/header.component.html

@@ -1,4 +1,4 @@
-<adf-toolbar class="app-menu">
+<adf-toolbar class="app-menu" [style.background-color]="backgroundColor">
     <adf-toolbar-title>
         <a class="app-menu__title"
             title="{{ appName }}"

src/app/components/header/header.component.scss

@@ -4,7 +4,7 @@
 
     &.adf-toolbar {
         .mat-toolbar {
-            background-color: #2196F3;
+            background-color: inherit;
             font-family: inherit;
             min-height: $app-menu-height;
             height: $app-menu-height;

src/app/components/header/header.component.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { Component, ViewEncapsulation, SecurityContext } from '@angular/core';
 import { AppConfigService } from '@alfresco/adf-core';
 
 @Component({
@@ -26,8 +27,12 @@ import { AppConfigService } from '@alfresco/adf-core';
 })
 export class HeaderComponent {
     private defaultPath = '/assets/images/alfresco-logo-white.svg';
+    private defaultBackgroundColor = '#2196F3';
 
-    constructor(private appConfig: AppConfigService) {}
+    constructor(
+        private appConfig: AppConfigService,
+        private sanitizer: DomSanitizer
+    ) {}
 
     get appName(): string {
         return <string>this.appConfig.get('application.name');
@@ -36,4 +41,9 @@ export class HeaderComponent {
     get logo() {
         return this.appConfig.get('logo', this.defaultPath);
     }
+
+    get backgroundColor() {
+        const color = this.appConfig.get('headerColor', this.defaultBackgroundColor);
+        return this.sanitizer.sanitize(SecurityContext.STYLE, color);
+    }
 }