@ukic/canary-web-components 2.0.0-canary.13 → 2.0.0-canary.15

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

@@ -1,5 +1,7 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$g } from './ic-button2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { i as isSlotUsed, g as getSlotContent } from './helpers2.js';
+import { d as defineCustomElement$h } from './ic-button2.js';
+import { d as defineCustomElement$g } from './ic-empty-state2.js';
 import { d as defineCustomElement$f } from './ic-input-component-container2.js';
 import { d as defineCustomElement$e } from './ic-input-container2.js';
 import { d as defineCustomElement$d } from './ic-input-label2.js';
@@ -27,18 +29,33 @@ const descendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 2
     <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
 </svg>`;
 
-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 icDataTableCss = ":host{position:relative;display:block;height:100%;max-height:100%}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs))}ic-loading-indicator{position:sticky;top:20px}.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-row-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;justify-content:start !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important;justify-content:end !important}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important;justify-content: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;justify-content:end;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}.loading-empty{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}.updating-state{padding:0;border-bottom:var(--ic-border-light)}.updating-state-headers{border-bottom:none}.loading{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow)}.loading.show-background{background-color:var(--ic-architectural-white);border:var(--ic-border-light)}.loading.show{opacity:1}.icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-right:var(--ic-space-xxs)}.column-header-alignment-right>.icon,.row-header-alignment-right>.icon,.cell-alignment-right>.icon,.column-header-alignment-right>::slotted(svg),.row-header-alignment-right>::slotted(svg),.cell-alignment-right>::slotted(svg){margin-right:auto}.column-header-alignment-center>ic-typography,.row-header-alignment-right>ic-typography,.cell-alignment-center>ic-typography{flex:1}.icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}@media screen and (min-width: 576px){.column-header-inner-container{display:flex;align-items:center}.cell-container{display:flex}}";
 
 const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.icRowHeightChange = createEvent(this, "icRowHeightChange", 7);
+        this.DENSITY_HEIGHT_MULTIPLIER = {
+            dense: 0.8,
+            default: 1,
+            spacious: 1.2,
+        };
         this.SORT_ICONS = {
             unsorted: unsortedIcon,
             ascending: ascendingIcon,
             descending: descendingIcon,
         };
+        this.hasLoadedForOneSecond = true;
+        this.startLoadingTimer = () => {
+            this.hasLoadedForOneSecond = false;
+            this.timerStarted = Date.now();
+            setTimeout(() => {
+                this.hasLoadedForOneSecond = true;
+                this.timerStarted = null;
+            }, this.minimumLoadingDisplayDuration);
+        };
         this.isObject = (value) => typeof value === "object";
         this.notDefaultDensity = () => this.density !== "default";
         this.getCellContent = (cell, dataType) => {
@@ -56,7 +73,11 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
             }
         };
-        this.createCells = (row) => {
+        this.createUpdatingIndicator = () => {
+            const { appearance, description, max, min, progress } = this.updatingOptions || {};
+            return (h("th", { colSpan: this.columns.length, class: "updating-state" }, h("ic-loading-indicator", { appearance: appearance, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
+        };
+        this.createCells = (row, rowIndex) => {
             const rowValues = Object.values(row);
             const rowKeys = Object.keys(row);
             let rowAlignment;
@@ -67,43 +88,56 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
             }
             return rowValues.map((cell, index) => {
-                const { columnAlignment, dataType, emphasis } = this.columns[index];
+                var _a, _b, _c, _d, _e;
+                const columnProps = this.columns[index];
+                const cellSlotName = `${columnProps === null || columnProps === void 0 ? void 0 : columnProps.key}-${rowIndex}`;
+                const hasIcon = this.isObject(cell) && Object.keys(cell).includes("icon");
                 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: {
+                    } }, cellValue("title"))) : (h("td", { 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) ||
+                        [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
+                        [`cell-alignment-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.vertical) ||
                             rowAlignment ||
