@ukic/canary-web-components 2.0.0-canary.0

package/dist/collection/components/ic-data-table/ic-data-table.js

@@ -0,0 +1,533 @@
+import { h } from "@stencil/core";
+import unsortedIcon from "./assets/unsorted-icon.svg";
+import ascendingIcon from "./assets/ascending-icon.svg";
+import descendingIcon from "./assets/descending-icon.svg";
+export class DataTable {
+  constructor() {
+    this.SORT_ICONS = {
+      unsorted: unsortedIcon,
+      ascending: ascendingIcon,
+      descending: descendingIcon,
+    };
+    this.isObject = (value) => typeof value === "object";
+    this.notDefaultDensity = () => this.density !== "default";
+    this.getCellContent = (cell, dataType) => {
+      switch (dataType) {
+        case "element":
+          return undefined;
+        case "date":
+          return (cell instanceof Date ? cell : new Date(cell)).toLocaleDateString();
+        default:
+          return cell;
+      }
+    };
+    this.getCellAlignment = (cell, alignment) => {
+      if (this.isObject(cell) && Object.keys(cell).includes("cellAlignment")) {
+        return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
+      }
+    };
+    this.createCells = (row) => {
+      const rowValues = Object.values(row);
+      const rowKeys = Object.keys(row);
+      let rowAlignment;
+      let rowEmphasis;
+      const headerIndex = rowKeys.indexOf("header");
+      if (headerIndex > -1) {
+        rowAlignment = this.getObjectValue(rowValues[headerIndex], "rowAlignment");
+        rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
+      }
+      return rowValues.map((cell, index) => {
+        const { columnAlignment, dataType, emphasis } = this.columns[index];
+        const cellValue = (key) => this.getObjectValue(cell, key);
+        return rowKeys[index] === "header" ? (h("th", { scope: "row", colSpan: cellValue("colspan"), class: {
+            ["row-header"]: true,
+            [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
+            ["row-header-sticky"]: this.stickyRowHeaders,
+          } }, cellValue("title"))) : (h("td", { innerHTML: dataType === "element" ? cell : null, class: {
+            ["table-cell"]: true,
+            [`table-density-${this.density}`]: this.notDefaultDensity(),
+            [`data-type-${dataType}`]: true,
+            [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
+              this.getCellAlignment(cell, "horizontal")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
+              !!this.getCellAlignment(cell, "horizontal"),
+            [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
+              rowAlignment ||
+              this.getCellAlignment(cell, "vertical")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
+              !!rowAlignment ||
+              !!this.getCellAlignment(cell, "vertical"),
+          } }, h("ic-typography", { variant: "body", class: {
+            [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
+              emphasis ||
+              rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
+              !!emphasis ||
+              !!rowEmphasis,
+            [`text-${this.density}`]: this.notDefaultDensity(),
+          } }, this.isObject(cell) && dataType !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, dataType)))));
+      });
+    };
+    this.createColumnHeaders = () => {
+      return this.columns.map(({ cellAlignment, colspan, key, title }) => (h("th", { scope: "col", class: {
+          ["column-header"]: true,
+          [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
+          [`table-density-${this.density}`]: this.notDefaultDensity(),
+        }, colSpan: colspan }, this.sortable ? (h("div", { class: "column-header-inner-container" }, h("ic-typography", { variant: "body", class: {
+          ["column-header-text"]: true,
+          [`text-${this.density}`]: this.notDefaultDensity(),
+        } }, title), h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
+          ? this.sortedColumnOrder
+          : "unsorted"], class: {
+          ["sort-button"]: true,
+          ["sort-button-unsorted"]: this.sortedColumn !== key ||
+            this.sortedColumnOrder === "unsorted",
+        } }))) : (h("ic-typography", { variant: "body", class: {
+          ["column-header-text"]: true,
+          [`text-${this.density}`]: this.notDefaultDensity(),
+        } }, title)))));
+    };
+    this.createRows = () => {
+      const data = this.showPagination
+        ? this.data.slice(this.fromRow, this.toRow)
+        : this.data.slice();
+      return data
+        .sort(!this.sortable ? undefined : this.getSortFunction())
+        .map((row) => (h("tr", { onClick: () => (this.selectedRow = this.selectedRow !== row && row), class: {
+          ["table-row"]: true,
+          ["table-row-selected"]: this.selectedRow === row,
+        } }, this.createCells(row))));
+    };
+    this.getObjectValue = (cell, key) => {
+      return Object.values(cell)[Object.keys(cell).indexOf(key)];
+    };
+    this.getSortButtonLabel = (key) => {
+      let label = "";
+      const getNextSortOption = (option) => {
+        const sortOrders = this.sortOptions.sortOrders;
+        return sortOrders[(sortOrders.indexOf(option) + 1) % sortOrders.length];
+      };
+      if (this.sortedColumn === key) {
+        const sortOption = getNextSortOption(this.sortedColumnOrder);
+        label = sortOption !== "unsorted" ? `Sort ${sortOption}` : "Remove sort";
+      }
+      else {
+        label = `Sort ${getNextSortOption("unsorted")}`;
+      }
+      return label;
+    };
+    this.getComparison = (targetRow, comparisonRow) => {
+      const targetRowValue = targetRow[this.sortedColumn];
+      const comparisonRowValue = comparisonRow[this.sortedColumn];
+      return this.columns.find((col) => col.key === this.sortedColumn)
+        .dataType === "date"
+        ? new Date(targetRowValue).valueOf() -
+          new Date(comparisonRowValue).valueOf()
+        : String(this.isObject(targetRowValue)
+          ? Object.values(targetRowValue)[0]
+          : targetRowValue).localeCompare(String(this.isObject(comparisonRowValue)
+          ? Object.values(comparisonRowValue)[0]
+          : comparisonRowValue), undefined, { numeric: true, sensitivity: "base" });
+    };
+    this.getSortFunction = () => {
+      switch (this.sortedColumnOrder) {
+        case "ascending":
+          return (a, b) => this.getComparison(a, b);
+        case "descending":
+          return (a, b) => this.getComparison(b, a);
+        default:
+          return undefined;
+      }
+    };
+    this.sortRows = (column) => {
+      const sortButton = this.el.shadowRoot.querySelector(`#sort-button-${column}`);
+      const sortOrders = this.sortOptions.sortOrders;
+      if (column !== this.sortedColumn) {
+        if (this.sortedColumn) {
+          const previousSortedButton = this.el.shadowRoot.querySelector(`#sort-button-${this.sortedColumn}`);
+          previousSortedButton.updateAriaLabel(this.getSortButtonLabel(column)); // Passing through unsorted column returns correct label for newly unsorted column
+        }
+        this.sortedColumn = column;
+        this.sortedColumnOrder = "unsorted";
+      }
+      let nextSortOrderIndex = sortOrders.indexOf(this.sortedColumnOrder) + 1;
+      if (nextSortOrderIndex > sortOrders.length - 1) {
+        nextSortOrderIndex = 0;
+      }
+      this.sortedColumnOrder = sortOrders[nextSortOrderIndex];
+      sortButton.updateAriaLabel(this.getSortButtonLabel(column));
+    };
+    this.updateScrollOffset = () => {
+      this.scrollOffset = this.el.shadowRoot.querySelector(".table-row-container").scrollTop;
+    };
+    this.fromRow = 0;
+    this.previousRowsPerPage = undefined;
+    this.rowsPerPage = undefined;
+    this.scrollable = false;
+    this.scrollOffset = 0;
+    this.selectedRow = undefined;
+    this.sortedColumn = undefined;
+    this.sortedColumnOrder = undefined;
+    this.toRow = undefined;
+    this.caption = undefined;
+    this.columns = undefined;
+    this.data = undefined;
+    this.density = "default";
+    this.embedded = false;
+    this.hideColumnHeaders = false;
+    this.paginationOptions = {
+      itemsPerPage: [
+        { label: "10", value: "10" },
+        { label: "25", value: "25" },
+        { label: "50", value: "50" },
+      ],
+      type: "page",
+      control: "simple",
+      itemsPerPageControl: true,
+      goToPageControl: true,
+      alignment: "right",
+    };
+    this.showPagination = false;
+    this.sortable = false;
+    this.sortOptions = {
+      sortOrders: ["unsorted", "ascending", "descending"],
+      defaultColumn: "",
+    };
+    this.stickyColumnHeaders = false;
+    this.stickyRowHeaders = false;
+  }
+  componentWillLoad() {
+    this.rowsPerPage = Number(this.paginationOptions.itemsPerPage[0].value);
+    this.previousRowsPerPage = this.rowsPerPage;
+    this.toRow = this.rowsPerPage;
+    this.sortedColumn = this.sortOptions.defaultColumn;
+    this.sortedColumnOrder = this.sortOptions.sortOrders[0];
+  }
+  componentDidLoad() {
+    const tableElement = this.el.shadowRoot.querySelector("table");
+    const tableContainer = this.el.shadowRoot.querySelector(".table-container");
+    if ((tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientHeight) ||
+      (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientWidth) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientWidth)) {
+      this.scrollable = true;
+    }
+  }
+  handleItemsPerPageChange(ev) {
+    this.previousRowsPerPage = this.rowsPerPage;
+    this.rowsPerPage = ev.detail.value;
+  }
+  handlePageChange(ev) {
+    this.fromRow = (ev.detail.value - 1) * this.rowsPerPage;
+    this.toRow = this.fromRow + this.rowsPerPage;
+    const tableRowsContainer = this.el.shadowRoot.querySelector(".table-row-container");
+    if (this.previousRowsPerPage === this.rowsPerPage) {
+      tableRowsContainer.scrollTop = 0;
+    }
+    else if (this.previousRowsPerPage < this.rowsPerPage) {
+      tableRowsContainer.scrollTop = this.scrollOffset;
+      this.previousRowsPerPage = this.rowsPerPage;
+    }
+    else {
+      this.previousRowsPerPage = this.rowsPerPage;
+    }
+  }
+  clickListener(ev) {
+    if (ev.target !== this.el)
+      this.selectedRow = undefined;
+  }
+  render() {
+    const { caption, createColumnHeaders, createRows, data, hideColumnHeaders, paginationOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, } = this;
+    return (h("div", { class: "table-container" }, h("div", { class: {
+        ["table-row-container"]: true,
+        scrollable,
+      }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, h("table", null, h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { class: {
+        ["column-header-sticky"]: stickyColumnHeaders,
+        ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
+      } }, h("tr", null, createColumnHeaders()))), (data === null || data === void 0 ? void 0 : data.length) > 0 && h("tbody", null, createRows()))), showPagination && (h("div", { class: "pagination-container" }, h("ic-pagination-bar", { totalItems: data.length, paginationType: paginationOptions.type, paginationControl: paginationOptions.control, showItemsPerPageControl: paginationOptions.itemsPerPageControl, showGoToPageControl: paginationOptions.goToPageControl, itemsPerPageOptions: paginationOptions.itemsPerPage, alignment: paginationOptions.alignment }))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+      ? `${sortedColumn} sorted ${sortedColumnOrder}`
+      : "table unsorted"))));
+  }
+  static get is() { return "ic-unstable-data-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-data-table.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-data-table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "caption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title for the table only visible to screen readers."
+        },
+        "attribute": "caption",
+        "reflect": false
+      },
+      "columns": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IcDataTableColumnObject[]",
+          "resolved": "IcDataTableColumnObject[]",
+          "references": {
+            "IcDataTableColumnObject": {
+              "location": "import",
+              "path": "./ic-data-table.types"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The column headers for the table."
+        }
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ [key: string]: any }[]",
+          "resolved": "{ [key: string]: any; }[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The row content for the table."
+        }
+      },
+      "density": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcDataTableDensityOptions",
+          "resolved": "\"default\" | \"dense\" | \"spacious\"",
+          "references": {
+            "IcDataTableDensityOptions": {
+              "location": "import",
+              "path": "./ic-data-table.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set the density of the table including font and padding."
+        },
+        "attribute": "density",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "embedded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Applies a border to the table container."
+        },
+        "attribute": "embedded",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hideColumnHeaders": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, column headers will not be visible."
+        },
+        "attribute": "hide-column-headers",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "paginationOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{\n    itemsPerPage?: { label: string; value: string }[];\n    type?: IcPaginationTypes;\n    control?: IcPaginationControlTypes;\n    itemsPerPageControl?: boolean;\n    goToPageControl?: boolean;\n    alignment?: IcPaginationAlignmentOptions;\n  }",
+          "resolved": "{ itemsPerPage?: { label: string; value: string; }[]; type?: IcPaginationTypes; control?: IcPaginationControlTypes; itemsPerPageControl?: boolean; goToPageControl?: boolean; alignment?: IcPaginationAlignmentOptions; }",
+          "references": {
+            "IcPaginationTypes": {
+              "location": "import",
+              "path": "../ic-pagination/ic-pagination.types"
+            },
+            "IcPaginationControlTypes": {
+              "location": "import",
+              "path": "../ic-pagination/ic-pagination.types"
+            },
+            "IcPaginationAlignmentOptions": {
+              "location": "import",
+              "path": "../ic-pagination/ic-pagination.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Sets the props for the pagination bar."
+        },
+        "defaultValue": "{\n    itemsPerPage: [\n      { label: \"10\", value: \"10\" },\n      { label: \"25\", value: \"25\" },\n      { label: \"50\", value: \"50\" },\n    ],\n    type: \"page\",\n    control: \"simple\",\n    itemsPerPageControl: true,\n    goToPageControl: true,\n    alignment: \"right\",\n  }"
+      },
+      "showPagination": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, adds a pagination bar to the bottom of the table."
+        },
+        "attribute": "show-pagination",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "sortable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, allows table columns to be sorted using applied sort buttons."
+        },
+        "attribute": "sortable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "sortOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{\n    sortOrders: IcDataTableSortOrderOptions[];\n    defaultColumn?: string;\n  }",
+          "resolved": "{ sortOrders: IcDataTableSortOrderOptions[]; defaultColumn?: string; }",
+          "references": {
+            "IcDataTableSortOrderOptions": {
+              "location": "import",
+              "path": "./ic-data-table.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Sets the order columns will be sorted in and allows for 'default' sorts to be added."
+        },
+        "defaultValue": "{\n    sortOrders: [\"unsorted\", \"ascending\", \"descending\"],\n    defaultColumn: \"\",\n  }"
+      },
+      "stickyColumnHeaders": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, column headers will remain at the top of the table when scrolling vertically."
+        },
+        "attribute": "sticky-column-headers",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "stickyRowHeaders": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, row headers will remain to the left when scrolling horizontally."
+        },
+        "attribute": "sticky-row-headers",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "fromRow": {},
+      "previousRowsPerPage": {},
+      "rowsPerPage": {},
+      "scrollable": {},
+      "scrollOffset": {},
+      "selectedRow": {},
+      "sortedColumn": {},
+      "sortedColumnOrder": {},
+      "toRow": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "icItemsPerPageChange",
+        "method": "handleItemsPerPageChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "icPageChange",
+        "method": "handlePageChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "clickListener",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=ic-data-table.js.map

