@fuentis/phoenix-ui 0.0.9-alpha.201 → 0.0.9-alpha.202

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -106,7 +106,7 @@ class SidebarItemComponent {
         this.router = router;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarItemComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SidebarItemComponent, isStandalone: true, selector: "pho-sidebar-item", inputs: { item: "item", classname: "classname", isSlim: "isSlim" }, ngImport: i0, template: `<li class="list-none">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SidebarItemComponent, isStandalone: true, selector: "pho-sidebar-item", inputs: { item: "item", classname: "classname", isSlim: "isSlim" }, ngImport: i0, template: `<li class="list-none ">
     <a
       [routerLink]="item.disabled ? null : item.path"
       routerLinkActive="active-link"
@@ -115,11 +115,11 @@ class SidebarItemComponent {
         classname,
         item.disabled ? 'opacity-50 cursor-not-allowed' : ''
       ]"
-      class="p-button no-underline w-full pt-2 pb-2 justify-content-start surface-0 hover:surface-100	 border-none overflow-hidden bg-transparent sidebaritem"
+      class="p-button no-underline w-full pt-2 pb-2  justify-content-start surface-0 hover:surface-100	 border-none overflow-hidden bg-transparent sidebaritem"
       [style.pointer-events]="item.disabled ? 'none' : 'auto'"
     >
       <img width="30" [src]="item.icon" alt="" />
-      <span *ngIf="!isSlim" class="text-primary">{{
+      <span *ngIf="!isSlim" class="text-primary pr-3">{{
         item.label | translate
       }}</span>
     </a>
@@ -142,7 +142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         RouterLinkActive,
                         TooltipModule,
                         TranslateModule,
-                    ], encapsulation: ViewEncapsulation.None, template: `<li class="list-none">
+                    ], encapsulation: ViewEncapsulation.None, template: `<li class="list-none ">
     <a
       [routerLink]="item.disabled ? null : item.path"
       routerLinkActive="active-link"
@@ -151,11 +151,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         classname,
         item.disabled ? 'opacity-50 cursor-not-allowed' : ''
       ]"
-      class="p-button no-underline w-full pt-2 pb-2 justify-content-start surface-0 hover:surface-100	 border-none overflow-hidden bg-transparent sidebaritem"
+      class="p-button no-underline w-full pt-2 pb-2  justify-content-start surface-0 hover:surface-100	 border-none overflow-hidden bg-transparent sidebaritem"
       [style.pointer-events]="item.disabled ? 'none' : 'auto'"
     >
       <img width="30" [src]="item.icon" alt="" />
-      <span *ngIf="!isSlim" class="text-primary">{{
+      <span *ngIf="!isSlim" class="text-primary pr-3">{{
         item.label | translate
       }}</span>
     </a>
@@ -1688,7 +1688,12 @@ class TableCaptionComponent {
     filtersForm = this.fb.group({});
     _selectedColumns;
     globalFilterFields;
+    FILTER_KEY;
+    COLUMN_KEY;
     ngOnChanges() {
+        this.FILTER_KEY = 'filters_' + this.tableConfiguration.key;
+        this.COLUMN_KEY = 'columns_' + this.tableConfiguration.key;
+        this;
         if (this.filters) {
             this.filters.forEach((filter) => {
                 this.filtersForm.addControl(filter.key, this.fb.control(null));
@@ -1705,15 +1710,32 @@ class TableCaptionComponent {
                 .filter((sc) => sc.columnType === tableColumnType.TEXT && sc.filter === undefined)
                 .map((sc) => sc.field);
         }
+        this.loadTableState(this.FILTER_KEY);
+        this.loadTableState(this.COLUMN_KEY);
         // this.selectedColumns = [...this.tableConfiguration.availableColumns];
     }
     emitSearch(query) {
         this.searchChange.emit(query);
     }
     applyFilters() {
-        console.log(this.filtersForm.value);
         this.applyFiltersEvent.emit(this.filtersForm.value);
         this.columnsPopover?.hide();
+        this.storeTableState(this.filtersForm.value, this.FILTER_KEY);
+    }
+    storeTableState(state, key) {
+        localStorage.setItem(key, JSON.stringify(state));
+    }
+    loadTableState(key) {
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            if (key === this.FILTER_KEY) {
+                this.applyFiltersEvent.emit(JSON.parse(stored));
+                this.filtersForm.patchValue(JSON.parse(stored));
+            }
+            if (key === this.COLUMN_KEY) {
+                this.selectedColumns = JSON.parse(stored);
+            }
+        }
     }
     hasFormValues() {
         const formValues = this.filtersForm.value;
@@ -1739,7 +1761,8 @@ class TableCaptionComponent {
     applyColumns() {
         const selectedColumnKeys = this._selectedColumns.map((col) => col.field);
         this.applyColumnsEvent.emit(selectedColumnKeys);
-        this.columnsPopover?.hide();
+        this.storeTableState(this.selectedColumns, this.COLUMN_KEY);
+        // this.columnsPopover?.hide();
     }
     resetColumns() {
         this._selectedColumns = [...this.columns];
@@ -1755,7 +1778,7 @@ class TableCaptionComponent {
         this.actionClick.emit({ action, selectedItems: this.selectedItems });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", selectedColumnsInput: "selectedColumnsInput", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n  <!-- Global Actions & Tabs -->\n  <div class=\"flex align-items-center gap-2\">\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n      [actions]=\"tableConfiguration.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    >\n    </phoenix-data-table-tabs>\n    <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n      <phoenix-phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      >\n      </phoenix-phoenix-data-table-action>\n    </ng-container>\n  </div>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filter, Columns, Search, More -->\n    @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n    <p-overlaybadge class=\"p-2\" severity=\"danger\">\n      <span\n        pRipple\n        class=\"cursor-pointer\"\n        (click)=\"filtersPopover.toggle($event)\"\n      >\n        <i class=\"pi pi-filter\"></i>\n      </span>\n    </p-overlaybadge>\n    } @else {\n    <span\n      pRipple\n      class=\"cursor-pointer p-2\"\n      (click)=\"filtersPopover.toggle($event)\"\n    >\n      <i class=\"pi pi-filter\"></i>\n    </span>\n    } } @if(tableConfiguration.hasColumns){\n\n    <span\n      pRipple\n      class=\"cursor-pointer p-2\"\n      (click)=\"columnsPopover.toggle($event)\"\n    >\n      <i class=\"pi pi-sliders-v\"></i>\n    </span>\n\n    }\n\n    <div class=\"flex\">\n      @if(tableConfiguration.hasSearch){\n      <p-iconfield>\n        <p-inputicon styleClass=\"pi pi-search\" />\n        <input\n          type=\"text\"\n          (input)=\"emitSearch($any($event.target).value)\"\n          pInputText\n          placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n        />\n      </p-iconfield>\n      } @if(tableConfiguration.hasMore){\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\n      />\n      }\n    </div>\n  </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n      <div>\n        <!-- <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyFilters()\"\n        /> -->\n\n        <p-button\n          icon=\"pi pi-refresh\n          \"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.CLEAR' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"filtersForm.reset()\"\n        />\n      </div>\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for(control of filters; track control.key ){ @switch(control.type) {\n      @case ('checkbox') {\n      <div class=\"mb-2\">\n        <p-checkbox\n          binary=\"true\"\n          type=\"checkbox\"\n          [formControlName]=\"control.key\"\n        />\n        <label class=\"ml-2\">{{ control.label }}</label>\n      </div>\n      } @case ('dropdown') {\n      <div class=\"mb-2\">\n        <label class=\"mb-2 block\">{{ control.label }}</label>\n        <p-select\n          class=\"w-full\"\n          [options]=\"control.options\"\n          optionLabel=\"label\"\n          [formControlName]=\"control.key\"\n          [showClear]=\"true\"\n        />\n      </div>\n      } @case ('multiselect') {\n      <div class=\"mb-2\">\n        <p-floatlabel variant=\"on\">\n          <p-multiselect\n            class=\"w-full\"\n            [options]=\"control.options\"\n            optionLabel=\"label\"\n            [formControlName]=\"control.key\"\n            [showClear]=\"true\"\n          />\n          <label for=\"username\">{{ control.label }}</label>\n        </p-floatlabel>\n        <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n      </div>\n      } @case ('person-dropdown'){\n      <label class=\"mb-2 block\">{{ control.label }}</label>\n      <p-multiselect\n        [options]=\"control.options\"\n        optionLabel=\"label\"\n        [formControlName]=\"control.key\"\n        class=\"w-full\"\n        [showClear]=\"true\"\n      >\n        <ng-template #selectedItem let-selectedOption>\n          <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n            <p-avatar\n              [label]=\"selectedOption.label.charAt(0).toUpperCase()\"\n              class=\"mr-1\"\n              [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n              shape=\"circle\"\n            ></p-avatar>\n            <div>{{ selectedOption.label }}</div>\n          </div>\n        </ng-template>\n        <ng-template let-person #item>\n          <div class=\"flex align-items-center gap-2\">\n            <p-avatar\n              [label]=\"person.label.charAt(0).toUpperCase()\"\n              class=\"mr-1\"\n              [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n              shape=\"circle\"\n            ></p-avatar>\n            <div>{{ person.label }}</div>\n          </div>\n        </ng-template>\n        <ng-template #dropdownicon>\n          <i class=\"pi pi-user\"></i>\n        </ng-template>\n        <!-- <ng-template #header>\n              <div class=\"font-medium p-3\">Available Countries</div>\n          </ng-template> -->\n        <!-- <ng-template #footer>\n              <div class=\"p-3\">\n                  <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n              </div>\n          </ng-template> -->\n      </p-multiselect>\n      } } }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyColumns()\"\n        />\n      </div>\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template let-item pTemplate=\"item\">\n        <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n        <i\n          *ngIf=\"!(item | isSelected : selectedColumns)\"\n          class=\"pi pi-eye-slash\"\n        ></i>\n        <span class=\"ml-2\"> {{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { 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: BadgeModule }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i14.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i15.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i16.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", selectedColumnsInput: "selectedColumnsInput", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n  <!-- Global Actions & Tabs -->\n  <div class=\"flex align-items-center gap-2\">\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n      [actions]=\"tableConfiguration.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    >\n    </phoenix-data-table-tabs>\n    <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n      <phoenix-phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      >\n      </phoenix-phoenix-data-table-action>\n    </ng-container>\n  </div>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filter, Columns, Search, More -->\n    @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n    <p-overlaybadge class=\"p-2\" severity=\"danger\">\n      <span\n        pRipple\n        class=\"cursor-pointer\"\n        (click)=\"filtersPopover.toggle($event)\"\n      >\n        <i class=\"pi pi-filter\"></i>\n      </span>\n    </p-overlaybadge>\n    } @else {\n    <span\n      pRipple\n      class=\"cursor-pointer p-2\"\n      (click)=\"filtersPopover.toggle($event)\"\n    >\n      <i class=\"pi pi-filter\"></i>\n    </span>\n    } } @if(tableConfiguration.hasColumns){ @if( columns.length !=\n    _selectedColumns.length ){\n    <p-overlaybadge class=\"p-2\" severity=\"danger\">\n      <span\n        pRipple\n        class=\"cursor-pointer\"\n        (click)=\"columnsPopover.toggle($event)\"\n      >\n        <i class=\"pi pi-sliders-v\"></i>\n      </span>\n    </p-overlaybadge>\n    } @else {\n    <span\n      pRipple\n      class=\"cursor-pointer p-2\"\n      (click)=\"columnsPopover.toggle($event)\"\n    >\n      <i class=\"pi pi-sliders-v\"></i>\n    </span>\n\n    } }\n\n    <div class=\"flex\">\n      @if(tableConfiguration.hasSearch){\n      <p-iconfield>\n        <p-inputicon styleClass=\"pi pi-search\" />\n        <input\n          type=\"text\"\n          (input)=\"emitSearch($any($event.target).value)\"\n          pInputText\n          placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n        />\n      </p-iconfield>\n      } @if(tableConfiguration.hasMore){\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\n      />\n      }\n    </div>\n  </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n      <div>\n        <!-- <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyFilters()\"\n        /> -->\n\n        <p-button\n          icon=\"pi pi-refresh\n          \"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.CLEAR' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"filtersForm.reset()\"\n        />\n      </div>\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for(control of filters; track control.key ){ @switch(control.type) {\n      @case ('checkbox') {\n      <div class=\"mb-2\">\n        <p-checkbox\n          binary=\"true\"\n          type=\"checkbox\"\n          [formControlName]=\"control.key\"\n        />\n        <label class=\"ml-2\">{{ control.label }}</label>\n      </div>\n      } @case ('dropdown') {\n      <div class=\"mb-2\">\n        <label class=\"mb-2 block\">{{ control.label }}</label>\n        <p-select\n          class=\"w-full\"\n          [options]=\"control.options\"\n          optionLabel=\"label\"\n          [formControlName]=\"control.key\"\n          [showClear]=\"true\"\n        />\n      </div>\n      } @case ('multiselect') {\n      <div class=\"mb-2\">\n        <p-floatlabel variant=\"on\">\n          <p-multiselect\n            class=\"w-full\"\n            [options]=\"control.options\"\n            optionLabel=\"label\"\n            [formControlName]=\"control.key\"\n            [showClear]=\"true\"\n          />\n          <label for=\"username\">{{ control.label }}</label>\n        </p-floatlabel>\n        <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n      </div>\n      } @case ('person-dropdown'){\n      <label class=\"mb-2 block\">{{ control.label }}</label>\n      <p-multiselect\n        [options]=\"control.options\"\n        optionLabel=\"label\"\n        [formControlName]=\"control.key\"\n        class=\"w-full\"\n        [showClear]=\"true\"\n      >\n        <ng-template #selectedItem let-selectedOption>\n          <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n            <p-avatar\n              [label]=\"selectedOption.label.charAt(0).toUpperCase()\"\n              class=\"mr-1\"\n              [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n              shape=\"circle\"\n            ></p-avatar>\n            <div>{{ selectedOption.label }}</div>\n          </div>\n        </ng-template>\n        <ng-template let-person #item>\n          <div class=\"flex align-items-center gap-2\">\n            <p-avatar\n              [label]=\"person.label.charAt(0).toUpperCase()\"\n              class=\"mr-1\"\n              [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n              shape=\"circle\"\n            ></p-avatar>\n            <div>{{ person.label }}</div>\n          </div>\n        </ng-template>\n        <ng-template #dropdownicon>\n          <i class=\"pi pi-user\"></i>\n        </ng-template>\n        <!-- <ng-template #header>\n              <div class=\"font-medium p-3\">Available Countries</div>\n          </ng-template> -->\n        <!-- <ng-template #footer>\n              <div class=\"p-3\">\n                  <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n              </div>\n          </ng-template> -->\n      </p-multiselect>\n      } } }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n      <div>\n        <!-- <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyColumns()\"\n        /> -->\n      </div>\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n      (onChange)=\"applyColumns()\"\n    >\n      <ng-template let-item pTemplate=\"item\">\n        <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n        <i\n          *ngIf=\"!(item | isSelected : selectedColumns)\"\n          class=\"pi pi-eye-slash\"\n        ></i>\n        <span class=\"ml-2\"> {{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { 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: BadgeModule }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i14.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i15.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i16.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableCaptionComponent, decorators: [{
             type: Component,
@@ -1780,7 +1803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         OverlayBadgeModule,
                         RippleModule,
                         FloatLabelModule,
-                    ], template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n  <!-- Global Actions & Tabs -->\n  <div class=\"flex align-items-center gap-2\">\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n      [actions]=\"tableConfiguration.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    >\n    </phoenix-data-table-tabs>\n    <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n      <phoenix-phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      >\n      </phoenix-phoenix-data-table-action>\n    </ng-container>\n  </div>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filter, Columns, Search, More -->\n    @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n    <p-overlaybadge class=\"p-2\" severity=\"danger\">\n      <span\n        pRipple\n        class=\"cursor-pointer\"\n        (click)=\"filtersPopover.toggle($event)\"\n      >\n        <i class=\"pi pi-filter\"></i>\n      </span>\n    </p-overlaybadge>\n    } @else {\n    <span\n      pRipple\n      class=\"cursor-pointer p-2\"\n      (click)=\"filtersPopover.toggle($event)\"\n    >\n      <i class=\"pi pi-filter\"></i>\n    </span>\n    } } @if(tableConfiguration.hasColumns){\n\n    <span\n      pRipple\n      class=\"cursor-pointer p-2\"\n      (click)=\"columnsPopover.toggle($event)\"\n    >\n      <i class=\"pi pi-sliders-v\"></i>\n    </span>\n\n    }\n\n    <div class=\"flex\">\n      @if(tableConfiguration.hasSearch){\n      <p-iconfield>\n        <p-inputicon styleClass=\"pi pi-search\" />\n        <input\n          type=\"text\"\n          (input)=\"emitSearch($any($event.target).value)\"\n          pInputText\n          placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n        />\n      </p-iconfield>\n      } @if(tableConfiguration.hasMore){\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\n      />\n      }\n    </div>\n  </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n      <div>\n        <!-- <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyFilters()\"\n        /> -->\n\n        <p-button\n          icon=\"pi pi-refresh\n          \"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.CLEAR' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"filtersForm.reset()\"\n        />\n      </div>\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for(control of filters; track control.key ){ @switch(control.type) {\n      @case ('checkbox') {\n      <div class=\"mb-2\">\n        <p-checkbox\n          binary=\"true\"\n          type=\"checkbox\"\n          [formControlName]=\"control.key\"\n        />\n        <label class=\"ml-2\">{{ control.label }}</label>\n      </div>\n      } @case ('dropdown') {\n      <div class=\"mb-2\">\n        <label class=\"mb-2 block\">{{ control.label }}</label>\n        <p-select\n          class=\"w-full\"\n          [options]=\"control.options\"\n          optionLabel=\"label\"\n          [formControlName]=\"control.key\"\n          [showClear]=\"true\"\n        />\n      </div>\n      } @case ('multiselect') {\n      <div class=\"mb-2\">\n        <p-floatlabel variant=\"on\">\n          <p-multiselect\n            class=\"w-full\"\n            [options]=\"control.options\"\n            optionLabel=\"label\"\n            [formControlName]=\"control.key\"\n            [showClear]=\"true\"\n          />\n          <label for=\"username\">{{ control.label }}</label>\n        </p-floatlabel>\n        <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n      </div>\n      } @case ('person-dropdown'){\n      <label class=\"mb-2 block\">{{ control.label }}</label>\n      <p-multiselect\n        [options]=\"control.options\"\n        optionLabel=\"label\"\n        [formControlName]=\"control.key\"\n        class=\"w-full\"\n        [showClear]=\"true\"\n      >\n        <ng-template #selectedItem let-selectedOption>\n          <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n            <p-avatar\n              [label]=\"selectedOption.label.charAt(0).toUpperCase()\"\n              class=\"mr-1\"\n              [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n              shape=\"circle\"\n            ></p-avatar>\n            <div>{{ selectedOption.label }}</div>\n          </div>\n        </ng-template>\n        <ng-template let-person #item>\n          <div class=\"flex align-items-center gap-2\">\n            <p-avatar\n              [label]=\"person.label.charAt(0).toUpperCase()\"\n              class=\"mr-1\"\n              [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n              shape=\"circle\"\n            ></p-avatar>\n            <div>{{ person.label }}</div>\n          </div>\n        </ng-template>\n        <ng-template #dropdownicon>\n          <i class=\"pi pi-user\"></i>\n        </ng-template>\n        <!-- <ng-template #header>\n              <div class=\"font-medium p-3\">Available Countries</div>\n          </ng-template> -->\n        <!-- <ng-template #footer>\n              <div class=\"p-3\">\n                  <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n              </div>\n          </ng-template> -->\n      </p-multiselect>\n      } } }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyColumns()\"\n        />\n      </div>\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template let-item pTemplate=\"item\">\n        <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n        <i\n          *ngIf=\"!(item | isSelected : selectedColumns)\"\n          class=\"pi pi-eye-slash\"\n        ></i>\n        <span class=\"ml-2\"> {{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>\n" }]
+                    ], template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n  <!-- Global Actions & Tabs -->\n  <div class=\"flex align-items-center gap-2\">\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n      [actions]=\"tableConfiguration.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    >\n    </phoenix-data-table-tabs>\n    <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n      <phoenix-phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      >\n      </phoenix-phoenix-data-table-action>\n    </ng-container>\n  </div>\n\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filter, Columns, Search, More -->\n    @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n    <p-overlaybadge class=\"p-2\" severity=\"danger\">\n      <span\n        pRipple\n        class=\"cursor-pointer\"\n        (click)=\"filtersPopover.toggle($event)\"\n      >\n        <i class=\"pi pi-filter\"></i>\n      </span>\n    </p-overlaybadge>\n    } @else {\n    <span\n      pRipple\n      class=\"cursor-pointer p-2\"\n      (click)=\"filtersPopover.toggle($event)\"\n    >\n      <i class=\"pi pi-filter\"></i>\n    </span>\n    } } @if(tableConfiguration.hasColumns){ @if( columns.length !=\n    _selectedColumns.length ){\n    <p-overlaybadge class=\"p-2\" severity=\"danger\">\n      <span\n        pRipple\n        class=\"cursor-pointer\"\n        (click)=\"columnsPopover.toggle($event)\"\n      >\n        <i class=\"pi pi-sliders-v\"></i>\n      </span>\n    </p-overlaybadge>\n    } @else {\n    <span\n      pRipple\n      class=\"cursor-pointer p-2\"\n      (click)=\"columnsPopover.toggle($event)\"\n    >\n      <i class=\"pi pi-sliders-v\"></i>\n    </span>\n\n    } }\n\n    <div class=\"flex\">\n      @if(tableConfiguration.hasSearch){\n      <p-iconfield>\n        <p-inputicon styleClass=\"pi pi-search\" />\n        <input\n          type=\"text\"\n          (input)=\"emitSearch($any($event.target).value)\"\n          pInputText\n          placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n        />\n      </p-iconfield>\n      } @if(tableConfiguration.hasMore){\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\n      />\n      }\n    </div>\n  </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n      <div>\n        <!-- <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyFilters()\"\n        /> -->\n\n        <p-button\n          icon=\"pi pi-refresh\n          \"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.CLEAR' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"filtersForm.reset()\"\n        />\n      </div>\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for(control of filters; track control.key ){ @switch(control.type) {\n      @case ('checkbox') {\n      <div class=\"mb-2\">\n        <p-checkbox\n          binary=\"true\"\n          type=\"checkbox\"\n          [formControlName]=\"control.key\"\n        />\n        <label class=\"ml-2\">{{ control.label }}</label>\n      </div>\n      } @case ('dropdown') {\n      <div class=\"mb-2\">\n        <label class=\"mb-2 block\">{{ control.label }}</label>\n        <p-select\n          class=\"w-full\"\n          [options]=\"control.options\"\n          optionLabel=\"label\"\n          [formControlName]=\"control.key\"\n          [showClear]=\"true\"\n        />\n      </div>\n      } @case ('multiselect') {\n      <div class=\"mb-2\">\n        <p-floatlabel variant=\"on\">\n          <p-multiselect\n            class=\"w-full\"\n            [options]=\"control.options\"\n            optionLabel=\"label\"\n            [formControlName]=\"control.key\"\n            [showClear]=\"true\"\n          />\n          <label for=\"username\">{{ control.label }}</label>\n        </p-floatlabel>\n        <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n      </div>\n      } @case ('person-dropdown'){\n      <label class=\"mb-2 block\">{{ control.label }}</label>\n      <p-multiselect\n        [options]=\"control.options\"\n        optionLabel=\"label\"\n        [formControlName]=\"control.key\"\n        class=\"w-full\"\n        [showClear]=\"true\"\n      >\n        <ng-template #selectedItem let-selectedOption>\n          <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n            <p-avatar\n              [label]=\"selectedOption.label.charAt(0).toUpperCase()\"\n              class=\"mr-1\"\n              [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n              shape=\"circle\"\n            ></p-avatar>\n            <div>{{ selectedOption.label }}</div>\n          </div>\n        </ng-template>\n        <ng-template let-person #item>\n          <div class=\"flex align-items-center gap-2\">\n            <p-avatar\n              [label]=\"person.label.charAt(0).toUpperCase()\"\n              class=\"mr-1\"\n              [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n              shape=\"circle\"\n            ></p-avatar>\n            <div>{{ person.label }}</div>\n          </div>\n        </ng-template>\n        <ng-template #dropdownicon>\n          <i class=\"pi pi-user\"></i>\n        </ng-template>\n        <!-- <ng-template #header>\n              <div class=\"font-medium p-3\">Available Countries</div>\n          </ng-template> -->\n        <!-- <ng-template #footer>\n              <div class=\"p-3\">\n                  <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n              </div>\n          </ng-template> -->\n      </p-multiselect>\n      } } }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n      <div>\n        <!-- <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'ACTION.SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyColumns()\"\n        /> -->\n      </div>\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [(ngModel)]=\"selectedColumns\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n      (onChange)=\"applyColumns()\"\n    >\n      <ng-template let-item pTemplate=\"item\">\n        <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n        <i\n          *ngIf=\"!(item | isSelected : selectedColumns)\"\n          class=\"pi pi-eye-slash\"\n        ></i>\n        <span class=\"ml-2\"> {{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>\n" }]
         }], propDecorators: { columnsPopover: [{
                 type: ViewChild,
                 args: ['columnsPopover']
@@ -1839,6 +1862,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1$1.DatePipe }] });
 
+class InitialsPipe {
+    transform(name) {
+        return (name
+            ?.split(' ')
+            .map((word) => word.charAt(0).toUpperCase())
+            .join('') || '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InitialsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: InitialsPipe, isStandalone: true, name: "initials" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InitialsPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'initials' }]
+        }] });
+
 class TableComponent {
     // This setter initializes the dataset and triggers the initial lazy load.
     set data(value) {
@@ -1870,7 +1908,6 @@ class TableComponent {
     dateFormat;
     currentFilters = {};
     ngOnChanges(changes) {
-        console.log(this.originalData);
         if (this.columns.length > 0) {
             this.selectedColumns = [
                 ...(this.selectedColumnsInput.length
@@ -2057,7 +2094,7 @@ class TableComponent {
         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" }, 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      [selectedColumnsInput]=\"selectedColumns\"\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>{{ 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                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\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                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\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]?.name.charAt(0)\"\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 *ngIf=\"rowData[col.field].length; else emptyCell\">\n                @if(rowData[col.field].length > 1){\n                <div class=\"cursor-pointer\" (click)=\"op.toggle($event)\">\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 *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$3.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", "selectedColumnsInput", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.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$2.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.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$1.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"] }] });
+    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" }, 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      [selectedColumnsInput]=\"selectedColumns\"\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>{{ 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                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\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                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\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]?.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 *ngIf=\"rowData[col.field].length; else emptyCell\">\n                @if(rowData[col.field].length > 1){\n                <div class=\"cursor-pointer\" (click)=\"op.toggle($event)\">\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 *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$3.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", "selectedColumnsInput", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.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$2.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.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$1.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2075,7 +2112,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         PanelModule,
                         OverlayPanelModule,
                         ChipModule,
-                    ], 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      [selectedColumnsInput]=\"selectedColumns\"\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>{{ 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                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\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                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\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]?.name.charAt(0)\"\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 *ngIf=\"rowData[col.field].length; else emptyCell\">\n                @if(rowData[col.field].length > 1){\n                <div class=\"cursor-pointer\" (click)=\"op.toggle($event)\">\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 *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"] }]
+                        InitialsPipe,
+                    ], 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      [selectedColumnsInput]=\"selectedColumns\"\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>{{ 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                  [style]=\"{\n                    'background-color': rowData[col.field + 'Color'] || '#ccc',\n                    'font-size': '0.9rem!important'\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                  [style]=\"{\n                    'background-color': rowData[col.field].color || '#ccc',\n                    'font-size': '0.9rem!important'\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]?.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 *ngIf=\"rowData[col.field].length; else emptyCell\">\n                @if(rowData[col.field].length > 1){\n                <div class=\"cursor-pointer\" (click)=\"op.toggle($event)\">\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 *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: [{