@fuentis/phoenix-ui 0.0.9-alpha.142 → 0.0.9-alpha.144

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -1446,7 +1446,7 @@ class TableCaptionComponent {
         this.actionClick.emit({ action, selectedItems: this.selectedItems });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", selectedColumnsInput: "selectedColumnsInput" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: 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    <p-button\n      icon=\"pi pi-filter\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"filtersPopover.toggle($event)\"\n    />\n\n    <p-button\n      icon=\"pi pi-sliders-v\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"columnsPopover.toggle($event)\"\n    />\n    <div class=\"flex\">\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\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\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\">{{ \"FILTERS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyFilters()\"\n        />\n\n        <p-button\n          icon=\"pi pi-times\"\n          [text]=\"true\"\n          label=\"{{ 'CLEAR' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"filtersForm.reset()\"\n        />\n      </div>\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for(control of tableConfiguration.filterConfiguration; track control.key\n      ){ @switch(control.type) { @case ('checkbox') {\n      <div class=\"mb-4\">\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-4\">\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      } } }\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\">{{ \"COLUMS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ '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.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { 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$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", selectedColumnsInput: "selectedColumnsInput" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: 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    <p-button\n      icon=\"pi pi-filter\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"filtersPopover.toggle($event)\"\n    />\n\n    <p-button\n      icon=\"pi pi-sliders-v\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"columnsPopover.toggle($event)\"\n    />\n    <div class=\"flex\">\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\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\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-times\"\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 tableConfiguration.filterConfiguration; track control.key\n      ){ @switch(control.type) { @case ('checkbox') {\n      <div class=\"mb-4\">\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-4\">\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      } } }\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.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i14.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i13.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { 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$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TableCaptionComponent, decorators: [{
             type: Component,
@@ -1466,7 +1466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         ListboxModule,
                         TranslateModule,
                         IsSelectedPipe
-                    ], 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    <p-button\n      icon=\"pi pi-filter\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"filtersPopover.toggle($event)\"\n    />\n\n    <p-button\n      icon=\"pi pi-sliders-v\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"columnsPopover.toggle($event)\"\n    />\n    <div class=\"flex\">\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\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\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\">{{ \"FILTERS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ 'SAVE' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"applyFilters()\"\n        />\n\n        <p-button\n          icon=\"pi pi-times\"\n          [text]=\"true\"\n          label=\"{{ 'CLEAR' | translate }}\"\n          class=\"mr-2\"\n          (click)=\"filtersForm.reset()\"\n        />\n      </div>\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for(control of tableConfiguration.filterConfiguration; track control.key\n      ){ @switch(control.type) { @case ('checkbox') {\n      <div class=\"mb-4\">\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-4\">\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      } } }\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\">{{ \"COLUMS\" | translate }}</div>\n      <div>\n        <p-button\n          icon=\"pi pi-save\"\n          [text]=\"true\"\n          label=\"{{ '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    <p-button\n      icon=\"pi pi-filter\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"filtersPopover.toggle($event)\"\n    />\n\n    <p-button\n      icon=\"pi pi-sliders-v\"\n      [rounded]=\"true\"\n      [text]=\"true\"\n      class=\"mr-2\"\n      (onClick)=\"columnsPopover.toggle($event)\"\n    />\n    <div class=\"flex\">\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\n      <p-button\n        icon=\"pi pi-ellipsis-v\"\n        [rounded]=\"true\"\n        [text]=\"true\"\n        class=\"mr-2\"\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-times\"\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 tableConfiguration.filterConfiguration; track control.key\n      ){ @switch(control.type) { @case ('checkbox') {\n      <div class=\"mb-4\">\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-4\">\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      } } }\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" }]
         }], propDecorators: { columnsPopover: [{
                 type: ViewChild,
                 args: ['columnsPopover']