@designsystem-se/af 39.2.1 → 39.2.2

package/dist/esm/digi-tablist.entry.js

@@ -1,287 +0,0 @@
-import { r as registerInstance, c as createEvent, h, a as Host } from './index-BnKuq1L7.js';
-import { O as OverflowMode, D as Direction } from './navigation-tablist.types-Ua3MxeBh.js';
-
-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 NavigationTablist = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.afTabChange = createEvent(this, "afTabChange", 7);
-        this.afTabFocusChange = createEvent(this, "afTabFocusChange", 7);
-        this.tabRefs = {};
-        this.activeTab = 0;
-        this.selectedTab = 0;
-        this.windowTab = 0;
-        this.tabs = [];
-        this.listOverflows = false;
-        this.showPrev = false;
-        this.showNext = false;
-        /**
-         * Bestämmer beteende då flikar överflödar
-         * * @en Set overflow behaviour
-         */
-        this.afOverflowMode = OverflowMode.Controls;
-        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;
-            });
-        };
-    }
-    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: '8bdab05cd034b9940aefcb9f38b16d09b6f0b0c7' }, h("div", { key: '2d2266a9600dcc5817130ed4ece38868779e0b69', class: {
-                'digi-tablist': true,
-                'digi-tablist--overflow-scroll': this.afOverflowMode === OverflowMode.Scroll,
-                'digi-tablist--overflow-controls': this.afOverflowMode === OverflowMode.Controls
-            } }, h("div", { key: 'a96cd5d9a2eec5b2b52f0d1a00b2810c28e8d4bd', class: "control-wrapper", style: {
-                left: '0',
-                visibility: this.showPrev ? 'visible' : 'hidden'
-            } }, h("button", { key: '7a9810781c300bd44aa7ce3f3f76f651b1799023', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Previous) }, h("digi-icon-chevron-left", { key: '8f65c019aa2a60f8d10025c147ad2448d30cdf1d' }))), h("div", { key: '7be08fe744f17f71fab7358d63d010f17e5c977d', 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: 'b79ea56eb945fe5c4b2e34529d8b1985018ac46c', class: "control-wrapper", style: {
-                right: '0',
-                visibility: this.showNext ? 'visible' : 'hidden'
-            } }, h("button", { key: '3d581fe07f9591f21fef85e700259d3b44332631', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Next) }, h("digi-icon-chevron-right", { key: '1f3a564d4eff7851ad13901c492e663c5c43d384' })))), h("div", { key: '2cd9aa7d409b36395febee9dfd26eb6e82b02f35', ref: (ref) => (this.panelsRef = ref), role: "presentation" }, h("slot", { key: 'b9f82031b00032dfb1df2358546a8a35934033a0' }))));
-    }
-    static get watchers() { return {
-        "activeTab": [{
-                "syncPanels": 0
-            }],
-        "afActiveTab": [{
-                "handleTabPropChange": 0
-            }],
-        "windowTab": [{
-                "syncControls": 0
-            }, {
-                "syncWindow": 0
-            }],
-        "listOverflows": [{
-                "syncControls": 0
-            }],
-        "selectedTab": [{
-                "syncFocus": 0
-            }],
-        "afTabs": [{
-                "setupTabs": 0
-            }]
-    }; }
-};
-NavigationTablist.style = navigationTablistCss();
-
-export { NavigationTablist as digi_tablist };