@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
|
@@ -384,6 +384,7 @@ const Table = class {
|
|
|
384
384
|
this.enableSelection = false;
|
|
385
385
|
this.selectedRows = new Set();
|
|
386
386
|
this.selectAll = false;
|
|
387
|
+
this.selectedRowsData = new Map();
|
|
387
388
|
this.showLoading = false;
|
|
388
389
|
this.originalRowData = [];
|
|
389
390
|
this.internalItemsPerPage = JSON.stringify([
|
|
@@ -393,12 +394,41 @@ const Table = class {
|
|
|
393
394
|
]);
|
|
394
395
|
this.handleSelectAll = (checked) => {
|
|
395
396
|
this.selectAll = checked;
|
|
397
|
+
const newSelectedRows = new Set(this.selectedRows);
|
|
398
|
+
const newSelectedRowsData = new Map(this.selectedRowsData);
|
|
396
399
|
if (checked) {
|
|
397
|
-
|
|
400
|
+
if (this.serverSidePagination) {
|
|
401
|
+
this.rowData.forEach(row => {
|
|
402
|
+
const rowId = row.__rowId;
|
|
403
|
+
newSelectedRows.add(rowId);
|
|
404
|
+
const cleanRow = __rest(row, ["__checkbox", "__rowId"]);
|
|
405
|
+
newSelectedRowsData.set(rowId, cleanRow);
|
|
406
|
+
});
|
|
407
|
+
}
|
|
408
|
+
else {
|
|
409
|
+
this.allRowData.forEach(row => {
|
|
410
|
+
const rowId = row.__rowId;
|
|
411
|
+
newSelectedRows.add(rowId);
|
|
412
|
+
const cleanRow = __rest(row, ["__checkbox", "__rowId"]);
|
|
413
|
+
newSelectedRowsData.set(rowId, cleanRow);
|
|
414
|
+
});
|
|
415
|
+
}
|
|
398
416
|
}
|
|
399
417
|
else {
|
|
400
|
-
this.
|
|
418
|
+
if (this.serverSidePagination) {
|
|
419
|
+
this.rowData.forEach(row => {
|
|
420
|
+
const rowId = row.__rowId;
|
|
421
|
+
newSelectedRows.delete(rowId);
|
|
422
|
+
newSelectedRowsData.delete(rowId);
|
|
423
|
+
});
|
|
424
|
+
}
|
|
425
|
+
else {
|
|
426
|
+
newSelectedRows.clear();
|
|
427
|
+
newSelectedRowsData.clear();
|
|
428
|
+
}
|
|
401
429
|
}
|
|
430
|
+
this.selectedRows = newSelectedRows;
|
|
431
|
+
this.selectedRowsData = newSelectedRowsData;
|
|
402
432
|
this.updateCheckboxStates();
|
|
403
433
|
this.updateHeaderCheckboxState();
|
|
404
434
|
this.emitSelectionChange();
|
|
@@ -407,14 +437,25 @@ const Table = class {
|
|
|
407
437
|
const clickedRowData = params.data;
|
|
408
438
|
const rowId = clickedRowData.__rowId;
|
|
409
439
|
const newSelectedRows = new Set(this.selectedRows);
|
|
440
|
+
const newSelectedRowsData = new Map(this.selectedRowsData);
|
|
410
441
|
if (newSelectedRows.has(rowId)) {
|
|
411
442
|
newSelectedRows.delete(rowId);
|
|
443
|
+
newSelectedRowsData.delete(rowId);
|
|
412
444
|
}
|
|
413
445
|
else {
|
|
414
446
|
newSelectedRows.add(rowId);
|
|
447
|
+
const cleanRow = __rest(clickedRowData, ["__checkbox", "__rowId"]);
|
|
448
|
+
newSelectedRowsData.set(rowId, cleanRow);
|
|
415
449
|
}
|
|
416
450
|
this.selectedRows = newSelectedRows;
|
|
417
|
-
this.
|
|
451
|
+
this.selectedRowsData = newSelectedRowsData;
|
|
452
|
+
if (this.serverSidePagination) {
|
|
453
|
+
const currentPageSelectedCount = this.rowData.filter(row => newSelectedRows.has(row.__rowId)).length;
|
|
454
|
+
this.selectAll = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
|
|
455
|
+
}
|
|
456
|
+
else {
|
|
457
|
+
this.selectAll = newSelectedRows.size === this.allRowData.length && this.allRowData.length > 0;
|
|
458
|
+
}
|
|
418
459
|
this.updateCheckboxStates();
|
|
419
460
|
this.updateHeaderCheckboxState();
|
|
420
461
|
this.emitSelectionChange();
|
|
@@ -536,10 +577,19 @@ const Table = class {
|
|
|
536
577
|
var _a;
|
|
537
578
|
const headerCheckbox = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('.ag-header-cell[col-id="__checkbox"] ifx-checkbox');
|
|
538
579
|
if (headerCheckbox) {
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
580
|
+
if (this.serverSidePagination) {
|
|
581
|
+
const currentPageSelectedCount = this.rowData.filter(row => this.selectedRows.has(row.__rowId)).length;
|
|
582
|
+
const allOnPageSelected = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
|
|
583
|
+
const someOnPageSelected = currentPageSelectedCount > 0 && currentPageSelectedCount < this.rowData.length;
|
|
584
|
+
headerCheckbox.checked = allOnPageSelected;
|
|
585
|
+
headerCheckbox.indeterminate = someOnPageSelected;
|
|
586
|
+
}
|
|
587
|
+
else {
|
|
588
|
+
const allSelected = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;
|
|
589
|
+
const someSelected = this.selectedRows.size > 0 && this.selectedRows.size < this.allRowData.length;
|
|
590
|
+
headerCheckbox.checked = allSelected;
|
|
591
|
+
headerCheckbox.indeterminate = someSelected;
|
|
592
|
+
}
|
|
543
593
|
}
|
|
544
594
|
}, 0);
|
|
545
595
|
}
|
|
@@ -626,10 +676,8 @@ const Table = class {
|
|
|
626
676
|
if (!textFilterMatched)
|
|
627
677
|
return false;
|
|
628
678
|
}
|
|
629
|
-
// For multi-select filters, this remains unchanged
|
|
630
679
|
else if (filterInfo.type === 'multi-select') {
|
|
631
680
|
let rowValue = row[filterName] != null ? String(row[filterName]).toLowerCase() : '';
|
|
632
|
-
// Check if 'undefined' is a selected value and include rows with empty values in that case
|
|
633
681
|
let includesUndefined = selectedValues.includes('undefined');
|
|
634
682
|
if (!selectedValues.includes(rowValue) && !(includesUndefined && rowValue === '')) {
|
|
635
683
|
return false;
|
|
@@ -640,30 +688,31 @@ const Table = class {
|
|
|
640
688
|
});
|
|
641
689
|
}
|
|
642
690
|
async updateTableView() {
|
|
691
|
+
if (this.serverSidePagination) {
|
|
692
|
+
this.selectAll = false;
|
|
693
|
+
}
|
|
643
694
|
if (this.serverSidePagination && this.serverPageChangeHandler) {
|
|
644
695
|
const { rows, total } = await this.serverPageChangeHandler({
|
|
645
696
|
page: this.currentPage,
|
|
646
697
|
pageSize: this.paginationPageSize,
|
|
647
698
|
});
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
};
|
|
661
|
-
});
|
|
662
|
-
}
|
|
699
|
+
rows.forEach((row, index) => {
|
|
700
|
+
var _a;
|
|
701
|
+
const rowId = row.sampleNumber || `row_${(this.currentPage - 1) * this.paginationPageSize + index}`;
|
|
702
|
+
row.__rowId = rowId;
|
|
703
|
+
row.__checkbox = {
|
|
704
|
+
disabled: false,
|
|
705
|
+
checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(rowId)) || false,
|
|
706
|
+
size: 's',
|
|
707
|
+
indeterminate: false,
|
|
708
|
+
error: false,
|
|
709
|
+
};
|
|
710
|
+
});
|
|
663
711
|
this.rowData = rows;
|
|
664
712
|
this.matchingResultsCount = total;
|
|
665
713
|
if (this.gridApi) {
|
|
666
714
|
this.gridApi.setGridOption('rowData', rows);
|
|
715
|
+
this.updateHeaderCheckboxState();
|
|
667
716
|
}
|
|
668
717
|
const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');
|
|
669
718
|
if (paginationElement) {
|
|
@@ -671,9 +720,15 @@ const Table = class {
|
|
|
671
720
|
}
|
|
672
721
|
}
|
|
673
722
|
else {
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
723
|
+
let visibleRowData;
|
|
724
|
+
if (this.pagination) {
|
|
725
|
+
const startIndex = (this.currentPage - 1) * this.paginationPageSize;
|
|
726
|
+
const endIndex = startIndex + this.paginationPageSize;
|
|
727
|
+
visibleRowData = this.allRowData.slice(startIndex, endIndex);
|
|
728
|
+
}
|
|
729
|
+
else {
|
|
730
|
+
visibleRowData = this.allRowData;
|
|
731
|
+
}
|
|
677
732
|
if (this.enableSelection) {
|
|
678
733
|
visibleRowData.forEach(row => {
|
|
679
734
|
var _a, _b;
|
|
@@ -696,6 +751,7 @@ const Table = class {
|
|
|
696
751
|
if (this.gridApi) {
|
|
697
752
|
this.gridApi.setGridOption('rowData', this.rowData);
|
|
698
753
|
}
|
|
754
|
+
this.updateHeaderCheckboxState();
|
|
699
755
|
}
|
|
700
756
|
}
|
|
701
757
|
clearAllFilters() {
|
|
@@ -852,16 +908,35 @@ const Table = class {
|
|
|
852
908
|
});
|
|
853
909
|
}
|
|
854
910
|
async handlePageChange(event) {
|
|
911
|
+
if (!this.pagination) {
|
|
912
|
+
return;
|
|
913
|
+
}
|
|
855
914
|
this.currentPage = event.detail.currentPage;
|
|
915
|
+
if (this.serverSidePagination) {
|
|
916
|
+
this.selectAll = false;
|
|
917
|
+
}
|
|
856
918
|
if (this.serverSidePagination && this.serverPageChangeHandler) {
|
|
857
919
|
const { rows, total } = await this.serverPageChangeHandler({
|
|
858
920
|
page: this.currentPage,
|
|
859
921
|
pageSize: this.paginationPageSize,
|
|
860
922
|
});
|
|
923
|
+
rows.forEach((row, index) => {
|
|
924
|
+
var _a;
|
|
925
|
+
const rowId = row.sampleNumber || `row_${(this.currentPage - 1) * this.paginationPageSize + index}`;
|
|
926
|
+
row.__rowId = rowId;
|
|
927
|
+
row.__checkbox = {
|
|
928
|
+
disabled: false,
|
|
929
|
+
checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(rowId)) || false,
|
|
930
|
+
size: 's',
|
|
931
|
+
indeterminate: false,
|
|
932
|
+
error: false,
|
|
933
|
+
};
|
|
934
|
+
});
|
|
861
935
|
this.rowData = rows;
|
|
862
936
|
this.matchingResultsCount = total;
|
|
863
937
|
if (this.gridApi) {
|
|
864
938
|
this.gridApi.setGridOption('rowData', this.rowData);
|
|
939
|
+
this.updateHeaderCheckboxState();
|
|
865
940
|
}
|
|
866
941
|
const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');
|
|
867
942
|
if (paginationElement) {
|
|
@@ -872,8 +947,27 @@ const Table = class {
|
|
|
872
947
|
const startIndex = (this.currentPage - 1) * this.paginationPageSize;
|
|
873
948
|
const endIndex = startIndex + this.paginationPageSize;
|
|
874
949
|
const visibleRowData = this.allRowData.slice(startIndex, endIndex);
|
|
950
|
+
if (this.enableSelection) {
|
|
951
|
+
visibleRowData.forEach(row => {
|
|
952
|
+
var _a, _b;
|
|
953
|
+
if (!row.__checkbox) {
|
|
954
|
+
row.__checkbox = {
|
|
955
|
+
disabled: false,
|
|
956
|
+
checked: ((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.has(row.__rowId)) || false,
|
|
957
|
+
size: 's',
|
|
958
|
+
indeterminate: false,
|
|
959
|
+
error: false,
|
|
960
|
+
};
|
|
961
|
+
}
|
|
962
|
+
else {
|
|
963
|
+
row.__checkbox.checked = ((_b = this.selectedRows) === null || _b === void 0 ? void 0 : _b.has(row.__rowId)) || false;
|
|
964
|
+
}
|
|
965
|
+
});
|
|
966
|
+
}
|
|
967
|
+
this.rowData = visibleRowData;
|
|
875
968
|
if (this.gridApi) {
|
|
876
969
|
this.gridApi.setGridOption('rowData', visibleRowData);
|
|
970
|
+
this.updateHeaderCheckboxState();
|
|
877
971
|
}
|
|
878
972
|
}
|
|
879
973
|
}
|
|
@@ -923,7 +1017,8 @@ const Table = class {
|
|
|
923
1017
|
return rows.slice(0, this.paginationPageSize);
|
|
924
1018
|
}
|
|
925
1019
|
updateCheckboxStates() {
|
|
926
|
-
this.
|
|
1020
|
+
const dataToUpdate = this.rowData;
|
|
1021
|
+
dataToUpdate.forEach(row => {
|
|
927
1022
|
if (row.__checkbox) {
|
|
928
1023
|
row.__checkbox.checked = this.selectedRows.has(row.__rowId);
|
|
929
1024
|
}
|
|
@@ -936,20 +1031,20 @@ const Table = class {
|
|
|
936
1031
|
}
|
|
937
1032
|
}
|
|
938
1033
|
emitSelectionChange() {
|
|
939
|
-
const
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
1034
|
+
const selectedRowsArray = Array.from(this.selectedRowsData.values());
|
|
1035
|
+
let isSelectAll;
|
|
1036
|
+
if (this.serverSidePagination) {
|
|
1037
|
+
const currentPageSelectedCount = this.rowData.filter(row => this.selectedRows.has(row.__rowId)).length;
|
|
1038
|
+
isSelectAll = currentPageSelectedCount === this.rowData.length && this.rowData.length > 0;
|
|
1039
|
+
}
|
|
1040
|
+
else {
|
|
1041
|
+
isSelectAll = this.selectedRows.size === this.allRowData.length && this.allRowData.length > 0;
|
|
1042
|
+
}
|
|
948
1043
|
this.host.dispatchEvent(new CustomEvent('ifxSelectionChange', {
|
|
949
1044
|
detail: {
|
|
950
|
-
selectedRows:
|
|
951
|
-
selectedCount:
|
|
952
|
-
isSelectAll:
|
|
1045
|
+
selectedRows: selectedRowsArray,
|
|
1046
|
+
selectedCount: selectedRowsArray.length,
|
|
1047
|
+
isSelectAll: isSelectAll,
|
|
953
1048
|
},
|
|
954
1049
|
bubbles: true,
|
|
955
1050
|
}));
|
|
@@ -1073,12 +1168,12 @@ const Table = class {
|
|
|
1073
1168
|
};
|
|
1074
1169
|
}
|
|
1075
1170
|
const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : this.filterOrientation === 'none' ? '' : 'sidebar-layout';
|
|
1076
|
-
return (h(Host, { key: '
|
|
1171
|
+
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 => {
|
|
1077
1172
|
const filter = this.currentFilters[name];
|
|
1078
1173
|
const filterValues = filter.filterValues;
|
|
1079
1174
|
const isMultiSelect = filter.type !== 'text';
|
|
1080
1175
|
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;
|
|
1081
|
-
}))), h("div", { key: '
|
|
1176
|
+
}))), 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))))));
|
|
1082
1177
|
}
|
|
1083
1178
|
hasButtonCol() {
|
|
1084
1179
|
return this.getColData().some(column => column.field === 'button');
|