@dataclouder/ngx-core 0.1.44 → 0.1.46

package/fesm2022/dataclouder-ngx-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, Component, inject, ChangeDetectionStrategy, output, Input, HostListener, ChangeDetectorRef, Injectable, Pipe, signal, effect, ViewChild, Directive, InjectionToken, computed, Optional, Inject } from '@angular/core';
+import { input, Component, Injectable, inject, ChangeDetectionStrategy, output, Input, HostListener, ChangeDetectorRef, Pipe, signal, effect, ViewChild, Directive, InjectionToken, computed, Optional, Inject } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormBuilder, FormsModule, ReactiveFormsModule, FormControl, ControlContainer, FormGroup, FormArray } from '@angular/forms';
 import * as i2 from 'primeng/button';
@@ -8,15 +8,15 @@ import * as i3$1 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i4$1 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i5$1 from 'primeng/inputgroup';
+import * as i5 from 'primeng/inputgroup';
 import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import { DynamicDialogRef, DynamicDialogConfig, DialogService } from 'primeng/dynamicdialog';
 import * as i3 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
-import * as i4 from 'primeng/multiselect';
+import * as i8 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
-import * as i5 from 'primeng/datepicker';
+import * as i4 from 'primeng/datepicker';
 import { DatePickerModule } from 'primeng/datepicker';
 import * as i2$1 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
