@siemens/ix 4.4.0 → 5.0.0

package/dist/esm/ix-pill.entry.js

@@ -1,85 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-BEPo7U1W.js';
-import { m as makeRef } from './make-ref-bcj7UEIC.js';
-
-const pillCss = () => `:host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem;margin-left:0.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.icon{padding-left:calc(0.75rem - 1px)}.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:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){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 1px 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:1px;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 {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /**
-         * Pill variant
-         */
-        this.variant = 'primary';
-        /**
-         * Show pill as outline
-         */
-        this.outline = false;
-        /**
-         * Align pill content left
-         */
-        this.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
-         */
-        this.tooltipText = false;
-        this.iconOnly = false;
-        this.containerElementRef = makeRef();
-    }
-    componentWillLoad() {
-        this.checkIfContentAvailable();
-    }
-    checkIfContentAvailable() {
-        const hasChildren = this.hostElement.children.length > 0;
-        const hasTextContent = !!this.hostElement.textContent;
-        this.iconOnly = !hasChildren && !hasTextContent;
-    }
-    getTooltip() {
-        var _a;
-        if (!this.tooltipText && !this.hostElement.hasAttribute('tooltip-text')) {
-            return null;
-        }
-        const text = typeof this.tooltipText === 'string' && this.tooltipText.trim()
-            ? this.tooltipText
-            : (_a = this.hostElement.textContent) === null || _a === void 0 ? void 0 : _a.trim();
-        return (h("ix-tooltip", { for: this.containerElementRef.waitForCurrent() }, text));
-    }
-    render() {
-        let customStyle = {};
-        if (this.variant === 'custom') {
-            customStyle = {
-                color: this.pillColor,
-                [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
-            };
-        }
-        return (h(Host, { key: 'd64b7e45e9f690b80b59564736333c613ffd786e', style: this.variant === 'custom'
-                ? {
-                    '--ix-icon-button-color': this.pillColor,
-                }
-                : {}, class: {
-                'align-left': this.alignLeft,
-            } }, h("div", { key: 'cd9093442c7177383e0796d5158fa52f795db5e9', ref: this.containerElementRef, style: Object.assign({}, 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 && (h("ix-icon", { key: 'a6432d7c46e88eff87d2242365f671ae87763c85', class: {
-                'with-icon': true,
-            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon })), h("span", { key: 'c39e4e53da038bdb84952460d9e7892eff4878ce', class: "slot-container" }, h("slot", { key: '78d71f68580f57baf9ba4458ede78c65a5f9cb2c', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
-    }
-    get hostElement() { return getElement(this); }
-};
-Pill.style = pillCss();
-
-export { Pill as ix_pill };

package/dist/esm/ix-tab-item_2.entry.js

@@ -1,492 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BEPo7U1W.js';
-import { v as iconChevronRightSmall, C as iconChevronLeftSmall } from './index-BBzEV-f4.js';
-import { r as requestAnimationFrameNoNgZone } from './requestAnimationFrame-BEuV0Xpe.js';
-
-const tabItemCss = () => `@charset "UTF-8";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color);touch-action:none}: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::after{content:"";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}: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 .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){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 .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}: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 .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled);cursor:default}: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(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle):not(.disabled):not(.selected)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle):not(.disabled):not(.selected))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle):not(.disabled):not(.selected)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle):not(.disabled):not(.selected))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){cursor:default;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}`;
-
-const TabItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.tabClick = createEvent(this, "tabClick", 7);
-        /**
-         * Set selected tab
-         */
-        this.selected = false;
-        /**
-         * Set disabled tab
-         */
-        this.disabled = false;
-        /**
-         * Set small size tab
-         */
-        this.small = false;
-        /**
-         * Set icon only tab
-         */
-        this.icon = false;
-        /**
-         * Set rounded tab
-         */
-        this.rounded = false;
-        /**
-         * Set layout width style
-         */
-        this.layout = 'auto';
-        /**
-         * Set selected placement
-         */
-        this.placement = 'bottom';
-    }
-    tabItemClasses(props) {
-        return {
-            selected: props.selected,
-            disabled: props.disabled,
-            'small-tab': props.small,
-            icon: props.small,
-            stretched: props.layout === 'stretched',
-            bottom: props.placement === 'bottom',
-            top: props.placement === 'top',
-            circle: props.circle,
-        };
-    }
-    render() {
-        return (h(Host, { key: '71cfed0ab360348500969c2529bc79cab83bdaff', role: "tab", class: this.tabItemClasses({
-                selected: this.selected,
-                disabled: this.disabled,
-                small: this.small,
-                icon: this.icon,
-                layout: this.layout,
-                placement: this.placement,
-                circle: this.rounded,
-            }), tabIndex: 0, onClick: (event) => {
-                if (event.defaultPrevented)
-                    return;
-                const clientEvent = this.tabClick.emit({
-                    nativeEvent: event,
-                });
-                if (clientEvent.defaultPrevented) {
-                    event.stopPropagation();
-                }
-            } }, h("div", { key: 'fe2bdf6f8daee069486f25fe8e21e53713d856e4', class: {
-                circle: this.rounded,
-                text: !this.rounded,
-                selected: this.selected,
-                disabled: this.disabled,
-            } }, h("slot", { key: '2d978daeed548622c470979f9b1aacd9823f398e' })), h("div", { key: '8ee56a58ba2d1047b7089668b70a176edec0ea00', class: {
-                counter: true,
-                selected: this.selected,
-                hidden: !(this.rounded && this.counter !== undefined),
-                disabled: this.disabled,
-            } }, this.counter)));
-    }
-};
-TabItem.style = tabItemCss();
-
-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 .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%;touch-action:pan-y}:host .tab-items .items-content{display:flex;align-items:center;touch-action:none}:host .arrow{all:unset;position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-tertiary--color);background-color:var(--theme-btn-tertiary--background);z-index:2}:host .arrow:hover{color:var(--theme-btn-tertiary--color--hover);background-color:var(--theme-btn-tertiary--background--hover)}:host .arrow:active{color:var(--theme-btn-tertiary--color--active);background-color:var(--theme-btn-tertiary--background--active)}:host .arrow.right{left:auto;right:0}:host .overflow-shadow{display:block;position:relative;height:100%;width:100%;pointer-events:all}:host .overflow-shadow.shadow-left{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px);mask-image:linear-gradient(90deg, transparent 0px, black 45px)}:host .overflow-shadow.shadow-right{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}:host .overflow-shadow.shadow-both{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%)}`;
-
-const TAB_MANAGED_CLASSES = {
-    SELECTED: 'selected',
-    DISABLED: 'disabled',
-    SMALL_TAB: 'small-tab',
-    ICON: 'icon',
-    STRETCHED: 'stretched',
-    BOTTOM: 'bottom',
-    TOP: 'top',
-    CIRCLE: 'circle',
-    HYDRATED: 'hydrated',
-};
-const MANAGED_CLASSES_SET = new Set(Object.values(TAB_MANAGED_CLASSES));
-const Tabs = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.selectedChange = createEvent(this, "selectedChange", 7);
-        /**
-         * Set tab items to small size
-         */
-        this.small = false;
-        /**
-         * Set rounded tabs
-         */
-        this.rounded = false;
-        /**
-         * Set default selected tab by index
-         */
-        this.selected = 0;
-        /**
-         * Set layout width style
-         */
-        this.layout = 'auto';
-        /**
-         * Set placement style
-         */
-        this.placement = 'bottom';
-        /**
-         * ARIA label for the chevron left icon button
-         *
-         * @since 3.2.0
-         */
-        this.ariaLabelChevronLeftIconButton = 'Scroll tabs left';
-        /**
-         * ARIA label for the chevron right icon button
-         *
-         * @since 3.2.0
-         */
-        this.ariaLabelChevronRightIconButton = 'Scroll tabs right';
-        this.totalItems = 0;
-        this.currentScrollAmount = 0;
-        this.scrollAmount = 100;
-        this.scrollActionAmount = 0;
-        this.showArrowPrevious = false;
-        this.showArrowNext = false;
-        this.windowStartSize = window.innerWidth;
-        this.ARROW_WIDTH = 32;
-        /** Movement in px beyond which we treat as drag (not tap). */
-        this.TAP_THRESHOLD_PX = 10;
-        this.updateScheduled = false;
-        this.clickAction = {
-            isClick: true,
-        };
-        this.isDragging = false;
-    }
-    onWindowResize() {
-        this.totalItems = 0;
-        this.totalItems = this.getTabs().length;
-        if (this.windowStartSize === 0)
-            return (this.windowStartSize = window.innerWidth);
-        this.move(this.windowStartSize - window.innerWidth);
-        this.windowStartSize = window.innerWidth;
-    }
-    getTabs() {
-        return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));
-    }
-    getTab(tabIndex) {
-        return this.getTabs()[tabIndex];
-    }
-    getTabsWrapper() {
-        var _a;
-        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.items-content');
-    }
-    getTabsContainer() {
-        var _a;
-        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tab-items');
-    }
-    initResizeObserver() {
-        const parentElement = this.hostElement.parentElement;
-        if (!parentElement)
-            return;
-        this.resizeObserver = new ResizeObserver(() => {
-            this.renderArrows();
-        });
-        this.resizeObserver.observe(parentElement);
-    }
-    observeSlotChanges() {
-        var _a;
-        (_a = this.classObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.classObserver = new MutationObserver(() => {
-            this.scheduleTabUpdate();
-        });
-        this.classObserver.observe(this.hostElement, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeFilter: ['class'],
-        });
-    }
-    scheduleTabUpdate() {
-        if (this.updateScheduled)
-            return;
-        this.updateScheduled = true;
-        requestAnimationFrame(() => {
-            this.updateTabAttributes();
-            this.updateScheduled = false;
-        });
-    }
-    setTabAttributes(element, index) {
-        const isSelected = index === this.selected;
-        const isDisabled = element.disabled;
-        if (this.small)
-            element.setAttribute('small', 'true');
-        if (this.rounded)
-            element.setAttribute('rounded', 'true');
-        element.setAttribute('layout', this.layout);
-        element.setAttribute('selected', isSelected.toString());
-        element.setAttribute('placement', this.placement);
-        element.toggleAttribute('disabled', isDisabled);
-        this.applyRequiredClasses(element, isSelected, isDisabled);
-    }
-    applyRequiredClasses(element, isSelected, isDisabled) {
-        const requiredClasses = new Set(this.buildRequiredClasses(isSelected, isDisabled));
-        const { classList } = element;
-        for (const cls of requiredClasses) {
-            classList.add(cls);
-        }
-        for (const managedClass of MANAGED_CLASSES_SET) {
-            if (!requiredClasses.has(managedClass)) {
-                classList.remove(managedClass);
-            }
-        }
-    }
-    buildRequiredClasses(isSelected, isDisabled) {
-        const classConditions = {
-            [TAB_MANAGED_CLASSES.HYDRATED]: true,
-            [TAB_MANAGED_CLASSES.SELECTED]: isSelected,
-            [TAB_MANAGED_CLASSES.DISABLED]: isDisabled,
-            [TAB_MANAGED_CLASSES.SMALL_TAB]: this.small,
-            [TAB_MANAGED_CLASSES.STRETCHED]: this.layout === 'stretched',
-            [TAB_MANAGED_CLASSES.BOTTOM]: this.placement === 'bottom',
-            [TAB_MANAGED_CLASSES.TOP]: this.placement === 'top',
-            [TAB_MANAGED_CLASSES.CIRCLE]: this.rounded,
-        };
-        return Object.entries(classConditions)
-            .filter(([, condition]) => condition)
-            .map(([className]) => className);
-    }
-    ensureSelectedIndex() {
-        if (this.totalItems === 0) {
-            console.warn('ix-tabs: No tabs available for selection');
-            this.selected = -1;
-            return;
-        }
-        if (this.selected < this.totalItems) {
-            return;
-        }
-        const originalIndex = this.selected;
-        const previousIndex = originalIndex - 1;
-        if (previousIndex >= 0 && previousIndex < this.totalItems) {
-            this.updateSelected(previousIndex);
-            return;
-        }
-        if (this.totalItems > 0) {
-            this.updateSelected(0);
-        }
-    }
-    updateSelected(index) {
-        this.selected = index;
-        this.selectedChange.emit(index);
-    }
-    updateTabAttributes() {
-        const tabs = this.getTabs();
-        this.totalItems = tabs.length;
-        this.ensureSelectedIndex();
-        for (const [index, element] of tabs.entries()) {
-            this.setTabAttributes(element, index);
-        }
-        const overflow = this.showArrows();
-        tabs.forEach((el) => {
-            el.style.touchAction = overflow ? 'none' : '';
-        });
-        this.renderArrows();
-    }
-    showArrows() {
-        try {
-            const tabWrapper = this.getTabsWrapper();
-            return (tabWrapper &&
-                tabWrapper.scrollWidth >
-                    Math.ceil(tabWrapper.getBoundingClientRect().width) &&
-                this.layout === 'auto');
-        }
-        catch (_a) {
-            return false;
-        }
-    }
-    showPreviousArrow() {
-        try {
-            return this.showArrows() === true && this.scrollActionAmount < 0;
-        }
-        catch (_a) {
-            return false;
-        }
-    }
-    showNextArrow() {
-        try {
-            const tabWrapper = this.getTabsWrapper();
-            if (!tabWrapper) {
-                return false;
-            }
-            const tabWrapperRect = tabWrapper.getBoundingClientRect();
-            return (this.showArrows() === true &&
-                this.scrollActionAmount >
-                    (tabWrapper.scrollWidth - tabWrapperRect.width) * -1);
-        }
-        catch (_a) {
-            return false;
-        }
-    }
-    move(amount, click = false) {
-        const tabsWrapper = this.getTabsWrapper();
-        if (!tabsWrapper) {
-            return;
-        }
-        const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;
-        const maxScrollWidth = -this.currentScrollAmount +
-            tabsWrapperVisibleWidth -
-            tabsWrapper.scrollWidth;
-        amount = amount < maxScrollWidth ? maxScrollWidth : amount;
-        amount += this.currentScrollAmount;
-        amount = Math.min(amount, 0);
-        const styles = [
-            `transform: translateX(${amount}px);`,
-            click ? 'transition: all ease-in-out 400ms;' : '',
-        ].join('');
-        tabsWrapper.setAttribute('style', styles);
-        if (click)
-            this.currentScrollAmount = this.scrollActionAmount = amount;
-        else
-            this.scrollActionAmount = amount;
-    }
-    onSelectedChange(newValue) {
-        if (!this.showArrows())
-            return;
-        const tab = this.getTab(newValue);
-        const container = this.getTabsContainer();
-        if (!tab || !container)
-            return;
-        const containerRect = container.getBoundingClientRect();
-        const tabRect = tab.getBoundingClientRect();
-        const tabLeftRelative = tabRect.left - containerRect.left;
-        const tabRightRelative = tabLeftRelative + tabRect.width;
-        if (tabLeftRelative < this.ARROW_WIDTH) {
-            this.move(-tabLeftRelative + this.ARROW_WIDTH, true);
-        }
-        else if (tabRightRelative > containerRect.width - this.ARROW_WIDTH) {
-            this.move(containerRect.width - tabRightRelative - this.ARROW_WIDTH, true);
-        }
-    }
-    setSelected(index) {
-        this.selected = index;
-    }
-    clickTab(index) {
-        // Don't select if it was a drag
-        if (!this.clickAction.isClick) {
-            return;
-        }
-        const { defaultPrevented } = this.selectedChange.emit(index);
-        if (defaultPrevented) {
-            return;
-        }
-        this.setSelected(index);
-    }
-    dragStart(element, event) {
-        if (!this.showArrows())
-            return;
-        if (event.button > 0)
-            return;
-        if (this.isDragging)
-            return;
-        event.preventDefault();
-        this.isDragging = true;
-        this.clickAction.isClick = true;
-        element.setPointerCapture(event.pointerId);
-        const pointerdownPositionX = event.clientX;
-        const initialScrollAmount = this.currentScrollAmount;
-        const move = (event) => this.dragMove(event, pointerdownPositionX);
-        const cleanupPointerListeners = () => {
-            element.removeEventListener('pointermove', move, false);
-            element.removeEventListener('pointerup', pointerUp, false);
-            element.removeEventListener('pointercancel', pointerCancel, false);
-        };
-        const pointerUp = () => {
-            cleanupPointerListeners();
-            this.isDragging = false;
-            this.dragStop();
-            if (this.clickAction.isClick) {
-                const tabs = this.getTabs();
-                const index = tabs.indexOf(element);
-                if (index >= 0 && !element.disabled) {
-                    this.clickTab(index);
-                }
-            }
-        };
-        const pointerCancel = () => {
-            cleanupPointerListeners();
-            this.isDragging = false;
-            this.scrollActionAmount = initialScrollAmount;
-            const tabsWrapper = this.getTabsWrapper();
-            if (tabsWrapper) {
-                tabsWrapper.setAttribute('style', `transform: translateX(${initialScrollAmount}px);`);
-            }
-            this.clickAction.isClick = true;
-        };
-        element.addEventListener('pointerup', pointerUp);
-        element.addEventListener('pointercancel', pointerCancel);
-        element.addEventListener('pointermove', move, false);
-    }
-    dragMove(event, pointerdownX) {
-        const delta = event.clientX - pointerdownX;
-        if (Math.abs(delta) > this.TAP_THRESHOLD_PX) {
-            this.clickAction.isClick = false;
-        }
-        this.move(delta);
-    }
-    dragStop() {
-        if (this.clickAction.isClick) {
-            return;
-        }
-        this.currentScrollAmount = this.scrollActionAmount;
-    }
-    componentWillLoad() {
-        this.initResizeObserver();
-    }
-    componentDidRender() {
-        this.updateTabAttributes();
-    }
-    componentWillRender() {
-        this.renderArrows();
-    }
-    renderArrows() {
-        requestAnimationFrameNoNgZone(() => {
-            this.showArrowNext = this.showNextArrow();
-            this.showArrowPrevious = this.showPreviousArrow();
-        });
-    }
-    componentDidLoad() {
-        const tabs = this.getTabs();
-        tabs.forEach((element) => {
-            element.addEventListener('pointerdown', (event) => this.dragStart(element, event));
-        });
-        const wrapper = this.getTabsWrapper();
-        if (wrapper) {
-            wrapper.addEventListener('touchstart', (e) => {
-                if (this.showArrows()) {
-                    e.preventDefault();
-                }
-            }, { passive: false });
-        }
-        this.observeSlotChanges();
-    }
-    disconnectedCallback() {
-        var _a, _b;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        (_b = this.classObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-    }
-    onTabClick(event) {
-        if (event.defaultPrevented) {
-            return;
-        }
-        const target = event.target;
-        const tabs = this.getTabs();
-        tabs.forEach((tab, index) => {
-            if (!tab.disabled && tab === target) {
-                this.clickTab(index);
-            }
-        });
-    }
-    render() {
-        return (h(Host, { key: '4d60486e9ae8c9b154df97446534697a6b8a52d6' }, this.showArrowPrevious && (h("button", { key: '358885efeb578914036d4475377e0e8695937f13', class: "arrow", onClick: () => this.move(this.scrollAmount, true), "aria-label": this.ariaLabelChevronLeftIconButton }, h("ix-icon", { key: 'd434ddb5acb03c058af167b7590bdc1018166e58', name: iconChevronLeftSmall, "aria-hidden": "true" }))), h("div", { key: '24bc36c48fb9fd1cb2e3181dae47402fe5335bd0', class: {
-                'tab-items': true,
-                'overflow-shadow': true,
-                'shadow-left': this.showArrowPrevious,
-                'shadow-right': this.showArrowNext,
-                'shadow-both': this.showArrowNext && this.showArrowPrevious,
-            } }, h("div", { key: 'a647c41bbd347379a9e7621705024f3182c08827', class: "items-content", role: "tablist" }, h("slot", { key: '92436d5e8b7a867de8e37b68a55600e590de63eb' }))), this.showArrowNext && (h("button", { key: '27a519f552b7950cd8b57985110fec983ca675bc', class: "arrow right", onClick: () => this.move(-this.scrollAmount, true), "aria-label": this.ariaLabelChevronRightIconButton }, h("ix-icon", { key: '8c5e55420b51983b85d221708f691f407c8ecbb8', name: iconChevronRightSmall, "aria-hidden": "true" })))));
-    }
-    get hostElement() { return getElement(this); }
-    static get watchers() { return {
-        "selected": [{
-                "onSelectedChange": 0
-            }]
-    }; }
-};
-Tabs.style = tabsCss();
-
-export { TabItem as ix_tab_item, Tabs as ix_tabs };