@fuentis/phoenix-ui 0.0.9-alpha.542 → 0.0.9-alpha.544

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -66,7 +66,7 @@ import * as i16 from 'primeng/listbox';
 import { ListboxModule } from 'primeng/listbox';
 import * as i3$5 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
-import * as i9$1 from 'primeng/chip';
+import * as i8$2 from 'primeng/chip';
 import { ChipModule } from 'primeng/chip';
 import { PanelModule } from 'primeng/panel';
 import * as i13 from 'primeng/overlaybadge';
@@ -3610,7 +3610,7 @@ class TableComponent {
         navigator.clipboard.writeText(text);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length === 0) {\n  <table-caption [columns]=\"columns\" [tableConfiguration]=\"tableConfiguration\" [filters]=\"filters\"\n    [selectedItems]=\"selectedItems()\" (applyFiltersEvent)=\"applyFilters($event)\"\n    (applyColumnsEvent)=\"applyColumns($event)\" (searchChange)=\"onSearch($event)\"\n    (actionClick)=\"handleActionClick($event)\"></table-caption>\n  } @else {\n  <div 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    <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 (action of tableConfiguration.bulkActions; track action?.key ?? $index) {\n      <phoenix-data-table-action [actionConfig]=\"action\" (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"></phoenix-data-table-action>\n      }\n\n      <button [attr.data-cy]=\"'clear-selection-button'\" class=\"p-button p-button-text p-button-plain\"\n        (click)=\"clearSelection()\" aria-label=\"Clear Selection\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n  </div>\n  }\n  <div class=\"table-host\" [style.height]=\"tableConfiguration.scrollHeight ?? null\">\n    <p-table #dt [columns]=\"selectedColumns\" [value]=\"tableData\" [size]=\"'small'\" scrollable=\"true\" scrollHeight=\"flex\"\n      [virtualScroll]=\"true\" [virtualScrollItemSize]=\"30\" [lazy]=\"true\" [rowSelectable]=\"isRowSelectable\"\n      [totalRecords]=\"totalRecords\" (onLazyLoad)=\"loadLazyData($event)\" [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\" [sortMode]=\"'multiple'\" [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\">\n      <ng-template #header let-columns>\n        <tr style=\"height: 40px\" class=\"dt-header\">\n          @switch (tableConfiguration.selectionType) {\n          @case (selectionTypeEnum.CHECKBOX) {\n          <th class=\"custom-th\">\n            <p-tableHeaderCheckbox [attr.data-cy]=\"'table-header-checkbox'\"></p-tableHeaderCheckbox>\n          </th>\n          }\n          @case (selectionTypeEnum.RADIO_BTN) {\n          <th class=\"custom-th\"></th>\n          }\n          }\n\n          @for (col of columns; track col.field ?? col.header ?? $index; let colIdx = $index) {\n          <th pResizableColumn class=\"custom-th text-primary font-bold\" [pSortableColumn]=\"col.field\">\n            {{ col.header | translate }}\n            <p-sortIcon [field]=\"col.field\" [attr.data-cy]=\"'sort-button-' + col.header\"></p-sortIcon>\n          </th>\n          }\n\n          <th class=\"custom-th\"></th>\n        </tr>\n      </ng-template>\n\n      <ng-template #body let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\n        <tr>\n          @switch (tableConfiguration.selectionType) {\n          @case (selectionTypeEnum.CHECKBOX) {\n          <td class=\"w-2rem\">\n            <p-tableCheckbox [attr.data-cy]=\"\n                  'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n                \" [disabled]=\"\n                  rowData?.canSelect !== undefined ? !rowData.canSelect : false\n                \" [value]=\"rowData\"></p-tableCheckbox>\n          </td>\n          }\n          @case (selectionTypeEnum.RADIO_BTN) {\n          <td>\n            <p-tableRadioButton [value]=\"rowData\" [attr.data-cy]=\"\n                  'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n                \"></p-tableRadioButton>\n          </td>\n          }\n          }\n\n          @for (col of columns; track col.field ?? col.header ?? $index; let i = $index) {\n          <td (click)=\"isColumnClickable(i) ? onRowClick($event, rowData) : null\" [ngClass]=\"{\n              'text-blue-500 underline cursor-pointer': isColumnClickable(i)\n            }\">\n            @switch (col.columnType) {\n            @case (columnTypeEnum.TAG) {\n            @if (rowData[col.field]) {\n            <div class=\"border-round-md font-semibold\" [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              rowData[col.field]?.name || (rowData[col.field] | translate)\n              }}\n            </div>\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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]) {\n              @for (item of rowData[col.field]; track $index) {\n                <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n              }\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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 [attr.data-cy]=\"\n                      'table-row-' +\n                      columnTypeEnum.OBJ_TAG +\n                      '-row-index-' +\n                      rowIndex +\n                      '-col-index-' +\n                      i\n                    \" [style]=\"{\n                      fontSize: '12px',\n                      padding: '3px 8px',\n                      width: 'fit-content',\n                      'background-color': (rowData[col.field].color || '#ccc') + '56',\n                      color: rowData[col.field].color\n                    }\" [value]=\"rowData[col.field]?.value | translate\"></p-tag>\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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 [attr.data-cy]=\"\n                      'table-row-' +\n                      columnTypeEnum.PERSON +\n                      '-row-index-' +\n                      rowIndex +\n                      '-col-index-' +\n                      i\n                    \" [label]=\"rowData[col.field]?.name | initials\" class=\"cursor-pointer\" [style]=\"{\n                      'background-color': '#9c27b0',\n                      color: '#ffffff',\n                      'font-size': '0.8rem!important'\n                    }\" shape=\"circle\" (click)=\"personPop.toggle($event)\"></p-avatar>\n\n            <p-popover #personPop [dismissable]=\"true\">\n              <div>\n                <span class=\"text-lg\">{{ rowData[col.field].name }}</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 [ngTemplateOutlet]=\"emptyCell\" [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 class=\"cursor-pointer\" (click)=\"listPop.toggle($event)\" [attr.data-cy]=\"\n                            'table-row-' +\n                            columnTypeEnum.LIST +\n                            '-row-index-' +\n                            rowIndex +\n                            '-col-index-' +\n                            i\n                          \">\n                  <span class=\"mr-1\">{{ rowData[col.field][0].name }}</span>\n                  <p-chip class=\"text-sm font-semibold p-1 m-0\" [label]=\"'+' + (rowData[col.field].length - 1)\" />\n                </div>\n              } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n              }\n\n              <p-popover #listPop [dismissable]=\"true\">\n                @for (item of rowData[col.field]; track item.name; let isFirst = $first) {\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 [ngTemplateOutlet]=\"emptyCell\" [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 [pTooltip]=\"rowData?.[col.field + 'Tooltip']\" [attr.data-cy]=\"\n                      'table-row-' +\n                      columnTypeEnum.BOOLEAN +\n                      '-row-index-' +\n                      rowIndex +\n                      '-col-index-' +\n                      i\n                    \" class=\"pi\" [ngClass]=\"\n                      rowData[col.field]\n                        ? 'text-green-500 pi-check-circle'\n                        : 'text-red-500 pi-times-circle'\n                    \"></i>\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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 [attr.data-cy]=\"\n                      'table-row-' +\n                      columnTypeEnum.TEXT_AREA +\n                      '-row-index-' +\n                      rowIndex +\n                      '-col-index-' +\n                      i\n                    \" [pTooltip]=\"rowData[col.field]\" style=\"width: 200px\">\n              {{\n              rowData[col.field].length > 50\n              ? (rowData[col.field] | slice : 0 : 50) + '...'\n              : rowData[col.field]\n              }}\n            </div>\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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 class=\"email-cell\" [attr.data-cy]=\"\n                      'table-row-' +\n                      columnTypeEnum.EMAIL +\n                      '-row-index-' +\n                      rowIndex +\n                      '-col-index-' +\n                      i\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              </i>\n            </div>\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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 [attr.data-cy]=\"\n                      'table-row-' +\n                      columnTypeEnum.TIMEPERIOD +\n                      '-row-index-' +\n                      rowIndex +\n                      '-col-index-' +\n                      i\n                    \" [pTooltip]=\"rowData[col.field] | timePeriod\" style=\"max-width: 200px\">\n              {{ rowData[col.field] | timePeriod }}\n            </div>\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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 [attr.data-cy]=\"\n                      'table-row-' +\n                      columnTypeEnum.TEXT +\n                      '-row-index-' +\n                      rowIndex +\n                      '-col-index-' +\n                      i\n                    \" class=\"flex align-items-center gap-2\" style=\"max-width: 200px\"\n              [pTooltip]=\"rowData | cell : col : dateFormat\">\n              <img src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n                [class]=\"'flag flag-' + (getNested(rowData, col.flagCodeField) || '').toString().toLowerCase()\"\n                style=\"width: 22px\" alt=\"\" />\n              <span [innerHTML]=\"rowData | cell : col : dateFormat\"></span>\n            </div>\n            } @else {\n            @if (rowData | cell : col : dateFormat) {\n            <div [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TEXT +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \" [pTooltip]=\"rowData | cell : col : dateFormat\" style=\"max-width: 200px\"\n              [innerHTML]=\"rowData | cell : col : dateFormat\"></div>\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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          </td>\n          }\n\n          <td class=\"p-0\">\n            @for (action of tableConfiguration.rowActions; track action?.key ?? $index) {\n            <phoenix-data-table-action [actionConfig]=\"action\" [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"></phoenix-data-table-action>\n            }\n          </td>\n        </tr>\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=\"loadingbody\" let-columns>\n        <tr style=\"height: 46px\">\n          <td *ngFor=\"let col of columns\">\n            <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n          </td>\n          <td>\n            <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n          </td>\n        </tr>\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\n</div>", 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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$6.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: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$6.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], 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: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.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: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.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: i9$1.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$2.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3$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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length === 0) {\n  <table-caption\n    [columns]=\"columns\"\n    [tableConfiguration]=\"tableConfiguration\"\n    [filters]=\"filters\"\n    [selectedItems]=\"selectedItems()\"\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 (action of tableConfiguration.bulkActions; track action?.key ??\n      $index) {\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]=\"tableConfiguration.scrollHeight ?? null\"\n  >\n    <p-table\n      #dt\n      [columns]=\"selectedColumns\"\n      [value]=\"tableData\"\n      [size]=\"'small'\"\n      scrollable=\"true\"\n      scrollHeight=\"flex\"\n      [virtualScroll]=\"true\"\n      [virtualScrollItemSize]=\"40\"\n      [lazy]=\"true\"\n      [rowSelectable]=\"isRowSelectable\"\n      [totalRecords]=\"totalRecords\"\n      (onLazyLoad)=\"loadLazyData($event)\"\n      [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      [sortMode]=\"'multiple'\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n    >\n      <ng-template #header let-columns>\n        <tr style=\"height: 40px\" class=\"dt-header\">\n          @switch (tableConfiguration.selectionType) { @case\n          (selectionTypeEnum.CHECKBOX) {\n          <th class=\"custom-th\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          } @case (selectionTypeEnum.RADIO_BTN) {\n          <th class=\"custom-th\"></th>\n          } } @for (col of columns; track col.field ?? col.header ?? $index; let\n          colIdx = $index) {\n          <th\n            pResizableColumn\n            class=\"custom-th text-primary font-bold\"\n            [pSortableColumn]=\"col.field\"\n          >\n            {{ col.header | translate }}\n            <p-sortIcon\n              [field]=\"col.field\"\n              [attr.data-cy]=\"'sort-button-' + col.header\"\n            ></p-sortIcon>\n          </th>\n          }\n\n          <th class=\"custom-th\"></th>\n        </tr>\n      </ng-template>\n\n      <ng-template\n        #body\n        let-rowData\n        let-columns=\"columns\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <tr>\n          @switch (tableConfiguration.selectionType) { @case\n          (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 ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\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          } } @for (col of columns; track col.field ?? col.header ?? $index; let\n          i = $index) {\n          <td\n            (click)=\"isColumnClickable(i) ? onRowClick($event, rowData) : null\"\n            [ngClass]=\"{\n              'text-blue-500 underline cursor-pointer': isColumnClickable(i)\n            }\"\n          >\n            @switch (col.columnType) { @case (columnTypeEnum.TAG) { @if\n            (rowData[col.field]) {\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              {{ rowData[col.field]?.name || (rowData[col.field] | translate) }}\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            } } @case (columnTypeEnum.LIST_TAG) { @if (rowData[col.field]) {\n            @for (item of rowData[col.field]; track $index) {\n            <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\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            } } @case (columnTypeEnum.OBJ_TAG) { @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': (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            } } @case (columnTypeEnum.PERSON) { @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\">{{ rowData[col.field].name }}</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            } } @case (columnTypeEnum.LIST) { @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\">{{ rowData[col.field][0].name }}</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 (item of rowData[col.field]; track item.name; let isFirst =\n              $first) { @if (!isFirst) {\n              <ul class=\"list-none m-0 p-0\">\n                <li>{{ item.name }}</li>\n              </ul>\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            } } @case (columnTypeEnum.BOOLEAN) { @if (rowData[col.field] |\n            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            } } @case (columnTypeEnum.TEXT_AREA) { @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              style=\"width: 200px\"\n            >\n              {{\n                rowData[col.field].length > 50\n                  ? (rowData[col.field] | slice : 0 : 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            } } @case (columnTypeEnum.EMAIL) { @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            } } @case (columnTypeEnum.TIMEPERIOD) { @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            } } @default { @if (col.flag && getNested(rowData,\n            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 [innerHTML]=\"rowData | cell : col : dateFormat\"></span>\n            </div>\n            } @else { @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          </td>\n          }\n\n          <td class=\"p-0\">\n            @for (action of tableConfiguration.rowActions; track action?.key ??\n            $index) {\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 #emptyCell let-dataCy=\"dataCy\">\n        <span [attr.data-cy]=\"dataCy\">--</span>\n      </ng-template>\n\n      <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n        <tr style=\"height: 40px\">\n          @for (col of columns; track $index) {\n          <td>\n            <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n          </td>\n          }\n          <td>\n            <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n          </td>\n        </tr>\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", 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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$6.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: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$6.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], 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: i7.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.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: i2$1.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$2.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3$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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -3632,7 +3632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         TimePeriodPipe,
                         IsBooleanPipe,
                         BadgeModule,
