@ukic/canary-web-components 2.0.0-canary.34 → 2.0.0-canary.36

package/dist/esm/ic-data-table.entry.js

@@ -201,6 +201,7 @@ const DataTable = class {
             }
             this.truncate(typographyEl, cellContainer, tooltip);
         };
+        this.getTruncWrapper = (typographyEl) => typographyEl.shadowRoot.querySelector(".trunc-wrapper");
         this.removeTextWrap = () => {
             this.getTypographyElements().forEach((typographyEl) => {
                 const tableCell = typographyEl.closest("td");
@@ -252,12 +253,9 @@ const DataTable = class {
             return pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
                 this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
         };
-        this.setTruncationClass = () => {
-            if (this.truncationPattern) {
-                return { [`truncation-${this.truncationPattern}`]: true };
-            }
-            return {};
-        };
+        this.setTruncationClass = () => this.truncationPattern
+            ? { [`truncation-${this.truncationPattern}`]: true }
+            : {};
         this.getColumnWidth = (columnWidth) => {
             // TODO: Setting max width on columns
             let columnWidthStyling = {};
@@ -371,7 +369,7 @@ const DataTable = class {
                         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"),
                         // eslint-disable-next-line react/jsx-no-bind
                         onClick: cell.actionOnClick
-                            ? () => this.handleClick(cell.actionOnClick)
+                            ? (event) => this.handleClick(event, cell.actionOnClick)
                             : undefined }))) : (this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis))));
                 }
             });
@@ -432,7 +430,9 @@ const DataTable = class {
                     : row;
             });
             return organisedData
-                .sort(!this.sortable ? undefined : this.getSortFunction())
+                .sort(!this.sortable || this.disableAutoSort
+                ? undefined
+                : this.getSortFunction())
                 .map((row, index) => {
                 return (h("tr", {
                     // eslint-disable-next-line react/jsx-no-bind
@@ -443,9 +443,7 @@ const DataTable = class {
                 }, this.createCells(row, index)));
             });
         };
-        this.getObjectValue = (cell, key) => {
-            return Object.values(cell)[Object.keys(cell).indexOf(key)];
-        };
+        this.getObjectValue = (cell, key) => Object.values(cell)[Object.keys(cell).indexOf(key)];
         this.getSortButtonLabel = (key) => {
             let label = "";
             const getNextSortOption = (option) => {
@@ -622,7 +620,7 @@ const DataTable = class {
                 }
             });
         };
-        this.handleClick = (callback) => callback();
+        this.handleClick = (event, callback) => callback(event);
         this.renderTableBody = (data, loading, overlay) => {
             if (!(data === null || data === void 0 ? void 0 : data.length))
                 return;
@@ -684,6 +682,7 @@ const DataTable = class {
         this.columnHeaderTruncation = false;
         this.columns = undefined;
         this.data = undefined;
+        this.disableAutoSort = false;
         this.density = "default";
         this.embedded = false;
         this.globalRowHeight = "auto";
@@ -696,22 +695,23 @@ const DataTable = class {
         this.minWidth = undefined;
         this.minimumLoadingDisplayDuration = 1000;
         this.paginationBarOptions = {
+            alignment: "right",
+            appearance: "default",
+            hideAllFromItemsPerPage: false,
+            hideRangeLabel: false,
+            itemLabel: "Item",
             itemsPerPageOptions: [
                 { label: "10", value: "10" },
                 { label: "25", value: "25" },
                 { label: "50", value: "50" },
             ],
-            rangeLabelType: "page",
-            type: "simple",
-            showItemsPerPageControl: true,
-            showGoToPageControl: true,
-            alignment: "right",
-            appearance: "default",
-            itemLabel: "Item",
             pageLabel: "Page",
-            hideRangeLabel: false,
-            hideAllFromItemsPerPage: false,
+            rangeLabelType: "page",
+            selectedItemsPerPage: 10,
             setToFirstPageOnPaginationChange: false,
+            showGoToPageControl: true,
+            showItemsPerPageControl: true,
+            type: "simple",
         };
         this.showPagination = false;
         this.sortable = false;
@@ -987,9 +987,6 @@ const DataTable = class {
         cellContainer.classList.add(this.SHOW_HIDE_CSS_CLASS);
         this.createShowHideTruncation(typographyEl, cellContainer);
     }
-    getTruncWrapper(typographyEl) {
-        return typographyEl.shadowRoot.querySelector(".trunc-wrapper");
-    }
     // Set the height to initial if row height is set and the show / hide truncation
     // is clicked
     handleTypographyTruncationExpandToggle({ detail, }) {
@@ -1228,7 +1225,7 @@ const DataTable = class {
     }
     render() {
         var _a;
-        const { caption, createColumnHeaders, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, updating, } = this;
+        const { caption, createColumnHeaders, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumn, sortedColumnOrder, stickyColumnHeaders, updateScrollOffset, updating, } = this;
         return (h(Host, { style: Object.assign({}, this.setTableDimensions()) }, h("div", { class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { name: "title-bar" }), h("div", { class: {
                 ["table-row-container"]: true,
                 scrollable,
@@ -1239,7 +1236,7 @@ const DataTable = class {
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
             } }, h("tr", null, createColumnHeaders()))), updating &&
             !loading &&
-            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(data, loading, loadingOptions.overlay)), this.renderEmptyState(data, loading, loadingOptions.overlay)), h("div", { "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type, rangeLabelType: paginationBarOptions.rangeLabelType, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, showGoToPageControl: paginationBarOptions.showGoToPageControl, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, alignment: paginationBarOptions.alignment, appearance: paginationBarOptions.appearance, itemLabel: paginationBarOptions.itemLabel, pageLabel: paginationBarOptions.pageLabel, hideRangeLabel: paginationBarOptions.hideRangeLabel, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange })))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+            (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(data, loading, loadingOptions.overlay)), this.renderEmptyState(data, loading, loadingOptions.overlay)), h("div", { "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, appearance: paginationBarOptions.appearance, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
             ? `${sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted")))));
     }