@fuentis/phoenix-ui 0.0.9-alpha.128 → 0.0.9-alpha.129

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -545,6 +545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
 class ShellComponent {
     config;
     isSidebarOpen;
+    onDarkModeSelect = new EventEmitter();
     dmConfig = { mode: 'light' };
     toggleSidebar() {
         this.isSidebarOpen = !this.isSidebarOpen;
@@ -555,9 +556,10 @@ class ShellComponent {
         this.dmConfig.mode === 'light'
             ? (this.dmConfig.mode = 'dark')
             : (this.dmConfig.mode = 'light');
+        this.onDarkModeSelect.emit(this.dmConfig);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", isSidebarOpen: "isSidebarOpen" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n  [style]=\"{\n    'grid-template-columns':  '16rem 1fr',\n    'grid-template-rows': '3.5rem 1fr',\n  }\"\n  class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n  <!-- Top header -->\n  <pho-topbar\n    class=\"pho-col-span-2 z-1\"\n    [user]=\"config.user\"\n    [topbarModulesMenu]=\"config.topbarModulesMenu\"\n    [darkModeSelector]=\"dmConfig\"\n    (onDarkModeSelect)=\"selectDarkMode()\"\n  >\n  </pho-topbar>\n  <!-- Sidebar -->\n  <pho-sidebar\n    [mainItems]=\"config.mainItems\"\n    [footerItem]=\"config.footerItem\"\n    (toggleSidebar)=\"toggleSidebar()\"\n  ></pho-sidebar>\n  <!-- Main content -->\n  <div class=\"overflow-auto\">\n    <ng-content> </ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem", "isSidebarOpen"], outputs: ["toggleSidebar"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "topbarModulesMenu", "darkModeSelector", "footerConfig"], outputs: ["onDarkModeSelect"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", isSidebarOpen: "isSidebarOpen" }, outputs: { onDarkModeSelect: "onDarkModeSelect" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n  [style]=\"{\n    'grid-template-columns':  '16rem 1fr',\n    'grid-template-rows': '3.5rem 1fr',\n  }\"\n  class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n  <!-- Top header -->\n  <pho-topbar\n    class=\"pho-col-span-2 z-1\"\n    [user]=\"config.user\"\n    [topbarModulesMenu]=\"config.topbarModulesMenu\"\n    [darkModeSelector]=\"dmConfig\"\n    (onDarkModeSelect)=\"selectDarkMode()\"\n  >\n  </pho-topbar>\n  <!-- Sidebar -->\n  <pho-sidebar\n    [mainItems]=\"config.mainItems\"\n    [footerItem]=\"config.footerItem\"\n    (toggleSidebar)=\"toggleSidebar()\"\n  ></pho-sidebar>\n  <!-- Main content -->\n  <div class=\"overflow-auto\">\n    <ng-content> </ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem", "isSidebarOpen"], outputs: ["toggleSidebar"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "topbarModulesMenu", "darkModeSelector", "footerConfig"], outputs: ["onDarkModeSelect"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ShellComponent, decorators: [{
             type: Component,
@@ -566,6 +568,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                 type: Input
             }], isSidebarOpen: [{
                 type: Input
+            }], onDarkModeSelect: [{
+                type: Output
             }] } });
 
 var tableActionType;
