[ACA-3614] Add a way to not show info drawer header (#5848)

docs/core/components/info-drawer-layout.component.md

@@ -23,7 +23,7 @@ with the following names:
 -   info-drawer-content
 
 ```html
-<adf-info-drawer-layout>
+<adf-info-drawer-layout [showHeader]="true">
     <div info-drawer-title>File info</div>
 
     <div info-drawer-buttons>
@@ -37,6 +37,13 @@ with the following names:
     </div>
 </adf-info-drawer-layout>
 ```
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| showHeader | `boolean` | true | The visibility of the header. |
 
 ## Details
 

docs/core/components/info-drawer.component.md

@@ -26,7 +26,7 @@ The tabs are added using one or more `<adf-info-drawer-tab>` elements, which can
 have any content you like:
 
 ```html
-<adf-info-drawer title="Activities" (currentTab)="getActiveTab($event)">
+<adf-info-drawer [showHeader]="true" title="Activities" (currentTab)="getActiveTab($event)">
     <div info-drawer-buttons>
         <mat-icon (click)="close()">clear</mat-icon>
     </div>
@@ -51,6 +51,7 @@ have any content you like:
 | ---- | ---- | ------------- | ----------- |
 | selectedIndex | `number` | 0 | The selected index tab. |
 | title | `string \| null` | null | The title of the info drawer (string or translation key). |
+| showHeader | `boolean` | true | The visibility of the header. |
 
 ### Events
 

lib/core/info-drawer/info-drawer-layout.component.html

@@ -1,4 +1,4 @@
-<div class="adf-info-drawer-layout-header">
+<div *ngIf="showHeader" class="adf-info-drawer-layout-header">
     <div class="adf-info-drawer-layout-header-title">
         <ng-content select="[info-drawer-title]"></ng-content>
     </div>
@@ -8,4 +8,4 @@
 </div>
 <div class="adf-info-drawer-layout-content">
     <ng-content select="[info-drawer-content]"></ng-content>
-</div>
+</div>

lib/core/info-drawer/info-drawer-layout.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Directive, ViewEncapsulation } from '@angular/core';
+import { Component, Directive, Input, ViewEncapsulation } from '@angular/core';
 
 @Component({
     selector: 'adf-info-drawer-layout',
@@ -24,7 +24,11 @@ import { Component, Directive, ViewEncapsulation } from '@angular/core';
     encapsulation: ViewEncapsulation.None,
     host: { 'class': 'adf-info-drawer-layout' }
 })
-export class InfoDrawerLayoutComponent {}
+export class InfoDrawerLayoutComponent {
+    /** The visibility of the header. */
+    @Input()
+    showHeader: boolean = true;
+}
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0

lib/core/info-drawer/info-drawer.component.html

@@ -1,4 +1,4 @@
-<adf-info-drawer-layout>
+<adf-info-drawer-layout [showHeader]="showHeader">
     <div role="heading" aria-level="1" *ngIf="title" info-drawer-title>{{ title | translate }}</div>
     <ng-content *ngIf="!title" info-drawer-title select="[info-drawer-title]"></ng-content>
 

lib/core/info-drawer/info-drawer.component.spec.ts

@@ -138,3 +138,50 @@ describe('Custom InfoDrawer', () => {
         expect(tab[0].nativeElement.innerText).toContain('tab-icon');
     });
 });
+
+@Component({
+    template: `
+    <adf-info-drawer [showHeader]="showHeader" title="Fake Visibility Info Drawer Title">
+    </adf-info-drawer>
+       `
+})
+class VisibilityInfoDrawerComponent extends InfoDrawerComponent {
+    showHeader: boolean;
+}
+
+describe('Header visibility InfoDrawer', () => {
+    let fixture: ComponentFixture<VisibilityInfoDrawerComponent>;
+    let component: VisibilityInfoDrawerComponent;
+
+    setupTestBed({
+        imports: [
+            TranslateModule.forRoot(),
+            CoreTestingModule
+        ],
+        declarations: [
+            VisibilityInfoDrawerComponent
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(VisibilityInfoDrawerComponent);
+        fixture.detectChanges();
+        component = fixture.componentInstance;
+    });
+
+    it('should show info drawer header by default', () => {
+        fixture.detectChanges();
+        const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]'));
+        expect(title.length).toBe(1);
+        expect(title[0].nativeElement.innerText).toBe('Fake Visibility Info Drawer Title');
+        expect(component.showHeader).toEqual(true);
+    });
+
+    it('should not show info drawer header when showHeader is false', () => {
+        fixture.detectChanges();
+        component.showHeader = false;
+        fixture.detectChanges();
+        const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]'));
+        expect(title.length).toBe(0);
+    });
+});

lib/core/info-drawer/info-drawer.component.ts

@@ -50,6 +50,10 @@ export class InfoDrawerComponent {
     @Input()
     selectedIndex: number = 0;
 
+    /** The visibility of the header. */
+    @Input()
+    showHeader: boolean = true;
+
     /** Emitted when the currently active tab changes. */
     @Output()
     currentTab: EventEmitter<number> = new EventEmitter<number>();