From 44a59662a74def17042e247cd6e1e2996db72e61 Mon Sep 17 00:00:00 2001 From: giulio-leone Date: Wed, 25 Mar 2026 11:36:43 +0100 Subject: [PATCH 1/2] feat(tab): add responsive vertical breakpoint support Add verticalBreakpoint input to ItTabContainerComponent that allows the vertical layout to activate only above a specified Bootstrap breakpoint (sm/md/lg/xl/xxl). Uses window.matchMedia for responsive switching. The vertical input continues to work as before when no breakpoint is specified. Closes #577 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../tab-container.component.html | 30 ++++---- .../tab-container.component.spec.ts | 39 ++++++++++ .../tab-container/tab-container.component.ts | 71 ++++++++++++++++++- 3 files changed, 124 insertions(+), 16 deletions(-) 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..98aea213 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 @@ -1,20 +1,20 @@
+ [class.row]="isVertical" + [class.flex-row-reverse]="inverted && isVertical" + [class.d-flex]="inverted && !isVertical" + [class.flex-column-reverse]="inverted && !isVertical">
+ [class.col-5]="inverted && isVertical" + [class.col-md-4]="inverted && isVertical" + [class.col-lg-3]="inverted && isVertical" + [class.col-4]="!inverted && isVertical" + [class.col-md-3]="!inverted && isVertical"> @if (tabs) {
    + [class.col-7]="inverted && isVertical" + [class.col-md-8]="inverted && isVertical" + [class.col-lg-9]="inverted && isVertical" + [class.col-8]="!inverted && isVertical" + [class.col-md-9]="!inverted && isVertical"> @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..756bf675 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 @@ -18,4 +18,43 @@ describe('ItTabContainerComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + describe('isVertical', () => { + it('should return false when vertical is not set', () => { + expect(component.isVertical).toBe(false); + }); + + it('should return true when vertical is set without breakpoint', () => { + component.vertical = true; + expect(component.isVertical).toBe(true); + }); + + it('should accept verticalBreakpoint input', () => { + component.vertical = true; + component.verticalBreakpoint = 'md'; + expect(component.verticalBreakpoint).toBe('md'); + }); + + it('should be responsive when vertical and verticalBreakpoint are both set', () => { + component.vertical = true; + component.verticalBreakpoint = 'md'; + // After ngAfterViewInit, isVertical should reflect the media query state + component.ngAfterViewInit(); + // The value depends on the test viewport, but the getter should not throw + expect(typeof component.isVertical).toBe('boolean'); + }); + }); + + describe('cleanup', () => { + it('should not throw on destroy with responsive breakpoint', () => { + component.vertical = true; + component.verticalBreakpoint = 'lg'; + component.ngAfterViewInit(); + expect(() => component.ngOnDestroy()).not.toThrow(); + }); + + it('should not throw on destroy without responsive breakpoint', () => { + expect(() => component.ngOnDestroy()).not.toThrow(); + }); + }); }); 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..301adf39 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 @@ -19,6 +19,17 @@ import { NgTemplateOutlet } from '@angular/common'; import { ItIconComponent } from '../../../utils/icon/icon.component'; import { inputToBoolean } from '../../../../utils/coercion'; +/** Bootstrap Italia breakpoint names and their minimum widths in px. */ +export type BootstrapBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | 'xxl'; + +const BREAKPOINT_PX: Record = { + sm: 576, + md: 768, + lg: 992, + xl: 1200, + xxl: 1400, +}; + @Component({ selector: 'it-tab-container', templateUrl: './tab-container.component.html', @@ -48,10 +59,26 @@ export class ItTabContainerComponent extends ItAbstractComponent implements OnDe @Input({ transform: inputToBoolean }) cards?: boolean; /** - * Show vertical navigation + * Show vertical navigation. + * When used together with `verticalBreakpoint`, this acts as the initial state + * and becomes responsive — vertical above the breakpoint, horizontal below it. */ @Input({ transform: inputToBoolean }) vertical?: boolean; + /** + * When set, the tab container switches from vertical to horizontal layout + * below the specified Bootstrap breakpoint. + * Requires `vertical` to be set to `true`. + * + * @example + * ```html + * + * + * + * ``` + */ + @Input() verticalBreakpoint?: BootstrapBreakpoint; + /** * The tab position */ @@ -75,7 +102,18 @@ export class ItTabContainerComponent extends ItAbstractComponent implements OnDe @Output() tabAdded = new EventEmitter(); + /** Computed vertical state (respects responsive breakpoint). */ + get isVertical(): boolean { + if (this.verticalBreakpoint && this.vertical) { + return this._isVerticalResponsive; + } + return !!this.vertical; + } + private tabSubscriptions?: Array; + private _mediaQueryList?: MediaQueryList; + private _mediaHandler?: (e: MediaQueryListEvent) => void; + private _isVerticalResponsive = true; constructor() { super(); @@ -84,6 +122,8 @@ export class ItTabContainerComponent extends ItAbstractComponent implements OnDe override ngAfterViewInit(): void { super.ngAfterViewInit(); + this._setupResponsiveBreakpoint(); + this.tabs?.changes .pipe( // When tabs changes (dynamic add/remove) @@ -119,6 +159,7 @@ export class ItTabContainerComponent extends ItAbstractComponent implements OnDe ngOnDestroy(): void { this.tabSubscriptions?.forEach(sub => sub.unsubscribe()); + this._teardownResponsiveBreakpoint(); } onTab(tab: ItTabItemComponent) { @@ -133,4 +174,32 @@ export class ItTabContainerComponent extends ItAbstractComponent implements OnDe $event.preventDefault(); this.tabAdded.emit(); } + + private _setupResponsiveBreakpoint(): void { + if (!this.verticalBreakpoint || !this.vertical) { + return; + } + + const minWidth = BREAKPOINT_PX[this.verticalBreakpoint]; + if (typeof window === 'undefined' || !window.matchMedia) { + return; + } + + this._mediaQueryList = window.matchMedia(`(min-width: ${minWidth}px)`); + this._isVerticalResponsive = this._mediaQueryList.matches; + + this._mediaHandler = (e: MediaQueryListEvent) => { + this._isVerticalResponsive = e.matches; + this._changeDetectorRef.detectChanges(); + }; + this._mediaQueryList.addEventListener('change', this._mediaHandler); + } + + private _teardownResponsiveBreakpoint(): void { + if (this._mediaQueryList && this._mediaHandler) { + this._mediaQueryList.removeEventListener('change', this._mediaHandler); + this._mediaQueryList = undefined; + this._mediaHandler = undefined; + } + } } From 350564d041a5ef8ac68d0b8028a30688e4744519 Mon Sep 17 00:00:00 2001 From: giulio-leone Date: Wed, 25 Mar 2026 18:02:09 +0100 Subject: [PATCH 2/2] docs: add responsive vertical breakpoint example to tabs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Show verticalBreakpoint with md and lg breakpoints — tabs switch from horizontal to vertical layout above the specified breakpoint. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../tabs-examples/tabs-examples.component.tpl | 13 ++++++++++ .../tabs-responsive-example.component.html | 26 +++++++++++++++++++ .../tabs-responsive-example.component.ts | 8 ++++++ src/app/tabs/tabs.module.ts | 9 ++++++- 4 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 src/app/tabs/tabs-responsive-example/tabs-responsive-example.component.html create mode 100644 src/app/tabs/tabs-responsive-example/tabs-responsive-example.component.ts diff --git a/src/app/tabs/tabs-examples/tabs-examples.component.tpl b/src/app/tabs/tabs-examples/tabs-examples.component.tpl index ea4a70f7..cb239976 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 htmlResponsive %} + {% include "../tabs-responsive-example/tabs-responsive-example.component.html" %} +{% endset %} + +{% set typescriptResponsive %} + {% include "../tabs-responsive-example/tabs-responsive-example.component.ts" %} +{% endset %} + + + + diff --git a/src/app/tabs/tabs-responsive-example/tabs-responsive-example.component.html b/src/app/tabs/tabs-responsive-example/tabs-responsive-example.component.html new file mode 100644 index 00000000..0a64cb57 --- /dev/null +++ b/src/app/tabs/tabs-responsive-example/tabs-responsive-example.component.html @@ -0,0 +1,26 @@ +

    Vertical responsive (breakpoint md)

    +

    Le tab diventano verticali sopra il breakpoint md (768px) e orizzontali sotto.

    + + + +

    Contenuto del primo tab — verticale sopra md, orizzontale sotto.

    +     + +

    Contenuto del secondo tab.

    +     + +

    Contenuto del terzo tab.

    +     +     + +

    Vertical responsive (breakpoint lg)

    +

    Breakpoint lg (992px): verticale sopra, orizzontale sotto.

    + + + +

    Layout verticale sopra lg.

    +     + +

    Layout orizzontale sotto lg.

    +     +     diff --git a/src/app/tabs/tabs-responsive-example/tabs-responsive-example.component.ts b/src/app/tabs/tabs-responsive-example/tabs-responsive-example.component.ts new file mode 100644 index 00000000..f7fec5b6 --- /dev/null +++ b/src/app/tabs/tabs-responsive-example/tabs-responsive-example.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'it-tabs-responsive-example', + templateUrl: './tabs-responsive-example.component.html', + standalone: false, +}) +export class TabsResponsiveExampleComponent {} diff --git a/src/app/tabs/tabs.module.ts b/src/app/tabs/tabs.module.ts index 82340735..f2afe2ea 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 { TabsResponsiveExampleComponent } from './tabs-responsive-example/tabs-responsive-example.component'; @NgModule({ imports: [CommonModule, FormsModule, ReactiveFormsModule, SharedModule, TabsRoutingModule], - declarations: [TabsExampleComponent, TabsExamplesComponent, TabsIndexComponent, TabsDynamicExampleComponent], + declarations: [ + TabsExampleComponent, + TabsExamplesComponent, + TabsIndexComponent, + TabsDynamicExampleComponent, + TabsResponsiveExampleComponent, + ], }) export class TabsModule {}