import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-a53686b3.js';
import { d as defineCustomElement$4 } from './p-db0d140d.js';
import { d as defineCustomElement$3 } from './p-c90fed99.js';
import { d as defineCustomElement$2 } from './p-2c01b4f7.js';

var Direction;
(function (Direction) {
    Direction[Direction["Previous"] = -1] = "Previous";
    Direction[Direction["Next"] = 1] = "Next";
})(Direction || (Direction = {}));
var OverflowMode;
(function (OverflowMode) {
    OverflowMode["Controls"] = "controls";
    OverflowMode["Scroll"] = "scroll";
})(OverflowMode || (OverflowMode = {}));

const navigationTablistCss = ".sc-digi-tablist-h{--tab-active-border-color:var(--digi--color--marking--navigation--selected);--tab-text-color:var(--digi--color--text--primary);--tab-icon-primary--color:var(--digi--color--icon--primary);--tab-icon-primary--color-hover:var(--digi--color--icon--primary);--tab-icon-primary--color-active:var(--digi--color--icon--primary)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist{font-family:var(--digi--global--typography--font-family--default);color:var(--digi--color--text--primary);position:relative;display:flex;gap:1rem;background-color:var(--digi--color--background--primary);margin-bottom:2.875rem;border-bottom:1px solid var(--digi--color--divider--secondary)}.sc-digi-tablist-h .digi-tablist--overflow-scroll.sc-digi-tablist .control-wrapper.sc-digi-tablist{display:none !important}.sc-digi-tablist-h .digi-tablist--overflow-scroll.sc-digi-tablist [role=tablist].sc-digi-tablist{overflow-x:auto}.sc-digi-tablist-h .digi-tablist--overflow-controls.sc-digi-tablist [role=tablist].sc-digi-tablist{overflow-x:hidden}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist button.sc-digi-tablist{background:none;border:none;padding:0;font-family:inherit}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist [role=tablist].sc-digi-tablist{display:flex;font-weight:bold;flex-grow:1;width:100%}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .control-wrapper.sc-digi-tablist{position:absolute;z-index:20;display:flex;align-items:center;justify-content:center;height:100%}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .control-wrapper.sc-digi-tablist .tab-control-button.sc-digi-tablist{display:flex;align-items:center;justify-content:center;background-color:var(--digi--color--background--interactive--default--tertiary);border-radius:6px;min-height:auto;padding:0.75rem;aspect-ratio:1;cursor:pointer}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .control-wrapper.sc-digi-tablist .tab-control-button.sc-digi-tablist digi-icon-chevron-right.sc-digi-tablist,.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .control-wrapper.sc-digi-tablist .tab-control-button.sc-digi-tablist digi-icon-chevron-left.sc-digi-tablist{--digi--icon--color:var(--digi--color--icon--cta)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist{cursor:pointer;white-space:nowrap}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .content-wrapper.sc-digi-tablist{position:relative;height:2.75rem;display:flex;flex-direction:column;transition:background-color 0.1s linear}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .tablist-content.sc-digi-tablist{flex:1;display:flex;padding-right:0.75rem;padding-left:0.75rem}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist [class*=digi-icon-].sc-digi-tablist:not(svg){--digi--icon--width:1rem;--digi--icon--color:var(--tab-icon-primary--color);padding-right:var(--digi--gutter--smaller)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist digi-badge-notification.sc-digi-tablist{margin-left:-0.125rem}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .title.sc-digi-tablist{font-size:1rem;flex-direction:column;display:flex;align-items:center;justify-content:center;font-weight:normal;color:var(--tab-text-color)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .title.sc-digi-tablist::after{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:bold}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .indicator.sc-digi-tablist{height:0.25rem;width:100%;visibility:hidden;background-color:var(--tab-active-border-color)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist:focus{outline:none;box-shadow:none}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist:focus-visible{z-index:10;outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist:hover:not(.is-active) .title.sc-digi-tablist{color:var(--digi--color--text--interactive--primary);text-decoration:underline}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist:hover:not(.is-active) [class*=digi-icon-].sc-digi-tablist:not(svg){--tab-icon-primary--color:var(--tab-icon-primary--color-hover)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.is-active.sc-digi-tablist .title.sc-digi-tablist{font-weight:bold}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.is-active.sc-digi-tablist svg.sc-digi-tablist{transform:translateX(-0.125rem)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.is-active.sc-digi-tablist [class*=digi-icon-].sc-digi-tablist:not(svg){--tab-icon-primary--color:var(--tab-icon-primary--color-active)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.is-active.sc-digi-tablist .indicator.sc-digi-tablist{visibility:visible}";
const DigiTablistStyle0 = navigationTablistCss;

