@ukic/canary-web-components 3.0.0-canary.5 → 3.0.0-canary.6

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

@@ -29,7 +29,7 @@ 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:inline-flex;max-height:100%;width:var(--table-width, 100%);height:100%;min-width:var(--table-min-width);max-width:var(--table-max-width)}tbody{vertical-align:top}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs));display:flex;flex-direction:column;width:100%}.cell-container{display:flex;min-height:1.5rem;overflow-y:hidden;height:var(--row-height);--ic-typography-color:var(--ic-data-table-text-default-emphasis)}.truncation-show-hide{overflow:visible;display:block}.cell-icon.truncation-show-hide{display:flex}.cell-container:not(.data-type-element,.truncation-show-hide){overflow-x:hidden}ic-loading-indicator{position:sticky;top:20px}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:var(--table-layout, \"fixed\");border-spacing:0;width:100%;height:var(--table-height, auto)}.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-space-1px) solid var(--ic-data-table-border)}.column-header-inner-container{padding:var(--ic-space-xs);box-sizing:border-box}.column-header-inner-container ic-tooltip{pointer-events:none}.column-header-inner-container ic-tooltip.show-trunc-tooltip{pointer-events:auto}.column-header-inner-container ic-tooltip .column-header-text{--ic-line-clamp:1}.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-data-table-cell-background-selected) !important}.table-row:hover{background-color:var(--ic-data-table-cell-background-hover) !important}.table-row-selected:hover{background-color:var(\n    --ic-data-table-cell-background-selected-hover\n  ) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-data-table-icon-button-background-hover)}.sort-button:active{background-color:var(--ic-data-table-icon-button-background-pressed)}.sort-button svg{color:var(--ic-data-table-sort-toggle-icon)}.sort-button-unsorted svg{color:var(--ic-data-table-sort-toggle-icon-default)}.table-density-dense .column-header-inner-container,td.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 .column-header-inner-container,td.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)}.dummy-column-header-text{white-space:nowrap;overflow:hidden;height:0;width:-moz-fit-content;width:fit-content}.row-header,.column-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-data-table-header-background);border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);color:var(--ic-data-table-header-text)}.column-header{padding:0;width:var(--column-width);min-width:var(--column-min-width, 4rem);max-width:var(--column-max-width)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important;justify-content:start !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important;justify-content:end !important}.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography{padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.cell-alignment-right.truncation-show-hide ic-typography{--ellipsis-padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important;justify-content:center !important}.table-row{background-color:var(--ic-data-table-cell-background)}.table-row:nth-child(even){background-color:var(--ic-data-table-cell-background-stripe)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-data-table-cell-keyline) var(--ic-space-1px);overflow:hidden;box-sizing:border-box;max-width:var(--column-max-width);min-width:var(--column-min-width)}.table-cell.with-overflow{overflow:visible}.data-type-string,.data-type-address{text-align:left;vertical-align:top}.data-type-number,.data-type-date{text-align:right;justify-content:end;vertical-align:top}.cell-alignment-top{vertical-align:top;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 ic-typography{--ic-typography-color:var(--ic-data-table-text-low-emphasis)}.cell-emphasis-high ic-typography{--ic-typography-color:var(--ic-data-table-text-high-emphasis);font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-data-table-pagination-bar-background-color);border-top:var(--ic-space-1px) solid\n    var(--ic-data-table-pagination-bar-keyline)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}.loading-empty{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}.updating-state{padding:0;border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline)}.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-data-table-overlay-background);border:var(--ic-space-1px) solid var(--ic-data-table-overlay-border)}.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 .icon>svg,.column-header ::slotted(svg){fill:var(--ic-data-table-icon)}.table-cell .icon>svg,.table-cell ::slotted(svg){fill:var(--ic-data-table-icon-default-emphasis)}.cell-emphasis-high .icon>svg,.cell-emphasis-high ::slotted(svg){fill:var(--ic-data-table-icon-high-emphasis)}.cell-emphasis-low .icon>svg,.cell-emphasis-low ::slotted(svg){fill:var(--ic-data-table-icon-low-emphasis)}.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}.truncation-tooltip ic-typography{display:-webkit-box;-webkit-line-clamp:var(--ic-line-clamp, 0);-webkit-box-orient:vertical;overflow:hidden}.truncation-tooltip ic-typography,.truncation-show-hide ic-typography{white-space:normal}.ic-tooltip-overflow{overflow:hidden;width:100%}@media screen and (min-width: 577px){.column-header-inner-container{display:flex;align-items:center}}";
+const icDataTableCss = ":host{position:relative;display:inline-flex;max-height:100%;width:var(--table-width, 100%);height:100%;min-width:var(--table-min-width);max-width:var(--table-max-width)}tbody{vertical-align:top}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs));display:flex;flex-direction:column;width:100%}.cell-container{display:flex;min-height:1.5rem;overflow-y:hidden;height:var(--row-height);--ic-typography-color:var(--ic-data-table-text-default-emphasis)}.truncation-show-hide{overflow:visible;display:block}.cell-icon.truncation-show-hide{display:flex}.cell-container:not(.data-type-element,.truncation-show-hide){overflow-x:hidden}ic-loading-indicator{position:sticky;top:20px}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:var(--table-layout, \"fixed\");border-spacing:0;width:100%;height:var(--table-height, auto)}.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-space-1px) solid var(--ic-data-table-border)}.column-header-inner-container{padding:var(--ic-space-xs);box-sizing:border-box}.column-header-inner-container ic-tooltip{pointer-events:none}.column-header-inner-container ic-tooltip.show-trunc-tooltip{pointer-events:auto}.column-header-inner-container ic-tooltip .column-header-text{--ic-line-clamp:1}.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-data-table-cell-background-selected) !important}.table-row:hover{background-color:var(--ic-data-table-cell-background-hover) !important}.table-row-selected:hover{background-color:var(\n    --ic-data-table-cell-background-selected-hover\n  ) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-data-table-icon-button-background-hover)}.sort-button:active{background-color:var(--ic-data-table-icon-button-background-pressed)}.sort-button svg{color:var(--ic-data-table-sort-toggle-icon)}.sort-button-unsorted svg{color:var(--ic-data-table-sort-toggle-icon-default)}.table-density-dense .column-header-inner-container,td.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 .column-header-inner-container,td.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)}.dummy-column-header-text{white-space:nowrap;overflow:hidden;height:0;width:-moz-fit-content;width:fit-content}.row-header,.column-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-data-table-header-background);border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);color:var(--ic-data-table-header-text)}.column-header{padding:0;width:var(--column-width);min-width:var(--column-min-width, 4rem);max-width:var(--column-max-width)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important;justify-content:start !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important;justify-content:end !important}.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography{padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.cell-alignment-right.truncation-show-hide ic-typography{--ellipsis-padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important;justify-content:center !important}.table-row{background-color:var(--ic-data-table-cell-background)}.table-row:nth-child(even){background-color:var(--ic-data-table-cell-background-stripe)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-data-table-cell-keyline) var(--ic-space-1px);overflow:hidden;box-sizing:border-box;max-width:var(--column-max-width);min-width:var(--column-min-width)}.table-cell.with-overflow{overflow:visible}.data-type-string,.data-type-address{text-align:left;vertical-align:top}.data-type-number,.data-type-date{text-align:right;justify-content:end;vertical-align:top}.cell-alignment-top{vertical-align:top;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 ic-typography{--ic-typography-color:var(--ic-data-table-text-low-emphasis)}.cell-emphasis-high ic-typography{--ic-typography-color:var(--ic-data-table-text-high-emphasis);font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-data-table-pagination-bar-background-color);border-top:var(--ic-space-1px) solid\n    var(--ic-data-table-pagination-bar-keyline)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}.loading-empty{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}.updating-state{padding:0;border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline)}.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-data-table-overlay-background);border:var(--ic-space-1px) solid var(--ic-data-table-overlay-border)}.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 .icon>svg,.column-header ::slotted(svg){fill:var(--ic-data-table-icon)}.table-cell .icon>svg,.table-cell ::slotted(svg){fill:var(--ic-data-table-icon-default-emphasis)}.cell-emphasis-high .icon>svg,.cell-emphasis-high ::slotted(svg){fill:var(--ic-data-table-icon-high-emphasis)}.cell-emphasis-low .icon>svg,.cell-emphasis-low ::slotted(svg){fill:var(--ic-data-table-icon-low-emphasis)}.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}.truncation-tooltip ic-typography{display:-webkit-box;-webkit-line-clamp:var(--ic-line-clamp, 0);-webkit-box-orient:vertical;overflow:hidden}.truncation-tooltip ic-typography,.truncation-show-hide ic-typography{white-space:normal}.ic-tooltip-overflow{overflow:hidden;width:100%}.action-element{display:flex;justify-content:right}.cell-grid-wrapper{display:grid;grid-template-columns:auto auto}@media screen and (min-width: 577px){.column-header-inner-container{display:flex;align-items:center}}";
 
 const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLElement {
     constructor() {
@@ -233,7 +233,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 this.timerStarted = null;
             }, this.minimumLoadingDisplayDuration);
         };
