@fuentis/phoenix-ui 0.0.9-alpha.652 → 0.0.9-alpha.654
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.
|
@@ -4001,7 +4001,7 @@ class TableComponent {
|
|
|
4001
4001
|
});
|
|
4002
4002
|
}
|
|
4003
4003
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4004
|
-
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" }, host: { properties: { "class.fill": "this.fillHost" } }, queries: [{ propertyName: "rowExpansionTpl", first: true, predicate: ["rowExpansion"], descendants: true }], 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.fillHeight || 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 [dataKey]=\"tableConfiguration.dataKey ?? 'uuid'\"\n [size]=\"tableConfiguration.dense === false ? undefined : 'small'\"\n [scrollable]=\"!tableConfiguration.autoHeight\"\n [scrollHeight]=\"tableConfiguration.autoHeight ? undefined : 'flex'\"\n [virtualScroll]=\"\n tableConfiguration.virtualScroll ?? !tableConfiguration.autoHeight\n \"\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 @if (rowExpansionTpl) {\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 let-expanded=\"expanded\"\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 @if (rowExpansionTpl) {\n <td style=\"width: 40px\">\n <span\n class=\"pi cursor-pointer p-2\"\n [class.pi-chevron-right]=\"!expanded\"\n [class.pi-chevron-down]=\"expanded\"\n [pRowToggler]=\"rowData\"\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=\"expandedrow\" let-rowData>\n <tr>\n <td [attr.colspan]=\"expansionColspan\">\n <ng-container\n [ngTemplateOutlet]=\"rowExpansionTpl ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: rowData, row: rowData }\"\n ></ng-container>\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}:host(.fill){display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host(.fill) .table-host{flex:1 1 auto;min-height:0}\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.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { 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" }] });
|
|
4004
|
+
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" }, host: { properties: { "class.fill": "this.fillHost" } }, queries: [{ propertyName: "rowExpansionTpl", first: true, predicate: ["rowExpansion"], descendants: true }], 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 <!-- Optional type-switch band: a separate header row above the caption. Opt-in\n via tableConfiguration.typeSwitch; clicking a pill fires the ordinary\n actionClick (type TAB) so the host can swap what the table shows. -->\n @if (tableConfiguration.typeSwitch?.tabs?.length) {\n <div class=\"pho-type-band\">\n <div class=\"pho-typeswitch\" role=\"tablist\">\n @for (t of tableConfiguration.typeSwitch!.tabs; track t.key ?? t.label) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"pho-typeswitch__tab\"\n [disabled]=\"t.disabled\"\n [attr.aria-selected]=\"t.key === tableConfiguration.typeSwitch!.activeKey\"\n (click)=\"handleActionClick({ action: t, selectedItems: [] })\"\n >\n <span>{{ t.label | translate }}</span>\n @if (t.badgeCount !== undefined && t.badgeCount !== null) {\n <span class=\"pho-typeswitch__count\">{{ t.badgeCount }}</span>\n }\n </button>\n }\n </div>\n </div>\n }\n\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.fillHeight || 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 [dataKey]=\"tableConfiguration.dataKey ?? 'uuid'\"\n [size]=\"tableConfiguration.dense === false ? undefined : 'small'\"\n [scrollable]=\"!tableConfiguration.autoHeight\"\n [scrollHeight]=\"tableConfiguration.autoHeight ? undefined : 'flex'\"\n [virtualScroll]=\"\n tableConfiguration.virtualScroll ?? !tableConfiguration.autoHeight\n \"\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 @if (rowExpansionTpl) {\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 let-expanded=\"expanded\"\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 @if (rowExpansionTpl) {\n <td style=\"width: 40px\">\n <span\n class=\"pi cursor-pointer p-2\"\n [class.pi-chevron-right]=\"!expanded\"\n [class.pi-chevron-down]=\"expanded\"\n [pRowToggler]=\"rowData\"\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=\"expandedrow\" let-rowData>\n <tr>\n <td [attr.colspan]=\"expansionColspan\">\n <ng-container\n [ngTemplateOutlet]=\"rowExpansionTpl ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: rowData, row: rowData }\"\n ></ng-container>\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}:host(.fill){display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host(.fill) .table-host{flex:1 1 auto;min-height:0}.pho-type-band{padding:.75rem 1rem;border-bottom:1px solid var(--surface-300, #dee2e6)}.pho-typeswitch{display:inline-flex;gap:6px;padding:4px;border-radius:999px;background:var(--surface-ground, #f1f3f5);border:1px solid var(--surface-300, #dee2e6)}.pho-typeswitch__tab{appearance:none;border:0;background:transparent;color:var(--text-color-secondary, #6c757d);font:inherit;font-weight:600;font-size:.875rem;display:inline-flex;align-items:center;gap:.5rem;padding:.4375rem .875rem;border-radius:999px;cursor:pointer;transition:color .15s,background .15s,box-shadow .15s}.pho-typeswitch__tab:hover:not(:disabled){color:var(--text-color, #212529)}.pho-typeswitch__tab:disabled{opacity:.5;cursor:default}.pho-typeswitch__tab[aria-selected=true]{background:var(--surface-card, #ffffff);color:var(--primary-color, #10457f);box-shadow:0 1px 2px #0000000f,0 0 0 1px var(--primary-color, #10457f) inset}.pho-typeswitch__count{font-variant-numeric:tabular-nums;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;background:var(--surface-300, #dee2e6);color:var(--text-color-secondary, #6c757d);transition:background .15s,color .15s}.pho-typeswitch__tab[aria-selected=true] .pho-typeswitch__count{background:var(--primary-color, #10457f);color:var(--primary-color-text, #ffffff)}\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.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { 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" }] });
|
|
4005
4005
|
}
|
|
4006
4006
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, decorators: [{
|
|
4007
4007
|
type: Component,
|
|
@@ -4023,7 +4023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4023
4023
|
TimePeriodPipe,
|
|
4024
4024
|
IsBooleanPipe,
|
|
4025
4025
|
BadgeModule,
|
|
4026
|
-
], 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.fillHeight || 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 [dataKey]=\"tableConfiguration.dataKey ?? 'uuid'\"\n [size]=\"tableConfiguration.dense === false ? undefined : 'small'\"\n [scrollable]=\"!tableConfiguration.autoHeight\"\n [scrollHeight]=\"tableConfiguration.autoHeight ? undefined : 'flex'\"\n [virtualScroll]=\"\n tableConfiguration.virtualScroll ?? !tableConfiguration.autoHeight\n \"\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 @if (rowExpansionTpl) {\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 let-expanded=\"expanded\"\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 @if (rowExpansionTpl) {\n <td style=\"width: 40px\">\n <span\n class=\"pi cursor-pointer p-2\"\n [class.pi-chevron-right]=\"!expanded\"\n [class.pi-chevron-down]=\"expanded\"\n [pRowToggler]=\"rowData\"\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=\"expandedrow\" let-rowData>\n <tr>\n <td [attr.colspan]=\"expansionColspan\">\n <ng-container\n [ngTemplateOutlet]=\"rowExpansionTpl ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: rowData, row: rowData }\"\n ></ng-container>\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}:host(.fill){display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host(.fill) .table-host{flex:1 1 auto;min-height:0}\n"] }]
|
|
4026
|
+
], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <!-- Optional type-switch band: a separate header row above the caption. Opt-in\n via tableConfiguration.typeSwitch; clicking a pill fires the ordinary\n actionClick (type TAB) so the host can swap what the table shows. -->\n @if (tableConfiguration.typeSwitch?.tabs?.length) {\n <div class=\"pho-type-band\">\n <div class=\"pho-typeswitch\" role=\"tablist\">\n @for (t of tableConfiguration.typeSwitch!.tabs; track t.key ?? t.label) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"pho-typeswitch__tab\"\n [disabled]=\"t.disabled\"\n [attr.aria-selected]=\"t.key === tableConfiguration.typeSwitch!.activeKey\"\n (click)=\"handleActionClick({ action: t, selectedItems: [] })\"\n >\n <span>{{ t.label | translate }}</span>\n @if (t.badgeCount !== undefined && t.badgeCount !== null) {\n <span class=\"pho-typeswitch__count\">{{ t.badgeCount }}</span>\n }\n </button>\n }\n </div>\n </div>\n }\n\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.fillHeight || 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 [dataKey]=\"tableConfiguration.dataKey ?? 'uuid'\"\n [size]=\"tableConfiguration.dense === false ? undefined : 'small'\"\n [scrollable]=\"!tableConfiguration.autoHeight\"\n [scrollHeight]=\"tableConfiguration.autoHeight ? undefined : 'flex'\"\n [virtualScroll]=\"\n tableConfiguration.virtualScroll ?? !tableConfiguration.autoHeight\n \"\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 @if (rowExpansionTpl) {\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 let-expanded=\"expanded\"\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 @if (rowExpansionTpl) {\n <td style=\"width: 40px\">\n <span\n class=\"pi cursor-pointer p-2\"\n [class.pi-chevron-right]=\"!expanded\"\n [class.pi-chevron-down]=\"expanded\"\n [pRowToggler]=\"rowData\"\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=\"expandedrow\" let-rowData>\n <tr>\n <td [attr.colspan]=\"expansionColspan\">\n <ng-container\n [ngTemplateOutlet]=\"rowExpansionTpl ?? null\"\n [ngTemplateOutletContext]=\"{ $implicit: rowData, row: rowData }\"\n ></ng-container>\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}:host(.fill){display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host(.fill) .table-host{flex:1 1 auto;min-height:0}.pho-type-band{padding:.75rem 1rem;border-bottom:1px solid var(--surface-300, #dee2e6)}.pho-typeswitch{display:inline-flex;gap:6px;padding:4px;border-radius:999px;background:var(--surface-ground, #f1f3f5);border:1px solid var(--surface-300, #dee2e6)}.pho-typeswitch__tab{appearance:none;border:0;background:transparent;color:var(--text-color-secondary, #6c757d);font:inherit;font-weight:600;font-size:.875rem;display:inline-flex;align-items:center;gap:.5rem;padding:.4375rem .875rem;border-radius:999px;cursor:pointer;transition:color .15s,background .15s,box-shadow .15s}.pho-typeswitch__tab:hover:not(:disabled){color:var(--text-color, #212529)}.pho-typeswitch__tab:disabled{opacity:.5;cursor:default}.pho-typeswitch__tab[aria-selected=true]{background:var(--surface-card, #ffffff);color:var(--primary-color, #10457f);box-shadow:0 1px 2px #0000000f,0 0 0 1px var(--primary-color, #10457f) inset}.pho-typeswitch__count{font-variant-numeric:tabular-nums;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;background:var(--surface-300, #dee2e6);color:var(--text-color-secondary, #6c757d);transition:background .15s,color .15s}.pho-typeswitch__tab[aria-selected=true] .pho-typeswitch__count{background:var(--primary-color, #10457f);color:var(--primary-color-text, #ffffff)}\n"] }]
|
|
4027
4027
|
}], ctorParameters: () => [], propDecorators: { dt: [{
|
|
4028
4028
|
type: ViewChild,
|
|
4029
4029
|
args: ['dt']
|
|
@@ -8873,8 +8873,17 @@ class ReadOnlyInputV2Component {
|
|
|
8873
8873
|
const suffix = this.getLangSuffix();
|
|
8874
8874
|
const key = `labelKeyVal${suffix}`;
|
|
8875
8875
|
const maxItems = 4;
|
|
8876
|
+
const opts = this.field.configuration.options ?? [];
|
|
8876
8877
|
const labels = v
|
|
8877
|
-
.map((x) =>
|
|
8878
|
+
.map((x) => {
|
|
8879
|
+
// Object value: resolve localized label from DTO fields.
|
|
8880
|
+
if (x !== null && typeof x === 'object') {
|
|
8881
|
+
return x?.label ?? x?.userFriendlyMessage ?? x?.name ?? x?.[key] ?? x?.value ?? null;
|
|
8882
|
+
}
|
|
8883
|
+
// Primitive value: resolve label from the options list (symmetric with ssLabel).
|
|
8884
|
+
const opt = opts.find((o) => o?.value === x);
|
|
8885
|
+
return opt?.label ?? x;
|
|
8886
|
+
})
|
|
8878
8887
|
.filter((x) => x !== null && x !== undefined && String(x).trim() !== '')
|
|
8879
8888
|
.map((x) => String(x));
|
|
8880
8889
|
if (!labels.length)
|
|
@@ -10586,7 +10595,7 @@ class MetaFormFieldV2Component {
|
|
|
10586
10595
|
this.cdr.markForCheck();
|
|
10587
10596
|
}
|
|
10588
10597
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormFieldV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10589
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormFieldV2Component, isStandalone: true, selector: "phoenix-meta-form-field-v2", inputs: { field: "field", form: "form", readOnly: "readOnly", disableForm: "disableForm" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n @if (!field.hidden) {\n <div\n class=\"meta-field flex gap-2\"\n [class.flex-column]=\"!isCheckbox()\"\n [class.align-items-center]=\"isCheckbox()\"\n [style.order]=\"field.order ?? null\"\n [attr.data-cy]=\"'meta-field-' + key\"\n >\n\n @if (userFriendlyMessage() && !isCheckbox()) {\n <label class=\"meta-label\" [attr.for]=\"key\">\n {{ userFriendlyMessage()! | translate }}\n @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n </label>\n }\n\n <!-- READ ONLY (page-level ili field-level) -->\n @if (isReadOnly()) {\n <phoenix-read-only-input-v2 [field]=\"field\" [form]=\"form\"></phoenix-read-only-input-v2>\n } @else {\n @switch (type) {\n\n @case (MetaFieldType.TEXT) {\n <input pInputText [id]=\"key\" [formControlName]=\"key\"\n [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n }\n\n @case (MetaFieldType.URL) {\n <input pInputText [id]=\"key\" [formControlName]=\"key\"\n [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n }\n\n @case (MetaFieldType.PASSWORD) {\n <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\">\n </phoenix-meta-password-field-v2>\n }\n\n @case (MetaFieldType.TEXT_AREA) {\n <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" fluid [autoResize]=\"false\" rows=\"5\"\n [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n </textarea>\n }\n\n @case (MetaFieldType.NUMBER) {\n <p-inputNumber [inputId]=\"key\" [formControlName]=\"key\">\n </p-inputNumber>\n }\n\n @case (MetaFieldType.DATE) {\n <p-datepicker\n [inputId]=\"key\"\n [formControlName]=\"key\"\n [showIcon]=\"true\"\n [readonlyInput]=\"true\"\n [showButtonBar]=\"true\"\n appendTo=\"body\"\n (onSelect)=\"onDateSelected($event)\"\n (onClearClick)=\"onDateCleared()\"\n ></p-datepicker>\n }\n\n @case (MetaFieldType.SS_OPTION) {\n <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n [formControlName]=\"key\" [showClear]=\"false\">\n </p-select>\n }\n\n @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key\"\n [showClear]=\"true\">\n </p-select>\n }\n\n @case (MetaFieldType.MS_OPTION) {\n <p-multiselect [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n [formControlName]=\"key\" [showClear]=\"false\" display=\"chip\">\n </p-multiselect>\n }\n\n @case (MetaFieldType.CHECKBOX) {\n <p-checkbox\n [inputId]=\"key\"\n [binary]=\"true\"\n [formControlName]=\"key\"\n [disabled]=\"isDisabled()\"\n ></p-checkbox>\n\n <label class=\"meta-inline-label\" [attr.for]=\"key\">\n {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n </label>\n }\n\n <!-- advanced: preko postoje\u0107ih komponenti -->\n @case (MetaFieldType.TIMEPERIOD) {\n <phoenix-meta-timeperiod [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\n }\n\n @case (MetaFieldType.CURRENCY) {\n <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-currency>\n }\n\n @case (MetaFieldType.START_DUE_DATE) {\n <phoenix-meta-start-due-date-v2\n [formControlName]=\"key\"\n [attr.data-cy]=\"'start-due-' + key\">\n </phoenix-meta-start-due-date-v2>\n }\n\n @case (MetaFieldType.TEXT_EDITOR) {\n <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-text-editor>\n }\n\n @case (MetaFieldType.CHECKBOX_COLOR) {\n <phoenix-meta-checkbox-color-picker-v2\n [formControlName]=\"key\"\n [options]=\"(field.configuration.extra?.['colorGrid'] ?? [])\"\n [disable]=\"isDisabled()\">\n </phoenix-meta-checkbox-color-picker-v2>\n }\n\n @case (MetaFieldType.SWITCH) {\n <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [hidden]=\"field.hidden ?? false\"\n [dataCy]=\"'switch-' + key\"></phoenix-meta-switch-v2>\n }\n\n @case (MetaFieldType.SELECT_BUTTON) {\n <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-select-button>\n }\n\n @case (MetaFieldType.ASSIGN) {\n <phoenix-meta-assign-responsible-v2\n [formControlName]=\"key\"\n [items]=\"(field.configuration.extra?.['items'] ?? [])\"\n [dialogHeaderKey]=\"(field.configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n ></phoenix-meta-assign-responsible-v2>\n }\n\n <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-assign-asset>\n } -->\n\n @case (MetaFieldType.COLOR) {\n <phoenix-meta-color-picker-v2\n [formControlName]=\"key\"\n [disable]=\"isDisabled()\">\n </phoenix-meta-color-picker-v2>\n }\n\n @case (MetaFieldType.UPLOAD) {\n <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-upload>\n }\n\n @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-upload-dragdrop>\n }\n\n @case (MetaFieldType.LINKS_DATA) {\n <!-- <input pInputText [id]=\"key\" [formControlName]=\"key\" [readonly]=\"true\"> -->\n }\n\n @case (MetaFieldType.SLOT) { }\n\n @default {\n <input pInputText [id]=\"key\" [formControlName]=\"key\">\n }\n }\n\n @if (field.configuration.extra?.['dividerAfter']) {\n <div\n class=\"meta-divider\"\n [style.margin]=\"field.configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n ></div>\n }\n }\n\n\n @if (!readOnly && showError()) {\n <small class=\"p-error block mt-1\">\n <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n </small>\n }\n </div>\n }\n</div>", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type:
|
|
10598
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormFieldV2Component, isStandalone: true, selector: "phoenix-meta-form-field-v2", inputs: { field: "field", form: "form", readOnly: "readOnly", disableForm: "disableForm" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n @if (!field.hidden) {\n <div\n class=\"meta-field flex gap-2\"\n [class.flex-column]=\"!isCheckbox()\"\n [class.align-items-center]=\"isCheckbox()\"\n [style.order]=\"field.order ?? null\"\n [attr.data-cy]=\"'meta-field-' + key\"\n >\n\n <!-- Skip the wrapper label only where the control supplies its own:\n - an editable checkbox renders an inline label beside the box;\n - an editable TIMEPERIOD self-labels (phoenix-meta-timeperiod).\n The read-only view has no inline/self label, so it keeps the wrapper\n label (otherwise a read-only checkbox shows a bare \"Yes\" with no field\n name). -->\n @if (userFriendlyMessage() && !(isCheckbox() && !isReadOnly()) && !(type === MetaFieldType.TIMEPERIOD && !isReadOnly())) {\n <label class=\"meta-label\" [attr.for]=\"key\">\n {{ userFriendlyMessage()! | translate }}\n @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n </label>\n }\n\n <!-- READ ONLY (page-level ili field-level) -->\n @if (isReadOnly()) {\n <phoenix-read-only-input-v2 [field]=\"field\" [form]=\"form\"></phoenix-read-only-input-v2>\n } @else {\n @switch (type) {\n\n @case (MetaFieldType.TEXT) {\n <input pInputText [id]=\"key\" [formControlName]=\"key\"\n [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n }\n\n @case (MetaFieldType.URL) {\n <input pInputText [id]=\"key\" [formControlName]=\"key\"\n [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n }\n\n @case (MetaFieldType.PASSWORD) {\n <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\">\n </phoenix-meta-password-field-v2>\n }\n\n @case (MetaFieldType.TEXT_AREA) {\n <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" fluid [autoResize]=\"false\" rows=\"5\"\n [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n </textarea>\n }\n\n @case (MetaFieldType.NUMBER) {\n <p-inputNumber [inputId]=\"key\" [formControlName]=\"key\">\n </p-inputNumber>\n }\n\n @case (MetaFieldType.DATE) {\n <p-datepicker\n [inputId]=\"key\"\n [formControlName]=\"key\"\n [showIcon]=\"true\"\n [readonlyInput]=\"true\"\n [showButtonBar]=\"true\"\n appendTo=\"body\"\n (onSelect)=\"onDateSelected($event)\"\n (onClearClick)=\"onDateCleared()\"\n ></p-datepicker>\n }\n\n @case (MetaFieldType.SS_OPTION) {\n <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n [formControlName]=\"key\" [showClear]=\"false\">\n </p-select>\n }\n\n @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key\"\n [showClear]=\"true\">\n </p-select>\n }\n\n @case (MetaFieldType.MS_OPTION) {\n <p-multiselect [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n [formControlName]=\"key\" [showClear]=\"false\" display=\"chip\">\n </p-multiselect>\n }\n\n @case (MetaFieldType.CHECKBOX) {\n <p-checkbox\n [inputId]=\"key\"\n [binary]=\"true\"\n [formControlName]=\"key\"\n [disabled]=\"isDisabled()\"\n ></p-checkbox>\n\n <label class=\"meta-inline-label\" [attr.for]=\"key\">\n {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n </label>\n }\n\n <!-- advanced: preko postoje\u0107ih komponenti -->\n @case (MetaFieldType.TIMEPERIOD) {\n <phoenix-meta-timeperiod [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\n }\n\n @case (MetaFieldType.CURRENCY) {\n <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-currency>\n }\n\n @case (MetaFieldType.START_DUE_DATE) {\n <phoenix-meta-start-due-date-v2\n [formControlName]=\"key\"\n [attr.data-cy]=\"'start-due-' + key\">\n </phoenix-meta-start-due-date-v2>\n }\n\n @case (MetaFieldType.TEXT_EDITOR) {\n <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-text-editor>\n }\n\n @case (MetaFieldType.CHECKBOX_COLOR) {\n <phoenix-meta-checkbox-color-picker-v2\n [formControlName]=\"key\"\n [options]=\"(field.configuration.extra?.['colorGrid'] ?? [])\"\n [disable]=\"isDisabled()\">\n </phoenix-meta-checkbox-color-picker-v2>\n }\n\n @case (MetaFieldType.SWITCH) {\n <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [hidden]=\"field.hidden ?? false\"\n [dataCy]=\"'switch-' + key\"></phoenix-meta-switch-v2>\n }\n\n @case (MetaFieldType.SELECT_BUTTON) {\n <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-select-button>\n }\n\n @case (MetaFieldType.ASSIGN) {\n <phoenix-meta-assign-responsible-v2\n [formControlName]=\"key\"\n [items]=\"(field.configuration.extra?.['items'] ?? [])\"\n [dialogHeaderKey]=\"(field.configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n ></phoenix-meta-assign-responsible-v2>\n }\n\n <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-assign-asset>\n } -->\n\n @case (MetaFieldType.COLOR) {\n <phoenix-meta-color-picker-v2\n [formControlName]=\"key\"\n [disable]=\"isDisabled()\">\n </phoenix-meta-color-picker-v2>\n }\n\n @case (MetaFieldType.UPLOAD) {\n <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-upload>\n }\n\n @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-upload-dragdrop>\n }\n\n @case (MetaFieldType.LINKS_DATA) {\n <!-- <input pInputText [id]=\"key\" [formControlName]=\"key\" [readonly]=\"true\"> -->\n }\n\n @case (MetaFieldType.SLOT) { }\n\n @default {\n <input pInputText [id]=\"key\" [formControlName]=\"key\">\n }\n }\n\n @if (field.configuration.extra?.['dividerAfter']) {\n <div\n class=\"meta-divider\"\n [style.margin]=\"field.configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n ></div>\n }\n }\n\n\n @if (!readOnly && showError()) {\n <small class=\"p-error block mt-1\">\n <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n </small>\n }\n </div>\n }\n</div>", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type:
|
|
10590
10599
|
// PrimeNG 20 base inputs
|
|
10591
10600
|
InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$7.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$5.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$6.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type:
|
|
10592
10601
|
// Advanced / custom Phoenix fields
|
|
@@ -10627,7 +10636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
10627
10636
|
MetaUploadComponentDragDrop,
|
|
10628
10637
|
// Read-only renderer used when page or field is in read-only mode
|
|
10629
10638
|
ReadOnlyInputV2Component,
|
|
10630
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form\">\n @if (!field.hidden) {\n <div\n class=\"meta-field flex gap-2\"\n [class.flex-column]=\"!isCheckbox()\"\n [class.align-items-center]=\"isCheckbox()\"\n [style.order]=\"field.order ?? null\"\n [attr.data-cy]=\"'meta-field-' + key\"\n >\n\n @if (userFriendlyMessage() && !isCheckbox()) {\n <label class=\"meta-label\" [attr.for]=\"key\">\n {{ userFriendlyMessage()! | translate }}\n @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n </label>\n }\n\n <!-- READ ONLY (page-level ili field-level) -->\n @if (isReadOnly()) {\n <phoenix-read-only-input-v2 [field]=\"field\" [form]=\"form\"></phoenix-read-only-input-v2>\n } @else {\n @switch (type) {\n\n @case (MetaFieldType.TEXT) {\n <input pInputText [id]=\"key\" [formControlName]=\"key\"\n [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n }\n\n @case (MetaFieldType.URL) {\n <input pInputText [id]=\"key\" [formControlName]=\"key\"\n [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n }\n\n @case (MetaFieldType.PASSWORD) {\n <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\">\n </phoenix-meta-password-field-v2>\n }\n\n @case (MetaFieldType.TEXT_AREA) {\n <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" fluid [autoResize]=\"false\" rows=\"5\"\n [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n </textarea>\n }\n\n @case (MetaFieldType.NUMBER) {\n <p-inputNumber [inputId]=\"key\" [formControlName]=\"key\">\n </p-inputNumber>\n }\n\n @case (MetaFieldType.DATE) {\n <p-datepicker\n [inputId]=\"key\"\n [formControlName]=\"key\"\n [showIcon]=\"true\"\n [readonlyInput]=\"true\"\n [showButtonBar]=\"true\"\n appendTo=\"body\"\n (onSelect)=\"onDateSelected($event)\"\n (onClearClick)=\"onDateCleared()\"\n ></p-datepicker>\n }\n\n @case (MetaFieldType.SS_OPTION) {\n <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n [formControlName]=\"key\" [showClear]=\"false\">\n </p-select>\n }\n\n @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key\"\n [showClear]=\"true\">\n </p-select>\n }\n\n @case (MetaFieldType.MS_OPTION) {\n <p-multiselect [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n [formControlName]=\"key\" [showClear]=\"false\" display=\"chip\">\n </p-multiselect>\n }\n\n @case (MetaFieldType.CHECKBOX) {\n <p-checkbox\n [inputId]=\"key\"\n [binary]=\"true\"\n [formControlName]=\"key\"\n [disabled]=\"isDisabled()\"\n ></p-checkbox>\n\n <label class=\"meta-inline-label\" [attr.for]=\"key\">\n {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n </label>\n }\n\n <!-- advanced: preko postoje\u0107ih komponenti -->\n @case (MetaFieldType.TIMEPERIOD) {\n <phoenix-meta-timeperiod [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\n }\n\n @case (MetaFieldType.CURRENCY) {\n <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-currency>\n }\n\n @case (MetaFieldType.START_DUE_DATE) {\n <phoenix-meta-start-due-date-v2\n [formControlName]=\"key\"\n [attr.data-cy]=\"'start-due-' + key\">\n </phoenix-meta-start-due-date-v2>\n }\n\n @case (MetaFieldType.TEXT_EDITOR) {\n <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-text-editor>\n }\n\n @case (MetaFieldType.CHECKBOX_COLOR) {\n <phoenix-meta-checkbox-color-picker-v2\n [formControlName]=\"key\"\n [options]=\"(field.configuration.extra?.['colorGrid'] ?? [])\"\n [disable]=\"isDisabled()\">\n </phoenix-meta-checkbox-color-picker-v2>\n }\n\n @case (MetaFieldType.SWITCH) {\n <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [hidden]=\"field.hidden ?? false\"\n [dataCy]=\"'switch-' + key\"></phoenix-meta-switch-v2>\n }\n\n @case (MetaFieldType.SELECT_BUTTON) {\n <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-select-button>\n }\n\n @case (MetaFieldType.ASSIGN) {\n <phoenix-meta-assign-responsible-v2\n [formControlName]=\"key\"\n [items]=\"(field.configuration.extra?.['items'] ?? [])\"\n [dialogHeaderKey]=\"(field.configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n ></phoenix-meta-assign-responsible-v2>\n }\n\n <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-assign-asset>\n } -->\n\n @case (MetaFieldType.COLOR) {\n <phoenix-meta-color-picker-v2\n [formControlName]=\"key\"\n [disable]=\"isDisabled()\">\n </phoenix-meta-color-picker-v2>\n }\n\n @case (MetaFieldType.UPLOAD) {\n <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-upload>\n }\n\n @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-upload-dragdrop>\n }\n\n @case (MetaFieldType.LINKS_DATA) {\n <!-- <input pInputText [id]=\"key\" [formControlName]=\"key\" [readonly]=\"true\"> -->\n }\n\n @case (MetaFieldType.SLOT) { }\n\n @default {\n <input pInputText [id]=\"key\" [formControlName]=\"key\">\n }\n }\n\n @if (field.configuration.extra?.['dividerAfter']) {\n <div\n class=\"meta-divider\"\n [style.margin]=\"field.configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n ></div>\n }\n }\n\n\n @if (!readOnly && showError()) {\n <small class=\"p-error block mt-1\">\n <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n </small>\n }\n </div>\n }\n</div>", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"] }]
|
|
10639
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form\">\n @if (!field.hidden) {\n <div\n class=\"meta-field flex gap-2\"\n [class.flex-column]=\"!isCheckbox()\"\n [class.align-items-center]=\"isCheckbox()\"\n [style.order]=\"field.order ?? null\"\n [attr.data-cy]=\"'meta-field-' + key\"\n >\n\n <!-- Skip the wrapper label only where the control supplies its own:\n - an editable checkbox renders an inline label beside the box;\n - an editable TIMEPERIOD self-labels (phoenix-meta-timeperiod).\n The read-only view has no inline/self label, so it keeps the wrapper\n label (otherwise a read-only checkbox shows a bare \"Yes\" with no field\n name). -->\n @if (userFriendlyMessage() && !(isCheckbox() && !isReadOnly()) && !(type === MetaFieldType.TIMEPERIOD && !isReadOnly())) {\n <label class=\"meta-label\" [attr.for]=\"key\">\n {{ userFriendlyMessage()! | translate }}\n @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n </label>\n }\n\n <!-- READ ONLY (page-level ili field-level) -->\n @if (isReadOnly()) {\n <phoenix-read-only-input-v2 [field]=\"field\" [form]=\"form\"></phoenix-read-only-input-v2>\n } @else {\n @switch (type) {\n\n @case (MetaFieldType.TEXT) {\n <input pInputText [id]=\"key\" [formControlName]=\"key\"\n [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n }\n\n @case (MetaFieldType.URL) {\n <input pInputText [id]=\"key\" [formControlName]=\"key\"\n [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n }\n\n @case (MetaFieldType.PASSWORD) {\n <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\">\n </phoenix-meta-password-field-v2>\n }\n\n @case (MetaFieldType.TEXT_AREA) {\n <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" fluid [autoResize]=\"false\" rows=\"5\"\n [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n </textarea>\n }\n\n @case (MetaFieldType.NUMBER) {\n <p-inputNumber [inputId]=\"key\" [formControlName]=\"key\">\n </p-inputNumber>\n }\n\n @case (MetaFieldType.DATE) {\n <p-datepicker\n [inputId]=\"key\"\n [formControlName]=\"key\"\n [showIcon]=\"true\"\n [readonlyInput]=\"true\"\n [showButtonBar]=\"true\"\n appendTo=\"body\"\n (onSelect)=\"onDateSelected($event)\"\n (onClearClick)=\"onDateCleared()\"\n ></p-datepicker>\n }\n\n @case (MetaFieldType.SS_OPTION) {\n <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n [formControlName]=\"key\" [showClear]=\"false\">\n </p-select>\n }\n\n @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n <p-select [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" [formControlName]=\"key\"\n [showClear]=\"true\">\n </p-select>\n }\n\n @case (MetaFieldType.MS_OPTION) {\n <p-multiselect [inputId]=\"key\" [options]=\"field.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n [formControlName]=\"key\" [showClear]=\"false\" display=\"chip\">\n </p-multiselect>\n }\n\n @case (MetaFieldType.CHECKBOX) {\n <p-checkbox\n [inputId]=\"key\"\n [binary]=\"true\"\n [formControlName]=\"key\"\n [disabled]=\"isDisabled()\"\n ></p-checkbox>\n\n <label class=\"meta-inline-label\" [attr.for]=\"key\">\n {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n </label>\n }\n\n <!-- advanced: preko postoje\u0107ih komponenti -->\n @case (MetaFieldType.TIMEPERIOD) {\n <phoenix-meta-timeperiod [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\n }\n\n @case (MetaFieldType.CURRENCY) {\n <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-currency>\n }\n\n @case (MetaFieldType.START_DUE_DATE) {\n <phoenix-meta-start-due-date-v2\n [formControlName]=\"key\"\n [attr.data-cy]=\"'start-due-' + key\">\n </phoenix-meta-start-due-date-v2>\n }\n\n @case (MetaFieldType.TEXT_EDITOR) {\n <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-text-editor>\n }\n\n @case (MetaFieldType.CHECKBOX_COLOR) {\n <phoenix-meta-checkbox-color-picker-v2\n [formControlName]=\"key\"\n [options]=\"(field.configuration.extra?.['colorGrid'] ?? [])\"\n [disable]=\"isDisabled()\">\n </phoenix-meta-checkbox-color-picker-v2>\n }\n\n @case (MetaFieldType.SWITCH) {\n <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [hidden]=\"field.hidden ?? false\"\n [dataCy]=\"'switch-' + key\"></phoenix-meta-switch-v2>\n }\n\n @case (MetaFieldType.SELECT_BUTTON) {\n <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-select-button>\n }\n\n @case (MetaFieldType.ASSIGN) {\n <phoenix-meta-assign-responsible-v2\n [formControlName]=\"key\"\n [items]=\"(field.configuration.extra?.['items'] ?? [])\"\n [dialogHeaderKey]=\"(field.configuration.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n ></phoenix-meta-assign-responsible-v2>\n }\n\n <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-assign-asset>\n } -->\n\n @case (MetaFieldType.COLOR) {\n <phoenix-meta-color-picker-v2\n [formControlName]=\"key\"\n [disable]=\"isDisabled()\">\n </phoenix-meta-color-picker-v2>\n }\n\n @case (MetaFieldType.UPLOAD) {\n <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-upload>\n }\n\n @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n [parentForm]=\"form\"></phoenix-meta-upload-dragdrop>\n }\n\n @case (MetaFieldType.LINKS_DATA) {\n <!-- <input pInputText [id]=\"key\" [formControlName]=\"key\" [readonly]=\"true\"> -->\n }\n\n @case (MetaFieldType.SLOT) { }\n\n @default {\n <input pInputText [id]=\"key\" [formControlName]=\"key\">\n }\n }\n\n @if (field.configuration.extra?.['dividerAfter']) {\n <div\n class=\"meta-divider\"\n [style.margin]=\"field.configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n ></div>\n }\n }\n\n\n @if (!readOnly && showError()) {\n <small class=\"p-error block mt-1\">\n <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n </small>\n }\n </div>\n }\n</div>", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{resize:none!important}.meta-inline-label{opacity:.9;margin:0;cursor:pointer}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"] }]
|
|
10631
10640
|
}], propDecorators: { field: [{
|
|
10632
10641
|
type: Input,
|
|
10633
10642
|
args: [{ required: true }]
|