@fuentis/phoenix-ui 0.0.9-alpha.585 → 0.0.9-alpha.587

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -2040,10 +2040,14 @@ class TableCaptionComponent {
         const fg = this.fb.group({});
         for (const f of filtersCfg) {
             const t = f.type ?? 'text';
-            // We DO NOT store null for multiselect (we store []),
-            // because null is the common cause of "everything selected" / broken filtering.
+            /**
+             * Important:
+             * - For boolean-multiselect we keep SELECTED VALUES AS OPTION OBJECTS
+             *   (PrimeNG is much more stable with object model here than with boolean primitives),
+             *   but outgoing payload will still be boolean[].
+             */
             const initialValue = t === 'boolean-multiselect'
-                ? this.normalizeBooleanMultiInitial(f.selected)
+                ? this.normalizeBooleanMultiSelection(f.selected, f)
                 : t === 'multiselect'
                     ? this.normalizeMultiInitial(f.selected)
                     : t === 'checkbox'
@@ -2100,28 +2104,66 @@ class TableCaptionComponent {
             return [];
         return Array.isArray(selected) ? selected : [selected];
     }
-    normalizeBooleanMultiInitial(selected) {
-        if (selected == null)
-            return [];
-        const arr = Array.isArray(selected) ? selected : [selected];
-        return arr
+    // ---------------------------------------------------------------------------
+    // boolean-multiselect helpers (UI value = option objects, output = boolean[])
+    // ---------------------------------------------------------------------------
+    coerceBool(x) {
+        if (typeof x === 'boolean')
+            return x;
+        if (typeof x === 'string') {
+            if (x === 'true')
+                return true;
+            if (x === 'false')
+                return false;
+        }
+        return null;
+    }
+    /**
+     * Returns array of OPTION OBJECTS that match selected booleans.
+     * Accepts selected coming as:
+     * - boolean | boolean[]
+     * - 'true'/'false' | string[]
+     * - option object(s) (already from UI)
+     */
+    normalizeBooleanMultiSelection(value, cfg) {
+        const options = Array.isArray(cfg.options) ? cfg.options : [];
+        // If UI already provides objects, keep them (PrimeNG uses them to render labels/checks)
+        if (Array.isArray(value) && value.length && typeof value[0] === 'object') {
+            return value;
+        }
+        const arr = Array.isArray(value) ? value : value == null ? [] : [value];
+        const bools = arr
+            .map((v) => this.coerceBool(v))
+            .filter((v) => v !== null);
+        const ov = cfg.optionValue ?? 'key';
+        return bools
+            .map((b) => options.find((o) => this.coerceBool(o?.[ov]) === b))
+            .filter(Boolean);
+    }
+    extractBooleanArrayFromUiValue(value, cfg) {
+        const ov = cfg.optionValue ?? 'key';
+        const arr = Array.isArray(value) ? value : value == null ? [] : [value];
+        const bools = arr
             .map((x) => {
-            if (typeof x === 'boolean')
-                return x;
-            if (typeof x === 'string')
-                return x === 'true';
+            // UI sends option objects (preferred)
             if (x && typeof x === 'object')
-                return x.key === true || x.key === 'true';
-            return null;
+                return this.coerceBool(x?.[ov]);
+            // fallback if primitives ever come through
+            return this.coerceBool(x);
         })
-            .filter((x) => typeof x === 'boolean');
+            .filter((x) => x !== null);
+        return bools;
     }
+    // ---------------------------------------------------------------------------
+    // Payload normalization
+    // ---------------------------------------------------------------------------
     /**
      * Emit only meaningful values:
      * - text: '' removed
      * - dropdown: '' / null removed
      * - multiselect: [] removed
-     * - checkbox: always included only if true (optional: keep false too if you prefer)
+     * - boolean-multiselect: boolean[] removed if empty (UI stores option objects)
+     * - checkbox: included only if true
      */
     normalizeOutgoingPayload(raw, cfg) {
         const out = {};
@@ -2133,20 +2175,20 @@ class TableCaptionComponent {
             const t = f.type ?? 'text';
             const v = raw[key];
             if (t === 'boolean-multiselect') {
-                const arr = this.normalizeBooleanMultiInitial(v);
-                if (arr.length)
-                    out[key] = arr; // boolean[]
+                const bools = this.extractBooleanArrayFromUiValue(v, f);
+                if (bools.length)
+                    out[key] = bools;
                 continue;
             }
             if (t === 'multiselect') {
                 const arr = Array.isArray(v) ? v.filter((x) => x != null && x !== '') : [];
                 if (arr.length)
-                    out[key] = arr; // keep array of optionValue(s)
+                    out[key] = arr;
                 continue;
             }
             if (t === 'checkbox') {
                 if (!!v)
-                    out[key] = true; // keep only true (fast + clean)
+                    out[key] = true;
                 continue;
             }
             // dropdown or text:
@@ -2158,6 +2200,10 @@ class TableCaptionComponent {
     /**
      * Restore persisted filters from localStorage.
      * We patchValue with emitEvent:false to avoid double emission.
+     *
+     * NOTE:
+     * - boolean-multiselect is restored into OPTION OBJECTS (for UI),
+     *   even though persisted payload is boolean[].
      */
     restoreFilterState(cfg) {
         const stored = localStorage.getItem(this.FILTER_KEY);
@@ -2167,18 +2213,17 @@ class TableCaptionComponent {
             const parsed = JSON.parse(stored);
             if (!parsed || typeof parsed !== 'object')
                 return;
-            // allow only known keys
             const known = new Set(cfg.map((f) => f.key));
             const patch = {};
             for (const k of Object.keys(parsed)) {
                 if (known.has(k))
                     patch[k] = parsed[k];
             }
-            // ensure multiselect never becomes null
             for (const f of cfg) {
                 const t = f.type ?? 'text';
                 if (t === 'boolean-multiselect') {
-                    patch[f.key] = this.normalizeBooleanMultiInitial(patch[f.key]);
+                    // parsed payload is boolean[]; map -> option objects
+                    patch[f.key] = this.normalizeBooleanMultiSelection(patch[f.key], f);
                     continue;
                 }
                 if (t === 'multiselect') {
@@ -2203,7 +2248,6 @@ class TableCaptionComponent {
     // ---------------------------------------------------------------------------
     // Columns
     // ---------------------------------------------------------------------------
-    /** Called from listbox selection */
     onColumnSelectionChange(newSelection) {
         this.selectedColumns = newSelection;
         this.applyColumns();
@@ -2263,10 +2307,6 @@ class TableCaptionComponent {
     // ---------------------------------------------------------------------------
     // Utilities
     // ---------------------------------------------------------------------------
-    /**
-     * Used by badge indicator to show "filters active".
-     * It checks raw form value, not normalized payload.
-     */
     hasFormValues() {
         const v = this.filtersForm?.value ?? {};
         return Object.values(v).some((x) => {
@@ -2280,11 +2320,9 @@ class TableCaptionComponent {
         });
     }
     clearSelectFilter(key) {
-        // Important: multiselect must be [] not null (prevents "selects everything" bugs)
         this.filtersForm.get(key)?.setValue([], { emitEvent: true });
     }
     resetFilters() {
-        // Reset form -> then also clear persisted state
         this.filtersForm.reset({}, { emitEvent: true });
         localStorage.removeItem(this.FILTER_KEY);
         this.filtersPopover?.hide();
@@ -2298,8 +2336,19 @@ class TableCaptionComponent {
         else
             localStorage.setItem(key, JSON.stringify(state));
     }
+    getOptionLabelField(control) {
+        return (control?.optionLabel ?? 'label');
+    }
+    getSelectedLabels(value, control) {
+        const arr = Array.isArray(value) ? value : [];
+        const labelField = this.getOptionLabelField(control);
+        return arr
+            .map((x) => (x && typeof x === 'object' ? x[labelField] : String(x ?? '')))
+            .filter((s) => !!s)
+            .join(', ');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", selectedItems: "selectedItems", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "filtersPopover", first: true, predicate: ["filtersPopover"], descendants: true }, { 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  <!-- Left: Tabs + Global actions -->\n  <div class=\"flex align-items-center gap-2\">\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + (tableConfiguration?.tabs?.key ?? 'tabs')\"\n      [actions]=\"tableConfiguration?.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    />\n\n    @for (action of (tableConfiguration?.globalActions ?? []); track action?.key ?? $index) {\n      <phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      />\n    }\n  </div>\n\n  <!-- Right: caption filters + icons + search + more -->\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filters in caption row -->\n    @for (control of (filters ?? []); track control.key) {\n      @if (control.isInCaption) {\n        @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n          @case ('dropdown') {\n            <p-select\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [optionValue]=\"control.optionValue ?? 'key'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n            />\n          }\n          @case ('multiselect') {\n            <p-multiselect\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [optionValue]=\"control.optionValue ?? 'key'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"clearSelectFilter(control.key)\"\n            />\n          }\n          @case ('checkbox') {\n            <p-checkbox\n              binary=\"true\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n            />\n          }\n          @default {\n            <!-- text -->\n            <input\n              class=\"w-12rem\"\n              pInputText\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              placeholder=\"{{ control.label | translate }}\"\n            />\n          }\n        }\n      }\n    }\n\n    <!-- Filter icon -->\n    @if (tableConfiguration?.hasFilter) {\n      @if (hasFormValues()) {\n        <p-overlaybadge class=\"p-2\" severity=\"danger\">\n          <span pRipple class=\"cursor-pointer\" (click)=\"filtersPopover?.toggle($event)\">\n            <i class=\"pi pi-filter\"></i>\n          </span>\n        </p-overlaybadge>\n      } @else {\n        <span pRipple class=\"cursor-pointer p-2\" (click)=\"filtersPopover?.toggle($event)\">\n          <i class=\"pi pi-filter\"></i>\n        </span>\n      }\n    }\n\n    <!-- Columns icon -->\n    @if (tableConfiguration?.hasColumns) {\n      @if (columnsChanged) {\n        <p-overlaybadge class=\"p-2\" severity=\"danger\">\n          <span pRipple class=\"cursor-pointer\" (click)=\"columnsPopover?.toggle($event)\">\n            <i class=\"pi pi-sliders-v\"></i>\n          </span>\n        </p-overlaybadge>\n      } @else {\n        <span pRipple class=\"cursor-pointer p-2\" (click)=\"columnsPopover?.toggle($event)\">\n          <i class=\"pi pi-sliders-v\"></i>\n        </span>\n      }\n    }\n\n    <!-- Search + More -->\n    <div class=\"flex\">\n      @if (tableConfiguration?.hasSearch) {\n        <p-iconfield>\n          <p-inputicon styleClass=\"pi pi-search\" />\n          <input\n            type=\"text\"\n            pInputText\n            (input)=\"emitSearch($any($event.target).value)\"\n            placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n          />\n        </p-iconfield>\n      }\n\n      @if (tableConfiguration?.hasMore && tableConfiguration?.moreActions) {\n        <phoenix-data-table-action\n          [actionConfig]=\"tableConfiguration.moreActions\"\n          (actionClick)=\"actionClick.emit($event)\"\n        />\n      }\n    </div>\n  </div>\n</div>\n\n<!-- Filters Popover -->\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      <p-button\n        icon=\"pi pi-refresh\"\n        [text]=\"true\"\n        label=\"{{ 'ACTION.CLEAR' | translate }}\"\n        class=\"mr-2\"\n        (click)=\"resetFilters()\"\n      />\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for (control of (filters ?? []); track control.key) {\n        @if (!control.isInCaption) {\n          @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n            @case ('checkbox') {\n              <div class=\"mb-2\">\n                <p-checkbox binary=\"true\" [formControlName]=\"control.key\" />\n                <label class=\"ml-2\">{{ control.label | translate }}</label>\n              </div>\n            }\n            @case ('dropdown') {\n              <div class=\"mb-2\">\n                <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n                <p-select\n                  class=\"w-full\"\n                  [options]=\"control.options ?? []\"\n                  [optionLabel]=\"control.optionLabel ?? 'label'\"\n                  [optionValue]=\"control.optionValue ?? 'key'\"\n                  [showClear]=\"true\"\n                  [formControlName]=\"control.key\"\n                  (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n                />\n              </div>\n            }\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]=\"control.optionLabel ?? 'label'\"\n                    [optionValue]=\"control.optionValue ?? 'key'\"\n                    [showClear]=\"true\"\n                    [formControlName]=\"control.key\"\n                    (onClear)=\"clearSelectFilter(control.key)\"\n                  />\n                  <label>{{ control.label | translate }}</label>\n                </p-floatlabel>\n              </div>\n            }\n            @default {\n              <div class=\"mb-2\">\n                <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n                <input\n                  class=\"w-full\"\n                  pInputText\n                  [formControlName]=\"control.key\"\n                  placeholder=\"{{ control.label | translate }}\"\n                />\n              </div>\n            }\n          }\n        }\n      }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Columns Popover -->\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      <p-button\n        icon=\"pi pi-eye\"\n        [text]=\"true\"\n        label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n        class=\"mr-2\"\n        (click)=\"resetColumns()\"\n      />\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [ngModel]=\"_selectedColumns\"\n      (ngModelChange)=\"onColumnSelectionChange($event)\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template pTemplate=\"item\" let-item>\n        @if (item | isSelected : selectedColumns) {\n          <i class=\"pi pi-eye\"></i>\n        } @else {\n          <i class=\"pi pi-eye-slash\"></i>\n        }\n        <span class=\"ml-2\">{{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "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", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$4.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i10.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "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", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i12.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i13.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i14.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", selectedItems: "selectedItems", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "filtersPopover", first: true, predicate: ["filtersPopover"], descendants: true }, { 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  <!-- Left: Tabs + Global actions -->\n  <div class=\"flex align-items-center gap-2\">\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + (tableConfiguration?.tabs?.key ?? 'tabs')\"\n      [actions]=\"tableConfiguration?.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    />\n\n    @for (action of (tableConfiguration?.globalActions ?? []); track action?.key ?? $index) {\n      <phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      />\n    }\n  </div>\n\n  <!-- Right: caption filters + icons + search + more -->\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filters in caption row -->\n    @for (control of (filters ?? []); track control.key) {\n      @if (control.isInCaption) {\n        @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n          @case ('dropdown') {\n            <p-select\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [optionValue]=\"control.optionValue ?? 'key'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n            />\n          }\n\n          @case ('multiselect') {\n            <p-multiselect\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [optionValue]=\"control.optionValue ?? 'key'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"clearSelectFilter(control.key)\"\n            />\n          }\n\n          @case ('boolean-multiselect') {\n            <p-multiselect\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"clearSelectFilter(control.key)\"\n            >\n              <ng-template pTemplate=\"selectedItems\" let-value>\n                @if ((value?.length ?? 0) === 0) {\n                  <span class=\"p-2 text-500\">{{ control.label | translate }}</span>\n                } @else {\n                  <span class=\"p-2\">{{ getSelectedLabels(value, control) }}</span>\n                }\n              </ng-template>\n\n              <ng-template pTemplate=\"item\" let-item>\n                <span>{{ item?.[control.optionLabel ?? 'label'] }}</span>\n              </ng-template>\n            </p-multiselect>\n          }\n\n          @case ('checkbox') {\n            <p-checkbox binary=\"true\" [formControl]=\"$any(filtersForm.get(control.key))\" />\n          }\n\n          @default {\n            <input\n              class=\"w-12rem\"\n              pInputText\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              placeholder=\"{{ control.label | translate }}\"\n            />\n          }\n        }\n      }\n    }\n\n    <!-- Filter icon -->\n    @if (tableConfiguration?.hasFilter) {\n      @if (hasFormValues()) {\n        <p-overlaybadge class=\"p-2\" severity=\"danger\">\n          <span pRipple class=\"cursor-pointer\" (click)=\"filtersPopover?.toggle($event)\">\n            <i class=\"pi pi-filter\"></i>\n          </span>\n        </p-overlaybadge>\n      } @else {\n        <span pRipple class=\"cursor-pointer p-2\" (click)=\"filtersPopover?.toggle($event)\">\n          <i class=\"pi pi-filter\"></i>\n        </span>\n      }\n    }\n\n    <!-- Columns icon -->\n    @if (tableConfiguration?.hasColumns) {\n      @if (columnsChanged) {\n        <p-overlaybadge class=\"p-2\" severity=\"danger\">\n          <span pRipple class=\"cursor-pointer\" (click)=\"columnsPopover?.toggle($event)\">\n            <i class=\"pi pi-sliders-v\"></i>\n          </span>\n        </p-overlaybadge>\n      } @else {\n        <span pRipple class=\"cursor-pointer p-2\" (click)=\"columnsPopover?.toggle($event)\">\n          <i class=\"pi pi-sliders-v\"></i>\n        </span>\n      }\n    }\n\n    <!-- Search + More -->\n    <div class=\"flex\">\n      @if (tableConfiguration?.hasSearch) {\n        <p-iconfield>\n          <p-inputicon styleClass=\"pi pi-search\" />\n          <input\n            type=\"text\"\n            pInputText\n            (input)=\"emitSearch($any($event.target).value)\"\n            placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n          />\n        </p-iconfield>\n      }\n\n      @if (tableConfiguration?.hasMore && tableConfiguration?.moreActions) {\n        <phoenix-data-table-action\n          [actionConfig]=\"tableConfiguration.moreActions\"\n          (actionClick)=\"actionClick.emit($event)\"\n        />\n      }\n    </div>\n  </div>\n</div>\n\n<!-- Filters Popover -->\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      <p-button\n        icon=\"pi pi-refresh\"\n        [text]=\"true\"\n        label=\"{{ 'ACTION.CLEAR' | translate }}\"\n        class=\"mr-2\"\n        (click)=\"resetFilters()\"\n      />\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for (control of (filters ?? []); track control.key) {\n        @if (!control.isInCaption) {\n          @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n            @case ('checkbox') {\n              <div class=\"mb-2\">\n                <p-checkbox binary=\"true\" [formControlName]=\"control.key\" />\n                <label class=\"ml-2\">{{ control.label | translate }}</label>\n              </div>\n            }\n\n            @case ('dropdown') {\n              <div class=\"mb-2\">\n                <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n                <p-select\n                  class=\"w-full\"\n                  [options]=\"control.options ?? []\"\n                  [optionLabel]=\"control.optionLabel ?? 'label'\"\n                  [optionValue]=\"control.optionValue ?? 'key'\"\n                  [showClear]=\"true\"\n                  [formControlName]=\"control.key\"\n                  (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n                />\n              </div>\n            }\n\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]=\"control.optionLabel ?? 'label'\"\n                    [optionValue]=\"control.optionValue ?? 'key'\"\n                    [showClear]=\"true\"\n                    [formControlName]=\"control.key\"\n                    (onClear)=\"clearSelectFilter(control.key)\"\n                  />\n                  <label>{{ control.label | translate }}</label>\n                </p-floatlabel>\n              </div>\n            }\n\n            @case ('boolean-multiselect') {\n              <div class=\"mb-2\">\n                <p-floatlabel variant=\"on\">\n                  <p-multiselect\n                    class=\"w-full\"\n                    [options]=\"control.options ?? []\"\n                    [optionLabel]=\"control.optionLabel ?? 'label'\"\n                    [showClear]=\"true\"\n                    [formControlName]=\"control.key\"\n                    (onClear)=\"clearSelectFilter(control.key)\"\n                  >\n                    <ng-template pTemplate=\"selectedItems\" let-value>\n                      @if ((value?.length ?? 0) === 0) {\n                        <span class=\"p-2 text-500\">{{ control.label | translate }}</span>\n                      } @else {\n                        <span class=\"p-2\">{{ getSelectedLabels(value, control) }}</span>\n                      }\n                    </ng-template>\n\n                    <ng-template pTemplate=\"item\" let-item>\n                      <span>{{ item?.[control.optionLabel ?? 'label'] }}</span>\n                    </ng-template>\n                  </p-multiselect>\n                  <label>{{ control.label | translate }}</label>\n                </p-floatlabel>\n              </div>\n            }\n\n            @default {\n              <div class=\"mb-2\">\n                <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n                <input\n                  class=\"w-full\"\n                  pInputText\n                  [formControlName]=\"control.key\"\n                  placeholder=\"{{ control.label | translate }}\"\n                />\n              </div>\n            }\n          }\n        }\n      }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Columns Popover -->\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      <p-button\n        icon=\"pi pi-eye\"\n        [text]=\"true\"\n        label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n        class=\"mr-2\"\n        (click)=\"resetColumns()\"\n      />\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [ngModel]=\"_selectedColumns\"\n      (ngModelChange)=\"onColumnSelectionChange($event)\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template pTemplate=\"item\" let-item>\n        @if (item | isSelected : selectedColumns) {\n          <i class=\"pi pi-eye\"></i>\n        } @else {\n          <i class=\"pi pi-eye-slash\"></i>\n        }\n        <span class=\"ml-2\">{{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "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", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$4.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i10.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "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", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i12.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i13.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i14.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableCaptionComponent, decorators: [{
             type: Component,
@@ -2323,7 +2372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         PhoenixDataTableActionComponent,
                         PhoenixDataTableTabsComponent,
                         IsSelectedPipe,
-                    ], template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n  <!-- Left: Tabs + Global actions -->\n  <div class=\"flex align-items-center gap-2\">\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + (tableConfiguration?.tabs?.key ?? 'tabs')\"\n      [actions]=\"tableConfiguration?.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    />\n\n    @for (action of (tableConfiguration?.globalActions ?? []); track action?.key ?? $index) {\n      <phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      />\n    }\n  </div>\n\n  <!-- Right: caption filters + icons + search + more -->\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filters in caption row -->\n    @for (control of (filters ?? []); track control.key) {\n      @if (control.isInCaption) {\n        @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n          @case ('dropdown') {\n            <p-select\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [optionValue]=\"control.optionValue ?? 'key'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n            />\n          }\n          @case ('multiselect') {\n            <p-multiselect\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [optionValue]=\"control.optionValue ?? 'key'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"clearSelectFilter(control.key)\"\n            />\n          }\n          @case ('checkbox') {\n            <p-checkbox\n              binary=\"true\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n            />\n          }\n          @default {\n            <!-- text -->\n            <input\n              class=\"w-12rem\"\n              pInputText\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              placeholder=\"{{ control.label | translate }}\"\n            />\n          }\n        }\n      }\n    }\n\n    <!-- Filter icon -->\n    @if (tableConfiguration?.hasFilter) {\n      @if (hasFormValues()) {\n        <p-overlaybadge class=\"p-2\" severity=\"danger\">\n          <span pRipple class=\"cursor-pointer\" (click)=\"filtersPopover?.toggle($event)\">\n            <i class=\"pi pi-filter\"></i>\n          </span>\n        </p-overlaybadge>\n      } @else {\n        <span pRipple class=\"cursor-pointer p-2\" (click)=\"filtersPopover?.toggle($event)\">\n          <i class=\"pi pi-filter\"></i>\n        </span>\n      }\n    }\n\n    <!-- Columns icon -->\n    @if (tableConfiguration?.hasColumns) {\n      @if (columnsChanged) {\n        <p-overlaybadge class=\"p-2\" severity=\"danger\">\n          <span pRipple class=\"cursor-pointer\" (click)=\"columnsPopover?.toggle($event)\">\n            <i class=\"pi pi-sliders-v\"></i>\n          </span>\n        </p-overlaybadge>\n      } @else {\n        <span pRipple class=\"cursor-pointer p-2\" (click)=\"columnsPopover?.toggle($event)\">\n          <i class=\"pi pi-sliders-v\"></i>\n        </span>\n      }\n    }\n\n    <!-- Search + More -->\n    <div class=\"flex\">\n      @if (tableConfiguration?.hasSearch) {\n        <p-iconfield>\n          <p-inputicon styleClass=\"pi pi-search\" />\n          <input\n            type=\"text\"\n            pInputText\n            (input)=\"emitSearch($any($event.target).value)\"\n            placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n          />\n        </p-iconfield>\n      }\n\n      @if (tableConfiguration?.hasMore && tableConfiguration?.moreActions) {\n        <phoenix-data-table-action\n          [actionConfig]=\"tableConfiguration.moreActions\"\n          (actionClick)=\"actionClick.emit($event)\"\n        />\n      }\n    </div>\n  </div>\n</div>\n\n<!-- Filters Popover -->\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      <p-button\n        icon=\"pi pi-refresh\"\n        [text]=\"true\"\n        label=\"{{ 'ACTION.CLEAR' | translate }}\"\n        class=\"mr-2\"\n        (click)=\"resetFilters()\"\n      />\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for (control of (filters ?? []); track control.key) {\n        @if (!control.isInCaption) {\n          @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n            @case ('checkbox') {\n              <div class=\"mb-2\">\n                <p-checkbox binary=\"true\" [formControlName]=\"control.key\" />\n                <label class=\"ml-2\">{{ control.label | translate }}</label>\n              </div>\n            }\n            @case ('dropdown') {\n              <div class=\"mb-2\">\n                <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n                <p-select\n                  class=\"w-full\"\n                  [options]=\"control.options ?? []\"\n                  [optionLabel]=\"control.optionLabel ?? 'label'\"\n                  [optionValue]=\"control.optionValue ?? 'key'\"\n                  [showClear]=\"true\"\n                  [formControlName]=\"control.key\"\n                  (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n                />\n              </div>\n            }\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]=\"control.optionLabel ?? 'label'\"\n                    [optionValue]=\"control.optionValue ?? 'key'\"\n                    [showClear]=\"true\"\n                    [formControlName]=\"control.key\"\n                    (onClear)=\"clearSelectFilter(control.key)\"\n                  />\n                  <label>{{ control.label | translate }}</label>\n                </p-floatlabel>\n              </div>\n            }\n            @default {\n              <div class=\"mb-2\">\n                <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n                <input\n                  class=\"w-full\"\n                  pInputText\n                  [formControlName]=\"control.key\"\n                  placeholder=\"{{ control.label | translate }}\"\n                />\n              </div>\n            }\n          }\n        }\n      }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Columns Popover -->\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      <p-button\n        icon=\"pi pi-eye\"\n        [text]=\"true\"\n        label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n        class=\"mr-2\"\n        (click)=\"resetColumns()\"\n      />\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [ngModel]=\"_selectedColumns\"\n      (ngModelChange)=\"onColumnSelectionChange($event)\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template pTemplate=\"item\" let-item>\n        @if (item | isSelected : selectedColumns) {\n          <i class=\"pi pi-eye\"></i>\n        } @else {\n          <i class=\"pi pi-eye-slash\"></i>\n        }\n        <span class=\"ml-2\">{{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>" }]
+                    ], template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n  <!-- Left: Tabs + Global actions -->\n  <div class=\"flex align-items-center gap-2\">\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + (tableConfiguration?.tabs?.key ?? 'tabs')\"\n      [actions]=\"tableConfiguration?.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    />\n\n    @for (action of (tableConfiguration?.globalActions ?? []); track action?.key ?? $index) {\n      <phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      />\n    }\n  </div>\n\n  <!-- Right: caption filters + icons + search + more -->\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filters in caption row -->\n    @for (control of (filters ?? []); track control.key) {\n      @if (control.isInCaption) {\n        @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n          @case ('dropdown') {\n            <p-select\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [optionValue]=\"control.optionValue ?? 'key'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n            />\n          }\n\n          @case ('multiselect') {\n            <p-multiselect\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [optionValue]=\"control.optionValue ?? 'key'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"clearSelectFilter(control.key)\"\n            />\n          }\n\n          @case ('boolean-multiselect') {\n            <p-multiselect\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"clearSelectFilter(control.key)\"\n            >\n              <ng-template pTemplate=\"selectedItems\" let-value>\n                @if ((value?.length ?? 0) === 0) {\n                  <span class=\"p-2 text-500\">{{ control.label | translate }}</span>\n                } @else {\n                  <span class=\"p-2\">{{ getSelectedLabels(value, control) }}</span>\n                }\n              </ng-template>\n\n              <ng-template pTemplate=\"item\" let-item>\n                <span>{{ item?.[control.optionLabel ?? 'label'] }}</span>\n              </ng-template>\n            </p-multiselect>\n          }\n\n          @case ('checkbox') {\n            <p-checkbox binary=\"true\" [formControl]=\"$any(filtersForm.get(control.key))\" />\n          }\n\n          @default {\n            <input\n              class=\"w-12rem\"\n              pInputText\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              placeholder=\"{{ control.label | translate }}\"\n            />\n          }\n        }\n      }\n    }\n\n    <!-- Filter icon -->\n    @if (tableConfiguration?.hasFilter) {\n      @if (hasFormValues()) {\n        <p-overlaybadge class=\"p-2\" severity=\"danger\">\n          <span pRipple class=\"cursor-pointer\" (click)=\"filtersPopover?.toggle($event)\">\n            <i class=\"pi pi-filter\"></i>\n          </span>\n        </p-overlaybadge>\n      } @else {\n        <span pRipple class=\"cursor-pointer p-2\" (click)=\"filtersPopover?.toggle($event)\">\n          <i class=\"pi pi-filter\"></i>\n        </span>\n      }\n    }\n\n    <!-- Columns icon -->\n    @if (tableConfiguration?.hasColumns) {\n      @if (columnsChanged) {\n        <p-overlaybadge class=\"p-2\" severity=\"danger\">\n          <span pRipple class=\"cursor-pointer\" (click)=\"columnsPopover?.toggle($event)\">\n            <i class=\"pi pi-sliders-v\"></i>\n          </span>\n        </p-overlaybadge>\n      } @else {\n        <span pRipple class=\"cursor-pointer p-2\" (click)=\"columnsPopover?.toggle($event)\">\n          <i class=\"pi pi-sliders-v\"></i>\n        </span>\n      }\n    }\n\n    <!-- Search + More -->\n    <div class=\"flex\">\n      @if (tableConfiguration?.hasSearch) {\n        <p-iconfield>\n          <p-inputicon styleClass=\"pi pi-search\" />\n          <input\n            type=\"text\"\n            pInputText\n            (input)=\"emitSearch($any($event.target).value)\"\n            placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n          />\n        </p-iconfield>\n      }\n\n      @if (tableConfiguration?.hasMore && tableConfiguration?.moreActions) {\n        <phoenix-data-table-action\n          [actionConfig]=\"tableConfiguration.moreActions\"\n          (actionClick)=\"actionClick.emit($event)\"\n        />\n      }\n    </div>\n  </div>\n</div>\n\n<!-- Filters Popover -->\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      <p-button\n        icon=\"pi pi-refresh\"\n        [text]=\"true\"\n        label=\"{{ 'ACTION.CLEAR' | translate }}\"\n        class=\"mr-2\"\n        (click)=\"resetFilters()\"\n      />\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for (control of (filters ?? []); track control.key) {\n        @if (!control.isInCaption) {\n          @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n            @case ('checkbox') {\n              <div class=\"mb-2\">\n                <p-checkbox binary=\"true\" [formControlName]=\"control.key\" />\n                <label class=\"ml-2\">{{ control.label | translate }}</label>\n              </div>\n            }\n\n            @case ('dropdown') {\n              <div class=\"mb-2\">\n                <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n                <p-select\n                  class=\"w-full\"\n                  [options]=\"control.options ?? []\"\n                  [optionLabel]=\"control.optionLabel ?? 'label'\"\n                  [optionValue]=\"control.optionValue ?? 'key'\"\n                  [showClear]=\"true\"\n                  [formControlName]=\"control.key\"\n                  (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n                />\n              </div>\n            }\n\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]=\"control.optionLabel ?? 'label'\"\n                    [optionValue]=\"control.optionValue ?? 'key'\"\n                    [showClear]=\"true\"\n                    [formControlName]=\"control.key\"\n                    (onClear)=\"clearSelectFilter(control.key)\"\n                  />\n                  <label>{{ control.label | translate }}</label>\n                </p-floatlabel>\n              </div>\n            }\n\n            @case ('boolean-multiselect') {\n              <div class=\"mb-2\">\n                <p-floatlabel variant=\"on\">\n                  <p-multiselect\n                    class=\"w-full\"\n                    [options]=\"control.options ?? []\"\n                    [optionLabel]=\"control.optionLabel ?? 'label'\"\n                    [showClear]=\"true\"\n                    [formControlName]=\"control.key\"\n                    (onClear)=\"clearSelectFilter(control.key)\"\n                  >\n                    <ng-template pTemplate=\"selectedItems\" let-value>\n                      @if ((value?.length ?? 0) === 0) {\n                        <span class=\"p-2 text-500\">{{ control.label | translate }}</span>\n                      } @else {\n                        <span class=\"p-2\">{{ getSelectedLabels(value, control) }}</span>\n                      }\n                    </ng-template>\n\n                    <ng-template pTemplate=\"item\" let-item>\n                      <span>{{ item?.[control.optionLabel ?? 'label'] }}</span>\n                    </ng-template>\n                  </p-multiselect>\n                  <label>{{ control.label | translate }}</label>\n                </p-floatlabel>\n              </div>\n            }\n\n            @default {\n              <div class=\"mb-2\">\n                <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n                <input\n                  class=\"w-full\"\n                  pInputText\n                  [formControlName]=\"control.key\"\n                  placeholder=\"{{ control.label | translate }}\"\n                />\n              </div>\n            }\n          }\n        }\n      }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Columns Popover -->\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      <p-button\n        icon=\"pi pi-eye\"\n        [text]=\"true\"\n        label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n        class=\"mr-2\"\n        (click)=\"resetColumns()\"\n      />\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [ngModel]=\"_selectedColumns\"\n      (ngModelChange)=\"onColumnSelectionChange($event)\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template pTemplate=\"item\" let-item>\n        @if (item | isSelected : selectedColumns) {\n          <i class=\"pi pi-eye\"></i>\n        } @else {\n          <i class=\"pi pi-eye-slash\"></i>\n        }\n        <span class=\"ml-2\">{{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>" }]
         }], propDecorators: { filtersPopover: [{
                 type: ViewChild,
                 args: ['filtersPopover']