@ukic/canary-web-components 2.0.0-canary.12 → 2.0.0-canary.14

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

@@ -1,7 +1,5 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { p as pxToRem, 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 { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$g } from './ic-button2.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';
@@ -29,135 +27,18 @@ 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%}tbody{vertical-align:top}.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-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{justify-content:end !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)}ic-tooltip>ic-typography{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.data-type-number,.data-type-date{justify-content:end;text-align:end}.cell-alignment-top{vertical-align:top;align-items:flex-start}.cell-alignment-middle{vertical-align:middle;align-items:center}.cell-alignment-bottom{vertical-align:bottom;align-items:flex-end}.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)}.below-table{padding:var(--ic-space-xl) var(--ic-space-xxl)}.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}}";
+const icDataTableCss = ":host{position:relative;display:block;height:100%;max-height:100%}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs))}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:fixed;border-spacing:0;width:100%}.table-row-container:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}:host([embedded=\"true\"]) .table-container{border:var(--ic-border-light)}.column-header-sticky{position:sticky;top:0;z-index:1}.column-header-overlay{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}.row-header-sticky{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-color:var(--ic-table-row-selected) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-action-dark-bg-hover)}.sort-button:active{background-color:var(--ic-action-dark-bg-active)}.sort-button svg{color:var(--ic-architectural-black)}.sort-button-unsorted svg{color:var(--ic-color-tertiary-text)}.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.column-header,.row-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-architectural-40);border-right:var(--ic-border-light);border-bottom:var(--ic-border-light)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-border-light) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important}.table-row:nth-child(even){background-color:var(--ic-architectural-20)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-architectural-100) var(--ic-space-1px)}.data-type-string{text-align:left;vertical-align:top}.data-type-number,.data-type-date{text-align:right;vertical-align:top}.cell-alignment-top{vertical-align:top}.cell-alignment-middle{vertical-align:middle}.cell-alignment-bottom{vertical-align:bottom}.cell-emphasis-low{color:var(--ic-color-secondary-text)}.cell-emphasis-high{font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}@media screen and (min-width: 576px){.column-header-inner-container{display:flex;align-items:center}}";
 
 const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.icRowHeightChange = createEvent(this, "icRowHeightChange", 7);
-        this.DENSITY_HEIGHT_MULTIPLIER = {
-            dense: 0.8,
-            default: 1,
-            spacious: 1.2,
-        };
-        this.DENSITY_PADDING_HEIGHT_DIFF = {
-            dense: 8,
-            default: 16,
-            spacious: 20,
-        };
         this.SORT_ICONS = {
             unsorted: unsortedIcon,
             ascending: ascendingIcon,
             descending: descendingIcon,
         };