package/dist/collection/components/ic-data-table/ic-data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-table.js","sourceRoot":"","sources":["../../../src/components/ic-data-table/ic-data-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Listen } from \"@stencil/core\";\nimport unsortedIcon from \"./assets/unsorted-icon.svg\";\nimport ascendingIcon from \"./assets/ascending-icon.svg\";\nimport descendingIcon from \"./assets/descending-icon.svg\";\nimport {\n  IcDataTableColumnDataTypes,\n  IcDataTableColumnObject,\n  IcDataTableDensityOptions,\n  IcDataTableSortOrderOptions,\n} from \"./ic-data-table.types\";\nimport {\n  IcPaginationAlignmentOptions,\n  IcPaginationControlTypes,\n  IcPaginationTypes,\n} from \"../ic-pagination/ic-pagination.types\";\n\n@Component({\n  tag: \"ic-unstable-data-table\",\n  styleUrl: \"ic-data-table.css\",\n  shadow: true,\n})\nexport class DataTable {\n  private SORT_ICONS = {\n    unsorted: unsortedIcon,\n    ascending: ascendingIcon,\n    descending: descendingIcon,\n  };\n\n  @Element() el: HTMLIcUnstableDataTableElement;\n\n  @State() fromRow: number = 0;\n\n  @State() previousRowsPerPage: number;\n\n  @State() rowsPerPage: number;\n\n  @State() scrollable: boolean = false;\n\n  @State() scrollOffset: number = 0;\n\n  @State() selectedRow: object;\n\n  @State() sortedColumn: string;\n\n  @State() sortedColumnOrder: IcDataTableSortOrderOptions;\n\n  @State() toRow: number;\n\n  /**\n   * The title for the table only visible to screen readers.\n   */\n  @Prop() caption!: string;\n\n  /**\n   * The column headers for the table.\n   */\n  @Prop() columns!: IcDataTableColumnObject[];\n\n  /**\n   * The row content for the table.\n   */\n  @Prop() data: { [key: string]: any }[];\n\n  /**\n   * Set the density of the table including font and padding.\n   */\n  @Prop() density?: IcDataTableDensityOptions = \"default\";\n\n  /**\n   * Applies a border to the table container.\n   */\n  @Prop() embedded?: boolean = false;\n\n  /**\n   * If `true`, column headers will not be visible.\n   */\n  @Prop() hideColumnHeaders?: boolean = false;\n\n  /**\n   * Sets the props for the pagination bar.\n   */\n  @Prop() paginationOptions?: {\n    itemsPerPage?: { label: string; value: string }[];\n    type?: IcPaginationTypes;\n    control?: IcPaginationControlTypes;\n    itemsPerPageControl?: boolean;\n    goToPageControl?: boolean;\n    alignment?: IcPaginationAlignmentOptions;\n  } = {\n    itemsPerPage: [\n      { label: \"10\", value: \"10\" },\n      { label: \"25\", value: \"25\" },\n      { label: \"50\", value: \"50\" },\n    ],\n    type: \"page\",\n    control: \"simple\",\n    itemsPerPageControl: true,\n    goToPageControl: true,\n    alignment: \"right\",\n  };\n\n  /**\n   * If `true`, adds a pagination bar to the bottom of the table.\n   */\n  @Prop() showPagination?: boolean = false;\n\n  /**\n   * If `true`, allows table columns to be sorted using applied sort buttons.\n   */\n  @Prop() sortable?: boolean = false;\n\n  /**\n   * Sets the order columns will be sorted in and allows for 'default' sorts to be added.\n   */\n  @Prop() sortOptions?: {\n    sortOrders: IcDataTableSortOrderOptions[];\n    defaultColumn?: string;\n  } = {\n    sortOrders: [\"unsorted\", \"ascending\", \"descending\"],\n    defaultColumn: \"\",\n  };\n\n  /**\n   * If `true`, column headers will remain at the top of the table when scrolling vertically.\n   */\n  @Prop() stickyColumnHeaders?: boolean = false;\n\n  /**\n   * If `true`, row headers will remain to the left when scrolling horizontally.\n   */\n  @Prop() stickyRowHeaders?: boolean = false;\n\n  componentWillLoad(): void {\n    this.rowsPerPage = Number(this.paginationOptions.itemsPerPage[0].value);\n    this.previousRowsPerPage = this.rowsPerPage;\n    this.toRow = this.rowsPerPage;\n    this.sortedColumn = this.sortOptions.defaultColumn;\n    this.sortedColumnOrder = this.sortOptions.sortOrders[0];\n  }\n\n  componentDidLoad(): void {\n    const tableElement = this.el.shadowRoot.querySelector(\"table\");\n    const tableContainer = this.el.shadowRoot.querySelector(\".table-container\");\n    if (\n      tableElement?.clientHeight > tableContainer?.clientHeight ||\n      tableElement?.clientWidth > tableContainer?.clientWidth\n    ) {\n      this.scrollable = true;\n    }\n  }\n\n  @Listen(\"icItemsPerPageChange\")\n  handleItemsPerPageChange(ev: CustomEvent): void {\n    this.previousRowsPerPage = this.rowsPerPage;\n    this.rowsPerPage = ev.detail.value;\n  }\n\n  @Listen(\"icPageChange\")\n  handlePageChange(ev: CustomEvent): void {\n    this.fromRow = (ev.detail.value - 1) * this.rowsPerPage;\n    this.toRow = this.fromRow + this.rowsPerPage;\n    const tableRowsContainer = this.el.shadowRoot.querySelector(\n      \".table-row-container\"\n    );\n    if (this.previousRowsPerPage === this.rowsPerPage) {\n      tableRowsContainer.scrollTop = 0;\n    } else if (this.previousRowsPerPage < this.rowsPerPage) {\n      tableRowsContainer.scrollTop = this.scrollOffset;\n      this.previousRowsPerPage = this.rowsPerPage;\n    } else {\n      this.previousRowsPerPage = this.rowsPerPage;\n    }\n  }\n\n  @Listen(\"click\", { target: \"window\" })\n  clickListener(ev: MouseEvent): void {\n    if (ev.target !== this.el) this.selectedRow = undefined;\n  }\n\n  private isObject = (value: any) => typeof value === \"object\";\n\n  private notDefaultDensity = () => this.density !== \"default\";\n\n  private getCellContent = (\n    cell: any,\n    dataType: IcDataTableColumnDataTypes\n  ): any => {\n    switch (dataType) {\n      case \"element\":\n        return undefined;\n      case \"date\":\n        return (\n          cell instanceof Date ? cell : new Date(cell)\n        ).toLocaleDateString();\n      default:\n        return cell;\n    }\n  };\n\n  private getCellAlignment = (\n    cell: any,\n    alignment: \"horizontal\" | \"vertical\"\n  ) => {\n    if (this.isObject(cell) && Object.keys(cell).includes(\"cellAlignment\")) {\n      return this.getObjectValue(\n        this.getObjectValue(cell, \"cellAlignment\"),\n        alignment\n      );\n    }\n  };\n\n  private createCells = (row: object) => {\n    const rowValues = Object.values(row);\n    const rowKeys = Object.keys(row);\n    let rowAlignment: string;\n    let rowEmphasis: string;\n    const headerIndex = rowKeys.indexOf(\"header\");\n    if (headerIndex > -1) {\n      rowAlignment = this.getObjectValue(\n        rowValues[headerIndex],\n        \"rowAlignment\"\n      );\n      rowEmphasis = this.getObjectValue(rowValues[headerIndex], \"emphasis\");\n    }\n    return rowValues.map((cell, index) => {\n      const { columnAlignment, dataType, emphasis } = this.columns[index];\n      const cellValue = (key: string) => this.getObjectValue(cell, key);\n\n      return rowKeys[index] === \"header\" ? (\n        <th\n          scope=\"row\"\n          colSpan={cellValue(\"colspan\")}\n          class={{\n            [\"row-header\"]: true,\n            [`row-header-alignment-${cellValue(\"cellAlignment\")}`]:\n              !!cellValue(\"cellAlignment\"),\n            [\"row-header-sticky\"]: this.stickyRowHeaders,\n          }}\n        >\n          {cellValue(\"title\")}\n        </th>\n      ) : (\n        <td\n          innerHTML={dataType === \"element\" ? (cell as string) : null}\n          class={{\n            [\"table-cell\"]: true,\n            [`table-density-${this.density}`]: this.notDefaultDensity(),\n            [`data-type-${dataType}`]: true,\n            [`cell-alignment-${\n              columnAlignment?.horizontal ||\n              this.getCellAlignment(cell, \"horizontal\")\n            }`]:\n              !!columnAlignment?.horizontal ||\n              !!this.getCellAlignment(cell, \"horizontal\"),\n            [`cell-alignment-${\n              columnAlignment?.vertical ||\n              rowAlignment ||\n              this.getCellAlignment(cell, \"vertical\")\n            }`]:\n              !!columnAlignment?.vertical ||\n              !!rowAlignment ||\n              !!this.getCellAlignment(cell, \"vertical\"),\n          }}\n        >\n          <ic-typography\n            variant=\"body\"\n            class={{\n              [`cell-emphasis-${\n                (this.isObject(cell) && cellValue(\"emphasis\")) ||\n                emphasis ||\n                rowEmphasis\n              }`]:\n                (this.isObject(cell) && !!cellValue(\"emphasis\")) ||\n                !!emphasis ||\n                !!rowEmphasis,\n              [`text-${this.density}`]: this.notDefaultDensity(),\n            }}\n          >\n            {this.isObject(cell) && dataType !== \"date\" ? (\n              Object.keys(cell).includes(\"href\") ? (\n                <ic-link href={cellValue(\"href\")}>{cellValue(\"data\")}</ic-link>\n              ) : (\n                cellValue(\"data\")\n              )\n            ) : (\n              this.getCellContent(cell, dataType)\n            )}\n          </ic-typography>\n        </td>\n      );\n    });\n  };\n\n  private createColumnHeaders = () => {\n    return this.columns.map(({ cellAlignment, colspan, key, title }) => (\n      <th\n        scope=\"col\"\n        class={{\n          [\"column-header\"]: true,\n          [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,\n          [`table-density-${this.density}`]: this.notDefaultDensity(),\n        }}\n        colSpan={colspan}\n      >\n        {this.sortable ? (\n          <div class=\"column-header-inner-container\">\n            <ic-typography\n              variant=\"body\"\n              class={{\n                [\"column-header-text\"]: true,\n                [`text-${this.density}`]: this.notDefaultDensity(),\n              }}\n            >\n              {title}\n            </ic-typography>\n            <ic-button\n              variant=\"icon\"\n              id={`sort-button-${key}`}\n              aria-label={this.getSortButtonLabel(key)}\n              // eslint-disable-next-line react/jsx-no-bind\n              onClick={() => this.sortRows(key)}\n              innerHTML={\n                this.SORT_ICONS[\n                  this.sortedColumn === key\n                    ? this.sortedColumnOrder\n                    : \"unsorted\"\n                ]\n              }\n              class={{\n                [\"sort-button\"]: true,\n                [\"sort-button-unsorted\"]:\n                  this.sortedColumn !== key ||\n                  this.sortedColumnOrder === \"unsorted\",\n              }}\n            ></ic-button>\n          </div>\n        ) : (\n          <ic-typography\n            variant=\"body\"\n            class={{\n              [\"column-header-text\"]: true,\n              [`text-${this.density}`]: this.notDefaultDensity(),\n            }}\n          >\n            {title}\n          </ic-typography>\n        )}\n      </th>\n    ));\n  };\n\n  private createRows = () => {\n    const data = this.showPagination\n      ? this.data.slice(this.fromRow, this.toRow)\n      : this.data.slice();\n    return data\n      .sort(!this.sortable ? undefined : this.getSortFunction())\n      .map((row) => (\n        <tr\n          onClick={() => (this.selectedRow = this.selectedRow !== row && row)}\n          class={{\n            [\"table-row\"]: true,\n            [\"table-row-selected\"]: this.selectedRow === row,\n          }}\n        >\n          {this.createCells(row)}\n        </tr>\n      ));\n  };\n\n  private getObjectValue = (cell: object, key: string) => {\n    return Object.values(cell)[Object.keys(cell).indexOf(key)];\n  };\n\n  private getSortButtonLabel = (key: string) => {\n    let label = \"\";\n    const getNextSortOption = (option: IcDataTableSortOrderOptions) => {\n      const sortOrders = this.sortOptions.sortOrders;\n      return sortOrders[(sortOrders.indexOf(option) + 1) % sortOrders.length];\n    };\n\n    if (this.sortedColumn === key) {\n      const sortOption = getNextSortOption(this.sortedColumnOrder);\n      label = sortOption !== \"unsorted\" ? `Sort ${sortOption}` : \"Remove sort\";\n    } else {\n      label = `Sort ${getNextSortOption(\"unsorted\")}`;\n    }\n\n    return label;\n  };\n\n  private getComparison = (targetRow: any, comparisonRow: any): number => {\n    const targetRowValue = targetRow[this.sortedColumn];\n    const comparisonRowValue = comparisonRow[this.sortedColumn];\n    return this.columns.find((col) => col.key === this.sortedColumn)\n      .dataType === \"date\"\n      ? new Date(targetRowValue).valueOf() -\n          new Date(comparisonRowValue).valueOf()\n      : String(\n          this.isObject(targetRowValue)\n            ? Object.values(targetRowValue)[0]\n            : targetRowValue\n        ).localeCompare(\n          String(\n            this.isObject(comparisonRowValue)\n              ? Object.values(comparisonRowValue)[0]\n              : comparisonRowValue\n          ),\n          undefined,\n          { numeric: true, sensitivity: \"base\" }\n        );\n  };\n\n  private getSortFunction = () => {\n    switch (this.sortedColumnOrder) {\n      case \"ascending\":\n        return (a: any, b: any) => this.getComparison(a, b);\n      case \"descending\":\n        return (a: any, b: any) => this.getComparison(b, a);\n      default:\n        return undefined;\n    }\n  };\n\n  private sortRows = (column: string) => {\n    const sortButton = this.el.shadowRoot.querySelector(\n      `#sort-button-${column}`\n    ) as HTMLIcButtonElement;\n\n    const sortOrders = this.sortOptions.sortOrders;\n\n    if (column !== this.sortedColumn) {\n      if (this.sortedColumn) {\n        const previousSortedButton = this.el.shadowRoot.querySelector(\n          `#sort-button-${this.sortedColumn}`\n        ) as HTMLIcButtonElement;\n        previousSortedButton.updateAriaLabel(this.getSortButtonLabel(column)); // Passing through unsorted column returns correct label for newly unsorted column\n      }\n      this.sortedColumn = column;\n      this.sortedColumnOrder = \"unsorted\";\n    }\n\n    let nextSortOrderIndex = sortOrders.indexOf(this.sortedColumnOrder) + 1;\n\n    if (nextSortOrderIndex > sortOrders.length - 1) {\n      nextSortOrderIndex = 0;\n    }\n\n    this.sortedColumnOrder = sortOrders[nextSortOrderIndex];\n\n    sortButton.updateAriaLabel(this.getSortButtonLabel(column));\n  };\n\n  private updateScrollOffset = () => {\n    this.scrollOffset = this.el.shadowRoot.querySelector(\n      \".table-row-container\"\n    ).scrollTop;\n  };\n\n  render() {\n    const {\n      caption,\n      createColumnHeaders,\n      createRows,\n      data,\n      hideColumnHeaders,\n      paginationOptions,\n      scrollable,\n      scrollOffset,\n      showPagination,\n      sortable,\n      sortedColumnOrder,\n      sortedColumn,\n      stickyColumnHeaders,\n      updateScrollOffset,\n    } = this;\n\n    return (\n      <div class=\"table-container\">\n        <div\n          class={{\n            [\"table-row-container\"]: true,\n            scrollable,\n          }}\n          tabIndex={scrollable ? 0 : null}\n          onScroll={updateScrollOffset}\n        >\n          <table>\n            <caption class=\"table-caption\">{caption}</caption>\n            {!hideColumnHeaders && (\n              <thead\n                class={{\n                  [\"column-header-sticky\"]: stickyColumnHeaders,\n                  [\"column-header-overlay\"]:\n                    stickyColumnHeaders && scrollOffset !== 0,\n                }}\n              >\n                <tr>{createColumnHeaders()}</tr>\n              </thead>\n            )}\n            {data?.length > 0 && <tbody>{createRows()}</tbody>}\n          </table>\n        </div>\n        {showPagination && (\n          <div class=\"pagination-container\">\n            <ic-pagination-bar\n              totalItems={data.length}\n              paginationType={paginationOptions.type}\n              paginationControl={paginationOptions.control}\n              showItemsPerPageControl={paginationOptions.itemsPerPageControl}\n              showGoToPageControl={paginationOptions.goToPageControl}\n              itemsPerPageOptions={paginationOptions.itemsPerPage}\n              alignment={paginationOptions.alignment}\n            ></ic-pagination-bar>\n          </div>\n        )}\n        {sortable && (\n          <div class=\"screen-reader-sort-text\" aria-live=\"polite\">\n            {sortedColumnOrder !== \"unsorted\" && sortedColumn\n              ? `${sortedColumn} sorted ${sortedColumnOrder}`\n              : \"table unsorted\"}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-data-table/ic-data-table.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ic-data-table.types.js.map

