@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.4

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

@@ -3,537 +3,537 @@ 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;
+    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.setAttribute("aria-label", 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.setAttribute("aria-label", 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;
     }
-  }
-  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;
+    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];
     }
-    else if (this.previousRowsPerPage < this.rowsPerPage) {
-      tableRowsContainer.scrollTop = this.scrollOffset;
-      this.previousRowsPerPage = this.rowsPerPage;
+    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;
+        }
     }
-    else {
-      this.previousRowsPerPage = this.rowsPerPage;
+    handleItemsPerPageChange(ev) {
+        this.previousRowsPerPage = this.rowsPerPage;
+        this.rowsPerPage = ev.detail.value;
     }
-  }
-  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-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",
-              "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableColumnObject"
-            }
-          }
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The column headers for the table."
+    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;
         }
-      },
-      "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."
+        else if (this.previousRowsPerPage < this.rowsPerPage) {
+            tableRowsContainer.scrollTop = this.scrollOffset;
+            this.previousRowsPerPage = this.rowsPerPage;
         }
-      },
-      "density": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcDataTableDensityOptions",
-          "resolved": "\"default\" | \"dense\" | \"spacious\"",
-          "references": {
-            "IcDataTableDensityOptions": {
-              "location": "import",
-              "path": "./ic-data-table.types",
-              "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableDensityOptions"
-            }
-          }
-        },
-        "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",
-              "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationTypes"
+        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-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
             },
-            "IcPaginationControlTypes": {
-              "location": "import",
-              "path": "../ic-pagination/ic-pagination.types",
-              "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationControlTypes"
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcDataTableColumnObject[]",
+                    "resolved": "IcDataTableColumnObject[]",
+                    "references": {
+                        "IcDataTableColumnObject": {
+                            "location": "import",
+                            "path": "./ic-data-table.types",
+                            "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableColumnObject"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The column headers for the table."
+                }
             },
-            "IcPaginationAlignmentOptions": {
-              "location": "import",
-              "path": "../ic-pagination/ic-pagination.types",
-              "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationAlignmentOptions"
-            }
-          }
-        },
-        "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",
-              "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableSortOrderOptions"
+            "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",
+                            "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableDensityOptions"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationTypes"
+                        },
+                        "IcPaginationControlTypes": {
+                            "location": "import",
+                            "path": "../ic-pagination/ic-pagination.types",
+                            "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationControlTypes"
+                        },
+                        "IcPaginationAlignmentOptions": {
+                            "location": "import",
+                            "path": "../ic-pagination/ic-pagination.types",
+                            "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationAlignmentOptions"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableSortOrderOptions"
+                        }
+                    }
+                },
+                "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"
             }
-          }
-        },
-        "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
-      }];
-  }
+        };
+    }
+    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