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

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

@@ -219,6 +219,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             }
             this.truncate(typographyEl, cellContainer, tooltip);
         };
+        this.getTruncWrapper = (typographyEl) => typographyEl.shadowRoot.querySelector(".trunc-wrapper");
         this.removeTextWrap = () => {
             this.getTypographyElements().forEach((typographyEl) => {
                 const tableCell = typographyEl.closest("td");
@@ -270,12 +271,9 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             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 = {};
@@ -461,9 +459,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 }, 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) => {
@@ -714,22 +710,23 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         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;
@@ -1005,9 +1002,6 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         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, }) {
@@ -1246,7 +1240,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
     }
     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,
@@ -1257,7 +1251,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 ["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")))));
     }