@esri/solutions-components 0.8.2 → 0.8.3

package/dist/esm/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/esm/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 };

package/dist/esm/calcite-table-cell.entry.js

@@ -0,0 +1,152 @@
+/*!
+ * 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, g as getElement } from './index-bdfaac50.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
+import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-b39c5433.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-71585ecc.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { a as getElementDir } from './dom-b91aa537.js';
+import { C as CSS_UTILITY } from './resources-0f8db821.js';
+import './browser-b8d08bed.js';
+import './key-9a10d862.js';
+import './observers-5ba39eee.js';
+import './guid-b75a5f7b.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 = {
+    numberCell: "number-cell",
+    footerCell: "footer-cell",
+    selectionCell: "selection-cell",
+    selectedCell: "selected-cell",
+    assistiveText: "assistive-text",
+    lastCell: "last-cell",
+};
+
+const tableCellCss = ":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{--calcite-internal-table-cell-background:var(--calcite-table-cell-background, transparent);display:contents}:host([alignment=center]) td{text-align:center}:host([alignment=end]) td{text-align:end}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}td{white-space:normal;text-align:start;vertical-align:middle;color:var(--calcite-color-text-1);outline-color:transparent;background:var(--calcite-internal-table-cell-background);font-size:var(--calcite-internal-table-cell-font-size);border-inline-end:1px solid var(--calcite-color-border-3);padding:var(--calcite-internal-table-cell-padding)}td: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          )}td.last-cell{border-inline-end:0}.number-cell{background-color:var(--calcite-color-foreground-2)}.footer-cell{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);border-block-start:1px solid var(--calcite-color-border-3)}.number-cell,.selection-cell{border-inline-end:1px solid var(--calcite-color-border-3);inline-size:2rem;min-inline-size:2rem}.selection-cell{cursor:pointer;color:var(--calcite-color-text-3);inset-inline-start:2rem}.selected-cell:not(.number-cell):not(.footer-cell){--calcite-internal-table-cell-background:var(--calcite-color-foreground-current)}.selection-cell.selected-cell{box-shadow:inset 0.25rem 0 0 0 var(--calcite-color-brand);color:var(--calcite-color-brand)}.selection-cell.selected-cell calcite-icon{color:var(--calcite-color-brand)}.calcite--rtl.selection-cell.selected-cell{box-shadow:inset -0.25rem 0 0 0 var(--calcite-color-brand)}.selection-cell{vertical-align:middle}.selection-cell ::slotted(calcite-icon){pointer-events:none;margin-block-start:0.25rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}";
+
+const TableCell = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.updateScreenReaderContentsText = () => {
+            this.contentsText = this.el.textContent;
+        };
+        this.onContainerBlur = () => {
+            this.focused = false;
+        };
+        this.onContainerFocus = () => {
+            this.focused = true;
+        };
+        this.alignment = "start";
+        this.colSpan = undefined;
+        this.rowSpan = undefined;
+        this.disabled = undefined;
+        this.lastCell = undefined;
+        this.numberCell = undefined;
+        this.parentRowIsSelected = undefined;
+        this.parentRowPositionLocalized = undefined;
+        this.parentRowType = undefined;
+        this.positionInRow = undefined;
+        this.readCellContentsToAT = undefined;
+        this.scale = "m";
+        this.selectionCell = undefined;
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.contentsText = "";
+        this.defaultMessages = undefined;
+        this.focused = false;
+        this.selectionText = "";
+        this.effectiveLocale = "";
+    }
+    onSelectedChange() {
+        this.updateScreenReaderSelectionText();
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    // --------------------------------------------------------------------------
+    async componentWillLoad() {
+        setUpLoadableComponent(this);
+        await setUpMessages(this);
+        this.updateScreenReaderContentsText();
+        this.updateScreenReaderSelectionText();
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    connectedCallback() {
+        connectLocalized(this);
+        connectMessages(this);
+        connectInteractive(this);
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    disconnectedCallback() {
+        disconnectLocalized(this);
+        disconnectMessages(this);
+        disconnectInteractive(this);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        await componentFocusable(this);
+        this.containerEl.focus();
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    updateScreenReaderSelectionText() {
+        var _a, _b, _c, _d, _e, _f;
+        const selectedText = `${(_a = this.messages) === null || _a === void 0 ? void 0 : _a.row} ${this.parentRowPositionLocalized} ${(_b = this.messages) === null || _b === void 0 ? void 0 : _b.selected} ${(_c = this.messages) === null || _c === void 0 ? void 0 : _c.keyboardDeselect}`;
+        const unselectedText = `${(_d = this.messages) === null || _d === void 0 ? void 0 : _d.row} ${this.parentRowPositionLocalized} ${(_e = this.messages) === null || _e === void 0 ? void 0 : _e.unselected} ${(_f = this.messages) === null || _f === void 0 ? void 0 : _f.keyboardSelect}`;
+        this.selectionText = this.parentRowIsSelected ? selectedText : unselectedText;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    //--------------------------------------------------------------------------
+    render() {
+        const dir = getElementDir(this.el);
+        return (h(Host, null, h(InteractiveContainer, { disabled: this.disabled }, h("td", { "aria-disabled": this.disabled, class: {
+                [CSS.footerCell]: this.parentRowType === "foot",
+                [CSS.numberCell]: this.numberCell,
+                [CSS.selectionCell]: this.selectionCell,
+                [CSS.selectedCell]: this.parentRowIsSelected,
+                [CSS.lastCell]: this.lastCell,
+                [CSS_UTILITY.rtl]: dir === "rtl",
+            }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, role: "gridcell", rowSpan: this.rowSpan, tabIndex: this.disabled ? -1 : 0,
+            // 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.containerEl = el) }, (this.selectionCell || this.readCellContentsToAT) && this.focused && (h("span", { "aria-hidden": true, "aria-live": "polite", class: CSS.assistiveText }, this.selectionCell && this.selectionText, this.readCellContentsToAT && !this.selectionCell && this.contentsText)), h("slot", { onSlotchange: this.updateScreenReaderContentsText })))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "parentRowIsSelected": ["onSelectedChange"],
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"]
+    }; }
+};
+TableCell.style = tableCellCss;
+
+export { TableCell as calcite_table_cell };