@esri/solutions-components 0.8.2 → 0.8.3

package/dist/solutions-components/calcite-tab-nav.entry.js

@@ -0,0 +1,259 @@
+/*!
+ * 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, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { d as focusElementInGroup, a as getElementDir, y as filterDirectChildren } from './dom-b91aa537.js';
+import { c as createObserver } from './observers-5ba39eee.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.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) {
+        registerInstance(this, hostRef);
+        this.calciteTabChange = createEvent(this, "calciteTabChange", 6);
+        this.calciteInternalTabChange = createEvent(this, "calciteInternalTabChange", 6);
+        this.animationActiveDuration = 0.3;
+        this.resizeObserver = 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) => {
+            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 = getElementDir(this.el);
+        const width = `${this.indicatorWidth}px`;
+        const offset = `${this.indicatorOffset}px`;
+        const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
+        return (h(Host, { role: "tablist" }, 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) }, h("slot", null), 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) }, 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 = 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 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.updateOffsetPosition();
+            this.updateActiveWidth();
+            tabTitles[this.selectedTabId].focus();
+        });
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "selectedTabId": ["selectedTabIdChanged"],
+        "selectedTitle": ["selectedTitleChanged"]
+    }; }
+};
+TabNav.style = tabNavCss;
+
+export { TabNav as calcite_tab_nav };

package/dist/solutions-components/calcite-tab-title.entry.js

@@ -0,0 +1,287 @@
+/*!
+ * 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, f as Build, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { t as toAriaBoolean, a as getElementDir, n as nodeListToArray } from './dom-b91aa537.js';
+import { g as guid } from './guid-b75a5f7b.js';
+import { c as connectInteractive, d as disconnectInteractive, I as InteractiveContainer, u as updateHostInteraction } from './interactive-71585ecc.js';
+import { c as createObserver } from './observers-5ba39eee.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n-b39c5433.js';
+import { g as getIconScale } from './component-edd2c3cd.js';
+import './resources-0f8db821.js';
+import './browser-b8d08bed.js';
+import './key-9a10d862.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 = {
+    closeButton: "close-button",
+    container: "container",
+    content: "content",
+    contentHasText: "content--has-text",
+    iconEnd: "icon-end",
+    iconPresent: "icon-present",
+    iconStart: "icon-start",
+    titleIcon: "calcite-tab-title--icon",
+};
+const ICONS = {
+    close: "x",
+};
+
+const tabTitleCss = ":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{display:block;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;text-align:center;flex-basis:12rem}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{margin:auto}:host([layout=center][closable]) .content{padding-inline-start:32px}:host([layout=center][bordered][closable]) .scale-s .content{padding-inline-start:36px}:host([layout=center][bordered][closable]) .scale-m .content{padding-inline-start:40px}:host([layout=center][closable]) .scale-l .content{padding-inline-start:40px}:host([layout=center][closable][bordered]) .scale-s .content{padding-inline-start:52px}:host([position=bottom]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host([closed]){display:none}.container{outline-color:transparent}:host(:focus) .container{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          )}:host(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-color-border-2);color:var(--calcite-color-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-color-text-1)}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.container{box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;border-block-end-width:2px;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end-color:transparent;border-block-end-style:solid}.content{display:flex;align-items:center;justify-content:center}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:0.5rem}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:0.5rem}.close-button{display:flex;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:calc(100% - 2px);background-color:var(--calcite-button-transparent-1);margin-inline-start:auto}.close-button:focus{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          );outline-offset:-1px}.close-button:focus,.close-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-2)}.close-button:active{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:0.5rem}:host([bordered]){margin-inline-end:0}:host([bordered][selected]){box-shadow:inset 0px -2px var(--calcite-color-foreground-1)}:host([bordered][selected][position=bottom]){box-shadow:inset 0 2px 0 var(--calcite-color-foreground-1)}:host([bordered]:hover) .container,:host([bordered]:focus) .container,:host([bordered]:active) .container{position:relative}:host([bordered]:hover) .container{background-color:var(--calcite-color-transparent-hover)}:host([closable]) .container,:host([bordered]) .container{border-inline-start:1px solid transparent;border-inline-end:1px solid transparent}:host([closable]) .container .close-button,:host([bordered]) .container .close-button{margin-inline:0}:host([closable]) .content{box-sizing:border-box;block-size:100%;border-block-end-color:transparent}:host([closable][position=bottom]) .container,:host([bordered][position=bottom]) .container{border-block-start-style:unset}:host([selected][bordered]) .container{border-inline-start-color:var(--calcite-color-border-1);border-inline-end-color:var(--calcite-color-border-1)}:host([bordered]) .content{padding-inline:0.75rem}:host([bordered]) .scale-s .content{padding-inline:0.5rem}:host([bordered]) .scale-l .content{padding-inline:1rem}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered][position=bottom]) .container{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][position=bottom][selected]) .container{border-block-start-style:none}.close-button{z-index:var(--calcite-z-index)}}:host([hidden]){display:none}[hidden]{display:none}";
+
+const TabTitle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteTabsActivate = createEvent(this, "calciteTabsActivate", 6);
+        this.calciteInternalTabsActivate = createEvent(this, "calciteInternalTabsActivate", 6);
+        this.calciteTabsClose = createEvent(this, "calciteTabsClose", 6);
+        this.calciteInternalTabsClose = createEvent(this, "calciteInternalTabsClose", 6);
+        this.calciteInternalTabsFocusNext = createEvent(this, "calciteInternalTabsFocusNext", 6);
+        this.calciteInternalTabsFocusPrevious = createEvent(this, "calciteInternalTabsFocusPrevious", 6);
+        this.calciteInternalTabsFocusFirst = createEvent(this, "calciteInternalTabsFocusFirst", 6);
+        this.calciteInternalTabsFocusLast = createEvent(this, "calciteInternalTabsFocusLast", 6);
+        this.calciteInternalTabTitleRegister = createEvent(this, "calciteInternalTabTitleRegister", 6);
+        this.calciteInternalTabIconChanged = createEvent(this, "calciteInternalTabIconChanged", 6);
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
+        this.closeClickHandler = () => {
+            this.closeTabTitleAndNotify();
+        };
+        /** watches for changing text content */
+        this.mutationObserver = createObserver("mutation", () => this.updateHasText());
+        this.resizeObserver = createObserver("resize", () => {
+            this.calciteInternalTabIconChanged.emit();
+        });
+        this.guid = `calcite-tab-title-${guid()}`;
+        this.selected = false;
+        this.closable = false;
+        this.closed = false;
+        this.disabled = false;
+        this.iconEnd = undefined;
+        this.iconFlipRtl = undefined;
+        this.iconStart = undefined;
+        this.layout = undefined;
+        this.position = "top";
+        this.scale = "m";
+        this.bordered = false;
+        this.tab = undefined;
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.controls = undefined;
+        this.defaultMessages = undefined;
+        this.effectiveLocale = undefined;
+        this.hasText = false;
+    }
+    selectedHandler() {
+        if (this.selected) {
+            this.activateTab(false);
+        }
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        connectInteractive(this);
+        connectLocalized(this);
+        connectMessages(this);
+        this.setupTextContentObserver();
+        this.parentTabNavEl = this.el.closest("calcite-tab-nav");
+        this.parentTabsEl = this.el.closest("calcite-tabs");
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        // Dispatching to body in order to be listened by other elements that are still connected to the DOM.
+        (_b = document.body) === null || _b === void 0 ? void 0 : _b.dispatchEvent(new CustomEvent("calciteTabTitleUnregister", {
+            detail: this.el,
+        }));
+        (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+        disconnectInteractive(this);
+        disconnectLocalized(this);
+        disconnectMessages(this);
+    }
+    async componentWillLoad() {
+        await setUpMessages(this);
+        if (Build.isBrowser) {
+            this.updateHasText();
+        }
+        if (this.tab && this.selected) {
+            this.activateTab(false);
+        }
+    }
+    componentWillRender() {
+        if (this.parentTabsEl) {
+            this.layout = this.parentTabsEl.layout;
+            this.bordered = this.parentTabsEl.bordered;
+        }
+    }
+    render() {
+        const { el, closed } = this;
+        const id = el.id || this.guid;
+        const iconStartEl = (h("calcite-icon", { class: { [CSS.titleIcon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+        const iconEndEl = (h("calcite-icon", { class: { [CSS.titleIcon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
+        return (h(Host, { "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { class: {
+                container: true,
+                [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd,
+                [`scale-${this.scale}`]: true,
+            }, hidden: closed,
+            // 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) => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); } }, h("div", { class: { [CSS.content]: true, [CSS.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null), this.renderCloseButton()))));
+    }
+    renderCloseButton() {
+        const { closable, messages } = this;
+        return closable ? (h("button", { "aria-label": messages.close, class: CSS.closeButton, disabled: false, key: CSS.closeButton, onClick: this.closeClickHandler, title: messages.close, type: "button",
+            // 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.closeButtonEl = el) }, h("calcite-icon", { icon: ICONS.close, scale: getIconScale(this.scale) }))) : null;
+    }
+    async componentDidLoad() {
+        this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier());
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    internalTabChangeHandler(event) {
+        const targetTabsEl = event
+            .composedPath()
+            .find((el) => el.tagName === "CALCITE-TABS");
+        if (targetTabsEl !== this.parentTabsEl) {
+            return;
+        }
+        if (this.tab) {
+            this.selected = this.tab === event.detail.tab;
+        }
+        else {
+            this.getTabIndex().then((index) => {
+                this.selected = index === event.detail.tab;
+            });
+        }
+        event.stopPropagation();
+    }
+    onClick() {
+        this.activateTab();
+    }
+    keyDownHandler(event) {
+        switch (event.key) {
+            case " ":
+            case "Enter":
+                if (!event.composedPath().includes(this.closeButtonEl)) {
+                    this.activateTab();
+                    event.preventDefault();
+                }
+                break;
+            case "ArrowRight":
+                event.preventDefault();
+                if (getElementDir(this.el) === "ltr") {
+                    this.calciteInternalTabsFocusNext.emit();
+                }
+                else {
+                    this.calciteInternalTabsFocusPrevious.emit();
+                }
+                break;
+            case "ArrowLeft":
+                event.preventDefault();
+                if (getElementDir(this.el) === "ltr") {
+                    this.calciteInternalTabsFocusPrevious.emit();
+                }
+                else {
+                    this.calciteInternalTabsFocusNext.emit();
+                }
+                break;
+            case "Home":
+                event.preventDefault();
+                this.calciteInternalTabsFocusFirst.emit();
+                break;
+            case "End":
+                event.preventDefault();
+                this.calciteInternalTabsFocusLast.emit();
+                break;
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Returns the index of the title within the `calcite-tab-nav`.
+     */
+    async getTabIndex() {
+        return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((el) => el.matches("calcite-tab-title")), this.el);
+    }
+    /**
+     * @internal
+     */
+    async getTabIdentifier() {
+        return this.tab ? this.tab : this.getTabIndex();
+    }
+    /**
+     * @param tabIds
+     * @param titleIds
+     * @internal
+     */
+    async updateAriaInfo(tabIds = [], titleIds = []) {
+        this.controls = tabIds[titleIds.indexOf(this.el.id)] || null;
+    }
+    /**
+     * This activates a tab in order for it and its associated tab-title be selected.
+     *
+     * @param userTriggered - when `true`, user-interaction events will be emitted in addition to internal events
+     * @internal
+     */
+    async activateTab(userTriggered = true) {
+        if (this.disabled || this.closed) {
+            return;
+        }
+        const payload = { tab: this.tab };
+        this.calciteInternalTabsActivate.emit(payload);
+        if (userTriggered) {
+            // emit in the next frame to let internal events sync up
+            requestAnimationFrame(() => this.calciteTabsActivate.emit());
+        }
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
+    }
+    updateHasText() {
+        this.hasText = this.el.textContent.trim().length > 0;
+    }
+    setupTextContentObserver() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    }
+    closeTabTitleAndNotify() {
+        this.closed = true;
+        this.calciteInternalTabsClose.emit({ tab: this.tab });
+        this.calciteTabsClose.emit();
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "selected": ["selectedHandler"],
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"]
+    }; }
+};
+TabTitle.style = tabTitleCss;
+
+export { TabTitle as calcite_tab_title };

package/dist/solutions-components/calcite-tab.entry.js

@@ -0,0 +1,108 @@
+/*!
+ * 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, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { n as nodeListToArray } from './dom-b91aa537.js';
+import { g as guid } from './guid-b75a5f7b.js';
+import './resources-0f8db821.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: "container",
+    content: "content",
+};
+
+const tabCss = ":host([selected]) section,:host([selected]) .container{display:block}:host{display:none;block-size:100%;inline-size:100%}:host([selected]){display:block;block-size:100%;inline-size:100%;overflow:auto}.content{box-sizing:border-box;padding-block:var(--calcite-internal-tab-content-block-padding)}.scale-s{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.25rem);font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.5rem);font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.625rem);font-size:var(--calcite-font-size-0);line-height:1.25rem}section,.container{display:none;block-size:100%;inline-size:100%}:host([hidden]){display:none}[hidden]{display:none}";
+
+const Tab = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteInternalTabRegister = createEvent(this, "calciteInternalTabRegister", 6);
+        this.guid = `calcite-tab-title-${guid()}`;
+        this.tab = undefined;
+        this.selected = false;
+        this.scale = "m";
+        this.labeledBy = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    render() {
+        const id = this.el.id || this.guid;
+        return (h(Host, { "aria-labelledby": this.labeledBy, id: id }, h("div", { class: { [CSS.container]: true, [`scale-${this.scale}`]: true }, role: "tabpanel", tabIndex: this.selected ? 0 : -1 }, h("section", { class: CSS.content }, h("slot", null)))));
+    }
+    connectedCallback() {
+        this.parentTabsEl = this.el.closest("calcite-tabs");
+    }
+    componentDidLoad() {
+        this.calciteInternalTabRegister.emit();
+    }
+    disconnectedCallback() {
+        var _a;
+        // Dispatching to body in order to be listened by other elements that are still connected to the DOM.
+        (_a = document.body) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent("calciteTabUnregister", {
+            detail: this.el,
+        }));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    internalTabChangeHandler(event) {
+        const targetTabsEl = event
+            .composedPath()
+            .find((el) => el.tagName === "CALCITE-TABS");
+        // to allow `<calcite-tabs>` to be nested we need to make sure this
+        // `calciteTabChange` event was actually fired from a within the same
+        // `<calcite-tabs>` that is the a parent of this tab.
+        if (targetTabsEl !== this.parentTabsEl) {
+            return;
+        }
+        if (this.tab) {
+            this.selected = this.tab === event.detail.tab;
+        }
+        else {
+            this.getTabIndex().then((index) => {
+                this.selected = index === event.detail.tab;
+            });
+        }
+        event.stopPropagation();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Returns the index of the component item within the tab array.
+     */
+    async getTabIndex() {
+        return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((el) => el.matches("calcite-tab")), this.el);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * @param tabIds
+     * @param titleIds
+     * @internal
+     */
+    async updateAriaInfo(tabIds = [], titleIds = []) {
+        this.labeledBy = titleIds[tabIds.indexOf(this.el.id)] || null;
+    }
+    get el() { return getElement(this); }
+};
+Tab.style = tabCss;
+
+export { Tab as calcite_tab };