-        this.dataIsSorted = false;
-        this.hasLoadedForOneSecond = true;
-        this.itemsPerPageChanged = false;
-        this.updateTruncation = false;
-        this.removeDivStyles = (parentDiv) => {
-            parentDiv.style["height"] = null;
-            parentDiv.style["overflowY"] = null;
-        };
-        this.VERTICAL_CLASSES = ["cell-alignment-middle", "cell-alignment-bottom"];
-        this.removeVerticalAlignment = (el) => {
-            if (this.VERTICAL_CLASSES.some((className) => Array.from(el.classList).includes(className))) {
-                el.classList.remove(...this.VERTICAL_CLASSES);
-            }
-        };
-        this.setMaxLines = (typographyEl, cellContainer) => {
-            typographyEl.maxLines = Math.max(Math.floor(cellContainer.clientHeight / 24) - 1, 1); // Math.floor
-            typographyEl.checkCellTextMaxLines(cellContainer.clientHeight, typographyEl.scrollHeight);
-            this.removeDivStyles(cellContainer);
-        };
-        this.resetMaxLines = (typographyEl) => {
-            typographyEl.maxLines = undefined;
-        };
-        this.dataTruncation = () => {
-            Array.from(this.el.shadowRoot.querySelectorAll("ic-typography:not(.column-header-text)")).forEach((typographyEl) => {
-                const tableCell = typographyEl.closest("td");
-                const tooltip = typographyEl.closest("ic-tooltip");
-                const cellContainer = typographyEl.closest(".cell-container");
-                if (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.classList.contains("data-type-element"))
-                    return;
-                if (this.updateTruncation && !this.dataIsSorted) {
-                    this.resetMaxLines(typographyEl);
-                    cellContainer.appendChild(typographyEl);
-                    tooltip === null || tooltip === void 0 ? void 0 : tooltip.remove();
-                }
-                if (
-                // If cellContainer is bigger than the content inside
-                (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > typographyEl.scrollHeight &&
-                    !!typographyEl.scrollHeight) {
-                    if (tooltip) {
-                        // Move the content into the cell container and remove the tooltip as the content shouldnt be truncated
-                        cellContainer.appendChild(typographyEl);
-                        tooltip.remove();
-                    }
-                    else {
-                        // Remove an maxLines as the content is not truncated
-                        typographyEl.maxLines = undefined;
-                    }
-                    // If content is bigger than cellContainer
-                }
-                else if (typographyEl.scrollHeight > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
-                    // and the truncationPattern is tooltips
-                    if (this.truncationPattern === "tooltip") {
-                        // Get the number of lines by dividing by 24 (the eq of a line of text - in height) and add as line-clamp CSS
-                        typographyEl.style.webkitLineClamp = `${Math.floor(cellContainer.clientHeight / 24)}`;
-                        // Items that already have a tooltip before a change to the items per change, keep their tooltip
-                        if (tooltip && !this.itemsPerPageChanged && !this.dataIsSorted) {
-                            cellContainer.appendChild(typographyEl);
-                            tooltip.remove();
-                        }
-                        if (tooltip && this.dataIsSorted) {
-                            tooltip.setAttribute("target", typographyEl.id);
-                            tooltip.setAttribute("label", typographyEl.textContent);
-                        }
-                        if (!tooltip) {
-                            // if truncation pattern is tooltip and the tooltip does not exist, dynamically create one and add the content inside
-                            const tooltipEl = document.createElement("ic-tooltip");
-                            const rowIndex = Number(typographyEl.id.match(/-(\d+)$/)[1]);
-                            tooltipEl.setAttribute("target", typographyEl.id);
-                            tooltipEl.setAttribute("label", typographyEl.textContent);
-                            // Checks if the truncated text is in the first row of the displayed page
-                            rowIndex === 0 && tooltipEl.setAttribute("placement", "bottom");
-                            // Checks if the truncated text is in the last row of the displayed page
-                            if (rowIndex === this.data.length - 1 ||
-                                rowIndex === this.rowsPerPage - 1) {
-                                tooltipEl.setAttribute("placement", "top");
-                            }
-                            // Checks if the truncated text is in the first column
-                            typographyEl.id.includes(this.columns[0].key) &&
-                                tooltipEl.setAttribute("placement", "right");
-                            // Checks if the truncated text is in the last column
-                            typographyEl.id.includes(this.columns[this.columns.length - 1].key) && tooltipEl.setAttribute("placement", "left");
-                            typographyEl.parentNode.replaceChild(tooltipEl, typographyEl);
-                            tooltipEl.appendChild(typographyEl);
-                        }
-                    }
-                    else {
-                        // Else set the maxLines and add the see more/see less truncation link under
-                        this.setMaxLines(typographyEl, cellContainer);
-                        // Truncation should remove all alignment styling
-                        this.removeVerticalAlignment(tableCell);
-                        this.removeVerticalAlignment(cellContainer);
-                    }
-                }
-            });
-            if (this.updateTruncation) {
-                this.updateTruncation = false;
-            }
-        };
-        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) => {
@@ -175,20 +56,9 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
             }
         };
