@dataclouder/ngx-core 0.1.37 → 0.1.39

package/fesm2022/dataclouder-ngx-core.mjs

@@ -1,77 +1,73 @@
 import * as i0 from '@angular/core';
-import { input, Input, Component, inject, output, ChangeDetectionStrategy, HostListener, ChangeDetectorRef, Injectable, Pipe, signal, effect, ViewChild, Directive, InjectionToken, Optional, Inject } 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 * as i1 from '@angular/forms';
 import { FormBuilder, FormsModule, ReactiveFormsModule, FormControl, ControlContainer, FormGroup, FormArray } from '@angular/forms';
 import * as i2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i4 from 'primeng/dialog';
+import * as i3$1 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i5 from 'primeng/select';
-import { SelectModule } from 'primeng/select';
-import * as i6 from 'primeng/multiselect';
-import { MultiSelectModule } from 'primeng/multiselect';
-import * as i7 from 'primeng/datepicker';
-import { DatePickerModule } from 'primeng/datepicker';
-import * as i8 from 'primeng/inputtext';
+import * as i4$1 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i9 from 'primeng/inputgroup';
+import * as i5$1 from 'primeng/inputgroup';
 import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
-import * as i3 from 'primeng/api';
-import { MessageService, FilterMatchMode } from 'primeng/api';
-import { DynamicDialogConfig, DynamicDialogRef, DialogService } from 'primeng/dynamicdialog';
+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 { MultiSelectModule } from 'primeng/multiselect';
+import * as i5 from 'primeng/datepicker';
+import { DatePickerModule } from 'primeng/datepicker';
 import * as i2$1 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
-import * as i3$1 from 'primeng/progressbar';
+import * as i2$3 from 'primeng/api';
+import { MessageService, FilterMatchMode } from 'primeng/api';
+import * as i3$2 from 'primeng/progressbar';
 import { ProgressBarModule, ProgressBar } from 'primeng/progressbar';
 import * as i2$2 from 'primeng/toast';
 import { ToastModule, Toast } from 'primeng/toast';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { CardModule } from 'primeng/card';
 import { RouterModule, ActivatedRoute, Router } from '@angular/router';
 import { SpeedDialModule } from 'primeng/speeddial';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i3$2 from 'primeng/table';
+import * as i4$2 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import { get } from 'lodash';
-import * as i5$1 from 'primeng/tag';
+import * as i6 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
-import * as i1$2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i1$1 from 'primeng/fieldset';
+import * as i1$2 from 'primeng/fieldset';
 import { FieldsetModule } from 'primeng/fieldset';
 import * as i3$3 from 'primeng/chip';
 import { ChipModule } from 'primeng/chip';
 import { AvatarModule } from 'primeng/avatar';