package/dist/collection/components/ic-data-table/ic-data-table.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-table.types.js","sourceRoot":"","sources":["../../../src/components/ic-data-table/ic-data-table.types.tsx"],"names":[],"mappings":"","sourcesContent":["export type IcDataTableSortOrderOptions =\n  | \"unsorted\"\n  | \"ascending\"\n  | \"descending\";\n\nexport type IcDataTableDensityOptions = \"default\" | \"dense\" | \"spacious\";\n\nexport type IcDataTableColumnDataTypes =\n  | \"string\"\n  | \"number\"\n  | \"address\"\n  | \"element\"\n  | \"date\";\n\nexport type IcDataTableColumnObject = {\n  key: string;\n  title: string;\n  dataType: IcDataTableColumnDataTypes;\n  columnAlignment?: {\n    horizontal?: string;\n    vertical?: string;\n  };\n  cellAlignment?: string;\n  emphasis?: string;\n  colspan?: number;\n};\n"]}

package/dist/collection/components/ic-data-table/test/a11y/ic-data-table.test.a11y.js

@@ -0,0 +1,28 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+describe("ic-unstable-data-table", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture(`<ic-unstable-data-table></ic-unstable-data-table>
+      <script>
+        var dataTable = document.querySelector('ic-unstable-data-table');
+        dataTable.columns = [
+            {key: "name", title: "Name", dataType: "string"},
+            {key: "age", title: "Age", dataType: "number"},
+            {key: "department", title: "Department", dataType: "string"},
+            {key: "employeeNumber", title: "Employee number", dataType: "number"}
+        ];
+        dataTable.data = [
+            {name: "John Smith", age: 36, department: "Accounts", employeeNumber: 1},
+            {name: "Sally Jones", age: 32, department: "Engineering", employeeNumber: 2},
+            {name: "Tim Rayes", age: 41, department: "Sales", employeeNumber: 3},
+            {name: "Luke Fisher", age: "23", department: "Engineering", employeeNumber: 4},
+            {name: "Jane Lock", age: 34, department: "Engineering", employeeNumber: 5},
+            {name: "Margaret Hale", age: 45, department: "HR", employeeNumber: 6}
+        ];
+      </script>`);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-data-table.test.a11y.js.map

package/dist/collection/components/ic-data-table/test/a11y/ic-data-table.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-table.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-table/test/a11y/ic-data-table.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;EACtC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB;;;;;;;;;;;;;;;;;gBAiBU,CACX,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-unstable-data-table\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-unstable-data-table></ic-unstable-data-table>\n      <script>\n        var dataTable = document.querySelector('ic-unstable-data-table');\n        dataTable.columns = [\n            {key: \"name\", title: \"Name\", dataType: \"string\"},\n            {key: \"age\", title: \"Age\", dataType: \"number\"},\n            {key: \"department\", title: \"Department\", dataType: \"string\"},\n            {key: \"employeeNumber\", title: \"Employee number\", dataType: \"number\"}\n        ];\n        dataTable.data = [\n            {name: \"John Smith\", age: 36, department: \"Accounts\", employeeNumber: 1},\n            {name: \"Sally Jones\", age: 32, department: \"Engineering\", employeeNumber: 2},\n            {name: \"Tim Rayes\", age: 41, department: \"Sales\", employeeNumber: 3},\n            {name: \"Luke Fisher\", age: \"23\", department: \"Engineering\", employeeNumber: 4},\n            {name: \"Jane Lock\", age: 34, department: \"Engineering\", employeeNumber: 5},\n            {name: \"Margaret Hale\", age: 45, department: \"HR\", employeeNumber: 6}\n        ];\n      </script>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}