itc-components-library20 0.0.1 → 0.0.3
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/README.md
CHANGED
|
@@ -40,6 +40,26 @@ Once the project is built, you can publish your library by following these steps
|
|
|
40
40
|
npm publish
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
+
## SortableTable selection mode
|
|
44
|
+
|
|
45
|
+
`lib-sortable-table` supports three selection behaviors through the `selectionMode` input:
|
|
46
|
+
|
|
47
|
+
- `none`: disables row selection and hides checkbox column
|
|
48
|
+
- `single`: enables single-row selection (row click), without checkbox column
|
|
49
|
+
- `multiple`: enables multi-row selection and shows checkbox column
|
|
50
|
+
|
|
51
|
+
Example:
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<lib-sortable-table
|
|
55
|
+
[columns]="columns"
|
|
56
|
+
[data]="data"
|
|
57
|
+
selectionMode="none"
|
|
58
|
+
></lib-sortable-table>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
If not specified, `selectionMode` defaults to `multiple`.
|
|
62
|
+
|
|
43
63
|
## Running unit tests
|
|
44
64
|
|
|
45
65
|
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
@@ -265,6 +265,7 @@ class SortableTable {
|
|
|
265
265
|
colorPicker = () => 'var(--primary-blue-color)';
|
|
266
266
|
selected = [];
|
|
267
267
|
tableCheckbox = '';
|
|
268
|
+
selectionMode = 'multiple';
|
|
268
269
|
selectionChange = new EventEmitter();
|
|
269
270
|
// @Output() unselect = new EventEmitter<any[]>();
|
|
270
271
|
resetData = new EventEmitter();
|
|
@@ -273,6 +274,15 @@ class SortableTable {
|
|
|
273
274
|
faStroopwafel = fas.faStroopwafel;
|
|
274
275
|
faMagnifyingGlass = fas.faMagnifyingGlass;
|
|
275
276
|
selectedData = [];
|
|
277
|
+
get primeSelectionMode() {
|
|
278
|
+
if (this.selectionMode === 'none') {
|
|
279
|
+
return null;
|
|
280
|
+
}
|
|
281
|
+
return this.selectionMode;
|
|
282
|
+
}
|
|
283
|
+
get showSelectionCheckboxes() {
|
|
284
|
+
return this.selectionMode === 'multiple';
|
|
285
|
+
}
|
|
276
286
|
isDateColumn(value) {
|
|
277
287
|
return value instanceof Date && !isNaN(value.getTime());
|
|
278
288
|
}
|
|
@@ -335,6 +345,11 @@ class SortableTable {
|
|
|
335
345
|
ngOnInit() {
|
|
336
346
|
this.initialValue = [...this.data];
|
|
337
347
|
}
|
|
348
|
+
ngOnChanges(changes) {
|
|
349
|
+
if (changes['selectionMode'] && this.selectionMode === 'none') {
|
|
350
|
+
this.clearSelection();
|
|
351
|
+
}
|
|
352
|
+
}
|
|
338
353
|
customSort(event) {
|
|
339
354
|
if (this.currentSortedField !== event.field) {
|
|
340
355
|
// Se si clicca su una colonna diversa, resetta lo stato e imposta ascendente
|
|
@@ -414,15 +429,6 @@ class SortableTable {
|
|
|
414
429
|
this.selectionChange.emit(this.selectedData);
|
|
415
430
|
// console.log('Selezione tabella resettata');
|
|
416
431
|
}
|
|
417
|
-
hasMagnifyingGlassIcon(field) {
|
|
418
|
-
if (!this.isIconColumn(field)) {
|
|
419
|
-
return false;
|
|
420
|
-
}
|
|
421
|
-
if (this.data && this.data.length > 0) {
|
|
422
|
-
return this.data.some(row => row[field] === this.faMagnifyingGlass);
|
|
423
|
-
}
|
|
424
|
-
return false;
|
|
425
|
-
}
|
|
426
432
|
resetSorting() {
|
|
427
433
|
this.isSorted = null;
|
|
428
434
|
this.currentSortedField = null;
|
|
@@ -433,11 +439,11 @@ class SortableTable {
|
|
|
433
439
|
this.resetData.emit();
|
|
434
440
|
}
|
|
435
441
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SortableTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
436
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SortableTable, isStandalone: true, selector: "lib-sortable-table", inputs: { columns: "columns", data: "data", rows: "rows", detailRoute: "detailRoute", actions: "actions", colorPicker: "colorPicker", selected: "selected", tableCheckbox: "tableCheckbox" }, outputs: { selectionChange: "selectionChange", resetData: "resetData" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<div class=\"card\">\r\n <p-table\r\n #dt\r\n [columns]=\"columns\"\r\n [value]=\"data\"\r\n [(selection)]=\"selectedData\"\r\n [paginator]=\"true\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [customSort]=\"true\"\r\n (onPage)=\"pageChange($event)\"\r\n (sortFunction)=\"customSort($event)\"\r\n (onRowSelect)=\"onRowSelect()\"\r\n (onRowUnselect)=\"onRowSelect()\"\r\n [selectionMode]=\"
|
|
442
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SortableTable, isStandalone: true, selector: "lib-sortable-table", inputs: { columns: "columns", data: "data", rows: "rows", detailRoute: "detailRoute", actions: "actions", colorPicker: "colorPicker", selected: "selected", tableCheckbox: "tableCheckbox", selectionMode: "selectionMode" }, outputs: { selectionChange: "selectionChange", resetData: "resetData" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"card\">\r\n <p-table\r\n #dt\r\n [columns]=\"columns\"\r\n [value]=\"data\"\r\n [(selection)]=\"selectedData\"\r\n [paginator]=\"true\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [customSort]=\"true\"\r\n (onPage)=\"pageChange($event)\"\r\n (sortFunction)=\"customSort($event)\"\r\n (onRowSelect)=\"onRowSelect()\"\r\n (onRowUnselect)=\"onRowSelect()\"\r\n [selectionMode]=\"primeSelectionMode\"\r\n dataKey=\"id\"\r\n >\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @if(showSelectionCheckboxes) {\r\n <th style=\"width: 10px\"></th>\r\n }\r\n @for(column of columns; track $index) {\r\n <th class=\"column-header\" [ngStyle]=\"{ 'width': column.width }\" [pSortableColumn]=\"column.sortable === false ? null : column.field\">\r\n {{ column.header }}\r\n @if(column.sortable !== false) {\r\n <p-sortIcon [field]=\"column.field\"></p-sortIcon>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </ng-template>\r\n <ng-template\r\n pTemplate=\"body\" \r\n let-rowData \r\n let-columns=\"columns\"\r\n let-selected=\"selected\"\r\n >\r\n <tr [pSelectableRow]=\"primeSelectionMode ? rowData : null\" [attr.data-id]=\"rowData.id\">\r\n @if(showSelectionCheckboxes) {\r\n <td (click)=\"$event.stopPropagation()\">\r\n <p-tableCheckbox [value]=\"rowData\" [ngClass]=\"tableCheckbox\"/>\r\n </td>\r\n }\r\n @for (column of columns; track $index) {\r\n <td class=\"data-container\">\r\n <!-- Verifica il campo data -->\r\n @if (isDateColumn(rowData[column.field])) {\r\n <ng-container>\r\n {{ rowData[column.field] | date: 'dd/MM/yyyy - HH:mm' }}\r\n </ng-container>\r\n }\r\n <!-- Gestione speciale per la colonna priority -->\r\n @else if (column.field === 'priority' && rowData['priorityIcon']) {\r\n <ng-container>\r\n <fa-icon\r\n [icon]=\"rowData['priorityIcon']\"\r\n [ngStyle]=\"{ color: colorPicker(rowData, 'priority') }\"\r\n ></fa-icon>\r\n </ng-container>\r\n }\r\n <!-- Verifica se il campo della colonna \u00E8 uno di quelli che contiene un'icona -->\r\n @else if (isIconColumn(column.field)) {\r\n <ng-container>\r\n <fa-icon \r\n [icon]=\"rowData[column.field]\"\r\n [ngClass]=\"{ \r\n 'invisible-icon': rowData[column.field] === faStroopwafel, \r\n 'default-style': rowData[column.field] !== faStroopwafel,\r\n 'color-style': rowData[column.field] === faMagnifyingGlass\r\n }\"\r\n [ngStyle]=\"{ color: colorPicker(rowData, column.field) }\"\r\n (click)=\"$event.stopPropagation(); actions[column.field] ? actions[column.field](rowData) : null\"\r\n ></fa-icon>\r\n </ng-container>\r\n } @else {\r\n {{ rowData[column.field]?.label || rowData[column.field] }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n</div>", styles: [":host ::ng-deep .card{height:100%;width:100%}:is() p-table{height:100%}.column-header,.data-container{text-align:center;padding:0}.column-header{color:var(--primary-blue-color);font-weight:600;padding:1% 0}.data-container{padding:.1% 0;height:50px}.data-container>.default-style{color:var(--primary-blue-color);font-size:30px}.data-container>.color-style,.color-style{color:var(--primary-blue-color)!important}fa-icon{cursor:pointer}.invisible-icon{color:transparent}@media screen and (min-resolution: 1.25dppx){.data-container>.default-style{font-size:25px}}@media only screen and (max-width: 1366px){.column-header{font-size:14px}.data-container{font-size:13px;height:47px}.data-container>.default-style{font-size:25px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
437
443
|
}
|
|
438
444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SortableTable, decorators: [{
|
|
439
445
|
type: Component,
|
|
440
|
-
args: [{ selector: 'lib-sortable-table', imports: [CommonModule, FontAwesomeModule, TableModule, FormsModule], template: "<div class=\"card\">\r\n <p-table\r\n #dt\r\n [columns]=\"columns\"\r\n [value]=\"data\"\r\n [(selection)]=\"selectedData\"\r\n [paginator]=\"true\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [customSort]=\"true\"\r\n (onPage)=\"pageChange($event)\"\r\n (sortFunction)=\"customSort($event)\"\r\n (onRowSelect)=\"onRowSelect()\"\r\n (onRowUnselect)=\"onRowSelect()\"\r\n [selectionMode]=\"
|
|
446
|
+
args: [{ selector: 'lib-sortable-table', imports: [CommonModule, FontAwesomeModule, TableModule, FormsModule], template: "<div class=\"card\">\r\n <p-table\r\n #dt\r\n [columns]=\"columns\"\r\n [value]=\"data\"\r\n [(selection)]=\"selectedData\"\r\n [paginator]=\"true\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [customSort]=\"true\"\r\n (onPage)=\"pageChange($event)\"\r\n (sortFunction)=\"customSort($event)\"\r\n (onRowSelect)=\"onRowSelect()\"\r\n (onRowUnselect)=\"onRowSelect()\"\r\n [selectionMode]=\"primeSelectionMode\"\r\n dataKey=\"id\"\r\n >\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n @if(showSelectionCheckboxes) {\r\n <th style=\"width: 10px\"></th>\r\n }\r\n @for(column of columns; track $index) {\r\n <th class=\"column-header\" [ngStyle]=\"{ 'width': column.width }\" [pSortableColumn]=\"column.sortable === false ? null : column.field\">\r\n {{ column.header }}\r\n @if(column.sortable !== false) {\r\n <p-sortIcon [field]=\"column.field\"></p-sortIcon>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </ng-template>\r\n <ng-template\r\n pTemplate=\"body\" \r\n let-rowData \r\n let-columns=\"columns\"\r\n let-selected=\"selected\"\r\n >\r\n <tr [pSelectableRow]=\"primeSelectionMode ? rowData : null\" [attr.data-id]=\"rowData.id\">\r\n @if(showSelectionCheckboxes) {\r\n <td (click)=\"$event.stopPropagation()\">\r\n <p-tableCheckbox [value]=\"rowData\" [ngClass]=\"tableCheckbox\"/>\r\n </td>\r\n }\r\n @for (column of columns; track $index) {\r\n <td class=\"data-container\">\r\n <!-- Verifica il campo data -->\r\n @if (isDateColumn(rowData[column.field])) {\r\n <ng-container>\r\n {{ rowData[column.field] | date: 'dd/MM/yyyy - HH:mm' }}\r\n </ng-container>\r\n }\r\n <!-- Gestione speciale per la colonna priority -->\r\n @else if (column.field === 'priority' && rowData['priorityIcon']) {\r\n <ng-container>\r\n <fa-icon\r\n [icon]=\"rowData['priorityIcon']\"\r\n [ngStyle]=\"{ color: colorPicker(rowData, 'priority') }\"\r\n ></fa-icon>\r\n </ng-container>\r\n }\r\n <!-- Verifica se il campo della colonna \u00E8 uno di quelli che contiene un'icona -->\r\n @else if (isIconColumn(column.field)) {\r\n <ng-container>\r\n <fa-icon \r\n [icon]=\"rowData[column.field]\"\r\n [ngClass]=\"{ \r\n 'invisible-icon': rowData[column.field] === faStroopwafel, \r\n 'default-style': rowData[column.field] !== faStroopwafel,\r\n 'color-style': rowData[column.field] === faMagnifyingGlass\r\n }\"\r\n [ngStyle]=\"{ color: colorPicker(rowData, column.field) }\"\r\n (click)=\"$event.stopPropagation(); actions[column.field] ? actions[column.field](rowData) : null\"\r\n ></fa-icon>\r\n </ng-container>\r\n } @else {\r\n {{ rowData[column.field]?.label || rowData[column.field] }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n</div>", styles: [":host ::ng-deep .card{height:100%;width:100%}:is() p-table{height:100%}.column-header,.data-container{text-align:center;padding:0}.column-header{color:var(--primary-blue-color);font-weight:600;padding:1% 0}.data-container{padding:.1% 0;height:50px}.data-container>.default-style{color:var(--primary-blue-color);font-size:30px}.data-container>.color-style,.color-style{color:var(--primary-blue-color)!important}fa-icon{cursor:pointer}.invisible-icon{color:transparent}@media screen and (min-resolution: 1.25dppx){.data-container>.default-style{font-size:25px}}@media only screen and (max-width: 1366px){.column-header{font-size:14px}.data-container{font-size:13px;height:47px}.data-container>.default-style{font-size:25px}}\n"] }]
|
|
441
447
|
}], propDecorators: { columns: [{
|
|
442
448
|
type: Input
|
|
443
449
|
}], data: [{
|
|
@@ -454,6 +460,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
454
460
|
type: Input
|
|
455
461
|
}], tableCheckbox: [{
|
|
456
462
|
type: Input
|
|
463
|
+
}], selectionMode: [{
|
|
464
|
+
type: Input
|
|
457
465
|
}], selectionChange: [{
|
|
458
466
|
type: Output
|
|
459
467
|
}], resetData: [{
|