@siemens/element-ng 51.0.0-rc.9 → 51.0.1

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

@@ -3,7 +3,7 @@ import { CdkMenuTrigger } from '@angular/cdk/menu';
 import { DomPortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, Component, InjectionToken, booleanAttribute, output, inject, ElementRef, viewChild, TemplateRef, computed, effect, untracked, Directive, contentChildren, INJECTOR, signal, model } from '@angular/core';
+import { input, Component, InjectionToken, booleanAttribute, output, inject, ElementRef, viewChild, TemplateRef, computed, effect, untracked, Directive, model, contentChildren, INJECTOR, signal } from '@angular/core';
 import * as i1 from '@angular/router';
 import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { elementCancel, elementOptions } from '@siemens/element-icons';
@@ -243,6 +243,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     ], template: "@let icon = this.icon();\n<span class=\"text-truncate\" [class.visually-hidden]=\"!!icon\">{{ heading() | translate }}</span>\n@if (icon) {\n  <si-icon class=\"tab-icon\" [icon]=\"icon\" />\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon\n    class=\"ms-2 btn btn-circle btn-sm btn-tertiary-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)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:1.5rem}\n"] }]
         }] });
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Creates a normal tab that can contain any content.
+ *
+ * @example
+ * ```html
+ * <si-tabset>
+ *   <si-tab heading="Tab 1">
+ *     <p>Content of Tab 1</p>
+ *   </si-tab>
+ * </si-tabset>
+ * ```
+ */
+class SiTabComponent extends SiTabBaseDirective {
+    /**
+     * 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, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /**
+     * Guard to check if the tab can be activated.
+     * If not provided, the tab can always be activated.
+     */
+    canActivate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "canActivate" }] : /* istanbul ignore next */ []));
+    /**
+     * Guard to check if the tab can be deactivated.
+     * If not provided, the tab can always be deactivated.
+     */
+    canDeactivate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "canDeactivate" }] : /* istanbul ignore next */ []));
+    selectTabByUser() {
+        const canActivate = this.canActivate();
+        if (!this.active() && (canActivate ? canActivate() : true)) {
+            this.selectTab();
+        }
+    }
+    /** {@inheritDoc} */
+    selectTab(retainFocus) {
+        const activeTab = this.tabset.activeTab();
+        if (activeTab instanceof SiTabComponent) {
+            const canDeactivate = activeTab?.canDeactivate();
+            if (canDeactivate ? !canDeactivate() : false) {
+                return;
+            }
+        }
+        this.tabset.activeTab()?.deSelectTab();
+        this.active.set(true);
+        super.selectTab(retainFocus);
+    }
+    /** @internal */
+    deSelectTab() {
+        this.active.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiTabComponent, isStandalone: true, selector: "si-tab", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, canActivate: { classPropertyName: "canActivate", publicName: "canActivate", isSignal: true, isRequired: false, transformFunction: null }, canDeactivate: { classPropertyName: "canDeactivate", publicName: "canDeactivate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { listeners: { "click": "selectTabByUser()", "keydown.enter": "selectTabByUser()" } }, providers: [SiTooltipService, { provide: SiTabBaseDirective, useExisting: SiTabComponent }], usesInheritance: true, ngImport: i0, template: "@let icon = this.icon();\n<span class=\"text-truncate\" [class.visually-hidden]=\"!!icon\">{{ heading() | translate }}</span>\n@if (icon) {\n  <si-icon class=\"tab-icon\" [icon]=\"icon\" />\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon\n    class=\"ms-2 btn btn-circle btn-sm btn-tertiary-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)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:1.5rem}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-tab', imports: [SiIconComponent, SiTranslatePipe, SiTabBadgeComponent], providers: [SiTooltipService, { provide: SiTabBaseDirective, useExisting: SiTabComponent }], host: {
+                        '(click)': 'selectTabByUser()',
+                        '(keydown.enter)': 'selectTabByUser()'
+                    }, template: "@let icon = this.icon();\n<span class=\"text-truncate\" [class.visually-hidden]=\"!!icon\">{{ heading() | translate }}</span>\n@if (icon) {\n  <si-icon class=\"tab-icon\" [icon]=\"icon\" />\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon\n    class=\"ms-2 btn btn-circle btn-sm btn-tertiary-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)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:1.5rem}\n"] }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], canActivate: [{ type: i0.Input, args: [{ isSignal: true, alias: "canActivate", required: false }] }], canDeactivate: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeactivate", required: false }] }] } });
+
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
@@ -285,6 +355,28 @@ class SiTabsetComponent {
         return tab instanceof SiTabLinkComponent;
     }
     constructor() {
+        // Per the ARIA tabs pattern, at least one tab should be active. If the app
+        // does not provide an active tab, activate the first non-disabled content
+        // tab so the tablist stays keyboard reachable.
+        effect(() => {
+            const hasActiveTab = !!this.activeTab();
+            untracked(() => {
+                if (hasActiveTab) {
+                    return;
+                }
+                const tabToActivate = this.tabPanels().find(tab => {
+                    if (tab.disabledTab()) {
+                        return false;
+                    }
+                    if (tab instanceof SiTabComponent) {
+                        const canActivate = tab.canActivate();
+                        return canActivate ? canActivate() : true;
+                    }
+                    return true;
+                });
+                tabToActivate?.selectTab();
+            });
+        });
         effect(() => {
             if (this.showMenuButton() && this.activeTab()) {
                 // wait for menu button to render on DOM
@@ -329,7 +421,7 @@ class SiTabsetComponent {
                 provide: SI_TABSET,
                 useExisting: SiTabsetComponent
             }
-        ], queries: [{ propertyName: "tabPanels", predicate: SiTabBaseDirective, isSignal: true }], viewQueries: [{ propertyName: "contentNode", first: true, predicate: ["contentNode"], descendants: true, 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      (keydown)=\"keydown($event)\"\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      >\n        <si-icon class=\"icon m-0\" [icon]=\"icons.elementOptions\" />\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  <div #contentNode class=\"d-contents\">\n    @if (activeTab) {\n      <div\n        class=\"tab-content focus-inside\"\n        role=\"tabpanel\"\n        [id]=\"`content-${activeTab.tabId}`\"\n        [class.tab-scroll]=\"contentOverflowAuto()\"\n        [attr.tabindex]=\"contentOverflowAuto() ? '0' : null\"\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</div>\n\n<ng-template #tabsMenu>\n  <si-menu>\n    @for (tab of tabPanels(); track tab) {\n      @if (tabIsLink(tab)) {\n        <a\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tab.routerLink.urlTree\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </button>\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    <si-tab-badge [badgeContent]=\"tab.badgeContent()\" [badgeColor]=\"tab.badgeColor()\" />\n  </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-direction:column;overflow:hidden;block-size:100%}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.btn.dropdown{color:var(--si-sys-text-primary);min-inline-size:0;border-block-end:1px solid var(--si-sys-border-4);padding-inline:var(--si-sys-sizing-spacing-x-50);flex-shrink:0}.btn.dropdown:hover{border-color:var(--si-sys-border-4);color:var(--si-sys-text-accent-hover)}.tab-content{flex-grow:1}.tab-scroll{flex-basis:0;overflow:auto}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"], dependencies: [{ 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", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SiResizeObserverModule }, { kind: "directive", type: i1$1.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", "browserUrl", "routerLink"] }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
+        ], queries: [{ propertyName: "tabPanels", predicate: SiTabBaseDirective, isSignal: true }], viewQueries: [{ propertyName: "contentNode", first: true, predicate: ["contentNode"], descendants: true, 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      (keydown)=\"keydown($event)\"\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      >\n        <si-icon class=\"icon m-0\" [icon]=\"icons.elementOptions\" />\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  <div #contentNode class=\"d-contents\">\n    @if (activeTab) {\n      <div\n        class=\"tab-content focus-inside\"\n        role=\"tabpanel\"\n        [id]=\"`content-${activeTab.tabId}`\"\n        [class.tab-scroll]=\"contentOverflowAuto()\"\n        [attr.tabindex]=\"contentOverflowAuto() ? '0' : null\"\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</div>\n\n<ng-template #tabsMenu>\n  <si-menu>\n    @for (tab of tabPanels(); track tab) {\n      @if (tabIsLink(tab)) {\n        <a\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tab.routerLink.urlTree\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </button>\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    <si-tab-badge [badgeContent]=\"tab.badgeContent()\" [badgeColor]=\"tab.badgeColor()\" />\n  </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-direction:column;overflow:hidden;block-size:100%}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.btn.dropdown{color:var(--si-sys-color-text-primary);min-inline-size:0;border-block-end:1px solid var(--si-sys-color-border-4);padding-inline:var(--si-sys-sizing-spacing-x-50);flex-shrink:0}.btn.dropdown:hover{border-color:var(--si-sys-color-border-4);color:var(--si-sys-color-text-accent-hover)}.tab-content{flex-grow:1}.tab-scroll{flex-basis:0;overflow:auto}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"], dependencies: [{ 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", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SiResizeObserverModule }, { kind: "directive", type: i1$1.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", "browserUrl", "routerLink"] }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTabsetComponent, decorators: [{
             type: Component,
@@ -347,79 +439,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             provide: SI_TABSET,
                             useExisting: SiTabsetComponent
                         }
-                    ], 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      (keydown)=\"keydown($event)\"\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      >\n        <si-icon class=\"icon m-0\" [icon]=\"icons.elementOptions\" />\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  <div #contentNode class=\"d-contents\">\n    @if (activeTab) {\n      <div\n        class=\"tab-content focus-inside\"\n        role=\"tabpanel\"\n        [id]=\"`content-${activeTab.tabId}`\"\n        [class.tab-scroll]=\"contentOverflowAuto()\"\n        [attr.tabindex]=\"contentOverflowAuto() ? '0' : null\"\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</div>\n\n<ng-template #tabsMenu>\n  <si-menu>\n    @for (tab of tabPanels(); track tab) {\n      @if (tabIsLink(tab)) {\n        <a\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tab.routerLink.urlTree\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </button>\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    <si-tab-badge [badgeContent]=\"tab.badgeContent()\" [badgeColor]=\"tab.badgeColor()\" />\n  </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-direction:column;overflow:hidden;block-size:100%}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.btn.dropdown{color:var(--si-sys-text-primary);min-inline-size:0;border-block-end:1px solid var(--si-sys-border-4);padding-inline:var(--si-sys-sizing-spacing-x-50);flex-shrink:0}.btn.dropdown:hover{border-color:var(--si-sys-border-4);color:var(--si-sys-text-accent-hover)}.tab-content{flex-grow:1}.tab-scroll{flex-basis:0;overflow:auto}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"] }]
+                    ], 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      (keydown)=\"keydown($event)\"\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      >\n        <si-icon class=\"icon m-0\" [icon]=\"icons.elementOptions\" />\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  <div #contentNode class=\"d-contents\">\n    @if (activeTab) {\n      <div\n        class=\"tab-content focus-inside\"\n        role=\"tabpanel\"\n        [id]=\"`content-${activeTab.tabId}`\"\n        [class.tab-scroll]=\"contentOverflowAuto()\"\n        [attr.tabindex]=\"contentOverflowAuto() ? '0' : null\"\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</div>\n\n<ng-template #tabsMenu>\n  <si-menu>\n    @for (tab of tabPanels(); track tab) {\n      @if (tabIsLink(tab)) {\n        <a\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tab.routerLink.urlTree\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </button>\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    <si-tab-badge [badgeContent]=\"tab.badgeContent()\" [badgeColor]=\"tab.badgeColor()\" />\n  </div>\n</ng-template>\n", styles: [":host{display:block;flex-direction:column}.tabs-container{display:flex;flex-direction:column;overflow:hidden;block-size:100%}.tabs-container:before{inset-block-start:38px;inset-block-end:auto}.btn.dropdown{color:var(--si-sys-color-text-primary);min-inline-size:0;border-block-end:1px solid var(--si-sys-color-border-4);padding-inline:var(--si-sys-sizing-spacing-x-50);flex-shrink:0}.btn.dropdown:hover{border-color:var(--si-sys-color-border-4);color:var(--si-sys-color-text-accent-hover)}.tab-content{flex-grow:1}.tab-scroll{flex-basis:0;overflow:auto}.tabs-wrapper{overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentOverflowAuto: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentOverflowAuto", required: false }] }], contentNode: [{ type: i0.ViewChild, args: ['contentNode', { isSignal: true }] }], tabPanels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SiTabBaseDirective), { isSignal: true }] }] } });
 
