@infineon/infineon-design-system-stencil 39.4.4--canary.2136.61ca080385a85b28f9e73c1ac2fcb72fcc5e023a.0 → 39.5.0--canary.2134.ef608256dd1abad1333d432c8cc2958560d19738.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ifx-status.cjs.entry.js +1 -1
- package/dist/cjs/ifx-status.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-status.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-table.cjs.entry.js +137 -42
- package/dist/cjs/ifx-table.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-table.entry.cjs.js.map +1 -1
- package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/status/status.css +1 -1
- package/dist/collection/components/table-advanced-version/table.js +139 -43
- package/dist/collection/components/table-advanced-version/table.js.map +1 -1
- package/dist/components/ifx-status.js +1 -1
- package/dist/components/ifx-status.js.map +1 -1
- package/dist/components/ifx-table.js +138 -42
- package/dist/components/ifx-table.js.map +1 -1
- package/dist/esm/ifx-status.entry.js +1 -1
- package/dist/esm/ifx-status.entry.js.map +1 -1
- package/dist/esm/ifx-table.entry.js +137 -42
- package/dist/esm/ifx-table.entry.js.map +1 -1
- package/dist/esm/infineon-design-system-stencil.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/infineon-design-system-stencil/ifx-status.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-table.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/{p-abd8bd80.entry.js → p-39e3ee45.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-39e3ee45.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-65bc82a4.entry.js → p-f1ba768a.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-f1ba768a.entry.js.map +1 -0
- package/dist/types/components/table-advanced-version/table.d.ts +1 -0
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-65bc82a4.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-abd8bd80.entry.js.map +0 -1
|
@@ -45,6 +45,7 @@ export class Table {
|
|
|
45
45
|
this.enableSelection = false;
|
|
46
46
|
this.selectedRows = new Set();
|
|
47
47
|
this.selectAll = false;
|
|
48
|
+
this.selectedRowsData = new Map();
|
|
48
49
|
this.showLoading = false;
|
|
49
50
|
this.originalRowData = [];
|
|
50
51
|
this.internalItemsPerPage = JSON.stringify([
|
|
@@ -54,12 +55,41 @@ export class Table {
|
|
|
54
55
|
]);
|
|
55
56
|
this.handleSelectAll = (checked) => {
|
|
56
57
|
this.selectAll = checked;
|
|
58
|
+
const newSelectedRows = new Set(this.selectedRows);
|
|
59
|
+
const newSelectedRowsData = new Map(this.selectedRowsData);
|
|
57
60
|
if (checked) {
|
|
58
|
-
|
|
61
|
+
if (this.serverSidePagination) {
|
|
62
|
+
this.rowData.forEach(row => {
|
|
63
|
+
const rowId = row.__rowId;
|
|
64
|
+
newSelectedRows.add(rowId);
|
|
65
|
+
const { __checkbox, __rowId } = row, cleanRow = __rest(row, ["__checkbox", "__rowId"]);
|
|
66
|
+
newSelectedRowsData.set(rowId, cleanRow);
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
this.allRowData.forEach(row => {
|
|
71
|
+
const rowId = row.__rowId;
|
|
72
|
+
newSelectedRows.add(rowId);
|
|
73
|
+
const { __checkbox, __rowId } = row, cleanRow = __rest(row, ["__checkbox", "__rowId"]);
|
|
74
|
+
newSelectedRowsData.set(rowId, cleanRow);
|
|
75
|
+
});
|
|
76
|
+
}
|
|
59
77
|
}
|
|
60
78
|
else {
|
|
61
|
-
this.
|
|
79
|
+
if (this.serverSidePagination) {
|
|
80
|
+
this.rowData.forEach(row => {
|
|
81
|
+
const rowId = row.__rowId;
|
|
82
|
+
newSelectedRows.delete(rowId);
|
|
83
|
+
newSelectedRowsData.delete(rowId);
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
newSelectedRows.clear();
|
|
88
|
+
newSelectedRowsData.clear();
|
|
89
|
+
}
|
|
62
90
|
}
|
|
91
|
+
this.selectedRows = newSelectedRows;
|
|
92
|
+
this.selectedRowsData = newSelectedRowsData;
|
|
63
93
|
this.updateCheckboxStates();
|
|
64
94
|
this.updateHeaderCheckboxState();
|
|
65
95
|
this.emitSelectionChange();
|
|
@@ -68,14 +98,25 @@ export class Table {
|
|
|
68
98
|
const clickedRowData = params.data;
|
|
69
99
|
const rowId = clickedRowData.__rowId;
|
|
70
100
|
const newSelectedRows = new Set(this.selectedRows);
|
|
101
|
+
const newSelectedRowsData = new Map(this.selectedRowsData);
|
|
71
102
|
if (newSelectedRows.has(rowId)) {
|
|
72
103
|
newSelectedRows.delete(rowId);
|
|
104
|
+
newSelectedRowsData.delete(rowId);
|
|
73
105
|
}
|
|
74
106
|
else {
|
|
75
107
|
newSelectedRows.add(rowId);
|
|
108
|
+
const { __checkbox, __rowId } = clickedRowData, cleanRow = __rest(clickedRowData, ["__checkbox", "__rowId"]);
|
|
109
|
+
newSelectedRowsData.set(rowId, cleanRow);
|
|
76
110
|
}
|
|
77
111
|
this.selectedRows = newSelectedRows;
|
|
78
|
-
this.
|
|
112
|
+
this.selectedRowsData = newSelectedRowsData;
|
|
113
|
+
if (this.serverSidePagination) {
|
|
114
|
+
const currentPageSelectedCount = this.rowData.filter(row => newSelectedRows.has(row.__rowId)).length;
|
|
115
|
+
this.selectAll = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
|
|
116
|
+
}
|
|
117
|
+
else {
|
|
118
|
+
this.selectAll = newSelectedRows.size === this.allRowData.length && this.allRowData.length > 0;
|
|
119
|
+
}
|
|
79
120
|
this.updateCheckboxStates();
|
|
80
121
|
this.updateHeaderCheckboxState();
|
|
81
122
|
this.emitSelectionChange();
|
|
@@ -197,10 +238,19 @@ export class Table {
|
|
|
197
238
|
var _a;
|
|
198
239
|
const headerCheckbox = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('.ag-header-cell[col-id="__checkbox"] ifx-checkbox');
|
|
199
240
|
if (headerCheckbox) {
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
241
|
+
if (this.serverSidePagination) {
|
|
242
|
+
const currentPageSelectedCount = this.rowData.filter(row => this.selectedRows.has(row.__rowId)).length;
|
|
243
|
+
const allOnPageSelected = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
|
|
244
|
+
const someOnPageSelected = currentPageSelectedCount > 0 && currentPageSelectedCount < this.rowData.length;
|
|
245
|
+
headerCheckbox.checked = allOnPageSelected;
|
|
246
|
+
headerCheckbox.indeterminate = someOnPageSelected;
|
|
247
|
+
}
|
|
248
|
+
else {
|
|
249
|
+
const allSelected = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;
|
|
250
|
+
const someSelected = this.selectedRows.size > 0 && this.selectedRows.size < this.allRowData.length;
|
|
251
|
+
headerCheckbox.checked = allSelected;
|
|
252
|
+
headerCheckbox.indeterminate = someSelected;
|
|
253
|
+
}
|
|
204
254
|
}
|
|
205
255
|
}, 0);
|
|
206
256
|
}
|
|
@@ -287,10 +337,8 @@ export class Table {
|
|
|
287
337
|
if (!textFilterMatched)
|
|
288
338
|
return false;
|
|
289
339
|
}
|
|
290
|
-
// For multi-select filters, this remains unchanged
|
|
291
340
|
else if (filterInfo.type === 'multi-select') {
|
|
292
341
|
let rowValue = row[filterName] != null ? String(row[filterName]).toLowerCase() : '';
|
|
293
|
-
// Check if 'undefined' is a selected value and include rows with empty values in that case
|
|
294
342
|
let includesUndefined = selectedValues.includes('undefined');
|
|
295
343
|
if (!selectedValues.includes(rowValue) && !(includesUndefined && rowValue === '')) {
|
|
296
344
|
return false;
|
|
@@ -301,30 +349,31 @@ export class Table {
|
|
|
301
349
|
});
|
|
302
350
|
}
|
|
303
351
|
async updateTableView() {
|
|
352
|
+
if (this.serverSidePagination) {
|
|
353
|
+
this.selectAll = false;
|
|
354
|
+
}
|
|
304
355
|
if (this.serverSidePagination && this.serverPageChangeHandler) {
|
|
305
356
|
const { rows, total } = await this.serverPageChangeHandler({
|
|
306
357
|
page: this.currentPage,
|
|
307
358
|
pageSize: this.paginationPageSize,
|
|
308
359
|
});
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
};
|
|
322
|
-
});
|
|
323
|
-
}
|
|
360
|
+
rows.forEach((row, index) => {
|
|
361
|
+
var _a;
|
|
362
|
+
const rowId = row.sampleNumber || `row_${(this.currentPage - 1) * this.paginationPageSize + index}`;
|
|
363
|
+
row.__rowId = rowId;
|
|
364
|
+
row.__checkbox = {
|
|
365
|
+
disabled: false,
|
|
366
|
+
checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(rowId)) || false,
|
|
367
|
+
size: 's',
|
|
368
|
+
indeterminate: false,
|
|
369
|
+
error: false,
|
|
370
|
+
};
|
|
371
|
+
});
|
|
324
372
|
this.rowData = rows;
|
|
325
373
|
this.matchingResultsCount = total;
|
|
326
374
|
if (this.gridApi) {
|
|
327
375
|
this.gridApi.setGridOption('rowData', rows);
|
|
376
|
+
this.updateHeaderCheckboxState();
|
|
328
377
|
}
|
|
329
378
|
const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');
|
|
330
379
|
if (paginationElement) {
|
|
@@ -332,9 +381,15 @@ export class Table {
|
|
|
332
381
|
}
|
|
333
382
|
}
|
|
334
383
|
else {
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
384
|
+
let visibleRowData;
|
|
385
|
+
if (this.pagination) {
|
|
386
|
+
const startIndex = (this.currentPage - 1) * this.paginationPageSize;
|
|
387
|
+
const endIndex = startIndex + this.paginationPageSize;
|
|
388
|
+
visibleRowData = this.allRowData.slice(startIndex, endIndex);
|
|
389
|
+
}
|
|
390
|
+
else {
|
|
391
|
+
visibleRowData = this.allRowData;
|
|
392
|
+
}
|
|
338
393
|
if (this.enableSelection) {
|
|
339
394
|
visibleRowData.forEach(row => {
|
|
340
395
|
var _a, _b;
|
|
@@ -357,6 +412,7 @@ export class Table {
|
|
|
357
412
|
if (this.gridApi) {
|
|
358
413
|
this.gridApi.setGridOption('rowData', this.rowData);
|
|
359
414
|
}
|
|
415
|
+
this.updateHeaderCheckboxState();
|
|
360
416
|
}
|
|
361
417
|
}
|
|
362
418
|
clearAllFilters() {
|
|
@@ -513,16 +569,35 @@ export class Table {
|
|
|
513
569
|
});
|
|
514
570
|
}
|
|
515
571
|
async handlePageChange(event) {
|
|
572
|
+
if (!this.pagination) {
|
|
573
|
+
return;
|
|
574
|
+
}
|
|
516
575
|
this.currentPage = event.detail.currentPage;
|
|
576
|
+
if (this.serverSidePagination) {
|
|
577
|
+
this.selectAll = false;
|
|
578
|
+
}
|
|
517
579
|
if (this.serverSidePagination && this.serverPageChangeHandler) {
|
|
518
580
|
const { rows, total } = await this.serverPageChangeHandler({
|
|
519
581
|
page: this.currentPage,
|
|
520
582
|
pageSize: this.paginationPageSize,
|
|
521
583
|
});
|
|
584
|
+
rows.forEach((row, index) => {
|
|
585
|
+
var _a;
|
|
586
|
+
const rowId = row.sampleNumber || `row_${(this.currentPage - 1) * this.paginationPageSize + index}`;
|
|
587
|
+
row.__rowId = rowId;
|
|
588
|
+
row.__checkbox = {
|
|
589
|
+
disabled: false,
|
|
590
|
+
checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(rowId)) || false,
|
|
591
|
+
size: 's',
|
|
592
|
+
indeterminate: false,
|
|
593
|
+
error: false,
|
|
594
|
+
};
|
|
595
|
+
});
|
|
522
596
|
this.rowData = rows;
|
|
523
597
|
this.matchingResultsCount = total;
|
|
524
598
|
if (this.gridApi) {
|
|
525
599
|
this.gridApi.setGridOption('rowData', this.rowData);
|
|
600
|
+
this.updateHeaderCheckboxState();
|
|
526
601
|
}
|
|
527
602
|
const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');
|
|
528
603
|
if (paginationElement) {
|
|
@@ -533,8 +608,27 @@ export class Table {
|
|
|
533
608
|
const startIndex = (this.currentPage - 1) * this.paginationPageSize;
|
|
534
609
|
const endIndex = startIndex + this.paginationPageSize;
|
|
535
610
|
const visibleRowData = this.allRowData.slice(startIndex, endIndex);
|
|
611
|
+
if (this.enableSelection) {
|
|
612
|
+
visibleRowData.forEach(row => {
|
|
613
|
+
var _a, _b;
|
|
614
|
+
if (!row.__checkbox) {
|
|
615
|
+
row.__checkbox = {
|
|
616
|
+
disabled: false,
|
|
617
|
+
checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(row.__rowId)) || false,
|
|
618
|
+
size: 's',
|
|
619
|
+
indeterminate: false,
|
|
620
|
+
error: false,
|
|
621
|
+
};
|
|
622
|
+
}
|
|
623
|
+
else {
|
|
624
|
+
row.__checkbox.checked = ((_b = this.selectedRows) === null || _b === void 0 ? void 0 : _b.has(row.__rowId)) || false;
|
|
625
|
+
}
|
|
626
|
+
});
|
|
627
|
+
}
|
|
628
|
+
this.rowData = visibleRowData;
|
|
536
629
|
if (this.gridApi) {
|
|
537
630
|
this.gridApi.setGridOption('rowData', visibleRowData);
|
|
631
|
+
this.updateHeaderCheckboxState();
|
|
538
632
|
}
|
|
539
633
|
}
|
|
540
634
|
}
|
|
@@ -584,7 +678,8 @@ export class Table {
|
|
|
584
678
|
return rows.slice(0, this.paginationPageSize);
|
|
585
679
|
}
|
|
586
680
|
updateCheckboxStates() {
|
|
587
|
-
this.
|
|
681
|
+
const dataToUpdate = this.rowData;
|
|
682
|
+
dataToUpdate.forEach(row => {
|
|
588
683
|
if (row.__checkbox) {
|
|
589
684
|
row.__checkbox.checked = this.selectedRows.has(row.__rowId);
|
|
590
685
|
}
|
|
@@ -597,20 +692,20 @@ export class Table {
|
|
|
597
692
|
}
|
|
598
693
|
}
|
|
599
694
|
emitSelectionChange() {
|
|
600
|
-
const
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
695
|
+
const selectedRowsArray = Array.from(this.selectedRowsData.values());
|
|
696
|
+
let isSelectAll;
|
|
697
|
+
if (this.serverSidePagination) {
|
|
698
|
+
const currentPageSelectedCount = this.rowData.filter(row => this.selectedRows.has(row.__rowId)).length;
|
|
699
|
+
isSelectAll = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
|
|
700
|
+
}
|
|
701
|
+
else {
|
|
702
|
+
isSelectAll = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;
|
|
703
|
+
}
|
|
609
704
|
this.host.dispatchEvent(new CustomEvent('ifxSelectionChange', {
|
|
610
705
|
detail: {
|
|
611
|
-
selectedRows:
|
|
612
|
-
selectedCount:
|
|
613
|
-
isSelectAll:
|
|
706
|
+
selectedRows: selectedRowsArray,
|
|
707
|
+
selectedCount: selectedRowsArray.length,
|
|
708
|
+
isSelectAll: isSelectAll,
|
|
614
709
|
},
|
|
615
710
|
bubbles: true,
|
|
616
711
|
}));
|
|
@@ -734,12 +829,12 @@ export class Table {
|
|
|
734
829
|
};
|
|
735
830
|
}
|
|
736
831
|
const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : this.filterOrientation === 'none' ? '' : 'sidebar-layout';
|
|
737
|
-
return (h(Host, { key: '
|
|
832
|
+
return (h(Host, { key: 'a0421844e9c61683bd742e73f1809ffe3e0e6bad' }, h("div", { key: 'cdbddf03c9ec9508afe475280031ac789465c924', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '9190967ad17c4bc873461f9679857aecfc42cf29', class: "sidebar-btn" }, h("ifx-button", { key: 'e6af658a82fa88e87b3b2cc3d377268d4b8e2cf4', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '20be3fda6b40d956202c70dd8f2d5b8e27fccca1', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'b886df2920915f2e26b9e92a29f95971c769fe0c', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '768e749d6bb7294581916fa350ab6db406fd56cc', class: "sidebar-container" }, h("div", { key: '00e5ee6ae4127e25ed6f354431fb50826a5738b7', class: "filters-title-container" }, h("span", { key: 'c40714d09dae34e2fe4ca75f4ddb12f4c81b37da', class: "filters-title" }, "Filters")), h("div", { key: '4c182b7dd4fe8996011025af996c1a2c8815c6d2', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && h("slot", { key: '8a7dc422f3e4382554eb2af47de00ed53442d1d5', name: "sidebar-filter" })))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '0f1ee29a1bc041554cdc65108136c646efc7b934', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && h("slot", { key: 'c9ce08d1026ebfc80ddd3a11bbe1b26a09e58c64', name: "topbar-filter" }))), h("div", { key: '12f0b8bcb4dcebe0b57779f09ac703a76c741df0', class: "table-pagination-wrapper" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (h("div", { key: '50fae34e9d7652ad2d27a2dbe10a973cc559f61b', class: "filter-chips" }, Object.keys(this.currentFilters).map(name => {
|
|
738
833
|
const filter = this.currentFilters[name];
|
|
739
834
|
const filterValues = filter.filterValues;
|
|
740
835
|
const isMultiSelect = filter.type !== 'text';
|
|
741
836
|
return filterValues.length > 0 ? (h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? 'multi' : 'single', readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
|
|
742
|
-
}))), h("div", { key: '
|
|
837
|
+
}))), h("div", { key: 'a3d61c90ad5d8744be6c55d7790551a53d5388e9', class: "headline-wrapper" }, this.filterOrientation !== 'none' && this.headline && (h("div", { key: '598c04897a782b9f7fa8ea69b202e17c5db87142', class: "matching-results-container" }, h("span", { key: '174bbc64858c0b952eef4e289ec25a88f6a13ba5', class: "matching-results-count" }, "(", this.matchingResultsCount, ")"), h("span", { key: 'fa4e1a350a97794ba1c0390176d7413c19ff9286', class: "matching-results-text" }, this.headline))), h("div", { key: '52105af6541e2a5588dc0307c20d7e4b3e72220c', class: "inner-buttons-wrapper" }, h("slot", { key: 'fe68a9b64d3ed0fcbdb6a2ac9f2092fb9c921974', name: "inner-button" }))), h("div", { key: 'd3001b399da78d9e6005f4cf262a7f74b77b9cb4', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '4cc86621f42cb3c4de69618957297666e7df04a3', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ''}`, style: style, ref: el => (this.container = el) })), h("div", { key: 'ffea3142fecc04ca051aeeefd17dc9860ca8a1e1', class: "pagination-wrapper" }, this.pagination ? (h("ifx-pagination", { total: this.serverSidePagination ? this.matchingResultsCount : this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage })) : null))))));
|
|
743
838
|
}
|
|
744
839
|
hasButtonCol() {
|
|
745
840
|
return this.getColData().some(column => column.field === 'button');
|
|
@@ -1117,7 +1212,8 @@ export class Table {
|
|
|
1117
1212
|
"showSidebarFilters": {},
|
|
1118
1213
|
"matchingResultsCount": {},
|
|
1119
1214
|
"selectedRows": {},
|
|
1120
|
-
"selectAll": {}
|
|
1215
|
+
"selectAll": {},
|
|
1216
|
+
"selectedRowsData": {}
|
|
1121
1217
|
};
|
|
1122
1218
|
}
|
|
1123
1219
|
static get methods() {
|