-        this.isObject = (value) => typeof value === "object";
+        this.isObject = (value) => value !== undefined && value !== null && typeof value === "object";
         this.notDefaultDensity = () => this.density !== "default";
         this.getCellContent = (cell, dataType) => {
             switch (dataType) {
@@ -299,6 +299,44 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             }
             return {};
         };
+        this.adjustWidthForActionElement = () => {
+            const elements = this.el.shadowRoot.querySelectorAll(".action-element");
+            elements.forEach((element) => {
+                const width = element.firstChild.getBoundingClientRect()
+                    .width;
+                const gridWrapper = element.closest(".cell-grid-wrapper");
+                gridWrapper.style.gridTemplateColumns = `auto calc(${width}px + var(--ic-space-xs))`;
+            });
+        };
+        this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            return (h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
+                    !isSlotUsed(this.el, cellSlotName)
+                    ? cell
+                    : null, class: 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) ||
+                        !!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")) ||
+                        (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()), style: Object.assign(Object.assign({}, this.getRowHeight(currentRowHeight, columnProps, rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap, cell)), 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" &&
+                !isSlotUsed(this.el, cellSlotName) && (h("ic-typography", { variant: "body", class: {
+                    [`text-${this.density}`]: this.notDefaultDensity(),
+                } }, this.isObject(cell) && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href"), theme: this.theme, target: cellValue("target") || undefined, rel: cellValue("rel") || undefined }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType))))))));
+        };
         this.createCells = (row, rowIndex) => {
             var _a;
             const rowValues = Object.values(row);
@@ -316,7 +354,6 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 ? variableRowHeightVal !== "auto" && variableRowHeightVal
                 : this.globalRowHeight !== "auto" && this.globalRowHeight;
             return rowValues.map((cell, index) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                 const columnProps = this.columns[index];
                 const cellSlotName = `${columnProps === null || columnProps === void 0 ? void 0 : columnProps.key}-${rowIndex}`;
                 const hasIcon = this.isObject(cell) && Object.keys(cell).includes("icon");
@@ -333,66 +370,39 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                             ["table-cell"]: true,
                             [`table-density-${this.density}`]: this.notDefaultDensity(),
                             ["with-overflow"]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element",
-                        }, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
-                            !isSlotUsed(this.el, cellSlotName)
-                            ? cell
-                            : null, class: 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) ||
-                                !!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")) ||
-                                (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()), style: Object.assign(Object.assign({}, this.getRowHeight(currentRowHeight, columnProps, rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap, cell)), 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" &&
-                        !isSlotUsed(this.el, cellSlotName) && (h("ic-typography", { variant: "body", class: {
-                            [`text-${this.density}`]: this.notDefaultDensity(),
-                        } }, this.isObject(cell) &&
-                        (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href"), theme: this.theme }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType)))))))));
+                        }, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, this.isObject(cell) &&
+                        Object.keys(cell).includes("actionElement") ? (h("div", { class: "cell-grid-wrapper" }, this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis), h("span", { class: "action-element", innerHTML: cellValue("actionElement") }))) : (this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis))));
                 }
             });
         };
