@esri/solutions-components 0.8.67 → 0.9.0

package/dist/esm/calcite-stack.entry.js

@@ -1,70 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, h, a as Host } from './index-0eecd45f.js';
-import { s as slotChangeHasAssignedElement } from './dom-1f06a111.js';
-import { C as CSS, S as SLOTS } from './resources-be5a6557.js';
-import './guid-f05d01d5.js';
-import './resources-be0262db.js';
-
-const stackCss = ":host([disabled]) .content{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) .content *,:host([disabled]) .content ::slotted(*){pointer-events:none}:host{display:flex;flex:1 1 0%;flex-direction:column}.container{display:flex;flex:1 1 auto;align-items:stretch;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1.375;padding-inline:var(--calcite-stack-padding-inline, 0.75rem);padding-block:var(--calcite-stack-padding-block, 0.5rem)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:0 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}:host([hidden]){display:none}[hidden]{display:none}";
-
-const Stack = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.handleActionsStartSlotChange = (event) => {
-            this.hasActionsStart = slotChangeHasAssignedElement(event);
-        };
-        this.handleActionsEndSlotChange = (event) => {
-            this.hasActionsEnd = slotChangeHasAssignedElement(event);
-        };
-        this.handleContentStartSlotChange = (event) => {
-            this.hasContentStart = slotChangeHasAssignedElement(event);
-        };
-        this.handleContentEndSlotChange = (event) => {
-            this.hasContentEnd = slotChangeHasAssignedElement(event);
-        };
-        this.disabled = false;
-        this.hasActionsStart = false;
-        this.hasActionsEnd = false;
-        this.hasContentStart = false;
-        this.hasContentEnd = false;
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderActionsStart() {
-        const { hasActionsStart } = this;
-        return (h("div", { class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
-    }
-    renderActionsEnd() {
-        const { hasActionsEnd } = this;
-        return (h("div", { class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
-    }
-    renderContentStart() {
-        const { hasContentStart } = this;
-        return (h("div", { class: CSS.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
-    }
-    renderDefaultContent() {
-        return (h("div", { class: CSS.content }, h("slot", null)));
-    }
-    renderContentEnd() {
-        const { hasContentEnd } = this;
-        return (h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
-    }
-    render() {
-        return (h(Host, { key: 'f8d423aff1f3991e45cf591bd0480537cc09f846' }, h("div", { key: '6c8e70bc5cced152dde2592c2b6f1f28695de681', class: CSS.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
-    }
-};
-Stack.style = stackCss;
-
-export { Stack as calcite_stack };

package/dist/esm/calcite-tab-nav.entry.js

@@ -1,466 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, e as createEvent, k as readTask, h, a as Host, g as getElement } from './index-0eecd45f.js';
-import { c as calciteSize24, a as calciteSize32, b as calciteSize44 } from './core-a0d3cc0e.js';
-import { d as focusElementInGroup, a as getElementDir, z as filterDirectChildren } from './dom-1f06a111.js';
-import { c as createObserver } from './observers-81ed4977.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-1b4d548e.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-2df2d559.js';
-import { C as CSS_UTILITY } from './resources-be0262db.js';
-import './guid-f05d01d5.js';
-import './key-15222297.js';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
- */
-const ICON = {
-    chevronRight: "chevron-right",
-    chevronLeft: "chevron-left",
-};
-const CSS = {
-    activeIndicatorContainer: "tab-nav-active-indicator-container",
-    container: "tab-nav",
-    containerHasEndTabTitleOverflow: "tab-nav--end-overflow",
-    containerHasStartTabTitleOverflow: "tab-nav--start-overflow",
-    scrollButton: "scroll-button",
-    scrollButtonContainer: "scroll-button-container",
-    scrollBackwardContainerButton: "scroll-button-container--backward",
-    scrollForwardContainerButton: "scroll-button-container--forward",
-    tabTitleSlotWrapper: "tab-titles-slot-wrapper",
-};
-
-const tabNavCss = ":host{--calcite-internal-tab-nav-gradient-start-side:left;--calcite-internal-tab-nav-gradient-end-side:right;position:relative;display:flex}.scale-s{--calcite-internal-tab-nav-scroller-button-width:24px;min-block-size:1.5rem}.scale-m{--calcite-internal-tab-nav-scroller-button-width:32px;min-block-size:2rem}.scale-l{--calcite-internal-tab-nav-scroller-button-width:44px;min-block-size:2.75rem}.calcite--rtl{--calcite-internal-tab-nav-gradient-start-side:right;--calcite-internal-tab-nav-gradient-end-side:left}.tab-nav--start-overflow .tab-nav-active-indicator-container,.tab-nav--start-overflow .tab-titles-slot-wrapper{-webkit-mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%);mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--end-overflow .tab-nav-active-indicator-container,.tab-nav--end-overflow .tab-titles-slot-wrapper{-webkit-mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%);mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--start-overflow.tab-nav--end-overflow .tab-nav-active-indicator-container,.tab-nav--start-overflow.tab-nav--end-overflow .tab-titles-slot-wrapper{-webkit-mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%), linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%);mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%), linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%)}.tab-nav::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none}:host([layout=center]) ::slotted(calcite-tab-title){display:flex;flex-grow:1;flex-shrink:0;min-inline-size:auto;white-space:nowrap}:host([layout=center]) ::slotted(calcite-tab-title[selected]){overflow:unset}:host(:not([bordered])) .scale-l{--calcite-internal-tab-nav-gap:var(--calcite-size-xxl)}:host(:not([bordered])) .scale-m{--calcite-internal-tab-nav-gap:var(--calcite-size-xl)}:host(:not([bordered])) .scale-s{--calcite-internal-tab-nav-gap:var(--calcite-size-lg)}:host(:not([bordered])) .tab-titles-slot-wrapper{gap:var(--calcite-internal-tab-nav-gap)}:host([layout=center]:not([bordered])) .tab-titles-slot-wrapper{padding-inline:var(--calcite-spacing-xxl)}.tab-nav,.tab-titles-slot-wrapper{display:flex;inline-size:100%;justify-content:flex-start;overflow:hidden;white-space:nowrap}.tab-nav-active-indicator-container{position:absolute;inset-inline:0px;inset-block-end:0px;block-size:0.125rem;inline-size:100%;overflow:hidden}.tab-nav-active-indicator{position:absolute;inset-block-end:0px;display:block;block-size:0.125rem;background-color:var(--calcite-color-brand);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.scroll-button-container{position:absolute;inset-block:0px}.scroll-button-container calcite-button{--calcite-offset-invert-focus:1;--calcite-color-text-1:var(--calcite-color-text-3);block-size:100%}.scroll-button-container calcite-button:hover{--calcite-color-text-1:unset;--calcite-color-foreground-1:var(--calcite-color-transparent-hover);--calcite-color-foreground-3:var(--calcite-color-transparent)}.scroll-button-container--forward{inset-inline-end:0;z-index:var(--calcite-z-index)}.scroll-button-container--backward{inset-inline-start:0;z-index:var(--calcite-z-index)}:host(:not([bordered])) .scroll-button-container--backward::before,:host(:not([bordered])) .scroll-button-container--forward::before{background-color:var(--calcite-color-border-3);content:\"\";inline-size:var(--calcite-border-width-sm);inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);position:absolute}:host(:not([bordered])) .scroll-button-container--backward::before{inset-inline-end:0}:host(:not([bordered])) .scroll-button-container--forward::before{inset-inline-start:0}:host .position-bottom .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host .position-bottom .tab-nav-active-indicator-container{inset-block-end:unset;inset-block-start:0px}:host([bordered]) .tab-nav-active-indicator-container{inset-block-end:unset}:host([bordered]) .position-bottom .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start:unset}@media (forced-colors: active){.tab-nav-active-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}";
-
-const TabNav = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteTabChange = createEvent(this, "calciteTabChange", 6);
-        this.calciteInternalTabChange = createEvent(this, "calciteInternalTabChange", 6);
-        this.effectiveDir = "ltr";
-        this.lastScrollWheelAxis = "x";
-        this.resizeObserver = createObserver("resize", () => {
-            this.updateScrollingState();
-            if (!this.activeIndicatorEl) {
-                return;
-            }
-            this.updateActiveIndicator();
-        });
-        this.onTabTitleWheel = (event) => {
-            event.preventDefault();
-            const { deltaX, deltaY } = event;
-            const x = Math.abs(deltaX);
-            const y = Math.abs(deltaY);
-            let scrollBy;
-            if (x === y) {
-                scrollBy = this.lastScrollWheelAxis === "x" ? deltaX : deltaY;
-            }
-            else if (x > y) {
-                scrollBy = deltaX;
-                this.lastScrollWheelAxis = "x";
-            }
-            else {
-                scrollBy = deltaY;
-                this.lastScrollWheelAxis = "y";
-            }
-            const scrollByX = (this.effectiveDir === "rtl" ? -1 : 1) * scrollBy;
-            event.currentTarget.scrollBy(scrollByX, 0);
-            requestAnimationFrame(() => this.updateActiveIndicator());
-        };
-        this.onSlotChange = (event) => {
-            var _a;
-            (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-            const slottedChildren = event.target.assignedElements();
-            slottedChildren.forEach((child) => {
-                var _a;
-                (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(child);
-            });
-        };
-        this.storeContainerRef = (el) => (this.containerEl = el);
-        this.storeTabTitleWrapperRef = (el) => {
-            this.tabTitleContainerEl = el;
-            this.intersectionObserver = createObserver("intersection", () => this.updateScrollingState(), {
-                root: el,
-                threshold: [0, 0.5, 1],
-            });
-        };
-        this.scrollToTabTitles = (direction) => {
-            readTask(() => {
-                const tabTitleContainer = this.tabTitleContainerEl;
-                const containerBounds = tabTitleContainer.getBoundingClientRect();
-                const tabTitles = Array.from(this.el.querySelectorAll("calcite-tab-title"));
-                const { effectiveDir } = this;
-                if (direction === "forward") {
-                    tabTitles.reverse();
-                }
-                let closestToEdge = null;
-                tabTitles.forEach((tabTitle) => {
-                    const tabTitleBounds = tabTitle.getBoundingClientRect();
-                    const containerEndX = containerBounds.x + containerBounds.width;
-                    const tabTitleEndX = tabTitleBounds.x + tabTitleBounds.width;
-                    if ((direction === "forward" && effectiveDir === "ltr") ||
-                        (direction === "backward" && effectiveDir === "rtl")) {
-                        const afterContainerEnd = tabTitleBounds.x > containerEndX;
-                        if (afterContainerEnd) {
-                            closestToEdge = tabTitle;
-                        }
-                        else {
-                            const crossingContainerEnd = tabTitleEndX > containerEndX && tabTitleBounds.x > containerBounds.x;
-                            if (crossingContainerEnd) {
-                                closestToEdge = tabTitle;
-                            }
-                        }
-                    }
-                    else {
-                        const beforeContainerStart = tabTitleEndX < containerBounds.x;
-                        if (beforeContainerStart) {
-                            closestToEdge = tabTitle;
-                        }
-                        else {
-                            const crossingContainerStart = tabTitleEndX < containerEndX && tabTitleBounds.x < containerBounds.x;
-                            if (crossingContainerStart) {
-                                closestToEdge = tabTitle;
-                            }
-                        }
-                    }
-                });
-                if (closestToEdge) {
-                    const { scrollerButtonWidth } = this;
-                    const offsetAdjustment = (direction === "forward" && effectiveDir === "ltr") ||
-                        (direction === "backward" && effectiveDir === "rtl")
-                        ? -scrollerButtonWidth
-                        : closestToEdge.offsetWidth - tabTitleContainer.clientWidth + scrollerButtonWidth;
-                    const scrollTo = closestToEdge.offsetLeft + offsetAdjustment;
-                    tabTitleContainer.scrollTo({
-                        left: scrollTo,
-                        behavior: "smooth",
-                    });
-                }
-            });
-        };
-        this.scrollToNextTabTitles = () => this.scrollToTabTitles("forward");
-        this.scrollToPreviousTabTitles = () => this.scrollToTabTitles("backward");
-        this.handleTabFocus = (event, el, destination) => {
-            const focused = focusElementInGroup(this.enabledTabTitles, el, destination);
-            this.scrollTabTitleIntoView(focused, "instant");
-            event.stopPropagation();
-        };
-        this.onTabTitleScroll = () => {
-            this.updateActiveIndicator();
-            this.updateScrollingState();
-        };
-        this.renderScrollButton = (overflowDirection) => {
-            const { bordered, messages, hasOverflowingStartTabTitle, hasOverflowingEndTabTitle, scale } = this;
-            const isEnd = overflowDirection === "end";
-            return (h("div", { class: {
-                    [CSS.scrollButtonContainer]: true,
-                    [CSS.scrollBackwardContainerButton]: !isEnd,
-                    [CSS.scrollForwardContainerButton]: isEnd,
-                }, hidden: (isEnd && !hasOverflowingEndTabTitle) || (!isEnd && !hasOverflowingStartTabTitle), key: overflowDirection }, h("calcite-button", { appearance: bordered ? "outline-fill" : "transparent", "aria-label": isEnd ? messages.nextTabTitles : messages.previousTabTitles, class: {
-                    [CSS.scrollButton]: true,
-                }, iconFlipRtl: "both", iconStart: isEnd ? ICON.chevronRight : ICON.chevronLeft, kind: "neutral", onClick: isEnd ? this.scrollToNextTabTitles : this.scrollToPreviousTabTitles, scale: scale, tabIndex: -1 })));
-        };
-        this.storageId = undefined;
-        this.syncId = undefined;
-        this.selectedTitle = null;
-        this.scale = "m";
-        this.layout = "inline";
-        this.position = "bottom";
-        this.bordered = false;
-        this.indicatorOffset = undefined;
-        this.indicatorWidth = undefined;
-        this.messages = undefined;
-        this.messageOverrides = undefined;
-        this.defaultMessages = undefined;
-        this.effectiveLocale = "";
-        this.hasOverflowingStartTabTitle = false;
-        this.hasOverflowingEndTabTitle = false;
-        this.selectedTabId = undefined;
-    }
-    onMessagesChange() {
-        /* wired up by t9n util */
-    }
-    async selectedTabIdChanged() {
-        if (localStorage &&
-            this.storageId &&
-            this.selectedTabId !== undefined &&
-            this.selectedTabId !== null) {
-            localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));
-        }
-        this.calciteInternalTabChange.emit({
-            tab: this.selectedTabId,
-        });
-        this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
-    }
-    selectedTitleChanged() {
-        this.updateActiveIndicator();
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    connectedCallback() {
-        var _a;
-        this.parentTabsEl = this.el.closest("calcite-tabs");
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
-        connectLocalized(this);
-        connectMessages(this);
-    }
-    async componentWillLoad() {
-        const storageKey = `calcite-tab-nav-${this.storageId}`;
-        if (localStorage && this.storageId && localStorage.getItem(storageKey)) {
-            const storedTab = JSON.parse(localStorage.getItem(storageKey));
-            this.selectedTabId = storedTab;
-        }
-        await setUpMessages(this);
-    }
-    componentDidLoad() {
-        this.scrollTabTitleIntoView(this.selectedTitle, "instant");
-    }
-    componentWillRender() {
-        const { parentTabsEl } = this;
-        this.layout = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.layout;
-        this.bordered = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.bordered;
-        this.effectiveDir = getElementDir(this.el);
-        if (this.selectedTitle) {
-            this.updateActiveIndicator();
-        }
-    }
-    componentDidRender() {
-        // if every tab title is active select the first tab.
-        if (this.tabTitles.length &&
-            this.tabTitles.every((title) => !title.selected) &&
-            !this.selectedTabId) {
-            this.tabTitles[0].getTabIdentifier().then((tab) => {
-                this.calciteInternalTabChange.emit({
-                    tab,
-                });
-            });
-        }
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        disconnectLocalized(this);
-        disconnectMessages(this);
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    //--------------------------------------------------------------------------
-    render() {
-        const width = `${this.indicatorWidth}px`;
-        const offset = `${this.indicatorOffset}px`;
-        const indicatorStyle = this.effectiveDir !== "rtl" ? { width, left: offset } : { width, right: offset };
-        return (h(Host, { key: '0824dd4470393b0e186b0fdf238420454fed396c', role: "tablist" }, h("div", { key: '205551441feaaa61e2b4b603a7b37ce3d18bdba8', class: {
-                [CSS.container]: true,
-                [CSS.containerHasStartTabTitleOverflow]: !!this.hasOverflowingStartTabTitle,
-                [CSS.containerHasEndTabTitleOverflow]: !!this.hasOverflowingEndTabTitle,
-                [`scale-${this.scale}`]: true,
-                [`position-${this.position}`]: true,
-                [CSS_UTILITY.rtl]: this.effectiveDir === "rtl",
-            },
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.storeContainerRef }, this.renderScrollButton("start"), h("div", { key: '64844ffd05363fe55e2ae9d4d820dc5113da57d8', class: {
-                [CSS.tabTitleSlotWrapper]: true,
-            }, onScroll: this.onTabTitleScroll, onWheel: this.onTabTitleWheel,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.storeTabTitleWrapperRef }, h("slot", { key: 'a77b898cac87d4fa190ad717a3c0ca4474a962fe', onSlotchange: this.onSlotChange })), h("div", { key: '0bf812fe39d07fbddd54ddb515e2eb31adea9a74', class: {
-                [CSS.activeIndicatorContainer]: true,
-            },
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.activeIndicatorContainerEl = el) }, h("div", { key: 'e1624e7b9845ea37eea06ca7a85816d782530c79', class: "tab-nav-active-indicator", style: indicatorStyle,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.activeIndicatorEl = el) })), this.renderScrollButton("end"))));
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Event Listeners
-    //
-    //--------------------------------------------------------------------------
-    focusPreviousTabHandler(event) {
-        this.handleTabFocus(event, event.target, "previous");
-    }
-    focusNextTabHandler(event) {
-        this.handleTabFocus(event, event.target, "next");
-    }
-    focusFirstTabHandler(event) {
-        this.handleTabFocus(event, event.target, "first");
-    }
-    focusLastTabHandler(event) {
-        this.handleTabFocus(event, event.target, "last");
-    }
-    internalActivateTabHandler(event) {
-        const activatedTabTitle = event.target;
-        this.selectedTabId = event.detail.tab
-            ? event.detail.tab
-            : this.getIndexOfTabTitle(activatedTabTitle);
-        event.stopPropagation();
-        this.scrollTabTitleIntoView(activatedTabTitle);
-    }
-    scrollTabTitleIntoView(activatedTabTitle, behavior = "smooth") {
-        if (!activatedTabTitle) {
-            return;
-        }
-        readTask(() => {
-            const isLTR = this.effectiveDir === "ltr";
-            const tabTitleContainer = this.tabTitleContainerEl;
-            const containerBounds = tabTitleContainer.getBoundingClientRect();
-            const tabTitleBounds = activatedTabTitle.getBoundingClientRect();
-            const scrollPosition = tabTitleContainer.scrollLeft;
-            const overflowingStartTabTitle = isLTR
-                ? this.hasOverflowingStartTabTitle
-                : this.hasOverflowingEndTabTitle;
-            const overflowingEndTabTitle = isLTR
-                ? this.hasOverflowingEndTabTitle
-                : this.hasOverflowingStartTabTitle;
-            if (tabTitleBounds.left <
-                containerBounds.left + (overflowingStartTabTitle ? this.scrollerButtonWidth : 0)) {
-                const left = scrollPosition + (tabTitleBounds.left - containerBounds.left) - this.scrollerButtonWidth;
-                tabTitleContainer.scrollTo({ left, behavior });
-            }
-            else if (tabTitleBounds.right >
-                containerBounds.right - (overflowingEndTabTitle ? this.scrollerButtonWidth : 0)) {
-                const left = scrollPosition +
-                    (tabTitleBounds.right - containerBounds.right) +
-                    this.scrollerButtonWidth;
-                tabTitleContainer.scrollTo({ left, behavior });
-            }
-        });
-    }
-    activateTabHandler(event) {
-        this.calciteTabChange.emit();
-        event.stopPropagation();
-    }
-    internalCloseTabHandler(event) {
-        const closedTabTitleEl = event.target;
-        this.handleTabTitleClose(closedTabTitleEl);
-        event.stopPropagation();
-    }
-    /**
-     * Check for active tabs on register and update selected
-     *
-     * @param event
-     */
-    updateTabTitles(event) {
-        if (event.target.selected) {
-            this.selectedTabId = event.detail;
-        }
-    }
-    globalInternalTabChangeHandler(event) {
-        if (this.syncId &&
-            event.target !== this.el &&
-            event.target.syncId === this.syncId &&
-            this.selectedTabId !== event.detail.tab) {
-            this.selectedTabId = event.detail.tab;
-        }
-        event.stopPropagation();
-    }
-    iconStartChangeHandler() {
-        this.updateActiveIndicator();
-    }
-    effectiveLocaleChange() {
-        updateMessages(this, this.effectiveLocale);
-    }
-    get scrollerButtonWidth() {
-        const { scale } = this;
-        return parseInt(scale === "s" ? calciteSize24 : scale === "m" ? calciteSize32 : calciteSize44);
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    updateActiveIndicator() {
-        var _a, _b, _c, _d, _e, _f;
-        const tabTitleScrollLeft = (_a = this.tabTitleContainerEl) === null || _a === void 0 ? void 0 : _a.scrollLeft;
-        const containerScrollLeft = (_b = this.containerEl) === null || _b === void 0 ? void 0 : _b.scrollLeft;
-        const navWidth = (_c = this.activeIndicatorContainerEl) === null || _c === void 0 ? void 0 : _c.offsetWidth;
-        const tabLeft = (_d = this.selectedTitle) === null || _d === void 0 ? void 0 : _d.offsetLeft;
-        const tabWidth = (_e = this.selectedTitle) === null || _e === void 0 ? void 0 : _e.offsetWidth;
-        const offsetRight = navWidth - tabLeft - tabWidth;
-        const offsetBase = this.effectiveDir === "ltr" ? tabLeft : offsetRight;
-        const multiplier = this.effectiveDir === "ltr" ? -1 : 1;
-        this.indicatorOffset = offsetBase + multiplier * (containerScrollLeft + tabTitleScrollLeft);
-        this.indicatorWidth = (_f = this.selectedTitle) === null || _f === void 0 ? void 0 : _f.offsetWidth;
-    }
-    updateScrollingState() {
-        const tabTitleContainer = this.tabTitleContainerEl;
-        if (!tabTitleContainer) {
-            return;
-        }
-        let isOverflowStart;
-        let isOverflowEnd;
-        const scrollPosition = tabTitleContainer.scrollLeft;
-        const visibleWidth = tabTitleContainer.clientWidth;
-        const totalContentWidth = tabTitleContainer.scrollWidth;
-        if (this.effectiveDir === "ltr") {
-            isOverflowStart = scrollPosition > 0;
-            isOverflowEnd = scrollPosition + visibleWidth < totalContentWidth;
-        }
-        else {
-            isOverflowStart = scrollPosition < 0;
-            isOverflowEnd = scrollPosition !== -(totalContentWidth - visibleWidth);
-        }
-        this.hasOverflowingStartTabTitle = isOverflowStart;
-        this.hasOverflowingEndTabTitle = isOverflowEnd;
-    }
-    getIndexOfTabTitle(el, tabTitles = this.tabTitles) {
-        // In most cases, since these indexes correlate with tab contents, we want to consider all tab titles.
-        // However, when doing relative index operations, it makes sense to pass in this.enabledTabTitles as the 2nd arg.
-        return tabTitles.indexOf(el);
-    }
-    async getTabTitleById(id) {
-        return Promise.all(this.tabTitles.map((el) => el.getTabIdentifier())).then((ids) => {
-            return this.tabTitles[ids.indexOf(id)];
-        });
-    }
-    get tabTitles() {
-        return filterDirectChildren(this.el, "calcite-tab-title");
-    }
-    get enabledTabTitles() {
-        return filterDirectChildren(this.el, "calcite-tab-title:not([disabled])").filter((tabTitle) => !tabTitle.closed);
-    }
-    handleTabTitleClose(closedTabTitleEl) {
-        const { tabTitles } = this;
-        const selectionModified = closedTabTitleEl.selected;
-        const visibleTabTitlesIndices = tabTitles.reduce((tabTitleIndices, tabTitle, index) => !tabTitle.closed ? [...tabTitleIndices, index] : tabTitleIndices, []);
-        const totalVisibleTabTitles = visibleTabTitlesIndices.length;
-        if (totalVisibleTabTitles === 1 && tabTitles[visibleTabTitlesIndices[0]].closable) {
-            tabTitles[visibleTabTitlesIndices[0]].closable = false;
-            this.selectedTabId = visibleTabTitlesIndices[0];
-            if (selectionModified) {
-                tabTitles[visibleTabTitlesIndices[0]].activateTab();
-            }
-        }
-        else if (totalVisibleTabTitles > 1) {
-            const closedTabTitleIndex = tabTitles.findIndex((el) => el === closedTabTitleEl);
-            const nextTabTitleIndex = visibleTabTitlesIndices.find((value) => value > closedTabTitleIndex);
-            if (this.selectedTabId === closedTabTitleIndex) {
-                this.selectedTabId = nextTabTitleIndex ? nextTabTitleIndex : totalVisibleTabTitles - 1;
-                tabTitles[this.selectedTabId].activateTab();
-            }
-        }
-        requestAnimationFrame(() => {
-            this.updateActiveIndicator();
-            tabTitles[this.selectedTabId].focus();
-        });
-    }
-    static get assetsDirs() { return ["assets"]; }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "messageOverrides": ["onMessagesChange"],
-        "selectedTabId": ["selectedTabIdChanged"],
-        "selectedTitle": ["selectedTitleChanged"],
-        "effectiveLocale": ["effectiveLocaleChange"]
-    }; }
-};
-TabNav.style = tabNavCss;
-
-export { TabNav as calcite_tab_nav };