@esri/calcite-components 1.7.0-next.2 → 1.7.0-next.21

package/dist/collection/components/table-row/table-row.js

@@ -0,0 +1,602 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.7.0-next.21
+ */
+import { h, Host, } from "@stencil/core";
+import { focusElementInGroup } from "../../utils/dom";
+import { isActivationKey } from "../../utils/key";
+import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";
+/**
+ * @slot - A slot for adding `calcite-table-cell` or `calcite-table-header` elements.
+ */
+export class TableRow {
+  constructor() {
+    this.rowCells = [];
+    this.emitTableRowFocusRequest = (cellPosition, rowPosition, destination, lastCell) => {
+      this.calciteInternalTableRowFocusRequest.emit({
+        cellPosition,
+        rowPosition,
+        destination,
+        lastCell,
+      });
+    };
+    this.updateCells = () => {
+      const slottedCells = this.tableRowSlotEl
+        ?.assignedElements({ flatten: true })
+        ?.filter((el) => el.matches("calcite-table-cell") || el.matches("calcite-table-header"));
+      const renderedCells = Array.from(this.tableRowEl?.querySelectorAll("calcite-table-header, calcite-table-cell"))?.filter((el) => el.numberCell || el.selectionCell);
+      const cells = renderedCells ? renderedCells.concat(slottedCells) : slottedCells;
+      if (cells.length > 0) {
+        cells?.forEach((cell, index) => {
+          cell.positionInRow = index + 1;
+          cell.parentRowType = this.rowType;
+          cell.scale = this.scale;
+          if (cell.nodeName === "CALCITE-TABLE-CELL") {
+            cell.readCellContentsToAT = this.readCellContentsToAT;
+            cell.disabled = this.disabled;
+            cell.parentRowIsSelected = this.selected;
+          }
+        });
+      }
+      this.rowCells =
+        cells || [];
+      this.cellCount = cells?.length;
+    };
+    this.handleSelectionOfRow = () => {
+      this.calciteTableRowSelect.emit();
+    };
+    this.handleKeyboardSelection = (event) => {
+      if (isActivationKey(event.key)) {
+        if (event.key === " ") {
+          event.preventDefault();
+        }
+        this.handleSelectionOfRow();
+      }
+    };
+    this.disabled = false;
+    this.selected = false;
+    this.cellCount = undefined;
+    this.rowType = undefined;
+    this.numbered = false;
+    this.positionSection = undefined;
+    this.positionSectionLocalized = undefined;
+    this.positionAll = undefined;
+    this.readCellContentsToAT = undefined;
+    this.scale = undefined;
+    this.selectionMode = "none";
+    this.selectedRowCount = undefined;
+    this.selectedRowCountLocalized = undefined;
+    this.bodyRowCount = undefined;
+    this.effectiveLocale = "";
+  }
+  handleCellChanges() {
+    if (this.tableRowEl && this.rowCells.length > 0) {
+      this.updateCells();
+    }
+  }
+  handleDelayedCellChanges() {
+    if (this.tableRowEl && this.rowCells.length > 0) {
+      requestAnimationFrame(() => this.updateCells());
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidLoad() {
+    if (this.tableRowEl && this.rowCells.length > 0) {
+      this.updateCells();
+    }
+  }
+  connectedCallback() {
+    connectInteractive(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  calciteInternalTableRowFocusChangeHandler(event) {
+    if (event.target.contains(this.el)) {
+      const position = event.detail.cellPosition;
+      const rowPosition = event.detail.rowPosition;
+      const destination = event.detail.destination;
+      const lastCell = event.detail.lastCell;
+      if (rowPosition === this.positionAll) {
+        if (this.disabled) {
+          const deflectDirection = destination === "last" ? "previous" : destination === "first" ? "next" : destination;
+          this.emitTableRowFocusRequest(position, this.positionAll, deflectDirection);
+          return;
+        }
+        const cellPosition = lastCell
+          ? this.rowCells[this.rowCells.length - 1]
+          : this.rowCells?.find((_, index) => index + 1 === position);
+        if (cellPosition) {
+          cellPosition.setFocus();
+        }
+      }
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  keyDownHandler(event) {
+    const el = event.target;
+    const key = event.key;
+    const isControl = event.ctrlKey;
+    const cells = this.rowCells;
+    if (el.matches("calcite-table-cell") || el.matches("calcite-table-header")) {
+      switch (key) {
+        case "ArrowUp":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "previous");
+          event.preventDefault();
+          break;
+        case "ArrowDown":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "next");
+          event.preventDefault();
+          break;
+        case "PageUp":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "first");
+          event.preventDefault();
+          break;
+        case "PageDown":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "last");
+          event.preventDefault();
+          break;
+        case "ArrowLeft":
+          focusElementInGroup(cells, el, "previous", false);
+          event.preventDefault();
+          break;
+        case "ArrowRight":
+          focusElementInGroup(cells, el, "next", false);
+          event.preventDefault();
+          break;
+        case "Home":
+          if (isControl) {
+            this.emitTableRowFocusRequest(1, this.positionAll, "first");
+            event.preventDefault();
+          }
+          else {
+            focusElementInGroup(cells, el, "first", false);
+            event.preventDefault();
+          }
+          break;
+        case "End":
+          if (isControl) {
+            this.emitTableRowFocusRequest(this.rowCells?.length, this.positionAll, "last", true);
+            event.preventDefault();
+          }
+          else {
+            focusElementInGroup(cells, el, "last", false);
+            event.preventDefault();
+          }
+          break;
+      }
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  renderSelectionIcon() {
+    const icon = this.selectionMode === "multiple" && this.selected
+      ? "check-square-f"
+      : this.selectionMode === "multiple"
+        ? "square"
+        : this.selected
+          ? "circle-f"
+          : "circle";
+    return h("calcite-icon", { icon: icon, scale: this.scale === "l" ? "m" : "s" });
+  }
+  renderSelectableCell() {
+    return this.rowType === "head" ? (h("calcite-table-header", { alignment: "center", bodyRowCount: this.bodyRowCount, key: "selection-head", onClick: this.selectionMode === "multiple" && this.handleSelectionOfRow, onKeyDown: this.selectionMode === "multiple" && this.handleKeyboardSelection, selectedRowCount: this.selectedRowCount, selectedRowCountLocalized: this.selectedRowCountLocalized, selectionCell: true, selectionMode: this.selectionMode })) : this.rowType === "body" ? (h("calcite-table-cell", { alignment: "center", key: "selection-body", onClick: this.handleSelectionOfRow, onKeyDown: this.handleKeyboardSelection, parentRowIsSelected: this.selected, parentRowPositionLocalized: this.positionSectionLocalized, selectionCell: true }, this.renderSelectionIcon())) : (h("calcite-table-cell", { alignment: "center", key: "selection-foot", selectionCell: true }));
+  }
+  renderNumberedCell() {
+    return this.rowType === "head" ? (h("calcite-table-header", { alignment: "center", key: "numbered-head", numberCell: true })) : this.rowType === "body" ? (h("calcite-table-cell", { alignment: "center", key: "numbered-body", numberCell: true }, this.positionSectionLocalized)) : (h("calcite-table-cell", { alignment: "center", key: "numbered-foot", numberCell: true }));
+  }
+  render() {
+    return (h(Host, null, h("tr", { "aria-disabled": this.disabled, "aria-rowindex": this.positionAll + 1, "aria-selected": this.selected, onKeyDown: (event) => this.keyDownHandler(event),
+      // 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.tableRowEl = el) }, this.numbered && this.renderNumberedCell(), this.selectionMode !== "none" && this.renderSelectableCell(), h("slot", { onSlotchange: this.updateCells, ref: (el) => (this.tableRowSlotEl = el) }))));
+  }
+  static get is() { return "calcite-table-row"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table-row.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table-row.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, the component is selected."
+        },
+        "attribute": "selected",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "cellCount": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "cell-count",
+        "reflect": false
+      },
+      "rowType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "RowType",
+          "resolved": "\"body\" | \"foot\" | \"head\"",
+          "references": {
+            "RowType": {
+              "location": "import",
+              "path": "../table/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "row-type",
+        "reflect": false
+      },
+      "numbered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "numbered",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "positionSection": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "position-section",
+        "reflect": false
+      },
+      "positionSectionLocalized": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "position-section-localized",
+        "reflect": false
+      },
+      "positionAll": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "position-all",
+        "reflect": false
+      },
+      "readCellContentsToAT": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "read-cell-contents-to-a-t",
+        "reflect": false
+      },
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "scale",
+        "reflect": false
+      },
+      "selectionMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Extract<\"multiple\" | \"single\" | \"none\", SelectionMode>",
+          "resolved": "\"multiple\" | \"none\" | \"single\"",
+          "references": {
+            "Extract": {
+              "location": "global"
+            },
+            "SelectionMode": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "selection-mode",
+        "reflect": false,
+        "defaultValue": "\"none\""
+      },
+      "selectedRowCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "selected-row-count",
+        "reflect": false
+      },
+      "selectedRowCountLocalized": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "selected-row-count-localized",
+        "reflect": false
+      },
+      "bodyRowCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "body-row-count",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "effectiveLocale": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteTableRowSelect",
+        "name": "calciteTableRowSelect",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the selected state of the component changes."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteInternalTableRowFocusRequest",
+        "name": "calciteInternalTableRowFocusRequest",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "TableRowFocusEvent",
+          "resolved": "TableRowFocusEvent",
+          "references": {
+            "TableRowFocusEvent": {
+              "location": "import",
+              "path": "../table/interfaces"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "bodyRowCount",
+        "methodName": "handleCellChanges"
+      }, {
+        "propName": "scale",
+        "methodName": "handleCellChanges"
+      }, {
+        "propName": "selected",
+        "methodName": "handleCellChanges"
+      }, {
+        "propName": "selectedRowCount",
+        "methodName": "handleCellChanges"
+      }, {
+        "propName": "numbered",
+        "methodName": "handleDelayedCellChanges"
+      }, {
+        "propName": "selectionMode",
+        "methodName": "handleDelayedCellChanges"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "calciteInternalTableRowFocusChange",
+        "method": "calciteInternalTableRowFocusChangeHandler",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/tabs/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 export const SLOTS = {
   titleGroup: "title-group",

package/dist/collection/components/tabs/tabs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { Fragment, h } from "@stencil/core";
 import { SLOTS } from "./resources";

package/dist/collection/components/text-area/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 export const CSS = {
   assistiveText: "assistive-text",

package/dist/collection/components/text-area/text-area.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { h, Host, } from "@stencil/core";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";

package/dist/collection/components/tile/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 export const SLOTS = {
   contentStart: "content-start",

package/dist/collection/components/tile/tile.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot";

package/dist/collection/components/tile-select/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 export const CSS = {
   checked: "checked",

package/dist/collection/components/tile-select/tile-select.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { h, } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/tile-select-group/tile-select-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
 import { h } from "@stencil/core";
 import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";