@@ -1624,7 +1628,7 @@ class TableComponent {
         this.bulkMode = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection" }, 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      [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>{{ selectedItems().length }} items selected</span>}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-phoenix-data-table-action>\n        </ng-container>\n\n        <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    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"50\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\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 [field]=\"col.field\"></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              [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 [value]=\"rowData\"></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 emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.value\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\n                  [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n                  class=\"mr-1\"\n                  [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n                  shape=\"circle\"\n                ></p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  class=\"list-none m-0 p-0\"\n                  *ngFor=\"let item of rowData[col.field]\"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <i\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"{\n                    'text-green-500 pi-check-circle': rowData[col.field],\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 emptyCell\">\n                <div\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 *ngSwitchDefault>\n              <div\n                [pTooltip]=\"rowData[col.field]\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell> -- </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    Total records: {{ totalRecords }}\n  </div>\n</div>\n", styles: [".dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}: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}::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.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: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.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$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.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.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", tableConfiguration: "tableConfiguration" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection" }, 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      [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>{{ selectedItems().length }} items selected</span>}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-phoenix-data-table-action>\n        </ng-container>\n\n        <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    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"50\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\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 [field]=\"col.field\"></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              [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 [value]=\"rowData\"></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 emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.value\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\n                  [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n                  class=\"mr-1\"\n                  [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n                  shape=\"circle\"\n                ></p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  class=\"list-none m-0 p-0\"\n                  *ngFor=\"let item of rowData[col.field]\"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <i\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"{\n                    'text-green-500 pi-check-circle': rowData[col.field],\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 emptyCell\">\n                <div\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 *ngSwitchDefault>\n              <div\n                [pTooltip]=\"rowData[col.field]\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell> -- </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    Total records: {{ 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}::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.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: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.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$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$3.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i7.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.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.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -1639,7 +1643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                         TooltipModule,
                         TableCellPipe,
                         SkeletonModule,
-                    ], 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      [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>{{ selectedItems().length }} items selected</span>}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-phoenix-data-table-action>\n        </ng-container>\n\n        <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    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"50\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\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 [field]=\"col.field\"></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              [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 [value]=\"rowData\"></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 emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.value\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\n                  [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n                  class=\"mr-1\"\n                  [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n                  shape=\"circle\"\n                ></p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  class=\"list-none m-0 p-0\"\n                  *ngFor=\"let item of rowData[col.field]\"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <i\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"{\n                    'text-green-500 pi-check-circle': rowData[col.field],\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 emptyCell\">\n                <div\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 *ngSwitchDefault>\n              <div\n                [pTooltip]=\"rowData[col.field]\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell> -- </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    Total records: {{ totalRecords }}\n  </div>\n</div>\n", styles: [".dt-header th:not(:last-child){border-right:1px solid #e4e4e4!important}: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}::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      [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>{{ selectedItems().length }} items selected</span>}\n      </div>\n\n      <div>\n        <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n          <phoenix-phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems()\n              });\n              clearSelection()\n            \"\n          ></phoenix-phoenix-data-table-action>\n        </ng-container>\n\n        <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    [columns]=\"selectedColumns\"\n    [value]=\"tableData\"\n    [size]=\"'small'\"\n    scrollable=\"true\"\n    [scrollHeight]=\"tableConfiguration.scrollHeight\"\n    [virtualScroll]=\"true\"\n    [virtualScrollItemSize]=\"50\"\n    [rows]=\"100\"\n    [lazy]=\"true\"\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 [field]=\"col.field\"></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              [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 [value]=\"rowData\"></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 emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.name || rowData[col.field]\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-tag\n                  styleClass=\"custom-tag\"\n                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc'\n                  }\"\n                  [value]=\"rowData[col.field]?.value\"\n                ></p-tag>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <p-avatar\n                  [label]=\"(rowData[col.field] | cell : col)?.avatar\"\n                  class=\"mr-1\"\n                  [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n                  shape=\"circle\"\n                ></p-avatar>\n                {{ (rowData[col.field] | cell : col)?.name }}\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <ul\n                  class=\"list-none m-0 p-0\"\n                  *ngFor=\"let item of rowData[col.field]\"\n                >\n                  <li>{{ item.name }}</li>\n                </ul>\n              </ng-container>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n              <ng-container *ngIf=\"rowData[col.field]; else emptyCell\">\n                <i\n                  [attr.data-cy]=\"\n                    'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n                  \"\n                  class=\"pi\"\n                  [ngClass]=\"{\n                    'text-green-500 pi-check-circle': rowData[col.field],\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 emptyCell\">\n                <div\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 *ngSwitchDefault>\n              <div\n                [pTooltip]=\"rowData[col.field]\"\n                style=\"max-width: 200px\"\n                [innerHTML]=\"rowData[col.field] | cell : col : dateFormat\"\n              ></div>\n            </ng-container>\n          </ng-container>\n        </td>\n\n        <td class=\"p-0\">\n          <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n            <phoenix-phoenix-data-table-action\n              [actionConfig]=\"action\"\n              [rowData]=\"rowData\"\n              (actionClick)=\"handleActionClick($event)\"\n            ></phoenix-phoenix-data-table-action>\n          </ng-container>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template #emptyCell> -- </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    Total records: {{ 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}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], columns: [{