@fuentis/phoenix-ui 0.0.9-alpha.662 → 0.0.9-alpha.664
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/fuentis-phoenix-ui.mjs +61 -28
- package/fesm2022/fuentis-phoenix-ui.mjs.map +1 -1
- package/index.d.ts +12 -0
- package/package.json +1 -1
|
@@ -4002,7 +4002,7 @@ class TableComponent {
|
|
|
4002
4002
|
});
|
|
4003
4003
|
}
|
|
4004
4004
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4005
|
-
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
|
+
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 {{ (tableConfiguration?.emptyMessage || \"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" }] });
|
|
4006
4006
|
}
|
|
4007
4007
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, decorators: [{
|
|
4008
4008
|
type: Component,
|
|
@@ -4024,7 +4024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4024
4024
|
TimePeriodPipe,
|
|
4025
4025
|
IsBooleanPipe,
|
|
4026
4026
|
BadgeModule,
|
|
4027
|
-
], 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
|
+
], 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 {{ (tableConfiguration?.emptyMessage || \"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"] }]
|
|
4028
4028
|
}], ctorParameters: () => [], propDecorators: { dt: [{
|
|
4029
4029
|
type: ViewChild,
|
|
4030
4030
|
args: ['dt']
|
|
@@ -4088,6 +4088,16 @@ function getLangPattern(currentLang) {
|
|
|
4088
4088
|
return regexPatternSr;
|
|
4089
4089
|
}
|
|
4090
4090
|
}
|
|
4091
|
+
/**
|
|
4092
|
+
* True when `value` is a non-empty, well-formed time-period string for the given
|
|
4093
|
+
* language (e.g. "2w 4d 6h 45m"). Used by fields to decide whether to show the
|
|
4094
|
+
* format guidance — a valid value needs none.
|
|
4095
|
+
*/
|
|
4096
|
+
function isTimePeriodFormatValid(value, currentLang) {
|
|
4097
|
+
if (!value)
|
|
4098
|
+
return false;
|
|
4099
|
+
return getLangPattern(currentLang).test(value);
|
|
4100
|
+
}
|
|
4091
4101
|
function timePeriod(currentLang, tpMin) {
|
|
4092
4102
|
return (control) => {
|
|
4093
4103
|
if (!control.pristine) {
|
|
@@ -4922,6 +4932,13 @@ var ErrorType;
|
|
|
4922
4932
|
class InlineFieldError {
|
|
4923
4933
|
translateService;
|
|
4924
4934
|
ctrl;
|
|
4935
|
+
/**
|
|
4936
|
+
* Per-field message overrides, keyed by error type (e.g. `{ required:
|
|
4937
|
+
* 'CONTINUITY.VALIDATION.GAP_TITLE_REQUIRED' }`). The value is an i18n key
|
|
4938
|
+
* (translated) or plain text; when set for the active error it wins over the
|
|
4939
|
+
* generic message.
|
|
4940
|
+
*/
|
|
4941
|
+
errorMessages;
|
|
4925
4942
|
note;
|
|
4926
4943
|
constructor(translateService) {
|
|
4927
4944
|
this.translateService = translateService;
|
|
@@ -4958,8 +4975,13 @@ class InlineFieldError {
|
|
|
4958
4975
|
};
|
|
4959
4976
|
}
|
|
4960
4977
|
if (control?.errors) {
|
|
4961
|
-
|
|
4962
|
-
|
|
4978
|
+
const activeError = Object.keys(control.errors)[0];
|
|
4979
|
+
// A per-field override for the active error wins over the generic message.
|
|
4980
|
+
const override = this.errorMessages?.[activeError];
|
|
4981
|
+
if (override) {
|
|
4982
|
+
return this.translateService.instant(override);
|
|
4983
|
+
}
|
|
4984
|
+
switch (activeError) {
|
|
4963
4985
|
case ErrorType.REQUIRED:
|
|
4964
4986
|
return this.translateService.instant('VALIDATION_MESSAGE.THIS_FIELD_IS_REQUIRED');
|
|
4965
4987
|
case ErrorType.MIN_LENGTH:
|
|
@@ -5013,7 +5035,7 @@ class InlineFieldError {
|
|
|
5013
5035
|
this.sub$?.unsubscribe();
|
|
5014
5036
|
}
|
|
5015
5037
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InlineFieldError, deps: [{ token: i4$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5016
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InlineFieldError, isStandalone: true, selector: "phoenix-inline-field-error", inputs: { ctrl: "ctrl" }, usesOnChanges: true, ngImport: i0, template: `
|
|
5038
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InlineFieldError, isStandalone: true, selector: "phoenix-inline-field-error", inputs: { ctrl: "ctrl", errorMessages: "errorMessages" }, usesOnChanges: true, ngImport: i0, template: `
|
|
5017
5039
|
<div style="height: 1px;">
|
|
5018
5040
|
@if (note) {
|
|
5019
5041
|
<div [@slideInOut] class="static">
|
|
@@ -5124,6 +5146,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
5124
5146
|
` }]
|
|
5125
5147
|
}], ctorParameters: () => [{ type: i4$2.TranslateService }], propDecorators: { ctrl: [{
|
|
5126
5148
|
type: Input
|
|
5149
|
+
}], errorMessages: [{
|
|
5150
|
+
type: Input
|
|
5127
5151
|
}] } });
|
|
5128
5152
|
|
|
5129
5153
|
class BaseMetaField {
|
|
@@ -5237,7 +5261,7 @@ class MetaCalendarComponent extends BaseMetaField {
|
|
|
5237
5261
|
|
|
5238
5262
|
<phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
|
|
5239
5263
|
</div>
|
|
5240
|
-
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { 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"] }] });
|
|
5264
|
+
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }, { 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"] }] });
|
|
5241
5265
|
}
|
|
5242
5266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaCalendarComponent, decorators: [{
|
|
5243
5267
|
type: Component,
|
|
@@ -5452,7 +5476,7 @@ class MetaColorPickerComponent extends BaseMetaField {
|
|
|
5452
5476
|
@if (!control?.hidden) {
|
|
5453
5477
|
<phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
|
|
5454
5478
|
}
|
|
5455
|
-
`, isInline: true, styles: [":host ::ng-deep .color-swatch.p-colorpicker{width:35px;height:35px;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important}:host ::ng-deep .color-swatch .p-colorpicker-preview{width:35px!important;height:35px!important;border:none!important;border-radius:6px!important;box-shadow:none!important}:host ::ng-deep .color-swatch .p-colorpicker-preview:focus,:host ::ng-deep .color-swatch .p-colorpicker-preview:focus-visible{outline:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i2$7.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "inline", "format", "tabindex", "inputId", "autoZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus", "defaultColor", "appendTo"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
|
|
5479
|
+
`, isInline: true, styles: [":host ::ng-deep .color-swatch.p-colorpicker{width:35px;height:35px;padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important}:host ::ng-deep .color-swatch .p-colorpicker-preview{width:35px!important;height:35px!important;border:none!important;border-radius:6px!important;box-shadow:none!important}:host ::ng-deep .color-swatch .p-colorpicker-preview:focus,:host ::ng-deep .color-swatch .p-colorpicker-preview:focus-visible{outline:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i2$7.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "inline", "format", "tabindex", "inputId", "autoZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus", "defaultColor", "appendTo"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }] });
|
|
5456
5480
|
}
|
|
5457
5481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaColorPickerComponent, decorators: [{
|
|
5458
5482
|
type: Component,
|
|
@@ -5537,7 +5561,7 @@ class MetaCurrencyComponent extends BaseMetaField {
|
|
|
5537
5561
|
[ctrl]="ctrl"
|
|
5538
5562
|
></phoenix-inline-field-error>
|
|
5539
5563
|
</div>
|
|
5540
|
-
`, isInline: true, styles: [":host ::ng-deep p-inputnumber input{width:100%!important;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { 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"] }] });
|
|
5564
|
+
`, isInline: true, styles: [":host ::ng-deep p-inputnumber input{width:100%!important;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { 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"] }] });
|
|
5541
5565
|
}
|
|
5542
5566
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaCurrencyComponent, decorators: [{
|
|
5543
5567
|
type: Component,
|
|
@@ -5614,7 +5638,7 @@ class MetaMultipleSelectComponent extends BaseMetaField {
|
|
|
5614
5638
|
*ngIf="!control?.hidden"
|
|
5615
5639
|
[ctrl]="ctrl"
|
|
5616
5640
|
></phoenix-inline-field-error>
|
|
5617
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: TranslateModule }] });
|
|
5641
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }, { kind: "ngmodule", type: TranslateModule }] });
|
|
5618
5642
|
}
|
|
5619
5643
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaMultipleSelectComponent, decorators: [{
|
|
5620
5644
|
type: Component,
|
|
@@ -5685,7 +5709,7 @@ class MetaNumberComponent extends BaseMetaField {
|
|
|
5685
5709
|
[ctrl]="ctrl"
|
|
5686
5710
|
></phoenix-inline-field-error>
|
|
5687
5711
|
</div>
|
|
5688
|
-
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "ngmodule", type: InputTextModule }] });
|
|
5712
|
+
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "ngmodule", type: InputTextModule }] });
|
|
5689
5713
|
}
|
|
5690
5714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaNumberComponent, decorators: [{
|
|
5691
5715
|
type: Component,
|
|
@@ -5756,7 +5780,7 @@ class MetaPasswordFeildComponent extends BaseMetaField {
|
|
|
5756
5780
|
<phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
|
|
5757
5781
|
}
|
|
5758
5782
|
</div>
|
|
5759
|
-
`, isInline: true, styles: [":host ::ng-deep .p-component{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i2$8.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
|
|
5783
|
+
`, isInline: true, styles: [":host ::ng-deep .p-component{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i2$8.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }] });
|
|
5760
5784
|
}
|
|
5761
5785
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaPasswordFeildComponent, decorators: [{
|
|
5762
5786
|
type: Component,
|
|
@@ -5824,7 +5848,7 @@ class MetaSelectButtonComponent extends BaseMetaField {
|
|
|
5824
5848
|
[ctrl]="ctrl"
|
|
5825
5849
|
></phoenix-inline-field-error>
|
|
5826
5850
|
</div>
|
|
5827
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }] });
|
|
5851
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }] });
|
|
5828
5852
|
}
|
|
5829
5853
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaSelectButtonComponent, decorators: [{
|
|
5830
5854
|
type: Component,
|
|
@@ -5981,7 +6005,7 @@ class MetaSingleSelectObjectBasedComponent extends BaseMetaField {
|
|
|
5981
6005
|
@if (!control?.hidden) {
|
|
5982
6006
|
<phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
|
|
5983
6007
|
}
|
|
5984
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "pipe", type: TranslateDropdownData, name: "translateDropdownData" }] });
|
|
6008
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }, { kind: "pipe", type: TranslateDropdownData, name: "translateDropdownData" }] });
|
|
5985
6009
|
}
|
|
5986
6010
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaSingleSelectObjectBasedComponent, decorators: [{
|
|
5987
6011
|
type: Component,
|
|
@@ -6285,7 +6309,7 @@ class MetaSingleSelectComponent extends BaseMetaField {
|
|
|
6285
6309
|
*ngIf="!control?.hidden"
|
|
6286
6310
|
[ctrl]="ctrl"
|
|
6287
6311
|
></phoenix-inline-field-error>
|
|
6288
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { 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: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "pipe", type: TranslateDropdownData, name: "translateDropdownData" }] });
|
|
6312
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { 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: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }, { kind: "pipe", type: TranslateDropdownData, name: "translateDropdownData" }] });
|
|
6289
6313
|
}
|
|
6290
6314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaSingleSelectComponent, decorators: [{
|
|
6291
6315
|
type: Component,
|
|
@@ -6551,7 +6575,7 @@ class MetaStartDueDateComponent {
|
|
|
6551
6575
|
|
|
6552
6576
|
<phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
|
|
6553
6577
|
</div>
|
|
6554
|
-
`, isInline: true, styles: [""], dependencies: [{ 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: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
|
|
6578
|
+
`, isInline: true, styles: [""], dependencies: [{ 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: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
|
|
6555
6579
|
}
|
|
6556
6580
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaStartDueDateComponent, decorators: [{
|
|
6557
6581
|
type: Component,
|
|
@@ -6670,7 +6694,7 @@ class MetaSwitchComponent extends BaseMetaField {
|
|
|
6670
6694
|
>
|
|
6671
6695
|
}
|
|
6672
6696
|
</div>
|
|
6673
|
-
`, isInline: true, styles: [":host ::ng-deep .p-toggleswitch{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$6.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2$5.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
|
|
6697
|
+
`, isInline: true, styles: [":host ::ng-deep .p-toggleswitch{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$6.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2$5.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
|
|
6674
6698
|
}
|
|
6675
6699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaSwitchComponent, decorators: [{
|
|
6676
6700
|
type: Component,
|
|
@@ -6790,7 +6814,7 @@ class MetaTextAreaComponent extends BaseMetaField {
|
|
|
6790
6814
|
*ngIf="!control?.hidden"
|
|
6791
6815
|
[ctrl]="ctrl"
|
|
6792
6816
|
></phoenix-inline-field-error>
|
|
6793
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$7.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }] });
|
|
6817
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$7.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }] });
|
|
6794
6818
|
}
|
|
6795
6819
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaTextAreaComponent, decorators: [{
|
|
6796
6820
|
type: Component,
|
|
@@ -7000,7 +7024,7 @@ class MetaTextEditorComponent extends BaseMetaField {
|
|
|
7000
7024
|
></phoenix-inline-field-error>
|
|
7001
7025
|
</div>
|
|
7002
7026
|
</div>
|
|
7003
|
-
`, isInline: true, styles: [":is() .NgxEditor__Wrapper,:is() .NgxEditor__Content{min-height:120px}:is() .NgxEditor__MenuItem--IconContainer[title=\"Insert Image\"]{display:none!important}:is() .font-monospace{font-family:Courier New,Courier,monospace;font-size:13px}:is() .html-preview-content{padding:.75rem;background:var(--surface-ground);border:1px solid var(--surface-border);border-radius:var(--border-radius);min-height:50px}:is() .html-preview-content p{margin:0 0 .5rem}:is() .html-preview-content p:last-child{margin-bottom:0}:is() .html-preview-content ul,:is() .html-preview-content ol{margin:.5rem 0;padding-left:1.5rem}:is() .html-preview-content strong{font-weight:700}:is() .html-preview-content em{font-style:italic}:is() .html-preview-content h1,:is() .html-preview-content h2,:is() .html-preview-content h3,:is() .html-preview-content h4,:is() .html-preview-content h5,:is() .html-preview-content h6{margin:.5rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$7.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] });
|
|
7027
|
+
`, isInline: true, styles: [":is() .NgxEditor__Wrapper,:is() .NgxEditor__Content{min-height:120px}:is() .NgxEditor__MenuItem--IconContainer[title=\"Insert Image\"]{display:none!important}:is() .font-monospace{font-family:Courier New,Courier,monospace;font-size:13px}:is() .html-preview-content{padding:.75rem;background:var(--surface-ground);border:1px solid var(--surface-border);border-radius:var(--border-radius);min-height:50px}:is() .html-preview-content p{margin:0 0 .5rem}:is() .html-preview-content p:last-child{margin-bottom:0}:is() .html-preview-content ul,:is() .html-preview-content ol{margin:.5rem 0;padding-left:1.5rem}:is() .html-preview-content strong{font-weight:700}:is() .html-preview-content em{font-style:italic}:is() .html-preview-content h1,:is() .html-preview-content h2,:is() .html-preview-content h3,:is() .html-preview-content h4,:is() .html-preview-content h5,:is() .html-preview-content h6{margin:.5rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }, { kind: "component", type: NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$7.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] });
|
|
7004
7028
|
}
|
|
7005
7029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaTextEditorComponent, decorators: [{
|
|
7006
7030
|
type: Component,
|
|
@@ -7109,7 +7133,7 @@ class MetaTextInputComponent extends BaseMetaField {
|
|
|
7109
7133
|
[ctrl]="ctrl"
|
|
7110
7134
|
></phoenix-inline-field-error>
|
|
7111
7135
|
</div>
|
|
7112
|
-
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }] });
|
|
7136
|
+
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }] });
|
|
7113
7137
|
}
|
|
7114
7138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaTextInputComponent, decorators: [{
|
|
7115
7139
|
type: Component,
|
|
@@ -7213,7 +7237,7 @@ class MetaTimeperiodComponent {
|
|
|
7213
7237
|
[ctrl]="ctrl"
|
|
7214
7238
|
></phoenix-inline-field-error>
|
|
7215
7239
|
</div>
|
|
7216
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }] });
|
|
7240
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }] });
|
|
7217
7241
|
}
|
|
7218
7242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaTimeperiodComponent, decorators: [{
|
|
7219
7243
|
type: Component,
|
|
@@ -7308,7 +7332,7 @@ class MetaUploadComponent extends BaseMetaField {
|
|
|
7308
7332
|
[ctrl]="ctrl"
|
|
7309
7333
|
></phoenix-inline-field-error>
|
|
7310
7334
|
</div>
|
|
7311
|
-
`, isInline: true, styles: ["input[type=file]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "directive", type: i4$7.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
|
|
7335
|
+
`, isInline: true, styles: ["input[type=file]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "directive", type: i4$7.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
|
|
7312
7336
|
}
|
|
7313
7337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaUploadComponent, decorators: [{
|
|
7314
7338
|
type: Component,
|
|
@@ -8035,7 +8059,7 @@ class MetaUploadComponentDragDrop extends BaseMetaField {
|
|
|
8035
8059
|
[ctrl]="ctrl"
|
|
8036
8060
|
></phoenix-inline-field-error>
|
|
8037
8061
|
</div>
|
|
8038
|
-
`, isInline: true, styles: ["input[type=file]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i2$9.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
|
|
8062
|
+
`, isInline: true, styles: ["input[type=file]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl", "errorMessages"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i2$9.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }] });
|
|
8039
8063
|
}
|
|
8040
8064
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaUploadComponentDragDrop, decorators: [{
|
|
8041
8065
|
type: Component,
|
|
@@ -8688,12 +8712,15 @@ class MetaTimeperiodV2Component {
|
|
|
8688
8712
|
disable = input(false, ...(ngDevMode ? [{ debugName: "disable" }] : []));
|
|
8689
8713
|
/** Whether the field is required (drives the empty "required" note). */
|
|
8690
8714
|
mandatory = input(false, ...(ngDevMode ? [{ debugName: "mandatory" }] : []));
|
|
8715
|
+
translate = inject(TranslateService);
|
|
8691
8716
|
formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
|
|
8692
8717
|
/** True once the user has typed in / left the field — gates the "required" note. */
|
|
8693
8718
|
interacted = signal(false, ...(ngDevMode ? [{ debugName: "interacted" }] : []));
|
|
8694
8719
|
/** The duration string shown in the input (the control value is this string). */
|
|
8695
8720
|
value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
8696
8721
|
disabled = computed(() => this.disable() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
8722
|
+
/** True when the current value is a well-formed period — then no guidance is shown. */
|
|
8723
|
+
validFormat = computed(() => isTimePeriodFormatValid(this.value(), this.translate.currentLang), ...(ngDevMode ? [{ debugName: "validFormat" }] : []));
|
|
8697
8724
|
onChange = () => { };
|
|
8698
8725
|
onTouched = () => { };
|
|
8699
8726
|
writeValue(v) {
|
|
@@ -8741,12 +8768,12 @@ class MetaTimeperiodV2Component {
|
|
|
8741
8768
|
(input)="onInput($event)"
|
|
8742
8769
|
(blur)="handleBlur()"
|
|
8743
8770
|
/>
|
|
8744
|
-
@if (value()) {
|
|
8745
|
-
<!-- Guidance while typing
|
|
8771
|
+
@if (value() && !validFormat()) {
|
|
8772
|
+
<!-- Guidance while typing an incomplete/invalid value; hidden once it's valid. -->
|
|
8746
8773
|
<small class="block mt-1 timeperiod-v2-note">
|
|
8747
8774
|
<i class="pi pi-info-circle mr-1"></i>{{ 'VALIDATION_MESSAGE.VALUE_SHOULD_MATCH_TIMEPATTERN' | translate }}
|
|
8748
8775
|
</small>
|
|
8749
|
-
} @else if (mandatory() && interacted()) {
|
|
8776
|
+
} @else if (!value() && mandatory() && interacted()) {
|
|
8750
8777
|
<!-- Empty required field (e.g. cleared on edit). -->
|
|
8751
8778
|
<small class="block mt-1 timeperiod-v2-note">
|
|
8752
8779
|
<i class="pi pi-info-circle mr-1"></i>{{ 'VALIDATION_MESSAGE.THIS_FIELD_IS_REQUIRED' | translate }}
|
|
@@ -8768,12 +8795,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
8768
8795
|
(input)="onInput($event)"
|
|
8769
8796
|
(blur)="handleBlur()"
|
|
8770
8797
|
/>
|
|
8771
|
-
@if (value()) {
|
|
8772
|
-
<!-- Guidance while typing
|
|
8798
|
+
@if (value() && !validFormat()) {
|
|
8799
|
+
<!-- Guidance while typing an incomplete/invalid value; hidden once it's valid. -->
|
|
8773
8800
|
<small class="block mt-1 timeperiod-v2-note">
|
|
8774
8801
|
<i class="pi pi-info-circle mr-1"></i>{{ 'VALIDATION_MESSAGE.VALUE_SHOULD_MATCH_TIMEPATTERN' | translate }}
|
|
8775
8802
|
</small>
|
|
8776
|
-
} @else if (mandatory() && interacted()) {
|
|
8803
|
+
} @else if (!value() && mandatory() && interacted()) {
|
|
8777
8804
|
<!-- Empty required field (e.g. cleared on edit). -->
|
|
8778
8805
|
<small class="block mt-1 timeperiod-v2-note">
|
|
8779
8806
|
<i class="pi pi-info-circle mr-1"></i>{{ 'VALIDATION_MESSAGE.THIS_FIELD_IS_REQUIRED' | translate }}
|
|
@@ -10081,6 +10108,12 @@ class MetaFormFieldV2Component {
|
|
|
10081
10108
|
const k = this.errorKey();
|
|
10082
10109
|
if (!c || !k)
|
|
10083
10110
|
return '';
|
|
10111
|
+
// A per-field override for the active error wins over the generic message
|
|
10112
|
+
// (value is an i18n key or plain text).
|
|
10113
|
+
const override = this.field()?.errorMessages?.[k];
|
|
10114
|
+
if (override) {
|
|
10115
|
+
return this.translate.instant(override);
|
|
10116
|
+
}
|
|
10084
10117
|
switch (k) {
|
|
10085
10118
|
case 'required':
|
|
10086
10119
|
return this.translate.instant('VALIDATION_MESSAGE.THIS_FIELD_IS_REQUIRED');
|