-                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length === 0) {\n  <table-caption [columns]=\"columns\" [tableConfiguration]=\"tableConfiguration\" [filters]=\"filters\"\n    [selectedItems]=\"selectedItems()\" (applyFiltersEvent)=\"applyFilters($event)\"\n    (applyColumnsEvent)=\"applyColumns($event)\" (searchChange)=\"onSearch($event)\"\n    (actionClick)=\"handleActionClick($event)\"></table-caption>\n  } @else {\n  <div 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    <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 (action of tableConfiguration.bulkActions; track action?.key ?? $index) {\n      <phoenix-data-table-action [actionConfig]=\"action\" (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"></phoenix-data-table-action>\n      }\n\n      <button [attr.data-cy]=\"'clear-selection-button'\" class=\"p-button p-button-text p-button-plain\"\n        (click)=\"clearSelection()\" aria-label=\"Clear Selection\">\n        <i class=\"pi pi-times\"></i>\n      </button>\n    </div>\n  </div>\n  }\n  <div class=\"table-host\" [style.height]=\"tableConfiguration.scrollHeight ?? null\">\n    <p-table #dt [columns]=\"selectedColumns\" [value]=\"tableData\" [size]=\"'small'\" scrollable=\"true\" scrollHeight=\"flex\"\n      [virtualScroll]=\"true\" [virtualScrollItemSize]=\"30\" [lazy]=\"true\" [rowSelectable]=\"isRowSelectable\"\n      [totalRecords]=\"totalRecords\" (onLazyLoad)=\"loadLazyData($event)\" [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\" [sortMode]=\"'multiple'\" [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\">\n      <ng-template #header let-columns>\n        <tr style=\"height: 40px\" class=\"dt-header\">\n          @switch (tableConfiguration.selectionType) {\n          @case (selectionTypeEnum.CHECKBOX) {\n          <th class=\"custom-th\">\n            <p-tableHeaderCheckbox [attr.data-cy]=\"'table-header-checkbox'\"></p-tableHeaderCheckbox>\n          </th>\n          }\n          @case (selectionTypeEnum.RADIO_BTN) {\n          <th class=\"custom-th\"></th>\n          }\n          }\n\n          @for (col of columns; track col.field ?? col.header ?? $index; let colIdx = $index) {\n          <th pResizableColumn class=\"custom-th text-primary font-bold\" [pSortableColumn]=\"col.field\">\n            {{ col.header | translate }}\n            <p-sortIcon [field]=\"col.field\" [attr.data-cy]=\"'sort-button-' + col.header\"></p-sortIcon>\n          </th>\n          }\n\n          <th class=\"custom-th\"></th>\n        </tr>\n      </ng-template>\n\n      <ng-template #body let-rowData let-columns=\"columns\" let-rowIndex=\"rowIndex\">\n        <tr>\n          @switch (tableConfiguration.selectionType) {\n          @case (selectionTypeEnum.CHECKBOX) {\n          <td class=\"w-2rem\">\n            <p-tableCheckbox [attr.data-cy]=\"\n                  'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n                \" [disabled]=\"\n                  rowData?.canSelect !== undefined ? !rowData.canSelect : false\n                \" [value]=\"rowData\"></p-tableCheckbox>\n          </td>\n          }\n          @case (selectionTypeEnum.RADIO_BTN) {\n          <td>\n            <p-tableRadioButton [value]=\"rowData\" [attr.data-cy]=\"\n                  'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n                \"></p-tableRadioButton>\n          </td>\n          }\n          }\n\n          @for (col of columns; track col.field ?? col.header ?? $index; let i = $index) {\n          <td (click)=\"isColumnClickable(i) ? onRowClick($event, rowData) : null\" [ngClass]=\"{\n              'text-blue-500 underline cursor-pointer': isColumnClickable(i)\n            }\">\n            @switch (col.columnType) {\n            @case (columnTypeEnum.TAG) {\n            @if (rowData[col.field]) {\n            <div class=\"border-round-md font-semibold\" [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              rowData[col.field]?.name || (rowData[col.field] | translate)\n              }}\n            </div>\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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]) {\n              @for (item of rowData[col.field]; track $index) {\n                <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n              }\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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 [attr.data-cy]=\"\n                      'table-row-' +\n                      columnTypeEnum.OBJ_TAG +\n                      '-row-index-' +\n                      rowIndex +\n                      '-col-index-' +\n                      i\n                    \" [style]=\"{\n                      fontSize: '12px',\n                      padding: '3px 8px',\n                      width: 'fit-content',\n                      'background-color': (rowData[col.field].color || '#ccc') + '56',\n                      color: rowData[col.field].color\n                    }\" [value]=\"rowData[col.field]?.value | translate\"></p-tag>\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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 [attr.data-cy]=\"\n                      'table-row-' +\n                      columnTypeEnum.PERSON +\n                      '-row-index-' +\n                      rowIndex +\n                      '-col-index-' +\n                      i\n                    \" [label]=\"rowData[col.field]?.name | initials\" class=\"cursor-pointer\" [style]=\"{\n                      'background-color': '#9c27b0',\n                      color: '#ffffff',\n                      'font-size': '0.8rem!important'\n                    }\" shape=\"circle\" (click)=\"personPop.toggle($event)\"></p-avatar>\n\n            <p-popover #personPop [dismissable]=\"true\">\n              <div>\n                <span class=\"text-lg\">{{ rowData[col.field].name }}</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 [ngTemplateOutlet]=\"emptyCell\" [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 class=\"cursor-pointer\" (click)=\"listPop.toggle($event)\" [attr.data-cy]=\"\n                            'table-row-' +\n                            columnTypeEnum.LIST +\n                            '-row-index-' +\n                            rowIndex +\n                            '-col-index-' +\n                            i\n                          \">\n                  <span class=\"mr-1\">{{ rowData[col.field][0].name }}</span>\n                  <p-chip class=\"text-sm font-semibold p-1 m-0\" [label]=\"'+' + (rowData[col.field].length - 1)\" />\n                </div>\n              } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n              }\n\n              <p-popover #listPop [dismissable]=\"true\">\n                @for (item of rowData[col.field]; track item.name; let isFirst = $first) {\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 [ngTemplateOutlet]=\"emptyCell\" [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 [pTooltip]=\"rowData?.[col.field + 'Tooltip']\" [attr.data-cy]=\"\n                      'table-row-' +\n                      columnTypeEnum.BOOLEAN +\n                      '-row-index-' +\n                      rowIndex +\n                      '-col-index-' +\n                      i\n                    \" class=\"pi\" [ngClass]=\"\n                      rowData[col.field]\n                        ? 'text-green-500 pi-check-circle'\n                        : 'text-red-500 pi-times-circle'\n                    \"></i>\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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 [attr.data-cy]=\"\n                      'table-row-' +\n                      columnTypeEnum.TEXT_AREA +\n                      '-row-index-' +\n                      rowIndex +\n                      '-col-index-' +\n                      i\n                    \" [pTooltip]=\"rowData[col.field]\" style=\"width: 200px\">\n              {{\n              rowData[col.field].length > 50\n              ? (rowData[col.field] | slice : 0 : 50) + '...'\n              : rowData[col.field]\n              }}\n            </div>\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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 class=\"email-cell\" [attr.data-cy]=\"\n                      'table-row-' +\n                      columnTypeEnum.EMAIL +\n                      '-row-index-' +\n                      rowIndex +\n                      '-col-index-' +\n                      i\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              </i>\n            </div>\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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 [attr.data-cy]=\"\n                      'table-row-' +\n                      columnTypeEnum.TIMEPERIOD +\n                      '-row-index-' +\n                      rowIndex +\n                      '-col-index-' +\n                      i\n                    \" [pTooltip]=\"rowData[col.field] | timePeriod\" style=\"max-width: 200px\">\n              {{ rowData[col.field] | timePeriod }}\n            </div>\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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 [attr.data-cy]=\"\n                      'table-row-' +\n                      columnTypeEnum.TEXT +\n                      '-row-index-' +\n                      rowIndex +\n                      '-col-index-' +\n                      i\n                    \" class=\"flex align-items-center gap-2\" style=\"max-width: 200px\"\n              [pTooltip]=\"rowData | cell : col : dateFormat\">\n              <img src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n                [class]=\"'flag flag-' + (getNested(rowData, col.flagCodeField) || '').toString().toLowerCase()\"\n                style=\"width: 22px\" alt=\"\" />\n              <span [innerHTML]=\"rowData | cell : col : dateFormat\"></span>\n            </div>\n            } @else {\n            @if (rowData | cell : col : dateFormat) {\n            <div [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TEXT +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \" [pTooltip]=\"rowData | cell : col : dateFormat\" style=\"max-width: 200px\"\n              [innerHTML]=\"rowData | cell : col : dateFormat\"></div>\n            } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyCell\" [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          </td>\n          }\n\n          <td class=\"p-0\">\n            @for (action of tableConfiguration.rowActions; track action?.key ?? $index) {\n            <phoenix-data-table-action [actionConfig]=\"action\" [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"></phoenix-data-table-action>\n            }\n          </td>\n        </tr>\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=\"loadingbody\" let-columns>\n        <tr style=\"height: 46px\">\n          <td *ngFor=\"let col of columns\">\n            <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n          </td>\n          <td>\n            <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n          </td>\n        </tr>\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\n</div>", 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}\n"] }]
+                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length === 0) {\n  <table-caption\n    [columns]=\"columns\"\n    [tableConfiguration]=\"tableConfiguration\"\n    [filters]=\"filters\"\n    [selectedItems]=\"selectedItems()\"\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 (action of tableConfiguration.bulkActions; track action?.key ??\n      $index) {\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]=\"tableConfiguration.scrollHeight ?? null\"\n  >\n    <p-table\n      #dt\n      [columns]=\"selectedColumns\"\n      [value]=\"tableData\"\n      [size]=\"'small'\"\n      scrollable=\"true\"\n      scrollHeight=\"flex\"\n      [virtualScroll]=\"true\"\n      [virtualScrollItemSize]=\"40\"\n      [lazy]=\"true\"\n      [rowSelectable]=\"isRowSelectable\"\n      [totalRecords]=\"totalRecords\"\n      (onLazyLoad)=\"loadLazyData($event)\"\n      [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      [sortMode]=\"'multiple'\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n    >\n      <ng-template #header let-columns>\n        <tr style=\"height: 40px\" class=\"dt-header\">\n          @switch (tableConfiguration.selectionType) { @case\n          (selectionTypeEnum.CHECKBOX) {\n          <th class=\"custom-th\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          } @case (selectionTypeEnum.RADIO_BTN) {\n          <th class=\"custom-th\"></th>\n          } } @for (col of columns; track col.field ?? col.header ?? $index; let\n          colIdx = $index) {\n          <th\n            pResizableColumn\n            class=\"custom-th text-primary font-bold\"\n            [pSortableColumn]=\"col.field\"\n          >\n            {{ col.header | translate }}\n            <p-sortIcon\n              [field]=\"col.field\"\n              [attr.data-cy]=\"'sort-button-' + col.header\"\n            ></p-sortIcon>\n          </th>\n          }\n\n          <th class=\"custom-th\"></th>\n        </tr>\n      </ng-template>\n\n      <ng-template\n        #body\n        let-rowData\n        let-columns=\"columns\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <tr>\n          @switch (tableConfiguration.selectionType) { @case\n          (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 ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\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          } } @for (col of columns; track col.field ?? col.header ?? $index; let\n          i = $index) {\n          <td\n            (click)=\"isColumnClickable(i) ? onRowClick($event, rowData) : null\"\n            [ngClass]=\"{\n              'text-blue-500 underline cursor-pointer': isColumnClickable(i)\n            }\"\n          >\n            @switch (col.columnType) { @case (columnTypeEnum.TAG) { @if\n            (rowData[col.field]) {\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              {{ rowData[col.field]?.name || (rowData[col.field] | translate) }}\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            } } @case (columnTypeEnum.LIST_TAG) { @if (rowData[col.field]) {\n            @for (item of rowData[col.field]; track $index) {\n            <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\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            } } @case (columnTypeEnum.OBJ_TAG) { @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': (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            } } @case (columnTypeEnum.PERSON) { @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\">{{ rowData[col.field].name }}</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            } } @case (columnTypeEnum.LIST) { @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\">{{ rowData[col.field][0].name }}</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 (item of rowData[col.field]; track item.name; let isFirst =\n              $first) { @if (!isFirst) {\n              <ul class=\"list-none m-0 p-0\">\n                <li>{{ item.name }}</li>\n              </ul>\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            } } @case (columnTypeEnum.BOOLEAN) { @if (rowData[col.field] |\n            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            } } @case (columnTypeEnum.TEXT_AREA) { @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              style=\"width: 200px\"\n            >\n              {{\n                rowData[col.field].length > 50\n                  ? (rowData[col.field] | slice : 0 : 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            } } @case (columnTypeEnum.EMAIL) { @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            } } @case (columnTypeEnum.TIMEPERIOD) { @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            } } @default { @if (col.flag && getNested(rowData,\n            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 [innerHTML]=\"rowData | cell : col : dateFormat\"></span>\n            </div>\n            } @else { @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          </td>\n          }\n\n          <td class=\"p-0\">\n            @for (action of tableConfiguration.rowActions; track action?.key ??\n            $index) {\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 #emptyCell let-dataCy=\"dataCy\">\n        <span [attr.data-cy]=\"dataCy\">--</span>\n      </ng-template>\n\n      <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n        <tr style=\"height: 40px\">\n          @for (col of columns; track $index) {\n          <td>\n            <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n          </td>\n          }\n          <td>\n            <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n          </td>\n        </tr>\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", 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}\n"] }]
         }], propDecorators: { dt: [{
                 type: ViewChild,
                 args: ['dt']
@@ -8977,8 +8977,17 @@ class MetaFormFieldV2Component {
         if (v === null || v === undefined || v === '')
             return '--';
         // SS_OPTION value object {label,value} ili raw
-        if (this.type === 'SS_OPTION' && typeof v === 'object') {
-            return v.label ?? v.userFriendlyMessage ?? v.value ?? '--';
+        if (this.type === 'SS_OPTION') {
+            const opts = this.field?.configuration?.options ?? [];
+            if (typeof v !== 'object') {
+                const hit = opts.find((o) => o?.value === v);
+                const label = hit?.label ?? v;
+                // ako je label i18n key
+                return this.translate.instant(label);
+            }
+            // ako je objekat
+            const label = v.label ?? v.value;
+            return this.translate.instant(label);
         }
         // DATE
         if (this.type === 'DATE' && v instanceof Date) {