-import * as i2$3 from 'primeng/checkbox';
+import * as i2$4 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
-import * as i4$1 from 'primeng/tooltip';
+import * as i4$3 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import * as i2$4 from 'primeng/inputnumber';
+import * as i2$5 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs/operators';
-import { firstValueFrom, tap, catchError, lastValueFrom, throwError, map as map$1 } from 'rxjs';
-import * as i4$2 from 'primeng/textarea';
+import { firstValueFrom, catchError, lastValueFrom, tap, throwError, map as map$1 } from 'rxjs';
+import * as i4$4 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
 import { HttpClient, HttpEventType } from '@angular/common/http';
 
 class EmptyStateComponent {
     constructor() {
-        this.headingText = 'No existe el recurso que buscas';
-        this.subHeadingText = 'Intenta más tarde';
+        this.headingText = input('No existe el recurso que buscas', ...(ngDevMode ? [{ debugName: "headingText" }] : []));
+        this.subHeadingText = input('Intenta más tarde', ...(ngDevMode ? [{ debugName: "subHeadingText" }] : []));
         this.mainIconSrcString = input('assets/img/empty-states/empty-box.png', ...(ngDevMode ? [{ debugName: "mainIconSrcString" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: EmptyStateComponent, isStandalone: true, selector: "dc-empty-state", inputs: { headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: false, isRequired: false, transformFunction: null }, subHeadingText: { classPropertyName: "subHeadingText", publicName: "subHeadingText", isSignal: false, isRequired: false, transformFunction: null }, mainIconSrcString: { classPropertyName: "mainIconSrcString", publicName: "mainIconSrcString", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid justify-content-center\">\n  <div class=\"empty-state-content\">\n    @if (headingText) {\n      <h5 class=\"text-center\">{{ headingText }}</h5>\n    }\n    <img width=\"180px\" class=\"image-empty-state\" src=\"{{ mainIconSrcString() }}\" />\n    @if (subHeadingText) {\n      <h6>{{ subHeadingText }}</h6>\n    }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".empty-state-content{padding-top:20px}.empty-state-content .image-empty-state{filter:grayscale(40%);padding-top:10px}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: EmptyStateComponent, isStandalone: true, selector: "dc-empty-state", inputs: { headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: false, transformFunction: null }, subHeadingText: { classPropertyName: "subHeadingText", publicName: "subHeadingText", isSignal: true, isRequired: false, transformFunction: null }, mainIconSrcString: { classPropertyName: "mainIconSrcString", publicName: "mainIconSrcString", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"empty-state-container\">\n  @if (headingText()) {\n  <h5 class=\"text-center\">{{ headingText() }}</h5>\n  }\n  <img width=\"180px\" class=\"image-empty-state\" [src]=\"mainIconSrcString()\" />\n  @if (subHeadingText()) {\n  <h6 class=\"text-center\">{{ subHeadingText() }}</h6>\n  }\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.empty-state-container{padding:20px;text-align:center;height:100%;flex-direction:column;display:flex;align-items:center}.empty-state-container .image-empty-state{filter:grayscale(40%);margin:15px 0}.empty-state-container h5{margin-bottom:10px}.empty-state-container h6{color:var(--text-color-secondary);margin-top:0}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-empty-state', standalone: true, imports: [], template: "<div class=\"grid justify-content-center\">\n  <div class=\"empty-state-content\">\n    @if (headingText) {\n      <h5 class=\"text-center\">{{ headingText }}</h5>\n    }\n    <img width=\"180px\" class=\"image-empty-state\" src=\"{{ mainIconSrcString() }}\" />\n    @if (subHeadingText) {\n      <h6>{{ subHeadingText }}</h6>\n    }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".empty-state-content{padding-top:20px}.empty-state-content .image-empty-state{filter:grayscale(40%);padding-top:10px}\n"] }]
-        }], propDecorators: { headingText: [{
-                type: Input
-            }], subHeadingText: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'dc-empty-state', standalone: true, imports: [], template: "<div class=\"empty-state-container\">\n  @if (headingText()) {\n  <h5 class=\"text-center\">{{ headingText() }}</h5>\n  }\n  <img width=\"180px\" class=\"image-empty-state\" [src]=\"mainIconSrcString()\" />\n  @if (subHeadingText()) {\n  <h6 class=\"text-center\">{{ subHeadingText() }}</h6>\n  }\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.empty-state-container{padding:20px;text-align:center;height:100%;flex-direction:column;display:flex;align-items:center}.empty-state-container .image-empty-state{filter:grayscale(40%);margin:15px 0}.empty-state-container h5{margin-bottom:10px}.empty-state-container h6{color:var(--text-color-secondary);margin-top:0}\n"] }]
+        }] });
 
 const availibleFilters = [
     { name: 'Tomadas', code: 'taken' },
@@ -99,39 +95,19 @@ const sortTypes = [
     { name: 'Populares', code: 'popular', sort: { takenCount: -1 } },
 ];
 
-const DEFAULT_FILTERS = { filters: {}, page: 0, rowsPerPage: 10, sort: { _id: -1 } };
-class DCFilterBarComponent {
+class DcListFilterDialogComponent {
     constructor() {
         this.fb = inject(FormBuilder);
-        // Signal Inputs
-        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-        this.options = input({ showCreateButton: true }, ...(ngDevMode ? [{ debugName: "options" }] : []));
-        // public userService = inject(UserService);
-        // Inputs
-        this.customFilters = [];
-        this.isAdmin = false;
-        // Outputs
-        this.onFilterAction = output();
-        this.onChangeSort = output();
-        this.onNew = output();
+        this.ref = inject(DynamicDialogRef);
+        this.config = inject(DynamicDialogConfig);
+        this.customFilters = this.config.data.customFilters || [];
         this.availibleFilters = availibleFilters;
         this.sortOptions = sortOptions;
-        this.isSearchVisible = false;
-        this.isFilterVisible = false;
-        this.placeholder = '';
-        this.filter = { ...DEFAULT_FILTERS };
         this.selectedFilters = [];
         this.selectedSort = null;
         this.dateRange = [];
-    }
-    ngOnInit() {
         this.buildCustomFiltersForm();
     }
-    ngOnChanges(changes) {
-        if (changes['customFilters']) {
-            this.buildCustomFiltersForm();
-        }
-    }
     buildCustomFiltersForm() {
         const formControls = {};
         for (const filter of this.customFilters) {
@@ -139,18 +115,55 @@ class DCFilterBarComponent {
         }
         this.customFiltersForm = this.fb.group(formControls);
     }
-    changeFilter(event) {
-        console.log('Filter changed');
+    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;
+        }, {});
+        this.ref.close({
+            action: 'apply',
+            filters: activeFilters,
+            sort: this.selectedSort,
+            dateRange: this.dateRange,
+            quickFilters: this.selectedFilters,
+        });
     }
-    changeSort(event) {
-        console.log('Sort changed', event.value);
-        this.onChangeSort.emit(event.value);
+    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 }); }
+}
+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"] }]
+        }], ctorParameters: () => [] });
+
+const DEFAULT_FILTERS = { filters: {}, page: 0, rowsPerPage: 10, sort: { _id: -1 } };
+class DCFilterBarComponent {
+    constructor() {
+        this.dialogService = inject(DialogService);
+        // Signal Inputs
+        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.options = input({ showCreateButton: true }, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        // Inputs
+        this.customFilters = [];
+        this.isAdmin = false;
+        // Outputs
+        this.onFilterAction = output();
+        this.onNew = output();
+        // Internal State
+        this.isSearchVisible = false;
+        this.placeholder = '';
+        this.filter = { ...DEFAULT_FILTERS };
     }
     createNew() {
-        console.log('createNew from core components');
         this.onNew.emit('new');
     }
-    search(text = null) {
+    search(text) {
         if (!text) {
             this.placeholder = '';
             this.clearFilters();
@@ -160,42 +173,47 @@ class DCFilterBarComponent {
         }
         this.isSearchVisible = false;
     }
-    clearFilters() {
-        this.filter = { ...DEFAULT_FILTERS };
+    openFilterDialog() {
+        const ref = this.dialogService.open(DcListFilterDialogComponent, {
+            header: 'Filtros',
+            width: '70vw',
+            height: '70vh',
+            contentStyle: { 'max-height': '90vh', overflow: 'auto', 'min-height': '500px', height: '100%' },
+            data: { customFilters: this.customFilters },
+            closable: true,
+            modal: true,
+            maximizable: true,
+        });
+        ref.onClose.subscribe((result) => {
+            if (result) {
+                if (result.action === 'clear') {
+                    this.clearFilters();
+                }
+                else if (result.action === 'apply') {
+                    this.applyFilters(result);
+                }
+            }
+        });
+    }
+    applyFilters(result) {
+        const newFilters = { ...this.filter.filters, ...result.filters };
+        this.filter = { ...this.filter, filters: newFilters };
+        // Handle other filter types from result if necessary (sort, dateRange, etc.)
         this.doItemAction({ action: 'filterChange', item: this.filter });
     }
-    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;
-        }, {});
-        this.filter.filters = { ...this.filter.filters, ...activeFilters };
+    clearFilters() {
+        this.filter = { ...DEFAULT_FILTERS };
         this.doItemAction({ action: 'filterChange', item: this.filter });
-        this.isFilterVisible = false;
     }
     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", onChangeSort: "onChangeSort", onNew: "onNew" }, usesOnChanges: true, 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)=\"isFilterVisible = true\" />\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\" />\n    </p-inputgroup>\n  </div>\n</p-dialog>\n\n<p-dialog [(visible)]=\"isFilterVisible\" [modal]=\"true\" [style]=\"{ width: '70vw', height: '70vh' }\" [header]=\"'Filtros'\">\n  <div class=\"flex flex-column gap-4\">\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\n      [options]=\"availibleFilters\"\n      [(ngModel)]=\"selectedFilters\"\n      optionLabel=\"name\"\n      placeholder=\"Filtros R\u00E1pidos\"\n      [maxSelectedLabels]=\"3\"\n      styleClass=\"w-full md:w-80\" />\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\n    <!-- Recent/All Toggle -->\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"flex justify-content-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  </ng-template>\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.ɵ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: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4.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: SelectModule }, { kind: "component", type: i5.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: i6.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: i7.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"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i8.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i9.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 } }, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCFilterBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-filter-bar', standalone: true, imports: [
-                        FormsModule,
-                        ReactiveFormsModule,
-                        ButtonModule,
-                        DialogModule,
-                        SelectModule,
-                        MultiSelectModule,
-                        DatePickerModule,
-                        InputTextModule,
-                        InputGroupModule,
-                        InputGroupAddonModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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)=\"isFilterVisible = true\" />\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\" />\n    </p-inputgroup>\n  </div>\n</p-dialog>\n\n<p-dialog [(visible)]=\"isFilterVisible\" [modal]=\"true\" [style]=\"{ width: '70vw', height: '70vh' }\" [header]=\"'Filtros'\">\n  <div class=\"flex flex-column gap-4\">\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\n      [options]=\"availibleFilters\"\n      [(ngModel)]=\"selectedFilters\"\n      optionLabel=\"name\"\n      placeholder=\"Filtros R\u00E1pidos\"\n      [maxSelectedLabels]=\"3\"\n      styleClass=\"w-full md:w-80\" />\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\n    <!-- Recent/All Toggle -->\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"flex justify-content-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  </ng-template>\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"] }]
+            args: [{ selector: 'dc-filter-bar', standalone: true, imports: [FormsModule, ButtonModule, DialogModule, InputTextModule, InputGroupModule, InputGroupAddonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [DialogService], 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"] }]
         }], propDecorators: { customFilters: [{
                 type: Input
             }], isAdmin: [{
@@ -313,7 +331,7 @@ class DCProgressToastComponent {
         this.processClosed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCProgressToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DCProgressToastComponent, isStandalone: true, selector: "dc-progress-toast", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { processCompleted: "processCompleted", processClosed: "processClosed" }, providers: [MessageService], usesOnChanges: true, ngImport: i0, template: "<div class=\"card flex justify-center\">\n  <p-toast position=\"top-center\" key=\"confirm\" (onClose)=\"onClose()\" [baseZIndex]=\"9000\">\n    <ng-template let-message #headless let-closeFn=\"closeFn\">\n      <section style=\"padding: 15px\">\n        <div>\n          <i class=\"pi pi-cloud-upload\"></i>\n          <span>{{ message.summary }}</span>\n        </div>\n        <div>\n          <p-progressbar [value]=\"progress()\" [showValue]=\"false\" [style]=\"{ height: '6px' }\" />\n\n          <label style=\"color: beige\">{{ progress() }}% uploaded</label>\n        </div>\n        <div>\n          <p-button label=\"Another Upload?\" (click)=\"closeFn($event)\" size=\"small\" />\n          <p-button label=\"Cancel\" (click)=\"closeFn($event)\" size=\"small\" />\n        </div>\n      </section>\n    </ng-template>\n  </p-toast>\n</div>\n", styles: [""], dependencies: [{ 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: ToastModule }, { kind: "component", type: i2$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i3$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DCProgressToastComponent, isStandalone: true, selector: "dc-progress-toast", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { processCompleted: "processCompleted", processClosed: "processClosed" }, providers: [MessageService], usesOnChanges: true, ngImport: i0, template: "<div class=\"card flex justify-center\">\n  <p-toast position=\"top-center\" key=\"confirm\" (onClose)=\"onClose()\" [baseZIndex]=\"9000\">\n    <ng-template let-message #headless let-closeFn=\"closeFn\">\n      <section style=\"padding: 15px\">\n        <div>\n          <i class=\"pi pi-cloud-upload\"></i>\n          <span>{{ message.summary }}</span>\n        </div>\n        <div>\n          <p-progressbar [value]=\"progress()\" [showValue]=\"false\" [style]=\"{ height: '6px' }\" />\n\n          <label style=\"color: beige\">{{ progress() }}% uploaded</label>\n        </div>\n        <div>\n          <p-button label=\"Another Upload?\" (click)=\"closeFn($event)\" size=\"small\" />\n          <p-button label=\"Cancel\" (click)=\"closeFn($event)\" size=\"small\" />\n        </div>\n      </section>\n    </ng-template>\n  </p-toast>\n</div>\n", styles: [""], dependencies: [{ 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: ToastModule }, { kind: "component", type: i2$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i3$2.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCProgressToastComponent, decorators: [{
             type: Component,
@@ -490,7 +508,7 @@ class LoadingBarComponent {
         this.loadingBarService = inject(LoadingBarService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: LoadingBarComponent, isStandalone: true, selector: "dc-loading-bar", providers: [MessageService], ngImport: i0, template: "@if (loadingBarService.isShowing) {\n<p-progressbar [color]=\"loadingBarService.color\" [mode]=\"loadingBarService.mode\" [style]=\"{ height: '4px' }\" [value]=\"loadingBarService.progress\" />\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i3$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: LoadingBarComponent, isStandalone: true, selector: "dc-loading-bar", providers: [MessageService], ngImport: i0, template: "@if (loadingBarService.isShowing) {\n<p-progressbar [color]=\"loadingBarService.color\" [mode]=\"loadingBarService.mode\" [style]=\"{ height: '4px' }\" [value]=\"loadingBarService.progress\" />\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i3$2.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LoadingBarComponent, decorators: [{
             type: Component,
@@ -517,6 +535,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 }]
         }] });
 
+/*
+READ the Quick Table MD to more info how to use
+Inputs
+  columns: PColumn[];
+  tableData: any[];
+  actions: MenuItem[];
+Outputs
+  onAction: OnActionEvent;
+*/
 class QuickTableComponent {
     constructor() {
         // Inputs
@@ -613,6 +640,24 @@ class QuickTableComponent {
                         options: uniqueTags,
                     };
                 }
+                else if (col.type === 'select') {
+                    let options = col.options;
+                    if (!options) {
+                        const uniqueOptions = Array.from(new Set(this.tableData().map((item) => item[col.field])));
+                        options = uniqueOptions.map((option) => ({ label: option, value: option }));
+                    }
+                    filterObj[col.field] = {
+                        value: null,
+                        matchMode: FilterMatchMode.EQUALS,
+                        options: options,
+                    };
+                }
+                else if (col.type === 'boolean') {
+                    filterObj[col.field] = {
+                        value: null,
+                        matchMode: FilterMatchMode.EQUALS,
+                    };
+                }
             });
         }
         this.filters.set(filterObj);
@@ -640,13 +685,22 @@ class QuickTableComponent {
             console.log(filteredData);
             this._tableData.set(filteredData);
         }
+        else if (type === 'select') {
+            if (!value) {
+                this._tableData.set(this.tableData());
+                return;
+            }
+            const filteredData = this.tableData().filter((item) => item[column] === value);
+            this._tableData.set(filteredData);
+        }
     }
     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 {\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 {\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: CardModule }, { kind: "directive", type: i3.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: i3$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: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i3$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: i8.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i5$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i6.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: 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: QuickTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-quick-table', imports: [
+                        CommonModule,
                         CardModule,
                         ButtonModule,
                         SpeedDialModule,
@@ -658,7 +712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         TagModule,
                         SelectModule,
                         MultiSelectModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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 {\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 {\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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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"] }]
         }], ctorParameters: () => [], propDecorators: { tableRef: [{
                 type: ViewChild,
                 args: ['tableRef']
@@ -715,7 +769,7 @@ class DcAuditableViewerComponent {
       </div>
     </p-fieldset>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FieldsetModule }, { kind: "component", type: i1$1.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i5$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i3$3.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FieldsetModule }, { kind: "component", type: i1$2.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i6.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i3$3.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcAuditableViewerComponent, decorators: [{
             type: Component,
@@ -778,7 +832,7 @@ class DcExtensionsViewerComponent {
         this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcExtensionsViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcExtensionsViewerComponent, isStandalone: true, selector: "dc-extensions-viewer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<pre>{{ data() | json }}</pre>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcExtensionsViewerComponent, isStandalone: true, selector: "dc-extensions-viewer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<pre>{{ data() | json }}</pre>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcExtensionsViewerComponent, decorators: [{
             type: Component,
@@ -795,7 +849,7 @@ class DcLearnableViewerComponent {
         this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLearnableViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcLearnableViewerComponent, isStandalone: true, selector: "dc-learnable-viewer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<pre>{{ data() | json }}</pre>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcLearnableViewerComponent, isStandalone: true, selector: "dc-learnable-viewer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<pre>{{ data() | json }}</pre>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLearnableViewerComponent, decorators: [{
             type: Component,
@@ -812,7 +866,7 @@ class DcManageableViewerComponent {
         this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcManageableViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcManageableViewerComponent, isStandalone: true, selector: "dc-manageable-viewer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<pre>{{ data() | json }}</pre>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcManageableViewerComponent, isStandalone: true, selector: "dc-manageable-viewer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<pre>{{ data() | json }}</pre>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcManageableViewerComponent, decorators: [{
             type: Component,
@@ -829,7 +883,7 @@ class DcReactionsViewerComponent {
         this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcReactionsViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcReactionsViewerComponent, isStandalone: true, selector: "dc-reactions-viewer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<pre>{{ data() | json }}</pre>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcReactionsViewerComponent, isStandalone: true, selector: "dc-reactions-viewer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<pre>{{ data() | json }}</pre>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcReactionsViewerComponent, decorators: [{
             type: Component,
@@ -852,7 +906,7 @@ class DcManageableFormComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcManageableFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcManageableFormComponent, isStandalone: true, selector: "dc-manageable-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  <div style=\"display: flex; justify-content: space-between\">\n    <div class=\"form-field checkbox\">\n      <label>\n        <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n        Public <span pTooltip=\"Is this content visible to all users?\">\u2139\uFE0F</span>\n      </label>\n    </div>\n\n    <div class=\"form-field\">\n      <label for=\"status\">Status <span pTooltip=\"Status of the content\">\u2139\uFE0F</span></label>\n      <p-select\n        id=\"status\"\n        [options]=\"statusOptions\"\n        formControlName=\"status\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Status'\"></p-select>\n    </div>\n  </div>\n</div>\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: CheckboxModule }, { kind: "component", type: i2$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.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: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcManageableFormComponent, isStandalone: true, selector: "dc-manageable-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  <div style=\"display: flex; justify-content: space-between\">\n    <div class=\"form-field checkbox\">\n      <label>\n        <p-checkbox [binary]=\"true\" formControlName=\"isPublic\" />\n        Public <span pTooltip=\"Is this content visible to all users?\">\u2139\uFE0F</span>\n      </label>\n    </div>\n\n    <div class=\"form-field\">\n      <label for=\"status\">Status <span pTooltip=\"Status of the content\">\u2139\uFE0F</span></label>\n      <p-select\n        id=\"status\"\n        [options]=\"statusOptions\"\n        formControlName=\"status\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [placeholder]=\"'Select Status'\"></p-select>\n    </div>\n  </div>\n</div>\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: CheckboxModule }, { kind: "component", type: i2$4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: 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: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcManageableFormComponent, decorators: [{
             type: Component,
@@ -881,7 +935,7 @@ class DcTagsFormComponent {
         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: i8.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", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }], viewProviders: [
+    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", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }], viewProviders: [
             {
                 provide: ControlContainer,
                 useFactory: () => inject(ControlContainer, { skipSelf: true }),
@@ -903,7 +957,7 @@ class DcLearnableFormComponent {
         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$4.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$1.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 />\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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLearnableFormComponent, decorators: [{
             type: Component,
@@ -1059,18 +1113,19 @@ class EntityBaseListComponent extends PaginationBase {
         if (!item) {
             return;
         }
+        const id = item?._id || item?.id;
         switch (action) {
             case 'view':
-                this.router.navigate(['./details', item._id], { relativeTo: this.route });
+                this.router.navigate(['./details', id], { relativeTo: this.route });
                 break;
             case 'edit':
-                this.router.navigate(['./edit', item._id], { relativeTo: this.route });
+                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.remove(item._id);
+                        await this.entityCommunicationService.remove(id);
                     }
                     catch (error) {
                         console.error('Error deleting item', error);
@@ -1081,7 +1136,7 @@ class EntityBaseListComponent extends PaginationBase {
                 }
                 break;
             case 'clone':
-                await this.entityCommunicationService.clone(item._id);
+                await this.entityCommunicationService.clone(id);
                 await this.loadData(); // Refresh list
                 break;
             default:
@@ -1137,8 +1192,10 @@ class EntityBaseFormComponent {
         this.route = inject(ActivatedRoute);
         this.router = inject(Router);
         this.toastService = inject(TOAST_ALERTS_TOKEN, { optional: true });
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
         this.entity = signal(undefined, ...(ngDevMode ? [{ debugName: "entity" }] : []));
-        this.entityId = toSignal(this.route.paramMap.pipe(map((params) => params.get('id'))));
+        this.entityIdFromUrl = toSignal(this.route.paramMap.pipe(map((params) => params.get('id'))));
+        this.entityId = computed(() => this.id() ?? this.entityIdFromUrl(), ...(ngDevMode ? [{ debugName: "entityId" }] : []));
         this.loadEntityEffect = effect(async () => {
             const id = this.entityId();
             if (id) {
@@ -1158,9 +1215,10 @@ class EntityBaseFormComponent {
                 // if there is no id, we create a new entity
                 try {
                     const newEntity = await this.entityCommunicationService.createOrUpdate({});
-                    if (newEntity?._id) {
+                    const id = newEntity?._id || newEntity?.['id'];
+                    if (id) {
                         // we replace the url to avoid creating a new entity when the user goes back
-                        this.router.navigate([newEntity._id], { relativeTo: this.route, replaceUrl: true });
+                        this.router.navigate([id], { relativeTo: this.route, replaceUrl: true });
                     }
                 }
                 catch (err) {
@@ -1208,7 +1266,7 @@ class EntityBaseFormComponent {
         return this.entityCommunicationService.partialUpdate(this.entityId(), dirtyValues);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EntityBaseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: EntityBaseFormComponent, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.6", type: EntityBaseFormComponent, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EntityBaseFormComponent, decorators: [{
             type: Directive
@@ -1345,6 +1403,7 @@ const LANGUAGES = {
         flag: '🇺🇸', // Using US flag as a primary example
         flagImg: 'assets/flags/us.svg',
         code: 'en',
+        defaultLocale: 'en-US',
         i: 1,
         llmKnowledge: 100,
         countries: ['United Kingdom', 'United States', 'Canada', 'Australia', 'New Zealand', 'Ireland', 'South Africa', 'India', 'and many others.'],
@@ -1360,6 +1419,7 @@ const LANGUAGES = {
         flag: '🇪🇸', // Using Spain flag as a primary example
         flagImg: 'assets/flags/es.svg',
         code: 'es',
+        defaultLocale: 'es-ES',
         i: 2,
         llmKnowledge: 99,
         countries: [
@@ -1396,6 +1456,7 @@ const LANGUAGES = {
         flag: '🇩🇪',
         flagImg: 'assets/flags/de.svg',
         code: 'de',
+        defaultLocale: 'de-DE',
         i: 3,
         llmKnowledge: 97,
         countries: ['Germany', 'Austria', 'Switzerland', 'Belgium', 'Luxembourg', 'Liechtenstein.'],
@@ -1411,6 +1472,7 @@ const LANGUAGES = {
         flag: '🇫🇷',
         flagImg: 'assets/flags/fr.svg',
         code: 'fr',
+        defaultLocale: 'fr-FR',
         i: 4,
         llmKnowledge: 96,
         countries: ['France', 'Canada', 'Belgium', 'Switzerland', 'Haiti', 'Ivory Coast', 'Senegal', 'Cameroon', 'Madagascar', 'and many others.'],
@@ -1426,6 +1488,7 @@ const LANGUAGES = {
         flag: '🇮🇹',
         flagImg: 'assets/flags/it.svg',
         code: 'it',
+        defaultLocale: 'it-IT',
         i: 6,
         llmKnowledge: 93,
         countries: ['Italy', 'Switzerland', 'San Marino', 'Vatican City.'],
@@ -1441,6 +1504,7 @@ const LANGUAGES = {
         flag: '🇧🇷',
         flagImg: 'assets/flags/br.svg',
         code: 'pt',
+        defaultLocale: 'pt-BR',
         i: 7,
         llmKnowledge: 92,
         countries: ['Portugal', 'Brazil', 'Angola', 'Mozambique', 'Cape Verde', 'Guinea-Bissau', 'Sao Tome and Principe', 'East Timor', 'Macau.'],
@@ -1456,6 +1520,7 @@ const LANGUAGES = {
         flag: '🇯🇵',
         flagImg: 'assets/flags/jp.svg',
         code: 'ja',
+        defaultLocale: 'ja-JP',
         i: 8,
         llmKnowledge: 91,
         countries: ['Japan.'],
@@ -1471,6 +1536,7 @@ const LANGUAGES = {
         flag: '🇳🇱',
         flagImg: 'assets/flags/nl.svg',
         code: 'nl',
+        defaultLocale: 'nl-NL',
         i: 9,
         llmKnowledge: 90,
         countries: ['Netherlands', 'Belgium', 'Suriname', 'Aruba', 'Curaçao', 'Sint Maarten.'],
@@ -1480,13 +1546,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 25000000,
-        releaseDate: '2025-09-15',
+        releaseDate: '2025-11-03',
     },
     zh: {
         nativeName: '中文 (Zhōngwén)',
         flag: '🇨🇳',
         flagImg: 'assets/flags/cn.svg',
         code: 'zh',
+        defaultLocale: 'zh-CN',
         i: 5,
         llmKnowledge: 94,
         countries: ['China', 'Singapore', 'Taiwan.'],
@@ -1496,13 +1563,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 1120000000,
-        releaseDate: '2025-09-22',
+        releaseDate: '2025-11-10',
     },
     ru: {
         nativeName: 'Русский (Russkiy)',
         flag: '🇷🇺',
         flagImg: 'assets/flags/ru.svg',
         code: 'ru',
+        defaultLocale: 'ru-RU',
         i: 10, // Adjusted index
         llmKnowledge: 89,
         countries: ['Russia', 'Belarus', 'Kazakhstan', 'Kyrgyzstan', 'Tajikistan (co-official)', 'Abkhazia', 'South Ossetia', 'Transnistria.'],
@@ -1512,13 +1580,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 258000000,
-        releaseDate: '2025-09-22',
+        releaseDate: '2025-11-17',
     },
     ko: {
         nativeName: '한국어 (Hangugeo)',
         flag: '🇰🇷',
         flagImg: 'assets/flags/kr.svg',
         code: 'ko',
+        defaultLocale: 'ko-KR',
         i: 11,
         llmKnowledge: 87,
         countries: ['South Korea', 'North Korea.'],
@@ -1528,13 +1597,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 82000000,
-        releaseDate: '2025-09-22',
+        releaseDate: '2025-11-24',
     },
     pl: {
         nativeName: 'Polski',
         flag: '🇵🇱',
         flagImg: 'assets/flags/pl.svg',
         code: 'pl',
+        defaultLocale: 'pl-PL',
         i: 12,
         llmKnowledge: 86,
         countries: ['Poland.'],
@@ -1544,13 +1614,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 40000000,
-        releaseDate: '2025-09-29',
+        releaseDate: '2025-12-01',
     },
     sv: {
         nativeName: 'Svenska',
         flag: '🇸🇪',
         flagImg: 'assets/flags/se.svg',
         code: 'sv',
+        defaultLocale: 'sv-SE',
         i: 13,
         llmKnowledge: 85,
         countries: ['Sweden', 'Finland (co-official).'],
@@ -1560,13 +1631,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 10000000,
-        releaseDate: '2025-10-06',
+        releaseDate: '2025-12-08',
     },
     tr: {
         nativeName: 'Türkçe',
         flag: '🇹🇷',
         flagImg: 'assets/flags/tr.svg',
         code: 'tr',
+        defaultLocale: 'tr-TR',
         i: 14,
         llmKnowledge: 84,
         countries: ['Turkey', 'Cyprus (North).'],
@@ -1576,13 +1648,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 88000000,
-        releaseDate: '2025-10-06',
+        releaseDate: '2025-12-15',
     },
     ar: {
         nativeName: 'العربية (Al-Arabiyyah)',
         flag: '🇸🇦',
         flagImg: 'assets/flags/sa.svg',
         code: 'ar',
+        defaultLocale: 'ar-SA',
         i: 15,
         llmKnowledge: 83,
         countries: [
@@ -1618,13 +1691,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 422000000,
-        releaseDate: '2025-10-13',
+        releaseDate: '2025-12-22',
     },
     vi: {
         nativeName: 'Tiếng Việt',
         flag: '🇻🇳',
         flagImg: 'assets/flags/vn.svg',
         code: 'vi',
+        defaultLocale: 'vi-VN',
         i: 16,
         llmKnowledge: 82,
         countries: ['Vietnam.'],
@@ -1634,13 +1708,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 90000000,
-        releaseDate: '2025-10-20',
+        releaseDate: '2025-12-29',
     },
     id: {
         nativeName: 'Bahasa Indonesia',
         flag: '🇮🇩',
         flagImg: 'assets/flags/id.svg',
         code: 'id',
+        defaultLocale: 'id-ID',
         i: 17,
         llmKnowledge: 81,
         countries: ['Indonesia.'],
@@ -1650,13 +1725,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 199000000,
-        releaseDate: '2025-10-20',
+        releaseDate: '2026-01-05',
     },
     da: {
         nativeName: 'Dansk',
         flag: '🇩🇰',
         flagImg: 'assets/flags/dk.svg',
         code: 'da',
+        defaultLocale: 'da-DK',
         i: 18,
         llmKnowledge: 80,
         countries: ['Denmark', 'Faroe Islands (co-official)', 'Greenland (co-official).'],
@@ -1666,13 +1742,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 6000000,
-        releaseDate: '2025-10-27',
+        releaseDate: '2026-01-12',
     },
     no: {
         nativeName: 'Norsk',
         flag: '🇳🇴',
         flagImg: 'assets/flags/no.svg',
         code: 'no',
+        defaultLocale: 'no-NO',
         i: 19,
         llmKnowledge: 79,
         countries: ['Norway.'],
@@ -1682,13 +1759,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 5300000,
-        releaseDate: '2025-10-27',
+        releaseDate: '2026-01-19',
     },
     fi: {
         nativeName: 'Suomi',
         flag: '🇫🇮',
         flagImg: 'assets/flags/fi.svg',
         code: 'fi',
+        defaultLocale: 'fi-FI',
         i: 20,
         llmKnowledge: 78,
         countries: ['Finland.'],
@@ -1698,13 +1776,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 5400000,
-        releaseDate: '2025-11-03',
+        releaseDate: '2026-01-26',
     },
     cs: {
         nativeName: 'Čeština',
         flag: '🇨🇿',
         flagImg: 'assets/flags/cz.svg',
         code: 'cs',
+        defaultLocale: 'cs-CZ',
         i: 21,
         llmKnowledge: 77,
         countries: ['Czech Republic.'],
@@ -1714,13 +1793,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 10700000,
-        releaseDate: '2025-11-03',
+        releaseDate: '2026-02-02',
     },
     el: {
         nativeName: 'Ελληνικά (Elliniká)',
         flag: '🇬🇷',
         flagImg: 'assets/flags/gr.svg',
         code: 'el',
+        defaultLocale: 'el-GR',
         i: 22,
         llmKnowledge: 76,
         countries: ['Greece', 'Cyprus.'],
@@ -1730,13 +1810,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 13500000,
-        releaseDate: '2025-11-17',
+        releaseDate: '2026-02-09',
     },
     hu: {
         nativeName: 'Magyar',
         flag: '🇭🇺',
         flagImg: 'assets/flags/hu.svg',
         code: 'hu',
+        defaultLocale: 'hu-HU',
         i: 23,
         llmKnowledge: 75,
         countries: ['Hungary.'],
@@ -1746,13 +1827,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 13000000,
-        releaseDate: '2025-11-25',
+        releaseDate: '2026-02-16',
     },
     ro: {
         nativeName: 'Română',
         flag: '🇷🇴',
         flagImg: 'assets/flags/ro.svg',
         code: 'ro',
+        defaultLocale: 'ro-RO',
         i: 24,
         llmKnowledge: 74,
         countries: ['Romania', 'Moldova (as Moldovan).'],
@@ -1762,13 +1844,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 24000000,
-        releaseDate: '2025-12-01',
+        releaseDate: '2026-02-23',
     },
     uk: {
         nativeName: 'Українська (Ukrainska)',
         flag: '🇺🇦',
         flagImg: 'assets/flags/ua.svg',
         code: 'uk',
+        defaultLocale: 'uk-UA',
         i: 25,
         llmKnowledge: 73,
         countries: ['Ukraine.'],
@@ -1778,13 +1861,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 33000000,
-        releaseDate: '2025-12-08',
+        releaseDate: '2026-03-02',
     },
     he: {
         nativeName: 'עברית (Ivrit)',
         flag: '🇮🇱',
         flagImg: 'assets/flags/il.svg',
         code: 'he',
+        defaultLocale: 'he-IL',
         i: 26,
         llmKnowledge: 72,
         countries: ['Israel.'],
@@ -1794,13 +1878,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 9000000,
-        releaseDate: '2025-12-15',
+        releaseDate: '2026-03-09',
     },
     th: {
         nativeName: 'ภาษาไทย (Phasa Thai)',
         flag: '🇹🇭',
         flagImg: 'assets/flags/th.svg',
         code: 'th',
+        defaultLocale: 'th-TH',
         i: 27,
         llmKnowledge: 71,
         countries: ['Thailand.'],
@@ -1810,13 +1895,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 69000000,
-        releaseDate: '2025-12-15',
+        releaseDate: '2026-03-16',
     },
     hi: {
         nativeName: 'हिन्दी (Hindī)',
         flag: '🇮🇳',
         flagImg: 'assets/flags/in.svg',
         code: 'hi',
+        defaultLocale: 'hi-IN',
         i: 28,
         llmKnowledge: 70,
         countries: ['India (co-official)', 'Fiji (co-official).'],
@@ -1826,13 +1912,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 602000000,
-        releaseDate: '2025-12-22',
+        releaseDate: '2026-03-23',
     },
     ca: {
         nativeName: 'Català',
         flag: '🇪🇸',
         flagImg: 'assets/flags/es.svg',
         code: 'ca',
+        defaultLocale: 'ca-ES',
         i: 29,
         llmKnowledge: 69,
         countries: ['Spain (Catalonia, Valencia, Balearic Islands)', 'Andorra.'],
@@ -1842,13 +1929,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 10000000,
-        releaseDate: '2025-12-22',
+        releaseDate: '2026-03-30',
     },
     bg: {
         nativeName: 'Български (Balgarski)',
         flag: '🇧🇬',
         flagImg: 'assets/flags/bg.svg',
         code: 'bg',
+        defaultLocale: 'bg-BG',
         i: 30,
         llmKnowledge: 68,
         countries: ['Bulgaria.'],
@@ -1858,13 +1946,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 9000000,
-        releaseDate: '2025-12-22',
+        releaseDate: '2026-04-06',
     },
     eo: {
         nativeName: 'Esperanto',
         flag: '🇺🇳', // Usando la bandera de la ONU por su naturaleza internacional
         flagImg: 'assets/flags/eo.svg',
         code: 'eo',
+        defaultLocale: 'eo',
         i: 59,
         llmKnowledge: 90,
         countries: ['Worldwide (constructed language)'],
@@ -1874,13 +1963,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 2000000,
-        releaseDate: '2025-12-29',
+        releaseDate: '2026-04-13',
     },
     ia: {
         nativeName: 'Interlingua',
         flag: '🇺🇳', // Usando la bandera de la ONU por su naturaleza internacional
         flagImg: 'assets/flags/ia.svg',
         code: 'ia',
+        defaultLocale: 'ia',
         i: 60,
         llmKnowledge: 85,
         countries: ['Worldwide (constructed language)'],
@@ -1890,13 +1980,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 1500,
-        releaseDate: '2025-12-29',
+        releaseDate: '2026-04-20',
     },
     hr: {
         nativeName: 'Hrvatski',
         flag: '🇭🇷',
         flagImg: 'assets/flags/hr.svg',
         code: 'hr',
+        defaultLocale: 'hr-HR',
         i: 31,
         llmKnowledge: 67,
         countries: ['Croatia', 'Bosnia and Herzegovina (co-official)', 'Serbia (Vojvodina).'],
@@ -1906,13 +1997,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 5700000,
-        releaseDate: '2025-12-29',
+        releaseDate: '2026-04-27',
     },
     sk: {
         nativeName: 'Slovenčina',
         flag: '🇸🇰',
         flagImg: 'assets/flags/sk.svg',
         code: 'sk',
+        defaultLocale: 'sk-SK',
         i: 32,
         llmKnowledge: 66,
         countries: ['Slovakia.'],
@@ -1922,13 +2014,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 5400000,
-        releaseDate: '2025-12-29',
+        releaseDate: '2026-05-04',
     },
     fil: {
         nativeName: 'Filipino',
         flag: '🇵🇭',
         flagImg: 'assets/flags/ph.svg',
         code: 'fil',
+        defaultLocale: 'fil-PH',
         i: 33,
         llmKnowledge: 65,
         countries: ['Philippines (co-official).'],
@@ -1938,7 +2031,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 109000000,
-        releaseDate: '2025-12-29',
+        releaseDate: '2026-05-11',
     },
     tl: {
         // Tagalog often used as base for Filipino, but distinct ISO code
@@ -1946,6 +2039,7 @@ const LANGUAGES = {
         flag: '🇵🇭',
         flagImg: 'assets/flags/ph.svg',
         code: 'tl',
+        defaultLocale: 'tl-PH',
         i: 34,
         llmKnowledge: 64,
         countries: ['Philippines (base of Filipino).'],
@@ -1955,13 +2049,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 109000000,
-        releaseDate: '2025-12-29',
+        releaseDate: '2026-05-18',
     },
     lt: {
         nativeName: 'Lietuvių',
         flag: '🇱🇹',
         flagImg: 'assets/flags/lt.svg',
         code: 'lt',
+        defaultLocale: 'lt-LT',
         i: 35,
         llmKnowledge: 63,
         countries: ['Lithuania.'],
@@ -1971,13 +2066,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 2800000,
-        releaseDate: '2025-12-29',
+        releaseDate: '2026-05-25',
     },
     lv: {
         nativeName: 'Latviešu',
         flag: '🇱🇻',
         flagImg: 'assets/flags/lv.svg',
         code: 'lv',
+        defaultLocale: 'lv-LV',
         i: 36,
         llmKnowledge: 62,
         countries: ['Latvia.'],
@@ -1987,13 +2083,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 1900000,
-        releaseDate: '2025-12-29',
+        releaseDate: '2026-06-01',
     },
     sl: {
         nativeName: 'Slovenščina',
         flag: '🇸🇮',
         flagImg: 'assets/flags/si.svg',
         code: 'sl',
+        defaultLocale: 'sl-SI',
         i: 37,
         llmKnowledge: 61,
         countries: ['Slovenia.'],
@@ -2003,13 +2100,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 2500000,
-        releaseDate: '2025-12-29',
+        releaseDate: '2026-06-08',
     },
     et: {
         nativeName: 'Eesti',
         flag: '🇪🇪',
         flagImg: 'assets/flags/ee.svg',
         code: 'et',
+        defaultLocale: 'et-EE',
         i: 38,
         llmKnowledge: 60,
         countries: ['Estonia.'],
@@ -2019,13 +2117,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 1100000,
-        releaseDate: '2025-12-29',
+        releaseDate: '2026-06-15',
     },
     ms: {
         nativeName: 'Bahasa Melayu',
         flag: '🇲🇾',
         flagImg: 'assets/flags/my.svg',
         code: 'ms',
+        defaultLocale: 'ms-MY',
         i: 39,
         llmKnowledge: 59,
         countries: ['Malaysia', 'Brunei', 'Singapore (co-official).'],
@@ -2035,13 +2134,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 290000000,
-        releaseDate: '2025-12-29',
+        releaseDate: '2026-06-22',
     },
     sw: {
         nativeName: 'Kiswahili',
         flag: '🇹🇿',
         flagImg: 'assets/flags/tz.svg',
         code: 'sw',
+        defaultLocale: 'sw-TZ',
         i: 40,
         llmKnowledge: 58,
         countries: ['Tanzania', 'Kenya', 'Uganda', 'Rwanda', 'Democratic Republic of the Congo (national language).'],
@@ -2051,13 +2151,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 200000000,
-        releaseDate: '2025-12-29',
+        releaseDate: '2026-06-29',
     },
     fa: {
         nativeName: 'فارسی (Fārsī)',
         flag: '🇮🇷',
         flagImg: 'assets/flags/ir.svg',
         code: 'fa',
+        defaultLocale: 'fa-IR',
         i: 41,
         llmKnowledge: 57,
         countries: ['Iran', 'Afghanistan (as Dari)', 'Tajikistan (as Tajik).'],
@@ -2067,13 +2168,14 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 110000000,
-        releaseDate: '2025-12-29',
+        releaseDate: '2026-07-06',
     },
     bn: {
         nativeName: 'বাংলা (Bangla)',
         flag: '🇧🇩',
         flagImg: 'assets/flags/bd.svg',
         code: 'bn',
+        defaultLocale: 'bn-BD',
         i: 42,
         llmKnowledge: 56,
         countries: ['Bangladesh', 'India (West Bengal, Tripura).'],
@@ -2089,6 +2191,7 @@ const LANGUAGES = {
         flag: '🇵🇰',
         flagImg: 'assets/flags/pk.svg',
         code: 'ur',
+        defaultLocale: 'ur-PK',
         i: 43,
         llmKnowledge: 55,
         countries: ['Pakistan (co-official)', 'India (recognized).'],
@@ -2104,6 +2207,7 @@ const LANGUAGES = {
         flag: '🇷🇸',
         flagImg: 'assets/flags/rs.svg',
         code: 'sr',
+        defaultLocale: 'sr-RS',
         i: 44,
         llmKnowledge: 54,
         countries: ['Serbia', 'Bosnia and Herzegovina (co-official)', 'Montenegro (co-official)', 'Kosovo (co-official).'],
@@ -2119,6 +2223,7 @@ const LANGUAGES = {
         flag: '🇮🇸',
         flagImg: 'assets/flags/is.svg',
         code: 'is',
+        defaultLocale: 'is-IS',
         i: 45,
         llmKnowledge: 53,
         countries: ['Iceland.'],
@@ -2134,6 +2239,7 @@ const LANGUAGES = {
         flag: '🇱🇰',
         flagImg: 'assets/flags/lk.svg',
         code: 'ta',
+        defaultLocale: 'ta-LK',
         i: 46,
         llmKnowledge: 52,
         countries: ['Sri Lanka', 'Singapore', 'India (Tamil Nadu, Puducherry).'],
@@ -2149,6 +2255,7 @@ const LANGUAGES = {
         flag: '🇮🇳',
         flagImg: 'assets/flags/in.svg',
         code: 'mr',
+        defaultLocale: 'mr-IN',
         i: 47,
         llmKnowledge: 51,
         countries: ['India (Maharashtra).'],
@@ -2164,6 +2271,7 @@ const LANGUAGES = {
         flag: '🇲🇲',
         flagImg: 'assets/flags/mm.svg',
         code: 'my',
+        defaultLocale: 'my-MM',
         i: 48,
         llmKnowledge: 50,
         countries: ['Myanmar.'],
@@ -2179,6 +2287,7 @@ const LANGUAGES = {
         flag: '🏴󠁧󠁢󠁷󠁬󠁳󠁿',
         flagImg: 'assets/flags/cy.svg',
         code: 'cy',
+        defaultLocale: 'cy-GB',
         i: 49,
         llmKnowledge: 49,
         countries: ['United Kingdom (Wales).'],
@@ -2194,6 +2303,7 @@ const LANGUAGES = {
         flag: '🇳🇬',
         flagImg: 'assets/flags/ng.svg',
         code: 'ha',
+        defaultLocale: 'ha-NG',
         i: 50,
         llmKnowledge: 48,
         countries: ['Nigeria (major language)', 'Niger', 'Ghana', 'Cameroon', 'Benin', 'Chad', 'Sudan.'],
@@ -2209,6 +2319,7 @@ const LANGUAGES = {
         flag: '🇪🇸',
         flagImg: 'assets/flags/es.svg',
         code: 'eu',
+        defaultLocale: 'eu-ES',
         i: 51,
         llmKnowledge: 47,
         countries: ['Spain (Basque Country, Navarre)', 'France (French Basque Country).'],
@@ -2224,6 +2335,7 @@ const LANGUAGES = {
         flag: '🇮🇪',
         flagImg: 'assets/flags/ie.svg',
         code: 'ga',
+        defaultLocale: 'ga-IE',
         i: 52,
         llmKnowledge: 46,
         countries: ['Ireland', 'United Kingdom (Northern Ireland).'],
@@ -2239,6 +2351,7 @@ const LANGUAGES = {
         flag: '🇵🇰',
         flagImg: 'assets/flags/pk.svg',
         code: 'sd',
+        defaultLocale: 'sd-PK',
         i: 53,
         llmKnowledge: 45,
         countries: ['Pakistan (Sindh)', 'India (recognized).'],
@@ -2254,6 +2367,7 @@ const LANGUAGES = {
         flag: '🇪🇹',
         flagImg: 'assets/flags/et.svg',
         code: 'am',
+        defaultLocale: 'am-ET',
         i: 54,
         llmKnowledge: 44,
         countries: ['Ethiopia.'],
@@ -2269,6 +2383,7 @@ const LANGUAGES = {
         flag: '🇮🇩',
         flagImg: 'assets/flags/id.svg',
         code: 'jv',
+        defaultLocale: 'jv-ID',
         i: 55,
         llmKnowledge: 43,
         countries: ['Indonesia (important regional language).'],
@@ -2284,6 +2399,7 @@ const LANGUAGES = {
         flag: '🇰🇭',
         flagImg: 'assets/flags/kh.svg',
         code: 'km',
+        defaultLocale: 'km-KH',
         i: 56,
         llmKnowledge: 42,
         countries: ['Cambodia.'],
@@ -2299,6 +2415,7 @@ const LANGUAGES = {
         flag: '🇳🇬',
         flagImg: 'assets/flags/ng.svg',
         code: 'yo',
+        defaultLocale: 'yo-NG',
         i: 57,
         llmKnowledge: 41,
         countries: ['Nigeria', 'Benin', 'Togo.'],
@@ -2314,6 +2431,7 @@ const LANGUAGES = {
         flag: '🇪🇸',
         flagImg: 'assets/flags/es.svg',
         code: 'gl',
+        defaultLocale: 'gl-ES',
         i: 58,
         llmKnowledge: 40,
         countries: ['Spain (Galicia).'],
@@ -2325,7 +2443,7 @@ const LANGUAGES = {
         speakers: 2400000,
     },
 };
-function getLangDesc(langCode, lang) {
+function getLangDesc(langCode, lang = 'en') {
     return LANGUAGES[langCode]?.translations[lang] || langCode;
 }
 function getSupportedLanguageOptions(lang = 'es') {
@@ -2436,7 +2554,7 @@ class PromptComponent {
         this.ref.close(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PromptComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: PromptComponent, isStandalone: true, selector: "dc-prompt", ngImport: i0, template: "<div class=\"form-input-card p-4\">\n  <p-message severity=\"secondary\"> {{ title() }}</p-message>\n\n  <div class=\"my-4\">{{ message() }}</div>\n\n  <div class=\"p-field mb-4\">\n    <textarea rows=\"5\" cols=\"30\" pTextarea [(ngModel)]=\"inputValue\" class=\"w-full\"></textarea>\n  </div>\n\n  <div class=\"flex justify-content-end gap-2\">\n    <p-button [label]=\"cancelText()\" (click)=\"cancel()\" severity=\"secondary\"></p-button>\n    <p-button [label]=\"acceptText()\" (click)=\"accept()\"></p-button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "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: MessageModule }, { kind: "component", type: i2$1.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4$2.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: PromptComponent, isStandalone: true, selector: "dc-prompt", ngImport: i0, template: "<div class=\"form-input-card p-4\">\n  <p-message severity=\"secondary\"> {{ title() }}</p-message>\n\n  <div class=\"my-4\">{{ message() }}</div>\n\n  <div class=\"p-field mb-4\">\n    <textarea rows=\"5\" cols=\"30\" pTextarea [(ngModel)]=\"inputValue\" class=\"w-full\"></textarea>\n  </div>\n\n  <div class=\"flex justify-content-end gap-2\">\n    <p-button [label]=\"cancelText()\" (click)=\"cancel()\" severity=\"secondary\"></p-button>\n    <p-button [label]=\"acceptText()\" (click)=\"accept()\"></p-button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "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: MessageModule }, { kind: "component", type: i2$1.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4$4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PromptComponent, decorators: [{
             type: Component,
@@ -2541,7 +2659,7 @@ class HttpCoreService {
         try {
             const url = this.getHostUrl(host) + '/' + service;
             const dataPlain = this.toPlainObject(data);
-            const response$ = this.httpClient.post(url, dataPlain).pipe(tap(this.checkResponseStatus.bind(this)), catchError(this.handleRequestError.bind(this)));
+            const response$ = this.httpClient.post(url, dataPlain).pipe(catchError(this.handleRequestError.bind(this)));
             const result = await lastValueFrom(response$);
             this.isLoading.set(false);
             return result;
@@ -2551,6 +2669,15 @@ class HttpCoreService {
             throw error;
         }
     }
+    postHttp$({ service, data, host }) {
+        this.isLoading.set(true);
+        const url = this.getHostUrl(host) + '/' + service;
+        const dataPlain = this.toPlainObject(data);
+        return this.httpClient.post(url, dataPlain).pipe(tap(() => this.isLoading.set(false)), catchError((err) => {
+            this.isLoading.set(false);
+            return this.handleRequestError(err);
+        }));
+    }
     async putHttp({ service, data, host }) {
         this.isLoading.set(true);
         try {
@@ -2585,6 +2712,17 @@ class HttpCoreService {
             throw error;
         }
     }
+    getHttp$({ service, host, skipErrorHandling = false }) {
+        this.isLoading.set(true);
+        const url = this.getHostUrl(host) + '/' + service;
+        return this.httpClient.get(url).pipe(tap(() => this.isLoading.set(false)), catchError((err) => {
+            this.isLoading.set(false);
+            if (!skipErrorHandling) {
+                return this.handleRequestError(err);
+            }
+            return throwError(() => err);
+        }));
+    }
     async deleteHttp({ service, host }) {
         this.isLoading.set(true);
         try {
@@ -2622,7 +2760,7 @@ class HttpCoreService {
         try {
             const url = `${baseUrl}/${service}`;
             const dataPlain = this.toPlainObject(data);
-            const response$ = this.httpClient.post(url, dataPlain).pipe(tap(this.checkResponseStatus.bind(this)), catchError(this.handleRequestError.bind(this)));
+            const response$ = this.httpClient.post(url, dataPlain).pipe(catchError(this.handleRequestError.bind(this)));
             const result = await lastValueFrom(response$);
             this.isLoading.set(false);
             return result;
@@ -2772,6 +2910,7 @@ class HttpCoreService {
     }
     /**
      * Upload a file to the specified service
+     * @Deprecated use postFile
      * @param service The service endpoint
      * @param file The file to upload
      * @param metadata Optional metadata to send with the file
@@ -2798,6 +2937,34 @@ class HttpCoreService {
             throw error;
         }
     }
+    /**
+     * Upload a file to the specified service
+     * @param service The service endpoint
+     * @param file The file to upload
+     * @param metadata Optional metadata to send with the file
+     * @param host The host to use (primary or secondary)
+     * @returns A promise with the response
+     */
+    async postFile({ service, file, metadata, host }) {
+        this.isLoading.set(true);
+        try {
+            const url = this.getHostUrl(host) + '/' + service;
+            const formData = new FormData();
+            formData.append('file', file);
+            let headers = {};
+            if (metadata) {
+                headers = { metadata: JSON.stringify(metadata) };
+            }
+            const response$ = this.httpClient.post(url, formData, { headers });
+            const result = await lastValueFrom(response$);
+            this.isLoading.set(false);
+            return result;
+        }
+        catch (error) {
+            this.isLoading.set(false);
+            throw error;
+        }
+    }
     /**
      * Download a file from the specified service
      * @param service The service endpoint
@@ -2885,19 +3052,26 @@ class HttpCoreService {
      */
     handleRequestError(error) {
         this.isLoading.set(false);
+        let appException = null;
         if (error?.error?.type === 'AppException') {
+            appException = error?.error;
+        }
+        else if (error?.error?.exception?.error_message) {
+            appException = error?.error?.exception;
+        }
+        if (appException) {
             console.error(error.error);
-            const errorMessage = error.error?.error_message || 'An error occurred';
-            const subtitle = error.error?.explanation || 'Please try again later';
+            const errorMessage = appException?.error_message || 'An error occurred';
+            const subtitle = appException?.explanation || 'Please try again later';
             this.toastService.error({ title: errorMessage, subtitle });
         }
-        // Set the last error
-        if (error.error && typeof error.error === 'object') {
+        // Set the last error, not sure if this is still neeed, to keep track of the last error.
+        if (appException) {
             this.lastError.set({
-                error_message: error.error.error_message || 'An error occurred',
-                explanation: error.error.explanation || 'Please try again later',
+                error_message: appException.error_message || 'An error occurred',
+                explanation: appException.explanation || 'Please try again later',
                 status: error.status,
-                code: error.error.code,
+                code: appException.statusCode,
             });
         }
         else {
@@ -2935,14 +3109,6 @@ class HttpCoreService {
         }
         return this.handleRequestError(error);
     }
-    /**
-     * Check the status of a response
-     * @param response The response to check
-     */
-    checkResponseStatus(response) {
-        // Implement any response status checking logic here
-        // For example, check for specific status codes or error messages
-    }
     /**
      * Convert an object to a plain object
      * @param obj The object to convert
@@ -3035,6 +3201,11 @@ class EntityCommunicationService {
     query(filterConfig) {
         return this.httpService.postHttp({ service: `api/${this.serviceName}/query`, data: filterConfig, host: this.customHost });
     }
+    update(id, update) {
+        // NEW METHOD, i'm not used yet.
+        // Este método da más control porque no esta validado, puede actualizar por ejemplo un objeto anidado 'assets.motions' o creo que tambien mandando el update de mongo {$push...}
+        return this.httpService.putHttp({ service: `api/${this.serviceName}/${id}`, data: update, host: this.customHost });
+    }
     partialUpdate(id, partialUpdates) {
         // In backend object is flattened, so Convert nested objects to dot notation eg. { "video.captions.remotion": captions.captions }
         return this.httpService.putHttp({ service: `api/${this.serviceName}/${id}`, data: partialUpdates, host: this.customHost });
@@ -3105,7 +3276,6 @@ const APP_CONFIG = new InjectionToken('app.config');
 class AppConfigService {
     constructor() {
         this.config = inject(APP_CONFIG);
-        this.config.kbhost = 'http://localhost:3000';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AppConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AppConfigService, providedIn: 'root' }); }
@@ -3115,46 +3285,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [] });
+        }] });
+
+class AudioNotificationService {
+    playFinishNotification() {
+        const audio = new Audio('assets/sounds/accomplished.mp3');
+        audio.load();
+        audio.play();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AudioNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AudioNotificationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AudioNotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
+var MoodState;
+(function (MoodState) {
+    MoodState["HAPPY"] = "happy";
+    MoodState["SAD"] = "sad";
+    MoodState["ANGRY"] = "angry";
+    MoodState["FEAR"] = "fear";
+    MoodState["SURPRISED"] = "surprised";
+    MoodState["DISGUSTED"] = "disgusted";
+    MoodState["PROUD"] = "proud";
+    MoodState["ASHAMED"] = "ashamed";
+    MoodState["GUILTY"] = "guilty";
+    MoodState["JEALOUS"] = "jealous";
+    MoodState["LOVE"] = "love";
+    MoodState["CONTEMPT"] = "contempt";
+    MoodState["COMIC"] = "comic";
+    MoodState["BLUSHING"] = "blushing";
+    MoodState["CONFUSED"] = "confused";
+    MoodState["CURIOUS"] = "curious";
+    MoodState["BORED"] = "bored";
+    MoodState["FRUSTRATED"] = "frustrated";
+    MoodState["OVERWHELMED"] = "overwhelmed";
+    MoodState["FOCUSED"] = "focused";
+    MoodState["CHALLENGE"] = "challenge";
+    MoodState["SERIOUS"] = "serious";
+    MoodState["SLEEPY"] = "sleepy";
+    MoodState["HORNY"] = "horny";
+    MoodState["ANXIOUS"] = "anxious";
+    MoodState["RELAXED"] = "relaxed";
+})(MoodState || (MoodState = {}));
 const MoodStateOptions = [
     // Emociones básicas y fundamentales
-    { value: 'happy', label: '1) Alegría - Felicidad, gozo, satisfacción', emoji: '😊' },
-    { value: 'sad', label: '2) Tristeza - Pena, melancolía, desánimo', emoji: '😢' },
-    { value: 'angry', label: '3) Enojo - Ira, furia, irritación', emoji: '😠' },
-    { value: 'fear', label: '4) Miedo - Temor, pánico, terror', emoji: '😨' },
-    { value: 'surprised', label: '5) Sorpresa - Asombro, desconcierto', emoji: '😮' },
-    { value: 'disgusted', label: '6) Asco - Repugnancia, aversión', emoji: '🤢' },
+    { value: MoodState.HAPPY, label: '1) Alegría - Felicidad, gozo, satisfacción', emoji: '😊' },
+    { value: MoodState.SAD, label: '2) Tristeza - Pena, melancolía, desánimo', emoji: '😢' },
+    { value: MoodState.ANGRY, label: '3) Enojo - Ira, furia, irritación', emoji: '😠' },
+    { value: MoodState.FEAR, label: '4) Miedo - Temor, pánico, terror', emoji: '😨' },
+    { value: MoodState.SURPRISED, label: '5) Sorpresa - Asombro, desconcierto', emoji: '😮' },
+    { value: MoodState.DISGUSTED, label: '6) Asco - Repugnancia, aversión', emoji: '🤢' },
     // { value: 'excited', label: '27) Entusiasmo - Emoción, euforia, anticipación' },
     // Emociones sociales y autoconscientes
-    { value: 'proud', label: '7) Orgullo - Satisfacción por logros propios o ajenos', emoji: '😎' },
-    { value: 'ashamed', label: '8) Vergüenza - Humillado', emoji: '😰' },
-    { value: 'guilty', label: '9) Culpa - Remordimiento, arrepentimiento', emoji: '😔' },
-    { value: 'jealous', label: '10) Celos - Envidia, desconfianza', emoji: '😒' },
-    { value: 'love', label: '11) Amor - Cariño, afecto, ternura', emoji: '❤️' },
+    { value: MoodState.PROUD, label: '7) Orgullo - Satisfacción por logros propios o ajenos', emoji: '😎' },
+    { value: MoodState.ASHAMED, label: '8) Vergüenza - Humillado', emoji: '😰' },
+    { value: MoodState.GUILTY, label: '9) Culpa - Remordimiento, arrepentimiento', emoji: '😔' },
+    { value: MoodState.JEALOUS, label: '10) Celos - Envidia, desconfianza', emoji: '😒' },
+    { value: MoodState.LOVE, label: '11) Amor - Cariño, afecto, ternura', emoji: '❤️' },
     // { value: 'grateful', label: '12) Agradecimiento - Gratitud, aprecio' },
-    { value: 'contempt', label: '30) Desprecio - Desdén, menosprecio', emoji: '🙃' },
-    { value: 'comic', label: '32) Cómico - Divertido, gracioso', emoji: '😂' },
-    { value: 'blushing', label: '33) Apenado - Sonrojado, avergonzado', emoji: '😳' },
+    { value: MoodState.CONTEMPT, label: '30) Desprecio - Desdén, menosprecio', emoji: '🙃' },
+    { value: MoodState.COMIC, label: '32) Cómico - Divertido, gracioso', emoji: '😂' },
+    { value: MoodState.BLUSHING, label: '33) Apenado - Sonrojado, avergonzado', emoji: '😳' },
     // Estados cognitivos y mentales
     // { value: 'neutral', label: '13) Neutral - Calma, imparcialidad' },
-    { value: 'confused', label: '14) Confusión - Desorientación, perplejidad', emoji: '😕' },
-    { value: 'curious', label: '15) Curiosidad - Interés, intriga, exploración', emoji: '🤔' },
-    { value: 'bored', label: '16) Aburrimiento - Desinterés, tedio, apatía', emoji: '😑' },
+    { value: MoodState.CONFUSED, label: '14) Confusión - Desorientación, perplejidad', emoji: '😕' },
+    { value: MoodState.CURIOUS, label: '15) Curiosidad - Interés, intriga, exploración', emoji: '🤔' },
+    { value: MoodState.BORED, label: '16) Aburrimiento - Desinterés, tedio, apatía', emoji: '😑' },
     // { value: 'hopeful', label: '17) Esperanza - Optimismo, fe, expectativa positiva' },
-    { value: 'frustrated', label: '18) Frustración - Decepción, impotencia', emoji: '😤' },
-    { value: 'overwhelmed', label: '19) Abrumado - Agobio, exceso de carga', emoji: '😫' },
+    { value: MoodState.FRUSTRATED, label: '18) Frustración - Decepción, impotencia', emoji: '😤' },
+    { value: MoodState.OVERWHELMED, label: '19) Abrumado - Agobio, exceso de carga', emoji: '😫' },
     // { value: 'lonely', label: '20) Soledad - Aislamiento, desamparo' },
-    { value: 'focused', label: '21) Concentración - Enfoque, atención plena', emoji: '🤓' },
-    { value: 'challenge', label: '28) Desafío - Reto, provocación, competitividad', emoji: '😏' },
+    { value: MoodState.FOCUSED, label: '21) Concentración - Enfoque, atención plena', emoji: '🤓' },
+    { value: MoodState.CHALLENGE, label: '28) Desafío - Reto, provocación, competitividad', emoji: '😏' },
     // { value: 'satisfied', label: '29) Satisfacción - Contentamiento, plenitud' },
-    { value: 'serious', label: '31) Serenidad - Actitud seria', emoji: '😐' },
+    { value: MoodState.SERIOUS, label: '31) Serenidad - Actitud seria', emoji: '😐' },
     // Estados corporales y fisiológicos
-    { value: 'sleepy', label: '22) Cansancio - Somnolencia, agotamiento, fatiga', emoji: '😴' },
+    { value: MoodState.SLEEPY, label: '22) Cansancio - Somnolencia, agotamiento, fatiga', emoji: '😴' },
     // { value: 'energetic', label: '23) Energía - Vitalidad, vigor, dinamismo' },
-    { value: 'horny', label: '24) Excitación sexual - Lujuria, deseo sexual', emoji: '😈' },
-    { value: 'anxious', label: '25) Ansiedad - Nerviosismo, preocupación, inquietud', emoji: '😟' },
-    { value: 'relaxed', label: '26) Relajación - Paz, serenidad, tranquilidad', emoji: '😌' },
+    { value: MoodState.HORNY, label: '24) Excitación sexual - Lujuria, deseo sexual', emoji: '😈' },
+    { value: MoodState.ANXIOUS, label: '25) Ansiedad - Nerviosismo, preocupación, inquietud', emoji: '😟' },
+    { value: MoodState.RELAXED, label: '26) Relajación - Paz, serenidad, tranquilidad', emoji: '😌' },
+];
+
+const CharacterEventActions = [
+    // Emociones básicas y fundamentales
+    { value: 'intro', label: 'Al iniciar la conversación' },
+    { value: 'outro', label: 'Al finalizar la conversación' },
+    { value: 'goalCompleted', label: 'Al completar el objetivo' },
 ];
 
 /*
@@ -3166,5 +3388,5 @@ const MoodStateOptions = [
  * Generated bundle index. Do not edit.
  */
 
-export { APP_CONFIG, AppConfigService, AudioSpeed, AudioSpeedReverse, 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, ModelQualityOptions, 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, EModelQuality, EmptyStateComponent, EntityBaseFormComponent, EntityBaseListComponent, EntityCommunicationService, FlagPipe, FormUtilsService, GetPathPipe, HTTP_CORE_CONFIG, HttpCoreService, IAIModel, LANGUAGES, LangDescTranslation, LoadingBarComponent, LoadingBarService, 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