itc-components-library20 0.0.1 → 0.0.2
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.
|
@@ -414,15 +414,6 @@ class SortableTable {
|
|
|
414
414
|
this.selectionChange.emit(this.selectedData);
|
|
415
415
|
// console.log('Selezione tabella resettata');
|
|
416
416
|
}
|
|
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
417
|
resetSorting() {
|
|
427
418
|
this.isSorted = null;
|
|
428
419
|
this.currentSortedField = null;
|
|
@@ -433,11 +424,11 @@ class SortableTable {
|
|
|
433
424
|
this.resetData.emit();
|
|
434
425
|
}
|
|
435
426
|
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]=\"'multiple'\"\r\n dataKey=\"id\"\r\n >\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th style=\"width: 10px\"></th>\r\n @for(column of columns; track $index) {\r\n <th class=\"column-header\" [ngStyle]=\"{ 'width': column.width }\" [pSortableColumn]=\"
|
|
427
|
+
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]=\"'multiple'\"\r\n dataKey=\"id\"\r\n >\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th style=\"width: 10px\"></th>\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]=\"rowData\" [attr.data-id]=\"rowData.id\">\r\n <td (click)=\"$event.stopPropagation()\">\r\n <p-tableCheckbox [value]=\"rowData\" [ngClass]=\"tableCheckbox\"/>\r\n </td>\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
428
|
}
|
|
438
429
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SortableTable, decorators: [{
|
|
439
430
|
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]=\"'multiple'\"\r\n dataKey=\"id\"\r\n >\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th style=\"width: 10px\"></th>\r\n @for(column of columns; track $index) {\r\n <th class=\"column-header\" [ngStyle]=\"{ 'width': column.width }\" [pSortableColumn]=\"
|
|
431
|
+
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]=\"'multiple'\"\r\n dataKey=\"id\"\r\n >\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr>\r\n <th style=\"width: 10px\"></th>\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]=\"rowData\" [attr.data-id]=\"rowData.id\">\r\n <td (click)=\"$event.stopPropagation()\">\r\n <p-tableCheckbox [value]=\"rowData\" [ngClass]=\"tableCheckbox\"/>\r\n </td>\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
432
|
}], propDecorators: { columns: [{
|
|
442
433
|
type: Input
|
|
443
434
|
}], data: [{
|