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

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

@@ -365,7 +365,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         };
         this.createUpdatingIndicator = () => {
             const { description, max, min, progress, monochrome } = this.updatingOptions || {};
-            return (h("th", { colSpan: this.columns.length, class: "updating-state" }, h("ic-loading-indicator", { theme: this.theme, monochrome: monochrome, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
+            return (h("th", { colSpan: this.columns.length + (this.rowSelection && this.data ? 1 : 0), class: "updating-state" }, h("ic-loading-indicator", { theme: this.theme, monochrome: monochrome, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
         };
         this.setRowHeight = (height) => pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
             this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
@@ -454,21 +454,21 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         };
         this.createCells = (row, rowIndex) => {
             var _a;
-            const rowValues = Object.values(row);
             const rowKeys = Object.keys(row);
-            const rowOptions = this.getRowOptions(rowKeys, rowValues);
+            const rowOptions = this.getObjectValue(row, "rowOptions");
             let rowAlignment;
             let rowEmphasis;
-            const headerIndex = rowKeys.indexOf("header");
-            if (headerIndex > -1) {
-                rowAlignment = this.getObjectValue(rowValues[headerIndex], "rowAlignment");
-                rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
+            const rowHeader = this.getObjectValue(row, "header");
+            if (rowHeader) {
+                rowAlignment = this.getObjectValue(rowHeader, "rowAlignment");
+                rowEmphasis = this.getObjectValue(rowHeader, "emphasis");
             }
             const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index: rowIndex }));
             const currentRowHeight = variableRowHeightVal
                 ? variableRowHeightVal !== "auto" && variableRowHeightVal
                 : this.globalRowHeight !== "auto" && this.globalRowHeight;
-            return rowValues.map((cell, index) => {
+            return this.columns.map((columnName, index) => {
+                const cell = this.getObjectValue(row, columnName["key"]);
                 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");
@@ -1251,10 +1251,6 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         }
         (_c = this.loadingIndicator) === null || _c === void 0 ? void 0 : _c.classList.add("show");
     }
-    getRowOptions(rowKeys, rowValues) {
-        const rowOptionsIndex = rowKeys.indexOf("rowOptions");
-        return rowOptionsIndex > -1 && rowValues[rowOptionsIndex];
-    }
     regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly) {
         // When sorting the table, instead of regenerating the tooltip,
         // the tooltip details are updated
@@ -1330,22 +1326,22 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 ? "deselect all"
                 : "select all remaining"
             : "select all";
-        return (h(Host, { key: 'c70d98425c01e5f0d7b23d12a0a22fcde6bfa8aa', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: 'b7411965f1bd64038922da836d86791d9fce0766', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: 'de14d3c9613fc5f216f9318c8b584a4fe6d7d0b9', name: "title-bar" }), h("div", { key: 'c28d8074bb81266c7104ce842b2ea0e415ea7576', class: {
+        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: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '283aac0915752eb13c7651fe2594cbbce7eb1164', style: {
+            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '7c7fe1ce4ff82644f52325129f392b5d6dfb7635', style: {
                 "--table-layout": tableLayout,
-            } }, h("caption", { key: '9d49941bb4a1f14337af61c35057895a32466c0e', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: '970d0ecda5d04b06b394f0f1cf1e58dfdd93660f', class: {
+            } }, h("caption", { key: 'de772f10cbaa802c0df5be9225312a946b64fdaa', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: '5e41deeb29ab3a0f4b2daf9a17b6ed0cd2a756e7', class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
-            } }, h("tr", { key: 'dd2b7e0e731a8652d726b98c4d4b53de1d4bc89a' }, rowSelection && data && (h("th", { key: 'd1c97faa5830737aa4c9d7020b7bf89a2357d127', class: {
+            } }, h("tr", { key: '93b3e712a034c666d90329bcd0c9e05d64f2633b' }, rowSelection && data && (h("th", { key: '38be7fab691d5cf1db9c817134dc2fa64b28073e', class: {
                 "column-header": true,
                 "checkbox-cell": true,
                 "updating-state-headers": updating && !loading,
                 [`table-density-${density}`]: this.notDefaultDensity(),
-            } }, h("div", { key: '93aad327435bc6bc944fc3c7e141c0281beb421b', class: "checkbox-wrapper" }, h("ic-checkbox", { key: '9f984d73bf5172d756d1553c631a571adad238f6', 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: '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 &&
             !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: '3b3d4811530dabad832180f06631b32724b7c3c8', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: '4efe794f7f5e48ff1ad762780b5a8e3f291cb8f0', 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: '2eadf2de56bcbccfdb70707846a5eaa920cba050', 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: '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
             ? `${((_b = columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) ||
                 sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted")))));