@fuentis/phoenix-ui 0.0.9-alpha.645 → 0.0.9-alpha.646
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.
|
@@ -3166,6 +3166,8 @@ class TableComponent {
|
|
|
3166
3166
|
rowSelection = new EventEmitter();
|
|
3167
3167
|
checkBoxSelection = new EventEmitter();
|
|
3168
3168
|
saveColumns = new EventEmitter();
|
|
3169
|
+
/** Emits the full data array in its new order after a drag reorder. */
|
|
3170
|
+
rowReorder = new EventEmitter();
|
|
3169
3171
|
// ============================================================
|
|
3170
3172
|
// WORKER SORT (OFF-MAIN THREAD)
|
|
3171
3173
|
// ============================================================
|
|
@@ -3939,6 +3941,10 @@ class TableComponent {
|
|
|
3939
3941
|
const max = col?.tagMax ?? Infinity;
|
|
3940
3942
|
return Math.max(0, (list?.length ?? 0) - max);
|
|
3941
3943
|
}
|
|
3944
|
+
/** PrimeNG has already reordered `tableData` in place; emit the new order. */
|
|
3945
|
+
onRowReorder(_event) {
|
|
3946
|
+
this.rowReorder.emit([...this.tableData]);
|
|
3947
|
+
}
|
|
3942
3948
|
/** Open the overflow popover with the hidden items' labels. */
|
|
3943
3949
|
openTagOverflow(event, panel, list, col) {
|
|
3944
3950
|
const max = col?.tagMax ?? Infinity;
|
|
@@ -3976,7 +3982,7 @@ class TableComponent {
|
|
|
3976
3982
|
});
|
|
3977
3983
|
}
|
|
3978
3984
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3979
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters", data: "data" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n @if (selectedItems().length === 0) {\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [filters]=\"computedFilters\"\n [selectedItems]=\"selectedItems()\"\n [filterValidValues]=\"filterValidValues\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n ></table-caption>\n } @else {\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <div>\n @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n <span>\n {{ selectedItems().length }}\n {{\n selectedItems().length === 1\n ? (\"LABELS.ITEM_SELECTED\" | translate)\n : (\"LABELS.ITEMS_SELECTED\" | translate)\n }}\n </span>\n }\n </div>\n\n <div>\n @for (\n action of tableConfiguration.bulkActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems(),\n });\n clearSelection()\n \"\n ></phoenix-data-table-action>\n }\n\n <button\n [attr.data-cy]=\"'clear-selection-button'\"\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n }\n <div\n class=\"table-host\"\n [style.height]=\"\n tableConfiguration.autoHeight\n ? null\n : (tableConfiguration.scrollHeight ?? null)\n \"\n [style.maxHeight]=\"\n tableConfiguration.autoHeight\n ? (tableConfiguration.scrollHeight ?? null)\n : null\n \"\n [style.overflow]=\"tableConfiguration.autoHeight ? 'auto' : null\"\n >\n <p-table\n #dt\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n [scrollable]=\"!tableConfiguration.autoHeight\"\n [scrollHeight]=\"tableConfiguration.autoHeight ? undefined : 'flex'\"\n [virtualScroll]=\"!tableConfiguration.autoHeight\"\n [virtualScrollItemSize]=\"40\"\n [virtualScrollDelay]=\"80\"\n [totalRecords]=\"totalRecords\"\n [sortMode]=\"'multiple'\"\n [customSort]=\"true\"\n (sortFunction)=\"onCustomSort($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n [loading]=\"initialSortLoading\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <th class=\"custom-th\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <th class=\"custom-th\"></th>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let colIdx = $index\n ) {\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n [pSortableColumn]=\"tableConfiguration.disableSort ? null : col.field\"\n >\n {{ col.header | translate }}\n @if (!tableConfiguration.disableSort) {\n <p-sortIcon\n [field]=\"col.field\"\n [attr.data-cy]=\"'sort-button-' + col.header\"\n ></p-sortIcon>\n }\n </th>\n }\n\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr [ngStyle]=\"tableConfiguration.rowStyle ? tableConfiguration.rowStyle(rowData) : null\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\n [disabled]=\"\n rowData?.canSelect !== undefined\n ? !rowData.canSelect\n : false\n \"\n [value]=\"rowData\"\n ></p-tableCheckbox>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td>\n <p-tableRadioButton\n [value]=\"rowData\"\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let i = $index\n ) {\n <td\n (click)=\"\n isColumnClickable(i) ? onRowClick($event, rowData) : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer': isColumnClickable(i),\n }\"\n >\n @switch (col.columnType) {\n @case (columnTypeEnum.TAG) {\n @if (rowData[col.field]) {\n <div class=\"flex align-items-center gap-2\">\n <div\n class=\"border-round-md font-semibold\"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field + 'Color'] || '#ccc') + '56',\n color: rowData[col.field + 'Color'],\n }\"\n >\n {{\n rowData[col.field]?.name ||\n (rowData[col.field] | translate)\n }}\n </div>\n @if (rowData[col.field + \"Tooltip\"]) {\n <i\n [class]=\"\n rowData[col.field + 'Icon'].class +\n ' cursor-pointer'\n \"\n [style]=\"rowData[col.field + 'Icon'].style\"\n [pTooltip]=\"rowData[col.field + 'Tooltip']\"\n tooltipPosition=\"top\"\n ></i>\n }\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.LIST_TAG) {\n @if (rowData[col.field]?.length) {\n @for (\n item of visibleTags(rowData[col.field], col);\n track $index\n ) {\n <p-badge\n [severity]=\"$any(col.tagSeverity ?? 'warn')\"\n class=\"mr-1\"\n [value]=\"tagLabelOf(item, col)\"\n />\n }\n @if (tagOverflowCount(rowData[col.field], col); as extra) {\n @if (extra > 0) {\n <p-badge\n severity=\"secondary\"\n styleClass=\"cursor-pointer\"\n [value]=\"'+' + extra\"\n (click)=\"\n openTagOverflow(\n $event,\n tagOverflowPanel,\n rowData[col.field],\n col\n )\n \"\n />\n }\n }\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.OBJ_TAG) {\n @if (rowData[col.field]) {\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field].color || '#ccc') + '56',\n color: rowData[col.field].color,\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.PERSON) {\n @if (rowData[col.field]) {\n <p-avatar\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [label]=\"rowData[col.field]?.name | initials\"\n class=\"cursor-pointer\"\n [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important',\n }\"\n shape=\"circle\"\n (click)=\"personPop.toggle($event)\"\n ></p-avatar>\n\n <p-popover #personPop [dismissable]=\"true\">\n <div>\n <span class=\"text-lg\">{{\n rowData[col.field].name\n }}</span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i>\n {{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-popover>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.LIST) {\n @if (rowData[col.field]?.length) {\n @if (rowData[col.field].length > 1) {\n <div\n class=\"cursor-pointer\"\n (click)=\"listPop.toggle($event)\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span class=\"mr-1\">{{\n rowData[col.field][0].name\n }}</span>\n <p-chip\n class=\"text-sm font-semibold p-1 m-0\"\n [label]=\"'+' + (rowData[col.field].length - 1)\"\n />\n </div>\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n\n <p-popover #listPop [dismissable]=\"true\">\n @for (\n item of rowData[col.field];\n track item.name;\n let isFirst = $first\n ) {\n @if (!isFirst) {\n <ul class=\"list-none m-0 p-0\">\n <li>{{ item.name }}</li>\n </ul>\n }\n }\n </p-popover>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.BOOLEAN) {\n @if (rowData[col.field] | isBoolean) {\n <i\n [pTooltip]=\"rowData?.[col.field + 'Tooltip']\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n class=\"pi\"\n [ngClass]=\"\n rowData[col.field]\n ? 'text-green-500 pi-check-circle'\n : 'text-red-500 pi-times-circle'\n \"\n ></i>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.TEXT_AREA) {\n @if (rowData[col.field]) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n >\n {{\n rowData[col.field].length > (col.maxLength ?? 50)\n ? (rowData[col.field]\n | slice: 0 : col.maxLength ?? 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.EMAIL) {\n @if (rowData[col.field]) {\n <div\n class=\"email-cell\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.EMAIL +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span>{{ rowData[col.field] }}</span>\n <i\n class=\"pi pi-copy email-copy-icon\"\n (click)=\"copyToClipboard($event, rowData[col.field])\"\n [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\"\n >\n </i>\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.TIMEPERIOD) {\n @if (rowData[col.field]) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field] | timePeriod\"\n style=\"max-width: 200px\"\n >\n {{ rowData[col.field] | timePeriod }}\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @default {\n @if (col.flag && getNested(rowData, col.flagCodeField)) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n class=\"flex align-items-center gap-2\"\n style=\"max-width: 200px\"\n [pTooltip]=\"rowData | cell: col : dateFormat\"\n >\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"\n 'flag flag-' +\n (getNested(rowData, col.flagCodeField) || '')\n .toString()\n .toLowerCase()\n \"\n style=\"width: 22px\"\n alt=\"\"\n />\n <span\n [innerHTML]=\"rowData | cell: col : dateFormat\"\n ></span>\n </div>\n } @else {\n @if (rowData | cell: col : dateFormat) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData | cell: col : dateFormat\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell: col : dateFormat\"\n ></div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n }\n }\n </td>\n }\n\n <td class=\"p-0\">\n @for (\n action of tableConfiguration.rowActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-data-table-action>\n }\n </td>\n </tr>\n </ng-template>\n\n <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n @for (_ of skeletonRows; track $index; let rowIdx = $index) {\n <tr style=\"height: 40px\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td class=\"w-2rem\">\n <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n </td>\n }\n }\n\n @for (col of columns; track col.field ?? col.header ?? $index) {\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: (60 + (rowIdx % 3) * 10) + '%',\n height: '1rem'\n }\"\n ></p-skeleton>\n </td>\n }\n\n <td>\n <p-skeleton width=\"2rem\" height=\"1rem\"></p-skeleton>\n </td>\n </tr>\n }\n </ng-template> -->\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\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\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n </div>\n </div>\n</div>\n\n<!-- Shared overflow popover for LIST_TAG \"+N\" badges. -->\n<p-popover #tagOverflowPanel>\n <div class=\"flex flex-column gap-2\" style=\"max-width: 260px\">\n @for (t of overflowTags; track $index) {\n <p-badge [severity]=\"$any(overflowSeverity)\" [value]=\"t\" />\n }\n </div>\n</p-popover>\n", styles: [":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}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}:host ::ng-deep .p-datatable-loading-overlay{display:none!important}:host ::ng-deep .p-datatable-mask{display:none!important}:host ::ng-deep .p-datatable.p-datatable-loading{opacity:1!important;pointer-events:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$4.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: i2$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "selectedItems", "filters", "filterValidValues"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i5$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i8$2.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$6.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }] });
|
|
3985
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters", data: "data" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns", rowReorder: "rowReorder" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n @if (selectedItems().length === 0) {\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [filters]=\"computedFilters\"\n [selectedItems]=\"selectedItems()\"\n [filterValidValues]=\"filterValidValues\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n ></table-caption>\n } @else {\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <div>\n @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n <span>\n {{ selectedItems().length }}\n {{\n selectedItems().length === 1\n ? (\"LABELS.ITEM_SELECTED\" | translate)\n : (\"LABELS.ITEMS_SELECTED\" | translate)\n }}\n </span>\n }\n </div>\n\n <div>\n @for (\n action of tableConfiguration.bulkActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems(),\n });\n clearSelection()\n \"\n ></phoenix-data-table-action>\n }\n\n <button\n [attr.data-cy]=\"'clear-selection-button'\"\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n }\n <div\n class=\"table-host\"\n [style.height]=\"\n tableConfiguration.autoHeight\n ? null\n : (tableConfiguration.scrollHeight ?? null)\n \"\n [style.maxHeight]=\"\n tableConfiguration.autoHeight\n ? (tableConfiguration.scrollHeight ?? null)\n : null\n \"\n [style.overflow]=\"tableConfiguration.autoHeight ? 'auto' : null\"\n >\n <p-table\n #dt\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n [scrollable]=\"!tableConfiguration.autoHeight\"\n [scrollHeight]=\"tableConfiguration.autoHeight ? undefined : 'flex'\"\n [virtualScroll]=\"!tableConfiguration.autoHeight\"\n [virtualScrollItemSize]=\"40\"\n [virtualScrollDelay]=\"80\"\n [totalRecords]=\"totalRecords\"\n [sortMode]=\"'multiple'\"\n [customSort]=\"true\"\n (sortFunction)=\"onCustomSort($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n [loading]=\"initialSortLoading\"\n (onRowReorder)=\"onRowReorder($event)\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n @if (tableConfiguration.reorderable) {\n <th class=\"custom-th\" style=\"width: 40px\"></th>\n }\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <th class=\"custom-th\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <th class=\"custom-th\"></th>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let colIdx = $index\n ) {\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n [pSortableColumn]=\"tableConfiguration.disableSort ? null : col.field\"\n >\n {{ col.header | translate }}\n @if (!tableConfiguration.disableSort) {\n <p-sortIcon\n [field]=\"col.field\"\n [attr.data-cy]=\"'sort-button-' + col.header\"\n ></p-sortIcon>\n }\n </th>\n }\n\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr\n [ngStyle]=\"tableConfiguration.rowStyle ? tableConfiguration.rowStyle(rowData) : null\"\n [pReorderableRow]=\"rowIndex\"\n >\n @if (tableConfiguration.reorderable) {\n <td style=\"width: 40px\">\n <span\n class=\"pi pi-bars cursor-move\"\n pReorderableRowHandle\n ></span>\n </td>\n }\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\n [disabled]=\"\n rowData?.canSelect !== undefined\n ? !rowData.canSelect\n : false\n \"\n [value]=\"rowData\"\n ></p-tableCheckbox>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td>\n <p-tableRadioButton\n [value]=\"rowData\"\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let i = $index\n ) {\n <td\n (click)=\"\n isColumnClickable(i) ? onRowClick($event, rowData) : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer': isColumnClickable(i),\n }\"\n >\n @switch (col.columnType) {\n @case (columnTypeEnum.TAG) {\n @if (rowData[col.field]) {\n <div class=\"flex align-items-center gap-2\">\n <div\n class=\"border-round-md font-semibold\"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field + 'Color'] || '#ccc') + '56',\n color: rowData[col.field + 'Color'],\n }\"\n >\n {{\n rowData[col.field]?.name ||\n (rowData[col.field] | translate)\n }}\n </div>\n @if (rowData[col.field + \"Tooltip\"]) {\n <i\n [class]=\"\n rowData[col.field + 'Icon'].class +\n ' cursor-pointer'\n \"\n [style]=\"rowData[col.field + 'Icon'].style\"\n [pTooltip]=\"rowData[col.field + 'Tooltip']\"\n tooltipPosition=\"top\"\n ></i>\n }\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.LIST_TAG) {\n @if (rowData[col.field]?.length) {\n @for (\n item of visibleTags(rowData[col.field], col);\n track $index\n ) {\n <p-badge\n [severity]=\"$any(col.tagSeverity ?? 'warn')\"\n class=\"mr-1\"\n [value]=\"tagLabelOf(item, col)\"\n />\n }\n @if (tagOverflowCount(rowData[col.field], col); as extra) {\n @if (extra > 0) {\n <p-badge\n severity=\"secondary\"\n styleClass=\"cursor-pointer\"\n [value]=\"'+' + extra\"\n (click)=\"\n openTagOverflow(\n $event,\n tagOverflowPanel,\n rowData[col.field],\n col\n )\n \"\n />\n }\n }\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.OBJ_TAG) {\n @if (rowData[col.field]) {\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field].color || '#ccc') + '56',\n color: rowData[col.field].color,\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.PERSON) {\n @if (rowData[col.field]) {\n <p-avatar\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [label]=\"rowData[col.field]?.name | initials\"\n class=\"cursor-pointer\"\n [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important',\n }\"\n shape=\"circle\"\n (click)=\"personPop.toggle($event)\"\n ></p-avatar>\n\n <p-popover #personPop [dismissable]=\"true\">\n <div>\n <span class=\"text-lg\">{{\n rowData[col.field].name\n }}</span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i>\n {{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-popover>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.LIST) {\n @if (rowData[col.field]?.length) {\n @if (rowData[col.field].length > 1) {\n <div\n class=\"cursor-pointer\"\n (click)=\"listPop.toggle($event)\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span class=\"mr-1\">{{\n rowData[col.field][0].name\n }}</span>\n <p-chip\n class=\"text-sm font-semibold p-1 m-0\"\n [label]=\"'+' + (rowData[col.field].length - 1)\"\n />\n </div>\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n\n <p-popover #listPop [dismissable]=\"true\">\n @for (\n item of rowData[col.field];\n track item.name;\n let isFirst = $first\n ) {\n @if (!isFirst) {\n <ul class=\"list-none m-0 p-0\">\n <li>{{ item.name }}</li>\n </ul>\n }\n }\n </p-popover>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.BOOLEAN) {\n @if (rowData[col.field] | isBoolean) {\n <i\n [pTooltip]=\"rowData?.[col.field + 'Tooltip']\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n class=\"pi\"\n [ngClass]=\"\n rowData[col.field]\n ? 'text-green-500 pi-check-circle'\n : 'text-red-500 pi-times-circle'\n \"\n ></i>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.TEXT_AREA) {\n @if (rowData[col.field]) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n >\n {{\n rowData[col.field].length > (col.maxLength ?? 50)\n ? (rowData[col.field]\n | slice: 0 : col.maxLength ?? 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.EMAIL) {\n @if (rowData[col.field]) {\n <div\n class=\"email-cell\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.EMAIL +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span>{{ rowData[col.field] }}</span>\n <i\n class=\"pi pi-copy email-copy-icon\"\n (click)=\"copyToClipboard($event, rowData[col.field])\"\n [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\"\n >\n </i>\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.TIMEPERIOD) {\n @if (rowData[col.field]) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field] | timePeriod\"\n style=\"max-width: 200px\"\n >\n {{ rowData[col.field] | timePeriod }}\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @default {\n @if (col.flag && getNested(rowData, col.flagCodeField)) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n class=\"flex align-items-center gap-2\"\n style=\"max-width: 200px\"\n [pTooltip]=\"rowData | cell: col : dateFormat\"\n >\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"\n 'flag flag-' +\n (getNested(rowData, col.flagCodeField) || '')\n .toString()\n .toLowerCase()\n \"\n style=\"width: 22px\"\n alt=\"\"\n />\n <span\n [innerHTML]=\"rowData | cell: col : dateFormat\"\n ></span>\n </div>\n } @else {\n @if (rowData | cell: col : dateFormat) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData | cell: col : dateFormat\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell: col : dateFormat\"\n ></div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n }\n }\n </td>\n }\n\n <td class=\"p-0\">\n @for (\n action of tableConfiguration.rowActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-data-table-action>\n }\n </td>\n </tr>\n </ng-template>\n\n <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n @for (_ of skeletonRows; track $index; let rowIdx = $index) {\n <tr style=\"height: 40px\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td class=\"w-2rem\">\n <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n </td>\n }\n }\n\n @for (col of columns; track col.field ?? col.header ?? $index) {\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: (60 + (rowIdx % 3) * 10) + '%',\n height: '1rem'\n }\"\n ></p-skeleton>\n </td>\n }\n\n <td>\n <p-skeleton width=\"2rem\" height=\"1rem\"></p-skeleton>\n </td>\n </tr>\n }\n </ng-template> -->\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\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\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n </div>\n </div>\n</div>\n\n<!-- Shared overflow popover for LIST_TAG \"+N\" badges. -->\n<p-popover #tagOverflowPanel>\n <div class=\"flex flex-column gap-2\" style=\"max-width: 260px\">\n @for (t of overflowTags; track $index) {\n <p-badge [severity]=\"$any(overflowSeverity)\" [value]=\"t\" />\n }\n </div>\n</p-popover>\n", styles: [":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}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}:host ::ng-deep .p-datatable-loading-overlay{display:none!important}:host ::ng-deep .p-datatable-mask{display:none!important}:host ::ng-deep .p-datatable.p-datatable-loading{opacity:1!important;pointer-events:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$4.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: i2$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i2$4.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i2$4.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "selectedItems", "filters", "filterValidValues"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i5$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i8$2.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$6.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }] });
|
|
3980
3986
|
}
|
|
3981
3987
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, decorators: [{
|
|
3982
3988
|
type: Component,
|
|
@@ -3998,7 +4004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3998
4004
|
TimePeriodPipe,
|
|
3999
4005
|
IsBooleanPipe,
|
|
4000
4006
|
BadgeModule,
|
|
4001
|
-
], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n @if (selectedItems().length === 0) {\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [filters]=\"computedFilters\"\n [selectedItems]=\"selectedItems()\"\n [filterValidValues]=\"filterValidValues\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n ></table-caption>\n } @else {\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <div>\n @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n <span>\n {{ selectedItems().length }}\n {{\n selectedItems().length === 1\n ? (\"LABELS.ITEM_SELECTED\" | translate)\n : (\"LABELS.ITEMS_SELECTED\" | translate)\n }}\n </span>\n }\n </div>\n\n <div>\n @for (\n action of tableConfiguration.bulkActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems(),\n });\n clearSelection()\n \"\n ></phoenix-data-table-action>\n }\n\n <button\n [attr.data-cy]=\"'clear-selection-button'\"\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n }\n <div\n class=\"table-host\"\n [style.height]=\"\n tableConfiguration.autoHeight\n ? null\n : (tableConfiguration.scrollHeight ?? null)\n \"\n [style.maxHeight]=\"\n tableConfiguration.autoHeight\n ? (tableConfiguration.scrollHeight ?? null)\n : null\n \"\n [style.overflow]=\"tableConfiguration.autoHeight ? 'auto' : null\"\n >\n <p-table\n #dt\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n [scrollable]=\"!tableConfiguration.autoHeight\"\n [scrollHeight]=\"tableConfiguration.autoHeight ? undefined : 'flex'\"\n [virtualScroll]=\"!tableConfiguration.autoHeight\"\n [virtualScrollItemSize]=\"40\"\n [virtualScrollDelay]=\"80\"\n [totalRecords]=\"totalRecords\"\n [sortMode]=\"'multiple'\"\n [customSort]=\"true\"\n (sortFunction)=\"onCustomSort($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n [loading]=\"initialSortLoading\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <th class=\"custom-th\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <th class=\"custom-th\"></th>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let colIdx = $index\n ) {\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n [pSortableColumn]=\"tableConfiguration.disableSort ? null : col.field\"\n >\n {{ col.header | translate }}\n @if (!tableConfiguration.disableSort) {\n <p-sortIcon\n [field]=\"col.field\"\n [attr.data-cy]=\"'sort-button-' + col.header\"\n ></p-sortIcon>\n }\n </th>\n }\n\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr [ngStyle]=\"tableConfiguration.rowStyle ? tableConfiguration.rowStyle(rowData) : null\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\n [disabled]=\"\n rowData?.canSelect !== undefined\n ? !rowData.canSelect\n : false\n \"\n [value]=\"rowData\"\n ></p-tableCheckbox>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td>\n <p-tableRadioButton\n [value]=\"rowData\"\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let i = $index\n ) {\n <td\n (click)=\"\n isColumnClickable(i) ? onRowClick($event, rowData) : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer': isColumnClickable(i),\n }\"\n >\n @switch (col.columnType) {\n @case (columnTypeEnum.TAG) {\n @if (rowData[col.field]) {\n <div class=\"flex align-items-center gap-2\">\n <div\n class=\"border-round-md font-semibold\"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field + 'Color'] || '#ccc') + '56',\n color: rowData[col.field + 'Color'],\n }\"\n >\n {{\n rowData[col.field]?.name ||\n (rowData[col.field] | translate)\n }}\n </div>\n @if (rowData[col.field + \"Tooltip\"]) {\n <i\n [class]=\"\n rowData[col.field + 'Icon'].class +\n ' cursor-pointer'\n \"\n [style]=\"rowData[col.field + 'Icon'].style\"\n [pTooltip]=\"rowData[col.field + 'Tooltip']\"\n tooltipPosition=\"top\"\n ></i>\n }\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.LIST_TAG) {\n @if (rowData[col.field]?.length) {\n @for (\n item of visibleTags(rowData[col.field], col);\n track $index\n ) {\n <p-badge\n [severity]=\"$any(col.tagSeverity ?? 'warn')\"\n class=\"mr-1\"\n [value]=\"tagLabelOf(item, col)\"\n />\n }\n @if (tagOverflowCount(rowData[col.field], col); as extra) {\n @if (extra > 0) {\n <p-badge\n severity=\"secondary\"\n styleClass=\"cursor-pointer\"\n [value]=\"'+' + extra\"\n (click)=\"\n openTagOverflow(\n $event,\n tagOverflowPanel,\n rowData[col.field],\n col\n )\n \"\n />\n }\n }\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.OBJ_TAG) {\n @if (rowData[col.field]) {\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field].color || '#ccc') + '56',\n color: rowData[col.field].color,\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.PERSON) {\n @if (rowData[col.field]) {\n <p-avatar\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [label]=\"rowData[col.field]?.name | initials\"\n class=\"cursor-pointer\"\n [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important',\n }\"\n shape=\"circle\"\n (click)=\"personPop.toggle($event)\"\n ></p-avatar>\n\n <p-popover #personPop [dismissable]=\"true\">\n <div>\n <span class=\"text-lg\">{{\n rowData[col.field].name\n }}</span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i>\n {{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-popover>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.LIST) {\n @if (rowData[col.field]?.length) {\n @if (rowData[col.field].length > 1) {\n <div\n class=\"cursor-pointer\"\n (click)=\"listPop.toggle($event)\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span class=\"mr-1\">{{\n rowData[col.field][0].name\n }}</span>\n <p-chip\n class=\"text-sm font-semibold p-1 m-0\"\n [label]=\"'+' + (rowData[col.field].length - 1)\"\n />\n </div>\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n\n <p-popover #listPop [dismissable]=\"true\">\n @for (\n item of rowData[col.field];\n track item.name;\n let isFirst = $first\n ) {\n @if (!isFirst) {\n <ul class=\"list-none m-0 p-0\">\n <li>{{ item.name }}</li>\n </ul>\n }\n }\n </p-popover>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.BOOLEAN) {\n @if (rowData[col.field] | isBoolean) {\n <i\n [pTooltip]=\"rowData?.[col.field + 'Tooltip']\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n class=\"pi\"\n [ngClass]=\"\n rowData[col.field]\n ? 'text-green-500 pi-check-circle'\n : 'text-red-500 pi-times-circle'\n \"\n ></i>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.TEXT_AREA) {\n @if (rowData[col.field]) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n >\n {{\n rowData[col.field].length > (col.maxLength ?? 50)\n ? (rowData[col.field]\n | slice: 0 : col.maxLength ?? 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.EMAIL) {\n @if (rowData[col.field]) {\n <div\n class=\"email-cell\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.EMAIL +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span>{{ rowData[col.field] }}</span>\n <i\n class=\"pi pi-copy email-copy-icon\"\n (click)=\"copyToClipboard($event, rowData[col.field])\"\n [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\"\n >\n </i>\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.TIMEPERIOD) {\n @if (rowData[col.field]) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field] | timePeriod\"\n style=\"max-width: 200px\"\n >\n {{ rowData[col.field] | timePeriod }}\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @default {\n @if (col.flag && getNested(rowData, col.flagCodeField)) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n class=\"flex align-items-center gap-2\"\n style=\"max-width: 200px\"\n [pTooltip]=\"rowData | cell: col : dateFormat\"\n >\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"\n 'flag flag-' +\n (getNested(rowData, col.flagCodeField) || '')\n .toString()\n .toLowerCase()\n \"\n style=\"width: 22px\"\n alt=\"\"\n />\n <span\n [innerHTML]=\"rowData | cell: col : dateFormat\"\n ></span>\n </div>\n } @else {\n @if (rowData | cell: col : dateFormat) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData | cell: col : dateFormat\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell: col : dateFormat\"\n ></div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n }\n }\n </td>\n }\n\n <td class=\"p-0\">\n @for (\n action of tableConfiguration.rowActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-data-table-action>\n }\n </td>\n </tr>\n </ng-template>\n\n <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n @for (_ of skeletonRows; track $index; let rowIdx = $index) {\n <tr style=\"height: 40px\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td class=\"w-2rem\">\n <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n </td>\n }\n }\n\n @for (col of columns; track col.field ?? col.header ?? $index) {\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: (60 + (rowIdx % 3) * 10) + '%',\n height: '1rem'\n }\"\n ></p-skeleton>\n </td>\n }\n\n <td>\n <p-skeleton width=\"2rem\" height=\"1rem\"></p-skeleton>\n </td>\n </tr>\n }\n </ng-template> -->\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\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\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n </div>\n </div>\n</div>\n\n<!-- Shared overflow popover for LIST_TAG \"+N\" badges. -->\n<p-popover #tagOverflowPanel>\n <div class=\"flex flex-column gap-2\" style=\"max-width: 260px\">\n @for (t of overflowTags; track $index) {\n <p-badge [severity]=\"$any(overflowSeverity)\" [value]=\"t\" />\n }\n </div>\n</p-popover>\n", styles: [":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}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}:host ::ng-deep .p-datatable-loading-overlay{display:none!important}:host ::ng-deep .p-datatable-mask{display:none!important}:host ::ng-deep .p-datatable.p-datatable-loading{opacity:1!important;pointer-events:auto!important}\n"] }]
|
|
4007
|
+
], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n @if (selectedItems().length === 0) {\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [filters]=\"computedFilters\"\n [selectedItems]=\"selectedItems()\"\n [filterValidValues]=\"filterValidValues\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n ></table-caption>\n } @else {\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <div>\n @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n <span>\n {{ selectedItems().length }}\n {{\n selectedItems().length === 1\n ? (\"LABELS.ITEM_SELECTED\" | translate)\n : (\"LABELS.ITEMS_SELECTED\" | translate)\n }}\n </span>\n }\n </div>\n\n <div>\n @for (\n action of tableConfiguration.bulkActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems(),\n });\n clearSelection()\n \"\n ></phoenix-data-table-action>\n }\n\n <button\n [attr.data-cy]=\"'clear-selection-button'\"\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n }\n <div\n class=\"table-host\"\n [style.height]=\"\n tableConfiguration.autoHeight\n ? null\n : (tableConfiguration.scrollHeight ?? null)\n \"\n [style.maxHeight]=\"\n tableConfiguration.autoHeight\n ? (tableConfiguration.scrollHeight ?? null)\n : null\n \"\n [style.overflow]=\"tableConfiguration.autoHeight ? 'auto' : null\"\n >\n <p-table\n #dt\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n [scrollable]=\"!tableConfiguration.autoHeight\"\n [scrollHeight]=\"tableConfiguration.autoHeight ? undefined : 'flex'\"\n [virtualScroll]=\"!tableConfiguration.autoHeight\"\n [virtualScrollItemSize]=\"40\"\n [virtualScrollDelay]=\"80\"\n [totalRecords]=\"totalRecords\"\n [sortMode]=\"'multiple'\"\n [customSort]=\"true\"\n (sortFunction)=\"onCustomSort($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n [loading]=\"initialSortLoading\"\n (onRowReorder)=\"onRowReorder($event)\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n @if (tableConfiguration.reorderable) {\n <th class=\"custom-th\" style=\"width: 40px\"></th>\n }\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <th class=\"custom-th\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <th class=\"custom-th\"></th>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let colIdx = $index\n ) {\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n [pSortableColumn]=\"tableConfiguration.disableSort ? null : col.field\"\n >\n {{ col.header | translate }}\n @if (!tableConfiguration.disableSort) {\n <p-sortIcon\n [field]=\"col.field\"\n [attr.data-cy]=\"'sort-button-' + col.header\"\n ></p-sortIcon>\n }\n </th>\n }\n\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr\n [ngStyle]=\"tableConfiguration.rowStyle ? tableConfiguration.rowStyle(rowData) : null\"\n [pReorderableRow]=\"rowIndex\"\n >\n @if (tableConfiguration.reorderable) {\n <td style=\"width: 40px\">\n <span\n class=\"pi pi-bars cursor-move\"\n pReorderableRowHandle\n ></span>\n </td>\n }\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\n [disabled]=\"\n rowData?.canSelect !== undefined\n ? !rowData.canSelect\n : false\n \"\n [value]=\"rowData\"\n ></p-tableCheckbox>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td>\n <p-tableRadioButton\n [value]=\"rowData\"\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n }\n }\n @for (\n col of columns;\n track col.field ?? col.header ?? $index;\n let i = $index\n ) {\n <td\n (click)=\"\n isColumnClickable(i) ? onRowClick($event, rowData) : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer': isColumnClickable(i),\n }\"\n >\n @switch (col.columnType) {\n @case (columnTypeEnum.TAG) {\n @if (rowData[col.field]) {\n <div class=\"flex align-items-center gap-2\">\n <div\n class=\"border-round-md font-semibold\"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field + 'Color'] || '#ccc') + '56',\n color: rowData[col.field + 'Color'],\n }\"\n >\n {{\n rowData[col.field]?.name ||\n (rowData[col.field] | translate)\n }}\n </div>\n @if (rowData[col.field + \"Tooltip\"]) {\n <i\n [class]=\"\n rowData[col.field + 'Icon'].class +\n ' cursor-pointer'\n \"\n [style]=\"rowData[col.field + 'Icon'].style\"\n [pTooltip]=\"rowData[col.field + 'Tooltip']\"\n tooltipPosition=\"top\"\n ></i>\n }\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.LIST_TAG) {\n @if (rowData[col.field]?.length) {\n @for (\n item of visibleTags(rowData[col.field], col);\n track $index\n ) {\n <p-badge\n [severity]=\"$any(col.tagSeverity ?? 'warn')\"\n class=\"mr-1\"\n [value]=\"tagLabelOf(item, col)\"\n />\n }\n @if (tagOverflowCount(rowData[col.field], col); as extra) {\n @if (extra > 0) {\n <p-badge\n severity=\"secondary\"\n styleClass=\"cursor-pointer\"\n [value]=\"'+' + extra\"\n (click)=\"\n openTagOverflow(\n $event,\n tagOverflowPanel,\n rowData[col.field],\n col\n )\n \"\n />\n }\n }\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.OBJ_TAG) {\n @if (rowData[col.field]) {\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n fontSize: '12px',\n padding: '3px 8px',\n width: 'fit-content',\n 'background-color':\n (rowData[col.field].color || '#ccc') + '56',\n color: rowData[col.field].color,\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.PERSON) {\n @if (rowData[col.field]) {\n <p-avatar\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [label]=\"rowData[col.field]?.name | initials\"\n class=\"cursor-pointer\"\n [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important',\n }\"\n shape=\"circle\"\n (click)=\"personPop.toggle($event)\"\n ></p-avatar>\n\n <p-popover #personPop [dismissable]=\"true\">\n <div>\n <span class=\"text-lg\">{{\n rowData[col.field].name\n }}</span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i>\n {{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-popover>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.LIST) {\n @if (rowData[col.field]?.length) {\n @if (rowData[col.field].length > 1) {\n <div\n class=\"cursor-pointer\"\n (click)=\"listPop.toggle($event)\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span class=\"mr-1\">{{\n rowData[col.field][0].name\n }}</span>\n <p-chip\n class=\"text-sm font-semibold p-1 m-0\"\n [label]=\"'+' + (rowData[col.field].length - 1)\"\n />\n </div>\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n\n <p-popover #listPop [dismissable]=\"true\">\n @for (\n item of rowData[col.field];\n track item.name;\n let isFirst = $first\n ) {\n @if (!isFirst) {\n <ul class=\"list-none m-0 p-0\">\n <li>{{ item.name }}</li>\n </ul>\n }\n }\n </p-popover>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.BOOLEAN) {\n @if (rowData[col.field] | isBoolean) {\n <i\n [pTooltip]=\"rowData?.[col.field + 'Tooltip']\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n class=\"pi\"\n [ngClass]=\"\n rowData[col.field]\n ? 'text-green-500 pi-check-circle'\n : 'text-red-500 pi-times-circle'\n \"\n ></i>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.TEXT_AREA) {\n @if (rowData[col.field]) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n >\n {{\n rowData[col.field].length > (col.maxLength ?? 50)\n ? (rowData[col.field]\n | slice: 0 : col.maxLength ?? 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.EMAIL) {\n @if (rowData[col.field]) {\n <div\n class=\"email-cell\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.EMAIL +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span>{{ rowData[col.field] }}</span>\n <i\n class=\"pi pi-copy email-copy-icon\"\n (click)=\"copyToClipboard($event, rowData[col.field])\"\n [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\"\n >\n </i>\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @case (columnTypeEnum.TIMEPERIOD) {\n @if (rowData[col.field]) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field] | timePeriod\"\n style=\"max-width: 200px\"\n >\n {{ rowData[col.field] | timePeriod }}\n </div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n @default {\n @if (col.flag && getNested(rowData, col.flagCodeField)) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n class=\"flex align-items-center gap-2\"\n style=\"max-width: 200px\"\n [pTooltip]=\"rowData | cell: col : dateFormat\"\n >\n <img\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"\n 'flag flag-' +\n (getNested(rowData, col.flagCodeField) || '')\n .toString()\n .toLowerCase()\n \"\n style=\"width: 22px\"\n alt=\"\"\n />\n <span\n [innerHTML]=\"rowData | cell: col : dateFormat\"\n ></span>\n </div>\n } @else {\n @if (rowData | cell: col : dateFormat) {\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData | cell: col : dateFormat\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell: col : dateFormat\"\n ></div>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i,\n }\"\n />\n }\n }\n }\n }\n </td>\n }\n\n <td class=\"p-0\">\n @for (\n action of tableConfiguration.rowActions;\n track action?.key ?? $index\n ) {\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-data-table-action>\n }\n </td>\n </tr>\n </ng-template>\n\n <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n @for (_ of skeletonRows; track $index; let rowIdx = $index) {\n <tr style=\"height: 40px\">\n @switch (tableConfiguration.selectionType) {\n @case (selectionTypeEnum.CHECKBOX) {\n <td class=\"w-2rem\">\n <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n </td>\n }\n @case (selectionTypeEnum.RADIO_BTN) {\n <td class=\"w-2rem\">\n <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n </td>\n }\n }\n\n @for (col of columns; track col.field ?? col.header ?? $index) {\n <td>\n <p-skeleton\n [ngStyle]=\"{\n width: (60 + (rowIdx % 3) * 10) + '%',\n height: '1rem'\n }\"\n ></p-skeleton>\n </td>\n }\n\n <td>\n <p-skeleton width=\"2rem\" height=\"1rem\"></p-skeleton>\n </td>\n </tr>\n }\n </ng-template> -->\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\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\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n </div>\n </div>\n</div>\n\n<!-- Shared overflow popover for LIST_TAG \"+N\" badges. -->\n<p-popover #tagOverflowPanel>\n <div class=\"flex flex-column gap-2\" style=\"max-width: 260px\">\n @for (t of overflowTags; track $index) {\n <p-badge [severity]=\"$any(overflowSeverity)\" [value]=\"t\" />\n }\n </div>\n</p-popover>\n", styles: [":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}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}:host ::ng-deep .p-datatable-loading-overlay{display:none!important}:host ::ng-deep .p-datatable-mask{display:none!important}:host ::ng-deep .p-datatable.p-datatable-loading{opacity:1!important;pointer-events:auto!important}\n"] }]
|
|
4002
4008
|
}], ctorParameters: () => [], propDecorators: { dt: [{
|
|
4003
4009
|
type: ViewChild,
|
|
4004
4010
|
args: ['dt']
|
|
@@ -4018,6 +4024,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4018
4024
|
type: Output
|
|
4019
4025
|
}], saveColumns: [{
|
|
4020
4026
|
type: Output
|
|
4027
|
+
}], rowReorder: [{
|
|
4028
|
+
type: Output
|
|
4021
4029
|
}], data: [{
|
|
4022
4030
|
type: Input
|
|
4023
4031
|
}] } });
|
|
@@ -4527,7 +4535,7 @@ class ObjectItemDialogComponent {
|
|
|
4527
4535
|
filterConfiguration: []
|
|
4528
4536
|
};
|
|
4529
4537
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ObjectItemDialogComponent, deps: [{ token: i1$3.DynamicDialogRef }, { token: i1$3.DynamicDialogConfig }], target: i0.ɵɵFactoryTarget.Component });
|
|
4530
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ObjectItemDialogComponent, isStandalone: true, selector: "phoenix-object-item-dialog", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<div style=\"overflow: hidden; padding-bottom: 50px\">\n <phoenix-table\n #table\n [data]=\"tableData\"\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n (checkBoxSelection)=\"onSelectionChanged($event)\"\n >\n </phoenix-table>\n</div>\n<div class=\"absolute bottom-0 right-0 p-4\">\n <div class=\"flex gap-2\">\n <ng-container *ngFor=\"let action of actions\">\n <p-button\n [label]=\"action.label | translate\"\n [icon]=\"action.icon || ''\"\n [severity]=\"action.severity || 'primary'\"\n [disabled]=\"action.id === 'assign' && !hasSelection\"\n [id]=\"action.id\"\n (onClick)=\"actionClick(action.id)\"\n size=\"small\"\n ></p-button>\n </ng-container>\n</div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["columns", "selectedColumnsInput", "tableConfiguration", "filters", "data"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
|
|
4538
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ObjectItemDialogComponent, isStandalone: true, selector: "phoenix-object-item-dialog", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<div style=\"overflow: hidden; padding-bottom: 50px\">\n <phoenix-table\n #table\n [data]=\"tableData\"\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n (checkBoxSelection)=\"onSelectionChanged($event)\"\n >\n </phoenix-table>\n</div>\n<div class=\"absolute bottom-0 right-0 p-4\">\n <div class=\"flex gap-2\">\n <ng-container *ngFor=\"let action of actions\">\n <p-button\n [label]=\"action.label | translate\"\n [icon]=\"action.icon || ''\"\n [severity]=\"action.severity || 'primary'\"\n [disabled]=\"action.id === 'assign' && !hasSelection\"\n [id]=\"action.id\"\n (onClick)=\"actionClick(action.id)\"\n size=\"small\"\n ></p-button>\n </ng-container>\n</div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["columns", "selectedColumnsInput", "tableConfiguration", "filters", "data"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns", "rowReorder"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
|
|
4531
4539
|
}
|
|
4532
4540
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ObjectItemDialogComponent, decorators: [{
|
|
4533
4541
|
type: Component,
|
|
@@ -8569,7 +8577,7 @@ class QuickPickSidePanelComponent {
|
|
|
8569
8577
|
}, obj);
|
|
8570
8578
|
}
|
|
8571
8579
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickPickSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8572
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, tableConfiguration: { classPropertyName: "tableConfiguration", publicName: "tableConfiguration", isSignal: true, isRequired: false, transformFunction: null }, widthClass: { classPropertyName: "widthClass", publicName: "widthClass", isSignal: true, isRequired: false, transformFunction: null }, isFullScreen: { classPropertyName: "isFullScreen", publicName: "isFullScreen", isSignal: true, isRequired: false, transformFunction: null }, panelState: { classPropertyName: "panelState", publicName: "panelState", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { panelStateChange: "panelStateChange", onRowClick: "onRowClick", lazyLoadData: "lazyLoadData", handlePanelFullScreen: "handlePanelFullScreen" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<p-drawer\n #drawer\n [visible]=\"drawerVisible()\"\n (visibleChange)=\"visibleChange($event)\"\n [header]=\"title() | translate\"\n appendTo=\"body\"\n position=\"right\"\n [styleClass]=\"widthClass()\"\n>\n <!-- Content -->\n @if (tableConfiguration()) {\n <div class=\"px-2\">\n <phoenix-table\n [data]=\"data()\"\n [columns]=\"columns()\"\n [tableConfiguration]=\"tableConfiguration()\"\n [filters]=\"filters()\"\n (rowSelection)=\"onTableRowClick($event)\"\n ></phoenix-table>\n </div>\n }\n</p-drawer>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["columns", "selectedColumnsInput", "tableConfiguration", "filters", "data"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
|
|
8580
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: QuickPickSidePanelComponent, isStandalone: true, selector: "phoenix-quick-pick-sidepanel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, tableConfiguration: { classPropertyName: "tableConfiguration", publicName: "tableConfiguration", isSignal: true, isRequired: false, transformFunction: null }, widthClass: { classPropertyName: "widthClass", publicName: "widthClass", isSignal: true, isRequired: false, transformFunction: null }, isFullScreen: { classPropertyName: "isFullScreen", publicName: "isFullScreen", isSignal: true, isRequired: false, transformFunction: null }, panelState: { classPropertyName: "panelState", publicName: "panelState", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { panelStateChange: "panelStateChange", onRowClick: "onRowClick", lazyLoadData: "lazyLoadData", handlePanelFullScreen: "handlePanelFullScreen" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<p-drawer\n #drawer\n [visible]=\"drawerVisible()\"\n (visibleChange)=\"visibleChange($event)\"\n [header]=\"title() | translate\"\n appendTo=\"body\"\n position=\"right\"\n [styleClass]=\"widthClass()\"\n>\n <!-- Content -->\n @if (tableConfiguration()) {\n <div class=\"px-2\">\n <phoenix-table\n [data]=\"data()\"\n [columns]=\"columns()\"\n [tableConfiguration]=\"tableConfiguration()\"\n [filters]=\"filters()\"\n (rowSelection)=\"onTableRowClick($event)\"\n ></phoenix-table>\n </div>\n }\n</p-drawer>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: TableComponent, selector: "phoenix-table", inputs: ["columns", "selectedColumnsInput", "tableConfiguration", "filters", "data"], outputs: ["actionClick", "rowSelection", "checkBoxSelection", "saveColumns", "rowReorder"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
|
|
8573
8581
|
}
|
|
8574
8582
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QuickPickSidePanelComponent, decorators: [{
|
|
8575
8583
|
type: Component,
|