@siemens/element-ng 47.4.0 → 47.6.0

package/fesm2022/siemens-element-ng-tabs-next.mjs

@@ -0,0 +1,356 @@
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { CdkMenu, CdkMenuTrigger } from '@angular/cdk/menu';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, input, booleanAttribute, output, computed, inject, ElementRef, viewChild, TemplateRef, Directive, signal, effect, ChangeDetectionStrategy, Component, model, contentChildren, INJECTOR } from '@angular/core';
+import * as i1$1 from '@angular/router';
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
+import { SiMenuDirective, SiMenuItemComponent } from '@siemens/element-ng/menu';
+import * as i2 from '@siemens/element-ng/resize-observer';
+import { SiResizeObserverModule } from '@siemens/element-ng/resize-observer';
+import * as i1 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { addIcons, elementCancel, SiIconNextComponent } from '@siemens/element-ng/icon';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+const SI_TABSET_NEXT = new InjectionToken('SiTabsetNextComponent');
+
+class SiTabNextBaseDirective {
+    /** Title of the tab item. */
+    heading = input.required();
+    /**
+     * Icon of the tab item.
+     * If provided, heading text will be ignored and only icon will be displayed.
+     */
+    icon = input();
+    /**
+     * Additional badge content. A value of
+     * - `true` will render a red dot
+     * - any string without a `badgeColor` will render a red dot with text
+     * - any string with a `badgeColor` will render a normal badge
+     */
+    badgeContent = input();
+    /**
+     * Background color of the badge.
+     * If no color is provided a red dot badge will be rendered.
+     */
+    badgeColor = input();
+    /**
+     * Disables the tab.
+     *
+     * @defaultValue false
+     */
+    disabledTab = input(false, {
+        transform: booleanAttribute,
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        alias: 'disabled'
+    });
+    /**
+     * Close the current tab.
+     *
+     * @defaultValue false
+     */
+    closable = input(false, {
+        transform: booleanAttribute
+    });
+    /** Event emitter to notify when a tab is closed. */
+    closeTriggered = output();
+    /** @internal */
+    badgeIsNumber = computed(() => {
+        return typeof this.badgeContent() !== 'boolean';
+    });
+    tabButton = inject(ElementRef);
+    tabContent = viewChild('tabContent', { read: TemplateRef });
+    static tabCounter = 0;
+    indexBeforeClose = -1;
+    /** @internal */
+    tabId = `${SiTabNextBaseDirective.tabCounter++}`;
+    icons = addIcons({ elementCancel });
+    tabset = inject(SI_TABSET_NEXT);
+    /** @internal */
+    index = computed(() => this.tabset.tabPanels().findIndex(tab => tab.tabId === this.tabId));
+    ngOnDestroy() {
+        // adjust the focus index and selected tab index if component is destroyed
+        // as a side effect to close tab event
+        if (this.indexBeforeClose >= 0) {
+            const indexToFocus = this.tabset.getNextIndexToFocus(this.indexBeforeClose);
+            if (this.active()) {
+                this.tabset.focusKeyManager?.updateActiveItem(indexToFocus);
+                this.tabset.tabPanels()[indexToFocus].tabButton.nativeElement.focus();
+            }
+            else {
+                const selectedItemIndex = this.tabset.activeTabIndex() ?? 0;
+                this.tabset.focusKeyManager?.updateActiveItem(selectedItemIndex);
+                this.tabset.tabPanels()[selectedItemIndex].focus();
+            }
+            // if this tab was the active one we need to select next tab as active
+            if (this.active()) {
+                const targetActiveTab = this.tabset.tabPanels()[indexToFocus];
+                if (targetActiveTab) {
+                    targetActiveTab.active.set(true);
+                }
+            }
+        }
+    }
+    closeTab(event) {
+        if (this.closable() && !this.disabledTab()) {
+            event.stopPropagation();
+            const index = this.index();
+            this.closeTriggered.emit();
+            this.indexBeforeClose = index;
+        }
+    }
+    focus(origin) {
+        this.tabButton.nativeElement.focus({ preventScroll: true });
+        // The element is not fully scrolled into view when focused. So we prevent and scroll it manually.
+        this.tabButton.nativeElement.scrollIntoView({
+            inline: 'nearest',
+            block: 'nearest',
+            behavior: 'instant'
+        });
+    }
+    get disabled() {
+        return this.disabledTab();
+    }
+    selectTab(retainFocus) {
+        this.tabset.focusKeyManager?.updateActiveItem(this.index());
+        if (retainFocus) {
+            // We need the timeout to wait for cdkMenu to restore the focus before we move it again.
+            setTimeout(() => this.focus());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.6", type: SiTabNextBaseDirective, isStandalone: true, selector: "[siTabNextBase]", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, disabledTab: { classPropertyName: "disabledTab", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeTriggered: "closeTriggered" }, host: { attributes: { "role": "tab" }, listeners: { "keydown.arrowLeft": "tabset.focusPrevious($event)", "keydown.arrowRight": "tabset.focusNext($event)", "keydown.delete": "closeTab($event)" }, properties: { "class.disabled": "disabledTab()", "attr.id": "'tab-' + tabId", "attr.aria-disabled": "disabledTab()", "attr.tabindex": "tabset.focusKeyManager?.activeItem === this && !disabledTab() ? 0 : -1", "attr.aria-controls": "'content-' + tabId" }, classAttribute: "nav-link focus-inside px-5 si-title-1" }, viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContent"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siTabNextBase]',
+                    host: {
+                        class: 'nav-link focus-inside px-5 si-title-1',
+                        role: 'tab',
+                        '[class.disabled]': 'disabledTab()',
+                        '[attr.id]': "'tab-' + tabId",
+                        '[attr.aria-disabled]': 'disabledTab()',
+                        '[attr.tabindex]': 'tabset.focusKeyManager?.activeItem === this && !disabledTab() ? 0 : -1',
+                        '[attr.aria-controls]': "'content-' + tabId",
+                        '(keydown.arrowLeft)': 'tabset.focusPrevious($event)',
+                        '(keydown.arrowRight)': 'tabset.focusNext($event)',
+                        '(keydown.delete)': 'closeTab($event)'
+                    }
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/** @experimental */
+class SiTabNextLinkComponent extends SiTabNextBaseDirective {
+    router = inject(Router, { optional: true });
+    /** @defaultValue false */
+    active = signal(false);
+    /** @internal */
+    routerLink = inject(RouterLink, { optional: true, self: true });
+    routerLinkActive = inject(RouterLinkActive, { self: true });
+    constructor() {
+        super();
+        this.routerLinkActive.isActiveChange
+            .pipe(takeUntilDestroyed())
+            .subscribe(isActive => this.active.set(isActive));
+        effect(() => {
+            if (this.active()) {
+                if (this.router && this.routerLink?.urlTree) {
+                    this.router.navigateByUrl(this.routerLink.urlTree);
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTabNextLinkComponent, isStandalone: true, selector: "a[si-tab-next][routerLink]", host: { properties: { "class.active": "routerLinkActive.isActive", "attr.aria-selected": "routerLinkActive.isActive" } }, usesInheritance: true, hostDirectives: [{ directive: i1$1.RouterLinkActive }], ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n@if (badgeContent() === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent() && badgeColor()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + badgeColor()\">\n    <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n    {{ $any(badgeContent() ?? '') | translate }}\n  </span>\n} @else if (badgeContent() && !badgeColor()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n  <span class=\"badge-text\"> {{ $any(badgeContent() ?? '') | translate }}</span>\n}\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-4 me-n4 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}:host.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}.tab-icon{font-size:24px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a[si-tab-next][routerLink]', imports: [NgClass, SiIconNextComponent, SiTranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.active]': 'routerLinkActive.isActive',
+                        '[attr.aria-selected]': 'routerLinkActive.isActive'
+                    }, hostDirectives: [
+                        {
+                            directive: RouterLinkActive
+                        }
+                    ], template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n@if (badgeContent() === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent() && badgeColor()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + badgeColor()\">\n    <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n    {{ $any(badgeContent() ?? '') | translate }}\n  </span>\n} @else if (badgeContent() && !badgeColor()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n  <span class=\"badge-text\"> {{ $any(badgeContent() ?? '') | translate }}</span>\n}\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-4 me-n4 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}:host.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}.tab-icon{font-size:24px}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/** @experimental */
+class SiTabNextComponent extends SiTabNextBaseDirective {
+    /**
+     * Whether the tab is active or not.
+     * If set to `true`, the tab will be selected and its content will be displayed.
+     * @defaultValue false
+     * */
+    active = model(false);
+    /** @internal */
+    selectTab(retainFocus) {
+        const tabs = this.tabset.tabPanels();
+        const newTabIndex = this.index();
+        const currentTabIndex = this.tabset.activeTabIndex();
+        let continueWithSelection = newTabIndex !== currentTabIndex;
+        if (continueWithSelection && currentTabIndex !== -1) {
+            const currentTab = tabs[currentTabIndex];
+            const deselectEvent = {
+                target: currentTab,
+                tabIndex: currentTabIndex,
+                cancel: () => {
+                    continueWithSelection = false;
+                    currentTab.active.set(true);
+                }
+            };
+            currentTab.active.set(false);
+            this.tabset.deselect.emit(deselectEvent);
+        }
+        if (continueWithSelection) {
+            this.active.set(true);
+            super.selectTab(retainFocus);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTabNextComponent, isStandalone: true, selector: "si-tab-next", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { listeners: { "click": "selectTab()", "keydown.enter": "selectTab()" }, properties: { "class.active": "active()", "attr.aria-selected": "active()" } }, usesInheritance: true, ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n@if (badgeContent() === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent() && badgeColor()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + badgeColor()\">\n    <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n    {{ $any(badgeContent() ?? '') | translate }}\n  </span>\n} @else if (badgeContent() && !badgeColor()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n  <span class=\"badge-text\"> {{ $any(badgeContent() ?? '') | translate }}</span>\n}\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-4 me-n4 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}:host.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}.tab-icon{font-size:24px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabNextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-tab-next', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, SiIconNextComponent, SiTranslateModule], host: {
+                        '[class.active]': 'active()',
+                        '[attr.aria-selected]': 'active()',
+                        '(click)': 'selectTab()',
+                        '(keydown.enter)': 'selectTab()'
+                    }, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n@if (badgeContent() === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent() && badgeColor()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + badgeColor()\">\n    <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n    {{ $any(badgeContent() ?? '') | translate }}\n  </span>\n} @else if (badgeContent() && !badgeColor()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n  <span class=\"badge-text\"> {{ $any(badgeContent() ?? '') | translate }}</span>\n}\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-4 me-n4 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}:host.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}.tab-icon{font-size:24px}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/** @experimental */
+class SiTabsetNextComponent {
+    /**
+     * Event emitter to notify when a tab became inactive.
+     */
+    deselect = output();
+    /** @internal */
+    activeTab = computed(() => {
+        return this.tabPanels().find(tab => tab.active());
+    });
+    /** @internal */
+    activeTabIndex = computed(() => this.activeTab()?.index() ?? -1);
+    /** @internal */
+    focusKeyManager;
+    tabPanelsLinks = contentChildren(SiTabNextLinkComponent);
+    tabPanelsComponents = contentChildren(SiTabNextComponent);
+    /** @internal */
+    tabPanels = computed(() => {
+        const allTabs = [
+            ...this.tabPanelsLinks(),
+            ...this.tabPanelsComponents()
+        ];
+        return allTabs;
+    });
+    menu = viewChild('menu', { read: CdkMenu });
+    showMenuButton = signal(false);
+    injector = inject(INJECTOR);
+    ngAfterViewInit() {
+        this.focusKeyManager = new FocusKeyManager(this.tabPanels, this.injector);
+        // To avoid ExpressionChangedAfterItHasBeenCheckedError
+        setTimeout(() => {
+            this.focusKeyManager?.updateActiveItem(this.tabPanels().findIndex(tab => !tab.disabledTab()));
+        });
+    }
+    menuOpened() {
+        // wait for menu items to be rendered
+        setTimeout(() => {
+            const nextMenuItemToFocus = this.getNextIndexToFocus(this.activeTabIndex() + 1);
+            const menuItems = this.menu()?.items.toArray() ?? [];
+            if (nextMenuItemToFocus >= 0 && nextMenuItemToFocus < menuItems.length) {
+                menuItems[nextMenuItemToFocus].focus();
+                // bug in cdk as setting focus on menu item does not update focus manager active item
+                // eslint-disable-next-line @typescript-eslint/dot-notation
+                const focusManager = this.menu()?.['keyManager'];
+                focusManager?.updateActiveItem(nextMenuItemToFocus);
+            }
+            else {
+                menuItems[0].focus();
+            }
+        });
+    }
+    tabIsLink(tab) {
+        return tab instanceof SiTabNextLinkComponent;
+    }
+    /** @internal */
+    focusPrevious(e) {
+        e.preventDefault();
+        this.focusKeyManager?.setPreviousItemActive();
+    }
+    /** @internal */
+    focusNext(e) {
+        e.preventDefault();
+        this.focusKeyManager?.setNextItemActive();
+    }
+    /** @internal */
+    getNextIndexToFocus(currentIndex) {
+        for (let i = 0; i < this.tabPanels().length; i++) {
+            // Get the actual index using modulo to wrap around
+            const checkIndex = (currentIndex + i) % this.tabPanels().length;
+            if (!this.tabPanels()[checkIndex].disabledTab()) {
+                return this.tabPanels()[checkIndex].index();
+            }
+        }
+        return -1;
+    }
+    resizeContainer(width, scrollWidth) {
+        // 48px is the width of the menu button.
+        this.showMenuButton.set(scrollWidth > width + (this.showMenuButton() ? 48 : 0));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabsetNextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTabsetNextComponent, isStandalone: true, selector: "si-tabset-next", outputs: { deselect: "deselect" }, providers: [
+            {
+                provide: SI_TABSET_NEXT,
+                useExisting: SiTabsetNextComponent
+            }
+        ], queries: [{ propertyName: "tabPanelsLinks", predicate: SiTabNextLinkComponent, isSignal: true }, { propertyName: "tabPanelsComponents", predicate: SiTabNextComponent, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, read: CdkMenu, isSignal: true }], ngImport: i0, template: "<div class=\"tabs-container\">\n  <div class=\"tab-container-buttonbar-list nav nav-tabs\">\n    <div\n      #tabScrollContainer\n      role=\"tablist\"\n      tabindex=\"-1\"\n      class=\"d-flex tabs-wrapper\"\n      (siResizeObserver)=\"\n        resizeContainer(tabScrollContainer.clientWidth, tabScrollContainer.scrollWidth)\n      \"\n    >\n      <ng-content />\n    </div>\n\n    @if (showMenuButton()) {\n      <button\n        type=\"button\"\n        class=\"dropdown btn btn-tertiary focus-inside\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [cdkMenuTriggerFor]=\"tabsMenu\"\n        (cdkMenuOpened)=\"menuOpened()\"\n      >\n        <i class=\"icon element-options m-0\"></i>\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  @if (activeTab) {\n    <div\n      class=\"tab-content\"\n      role=\"tabpanel\"\n      [id]=\"'content-' + activeTab.tabId\"\n      [attr.aria-labelledby]=\"'tab-' + activeTab.tabId\"\n    >\n      @if (tabContent) {\n        <ng-container [ngTemplateOutlet]=\"tabContent\" />\n      }\n\n      <ng-content select=\"router-outlet\" />\n    </div>\n  }\n</div>\n\n<ng-template #tabsMenu>\n  <si-menu #menu>\n    @for (tab of tabPanels(); track tab) {\n      @let badgeColor = tab.badgeColor();\n      @let badgeIsNumber = tab.badgeIsNumber();\n\n      @if (badgeColor && badgeIsNumber) {\n        <!-- eslint-disable @angular-eslint/template/no-any -->\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [badgeColor]=\"badgeColor\"\n          [badge]=\"$any(tab.badgeContent())\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else if (badgeIsNumber && badgeColor) {\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [badgeColor]=\"badgeColor\"\n          [badge]=\"$any(tab.badgeContent())\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <!-- eslint-enable -->\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      }\n    }\n  </si-menu>\n</ng-template>\n\n<ng-template #badgeTemplate let-tab=\"tab\">\n  <div class=\"d-flex align-items-center space-between flex-no-wrap justify-content-between\">\n    {{ tab.heading() }}\n    @if (tab.badgeContent() === true) {\n      <span class=\"badge-dot\"></span>\n    } @else if (tab.badgeContent() && !tab.badgeColor()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <span class=\"badge-text\"> {{ $any(tab.badgeContent() ?? '') | translate }}</span>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-wrap:wrap;overflow:hidden;block-size:100%;min-block-size:40px}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.tab-container-buttonbar-list{display:flex;min-block-size:40px;overflow:hidden;flex:1;order:1;min-inline-size:100px}.btn.dropdown{color:var(--element-text-primary);min-inline-size:0;border-block-end:2px solid var(--element-ui-4);order:2;block-size:40px;padding-inline:12px;flex-shrink:0}.btn.dropdown:hover{border-color:var(--element-ui-4);color:var(--element-action-secondary-text-hover)}a[si-menu-item] .badge-dot{inset-block-end:4px;min-inline-size:12px;margin-inline-start:4px}.tab-content{inline-size:100%;block-size:calc(100% - 40px);order:3}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { kind: "directive", type: SiMenuDirective, selector: "si-menu" }, { kind: "component", type: SiMenuItemComponent, selector: "si-menu-item, a[si-menu-item], button[si-menu-item]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SiResizeObserverModule }, { kind: "directive", type: i2.SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle", "emitInitial"], outputs: ["siResizeObserver"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabsetNextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-tabset-next', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        SiTranslateModule,
+                        SiMenuDirective,
+                        SiMenuItemComponent,
+                        CdkMenuTrigger,
+                        NgTemplateOutlet,
+                        SiResizeObserverModule,
+                        RouterLink
+                    ], providers: [
+                        {
+                            provide: SI_TABSET_NEXT,
+                            useExisting: SiTabsetNextComponent
+                        }
+                    ], template: "<div class=\"tabs-container\">\n  <div class=\"tab-container-buttonbar-list nav nav-tabs\">\n    <div\n      #tabScrollContainer\n      role=\"tablist\"\n      tabindex=\"-1\"\n      class=\"d-flex tabs-wrapper\"\n      (siResizeObserver)=\"\n        resizeContainer(tabScrollContainer.clientWidth, tabScrollContainer.scrollWidth)\n      \"\n    >\n      <ng-content />\n    </div>\n\n    @if (showMenuButton()) {\n      <button\n        type=\"button\"\n        class=\"dropdown btn btn-tertiary focus-inside\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [cdkMenuTriggerFor]=\"tabsMenu\"\n        (cdkMenuOpened)=\"menuOpened()\"\n      >\n        <i class=\"icon element-options m-0\"></i>\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  @if (activeTab) {\n    <div\n      class=\"tab-content\"\n      role=\"tabpanel\"\n      [id]=\"'content-' + activeTab.tabId\"\n      [attr.aria-labelledby]=\"'tab-' + activeTab.tabId\"\n    >\n      @if (tabContent) {\n        <ng-container [ngTemplateOutlet]=\"tabContent\" />\n      }\n\n      <ng-content select=\"router-outlet\" />\n    </div>\n  }\n</div>\n\n<ng-template #tabsMenu>\n  <si-menu #menu>\n    @for (tab of tabPanels(); track tab) {\n      @let badgeColor = tab.badgeColor();\n      @let badgeIsNumber = tab.badgeIsNumber();\n\n      @if (badgeColor && badgeIsNumber) {\n        <!-- eslint-disable @angular-eslint/template/no-any -->\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [badgeColor]=\"badgeColor\"\n          [badge]=\"$any(tab.badgeContent())\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else if (badgeIsNumber && badgeColor) {\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [badgeColor]=\"badgeColor\"\n          [badge]=\"$any(tab.badgeContent())\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <!-- eslint-enable -->\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      }\n    }\n  </si-menu>\n</ng-template>\n\n<ng-template #badgeTemplate let-tab=\"tab\">\n  <div class=\"d-flex align-items-center space-between flex-no-wrap justify-content-between\">\n    {{ tab.heading() }}\n    @if (tab.badgeContent() === true) {\n      <span class=\"badge-dot\"></span>\n    } @else if (tab.badgeContent() && !tab.badgeColor()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <span class=\"badge-text\"> {{ $any(tab.badgeContent() ?? '') | translate }}</span>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-wrap:wrap;overflow:hidden;block-size:100%;min-block-size:40px}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.tab-container-buttonbar-list{display:flex;min-block-size:40px;overflow:hidden;flex:1;order:1;min-inline-size:100px}.btn.dropdown{color:var(--element-text-primary);min-inline-size:0;border-block-end:2px solid var(--element-ui-4);order:2;block-size:40px;padding-inline:12px;flex-shrink:0}.btn.dropdown:hover{border-color:var(--element-ui-4);color:var(--element-action-secondary-text-hover)}a[si-menu-item] .badge-dot{inset-block-end:4px;min-inline-size:12px;margin-inline-start:4px}.tab-content{inline-size:100%;block-size:calc(100% - 40px);order:3}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiTabNextComponent, SiTabNextLinkComponent, SiTabsetNextComponent };
+//# sourceMappingURL=siemens-element-ng-tabs-next.mjs.map

package/fesm2022/siemens-element-ng-tabs-next.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"siemens-element-ng-tabs-next.mjs","sources":["../../../../projects/element-ng/tabs-next/si-tabs-tokens.ts","../../../../projects/element-ng/tabs-next/si-tab-next-base.directive.ts","../../../../projects/element-ng/tabs-next/si-tab-next-link.component.ts","../../../../projects/element-ng/tabs-next/si-tab-next.component.html","../../../../projects/element-ng/tabs-next/si-tab-next.component.ts","../../../../projects/element-ng/tabs-next/si-tabset-next.component.ts","../../../../projects/element-ng/tabs-next/si-tabset-next.component.html","../../../../projects/element-ng/tabs-next/index.ts","../../../../projects/element-ng/tabs-next/siemens-element-ng-tabs-next.ts"],"sourcesContent":["/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { InjectionToken } from '@angular/core';\n\nimport { SiTabsetNextComponent } from './si-tabset-next.component';\n\nexport const SI_TABSET_NEXT = new InjectionToken<SiTabsetNextComponent>('SiTabsetNextComponent');\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { FocusableOption, FocusOrigin } from '@angular/cdk/a11y';\nimport {\n  booleanAttribute,\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  TemplateRef,\n  viewChild,\n  WritableSignal\n} from '@angular/core';\nimport { addIcons, elementCancel } from '@siemens/element-ng/icon';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SI_TABSET_NEXT } from './si-tabs-tokens';\n\n@Directive({\n  selector: '[siTabNextBase]',\n  host: {\n    class: 'nav-link focus-inside px-5 si-title-1',\n    role: 'tab',\n    '[class.disabled]': 'disabledTab()',\n    '[attr.id]': \"'tab-' + tabId\",\n    '[attr.aria-disabled]': 'disabledTab()',\n    '[attr.tabindex]': 'tabset.focusKeyManager?.activeItem === this && !disabledTab() ? 0 : -1',\n    '[attr.aria-controls]': \"'content-' + tabId\",\n    '(keydown.arrowLeft)': 'tabset.focusPrevious($event)',\n    '(keydown.arrowRight)': 'tabset.focusNext($event)',\n    '(keydown.delete)': 'closeTab($event)'\n  }\n})\nexport abstract class SiTabNextBaseDirective implements OnDestroy, FocusableOption {\n  abstract readonly active: WritableSignal<boolean>;\n  /** Title of the tab item. */\n  readonly heading = input.required<TranslatableString>();\n  /**\n   * Icon of the tab item.\n   * If provided, heading text will be ignored and only icon will be displayed.\n   */\n  readonly icon = input<string>();\n  /**\n   * Additional badge content. A value of\n   * - `true` will render a red dot\n   * - any string without a `badgeColor` will render a red dot with text\n   * - any string with a `badgeColor` will render a normal badge\n   */\n  readonly badgeContent = input<TranslatableString | boolean>();\n  /**\n   * Background color of the badge.\n   * If no color is provided a red dot badge will be rendered.\n   */\n  readonly badgeColor = input<string>();\n  /**\n   * Disables the tab.\n   *\n   * @defaultValue false\n   */\n  readonly disabledTab = input(false, {\n    transform: booleanAttribute,\n    // eslint-disable-next-line @angular-eslint/no-input-rename\n    alias: 'disabled'\n  });\n  /**\n   * Close the current tab.\n   *\n   * @defaultValue false\n   */\n  readonly closable = input(false, {\n    transform: booleanAttribute\n  });\n  /** Event emitter to notify when a tab is closed. */\n  readonly closeTriggered = output();\n\n  /** @internal */\n  readonly badgeIsNumber = computed(() => {\n    return typeof this.badgeContent() !== 'boolean';\n  });\n\n  readonly tabButton = inject<ElementRef<HTMLElement>>(ElementRef);\n  readonly tabContent = viewChild('tabContent', { read: TemplateRef });\n\n  private static tabCounter = 0;\n  private indexBeforeClose = -1;\n\n  /** @internal */\n  tabId = `${SiTabNextBaseDirective.tabCounter++}`;\n  protected readonly icons = addIcons({ elementCancel });\n  protected tabset = inject(SI_TABSET_NEXT);\n  /** @internal */\n  readonly index = computed(() =>\n    this.tabset.tabPanels().findIndex(tab => tab.tabId === this.tabId)\n  );\n\n  ngOnDestroy(): void {\n    // adjust the focus index and selected tab index if component is destroyed\n    // as a side effect to close tab event\n    if (this.indexBeforeClose >= 0) {\n      const indexToFocus = this.tabset.getNextIndexToFocus(this.indexBeforeClose);\n      if (this.active()) {\n        this.tabset.focusKeyManager?.updateActiveItem(indexToFocus);\n        this.tabset.tabPanels()[indexToFocus].tabButton.nativeElement.focus();\n      } else {\n        const selectedItemIndex = this.tabset.activeTabIndex() ?? 0;\n        this.tabset.focusKeyManager?.updateActiveItem(selectedItemIndex);\n        this.tabset.tabPanels()[selectedItemIndex].focus();\n      }\n      // if this tab was the active one we need to select next tab as active\n      if (this.active()) {\n        const targetActiveTab = this.tabset.tabPanels()[indexToFocus];\n        if (targetActiveTab) {\n          targetActiveTab.active.set(true);\n        }\n      }\n    }\n  }\n\n  protected closeTab(event: Event): void {\n    if (this.closable() && !this.disabledTab()) {\n      event.stopPropagation();\n      const index = this.index();\n      this.closeTriggered.emit();\n      this.indexBeforeClose = index;\n    }\n  }\n\n  focus(origin?: FocusOrigin): void {\n    this.tabButton.nativeElement.focus({ preventScroll: true });\n    // The element is not fully scrolled into view when focused. So we prevent and scroll it manually.\n    this.tabButton.nativeElement.scrollIntoView({\n      inline: 'nearest',\n      block: 'nearest',\n      behavior: 'instant'\n    });\n  }\n\n  get disabled(): boolean {\n    return this.disabledTab();\n  }\n\n  selectTab(retainFocus?: boolean): void {\n    this.tabset.focusKeyManager?.updateActiveItem(this.index());\n    if (retainFocus) {\n      // We need the timeout to wait for cdkMenu to restore the focus before we move it again.\n      setTimeout(() => this.focus());\n    }\n  }\n}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, effect, inject, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { Router, RouterLink, RouterLinkActive } from '@angular/router';\nimport { SiIconNextComponent } from '@siemens/element-ng/icon';\nimport { SiTranslateModule } from '@siemens/element-translate-ng/translate';\n\nimport { SiTabNextBaseDirective } from './si-tab-next-base.directive';\n\n/** @experimental */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'a[si-tab-next][routerLink]',\n  templateUrl: './si-tab-next.component.html',\n  styleUrl: './si-tab-next.component.scss',\n  imports: [NgClass, SiIconNextComponent, SiTranslateModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.active]': 'routerLinkActive.isActive',\n    '[attr.aria-selected]': 'routerLinkActive.isActive'\n  },\n  hostDirectives: [\n    {\n      directive: RouterLinkActive\n    }\n  ]\n})\nexport class SiTabNextLinkComponent extends SiTabNextBaseDirective {\n  private router = inject(Router, { optional: true });\n  /** @defaultValue false */\n  override readonly active = signal(false);\n  /** @internal */\n  routerLink = inject(RouterLink, { optional: true, self: true });\n  private routerLinkActive = inject(RouterLinkActive, { self: true });\n  constructor() {\n    super();\n    this.routerLinkActive.isActiveChange\n      .pipe(takeUntilDestroyed())\n      .subscribe(isActive => this.active.set(isActive));\n\n    effect(() => {\n      if (this.active()) {\n        if (this.router && this.routerLink?.urlTree) {\n          this.router.navigateByUrl(this.routerLink.urlTree);\n        }\n      }\n    });\n  }\n}\n","@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n@if (badgeContent() === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent() && badgeColor()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + badgeColor()\">\n    <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n    {{ $any(badgeContent() ?? '') | translate }}\n  </span>\n} @else if (badgeContent() && !badgeColor()) {\n  <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n  <span class=\"badge-text\"> {{ $any(badgeContent() ?? '') | translate }}</span>\n}\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-4 me-n4 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, model, OnDestroy } from '@angular/core';\nimport { SiIconNextComponent } from '@siemens/element-ng/icon';\nimport { SiTranslateModule } from '@siemens/element-translate-ng/translate';\n\nimport { SiTabNextBaseDirective } from './si-tab-next-base.directive';\n\n/** @experimental */\n@Component({\n  selector: 'si-tab-next',\n  templateUrl: './si-tab-next.component.html',\n  styleUrl: './si-tab-next.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgClass, SiIconNextComponent, SiTranslateModule],\n  host: {\n    '[class.active]': 'active()',\n    '[attr.aria-selected]': 'active()',\n    '(click)': 'selectTab()',\n    '(keydown.enter)': 'selectTab()'\n  }\n})\nexport class SiTabNextComponent extends SiTabNextBaseDirective implements OnDestroy {\n  /**\n   * Whether the tab is active or not.\n   * If set to `true`, the tab will be selected and its content will be displayed.\n   * @defaultValue false\n   * */\n  override readonly active = model(false);\n\n  /** @internal */\n  override selectTab(retainFocus?: boolean): void {\n    const tabs = this.tabset.tabPanels();\n    const newTabIndex = this.index();\n    const currentTabIndex = this.tabset.activeTabIndex();\n    let continueWithSelection = newTabIndex !== currentTabIndex;\n\n    if (continueWithSelection && currentTabIndex !== -1) {\n      const currentTab = tabs[currentTabIndex];\n      const deselectEvent = {\n        target: currentTab,\n        tabIndex: currentTabIndex,\n        cancel: () => {\n          continueWithSelection = false;\n          currentTab.active.set(true);\n        }\n      };\n\n      currentTab.active.set(false);\n      this.tabset.deselect.emit(deselectEvent);\n    }\n\n    if (continueWithSelection) {\n      this.active.set(true);\n      super.selectTab(retainFocus);\n    }\n  }\n}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { FocusKeyManager } from '@angular/cdk/a11y';\nimport { CdkMenu, CdkMenuTrigger } from '@angular/cdk/menu';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChildren,\n  inject,\n  INJECTOR,\n  output,\n  signal,\n  viewChild\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { SiMenuDirective, SiMenuItemComponent } from '@siemens/element-ng/menu';\nimport { SiResizeObserverModule } from '@siemens/element-ng/resize-observer';\nimport { SiTranslateModule } from '@siemens/element-translate-ng/translate';\n\nimport { SiTabNextLinkComponent } from './si-tab-next-link.component';\nimport { SiTabNextComponent } from './si-tab-next.component';\nimport { SI_TABSET_NEXT } from './si-tabs-tokens';\n\n/** @experimental */\nexport interface SiTabNextDeselectionEvent {\n  /**\n   * The target tab\n   */\n  target: SiTabNextComponent | SiTabNextLinkComponent;\n  /**\n   * The index of target tab\n   */\n  tabIndex: number;\n  /**\n   * To be called to prevent switching the tab\n   */\n  cancel: () => void;\n}\n\n/** @experimental */\n@Component({\n  selector: 'si-tabset-next',\n  templateUrl: './si-tabset-next.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styleUrl: './si-tabset-next.component.scss',\n  imports: [\n    SiTranslateModule,\n    SiMenuDirective,\n    SiMenuItemComponent,\n    CdkMenuTrigger,\n    NgTemplateOutlet,\n    SiResizeObserverModule,\n    RouterLink\n  ],\n  providers: [\n    {\n      provide: SI_TABSET_NEXT,\n      useExisting: SiTabsetNextComponent\n    }\n  ]\n})\nexport class SiTabsetNextComponent implements AfterViewInit {\n  /**\n   * Event emitter to notify when a tab became inactive.\n   */\n  readonly deselect = output<SiTabNextDeselectionEvent>();\n\n  /** @internal */\n  readonly activeTab = computed(() => {\n    return this.tabPanels().find(tab => tab.active());\n  });\n  /** @internal */\n  readonly activeTabIndex = computed(() => this.activeTab()?.index() ?? -1);\n\n  /** @internal */\n  focusKeyManager?: FocusKeyManager<SiTabNextComponent | SiTabNextLinkComponent>;\n\n  private readonly tabPanelsLinks = contentChildren(SiTabNextLinkComponent);\n  private readonly tabPanelsComponents = contentChildren(SiTabNextComponent);\n\n  /** @internal */\n  readonly tabPanels = computed(() => {\n    const allTabs: (SiTabNextLinkComponent | SiTabNextComponent)[] = [\n      ...this.tabPanelsLinks(),\n      ...this.tabPanelsComponents()\n    ];\n    return allTabs;\n  });\n\n  protected readonly menu = viewChild('menu', { read: CdkMenu });\n  protected readonly showMenuButton = signal(false);\n\n  private injector = inject(INJECTOR);\n\n  ngAfterViewInit(): void {\n    this.focusKeyManager = new FocusKeyManager(this.tabPanels, this.injector);\n    // To avoid ExpressionChangedAfterItHasBeenCheckedError\n    setTimeout(() => {\n      this.focusKeyManager?.updateActiveItem(this.tabPanels().findIndex(tab => !tab.disabledTab()));\n    });\n  }\n\n  protected menuOpened(): void {\n    // wait for menu items to be rendered\n    setTimeout(() => {\n      const nextMenuItemToFocus = this.getNextIndexToFocus(this.activeTabIndex() + 1);\n      const menuItems = this.menu()?.items.toArray() ?? [];\n      if (nextMenuItemToFocus >= 0 && nextMenuItemToFocus < menuItems.length) {\n        menuItems[nextMenuItemToFocus].focus();\n        // bug in cdk as setting focus on menu item does not update focus manager active item\n        // eslint-disable-next-line @typescript-eslint/dot-notation\n        const focusManager = this.menu()?.['keyManager'];\n        focusManager?.updateActiveItem(nextMenuItemToFocus);\n      } else {\n        menuItems[0].focus();\n      }\n    });\n  }\n\n  protected tabIsLink(tab: unknown): tab is SiTabNextLinkComponent {\n    return tab instanceof SiTabNextLinkComponent;\n  }\n\n  /** @internal */\n  focusPrevious(e: Event): void {\n    e.preventDefault();\n    this.focusKeyManager?.setPreviousItemActive();\n  }\n\n  /** @internal */\n  focusNext(e: Event): void {\n    e.preventDefault();\n    this.focusKeyManager?.setNextItemActive();\n  }\n\n  /** @internal */\n  getNextIndexToFocus(currentIndex: number): number {\n    for (let i = 0; i < this.tabPanels().length; i++) {\n      // Get the actual index using modulo to wrap around\n      const checkIndex = (currentIndex + i) % this.tabPanels().length;\n\n      if (!this.tabPanels()[checkIndex].disabledTab()) {\n        return this.tabPanels()[checkIndex].index();\n      }\n    }\n    return -1;\n  }\n\n  protected resizeContainer(width: number, scrollWidth: number): void {\n    // 48px is the width of the menu button.\n    this.showMenuButton.set(scrollWidth > width + (this.showMenuButton() ? 48 : 0));\n  }\n}\n","<div class=\"tabs-container\">\n  <div class=\"tab-container-buttonbar-list nav nav-tabs\">\n    <div\n      #tabScrollContainer\n      role=\"tablist\"\n      tabindex=\"-1\"\n      class=\"d-flex tabs-wrapper\"\n      (siResizeObserver)=\"\n        resizeContainer(tabScrollContainer.clientWidth, tabScrollContainer.scrollWidth)\n      \"\n    >\n      <ng-content />\n    </div>\n\n    @if (showMenuButton()) {\n      <button\n        type=\"button\"\n        class=\"dropdown btn btn-tertiary focus-inside\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [cdkMenuTriggerFor]=\"tabsMenu\"\n        (cdkMenuOpened)=\"menuOpened()\"\n      >\n        <i class=\"icon element-options m-0\"></i>\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  @if (activeTab) {\n    <div\n      class=\"tab-content\"\n      role=\"tabpanel\"\n      [id]=\"'content-' + activeTab.tabId\"\n      [attr.aria-labelledby]=\"'tab-' + activeTab.tabId\"\n    >\n      @if (tabContent) {\n        <ng-container [ngTemplateOutlet]=\"tabContent\" />\n      }\n\n      <ng-content select=\"router-outlet\" />\n    </div>\n  }\n</div>\n\n<ng-template #tabsMenu>\n  <si-menu #menu>\n    @for (tab of tabPanels(); track tab) {\n      @let badgeColor = tab.badgeColor();\n      @let badgeIsNumber = tab.badgeIsNumber();\n\n      @if (badgeColor && badgeIsNumber) {\n        <!-- eslint-disable @angular-eslint/template/no-any -->\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [badgeColor]=\"badgeColor\"\n          [badge]=\"$any(tab.badgeContent())\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else if (badgeIsNumber && badgeColor) {\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [badgeColor]=\"badgeColor\"\n          [badge]=\"$any(tab.badgeContent())\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <!-- eslint-enable -->\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <a\n          #menuItem\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tabIsLink(tab) ? tab.routerLink?.urlTree : undefined\"\n          (keydown.enter)=\"tab.selectTab(true)\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      }\n    }\n  </si-menu>\n</ng-template>\n\n<ng-template #badgeTemplate let-tab=\"tab\">\n  <div class=\"d-flex align-items-center space-between flex-no-wrap justify-content-between\">\n    {{ tab.heading() }}\n    @if (tab.badgeContent() === true) {\n      <span class=\"badge-dot\"></span>\n    } @else if (tab.badgeContent() && !tab.badgeColor()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <span class=\"badge-text\"> {{ $any(tab.badgeContent() ?? '') | translate }}</span>\n    }\n  </div>\n</ng-template>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tabset-next.component';\nexport * from './si-tab-next.component';\nexport * from './si-tab-next-link.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2"],"mappings":"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"}

package/fesm2022/siemens-element-ng-tabs.mjs

@@ -324,7 +324,7 @@ class SiTabsetComponent {
         this.focusedTabIndex = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTabsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTabsetComponent, isStandalone: true, selector: "si-tabset", inputs: { selectDefaultTab: ["selectDefaultTab", "selectDefaultTab", booleanAttribute], selectedTabIndex: "selectedTabIndex", tabButtonMaxWidth: "tabButtonMaxWidth" }, outputs: { selectedTabIndexChange: "selectedTabIndexChange", deselect: "deselect" }, queries: [{ propertyName: "tabPanels", predicate: SiTabComponent }], viewQueries: [{ propertyName: "tabContainer", first: true, predicate: ["tabContainer"], descendants: true, isSignal: true }, { propertyName: "innerTabContainer", first: true, predicate: ["innerTabContainer"], descendants: true, isSignal: true }, { propertyName: "tabs", predicate: ["tabElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"nav nav-tabs tab-container-header focus-inside\"\n  role=\"tablist\"\n  [class.is-scrollable]=\"scrollable\"\n  (siResizeObserver)=\"resize()\"\n>\n  @if (scrollable) {\n    <button\n      type=\"button\"\n      class=\"tab-container-control focus-inside\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      [hidden]=\"!xPos\"\n      (keydown.enter)=\"scrollStart()\"\n      (mousedown)=\"scrollStart()\"\n    >\n      <si-icon-next class=\"icon flip-rtl\" [icon]=\"icons.elementLeft3\" />\n    </button>\n  }\n\n  <div #tabContainer class=\"tab-container-buttonbar\" (wheel)=\"mouseScroll($event)\">\n    <div #innerTabContainer class=\"tab-container-buttonbar-list focus-inside\">\n      @for (tab of tabPanels; track $index) {\n        <button\n          #tabElement\n          type=\"button\"\n          role=\"tab\"\n          class=\"nav-link focus-inside px-5\"\n          [attr.aria-controls]=\"tab.id\"\n          [id]=\"tab.tabId\"\n          [style.max-width.px]=\"tabButtonMaxWidth\"\n          [tabindex]=\"!tab.disabled && tab.active() && focusedTabIndex === undefined ? 0 : -1\"\n          [class.active]=\"tab.active()\"\n          [attr.aria-selected]=\"tab.active()\"\n          [class.disabled]=\"tab.disabled\"\n          (click)=\"selectTab(tab)\"\n          (keydown.arrowLeft)=\"focusPrevious()\"\n          (keydown.arrowRight)=\"focusNext()\"\n          (keydown.delete)=\"tab.closeTriggered.emit(tab)\"\n          (blur)=\"blur()\"\n          (focus)=\"focus($index)\"\n        >\n          <span class=\"text-truncate\">{{ tab.heading | translate }}</span>\n          @if (tab.icon) {\n            <si-icon-next\n              class=\"icon\"\n              [attr.role]=\"tab.iconAltText ? 'img' : 'presentation'\"\n              [icon]=\"tab.icon\"\n              [attr.aria-label]=\"(tab.iconAltText | translate) ?? undefined\"\n            />\n          }\n          @if (tab.badgeContent === true) {\n            <span class=\"badge-dot\"></span>\n          } @else if (tab.badgeContent && tab.badgeColor) {\n            <span class=\"badge\" [ngClass]=\"'bg-' + tab.badgeColor\">\n              {{ tab.badgeContent | translate }}\n            </span>\n          } @else if (tab.badgeContent && !tab.badgeColor) {\n            <span class=\"badge-text\"> {{ tab.badgeContent | translate }}</span>\n          }\n          @if (tab.closable && !tab.disabled) {\n            <si-icon-next\n              class=\"ms-4 me-n4 btn btn-circle btn-xs btn-ghost close\"\n              [icon]=\"icons.elementCancel\"\n              (click)=\"closeTab($event, tab)\"\n            />\n          }\n        </button>\n      }\n    </div>\n  </div>\n  @if (scrollable) {\n    <button\n      type=\"button\"\n      class=\"tab-container-control is-end focus-inside\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      [hidden]=\"endArrowDisabled\"\n      (keydown.enter)=\"scrollEnd()\"\n      (mousedown)=\"scrollEnd()\"\n    >\n      <si-icon-next class=\"icon flip-rtl\" [icon]=\"icons.elementRight3\" />\n    </button>\n  }\n</div>\n\n<ng-content />\n", styles: [":host{display:block;flex-direction:column}.tab-container-header{overflow:hidden;display:flex}.tab-container-buttonbar{flex:1;overflow:hidden}.tab-container-buttonbar-list{display:flex;margin:0;padding:0;list-style-type:none;transition:calc(.25s * var(--element-animations-enabled, 1))}.tab-container-buttonbar-list-item{flex:none}.tab-container-control{background:transparent;border:0;-webkit-user-select:none;user-select:none;padding-inline:0 7px;padding-block:6px 10px}.tab-container-control .is-end{padding-inline:7px 0}.tab-container-control:hover{color:var(--element-text-active)}.tab-container-control:disabled{color:var(--element-text-disabled);cursor:default}.nav-link{flex-shrink:0}.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "directive", type: SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle"], outputs: ["siResizeObserver"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTabsetComponent, isStandalone: true, selector: "si-tabset", inputs: { selectDefaultTab: ["selectDefaultTab", "selectDefaultTab", booleanAttribute], selectedTabIndex: "selectedTabIndex", tabButtonMaxWidth: "tabButtonMaxWidth" }, outputs: { selectedTabIndexChange: "selectedTabIndexChange", deselect: "deselect" }, queries: [{ propertyName: "tabPanels", predicate: SiTabComponent }], viewQueries: [{ propertyName: "tabContainer", first: true, predicate: ["tabContainer"], descendants: true, isSignal: true }, { propertyName: "innerTabContainer", first: true, predicate: ["innerTabContainer"], descendants: true, isSignal: true }, { propertyName: "tabs", predicate: ["tabElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"nav nav-tabs tab-container-header focus-inside\"\n  role=\"tablist\"\n  [class.is-scrollable]=\"scrollable\"\n  (siResizeObserver)=\"resize()\"\n>\n  @if (scrollable) {\n    <button\n      type=\"button\"\n      class=\"tab-container-control focus-inside\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      [hidden]=\"!xPos\"\n      (keydown.enter)=\"scrollStart()\"\n      (mousedown)=\"scrollStart()\"\n    >\n      <si-icon-next class=\"icon flip-rtl\" [icon]=\"icons.elementLeft3\" />\n    </button>\n  }\n\n  <div #tabContainer class=\"tab-container-buttonbar\" (wheel)=\"mouseScroll($event)\">\n    <div #innerTabContainer class=\"tab-container-buttonbar-list focus-inside\">\n      @for (tab of tabPanels; track $index) {\n        <button\n          #tabElement\n          type=\"button\"\n          role=\"tab\"\n          class=\"nav-link focus-inside px-5\"\n          [attr.aria-controls]=\"tab.id\"\n          [id]=\"tab.tabId\"\n          [style.max-width.px]=\"tabButtonMaxWidth\"\n          [tabindex]=\"!tab.disabled && tab.active() && focusedTabIndex === undefined ? 0 : -1\"\n          [class.active]=\"tab.active()\"\n          [attr.aria-selected]=\"tab.active()\"\n          [class.disabled]=\"tab.disabled\"\n          (click)=\"selectTab(tab)\"\n          (keydown.arrowLeft)=\"focusPrevious()\"\n          (keydown.arrowRight)=\"focusNext()\"\n          (keydown.delete)=\"tab.closeTriggered.emit(tab)\"\n          (blur)=\"blur()\"\n          (focus)=\"focus($index)\"\n        >\n          <span class=\"text-truncate\">{{ tab.heading | translate }}</span>\n          @if (tab.icon) {\n            <si-icon-next\n              class=\"icon\"\n              [attr.role]=\"tab.iconAltText ? 'img' : 'presentation'\"\n              [icon]=\"tab.icon\"\n              [attr.aria-label]=\"(tab.iconAltText | translate) ?? undefined\"\n            />\n          }\n          @if (tab.badgeContent === true) {\n            <span class=\"badge-dot\"></span>\n          } @else if (tab.badgeContent && tab.badgeColor) {\n            <span class=\"badge\" [ngClass]=\"'bg-' + tab.badgeColor\">\n              {{ tab.badgeContent | translate }}\n            </span>\n          } @else if (tab.badgeContent && !tab.badgeColor) {\n            <span class=\"badge-text\"> {{ tab.badgeContent | translate }}</span>\n          }\n          @if (tab.closable && !tab.disabled) {\n            <si-icon-next\n              class=\"ms-4 me-n4 btn btn-circle btn-xs btn-ghost close\"\n              [icon]=\"icons.elementCancel\"\n              (click)=\"closeTab($event, tab)\"\n            />\n          }\n        </button>\n      }\n    </div>\n  </div>\n  @if (scrollable) {\n    <button\n      type=\"button\"\n      class=\"tab-container-control is-end focus-inside\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      [hidden]=\"endArrowDisabled\"\n      (keydown.enter)=\"scrollEnd()\"\n      (mousedown)=\"scrollEnd()\"\n    >\n      <si-icon-next class=\"icon flip-rtl\" [icon]=\"icons.elementRight3\" />\n    </button>\n  }\n</div>\n\n<ng-content />\n", styles: [":host{display:block;flex-direction:column}.tab-container-header{overflow:hidden;display:flex}.tab-container-buttonbar{flex:1;overflow:hidden}.tab-container-buttonbar-list{display:flex;margin:0;padding:0;list-style-type:none;transition:calc(.25s * var(--element-animations-enabled, 1))}.tab-container-buttonbar-list-item{flex:none}.tab-container-control{background:transparent;border:0;-webkit-user-select:none;user-select:none;padding-inline:0 7px;padding-block:6px 10px}.tab-container-control .is-end{padding-inline:7px 0}.tab-container-control:hover{color:var(--element-text-active)}.tab-container-control:disabled{color:var(--element-text-disabled);cursor:default}.nav-link{flex-shrink:0}.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "directive", type: SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle", "emitInitial"], outputs: ["siResizeObserver"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 __decorate([
     WebComponentContentChildren(SiTabComponent)