@ukic/canary-web-components 3.0.0-canary.18 → 3.0.0-canary.19

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

@@ -112,6 +112,7 @@ export class DataTable {
             pageLabel: "Page",
             rangeLabelType: "page",
             selectedItemsPerPage: 10,
+            selectItemsPerPageOnEnter: true,
             setToFirstPageOnPaginationChange: false,
             showGoToPageControl: true,
             showItemsPerPageControl: true,
@@ -184,6 +185,176 @@ export class DataTable {
         };
         this.getRowHeight = (cellContainer) => parseInt(getComputedStyle(document.documentElement).fontSize) *
             parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING) || "");
+        this.truncateUpdatedData = () => {
+            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    if (cellContainer) {
+                        const truncWrapper = this.getTruncWrapper(typographyEl);
+                        if (truncWrapper &&
+                            cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >=
+                                truncWrapper.scrollHeight) {
+                            this.resetSingleShowHideTruncation(typographyEl, cellContainer);
+                            return;
+                        }
+                        setTimeout(() => {
+                            // slight delay due to data rendering
+                            this.addShowHideTruncationIfNeeded(typographyEl, cellContainer);
+                        }, 150);
+                    }
+                });
+            }
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            this.dataUpdated = false;
+        };
+        this.truncateTableSorted = () => {
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    if (cellContainer) {
+                        if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
+                            this.createShowHideTruncation(typographyEl, cellContainer);
+                        }
+                        else {
+                            typographyEl.resetTruncation().then(() => {
+                                cellContainer.removeAttribute("style");
+                            });
+                        }
+                    }
+                });
+            }
+            this.tableSorted = false;
+        };
+        this.truncateRowHeightSet = () => {
+            // This function recalculates the tooltip truncation when the rowHeight has been set.
+            // This is in componentDidUpdate so a setTimeout is not used to wait for the render to be complete
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                const tooltipEl = this.getTooltip(typographyEl);
+                if (cellContainer) {
+                    if (this.globalRowHeight === "auto") {
+                        cellContainer.style.height = "";
+                        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
+                        cellContainer.removeAttribute(this.DATA_ROW_HEIGHT_STRING);
+                        if (this.truncationPattern === this.TOOLTIP_STRING) {
+                            this.removeTooltip(cellContainer, typographyEl, tooltipEl);
+                            typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
+                        }
+                        else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                            this.resetSingleShowHideTruncation(typographyEl, cellContainer);
+                        }
+                        return;
+                    }
+                    // If the set row height is bigger than the cell container even
+                    // with textWrap, set the row height
+                    if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
+                        !cellContainer.style.height &&
+                        this.getRowHeight(cellContainer) > cellContainer.clientHeight &&
+                        !cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
+                        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                    }
+                    if (this.truncationPattern) {
+                        // If the set row height is bigger than the typography truncation wrapper
+                        // scroll height, remove see more / see less button
+                        if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                            const truncWrapper = this.getTruncWrapper(typographyEl);
+                            if (this.getShowHideButton(typographyEl) &&
+                                truncWrapper &&
+                                truncWrapper.scrollHeight <= cellContainer.clientHeight) {
+                                this.resetSingleShowHideTruncation(typographyEl, cellContainer);
+                                return;
+                            }
+                        }
+                        this.truncate(typographyEl, cellContainer, tooltipEl);
+                    }
+                    else {
+                        this.updateSetRowHeight(typographyEl);
+                    }
+                }
+            });
+            this.rowHeightSet = false;
+        };
+        this.truncateItemsPerPageChange = () => {
+            var _a;
+            // Only run truncation on the new rows
+            // when the number of items per page has increased
+            const allRows = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".table-row");
+            if (allRows && this.rowsPerPage > this.previousItemsPerPage) {
+                const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
+                newRows.forEach((row) => {
+                    row.querySelectorAll("ic-typography").forEach((typographyEl) => {
+                        const cellContainer = this.getCellContainer(typographyEl);
+                        const tooltipEl = this.getTooltip(typographyEl);
+                        if (cellContainer)
+                            this.truncate(typographyEl, cellContainer, tooltipEl);
+                    });
+                });
+            }
+            this.previousItemsPerPage = this.rowsPerPage;
+            this.itemsPerPageChange = false;
+        };
+        this.truncatePageChange = () => {
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.updateTruncationTooltip();
+            }
+            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                // set truncation to see more if opened and next/previous page is pressed
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    if (cellContainer &&
+                        this.typographyScrollHeightExceedsContainerHeight(typographyEl, cellContainer) &&
+                        !this.getShowHideButton(typographyEl)) {
+                        this.addShowHideTruncation(cellContainer, typographyEl);
+                    }
+                });
+            }
+            this.icPageChangeEvent = false;
+        };
+        this.truncateDensityUpdate = () => {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                const tooltipEl = this.getTooltip(typographyEl);
+                if (cellContainer)
+                    this.truncate(typographyEl, cellContainer, tooltipEl);
+            });
+            this.densityUpdate = false;
+        };
+        this.typographyScrollHeightExceedsContainerHeight = (typographyEl, cellContainer) => cellContainer && typographyEl.scrollHeight > cellContainer.clientHeight;
+        this.cellContainerMinusLineHeightIsGreaterThanTruncWrapperScrollHeight = (typographyEl, cellContainer) => {
+            const truncWrapper = this.getTruncWrapper(typographyEl);
+            return (truncWrapper &&
+                cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
+                    truncWrapper.scrollHeight);
+        };
+        this.truncatePatternUpdated = () => {
+            if (this.truncationPattern === this.TOOLTIP_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    const tooltipEl = this.getTooltip(typographyEl);
+                    if (cellContainer &&
+                        this.typographyScrollHeightExceedsContainerHeight(typographyEl, cellContainer)) {
+                        this.addTooltipTruncation(typographyEl, cellContainer, tooltipEl);
+                    }
+                });
+            }
+            else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
+                this.getTypographyElements().forEach((typographyEl) => {
+                    const cellContainer = this.getCellContainer(typographyEl);
+                    if (cellContainer) {
+                        if (this.cellContainerMinusLineHeightIsGreaterThanTruncWrapperScrollHeight(typographyEl, cellContainer)) {
+                            this.resetSingleShowHideTruncation(typographyEl, cellContainer);
+                            return;
+                        }
+                        this.addShowHideTruncationIfNeeded(typographyEl, cellContainer);
+                    }
+                });
+            }
+        };
         this.updateSetRowHeight = (typographyEl) => {
             const removeRowHeightVariable = (element) => {
                 const cellContainer = this.getCellContainer(element);
@@ -201,28 +372,10 @@ export class DataTable {
                 });
             }
         };