-        this.createColumnHeaders = () => {
-            return this.columns.map(({ cellAlignment, colspan, icon, key, title, columnWidth }, index) => (h("th", { scope: "col", class: {
-                    ["column-header"]: true,
-                    [`table-density-${this.density}`]: this.notDefaultDensity(),
-                    ["updating-state-headers"]: this.updating && !this.loading,
-                }, style: Object.assign({}, this.getColumnWidth(columnWidth)), colSpan: colspan }, h("div", { class: {
-                    "column-header-inner-container": true,
-                    "truncation-tooltip": this.columnHeaderTruncation,
-                    [`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 }))), this.columnHeaderTruncation ? (h("ic-tooltip", { label: title, target: `column-header-${index}` }, h("ic-typography", { id: `column-header-${index}`, variant: "body", class: {
-                    ["column-header-text"]: true,
-                    [`text-${this.density}`]: this.notDefaultDensity(),
-                } }, title))) : (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),
-                // eslint-disable-next-line react/jsx-no-bind
-                onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
-                    ? this.sortedColumnOrder
-                    : "unsorted"], class: {
-                    ["sort-button"]: true,
-                    ["sort-button-unsorted"]: this.sortedColumn !== key ||
-                        this.sortedColumnOrder === "unsorted",
-                } }))), this.columnHeaderTruncation && (h("ic-typography", { variant: "body", "aria-hidden": "true", class: {
-                    ["column-header-text"]: true,
-                    ["dummy-column-header-text"]: this.columnHeaderTruncation,
-                    [`text-${this.density}`]: this.notDefaultDensity(),
-                } }, title)))));
-        };
+        this.createColumnHeaders = () => this.columns.map(({ cellAlignment, colspan, icon, key, title, columnWidth }, index) => (h("th", { scope: "col", class: {
+                ["column-header"]: true,
+                [`table-density-${this.density}`]: this.notDefaultDensity(),
+                ["updating-state-headers"]: this.updating && !this.loading,
+            }, style: Object.assign({}, this.getColumnWidth(columnWidth)), colSpan: colspan }, h("div", { class: {
+                "column-header-inner-container": true,
+                "truncation-tooltip": this.columnHeaderTruncation,
+                [`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 }))), this.columnHeaderTruncation ? (h("ic-tooltip", { label: title, target: `column-header-${index}` }, h("ic-typography", { id: `column-header-${index}`, variant: "body", class: {
+                ["column-header-text"]: true,
+                [`text-${this.density}`]: this.notDefaultDensity(),
+            } }, title))) : (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),
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
+                ? this.sortedColumnOrder
+                : "unsorted"], class: {
+                ["sort-button"]: true,
+                ["sort-button-unsorted"]: this.sortedColumn !== key ||
+                    this.sortedColumnOrder === "unsorted",
+            } }))), this.columnHeaderTruncation && (h("ic-typography", { variant: "body", "aria-hidden": "true", class: {
+                ["column-header-text"]: true,
+                ["dummy-column-header-text"]: this.columnHeaderTruncation,
+                [`text-${this.density}`]: this.notDefaultDensity(),
+            } }, title)))));
         this.onRowClick = (row) => {
             this.selectedRow =
                 this.selectedRow !== row && !this.loading && !this.updating && row;
@@ -673,6 +683,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
     }
     componentDidRender() {
         this.fixCellTooltips();
+        this.adjustWidthForActionElement();
     }
     truncateUpdatedData() {
         if (this.dataUpdated) {