const NavigationTablist = /*@__PURE__*/ proxyCustomElement(class NavigationTablist extends H {
    constructor() {
        super();
        this.__registerHost();
        this.afTabChange = createEvent(this, "afTabChange", 7);
        this.afTabFocusChange = createEvent(this, "afTabFocusChange", 7);
        this.tabRefs = {};
        this.handleResize = () => {
            if (!this.tablistRef)
                return;
            // Ensure we measure after any layout/paint from the resize
            if (this._requestAnimationFrame)
                cancelAnimationFrame(this._requestAnimationFrame);
            this._requestAnimationFrame = requestAnimationFrame(() => {
                var _a, _b;
                const el = this.tablistRef;
                const containerWidth = el.clientWidth;
                const contentWidth = el.scrollWidth;
                // Tolerance ≈ 1 physical pixel to absorb zoom/subpixel jitter
                const tolerance = 1 / ((window === null || window === void 0 ? void 0 : window.devicePixelRatio) || 1);
                // Guard against div-by-zero
                const tabsCount = Math.max((_b = (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0, 1);
                const avgTabWidth = contentWidth / tabsCount;
                // How many whole tabs fit? Nudge by tolerance to avoid off-by-one at zoom edges
                const tabsPerWindow = Math.floor((containerWidth + tolerance) / avgTabWidth);
                this.tabsPerWindow = Math.max(1, Math.min(tabsPerWindow, tabsCount));
                // Ensure windowTab stays within valid bounds after resize
                const maxValidWindowTab = Math.max(0, tabsCount - this.tabsPerWindow);
                if (this.windowTab > maxValidWindowTab) {
                    this.windowTab = maxValidWindowTab;
                }
                // Overflow check with tolerance
                this.listOverflows = contentWidth - containerWidth > tolerance;
                // (Optional) if you have left/right “handles”, compute visibility too:
                this.showPrev = el.scrollLeft > tolerance;
                this.showNext =
                    el.scrollLeft + el.clientWidth < el.scrollWidth - tolerance;
            });
        };
        this.activeTab = 0;
        this.selectedTab = 0;
        this.windowTab = 0;
        this.tabsPerWindow = undefined;
        this.tabs = [];
        this.listOverflows = false;
        this.showPrev = false;
        this.showNext = false;
        this.afTabs = undefined;
        this.afOverflowMode = OverflowMode.Controls;
        this.afAriaLabelledby = undefined;
        this.afAriaLabel = undefined;
        this.afInitialTab = undefined;
        this.afActiveTab = undefined;
    }
    handleKey(e) {
        if (this.focusCaptured()) {
            let captureKey = true;
            switch (e.key) {
                case ' ':
                case 'Enter':
                    return this.setActiveTabAndFocus(this.selectedTab);
                case 'ArrowLeft':
                    if (e.shiftKey) {
                        this.handleTabControl(Direction.Previous);
                    }
                    else {
                        this.focusTab(this.selectedTab - 1);
                    }
                    break;
                case 'ArrowRight':
                    if (e.shiftKey) {
                        this.handleTabControl(Direction.Next);
                    }
                    else {
                        this.focusTab(this.selectedTab + 1);
                    }
                    break;
                case 'Home':
                    if (e.shiftKey) {
                        return this.focusTab(0);
                    }
                    else {
                        return this.moveWindow(0);
                    }
                case 'End':
                    if (e.shiftKey) {
                        return this.focusTab(this.tabs.length - 1);
                    }
                    else {
                        return this.moveWindow(this.tabs.length - 1);
                    }
                default:
                    captureKey = false;
            }
            if (captureKey) {
                e.preventDefault();
            }
        }
    }
    syncPanels() {
        // side-effect
        if (this.panelsRef != null) {
            const panels = this.panelsRef.querySelectorAll(':scope>digi-tablist-panel');
            for (let i = 0; i < panels.length; i++) {
                const panel = panels[i];
                const showPanel = panel.tab === this.tabs[this.activeTab].id;
                panel.isVisible = showPanel;
            }
        }
    }
    handleTabPropChange(tabId) {
        this.setActiveTabById(tabId);
    }
    syncControls() {
        const tabGroup = Math.floor(this.windowTab / this.tabsPerWindow);
        const numberOfGroups = Math.ceil(this.tabs.length / this.tabsPerWindow);
        this.showPrev = tabGroup > 0;
        this.showNext = tabGroup < numberOfGroups - 1;
    }
    syncWindow(tabIdx) {
        const tab = this.tabs[tabIdx];
        const tabRef = this.tabRefs[tab.id];
        const listBox = this.tablistRef.getBoundingClientRect();
        const tabBox = tabRef.getBoundingClientRect();
        const centeredOffset = tabRef.offsetLeft - listBox.width / 2 + tabBox.width / 2;
        const maxLeft = this.tablistRef.scrollWidth - listBox.width;
        const left = Math.max(Math.min(centeredOffset, maxLeft), 0);
        this.tablistRef.scrollTo({
            left,
            behavior: 'smooth'
        });
    }
    syncFocus(tabIdx) {
        const tabRef = this.tabRefs[this.tabs[tabIdx].id];
        tabRef.focus({ preventScroll: true });
        this.windowTab = tabIdx;
    }
    setupTabs(tabs) {
        if (typeof tabs === 'string') {
            this.tabs = JSON.parse(tabs);
        }
        else if (Array.isArray(tabs)) {
            this.tabs = tabs;
        }
        else {
            throw new Error('Invalid format or no tabs supplied');
        }
    }
    setActiveTabById(id) {
        const tabIdx = this.tabs.findIndex((tab) => tab.id === id);
        if (tabIdx > -1) {
            this.activeTab = tabIdx;
        }
    }
    setupInitialTab() {
        if (this.afActiveTab != null) {
            return this.setActiveTabById(this.afActiveTab);
        }
        else if (this.afInitialTab != null) {
            return this.setActiveTabById(this.afInitialTab);
        }
    }
    setupResizeHandler() {
        this.resizeObserver = new ResizeObserver(() => this.handleResize());
        this.resizeObserver.observe(this.tablistRef);
    }
    handleTabChange(tab) {
        const idx = this.tabs.findIndex(({ id }) => id === tab.id);
        this.setActiveTabAndFocus(idx);
        this.afTabChange.emit(tab);
    }
    handleTabControl(direction) {
        // Calculate the current window group
        const currentGroup = Math.floor(this.windowTab / this.tabsPerWindow);
        const totalGroups = Math.ceil(this.tabs.length / this.tabsPerWindow);
        let newGroup;
        if (direction === Direction.Next) {
            newGroup = Math.min(currentGroup + 1, totalGroups - 1);
        }
        else {
            newGroup = Math.max(currentGroup - 1, 0);
        }
        // Move to the first tab of the target group
        const newWindowTab = newGroup * this.tabsPerWindow;
        this.moveWindow(newWindowTab);
    }
    setActiveTabAndFocus(tabIdx) {
        this.activeTab = tabIdx;
        this.focusTab(tabIdx);
    }
    focusTab(tabIdx) {
        this.selectedTab = this.nextTabIdx(tabIdx);
        const currentTab = this.tabs[this.selectedTab];
        this.afTabFocusChange.emit(currentTab);
    }
    moveWindow(tabIdx) {
        tabIdx = Math.max(0, Math.min(tabIdx, this.tabs.length - 1));
        this.windowTab = tabIdx;
    }
    nextTabIdx(tabIdx) {
        if (tabIdx >= this.tabs.length) {
            return 0;
        }
        else if (tabIdx < 0) {
            return this.tabs.length - 1;
        }
        return tabIdx;
    }
    focusCaptured() {
        return this.tabs.some((tab) => this.tabRefs[tab.id] === document.activeElement);
    }
    componentWillLoad() {
        this.setupTabs(this.afTabs);
        this.setupInitialTab();
    }
    componentDidLoad() {
        var _a, _b, _c;
        // Also listen to window resize for viewport zoom changes
        if (window) {
            window.addEventListener('resize', this.handleResize, { passive: true });
        }
        // Recalculate once fonts finish loading (text width changes with webfonts)
        (_c = (_b = (_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready) === null || _b === void 0 ? void 0 : _b.then) === null || _c === void 0 ? void 0 : _c.call(_b, () => this.handleResize());
        this.setupResizeHandler();
        this.handleResize();
        this.syncPanels();
        this.syncControls();
    }
    disconnectedCallback() {
        var _a;
        if (window) {
            window.removeEventListener('resize', this.handleResize);
        }
        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
        if (this._requestAnimationFrame)
            cancelAnimationFrame(this._requestAnimationFrame);
    }
    render() {
        return (h(Host, { key: 'e22f722a4c757ec957c64d5449820e684763bb65' }, h("div", { key: '55bbc66dcc0ffb5eaa57a8e940bb6905848d2521', class: {
                'digi-tablist': true,
                'digi-tablist--overflow-scroll': this.afOverflowMode === OverflowMode.Scroll,
                'digi-tablist--overflow-controls': this.afOverflowMode === OverflowMode.Controls
            } }, h("div", { key: '154ea8adad1a5b5214ccf8d612e4abf12990954e', class: "control-wrapper", style: {
                left: '0',
                visibility: this.showPrev ? 'visible' : 'hidden'
            } }, h("button", { key: '8e892d55eeb0a2c0a2de93349a79aa7d1875f0ea', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Previous) }, h("digi-icon-chevron-left", { key: 'f6233af64182b94ccce487c3e86fde611ed3b034' }))), h("div", { key: 'dee9d980df6972bdcc8adb73dce382ecdf3fe678', role: "tablist", ref: (ref) => (this.tablistRef = ref), "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel }, this.tabs.map((tab) => {
            const focusable = tab.id === this.tabs[this.selectedTab].id;
            const isActive = tab.id === this.tabs[this.activeTab].id;
            const Icon = `digi-icon-${tab.icon}`;
            const badgeValue = tab.badgeValue;
            return (h("button", { ref: (ref) => (this.tabRefs[tab.id] = ref), class: {
                    'digi-tab': true,
                    'is-active': isActive
                }, id: `tab-${tab.id}`, role: "tab", type: "button", tabindex: focusable ? '0' : '-1', "aria-label": tab.ariaLabel, "aria-selected": isActive.toString(), "aria-controls": `tabpanel-${tab.id}`, onClick: () => this.handleTabChange(tab) }, h("div", { class: "content-wrapper" }, h("span", { class: "tablist-content" }, tab.icon && h(Icon, { "aria-hidden": "true" }), h("span", { class: "title", "data-text": tab.title }, tab.title), tab.badgeValue && (h("digi-badge-notification", { afValue: badgeValue, "aria-hidden": "true" }))), h("div", { class: "indicator" }))));
        })), h("div", { key: '57eada501609bc43a04ad550faaf8ba3ea438fdb', class: "control-wrapper", style: {
                right: '0',
                visibility: this.showNext ? 'visible' : 'hidden'
            } }, h("button", { key: 'a6fe0443e2ecdd5f5287ccb230ce4920cbb6dfed', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Next) }, h("digi-icon-chevron-right", { key: '3fd2841059d9f5459a8e649c5c80c3d2a665ad0f' })))), h("div", { key: '908fae2fd08df7ad97ef997165c60d189cd2dcb3', ref: (ref) => (this.panelsRef = ref), role: "presentation" }, h("slot", { key: '90ef134162054396c99986d74585689b176364c3' }))));
    }
    static get watchers() { return {
        "activeTab": ["syncPanels"],
        "afActiveTab": ["handleTabPropChange"],
        "windowTab": ["syncControls", "syncWindow"],
        "listOverflows": ["syncControls"],
        "selectedTab": ["syncFocus"],
        "afTabs": ["setupTabs"]
    }; }
    static get style() { return DigiTablistStyle0; }
}, [6, "digi-tablist", {
        "afTabs": [1, "af-tabs"],
        "afOverflowMode": [1, "af-overflow-mode"],
        "afAriaLabelledby": [1, "af-aria-labelledby"],
        "afAriaLabel": [1, "af-aria-label"],
        "afInitialTab": [1, "af-initial-tab"],
        "afActiveTab": [1, "af-active-tab"],
        "activeTab": [32],
        "selectedTab": [32],
        "windowTab": [32],
        "tabsPerWindow": [32],
        "tabs": [32],
        "listOverflows": [32],
        "showPrev": [32],
        "showNext": [32]
    }, [[0, "keydown", "handleKey"]], {
        "activeTab": ["syncPanels"],
        "afActiveTab": ["handleTabPropChange"],
        "windowTab": ["syncControls", "syncWindow"],
        "listOverflows": ["syncControls"],
        "selectedTab": ["syncFocus"],
        "afTabs": ["setupTabs"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-tablist", "digi-badge-notification", "digi-icon-chevron-left", "digi-icon-chevron-right"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-tablist":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, NavigationTablist);
            }
            break;
        case "digi-badge-notification":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "digi-icon-chevron-left":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "digi-icon-chevron-right":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DigiTablist = NavigationTablist;
const defineCustomElement = defineCustomElement$1;

export { Direction as D, DigiTablist, OverflowMode as O, defineCustomElement };
