@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.0--canary.2134.ef608256dd1abad1333d432c8cc2958560d19738.0

package/dist/cjs/ifx-table.cjs.entry.js

@@ -321,10 +321,10 @@ class StatusCellRenderer {
 class CustomNoRowsOverlay {
     init(params) {
         this.eGui = document.createElement('div');
-        this.eGui.innerHTML = `
-            <div role="presentation" class="ag-overlay-loading-center" >
-               ${params.noRowsMessageFunc()}
-            </div>
+        this.eGui.innerHTML = `
+            <div role="presentation" class="ag-overlay-loading-center" >
+               ${params.noRowsMessageFunc()}
+            </div>
         `;
     }
     getGui() {
@@ -338,8 +338,8 @@ class CustomNoRowsOverlay {
 class CustomLoadingOverlay {
     init(_params) {
         this.eGui = document.createElement('div');
-        this.eGui.innerHTML = `<div class="ag-overlay-loading-center" role="presentation">
-<ifx-spinner></ifx-spinner>
+        this.eGui.innerHTML = `<div class="ag-overlay-loading-center" role="presentation">
+<ifx-spinner></ifx-spinner>
             </div>`;
     }
     getGui() {
@@ -386,6 +386,7 @@ const Table = class {
         this.enableSelection = false;
         this.selectedRows = new Set();
         this.selectAll = false;
+        this.selectedRowsData = new Map();
         this.showLoading = false;
         this.originalRowData = [];
         this.internalItemsPerPage = JSON.stringify([
@@ -395,12 +396,41 @@ const Table = class {
         ]);
         this.handleSelectAll = (checked) => {
             this.selectAll = checked;
+            const newSelectedRows = new Set(this.selectedRows);
+            const newSelectedRowsData = new Map(this.selectedRowsData);
             if (checked) {
-                this.selectedRows = new Set(this.allRowData.map(row => row.__rowId));
+                if (this.serverSidePagination) {
+                    this.rowData.forEach(row => {
+                        const rowId = row.__rowId;
+                        newSelectedRows.add(rowId);
+                        const cleanRow = __rest(row, ["__checkbox", "__rowId"]);
+                        newSelectedRowsData.set(rowId, cleanRow);
+                    });
+                }
+                else {
+                    this.allRowData.forEach(row => {
+                        const rowId = row.__rowId;
+                        newSelectedRows.add(rowId);
+                        const cleanRow = __rest(row, ["__checkbox", "__rowId"]);
+                        newSelectedRowsData.set(rowId, cleanRow);
+                    });
+                }
             }
             else {
-                this.selectedRows = new Set();
+                if (this.serverSidePagination) {
+                    this.rowData.forEach(row => {
+                        const rowId = row.__rowId;
+                        newSelectedRows.delete(rowId);
+                        newSelectedRowsData.delete(rowId);
+                    });
+                }
+                else {
+                    newSelectedRows.clear();
+                    newSelectedRowsData.clear();
+                }
             }
+            this.selectedRows = newSelectedRows;
+            this.selectedRowsData = newSelectedRowsData;
             this.updateCheckboxStates();
             this.updateHeaderCheckboxState();
             this.emitSelectionChange();
@@ -409,14 +439,25 @@ const Table = class {
             const clickedRowData = params.data;
             const rowId = clickedRowData.__rowId;
             const newSelectedRows = new Set(this.selectedRows);
+            const newSelectedRowsData = new Map(this.selectedRowsData);
             if (newSelectedRows.has(rowId)) {
                 newSelectedRows.delete(rowId);
+                newSelectedRowsData.delete(rowId);
             }
             else {
                 newSelectedRows.add(rowId);
+                const cleanRow = __rest(clickedRowData, ["__checkbox", "__rowId"]);
+                newSelectedRowsData.set(rowId, cleanRow);
             }
             this.selectedRows = newSelectedRows;
-            this.selectAll = newSelectedRows.size === this.allRowData.length;
+            this.selectedRowsData = newSelectedRowsData;
+            if (this.serverSidePagination) {
+                const currentPageSelectedCount = this.rowData.filter(row => newSelectedRows.has(row.__rowId)).length;
+                this.selectAll = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
+            }
+            else {
+                this.selectAll = newSelectedRows.size === this.allRowData.length && this.allRowData.length > 0;
+            }
             this.updateCheckboxStates();
             this.updateHeaderCheckboxState();
             this.emitSelectionChange();
@@ -538,10 +579,19 @@ const Table = class {
                 var _a;
                 const headerCheckbox = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('.ag-header-cell[col-id="__checkbox"] ifx-checkbox');
                 if (headerCheckbox) {
-                    const allSelected = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;
-                    const someSelected = this.selectedRows.size > 0 && this.selectedRows.size < this.allRowData.length;
-                    headerCheckbox.checked = allSelected;
-                    headerCheckbox.indeterminate = someSelected;
+                    if (this.serverSidePagination) {
+                        const currentPageSelectedCount = this.rowData.filter(row => this.selectedRows.has(row.__rowId)).length;
+                        const allOnPageSelected = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
+                        const someOnPageSelected = currentPageSelectedCount > 0 && currentPageSelectedCount < this.rowData.length;
+                        headerCheckbox.checked = allOnPageSelected;
+                        headerCheckbox.indeterminate = someOnPageSelected;
+                    }
+                    else {
+                        const allSelected = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;
+                        const someSelected = this.selectedRows.size > 0 && this.selectedRows.size < this.allRowData.length;
+                        headerCheckbox.checked = allSelected;
+                        headerCheckbox.indeterminate = someSelected;
+                    }
                 }
             }, 0);
         }
@@ -628,10 +678,8 @@ const Table = class {
                     if (!textFilterMatched)
                         return false;
                 }
-                // For multi-select filters, this remains unchanged
                 else if (filterInfo.type === 'multi-select') {
                     let rowValue = row[filterName] != null ? String(row[filterName]).toLowerCase() : '';
-                    // Check if 'undefined' is a selected value and include rows with empty values in that case
                     let includesUndefined = selectedValues.includes('undefined');
                     if (!selectedValues.includes(rowValue) && !(includesUndefined && rowValue === '')) {
                         return false;
@@ -642,30 +690,31 @@ const Table = class {
         });
     }
     async updateTableView() {
+        if (this.serverSidePagination) {
+            this.selectAll = false;
+        }
         if (this.serverSidePagination && this.serverPageChangeHandler) {
             const { rows, total } = await this.serverPageChangeHandler({
                 page: this.currentPage,
                 pageSize: this.paginationPageSize,
             });
-            if (this.enableSelection) {
-                rows.forEach((row, index) => {
-                    var _a;
-                    if (!row.__rowId) {
-                        row.__rowId = `row_${(this.currentPage - 1) * this.paginationPageSize + index}_${Date.now()}`;
-                    }
-                    row.__checkbox = {
-                        disabled: false,
-                        checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(row.__rowId)) || false,
-                        size: 's',
-                        indeterminate: false,
-                        error: false,
-                    };
-                });
-            }
+            rows.forEach((row, index) => {
+                var _a;
+                const rowId = row.sampleNumber || `row_${(this.currentPage - 1) * this.paginationPageSize + index}`;
+                row.__rowId = rowId;
+                row.__checkbox = {
+                    disabled: false,
+                    checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(rowId)) || false,
+                    size: 's',
+                    indeterminate: false,
+                    error: false,
+                };
+            });
             this.rowData = rows;
             this.matchingResultsCount = total;
             if (this.gridApi) {
                 this.gridApi.setGridOption('rowData', rows);
+                this.updateHeaderCheckboxState();
             }
             const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');
             if (paginationElement) {
@@ -673,9 +722,15 @@ const Table = class {
             }
         }
         else {
-            const startIndex = (this.currentPage - 1) * this.paginationPageSize;
-            const endIndex = startIndex + this.paginationPageSize;
-            const visibleRowData = this.allRowData.slice(startIndex, endIndex);
+            let visibleRowData;
+            if (this.pagination) {
+                const startIndex = (this.currentPage - 1) * this.paginationPageSize;
+                const endIndex = startIndex + this.paginationPageSize;
+                visibleRowData = this.allRowData.slice(startIndex, endIndex);
+            }
+            else {
+                visibleRowData = this.allRowData;
+            }
             if (this.enableSelection) {
                 visibleRowData.forEach(row => {
                     var _a, _b;
@@ -698,6 +753,7 @@ const Table = class {
             if (this.gridApi) {
                 this.gridApi.setGridOption('rowData', this.rowData);
             }
+            this.updateHeaderCheckboxState();
         }
     }
     clearAllFilters() {
@@ -854,16 +910,35 @@ const Table = class {
         });
     }
     async handlePageChange(event) {
+        if (!this.pagination) {
+            return;
+        }
         this.currentPage = event.detail.currentPage;
+        if (this.serverSidePagination) {
+            this.selectAll = false;
+        }
         if (this.serverSidePagination && this.serverPageChangeHandler) {
             const { rows, total } = await this.serverPageChangeHandler({
                 page: this.currentPage,
                 pageSize: this.paginationPageSize,
             });
+            rows.forEach((row, index) => {
+                var _a;
+                const rowId = row.sampleNumber || `row_${(this.currentPage - 1) * this.paginationPageSize + index}`;
+                row.__rowId = rowId;
+                row.__checkbox = {
+                    disabled: false,
+                    checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(rowId)) || false,
+                    size: 's',
+                    indeterminate: false,
+                    error: false,
+                };
+            });
             this.rowData = rows;
             this.matchingResultsCount = total;
             if (this.gridApi) {
                 this.gridApi.setGridOption('rowData', this.rowData);
+                this.updateHeaderCheckboxState();
             }
             const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');
             if (paginationElement) {
@@ -874,8 +949,27 @@ const Table = class {
             const startIndex = (this.currentPage - 1) * this.paginationPageSize;
             const endIndex = startIndex + this.paginationPageSize;
             const visibleRowData = this.allRowData.slice(startIndex, endIndex);
+            if (this.enableSelection) {
+                visibleRowData.forEach(row => {
+                    var _a, _b;
+                    if (!row.__checkbox) {
+                        row.__checkbox = {
+                            disabled: false,
+                            checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(row.__rowId)) || false,
+                            size: 's',
+                            indeterminate: false,
+                            error: false,
+                        };
+                    }
+                    else {
+                        row.__checkbox.checked = ((_b = this.selectedRows) === null || _b === void 0 ? void 0 : _b.has(row.__rowId)) || false;
+                    }
+                });
+            }
+            this.rowData = visibleRowData;
             if (this.gridApi) {
                 this.gridApi.setGridOption('rowData', visibleRowData);
+                this.updateHeaderCheckboxState();
             }
         }
     }
@@ -925,7 +1019,8 @@ const Table = class {
         return rows.slice(0, this.paginationPageSize);
     }
     updateCheckboxStates() {
-        this.allRowData.forEach(row => {
+        const dataToUpdate = this.rowData;
+        dataToUpdate.forEach(row => {
             if (row.__checkbox) {
                 row.__checkbox.checked = this.selectedRows.has(row.__rowId);
             }
@@ -938,20 +1033,20 @@ const Table = class {
         }
     }
     emitSelectionChange() {
-        const selectedRowsData = Array.from(this.selectedRows)
-            .map(rowId => {
-            const row = this.allRowData.find(r => r.__rowId === rowId);
-            if (!row)
-                return null;
-            const rowData = __rest(row, ["__checkbox", "__rowId"]);
-            return rowData;
-        })
-            .filter(row => row !== null);
+        const selectedRowsArray = Array.from(this.selectedRowsData.values());
+        let isSelectAll;
+        if (this.serverSidePagination) {
+            const currentPageSelectedCount = this.rowData.filter(row => this.selectedRows.has(row.__rowId)).length;
+            isSelectAll = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
+        }
+        else {
+            isSelectAll = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;
+        }
         this.host.dispatchEvent(new CustomEvent('ifxSelectionChange', {
             detail: {
-                selectedRows: selectedRowsData,
-                selectedCount: selectedRowsData.length,
-                isSelectAll: this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0,
+                selectedRows: selectedRowsArray,
+                selectedCount: selectedRowsArray.length,
+                isSelectAll: isSelectAll,
             },
             bubbles: true,
         }));
@@ -1075,12 +1170,12 @@ const Table = class {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : this.filterOrientation === 'none' ? '' : 'sidebar-layout';
-        return (index.h(index.Host, { key: 'aed3105d02de1b425538c01dd241a0cc8ad56862' }, index.h("div", { key: '4558eb8d179b08d909d6406a36987e2b424e2e3d', class: "table-container" }, this.filterOrientation === 'sidebar' && (index.h("div", { key: '3507914423eeceac168b20afcfbd9ca4314b70cd', class: "sidebar-btn" }, index.h("ifx-button", { key: '48ba9e71c7aaa1ac3fa1cb16aaddf55d4a5587ae', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, index.h("ifx-icon", { key: 'b08ca29c94a41b2510028d549edb8f8e161865f7', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), index.h("div", { key: '766df4ac67ac10a94418fadae0fd8a402adcf19f', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (index.h("div", { key: '89323404fb703cd96b5423c735a2d0b3047cc427', class: "sidebar-container" }, index.h("div", { key: '8cb80b12813e07f5671359dec7a37347f154a89f', class: "filters-title-container" }, index.h("span", { key: 'ed31fcf5e3a86323ebef8a3f38f8a32d63d68a31', class: "filters-title" }, "Filters")), index.h("div", { key: 'd76a86a785ffc46a7f364818a9b93ecea9158132', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && index.h("slot", { key: '0dc3ef1ef98bf48f99e1a9fab419d7173b20df43', name: "sidebar-filter" })))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (index.h("div", { key: '6f6046736499cb18dfb4d8910ddc587dce3ac37a', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && index.h("slot", { key: '6adf3eaaa45e7c43d6cdf4649de26f7bedf56e01', name: "topbar-filter" }))), index.h("div", { key: '18562ba4f47e25f18255ea1278962f9e2fc27cc2', class: "table-pagination-wrapper" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (index.h("div", { key: '8b8b49aa984ee4abd1800cbc81d874dd17ee1231', class: "filter-chips" }, Object.keys(this.currentFilters).map(name => {
+        return (index.h(index.Host, { key: 'a0421844e9c61683bd742e73f1809ffe3e0e6bad' }, index.h("div", { key: 'cdbddf03c9ec9508afe475280031ac789465c924', class: "table-container" }, this.filterOrientation === 'sidebar' && (index.h("div", { key: '9190967ad17c4bc873461f9679857aecfc42cf29', class: "sidebar-btn" }, index.h("ifx-button", { key: 'e6af658a82fa88e87b3b2cc3d377268d4b8e2cf4', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, index.h("ifx-icon", { key: '20be3fda6b40d956202c70dd8f2d5b8e27fccca1', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), index.h("div", { key: 'b886df2920915f2e26b9e92a29f95971c769fe0c', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (index.h("div", { key: '768e749d6bb7294581916fa350ab6db406fd56cc', class: "sidebar-container" }, index.h("div", { key: '00e5ee6ae4127e25ed6f354431fb50826a5738b7', class: "filters-title-container" }, index.h("span", { key: 'c40714d09dae34e2fe4ca75f4ddb12f4c81b37da', class: "filters-title" }, "Filters")), index.h("div", { key: '4c182b7dd4fe8996011025af996c1a2c8815c6d2', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && index.h("slot", { key: '8a7dc422f3e4382554eb2af47de00ed53442d1d5', name: "sidebar-filter" })))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (index.h("div", { key: '0f1ee29a1bc041554cdc65108136c646efc7b934', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && index.h("slot", { key: 'c9ce08d1026ebfc80ddd3a11bbe1b26a09e58c64', name: "topbar-filter" }))), index.h("div", { key: '12f0b8bcb4dcebe0b57779f09ac703a76c741df0', class: "table-pagination-wrapper" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (index.h("div", { key: '50fae34e9d7652ad2d27a2dbe10a973cc559f61b', class: "filter-chips" }, Object.keys(this.currentFilters).map(name => {
             const filter = this.currentFilters[name];
             const filterValues = filter.filterValues;
             const isMultiSelect = filter.type !== 'text';
             return filterValues.length > 0 ? (index.h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? 'multi' : 'single', readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (index.h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
-        }))), index.h("div", { key: '9dea2c6e676eb5b5c9a12507db3ce36ccb77690e', class: "headline-wrapper" }, this.filterOrientation !== 'none' && this.headline && (index.h("div", { key: 'ac4056b29fbe87a7df4b8e6c63c2018a270619a6', class: "matching-results-container" }, index.h("span", { key: '318c260b1d7218f07b00024feb6ab8e3b862e2a1', class: "matching-results-count" }, "(", this.matchingResultsCount, ")"), index.h("span", { key: '9ab7ca1283fdf966ba613e36d76ade4eec543997', class: "matching-results-text" }, this.headline))), index.h("div", { key: '3ce5feb6e709df11319a9da723f9acf7b71b3e68', class: "inner-buttons-wrapper" }, index.h("slot", { key: 'db3ad5aa4cd1c9f2b4a97c5766a9ac130c83c446', name: "inner-button" }))), index.h("div", { key: '889950920e705429bfd0a35e4c740cabe6052f08', id: "table-wrapper", class: this.getTableClassNames() }, index.h("div", { key: '71b42826058ed0dcc642e4a10599c68f9f1d4309', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ''}`, style: style, ref: el => (this.container = el) })), index.h("div", { key: '9b7170f76c1c49878ba4679f11418235d1e91cb9', class: "pagination-wrapper" }, this.pagination ? (index.h("ifx-pagination", { total: this.serverSidePagination ? this.matchingResultsCount : this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage })) : null))))));
+        }))), index.h("div", { key: 'a3d61c90ad5d8744be6c55d7790551a53d5388e9', class: "headline-wrapper" }, this.filterOrientation !== 'none' && this.headline && (index.h("div", { key: '598c04897a782b9f7fa8ea69b202e17c5db87142', class: "matching-results-container" }, index.h("span", { key: '174bbc64858c0b952eef4e289ec25a88f6a13ba5', class: "matching-results-count" }, "(", this.matchingResultsCount, ")"), index.h("span", { key: 'fa4e1a350a97794ba1c0390176d7413c19ff9286', class: "matching-results-text" }, this.headline))), index.h("div", { key: '52105af6541e2a5588dc0307c20d7e4b3e72220c', class: "inner-buttons-wrapper" }, index.h("slot", { key: 'fe68a9b64d3ed0fcbdb6a2ac9f2092fb9c921974', name: "inner-button" }))), index.h("div", { key: 'd3001b399da78d9e6005f4cf262a7f74b77b9cb4', id: "table-wrapper", class: this.getTableClassNames() }, index.h("div", { key: '4cc86621f42cb3c4de69618957297666e7df04a3', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ''}`, style: style, ref: el => (this.container = el) })), index.h("div", { key: 'ffea3142fecc04ca051aeeefd17dc9860ca8a1e1', class: "pagination-wrapper" }, this.pagination ? (index.h("ifx-pagination", { total: this.serverSidePagination ? this.matchingResultsCount : this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage })) : null))))));
     }
     hasButtonCol() {
         return this.getColData().some(column => column.field === 'button');