diff --git a/docs/core/components/info-drawer-layout.component.md b/docs/core/components/info-drawer-layout.component.md index 6c8a72eb4c..80ade4024b 100644 --- a/docs/core/components/info-drawer-layout.component.md +++ b/docs/core/components/info-drawer-layout.component.md @@ -23,7 +23,7 @@ with the following names: - info-drawer-content ```html - +
File info
@@ -37,6 +37,13 @@ with the following names:
``` +## Class members + +### Properties + +| Name | Type | Default value | Description | +| ---- | ---- | ------------- | ----------- | +| showHeader | `boolean` | true | The visibility of the header. | ## Details diff --git a/docs/core/components/info-drawer.component.md b/docs/core/components/info-drawer.component.md index bdc8e35480..4c761b08cf 100644 --- a/docs/core/components/info-drawer.component.md +++ b/docs/core/components/info-drawer.component.md @@ -26,7 +26,7 @@ The tabs are added using one or more `` elements, which can have any content you like: ```html - +
clear
@@ -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 diff --git a/lib/core/info-drawer/info-drawer-layout.component.html b/lib/core/info-drawer/info-drawer-layout.component.html index 2472b81100..6c5313c23e 100644 --- a/lib/core/info-drawer/info-drawer-layout.component.html +++ b/lib/core/info-drawer/info-drawer-layout.component.html @@ -1,4 +1,4 @@ -
+
@@ -8,4 +8,4 @@
-
\ No newline at end of file +
diff --git a/lib/core/info-drawer/info-drawer-layout.component.ts b/lib/core/info-drawer/info-drawer-layout.component.ts index 87df5c41b9..bc897f0f30 100644 --- a/lib/core/info-drawer/info-drawer-layout.component.ts +++ b/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 diff --git a/lib/core/info-drawer/info-drawer.component.html b/lib/core/info-drawer/info-drawer.component.html index 2ab4143be3..1d0e7af48d 100644 --- a/lib/core/info-drawer/info-drawer.component.html +++ b/lib/core/info-drawer/info-drawer.component.html @@ -1,4 +1,4 @@ - +
{{ title | translate }}
diff --git a/lib/core/info-drawer/info-drawer.component.spec.ts b/lib/core/info-drawer/info-drawer.component.spec.ts index 4435212f76..7cba2eb77a 100644 --- a/lib/core/info-drawer/info-drawer.component.spec.ts +++ b/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: ` + + + ` +}) +class VisibilityInfoDrawerComponent extends InfoDrawerComponent { + showHeader: boolean; +} + +describe('Header visibility InfoDrawer', () => { + let fixture: ComponentFixture; + 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); + }); +}); diff --git a/lib/core/info-drawer/info-drawer.component.ts b/lib/core/info-drawer/info-drawer.component.ts index 75c6cdd62e..532efb6ab1 100644 --- a/lib/core/info-drawer/info-drawer.component.ts +++ b/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 = new EventEmitter();