-                            this.getCellAlignment(cell, "vertical")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
+                            this.getCellAlignment(cell, "vertical")}`]: !!((_b = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
                             !!rowAlignment ||
                             !!this.getCellAlignment(cell, "vertical"),
-                    } }, h("ic-typography", { variant: "body", class: {
+                    } }, h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
+                        !isSlotUsed(this.el, cellSlotName)
+                        ? cell
+                        : null, class: {
+                        "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element",
+                        [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
+                        [`cell-alignment-${((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.horizontal) ||
+                            this.getCellAlignment(cell, "horizontal")}`]: !!((_d = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _d === void 0 ? void 0 : _d.horizontal) ||
+                            !!this.getCellAlignment(cell, "horizontal"),
+                    } }, isSlotUsed(this.el, cellSlotName) ? (h("slot", { name: cellSlotName })) : (h(Fragment, null, isSlotUsed(this.el, `${cellSlotName}-icon`) ? (h("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _e === void 0 ? void 0 : _e.onAllCells)) && (h("span", { class: "icon", innerHTML: cellValue("icon") || (columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon.icon) }))), h("ic-typography", { variant: "body", class: {
                         [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
-                            emphasis ||
+                            (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
                             rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
-                            !!emphasis ||
+                            !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.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.isObject(cell) && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType))))))));
             });
         };
         this.createColumnHeaders = () => {
-            return this.columns.map(({ cellAlignment, colspan, key, title }) => (h("th", { scope: "col", class: {
+            return this.columns.map(({ cellAlignment, colspan, icon, 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: {
+                    ["updating-state-headers"]: this.updating && !this.loading,
+                }, colSpan: colspan }, h("div", { class: {
+                    "column-header-inner-container": true,
+                    [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
+                } }, isSlotUsed(this.el, `${key}-column-icon`) ? (h("slot", { name: `${key}-column-icon` })) : (icon &&
+                !icon.hideOnHeader && (h("span", { class: "icon", innerHTML: icon.icon }))), 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),
+                } }, title), this.sortable && (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
@@ -111,21 +145,48 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                     ["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();
+            /**
+             * Ensures that createCells has a value in data to map over to actually render the slot.
+             * Removes the need for the user to add it multiple times.
+             */
+            this.columns.forEach(({ key }) => {
+                data.forEach((row, rowIndex) => {
+                    const cellSlotName = `${key}-${rowIndex}`;
+                    if (isSlotUsed(this.el, cellSlotName)) {
+                        row[key] = getSlotContent(this.el, cellSlotName);
+                    }
+                });
+            });
             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))));
+                .map((row, index) => {
+                var _a;
+                const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index }));
+                const findRowHeight = variableRowHeightVal
+                    ? variableRowHeightVal !== "auto" && variableRowHeightVal
+                    : this.globalRowHeight !== "auto" && this.globalRowHeight;
+                return (h("tr", {
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onClick: () => (this.selectedRow =
+                        this.selectedRow !== row &&
+                            !this.loading &&
+                            !this.updating &&
+                            row), class: {
+                        ["table-row"]: true,
+                        ["table-row-selected"]: this.selectedRow === row,
+                    }, style: {
+                        height: findRowHeight
+                            ? `${findRowHeight * this.DENSITY_HEIGHT_MULTIPLIER[this.density]}px`
+                            : null,
+                    }
+                }, this.createCells(row, index)));
+            });
         };
         this.getObjectValue = (cell, key) => {
             return Object.values(cell)[Object.keys(cell).indexOf(key)];
@@ -203,15 +264,19 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         this.data = undefined;
         this.density = "default";
         this.embedded = false;
+        this.globalRowHeight = 40;
         this.hideColumnHeaders = false;
+        this.loading = false;
+        this.loadingOptions = undefined;
+        this.minimumLoadingDisplayDuration = 1000;
         this.paginationOptions = {
             itemsPerPage: [
                 { label: "10", value: "10" },
                 { label: "25", value: "25" },
                 { label: "50", value: "50" },
             ],
-            type: "page",
-            control: "simple",
+            rangeLabelType: "page",
+            type: "simple",
             itemsPerPageControl: true,
             goToPageControl: true,
             alignment: "right",
@@ -224,13 +289,18 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         };
         this.stickyColumnHeaders = false;
         this.stickyRowHeaders = false;
+        this.updating = false;
+        this.updatingOptions = undefined;
+        this.variableRowHeight = undefined;
     }
     componentWillLoad() {
+        var _a;
         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];
+        this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 });
     }
     componentDidLoad() {
         const tableElement = this.el.shadowRoot.querySelector("table");
@@ -239,6 +309,10 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientWidth) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientWidth)) {
             this.scrollable = true;
         }
+        if (this.loading) {
+            this.startLoadingTimer();
+            this.showLoadingIndicator();
+        }
     }
     handleItemsPerPageChange(ev) {
         this.previousRowsPerPage = this.rowsPerPage;
@@ -259,37 +333,94 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             this.previousRowsPerPage = this.rowsPerPage;
         }
     }
+    handleDensityChange(ev) {
+        this.density = ev.detail.value;
+    }
     clickListener(ev) {
         if (ev.target !== this.el)
             this.selectedRow = undefined;
     }
+    loadingHandler(newValue) {
+        if (newValue)
+            this.startLoadingTimer();
+        if (this.loading) {
+            setTimeout(() => {
+                this.showLoadingIndicator();
+            }, 500);
+        }
+    }
+    dataHandler(newData) {
+        this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: (newData === null || newData === void 0 ? void 0 : newData.length) > 0 });
+        if (this.loading) {
+            !this.hasLoadedForOneSecond
+                ? setTimeout(() => (this.loading = false), this.minimumLoadingDisplayDuration -
+                    (Date.now() - this.timerStarted))
+                : (this.loading = false);
+        }
+        if (this.updating)
+            this.updating = false;
+    }
+    rowHeightChangeHandler() {
+        this.icRowHeightChange.emit();
+    }
+    /**
+     * Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.
+     */
+    async resetRowHeights() {
+        this.globalRowHeight = 40;
+        this.variableRowHeight = null;
+    }
+    showLoadingIndicator() {
+        this.loadingIndicator.classList.add("show");
+    }
     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: {
+        const { caption, createColumnHeaders, createRows, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, updating, } = this;
+        return (h("div", { class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { name: "title-bar" }), 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
+            } }, h("tr", null, createColumnHeaders()))), updating &&
+            !loading &&
+            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), (data === null || data === void 0 ? void 0 : data.length) > 0 && h("tbody", null, createRows())), !(data === null || data === void 0 ? void 0 : data.length) &&
+            !loading &&
+            (isSlotUsed(this.el, "empty-state") ? (h("slot", { name: "empty-state" })) : (h("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" })))), loading && (h("ic-loading-indicator", { appearance: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.appearance, class: {
+                "loading-empty": loading,
+                loading: true,
+                "show-background": loadingOptions.showBackground,
+            }, description: loadingOptions.description || "Loading table data", label: loadingOptions.label || "Loading...", labelDuration: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.labelDuration, max: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.max, min: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.min, progress: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.progress, ref: (el) => (this.loadingIndicator = el) })), showPagination && (h("div", { class: "pagination-container" }, h("ic-pagination-bar", { totalItems: data.length, type: paginationOptions.type, rangeLabelType: paginationOptions.rangeLabelType, 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 watchers() { return {
+        "loading": ["loadingHandler"],
+        "data": ["dataHandler"],
+        "globalRowHeight": ["rowHeightChangeHandler"],
+        "variableRowHeight": ["rowHeightChangeHandler"]
+    }; }
     static get style() { return icDataTableCss; }
 }, [1, "ic-data-table", {
         "caption": [1],
         "columns": [16],
         "data": [16],
-        "density": [1],
+        "density": [1025],
         "embedded": [4],
+        "globalRowHeight": [1032, "global-row-height"],
         "hideColumnHeaders": [4, "hide-column-headers"],
+        "loading": [1028],
+        "loadingOptions": [16],
+        "minimumLoadingDisplayDuration": [2, "minimum-loading-display-duration"],
         "paginationOptions": [16],
         "showPagination": [4, "show-pagination"],
         "sortable": [4],
         "sortOptions": [16],
         "stickyColumnHeaders": [4, "sticky-column-headers"],
         "stickyRowHeaders": [4, "sticky-row-headers"],
+        "updating": [4],
+        "updatingOptions": [16],
+        "variableRowHeight": [1040],
         "fromRow": [32],
         "previousRowsPerPage": [32],
         "rowsPerPage": [32],
@@ -298,13 +429,19 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         "selectedRow": [32],
         "sortedColumn": [32],
         "sortedColumnOrder": [32],
-        "toRow": [32]
-    }, [[0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icPageChange", "handlePageChange"], [8, "click", "clickListener"]]]);
+        "toRow": [32],
+        "resetRowHeights": [64]
+    }, [[0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icPageChange", "handlePageChange"], [0, "icTableDensityUpdate", "handleDensityChange"], [8, "click", "clickListener"]], {
+        "loading": ["loadingHandler"],
+        "data": ["dataHandler"],
+        "globalRowHeight": ["rowHeightChangeHandler"],
+        "variableRowHeight": ["rowHeightChangeHandler"]
+    }]);
 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"];
+    const components = ["ic-data-table", "ic-button", "ic-empty-state", "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)) {
@@ -312,6 +449,11 @@ function defineCustomElement$1() {
             }
             break;
         case "ic-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "ic-empty-state":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }

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

@@ -1 +1 @@
-{"file":"ic-data-table.js","mappings":"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","names":[],"sources":["src/components/ic-data-table/ic-data-table.css?tag=ic-data-table&encapsulation=shadow","src/components/ic-data-table/ic-data-table.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: block;\n  height: 100%;\n  max-height: 100%;\n}\n\n.table-container {\n  position: relative;\n  height: calc(100% - var(--ic-space-xxxs));\n}\n\n.table-row-container {\n  position: relative;\n  height: 100%;\n  overflow: auto;\n  transition: var(--ic-easing-transition-fast);\n  overflow-anchor: none;\n}\n\n:host([show-pagination=\"true\"]) .table-row-container {\n  height: calc(100% - 3.5625rem);\n}\n\ntable {\n  table-layout: fixed;\n  border-spacing: 0;\n  width: 100%;\n}\n\n.table-row-container:focus {\n  outline: none;\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-easing-transition-fast);\n  z-index: 1;\n}\n\n:host([embedded=\"true\"]) .table-container {\n  border: var(--ic-border-light);\n}\n\n.column-header-sticky {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.column-header-overlay {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  box-shadow: 0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%);\n}\n\n.row-header-sticky {\n  position: sticky;\n  left: 0;\n}\n\n.column-header,\n.table-row {\n  box-sizing: border-box;\n}\n\n.table-row-selected {\n  background-color: var(--ic-table-row-selected) !important;\n}\n\n.sort-button {\n  margin-left: auto;\n}\n\n.sort-button:hover {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n.sort-button:active {\n  background-color: var(--ic-action-dark-bg-active);\n}\n\n.sort-button svg {\n  color: var(--ic-architectural-black);\n}\n\n.sort-button-unsorted svg {\n  color: var(--ic-color-tertiary-text);\n}\n\n.table-density-dense {\n  padding: var(--ic-space-xxs) var(--ic-space-xs) !important;\n}\n\n.text-dense {\n  font-size: var(--ic-font-size-label);\n}\n\n.table-density-spacious {\n  padding: 0.625rem var(--ic-space-xs) !important;\n}\n\n.text-spacious {\n  font-size: 1.125rem;\n}\n\n.column-header-text {\n  font-weight: var(--ic-font-weight-bold);\n}\n\n.column-header,\n.row-header {\n  text-align: left;\n  padding: var(--ic-space-xs);\n  background-color: var(--ic-architectural-40);\n  border-right: var(--ic-border-light);\n  border-bottom: var(--ic-border-light);\n}\n\n.column-header:last-child {\n  border-right: none;\n}\n\n.scrollable .column-header:last-child {\n  border-right: var(--ic-border-light) !important;\n}\n\n:host([embedded=\"true\"]) tr:last-child .table-cell,\n:host([embedded=\"true\"]) tr:last-child .row-header {\n  border-bottom: none;\n}\n\n.column-header-alignment-left,\n.row-header-alignment-left,\n.cell-alignment-left {\n  text-align: left !important;\n}\n\n.column-header-alignment-right,\n.row-header-alignment-right,\n.cell-alignment-right {\n  text-align: right !important;\n}\n\n.column-header-alignment-center,\n.row-header-alignment-center,\n.cell-alignment-center {\n  text-align: center !important;\n}\n\n.table-row:nth-child(even) {\n  background-color: var(--ic-architectural-20);\n}\n\n.table-cell {\n  padding: var(--ic-space-xs);\n  border-bottom: solid var(--ic-architectural-100) var(--ic-space-1px);\n}\n\n.data-type-string {\n  text-align: left;\n  vertical-align: top;\n}\n\n.data-type-number,\n.data-type-date {\n  text-align: right;\n  vertical-align: top;\n}\n\n.cell-alignment-top {\n  vertical-align: top;\n}\n\n.cell-alignment-middle {\n  vertical-align: middle;\n}\n\n.cell-alignment-bottom {\n  vertical-align: bottom;\n}\n\n.cell-emphasis-low {\n  color: var(--ic-color-secondary-text);\n}\n\n.cell-emphasis-high {\n  font-weight: var(--ic-font-weight-bold);\n}\n\n.pagination-container {\n  background-color: var(--ic-architectural-40);\n  border-top: var(--ic-border-light);\n}\n\n.screen-reader-sort-text,\n.table-caption {\n  position: absolute;\n  left: -100rem;\n}\n\n.table-cell,\n.column-header,\n.row-header {\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n@media screen and (min-width: 576px) {\n  .column-header-inner-container {\n    display: flex;\n    align-items: center;\n  }\n}\n","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-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: HTMLIcDataTableElement;\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.setAttribute(\n          \"aria-label\",\n          this.getSortButtonLabel(column)\n        ); // 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.setAttribute(\"aria-label\", 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"],"version":3}
+{"file":"ic-data-table.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,62IAA62I;;MC6Cv3I,SAAS;;;;;;QACZ,8BAAyB,GAAG;YAClC,KAAK,EAAE,GAAG;YACV,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,GAAG;SACd,CAAC;QAEM,eAAU,GAAG;YACnB,QAAQ,EAAE,YAAY;YACtB,SAAS,EAAE,aAAa;YACxB,UAAU,EAAE,cAAc;SAC3B,CAAC;QAEM,0BAAqB,GAAY,IAAI,CAAC;QAmRtC,sBAAiB,GAAG;YAC1B,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;YACnC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YAC/B,UAAU,CAAC;gBACT,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;gBAClC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;aAC1B,EAAE,IAAI,CAAC,6BAA6B,CAAC,CAAC;SACxC,CAAC;QAEM,aAAQ,GAAG,CAAC,KAAU,KAAK,OAAO,KAAK,KAAK,QAAQ,CAAC;QAErD,sBAAiB,GAAG,MAAM,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;QAErD,mBAAc,GAAG,CACvB,IAAS,EACT,QAAoC;YAEpC,QAAQ,QAAQ;gBACd,KAAK,SAAS;oBACZ,OAAO,SAAS,CAAC;gBACnB,KAAK,MAAM;oBACT,OAAO,CACL,IAAI,YAAY,IAAI,GAAG,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,EAC5C,kBAAkB,EAAE,CAAC;gBACzB;oBACE,OAAO,IAAI,CAAC;aACf;SACF,CAAC;QAEM,qBAAgB,GAAG,CACzB,IAAS,EACT,SAAoC;YAEpC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;gBACtE,OAAO,IAAI,CAAC,cAAc,CACxB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,eAAe,CAAC,EAC1C,SAAS,CACV,CAAC;aACH;SACF,CAAC;QAEM,4BAAuB,GAAG;YAChC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,GACnD,IAAI,CAAC,eAAe,IAAI,EAAE,CAAC;YAC7B,QACE,UAAI,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,EAAC,gBAAgB,IACtD,4BACE,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,IAAI,qBAAqB,EACjD,SAAS,EAAE,IAAI,EACf,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,GACU,CACrB,EACL;SACH,CAAC;QAEM,gBAAW,GAAG,CAAC,GAAW,EAAE,QAAgB;YAClD,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YACrC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACjC,IAAI,YAAoB,CAAC;YACzB,IAAI,WAAmB,CAAC;YACxB,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAC9C,IAAI,WAAW,GAAG,CAAC,CAAC,EAAE;gBACpB,YAAY,GAAG,IAAI,CAAC,cAAc,CAChC,SAAS,CAAC,WAAW,CAAC,EACtB,cAAc,CACf,CAAC;gBACF,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAC;aACvE;YACD,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK;;gBAC/B,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;gBACxC,MAAM,YAAY,GAAG,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,GAAG,IAAI,QAAQ,EAAE,CAAC;gBACvD,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;gBAC1E,MAAM,SAAS,GAAG,CAAC,GAAW,KAAK,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;gBAElE,OAAO,OAAO,CAAC,KAAK,CAAC,KAAK,QAAQ,IAChC,UACE,KAAK,EAAC,KAAK,EACX,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,EAC7B,KAAK,EAAE;wBACL,CAAC,YAAY,GAAG,IAAI;wBACpB,CAAC,wBAAwB,SAAS,CAAC,eAAe,CAAC,EAAE,GACnD,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC;wBAC9B,CAAC,mBAAmB,GAAG,IAAI,CAAC,gBAAgB;qBAC7C,IAEA,SAAS,CAAC,OAAO,CAAC,CAChB,KAEL,UACE,KAAK,EAAE;wBACL,CAAC,YAAY,GAAG,IAAI;wBACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE;wBAC3D,CAAC,aAAa,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,EAAE,GAAG,IAAI;wBAC5C,CAAC,kBACC,CAAA,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,eAAe,0CAAE,QAAQ;4BACtC,YAAY;4BACZ,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,UAAU,CACxC,EAAE,GACA,CAAC,EAAC,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,eAAe,0CAAE,QAAQ,CAAA;4BACxC,CAAC,CAAC,YAAY;4BACd,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,UAAU,CAAC;qBAC5C,IAED,WACE,SAAS,EACP,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,MAAK,SAAS;wBACnC,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC;0BAC7B,IAAe;0BAChB,IAAI,EAEV,KAAK,EAAE;wBACL,gBAAgB,EAAE,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,MAAK,SAAS;wBACrD,CAAC,aAAa,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,EAAE,GAAG,IAAI;wBAC5C,CAAC,kBACC,CAAA,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,eAAe,0CAAE,UAAU;4BACxC,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,YAAY,CAC1C,EAAE,GACA,CAAC,EAAC,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,eAAe,0CAAE,UAAU,CAAA;4BAC1C,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,YAAY,CAAC;qBAC9C,IAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,IAChC,YAAM,IAAI,EAAE,YAAY,GAAI,KAE5B,EAAC,QAAQ,QACN,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,YAAY,OAAO,CAAC,IAC1C,YAAM,IAAI,EAAE,GAAG,YAAY,OAAO,GAAI,KAEtC,CAAC,OAAO,KAAI,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,0CAAE,UAAU,CAAA,MACvC,YACE,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,SAAS,CAAC,MAAM,CAAC,KAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,CAAC,IAAI,CAAA,GAChD,CACT,CACF,EACD,qBACE,OAAO,EAAC,MAAM,EACd,KAAK,EAAE;wBACL,CAAC,iBACC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,UAAU,CAAC;6BAC7C,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,CAAA;4BACrB,WACF,EAAE,GACA,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC;4BAC/C,CAAC,EAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,CAAA;4BACvB,CAAC,CAAC,WAAW;wBACf,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE;qBACnD,IAEA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,MAAK,MAAM,IACtD,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,IAChC,eAAS,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,IAC7B,SAAS,CAAC,MAAM,CAAC,CACV,KAEV,SAAS,CAAC,MAAM,CAAC,CAClB,KAED,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,CAAC,CACjD,CACa,CACP,CACZ,CACG,CACH,CACN,CAAC;aACH,CAAC,CAAC;SACJ,CAAC;QAEM,wBAAmB,GAAG;YAC5B,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MACnE,UACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAE;oBACL,CAAC,eAAe,GAAG,IAAI;oBACvB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE;oBAC3D,CAAC,wBAAwB,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO;iBAC3D,EACD,OAAO,EAAE,OAAO,IAEhB,WACE,KAAK,EAAE;oBACL,+BAA+B,EAAE,IAAI;oBACrC,CAAC,2BAA2B,aAAa,EAAE,GAAG,CAAC,CAAC,aAAa;iBAC9D,IAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,GAAG,cAAc,CAAC,IACxC,YAAM,IAAI,EAAE,GAAG,GAAG,cAAc,GAAI,KAEpC,IAAI;gBACJ,CAAC,IAAI,CAAC,YAAY,KAChB,YAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,CACjD,CACF,EACD,qBACE,OAAO,EAAC,MAAM,EACd,KAAK,EAAE;oBACL,CAAC,oBAAoB,GAAG,IAAI;oBAC5B,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE;iBACnD,IAEA,KAAK,CACQ,EACf,IAAI,CAAC,QAAQ,KACZ,iBACE,OAAO,EAAC,MAAM,EACd,EAAE,EAAE,eAAe,GAAG,EAAE,gBACZ,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC;;gBAExC,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EACjC,SAAS,EACP,IAAI,CAAC,UAAU,CACb,IAAI,CAAC,YAAY,KAAK,GAAG;sBACrB,IAAI,CAAC,iBAAiB;sBACtB,UAAU,CACf,EAEH,KAAK,EAAE;oBACL,CAAC,aAAa,GAAG,IAAI;oBACrB,CAAC,sBAAsB,GACrB,IAAI,CAAC,YAAY,KAAK,GAAG;wBACzB,IAAI,CAAC,iBAAiB,KAAK,UAAU;iBACxC,GACU,CACd,CACG,CACH,CACN,CAAC,CAAC;SACJ,CAAC;QAEM,eAAU,GAAG;YACnB,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc;kBAC5B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;kBACzC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;;;;;YAMtB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE;gBAC3B,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,QAAQ;oBACzB,MAAM,YAAY,GAAG,GAAG,GAAG,IAAI,QAAQ,EAAE,CAAC;oBAC1C,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,EAAE;wBACrC,GAAG,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC;qBAClD;iBACF,CAAC,CAAC;aACJ,CAAC,CAAC;YAEH,OAAO,IAAI;iBACR,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;iBACzD,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK;;gBACd,MAAM,oBAAoB,GAAG,MAAA,IAAI,CAAC,iBAAiB,qFAC9C,GAAG,KACN,KAAK,IACL,CAAC;gBACH,MAAM,aAAa,GAAG,oBAAoB;sBACtC,oBAAoB,KAAK,MAAM,IAAI,oBAAoB;sBACvD,IAAI,CAAC,eAAe,KAAK,MAAM,IAAI,IAAI,CAAC,eAAe,CAAC;gBAC5D,QACE;;oBAEE,OAAO,EAAE,OACN,IAAI,CAAC,WAAW;wBACf,IAAI,CAAC,WAAW,KAAK,GAAG;4BACxB,CAAC,IAAI,CAAC,OAAO;4BACb,CAAC,IAAI,CAAC,QAAQ;4BACd,GAAG,CAAC,EAER,KAAK,EAAE;wBACL,CAAC,WAAW,GAAG,IAAI;wBACnB,CAAC,oBAAoB,GAAG,IAAI,CAAC,WAAW,KAAK,GAAG;qBACjD,EACD,KAAK,EAAE;wBACL,MAAM,EAAE,aAAa;8BACjB,GACE,aAAa,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,OAAO,CAC7D,IAAI;8BACJ,IAAI;qBACT;mBAEA,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAC1B,EACL;aACH,CAAC,CAAC;SACN,CAAC;QAEM,mBAAc,GAAG,CAAC,IAAY,EAAE,GAAW;YACjD,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;SAC5D,CAAC;QAEM,uBAAkB,GAAG,CAAC,GAAW;YACvC,IAAI,KAAK,GAAG,EAAE,CAAC;YACf,MAAM,iBAAiB,GAAG,CAAC,MAAmC;gBAC5D,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC;gBAC/C,OAAO,UAAU,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC;aACzE,CAAC;YAEF,IAAI,IAAI,CAAC,YAAY,KAAK,GAAG,EAAE;gBAC7B,MAAM,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;gBAC7D,KAAK,GAAG,UAAU,KAAK,UAAU,GAAG,QAAQ,UAAU,EAAE,GAAG,aAAa,CAAC;aAC1E;iBAAM;gBACL,KAAK,GAAG,QAAQ,iBAAiB,CAAC,UAAU,CAAC,EAAE,CAAC;aACjD;YAED,OAAO,KAAK,CAAC;SACd,CAAC;QAEM,kBAAa,GAAG,CAAC,SAAc,EAAE,aAAkB;YACzD,MAAM,cAAc,GAAG,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACpD,MAAM,kBAAkB,GAAG,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAC5D,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,IAAI,CAAC,YAAY,CAAC;iBAC7D,QAAQ,KAAK,MAAM;kBAClB,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,EAAE;oBAChC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,OAAO,EAAE;kBACxC,MAAM,CACJ,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC;sBACzB,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;sBAChC,cAAc,CACnB,CAAC,aAAa,CACb,MAAM,CACJ,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC;sBAC7B,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;sBACpC,kBAAkB,CACvB,EACD,SAAS,EACT,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,CACvC,CAAC;SACP,CAAC;QAEM,oBAAe,GAAG;YACxB,QAAQ,IAAI,CAAC,iBAAiB;gBAC5B,KAAK,WAAW;oBACd,OAAO,CAAC,CAAM,EAAE,CAAM,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACtD,KAAK,YAAY;oBACf,OAAO,CAAC,CAAM,EAAE,CAAM,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACtD;oBACE,OAAO,SAAS,CAAC;aACpB;SACF,CAAC;QAEM,aAAQ,GAAG,CAAC,MAAc;YAChC,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CACjD,gBAAgB,MAAM,EAAE,CACF,CAAC;YAEzB,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC;YAE/C,IAAI,MAAM,KAAK,IAAI,CAAC,YAAY,EAAE;gBAChC,IAAI,IAAI,CAAC,YAAY,EAAE;oBACrB,MAAM,oBAAoB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAC3D,gBAAgB,IAAI,CAAC,YAAY,EAAE,CACb,CAAC;oBACzB,oBAAoB,CAAC,YAAY,CAC/B,YAAY,EACZ,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAChC,CAAC;iBACH;gBACD,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;gBAC3B,IAAI,CAAC,iBAAiB,GAAG,UAAU,CAAC;aACrC;YAED,IAAI,kBAAkB,GAAG,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;YAExE,IAAI,kBAAkB,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC9C,kBAAkB,GAAG,CAAC,CAAC;aACxB;YAED,IAAI,CAAC,iBAAiB,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;YAExD,UAAU,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC;SACxE,CAAC;QAEM,uBAAkB,GAAG;YAC3B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAClD,sBAAsB,CACvB,CAAC,SAAS,CAAC;SACb,CAAC;uBA1oByB,CAAC;;;0BAMG,KAAK;4BAEJ,CAAC;;;;;;;;uBA4B8B,SAAS;wBAK3C,KAAK;+BAKiC,EAAE;iCAK/B,KAAK;uBAKE,KAAK;;6CAmBD,IAAI;iCAYjD;YACF,YAAY,EAAE;gBACZ,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBAC5B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBAC5B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;aAC7B;YACD,cAAc,EAAE,MAAM;YACtB,IAAI,EAAE,QAAQ;YACd,mBAAmB,EAAE,IAAI;YACzB,eAAe,EAAE,IAAI;YACrB,SAAS,EAAE,OAAO;SACnB;8BAKkC,KAAK;wBAKX,KAAK;2BAQ9B;YACF,UAAU,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,YAAY,CAAC;YACnD,aAAa,EAAE,EAAE;SAClB;mCAKuC,KAAK;gCAKR,KAAK;wBAKb,KAAK;;;;IA2BlC,iBAAiB;;QACf,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACxE,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAAC;QAC5C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;QAC9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;QACnD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACxD,IAAI,CAAC,cAAc,mCACd,IAAI,CAAC,cAAc,KACtB,cAAc,EAAE,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,IAAG,CAAC,GACtC,CAAC;KACH;IAED,gBAAgB;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC/D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QAC5E,IACE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,YAAY,KAAG,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,YAAY,CAAA;YACzD,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,WAAW,KAAG,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,CAAA,EACvD;YACA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;QACD,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;KACF;IAGD,wBAAwB,CAAC,EAAe;QACtC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAAC;QAC5C,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;KACpC;IAGD,gBAAgB,CAAC,EAAe;QAC9B,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC;QACxD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC;QAC7C,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CACzD,sBAAsB,CACvB,CAAC;QACF,IAAI,IAAI,CAAC,mBAAmB,KAAK,IAAI,CAAC,WAAW,EAAE;YACjD,kBAAkB,CAAC,SAAS,GAAG,CAAC,CAAC;SAClC;aAAM,IAAI,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE;YACtD,kBAAkB,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;YACjD,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAAC;SAC7C;aAAM;YACL,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAAC;SAC7C;KACF;IAGD,mBAAmB,CAAC,EAA2C;QAC7D,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;KAChC;IAGD,aAAa,CAAC,EAAc;QAC1B,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,EAAE;YAAE,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;KACzD;IAGD,cAAc,CAAC,QAAiB;QAC9B,IAAI,QAAQ;YAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEvC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC;gBACT,IAAI,CAAC,oBAAoB,EAAE,CAAC;aAC7B,EAAE,GAAG,CAAC,CAAC;SACT;KACF;IAGD,WAAW,CAAC,OAAiC;QAC3C,IAAI,CAAC,cAAc,mCACd,IAAI,CAAC,cAAc,KACtB,cAAc,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,IAAG,CAAC,GACpC,CAAC;QACF,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,CAAC,IAAI,CAAC,qBAAqB;kBACvB,UAAU,CACR,OAAO,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,EAC5B,IAAI,CAAC,6BAA6B;qBAC/B,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,CACnC;mBACA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC;SAC5B;QACD,IAAI,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KAC1C;IAID,sBAAsB;QACpB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;KAC/B;;;;IAMD,MAAM,eAAe;QACnB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;QAC1B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;KAC/B;IAEO,oBAAoB;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;KAC7C;IAiYD,MAAM;QACJ,MAAM,EACJ,OAAO,EACP,mBAAmB,EACnB,UAAU,EACV,uBAAuB,EACvB,IAAI,EACJ,iBAAiB,EACjB,OAAO,EACP,cAAc,EACd,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,QAAQ,GACT,GAAG,IAAI,CAAC;QAET,QACE,WAAK,KAAK,EAAC,iBAAiB,IACzB,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,IAAI,YAAM,IAAI,EAAC,WAAW,GAAG,EAC9D,WACE,KAAK,EAAE;gBACL,CAAC,qBAAqB,GAAG,IAAI;gBAC7B,UAAU;aACX,EACD,QAAQ,EAAE,UAAU,GAAG,CAAC,GAAG,IAAI,EAC/B,QAAQ,EAAE,kBAAkB,IAE5B,iBACE,eAAS,KAAK,EAAC,eAAe,IAAE,OAAO,CAAW,EACjD,CAAC,iBAAiB,KACjB,aACE,KAAK,EAAE;gBACL,CAAC,sBAAsB,GAAG,mBAAmB;gBAC7C,CAAC,uBAAuB,GACtB,mBAAmB,IAAI,YAAY,KAAK,CAAC;aAC5C,IAED,cAAK,mBAAmB,EAAE,CAAM,CAC1B,CACT,EACA,QAAQ;YACP,CAAC,OAAO;aACP,iBAAiB,IAChB,iBAAQ,uBAAuB,EAAE,CAAS,KAE1C,uBAAuB,EAAE,CAC1B,CAAC,EACH,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,IAAG,CAAC,IAAI,iBAAQ,UAAU,EAAE,CAAS,CAC5C,EACP,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAA;YACZ,CAAC,OAAO;aACP,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC,IACjC,YAAM,IAAI,EAAC,aAAa,GAAG,KAE3B,sBACE,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,eAAe,GACL,CACnB,CAAC,CACA,EACL,OAAO,KACN,4BACE,UAAU,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,UAAU,EACtC,KAAK,EAAE;gBACL,eAAe,EAAE,OAAO;gBACxB,OAAO,EAAE,IAAI;gBACb,iBAAiB,EAAE,cAAc,CAAC,cAAc;aACjD,EACD,WAAW,EAAE,cAAc,CAAC,WAAW,IAAI,oBAAoB,EAC/D,KAAK,EAAE,cAAc,CAAC,KAAK,IAAI,YAAY,EAC3C,aAAa,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,aAAa,EAC5C,GAAG,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,GAAG,EACxB,GAAG,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,GAAG,EACxB,QAAQ,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,QAAQ,EAClC,GAAG,EAAE,CAAC,EAAiC,MACpC,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,GAER,CACzB,EACA,cAAc,KACb,WAAK,KAAK,EAAC,sBAAsB,IAC/B,yBACE,UAAU,EAAE,IAAI,CAAC,MAAM,EACvB,IAAI,EAAE,iBAAiB,CAAC,IAAI,EAC5B,cAAc,EAAE,iBAAiB,CAAC,cAAc,EAChD,uBAAuB,EAAE,iBAAiB,CAAC,mBAAmB,EAC9D,mBAAmB,EAAE,iBAAiB,CAAC,eAAe,EACtD,mBAAmB,EAAE,iBAAiB,CAAC,YAAY,EACnD,SAAS,EAAE,iBAAiB,CAAC,SAAS,GACnB,CACjB,CACP,EACA,QAAQ,KACP,WAAK,KAAK,EAAC,yBAAyB,eAAW,QAAQ,IACpD,iBAAiB,KAAK,UAAU,IAAI,YAAY;cAC7C,GAAG,YAAY,WAAW,iBAAiB,EAAE;cAC7C,gBAAgB,CAChB,CACP,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-data-table/ic-data-table.css?tag=ic-data-table&encapsulation=shadow","src/components/ic-data-table/ic-data-table.tsx"],"sourcesContent":["/**\n  * @prop --height: height of the table row container\n  */\n\n:host {\n  position: relative;\n  display: block;\n  height: 100%;\n  max-height: 100%;\n}\n\n.table-container {\n  position: relative;\n  height: calc(100% - var(--ic-space-xxxs));\n}\n\nic-loading-indicator {\n  position: sticky;\n  top: 20px;\n}\n\n.table-row-container {\n  position: relative;\n  height: 100%;\n  overflow: auto;\n  transition: var(--ic-easing-transition-fast);\n  overflow-anchor: none;\n}\n\n:host([show-pagination=\"true\"]) .table-row-container {\n  height: calc(100% - 3.5625rem);\n}\n\ntable {\n  table-layout: fixed;\n  border-spacing: 0;\n  width: 100%;\n}\n\n.table-row-container:focus {\n  outline: none;\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-easing-transition-fast);\n  z-index: 1;\n}\n\n:host([embedded=\"true\"]) .table-row-container {\n  border: var(--ic-border-light);\n}\n\n.column-header-sticky {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.column-header-overlay {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  box-shadow: 0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%);\n}\n\n.row-header-sticky {\n  position: sticky;\n  left: 0;\n}\n\n.column-header,\n.table-row {\n  box-sizing: border-box;\n}\n\n.table-row-selected {\n  background-color: var(--ic-table-row-selected) !important;\n}\n\n.sort-button {\n  margin-left: auto;\n}\n\n.sort-button:hover {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n.sort-button:active {\n  background-color: var(--ic-action-dark-bg-active);\n}\n\n.sort-button svg {\n  color: var(--ic-architectural-black);\n}\n\n.sort-button-unsorted svg {\n  color: var(--ic-color-tertiary-text);\n}\n\n.table-density-dense {\n  padding: var(--ic-space-xxs) var(--ic-space-xs) !important;\n}\n\n.text-dense {\n  font-size: var(--ic-font-size-label);\n}\n\n.table-density-spacious {\n  padding: 0.625rem var(--ic-space-xs) !important;\n}\n\n.text-spacious {\n  font-size: 1.125rem;\n}\n\n.column-header-text {\n  font-weight: var(--ic-font-weight-bold);\n}\n\n.column-header,\n.row-header {\n  text-align: left;\n  padding: var(--ic-space-xs);\n  background-color: var(--ic-architectural-40);\n  border-right: var(--ic-border-light);\n  border-bottom: var(--ic-border-light);\n}\n\n.column-header:last-child {\n  border-right: none;\n}\n\n.scrollable .column-header:last-child {\n  border-right: var(--ic-border-light) !important;\n}\n\n:host([embedded=\"true\"]) tr:last-child .table-cell,\n:host([embedded=\"true\"]) tr:last-child .row-header {\n  border-bottom: none;\n}\n\n.column-header-alignment-left,\n.row-header-alignment-left,\n.cell-alignment-left {\n  text-align: left !important;\n  justify-content: start !important;\n}\n\n.column-header-alignment-right,\n.row-header-alignment-right,\n.cell-alignment-right {\n  text-align: right !important;\n  justify-content: end !important;\n}\n\n.column-header-alignment-center,\n.row-header-alignment-center,\n.cell-alignment-center {\n  text-align: center !important;\n  justify-content: center !important;\n}\n\n.table-row:nth-child(even) {\n  background-color: var(--ic-architectural-20);\n}\n\n.table-cell {\n  padding: var(--ic-space-xs);\n  border-bottom: solid var(--ic-architectural-100) var(--ic-space-1px);\n}\n\n.data-type-string {\n  text-align: left;\n  vertical-align: top;\n}\n\n.data-type-number,\n.data-type-date {\n  text-align: right;\n  justify-content: end;\n  vertical-align: top;\n}\n\n.cell-alignment-top {\n  vertical-align: top;\n}\n\n.cell-alignment-middle {\n  vertical-align: middle;\n}\n\n.cell-alignment-bottom {\n  vertical-align: bottom;\n}\n\n.cell-emphasis-low {\n  color: var(--ic-color-secondary-text);\n}\n\n.cell-emphasis-high {\n  font-weight: var(--ic-font-weight-bold);\n}\n\n.pagination-container {\n  background-color: var(--ic-architectural-40);\n  border-top: var(--ic-border-light);\n}\n\n.screen-reader-sort-text,\n.table-caption {\n  position: absolute;\n  left: -100rem;\n}\n\n.table-cell,\n.column-header,\n.row-header {\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.loading-empty {\n  padding: var(--ic-space-xl) var(--ic-space-xxl);\n  margin-top: var(--ic-space-xl);\n}\n\n.updating-state {\n  padding: 0;\n  border-bottom: var(--ic-border-light);\n}\n\n.updating-state-headers {\n  border-bottom: none;\n}\n\n.loading {\n  position: absolute;\n  left: calc(50% - 5.9741rem);\n  opacity: 0;\n  transition: opacity var(--ic-transition-duration-slow);\n}\n\n.loading.show-background {\n  background-color: var(--ic-architectural-white);\n  border: var(--ic-border-light);\n}\n\n.loading.show {\n  opacity: 1;\n}\n\n.icon,\n::slotted(svg) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  margin-right: var(--ic-space-xxs);\n}\n\n.column-header-alignment-right > .icon,\n.row-header-alignment-right > .icon,\n.cell-alignment-right > .icon,\n.column-header-alignment-right > ::slotted(svg),\n.row-header-alignment-right > ::slotted(svg),\n.cell-alignment-right > ::slotted(svg) {\n  margin-right: auto;\n}\n\n.column-header-alignment-center > ic-typography,\n.row-header-alignment-right > ic-typography,\n.cell-alignment-center > ic-typography {\n  flex: 1;\n}\n\n.icon > svg {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  display: inline-block;\n}\n\n@media screen and (min-width: 576px) {\n  .column-header-inner-container {\n    display: flex;\n    align-items: center;\n  }\n\n  .cell-container {\n    display: flex;\n  }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n  Component,\n  Element,\n  h,\n  Prop,\n  State,\n  Listen,\n  Watch,\n  Fragment,\n  Method,\n  Event,\n  EventEmitter,\n} 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  IcDataTableRowHeights,\n  IcDataTableSortOrderOptions,\n  IcDensityUpdateEventDetail,\n} from \"./ic-data-table.types\";\nimport {\n  IcPaginationLabelTypes,\n  IcPaginationTypes,\n  IcPaginationAlignmentOptions,\n} from \"@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types\";\nimport { IcThemeForegroundNoDefault } from \"@ukic/web-components/dist/types/utils/types\";\n// Unable to import helper functions via @ukic/web-components\nimport { getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot empty-state - Content is slotted below the table header when there is no data and the table is not loading.\n * @slot {COLUMN_KEY}-{ROW_INDEX}[-icon] - Each cell should have its own slot, named using the column tag and the row index, allowing for custom elements to be displayed. Include `-icon` at the end for that cell's icon slot.\n * @slot {COLUMN_KEY}-column-icon - The icon slot for a column header.\n * @slot title-bar - A custom ic-data-table-title-bar can be slotted above the column headers to display additional information about the table.\n */\n@Component({\n  tag: \"ic-data-table\",\n  styleUrl: \"ic-data-table.css\",\n  shadow: true,\n})\nexport class DataTable {\n  private DENSITY_HEIGHT_MULTIPLIER = {\n    dense: 0.8,\n    default: 1,\n    spacious: 1.2,\n  };\n\n  private SORT_ICONS = {\n    unsorted: unsortedIcon,\n    ascending: ascendingIcon,\n    descending: descendingIcon,\n  };\n\n  private hasLoadedForOneSecond: boolean = true;\n  private loadingIndicator: HTMLIcLoadingIndicatorElement;\n  private timerStarted: number;\n\n  @Element() el: HTMLIcDataTableElement;\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({ mutable: true }) density?: IcDataTableDensityOptions = \"default\";\n\n  /**\n   * Applies a border to the table container.\n   */\n  @Prop() embedded?: boolean = false;\n\n  /**\n   * Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method.\n   */\n  @Prop({ mutable: true }) globalRowHeight?: IcDataTableRowHeights = 40;\n\n  /**\n   * If `true`, column headers will not be visible.\n   */\n  @Prop() hideColumnHeaders?: boolean = false;\n\n  /**\n   * When set to `true`, the full table will show a loading state, featuring a radial indicator.\n   */\n  @Prop({ mutable: true }) loading?: boolean = false;\n\n  /**\n   * Sets the props for the circular loading indicator used in the loading state.\n   */\n  @Prop() loadingOptions?: {\n    appearance?: IcThemeForegroundNoDefault;\n    description?: string;\n    label?: string;\n    labelDuration?: number;\n    max?: number;\n    min?: number;\n    progress?: number;\n    showBackground?: boolean;\n  };\n\n  /**\n   * The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component.\n   */\n  @Prop() minimumLoadingDisplayDuration?: number = 1000;\n\n  /**\n   * Sets the props for the pagination bar.\n   */\n  @Prop() paginationOptions?: {\n    itemsPerPage?: { label: string; value: string }[];\n    rangeLabelType?: IcPaginationLabelTypes;\n    type?: IcPaginationTypes;\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    rangeLabelType: \"page\",\n    type: \"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  /**\n   * If `true`, the table displays a linear loading indicator below the header row to indicate an updating state.\n   */\n  @Prop() updating?: boolean = false;\n\n  /**\n   * Sets the props for the linear loading indicator used in the updating state.\n   */\n  @Prop() updatingOptions?: {\n    appearance?: IcThemeForegroundNoDefault;\n    description?: string;\n    max?: number;\n    min?: number;\n    progress?: number;\n  };\n\n  /**\n   * Allows for custom setting of row heights on individual rows based on an individual value from the `data` prop and the row index.\n   * If the function returns `null`, that row's height will be set to the `globalRowHeight` property.\n   */\n  @Prop({ mutable: true }) variableRowHeight?: (params: {\n    [key: string]: any;\n    index: number;\n  }) => IcDataTableRowHeights | null;\n\n  /**\n   * Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table.\n   */\n  @Event() icRowHeightChange: EventEmitter<void>;\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    this.loadingOptions = {\n      ...this.loadingOptions,\n      showBackground: this.data?.length > 0,\n    };\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    if (this.loading) {\n      this.startLoadingTimer();\n      this.showLoadingIndicator();\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(\"icTableDensityUpdate\")\n  handleDensityChange(ev: CustomEvent<IcDensityUpdateEventDetail>): void {\n    this.density = ev.detail.value;\n  }\n\n  @Listen(\"click\", { target: \"window\" })\n  clickListener(ev: MouseEvent): void {\n    if (ev.target !== this.el) this.selectedRow = undefined;\n  }\n\n  @Watch(\"loading\")\n  loadingHandler(newValue: boolean): void {\n    if (newValue) this.startLoadingTimer();\n\n    if (this.loading) {\n      setTimeout(() => {\n        this.showLoadingIndicator();\n      }, 500);\n    }\n  }\n\n  @Watch(\"data\")\n  dataHandler(newData: { [key: string]: any }[]): void {\n    this.loadingOptions = {\n      ...this.loadingOptions,\n      showBackground: newData?.length > 0,\n    };\n    if (this.loading) {\n      !this.hasLoadedForOneSecond\n        ? setTimeout(\n            () => (this.loading = false),\n            this.minimumLoadingDisplayDuration -\n              (Date.now() - this.timerStarted)\n          )\n        : (this.loading = false);\n    }\n    if (this.updating) this.updating = false;\n  }\n\n  @Watch(\"globalRowHeight\")\n  @Watch(\"variableRowHeight\")\n  rowHeightChangeHandler(): void {\n    this.icRowHeightChange.emit();\n  }\n\n  /**\n   * Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.\n   */\n  @Method()\n  async resetRowHeights(): Promise<void> {\n    this.globalRowHeight = 40;\n    this.variableRowHeight = null;\n  }\n\n  private showLoadingIndicator() {\n    this.loadingIndicator.classList.add(\"show\");\n  }\n\n  private startLoadingTimer = (): void => {\n    this.hasLoadedForOneSecond = false;\n    this.timerStarted = Date.now();\n    setTimeout(() => {\n      this.hasLoadedForOneSecond = true;\n      this.timerStarted = null;\n    }, this.minimumLoadingDisplayDuration);\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 createUpdatingIndicator = () => {\n    const { appearance, description, max, min, progress } =\n      this.updatingOptions || {};\n    return (\n      <th colSpan={this.columns.length} class=\"updating-state\">\n        <ic-loading-indicator\n          appearance={appearance}\n          description={description || \"Updating table data\"}\n          fullWidth={true}\n          max={max}\n          min={min}\n          progress={progress}\n          type=\"linear\"\n          size=\"small\"\n        ></ic-loading-indicator>\n      </th>\n    );\n  };\n\n  private createCells = (row: object, rowIndex: number) => {\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 columnProps = this.columns[index];\n      const cellSlotName = `${columnProps?.key}-${rowIndex}`;\n      const hasIcon = this.isObject(cell) && Object.keys(cell).includes(\"icon\");\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          class={{\n            [\"table-cell\"]: true,\n            [`table-density-${this.density}`]: this.notDefaultDensity(),\n            [`data-type-${columnProps?.dataType}`]: true,\n            [`cell-alignment-${\n              columnProps?.columnAlignment?.vertical ||\n              rowAlignment ||\n              this.getCellAlignment(cell, \"vertical\")\n            }`]:\n              !!columnProps?.columnAlignment?.vertical ||\n              !!rowAlignment ||\n              !!this.getCellAlignment(cell, \"vertical\"),\n          }}\n        >\n          <div\n            innerHTML={\n              columnProps?.dataType === \"element\" &&\n              !isSlotUsed(this.el, cellSlotName)\n                ? (cell as string)\n                : null\n            }\n            class={{\n              \"cell-container\": columnProps?.dataType !== \"element\",\n              [`data-type-${columnProps?.dataType}`]: true,\n              [`cell-alignment-${\n                columnProps?.columnAlignment?.horizontal ||\n                this.getCellAlignment(cell, \"horizontal\")\n              }`]:\n                !!columnProps?.columnAlignment?.horizontal ||\n                !!this.getCellAlignment(cell, \"horizontal\"),\n            }}\n          >\n            {isSlotUsed(this.el, cellSlotName) ? (\n              <slot name={cellSlotName} />\n            ) : (\n              <Fragment>\n                {isSlotUsed(this.el, `${cellSlotName}-icon`) ? (\n                  <slot name={`${cellSlotName}-icon`} />\n                ) : (\n                  (hasIcon || columnProps?.icon?.onAllCells) && (\n                    <span\n                      class=\"icon\"\n                      innerHTML={cellValue(\"icon\") || columnProps?.icon.icon}\n                    ></span>\n                  )\n                )}\n                <ic-typography\n                  variant=\"body\"\n                  class={{\n                    [`cell-emphasis-${\n                      (this.isObject(cell) && cellValue(\"emphasis\")) ||\n                      columnProps?.emphasis ||\n                      rowEmphasis\n                    }`]:\n                      (this.isObject(cell) && !!cellValue(\"emphasis\")) ||\n                      !!columnProps?.emphasis ||\n                      !!rowEmphasis,\n                    [`text-${this.density}`]: this.notDefaultDensity(),\n                  }}\n                >\n                  {this.isObject(cell) && columnProps?.dataType !== \"date\" ? (\n                    Object.keys(cell).includes(\"href\") ? (\n                      <ic-link href={cellValue(\"href\")}>\n                        {cellValue(\"data\")}\n                      </ic-link>\n                    ) : (\n                      cellValue(\"data\")\n                    )\n                  ) : (\n                    this.getCellContent(cell, columnProps?.dataType)\n                  )}\n                </ic-typography>\n              </Fragment>\n            )}\n          </div>\n        </td>\n      );\n    });\n  };\n\n  private createColumnHeaders = () => {\n    return this.columns.map(({ cellAlignment, colspan, icon, key, title }) => (\n      <th\n        scope=\"col\"\n        class={{\n          [\"column-header\"]: true,\n          [`table-density-${this.density}`]: this.notDefaultDensity(),\n          [\"updating-state-headers\"]: this.updating && !this.loading,\n        }}\n        colSpan={colspan}\n      >\n        <div\n          class={{\n            \"column-header-inner-container\": true,\n            [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,\n          }}\n        >\n          {isSlotUsed(this.el, `${key}-column-icon`) ? (\n            <slot name={`${key}-column-icon`} />\n          ) : (\n            icon &&\n            !icon.hideOnHeader && (\n              <span class=\"icon\" innerHTML={icon.icon}></span>\n            )\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          {this.sortable && (\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          )}\n        </div>\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\n    /**\n     * Ensures that createCells has a value in data to map over to actually render the slot.\n     * Removes the need for the user to add it multiple times.\n     */\n    this.columns.forEach(({ key }) => {\n      data.forEach((row, rowIndex) => {\n        const cellSlotName = `${key}-${rowIndex}`;\n        if (isSlotUsed(this.el, cellSlotName)) {\n          row[key] = getSlotContent(this.el, cellSlotName);\n        }\n      });\n    });\n\n    return data\n      .sort(!this.sortable ? undefined : this.getSortFunction())\n      .map((row, index) => {\n        const variableRowHeightVal = this.variableRowHeight?.({\n          ...row,\n          index,\n        });\n        const findRowHeight = variableRowHeightVal\n          ? variableRowHeightVal !== \"auto\" && variableRowHeightVal\n          : this.globalRowHeight !== \"auto\" && this.globalRowHeight;\n        return (\n          <tr\n            // eslint-disable-next-line react/jsx-no-bind\n            onClick={() =>\n              (this.selectedRow =\n                this.selectedRow !== row &&\n                !this.loading &&\n                !this.updating &&\n                row)\n            }\n            class={{\n              [\"table-row\"]: true,\n              [\"table-row-selected\"]: this.selectedRow === row,\n            }}\n            style={{\n              height: findRowHeight\n                ? `${\n                    findRowHeight * this.DENSITY_HEIGHT_MULTIPLIER[this.density]\n                  }px`\n                : null,\n            }}\n          >\n            {this.createCells(row, index)}\n          </tr>\n        );\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.setAttribute(\n          \"aria-label\",\n          this.getSortButtonLabel(column)\n        ); // 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.setAttribute(\"aria-label\", 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      createUpdatingIndicator,\n      data,\n      hideColumnHeaders,\n      loading,\n      loadingOptions,\n      paginationOptions,\n      scrollable,\n      scrollOffset,\n      showPagination,\n      sortable,\n      sortedColumnOrder,\n      sortedColumn,\n      stickyColumnHeaders,\n      updateScrollOffset,\n      updating,\n    } = this;\n\n    return (\n      <div class=\"table-container\">\n        {isSlotUsed(this.el, \"title-bar\") && <slot name=\"title-bar\" />}\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            {updating &&\n              !loading &&\n              (hideColumnHeaders ? (\n                <thead>{createUpdatingIndicator()}</thead>\n              ) : (\n                createUpdatingIndicator()\n              ))}\n            {data?.length > 0 && <tbody>{createRows()}</tbody>}\n          </table>\n          {!data?.length &&\n            !loading &&\n            (isSlotUsed(this.el, \"empty-state\") ? (\n              <slot name=\"empty-state\" />\n            ) : (\n              <ic-empty-state\n                aligned=\"center\"\n                heading=\"No Data\"\n                class=\"loading-empty\"\n              ></ic-empty-state>\n            ))}\n        </div>\n        {loading && (\n          <ic-loading-indicator\n            appearance={loadingOptions?.appearance}\n            class={{\n              \"loading-empty\": loading,\n              loading: true,\n              \"show-background\": loadingOptions.showBackground,\n            }}\n            description={loadingOptions.description || \"Loading table data\"}\n            label={loadingOptions.label || \"Loading...\"}\n            labelDuration={loadingOptions?.labelDuration}\n            max={loadingOptions?.max}\n            min={loadingOptions?.min}\n            progress={loadingOptions?.progress}\n            ref={(el: HTMLIcLoadingIndicatorElement) =>\n              (this.loadingIndicator = el)\n            }\n          ></ic-loading-indicator>\n        )}\n        {showPagination && (\n          <div class=\"pagination-container\">\n            <ic-pagination-bar\n              totalItems={data.length}\n              type={paginationOptions.type}\n              rangeLabelType={paginationOptions.rangeLabelType}\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"],"version":3}