@fuentis/phoenix-ui 0.0.9-alpha.571 → 0.0.9-alpha.573

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -53,10 +53,9 @@ import { SplitButtonModule } from 'primeng/splitbutton';
 import { TieredMenuModule } from 'primeng/tieredmenu';
 import * as i4$5 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
-import * as i9 from 'primeng/chip';
+import * as i8$2 from 'primeng/chip';
 import { ChipModule } from 'primeng/chip';
 import { PanelModule } from 'primeng/panel';
-import * as i7 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as i2$5 from 'primeng/table';
 import { TableModule } from 'primeng/table';
@@ -75,9 +74,9 @@ import * as i14 from 'primeng/floatlabel';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import * as i2$4 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import jsPDF from 'jspdf';
-import autoTable from 'jspdf-autotable';
 import * as XLSX from 'xlsx';
+import pdfMake from 'pdfmake/build/pdfmake';
+import pdfFonts from 'pdfmake/build/vfs_fonts';
 import * as i1$2 from 'primeng/dynamicdialog';
 import { DialogService } from 'primeng/dynamicdialog';
 import * as i2$6 from 'primeng/datepicker';
@@ -2408,11 +2407,16 @@ function getNestedValue(obj, path) {
  * - Removes HTML tags
  * - Replaces   and non-breaking spaces
  * - Normalizes Unicode (keeps German umlauts and Serbian letters)
+ * - Removes emoji characters (since PDF fonts don't support them properly)
  */
 function sanitizeText(v) {
     const s = (v ?? '').toString();
     const noHtml = s.replace(/<[^>]*>/g, '');
-    return noHtml
+    // Remove emoji characters - they don't render properly in PDF
+    // Emoji ranges: U+1F300–U+1F9FF, U+2600–U+26FF, U+2700–U+27BF, U+FE00–U+FE0F, U+1F900–U+1F9FF, U+1F1E0–U+1F1FF
+    const emojiRegex = /[\u{1F300}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{FE00}-\u{FE0F}\u{1F900}-\u{1F9FF}\u{1F1E0}-\u{1F1FF}]/gu;
+    const noEmoji = noHtml.replace(emojiRegex, '');
+    return noEmoji
         .replace(/&nbsp;/g, ' ')
         .replace(/\u00A0/g, ' ')
         .normalize('NFKC')
@@ -2496,17 +2500,46 @@ function collapseInlineSpaces(s) {
         .trim();
 }
 /**
- * Exports table rows to a PDF file.
- * - Uses jsPDF + autoTable
+ * Loads Noto Sans font from CDN for better emoji support
+ */
+async function loadNotoSansFont() {
+    try {
+        // Noto Sans has better Unicode and emoji support than Roboto
+        // Try jsDelivr CDN first (more reliable)
+        const response = await fetch('https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/notosans/NotoSans-Regular.ttf');
+        if (!response.ok) {
+            return null;
+        }
+        const arrayBuffer = await response.arrayBuffer();
+        const bytes = new Uint8Array(arrayBuffer);
+        let binary = '';
+        const chunkSize = 8192;
+        for (let i = 0; i < bytes.length; i += chunkSize) {
+            const chunk = bytes.subarray(i, i + chunkSize);
+            binary += String.fromCharCode.apply(null, Array.from(chunk));
+        }
+        return btoa(binary);
+    }
+    catch (error) {
+        console.warn('Failed to load Noto Sans font from CDN:', error);
+        return null;
+    }
+}
+/**
+ * Exports table rows to a PDF file using pdfmake.
+ * - Uses pdfmake which has excellent Unicode support for Serbian characters (ć, č, đ, š, ž)
  * - Respects only visible columns
  * - Translates headers with provided translation function
+ * - Attempts to load Noto Sans font for better emoji support
  */
-function exportRowsToPdf(columns, rows, columnTypeMap, columnTypeEnum, t, fileName = 'table.pdf', options = {}) {
+async function exportRowsToPdf(columns, rows, columnTypeMap, columnTypeEnum, t, fileName = 'table.pdf', options = {}) {
     if (!columns?.length)
         return;
     const locale = options.locale || 'en-US';
-    const head = [columns.map((c) => sanitizeText(t(c.header)))];
-    const body = (rows ?? []).map((row) => columns.map((col, idx) => {
+    // Prepare headers
+    const headers = columns.map((c) => sanitizeText(t(c.header)));
+    // Prepare body rows
+    const bodyRows = (rows ?? []).map((row) => columns.map((col) => {
         const type = columnTypeMap[col.field] || col.columnType;
         if (type === columnTypeEnum.LIST || type === columnTypeEnum.LIST_TAG) {
             // make each item its own line; keep items intact (no bullets)
@@ -2522,28 +2555,126 @@ function exportRowsToPdf(columns, rows, columnTypeMap, columnTypeEnum, t, fileNa
         const raw = String(getDisplayValue(row, col, columnTypeMap, columnTypeEnum, t, locale));
         return sanitizeText(collapseInlineSpaces(raw));
     }));
-    const doc = new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'A4' });
-    // Build columnStyles dynamically: all LIST/LIST_TAG columns get min width
-    const columnStyles = {};
-    columns.forEach((col, idx) => {
+    // Set up pdfmake fonts - pdfmake has built-in support for Unicode characters
+    // pdfFonts contains the vfs object directly
+    if (pdfFonts && pdfFonts.pdfMake) {
+        pdfMake.vfs = pdfFonts.pdfMake.vfs;
+    }
+    else if (pdfFonts && pdfFonts.vfs) {
+        pdfMake.vfs = pdfFonts.vfs;
+    }
+    else {
+        // Fallback: try to access vfs directly
+        pdfMake.vfs = pdfFonts || {};
+    }
+    // Try to load Noto Sans font which has better emoji support
+    // This is optional - if it fails, we'll use Roboto
+    try {
+        const notoSansFont = await loadNotoSansFont();
+        if (notoSansFont) {
+            // Add Noto Sans to pdfmake fonts
+            if (!pdfMake.fonts) {
+                pdfMake.fonts = {};
+            }
+            pdfMake.fonts.NotoSans = {
+                normal: 'NotoSans-Regular.ttf',
+                bold: 'NotoSans-Bold.ttf',
+                italics: 'NotoSans-Italic.ttf',
+                bolditalics: 'NotoSans-BoldItalic.ttf',
+            };
+            // Add font file to vfs
+            pdfMake.vfs['NotoSans-Regular.ttf'] = notoSansFont;
+            pdfMake.vfs['NotoSans-Bold.ttf'] = notoSansFont; // Use same font for bold
+        }
+    }
+    catch (error) {
+        console.warn('Failed to load Noto Sans font, using default Roboto:', error);
+    }
+    // Use 'auto' widths for pdfmake - it will automatically fit columns to page width
+    // pdfmake works well with Serbian characters and handles auto-sizing better
+    const columnWidths = columns.map((col) => {
         const type = columnTypeMap[col.field] || col.columnType;
         if (type === columnTypeEnum.LIST || type === columnTypeEnum.LIST_TAG) {
-            columnStyles[idx] = { cellWidth: 150 }; // set your min width
+            return 100; // Fixed width for LIST columns
         }
+        return 'auto'; // Auto width for other columns - pdfmake will fit them
     });
-    autoTable(doc, {
-        head,
-        body,
+    // Build table body for pdfmake
+    const tableBody = [
+        // Header row
+        headers.map((header) => ({
+            text: header,
+            style: 'tableHeader',
+            bold: true,
+        })),
+        // Data rows
+        ...bodyRows.map((row) => row.map((cell, cellIdx) => {
+            const col = columns[cellIdx];
+            const type = columnTypeMap[col?.field] || col?.columnType;
+            return {
+                text: cell || '',
+                style: 'tableCell',
+                // Enable text wrapping for all cells
+                noWrap: false,
+            };
+        })),
+    ];
+    // PDF document definition
+    const docDefinition = {
+        pageOrientation: 'landscape',
+        pageSize: 'A4',
+        content: [
+            {
+                table: {
+                    headerRows: 1,
+                    widths: columnWidths,
+                    body: tableBody,
+                },
+                layout: {
+                    hLineWidth: () => 0, // Remove horizontal lines between rows
+                    vLineWidth: () => 0, // Remove vertical lines between columns
+                    paddingLeft: () => 3,
+                    paddingRight: () => 3,
+                    paddingTop: () => 3,
+                    paddingBottom: () => 3,
+                    // Alternating row colors: grey, white, grey, white...
+                    fillColor: (rowIndex, node, columnIndex) => {
+                        // Header row stays blue RGB(41, 128, 186)
+                        if (rowIndex === 0) {
+                            return [41, 128, 186];
+                        }
+                        // Data rows alternate: grey for odd rows (1, 3, 5...), white for even rows (2, 4, 6...)
+                        return (rowIndex - 1) % 2 === 0 ? '#f5f5f5' : null; // grey for odd rows, white (null) for even rows
+                    },
+                },
+            },
+        ],
         styles: {
-            fontSize: 9,
-            cellPadding: 5,
-            overflow: 'linebreak',
-            valign: 'top',
+            tableHeader: {
+                fontSize: 11,
+                bold: true,
+                color: '#ffffff',
+                fillColor: [41, 128, 186], // RGB(41, 128, 186)
+                alignment: 'left',
+                margin: [0, 5, 0, 5],
+            },
+            tableCell: {
+                fontSize: 9,
+                alignment: 'left',
+                margin: [0, 5, 0, 5],
+                // Enable text wrapping
+                noWrap: false,
+            },
         },
-        columnStyles: Object.keys(columnStyles).length > 0 ? columnStyles : undefined,
-        margin: { top: 36, right: 24, bottom: 36, left: 24 },
-    });
-    doc.save(fileName);
+        defaultStyle: {
+            // Use NotoSans if loaded, otherwise fallback to Roboto
+            font: pdfMake.fonts?.NotoSans ? 'NotoSans' : 'Roboto',
+            // NotoSans has better Unicode and emoji support than Roboto
+        },
+        pageMargins: [15, 30, 15, 30], // Reduced margins to give more space
+    };
+    // Generate and download PDF
+    pdfMake.createPdf(docDefinition).download(fileName);
 }
 /* -------------------------- Export: Excel -------------------------- */
 /**
@@ -2751,10 +2882,10 @@ class TableComponent {
     initialSortFieldApplied = null;
     /** True while initial sort is running to avoid "flash" of unsorted data */
     initialSortLoading = false;
-    /** How many skeleton rows to render while initial sort/data is loading */
-    skeletonRowCount = 8;
-    /** Array used by Angular @for (must be iterable) */
-    skeletonRows = Array.from({ length: this.skeletonRowCount });
+    // /** How many skeleton rows to render while initial sort/data is loading */
+    // skeletonRowCount = 8;
+    // /** Array used by Angular @for (must be iterable) */
+    // skeletonRows = Array.from({ length: this.skeletonRowCount });
     createSortWorkerInline() {
         const code = `
     const compareStringsNatural = (a,b) => a.localeCompare(b, undefined, { numeric:true, sensitivity:'base' });
@@ -3270,7 +3401,9 @@ class TableComponent {
             const file = this.tableConfiguration?.key
                 ? buildFileName(this.tableConfiguration.key, 'pdf')
                 : buildFileName('table', 'pdf');
-            exportRowsToPdf(this.selectedColumns, this.tableData, this.columnTypeMap, this.columnTypeEnum, (k) => this.translateService.instant(k), file);
+            exportRowsToPdf(this.selectedColumns, this.tableData, this.columnTypeMap, this.columnTypeEnum, (k) => this.translateService.instant(k), file).catch((error) => {
+                console.error('Failed to export PDF:', error);
+            });
             return;
         }
         if (event?.action?.key === 'EXPORT_EXCEL') {
@@ -3322,7 +3455,7 @@ class TableComponent {
         });
     }
     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: { columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters", data: "data" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length === 0) {\n  <table-caption [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 (\n      action of tableConfiguration.bulkActions;\n      track action?.key ?? $index\n      ) {\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]=\"40\" [virtualScrollDelay]=\"80\" [totalRecords]=\"totalRecords\"\n      [sortMode]=\"'multiple'\" [customSort]=\"true\" (sortFunction)=\"onCustomSort($event)\" [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\" [resizableColumns]=\"true\" columnResizeMode=\"expand\" [loading]=\"initialSortLoading\">\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          @for (\n          col of columns;\n          track col.field ?? col.header ?? $index;\n          let colIdx = $index\n          ) {\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\n                      ? !rowData.canSelect\n                      : 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          @for (\n          col of columns;\n          track col.field ?? col.header ?? $index;\n          let i = $index\n          ) {\n          <td (click)=\"\n                isColumnClickable(i) ? onRowClick($event, rowData) : null\n              \" [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 ||\n              (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            @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            @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':\n                          (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            @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\">{{\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 [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            @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\">{{\n                rowData[col.field][0].name\n                }}</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 (\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 [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            @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            @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]\">\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 [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            @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 class=\"pi pi-copy email-copy-icon\" (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            @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            @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\" [class]=\"\n                          'flag flag-' +\n                          (getNested(rowData, col.flagCodeField) || '')\n                            .toString()\n                            .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 (\n            action of tableConfiguration.rowActions;\n            track action?.key ?? $index\n            ) {\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 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            <!-- actions col -->\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>", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}:host ::ng-deep .p-datatable-loading-overlay{display:none!important}:host ::ng-deep .p-datatable-mask{display:none!important}:host ::ng-deep .p-datatable.p-datatable-loading{opacity:1!important;pointer-events:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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$5.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$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$5.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "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: 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: 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: i7.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$3.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.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$5.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3$1.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: { columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters", data: "data" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length === 0) {\n  <table-caption [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 (\n      action of tableConfiguration.bulkActions;\n      track action?.key ?? $index\n      ) {\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]=\"40\" [virtualScrollDelay]=\"80\" [totalRecords]=\"totalRecords\"\n      [sortMode]=\"'multiple'\" [customSort]=\"true\" (sortFunction)=\"onCustomSort($event)\" [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\" [resizableColumns]=\"true\" columnResizeMode=\"expand\" [loading]=\"initialSortLoading\">\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          @for (\n          col of columns;\n          track col.field ?? col.header ?? $index;\n          let colIdx = $index\n          ) {\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\n                      ? !rowData.canSelect\n                      : 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          @for (\n          col of columns;\n          track col.field ?? col.header ?? $index;\n          let i = $index\n          ) {\n          <td (click)=\"\n                isColumnClickable(i) ? onRowClick($event, rowData) : null\n              \" [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 ||\n              (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            @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            @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':\n                          (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            @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\">{{\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 [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            @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\">{{\n                rowData[col.field][0].name\n                }}</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 (\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 [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            @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            @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]\">\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 [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            @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 class=\"pi pi-copy email-copy-icon\" (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            @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            @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\" [class]=\"\n                          'flag flag-' +\n                          (getNested(rowData, col.flagCodeField) || '')\n                            .toString()\n                            .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 (\n            action of tableConfiguration.rowActions;\n            track action?.key ?? $index\n            ) {\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 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>", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}:host ::ng-deep .p-datatable-loading-overlay{display:none!important}:host ::ng-deep .p-datatable-mask{display:none!important}:host ::ng-deep .p-datatable.p-datatable-loading{opacity:1!important;pointer-events:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$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$5.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$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$5.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "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: 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: 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: i3$3.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$5.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3$1.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,
@@ -3344,7 +3477,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 (\n      action of tableConfiguration.bulkActions;\n      track action?.key ?? $index\n      ) {\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]=\"40\" [virtualScrollDelay]=\"80\" [totalRecords]=\"totalRecords\"\n      [sortMode]=\"'multiple'\" [customSort]=\"true\" (sortFunction)=\"onCustomSort($event)\" [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\" [resizableColumns]=\"true\" columnResizeMode=\"expand\" [loading]=\"initialSortLoading\">\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          @for (\n          col of columns;\n          track col.field ?? col.header ?? $index;\n          let colIdx = $index\n          ) {\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\n                      ? !rowData.canSelect\n                      : 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          @for (\n          col of columns;\n          track col.field ?? col.header ?? $index;\n          let i = $index\n          ) {\n          <td (click)=\"\n                isColumnClickable(i) ? onRowClick($event, rowData) : null\n              \" [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 ||\n              (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            @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            @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':\n                          (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            @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\">{{\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 [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            @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\">{{\n                rowData[col.field][0].name\n                }}</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 (\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 [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            @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            @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]\">\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 [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            @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 class=\"pi pi-copy email-copy-icon\" (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            @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            @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\" [class]=\"\n                          'flag flag-' +\n                          (getNested(rowData, col.flagCodeField) || '')\n                            .toString()\n                            .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 (\n            action of tableConfiguration.rowActions;\n            track action?.key ?? $index\n            ) {\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 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            <!-- actions col -->\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>", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}:host ::ng-deep .p-datatable-loading-overlay{display:none!important}:host ::ng-deep .p-datatable-mask{display:none!important}:host ::ng-deep .p-datatable.p-datatable-loading{opacity:1!important;pointer-events:auto!important}\n"] }]
+                    ], 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 (\n      action of tableConfiguration.bulkActions;\n      track action?.key ?? $index\n      ) {\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]=\"40\" [virtualScrollDelay]=\"80\" [totalRecords]=\"totalRecords\"\n      [sortMode]=\"'multiple'\" [customSort]=\"true\" (sortFunction)=\"onCustomSort($event)\" [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\" [resizableColumns]=\"true\" columnResizeMode=\"expand\" [loading]=\"initialSortLoading\">\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          @for (\n          col of columns;\n          track col.field ?? col.header ?? $index;\n          let colIdx = $index\n          ) {\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\n                      ? !rowData.canSelect\n                      : 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          @for (\n          col of columns;\n          track col.field ?? col.header ?? $index;\n          let i = $index\n          ) {\n          <td (click)=\"\n                isColumnClickable(i) ? onRowClick($event, rowData) : null\n              \" [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 ||\n              (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            @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            @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':\n                          (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            @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\">{{\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 [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            @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\">{{\n                rowData[col.field][0].name\n                }}</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 (\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 [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            @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            @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]\">\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 [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            @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 class=\"pi pi-copy email-copy-icon\" (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            @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            @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\" [class]=\"\n                          'flag flag-' +\n                          (getNested(rowData, col.flagCodeField) || '')\n                            .toString()\n                            .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 (\n            action of tableConfiguration.rowActions;\n            track action?.key ?? $index\n            ) {\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 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>", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}:host ::ng-deep .p-datatable-loading-overlay{display:none!important}:host ::ng-deep .p-datatable-mask{display:none!important}:host ::ng-deep .p-datatable.p-datatable-loading{opacity:1!important;pointer-events:auto!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dt: [{
                 type: ViewChild,
                 args: ['dt']