@quartzds/core 1.0.0-beta.13 → 1.0.0-beta.130

package/components/qds-tabbar.js

@@ -0,0 +1,599 @@
+/*!
+ * SPDX-FileCopyrightText: © 2026 Schneider Electric
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-D2489VzR.js';
+import { a as invariant, V as VERTICAL_MOVE_KEYS, H as HORIZONTAL_MOVE_KEYS, q as resolvePanelElement, s as componentOnReady } from './p-eUDNu0SE.js';
+import { d as defineCustomElement$7 } from './p-XP2CY_fo.js';
+import { d as defineCustomElement$6 } from './p-DOqfdgQA.js';
+import { d as defineCustomElement$5 } from './p-Bn9o5Um2.js';
+import { d as defineCustomElement$4 } from './p-fKK7EmM2.js';
+import { d as defineCustomElement$3 } from './p-Cb4tcewD.js';
+import { d as defineCustomElement$2 } from './p-B9xuNEzc.js';
+
+const tabbarCss = ":host([hidden]){display:none!important}:host{display:block}.qds-tabbar,.qds-tabs,.qds-vertical,.qds-vertical-divider{display:flex}.qds-tabbar,.qds-vertical-divider{width:inherit}.qds-arrow-start{transform:scaleX(var(--qds-direction-factor,1)) rotate(180deg)}.qds-align-center{align-content:center}.qds-hidden{display:none}.qds-centered{justify-content:center}.qds-tabs{flex:1;margin-block:0;overflow:auto;padding-inline-start:0;scroll-behavior:smooth;scrollbar-width:none}.qds-vertical{flex-direction:column}.qds-vertical-divider{flex-direction:row}[data-size=small]{gap:var(--qds-control-small-gap-siblings-related)}[data-size=standard]{gap:var(--qds-control-standard-gap-siblings-related)}[data-layer=main][data-level=root] .qds-tabs,[data-size=large]{gap:var(--qds-control-large-gap-siblings-related)}[data-layer=main][data-level=section] .qds-tabs{gap:var(--qds-control-standard-gap-siblings-related)}[data-layer=main][data-level=subsection] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}[data-layer=popup][data-level=root] .qds-tabs{gap:var(--qds-control-standard-gap-siblings-related)}[data-layer=popup][data-level=section] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}:is([data-layer=panel],[data-layer=accessory])[data-level=root] .qds-tabs{gap:var(--qds-control-small-gap-siblings-related)}.qds-sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
+
+// SPDX-FileCopyrightText: © 2024 Schneider Electric
+//
+// SPDX-License-Identifier: Apache-2.0
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _Tabbar_instances, _Tabbar_tabs, _Tabbar_ro, _Tabbar_mutationObserver, _Tabbar_tabbar, _Tabbar_toggleAnnouncement, _Tabbar_scrollStartButton, _Tabbar_scrollEndButton, _Tabbar_pendingArrowFocus, _Tabbar_isInternallySettingActive, _Tabbar_computedImportance_get, _Tabbar_computedSize_get, _Tabbar_computedPlacement_get, _Tabbar_computeDividerVisible_get, _Tabbar_computedAriaOrientation_get, _Tabbar_getTabItems, _Tabbar_announceScroll, _Tabbar_scrollToStart, _Tabbar_scrollToEnd, _Tabbar_setActiveTab, _Tabbar_handleTabMutation, _Tabbar_activateTab, _Tabbar_switchTabPanel, _Tabbar_getCurrentTab, _Tabbar_setCurrentTab, _Tabbar_isVerticalPlacement, _Tabbar_isHorizontalPlacement, _Tabbar_isEndOrBottomPlacement, _Tabbar_onClick, _Tabbar_onKeyDown, _Tabbar_onMouseDown, _Tabbar_onScroll, _Tabbar_onViewportCrop, _Tabbar_syncInternalsAccessibility, _Tabbar_updateTabsCache, _Tabbar_setTabSettings, _Tabbar_onSlotchange, _Tabbar_scrollEndButtonRef, _Tabbar_scrollStartButtonRef;
+const TAB_ITEM_SELECTOR = 'qds-icon-tab, qds-tab';
+const TAB_SETTINGS = {
+    'main-root': {
+        importance: 'standard',
+        size: 'large',
+        indicatorPosition: 'block-end',
+    },
+    'main-section': {
+        importance: 'standard',
+        size: 'standard',
+        indicatorPosition: 'block-end',
+    },
+    'popup-root': {
+        importance: 'standard',
+        size: 'standard',
+        indicatorPosition: 'block-end',
+    },
+    'main-subsection': {
+        importance: 'subdued',
+        size: 'small',
+        indicatorPosition: 'block-start',
+    },
+    'popup-section': {
+        importance: 'subdued',
+        size: 'small',
+        indicatorPosition: 'inline-start',
+    },
+    'panel-root': {
+        importance: 'standard',
+        size: 'small',
+        indicatorPosition: 'block-start',
+    },
+    'accessory-root': {
+        importance: 'subdued',
+        size: 'small',
+        indicatorPosition: 'block-end',
+    },
+};
+const isTabItem = (item) => {
+    if (!(item instanceof H))
+        return false;
+    const tagName = item.tagName.toLowerCase();
+    return tagName === 'qds-tab' || tagName === 'qds-icon-tab';
+};
+const isEnabledTabItem = (item) => isTabItem(item) && !item.inert && item.disabled !== true;
+const isTabActive = (tab) => tab.selected;
+const getTabTrigger = (tab) => tab.tab;
+const getPanelId = (tab) => {
+    const panelElement = resolvePanelElement(tab);
+    return panelElement?.id ?? '';
+};
+const Tabbar = /*@__PURE__*/ proxyCustomElement(class Tabbar extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.showEmitter = createEvent(this, "qdsTabShow", 6);
+        this.hideEmitter = createEvent(this, "qdsTabHide", 6);
+        this.internals = this.attachInternals();
+        _Tabbar_instances.add(this);
+        /**
+         * The tabbar's layer.
+         *
+         * @deprecated The property layer is deprecated. Please use `size` property instead.
+         * Please do not use `layer` and `size` at the same time.
+         */
+        this.layer = 'main';
+        /**
+         * The tabbar's level.
+         *
+         * @deprecated The property level is deprecated. Please use `size` property instead.
+         * Please do not use `level` and `size` at the same time.
+         */
+        this.level = 'root';
+        /**
+         * The tabbar's size. This controls the size of the tabs within the tabbar.
+         */
+        this.size = 'standard';
+        /**
+         * The tabbar's orientation.
+         *
+         * @deprecated Please use the `placement` property instead. Do not use
+         * `orientation` and `placement` at the same time.
+         */
+        this.orientation = 'horizontal';
+        /**
+         * The tabbar's placement.
+         */
+        this.placement = 'top';
+        /**
+         * Displays a divider line.
+         */
+        this.showDivider = false;
+        /**
+         * The alignment of tabs. Only applicable for horizontal orientation.
+         */
+        this.alignment = 'start';
+        this.disableEndArrow = false;
+        this.disableStartArrow = false;
+        this.scrollAnnouncement = '';
+        _Tabbar_tabs.set(this, []);
+        _Tabbar_ro.set(this, void 0);
+        _Tabbar_mutationObserver.set(this, void 0);
+        _Tabbar_tabbar.set(this, void 0);
+        _Tabbar_toggleAnnouncement.set(this, false);
+        _Tabbar_scrollStartButton.set(this, void 0);
+        _Tabbar_scrollEndButton.set(this, void 0);
+        _Tabbar_pendingArrowFocus.set(this, void 0);
+        _Tabbar_isInternallySettingActive.set(this, false);
+        _Tabbar_scrollToStart.set(this, () => {
+            invariant(__classPrivateFieldGet(this, _Tabbar_tabbar, "f"));
+            const isRTL = globalThis.getComputedStyle(this.host).direction === 'rtl';
+            __classPrivateFieldSet(this, _Tabbar_pendingArrowFocus, 'end', "f");
+            __classPrivateFieldGet(this, _Tabbar_tabbar, "f").scroll({
+                left: isRTL
+                    ? __classPrivateFieldGet(this, _Tabbar_tabbar, "f").scrollLeft + __classPrivateFieldGet(this, _Tabbar_tabbar, "f").clientWidth
+                    : __classPrivateFieldGet(this, _Tabbar_tabbar, "f").scrollLeft - __classPrivateFieldGet(this, _Tabbar_tabbar, "f").clientWidth,
+            });
+            __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_announceScroll).call(this, 'previous');
+        });
+        _Tabbar_scrollToEnd.set(this, () => {
+            invariant(__classPrivateFieldGet(this, _Tabbar_tabbar, "f"));
+            const isRTL = globalThis.getComputedStyle(this.host).direction === 'rtl';
+            __classPrivateFieldSet(this, _Tabbar_pendingArrowFocus, 'start', "f");
+            __classPrivateFieldGet(this, _Tabbar_tabbar, "f").scroll({
+                left: isRTL
+                    ? __classPrivateFieldGet(this, _Tabbar_tabbar, "f").scrollLeft - __classPrivateFieldGet(this, _Tabbar_tabbar, "f").clientWidth
+                    : __classPrivateFieldGet(this, _Tabbar_tabbar, "f").scrollLeft + __classPrivateFieldGet(this, _Tabbar_tabbar, "f").clientWidth,
+            });
+            __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_announceScroll).call(this, 'next');
+        });
+        _Tabbar_isVerticalPlacement.set(this, () => this.placement === 'start' || this.placement === 'end');
+        _Tabbar_isHorizontalPlacement.set(this, () => this.placement === 'top' || this.placement === 'bottom');
+        _Tabbar_isEndOrBottomPlacement.set(this, () => this.placement === 'end' || this.placement === 'bottom');
+        _Tabbar_onClick.set(this, (event) => {
+            const { target } = event;
+            if (!(target instanceof H))
+                return;
+            const tab = target.closest(TAB_ITEM_SELECTOR);
+            if (!isEnabledTabItem(tab))
+                return;
+            __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_activateTab).call(this, tab);
+        });
+        _Tabbar_onKeyDown.set(this, (event) => {
+            const isVertical = this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this);
+            const MOVE_SELECTION_KEYS = isVertical
+                ? VERTICAL_MOVE_KEYS
+                : HORIZONTAL_MOVE_KEYS;
+            if (!MOVE_SELECTION_KEYS.has(event.key))
+                return;
+            const tabs = __classPrivateFieldGet(this, _Tabbar_tabs, "f");
+            if (tabs.length === 0)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const activeTab = __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_getCurrentTab).call(this);
+            let index = activeTab ? tabs.indexOf(activeTab) : 0;
+            const isRTL = globalThis.getComputedStyle(this.host).direction === 'rtl';
+            let nextTab;
+            do {
+                switch (event.key) {
+                    case 'ArrowLeft':
+                    case 'ArrowUp': {
+                        index = (isRTL ? index < tabs.length - 1 : index > 0)
+                            ? index - (isRTL ? -1 : 1)
+                            : isRTL
+                                ? 0
+                                : tabs.length - 1;
+                        break;
+                    }
+                    case 'ArrowRight':
+                    case 'ArrowDown': {
+                        index = (isRTL ? index > 0 : index < tabs.length - 1)
+                            ? index + (isRTL ? -1 : 1)
+                            : isRTL
+                                ? tabs.length - 1
+                                : 0;
+                        break;
+                    }
+                    case 'Home': {
+                        index = isRTL ? tabs.length - 1 : 0;
+                        break;
+                    }
+                    case 'End': {
+                        index = isRTL ? 0 : tabs.length - 1;
+                        break;
+                    }
+                }
+                nextTab = tabs[index];
+            } while (nextTab.disabled === true);
+            __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setCurrentTab).call(this, nextTab);
+            const target = getTabTrigger(nextTab);
+            target.focus({ preventScroll: true });
+            if (!isVertical)
+                target.scrollIntoView();
+            __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_activateTab).call(this, nextTab);
+        });
+        _Tabbar_onMouseDown.set(this, (event) => {
+            const { target } = event;
+            if (!(target instanceof H))
+                return;
+            const tab = target.closest(TAB_ITEM_SELECTOR);
+            if (isEnabledTabItem(tab))
+                __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setCurrentTab).call(this, tab);
+        });
+        _Tabbar_onScroll.set(this, () => {
+            if (!__classPrivateFieldGet(this, _Tabbar_tabbar, "f"))
+                return;
+            const { clientWidth, scrollWidth, scrollLeft } = __classPrivateFieldGet(this, _Tabbar_tabbar, "f");
+            const isRTL = globalThis.getComputedStyle(this.host).direction === 'rtl';
+            this.disableStartArrow = scrollLeft === 0;
+            this.disableEndArrow = isRTL
+                ? scrollWidth + scrollLeft <= clientWidth
+                : scrollWidth - clientWidth - scrollLeft <= 1;
+        });
+        _Tabbar_onViewportCrop.set(this, () => {
+            if (!__classPrivateFieldGet(this, _Tabbar_tabbar, "f"))
+                return;
+            const { scrollWidth, clientWidth } = __classPrivateFieldGet(this, _Tabbar_tabbar, "f");
+            if (scrollWidth > clientWidth) {
+                __classPrivateFieldGet(this, _Tabbar_onScroll, "f").call(this);
+            }
+        });
+        _Tabbar_onSlotchange.set(this, () => {
+            __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_updateTabsCache).call(this);
+            if (__classPrivateFieldGet(this, _Tabbar_tabs, "f").length > 0)
+                __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setCurrentTab).call(this, __classPrivateFieldGet(this, _Tabbar_tabs, "f")[0]);
+            __classPrivateFieldGet(this, _Tabbar_onViewportCrop, "f").call(this);
+        });
+        _Tabbar_scrollEndButtonRef.set(this, (button) => {
+            __classPrivateFieldSet(this, _Tabbar_scrollEndButton, button, "f");
+        });
+        _Tabbar_scrollStartButtonRef.set(this, (button) => {
+            __classPrivateFieldSet(this, _Tabbar_scrollStartButton, button, "f");
+        });
+    }
+    settingChanged() {
+        __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setTabSettings).call(this);
+    }
+    accessibilityChanged() {
+        __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_syncInternalsAccessibility).call(this);
+    }
+    windowResize() {
+        __classPrivateFieldGet(this, _Tabbar_onViewportCrop, "f").call(this);
+    }
+    activeChanged() {
+        if (__classPrivateFieldGet(this, _Tabbar_isInternallySettingActive, "f"))
+            return;
+        if (this.active === undefined || this.active === '')
+            return;
+        const tabs = __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_getTabItems).call(this);
+        const nextTab = tabs.find((tab) => {
+            const panelId = getPanelId(tab);
+            return panelId === this.active;
+        });
+        if (!nextTab || nextTab.disabled === true)
+            return;
+        const previousTab = this.activeTab;
+        if (previousTab === nextTab && this.active === getPanelId(nextTab))
+            return;
+        this.activeTab = nextTab;
+        if (previousTab && previousTab !== nextTab) {
+            this.hideEmitter.emit(previousTab);
+        }
+        if (previousTab !== nextTab) {
+            this.showEmitter.emit(nextTab);
+        }
+        // Update tab states without triggering mutation observer
+        __classPrivateFieldSet(this, _Tabbar_isInternallySettingActive, true, "f");
+        for (const t of tabs) {
+            const target = getTabTrigger(t);
+            const isSelected = t === nextTab;
+            t.selected = isSelected;
+            if (target instanceof globalThis.Element)
+                target.ariaSelected = isSelected.toString();
+        }
+        __classPrivateFieldSet(this, _Tabbar_isInternallySettingActive, false, "f");
+        __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_switchTabPanel).call(this, nextTab);
+    }
+    componentWillLoad() {
+        this.settingChanged();
+        this.internals.role = 'tablist';
+        __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_syncInternalsAccessibility).call(this);
+        const tabs = __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_getTabItems).call(this);
+        const preselectedTab = tabs.find((tab) => isTabActive(tab));
+        if (preselectedTab)
+            __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setActiveTab).call(this, preselectedTab);
+        else if (tabs.length > 0)
+            __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setActiveTab).call(this, tabs[0]);
+    }
+    componentDidRender() {
+        if (this.activeTab)
+            __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_switchTabPanel).call(this, this.activeTab);
+        if (__classPrivateFieldGet(this, _Tabbar_pendingArrowFocus, "f") === 'start' && this.disableEndArrow) {
+            __classPrivateFieldSet(this, _Tabbar_pendingArrowFocus, undefined, "f");
+            __classPrivateFieldGet(this, _Tabbar_scrollStartButton, "f")?.focus();
+        }
+        else if (__classPrivateFieldGet(this, _Tabbar_pendingArrowFocus, "f") === 'end' && this.disableStartArrow) {
+            __classPrivateFieldSet(this, _Tabbar_pendingArrowFocus, undefined, "f");
+            __classPrivateFieldGet(this, _Tabbar_scrollEndButton, "f")?.focus();
+        }
+        this.settingChanged();
+    }
+    componentDidLoad() {
+        invariant(__classPrivateFieldGet(this, _Tabbar_tabbar, "f"));
+        __classPrivateFieldSet(this, _Tabbar_ro, new ResizeObserver(__classPrivateFieldGet(this, _Tabbar_onScroll, "f")), "f");
+        __classPrivateFieldGet(this, _Tabbar_ro, "f").observe(__classPrivateFieldGet(this, _Tabbar_tabbar, "f"));
+        __classPrivateFieldSet(this, _Tabbar_mutationObserver, new MutationObserver((mutations) => {
+            __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_handleTabMutation).call(this, mutations);
+        }), "f");
+        __classPrivateFieldGet(this, _Tabbar_mutationObserver, "f").observe(this.host, {
+            attributes: true,
+            attributeFilter: ['active'],
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _Tabbar_ro, "f")?.disconnect();
+        __classPrivateFieldGet(this, _Tabbar_mutationObserver, "f")?.disconnect();
+    }
+    render() {
+        return (h("div", { key: '43a1bae6bd980854ec8cbc786be30d3c4dae4ae9', class: {
+                'qds-vertical-divider': this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this),
+            }, "data-layer": this.layer, "data-level": this.level, "data-importance": __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computedImportance_get) }, h("span", { key: '6c81132bbb30f3c5813186bd9a2e6c4715b208c5', class: "qds-sr-only", "aria-live": "polite" }, this.scrollAnnouncement), __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computeDividerVisible_get) && __classPrivateFieldGet(this, _Tabbar_isEndOrBottomPlacement, "f").call(this) && (h("qds-divider", { key: '147475632fc9fd2d8f859240dfa71e45058c4d78', vertical: this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this) })), h("div", { key: '51a0179675663618453b54d25bda6054e3f91321', class: "qds-tabbar" }, h("div", { key: '44f0167da0d5b5d682f86c57a0a7b347e51e0fca', class: {
+                'qds-align-center': true,
+                'qds-hidden': (this.disableEndArrow && this.disableStartArrow) ||
+                    this.orientation === 'vertical' ||
+                    __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this),
+            } }, h("qds-icon-button", { key: '22a512257855b48e1b50f9b48d06017c756a58ea', "aria-label": "show previous tab", importance: "subdued", iconName: "next", iconLibrary: "core", class: "qds-arrow-start", onClick: __classPrivateFieldGet(this, _Tabbar_scrollToStart, "f"), disabled: this.disableStartArrow, ref: __classPrivateFieldGet(this, _Tabbar_scrollStartButtonRef, "f") })), h("div", { key: '4e1a36aaf66917a57bf64618fa675e91db34e555', class: {
+                'qds-tabs': true,
+                'qds-vertical': this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this),
+                'qds-centered': this.alignment === 'center' &&
+                    (this.orientation === 'horizontal' ||
+                        __classPrivateFieldGet(this, _Tabbar_isHorizontalPlacement, "f").call(this)) &&
+                    this.disableEndArrow &&
+                    this.disableStartArrow,
+            }, ref: (element) => {
+                __classPrivateFieldSet(this, _Tabbar_tabbar, element, "f");
+            }, onClick: __classPrivateFieldGet(this, _Tabbar_onClick, "f"), onKeyDown: __classPrivateFieldGet(this, _Tabbar_onKeyDown, "f"), onMouseDown: __classPrivateFieldGet(this, _Tabbar_onMouseDown, "f"), onScroll: __classPrivateFieldGet(this, _Tabbar_onScroll, "f") }, h("slot", { key: '0ae4c49fd815426bd78962526f5fce946d0688a1', onSlotchange: __classPrivateFieldGet(this, _Tabbar_onSlotchange, "f") })), h("div", { key: 'c4fc6997f1430efe4975c8ed1ad723fa6d906d79', class: {
+                'qds-align-center': true,
+                'qds-hidden': (this.disableEndArrow && this.disableStartArrow) ||
+                    this.orientation === 'vertical' ||
+                    __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this),
+            } }, h("qds-icon-button", { key: '87973e92e8ad9e40a2ba6a2a7ade1040c6e46fde', "aria-label": "show next tab", iconName: "next", iconLibrary: "core", importance: "subdued", onClick: __classPrivateFieldGet(this, _Tabbar_scrollToEnd, "f"), disabled: this.disableEndArrow, ref: __classPrivateFieldGet(this, _Tabbar_scrollEndButtonRef, "f") }))), __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computeDividerVisible_get) && !__classPrivateFieldGet(this, _Tabbar_isEndOrBottomPlacement, "f").call(this) && (h("qds-divider", { key: '9c7748c515f2f86c4065b90929dbe7d8f19b377b', vertical: this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this) }))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "importance": ["settingChanged"],
+        "orientation": ["accessibilityChanged"],
+        "placement": ["accessibilityChanged"],
+        "tablistDescription": ["accessibilityChanged"],
+        "active": ["activeChanged"]
+    }; }
+    static get style() { return tabbarCss; }
+}, [273, "qds-tabbar", {
+        "layer": [1],
+        "level": [1],
+        "size": [1],
+        "orientation": [1],
+        "placement": [1],
+        "tablistDescription": [1, "tablist-description"],
+        "showDivider": [4, "show-divider"],
+        "alignment": [1],
+        "importance": [1],
+        "active": [1],
+        "disableEndArrow": [32],
+        "disableStartArrow": [32],
+        "activeTab": [32],
+        "scrollAnnouncement": [32]
+    }, [[9, "resize", "windowResize"]], {
+        "importance": ["settingChanged"],
+        "orientation": ["accessibilityChanged"],
+        "placement": ["accessibilityChanged"],
+        "tablistDescription": ["accessibilityChanged"],
+        "active": ["activeChanged"]
+    }]);
+_Tabbar_tabs = new WeakMap(), _Tabbar_ro = new WeakMap(), _Tabbar_mutationObserver = new WeakMap(), _Tabbar_tabbar = new WeakMap(), _Tabbar_toggleAnnouncement = new WeakMap(), _Tabbar_scrollStartButton = new WeakMap(), _Tabbar_scrollEndButton = new WeakMap(), _Tabbar_pendingArrowFocus = new WeakMap(), _Tabbar_isInternallySettingActive = new WeakMap(), _Tabbar_scrollToStart = new WeakMap(), _Tabbar_scrollToEnd = new WeakMap(), _Tabbar_isVerticalPlacement = new WeakMap(), _Tabbar_isHorizontalPlacement = new WeakMap(), _Tabbar_isEndOrBottomPlacement = new WeakMap(), _Tabbar_onClick = new WeakMap(), _Tabbar_onKeyDown = new WeakMap(), _Tabbar_onMouseDown = new WeakMap(), _Tabbar_onScroll = new WeakMap(), _Tabbar_onViewportCrop = new WeakMap(), _Tabbar_onSlotchange = new WeakMap(), _Tabbar_scrollEndButtonRef = new WeakMap(), _Tabbar_scrollStartButtonRef = new WeakMap(), _Tabbar_instances = new WeakSet(), _Tabbar_computedImportance_get = function _Tabbar_computedImportance_get() {
+    return this.importance;
+}, _Tabbar_computedSize_get = function _Tabbar_computedSize_get() {
+    return this.size ?? undefined;
+}, _Tabbar_computedPlacement_get = function _Tabbar_computedPlacement_get() {
+    switch (this.placement) {
+        case 'top': {
+            return 'block-end';
+        }
+        case 'end': {
+            return 'inline-start';
+        }
+        case 'bottom': {
+            return 'block-start';
+        }
+        case 'start': {
+            return 'inline-end';
+        }
+        default: {
+            return undefined;
+        }
+    }
+}, _Tabbar_computeDividerVisible_get = function _Tabbar_computeDividerVisible_get() {
+    if (this.layer === 'panel')
+        return false;
+    if (this.layer === 'main' &&
+        this.level === 'subsection' &&
+        (this.orientation === 'horizontal' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this)))
+        return false;
+    return this.showDivider === true;
+}, _Tabbar_computedAriaOrientation_get = function _Tabbar_computedAriaOrientation_get() {
+    return this.orientation === 'vertical' || __classPrivateFieldGet(this, _Tabbar_isVerticalPlacement, "f").call(this)
+        ? 'vertical'
+        : 'horizontal';
+}, _Tabbar_getTabItems = function _Tabbar_getTabItems() {
+    return [
+        ...this.host.querySelectorAll(TAB_ITEM_SELECTOR),
+    ].filter((element) => isTabItem(element));
+}, _Tabbar_announceScroll = function _Tabbar_announceScroll(direction) {
+    const text = direction === 'next' ? 'Next tabs showed' : 'Previous tabs showed';
+    __classPrivateFieldSet(this, _Tabbar_toggleAnnouncement, !__classPrivateFieldGet(this, _Tabbar_toggleAnnouncement, "f"), "f");
+    this.scrollAnnouncement = text + (__classPrivateFieldGet(this, _Tabbar_toggleAnnouncement, "f") ? '' : '.');
+}, _Tabbar_setActiveTab = function _Tabbar_setActiveTab(tab) {
+    this.activeTab = tab;
+    const panelId = getPanelId(tab);
+    __classPrivateFieldSet(this, _Tabbar_isInternallySettingActive, true, "f");
+    this.active = panelId;
+    for (const t of __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_getTabItems).call(this)) {
+        const target = getTabTrigger(t);
+        const isSelected = t === tab;
+        t.selected = isSelected;
+        if (target instanceof globalThis.Element)
+            target.ariaSelected = isSelected.toString();
+    }
+    __classPrivateFieldSet(this, _Tabbar_isInternallySettingActive, false, "f");
+}, _Tabbar_handleTabMutation = function _Tabbar_handleTabMutation(mutations) {
+    if (__classPrivateFieldGet(this, _Tabbar_isInternallySettingActive, "f"))
+        return;
+    const activeTab = mutations
+        .map((m) => m.target)
+        .find((target) => target instanceof H && isTabItem(target) && target.selected);
+    if (activeTab) {
+        __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setActiveTab).call(this, activeTab);
+    }
+}, _Tabbar_activateTab = function _Tabbar_activateTab(tab) {
+    const previousTab = this.activeTab;
+    if (previousTab === tab)
+        return;
+    this.activeTab = tab;
+    const panelId = getPanelId(tab);
+    if (previousTab) {
+        this.hideEmitter.emit(previousTab);
+    }
+    this.showEmitter.emit(tab);
+    __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_setCurrentTab).call(this, tab);
+    __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_switchTabPanel).call(this, tab);
+    // Set active property without triggering watcher events again
+    __classPrivateFieldSet(this, _Tabbar_isInternallySettingActive, true, "f");
+    this.active = panelId;
+    __classPrivateFieldSet(this, _Tabbar_isInternallySettingActive, false, "f");
+    for (const t of __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_getTabItems).call(this)) {
+        const target = getTabTrigger(t);
+        const isSelected = t === tab;
+        t.selected = isSelected;
+        if (target instanceof globalThis.Element)
+            target.ariaSelected = isSelected.toString();
+    }
+}, _Tabbar_switchTabPanel = function _Tabbar_switchTabPanel(activeTab) {
+    for (const tab of __classPrivateFieldGet(this, _Tabbar_tabs, "f")) {
+        const panel = resolvePanelElement(tab);
+        if (panel) {
+            panel.hidden = tab !== activeTab;
+        }
+    }
+}, _Tabbar_getCurrentTab = function _Tabbar_getCurrentTab() {
+    return __classPrivateFieldGet(this, _Tabbar_tabs, "f").find((tab) => getTabTrigger(tab).getAttribute('tabindex') === '0');
+}, _Tabbar_setCurrentTab = function _Tabbar_setCurrentTab(tab) {
+    for (const t of __classPrivateFieldGet(this, _Tabbar_tabs, "f")) {
+        const isCurrent = t === tab;
+        componentOnReady(t, (element) => {
+            const target = element ? getTabTrigger(element) : undefined;
+            if (target === undefined)
+                return;
+            const isDisabled = target.getAttribute('aria-disabled') === 'true';
+            const shouldActivateTab = isCurrent && !isDisabled;
+            const tabindex = shouldActivateTab ? '0' : '-1';
+            target.setAttribute('tabindex', tabindex);
+            if (shouldActivateTab)
+                __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_activateTab).call(this, t);
+        });
+    }
+}, _Tabbar_syncInternalsAccessibility = function _Tabbar_syncInternalsAccessibility() {
+    this.internals.ariaOrientation = __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computedAriaOrientation_get);
+    this.internals.ariaLabel = this.tablistDescription ?? '';
+}, _Tabbar_updateTabsCache = function _Tabbar_updateTabsCache() {
+    const slot = this.host.shadowRoot?.querySelector('slot');
+    __classPrivateFieldSet(this, _Tabbar_tabs, slot
+        ? [...slot.assignedElements({ flatten: true })].filter((element) => isEnabledTabItem(element))
+        : [], "f");
+}, _Tabbar_setTabSettings = function _Tabbar_setTabSettings() {
+    const settings = TAB_SETTINGS[`${this.layer}-${this.level}`];
+    if (!settings)
+        return;
+    for (const tab of __classPrivateFieldGet(this, _Tabbar_instances, "m", _Tabbar_getTabItems).call(this)) {
+        tab.importance = __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computedImportance_get) ?? settings.importance;
+        tab.size = __classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computedSize_get) ?? settings.size;
+        tab.indicatorPosition =
+            this.orientation === 'vertical'
+                ? 'inline-end'
+                : (__classPrivateFieldGet(this, _Tabbar_instances, "a", _Tabbar_computedPlacement_get) ?? settings.indicatorPosition);
+    }
+};
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["qds-tabbar", "qds-badge-counter", "qds-badge-indicator", "qds-divider", "qds-icon", "qds-icon-button", "qds-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "qds-tabbar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Tabbar);
+            }
+            break;
+        case "qds-badge-counter":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "qds-badge-indicator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "qds-divider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "qds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "qds-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "qds-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const QdsTabbar = Tabbar;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsTabbar, defineCustomElement };
+//# sourceMappingURL=qds-tabbar.js.map
+
+//# sourceMappingURL=qds-tabbar.js.map