@esri/solutions-components 0.8.2 → 0.8.3

package/dist/cjs/calcite-sortable-list.cjs.entry.js

@@ -7,14 +7,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const interactive = require('./interactive-3ab7044d.js');
-const observers = require('./observers-db4527e4.js');
-const sortableComponent = require('./sortableComponent-c111c036.js');
-const dom = require('./dom-c9c2c835.js');
-require('./browser-d08a5f99.js');
+const index = require('./index-b53bfd7c.js');
+const interactive = require('./interactive-08e5bc95.js');
+const observers = require('./observers-5923a7cc.js');
+const sortableComponent = require('./sortableComponent-5e3419af.js');
+const dom = require('./dom-cf1e2e9f.js');
+require('./browser-fe25aefa.js');
 require('./guid-ae73cd27.js');
-require('./resources-9447c777.js');
+require('./resources-a2b1b149.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.

package/dist/cjs/calcite-split-button.cjs.entry.js

@@ -7,10 +7,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const interactive = require('./interactive-3ab7044d.js');
-const loadable = require('./loadable-5a794992.js');
-require('./browser-d08a5f99.js');
+const index = require('./index-b53bfd7c.js');
+const interactive = require('./interactive-08e5bc95.js');
+const loadable = require('./loadable-41446b78.js');
+require('./browser-fe25aefa.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.

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

@@ -0,0 +1,74 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b53bfd7c.js');
+const dom = require('./dom-cf1e2e9f.js');
+const resources = require('./resources-37006465.js');
+require('./guid-ae73cd27.js');
+require('./resources-a2b1b149.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-family:var(--calcite-sans-family);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}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self: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) {
+        index.registerInstance(this, hostRef);
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.handleActionsStartSlotChange = (event) => {
+            this.hasActionsStart = dom.slotChangeHasAssignedElement(event);
+        };
+        this.handleActionsEndSlotChange = (event) => {
+            this.hasActionsEnd = dom.slotChangeHasAssignedElement(event);
+        };
+        this.handleContentStartSlotChange = (event) => {
+            this.hasContentStart = dom.slotChangeHasAssignedElement(event);
+        };
+        this.handleContentEndSlotChange = (event) => {
+            this.hasContentEnd = dom.slotChangeHasAssignedElement(event);
+        };
+        this.disabled = false;
+        this.hasActionsStart = false;
+        this.hasActionsEnd = false;
+        this.hasContentStart = false;
+        this.hasContentEnd = false;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    renderActionsStart() {
+        const { hasActionsStart } = this;
+        return (index.h("div", { class: resources.CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, index.h("slot", { name: resources.SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+    }
+    renderActionsEnd() {
+        const { hasActionsEnd } = this;
+        return (index.h("div", { class: resources.CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, index.h("slot", { name: resources.SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
+    }
+    renderContentStart() {
+        const { hasContentStart } = this;
+        return (index.h("div", { class: resources.CSS.contentStart, hidden: !hasContentStart }, index.h("slot", { name: resources.SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+    }
+    renderDefaultContent() {
+        return (index.h("div", { class: resources.CSS.content }, index.h("slot", null)));
+    }
+    renderContentEnd() {
+        const { hasContentEnd } = this;
+        return (index.h("div", { class: resources.CSS.contentEnd, hidden: !hasContentEnd }, index.h("slot", { name: resources.SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+    }
+    render() {
+        return (index.h(index.Host, null, index.h("div", { class: resources.CSS.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
+    }
+};
+Stack.style = stackCss;
+
+exports.calcite_stack = Stack;

package/dist/cjs/calcite-stepper-item.cjs.entry.js

@@ -7,17 +7,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const interactive = require('./interactive-3ab7044d.js');
-const locale = require('./locale-d237c9d5.js');
-const loadable = require('./loadable-5a794992.js');
-const t9n = require('./t9n-993a84de.js');
-require('./browser-d08a5f99.js');
-require('./dom-c9c2c835.js');
+const index = require('./index-b53bfd7c.js');
+const interactive = require('./interactive-08e5bc95.js');
+const locale = require('./locale-a615b02f.js');
+const loadable = require('./loadable-41446b78.js');
+const t9n = require('./t9n-463dcbff.js');
+require('./browser-fe25aefa.js');
+require('./dom-cf1e2e9f.js');
 require('./guid-ae73cd27.js');
-require('./resources-9447c777.js');
-require('./key-c5504030.js');
-require('./observers-db4527e4.js');
+require('./resources-a2b1b149.js');
+require('./key-86f4a0b0.js');
+require('./observers-5923a7cc.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.

package/dist/cjs/calcite-stepper.cjs.entry.js

@@ -7,14 +7,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const dom = require('./dom-c9c2c835.js');
-const observers = require('./observers-db4527e4.js');
+const index = require('./index-b53bfd7c.js');
+const dom = require('./dom-cf1e2e9f.js');
+const observers = require('./observers-5923a7cc.js');
 const guid = require('./guid-ae73cd27.js');
-const locale = require('./locale-d237c9d5.js');
-const t9n = require('./t9n-993a84de.js');
-require('./resources-9447c777.js');
-require('./key-c5504030.js');
+const locale = require('./locale-a615b02f.js');
+const t9n = require('./t9n-463dcbff.js');
+require('./resources-a2b1b149.js');
+require('./key-86f4a0b0.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.

package/dist/cjs/calcite-switch.cjs.entry.js

@@ -7,16 +7,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const dom = require('./dom-c9c2c835.js');
-const form = require('./form-fed676d6.js');
-const interactive = require('./interactive-3ab7044d.js');
-const key = require('./key-c5504030.js');
-const label = require('./label-32573e1d.js');
-const loadable = require('./loadable-5a794992.js');
+const index = require('./index-b53bfd7c.js');
+const dom = require('./dom-cf1e2e9f.js');
+const form = require('./form-da52e819.js');
+const interactive = require('./interactive-08e5bc95.js');
+const key = require('./key-86f4a0b0.js');
+const label = require('./label-24b05042.js');
+const loadable = require('./loadable-41446b78.js');
 require('./guid-ae73cd27.js');
-require('./resources-9447c777.js');
-require('./browser-d08a5f99.js');
+require('./resources-a2b1b149.js');
+require('./browser-fe25aefa.js');
 require('./component-ac7c3bd8.js');
 
 const switchCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .container{block-size:0.75rem}:host([scale=s]) .track{block-size:0.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:0.5rem;inline-size:0.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:0.75rem;inline-size:0.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-2);vertical-align:top;outline-color:transparent}:host(:focus) .track{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.handle{pointer-events:none;position:absolute;display:block;border-radius:9999px;border-width:2px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-block-start:-1px;inset-inline:-1px auto}:host(:hover) .handle,:host(:focus) .handle{border-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([checked]) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]) .handle{border-color:var(--calcite-color-brand);inset-inline:auto -1px}:host([checked]:hover) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]:hover) .handle{border-color:var(--calcite-color-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-brand-hover)}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";

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

@@ -0,0 +1,263 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b53bfd7c.js');
+const dom = require('./dom-cf1e2e9f.js');
+const observers = require('./observers-5923a7cc.js');
+require('./guid-ae73cd27.js');
+require('./resources-a2b1b149.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.4.0
+ */
+const CSS = {
+    container: "tab-nav",
+};
+
+const tabNavCss = ":host{position:relative;display:flex}.scale-s{min-block-size:1.5rem}.scale-m{min-block-size:2rem}.scale-l{min-block-size:2.75rem}:host([layout=center]:not([bordered])){padding-inline:1.25rem}:host([layout=center]:not([bordered])) .tab-nav ::slotted(calcite-tab-title:last-child){margin-inline-end:0px}:host(:not([bordered])) .scale-l ::slotted(calcite-tab-title){margin-inline-end:1.5rem}:host(:not([bordered])) .scale-m ::slotted(calcite-tab-title){margin-inline-end:1.25rem}:host(:not([bordered])) .scale-s ::slotted(calcite-tab-title){margin-inline-end:1rem}.tab-nav{display:flex;inline-size:100%;justify-content:flex-start;overflow:auto}.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)}:host([layout=center]) .tab-nav{justify-content:space-evenly}: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) {
+        index.registerInstance(this, hostRef);
+        this.calciteTabChange = index.createEvent(this, "calciteTabChange", 6);
+        this.calciteInternalTabChange = index.createEvent(this, "calciteInternalTabChange", 6);
+        this.animationActiveDuration = 0.3;
+        this.resizeObserver = observers.createObserver("resize", () => {
+            if (!this.activeIndicatorEl) {
+                return;
+            }
+            // remove active indicator transition duration during resize to prevent wobble
+            this.activeIndicatorEl.style.transitionDuration = "0s";
+            this.updateActiveWidth();
+            this.updateOffsetPosition();
+        });
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
+        this.handleTabFocus = (event, el, destination) => {
+            dom.focusElementInGroup(this.enabledTabTitles, el, destination);
+            event.stopPropagation();
+        };
+        this.handleContainerScroll = () => {
+            // remove active indicator transition duration while container is scrolling to prevent wobble
+            this.activeIndicatorEl.style.transitionDuration = "0s";
+            this.updateOffsetPosition();
+        };
+        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.selectedTabId = undefined;
+    }
+    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.updateOffsetPosition();
+        this.updateActiveWidth();
+        // reset the animation time on tab selection
+        this.activeIndicatorEl.style.transitionDuration = `${this.animationActiveDuration}s`;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        var _a;
+        this.parentTabsEl = this.el.closest("calcite-tabs");
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
+    }
+    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;
+        }
+    }
+    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;
+        // fix issue with active tab-title not lining up with blue indicator
+        if (this.selectedTitle) {
+            this.updateOffsetPosition();
+        }
+    }
+    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();
+    }
+    render() {
+        const dir = dom.getElementDir(this.el);
+        const width = `${this.indicatorWidth}px`;
+        const offset = `${this.indicatorOffset}px`;
+        const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
+        return (index.h(index.Host, { role: "tablist" }, index.h("div", { class: {
+                [CSS.container]: true,
+                [`scale-${this.scale}`]: true,
+                [`position-${this.position}`]: true,
+            }, onScroll: this.handleContainerScroll,
+            // 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.tabNavEl = el) }, index.h("slot", null), index.h("div", { class: "tab-nav-active-indicator-container",
+            // 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) }, index.h("div", { 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) })))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  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) {
+        this.selectedTabId = event.detail.tab
+            ? event.detail.tab
+            : this.getIndexOfTabTitle(event.target);
+        event.stopPropagation();
+    }
+    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.updateActiveWidth();
+        this.updateOffsetPosition();
+    }
+    updateOffsetPosition() {
+        var _a, _b, _c, _d, _e;
+        const dir = dom.getElementDir(this.el);
+        const navWidth = (_a = this.activeIndicatorContainerEl) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+        const tabLeft = (_b = this.selectedTitle) === null || _b === void 0 ? void 0 : _b.offsetLeft;
+        const tabWidth = (_c = this.selectedTitle) === null || _c === void 0 ? void 0 : _c.offsetWidth;
+        const offsetRight = navWidth - (tabLeft + tabWidth);
+        this.indicatorOffset =
+            dir !== "rtl" ? tabLeft - ((_d = this.tabNavEl) === null || _d === void 0 ? void 0 : _d.scrollLeft) : offsetRight + ((_e = this.tabNavEl) === null || _e === void 0 ? void 0 : _e.scrollLeft);
+    }
+    updateActiveWidth() {
+        var _a;
+        this.indicatorWidth = (_a = this.selectedTitle) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    }
+    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 dom.filterDirectChildren(this.el, "calcite-tab-title");
+    }
+    get enabledTabTitles() {
+        return dom.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.updateOffsetPosition();
+            this.updateActiveWidth();
+            tabTitles[this.selectedTabId].focus();
+        });
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "selectedTabId": ["selectedTabIdChanged"],
+        "selectedTitle": ["selectedTitleChanged"]
+    }; }
+};
+TabNav.style = tabNavCss;
+
+exports.calcite_tab_nav = TabNav;