@esri/calcite-components/dist/components/calcite-table-cell/customElement.js

Web Components for Esri's Calcite Design System.

/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
import { nothing, html } from "lit";
import { createRef, ref } from "lit-html/directives/ref.js";
import { LitElement, safeClassMap } from "@arcgis/lumina";
import { c as componentFocusable } from "../../chunks/component.js";
import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
import { g as getElementDir } from "../../chunks/dom.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
  contentCell: "content-cell",
  numberCell: "number-cell",
  footerCell: "footer-cell",
  selectionCell: "selection-cell",
  selectedCell: "selected-cell",
  assistiveText: "assistive-text",
  lastCell: "last-cell",
  staticCell: "static-cell"
};
const styles = css`:host([disabled]){cursor:default;-webkit-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:not(.selection-cell):not(.number-cell){text-align:center}:host([alignment=end]) td:not(.selection-cell):not(.number-cell){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);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:not(.static-cell){outline-color:transparent}td:not(.static-cell):focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}td.start.content-cell{vertical-align:top}td.end.content-cell{vertical-align:bottom}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{text-align:center;border-inline-end:1px solid var(--calcite-color-border-3);inline-size:2rem;min-inline-size:2rem}.selection-cell{color:var(--calcite-color-text-3);inset-inline-start:2rem}.selection-cell:not(.footer-cell){cursor:pointer}.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 .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 -.25rem 0 0 0 var(--calcite-color-brand)}.selection-cell{vertical-align:middle}.selection-cell ::slotted(calcite-icon){pointer-events:none;margin-block-start:.25rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
class TableCell extends LitElement {
  constructor() {
    super(...arguments);
    this.containerEl = createRef();
    this.messages = useT9n();
    this.contentsText = "";
    this.focused = false;
    this.selectionText = "";
    this.alignment = "start";
    this.interactionMode = "interactive";
    this.parentRowAlignment = "start";
    this.scale = "m";
  }
  static {
    this.properties = { contentsText: [16, {}, { state: true }], focused: [16, {}, { state: true }], selectionText: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], colSpan: [11, {}, { reflect: true, type: Number }], disabled: [5, {}, { type: Boolean }], interactionMode: 1, lastCell: [5, {}, { type: Boolean }], messageOverrides: [0, {}, { attribute: false }], numberCell: [5, {}, { type: Boolean }], parentRowAlignment: 1, parentRowIsSelected: [5, {}, { type: Boolean }], parentRowPositionLocalized: 1, parentRowType: 1, positionInRow: [9, {}, { type: Number }], readCellContentsToAT: [5, {}, { type: Boolean }], rowSpan: [11, {}, { reflect: true, type: Number }], scale: 1, selectionCell: [5, {}, { type: Boolean }] };
  }
  static {
    this.styles = styles;
  }
  async setFocus() {
    await componentFocusable(this);
    this.containerEl.value.focus();
  }
  async load() {
    this.updateScreenReaderContentsText();
    this.updateScreenReaderSelectionText();
  }
  willUpdate(changes) {
    if (changes.has("parentRowIsSelected")) {
      this.updateScreenReaderSelectionText();
    }
  }
  updated() {
    updateHostInteraction(this);
  }
  updateScreenReaderSelectionText() {
    const selectedText = `${this.messages?.row} ${this.parentRowPositionLocalized} ${this.messages?.selected} ${this.messages?.keyboardDeselect}`;
    const unselectedText = `${this.messages?.row} ${this.parentRowPositionLocalized} ${this.messages?.unselected} ${this.messages?.keyboardSelect}`;
    this.selectionText = this.parentRowIsSelected ? selectedText : unselectedText;
  }
  updateScreenReaderContentsText() {
    this.contentsText = this.el.textContent;
  }
  onContainerBlur() {
    this.focused = false;
  }
  onContainerFocus() {
    this.focused = true;
  }
  render() {
    const dir = getElementDir(this.el);
    const staticCell = this.disabled || this.interactionMode === "static" && (!this.selectionCell || this.selectionCell && this.parentRowType === "foot");
    return InteractiveContainer({ disabled: this.disabled, children: html`<td class=${safeClassMap({
      [CSS.footerCell]: this.parentRowType === "foot",
      [CSS.contentCell]: !this.numberCell && !this.selectionCell,
      [CSS.numberCell]: this.numberCell,
      [CSS.selectionCell]: this.selectionCell,
      [CSS.selectedCell]: this.parentRowIsSelected,
      [CSS.lastCell]: this.lastCell && (!this.rowSpan || this.colSpan && !!this.rowSpan),
      [CSS_UTILITY.rtl]: dir === "rtl",
      [CSS.staticCell]: staticCell,
      [this.parentRowAlignment]: this.parentRowAlignment === "start" || this.parentRowAlignment === "end"
    })} colSpan=${this.colSpan ?? nothing} @blur=${this.onContainerBlur} @focus=${this.onContainerFocus} .role=${this.interactionMode === "interactive" ? "gridcell" : "cell"} rowSpan=${this.rowSpan ?? nothing} .tabIndex=${staticCell ? -1 : 0} ${ref(this.containerEl)}>${(this.selectionCell || this.readCellContentsToAT) && html`<span .ariaLive=${this.focused ? "polite" : "off"} class=${safeClassMap(CSS.assistiveText)}>${this.selectionCell && this.selectionText || ""}${this.readCellContentsToAT && !this.selectionCell && this.contentsText || ""}</span>` || ""}<slot @slotchange=${this.updateScreenReaderContentsText}></slot></td>` });
  }
}
customElement("calcite-table-cell", TableCell);
export {
  TableCell
};