-/**
- * Copyright (c) Siemens 2016 - 2026
- * SPDX-License-Identifier: MIT
- */
-/**
- * Creates a normal tab that can contain any content.
- *
- * @example
- * ```html
- * <si-tabset>
- *   <si-tab heading="Tab 1">
- *     <p>Content of Tab 1</p>
- *   </si-tab>
- * </si-tabset>
- * ```
- */
-class SiTabComponent extends SiTabBaseDirective {
-    /**
-     * 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, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    /**
-     * Guard to check if the tab can be activated.
-     * If not provided, the tab can always be activated.
-     */
-    canActivate = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "canActivate" }] : /* istanbul ignore next */ []));
-    /**
-     * Guard to check if the tab can be deactivated.
-     * If not provided, the tab can always be deactivated.
-     */
-    canDeactivate = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "canDeactivate" }] : /* istanbul ignore next */ []));
-    selectTabByUser() {
-        const canActivate = this.canActivate();
-        if (!this.active() && (canActivate ? canActivate() : true)) {
-            this.selectTab();
-        }
-    }
-    /** {@inheritDoc} */
-    selectTab(retainFocus) {
-        const activeTab = this.tabset.activeTab();
-        if (activeTab instanceof SiTabComponent) {
-            const canDeactivate = activeTab?.canDeactivate();
-            if (canDeactivate ? !canDeactivate() : false) {
-                return;
-            }
-        }
-        this.tabset.activeTab()?.deSelectTab();
-        this.active.set(true);
-        super.selectTab(retainFocus);
-    }
-    /** @internal */
-    deSelectTab() {
-        this.active.set(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiTabComponent, isStandalone: true, selector: "si-tab", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, canActivate: { classPropertyName: "canActivate", publicName: "canActivate", isSignal: true, isRequired: false, transformFunction: null }, canDeactivate: { classPropertyName: "canDeactivate", publicName: "canDeactivate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { listeners: { "click": "selectTabByUser()", "keydown.enter": "selectTabByUser()" } }, providers: [SiTooltipService, { provide: SiTabBaseDirective, useExisting: SiTabComponent }], usesInheritance: true, ngImport: i0, template: "@let icon = this.icon();\n<span class=\"text-truncate\" [class.visually-hidden]=\"!!icon\">{{ heading() | translate }}</span>\n@if (icon) {\n  <si-icon class=\"tab-icon\" [icon]=\"icon\" />\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon\n    class=\"ms-2 btn btn-circle btn-sm btn-tertiary-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)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:1.5rem}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTabComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'si-tab', imports: [SiIconComponent, SiTranslatePipe, SiTabBadgeComponent], providers: [SiTooltipService, { provide: SiTabBaseDirective, useExisting: SiTabComponent }], host: {
-                        '(click)': 'selectTabByUser()',
-                        '(keydown.enter)': 'selectTabByUser()'
-                    }, template: "@let icon = this.icon();\n<span class=\"text-truncate\" [class.visually-hidden]=\"!!icon\">{{ heading() | translate }}</span>\n@if (icon) {\n  <si-icon class=\"tab-icon\" [icon]=\"icon\" />\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon\n    class=\"ms-2 btn btn-circle btn-sm btn-tertiary-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)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:1.5rem}\n"] }]
-        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], canActivate: [{ type: i0.Input, args: [{ isSignal: true, alias: "canActivate", required: false }] }], canDeactivate: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeactivate", required: false }] }] } });
-
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT

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

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-tabs.mjs","sources":["../../../../projects/element-ng/tabs/si-tab-badge.component.ts","../../../../projects/element-ng/tabs/si-tab-badge.component.html","../../../../projects/element-ng/tabs/si-tabs-tokens.ts","../../../../projects/element-ng/tabs/si-tab-base.directive.ts","../../../../projects/element-ng/tabs/si-tab-link.component.ts","../../../../projects/element-ng/tabs/si-tab.component.html","../../../../projects/element-ng/tabs/si-tabset.component.ts","../../../../projects/element-ng/tabs/si-tabset.component.html","../../../../projects/element-ng/tabs/si-tab.component.ts","../../../../projects/element-ng/tabs/si-tab-portal.component.ts","../../../../projects/element-ng/tabs/index.ts","../../../../projects/element-ng/tabs/siemens-element-ng-tabs.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Component, input } from '@angular/core';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-tab-badge',\n  imports: [SiTranslatePipe],\n  templateUrl: './si-tab-badge.component.html',\n  styleUrl: './si-tab-badge.component.scss',\n  host: {\n    'class': 'd-contents'\n  }\n})\nexport class SiTabBadgeComponent {\n  /**\n   * Content displayed in the tab badge. Set to `true` to display a red dot.\n   */\n  readonly badgeContent = input<TranslatableString | boolean>();\n  /**\n   * Background color of the badge. When omitted, string content is displayed in a red dot badge.\n   */\n  readonly badgeColor = input<string>();\n}\n","@let badgeContent = this.badgeContent();\n@if (badgeContent === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent && badgeColor()) {\n  <span class=\"badge\" [class]=\"`bg-${badgeColor() || 'default'}`\">\n    {{ badgeContent ?? '' | translate }}\n  </span>\n} @else if (badgeContent && !badgeColor()) {\n  <span class=\"badge-text\"> {{ badgeContent ?? '' | translate }}</span>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { InjectionToken } from '@angular/core';\n\nimport { SiTabsetComponent } from './si-tabset.component';\n\nexport const SI_TABSET = new InjectionToken<SiTabsetComponent>('SiTabsetComponent');\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { FocusableOption } from '@angular/cdk/a11y';\nimport {\n  booleanAttribute,\n  computed,\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  Signal,\n  TemplateRef,\n  untracked,\n  viewChild\n} from '@angular/core';\nimport { elementCancel } from '@siemens/element-icons';\nimport { addIcons } from '@siemens/element-ng/icon';\nimport { SiTooltipDirective, SiTooltipService } from '@siemens/element-ng/tooltip';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SI_TABSET } from './si-tabs-tokens';\n\n@Directive({\n  selector: '[siTabNextBase]',\n  host: {\n    class: 'nav-link focus-inside px-5',\n    role: 'tab',\n    '[class.disabled]': 'disabledTab()',\n    '[class.icon-only]': '!!icon()',\n    '[class.pe-3]': 'closable()',\n    '[class.active]': 'active()',\n    '[attr.id]': \"'tab-' + tabId\",\n    '[attr.aria-selected]': 'active()',\n    '[attr.aria-disabled]': 'disabledTab()',\n    '[attr.tabindex]': 'tabset.focusKeyManager.activeItem === this && !disabledTab() ? 0 : -1',\n    '[attr.aria-controls]': \"'content-' + tabId\",\n    '(keydown.delete)': 'closeTab($event)'\n  }\n})\nexport abstract class SiTabBaseDirective implements OnDestroy, FocusableOption {\n  abstract readonly active: Signal<boolean | undefined>;\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  protected readonly tabButton = inject<ElementRef<HTMLElement>>(ElementRef);\n  /** @internal */\n  readonly tabContent = viewChild('tabContent', { read: TemplateRef });\n\n  private static tabCounter = 0;\n  private indexBeforeClose = -1;\n  private readonly tooltipService = inject(SiTooltipService);\n  private readonly existingTooltip = inject(SiTooltipDirective, { optional: true });\n  private readonly canShowTooltip = computed(\n    () =>\n      !!this.icon() &&\n      (!this.existingTooltip ||\n        this.existingTooltip.isDisabled() ||\n        !this.existingTooltip.siTooltip())\n  );\n  /** @internal */\n  tabId = `${SiTabBaseDirective.tabCounter++}`;\n  protected readonly icons = addIcons({ elementCancel });\n  protected tabset = inject(SI_TABSET);\n  private readonly index = computed(() => this.tabset.tabPanels().indexOf(this));\n\n  constructor() {\n    this.tooltipService.createTooltip({\n      element: this.tabButton,\n      placement: () => 'auto',\n      canShow: this.canShowTooltip,\n      tooltip: this.heading,\n      tooltipContext: () => undefined\n    });\n\n    // Update the focusKeyManager if a tab is added that is active or if the tab is set active by the app.\n    // This effect should not run, if active was already applied to the focusKeyManager.\n    effect(() => {\n      const active = this.active(); // We only want to subscribe to the active signal.\n      untracked(() => {\n        // !!! focusKeyManger.activeItem has signal reads internally. Do not move this outside of untracked.\n        if (active && this.tabset.focusKeyManager.activeItem !== this) {\n          this.tabset.focusKeyManager.updateActiveItem(this.index());\n        }\n      });\n    });\n  }\n\n  ngOnDestroy(): void {\n    if (this.indexBeforeClose >= 0) {\n      this.tabset.removedTabByUser(this.indexBeforeClose, this.active());\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  /** @internal */\n  focus(): 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.scrollTabIntoView();\n  }\n\n  /** @internal */\n  get disabled(): boolean {\n    return this.disabledTab();\n  }\n\n  /**\n   * Programmatically selects the current tab.\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  /** @internal */\n  deSelectTab(): void {\n    // Empty be default, can be overridden in derived classes.\n  }\n\n  /** @internal */\n  scrollTabIntoView(): void {\n    this.tabButton.nativeElement.scrollIntoView({\n      inline: 'nearest',\n      block: 'nearest',\n      behavior: 'instant'\n    });\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Component, inject } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { Router, RouterLink, RouterLinkActive } from '@angular/router';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTooltipService } from '@siemens/element-ng/tooltip';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\nimport { startWith } from 'rxjs/operators';\n\nimport { SiTabBadgeComponent } from './si-tab-badge.component';\nimport { SiTabBaseDirective } from './si-tab-base.directive';\n\n/**\n * Creates a tab that uses the Angular router.\n *\n * @example\n * ```html\n * <si-tabset>\n *   <a si-tab routerLink=\"/home\" heading=\"Home\"></a>\n *\n *   <router-outlet />\n * </si-tabset>\n * ```\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'a[si-tab][routerLink]',\n  imports: [SiIconComponent, SiTranslatePipe, SiTabBadgeComponent],\n  templateUrl: './si-tab.component.html',\n  styleUrl: './si-tab.component.scss',\n  providers: [SiTooltipService, { provide: SiTabBaseDirective, useExisting: SiTabLinkComponent }],\n  hostDirectives: [\n    {\n      directive: RouterLinkActive\n    }\n  ]\n})\nexport class SiTabLinkComponent extends SiTabBaseDirective {\n  private router = inject(Router);\n  /** @internal */\n  routerLink = inject(RouterLink, { self: true });\n  protected routerLinkActive = inject(RouterLinkActive, { self: true });\n  /** @defaultValue false */\n  override readonly active = toSignal(\n    this.routerLinkActive.isActiveChange.pipe(startWith(this.routerLinkActive.isActive))\n  );\n  /** {@inheritDoc} */\n  override selectTab(retainFocus?: boolean): void {\n    if (this.routerLink.urlTree) {\n      this.router.navigateByUrl(this.routerLink.urlTree, {\n        skipLocationChange: this.routerLink.skipLocationChange,\n        replaceUrl: this.routerLink.replaceUrl,\n        info: this.routerLink.info,\n        state: this.routerLink.state\n      });\n    }\n    super.selectTab(retainFocus);\n  }\n}\n","@let icon = this.icon();\n<span class=\"text-truncate\" [class.visually-hidden]=\"!!icon\">{{ heading() | translate }}</span>\n@if (icon) {\n  <si-icon class=\"tab-icon\" [icon]=\"icon\" />\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon\n    class=\"ms-2 btn btn-circle btn-sm btn-tertiary-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 (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { FocusKeyManager } from '@angular/cdk/a11y';\nimport { CdkMenuTrigger } from '@angular/cdk/menu';\nimport { DomPortal } from '@angular/cdk/portal';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  Component,\n  computed,\n  contentChildren,\n  effect,\n  inject,\n  INJECTOR,\n  input,\n  signal,\n  viewChild\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { elementOptions } from '@siemens/element-icons';\nimport { isRTL } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiMenuDirective, SiMenuItemComponent } from '@siemens/element-ng/menu';\nimport { SiResizeObserverModule } from '@siemens/element-ng/resize-observer';\n\nimport { SiTabBadgeComponent } from './si-tab-badge.component';\nimport { SiTabBaseDirective } from './si-tab-base.directive';\nimport { SiTabLinkComponent } from './si-tab-link.component';\nimport { SI_TABSET } from './si-tabs-tokens';\n\n/**\n * A component to group multiple tabs together.\n * Can either be used with {@link SiTabLinkComponent} or {@link SiTabComponent} components.\n */\n@Component({\n  selector: 'si-tabset',\n  imports: [\n    SiMenuDirective,\n    SiMenuItemComponent,\n    CdkMenuTrigger,\n    NgTemplateOutlet,\n    SiResizeObserverModule,\n    RouterLink,\n    SiTabBadgeComponent,\n    SiIconComponent\n  ],\n  templateUrl: './si-tabset.component.html',\n  styleUrl: './si-tabset.component.scss',\n  providers: [\n    {\n      provide: SI_TABSET,\n      useExisting: SiTabsetComponent\n    }\n  ]\n})\nexport class SiTabsetComponent {\n  /**\n   * When set, the overflowing content inside the tab will automatically scroll\n   * @defaultValue false\n   **/\n  readonly contentOverflowAuto = input(false, { transform: booleanAttribute });\n\n  protected readonly icons = addIcons({ elementOptions });\n\n  private readonly contentNode = viewChild.required('contentNode');\n  /**\n   * A `DomPortal` wrapping the tab panel container. Used by {@link SiTabPortalComponent}\n   * to render the active tab's content at a remote location in the DOM.\n   *\n   * @internal\n   */\n  readonly contentPortal = computed(() => new DomPortal(this.contentNode()));\n\n  /** @internal */\n  readonly activeTab = computed(() => this.tabPanels().find(tab => tab.active()));\n\n  /** @internal */\n  readonly tabPanels = contentChildren(SiTabBaseDirective);\n\n  /** @internal */\n  focusKeyManager = new FocusKeyManager(this.tabPanels, inject(INJECTOR))\n    .withHorizontalOrientation(isRTL() ? 'rtl' : 'ltr')\n    .withWrap(true);\n\n  /** @internal */\n  protected readonly showMenuButton = signal(false);\n\n  protected tabIsLink(tab: unknown): tab is SiTabLinkComponent {\n    return tab instanceof SiTabLinkComponent;\n  }\n\n  constructor() {\n    effect(() => {\n      if (this.showMenuButton() && this.activeTab()) {\n        // wait for menu button to render on DOM\n        setTimeout(() => {\n          this.activeTab()?.scrollTabIntoView();\n        });\n      }\n    });\n  }\n\n  /** @internal */\n  removedTabByUser(index: number, active?: boolean): void {\n    // The tab was already removed from the tabPanels list when this function is called.\n    // We need to:\n    // - focus another tab if the closed one was focused\n    // - activate another tab if the closed one was active\n    // If the closed tab was not focussed, there is no need to restore the focus as it could only be closed by mouse.\n    for (let i = 0; i < this.tabPanels().length; i++) {\n      // Get the actual index using modulo to wrap around\n      const checkIndex = (index + i) % this.tabPanels().length;\n      const checkTab = this.tabPanels()[checkIndex];\n      if (!checkTab.disabledTab()) {\n        if (this.focusKeyManager.activeItemIndex === index) {\n          this.focusKeyManager.setActiveItem(checkIndex);\n        }\n        if (active) {\n          checkTab.selectTab(true);\n        }\n        return;\n      }\n    }\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  protected keydown(event: KeyboardEvent): void {\n    this.focusKeyManager.onKeydown(event);\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      (keydown)=\"keydown($event)\"\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      >\n        <si-icon class=\"icon m-0\" [icon]=\"icons.elementOptions\" />\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  <div #contentNode class=\"d-contents\">\n    @if (activeTab) {\n      <div\n        class=\"tab-content focus-inside\"\n        role=\"tabpanel\"\n        [id]=\"`content-${activeTab.tabId}`\"\n        [class.tab-scroll]=\"contentOverflowAuto()\"\n        [attr.tabindex]=\"contentOverflowAuto() ? '0' : null\"\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</div>\n\n<ng-template #tabsMenu>\n  <si-menu>\n    @for (tab of tabPanels(); track tab) {\n      @if (tabIsLink(tab)) {\n        <a\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tab.routerLink.urlTree\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </button>\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    <si-tab-badge [badgeContent]=\"tab.badgeContent()\" [badgeColor]=\"tab.badgeColor()\" />\n  </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Component, input, model, OnDestroy } from '@angular/core';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTooltipService } from '@siemens/element-ng/tooltip';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { SiTabBadgeComponent } from './si-tab-badge.component';\nimport { SiTabBaseDirective } from './si-tab-base.directive';\n\n/**\n * Creates a normal tab that can contain any content.\n *\n * @example\n * ```html\n * <si-tabset>\n *   <si-tab heading=\"Tab 1\">\n *     <p>Content of Tab 1</p>\n *   </si-tab>\n * </si-tabset>\n * ```\n */\n@Component({\n  selector: 'si-tab',\n  imports: [SiIconComponent, SiTranslatePipe, SiTabBadgeComponent],\n  templateUrl: './si-tab.component.html',\n  styleUrl: './si-tab.component.scss',\n  providers: [SiTooltipService, { provide: SiTabBaseDirective, useExisting: SiTabComponent }],\n  host: {\n    '(click)': 'selectTabByUser()',\n    '(keydown.enter)': 'selectTabByUser()'\n  }\n})\nexport class SiTabComponent extends SiTabBaseDirective 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  /**\n   * Guard to check if the tab can be activated.\n   * If not provided, the tab can always be activated.\n   */\n  readonly canActivate = input<() => boolean>();\n  /**\n   * Guard to check if the tab can be deactivated.\n   * If not provided, the tab can always be deactivated.\n   */\n  readonly canDeactivate = input<() => boolean>();\n\n  protected selectTabByUser(): void {\n    const canActivate = this.canActivate();\n    if (!this.active() && (canActivate ? canActivate() : true)) {\n      this.selectTab();\n    }\n  }\n\n  /** {@inheritDoc} */\n  override selectTab(retainFocus?: boolean): void {\n    const activeTab = this.tabset.activeTab();\n    if (activeTab instanceof SiTabComponent) {\n      const canDeactivate = activeTab?.canDeactivate();\n      if (canDeactivate ? !canDeactivate() : false) {\n        return;\n      }\n    }\n    this.tabset.activeTab()?.deSelectTab();\n    this.active.set(true);\n    super.selectTab(retainFocus);\n  }\n\n  /** @internal */\n  override deSelectTab(): void {\n    this.active.set(false);\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { CdkPortalOutlet } from '@angular/cdk/portal';\nimport { Component, input } from '@angular/core';\n\nimport { SiTabsetComponent } from './si-tabset.component';\n\n/**\n * A component that renders the active tab's content at a remote\n * location in the DOM using an Angular CDK `DomPortal`.\n *\n * This component **automatically** renders the content of the currently\n * active `si-tab`, including the `role=\"tabpanel\"` container with proper\n * ARIA attributes linked to the active tab.\n *\n * @example\n * ```html\n * <si-tabset #tabset>\n *   <si-tab heading=\"Overview\" [active]=\"true\">\n *     overview content\n *   </si-tab>\n *   <si-tab heading=\"History\">\n *     history content\n *   </si-tab>\n * </si-tabset>\n *\n * <si-tab-portal [tabset]=\"tabset\" />\n * ```\n */\n@Component({\n  selector: 'si-tab-portal',\n  imports: [CdkPortalOutlet],\n  template: ` <ng-template [cdkPortalOutlet]=\"tabset().contentPortal()\" /> `\n})\nexport class SiTabPortalComponent {\n  /**\n   * Reference to the {@link SiTabsetComponent} whose active tab content\n   * this component renders via a `DomPortal`.\n   *\n   * The tabset's tab panel container, including the `role=\"tabpanel\"` element\n   * with proper ARIA attributes, is transported to this component's location.\n   */\n  readonly tabset = input.required<SiTabsetComponent>();\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tabset.component';\nexport * from './si-tab.component';\nexport * from './si-tab-link.component';\nexport * from './si-tab-portal.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-tabs.mjs","sources":["../../../../projects/element-ng/tabs/si-tab-badge.component.ts","../../../../projects/element-ng/tabs/si-tab-badge.component.html","../../../../projects/element-ng/tabs/si-tabs-tokens.ts","../../../../projects/element-ng/tabs/si-tab-base.directive.ts","../../../../projects/element-ng/tabs/si-tab-link.component.ts","../../../../projects/element-ng/tabs/si-tab.component.html","../../../../projects/element-ng/tabs/si-tab.component.ts","../../../../projects/element-ng/tabs/si-tabset.component.ts","../../../../projects/element-ng/tabs/si-tabset.component.html","../../../../projects/element-ng/tabs/si-tab-portal.component.ts","../../../../projects/element-ng/tabs/index.ts","../../../../projects/element-ng/tabs/siemens-element-ng-tabs.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Component, input } from '@angular/core';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-tab-badge',\n  imports: [SiTranslatePipe],\n  templateUrl: './si-tab-badge.component.html',\n  styleUrl: './si-tab-badge.component.scss',\n  host: {\n    'class': 'd-contents'\n  }\n})\nexport class SiTabBadgeComponent {\n  /**\n   * Content displayed in the tab badge. Set to `true` to display a red dot.\n   */\n  readonly badgeContent = input<TranslatableString | boolean>();\n  /**\n   * Background color of the badge. When omitted, string content is displayed in a red dot badge.\n   */\n  readonly badgeColor = input<string>();\n}\n","@let badgeContent = this.badgeContent();\n@if (badgeContent === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent && badgeColor()) {\n  <span class=\"badge\" [class]=\"`bg-${badgeColor() || 'default'}`\">\n    {{ badgeContent ?? '' | translate }}\n  </span>\n} @else if (badgeContent && !badgeColor()) {\n  <span class=\"badge-text\"> {{ badgeContent ?? '' | translate }}</span>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { InjectionToken } from '@angular/core';\n\nimport { SiTabsetComponent } from './si-tabset.component';\n\nexport const SI_TABSET = new InjectionToken<SiTabsetComponent>('SiTabsetComponent');\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { FocusableOption } from '@angular/cdk/a11y';\nimport {\n  booleanAttribute,\n  computed,\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  Signal,\n  TemplateRef,\n  untracked,\n  viewChild\n} from '@angular/core';\nimport { elementCancel } from '@siemens/element-icons';\nimport { addIcons } from '@siemens/element-ng/icon';\nimport { SiTooltipDirective, SiTooltipService } from '@siemens/element-ng/tooltip';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SI_TABSET } from './si-tabs-tokens';\n\n@Directive({\n  selector: '[siTabNextBase]',\n  host: {\n    class: 'nav-link focus-inside px-5',\n    role: 'tab',\n    '[class.disabled]': 'disabledTab()',\n    '[class.icon-only]': '!!icon()',\n    '[class.pe-3]': 'closable()',\n    '[class.active]': 'active()',\n    '[attr.id]': \"'tab-' + tabId\",\n    '[attr.aria-selected]': 'active()',\n    '[attr.aria-disabled]': 'disabledTab()',\n    '[attr.tabindex]': 'tabset.focusKeyManager.activeItem === this && !disabledTab() ? 0 : -1',\n    '[attr.aria-controls]': \"'content-' + tabId\",\n    '(keydown.delete)': 'closeTab($event)'\n  }\n})\nexport abstract class SiTabBaseDirective implements OnDestroy, FocusableOption {\n  abstract readonly active: Signal<boolean | undefined>;\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  protected readonly tabButton = inject<ElementRef<HTMLElement>>(ElementRef);\n  /** @internal */\n  readonly tabContent = viewChild('tabContent', { read: TemplateRef });\n\n  private static tabCounter = 0;\n  private indexBeforeClose = -1;\n  private readonly tooltipService = inject(SiTooltipService);\n  private readonly existingTooltip = inject(SiTooltipDirective, { optional: true });\n  private readonly canShowTooltip = computed(\n    () =>\n      !!this.icon() &&\n      (!this.existingTooltip ||\n        this.existingTooltip.isDisabled() ||\n        !this.existingTooltip.siTooltip())\n  );\n  /** @internal */\n  tabId = `${SiTabBaseDirective.tabCounter++}`;\n  protected readonly icons = addIcons({ elementCancel });\n  protected tabset = inject(SI_TABSET);\n  private readonly index = computed(() => this.tabset.tabPanels().indexOf(this));\n\n  constructor() {\n    this.tooltipService.createTooltip({\n      element: this.tabButton,\n      placement: () => 'auto',\n      canShow: this.canShowTooltip,\n      tooltip: this.heading,\n      tooltipContext: () => undefined\n    });\n\n    // Update the focusKeyManager if a tab is added that is active or if the tab is set active by the app.\n    // This effect should not run, if active was already applied to the focusKeyManager.\n    effect(() => {\n      const active = this.active(); // We only want to subscribe to the active signal.\n      untracked(() => {\n        // !!! focusKeyManger.activeItem has signal reads internally. Do not move this outside of untracked.\n        if (active && this.tabset.focusKeyManager.activeItem !== this) {\n          this.tabset.focusKeyManager.updateActiveItem(this.index());\n        }\n      });\n    });\n  }\n\n  ngOnDestroy(): void {\n    if (this.indexBeforeClose >= 0) {\n      this.tabset.removedTabByUser(this.indexBeforeClose, this.active());\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  /** @internal */\n  focus(): 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.scrollTabIntoView();\n  }\n\n  /** @internal */\n  get disabled(): boolean {\n    return this.disabledTab();\n  }\n\n  /**\n   * Programmatically selects the current tab.\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  /** @internal */\n  deSelectTab(): void {\n    // Empty be default, can be overridden in derived classes.\n  }\n\n  /** @internal */\n  scrollTabIntoView(): void {\n    this.tabButton.nativeElement.scrollIntoView({\n      inline: 'nearest',\n      block: 'nearest',\n      behavior: 'instant'\n    });\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Component, inject } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { Router, RouterLink, RouterLinkActive } from '@angular/router';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTooltipService } from '@siemens/element-ng/tooltip';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\nimport { startWith } from 'rxjs/operators';\n\nimport { SiTabBadgeComponent } from './si-tab-badge.component';\nimport { SiTabBaseDirective } from './si-tab-base.directive';\n\n/**\n * Creates a tab that uses the Angular router.\n *\n * @example\n * ```html\n * <si-tabset>\n *   <a si-tab routerLink=\"/home\" heading=\"Home\"></a>\n *\n *   <router-outlet />\n * </si-tabset>\n * ```\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'a[si-tab][routerLink]',\n  imports: [SiIconComponent, SiTranslatePipe, SiTabBadgeComponent],\n  templateUrl: './si-tab.component.html',\n  styleUrl: './si-tab.component.scss',\n  providers: [SiTooltipService, { provide: SiTabBaseDirective, useExisting: SiTabLinkComponent }],\n  hostDirectives: [\n    {\n      directive: RouterLinkActive\n    }\n  ]\n})\nexport class SiTabLinkComponent extends SiTabBaseDirective {\n  private router = inject(Router);\n  /** @internal */\n  routerLink = inject(RouterLink, { self: true });\n  protected routerLinkActive = inject(RouterLinkActive, { self: true });\n  /** @defaultValue false */\n  override readonly active = toSignal(\n    this.routerLinkActive.isActiveChange.pipe(startWith(this.routerLinkActive.isActive))\n  );\n  /** {@inheritDoc} */\n  override selectTab(retainFocus?: boolean): void {\n    if (this.routerLink.urlTree) {\n      this.router.navigateByUrl(this.routerLink.urlTree, {\n        skipLocationChange: this.routerLink.skipLocationChange,\n        replaceUrl: this.routerLink.replaceUrl,\n        info: this.routerLink.info,\n        state: this.routerLink.state\n      });\n    }\n    super.selectTab(retainFocus);\n  }\n}\n","@let icon = this.icon();\n<span class=\"text-truncate\" [class.visually-hidden]=\"!!icon\">{{ heading() | translate }}</span>\n@if (icon) {\n  <si-icon class=\"tab-icon\" [icon]=\"icon\" />\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon\n    class=\"ms-2 btn btn-circle btn-sm btn-tertiary-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 (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Component, input, model, OnDestroy } from '@angular/core';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTooltipService } from '@siemens/element-ng/tooltip';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { SiTabBadgeComponent } from './si-tab-badge.component';\nimport { SiTabBaseDirective } from './si-tab-base.directive';\n\n/**\n * Creates a normal tab that can contain any content.\n *\n * @example\n * ```html\n * <si-tabset>\n *   <si-tab heading=\"Tab 1\">\n *     <p>Content of Tab 1</p>\n *   </si-tab>\n * </si-tabset>\n * ```\n */\n@Component({\n  selector: 'si-tab',\n  imports: [SiIconComponent, SiTranslatePipe, SiTabBadgeComponent],\n  templateUrl: './si-tab.component.html',\n  styleUrl: './si-tab.component.scss',\n  providers: [SiTooltipService, { provide: SiTabBaseDirective, useExisting: SiTabComponent }],\n  host: {\n    '(click)': 'selectTabByUser()',\n    '(keydown.enter)': 'selectTabByUser()'\n  }\n})\nexport class SiTabComponent extends SiTabBaseDirective 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  /**\n   * Guard to check if the tab can be activated.\n   * If not provided, the tab can always be activated.\n   */\n  readonly canActivate = input<() => boolean>();\n  /**\n   * Guard to check if the tab can be deactivated.\n   * If not provided, the tab can always be deactivated.\n   */\n  readonly canDeactivate = input<() => boolean>();\n\n  protected selectTabByUser(): void {\n    const canActivate = this.canActivate();\n    if (!this.active() && (canActivate ? canActivate() : true)) {\n      this.selectTab();\n    }\n  }\n\n  /** {@inheritDoc} */\n  override selectTab(retainFocus?: boolean): void {\n    const activeTab = this.tabset.activeTab();\n    if (activeTab instanceof SiTabComponent) {\n      const canDeactivate = activeTab?.canDeactivate();\n      if (canDeactivate ? !canDeactivate() : false) {\n        return;\n      }\n    }\n    this.tabset.activeTab()?.deSelectTab();\n    this.active.set(true);\n    super.selectTab(retainFocus);\n  }\n\n  /** @internal */\n  override deSelectTab(): void {\n    this.active.set(false);\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { FocusKeyManager } from '@angular/cdk/a11y';\nimport { CdkMenuTrigger } from '@angular/cdk/menu';\nimport { DomPortal } from '@angular/cdk/portal';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  Component,\n  computed,\n  contentChildren,\n  effect,\n  inject,\n  INJECTOR,\n  input,\n  signal,\n  untracked,\n  viewChild\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { elementOptions } from '@siemens/element-icons';\nimport { isRTL } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiMenuDirective, SiMenuItemComponent } from '@siemens/element-ng/menu';\nimport { SiResizeObserverModule } from '@siemens/element-ng/resize-observer';\n\nimport { SiTabBadgeComponent } from './si-tab-badge.component';\nimport { SiTabBaseDirective } from './si-tab-base.directive';\nimport { SiTabLinkComponent } from './si-tab-link.component';\nimport { SiTabComponent } from './si-tab.component';\nimport { SI_TABSET } from './si-tabs-tokens';\n\n/**\n * A component to group multiple tabs together.\n * Can either be used with {@link SiTabLinkComponent} or {@link SiTabComponent} components.\n */\n@Component({\n  selector: 'si-tabset',\n  imports: [\n    SiMenuDirective,\n    SiMenuItemComponent,\n    CdkMenuTrigger,\n    NgTemplateOutlet,\n    SiResizeObserverModule,\n    RouterLink,\n    SiTabBadgeComponent,\n    SiIconComponent\n  ],\n  templateUrl: './si-tabset.component.html',\n  styleUrl: './si-tabset.component.scss',\n  providers: [\n    {\n      provide: SI_TABSET,\n      useExisting: SiTabsetComponent\n    }\n  ]\n})\nexport class SiTabsetComponent {\n  /**\n   * When set, the overflowing content inside the tab will automatically scroll\n   * @defaultValue false\n   **/\n  readonly contentOverflowAuto = input(false, { transform: booleanAttribute });\n\n  protected readonly icons = addIcons({ elementOptions });\n\n  private readonly contentNode = viewChild.required('contentNode');\n  /**\n   * A `DomPortal` wrapping the tab panel container. Used by {@link SiTabPortalComponent}\n   * to render the active tab's content at a remote location in the DOM.\n   *\n   * @internal\n   */\n  readonly contentPortal = computed(() => new DomPortal(this.contentNode()));\n\n  /** @internal */\n  readonly activeTab = computed(() => this.tabPanels().find(tab => tab.active()));\n\n  /** @internal */\n  readonly tabPanels = contentChildren(SiTabBaseDirective);\n\n  /** @internal */\n  focusKeyManager = new FocusKeyManager(this.tabPanels, inject(INJECTOR))\n    .withHorizontalOrientation(isRTL() ? 'rtl' : 'ltr')\n    .withWrap(true);\n\n  /** @internal */\n  protected readonly showMenuButton = signal(false);\n\n  protected tabIsLink(tab: unknown): tab is SiTabLinkComponent {\n    return tab instanceof SiTabLinkComponent;\n  }\n\n  constructor() {\n    // Per the ARIA tabs pattern, at least one tab should be active. If the app\n    // does not provide an active tab, activate the first non-disabled content\n    // tab so the tablist stays keyboard reachable.\n    effect(() => {\n      const hasActiveTab = !!this.activeTab();\n      untracked(() => {\n        if (hasActiveTab) {\n          return;\n        }\n        const tabToActivate = this.tabPanels().find(tab => {\n          if (tab.disabledTab()) {\n            return false;\n          }\n          if (tab instanceof SiTabComponent) {\n            const canActivate = tab.canActivate();\n            return canActivate ? canActivate() : true;\n          }\n          return true;\n        });\n        tabToActivate?.selectTab();\n      });\n    });\n\n    effect(() => {\n      if (this.showMenuButton() && this.activeTab()) {\n        // wait for menu button to render on DOM\n        setTimeout(() => {\n          this.activeTab()?.scrollTabIntoView();\n        });\n      }\n    });\n  }\n\n  /** @internal */\n  removedTabByUser(index: number, active?: boolean): void {\n    // The tab was already removed from the tabPanels list when this function is called.\n    // We need to:\n    // - focus another tab if the closed one was focused\n    // - activate another tab if the closed one was active\n    // If the closed tab was not focussed, there is no need to restore the focus as it could only be closed by mouse.\n    for (let i = 0; i < this.tabPanels().length; i++) {\n      // Get the actual index using modulo to wrap around\n      const checkIndex = (index + i) % this.tabPanels().length;\n      const checkTab = this.tabPanels()[checkIndex];\n      if (!checkTab.disabledTab()) {\n        if (this.focusKeyManager.activeItemIndex === index) {\n          this.focusKeyManager.setActiveItem(checkIndex);\n        }\n        if (active) {\n          checkTab.selectTab(true);\n        }\n        return;\n      }\n    }\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  protected keydown(event: KeyboardEvent): void {\n    this.focusKeyManager.onKeydown(event);\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      (keydown)=\"keydown($event)\"\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      >\n        <si-icon class=\"icon m-0\" [icon]=\"icons.elementOptions\" />\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  <div #contentNode class=\"d-contents\">\n    @if (activeTab) {\n      <div\n        class=\"tab-content focus-inside\"\n        role=\"tabpanel\"\n        [id]=\"`content-${activeTab.tabId}`\"\n        [class.tab-scroll]=\"contentOverflowAuto()\"\n        [attr.tabindex]=\"contentOverflowAuto() ? '0' : null\"\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</div>\n\n<ng-template #tabsMenu>\n  <si-menu>\n    @for (tab of tabPanels(); track tab) {\n      @if (tabIsLink(tab)) {\n        <a\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tab.routerLink.urlTree\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </button>\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    <si-tab-badge [badgeContent]=\"tab.badgeContent()\" [badgeColor]=\"tab.badgeColor()\" />\n  </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { CdkPortalOutlet } from '@angular/cdk/portal';\nimport { Component, input } from '@angular/core';\n\nimport { SiTabsetComponent } from './si-tabset.component';\n\n/**\n * A component that renders the active tab's content at a remote\n * location in the DOM using an Angular CDK `DomPortal`.\n *\n * This component **automatically** renders the content of the currently\n * active `si-tab`, including the `role=\"tabpanel\"` container with proper\n * ARIA attributes linked to the active tab.\n *\n * @example\n * ```html\n * <si-tabset #tabset>\n *   <si-tab heading=\"Overview\" [active]=\"true\">\n *     overview content\n *   </si-tab>\n *   <si-tab heading=\"History\">\n *     history content\n *   </si-tab>\n * </si-tabset>\n *\n * <si-tab-portal [tabset]=\"tabset\" />\n * ```\n */\n@Component({\n  selector: 'si-tab-portal',\n  imports: [CdkPortalOutlet],\n  template: ` <ng-template [cdkPortalOutlet]=\"tabset().contentPortal()\" /> `\n})\nexport class SiTabPortalComponent {\n  /**\n   * Reference to the {@link SiTabsetComponent} whose active tab content\n   * this component renders via a `DomPortal`.\n   *\n   * The tabset's tab panel container, including the `role=\"tabpanel\"` element\n   * with proper ARIA attributes, is transported to this component's location.\n   */\n  readonly tabset = input.required<SiTabsetComponent>();\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tabset.component';\nexport * from './si-tab.component';\nexport * from './si-tab-link.component';\nexport * from './si-tab-portal.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

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

@@ -279,7 +279,7 @@ class SiThresholdComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiThresholdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiThresholdComponent, isStandalone: true, selector: "si-threshold", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, thresholdSteps: { classPropertyName: "thresholdSteps", publicName: "thresholdSteps", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, stepSize: { classPropertyName: "stepSize", publicName: "stepSize", isSignal: true, isRequired: false, transformFunction: null }, maxSteps: { classPropertyName: "maxSteps", publicName: "maxSteps", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, canAddRemoveSteps: { classPropertyName: "canAddRemoveSteps", publicName: "canAddRemoveSteps", isSignal: true, isRequired: false, transformFunction: null }, horizontalLayout: { classPropertyName: "horizontalLayout", publicName: "horizontalLayout", isSignal: true, isRequired: false, transformFunction: null }, showDecIncButtons: { classPropertyName: "showDecIncButtons", publicName: "showDecIncButtons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, readonlyConditions: { classPropertyName: "readonlyConditions", publicName: "readonlyConditions", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, deleteAriaLabel: { classPropertyName: "deleteAriaLabel", publicName: "deleteAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, addAriaLabel: { classPropertyName: "addAriaLabel", publicName: "addAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputAriaLabel: { classPropertyName: "inputAriaLabel", publicName: "inputAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, statusAriaLabel: { classPropertyName: "statusAriaLabel", publicName: "statusAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, useAliasForStepValues: { classPropertyName: "useAliasForStepValues", publicName: "useAliasForStepValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thresholdSteps: "thresholdStepsChange", validChange: "validChange" }, host: { properties: { "class.add-remove": "canAddRemoveSteps()", "class.horizontal": "horizontalLayout()", "class.dec-inc-buttons": "showDecIncButtons()" } }, viewQueries: [{ propertyName: "numberInputs", predicate: SiNumberInputComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@for (step of thresholdSteps(); track step) {\n  <div class=\"ths-step\">\n    @if (!$first) {\n      <div class=\"ths-value d-flex align-items-center\">\n        @if (showAddRemoveButtons()) {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary-ghost m-4\"\n            [attr.aria-label]=\"deleteAriaLabel() | translate\"\n            (click)=\"deleteStep($index)\"\n          >\n            <si-icon [icon]=\"icons.elementDelete\" />\n          </button>\n        } @else {\n          <div class=\"py-4 my-4\">&#8203;</div>\n        }\n        <div class=\"line\">\n          <div class=\"segment\" [class]=\"colors()[$index - 1]\"></div>\n          <div class=\"dot\"></div>\n          <div class=\"segment\" [class]=\"colors()[$index]\"></div>\n        </div>\n        <div class=\"d-flex align-items-center text-nowrap m-4\">\n          @if (useAliasForStepValues()) {\n            <input\n              type=\"text\"\n              readonly\n              class=\"form-control\"\n              [value]=\"step.aliasLabel ?? '' | translate\"\n            />\n          } @else {\n            <si-number-input\n              #valueInput=\"ngModel\"\n              class=\"form-control text-end\"\n              [class.is-invalid]=\"step.valid === false\"\n              [aria-label]=\"inputAriaLabel() | translate\"\n              [readonly]=\"readonly()\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [min]=\"minValue()\"\n              [max]=\"maxValue()\"\n              [step]=\"stepSize()\"\n              [unit]=\"unit()\"\n              [showButtons]=\"showDecIncButtons()\"\n              [required]=\"true\"\n              [(ngModel)]=\"step.value\"\n              (ngModelChange)=\"stepChange()\"\n            />\n          }\n        </div>\n      </div>\n    }\n    @if ($first && horizontalLayout()) {\n      <ng-container\n        [ngTemplateOutlet]=\"startend\"\n        [ngTemplateOutletContext]=\"{ color: colors()[$index] }\"\n      />\n    }\n    <div class=\"ths-option d-flex align-items-center\">\n      @if (showAddRemoveButtons()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-circle btn-secondary m-4\"\n          [disabled]=\"maxSteps() && $count >= maxSteps()\"\n          [attr.aria-label]=\"addAriaLabel() | translate\"\n          (click)=\"addStep($index)\"\n        >\n          <si-icon [icon]=\"icons.elementPlus\" />\n        </button>\n      } @else {\n        <div class=\"py-4 my-4\">&#8203;</div>\n      }\n      <div class=\"line\" [class]=\"colors()[$index]\">\n        <div class=\"segment\"></div>\n      </div>\n      @if (!readonly() && !readonlyConditions()) {\n        <si-select\n          class=\"btn btn-ghost my-4\"\n          [ariaLabel]=\"statusAriaLabel() | translate\"\n          [readonly]=\"readonly()\"\n          [options]=\"options()\"\n          [scrollStrategy]=\"scrollStrategy()\"\n          [(value)]=\"step.optionValue\"\n          (valueChange)=\"stepChange()\"\n        />\n      }\n      @if (readonly() || readonlyConditions()) {\n        <si-readonly-threshold-option [options]=\"options()\" [value]=\"step.optionValue\" />\n      }\n    </div>\n    @if ($last && horizontalLayout()) {\n      <ng-container\n        [ngTemplateOutlet]=\"startend\"\n        [ngTemplateOutletContext]=\"{ color: colors()[$index] }\"\n      />\n    }\n  </div>\n}\n\n<ng-template #startend let-color=\"color\">\n  <div class=\"ths-value d-flex align-items-center startend\">\n    <div class=\"py-4 my-4\">&#8203;</div>\n    <div class=\"line\">\n      <div class=\"segment\" [class]=\"color\"></div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{--direction-main: column;--direction-option: row;--direction-value: row;--input-width: calc(var(--input-base-width, 90px) + var(--buttons-width, 0px))}:host.horizontal{--direction-main: row;--direction-option: column;--direction-value: column-reverse;--value-margin: calc(var(--si-sys-sizing-spacing-y-80) * -1);padding-inline:calc(var(--value-margin) * -1)}:host.dec-inc-buttons{--buttons-width: 48px}:host,.ths-step{display:flex;flex-direction:var(--direction-main)}.ths-option{flex-direction:var(--direction-option);min-inline-size:var(--option-width, 160px)}.ths-value{flex-direction:var(--direction-value);margin-inline:var(--value-margin)}si-select{border-radius:var(--element-button-radius);overflow:hidden}.form-control{inline-size:var(--input-width);block-size:calc(1rem + var(--si-sys-sizing-spacing-y-40) * 2);position:relative;z-index:1}.line{align-self:stretch;flex-basis:var(--si-sys-sizing-spacing-y-60);display:flex;flex-direction:var(--direction-main);align-items:center;color:var(--si-sys-border-2);gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.segment{flex:1;border:1px solid currentColor}.dot{inline-size:6px;block-size:6px;border:1px solid var(--si-sys-border-2);border-radius:50%}.startend{inline-size:calc(var(--input-width) / 2)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiNumberInputComponent, selector: "si-number-input", inputs: ["min", "max", "step", "value", "unit", "showButtons", "aria-label", "inputId", "disabled", "readonly", "placeholder", "errormessageId"], outputs: ["valueChange"] }, { kind: "component", type: SiSelectComponent, selector: "si-select", inputs: ["id", "ariaLabel", "labelledby", "filterPlaceholder", "noResultsFoundLabel", "placeholder", "readonly", "scrollStrategy", "errormessageId", "hasFilter"], outputs: ["openChange"] }, { kind: "directive", type: SiSelectSingleValueDirective, selector: "si-select:not([multi])" }, { kind: "directive", type: SiSelectSimpleOptionsDirective, selector: "si-select[options]", inputs: ["options", "optionEqualCheckFn"] }, { kind: "component", type: SiReadonlyThresholdOptionComponent, selector: "si-readonly-threshold-option", inputs: ["value", "options"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiThresholdComponent, isStandalone: true, selector: "si-threshold", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, thresholdSteps: { classPropertyName: "thresholdSteps", publicName: "thresholdSteps", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, stepSize: { classPropertyName: "stepSize", publicName: "stepSize", isSignal: true, isRequired: false, transformFunction: null }, maxSteps: { classPropertyName: "maxSteps", publicName: "maxSteps", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, canAddRemoveSteps: { classPropertyName: "canAddRemoveSteps", publicName: "canAddRemoveSteps", isSignal: true, isRequired: false, transformFunction: null }, horizontalLayout: { classPropertyName: "horizontalLayout", publicName: "horizontalLayout", isSignal: true, isRequired: false, transformFunction: null }, showDecIncButtons: { classPropertyName: "showDecIncButtons", publicName: "showDecIncButtons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, readonlyConditions: { classPropertyName: "readonlyConditions", publicName: "readonlyConditions", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, deleteAriaLabel: { classPropertyName: "deleteAriaLabel", publicName: "deleteAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, addAriaLabel: { classPropertyName: "addAriaLabel", publicName: "addAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputAriaLabel: { classPropertyName: "inputAriaLabel", publicName: "inputAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, statusAriaLabel: { classPropertyName: "statusAriaLabel", publicName: "statusAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, useAliasForStepValues: { classPropertyName: "useAliasForStepValues", publicName: "useAliasForStepValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thresholdSteps: "thresholdStepsChange", validChange: "validChange" }, host: { properties: { "class.add-remove": "canAddRemoveSteps()", "class.horizontal": "horizontalLayout()", "class.dec-inc-buttons": "showDecIncButtons()" } }, viewQueries: [{ propertyName: "numberInputs", predicate: SiNumberInputComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@for (step of thresholdSteps(); track step) {\n  <div class=\"ths-step\">\n    @if (!$first) {\n      <div class=\"ths-value d-flex align-items-center\">\n        @if (showAddRemoveButtons()) {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary-ghost m-4\"\n            [attr.aria-label]=\"deleteAriaLabel() | translate\"\n            (click)=\"deleteStep($index)\"\n          >\n            <si-icon [icon]=\"icons.elementDelete\" />\n          </button>\n        } @else {\n          <div class=\"py-4 my-4\">&#8203;</div>\n        }\n        <div class=\"line\">\n          <div class=\"segment\" [class]=\"colors()[$index - 1]\"></div>\n          <div class=\"dot\"></div>\n          <div class=\"segment\" [class]=\"colors()[$index]\"></div>\n        </div>\n        <div class=\"d-flex align-items-center text-nowrap m-4\">\n          @if (useAliasForStepValues()) {\n            <input\n              type=\"text\"\n              readonly\n              class=\"form-control\"\n              [value]=\"step.aliasLabel ?? '' | translate\"\n            />\n          } @else {\n            <si-number-input\n              #valueInput=\"ngModel\"\n              class=\"form-control text-end\"\n              [class.is-invalid]=\"step.valid === false\"\n              [aria-label]=\"inputAriaLabel() | translate\"\n              [readonly]=\"readonly()\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [min]=\"minValue()\"\n              [max]=\"maxValue()\"\n              [step]=\"stepSize()\"\n              [unit]=\"unit()\"\n              [showButtons]=\"showDecIncButtons()\"\n              [required]=\"true\"\n              [(ngModel)]=\"step.value\"\n              (ngModelChange)=\"stepChange()\"\n            />\n          }\n        </div>\n      </div>\n    }\n    @if ($first && horizontalLayout()) {\n      <ng-container\n        [ngTemplateOutlet]=\"startend\"\n        [ngTemplateOutletContext]=\"{ color: colors()[$index] }\"\n      />\n    }\n    <div class=\"ths-option d-flex align-items-center\">\n      @if (showAddRemoveButtons()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-circle btn-secondary m-4\"\n          [disabled]=\"maxSteps() && $count >= maxSteps()\"\n          [attr.aria-label]=\"addAriaLabel() | translate\"\n          (click)=\"addStep($index)\"\n        >\n          <si-icon [icon]=\"icons.elementPlus\" />\n        </button>\n      } @else {\n        <div class=\"py-4 my-4\">&#8203;</div>\n      }\n      <div class=\"line\" [class]=\"colors()[$index]\">\n        <div class=\"segment\"></div>\n      </div>\n      @if (!readonly() && !readonlyConditions()) {\n        <si-select\n          class=\"btn btn-ghost my-4\"\n          [ariaLabel]=\"statusAriaLabel() | translate\"\n          [readonly]=\"readonly()\"\n          [options]=\"options()\"\n          [scrollStrategy]=\"scrollStrategy()\"\n          [(value)]=\"step.optionValue\"\n          (valueChange)=\"stepChange()\"\n        />\n      }\n      @if (readonly() || readonlyConditions()) {\n        <si-readonly-threshold-option [options]=\"options()\" [value]=\"step.optionValue\" />\n      }\n    </div>\n    @if ($last && horizontalLayout()) {\n      <ng-container\n        [ngTemplateOutlet]=\"startend\"\n        [ngTemplateOutletContext]=\"{ color: colors()[$index] }\"\n      />\n    }\n  </div>\n}\n\n<ng-template #startend let-color=\"color\">\n  <div class=\"ths-value d-flex align-items-center startend\">\n    <div class=\"py-4 my-4\">&#8203;</div>\n    <div class=\"line\">\n      <div class=\"segment\" [class]=\"color\"></div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{--direction-main: column;--direction-option: row;--direction-value: row;--input-width: calc(var(--input-base-width, 90px) + var(--buttons-width, 0px))}:host.horizontal{--direction-main: row;--direction-option: column;--direction-value: column-reverse;--value-margin: calc(var(--si-sys-sizing-spacing-y-80) * -1);padding-inline:calc(var(--value-margin) * -1)}:host.dec-inc-buttons{--buttons-width: 48px}:host,.ths-step{display:flex;flex-direction:var(--direction-main)}.ths-option{flex-direction:var(--direction-option);min-inline-size:var(--option-width, 160px)}.ths-value{flex-direction:var(--direction-value);margin-inline:var(--value-margin)}si-select{border-radius:var(--element-button-radius);overflow:hidden}.form-control{inline-size:var(--input-width);block-size:calc(1rem + var(--si-sys-sizing-spacing-y-40) * 2);position:relative;z-index:1}.line{align-self:stretch;flex-basis:var(--si-sys-sizing-spacing-y-60);display:flex;flex-direction:var(--direction-main);align-items:center;color:var(--si-sys-color-border-2);gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.segment{flex:1;border:1px solid currentColor}.dot{inline-size:6px;block-size:6px;border:1px solid var(--si-sys-color-border-2);border-radius:50%}.startend{inline-size:calc(var(--input-width) / 2)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiNumberInputComponent, selector: "si-number-input", inputs: ["min", "max", "step", "value", "unit", "showButtons", "aria-label", "inputId", "disabled", "readonly", "placeholder", "errormessageId"], outputs: ["valueChange"] }, { kind: "component", type: SiSelectComponent, selector: "si-select", inputs: ["id", "ariaLabel", "labelledby", "filterPlaceholder", "noResultsFoundLabel", "placeholder", "readonly", "scrollStrategy", "errormessageId", "hasFilter"], outputs: ["openChange"] }, { kind: "directive", type: SiSelectSingleValueDirective, selector: "si-select:not([multi])" }, { kind: "directive", type: SiSelectSimpleOptionsDirective, selector: "si-select[options]", inputs: ["options", "optionEqualCheckFn"] }, { kind: "component", type: SiReadonlyThresholdOptionComponent, selector: "si-readonly-threshold-option", inputs: ["value", "options"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiThresholdComponent, decorators: [{
             type: Component,
@@ -297,7 +297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[class.add-remove]': 'canAddRemoveSteps()',
                         '[class.horizontal]': 'horizontalLayout()',
                         '[class.dec-inc-buttons]': 'showDecIncButtons()'
-                    }, template: "@for (step of thresholdSteps(); track step) {\n  <div class=\"ths-step\">\n    @if (!$first) {\n      <div class=\"ths-value d-flex align-items-center\">\n        @if (showAddRemoveButtons()) {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary-ghost m-4\"\n            [attr.aria-label]=\"deleteAriaLabel() | translate\"\n            (click)=\"deleteStep($index)\"\n          >\n            <si-icon [icon]=\"icons.elementDelete\" />\n          </button>\n        } @else {\n          <div class=\"py-4 my-4\">&#8203;</div>\n        }\n        <div class=\"line\">\n          <div class=\"segment\" [class]=\"colors()[$index - 1]\"></div>\n          <div class=\"dot\"></div>\n          <div class=\"segment\" [class]=\"colors()[$index]\"></div>\n        </div>\n        <div class=\"d-flex align-items-center text-nowrap m-4\">\n          @if (useAliasForStepValues()) {\n            <input\n              type=\"text\"\n              readonly\n              class=\"form-control\"\n              [value]=\"step.aliasLabel ?? '' | translate\"\n            />\n          } @else {\n            <si-number-input\n              #valueInput=\"ngModel\"\n              class=\"form-control text-end\"\n              [class.is-invalid]=\"step.valid === false\"\n              [aria-label]=\"inputAriaLabel() | translate\"\n              [readonly]=\"readonly()\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [min]=\"minValue()\"\n              [max]=\"maxValue()\"\n              [step]=\"stepSize()\"\n              [unit]=\"unit()\"\n              [showButtons]=\"showDecIncButtons()\"\n              [required]=\"true\"\n              [(ngModel)]=\"step.value\"\n              (ngModelChange)=\"stepChange()\"\n            />\n          }\n        </div>\n      </div>\n    }\n    @if ($first && horizontalLayout()) {\n      <ng-container\n        [ngTemplateOutlet]=\"startend\"\n        [ngTemplateOutletContext]=\"{ color: colors()[$index] }\"\n      />\n    }\n    <div class=\"ths-option d-flex align-items-center\">\n      @if (showAddRemoveButtons()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-circle btn-secondary m-4\"\n          [disabled]=\"maxSteps() && $count >= maxSteps()\"\n          [attr.aria-label]=\"addAriaLabel() | translate\"\n          (click)=\"addStep($index)\"\n        >\n          <si-icon [icon]=\"icons.elementPlus\" />\n        </button>\n      } @else {\n        <div class=\"py-4 my-4\">&#8203;</div>\n      }\n      <div class=\"line\" [class]=\"colors()[$index]\">\n        <div class=\"segment\"></div>\n      </div>\n      @if (!readonly() && !readonlyConditions()) {\n        <si-select\n          class=\"btn btn-ghost my-4\"\n          [ariaLabel]=\"statusAriaLabel() | translate\"\n          [readonly]=\"readonly()\"\n          [options]=\"options()\"\n          [scrollStrategy]=\"scrollStrategy()\"\n          [(value)]=\"step.optionValue\"\n          (valueChange)=\"stepChange()\"\n        />\n      }\n      @if (readonly() || readonlyConditions()) {\n        <si-readonly-threshold-option [options]=\"options()\" [value]=\"step.optionValue\" />\n      }\n    </div>\n    @if ($last && horizontalLayout()) {\n      <ng-container\n        [ngTemplateOutlet]=\"startend\"\n        [ngTemplateOutletContext]=\"{ color: colors()[$index] }\"\n      />\n    }\n  </div>\n}\n\n<ng-template #startend let-color=\"color\">\n  <div class=\"ths-value d-flex align-items-center startend\">\n    <div class=\"py-4 my-4\">&#8203;</div>\n    <div class=\"line\">\n      <div class=\"segment\" [class]=\"color\"></div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{--direction-main: column;--direction-option: row;--direction-value: row;--input-width: calc(var(--input-base-width, 90px) + var(--buttons-width, 0px))}:host.horizontal{--direction-main: row;--direction-option: column;--direction-value: column-reverse;--value-margin: calc(var(--si-sys-sizing-spacing-y-80) * -1);padding-inline:calc(var(--value-margin) * -1)}:host.dec-inc-buttons{--buttons-width: 48px}:host,.ths-step{display:flex;flex-direction:var(--direction-main)}.ths-option{flex-direction:var(--direction-option);min-inline-size:var(--option-width, 160px)}.ths-value{flex-direction:var(--direction-value);margin-inline:var(--value-margin)}si-select{border-radius:var(--element-button-radius);overflow:hidden}.form-control{inline-size:var(--input-width);block-size:calc(1rem + var(--si-sys-sizing-spacing-y-40) * 2);position:relative;z-index:1}.line{align-self:stretch;flex-basis:var(--si-sys-sizing-spacing-y-60);display:flex;flex-direction:var(--direction-main);align-items:center;color:var(--si-sys-border-2);gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.segment{flex:1;border:1px solid currentColor}.dot{inline-size:6px;block-size:6px;border:1px solid var(--si-sys-border-2);border-radius:50%}.startend{inline-size:calc(var(--input-width) / 2)}\n"] }]
+                    }, template: "@for (step of thresholdSteps(); track step) {\n  <div class=\"ths-step\">\n    @if (!$first) {\n      <div class=\"ths-value d-flex align-items-center\">\n        @if (showAddRemoveButtons()) {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary-ghost m-4\"\n            [attr.aria-label]=\"deleteAriaLabel() | translate\"\n            (click)=\"deleteStep($index)\"\n          >\n            <si-icon [icon]=\"icons.elementDelete\" />\n          </button>\n        } @else {\n          <div class=\"py-4 my-4\">&#8203;</div>\n        }\n        <div class=\"line\">\n          <div class=\"segment\" [class]=\"colors()[$index - 1]\"></div>\n          <div class=\"dot\"></div>\n          <div class=\"segment\" [class]=\"colors()[$index]\"></div>\n        </div>\n        <div class=\"d-flex align-items-center text-nowrap m-4\">\n          @if (useAliasForStepValues()) {\n            <input\n              type=\"text\"\n              readonly\n              class=\"form-control\"\n              [value]=\"step.aliasLabel ?? '' | translate\"\n            />\n          } @else {\n            <si-number-input\n              #valueInput=\"ngModel\"\n              class=\"form-control text-end\"\n              [class.is-invalid]=\"step.valid === false\"\n              [aria-label]=\"inputAriaLabel() | translate\"\n              [readonly]=\"readonly()\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [min]=\"minValue()\"\n              [max]=\"maxValue()\"\n              [step]=\"stepSize()\"\n              [unit]=\"unit()\"\n              [showButtons]=\"showDecIncButtons()\"\n              [required]=\"true\"\n              [(ngModel)]=\"step.value\"\n              (ngModelChange)=\"stepChange()\"\n            />\n          }\n        </div>\n      </div>\n    }\n    @if ($first && horizontalLayout()) {\n      <ng-container\n        [ngTemplateOutlet]=\"startend\"\n        [ngTemplateOutletContext]=\"{ color: colors()[$index] }\"\n      />\n    }\n    <div class=\"ths-option d-flex align-items-center\">\n      @if (showAddRemoveButtons()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-circle btn-secondary m-4\"\n          [disabled]=\"maxSteps() && $count >= maxSteps()\"\n          [attr.aria-label]=\"addAriaLabel() | translate\"\n          (click)=\"addStep($index)\"\n        >\n          <si-icon [icon]=\"icons.elementPlus\" />\n        </button>\n      } @else {\n        <div class=\"py-4 my-4\">&#8203;</div>\n      }\n      <div class=\"line\" [class]=\"colors()[$index]\">\n        <div class=\"segment\"></div>\n      </div>\n      @if (!readonly() && !readonlyConditions()) {\n        <si-select\n          class=\"btn btn-ghost my-4\"\n          [ariaLabel]=\"statusAriaLabel() | translate\"\n          [readonly]=\"readonly()\"\n          [options]=\"options()\"\n          [scrollStrategy]=\"scrollStrategy()\"\n          [(value)]=\"step.optionValue\"\n          (valueChange)=\"stepChange()\"\n        />\n      }\n      @if (readonly() || readonlyConditions()) {\n        <si-readonly-threshold-option [options]=\"options()\" [value]=\"step.optionValue\" />\n      }\n    </div>\n    @if ($last && horizontalLayout()) {\n      <ng-container\n        [ngTemplateOutlet]=\"startend\"\n        [ngTemplateOutletContext]=\"{ color: colors()[$index] }\"\n      />\n    }\n  </div>\n}\n\n<ng-template #startend let-color=\"color\">\n  <div class=\"ths-value d-flex align-items-center startend\">\n    <div class=\"py-4 my-4\">&#8203;</div>\n    <div class=\"line\">\n      <div class=\"segment\" [class]=\"color\"></div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{--direction-main: column;--direction-option: row;--direction-value: row;--input-width: calc(var(--input-base-width, 90px) + var(--buttons-width, 0px))}:host.horizontal{--direction-main: row;--direction-option: column;--direction-value: column-reverse;--value-margin: calc(var(--si-sys-sizing-spacing-y-80) * -1);padding-inline:calc(var(--value-margin) * -1)}:host.dec-inc-buttons{--buttons-width: 48px}:host,.ths-step{display:flex;flex-direction:var(--direction-main)}.ths-option{flex-direction:var(--direction-option);min-inline-size:var(--option-width, 160px)}.ths-value{flex-direction:var(--direction-value);margin-inline:var(--value-margin)}si-select{border-radius:var(--element-button-radius);overflow:hidden}.form-control{inline-size:var(--input-width);block-size:calc(1rem + var(--si-sys-sizing-spacing-y-40) * 2);position:relative;z-index:1}.line{align-self:stretch;flex-basis:var(--si-sys-sizing-spacing-y-60);display:flex;flex-direction:var(--direction-main);align-items:center;color:var(--si-sys-color-border-2);gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.segment{flex:1;border:1px solid currentColor}.dot{inline-size:6px;block-size:6px;border:1px solid var(--si-sys-color-border-2);border-radius:50%}.startend{inline-size:calc(var(--input-width) / 2)}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], thresholdSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholdSteps", required: false }] }, { type: i0.Output, args: ["thresholdStepsChange"] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], stepSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepSize", required: false }] }], maxSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSteps", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], canAddRemoveSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "canAddRemoveSteps", required: false }] }], horizontalLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalLayout", required: false }] }], showDecIncButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDecIncButtons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], readonlyConditions: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyConditions", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], deleteAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteAriaLabel", required: false }] }], addAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addAriaLabel", required: false }] }], inputAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAriaLabel", required: false }] }], statusAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusAriaLabel", required: false }] }], useAliasForStepValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAliasForStepValues", required: false }] }], validChange: [{ type: i0.Output, args: ["validChange"] }], numberInputs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiNumberInputComponent), { isSignal: true }] }] } });
 
 /**