From f915370bc0fe5360d9d8af8330a877444e313132 Mon Sep 17 00:00:00 2001
From: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Date: Thu, 15 Jun 2023 18:23:55 +0200
Subject: [PATCH] [AAE-15251] Making header component more customizable (#8670)

---
 docs/core/components/header.component.md      |  2 +
 .../components/header/header.component.html   |  6 +--
 .../header/header.component.spec.ts           | 37 +++++++++++++++++++
 .../components/header/header.component.ts     |  6 +++
 4 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/docs/core/components/header.component.md b/docs/core/components/header.component.md
index 90e4ace1ab..c3dbbc4ad2 100644
--- a/docs/core/components/header.component.md
+++ b/docs/core/components/header.component.md
@@ -46,6 +46,8 @@ body of the element:
 | showSidenavToggle | `boolean` | true | Toggles whether the sidenav button will be displayed in the header or not. |
 | title | `string` |  | Title of the application. |
 | tooltip | `string` |  | The tooltip text for the application logo. |
+| toggleIcon | `string` | "menu" | The toggle icon that will be used inside header. |
+| showLogo | `boolean` | true | Toggles whether the logo will be displayed inside the header or not. |
 
 ### Events
 
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 c266389b77..757ee41725 100644
--- a/lib/core/src/lib/layout/components/header/header.component.html
+++ b/lib/core/src/lib/layout/components/header/header.component.html
@@ -13,10 +13,10 @@
         <mat-icon
             class="mat-icon material-icon"
             role="img"
-            aria-hidden="true">menu</mat-icon>
+            aria-hidden="true">{{ toggleIcon }}</mat-icon>
     </button>
 
-    <a [routerLink]="redirectUrl" title="{{ tooltip }}">
+    <a *ngIf="showLogo" [routerLink]="redirectUrl" title="{{ tooltip }}">
         <img
             src="{{ logo }}"
             class="adf-app-logo"
@@ -48,6 +48,6 @@
         <mat-icon
             class="mat-icon material-icon"
             role="img"
-            aria-hidden="true">menu</mat-icon>
+            aria-hidden="true">{{ toggleIcon }}</mat-icon>
     </button>
 </mat-toolbar>
diff --git a/lib/core/src/lib/layout/components/header/header.component.spec.ts b/lib/core/src/lib/layout/components/header/header.component.spec.ts
index 3f69d8deba..f454fc45b4 100644
--- a/lib/core/src/lib/layout/components/header/header.component.spec.ts
+++ b/lib/core/src/lib/layout/components/header/header.component.spec.ts
@@ -175,6 +175,43 @@ describe('HeaderLayoutComponent', () => {
             expect(buttonStart === null).toBeFalsy();
             expect(buttonEnd === null).toBeTruthy();
         });
+
+        it('should display the logo image when the input is set to true [showLogo=true]', () => {
+            component.showLogo = true;
+            fixture.detectChanges();
+
+            const logo = fixture.debugElement.query(By.css('.adf-app-logo'));
+
+            expect(logo.nativeElement).not.toBeNull();
+        });
+
+        it('should NOT display the logo image when the input is set to false [showLogo=false]', () => {
+            component.showLogo = false;
+            fixture.detectChanges();
+
+            const logo = fixture.debugElement.query(By.css('.adf-app-logo'));
+
+            expect(logo).toBeNull();
+        });
+
+        it('should display the default toggle icon', () => {
+            component.showSidenavToggle = true;
+            fixture.detectChanges();
+
+            const toggleIcon = fixture.debugElement.query(By.css('.adf-menu-icon'));
+
+            expect(toggleIcon.nativeElement.textContent).toBe('menu');
+        });
+
+        it('should display the correct toggle icon', () => {
+            component.showSidenavToggle = true;
+            component.toggleIcon = 'apps';
+            fixture.detectChanges();
+
+            const toggleIcon = fixture.debugElement.query(By.css('.adf-menu-icon'));
+
+            expect(toggleIcon.nativeElement.textContent).toBe('apps');
+        });
     });
 
     describe('Template transclusion', () => {
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 704069eed8..d06e43b5a7 100644
--- a/lib/core/src/lib/layout/components/header/header.component.ts
+++ b/lib/core/src/lib/layout/components/header/header.component.ts
@@ -33,6 +33,9 @@ export class HeaderLayoutComponent implements OnInit {
     /** Path to an image file for the application logo. */
     @Input() logo: string;
 
+    /** Toggles whether the logo will be displayed inside the header or not. */
+    @Input() showLogo: boolean = true;
+
     /** The router link for the application logo, when clicked. */
     @Input() redirectUrl: string | any[] = '/';
 
@@ -51,6 +54,9 @@ export class HeaderLayoutComponent implements OnInit {
      */
     @Input() showSidenavToggle: boolean = true;
 
+    /** The toggle icon that will be used inside header. */
+    @Input() toggleIcon = 'menu';
+
     /** Emitted when the sidenav button is clicked. */
     @Output() clicked = new EventEmitter<boolean>();