-        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.setRowHeight = (height) => {
-            return pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
-                this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
-        };
-        this.createCells = (row, rowIndex) => {
-            // Get the name of the row??
+        this.createCells = (row) => {
             const rowValues = Object.values(row);
             const rowKeys = Object.keys(row);
-            const rowTextWrapIndex = rowKeys.indexOf("textWrap");
-            const rowTextWrap = rowTextWrapIndex > -1 && rowValues[rowTextWrapIndex];
             let rowAlignment;
             let rowEmphasis;
             const headerIndex = rowKeys.indexOf("header");
@@ -197,73 +67,43 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
             }
             return rowValues.map((cell, index) => {
-                const { columnAlignment, dataType, emphasis, icon, key, textWrap } = this.columns[index] || {};
-                const cellSlotName = `${key}-${rowIndex}`;
-                const hasIcon = this.isObject(cell) && Object.keys(cell).includes("icon");
-                const isNotElement = dataType !== "element";
+                const { columnAlignment, dataType, emphasis } = this.columns[index];
                 const cellValue = (key) => this.getObjectValue(cell, key);
-                return (key &&
-                    (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", { class: {
-                            ["table-cell"]: true,
-                            [`table-density-${this.density}`]: this.notDefaultDensity(),
-                            [`data-type-${dataType}-cell`]: true,
-                            [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
-                                rowAlignment ||
-                                this.getCellAlignment(cell, "vertical")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
-                                !!rowAlignment ||
-                                !!this.getCellAlignment(cell, "vertical"),
-                        } }, h("div", { innerHTML: dataType === "element" && !isSlotUsed(this.el, cellSlotName)
-                            ? cell
-                            : null, class: {
-                            "cell-container": isNotElement,
-                            [`data-type-${dataType}`]: true,
-                            [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
-                                this.getCellAlignment(cell, "horizontal")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
-                                !!this.getCellAlignment(cell, "horizontal"),
-                            [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
-                                rowAlignment ||
-                                this.getCellAlignment(cell, "vertical")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
-                                !!rowAlignment ||
-                                !!this.getCellAlignment(cell, "vertical"),
-                        }, style: {
-                            height: this.currentRowHeight &&
-                                !rowTextWrap &&
-                                !textWrap &&
-                                isNotElement
-                                ? this.setRowHeight(this.currentRowHeight)
-                                : null,
-                            overflowY: this.truncationPattern === "tooltip" &&
-                                !(rowTextWrap && textWrap) &&
-                                isNotElement
-                                ? "hidden"
-                                : null,
-                        } }, isSlotUsed(this.el, cellSlotName) ? (h("slot", { name: cellSlotName })) : (h(Fragment, null, isSlotUsed(this.el, `${cellSlotName}-icon`) ? (h("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || (icon === null || icon === void 0 ? void 0 : icon.onAllCells)) && (h("span", { class: "icon", innerHTML: cellValue("icon") || icon.icon }))), h("ic-typography", { id: cellSlotName, variant: "body", class: {
-                            [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
-                                emphasis ||
-                                rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
-                                !!emphasis ||
-                                !!rowEmphasis,
-                            [`text-${this.density}`]: this.notDefaultDensity(),
-                        } }, this.isObject(cell) && dataType !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, dataType))))))))));
+                return rowKeys[index] === "header" ? (h("th", { scope: "row", colSpan: cellValue("colspan"), class: {
+                        ["row-header"]: true,
+                        [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
+                        ["row-header-sticky"]: this.stickyRowHeaders,
+                    } }, cellValue("title"))) : (h("td", { innerHTML: dataType === "element" ? cell : null, class: {
+                        ["table-cell"]: true,
+                        [`table-density-${this.density}`]: this.notDefaultDensity(),
+                        [`data-type-${dataType}`]: true,
+                        [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
+                            this.getCellAlignment(cell, "horizontal")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
+                            !!this.getCellAlignment(cell, "horizontal"),
+                        [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
+                            rowAlignment ||
+                            this.getCellAlignment(cell, "vertical")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
+                            !!rowAlignment ||
+                            !!this.getCellAlignment(cell, "vertical"),
+                    } }, h("ic-typography", { variant: "body", class: {
+                        [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
+                            emphasis ||
+                            rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
+                            !!emphasis ||
+                            !!rowEmphasis,
+                        [`text-${this.density}`]: this.notDefaultDensity(),
+                    } }, this.isObject(cell) && dataType !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, dataType)))));
             });
         };
         this.createColumnHeaders = () => {
-            return this.columns.map(({ cellAlignment, colspan, icon, key, title }) => (h("th", { scope: "col", class: {
+            return this.columns.map(({ cellAlignment, colspan, key, title }) => (h("th", { scope: "col", class: {
                     ["column-header"]: true,
-                    [`table-density-${this.density}`]: this.notDefaultDensity(),
-                    ["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: {
+                    [`table-density-${this.density}`]: this.notDefaultDensity(),
+                }, colSpan: colspan }, this.sortable ? (h("div", { class: "column-header-inner-container" }, h("ic-typography", { variant: "body", class: {
                     ["column-header-text"]: true,
                     [`text-${this.density}`]: this.notDefaultDensity(),
-                } }, title), this.sortable && (h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
+                } }, title), h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
                 // eslint-disable-next-line react/jsx-no-bind
                 onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
                     ? this.sortedColumnOrder
@@ -271,47 +111,21 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                     ["sort-button"]: true,
                     ["sort-button-unsorted"]: this.sortedColumn !== key ||
                         this.sortedColumnOrder === "unsorted",
-                } }))))));
-        };
-        this.onRowClick = (target, row) => {
-            if (target.tagName !== "IC-TYPOGRAPHY" &&
-                !target.style.getPropertyValue("--truncation-max-lines")) {
-                this.selectedRow =
-                    !(this.selectedRow === row && this.loading && this.updating) && row;
-            }
+                } }))) : (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, index) => {
-                var _a;
-                const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index }));
-                this.currentRowHeight = variableRowHeightVal
-                    ? variableRowHeightVal !== "auto" && variableRowHeightVal
-                    : this.globalRowHeight !== "auto" && this.globalRowHeight;
-                return (h("tr", {
-                    // eslint-disable-next-line react/jsx-no-bind
-                    onClick: (event) => this.onRowClick(event.target, row), class: {
-                        ["table-row"]: true,
-                        ["table-row-selected"]: this.selectedRow === row,
-                    }
-                }, this.createCells(row, index)));
-            });
+                .map((row) => (h("tr", { onClick: () => (this.selectedRow = this.selectedRow !== row && row), class: {
+                    ["table-row"]: true,
+                    ["table-row-selected"]: this.selectedRow === row,
+                } }, this.createCells(row))));
         };
         this.getObjectValue = (cell, key) => {
             return Object.values(cell)[Object.keys(cell).indexOf(key)];
@@ -356,7 +170,6 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         };
         this.sortRows = (column) => {
             const sortButton = this.el.shadowRoot.querySelector(`#sort-button-${column}`);
-            this.dataIsSorted = true;
             const sortOrders = this.sortOptions.sortOrders;
             if (column !== this.sortedColumn) {
                 if (this.sortedColumn) {
@@ -390,11 +203,7 @@ 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" },
@@ -415,19 +224,13 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         };
         this.stickyColumnHeaders = false;
         this.stickyRowHeaders = false;
-        this.truncationPattern = "tooltip";
-        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");
@@ -436,25 +239,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();
-        }
-        this.dataTruncation();
-    }
-    componentDidUpdate() {
-        if (!this.itemsPerPageChanged) {
-            this.updateTruncation = true;
-        }
-        this.dataTruncation();
-        this.itemsPerPageChanged = false;
-        this.dataIsSorted = false;
     }
     handleItemsPerPageChange(ev) {
         this.previousRowsPerPage = this.rowsPerPage;
         this.rowsPerPage = ev.detail.value;
-        this.itemsPerPageChanged = true;
-        this.dataTruncation();
     }
     handlePageChange(ev) {
         this.fromRow = (ev.detail.value - 1) * this.rowsPerPage;
@@ -470,100 +258,38 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         else {
             this.previousRowsPerPage = this.rowsPerPage;
         }
-        this.dataTruncation();
-    }
-    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);
-        }
-        this.updating && (this.updating = false);
-    }
-    rowHeightChangeHandler() {
-        this.dataTruncation();
-        const deleteTextWrapKey = (array) => array.forEach((val) => val.textWrap && delete val.textWrap);
-        deleteTextWrapKey(this.data);
-        deleteTextWrapKey(this.columns);
-        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, 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: {
+        const { caption, createColumnHeaders, createRows, data, hideColumnHeaders, paginationOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, } = this;
+        return (h("div", { class: "table-container" }, h("div", { class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, isSlotUsed(this.el, "title-bar") && h("slot", { name: "title-bar" }), h("table", null, h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { class: {
+            }, 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()))), updating &&
-            !loading &&
-            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), (data === null || data === void 0 ? void 0 : data.length) > 0 && !loading && 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, 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()))), (data === null || data === void 0 ? void 0 : data.length) > 0 && h("tbody", null, createRows()))), showPagination && (h("div", { class: "pagination-container" }, h("ic-pagination-bar", { totalItems: data.length, paginationType: paginationOptions.type, paginationControl: paginationOptions.control, showItemsPerPageControl: paginationOptions.itemsPerPageControl, showGoToPageControl: paginationOptions.goToPageControl, itemsPerPageOptions: paginationOptions.itemsPerPage, alignment: paginationOptions.alignment }))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
             ? `${sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted"))));
     }
     get el() { return this; }
-    static get 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": [1025],
+        "density": [1],
         "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"],
-        "truncationPattern": [1, "truncation-pattern"],
-        "updating": [4],
-        "updatingOptions": [16],
-        "variableRowHeight": [1040],
         "fromRow": [32],
         "previousRowsPerPage": [32],
         "rowsPerPage": [32],
@@ -572,19 +298,13 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         "selectedRow": [32],
         "sortedColumn": [32],
         "sortedColumnOrder": [32],
-        "toRow": [32],
-        "resetRowHeights": [64]
-    }, [[0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icPageChange", "handlePageChange"], [0, "icTableDensityUpdate", "handleDensityChange"], [8, "click", "clickListener"]], {
-        "loading": ["loadingHandler"],
-        "data": ["dataHandler"],
-        "globalRowHeight": ["rowHeightChangeHandler"],
-        "variableRowHeight": ["rowHeightChangeHandler"]
-    }]);
+        "toRow": [32]
+    }, [[0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icPageChange", "handlePageChange"], [8, "click", "clickListener"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ic-data-table", "ic-button", "ic-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"];
+    const components = ["ic-data-table", "ic-button", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-link", "ic-loading-indicator", "ic-menu", "ic-pagination", "ic-pagination-bar", "ic-pagination-item", "ic-select", "ic-text-field", "ic-tooltip", "ic-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "ic-data-table":
             if (!customElements.get(tagName)) {
@@ -592,11 +312,6 @@ function defineCustomElement$1() {
             }
             break;
         case "ic-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$h();
-            }
-            break;
-        case "ic-empty-state":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }