diff --git a/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.html b/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.html index af19f79c..aa73e6d8 100644 --- a/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.html +++ b/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.html @@ -2,7 +2,9 @@ [class.row]="vertical" [class.flex-row-reverse]="inverted && vertical" [class.d-flex]="inverted && !vertical" - [class.flex-column-reverse]="inverted && !vertical"> + [class.flex-column-reverse]="inverted && !vertical" + [class.h-100]="fullHeight && vertical" + [class.flex-grow-1]="fullHeight && !vertical">
@for (tab of tabs; track tab.id; let i = $index) {
  • @@ -58,15 +61,19 @@ [class.col-md-8]="inverted && vertical" [class.col-lg-9]="inverted && vertical" [class.col-8]="!inverted && vertical" - [class.col-md-9]="!inverted && vertical"> + [class.col-md-9]="!inverted && vertical" + [class.d-flex]="fullHeight" + [class.flex-column]="fullHeight" + [class.flex-grow-1]="fullHeight"> @if (tabs) { -
    +
    @for (tab of tabs; track tab.id) {
    diff --git a/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.spec.ts b/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.spec.ts index cf159111..63d5f351 100644 --- a/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.spec.ts +++ b/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.spec.ts @@ -1,8 +1,40 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { ItTabContainerComponent } from './tab-container.component'; +import { ItTabItemComponent } from '../tab-item/tab-item.component'; import { tb_base } from '../../../../../test'; +@Component({ + selector: 'it-test-fullheight-host', + standalone: true, + imports: [ItTabContainerComponent, ItTabItemComponent], + template: ` +
    + +

    Content 1

     +

    Content 2

     +     +
    + `, +}) +class FullHeightHostComponent {} + +@Component({ + selector: 'it-test-fullheight-horizontal-host', + standalone: true, + imports: [ItTabContainerComponent, ItTabItemComponent], + template: ` +
    + +

    Content A

     +

    Content B

     +     +
    + `, +}) +class FullHeightHorizontalHostComponent {} + describe('ItTabContainerComponent', () => { let component: ItTabContainerComponent; let fixture: ComponentFixture; @@ -19,3 +51,102 @@ describe('ItTabContainerComponent', () => { expect(component).toBeTruthy(); }); }); + +describe('ItTabContainerComponent fullHeight (vertical)', () => { + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + ...tb_base, + imports: [...tb_base.imports, FullHeightHostComponent], + }) + .overrideComponent(ItTabContainerComponent, { + set: { changeDetection: ChangeDetectionStrategy.Default }, + }) + .compileComponents(); + + fixture = TestBed.createComponent(FullHeightHostComponent); + fixture.detectChanges(); + }); + + it('should apply height:100% on the host element', () => { + const host: HTMLElement = fixture.nativeElement.querySelector('it-tab-container'); + expect(host.style.height).toBe('100%'); + }); + + it('should apply d-flex class on the host element', () => { + const host: HTMLElement = fixture.nativeElement.querySelector('it-tab-container'); + expect(host.classList.contains('d-flex')).toBeTrue(); + }); + + it('should NOT apply flex-column on vertical layout host', () => { + const host: HTMLElement = fixture.nativeElement.querySelector('it-tab-container'); + expect(host.classList.contains('flex-column')).toBeFalse(); + }); + + it('should apply h-100 on the .row wrapper', () => { + const row: HTMLElement = fixture.nativeElement.querySelector('.row'); + expect(row).toBeTruthy(); + expect(row.classList.contains('h-100')).toBeTrue(); + }); + + it('should apply h-100 on the nav-tabs-vertical ul', () => { + const ul: HTMLElement = fixture.nativeElement.querySelector('ul.nav-tabs-vertical'); + expect(ul).toBeTruthy(); + expect(ul.classList.contains('h-100')).toBeTrue(); + }); + + it('should apply flex-grow-1 on the tab-content wrapper', () => { + const tabContent: HTMLElement = fixture.nativeElement.querySelector('.tab-content'); + expect(tabContent).toBeTruthy(); + expect(tabContent.classList.contains('flex-grow-1')).toBeTrue(); + }); + + it('should apply flex-grow-1 on the active tab pane', () => { + const activePane: HTMLElement = fixture.nativeElement.querySelector('.tab-pane.active'); + expect(activePane).toBeTruthy(); + expect(activePane.classList.contains('flex-grow-1')).toBeTrue(); + }); +}); + +describe('ItTabContainerComponent fullHeight (horizontal)', () => { + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + ...tb_base, + imports: [...tb_base.imports, FullHeightHorizontalHostComponent], + }) + .overrideComponent(ItTabContainerComponent, { + set: { changeDetection: ChangeDetectionStrategy.Default }, + }) + .compileComponents(); + + fixture = TestBed.createComponent(FullHeightHorizontalHostComponent); + fixture.detectChanges(); + }); + + it('should apply height:100% on horizontal fullHeight host', () => { + const host: HTMLElement = fixture.nativeElement.querySelector('it-tab-container'); + expect(host.style.height).toBe('100%'); + }); + + it('should apply flex-column on horizontal fullHeight host', () => { + const host: HTMLElement = fixture.nativeElement.querySelector('it-tab-container'); + expect(host.classList.contains('flex-column')).toBeTrue(); + }); + + it('should apply flex-grow-1 on the outer wrapper div', () => { + const wrapper: HTMLElement = fixture.nativeElement.querySelector('it-tab-container > div'); + expect(wrapper).toBeTruthy(); + expect(wrapper.classList.contains('flex-grow-1')).toBeTrue(); + }); + + it('should apply flex-grow-1 + d-flex + flex-column on tab-content', () => { + const tabContent: HTMLElement = fixture.nativeElement.querySelector('.tab-content'); + expect(tabContent).toBeTruthy(); + expect(tabContent.classList.contains('flex-grow-1')).toBeTrue(); + expect(tabContent.classList.contains('d-flex')).toBeTrue(); + expect(tabContent.classList.contains('flex-column')).toBeTrue(); + }); +}); diff --git a/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.ts b/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.ts index 610bb559..756d5274 100644 --- a/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.ts +++ b/projects/design-angular-kit/src/lib/components/core/tab/tab-container/tab-container.component.ts @@ -24,6 +24,11 @@ import { inputToBoolean } from '../../../../utils/coercion'; templateUrl: './tab-container.component.html', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ItIconComponent, NgTemplateOutlet], + host: { + '[class.d-flex]': 'fullHeight', + '[class.flex-column]': 'fullHeight && !vertical', + '[style.height]': 'fullHeight ? "100%" : null', + }, }) export class ItTabContainerComponent extends ItAbstractComponent implements OnDestroy, AfterViewInit { /** @@ -52,6 +57,13 @@ export class ItTabContainerComponent extends ItAbstractComponent implements OnDe */ @Input({ transform: inputToBoolean }) vertical?: boolean; + /** + * When used with vertical layout, makes the tab container + * occupy the full available vertical height. + * @default false + */ + @Input({ transform: inputToBoolean }) fullHeight?: boolean; + /** * The tab position */ diff --git a/src/app/tabs/tabs-examples/tabs-examples.component.tpl b/src/app/tabs/tabs-examples/tabs-examples.component.tpl index ea4a70f7..f2fcca48 100644 --- a/src/app/tabs/tabs-examples/tabs-examples.component.tpl +++ b/src/app/tabs/tabs-examples/tabs-examples.component.tpl @@ -25,3 +25,16 @@ + +{% set htmlFullHeight %} + {% include "../tabs-full-height-example/tabs-full-height-example.component.html" %} +{% endset %} + +{% set typescriptFullHeight %} + {% include "../tabs-full-height-example/tabs-full-height-example.component.ts" %} +{% endset %} + + + + + diff --git a/src/app/tabs/tabs-full-height-example/tabs-full-height-example.component.html b/src/app/tabs/tabs-full-height-example/tabs-full-height-example.component.html new file mode 100644 index 00000000..317418de --- /dev/null +++ b/src/app/tabs/tabs-full-height-example/tabs-full-height-example.component.html @@ -0,0 +1,16 @@ +

    Full Height Tab

    +

    + Con [fullHeight]="true" il tab container si espande per occupare il 100% dell'altezza del genitore. Utile quando le tab + devono riempire l'intero spazio disponibile. +

    + +
    + + +

    Questo contenuto si espande verticalmente per riempire il contenitore padre.

    +     + +

    Anche questo pannello occupa tutta l'altezza disponibile.

    +     +     +
    diff --git a/src/app/tabs/tabs-full-height-example/tabs-full-height-example.component.ts b/src/app/tabs/tabs-full-height-example/tabs-full-height-example.component.ts new file mode 100644 index 00000000..a03e5ce6 --- /dev/null +++ b/src/app/tabs/tabs-full-height-example/tabs-full-height-example.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'it-tabs-full-height-example', + templateUrl: './tabs-full-height-example.component.html', +}) +export class TabsFullHeightExampleComponent {} diff --git a/src/app/tabs/tabs.module.ts b/src/app/tabs/tabs.module.ts index 82340735..a0a2dcd5 100644 --- a/src/app/tabs/tabs.module.ts +++ b/src/app/tabs/tabs.module.ts @@ -9,9 +9,16 @@ import { TabsExampleComponent } from './tabs-example/tabs-example.component'; import { TabsExamplesComponent } from './tabs-examples/tabs-examples.component'; import { TabsIndexComponent } from './tabs-index/tabs-index.component'; import { TabsDynamicExampleComponent } from './tabs-dynamic-example/tabs-dynamic-example.component'; +import { TabsFullHeightExampleComponent } from './tabs-full-height-example/tabs-full-height-example.component'; @NgModule({ imports: [CommonModule, FormsModule, ReactiveFormsModule, SharedModule, TabsRoutingModule], - declarations: [TabsExampleComponent, TabsExamplesComponent, TabsIndexComponent, TabsDynamicExampleComponent], + declarations: [ + TabsExampleComponent, + TabsExamplesComponent, + TabsIndexComponent, + TabsDynamicExampleComponent, + TabsFullHeightExampleComponent, + ], }) export class TabsModule {}