@esri/calcite-components 1.7.0-next.8 → 1.7.0

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

@@ -0,0 +1,654 @@
+/*!
+ * 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
+ */
+import { h, Host, } from "@stencil/core";
+import { setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
+import { connectLocalized, disconnectLocalized, numberStringFormatter, } from "../../utils/locale";
+import { CSS, SLOTS } from "./resources";
+import { getUserAgentString } from "../../utils/browser";
+/**
+ * @slot - A slot for adding `calcite-table-row` or nested `calcite-table` elements.
+ * @slot table-header - A slot for adding `calcite-table-row` containing `calcite-table-header` elements.
+ * @slot table-footer - A slot for adding `calcite-table-row` containing `calcite-table-cell` or `calcite-table-header` elements.
+ * @slot selection-actions - A slot for adding a `calcite-action-bar` or other components to display when `selectionMode` is not `"none"` and one or more `calcite-table-row` is selected.
+ */
+export class Table {
+  constructor() {
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.getSlottedRows = (el) => {
+      return el
+        ?.assignedElements({ flatten: true })
+        ?.filter((el) => el?.matches("calcite-table-row"));
+    };
+    this.updateRows = () => {
+      const headRows = this.getSlottedRows(this.tableHeadSlotEl) || [];
+      const bodyRows = this.getSlottedRows(this.tableBodySlotEl) || [];
+      const footRows = this.getSlottedRows(this.tableFootSlotEl) || [];
+      const allRows = [...headRows, ...bodyRows, ...footRows];
+      headRows?.forEach((row) => {
+        const position = headRows?.indexOf(row);
+        row.rowType = "head";
+        row.positionSection = position;
+        row.positionSectionLocalized = this.localizeNumber((position + 1).toString());
+      });
+      bodyRows?.forEach((row) => {
+        const position = bodyRows?.indexOf(row);
+        row.rowType = "body";
+        row.positionSection = position;
+        row.positionSectionLocalized = this.localizeNumber((position + 1).toString());
+      });
+      footRows?.forEach((row) => {
+        const position = footRows?.indexOf(row);
+        row.rowType = "foot";
+        row.positionSection = position;
+        row.positionSectionLocalized = this.localizeNumber((position + 1).toString());
+      });
+      allRows?.forEach((row) => {
+        row.selectionMode = this.selectionMode;
+        row.bodyRowCount = bodyRows?.length;
+        row.positionAll = allRows?.indexOf(row);
+        row.numbered = this.numbered;
+        row.scale = this.scale;
+        row.readCellContentsToAT = this.readCellContentsToAT;
+      });
+      const colCount = headRows[0]?.cellCount || headRows[0]?.querySelectorAll("calcite-table-header")?.length;
+      this.colCount = colCount;
+      this.headRows = headRows;
+      this.bodyRows = bodyRows;
+      this.footRows = footRows;
+      this.allRows = allRows;
+      this.updateSelectedItems();
+      this.paginateRows();
+    };
+    this.handlePaginationChange = () => {
+      const requestedItem = this.paginationEl?.startItem;
+      this.pageStartRow = requestedItem || 1;
+      this.calciteTablePageChange.emit();
+      this.updateRows();
+    };
+    this.paginateRows = () => {
+      this.bodyRows?.forEach((row) => {
+        const rowPos = row.positionSection + 1;
+        const inView = rowPos >= this.pageStartRow && rowPos < this.pageStartRow + this.pageSize;
+        row.hidden = this.pageSize > 0 && !inView && !this.footRows.includes(row);
+      });
+    };
+    this.updateSelectedItems = (emit) => {
+      const selectedItems = this.bodyRows?.filter((el) => el.selected);
+      this.selectedItems = selectedItems;
+      this.selectedCount = selectedItems?.length;
+      this.allRows?.forEach((row) => {
+        row.selectedRowCount = this.selectedCount;
+        row.selectedRowCountLocalized = this.localizeNumber(this.selectedCount);
+      });
+      if (emit) {
+        this.calciteTableSelect.emit();
+      }
+    };
+    this.handleDeselectAllRows = () => {
+      this.bodyRows?.forEach((row) => {
+        row.selected = false;
+      });
+      this.updateSelectedItems(true);
+    };
+    this.setSelectedItems = (elToMatch) => {
+      this.bodyRows?.forEach((el) => {
+        if (elToMatch?.rowType === "head") {
+          el.selected = this.selectedCount !== this.bodyRows?.length;
+        }
+        else {
+          el.selected =
+            elToMatch === el ? !el.selected : this.selectionMode === "multiple" ? el.selected : false;
+        }
+      });
+      this.updateSelectedItems(true);
+    };
+    this.localizeNumber = (value) => {
+      numberStringFormatter.numberFormatOptions = {
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        useGrouping: this.groupSeparator,
+      };
+      return numberStringFormatter.localize(value.toString());
+    };
+    this.bordered = false;
+    this.caption = undefined;
+    this.groupSeparator = false;
+    this.layout = "auto";
+    this.numbered = false;
+    this.numberingSystem = undefined;
+    this.pageSize = 0;
+    this.scale = "m";
+    this.selectionMode = "none";
+    this.zebra = false;
+    this.selectedItems = [];
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.colCount = 0;
+    this.pageStartRow = 1;
+    this.selectedCount = 0;
+    this.readCellContentsToAT = undefined;
+    this.defaultMessages = undefined;
+    this.effectiveLocale = "";
+  }
+  handleNumberedChange() {
+    this.updateRows();
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    await setUpMessages(this);
+    this.readCellContentsToAT = /safari/i.test(getUserAgentString());
+    this.updateRows();
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
+  }
+  disconnectedCallback() {
+    disconnectLocalized(this);
+    disconnectMessages(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  calciteChipSelectListener(event) {
+    if (event.composedPath().includes(this.el)) {
+      this.setSelectedItems(event.target);
+    }
+  }
+  calciteInternalTableRowFocusEvent(event) {
+    const cellPosition = event["detail"].cellPosition;
+    const rowPos = event["detail"].rowPosition;
+    const destination = event["detail"].destination;
+    const lastCell = event["detail"].lastCell;
+    const visibleBody = this.bodyRows?.filter((row) => !row.hidden);
+    const visibleAll = this.allRows?.filter((row) => !row.hidden);
+    const lastHeadRow = this.headRows[this.headRows.length - 1]?.positionAll;
+    const firstBodyRow = visibleBody[0]?.positionAll;
+    const lastBodyRow = visibleBody[visibleBody.length - 1]?.positionAll;
+    const firstFootRow = this.footRows[0]?.positionAll;
+    const lastTableRow = visibleAll[visibleAll.length - 1]?.positionAll;
+    const leavingHeader = destination === "next" && rowPos === lastHeadRow;
+    const leavingFooter = destination === "previous" && rowPos === firstFootRow;
+    const enteringHeader = destination === "previous" && rowPos === firstBodyRow;
+    const enteringFooter = destination === "next" && rowPos === lastBodyRow;
+    let rowPosition;
+    switch (destination) {
+      case "first":
+        rowPosition = 0;
+        break;
+      case "last":
+        rowPosition = lastTableRow;
+        break;
+      case "next":
+        rowPosition = leavingHeader ? firstBodyRow : enteringFooter ? firstFootRow : rowPos + 1;
+        break;
+      case "previous":
+        rowPosition = leavingFooter ? lastBodyRow : enteringHeader ? lastHeadRow : rowPos - 1;
+        break;
+    }
+    const destinationCount = this.allRows?.find((row) => row.positionAll === rowPosition)?.cellCount;
+    const adjustedPos = cellPosition > destinationCount ? destinationCount : cellPosition;
+    if (rowPosition !== undefined) {
+      this.calciteInternalTableRowFocusChange.emit({
+        cellPosition: adjustedPos,
+        rowPosition,
+        destination,
+        lastCell,
+      });
+    }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderSelectionArea() {
+    const outOfViewCount = this.selectedItems?.filter((el) => el.hidden)?.length;
+    const localizedOutOfView = this.localizeNumber(outOfViewCount?.toString());
+    const localizedSelectedCount = this.localizeNumber(this.selectedCount?.toString());
+    const selectionText = `${localizedSelectedCount} ${this.messages.selected}`;
+    const outOfView = `${localizedOutOfView} ${this.messages.hiddenSelected}`;
+    return (h("div", { class: CSS.selectionArea }, h("calcite-chip", { kind: this.selectedCount > 0 ? "brand" : "neutral", scale: this.scale, value: selectionText }, selectionText), outOfViewCount > 0 && (h("calcite-chip", { icon: "hide-empty", scale: this.scale, title: outOfView, value: outOfView }, localizedOutOfView)), this.selectedCount > 0 && (h("calcite-button", { "icon-start": "x", kind: "neutral", onClick: this.handleDeselectAllRows, round: true, scale: this.scale, title: `${this.messages.clear} ${selectionText} ${this.messages.row}` }, this.messages.clear)), h("div", { class: CSS.selectionActions }, h("slot", { name: SLOTS.selectionActions }))));
+  }
+  renderPaginationArea() {
+    return (h("div", { class: CSS.paginationArea }, h("calcite-pagination", { groupSeparator: this.groupSeparator, numberingSystem: this.numberingSystem, onCalcitePaginationChange: this.handlePaginationChange, pageSize: this.pageSize, scale: this.scale, startItem: 1, totalItems: this.bodyRows?.length,
+      // 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.paginationEl = el) })));
+  }
+  renderTHead() {
+    return (h("thead", null, h("slot", { name: SLOTS.tableHeader, onSlotchange: this.updateRows, ref: (el) => (this.tableHeadSlotEl = el) })));
+  }
+  renderTBody() {
+    return (h("tbody", null, h("slot", { onSlotchange: this.updateRows, ref: (el) => (this.tableBodySlotEl = el) })));
+  }
+  renderTFoot() {
+    return (h("tfoot", null, h("slot", { name: SLOTS.tableFooter, onSlotchange: this.updateRows, ref: (el) => (this.tableFootSlotEl = el) })));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: CSS.container }, this.selectionMode !== "none" && this.renderSelectionArea(), h("div", { class: {
+        [CSS.bordered]: this.bordered,
+        [CSS.zebra]: this.zebra,
+        [CSS.tableContainer]: true,
+      } }, h("table", { "aria-colcount": this.colCount, "aria-multiselectable": this.selectionMode === "multiple", "aria-readonly": true, "aria-rowcount": this.allRows?.length, class: { [CSS.tableFixed]: this.layout === "fixed" }, role: "grid" }, h("caption", { class: CSS.assistiveText }, this.caption), this.renderTHead(), this.renderTBody(), this.renderTFoot())), this.pageSize > 0 && this.renderPaginationArea())));
+  }
+  static get is() { return "calcite-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "bordered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, displays borders in the component."
+        },
+        "attribute": "bordered",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "caption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies an accessible title for the component."
+        },
+        "attribute": "caption",
+        "reflect": false
+      },
+      "groupSeparator": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, number values are displayed with a group separator corresponding to the language and country format."
+        },
+        "attribute": "group-separator",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TableLayout",
+          "resolved": "\"auto\" | \"fixed\"",
+          "references": {
+            "TableLayout": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the layout of the component."
+        },
+        "attribute": "layout",
+        "reflect": true,
+        "defaultValue": "\"auto\""
+      },
+      "numbered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, displays the position of the row in numeric form."
+        },
+        "attribute": "numbered",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "numberingSystem": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NumberingSystem",
+          "resolved": "\"arab\" | \"arabext\" | \"bali\" | \"beng\" | \"deva\" | \"fullwide\" | \"gujr\" | \"guru\" | \"hanidec\" | \"khmr\" | \"knda\" | \"laoo\" | \"latn\" | \"limb\" | \"mlym\" | \"mong\" | \"mymr\" | \"orya\" | \"tamldec\" | \"telu\" | \"thai\" | \"tibt\"",
+          "references": {
+            "NumberingSystem": {
+              "location": "import",
+              "path": "../../utils/locale"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the Unicode numeral system used by the component for localization."
+        },
+        "attribute": "numbering-system",
+        "reflect": true
+      },
+      "pageSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the page size of the component. When `true`, renders `calcite-pagination`"
+        },
+        "attribute": "page-size",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the size of the component."
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
+      },
+      "selectionMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Extract<\"none\" | \"multiple\" | \"single\", SelectionMode>",
+          "resolved": "\"multiple\" | \"none\" | \"single\"",
+          "references": {
+            "Extract": {
+              "location": "global"
+            },
+            "SelectionMode": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the selection mode of the component."
+        },
+        "attribute": "selection-mode",
+        "reflect": true,
+        "defaultValue": "\"none\""
+      },
+      "zebra": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, displays zebra styling in the component."
+        },
+        "attribute": "zebra",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "selectedItems": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "HTMLCalciteTableRowElement[]",
+          "resolved": "HTMLCalciteTableRowElement[]",
+          "references": {
+            "HTMLCalciteTableRowElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "readonly",
+              "text": undefined
+            }],
+          "text": "Specifies the component's selected items."
+        },
+        "defaultValue": "[]"
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "TableMessages",
+          "resolved": "{ clear: string; hiddenSelected: string; page: string; row: string; selected: string; }",
+          "references": {
+            "TableMessages": {
+              "location": "import",
+              "path": "./assets/table/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Made into a prop for testing purposes only"
+        }
+      },
+      "messageOverrides": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Partial<TableMessages>",
+          "resolved": "{ clear?: string; hiddenSelected?: string; page?: string; row?: string; selected?: string; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "TableMessages": {
+              "location": "import",
+              "path": "./assets/table/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to override individual strings used by the component."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "colCount": {},
+      "pageStartRow": {},
+      "selectedCount": {},
+      "readCellContentsToAT": {},
+      "defaultMessages": {},
+      "effectiveLocale": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteTableSelect",
+        "name": "calciteTableSelect",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits when the component's selected rows change."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteTablePageChange",
+        "name": "calciteTablePageChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits when the component's page selection changes."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteInternalTableRowFocusChange",
+        "name": "calciteInternalTableRowFocusChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "TableRowFocusEvent",
+          "resolved": "TableRowFocusEvent",
+          "references": {
+            "TableRowFocusEvent": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "groupSeparator",
+        "methodName": "handleNumberedChange"
+      }, {
+        "propName": "numbered",
+        "methodName": "handleNumberedChange"
+      }, {
+        "propName": "numberingSystem",
+        "methodName": "handleNumberedChange"
+      }, {
+        "propName": "pageSize",
+        "methodName": "handleNumberedChange"
+      }, {
+        "propName": "scale",
+        "methodName": "handleNumberedChange"
+      }, {
+        "propName": "selectionMode",
+        "methodName": "handleNumberedChange"
+      }, {
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "calciteTableRowSelect",
+        "method": "calciteChipSelectListener",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "calciteInternalTableRowFocusRequest",
+        "method": "calciteInternalTableRowFocusEvent",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/table-cell/assets/table-cell/t9n/index.d.ts

@@ -0,0 +1,7 @@
+export type TableCellMessages = {
+  keyboardDeselect: string;
+  keyboardSelect: string;
+  row: string;
+  selected: string;
+  unselected: string;
+};

package/dist/collection/components/table-cell/assets/table-cell/t9n/messages.json

@@ -0,0 +1,7 @@
+{
+  "keyboardDeselect": "Press Enter or Space to deselect row",
+  "keyboardSelect": "Press Enter or Space to select row",
+  "row": "row",
+  "selected": "selected",
+  "unselected": "unselected"
+}

package/dist/collection/components/table-cell/assets/table-cell/t9n/messages_ar.json

@@ -0,0 +1,7 @@
+{
+  "keyboardDeselect": "Press Enter or Space to deselect row",
+  "keyboardSelect": "Press Enter or Space to select row",
+  "row": "row",
+  "selected": "selected",
+  "unselected": "unselected"
+}

package/dist/collection/components/table-cell/assets/table-cell/t9n/messages_bg.json

@@ -0,0 +1,7 @@
+{
+  "keyboardDeselect": "Press Enter or Space to deselect row",
+  "keyboardSelect": "Press Enter or Space to select row",
+  "row": "row",
+  "selected": "selected",
+  "unselected": "unselected"
+}