@fuentis/phoenix-ui 0.0.9-alpha.73 → 0.0.9-alpha.74
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.
|
@@ -1634,7 +1634,7 @@ class TableComponent {
|
|
|
1634
1634
|
this.tableDataSignal.set(filteredData);
|
|
1635
1635
|
}
|
|
1636
1636
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1637
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection" }, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n\n <p-table\n [columns]=\"selectedColumns()\"\n [value]=\"tableDataSignal()\"\n [size]=\"'small'\"\n scrollable=\"true\"\n scrollHeight=\"600px\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords()\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [size]=\"'small'\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n <th\n class=\"custom-th font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n </th>\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n <tr>\n <td>\n <p-tableCheckbox [value]=\"rowData\" />\n </td>\n <!-- <td *ngFor=\"let col of columns\" [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\">\n </td> -->\n <td
|
|
1637
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection" }, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n\n <p-table\n [columns]=\"selectedColumns()\"\n [value]=\"tableDataSignal()\"\n [size]=\"'small'\"\n scrollable=\"true\"\n scrollHeight=\"600px\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords()\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [size]=\"'small'\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n <th\n class=\"custom-th font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n </th>\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n <tr>\n <td>\n <p-tableCheckbox [value]=\"rowData\" />\n </td>\n <!-- <td *ngFor=\"let col of columns\" [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\">\n </td> -->\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container *ngIf=\"col.columnType === 'TAG'; else otherCells\">\n <p-tag\n styleClass=\"custom-tag\"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n 'font-weight': '200'\n }\"\n [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n >\n </p-tag>\n </ng-container>\n\n <ng-template #otherCells>\n <ng-container *ngIf=\"col.columnType === 'PERSON'; else defaultCell\">\n <p-avatar\n [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n >\n </p-avatar>\n {{ (rowData[col.field] | cell : col)?.name }}\n </ng-container>\n\n <ng-template #defaultCell>\n <span\n [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n ></span>\n </ng-template>\n </ng-template>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick({ $event, rowData })\"\n ></phoenix-phoenix-data-table-action\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns; let even = even\">\n <tr>\n <td *ngFor=\"let col of columns; let even = even\">\n <p-skeleton\n [ngStyle]=\"{\n width: '60%',\n }\"\n ></p-skeleton>\n </td>\n\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: '20%',\n }\"\n ></p-skeleton>\n </td>\n </tr>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n</div>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}:is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::ng-deep .p-tag{font-weight:200!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData", "selectedData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
|
|
1638
1638
|
}
|
|
1639
1639
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TableComponent, decorators: [{
|
|
1640
1640
|
type: Component,
|
|
@@ -1649,7 +1649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
1649
1649
|
TooltipModule,
|
|
1650
1650
|
TableCellPipe,
|
|
1651
1651
|
SkeletonModule
|
|
1652
|
-
], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n\n <p-table\n [columns]=\"selectedColumns()\"\n [value]=\"tableDataSignal()\"\n [size]=\"'small'\"\n scrollable=\"true\"\n scrollHeight=\"600px\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords()\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [size]=\"'small'\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n <th\n class=\"custom-th font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n </th>\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n <tr>\n <td>\n <p-tableCheckbox [value]=\"rowData\" />\n </td>\n <!-- <td *ngFor=\"let col of columns\" [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\">\n </td> -->\n <td
|
|
1652
|
+
], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n\n <p-table\n [columns]=\"selectedColumns()\"\n [value]=\"tableDataSignal()\"\n [size]=\"'small'\"\n scrollable=\"true\"\n scrollHeight=\"600px\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords()\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [size]=\"'small'\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <th class=\"custom-th\" style=\"width: 4rem\"><p-tableHeaderCheckbox /></th>\n <th\n class=\"custom-th font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n </th>\n <!-- create empty th placeholders for actions -->\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n <tr>\n <td>\n <p-tableCheckbox [value]=\"rowData\" />\n </td>\n <!-- <td *ngFor=\"let col of columns\" [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\">\n </td> -->\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container *ngIf=\"col.columnType === 'TAG'; else otherCells\">\n <p-tag\n styleClass=\"custom-tag\"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n 'font-weight': '200'\n }\"\n [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n >\n </p-tag>\n </ng-container>\n\n <ng-template #otherCells>\n <ng-container *ngIf=\"col.columnType === 'PERSON'; else defaultCell\">\n <p-avatar\n [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n >\n </p-avatar>\n {{ (rowData[col.field] | cell : col)?.name }}\n </ng-container>\n\n <ng-template #defaultCell>\n <span\n [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n ></span>\n </ng-template>\n </ng-template>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick({ $event, rowData })\"\n ></phoenix-phoenix-data-table-action\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns; let even = even\">\n <tr>\n <td *ngFor=\"let col of columns; let even = even\">\n <p-skeleton\n [ngStyle]=\"{\n width: '60%',\n }\"\n ></p-skeleton>\n </td>\n\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: '20%',\n }\"\n ></p-skeleton>\n </td>\n </tr>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n</div>\n", styles: [".custom-th{background-color:var(--surface-100)!important}.dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}:is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::ng-deep .p-tag{font-weight:200!important}\n"] }]
|
|
1653
1653
|
}], ctorParameters: () => [], propDecorators: { data: [{
|
|
1654
1654
|
type: Input
|
|
1655
1655
|
}], columns: [{
|