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

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

@@ -30,363 +30,363 @@ const descendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 2
 const icDataTableCss = ":host{position:relative;display:block;height:100%;max-height:100%}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs))}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:fixed;border-spacing:0;width:100%}.table-row-container:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}:host([embedded=\"true\"]) .table-container{border:var(--ic-border-light)}.column-header-sticky{position:sticky;top:0;z-index:1}.column-header-overlay{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}.row-header-sticky{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-color:var(--ic-table-row-selected) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-action-dark-bg-hover)}.sort-button:active{background-color:var(--ic-action-dark-bg-active)}.sort-button svg{color:var(--ic-architectural-black)}.sort-button-unsorted svg{color:var(--ic-color-tertiary-text)}.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.column-header,.row-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-architectural-40);border-right:var(--ic-border-light);border-bottom:var(--ic-border-light)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-border-light) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important}.table-row:nth-child(even){background-color:var(--ic-architectural-20)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-architectural-100) var(--ic-space-1px)}.data-type-string{text-align:left;vertical-align:top}.data-type-number,.data-type-date{text-align:right;vertical-align:top}.cell-alignment-top{vertical-align:top}.cell-alignment-middle{vertical-align:middle}.cell-alignment-bottom{vertical-align:bottom}.cell-emphasis-low{color:var(--ic-color-secondary-text)}.cell-emphasis-high{font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}@media screen and (min-width: 576px){.column-header-inner-container{display:flex;align-items:center}}";
 
 const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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;
+    }
+    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;
         }
-        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;
+    handleItemsPerPageChange(ev) {
+        this.previousRowsPerPage = this.rowsPerPage;
+        this.rowsPerPage = ev.detail.value;
     }
-    else if (this.previousRowsPerPage < this.rowsPerPage) {
-      tableRowsContainer.scrollTop = this.scrollOffset;
-      this.previousRowsPerPage = this.rowsPerPage;
+    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;
     }
-    else {
-      this.previousRowsPerPage = this.rowsPerPage;
+    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"))));
     }
-  }
-  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"))));
-  }
-  get el() { return this; }
-  static get style() { return icDataTableCss; }
+    get el() { return this; }
+    static get style() { return icDataTableCss; }
 }, [1, "ic-data-table", {
-    "caption": [1],
-    "columns": [16],
-    "data": [16],
-    "density": [1],
-    "embedded": [4],
-    "hideColumnHeaders": [4, "hide-column-headers"],
-    "paginationOptions": [16],
-    "showPagination": [4, "show-pagination"],
-    "sortable": [4],
-    "sortOptions": [16],
-    "stickyColumnHeaders": [4, "sticky-column-headers"],
-    "stickyRowHeaders": [4, "sticky-row-headers"],
-    "fromRow": [32],
-    "previousRowsPerPage": [32],
-    "rowsPerPage": [32],
-    "scrollable": [32],
-    "scrollOffset": [32],
-    "selectedRow": [32],
-    "sortedColumn": [32],
-    "sortedColumnOrder": [32],
-    "toRow": [32]
-  }, [[0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icPageChange", "handlePageChange"], [8, "click", "clickListener"]]]);
+        "caption": [1],
+        "columns": [16],
+        "data": [16],
+        "density": [1],
+        "embedded": [4],
+        "hideColumnHeaders": [4, "hide-column-headers"],
+        "paginationOptions": [16],
+        "showPagination": [4, "show-pagination"],
+        "sortable": [4],
+        "sortOptions": [16],
+        "stickyColumnHeaders": [4, "sticky-column-headers"],
+        "stickyRowHeaders": [4, "sticky-row-headers"],
+        "fromRow": [32],
+        "previousRowsPerPage": [32],
+        "rowsPerPage": [32],
+        "scrollable": [32],
+        "scrollOffset": [32],
+        "selectedRow": [32],
+        "sortedColumn": [32],
+        "sortedColumnOrder": [32],
+        "toRow": [32]
+    }, [[0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icPageChange", "handlePageChange"], [8, "click", "clickListener"]]]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ic-data-table", "ic-button", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-link", "ic-loading-indicator", "ic-menu", "ic-pagination", "ic-pagination-bar", "ic-pagination-item", "ic-select", "ic-text-field", "ic-tooltip", "ic-typography"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ic-data-table":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DataTable);
-      }
-      break;
-    case "ic-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$g();
-      }
-      break;
-    case "ic-input-component-container":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$f();
-      }
-      break;
-    case "ic-input-container":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$e();
-      }
-      break;
-    case "ic-input-label":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$d();
-      }
-      break;
-    case "ic-input-validation":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "ic-link":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "ic-loading-indicator":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "ic-menu":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "ic-pagination":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "ic-pagination-bar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "ic-pagination-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ic-select":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ic-text-field":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ic-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ic-typography":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-data-table", "ic-button", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-link", "ic-loading-indicator", "ic-menu", "ic-pagination", "ic-pagination-bar", "ic-pagination-item", "ic-select", "ic-text-field", "ic-tooltip", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-data-table":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DataTable);
+            }
+            break;
+        case "ic-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "ic-input-component-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "ic-input-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "ic-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "ic-input-validation":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "ic-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ic-loading-indicator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "ic-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ic-pagination":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ic-pagination-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ic-pagination-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ic-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ic-text-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ic-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const IcDataTable = DataTable;