[ADF-3339] added test component for header (#3576)

* [ADF-3339] added test component for header

* [APM-3339] remove lint errors

* [ADF-3339] solved lint error

* [ADF-3339] removed numbers from tests

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

@@ -0,0 +1,26 @@
+<div class="content header-data">
+    <h1>Header data</h1>
+    <mat-card>
+        <mat-checkbox [(ngModel)]="checkbox" (change)="hideButton()">Show menu button</mat-checkbox>
+
+        <div>
+            <label>Choose header color</label>
+            <select (change)="changeColor($event.target.value)">
+                <option value="primary">Primary</option>
+                <option value="accent">Accent</option>
+            </select>
+        </div>
+
+        <div>
+            <label>Change title</label>
+            <input type="text" name="title" (keyup.enter)="submitTitle($event.target.value)" placeholder ="{{ 'APP_LAYOUT.APP_NAME' | translate}}">
+            <p>*press enter for submitting new title</p>
+        </div>
+
+        <div>
+            <label>Change logo</label>
+            <input type="text" placeholder ="URL path" (keyup.enter)="submitLogo($event.target.value)" >
+            <p>*press enter for submitting new logo</p>
+        </div>
+    </mat-card>
+</div>

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

@@ -0,0 +1,15 @@
+.content {
+    padding: 10px;
+    .mat-card {
+        padding: 16px 24px;
+        max-width: 100% !important;
+        max-height: 100% !important;
+
+        .mat-form-field, input, select {
+            display: block;
+            width: 100%;
+            height: 30px;
+            margin-bottom: 20px;
+        }
+    }
+}

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

@@ -0,0 +1,49 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { HeaderDataService } from './header-data.service';
+
+@Component({
+    templateUrl: './header-data.component.html',
+    styleUrls: ['./header-data.component.scss']
+})
+export class HeaderDataComponent {
+    checkbox = true;
+
+    constructor(private headerService: HeaderDataService) {}
+
+    hideButton() {
+        this.headerService.hideMenuButton();
+    }
+
+    changeColor(color: string) {
+        this.headerService.changeColor(color);
+    }
+
+    submitTitle(title: string) {
+        if (title) {
+            this.headerService.changeTitle(title);
+        }
+    }
+
+    submitLogo(logoPath: string) {
+        if (logoPath) {
+            this.headerService.changeLogo(logoPath);
+        }
+    }
+}

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

@@ -0,0 +1,31 @@
+import { Injectable, Output, EventEmitter } from '@angular/core';
+
+
+@Injectable()
+export class HeaderDataService {
+
+  show = true;
+
+  @Output() hideMenu: EventEmitter<boolean> = new EventEmitter();
+  @Output() color: EventEmitter<string> = new EventEmitter();
+  @Output() title: EventEmitter<string> = new EventEmitter();
+  @Output() logo: EventEmitter<string> = new EventEmitter();
+
+  hideMenuButton() {
+    this.show = !this.show;
+    this.hideMenu.emit(this.show);
+  }
+
+  changeColor(color: string) {
+    this.color.emit(color);
+  }
+
+  changeTitle(title: string) {
+    this.title.emit(title);
+
+  }
+
+  changeLogo(logoPath: string) {
+    this.logo.emit(logoPath);
+  }
+}