-        this.debounceDataTruncation = () => {
-            this.getTypographyElements().forEach((typographyEl) => {
-                const cellContainer = this.getCellContainer(typographyEl);
-                if (cellContainer &&
-                    !cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
-                    this.resizeObserver = new ResizeObserver(
-                    // This gets triggered twice due to updated data and see more/see less button
-                    dynamicDebounce(() => {
-                        this.dataTruncation(typographyEl);
-                        if (!this.isNewDebounceDelaySet) {
-                            this.debounceDelay = 200;
-                            this.isNewDebounceDelaySet = true;
-                        }
-                    }, () => this.debounceDelay));
-                    this.resizeObserver.observe(typographyEl);
-                }
-            });
-        };
         this.getLines = (height) => Math.floor(height / this.DEFAULT_LINE_HEIGHT);
         this.truncate = (typographyEl, cellContainer, tooltip) => {
             var _a;
-            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+            if (this.typographyScrollHeightExceedsContainerHeight(typographyEl, cellContainer)) {
                 //24 is the height of a single line
                 if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
                     if (this.truncationPattern === this.TOOLTIP_STRING) {
@@ -242,52 +395,49 @@ export class DataTable {
                 }
                 if (this.truncationPattern === this.SHOW_HIDE_STRING &&
                     !isEmptyString(typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.getAttribute("max-lines"))) {
-                    this.resetShowHideTruncation(typographyEl);
+                    this.resetSingleShowHideTruncation(typographyEl, cellContainer);
                 }
             }
         };
-        this.dataTruncation = (typographyEl) => {
-            var _a;
+        this.addShowHideTruncationIfNeeded = (typographyEl, cellContainer) => {
+            if (this.typographyScrollHeightExceedsContainerHeight(typographyEl, cellContainer)) {
+                this.addShowHideTruncation(cellContainer, typographyEl);
+                return true;
+            }
+            return false;
+        };
+        this.dataTruncation = (typographyEl, cellContainer) => {
             // Tooltip truncation mentioned in AC. Will need revisiting
             const tooltip = this.getTooltip(typographyEl);
-            const cellContainer = this.getCellContainer(typographyEl);
-            if (!cellContainer ||
-                cellContainer.classList.contains("data-type-element") ||
+            if (cellContainer.classList.contains("data-type-element") ||
                 this.dataUpdated) {
                 return;
             }
             if (this.truncationPattern === this.SHOW_HIDE_STRING &&
-                ((_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button"))) {
-                const showHideBtn = typographyEl.shadowRoot.querySelector("button");
+                this.getShowHideButton(typographyEl)) {
                 // If the see more/see less is present and the max lines is equal to the cell container
                 // remove the see more/see less button
-                if (showHideBtn) {
-                    const truncWrapper = this.getTruncWrapper(typographyEl);
-                    if (truncWrapper &&
-                        this.getLines(truncWrapper.scrollHeight) ===
-                            Number(typographyEl.getAttribute("max-lines"))) {
-                        this.resetShowHideTruncation(typographyEl);
-                    }
+                const truncWrapper = this.getTruncWrapper(typographyEl);
+                if (truncWrapper &&
+                    this.getLines(truncWrapper.scrollHeight) ===
+                        Number(typographyEl.getAttribute("max-lines"))) {
+                    this.resetSingleShowHideTruncation(typographyEl, cellContainer);
                 }
             }
             // Deals with setting and resetting row height and re-truncating data
             if (this.rowHeightSet && this.truncationPattern === this.SHOW_HIDE_STRING) {
-                const truncWrapper = this.getTruncWrapper(typographyEl);
                 // cellContainer.clientHeight - 24 removes the extra line by see more/see less
-                if (truncWrapper &&
-                    cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
-                        truncWrapper.scrollHeight) {
-                    this.resetShowHideTruncation(typographyEl);
+                if (this.cellContainerMinusLineHeightIsGreaterThanTruncWrapperScrollHeight(typographyEl, cellContainer)) {
+                    this.resetSingleShowHideTruncation(typographyEl, cellContainer);
                     return;
                 }
-                if (typographyEl.scrollHeight > cellContainer.clientHeight) {
-                    this.addShowHideTruncation(cellContainer, typographyEl);
+                if (this.addShowHideTruncationIfNeeded(typographyEl, cellContainer)) {
                     return;
                 }
             }
-            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > 0 &&
-                (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > 0 &&
-                (typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) === (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
+            if (typographyEl.scrollHeight > 0 &&
+                cellContainer.clientHeight > 0 &&
+                typographyEl.scrollHeight === cellContainer.clientHeight) {
                 if (tooltip) {
                     this.removeTooltip(cellContainer, typographyEl, tooltip);
                 }
@@ -296,6 +446,7 @@ export class DataTable {
             this.truncate(typographyEl, cellContainer, tooltip);
         };
         this.getTruncWrapper = (typographyEl) => { var _a; return (_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".trunc-wrapper"); };
+        this.getShowHideButton = (typographyEl) => { var _a; return (_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button"); };
         this.removeTextWrap = () => {
             this.getTypographyElements().forEach((typographyEl) => {
                 const tableCell = typographyEl.closest("td");
@@ -307,6 +458,37 @@ export class DataTable {
         this.getCellContainer = (typographyEl) => typographyEl.closest(".cell-container");
         this.deleteTextWrapDataKey = (array) => Array.isArray(array) &&
             array.forEach((val) => val.textWrap && delete val.textWrap);
+        this.resetSingleShowHideTruncation = (typographyEl, cellContainer) => {
+            const truncWrapper = this.getTruncWrapper(typographyEl);
+            if (!(cellContainer && truncWrapper))
+                return;
+            if (truncWrapper.scrollHeight > cellContainer.clientHeight &&
+                !isEmptyString(typographyEl.getAttribute("max-lines")) &&
+                Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT) !==
+                    Number(typographyEl.getAttribute("max-lines"))) {
+                typographyEl.checkMaxLines(truncWrapper.scrollHeight);
+                typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
+                typographyEl.setShowHideExpanded(false);
+                cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
+            }
+            else if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING)) {
+                typographyEl.resetTruncation().then(() => {
+                    if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
+                        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                    }
+                });
+            }
+        };
+        this.resetAllShowHideTruncation = () => {
+            this.getTypographyElements().forEach((typographyEl) => {
+                const cellContainer = this.getCellContainer(typographyEl);
+                typographyEl.resetTruncation().then(() => {
+                    if (cellContainer && !typographyEl.closest(this.TEXT_WRAP_CLASS)) {
+                        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
+                    }
+                });
+            });
+        };
         this.startLoadingTimer = () => {
             this.hasLoadedForOneSecond = false;
             this.timerStarted = Date.now();
@@ -385,31 +567,25 @@ export class DataTable {
                     gridWrapper.style.gridTemplateColumns = `auto calc(${width}px + var(--ic-space-xs))`;
             });
         };
-        this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, cellValue, rowEmphasis, currentRowHeight) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, hasIcon, cellValue, rowEmphasis, currentRowHeight) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             return (h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
                     !isSlotUsed(this.el, cellSlotName)
                     ? cell
-                    : undefined, class: Object.assign(Object.assign({ "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element", [`cell-alignment-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.vertical) ||
-                        ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
-                        rowAlignment ||
-                        this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
-                        !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
-                        !!rowAlignment ||
-                        !!this.getCellAlignment(cell, "vertical"), [`cell-alignment-${((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _e === void 0 ? void 0 : _e.horizontal) ||
-                        ((_f = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _f === void 0 ? void 0 : _f.horizontal) ||
-                        this.getCellAlignment(cell, "horizontal")}`]: !!((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _g === void 0 ? void 0 : _g.horizontal) ||
-                        !!((_h = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _h === void 0 ? void 0 : _h.horizontal) ||
+                    : undefined, class: Object.assign(Object.assign({ "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element", [`cell-alignment-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.horizontal) ||
+                        ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.horizontal) ||
+                        this.getCellAlignment(cell, "horizontal")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.horizontal) ||
+                        !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.horizontal) ||
                         !!this.getCellAlignment(cell, "horizontal"), [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true, [this.TEXT_WRAP_STRING]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) ||
                         (rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap) ||
-                        !!this.getCellOptions(cell, "textWrap"), ["cell-icon"]: hasIcon || !!((_j = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _j === void 0 ? void 0 : _j.icon), [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
+                        !!this.getCellOptions(cell, "textWrap"), ["cell-icon"]: hasIcon || !!((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _e === void 0 ? void 0 : _e.icon), [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
                         (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
                         rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
                         !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
                         !!rowEmphasis }, this.setTruncationClass()), { [this.CELL_CONTAINER_WITH_DESCRIPTION_STRING]: this.isObject(cell) && Object.keys(cell).includes("description") }), style: Object.assign(Object.assign({}, this.getCalculatedRowHeight(columnProps, rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap, cell, currentRowHeight)), this.getColumnWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnWidth)), "data-row-height": this.truncationPattern || currentRowHeight
                     ? this.setRowHeight(currentRowHeight)
-                    : null }, isSlotUsed(this.el, cellSlotName) ? (h("slot", { name: cellSlotName })) : (h(Fragment, null, isSlotUsed(this.el, `${cellSlotName}-icon`) ? (h("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_k = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _k === void 0 ? void 0 : _k.onAllCells)) &&
-                (cellValue("icon") || ((_l = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _l === void 0 ? void 0 : _l.icon)) && (h("span", { class: "icon", innerHTML: cellValue("icon") || ((_m = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _m === void 0 ? void 0 : _m.icon) }))), (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element" &&
+                    : null }, isSlotUsed(this.el, cellSlotName) ? (h("slot", { name: cellSlotName })) : (h(Fragment, null, isSlotUsed(this.el, `${cellSlotName}-icon`) ? (h("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_f = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _f === void 0 ? void 0 : _f.onAllCells)) &&
+                (cellValue("icon") || ((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _g === void 0 ? void 0 : _g.icon)) && (h("span", { class: "icon", innerHTML: cellValue("icon") || ((_h = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _h === void 0 ? void 0 : _h.icon) }))), (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element" &&
                 !isSlotUsed(this.el, cellSlotName) && (h("div", { class: {
                     "cell-text-wrapper": true,
                     "cell-text-no-wrap": !this.truncationPattern,
@@ -424,7 +600,7 @@ export class DataTable {
                 Object.keys(cell).includes("description") && (h("div", { class: {
                     ["cell-description"]: true,
                     [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
-                } }, ((_o = cellValue("description")) === null || _o === void 0 ? void 0 : _o.icon) && (h("span", { class: "cell-description-icon", innerHTML: cellValue("description").icon })), h("ic-typography", { variant: "caption", class: "cell-description-text" }, (_q = (_p = cellValue("description")) === null || _p === void 0 ? void 0 : _p.data) !== null && _q !== void 0 ? _q : cellValue("description"))))))))));
+                } }, ((_j = cellValue("description")) === null || _j === void 0 ? void 0 : _j.icon) && (h("span", { class: "cell-description-icon", innerHTML: cellValue("description").icon })), h("ic-typography", { variant: "caption", class: "cell-description-text" }, (_l = (_k = cellValue("description")) === null || _k === void 0 ? void 0 : _k.data) !== null && _l !== void 0 ? _l : cellValue("description"))))))))));
         };
         this.createCells = (row, rowIndex) => {
             var _a;
@@ -442,6 +618,7 @@ export class DataTable {
                 ? variableRowHeightVal !== "auto" && variableRowHeightVal
                 : this.globalRowHeight !== "auto" && this.globalRowHeight;
             return this.columns.map((columnName, index) => {
+                var _a, _b, _c, _d;
                 const cell = this.getObjectValue(row, columnName["key"]);
                 const columnProps = this.columns[index];
                 const cellSlotName = `${columnProps === null || columnProps === void 0 ? void 0 : columnProps.key}-${rowIndex}`;
@@ -454,12 +631,19 @@ export class DataTable {
                             ["row-header-sticky"]: this.stickyRowHeaders,
                         } }, cellValue("title")));
                 }
-                const CellContent = this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, cellValue, rowEmphasis, currentRowHeight || undefined);
+                const CellContent = this.createCellContent(columnProps, cell, cellSlotName, rowOptions, hasIcon, cellValue, rowEmphasis, currentRowHeight || undefined);
                 if (rowKeys[index] !== "rowOptions") {
                     return (h("td", { class: {
                             ["table-cell"]: true,
                             [`table-density-${this.density}`]: this.notDefaultDensity(),
                             ["with-overflow"]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element",
+                            [`cell-vertical-align-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.vertical) ||
+                                ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
+                                rowAlignment ||
+                                this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
+                                !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
+                                !!rowAlignment ||
+                                !!this.getCellAlignment(cell, "vertical"),
                         }, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, this.isObject(cell) &&
                         Object.keys(cell).includes("actionElement") ? (h("div", { class: "cell-grid-wrapper" }, CellContent, h("span", { class: "action-element", innerHTML: cellValue("actionElement"),
                         // eslint-disable-next-line react/jsx-no-bind
@@ -646,52 +830,50 @@ export class DataTable {
             cellContainer.setAttribute(this.DATA_ROW_HEIGHT_STRING, rowHeight.toString());
             cellContainer.setAttribute("style", `${this.ROW_HEIGHT_CSS_VARIABLE}: ${rowHeight}px`);
         };
+        this.getDescriptionHeight = (description) => {
+            const descriptionMarginTop = window
+                .getComputedStyle(description)
+                .getPropertyValue("margin-top");
+            return description.clientHeight + parseInt(descriptionMarginTop, 10);
+        };
         /** Method to update the row heights on cells with descriptions and tooltip truncation */
         this.updateCellHeightsWithDescriptions = () => {
             var _a, _b;
+            const isXSDevice = deviceSizeMatches(IC_DEVICE_SIZES.XS);
             (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.CELL_DESCRIPTION_STRING)) === null || _b === void 0 ? void 0 : _b.forEach((description) => {
                 const cellContainer = description.closest(`.${this.CELL_CONTAINER_WITH_DESCRIPTION_STRING}`);
                 const typography = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(this.IC_TYPOGRAPHY_STRING);
-                const descriptionMarginTop = window
-                    .getComputedStyle(description)
-                    .getPropertyValue("margin-top");
-                const descriptionHeight = description.clientHeight + parseInt(descriptionMarginTop, 10);
                 if (typography &&
                     cellContainer &&
                     this.globalRowHeight &&
                     this.globalRowHeight !== "auto") {
+                    const descriptionHeight = this.getDescriptionHeight(description);
+                    const descriptionHeightPlusLineHeight = descriptionHeight + this.DEFAULT_LINE_HEIGHT;
                     if (!typography.textContent &&
-                        descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight) {
+                        descriptionHeightPlusLineHeight > this.globalRowHeight) {
                         this.updateRowHeightForDescriptions(descriptionHeight, cellContainer);
                     }
                     else if (this.truncationPattern === this.TOOLTIP_STRING) {
-                        if (descriptionHeight + this.DEFAULT_LINE_HEIGHT >
-                            this.globalRowHeight) {
+                        if (descriptionHeightPlusLineHeight > this.globalRowHeight) {
                             const cellIcon = cellContainer.querySelector(".icon");
-                            if (deviceSizeMatches(IC_DEVICE_SIZES.XS) && cellIcon) {
+                            let rowHeight = descriptionHeightPlusLineHeight;
+                            if (cellIcon && isXSDevice) {
                                 // recalculate descriptionHeight as when a word break occurs this value changes
                                 // Additional spacing given for 300-400% zoom
-                                this.updateRowHeightForDescriptions(descriptionHeight +
-                                    this.DEFAULT_LINE_HEIGHT +
-                                    cellIcon.clientHeight, cellContainer);
-                            }
-                            else {
-                                this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
+                                rowHeight += cellIcon.clientHeight;
                             }
+                            this.updateRowHeightForDescriptions(rowHeight, cellContainer);
                         }
                         this.addLineClampCSS(typography, cellContainer);
                         // Additional case for show/hide truncation for when a description is present, but the text
                         // isn't overflowing the cell to trigger the show more button to appear.
                     }
                     else if (this.truncationPattern === this.SHOW_HIDE_STRING &&
-                        descriptionHeight + this.DEFAULT_LINE_HEIGHT >
-                            this.globalRowHeight &&
+                        descriptionHeightPlusLineHeight > this.globalRowHeight &&
                         typography.style.getPropertyValue("--truncation-max-lines") !==
                             "initial") {
-                        this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
-                        if (descriptionHeight) {
-                            this.createShowHideTruncation(typography, cellContainer, descriptionHeight);
-                        }
+                        this.updateRowHeightForDescriptions(descriptionHeightPlusLineHeight, cellContainer);
+                        this.createShowHideTruncation(typography, cellContainer, descriptionHeight);
                     }
                 }
             });
@@ -742,12 +924,7 @@ export class DataTable {
                     this.fixCellTooltip(slottedEl);
                 });
             });
-            (_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(".action-element")) === null || _d === void 0 ? void 0 : _d.forEach((actionElementSpan) => {
-                const actionElement = actionElementSpan.firstChild;
-                if (actionElement) {
-                    this.fixCellTooltip(actionElement);
-                }
-            });
+            (_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(".action-element")) === null || _d === void 0 ? void 0 : _d.forEach((actionElementSpan) => this.fixCellTooltip(actionElementSpan));
         };
         this.handleClick = (event, callback) => callback(event);
         this.renderTableBody = (loading, data, overlay) => {
@@ -847,10 +1024,19 @@ export class DataTable {
                 const cellContainer = this.getCellContainer(typographyEl);
                 if (cellContainer &&
                     !cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
-                    this.dataTruncation(typographyEl);
+                    this.dataTruncation(typographyEl, cellContainer);
+                    this.resizeObserver = new ResizeObserver(
+                    // This gets triggered twice due to updated data and see more/see less button
+                    dynamicDebounce(() => {
+                        this.dataTruncation(typographyEl, cellContainer);
+                        if (!this.isNewDebounceDelaySet) {
+                            this.debounceDelay = 200;
+                            this.isNewDebounceDelaySet = true;
+                        }
+                    }, () => this.debounceDelay));
+                    this.resizeObserver.observe(typographyEl);
                 }
             });
-            this.debounceDataTruncation();
         }
         if (this.globalRowHeight !== "auto") {
             this.updateSetRowHeight();
@@ -862,188 +1048,34 @@ export class DataTable {
         // rendered to take into account updated .cell-container/ic-typography box model updates.
         if (this.truncationPattern === this.SHOW_HIDE_STRING ||
             this.truncationPattern === this.TOOLTIP_STRING) {
-            this.truncateUpdatedData();
-        }
-    }
-    componentDidRender() {
-        this.fixCellTooltips();
-        this.updateCellHeightsWithDescriptions();
-        this.adjustWidthForActionElement();
-    }
-    truncateUpdatedData() {
-        var _a;
-        if (this.dataUpdated) {
-            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
-                this.getTypographyElements().forEach((typographyEl) => {
-                    const truncWrapper = this.getTruncWrapper(typographyEl);
-                    const cellContainer = this.getCellContainer(typographyEl);
-                    if (truncWrapper &&
-                        cellContainer &&
-                        cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >=
-                            truncWrapper.scrollHeight) {
-                        this.resetShowHideTruncation(typographyEl);
-                        return;
-                    }
-                    setTimeout(() => {
-                        // slight delay due to data rendering
-                        if (cellContainer &&
-                            typographyEl.scrollHeight > cellContainer.clientHeight) {
-                            this.addShowHideTruncation(cellContainer, typographyEl);
-                        }
-                    }, 150);
-                });
-            }
-            if (this.truncationPattern === this.TOOLTIP_STRING) {
-                this.updateTruncationTooltip();
+            if (this.dataUpdated) {
+                this.truncateUpdatedData();
             }
-            this.dataUpdated = false;
-        }
-        if (this.tableSorted) {
-            if (this.truncationPattern === this.TOOLTIP_STRING) {
-                this.updateTruncationTooltip();
-            }
-            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
-                this.getTypographyElements().forEach((typographyEl) => {
-                    const cellContainer = this.getCellContainer(typographyEl);
-                    if (cellContainer) {
-                        if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
-                            this.createShowHideTruncation(typographyEl, cellContainer);
-                        }
-                        else {
-                            typographyEl.resetTruncation().then(() => {
-                                cellContainer.removeAttribute("style");
-                            });
-                        }
-                    }
-                });
+            if (this.tableSorted) {
+                this.truncateTableSorted();
             }
-            this.tableSorted = false;
-        }
-        // This function recalculates the tooltip truncation when the rowHeight has been set.
-        // This is in componentDidUpdate so a setTimeout is not used to wait for the render to be complete
-        if (this.rowHeightSet) {
-            this.getTypographyElements().forEach((typographyEl) => {
-                var _a, _b;
-                const cellContainer = this.getCellContainer(typographyEl);
-                const tooltipEl = this.getTooltip(typographyEl);
-                if (cellContainer) {
-                    if (this.globalRowHeight === "auto") {
-                        cellContainer.style.height = "";
-                        if (this.truncationPattern === this.TOOLTIP_STRING) {
-                            this.removeTooltip(cellContainer, typographyEl, tooltipEl);
-                            typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
-                        }
-                        else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
-                            this.resetShowHideTruncation(typographyEl);
-                        }
-                        return;
-                    }
-                    // If the set row height is bigger than the cell container even
-                    // with textWrap, set the row height
-                    if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
-                        !((_a = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style) === null || _a === void 0 ? void 0 : _a.height) &&
-                        this.getRowHeight(cellContainer) > cellContainer.clientHeight &&
-                        !cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
-                        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
-                    }
-                    if (this.truncationPattern) {
-                        // If the set row height is bigger than the typography truncation wrapper
-                        // scroll height, remove see more / see less button
-                        if (this.truncationPattern === this.SHOW_HIDE_STRING) {
-                            const truncWrapper = this.getTruncWrapper(typographyEl);
-                            const showHideBtn = (_b = typographyEl.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("button");
-                            if (showHideBtn &&
-                                truncWrapper &&
-                                truncWrapper.scrollHeight <= cellContainer.clientHeight) {
-                                this.resetShowHideTruncation(typographyEl);
-                                return;
-                            }
-                        }
-                        this.truncate(typographyEl, cellContainer, tooltipEl);
-                    }
-                    else {
-                        this.updateSetRowHeight(typographyEl);
-                    }
-                }
-            });
-            this.rowHeightSet = false;
-        }
-        // Only run truncation on the new rows
-        // when the number of items per page has increased
-        if (this.itemsPerPageChange) {
-            const allRows = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".table-row");
-            if (allRows && this.rowsPerPage > this.previousItemsPerPage) {
-                const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
-                newRows.forEach((row) => {
-                    row.querySelectorAll("ic-typography").forEach((typographyEl) => {
-                        const cellContainer = this.getCellContainer(typographyEl);
-                        const tooltipEl = this.getTooltip(typographyEl);
-                        if (cellContainer)
-                            this.truncate(typographyEl, cellContainer, tooltipEl);
-                    });
-                });
+            if (this.rowHeightSet) {
+                this.truncateRowHeightSet();
             }
-            this.previousItemsPerPage = this.rowsPerPage;
-            this.itemsPerPageChange = false;
-        }
-        if (!this.initialLoad && this.icPageChangeEvent) {
-            if (this.truncationPattern === this.TOOLTIP_STRING) {
-                this.updateTruncationTooltip();
+            if (this.itemsPerPageChange) {
+                this.truncateItemsPerPageChange();
             }
-            // set truncation to see more if opened and next/previous page is pressed
-            if (this.truncationPattern === this.SHOW_HIDE_STRING) {
-                this.getTypographyElements().forEach((typographyEl) => {
-                    var _a;
-                    const cellContainer = this.getCellContainer(typographyEl);
-                    const showHideBtn = (_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button");
-                    if (cellContainer &&
-                        (typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > cellContainer.clientHeight &&
-                        !showHideBtn) {
-                        this.addShowHideTruncation(cellContainer, typographyEl);
-                    }
-                });
+            if (!this.initialLoad && this.icPageChangeEvent) {
+                this.truncatePageChange();
             }
-            this.icPageChangeEvent = false;
-        }
-        if (this.densityUpdate) {
-            this.getTypographyElements().forEach((typographyEl) => {
-                const cellContainer = this.getCellContainer(typographyEl);
-                const tooltipEl = this.getTooltip(typographyEl);
-                if (cellContainer)
-                    this.truncate(typographyEl, cellContainer, tooltipEl);
-            });
-            this.densityUpdate = false;
-        }
-        if (this.truncationPatternUpdated) {
-            if (this.truncationPattern === this.TOOLTIP_STRING) {
-                this.getTypographyElements().forEach((typographyEl) => {
-                    const cellContainer = this.getCellContainer(typographyEl);
-                    const tooltipEl = this.getTooltip(typographyEl);
-                    if (cellContainer &&
-                        typographyEl.scrollHeight > cellContainer.clientHeight) {
-                        this.addTooltipTruncation(typographyEl, cellContainer, tooltipEl);
-                    }
-                });
+            if (this.densityUpdate) {
+                this.truncateDensityUpdate();
             }
-            else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
-                this.getTypographyElements().forEach((typographyEl) => {
-                    const truncWrapper = this.getTruncWrapper(typographyEl);
-                    const cellContainer = this.getCellContainer(typographyEl);
-                    if (cellContainer) {
-                        if (truncWrapper &&
-                            (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
-                                truncWrapper.scrollHeight) {
-                            this.resetShowHideTruncation(typographyEl);
-                            return;
-                        }
-                        if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
-                            this.addShowHideTruncation(cellContainer, typographyEl);
-                        }
-                    }
-                });
+            if (this.truncationPatternUpdated) {
+                this.truncatePatternUpdated();
             }
         }
     }
+    componentDidRender() {
+        this.fixCellTooltips();
+        this.updateCellHeightsWithDescriptions();
+        this.adjustWidthForActionElement();
+    }
     createShowHideTruncation(typographyEl, cellContainer, descriptionHeight = 0) {
         typographyEl.checkMaxLines(typographyEl.scrollHeight);
         typographyEl.setAttribute("max-lines", `${this.getLines(cellContainer.clientHeight - descriptionHeight)}`);
@@ -1107,18 +1139,17 @@ export class DataTable {
     handleDensityChange(ev) {
         this.density = ev.detail.value;
     }
-    loadingHandler(newValue) {
-        if (newValue)
-            this.startLoadingTimer();
+    loadingHandler() {
         if (this.loading) {
+            this.startLoadingTimer();
             setTimeout(() => {
                 this.showLoadingIndicator();
             }, 500);
         }
     }
-    truncationPatternHandler(newValue) {
-        if (newValue === this.TOOLTIP_STRING) {
-            this.resetShowHideTruncation();
+    truncationPatternHandler() {
+        if (this.truncationPattern === this.TOOLTIP_STRING) {
+            this.resetAllShowHideTruncation();
             this.updateTruncationTooltip(true);
             // Not using debounceDataTruncation here due to resizeObserver not being triggered
             this.getTypographyElements().forEach((typographyEl) => {
@@ -1128,25 +1159,20 @@ export class DataTable {
                     this.truncate(typographyEl, cellContainer, tooltip);
             });
         }
-        if (newValue === this.SHOW_HIDE_STRING) {
+        else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
             // ResizeObserver is trigger here due to the see more/see less links being removed.
             // The resizeObserver will also apply the tooltip where relevant
             this.updateTruncationTooltip(true);
             this.getTypographyElements().forEach((typographyEl) => {
-                const truncWrapper = this.getTruncWrapper(typographyEl);
                 const cellContainer = this.getCellContainer(typographyEl);
                 if (cellContainer) {
-                    if (truncWrapper &&
-                        cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
-                            truncWrapper.scrollHeight) {
-                        this.resetShowHideTruncation(typographyEl);
+                    if (this.cellContainerMinusLineHeightIsGreaterThanTruncWrapperScrollHeight(typographyEl, cellContainer)) {
+                        this.resetSingleShowHideTruncation(typographyEl, cellContainer);
                         return;
                     }
                     setTimeout(() => {
                         // slight delay due to data rendering
-                        if (typographyEl.scrollHeight > cellContainer.clientHeight) {
-                            this.addShowHideTruncation(cellContainer, typographyEl);
-                        }
+                        this.addShowHideTruncationIfNeeded(typographyEl, cellContainer);
                     }, 150);
                 }
             });
@@ -1168,40 +1194,6 @@ export class DataTable {
     async densityHandler() {
         this.densityUpdate = true;
     }
-    resetShowHideTruncation(typographyEl) {
-        if (typographyEl) {
-            const truncWrapper = this.getTruncWrapper(typographyEl);
-            const cellContainer = this.getCellContainer(typographyEl);
-            if (!(cellContainer && truncWrapper))
-                return;
-            if (truncWrapper.scrollHeight > cellContainer.clientHeight &&
-                !isEmptyString(typographyEl.getAttribute("max-lines")) &&
-                Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT) !==
-                    Number(typographyEl.getAttribute("max-lines"))) {
-                typographyEl.checkMaxLines(truncWrapper.scrollHeight);
-                typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
-                typographyEl.setShowHideExpanded(false);
-                cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
-            }
-            else if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING)) {
-                typographyEl.resetTruncation().then(() => {
-                    if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
-                        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
-                    }
-                });
-            }
-        }
-        else {
-            this.getTypographyElements().forEach((typographyEl) => {
-                const cellContainer = this.getCellContainer(typographyEl);
-                typographyEl.resetTruncation().then(() => {
-                    if (cellContainer && !typographyEl.closest(this.TEXT_WRAP_CLASS)) {
-                        cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
-                    }
-                });
-            });
-        }
-    }
     rowHeightChangeHandler(newValue, oldValue) {
         if (+newValue !== +oldValue) {
             this.deleteTextWrapDataKey(this.data);
@@ -1300,22 +1292,22 @@ export class DataTable {
                 ? "deselect all"
                 : "select all remaining"
             : "select all";
-        return (h(Host, { key: 'b1a8a027c223f8ec8a82eaeadc6fcd584bcadaa3', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '7abde36f7f17075a3f25632a14090fe85c6c610d', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '8ef1e2c34b7a0aed1558fb393dda3c869b1fed1e', name: "title-bar" }), h("div", { key: '39984060ae40b37df7a84ff46f1d73a355ba491b', class: {
+        return (h(Host, { key: '2b548f8d26428034d51e7475883d6e7b407f28ec', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '5663c5ce124cf6f67435a8d18ddda4bc63a88e4f', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: '1ea59340e9633ca9a2f6d9fdba53d734050ddf84', name: "title-bar" }), h("div", { key: 'f2aef7502ca0c4124bf70b0fb4173e29b892004b', class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '7c7fe1ce4ff82644f52325129f392b5d6dfb7635', style: {
+            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '061ab3f20e857b05a4cd668656b0a730f1d0645a', style: {
                 "--table-layout": tableLayout,
-            } }, h("caption", { key: 'de772f10cbaa802c0df5be9225312a946b64fdaa', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: '5e41deeb29ab3a0f4b2daf9a17b6ed0cd2a756e7', class: {
+            } }, h("caption", { key: '727550fa24947c102cd231b1a4e262ffcba6e3b3', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: 'c07fa1fddf4fa8364c52444a3cc8df0d1bdaabaf', class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
-            } }, h("tr", { key: '93b3e712a034c666d90329bcd0c9e05d64f2633b' }, rowSelection && data && (h("th", { key: '38be7fab691d5cf1db9c817134dc2fa64b28073e', class: {
+            } }, h("tr", { key: '01735185f99abdd22a71edcaf944642d6e2c45de' }, rowSelection && data && (h("th", { key: '40c7157f3f3e45b6e9a9a0dfc65e2374526e150d', class: {
                 "column-header": true,
                 "checkbox-cell": true,
                 "updating-state-headers": updating && !loading,
                 [`table-density-${density}`]: this.notDefaultDensity(),
-            } }, h("div", { key: 'ff716f89433450095aad287521f76e5bfc630646', class: "checkbox-wrapper" }, h("ic-checkbox", { key: '88b6dbb7c0320233ef273cc23951e7b347955e79', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
+            } }, h("div", { key: '8d53b98f553294d9b2b9483f4ed001da905fcff4', class: "checkbox-wrapper" }, h("ic-checkbox", { key: 'b08cd440baff49256037e3ca3d27059a64c19d98', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
             !loading &&
-            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), h("div", { key: '6f01be0ef7e54bf99cae567dca5cb75c271d2a6f', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: '0d01727d838b4f4e5cce597bbbebb14721904f25', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { key: 'c73c4ffe5a0633bce3ccf116a69e3007342b27af', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), h("div", { key: '8ddc07463825ac2c637cf7f413840acc2662d2c2', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: 'd619ff136af4258047c21f7ea83ad8dd9ec77873', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, selectItemsPerPageOnEnter: paginationBarOptions.selectItemsPerPageOnEnter, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { key: 'f0a61b27a9e5dda26ed7c7ad0b4b7cadb0d910d7', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
             ? `${((_b = columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) ||
                 sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted")))));
@@ -1667,7 +1659,7 @@ export class DataTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{\n    alignment: \"right\",\n    hideAllFromItemsPerPage: false,\n    hideRangeLabel: false,\n    itemLabel: \"Item\",\n    itemsPerPageOptions: [\n      { label: \"10\", value: \"10\" },\n      { label: \"25\", value: \"25\" },\n      { label: \"50\", value: \"50\" },\n    ],\n    monochrome: false,\n    pageLabel: \"Page\",\n    rangeLabelType: \"page\",\n    selectedItemsPerPage: 10,\n    setToFirstPageOnPaginationChange: false,\n    showGoToPageControl: true,\n    showItemsPerPageControl: true,\n    type: \"simple\",\n  }"
+                "defaultValue": "{\n    alignment: \"right\",\n    hideAllFromItemsPerPage: false,\n    hideRangeLabel: false,\n    itemLabel: \"Item\",\n    itemsPerPageOptions: [\n      { label: \"10\", value: \"10\" },\n      { label: \"25\", value: \"25\" },\n      { label: \"50\", value: \"50\" },\n    ],\n    monochrome: false,\n    pageLabel: \"Page\",\n    rangeLabelType: \"page\",\n    selectedItemsPerPage: 10,\n    selectItemsPerPageOnEnter: true,\n    setToFirstPageOnPaginationChange: false,\n    showGoToPageControl: true,\n    showItemsPerPageControl: true,\n    type: \"simple\",\n  }"
             },
             "rowSelection": {
                 "type": "boolean",