@siemens/ix 4.4.0 → 5.0.0

package/dist/cjs/ix-pill_4.cjs.entry.js

@@ -0,0 +1,746 @@
+'use strict';
+
+var index = require('./index-BKQkUbyE.js');
+var a11y = require('./a11y-C_6YiIMa.js');
+var component = require('./component-CYtonfpw.js');
+var makeRef = require('./make-ref-CHsa3FY7.js');
+var index$1 = require('./index-Dw-NwUuT.js');
+var id_mixin = require('./id.mixin-DINDQztK.js');
+var tab_mixin = require('./tab.mixin-DObUK6A4.js');
+var focusUtilities = require('./focus-utilities-yx7wWjEO.js');
+var inheritAriaAttributes_mixin = require('./inherit-aria-attributes.mixin-Sl7J-OlO.js');
+var requestAnimationFrame = require('./requestAnimationFrame-B0rWQ3G-.js');
+require('./shadow-dom-BG8VqeIu.js');
+
+const pillCss = () => `:host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.container{display:inline-flex;width:inherit;max-width:100%;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;vertical-align:top;height:2rem;max-height:2rem;cursor:default}.container .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.container .with-icon{margin-right:0.25rem}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.centerContent .content-wrapper{justify-content:center;text-align:center}.container.outline{padding-left:calc(0.5rem - 0.0625rem)}.container.outline.icon.alarm .with-icon{color:var(--theme-color-alarm)}.container.outline.icon.critical .with-icon{color:var(--theme-color-critical)}.container.outline.icon.warning .with-icon{color:var(--theme-color-warning-text)}.container.outline.icon.info .with-icon{color:var(--theme-color-info)}.container.outline.icon.neutral .with-icon{color:var(--theme-color-neutral)}.container.outline.icon.success .with-icon{color:var(--theme-color-success)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 0.0625rem)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 0.0625rem)}.container:not(.outline){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive,.container:not(.outline):not(.closable){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-primary-outline--background);border:solid 0.0625rem var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-outline--color);--ix-icon-button-color:var(--theme-chip-outline--color)}.container.primary.outline .with-icon{color:var(--theme-color-primary)}.container.outline{border-width:0.0625rem;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-success)}:host .container{height:100%;justify-content:center}:host .container .with-icon{margin-right:0}:host .container.outline{background-color:var(--theme-pill-outline--background)}:host .container.outline.icon{padding-left:0.4375rem;padding-right:0.4375rem}:host .container:not(.outline).icon{padding-left:0.5rem;padding-right:0.5rem}:host .with-gap{gap:0.25rem}:host(.align-left) .container{justify-content:flex-start}`;
+
+const Pill = class extends index.Mixin(...component.DefaultMixins) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+    }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Pill variant
+     */
+    variant = 'primary';
+    /**
+     * Show pill as outline
+     */
+    outline = false;
+    /**
+     * Show icon
+     */
+    icon;
+    /**
+     * ARIA label for the icon
+     *
+     * @since 3.2.0
+     */
+    ariaLabelIcon;
+    /**
+     * Custom color for pill. Only working for `variant='custom'`
+     */
+    background;
+    /**
+     * Custom font color for pill. Only working for `variant='custom'`
+     */
+    pillColor;
+    /**
+     * Align pill content left
+     */
+    alignLeft = false;
+    /**
+     * Display a tooltip. By default, no tooltip will be displayed.
+     * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.
+     * @since 3.0.0
+     */
+    tooltipText = false;
+    iconOnly = false;
+    containerElementRef = makeRef.makeRef();
+    componentWillLoad() {
+        this.checkIfContentAvailable();
+    }
+    checkIfContentAvailable() {
+        const hasChildren = this.hostElement.children.length > 0;
+        const hasTextContent = !!this.hostElement.textContent;
+        this.iconOnly = !hasChildren && !hasTextContent;
+    }
+    getTooltip() {
+        if (!this.tooltipText && !this.hostElement.hasAttribute('tooltip-text')) {
+            return null;
+        }
+        const text = typeof this.tooltipText === 'string' && this.tooltipText.trim()
+            ? this.tooltipText
+            : this.hostElement.textContent?.trim();
+        return (index.h("ix-tooltip", { for: this.containerElementRef.waitForCurrent(), "aria-label": text || undefined }, text));
+    }
+    render() {
+        let customStyle = {};
+        if (this.variant === 'custom') {
+            customStyle = {
+                color: this.pillColor,
+                [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
+            };
+        }
+        const hasAccessibleName = this.hostElement.hasAttribute('aria-label') ||
+            this.hostElement.hasAttribute('aria-labelledby');
+        let hostRole = undefined;
+        if (this.hostElement.hasAttribute('role')) {
+            hostRole = this.hostElement.getAttribute('role') ?? undefined;
+        }
+        else if (hasAccessibleName) {
+            hostRole = 'group';
+        }
+        const iconIsDecorative = !this.ariaLabelIcon?.trim();
+        return (index.h(index.Host, { key: '7b8f2661c2d2cd4f9d4e71631cfed268167adb5b', style: this.variant === 'custom'
+                ? {
+                    '--ix-icon-button-color': this.pillColor,
+                }
+                : {}, class: {
+                'align-left': this.alignLeft,
+            }, role: hostRole }, index.h("div", { key: '319eb41667d05e12400f933aa71387476b2e1892', ref: this.containerElementRef, style: { ...customStyle }, class: {
+                container: true,
+                outline: this.outline,
+                inactive: false,
+                alarm: this.variant === 'alarm',
+                critical: this.variant === 'critical',
+                info: this.variant === 'info',
+                neutral: this.variant === 'neutral',
+                primary: this.variant === 'primary',
+                success: this.variant === 'success',
+                warning: this.variant === 'warning',
+                custom: this.variant === 'custom',
+                closable: false,
+                icon: !!this.icon,
+                'with-gap': !this.iconOnly,
+            } }, this.icon && (index.h("ix-icon", { key: '34124123e8411fd9eb1ae957dd6b7d70c115c041', class: {
+                'with-icon': true,
+            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon, "aria-hidden": a11y.a11yBoolean(iconIsDecorative) })), index.h("span", { key: '6b9b25474bfc28109676a60a15d7f13601c5946e', class: "slot-container" }, index.h("slot", { key: '0d05a9372c9d11ed5cb5f28b618ef3c0b91d31c4', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
+    }
+};
+Pill.style = pillCss();
+
+const tabItemCss = () => `:host{position:relative;display:flex;align-items:center;justify-content:center;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color);touch-action:none;height:2.5rem;min-height:2.5rem;max-height:2.5rem;padding:0.0625rem 1.5rem;gap:0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .text span,:host .text span::before{pointer-events:none}:host .text{vertical-align:middle}:host slot{white-space:nowrap}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-circle--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-animated-tab-icon--color);cursor:pointer}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-color-1);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled);cursor:default}:host .hidden{display:none}:host(:not(.disabled)){cursor:pointer}:host(.circle){height:4.5rem;min-height:4.5rem;max-height:4.5rem}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{content:"";position:absolute;left:0;width:100%;height:2px;background-color:var(--theme-tab-indicator--background--selected)}:host(.selected:not(.disabled)) .circle{background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host(.selected:not(.disabled)) .circle:hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host(.selected.bottom:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected.bottom:not(.disabled))::after{bottom:0px}:host(.selected.top:not(.disabled))::after{top:0px}:host(:hover:not(.circle):not(.disabled)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover)}:host(:active:not(.circle):not(.disabled)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(.disabled){cursor:default;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled);pointer-events:none}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.disabled) .circle{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled);cursor:default}:host(.icon-only){display:flex;justify-content:center;align-items:center;padding:1.5rem 0.5rem}:host(.small-tab){height:2rem;min-height:2rem;max-height:2rem;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}:host(:not(.circle):focus-visible){outline-offset:-0.0625rem;outline:0.0625rem solid var(--theme-color-focus-bdr)}:host(.circle:focus-visible){outline:none}:host(.circle:focus-visible) .circle{outline-offset:0.125rem;outline:0.0625rem solid var(--theme-color-focus-bdr)}`;
+
+const TabItem = class extends index.Mixin(...component.DefaultMixins, id_mixin.ComponentIdMixin, tab_mixin.BaseTabMixin) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.tabClick = index.createEvent(this, "tabClick", 7);
+        this.tabClose = index.createEvent(this, "tabClose", 7);
+    }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Set selected tab
+     */
+    selected = false;
+    /**
+     * Set disabled tab
+     */
+    disabled = false;
+    /**
+     * Set icon of the tab
+     *
+     * @since 5.0.0
+     */
+    icon;
+    /**
+     * Set counter value
+     */
+    counter;
+    /**
+     * If the tab can be closed
+     *
+     * @since 5.0.0
+     */
+    closable = false;
+    /**
+     * Tab label
+     *
+     * @since 5.0.0
+     */
+    label;
+    /**
+     * Aria label for the close button, important for accessibility
+     *
+     * @since 5.0.0
+     */
+    ariaLabelCloseButton = 'Close tab';
+    /** @internal */
+    placement = 'bottom';
+    /** @internal */
+    rounded = false;
+    /** @internal */
+    small = false;
+    /** @internal */
+    layout = 'auto';
+    /** @internal */
+    iconOnly = false;
+    /**
+     * Emitted when the tab is clicked.
+     */
+    tabClick;
+    /**
+     * Emitted when the tab's close button is clicked.
+     */
+    tabClose;
+    onTabSelect(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        const clientEvent = this.tabClick.emit({
+            tabKey: this.tabKey,
+            nativeEvent: event,
+        });
+        if (clientEvent.defaultPrevented) {
+            event.stopPropagation();
+        }
+    }
+    render() {
+        let variant = 'normal';
+        const label = this.label || this.hostElement.textContent?.trim();
+        if (this.rounded) {
+            variant = 'rounded';
+        }
+        else if (this.icon && (label === undefined || label === '')) {
+            variant = 'icon-only';
+        }
+        else {
+            variant = 'normal';
+        }
+        return (index.h(index.Host, { key: '38ee3ed8b3819d38144608d31446ba60f32658b3', id: this.getHostElementId(), role: "tab", "aria-selected": a11y.a11yBoolean(this.selected), tabIndex: this.selected && !this.disabled ? 0 : -1, class: {
+                selected: this.selected,
+                disabled: this.disabled,
+                'small-tab': this.small,
+                'icon-only': variant === 'icon-only',
+                stretched: this.layout === 'stretched',
+                bottom: this.placement === 'bottom',
+                top: this.placement === 'top',
+                circle: this.rounded,
+            }, onClick: (event) => this.onTabSelect(event), onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    this.onTabSelect(event);
+                }
+                if (this.closable && event.key === 'Delete') {
+                    event.preventDefault();
+                    this.tabClose.emit({
+                        tabKey: this.tabKey,
+                        nativeEvent: event,
+                    });
+                }
+            } }, variant === 'rounded' && (index.h("div", { key: 'd5273f2315118f712fc4c25d3d286dca1166fb73', class: {
+                circle: true,
+            } }, this.icon && index.h("ix-icon", { key: '52cfcee729debba7d264af7ff4d4ea030575925e', name: this.icon, size: "24" }), index.h("slot", { key: 'b5e14c4b4cb69b1bbb4caa5c15c4355db8caf510' }))), this.icon && variant !== 'rounded' && (index.h("ix-icon", { key: '827b6cd5390799f361f726a455d94c58f9a542c1', name: this.icon, size: "16", class: 'tab-icon' })), variant === 'normal' && (index.h("div", { key: '9be6aeb959a037a951cd7b108eb3d217e1504dc1', class: {
+                text: !!this.label,
+                selected: this.selected,
+                disabled: this.disabled,
+            } }, this.label, index.h("slot", { key: '62f22936b12a97234c2ec3d5210e7d3f2435fa11' }))), variant === 'rounded' && this.counter !== undefined && (index.h("div", { key: '023ac330510e532464624dd78ea8bf3fd06922f0', class: {
+                counter: true,
+                selected: this.selected,
+                disabled: this.disabled,
+            } }, this.counter)), this.counter && variant !== 'rounded' && (index.h("ix-pill", { key: '98ce5d4ee78b06cd252ab0550b3be543d17df4d7', variant: "primary", outline: true, class: 'tab-counter' }, this.counter)), this.closable && variant !== 'rounded' && (index.h("ix-icon-button", { key: 'c00ea1fc9869cbd4d503b1060b8161812e69c1df', "aria-label": this.ariaLabelCloseButton, class: 'close-tab', size: "12", variant: "subtle-tertiary", icon: index$1.iconClose, onClick: (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                this.tabClose.emit({
+                    tabKey: this.tabKey,
+                    nativeEvent: event,
+                });
+            } }))));
+    }
+};
+TabItem.style = tabItemCss();
+
+const tabSetCss = () => `:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}`;
+
+const TabSet = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get hostElement() { return index.getElement(this); }
+    get tabPanels() {
+        return Array.from(focusUtilities.queryElements(this.hostElement, 'ix-tab-panel'));
+    }
+    get tabList() {
+        return this.hostElement?.querySelector('ix-tabs');
+    }
+    get tabListItems() {
+        if (!this.tabList) {
+            return [];
+        }
+        return Array.from(this.tabList.querySelectorAll('ix-tab-item'));
+    }
+    panelsObserver;
+    componentWillLoad() {
+        this.panelsObserver = new MutationObserver(() => this.onPanelComponentsChange());
+        this.panelsObserver.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+        });
+        this.onPanelComponentsChange();
+    }
+    componentDidLoad() {
+        this.onPanelComponentsChange();
+    }
+    disconnectedCallback() {
+        this.panelsObserver?.disconnect();
+    }
+    onPanelComponentsChange() {
+        const tabs = this.tabList;
+        const tabItems = this.tabListItems;
+        const panels = this.tabPanels;
+        if (!tabs || !tabItems || !panels) {
+            return;
+        }
+        const activeTabKey = tabs.activeTabKey;
+        if (!activeTabKey) {
+            return;
+        }
+        const activeTabElement = tabItems.find((tab) => tab.tabKey === activeTabKey);
+        const activeTabPanel = panels.find((panel) => panel.tabKey === activeTabKey);
+        if (!activeTabElement || !activeTabPanel) {
+            return;
+        }
+        const tabId = activeTabElement.getAttribute('id');
+        activeTabPanel.setAttribute('aria-labelledby', tabId ?? '');
+        const tabPanelId = activeTabPanel.getAttribute('id');
+        activeTabElement.setAttribute('aria-controls', tabPanelId ?? '');
+        this.checkPanelsVisibility();
+    }
+    checkPanelsVisibility() {
+        const tabs = this.tabList?.querySelectorAll('ix-tab-item');
+        const panels = this.tabPanels;
+        if (!tabs || !panels) {
+            return;
+        }
+        panels.forEach((panel) => {
+            panel.hidden = panel.tabKey === this.tabList?.activeTabKey ? false : true;
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: '139dd7a9fbd2a12a67de5db64d0731a86ba1c355', onTabChange: () => this.checkPanelsVisibility() }, index.h("slot", { key: '8feff5e84cf1f1576df78077a022d2832a51b602' })));
+    }
+};
+TabSet.style = tabSetCss();
+
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function emitEvent(action, emitter, rollback) {
+    const result = action();
+    const { defaultPrevented } = emitter.emit(result.new);
+    if (defaultPrevented) {
+        rollback(result.old);
+    }
+    return result;
+}
+
+const tabsCss = () => `:host{width:auto;display:flex;align-items:center;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tabs-container{display:flex;flex-direction:row;position:relative;width:100%;justify-content:space-between;align-items:center}:host .tabs-container.top::before{content:"";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0;bottom:0}:host .tabs-container.top::after{content:"";position:absolute;background-color:var(--theme-tab-indicator--background--selected);width:var(--ix-tab-active-indicator-width);height:var(--theme-tab-indicator--height);left:0;bottom:0;transform:translateX(var(--ix-tab-active-indicator-offset))}:host .tabs-container.top::before,:host .tabs-container.top::after{top:0;bottom:auto}:host .tabs-container.bottom::before{content:"";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0;bottom:0}:host .tabs-container.bottom::after{content:"";position:absolute;background-color:var(--theme-tab-indicator--background--selected);width:var(--ix-tab-active-indicator-width);height:var(--theme-tab-indicator--height);left:0;bottom:0;transform:translateX(var(--ix-tab-active-indicator-offset))}:host .tabs-container.bottom::before,:host .tabs-container.bottom::after{top:auto;bottom:0}:host .tabs{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;overflow:auto;scroll-behavior:smooth;width:100%;touch-action:pan-y;padding-right:2.75rem;scrollbar-width:none}:host .tabs::-webkit-scrollbar{display:none}:host .tabs.tabs-stretched{padding-right:0px}:host .tabs:focus-visible{outline-offset:-1px;outline:1px solid var(--theme-color-focus-bdr)}:host .tabs-context-menu{margin-right:0.5rem}:host .overflow-shadow-container{display:block;position:relative;height:100%;width:100%;pointer-events:all;overflow:auto}:host .overflow-shadow{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}`;
+
+const Tabs = class extends index.Mixin(...component.DefaultMixins, inheritAriaAttributes_mixin.InheritAriaAttributesMixin) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.tabChange = index.createEvent(this, "tabChange", 7);
+        this.tabClose = index.createEvent(this, "tabClose", 7);
+    }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Set tab items to small size
+     */
+    small = false;
+    /**
+     * Set rounded tabs
+     */
+    rounded = false;
+    /**
+     * Set layout width style
+     */
+    layout = 'auto';
+    /**
+     * Set placement style
+     */
+    placement = 'bottom';
+    /**
+     * Aria label for the overflow menu button.
+     *
+     * @since 5.0.0
+     */
+    ariaLabelMoreTabs = 'Show all tabs';
+    /**
+     * Active tab key.
+     *
+     * @since 5.0.0
+     */
+    activeTabKey;
+    /**
+     * Keyboard interaction behavior:
+     * automatic:  A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus.
+     * manual: A tabs widget where users activate a tab and display its panel by pressing Space or Enter.
+     *
+     * @since 5.0.0
+     */
+    keyboardNavigation = 'automatic';
+    /**
+     * Tab selection event. Event detail contains the new active tab key.
+     *
+     * @since 5.0.0
+     */
+    tabChange;
+    /**
+     * Tab close event. Event detail contains the closed tab key.
+     *
+     * @since 5.0.0
+     */
+    tabClose;
+    isTabsOverflow = false;
+    overflowMenuItems = [];
+    resizeObserver;
+    itemsObserver;
+    tabsContainerRef = makeRef.makeRef();
+    tabsRef = makeRef.makeRef();
+    get tabs() {
+        return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));
+    }
+    componentDidLoad() {
+        this.itemsObserver = new MutationObserver(() => {
+            this.onComponentChildrenChange();
+            // Compute the overflow after DOM has been updated with the new tabs, otherwise the measurement would be wrong
+            requestAnimationFrame.requestAnimationFrameNoNgZone(() => this.onComponentResize());
+        });
+        this.itemsObserver.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            characterData: true,
+        });
+        this.resizeObserver = new ResizeObserver(() => this.onComponentResize());
+        this.resizeObserver.observe(this.hostElement);
+        this.onComponentResize();
+    }
+    componentWillLoad() {
+        this.onComponentChildrenChange();
+        if (this.activeTabKey) {
+            this.setTabActive(this.activeTabKey);
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.itemsObserver) {
+            this.itemsObserver.disconnect();
+        }
+    }
+    onActiveTabChange(tabKey, oldTabKey) {
+        const activeTab = this.tabs.find((tab) => tab.selected);
+        if (activeTab?.tabKey === tabKey) {
+            return;
+        }
+        this.emitTabChangeEvent(tabKey, oldTabKey);
+    }
+    setTabActive(tabKey) {
+        const tabs = this.tabs;
+        if (tabKey === undefined) {
+            tabs.forEach((tab) => (tab.selected = false));
+            this.onComponentChildrenChange();
+            this.activeTabKey = undefined;
+            return;
+        }
+        const newTab = tabs.find((tab) => tab.tabKey === tabKey);
+        if (!newTab) {
+            return;
+        }
+        if (newTab.disabled) {
+            return;
+        }
+        tabs.forEach((tab) => (tab.selected = false));
+        newTab.selected = true;
+        this.onComponentChildrenChange();
+        this.activeTabKey = newTab.tabKey;
+        newTab.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+            inline: 'center',
+        });
+        return this.activeTabKey;
+    }
+    onComponentChildrenChange() {
+        const tabItems = this.tabs;
+        tabItems.forEach((tab) => {
+            const propertiesToInherit = {
+                layout: this.layout,
+                small: this.small,
+                rounded: this.rounded,
+                placement: this.placement,
+                iconOnly: tabItems.every((t) => !t.label && !!t.icon),
+            };
+            Object.assign(tab, propertiesToInherit);
+        });
+        this.overflowMenuItems = Array.from(tabItems).map((item) => ({
+            tabKey: item.tabKey,
+            label: item.label || item.textContent || '',
+            icon: item.icon,
+            disabled: item.disabled,
+        }));
+        const isTabSelected = tabItems.some((tab) => tab.selected);
+        if (!isTabSelected && tabItems.length > 0 && component.hasKeyboardMode()) {
+            tabItems[0].focus();
+            this.emitTabChangeEvent(tabItems[0].tabKey);
+        }
+    }
+    onComponentResize() {
+        const tabContainer = this.tabsRef.current;
+        if (!tabContainer) {
+            return;
+        }
+        index.readTask(() => {
+            const isOverflowing = tabContainer.scrollWidth > tabContainer.clientWidth;
+            this.isTabsOverflow = isOverflowing;
+        });
+    }
+    onTabClick(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (event.detail.tabKey === undefined) {
+            return;
+        }
+        this.emitTabChangeEvent(event.detail.tabKey);
+    }
+    emitTabChangeEvent(tabKey, oldTabKey = this.activeTabKey) {
+        emitEvent(() => {
+            const newKey = this.setTabActive(tabKey);
+            return {
+                new: newKey,
+                old: oldTabKey,
+            };
+        }, this.tabChange, (oldKey) => this.setTabActive(oldKey));
+    }
+    onTabsNavigate(event) {
+        if (event.target instanceof HTMLElement &&
+            event.target.getAttribute('role') === 'tablist') {
+            return;
+        }
+        const tabs = this.tabs.filter((tab) => !tab.disabled);
+        let currentIndex = tabs.findIndex((tab) => tab.selected);
+        if (this.keyboardNavigation === 'manual') {
+            currentIndex = tabs.findIndex((tab) => tab === document.activeElement);
+        }
+        const activeTab = (tab) => {
+            tab.focus();
+            if (this.keyboardNavigation === 'automatic') {
+                this.emitTabChangeEvent(tab.tabKey);
+            }
+        };
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            if (currentIndex === -1) {
+                return;
+            }
+            const indexOffset = event.key === 'ArrowRight' ? 1 : -1;
+            const nextIndex = (currentIndex + indexOffset + tabs.length) % tabs.length;
+            const nextTab = tabs[nextIndex];
+            activeTab(nextTab);
+        }
+        if (event.key === 'Home') {
+            event.preventDefault();
+            activeTab(tabs[0]);
+        }
+        if (event.key === 'End') {
+            event.preventDefault();
+            activeTab(tabs[tabs.length - 1]);
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '693c87dc0f9b96e5a18ddb2d84ddc71c94ef29b0', onTabClick: (event) => this.onTabClick(event), class: {
+                small: this.small,
+            } }, index.h("div", { key: 'b76d32b5429e62d1d11808901e828c3630685f83', ref: this.tabsContainerRef, class: {
+                'tabs-container': true,
+                top: this.placement === 'top',
+                bottom: this.placement === 'bottom',
+            } }, index.h("div", { key: 'cf4ab3c93c03ca431b2b46a24bf767f723691f44', class: {
+                'overflow-shadow-container': true,
+                'overflow-shadow': this.isTabsOverflow,
+            } }, index.h("div", { key: '9d185cf8802e1b24f14b591ac99087f9a4acdec9', role: "tablist", ...this.inheritAriaAttributes, ref: this.tabsRef, class: {
+                tabs: true,
+                'tabs-stretched': this.layout === 'stretched',
+            }, tabIndex: this.isTabsOverflow ? 0 : -1, onKeyDown: (event) => this.onTabsNavigate(event) }, index.h("slot", { key: '8a697543efbf5c125296d5619e820ea2d1fe26b8' }))), this.isTabsOverflow && this.layout !== 'stretched' && (index.h("ix-dropdown-button", { key: '7403b1b2d55cecc918a4ab32a7e5b680a12226bd', ariaLabel: this.ariaLabelMoreTabs, icon: index$1.iconMoreMenu, class: {
+                'tabs-context-menu': true,
+            }, variant: "subtle-tertiary" }, this.overflowMenuItems.map((item) => (index.h("ix-dropdown-item", { key: item.tabKey, checked: item.tabKey === this.activeTabKey, icon: item.icon, label: item.label, disabled: item.disabled, onClick: () => (this.activeTabKey = item.tabKey) }))))))));
+    }
+    static get delegatesFocus() { return true; }
+    static get watchers() { return {
+        "role": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-activedescendant": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-atomic": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-autocomplete": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-braillelabel": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-brailleroledescription": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-busy": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-checked": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-colcount": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-colindex": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-colindextext": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-colspan": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-controls": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-current": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-describedby": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-description": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-details": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-disabled": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-errormessage": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-expanded": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-flowto": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-haspopup": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-hidden": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-invalid": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-keyshortcuts": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-label": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-labelledby": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-level": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-live": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-multiline": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-multiselectable": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-orientation": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-owns": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-placeholder": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-posinset": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-pressed": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-readonly": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-relevant": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-required": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-roledescription": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-rowcount": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-rowindex": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-rowindextext": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-rowspan": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-selected": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-setsize": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-sort": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-valuemax": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-valuemin": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-valuenow": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-valuetext": [{
+                "ariaAttributeChanged": 0
+            }],
+        "activeTabKey": [{
+                "onActiveTabChange": 0
+            }]
+    }; }
+};
+Tabs.style = tabsCss();
+
+exports.ix_pill = Pill;
+exports.ix_tab_item = TabItem;
+exports.ix_tab_set = TabSet;
+exports.ix_tabs = Tabs;