@fuentis/phoenix-ui 0.0.9-alpha.355 → 0.0.9-alpha.357

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, Output, ViewEncapsulation, signal, Injectable, inject, input, output, ViewChild, ChangeDetectionStrategy, Pipe, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, Directive, forwardRef, computed } from '@angular/core';
+import { Input, Component, EventEmitter, Output, ViewEncapsulation, signal, Injectable, inject, input, output, ViewChild, ChangeDetectionStrategy, Pipe, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef, Directive, forwardRef, computed } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, LowerCasePipe, DatePipe } from '@angular/common';
 import * as i3 from 'primeng/tooltip';
@@ -2731,12 +2731,21 @@ function exportRowsToCsv(columns, rows, columnTypeMap, columnTypeEnum, t, fileNa
     URL.revokeObjectURL(url);
 }
 
+const DEFAULT_MORE_ACTIONS = {
+    context: tableButtonContext.MORE,
+    type: 'menu',
+    buttonType: 'multiselect',
+    items: [
+        { key: 'EXPORT_PDF', label: 'ACTION.EXPORT_PDF', icon: 'pi pi-file-pdf' },
+        { key: 'EXPORT_CSV', label: 'ACTION.EXPORT_CSV', icon: 'pi pi-file-excel' },
+    ],
+};
 class TableComponent {
     dt;
-    // This setter initializes the dataset and triggers the initial lazy load.
+    // Inputs
     set data(value) {
         this.originalData = value ?? [];
-        this.allData = [...value];
+        this.allData = [...this.originalData];
         this.totalRecords = this.allData.length;
         this.loadLazyData({ first: 0, rows: 100 });
     }
@@ -2744,41 +2753,53 @@ class TableComponent {
     selectedColumnsInput = [];
     tableConfiguration;
     filters;
+    // Outputs
     actionClick = new EventEmitter();
     rowSelection = new EventEmitter();
     checkBoxSelection = new EventEmitter();
     saveColumns = new EventEmitter();
+    // Services
     translateService = inject(TranslateService);
+    cdr = inject(ChangeDetectorRef);
+    // State
     allData = [];
     originalData = [];
     tableData = [];
-    selectedItems = signal([]);
+    selectedItems = [];
     selectedColumns = [];
     searchQuery = '';
     bulkMode = false;
     totalRecords = 0;
     lastLoadedIndex = 0;
+    // Enums & helpers
     selectionTypeEnum = tableSelectionType;
     columnTypeEnum = tableColumnType;
     dateFormat;
     currentFilters = {};
     columnTypeMap = {};
     ngOnChanges(changes) {
-        this.selectedItems.set([]);
-        if (this.columns.length > 0) {
-            this.selectedColumns = [
-                ...(this.selectedColumnsInput.length
-                    ? this.selectedColumnsInput
-                    : this.columns),
-            ];
-            // Build a lookup map from field name to columnType
+        // reset selection on input changes
+        this.selectedItems = [];
+        // (1) columns mapping + initial selectedColumns
+        if (this.columns?.length) {
+            this.selectedColumns = this.selectedColumnsInput?.length
+                ? [...this.selectedColumnsInput]
+                : [...this.columns];
+            // Build lookup for sorting/comparators/exports
             this.columnTypeMap = {};
             for (const col of this.columns) {
                 this.columnTypeMap[col.field] = col.columnType;
             }
         }
+        // (2) default More actions if not provided
+        if (!this.tableConfiguration?.moreActions) {
+            this.tableConfiguration = {
+                ...this.tableConfiguration,
+                moreActions: DEFAULT_MORE_ACTIONS,
+            };
+        }
     }
-    // Handles lazy loading logic, sorting and pagination based on the event.
+    // Lazy load / sort
     loadLazyData(event) {
         let { first = 0, rows = 100, multiSortMeta } = event;
         rows = rows ?? 100;
@@ -2788,8 +2809,8 @@ class TableComponent {
                 for (const sortMeta of multiSortMeta) {
                     const field = sortMeta.field;
                     const order = sortMeta.order;
-                    let valueA = this.getComparableValue(this.getNestedValue(a, field), field);
-                    let valueB = this.getComparableValue(this.getNestedValue(b, field), field);
+                    const valueA = this.getComparableValue(this.getNestedValue(a, field), field);
+                    const valueB = this.getComparableValue(this.getNestedValue(b, field), field);
                     if (valueA < valueB)
                         return -1 * order;
                     if (valueA > valueB)
@@ -2798,8 +2819,7 @@ class TableComponent {
                 return 0;
             });
         }
-        const paged = sortedData.slice(first, first + rows);
-        this.tableData = sortedData;
+        this.tableData = sortedData.slice(first, first + rows);
         this.lastLoadedIndex = first + rows;
     }
     getComparableValue(val, field) {
@@ -2810,8 +2830,8 @@ class TableComponent {
             return val;
         if (typeof val === 'string') {
             if (columnType === this.columnTypeEnum.DATE) {
-                const parsedDate = Date.parse(val);
-                return isNaN(parsedDate) ? val.toLowerCase() : parsedDate;
+                const parsed = Date.parse(val);
+                return isNaN(parsed) ? val.toLowerCase() : parsed;
             }
             return val.toLowerCase();
         }
@@ -2826,10 +2846,10 @@ class TableComponent {
             if (Array.isArray(val) && val.length > 0) {
                 return this.getComparableValue(val[0], field);
             }
-            const priorityFields = ['name', 'value', 'label', 'key', 'date'];
-            for (const key of priorityFields) {
-                if (val[key] !== undefined && val[key] !== null) {
-                    return this.getComparableValue(val[key], field);
+            const priority = ['name', 'value', 'label', 'key', 'date'];
+            for (const k of priority) {
+                if (val[k] !== undefined && val[k] !== null) {
+                    return this.getComparableValue(val[k], field);
                 }
             }
             for (const v of Object.values(val)) {
@@ -2840,54 +2860,44 @@ class TableComponent {
         }
         return '';
     }
-    // Filters data based on a free-text search across all object values.
+    // Global search
     onSearch(query) {
-        const trimmed = query.trim().toLowerCase();
+        const trimmed = (query ?? '').trim().toLowerCase();
         this.searchQuery = trimmed;
-        // CHANGE: Use filtered data as base instead of originalData
-        const baseData = Object.keys(this.currentFilters).length > 0
+        const base = Object.keys(this.currentFilters).length > 0
             ? this.getFilteredData()
             : this.originalData;
         if (trimmed) {
-            const filtered = baseData.filter((item) => Object.values(item).some((value) => this.matchesQuery(value, trimmed)));
-            this.allData = filtered;
+            this.allData = base.filter((item) => Object.values(item).some((value) => this.matchesQuery(value, trimmed)));
         }
         else {
-            this.allData = [...baseData];
+            this.allData = [...base];
         }
         this.totalRecords = this.allData.length;
         this.loadLazyData({ first: 0, rows: 100 });
     }
     getFilteredData() {
-        return this.originalData.filter((item) => {
-            return Object.keys(this.currentFilters).every((key) => {
-                const filterValue = this.currentFilters[key];
-                if (!filterValue ||
-                    (Array.isArray(filterValue) && filterValue.length === 0)) {
-                    return true;
-                }
-                const itemValue = this.getNestedValue(item, key);
-                if (Array.isArray(filterValue)) {
-                    return filterValue.some((option) => {
-                        const optionKey = option?.key || option;
-                        return (itemValue?.toString().toLowerCase() ===
-                            optionKey?.toString().toLowerCase());
-                    });
-                }
-                const singleFilterValue = filterValue?.key || filterValue;
-                return singleFilterValue
-                    ? itemValue?.toString().toLowerCase() ===
-                        singleFilterValue.toString().toLowerCase()
-                    : true;
-            });
-        });
+        return this.originalData.filter((item) => Object.keys(this.currentFilters).every((key) => {
+            const filterValue = this.currentFilters[key];
+            if (!filterValue || (Array.isArray(filterValue) && filterValue.length === 0))
+                return true;
+            const itemValue = this.getNestedValue(item, key);
+            if (Array.isArray(filterValue)) {
+                return filterValue.some((option) => {
+                    const optionKey = option?.key || option;
+                    return itemValue?.toString().toLowerCase() === optionKey?.toString().toLowerCase();
+                });
+            }
+            const v = filterValue?.key || filterValue;
+            return v ? itemValue?.toString().toLowerCase() === v.toString().toLowerCase() : true;
+        }));
     }
     applyFilters(filters) {
         const isEmpty = (v) => v === null ||
             v === undefined ||
             (typeof v === 'string' && v.trim() === '') ||
             (Array.isArray(v) && v.length === 0);
-        const extractKey = (v) => v && typeof v === 'object' && 'key' in v ? v.key : v;
+        const extractKey = (v) => (v && typeof v === 'object' && 'key' in v ? v.key : v);
         const toPrimitive = (v) => {
             if (typeof v === 'string') {
                 const s = v.trim().toLowerCase();
@@ -2917,12 +2927,10 @@ class TableComponent {
             if (isEmpty(fv))
                 return true;
             const itemValue = this.getNestedValue(item, key);
-            // Multiselect: niz vrednosti/objekata
             if (Array.isArray(fv)) {
                 const selected = fv.map(extractKey);
                 return selected.some((opt) => eq(itemValue, opt));
             }
-            // Single: objekat {key: ...} ili primitiv
             const single = extractKey(fv);
             return eq(itemValue, single);
         }));
@@ -2932,74 +2940,65 @@ class TableComponent {
         this.loadLazyData({ first: 0, rows: 100 });
     }
     isRowSelectable(event) {
-        return typeof event.data?.canSelect === 'boolean'
-            ? event.data.canSelect
-            : true;
+        return typeof event.data?.canSelect === 'boolean' ? event.data.canSelect : true;
     }
-    // Helper method to get nested values with dot notation support
     getNestedValue(obj, path) {
         try {
-            // Handle direct property access first (backward compatibility)
-            if (obj && obj.hasOwnProperty(path)) {
+            if (obj && Object.prototype.hasOwnProperty.call(obj, path)) {
                 return obj[path]?.key || obj[path];
             }
-            // Handle dot notation for nested objects (e.g., "user.profile.name")
             const keys = path.split('.');
             let current = obj;
             for (const key of keys) {
-                if (current &&
-                    typeof current === 'object' &&
-                    current.hasOwnProperty(key)) {
+                if (current && typeof current === 'object' && key in current) {
                     current = current[key];
                 }
                 else {
                     return undefined;
                 }
             }
-            // Return the final value, checking for key property if it's an object
             return current?.key || current;
         }
-        catch (error) {
-            console.warn(`Error accessing path "${path}" in object:`, error);
+        catch {
             return undefined;
         }
     }
     applyColumns(selected) {
-        this.selectedColumns = this.columns.filter((col) => selected.includes(col.field));
+        // compute next value first
+        const next = this.columns.filter((col) => selected.includes(col.field));
+        // defer to next microtask to avoid NG0100 during current CD pass
+        Promise.resolve().then(() => {
+            this.selectedColumns = next;
+            this.cdr.markForCheck();
+        });
     }
     onRowClick(event, rowData) {
         event.stopPropagation();
         this.rowSelection.emit(rowData);
     }
-    // Updates the selected items and toggles bulk mode depending on selection.
     onSelectionChange(selected) {
-        this.selectedItems.set(selected);
+        this.selectedItems = selected;
         this.bulkMode = selected.length > 0;
-        // Emit selected row(s) outside
         this.checkBoxSelection.emit(selected);
     }
     handleActionClick(event) {
+        // built-in "More" menu actions
         if (event?.action?.key === 'EXPORT_PDF') {
-            exportRowsToPdf(this.selectedColumns, // only the currently visible columns
-            this.tableData, // currently displayed rows
-            this.columnTypeMap, // mapping: field -> columnType
-            this.columnTypeEnum, // enum with supported column types
-            (k) => this.translateService.instant(k), // translation function
-            'table.pdf' // output file name
-            );
+            const baseName = this.tableConfiguration?.key ? `${this.tableConfiguration.key}.pdf` : 'table.pdf';
+            exportRowsToPdf(this.selectedColumns, this.tableData, this.columnTypeMap, this.columnTypeEnum, (k) => this.translateService.instant(k), baseName);
             return;
         }
         if (event?.action?.key === 'EXPORT_CSV') {
-            exportRowsToCsv(this.selectedColumns, this.tableData, this.columnTypeMap, this.columnTypeEnum, (k) => this.translateService.instant(k), 'table.csv');
+            const baseName = this.tableConfiguration?.key ? `${this.tableConfiguration.key}.csv` : 'table.csv';
+            exportRowsToCsv(this.selectedColumns, this.tableData, this.columnTypeMap, this.columnTypeEnum, (k) => this.translateService.instant(k), baseName);
             return;
         }
+        // bubble up anything else
         this.actionClick.emit(event);
     }
-    // Helper to localize translation keys using the injected TranslateService.
     translateKey(key) {
         return this.translateService.instant(key);
     }
-    // Recursively checks if any value in a nested structure matches the search query.
     matchesQuery(value, query) {
         if (value === null || value === undefined)
             return false;
@@ -3015,11 +3014,11 @@ class TableComponent {
         return false;
     }
     clearSelection() {
-        this.selectedItems.set([]);
+        this.selectedItems = [];
         this.bulkMode = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n    <table-caption\n      [columns]=\"columns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\n      [selectedItems]=\"selectedItems()\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    >\n    </table-caption>\n  </ng-container>\n\n  <ng-template #selectionActions>\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n        <span\n          >{{ selectedItems().length }}\n          {{\n            selectedItems()?.length === 1\n              ? (\"LABELS.ITEM_SELECTED\" | translate)\n              : (\"LABELS.ITEMS_SELECTED\" | translate)\n          }}</span\n        >}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-data-table-action>\n        </ng-container>\n\n        <button\n          [attr.data-cy]=\"'clear-selection-button'\"\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n  <p-table\n    #dt\n    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"30\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\n    [rowSelectable]=\"isRowSelectable\"\n    [totalRecords]=\"totalRecords\"\n    (onLazyLoad)=\"loadLazyData($event)\"\n    [selection]=\"selectedItems()\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [sortMode]=\"'multiple'\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n\n        <th\n          pResizableColumn\n          class=\"custom-th text-primary font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon\n            [field]=\"col.field\"\n            [attr.data-cy]=\"'sort-button-' + col.header\"\n          ></p-sortIcon>\n        </th>\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n\n    <ng-template\n      #body\n      let-rowData\n      let-columns=\"columns\"\n      let-rowIndex=\"rowIndex\"\n    >\n      <tr>\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n              \"\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton\n              [value]=\"rowData\"\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n              \"\n            ></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <td\n          *ngFor=\"let col of columns; let i = index\"\n          (click)=\"\n            i < 2 && tableConfiguration.hasCellClick\n              ? onRowClick($event, rowData)\n              : null\n          \"\n          [ngClass]=\"{\n            'text-blue-500 underline cursor-pointer':\n              i < 2 && tableConfiguration.hasCellClick\n          }\"\n        >\n          <ng-container [ngSwitch]=\"col.columnType\">\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  class=\"border-round-md font-semibold\"\n                  [style]=\"{\n                    'fontSize':'12px',\n                    \n                    'padding': '3px 8px',\n                    'width':'fit-content',\n                    'background-color':\n                      (rowData[col.field + 'Color'] || '#ccc') + '56',\n                        'color': rowData[col.field + 'Color'],     \n                  }\"\n                >\n                  {{\n                    rowData[col.field]?.name || rowData[col.field] | translate\n                  }}\n                </div>\n\n                <!-- <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"\n                    rowData[col.field]?.name || rowData[col.field] | translate\n                  \"\n                ></p-tag> -->\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                @for(item of rowData[col.field]; track $index){\n                <p-badge severity=\"warn\" styleClass=\"mr-1\" [value]=\"item\" />\n\n                <!-- <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.LIST_TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'font-size': '0.9rem!important'\n                  }\"\n                  styleClass=\"mr-1\"\n                  [value]=\"item\"\n                  severity=\"info\"\n                ></p-tag> -->\n                }\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.OBJ_TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.value | translate\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-avatar\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.PERSON +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [label]=\"rowData[col.field]?.name | initials\"\n                  class=\"cursor-pointer\"\n                  [style]=\"{\n                    'background-color': '#9c27b0',\n                    color: '#ffffff',\n                    'font-size': '0.8rem!important'\n                  }\"\n                  shape=\"circle\"\n                  (click)=\"opp.toggle($event)\"\n                ></p-avatar>\n                <p-overlayPanel #opp>\n                  <div>\n                    <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\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-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container\n                *ngIf=\"rowData[col.field]?.length; else emptyCellBlock\"\n              >\n                @if(rowData[col.field].length > 1){\n                <div\n                  class=\"cursor-pointer\"\n                  (click)=\"op.toggle($event)\"\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.LIST +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                >\n                  <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n                  <p-chip\n                    class=\"text-sm font-semibold p-1 m-0\"\n                    [label]=\"'+' + (rowData[col.field].length - 1)\"\n                  />\n                </div>\n\n                } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n                }\n              </ng-container>\n              <p-overlayPanel #op>\n                @for(item of rowData[col.field] ; track item.name; let isFirst =\n                $first ){\n                <ul class=\"list-none m-0 p-0\">\n                  @if(!isFirst) {\n                  <li>{{ item.name }}</li>\n                  }\n                </ul>\n                }\n              </p-overlayPanel>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container\n                *ngIf=\"rowData[col.field] | isBoolean; else emptyCellBlock\"\n              >\n                <i\n                  [pTooltip]=\"rowData?.[col.field+'Tooltip']\"\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.BOOLEAN +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"\n                    rowData[col.field]\n                      ? 'text-green-500 pi-check-circle'\n                      : 'text-red-500 pi-times-circle'\n                  \"\n                ></i>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TEXT_AREA +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field]\"\n                  style=\"width: 200px\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n                  \"\n                >\n                  {{\n                    rowData[col.field].length > 50\n                      ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                      : rowData[col.field]\n                  }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TIMEPERIOD +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field] | timePeriod\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | timePeriod }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.DATE_WITHOUT_TIME\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.DATE_WITHOUT_TIME +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"(rowData[col.field] | date : 'dd.MM.yyyy') ?? ''\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | date : \"dd.MM.yyyy\" }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <span>{{ rowData[\"category.name\"] }}</span>\n              <div\n                [attr.data-cy]=\"\n                  'table-row-' +\n                  columnTypeEnum.TEXT +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n                \"\n                [pTooltip]=\"rowData | cell : col : dateFormat\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n            <ng-template #emptyCellBlock>\n              <ng-container\n                [ngTemplateOutlet]=\"emptyCell\"\n                [ngTemplateOutletContext]=\"{\n                  dataCy:\n                    'table-row-' +\n                    col.columnType +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                }\"\n              >\n              </ng-container>\n            </ng-template>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell let-dataCy=\"dataCy\">\n      <span [attr.data-cy]=\"dataCy\">--</span>\n    </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns\">\n          <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n        </td>\n        <td>\n          <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <td class=\"p-2\" colspan=\"100\">\n        <div class=\"flex align-items-center\">\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          {{ \"NO_RESULTS_FOUND\" | translate }}\n        </div>\n      </td>\n    </ng-template>\n  </p-table>\n\n  <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n    {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n  </div>\n</div>\n", 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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$2.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i10$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i5$3.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <ng-container *ngIf=\"selectedItems.length === 0; else selectionActions\">\n    <table-caption\n      [columns]=\"columns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\n      [selectedItems]=\"selectedItems\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    >\n    </table-caption>\n  </ng-container>\n\n  <ng-template #selectionActions>\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n        <span\n          >{{ selectedItems.length }}\n          {{\n            selectedItems?.length === 1\n              ? (\"LABELS.ITEM_SELECTED\" | translate)\n              : (\"LABELS.ITEMS_SELECTED\" | translate)\n          }}</span\n        >}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems\n              });\n              clearSelection()\n            \"\n          ></phoenix-data-table-action>\n        </ng-container>\n\n        <button\n          [attr.data-cy]=\"'clear-selection-button'\"\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n  <p-table\n    #dt\n    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"30\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\n    [rowSelectable]=\"isRowSelectable\"\n    [totalRecords]=\"totalRecords\"\n    (onLazyLoad)=\"loadLazyData($event)\"\n    [selection]=\"selectedItems\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [sortMode]=\"'multiple'\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n\n        <th\n          pResizableColumn\n          class=\"custom-th text-primary font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon\n            [field]=\"col.field\"\n            [attr.data-cy]=\"'sort-button-' + col.header\"\n          ></p-sortIcon>\n        </th>\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n\n    <ng-template\n      #body\n      let-rowData\n      let-columns=\"columns\"\n      let-rowIndex=\"rowIndex\"\n    >\n      <tr>\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n              \"\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton\n              [value]=\"rowData\"\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n              \"\n            ></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <td\n          *ngFor=\"let col of columns; let i = index\"\n          (click)=\"\n            i < 2 && tableConfiguration.hasCellClick\n              ? onRowClick($event, rowData)\n              : null\n          \"\n          [ngClass]=\"{\n            'text-blue-500 underline cursor-pointer':\n              i < 2 && tableConfiguration.hasCellClick\n          }\"\n        >\n          <ng-container [ngSwitch]=\"col.columnType\">\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  class=\"border-round-md font-semibold\"\n                  [style]=\"{\n                    'fontSize':'12px',\n                    \n                    'padding': '3px 8px',\n                    'width':'fit-content',\n                    'background-color':\n                      (rowData[col.field + 'Color'] || '#ccc') + '56',\n                        'color': rowData[col.field + 'Color'],     \n                  }\"\n                >\n                  {{\n                    rowData[col.field]?.name || rowData[col.field] | translate\n                  }}\n                </div>\n\n                <!-- <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"\n                    rowData[col.field]?.name || rowData[col.field] | translate\n                  \"\n                ></p-tag> -->\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                @for(item of rowData[col.field]; track $index){\n                <p-badge severity=\"warn\" styleClass=\"mr-1\" [value]=\"item\" />\n\n                <!-- <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.LIST_TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'font-size': '0.9rem!important'\n                  }\"\n                  styleClass=\"mr-1\"\n                  [value]=\"item\"\n                  severity=\"info\"\n                ></p-tag> -->\n                }\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.OBJ_TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.value | translate\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-avatar\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.PERSON +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [label]=\"rowData[col.field]?.name | initials\"\n                  class=\"cursor-pointer\"\n                  [style]=\"{\n                    'background-color': '#9c27b0',\n                    color: '#ffffff',\n                    'font-size': '0.8rem!important'\n                  }\"\n                  shape=\"circle\"\n                  (click)=\"opp.toggle($event)\"\n                ></p-avatar>\n                <p-overlayPanel #opp>\n                  <div>\n                    <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\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-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container\n                *ngIf=\"rowData[col.field]?.length; else emptyCellBlock\"\n              >\n                @if(rowData[col.field].length > 1){\n                <div\n                  class=\"cursor-pointer\"\n                  (click)=\"op.toggle($event)\"\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.LIST +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                >\n                  <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n                  <p-chip\n                    class=\"text-sm font-semibold p-1 m-0\"\n                    [label]=\"'+' + (rowData[col.field].length - 1)\"\n                  />\n                </div>\n\n                } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n                }\n              </ng-container>\n              <p-overlayPanel #op>\n                @for(item of rowData[col.field] ; track item.name; let isFirst =\n                $first ){\n                <ul class=\"list-none m-0 p-0\">\n                  @if(!isFirst) {\n                  <li>{{ item.name }}</li>\n                  }\n                </ul>\n                }\n              </p-overlayPanel>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container\n                *ngIf=\"rowData[col.field] | isBoolean; else emptyCellBlock\"\n              >\n                <i\n                  [pTooltip]=\"rowData?.[col.field+'Tooltip']\"\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.BOOLEAN +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"\n                    rowData[col.field]\n                      ? 'text-green-500 pi-check-circle'\n                      : 'text-red-500 pi-times-circle'\n                  \"\n                ></i>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TEXT_AREA +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field]\"\n                  style=\"width: 200px\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n                  \"\n                >\n                  {{\n                    rowData[col.field].length > 50\n                      ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                      : rowData[col.field]\n                  }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TIMEPERIOD +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field] | timePeriod\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | timePeriod }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.DATE_WITHOUT_TIME\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.DATE_WITHOUT_TIME +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"(rowData[col.field] | date : 'dd.MM.yyyy') ?? ''\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | date : \"dd.MM.yyyy\" }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <span>{{ rowData[\"category.name\"] }}</span>\n              <div\n                [attr.data-cy]=\"\n                  'table-row-' +\n                  columnTypeEnum.TEXT +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n                \"\n                [pTooltip]=\"rowData | cell : col : dateFormat\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n            <ng-template #emptyCellBlock>\n              <ng-container\n                [ngTemplateOutlet]=\"emptyCell\"\n                [ngTemplateOutletContext]=\"{\n                  dataCy:\n                    'table-row-' +\n                    col.columnType +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                }\"\n              >\n              </ng-container>\n            </ng-template>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell let-dataCy=\"dataCy\">\n      <span [attr.data-cy]=\"dataCy\">--</span>\n    </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns\">\n          <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n        </td>\n        <td>\n          <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <td class=\"p-2\" colspan=\"100\">\n        <div class=\"flex align-items-center\">\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          {{ \"NO_RESULTS_FOUND\" | translate }}\n        </div>\n      </td>\n    </ng-template>\n  </p-table>\n\n  <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n    {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n  </div>\n</div>\n", 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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$2.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i10$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i5$3.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -3042,7 +3041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         IsBooleanPipe,
                         BadgeModule,
                         DatePipe,
-                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n    <table-caption\n      [columns]=\"columns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\n      [selectedItems]=\"selectedItems()\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    >\n    </table-caption>\n  </ng-container>\n\n  <ng-template #selectionActions>\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n        <span\n          >{{ selectedItems().length }}\n          {{\n            selectedItems()?.length === 1\n              ? (\"LABELS.ITEM_SELECTED\" | translate)\n              : (\"LABELS.ITEMS_SELECTED\" | translate)\n          }}</span\n        >}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-data-table-action>\n        </ng-container>\n\n        <button\n          [attr.data-cy]=\"'clear-selection-button'\"\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n  <p-table\n    #dt\n    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"30\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\n    [rowSelectable]=\"isRowSelectable\"\n    [totalRecords]=\"totalRecords\"\n    (onLazyLoad)=\"loadLazyData($event)\"\n    [selection]=\"selectedItems()\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [sortMode]=\"'multiple'\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n\n        <th\n          pResizableColumn\n          class=\"custom-th text-primary font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon\n            [field]=\"col.field\"\n            [attr.data-cy]=\"'sort-button-' + col.header\"\n          ></p-sortIcon>\n        </th>\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n\n    <ng-template\n      #body\n      let-rowData\n      let-columns=\"columns\"\n      let-rowIndex=\"rowIndex\"\n    >\n      <tr>\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n              \"\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton\n              [value]=\"rowData\"\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n              \"\n            ></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <td\n          *ngFor=\"let col of columns; let i = index\"\n          (click)=\"\n            i < 2 && tableConfiguration.hasCellClick\n              ? onRowClick($event, rowData)\n              : null\n          \"\n          [ngClass]=\"{\n            'text-blue-500 underline cursor-pointer':\n              i < 2 && tableConfiguration.hasCellClick\n          }\"\n        >\n          <ng-container [ngSwitch]=\"col.columnType\">\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  class=\"border-round-md font-semibold\"\n                  [style]=\"{\n                    'fontSize':'12px',\n                    \n                    'padding': '3px 8px',\n                    'width':'fit-content',\n                    'background-color':\n                      (rowData[col.field + 'Color'] || '#ccc') + '56',\n                        'color': rowData[col.field + 'Color'],     \n                  }\"\n                >\n                  {{\n                    rowData[col.field]?.name || rowData[col.field] | translate\n                  }}\n                </div>\n\n                <!-- <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"\n                    rowData[col.field]?.name || rowData[col.field] | translate\n                  \"\n                ></p-tag> -->\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                @for(item of rowData[col.field]; track $index){\n                <p-badge severity=\"warn\" styleClass=\"mr-1\" [value]=\"item\" />\n\n                <!-- <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.LIST_TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'font-size': '0.9rem!important'\n                  }\"\n                  styleClass=\"mr-1\"\n                  [value]=\"item\"\n                  severity=\"info\"\n                ></p-tag> -->\n                }\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.OBJ_TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.value | translate\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-avatar\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.PERSON +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [label]=\"rowData[col.field]?.name | initials\"\n                  class=\"cursor-pointer\"\n                  [style]=\"{\n                    'background-color': '#9c27b0',\n                    color: '#ffffff',\n                    'font-size': '0.8rem!important'\n                  }\"\n                  shape=\"circle\"\n                  (click)=\"opp.toggle($event)\"\n                ></p-avatar>\n                <p-overlayPanel #opp>\n                  <div>\n                    <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\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-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container\n                *ngIf=\"rowData[col.field]?.length; else emptyCellBlock\"\n              >\n                @if(rowData[col.field].length > 1){\n                <div\n                  class=\"cursor-pointer\"\n                  (click)=\"op.toggle($event)\"\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.LIST +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                >\n                  <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n                  <p-chip\n                    class=\"text-sm font-semibold p-1 m-0\"\n                    [label]=\"'+' + (rowData[col.field].length - 1)\"\n                  />\n                </div>\n\n                } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n                }\n              </ng-container>\n              <p-overlayPanel #op>\n                @for(item of rowData[col.field] ; track item.name; let isFirst =\n                $first ){\n                <ul class=\"list-none m-0 p-0\">\n                  @if(!isFirst) {\n                  <li>{{ item.name }}</li>\n                  }\n                </ul>\n                }\n              </p-overlayPanel>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container\n                *ngIf=\"rowData[col.field] | isBoolean; else emptyCellBlock\"\n              >\n                <i\n                  [pTooltip]=\"rowData?.[col.field+'Tooltip']\"\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.BOOLEAN +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"\n                    rowData[col.field]\n                      ? 'text-green-500 pi-check-circle'\n                      : 'text-red-500 pi-times-circle'\n                  \"\n                ></i>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TEXT_AREA +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field]\"\n                  style=\"width: 200px\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n                  \"\n                >\n                  {{\n                    rowData[col.field].length > 50\n                      ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                      : rowData[col.field]\n                  }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TIMEPERIOD +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field] | timePeriod\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | timePeriod }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.DATE_WITHOUT_TIME\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.DATE_WITHOUT_TIME +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"(rowData[col.field] | date : 'dd.MM.yyyy') ?? ''\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | date : \"dd.MM.yyyy\" }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <span>{{ rowData[\"category.name\"] }}</span>\n              <div\n                [attr.data-cy]=\"\n                  'table-row-' +\n                  columnTypeEnum.TEXT +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n                \"\n                [pTooltip]=\"rowData | cell : col : dateFormat\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n            <ng-template #emptyCellBlock>\n              <ng-container\n                [ngTemplateOutlet]=\"emptyCell\"\n                [ngTemplateOutletContext]=\"{\n                  dataCy:\n                    'table-row-' +\n                    col.columnType +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                }\"\n              >\n              </ng-container>\n            </ng-template>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell let-dataCy=\"dataCy\">\n      <span [attr.data-cy]=\"dataCy\">--</span>\n    </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns\">\n          <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n        </td>\n        <td>\n          <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <td class=\"p-2\" colspan=\"100\">\n        <div class=\"flex align-items-center\">\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          {{ \"NO_RESULTS_FOUND\" | translate }}\n        </div>\n      </td>\n    </ng-template>\n  </p-table>\n\n  <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n    {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n  </div>\n</div>\n", 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}\n"] }]
+                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  <ng-container *ngIf=\"selectedItems.length === 0; else selectionActions\">\n    <table-caption\n      [columns]=\"columns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\n      [selectedItems]=\"selectedItems\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    >\n    </table-caption>\n  </ng-container>\n\n  <ng-template #selectionActions>\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n        <span\n          >{{ selectedItems.length }}\n          {{\n            selectedItems?.length === 1\n              ? (\"LABELS.ITEM_SELECTED\" | translate)\n              : (\"LABELS.ITEMS_SELECTED\" | translate)\n          }}</span\n        >}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems\n              });\n              clearSelection()\n            \"\n          ></phoenix-data-table-action>\n        </ng-container>\n\n        <button\n          [attr.data-cy]=\"'clear-selection-button'\"\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n  <p-table\n    #dt\n    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"30\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\n    [rowSelectable]=\"isRowSelectable\"\n    [totalRecords]=\"totalRecords\"\n    (onLazyLoad)=\"loadLazyData($event)\"\n    [selection]=\"selectedItems\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [sortMode]=\"'multiple'\"\n    [resizableColumns]=\"true\"\n    columnResizeMode=\"expand\"\n  >\n    <ng-template #header let-columns>\n      <tr style=\"height: 40px\" class=\"dt-header\">\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableHeaderCheckbox\n              [attr.data-cy]=\"'table-header-checkbox'\"\n            ></p-tableHeaderCheckbox>\n          </th>\n          <th\n            class=\"custom-th\"\n            *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n          ></th>\n        </ng-container>\n\n        <th\n          pResizableColumn\n          class=\"custom-th text-primary font-bold\"\n          *ngFor=\"let col of columns\"\n          [pSortableColumn]=\"col.field\"\n        >\n          {{ col.header | translate }}\n          <p-sortIcon\n            [field]=\"col.field\"\n            [attr.data-cy]=\"'sort-button-' + col.header\"\n          ></p-sortIcon>\n        </th>\n        <th class=\"custom-th\"></th>\n      </tr>\n    </ng-template>\n\n    <ng-template\n      #body\n      let-rowData\n      let-columns=\"columns\"\n      let-rowIndex=\"rowIndex\"\n    >\n      <tr>\n        <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n          <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n            <p-tableCheckbox\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n              \"\n              [disabled]=\"\n                rowData?.canSelect !== undefined ? !rowData.canSelect : false\n              \"\n              [value]=\"rowData\"\n            ></p-tableCheckbox>\n          </td>\n          <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n            <p-tableRadioButton\n              [value]=\"rowData\"\n              [attr.data-cy]=\"\n                'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n              \"\n            ></p-tableRadioButton>\n          </td>\n        </ng-container>\n\n        <td\n          *ngFor=\"let col of columns; let i = index\"\n          (click)=\"\n            i < 2 && tableConfiguration.hasCellClick\n              ? onRowClick($event, rowData)\n              : null\n          \"\n          [ngClass]=\"{\n            'text-blue-500 underline cursor-pointer':\n              i < 2 && tableConfiguration.hasCellClick\n          }\"\n        >\n          <ng-container [ngSwitch]=\"col.columnType\">\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  class=\"border-round-md font-semibold\"\n                  [style]=\"{\n                    'fontSize':'12px',\n                    \n                    'padding': '3px 8px',\n                    'width':'fit-content',\n                    'background-color':\n                      (rowData[col.field + 'Color'] || '#ccc') + '56',\n                        'color': rowData[col.field + 'Color'],     \n                  }\"\n                >\n                  {{\n                    rowData[col.field]?.name || rowData[col.field] | translate\n                  }}\n                </div>\n\n                <!-- <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"\n                    rowData[col.field]?.name || rowData[col.field] | translate\n                  \"\n                ></p-tag> -->\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                @for(item of rowData[col.field]; track $index){\n                <p-badge severity=\"warn\" styleClass=\"mr-1\" [value]=\"item\" />\n\n                <!-- <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.LIST_TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'font-size': '0.9rem!important'\n                  }\"\n                  styleClass=\"mr-1\"\n                  [value]=\"item\"\n                  severity=\"info\"\n                ></p-tag> -->\n                }\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-tag\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.OBJ_TAG +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\n                  }\"\n                  [value]=\"rowData[col.field]?.value | translate\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <p-avatar\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.PERSON +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [label]=\"rowData[col.field]?.name | initials\"\n                  class=\"cursor-pointer\"\n                  [style]=\"{\n                    'background-color': '#9c27b0',\n                    color: '#ffffff',\n                    'font-size': '0.8rem!important'\n                  }\"\n                  shape=\"circle\"\n                  (click)=\"opp.toggle($event)\"\n                ></p-avatar>\n                <p-overlayPanel #opp>\n                  <div>\n                    <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n                    <span class=\"block text-sm\">\n                      <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\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-overlayPanel>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container\n                *ngIf=\"rowData[col.field]?.length; else emptyCellBlock\"\n              >\n                @if(rowData[col.field].length > 1){\n                <div\n                  class=\"cursor-pointer\"\n                  (click)=\"op.toggle($event)\"\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.LIST +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                >\n                  <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n                  <p-chip\n                    class=\"text-sm font-semibold p-1 m-0\"\n                    [label]=\"'+' + (rowData[col.field].length - 1)\"\n                  />\n                </div>\n\n                } @else {\n                <span>{{ rowData[col.field][0].name }}</span>\n                }\n              </ng-container>\n              <p-overlayPanel #op>\n                @for(item of rowData[col.field] ; track item.name; let isFirst =\n                $first ){\n                <ul class=\"list-none m-0 p-0\">\n                  @if(!isFirst) {\n                  <li>{{ item.name }}</li>\n                  }\n                </ul>\n                }\n              </p-overlayPanel>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container\n                *ngIf=\"rowData[col.field] | isBoolean; else emptyCellBlock\"\n              >\n                <i\n                  [pTooltip]=\"rowData?.[col.field+'Tooltip']\"\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.BOOLEAN +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"\n                    rowData[col.field]\n                      ? 'text-green-500 pi-check-circle'\n                      : 'text-red-500 pi-times-circle'\n                  \"\n                ></i>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TEXT_AREA +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field]\"\n                  style=\"width: 200px\"\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n                  \"\n                >\n                  {{\n                    rowData[col.field].length > 50\n                      ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n                      : rowData[col.field]\n                  }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.TIMEPERIOD +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"rowData[col.field] | timePeriod\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | timePeriod }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.DATE_WITHOUT_TIME\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n                <div\n                  [attr.data-cy]=\"\n                    'table-row-' +\n                    columnTypeEnum.DATE_WITHOUT_TIME +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                  \"\n                  [pTooltip]=\"(rowData[col.field] | date : 'dd.MM.yyyy') ?? ''\"\n                  style=\"max-width: 200px\"\n                >\n                  {{ rowData[col.field] | date : \"dd.MM.yyyy\" }}\n                </div>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              <span>{{ rowData[\"category.name\"] }}</span>\n              <div\n                [attr.data-cy]=\"\n                  'table-row-' +\n                  columnTypeEnum.TEXT +\n                  '-row-index-' +\n                  rowIndex +\n                  '-col-index-' +\n                  i\n                \"\n                [pTooltip]=\"rowData | cell : col : dateFormat\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n            <ng-template #emptyCellBlock>\n              <ng-container\n                [ngTemplateOutlet]=\"emptyCell\"\n                [ngTemplateOutletContext]=\"{\n                  dataCy:\n                    'table-row-' +\n                    col.columnType +\n                    '-row-index-' +\n                    rowIndex +\n                    '-col-index-' +\n                    i\n                }\"\n              >\n              </ng-container>\n            </ng-template>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell let-dataCy=\"dataCy\">\n      <span [attr.data-cy]=\"dataCy\">--</span>\n    </ng-template>\n\n    <ng-template pTemplate=\"loadingbody\" let-columns>\n      <tr style=\"height: 46px\">\n        <td *ngFor=\"let col of columns\">\n          <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n        </td>\n        <td>\n          <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <td class=\"p-2\" colspan=\"100\">\n        <div class=\"flex align-items-center\">\n          <i class=\"pi pi-info-circle mr-2\"></i>\n          {{ \"NO_RESULTS_FOUND\" | translate }}\n        </div>\n      </td>\n    </ng-template>\n  </p-table>\n\n  <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n    {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n  </div>\n</div>\n", 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}\n"] }]
         }], propDecorators: { dt: [{
                 type: ViewChild,
                 args: ['dt']
@@ -3487,7 +3486,7 @@ class ObjectItemDialogComponent {
     }
     actionClick(key) {
         if (key === 'assign') {
-            this.ref.close(this.table.selectedItems());
+            this.ref.close(this.table.selectedItems);
         }
         else {
             this.ref.close();