@@ -89,6 +89,7 @@ const sortOptions = [
     { label: 'Más antiguo', value: OptionValue.Oldest },
     { label: 'A-Z', value: OptionValue.Alphabetical },
     { label: 'Z-A', value: OptionValue.ReverseAlphabetical },
+    { label: 'Última actualización', value: 'lastUpdated' },
 ];
 const sortTypes = [
     { name: 'Recientes', code: 'newest', sort: { createdDate: -1 } },
@@ -96,63 +97,208 @@ const sortTypes = [
     { name: 'Populares', code: 'popular', sort: { takenCount: -1 } },
 ];
 
+class FilterService {
+    constructor() {
+        this.STORAGE_PREFIX = 'dc_filter_state_';
+    }
+    /**
+     * Saves the UI state of the filters to localStorage.
+     * @param key Unique key for the component/list
+     * @param state The UI state object (form values)
+     */
+    saveState(key, state) {
+        try {
+            localStorage.setItem(`${this.STORAGE_PREFIX}${key}`, JSON.stringify(state));
+        }
+        catch (e) {
+            console.error('Error saving filter state', e);
+        }
+    }
+    /**
+     * Loads the UI state of the filters from localStorage.
+     * @param key Unique key for the component/list
+     * @returns The UI state object or null if not found
+     */
+    loadState(key) {
+        try {
+            const item = localStorage.getItem(`${this.STORAGE_PREFIX}${key}`);
+            return item ? JSON.parse(item) : null;
+        }
+        catch (e) {
+            console.error('Error loading filter state', e);
+            return null;
+        }
+    }
+    /**
+     * Builds a MongoDB-compatible query object from the UI filter values and definitions.
+     * @param uiFilters The raw values from the form
+     * @param customFilters The definitions of the filters
+     * @returns A MongoDB query object
+     */
+    buildQuery(uiFilters, customFilters) {
+        const query = {};
+        for (const filterDef of customFilters) {
+            const value = uiFilters[filterDef.field];
+            // Skip empty values
+            if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {
+                continue;
+            }
+            // Use defined operator or infer from type
+            const operator = filterDef.operator || this.inferOperator(filterDef.type);
+            switch (operator) {
+                case '$eq':
+                    query[filterDef.field] = value;
+                    break;
+                case '$ne':
+                    query[filterDef.field] = { $ne: value };
+                    break;
+                case '$regex':
+                    query[filterDef.field] = { $regex: value, $options: 'i' };
+                    break;
+                case '$in':
+                    query[filterDef.field] = { $in: Array.isArray(value) ? value : [value] };
+                    break;
+                case '$nin':
+                    query[filterDef.field] = { $nin: Array.isArray(value) ? value : [value] };
+                    break;
+                case '$gt':
+                    query[filterDef.field] = { $gt: value };
+                    break;
+                case '$gte':
+                    query[filterDef.field] = { $gte: value };
+                    break;
+                case '$lt':
+                    query[filterDef.field] = { $lt: value };
+                    break;
+                case '$lte':
+                    query[filterDef.field] = { $lte: value };
+                    break;
+                case 'range':
+                    if (Array.isArray(value) && value.length === 2 && value[0] && value[1]) {
+                        query[filterDef.field] = { $gte: value[0], $lte: value[1] };
+                    }
+                    break;
+                default:
+                    // Default fallback
+                    query[filterDef.field] = value;
+            }
+        }
+        return query;
+    }
+    inferOperator(type) {
+        switch (type) {
+            case 'string':
+                return '$regex';
+            case 'select':
+            case 'boolean':
+            case 'number':
+                return '$eq';
+            case 'multi-select':
+                return '$in';
+            case 'date':
+                return 'range'; // Assuming date picker returns a range usually, or exact match if single
+            default:
+                return '$eq';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FilterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FilterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class DcListFilterDialogComponent {
     constructor() {
         this.fb = inject(FormBuilder);
+        this.filterService = inject(FilterService);
         this.ref = inject(DynamicDialogRef);
         this.config = inject(DynamicDialogConfig);
         this.customFilters = this.config.data.customFilters || [];
+        this.initialUiState = this.config.data.uiState || {};
         this.availibleFilters = availibleFilters;
         this.sortOptions = sortOptions;
         this.selectedFilters = [];
         this.selectedSort = null;
         this.dateRange = [];
         this.buildCustomFiltersForm();
+        this.restoreState();
     }
     buildCustomFiltersForm() {
+        debugger;
         const formControls = {};
         for (const filter of this.customFilters) {
             formControls[filter.field] = [filter.defaultValue || null];
         }
         this.customFiltersForm = this.fb.group(formControls);
     }
+    restoreState() {
+        if (this.initialUiState) {
+            if (this.initialUiState.customFilters) {
+                this.customFiltersForm.patchValue(this.initialUiState.customFilters);
+            }
+            if (this.initialUiState.sort) {
+                this.selectedSort = this.initialUiState.sort;
+            }
+            if (this.initialUiState.dateRange) {
+                // Ensure dates are Date objects
+                this.dateRange = this.initialUiState.dateRange.map((d) => new Date(d));
+            }
+            if (this.initialUiState.quickFilters) {
+                this.selectedFilters = this.initialUiState.quickFilters;
+            }
+        }
+    }
     clearFilters() {
         this.ref.close({ action: 'clear' });
     }
     applyFilters() {
         const customFilterValues = this.customFiltersForm.value;
-        const activeFilters = Object.entries(customFilterValues).reduce((acc, [key, value]) => {
-            if (value !== null && value !== undefined && value !== '') {
-                acc[key] = value;
-            }
-            return acc;
-        }, {});
+        // Build MongoDB Query
+        const mongoQuery = this.filterService.buildQuery(customFilterValues, this.customFilters);
+        // Add Date Range to Query
+        if (this.dateRange && this.dateRange.length === 2 && this.dateRange[0] && this.dateRange[1]) {
+            mongoQuery['createdAt'] = { $gte: this.dateRange[0], $lte: this.dateRange[1] };
+        }
+        // Capture UI State for persistence
+        const uiState = {
+            customFilters: customFilterValues,
+            sort: this.selectedSort,
+            dateRange: this.dateRange,
+            quickFilters: this.selectedFilters,
+        };
         this.ref.close({
             action: 'apply',
-            filters: activeFilters,
+            filters: mongoQuery, // The actual query for the backend
+            uiState: uiState, // The state to save for the UI
             sort: this.selectedSort,
             dateRange: this.dateRange,
             quickFilters: this.selectedFilters,
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcListFilterDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcListFilterDialogComponent, isStandalone: true, selector: "dc-list-filter-dialog", ngImport: i0, template: "<div class=\"filter-dialog-content flex flex-col justify-between h-full\">\n  <!-- Filters Content -->\n  <div>\n    <!-- Sort Options -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Ordenar por</label>\n      <p-select [options]=\"sortOptions\" [(ngModel)]=\"selectedSort\" optionLabel=\"label\" [style]=\"{ width: '100%' }\" placeholder=\"Seleccionar orden\"> </p-select>\n    </div>\n\n    <p-multiselect [options]=\"availibleFilters\" [(ngModel)]=\"selectedFilters\" optionLabel=\"name\" placeholder=\"Filtros R\u00E1pidos\" [maxSelectedLabels]=\"3\" />\n\n    <!-- Date Filter -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Rango de fechas</label>\n      <p-datepicker\n        [(ngModel)]=\"dateRange\"\n        selectionMode=\"range\"\n        [showButtonBar]=\"true\"\n        [style]=\"{ width: '100%' }\"\n        placeholder=\"Seleccionar fechas\"\n        dateFormat=\"dd/mm/yy\">\n      </p-datepicker>\n    </div>\n\n    @if (customFilters?.length > 0) {\n    <form [formGroup]=\"customFiltersForm\">\n      <h4>Filtros Personalizados</h4>\n      @for (customFilter of customFilters; track customFilter.field) {\n      <div class=\"field\">\n        <label class=\"font-semibold block mb-2\">{{ customFilter.name }}</label>\n        @switch (customFilter.type) { @case ('select') {\n        <p-select\n          [options]=\"customFilter.options\"\n          [formControlName]=\"customFilter.field\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [style]=\"{ width: '100%' }\"\n          placeholder=\"Seleccionar {{ customFilter.name }}\" />\n        } @case ('string') {\n        <input type=\"text\" pInputText [formControlName]=\"customFilter.field\" class=\"w-full\" />\n        } @case ('date') {\n        <p-datepicker [formControlName]=\"customFilter.field\" [style]=\"{ width: '100%' }\" dateFormat=\"dd/mm/yy\"></p-datepicker>\n        } }\n      </div>\n      }\n    </form>\n    }\n  </div>\n\n  <!-- Action Buttons -->\n  <div>\n    <div class=\"flex justify-end gap-2\">\n      <p-button label=\"Limpiar\" icon=\"pi pi-trash\" (click)=\"clearFilters()\" styleClass=\"p-button-text\"> </p-button>\n      <p-button label=\"Aplicar\" icon=\"pi pi-check\" (click)=\"applyFilters()\" severity=\"primary\"> </p-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep .filter-dialog-content{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.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: i4.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: DatePickerModule }, { kind: "component", type: i5.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcListFilterDialogComponent, isStandalone: true, selector: "dc-list-filter-dialog", ngImport: i0, template: "<div class=\"filter-dialog-content flex flex-col justify-between h-full\">\n  <!-- Filters Content -->\n  <div>\n    <!-- Sort Options -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Ordenar por</label>\n      <p-select [options]=\"sortOptions\" [(ngModel)]=\"selectedSort\" optionLabel=\"label\" [style]=\"{ width: '100%' }\" placeholder=\"Seleccionar orden\"> </p-select>\n    </div>\n\n    <!-- <p-multiselect [options]=\"availibleFilters\" [(ngModel)]=\"selectedFilters\" optionLabel=\"name\" placeholder=\"Filtros R\u00E1pidos\" [maxSelectedLabels]=\"3\" /> -->\n\n    <!-- Date Filter -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Rango de fechas</label>\n      <p-datepicker\n        [(ngModel)]=\"dateRange\"\n        selectionMode=\"range\"\n        [showButtonBar]=\"true\"\n        [style]=\"{ width: '100%' }\"\n        placeholder=\"Seleccionar fechas\"\n        dateFormat=\"dd/mm/yy\">\n      </p-datepicker>\n    </div>\n\n    @if (customFilters?.length > 0) {\n    <form [formGroup]=\"customFiltersForm\">\n      <h4>Filtros Personalizados</h4>\n      @for (customFilter of customFilters; track customFilter.field) {\n      <div class=\"field\">\n        <label class=\"font-semibold block mb-2\">{{ customFilter.name }}</label>\n        @switch (customFilter.type) { @case ('select') {\n        <p-select\n          [options]=\"customFilter.options\"\n          [formControlName]=\"customFilter.field\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [style]=\"{ width: '100%' }\"\n          placeholder=\"Seleccionar {{ customFilter.name }}\" />\n        } @case ('string') {\n        <input type=\"text\" pInputText [formControlName]=\"customFilter.field\" class=\"w-full\" />\n        } @case ('date') {\n        <p-datepicker [formControlName]=\"customFilter.field\" [style]=\"{ width: '100%' }\" dateFormat=\"dd/mm/yy\"></p-datepicker>\n        } }\n      </div>\n      }\n    </form>\n    }\n  </div>\n\n  <!-- Action Buttons -->\n  <div>\n    <div class=\"flex justify-end gap-2\">\n      <p-button label=\"Limpiar\" icon=\"pi pi-trash\" (click)=\"clearFilters()\" styleClass=\"p-button-text\"> </p-button>\n      <p-button label=\"Aplicar\" icon=\"pi pi-check\" (click)=\"applyFilters()\" severity=\"primary\"> </p-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep .filter-dialog-content{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.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: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcListFilterDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-list-filter-dialog', standalone: true, imports: [FormsModule, ReactiveFormsModule, ButtonModule, DialogModule, SelectModule, MultiSelectModule, DatePickerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filter-dialog-content flex flex-col justify-between h-full\">\n  <!-- Filters Content -->\n  <div>\n    <!-- Sort Options -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Ordenar por</label>\n      <p-select [options]=\"sortOptions\" [(ngModel)]=\"selectedSort\" optionLabel=\"label\" [style]=\"{ width: '100%' }\" placeholder=\"Seleccionar orden\"> </p-select>\n    </div>\n\n    <p-multiselect [options]=\"availibleFilters\" [(ngModel)]=\"selectedFilters\" optionLabel=\"name\" placeholder=\"Filtros R\u00E1pidos\" [maxSelectedLabels]=\"3\" />\n\n    <!-- Date Filter -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Rango de fechas</label>\n      <p-datepicker\n        [(ngModel)]=\"dateRange\"\n        selectionMode=\"range\"\n        [showButtonBar]=\"true\"\n        [style]=\"{ width: '100%' }\"\n        placeholder=\"Seleccionar fechas\"\n        dateFormat=\"dd/mm/yy\">\n      </p-datepicker>\n    </div>\n\n    @if (customFilters?.length > 0) {\n    <form [formGroup]=\"customFiltersForm\">\n      <h4>Filtros Personalizados</h4>\n      @for (customFilter of customFilters; track customFilter.field) {\n      <div class=\"field\">\n        <label class=\"font-semibold block mb-2\">{{ customFilter.name }}</label>\n        @switch (customFilter.type) { @case ('select') {\n        <p-select\n          [options]=\"customFilter.options\"\n          [formControlName]=\"customFilter.field\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [style]=\"{ width: '100%' }\"\n          placeholder=\"Seleccionar {{ customFilter.name }}\" />\n        } @case ('string') {\n        <input type=\"text\" pInputText [formControlName]=\"customFilter.field\" class=\"w-full\" />\n        } @case ('date') {\n        <p-datepicker [formControlName]=\"customFilter.field\" [style]=\"{ width: '100%' }\" dateFormat=\"dd/mm/yy\"></p-datepicker>\n        } }\n      </div>\n      }\n    </form>\n    }\n  </div>\n\n  <!-- Action Buttons -->\n  <div>\n    <div class=\"flex justify-end gap-2\">\n      <p-button label=\"Limpiar\" icon=\"pi pi-trash\" (click)=\"clearFilters()\" styleClass=\"p-button-text\"> </p-button>\n      <p-button label=\"Aplicar\" icon=\"pi pi-check\" (click)=\"applyFilters()\" severity=\"primary\"> </p-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep .filter-dialog-content{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem}\n"] }]
+            args: [{ selector: 'dc-list-filter-dialog', standalone: true, imports: [FormsModule, ReactiveFormsModule, ButtonModule, DialogModule, SelectModule, MultiSelectModule, DatePickerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filter-dialog-content flex flex-col justify-between h-full\">\n  <!-- Filters Content -->\n  <div>\n    <!-- Sort Options -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Ordenar por</label>\n      <p-select [options]=\"sortOptions\" [(ngModel)]=\"selectedSort\" optionLabel=\"label\" [style]=\"{ width: '100%' }\" placeholder=\"Seleccionar orden\"> </p-select>\n    </div>\n\n    <!-- <p-multiselect [options]=\"availibleFilters\" [(ngModel)]=\"selectedFilters\" optionLabel=\"name\" placeholder=\"Filtros R\u00E1pidos\" [maxSelectedLabels]=\"3\" /> -->\n\n    <!-- Date Filter -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Rango de fechas</label>\n      <p-datepicker\n        [(ngModel)]=\"dateRange\"\n        selectionMode=\"range\"\n        [showButtonBar]=\"true\"\n        [style]=\"{ width: '100%' }\"\n        placeholder=\"Seleccionar fechas\"\n        dateFormat=\"dd/mm/yy\">\n      </p-datepicker>\n    </div>\n\n    @if (customFilters?.length > 0) {\n    <form [formGroup]=\"customFiltersForm\">\n      <h4>Filtros Personalizados</h4>\n      @for (customFilter of customFilters; track customFilter.field) {\n      <div class=\"field\">\n        <label class=\"font-semibold block mb-2\">{{ customFilter.name }}</label>\n        @switch (customFilter.type) { @case ('select') {\n        <p-select\n          [options]=\"customFilter.options\"\n          [formControlName]=\"customFilter.field\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [style]=\"{ width: '100%' }\"\n          placeholder=\"Seleccionar {{ customFilter.name }}\" />\n        } @case ('string') {\n        <input type=\"text\" pInputText [formControlName]=\"customFilter.field\" class=\"w-full\" />\n        } @case ('date') {\n        <p-datepicker [formControlName]=\"customFilter.field\" [style]=\"{ width: '100%' }\" dateFormat=\"dd/mm/yy\"></p-datepicker>\n        } }\n      </div>\n      }\n    </form>\n    }\n  </div>\n\n  <!-- Action Buttons -->\n  <div>\n    <div class=\"flex justify-end gap-2\">\n      <p-button label=\"Limpiar\" icon=\"pi pi-trash\" (click)=\"clearFilters()\" styleClass=\"p-button-text\"> </p-button>\n      <p-button label=\"Aplicar\" icon=\"pi pi-check\" (click)=\"applyFilters()\" severity=\"primary\"> </p-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep .filter-dialog-content{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem}\n"] }]
         }], ctorParameters: () => [] });
 
 const DEFAULT_FILTERS = { filters: {}, page: 0, rowsPerPage: 10, sort: { _id: -1 } };
 class DCFilterBarComponent {
     constructor() {
         this.dialogService = inject(DialogService);
+        this.filterService = inject(FilterService);
         // Signal Inputs
         this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
         this.options = input({ showCreateButton: true }, ...(ngDevMode ? [{ debugName: "options" }] : []));
         // Inputs
         this.customFilters = [];
         this.isAdmin = false;
+        this.persistenceKey = ''; // Key for saving/loading filters
         // Outputs
         this.onFilterAction = output();
         this.onNew = output();
@@ -160,6 +306,29 @@ class DCFilterBarComponent {
         this.isSearchVisible = false;
         this.placeholder = '';
         this.filter = { ...DEFAULT_FILTERS };
+        this.uiState = null; // Store UI state separately
+    }
+    ngOnInit() {
+        // debugger;
+        if (this.persistenceKey) {
+            this.loadSavedFilters();
+        }
+    }
+    loadSavedFilters() {
+        const savedState = this.filterService.loadState(this.persistenceKey);
+        if (savedState) {
+            this.uiState = savedState;
+            // Re-construct the query from the saved UI state
+            if (savedState.customFilters) {
+                const mongoQuery = this.filterService.buildQuery(savedState.customFilters, this.customFilters);
+                this.filter = { ...this.filter, filters: mongoQuery };
+                // Emit initial filter change so the list loads with these filters
+                // We use setTimeout to ensure the parent component is ready
+                setTimeout(() => {
+                    this.doItemAction({ action: 'filterChange', item: this.filter });
+                });
+            }
+        }
     }
     createNew() {
         this.onNew.emit('new');
@@ -180,7 +349,10 @@ class DCFilterBarComponent {
             width: '70vw',
             height: '70vh',
             contentStyle: { 'max-height': '90vh', overflow: 'auto', 'min-height': '500px', height: '100%' },
-            data: { customFilters: this.customFilters },
+            data: {
+                customFilters: this.customFilters,
+                uiState: this.uiState, // Pass current UI state to dialog
+            },
             closable: true,
             modal: true,
             maximizable: true,
@@ -197,20 +369,51 @@ class DCFilterBarComponent {
         });
     }
     applyFilters(result) {
+        // result.filters is now the Mongo Query
         const newFilters = { ...this.filter.filters, ...result.filters };
-        this.filter = { ...this.filter, filters: newFilters };
+        let newSort = this.filter.sort;
+        if (result.sort) {
+            switch (result.sort.value) {
+                case 'newest':
+                    newSort = { createdAt: -1 };
+                    break;
+                case 'oldest':
+                    newSort = { createdAt: 1 };
+                    break;
+                case 'alphabetical':
+                    newSort = { name: 1 };
+                    break;
+                case 'reverseAlphabetical':
+                    newSort = { name: -1 };
+                    break;
+                case 'lastUpdated':
+                    newSort = { updatedAt: -1 };
+                    break;
+            }
+        }
+        this.filter = { ...this.filter, filters: newFilters, sort: newSort };
+        // Update UI state
+        this.uiState = result.uiState;
+        // Save to persistence
+        if (this.persistenceKey && this.uiState) {
+            this.filterService.saveState(this.persistenceKey, this.uiState);
+        }
         // Handle other filter types from result if necessary (sort, dateRange, etc.)
         this.doItemAction({ action: 'filterChange', item: this.filter });
     }
     clearFilters() {
         this.filter = { ...DEFAULT_FILTERS };
+        this.uiState = null;
+        if (this.persistenceKey) {
+            this.filterService.saveState(this.persistenceKey, null);
+        }
         this.doItemAction({ action: 'filterChange', item: this.filter });
     }
     doItemAction(filterEvent) {
         this.onFilterAction.emit(filterEvent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCFilterBarComponent, isStandalone: true, selector: "dc-filter-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: false, isRequired: false, transformFunction: null }, isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onFilterAction: "onFilterAction", onNew: "onNew" }, providers: [DialogService], ngImport: i0, template: "<div class=\"background-bar\">\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-search\" label=\"buscar\" severity=\"secondary\" (click)=\"isSearchVisible = true\" />\n\n    @if (isAdmin) {\n    <span class=\"admin\">\n      <i style=\"position: absolute; right: -5px; top: -5px; z-index: 2; color: grey\" class=\"pi pi-key\"></i>\n      <p-button icon=\"pi pi-plus\" label=\"Crear Nueva\" severity=\"secondary\" (click)=\"createNew()\" />\n    </span>\n    }\n  </div>\n\n  @if (isAdmin) {\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n  } @if(options()?.showActions){ @for(item of items(); track $index) {\n  <p-button [icon]=\"item.icon\" variant=\"text\" (click)=\"doItemAction({ action: item.title, item: item })\" severity=\"secondary\"></p-button>\n  } @if(isAdmin) {\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"openFilterDialog()\" />\n  </div>\n  } }\n</div>\n\n@if (placeholder) {\n<span class=\"search-flex\" (click)=\"search(null)\"> <i class=\"pi pi-times\"></i>{{ placeholder }} </span>\n}\n\n<p-dialog [(visible)]=\"isSearchVisible\" [dismissableMask]=\"true\" [modal]=\"true\" [showHeader]=\"false\" (onHide)=\"isSearchVisible = false\">\n  <h4>Qu\u00E9 vamos a buscar? (Enter)</h4>\n  <div>\n    <p-inputgroup>\n      <input (keydown.enter)=\"search(placeholder)\" type=\"text\" pInputText [(ngModel)]=\"placeholder\" />\n\n      <p-button label=\"Buscar\" icon=\"pi pi-search\" (click)=\"search(placeholder)\" />\n    </p-inputgroup>\n  </div>\n</p-dialog>\n", styles: [":host{display:block}.admin{margin-left:10px;position:relative}.background-bar{background-color:var(--p-primary-color);display:flex;border-radius:10px;justify-content:space-between;padding:10px}.button-flex{display:flex;margin-right:10px}.white{color:#fff}.search-flex{margin-left:10px}.search-dialog{width:750px;-webkit-backdrop-filter:blur(70px);backdrop-filter:blur(70px)}.border-none{border:none}.bg-black-alpha-50{background-color:var(--p-primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i5$1.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCFilterBarComponent, isStandalone: true, selector: "dc-filter-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: false, isRequired: false, transformFunction: null }, isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: false, isRequired: false, transformFunction: null }, persistenceKey: { classPropertyName: "persistenceKey", publicName: "persistenceKey", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onFilterAction: "onFilterAction", onNew: "onNew" }, providers: [DialogService], ngImport: i0, template: "<div class=\"background-bar\">\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-search\" label=\"buscar\" severity=\"secondary\" (click)=\"isSearchVisible = true\" />\n\n    @if (isAdmin) {\n    <span class=\"admin\">\n      <i style=\"position: absolute; right: -5px; top: -5px; z-index: 2; color: grey\" class=\"pi pi-key\"></i>\n      <p-button icon=\"pi pi-plus\" label=\"Crear Nueva\" severity=\"secondary\" (click)=\"createNew()\" />\n    </span>\n    }\n  </div>\n\n  @if (isAdmin) {\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n  } @if(options()?.showActions){ @for(item of items(); track $index) {\n  <p-button [icon]=\"item.icon\" variant=\"text\" (click)=\"doItemAction({ action: item.title, item: item })\" severity=\"secondary\"></p-button>\n  } @if(isAdmin) {\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"openFilterDialog()\" />\n  </div>\n  } }\n</div>\n\n@if (placeholder) {\n<span class=\"search-flex\" (click)=\"search(null)\"> <i class=\"pi pi-times\"></i>{{ placeholder }} </span>\n}\n\n<p-dialog [(visible)]=\"isSearchVisible\" [dismissableMask]=\"true\" [modal]=\"true\" [showHeader]=\"false\" (onHide)=\"isSearchVisible = false\">\n  <h4>Qu\u00E9 vamos a buscar? (Enter)</h4>\n  <div>\n    <p-inputgroup>\n      <input (keydown.enter)=\"search(placeholder)\" type=\"text\" pInputText [(ngModel)]=\"placeholder\" />\n\n      <p-button label=\"Buscar\" icon=\"pi pi-search\" (click)=\"search(placeholder)\" />\n    </p-inputgroup>\n  </div>\n</p-dialog>\n", styles: [":host{display:block}.admin{margin-left:10px;position:relative}.background-bar{background-color:var(--p-primary-color);display:flex;border-radius:10px;justify-content:space-between;padding:10px}.button-flex{display:flex;margin-right:10px}.white{color:#fff}.search-flex{margin-left:10px}.search-dialog{width:750px;-webkit-backdrop-filter:blur(70px);backdrop-filter:blur(70px)}.border-none{border:none}.bg-black-alpha-50{background-color:var(--p-primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i5.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCFilterBarComponent, decorators: [{
             type: Component,
@@ -219,6 +422,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 type: Input
             }], isAdmin: [{
                 type: Input
+            }], persistenceKey: [{
+                type: Input
             }] } });
 
 class ConfirmComponent {
@@ -696,7 +901,7 @@ class QuickTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: QuickTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: QuickTableComponent, isStandalone: true, selector: "app-quick-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true }], ngImport: i0, template: "<p-table\n  [tableStyle]=\"{ 'min-width': '20rem' }\"\n  #tableRef\n  [value]=\"_tableData()\"\n  [columns]=\"_columns()\"\n  [globalFilterFields]=\"globalFilterFields()\"\n  [filters]=\"filters()\"\n  (onFilter)=\"onFilterLocal($event)\">\n  <ng-template pTemplate=\"caption\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <h5 class=\"m-0\">Table Data</h5>\n      <span class=\"p-input-icon-left\">\n        <i class=\"pi pi-search\"></i>\n        <input pInputText type=\"text\" (input)=\"onGlobalFilter($event)\" placeholder=\"Search keyword\" />\n      </span>\n    </div>\n  </ng-template>\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n      @for (column of columns; track column) {\n      <th [pSortableColumn]=\"column.field\">{{ column.header }} <p-sortIcon [field]=\"column.field\"></p-sortIcon></th>\n      }\n    </tr>\n    <tr>\n      @for (column of columns; track column) { @if(column.type === 'tags') {\n      <th>\n        <p-multiselect\n          [options]=\"filters()?.[column.field]?.['options']\"\n          placeholder=\"Selecciona\"\n          (onChange)=\"filterOutsideTable('tags', column.field, $event.value)\"\n          [style]=\"{ minWidth: '14rem' }\"\n          [panelStyle]=\"{ minWidth: '16rem' }\">\n          <ng-template let-option #item>\n            <div class=\"flex items-center gap-2\">\n              <span>{{ option }}</span>\n            </div>\n          </ng-template>\n        </p-multiselect>\n      </th>\n\n      } @else if(column.type === 'select') {\n      <th>\n        <p-select\n          [options]=\"filters()?.[column.field]?.['options']\"\n          placeholder=\"Selecciona\"\n          (onChange)=\"filterOutsideTable('select', column.field, $event.value)\"\n          [style]=\"{ minWidth: '14rem' }\"\n          [showClear]=\"true\"></p-select>\n      </th>\n      } @else if(column.type === 'boolean') {\n      <th>\n        <p-columnFilter [type]=\"'boolean'\" [field]=\"column.field\"></p-columnFilter>\n      </th>\n      } @else if(column.type === 'numeric') {\n      <th>\n        <!-- <p-columnFilter [type]=\"'numeric'\" [field]=\"column.field\"></p-columnFilter> -->\n      </th>\n      } @else {\n      <th>\n        <p-columnFilter [type]=\"getFilterType(column)\" [field]=\"column.field\" placeholder=\"Search\" [showMenu]=\"false\"></p-columnFilter>\n      </th>\n      } }\n    </tr>\n  </ng-template>\n  <!-- @if(tableData()){ -->\n  <ng-template pTemplate=\"body\" let-item let-columns=\"columns\">\n    <tr>\n      @for (column of columns; track column) {\n      <td>\n        @if(column.type === 'image'){\n        <div class=\"image-container\">\n          <img [src]=\"item | getPath: column\" alt=\"Image\" class=\"image\" />\n        </div>\n        } @else if(column.type === 'tags') {\n        <div class=\"tags-container\">\n          @for (tag of item[column.field]; track tag) {\n          <p-tag [rounded]=\"true\" [value]=\"tag\"></p-tag>\n          }\n        </div>\n        } @else if(column.type === 'actions') {\n        <div style=\"display: flex; gap: 2px\">\n          @for (actionBtn of _actions(); track actionBtn) {\n          <p-button (click)=\"selectItem(item, actionBtn)\" [icon]=\"actionBtn.icon\" [severity]=\"actionBtn['severity']\" />\n          }\n        </div>\n        } @else if(column.type === 'boolean') {\n        <i\n          class=\"pi\"\n          [ngClass]=\"{\n            'text-green-500 pi-check-circle': column.reverse ? !(item | getPath: column) : (item | getPath: column),\n            'text-red-500 pi-times-circle': column.reverse ? (item | getPath: column) : !(item | getPath: column)\n          }\"></i>\n        } @else {\n        <span>{{ item | getPath: column}} </span>\n        }\n      </td>\n      }\n    </tr>\n  </ng-template>\n  <!-- } -->\n</p-table>\n", styles: [":host{display:block;height:100%;overflow:auto}.generic-list-container{display:flex;flex-direction:column;height:100%}.generic-list-content{margin-top:10px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin-bottom:10px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}.image-container{width:50px;height:50px;border-radius:50%;overflow:hidden;display:flex;justify-content:center;align-items:center}.image-container img{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CardModule }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i4$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i4$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i4$2.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.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: i4.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: "pipe", type: GetPathPipe, name: "getPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: QuickTableComponent, isStandalone: true, selector: "app-quick-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true }], ngImport: i0, template: "<p-table\n  [tableStyle]=\"{ 'min-width': '20rem' }\"\n  #tableRef\n  [value]=\"_tableData()\"\n  [columns]=\"_columns()\"\n  [globalFilterFields]=\"globalFilterFields()\"\n  [filters]=\"filters()\"\n  (onFilter)=\"onFilterLocal($event)\">\n  <ng-template pTemplate=\"caption\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <h5 class=\"m-0\">Table Data</h5>\n      <span class=\"p-input-icon-left\">\n        <i class=\"pi pi-search\"></i>\n        <input pInputText type=\"text\" (input)=\"onGlobalFilter($event)\" placeholder=\"Search keyword\" />\n      </span>\n    </div>\n  </ng-template>\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n      @for (column of columns; track column) {\n      <th [pSortableColumn]=\"column.field\">{{ column.header }} <p-sortIcon [field]=\"column.field\"></p-sortIcon></th>\n      }\n    </tr>\n    <tr>\n      @for (column of columns; track column) { @if(column.type === 'tags') {\n      <th>\n        <p-multiselect\n          [options]=\"filters()?.[column.field]?.['options']\"\n          placeholder=\"Selecciona\"\n          (onChange)=\"filterOutsideTable('tags', column.field, $event.value)\"\n          [style]=\"{ minWidth: '14rem' }\"\n          [panelStyle]=\"{ minWidth: '16rem' }\">\n          <ng-template let-option #item>\n            <div class=\"flex items-center gap-2\">\n              <span>{{ option }}</span>\n            </div>\n          </ng-template>\n        </p-multiselect>\n      </th>\n\n      } @else if(column.type === 'select') {\n      <th>\n        <p-select\n          [options]=\"filters()?.[column.field]?.['options']\"\n          placeholder=\"Selecciona\"\n          (onChange)=\"filterOutsideTable('select', column.field, $event.value)\"\n          [style]=\"{ minWidth: '14rem' }\"\n          [showClear]=\"true\"></p-select>\n      </th>\n      } @else if(column.type === 'boolean') {\n      <th>\n        <p-columnFilter [type]=\"'boolean'\" [field]=\"column.field\"></p-columnFilter>\n      </th>\n      } @else if(column.type === 'numeric') {\n      <th>\n        <!-- <p-columnFilter [type]=\"'numeric'\" [field]=\"column.field\"></p-columnFilter> -->\n      </th>\n      } @else {\n      <th>\n        <p-columnFilter [type]=\"getFilterType(column)\" [field]=\"column.field\" placeholder=\"Search\" [showMenu]=\"false\"></p-columnFilter>\n      </th>\n      } }\n    </tr>\n  </ng-template>\n  <!-- @if(tableData()){ -->\n  <ng-template pTemplate=\"body\" let-item let-columns=\"columns\">\n    <tr>\n      @for (column of columns; track column) {\n      <td>\n        @if(column.type === 'image'){\n        <div class=\"image-container\">\n          <img [src]=\"item | getPath: column\" alt=\"Image\" class=\"image\" />\n        </div>\n        } @else if(column.type === 'tags') {\n        <div class=\"tags-container\">\n          @for (tag of item[column.field]; track tag) {\n          <p-tag [rounded]=\"true\" [value]=\"tag\"></p-tag>\n          }\n        </div>\n        } @else if(column.type === 'actions') {\n        <div style=\"display: flex; gap: 2px\">\n          @for (actionBtn of _actions(); track actionBtn) {\n          <p-button (click)=\"selectItem(item, actionBtn)\" [icon]=\"actionBtn.icon\" [severity]=\"actionBtn['severity']\" />\n          }\n        </div>\n        } @else if(column.type === 'boolean') {\n        <i\n          class=\"pi\"\n          [ngClass]=\"{\n            'text-green-500 pi-check-circle': column.reverse ? !(item | getPath: column) : (item | getPath: column),\n            'text-red-500 pi-times-circle': column.reverse ? (item | getPath: column) : !(item | getPath: column)\n          }\"></i>\n        } @else {\n        <span>{{ item | getPath: column}} </span>\n        }\n      </td>\n      }\n    </tr>\n  </ng-template>\n  <!-- } -->\n</p-table>\n", styles: [":host{display:block;height:100%;overflow:auto}.generic-list-container{display:flex;flex-direction:column;height:100%}.generic-list-content{margin-top:10px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin-bottom:10px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}.image-container{width:50px;height:50px;border-radius:50%;overflow:hidden;display:flex;justify-content:center;align-items:center}.image-container img{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CardModule }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i4$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i4$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i4$2.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.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: i8.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: "pipe", type: GetPathPipe, name: "getPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: QuickTableComponent, decorators: [{
             type: Component,
@@ -915,15 +1120,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         }] });
 
 class DcTagsFormComponent {
-    constructor(parentContainer) {
-        this.parentContainer = parentContainer;
+    constructor() {
+        this.form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
         this.newTagControl = new FormControl('');
     }
-    ngOnInit() {
-        this.form = this.parentContainer.control;
-    }
     get arrayForm() {
-        return this.form.get('tags');
+        return this.form().get('tags');
     }
     addTag() {
         const newTag = this.newTagControl.value?.trim();
@@ -935,8 +1137,8 @@ class DcTagsFormComponent {
     removeTag(index) {
         this.arrayForm.removeAt(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcTagsFormComponent, deps: [{ token: i1.ControlContainer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcTagsFormComponent, isStandalone: true, selector: "dc-tags-form", ngImport: i0, template: "<div [formGroup]=\"form\">\n  <div formArrayName=\"tags\">\n    <div class=\"flex flex-wrap gap-2\">\n      @for (tagControl of arrayForm.controls; track tagControl; let i = $index) {\n      <p-chip [label]=\"tagControl.value\" [removable]=\"true\" (onRemove)=\"removeTag(i)\"></p-chip>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"flex mt-2\">\n  <input pInputText type=\"text\" [formControl]=\"newTagControl\" placeholder=\"New tag\" (keydown.enter)=\"addTag(); $event.preventDefault()\" />\n  <p-button label=\"Add Tag\" icon=\"pi pi-plus\" (click)=\"addTag()\" [disabled]=\"!newTagControl.value\"></p-button>\n</div>\n", styles: [".tag-field{display:flex;align-items:center;margin-bottom:.5rem}.tag-field input{margin-right:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i3$3.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }], viewProviders: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcTagsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcTagsFormComponent, isStandalone: true, selector: "dc-tags-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  <div formArrayName=\"tags\">\n    <div class=\"flex flex-wrap gap-2\">\n      @for (tagControl of arrayForm.controls; track tagControl; let i = $index) {\n      <p-chip [label]=\"tagControl.value\" [removable]=\"true\" (onRemove)=\"removeTag(i)\"></p-chip>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"flex mt-2\">\n  <input pInputText type=\"text\" [formControl]=\"newTagControl\" placeholder=\"New tag\" (keydown.enter)=\"addTag(); $event.preventDefault()\" />\n  <p-button label=\"Add Tag\" icon=\"pi pi-plus\" (click)=\"addTag()\" [disabled]=\"!newTagControl.value\"></p-button>\n</div>\n", styles: [".tag-field{display:flex;align-items:center;margin-bottom:.5rem}.tag-field input{margin-right:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i3$3.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }], viewProviders: [
             {
                 provide: ControlContainer,
                 useFactory: () => inject(ControlContainer, { skipSelf: true }),
@@ -950,19 +1152,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                             provide: ControlContainer,
                             useFactory: () => inject(ControlContainer, { skipSelf: true }),
                         },
-                    ], template: "<div [formGroup]=\"form\">\n  <div formArrayName=\"tags\">\n    <div class=\"flex flex-wrap gap-2\">\n      @for (tagControl of arrayForm.controls; track tagControl; let i = $index) {\n      <p-chip [label]=\"tagControl.value\" [removable]=\"true\" (onRemove)=\"removeTag(i)\"></p-chip>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"flex mt-2\">\n  <input pInputText type=\"text\" [formControl]=\"newTagControl\" placeholder=\"New tag\" (keydown.enter)=\"addTag(); $event.preventDefault()\" />\n  <p-button label=\"Add Tag\" icon=\"pi pi-plus\" (click)=\"addTag()\" [disabled]=\"!newTagControl.value\"></p-button>\n</div>\n", styles: [".tag-field{display:flex;align-items:center;margin-bottom:.5rem}.tag-field input{margin-right:.5rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1.ControlContainer }] });
+                    ], template: "<div [formGroup]=\"form()\">\n  <div formArrayName=\"tags\">\n    <div class=\"flex flex-wrap gap-2\">\n      @for (tagControl of arrayForm.controls; track tagControl; let i = $index) {\n      <p-chip [label]=\"tagControl.value\" [removable]=\"true\" (onRemove)=\"removeTag(i)\"></p-chip>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"flex mt-2\">\n  <input pInputText type=\"text\" [formControl]=\"newTagControl\" placeholder=\"New tag\" (keydown.enter)=\"addTag(); $event.preventDefault()\" />\n  <p-button label=\"Add Tag\" icon=\"pi pi-plus\" (click)=\"addTag()\" [disabled]=\"!newTagControl.value\"></p-button>\n</div>\n", styles: [".tag-field{display:flex;align-items:center;margin-bottom:.5rem}.tag-field input{margin-right:.5rem}\n"] }]
+        }] });
 
 class DcLearnableFormComponent {
     constructor() {
         this.form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLearnableFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcLearnableFormComponent, isStandalone: true, selector: "dc-learnable-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  <div class=\"form-grid\">\n    <div class=\"row\">\n      <div class=\"form-field\">\n        <label for=\"level\">Level <span pTooltip=\"Difficulty level\">\u2139\uFE0F</span></label>\n        <p-inputNumber id=\"level\" formControlName=\"level\" [min]=\"0\" [max]=\"10\"></p-inputNumber>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"takenCount\">Taken Count <span pTooltip=\"How many times this has been taken\">\u2139\uFE0F</span></label>\n        <p-inputNumber id=\"takenCount\" formControlName=\"takenCount\" [min]=\"0\"></p-inputNumber>\n      </div>\n    </div>\n    <div class=\"form-field\">\n      <label for=\"tags\">Tags <span pTooltip=\"Relevant tags for this content\">\u2139\uFE0F</span></label>\n      <dc-tags-form />\n    </div>\n  </div>\n</div>\n", styles: [".form-grid{display:grid;gap:1rem}.row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.form-field{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i2$5.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: DcTagsFormComponent, selector: "dc-tags-form" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcLearnableFormComponent, isStandalone: true, selector: "dc-learnable-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  <div class=\"form-grid\">\n    <div class=\"row\">\n      <div class=\"form-field\">\n        <label for=\"level\">Level <span pTooltip=\"Difficulty level\">\u2139\uFE0F</span></label>\n        <p-inputNumber id=\"level\" formControlName=\"level\" [min]=\"0\" [max]=\"10\"></p-inputNumber>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"takenCount\">Taken Count <span pTooltip=\"How many times this has been taken\">\u2139\uFE0F</span></label>\n        <p-inputNumber id=\"takenCount\" formControlName=\"takenCount\" [min]=\"0\"></p-inputNumber>\n      </div>\n    </div>\n    <div class=\"form-field\">\n      <label for=\"tags\">Tags <span pTooltip=\"Relevant tags for this content\">\u2139\uFE0F</span></label>\n      <dc-tags-form [form]=\"form()\" />\n    </div>\n  </div>\n</div>\n", styles: [".form-grid{display:grid;gap:1rem}.row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.form-field{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i2$5.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: DcTagsFormComponent, selector: "dc-tags-form", inputs: ["form"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLearnableFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-learnable-form', standalone: true, imports: [ReactiveFormsModule, CardModule, InputNumberModule, TooltipModule, DcTagsFormComponent], template: "<div [formGroup]=\"form()\">\n  <div class=\"form-grid\">\n    <div class=\"row\">\n      <div class=\"form-field\">\n        <label for=\"level\">Level <span pTooltip=\"Difficulty level\">\u2139\uFE0F</span></label>\n        <p-inputNumber id=\"level\" formControlName=\"level\" [min]=\"0\" [max]=\"10\"></p-inputNumber>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"takenCount\">Taken Count <span pTooltip=\"How many times this has been taken\">\u2139\uFE0F</span></label>\n        <p-inputNumber id=\"takenCount\" formControlName=\"takenCount\" [min]=\"0\"></p-inputNumber>\n      </div>\n    </div>\n    <div class=\"form-field\">\n      <label for=\"tags\">Tags <span pTooltip=\"Relevant tags for this content\">\u2139\uFE0F</span></label>\n      <dc-tags-form />\n    </div>\n  </div>\n</div>\n", styles: [".form-grid{display:grid;gap:1rem}.row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.form-field{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'dc-learnable-form', standalone: true, imports: [ReactiveFormsModule, CardModule, InputNumberModule, TooltipModule, DcTagsFormComponent], template: "<div [formGroup]=\"form()\">\n  <div class=\"form-grid\">\n    <div class=\"row\">\n      <div class=\"form-field\">\n        <label for=\"level\">Level <span pTooltip=\"Difficulty level\">\u2139\uFE0F</span></label>\n        <p-inputNumber id=\"level\" formControlName=\"level\" [min]=\"0\" [max]=\"10\"></p-inputNumber>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"takenCount\">Taken Count <span pTooltip=\"How many times this has been taken\">\u2139\uFE0F</span></label>\n        <p-inputNumber id=\"takenCount\" formControlName=\"takenCount\" [min]=\"0\"></p-inputNumber>\n      </div>\n    </div>\n    <div class=\"form-field\">\n      <label for=\"tags\">Tags <span pTooltip=\"Relevant tags for this content\">\u2139\uFE0F</span></label>\n      <dc-tags-form [form]=\"form()\" />\n    </div>\n  </div>\n</div>\n", styles: [".form-grid{display:grid;gap:1rem}.row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.form-field{display:flex;flex-direction:column}\n"] }]
         }] });
 
 /**
@@ -1140,6 +1342,11 @@ class EntityBaseListComponent extends PaginationBase {
                 await this.entityCommunicationService.clone(id);
                 await this.loadData(); // Refresh list
                 break;
+            case 'search':
+                debugger;
+                this.filterConfig.text = item;
+                this.loadData();
+                break;
             default:
             // this.handleCustomAction(actionEvent);
         }
@@ -1151,6 +1358,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             type: Directive
         }], ctorParameters: () => [] });
 
+class EntityBaseListV2Component extends PaginationBase {
+    constructor() {
+        super();
+        // Services
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        // Inputs & Outputs
+        this.initialViewType = input('card', ...(ngDevMode ? [{ debugName: "initialViewType" }] : []));
+        this.onlyView = input(false, ...(ngDevMode ? [{ debugName: "onlyView" }] : []));
+        // Outputs
+        this.onSelect = output();
+        // Writable Signals for component state
+        this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.totalRecordsSignal = signal(0, ...(ngDevMode ? [{ debugName: "totalRecordsSignal" }] : []));
+        // Public properties for configuration
+        this.filterBarOptions = { showActions: true, showCreateButton: true, showViewButton: true };
+        this.columns = [];
+        // New State Management
+        this.mongoState = {
+            query: {},
+            projection: {},
+            options: {
+                sort: { _id: -1 },
+                limit: 10,
+                skip: 0,
+            },
+            payload: {},
+        };
+        this.viewType = signal(this.initialViewType(), ...(ngDevMode ? [{ debugName: "viewType" }] : []));
+        effect(() => {
+            // Keep the parent's totalRecords in sync with our signal
+            this.totalRecords = this.totalRecordsSignal();
+        });
+    }
+    async ngOnInit() {
+        // Initialize mongoState from PaginationBase defaults if needed
+        this.mongoState.options.limit = this.rows;
+        this.mongoState.options.skip = this.first;
+        await this.loadData();
+    }
+    async loadData() {
+        try {
+            this.isLoading = true;
+            // Sync PaginationBase state to MongoState
+            this.mongoState.options.limit = this.rows;
+            this.mongoState.options.skip = this.first;
+            // If sort is updated in filterConfig (from PaginationBase), sync it?
+            // PaginationBase updates filterConfig.sort.
+            // We might need to override onPageChange to update mongoState directly or sync here.
+            // Actually, let's use the new operation method
+            const response = await this.entityCommunicationService.operation({
+                action: 'find',
+                query: this.mongoState.query,
+                projection: this.mongoState.projection,
+                options: this.mongoState.options,
+                payload: this.mongoState.payload,
+            });
+            // Assuming response structure matches what we need.
+            // If 'find' returns just array, we might need 'count' separately or use an aggregation that returns both.
+            // The user said: "Allows executing a variety of database operations through a single endpoint."
+            // Usually 'find' returns an array. Pagination requires count.
+            // Maybe we should use 'aggregate' to get both or make two calls.
+            // Or maybe the backend 'find' operation returns { rows, count }?
+            // The user example for 'updateOne' shows standard mongo stuff.
+            // Let's assume for now we might need to fetch count separately or the backend handles pagination metadata if requested.
+            // But typically 'find' returns a cursor/array.
+            // Let's check if we can get count.
+            // The user mentioned: "Bakcend single endpoint to handle everything in mongo."
+            // If I use 'find', I get items.
+            this.items.set(response); // If response is T[]
+            // We need total records for pagination.
+            // Use aggregate to count since 'count' action might not be explicitly supported or to be safe
+            const countResult = await this.entityCommunicationService.operation({
+                action: 'aggregate',
+                payload: [{ $match: this.mongoState.query }, { $count: 'total' }],
+            });
+            const count = countResult && countResult.length > 0 ? countResult[0].total : 0;
+            this.totalRecordsSignal.set(count);
+        }
+        catch (error) {
+            console.error('Error loading data', error);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    // Override onPageChange to update mongoState
+    async onPageChange(pageEvent) {
+        this.rows = pageEvent.rows;
+        this.first = pageEvent.page * this.rows;
+        this.mongoState.options.limit = this.rows;
+        this.mongoState.options.skip = this.first;
+        await this.loadData();
+        // We can still update URL param if we want, calling super or copying logic
+        // super.updatePageParam(pageEvent.page + 1); // private in super
+        // We'll leave URL update for now or implement if needed.
+    }
+    onNew() {
+        this.router.navigate(['./edit'], { relativeTo: this.route });
+    }
+    toggleView() {
+        this.viewType.update((v) => (v === 'card' ? 'table' : 'card'));
+    }
+    async doAction(actionEvent) {
+        const { item, action } = actionEvent;
+        if (!item) {
+            return;
+        }
+        const id = item?._id || item?.id;
+        switch (action) {
+            case 'view':
+                this.router.navigate(['./details', id], { relativeTo: this.route });
+                break;
+            case 'edit':
+                this.router.navigate(['./edit', id], { relativeTo: this.route });
+                break;
+            case 'delete':
+                const confirmed = confirm(`Are you sure you want to delete this item?`);
+                if (confirmed) {
+                    try {
+                        await this.entityCommunicationService.operation({
+                            action: 'deleteOne',
+                            query: { _id: id },
+                        });
+                    }
+                    catch (error) {
+                        console.error('Error deleting item', error);
+                    }
+                    finally {
+                        await this.loadData(); // Refresh list
+                    }
+                }
+                break;
+            case 'clone':
+                // Clone usually requires specific logic, maybe 'create' with modified data
+                // Or if backend supports 'clone' action via operation?
+                // The user listed: 'findOne', 'find', 'create', 'updateOne', 'updateMany', 'deleteOne', 'deleteMany', 'aggregate'.
+                // No 'clone'. So we might need to fetch, remove _id, and create.
+                const original = await this.entityCommunicationService.operation({ action: 'findOne', query: { _id: id } });
+                if (original) {
+                    const { _id, ...rest } = original;
+                    // Maybe add 'Copy' to name?
+                    await this.entityCommunicationService.operation({ action: 'create', payload: { ...rest, name: rest.name + ' (Copy)' } }); // Assumption on 'name'
+                    await this.loadData();
+                }
+                break;
+            case 'search':
+                // Search usually updates query
+                // This depends on how the filter bar sends events.
+                // If it sends a text, we might want to regex search on some fields.
+                // This logic might be better in the child component or configurable.
+                break;
+            default:
+            // this.handleCustomAction(actionEvent);
+        }
+    }
+    // Helper to update query from filter bar
+    updateQueryFromFilter(filterConfig) {
+        // Map filterConfig.filters to mongoState.query
+        // The filter bar returns { filters: { ... }, sort: ... }
+        if (filterConfig.filters) {
+            this.mongoState.query = { ...this.mongoState.query, ...filterConfig.filters };
+        }
+        if (filterConfig.sort) {
+            this.mongoState.options.sort = filterConfig.sort;
+        }
+        if (filterConfig.text) {
+            // Handle text search if needed, or let child handle it
+        }
+        // Reset pagination on filter change
+        this.first = 0;
+        this.mongoState.options.skip = 0;
+        this.loadData();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EntityBaseListV2Component, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: EntityBaseListV2Component, isStandalone: true, inputs: { initialViewType: { classPropertyName: "initialViewType", publicName: "initialViewType", isSignal: true, isRequired: false, transformFunction: null }, onlyView: { classPropertyName: "onlyView", publicName: "onlyView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EntityBaseListV2Component, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
 const TOAST_ALERTS_TOKEN = new InjectionToken('Toast alerts Service');
 class ToastAlertsAbstractService {
 }
@@ -1234,6 +1622,12 @@ class EntityBaseFormComponent {
         this.patchForm(result);
         return result;
     }
+    reload() {
+        const id = this.entityId();
+        if (id) {
+            this.loadEntityById(id);
+        }
+    }
     getDirtyValues(form) {
         const dirtyValues = {};
         Object.keys(form.controls).forEach((key) => {
@@ -3243,6 +3637,10 @@ class EntityCommunicationService {
     clone(id, overrides = {}) {
         return this.httpService.postHttp({ service: `api/${this.serviceName}/${id}/clone`, data: overrides });
     }
+    operation(params) {
+        debugger;
+        return this.httpService.postHttp({ service: `api/${this.serviceName}/operation`, data: params, host: this.customHost });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EntityCommunicationService, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EntityCommunicationService }); }
 }
@@ -3289,6 +3687,17 @@ class FormUtilsService {
             tags: this.fb.array([]),
         });
     }
+    patchLearnableFormGroup(form, data) {
+        if (data.tags) {
+            this.patchFormArray(form.controls.tags, data.tags);
+        }
+    }
+    patchFormArray(formArray, values) {
+        formArray.clear();
+        values.forEach((value) => {
+            formArray.push(this.fb.control(value));
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FormUtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FormUtilsService, providedIn: 'root' }); }
 }
@@ -3504,5 +3913,5 @@ const CharacterEventActions = [
  * Generated bundle index. Do not edit.
  */
 
-export { APP_CONFIG, AppConfigService, AudioNotificationService, AudioSpeed, AudioSpeedReverse, CharacterEventActions, ChatUserSettings, ConfirmComponent, ConfirmService, DCFilterBarComponent, DCProgressToastComponent, DcAuditableViewerComponent, DcExtensionsViewerComponent, DcLearnableFormComponent, DcLearnableViewerComponent, DcManageableFormComponent, DcManageableViewerComponent, DcReactionsViewerComponent, EModelQuality, EmptyStateComponent, EntityBaseFormComponent, EntityBaseListComponent, EntityCommunicationService, FlagPipe, FormUtilsService, GetPathPipe, HTTP_CORE_CONFIG, HttpCoreService, IAIModel, LANGUAGES, LangDescTranslation, LoadingBarComponent, LoadingBarService, MobileService, ModelQualityOptions, MoodState, MoodStateOptions, OptionValue, PaginationBase, PromptService, QuickTableComponent, SUPPORTED_LANGUAGES, TOAST_ALERTS_TOKEN, ToastAlertsAbstractService, UiStateService, availibleFilters, extractJsonFromString, formatCamelCaseString, getLangDesc, getSupportedLanguageOptions, provideToastAlert, sortOptions, sortTypes };
+export { APP_CONFIG, AppConfigService, AudioNotificationService, AudioSpeed, AudioSpeedReverse, CharacterEventActions, ChatUserSettings, ConfirmComponent, ConfirmService, DCFilterBarComponent, DCProgressToastComponent, DcAuditableViewerComponent, DcExtensionsViewerComponent, DcLearnableFormComponent, DcLearnableViewerComponent, DcManageableFormComponent, DcManageableViewerComponent, DcReactionsViewerComponent, DcTagsFormComponent, EModelQuality, EmptyStateComponent, EntityBaseFormComponent, EntityBaseListComponent, EntityBaseListV2Component, EntityCommunicationService, FlagPipe, FormUtilsService, GetPathPipe, HTTP_CORE_CONFIG, HttpCoreService, IAIModel, LANGUAGES, LangDescTranslation, LoadingBarComponent, LoadingBarService, MobileService, ModelQualityOptions, MoodState, MoodStateOptions, OptionValue, PaginationBase, PromptService, QuickTableComponent, SUPPORTED_LANGUAGES, TOAST_ALERTS_TOKEN, ToastAlertsAbstractService, UiStateService, availibleFilters, extractJsonFromString, formatCamelCaseString, getLangDesc, getSupportedLanguageOptions, provideToastAlert, sortOptions, sortTypes };
 //# sourceMappingURL=dataclouder-ngx-core.mjs.map