@dataclouder/ngx-core 0.1.32 → 0.1.34

package/fesm2022/dataclouder-ngx-core.mjs

@@ -1,8 +1,8 @@
 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 * as i1 from '@angular/forms';
-import { FormBuilder, FormsModule, ReactiveFormsModule, FormGroup, FormArray } from '@angular/forms';
-import * as i1$1 from 'primeng/button';
+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 { DialogModule } from 'primeng/dialog';
@@ -15,11 +15,11 @@ import { DatePickerModule } from 'primeng/datepicker';
 import * as i3 from 'primeng/api';
 import { MessageService, FilterMatchMode } from 'primeng/api';
 import { DynamicDialogConfig, DynamicDialogRef, DialogService } from 'primeng/dynamicdialog';
-import * as i2 from 'primeng/message';
+import * as i2$1 from 'primeng/message';
 import { MessageModule } from 'primeng/message';
 import * as i3$1 from 'primeng/progressbar';
 import { ProgressBarModule, ProgressBar } from 'primeng/progressbar';
-import * as i2$1 from 'primeng/toast';
+import * as i2$2 from 'primeng/toast';
 import { ToastModule, Toast } from 'primeng/toast';
 import { CardModule } from 'primeng/card';
 import * as i4$1 from 'primeng/inputtext';
@@ -32,17 +32,23 @@ import { TableModule } from 'primeng/table';
 import { get } from 'lodash';
 import * as i5$1 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
-import * as i1$3 from '@angular/common';
+import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$2 from 'primeng/fieldset';
+import * as i1$1 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 { CheckboxModule } from 'primeng/checkbox';
+import * as i4$2 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i2$4 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 * as i4$3 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
 import { HttpClient, HttpEventType } from '@angular/common/http';
 
@@ -169,7 +175,7 @@ class DCFilterBarComponent {
         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 } }, 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 (options()?.showCreateButton) {\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(options()?.showViewButton){\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  }\n\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  <p>Haz una b\u00FAsqueda (Enter)</p>\n  <div>\n    <span>\n      <input (keydown.enter)=\"search(placeholder)\" type=\"text\" pInputText [(ngModel)]=\"placeholder\" />\n    </span>\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: i1$1.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"] }], 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 } }, 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 (options()?.showCreateButton) {\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(options()?.showViewButton){\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  }\n\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  <p>Haz una b\u00FAsqueda (Enter)</p>\n  <div>\n    <span>\n      <input (keydown.enter)=\"search(placeholder)\" type=\"text\" pInputText [(ngModel)]=\"placeholder\" />\n    </span>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCFilterBarComponent, decorators: [{
             type: Component,
@@ -207,7 +213,7 @@ class ConfirmComponent {
         this.ref.close(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ConfirmComponent, isStandalone: true, selector: "app-confirm", inputs: { title: "title", message: "message", warning: "warning", oneBotton: "oneBotton", acceptText: "acceptText", cancelText: "cancelText", piIcon: "piIcon" }, host: { listeners: { "window:keyup.enter": "onEnter($event)", "window:keyup.escape": "onEscapte($event)" } }, ngImport: i0, template: "<div class=\"form-input-card\">\n  <p-message severity=\"secondary\"> {{ title }}</p-message>\n\n  <div style=\"text-align: center; padding: 1rem\">\n    <i style=\"font-size: 4rem; color: #ff0040\" class=\"pi {{ piIcon }}\"></i>\n  </div>\n\n  <div>{{ message }} </div>\n\n  @if (warning) {\n    <p-message severity=\"warn\">\n      <i class=\"pi pi-exclamation-triangle\"></i>\n      {{ warning }}</p-message\n      >\n    }\n\n    <br /><br />\n\n    <div>\n      <div style=\"float: right\">\n        @if (oneBotton) {\n          <p-button label=\"Ok\" (click)=\"confirm()\"></p-button>\n        }\n      </div>\n\n      @if (!oneBotton) {\n        <div class=\"options\">\n          <p-button [label]=\"cancelText\" (click)=\"cancel()\" severity=\"secondary\"></p-button>\n          <p-button [label]=\"acceptText\" (click)=\"confirm()\" severity=\"danger\"></p-button>\n        </div>\n      }\n    </div>\n  </div>\n", styles: [".options{display:flex;justify-content:space-between}.subtext{color:#353535;font-size:small}nb-card{min-width:50vw;max-width:88vw;max-height:90vh}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.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: MessageModule }, { kind: "component", type: i2.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: ConfirmComponent, isStandalone: true, selector: "app-confirm", inputs: { title: "title", message: "message", warning: "warning", oneBotton: "oneBotton", acceptText: "acceptText", cancelText: "cancelText", piIcon: "piIcon" }, host: { listeners: { "window:keyup.enter": "onEnter($event)", "window:keyup.escape": "onEscapte($event)" } }, ngImport: i0, template: "<div class=\"form-input-card\">\n  <p-message severity=\"secondary\"> {{ title }}</p-message>\n\n  <div style=\"text-align: center; padding: 1rem\">\n    <i style=\"font-size: 4rem; color: #ff0040\" class=\"pi {{ piIcon }}\"></i>\n  </div>\n\n  <div>{{ message }} </div>\n\n  @if (warning) {\n    <p-message severity=\"warn\">\n      <i class=\"pi pi-exclamation-triangle\"></i>\n      {{ warning }}</p-message\n      >\n    }\n\n    <br /><br />\n\n    <div>\n      <div style=\"float: right\">\n        @if (oneBotton) {\n          <p-button label=\"Ok\" (click)=\"confirm()\"></p-button>\n        }\n      </div>\n\n      @if (!oneBotton) {\n        <div class=\"options\">\n          <p-button [label]=\"cancelText\" (click)=\"cancel()\" severity=\"secondary\"></p-button>\n          <p-button [label]=\"acceptText\" (click)=\"confirm()\" severity=\"danger\"></p-button>\n        </div>\n      }\n    </div>\n  </div>\n", styles: [".options{display:flex;justify-content:space-between}.subtext{color:#353535;font-size:small}nb-card{min-width:50vw;max-width:88vw;max-height:90vh}\n"], 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: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConfirmComponent, decorators: [{
             type: Component,
@@ -289,7 +295,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: i1$1.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$1.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$1.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,
@@ -618,7 +624,7 @@ class QuickTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: QuickTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: QuickTableComponent, isStandalone: true, selector: "app-quick-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true }], ngImport: i0, template: "<p-table\n  [tableStyle]=\"{ 'min-width': '20rem' }\"\n  #tableRef\n  [value]=\"_tableData()\"\n  [columns]=\"_columns()\"\n  [globalFilterFields]=\"globalFilterFields()\"\n  [filters]=\"filters()\"\n  (onFilter)=\"onFilterLocal($event)\">\n  <ng-template pTemplate=\"caption\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <h5 class=\"m-0\">Table Data</h5>\n      <span class=\"p-input-icon-left\">\n        <i class=\"pi pi-search\"></i>\n        <input pInputText type=\"text\" (input)=\"onGlobalFilter($event)\" placeholder=\"Search keyword\" />\n      </span>\n    </div>\n  </ng-template>\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n      @for (column of columns; track column) {\n      <th [pSortableColumn]=\"column.field\">{{ column.header }} <p-sortIcon [field]=\"column.field\"></p-sortIcon></th>\n      }\n    </tr>\n    <tr>\n      @for (column of columns; track column) { @if(column.type === 'tags') {\n      <th>\n        <p-multiselect\n          [options]=\"filters()?.[column.field]?.['options']\"\n          placeholder=\"Selecciona\"\n          (onChange)=\"filterOutsideTable('tags', column.field, $event.value)\"\n          [style]=\"{ minWidth: '14rem' }\"\n          [panelStyle]=\"{ minWidth: '16rem' }\">\n          <ng-template let-option #item>\n            <div class=\"flex items-center gap-2\">\n              <span>{{ option }}</span>\n            </div>\n          </ng-template>\n        </p-multiselect>\n      </th>\n\n      } @else {\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: i1$1.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: i4$1.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 {\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: i4$1.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: QuickTableComponent, decorators: [{
             type: Component,
@@ -691,7 +697,7 @@ class DcAuditableViewerComponent {
       </div>
     </p-fieldset>
     }
-  `, 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: 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$3.DatePipe, name: "date" }] }); }
+  `, 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcAuditableViewerComponent, decorators: [{
             type: Component,
@@ -754,7 +760,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$3.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$2.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcExtensionsViewerComponent, decorators: [{
             type: Component,
@@ -771,7 +777,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$3.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$2.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLearnableViewerComponent, decorators: [{
             type: Component,
@@ -788,7 +794,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$3.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$2.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcManageableViewerComponent, decorators: [{
             type: Component,
@@ -805,7 +811,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$3.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$2.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcReactionsViewerComponent, decorators: [{
             type: Component,
@@ -817,6 +823,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 }]
         }] });
 
+class DcManageableFormComponent {
+    constructor() {
+        this.form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+        this.statusOptions = [
+            { label: '✍️ Borrador', value: 'draft' },
+            { label: '📝 En Revisión', value: 'review' },
+            { label: '👍 Publicado', value: 'published' },
+            { label: '🗑️ Archivado', value: 'archived' },
+        ];
+    }
+    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$2.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,
+            args: [{ selector: 'dc-manageable-form', standalone: true, imports: [ReactiveFormsModule, CardModule, CheckboxModule, SelectModule, TooltipModule], 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" }]
+        }] });
+
+class DcTagsFormComponent {
+    constructor(parentContainer) {
+        this.parentContainer = parentContainer;
+        this.newTagControl = new FormControl('');
+    }
+    ngOnInit() {
+        this.form = this.parentContainer.control;
+    }
+    get arrayForm() {
+        return this.form.get('tags');
+    }
+    addTag() {
+        const newTag = this.newTagControl.value?.trim();
+        if (newTag) {
+            this.arrayForm.push(new FormControl(newTag));
+            this.newTagControl.reset();
+        }
+    }
+    removeTag(index) {
+        this.arrayForm.removeAt(index);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcTagsFormComponent, deps: [{ token: i1.ControlContainer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcTagsFormComponent, isStandalone: true, selector: "dc-tags-form", ngImport: i0, template: "<div [formGroup]=\"form\">\n  <div formArrayName=\"tags\">\n    <div class=\"flex flex-wrap gap-2\">\n      @for (tagControl of arrayForm.controls; track tagControl; let i = $index) {\n      <p-chip [label]=\"tagControl.value\" [removable]=\"true\" (onRemove)=\"removeTag(i)\"></p-chip>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"flex mt-2\">\n  <input pInputText type=\"text\" [formControl]=\"newTagControl\" placeholder=\"New tag\" (keydown.enter)=\"addTag(); $event.preventDefault()\" />\n  <p-button label=\"Add Tag\" icon=\"pi pi-plus\" (click)=\"addTag()\" [disabled]=\"!newTagControl.value\"></p-button>\n</div>\n", styles: [".tag-field{display:flex;align-items:center;margin-bottom:.5rem}.tag-field input{margin-right:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i3$3.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }], viewProviders: [
+            {
+                provide: ControlContainer,
+                useFactory: () => inject(ControlContainer, { skipSelf: true }),
+            },
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcTagsFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-tags-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, ButtonModule, InputTextModule, ChipModule], viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useFactory: () => inject(ControlContainer, { skipSelf: true }),
+                        },
+                    ], template: "<div [formGroup]=\"form\">\n  <div formArrayName=\"tags\">\n    <div class=\"flex flex-wrap gap-2\">\n      @for (tagControl of arrayForm.controls; track tagControl; let i = $index) {\n      <p-chip [label]=\"tagControl.value\" [removable]=\"true\" (onRemove)=\"removeTag(i)\"></p-chip>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"flex mt-2\">\n  <input pInputText type=\"text\" [formControl]=\"newTagControl\" placeholder=\"New tag\" (keydown.enter)=\"addTag(); $event.preventDefault()\" />\n  <p-button label=\"Add Tag\" icon=\"pi pi-plus\" (click)=\"addTag()\" [disabled]=\"!newTagControl.value\"></p-button>\n</div>\n", styles: [".tag-field{display:flex;align-items:center;margin-bottom:.5rem}.tag-field input{margin-right:.5rem}\n"] }]
+        }], ctorParameters: () => [{ type: i1.ControlContainer }] });
+
+class DcLearnableFormComponent {
+    constructor() {
+        this.form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLearnableFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: DcLearnableFormComponent, isStandalone: true, selector: "dc-learnable-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  <div class=\"form-grid\">\n    <div class=\"row\">\n      <div class=\"form-field\">\n        <label for=\"level\">Level <span pTooltip=\"Difficulty level\">\u2139\uFE0F</span></label>\n        <p-inputNumber id=\"level\" formControlName=\"level\" [min]=\"0\" [max]=\"10\"></p-inputNumber>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"takenCount\">Taken Count <span pTooltip=\"How many times this has been taken\">\u2139\uFE0F</span></label>\n        <p-inputNumber id=\"takenCount\" formControlName=\"takenCount\" [min]=\"0\"></p-inputNumber>\n      </div>\n    </div>\n    <div class=\"form-field\">\n      <label for=\"tags\">Tags <span pTooltip=\"Relevant tags for this content\">\u2139\uFE0F</span></label>\n      <dc-tags-form />\n    </div>\n  </div>\n</div>\n", styles: [".form-grid{display:grid;gap:1rem}.row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.form-field{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i2$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$2.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,
+            args: [{ selector: 'dc-learnable-form', standalone: true, imports: [ReactiveFormsModule, CardModule, InputNumberModule, TooltipModule, DcTagsFormComponent], template: "<div [formGroup]=\"form()\">\n  <div class=\"form-grid\">\n    <div class=\"row\">\n      <div class=\"form-field\">\n        <label for=\"level\">Level <span pTooltip=\"Difficulty level\">\u2139\uFE0F</span></label>\n        <p-inputNumber id=\"level\" formControlName=\"level\" [min]=\"0\" [max]=\"10\"></p-inputNumber>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"takenCount\">Taken Count <span pTooltip=\"How many times this has been taken\">\u2139\uFE0F</span></label>\n        <p-inputNumber id=\"takenCount\" formControlName=\"takenCount\" [min]=\"0\"></p-inputNumber>\n      </div>\n    </div>\n    <div class=\"form-field\">\n      <label for=\"tags\">Tags <span pTooltip=\"Relevant tags for this content\">\u2139\uFE0F</span></label>\n      <dc-tags-form />\n    </div>\n  </div>\n</div>\n", styles: [".form-grid{display:grid;gap:1rem}.row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.form-field{display:flex;flex-direction:column}\n"] }]
+        }] });
+
 /**
  * Abstract base class for implementing pagination functionality.
  * Provides common pagination logic, state management, and navigation handling.
@@ -1035,6 +1110,10 @@ class IAIModel {
 class ChatUserSettings {
 }
 
+// Como funciona esta clase y beneficos de extender
+// el objeto principal ahora se llama entity
+// sabe buscar el objeto directamente desde el id en un efecto en esta clase.
+// Es tu deber implementar el patch, como se crear el form cuando se tiene el objeto.
 class EntityBaseFormComponent {
     constructor() {
         this.route = inject(ActivatedRoute);
@@ -1210,668 +1289,6 @@ function formatCamelCaseString(input) {
 // * Extensionable: Ability to add extra features to the entity
 // *  ❗️ PENDING IMediable: this add media songs and videos and more only thinking for lessons or content interactions.
 
-class ConfirmService {
-    constructor() {
-        this.pdialogService = inject(DialogService);
-    }
-    openConfirm(title = '', message = '', acceptText = 'Aceptar') {
-        const dialogRef = this.pdialogService.open(ConfirmComponent, {
-            data: {
-                message: message,
-                title: title,
-                acceptText,
-            },
-            closable: true,
-            modal: true,
-        });
-        return dialogRef.onClose;
-    }
-    confirm(options) {
-        const dialogRef = this.pdialogService.open(ConfirmComponent, {
-            data: {
-                message: options.message || '',
-                title: options.title || 'Confirmación',
-                acceptText: options.acceptText || 'Aceptar',
-                cancelText: options.cancelText || 'Cancelar',
-                warning: options.warning || null,
-                oneBotton: options.oneBotton || false,
-                piIcon: options.piIcon || null,
-            },
-            closable: true,
-            modal: true,
-        });
-        return firstValueFrom(dialogRef.onClose);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConfirmService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConfirmService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConfirmService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class PromptComponent {
-    constructor() {
-        this.ref = inject(DynamicDialogRef);
-        this.config = inject(DynamicDialogConfig);
-        this.title = signal('Prompt', ...(ngDevMode ? [{ debugName: "title" }] : []));
-        this.message = signal('', ...(ngDevMode ? [{ debugName: "message" }] : []));
-        this.acceptText = signal('Accept', ...(ngDevMode ? [{ debugName: "acceptText" }] : []));
-        this.cancelText = signal('Cancel', ...(ngDevMode ? [{ debugName: "cancelText" }] : []));
-        this.inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
-    }
-    ngOnInit() {
-        this.title.set(this.config.data?.title || 'Prompt');
-        this.message.set(this.config.data?.message || '');
-        this.acceptText.set(this.config.data?.acceptText || 'Accept');
-        this.cancelText.set(this.config.data?.cancelText || 'Cancel');
-        // Set initial value if provided
-        this.inputValue.set(this.config.data?.initialValue || '');
-    }
-    accept() {
-        this.ref.close(this.inputValue());
-    }
-    cancel() {
-        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: i1$1.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.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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PromptComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dc-prompt', standalone: true, imports: [CommonModule, ButtonModule, InputTextModule, FormsModule, MessageModule, TextareaModule], 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" }]
-        }] });
-
-class PromptService {
-    constructor() {
-        this.dialogService = inject(DialogService);
-    }
-    /**
-     * Opens a prompt dialog.
-     * @param options Configuration options for the prompt dialog.
-     * @returns A promise that resolves with the input value if accepted, or null if canceled.
-     */
-    openPrompt(options) {
-        const dialogRef = this.dialogService.open(PromptComponent, {
-            data: {
-                title: options.title || 'Prompt',
-                message: options.message || '',
-                acceptText: options.acceptText || 'Accept',
-                cancelText: options.cancelText || 'Cancel',
-                initialValue: options.initialValue || '', // Pass initialValue to component data
-            },
-            header: options.title || 'Prompt', // Set header for accessibility and title bar
-            closable: true,
-            modal: true,
-            width: '700px', // Optional: Adjust width as needed
-        });
-        // Return the result when the dialog closes
-        return firstValueFrom(dialogRef.onClose);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PromptService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PromptService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PromptService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-/**
- * Injection token for HttpCoreService configuration
- */
-const HTTP_CORE_CONFIG = new InjectionToken('HTTP_CORE_CONFIG');
-/**
- * Modern HTTP service for Angular applications
- * Provides methods for making HTTP requests with proper error handling and response transformation
- */
-class HttpCoreService {
-    constructor(config) {
-        this.httpClient = inject(HttpClient);
-        // Use signals for reactive state
-        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-        this.lastError = signal(null, ...(ngDevMode ? [{ debugName: "lastError" }] : []));
-        if (config && config.primaryUrl) {
-            this.config = {
-                defaultHost: 'primary',
-                ...config,
-            };
-        }
-        else {
-            // Initialize with a placeholder - this will be set properly with setConfig
-            this.config = {
-                primaryUrl: '',
-                defaultHost: 'primary',
-            };
-            if (!config) {
-                console.warn('HttpCoreService: No configuration provided. Use setConfig to configure the service.');
-            }
-            else if (!config.primaryUrl) {
-                console.warn('HttpCoreService: primaryUrl is required in configuration. Use setConfig to set it.');
-            }
-        }
-    }
-    /**
-     * Set the configuration for the service
-     * This allows for manual configuration when not using dependency injection
-     */
-    setConfig(config) {
-        this.config = {
-            ...this.config,
-            ...config,
-        };
-    }
-    /**
-     * Get the loading state as a signal
-     */
-    loading() {
-        return this.isLoading;
-    }
-    /**
-     * Get the last error as a signal
-     */
-    error() {
-        return this.lastError;
-    }
-    /**
-     * Make a POST request to the specified service
-     * @param service The service endpoint
-     * @param data The data to send
-     * @param host The host to use (primary or secondary)
-     * @returns A promise with the response
-     */
-    async post(service, data, host = this.config.defaultHost) {
-        this.isLoading.set(true);
-        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 result = await lastValueFrom(response$);
-            this.isLoading.set(false);
-            return result;
-        }
-        catch (error) {
-            this.isLoading.set(false);
-            throw error;
-        }
-    }
-    /**
-     * Make a POST request to a specific URL
-     * @param baseUrl The base URL
-     * @param service The service endpoint
-     * @param data The data to send
-     * @returns A promise with the response
-     */
-    async postToUrl(baseUrl, service, data) {
-        this.isLoading.set(true);
-        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 result = await lastValueFrom(response$);
-            this.isLoading.set(false);
-            return result;
-        }
-        catch (error) {
-            this.isLoading.set(false);
-            throw error;
-        }
-    }
-    /**
-     * Make a PUT request to the specified service
-     * @param service The service endpoint
-     * @param data The data to send
-     * @param host The host to use (primary or secondary)
-     * @returns A promise with the response
-     */
-    async put(service, data, host = this.config.defaultHost) {
-        this.isLoading.set(true);
-        try {
-            const url = this.getHostUrl(host) + '/' + service;
-            const dataPlain = this.toPlainObject(data);
-            const response$ = this.httpClient.put(url, dataPlain).pipe(catchError(this.handleRequestError.bind(this)));
-            const result = await lastValueFrom(response$);
-            this.isLoading.set(false);
-            return result;
-        }
-        catch (error) {
-            this.isLoading.set(false);
-            throw error;
-        }
-    }
-    /**
-     * Make a PUT request to a specific URL
-     * @param baseUrl The base URL
-     * @param service The service endpoint
-     * @param data The data to send
-     * @returns A promise with the response
-     */
-    async putToUrl(baseUrl, service, data) {
-        this.isLoading.set(true);
-        try {
-            const url = `${baseUrl}/${service}`;
-            const dataPlain = this.toPlainObject(data);
-            const response$ = this.httpClient.put(url, dataPlain).pipe(catchError(this.handleRequestError.bind(this)));
-            const result = await lastValueFrom(response$);
-            this.isLoading.set(false);
-            return result;
-        }
-        catch (error) {
-            this.isLoading.set(false);
-            throw error;
-        }
-    }
-    /**
-     * Make a GET request to the specified service
-     * @param service The service endpoint
-     * @param host The host to use (primary or secondary)
-     * @param skipErrorHandling Whether to skip error handling
-     * @returns A promise with the response
-     */
-    async get(service, host = this.config.defaultHost, skipErrorHandling = false) {
-        this.isLoading.set(true);
-        try {
-            const url = this.getHostUrl(host) + '/' + service;
-            const response$ = this.httpClient.get(url).pipe(catchError((err) => {
-                if (!skipErrorHandling) {
-                    return this.handleRequestError(err);
-                }
-                return throwError(() => err);
-            }));
-            const result = await lastValueFrom(response$);
-            this.isLoading.set(false);
-            return result;
-        }
-        catch (error) {
-            this.isLoading.set(false);
-            throw error;
-        }
-    }
-    /**
-     * Make a GET request to a specific URL
-     * @param baseUrl The base URL
-     * @param service The service endpoint
-     * @param skipErrorHandling Whether to skip error handling
-     * @returns A promise with the response
-     */
-    async getFromUrl(baseUrl, service, skipErrorHandling = false) {
-        this.isLoading.set(true);
-        try {
-            const url = `${baseUrl}/${service}`;
-            const response$ = this.httpClient.get(url).pipe(catchError((err) => {
-                if (!skipErrorHandling) {
-                    return this.handleRequestError(err);
-                }
-                return throwError(() => err);
-            }));
-            const result = await lastValueFrom(response$);
-            this.isLoading.set(false);
-            return result;
-        }
-        catch (error) {
-            this.isLoading.set(false);
-            throw error;
-        }
-    }
-    /**
-     * Make a DELETE request to the specified service
-     * @param service The service endpoint
-     * @param host The host to use (primary or secondary)
-     * @returns A promise with the response
-     */
-    async delete(service, host = this.config.defaultHost) {
-        this.isLoading.set(true);
-        try {
-            const url = this.getHostUrl(host) + '/' + service;
-            const response$ = this.httpClient.delete(url).pipe(catchError(this.handleRequestError.bind(this)));
-            const result = await lastValueFrom(response$);
-            this.isLoading.set(false);
-            return result;
-        }
-        catch (error) {
-            this.isLoading.set(false);
-            throw error;
-        }
-    }
-    /**
-     * Make a DELETE request to a specific URL
-     * @param baseUrl The base URL
-     * @param service The service endpoint
-     * @returns A promise with the response
-     */
-    async deleteFromUrl(baseUrl, service) {
-        this.isLoading.set(true);
-        try {
-            const url = `${baseUrl}/${service}`;
-            const response$ = this.httpClient.delete(url).pipe(catchError(this.handleRequestError.bind(this)));
-            const result = await lastValueFrom(response$);
-            this.isLoading.set(false);
-            return result;
-        }
-        catch (error) {
-            this.isLoading.set(false);
-            throw error;
-        }
-    }
-    /**
-     * Get an observable for a GET request
-     * @param service The service endpoint
-     * @param host The host to use (primary or secondary)
-     * @returns An observable with the response
-     */
-    getObservable(service, host = this.config.defaultHost) {
-        const url = this.getHostUrl(host) + '/' + service;
-        return this.httpClient.get(url).pipe(catchError(this.handleRequestError.bind(this)));
-    }
-    /**
-     * Get an observable for a POST request
-     * @param service The service endpoint
-     * @param data The data to send
-     * @param skipErrorHandling Whether to skip error handling
-     * @param host The host to use (primary or secondary)
-     * @returns An observable with the response
-     */
-    postObservable(service, data, skipErrorHandling = false, host = this.config.defaultHost) {
-        const url = this.getHostUrl(host) + '/' + service;
-        const dataPlain = this.toPlainObject(data);
-        return this.httpClient.post(url, dataPlain).pipe(catchError((err) => {
-            if (!skipErrorHandling) {
-                return this.handleRequestError(err);
-            }
-            return throwError(() => err);
-        }));
-    }
-    /**
-     * Get an observable for a DELETE request
-     * @param service The service endpoint
-     * @param host The host to use (primary or secondary)
-     * @returns An observable with the response
-     */
-    deleteObservable(service, host = this.config.defaultHost) {
-        const url = this.getHostUrl(host) + '/' + service;
-        return this.httpClient.delete(url).pipe(catchError(this.handleRequestError.bind(this)));
-    }
-    /**
-     * 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 uploadFile(service, file, metadata = null, host = this.config.defaultHost) {
-        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
-     * @param host The host to use (primary or secondary)
-     * @returns A promise with the response
-     */
-    async downloadFile(service, host = this.config.defaultHost) {
-        this.isLoading.set(true);
-        try {
-            const url = this.getHostUrl(host) + '/' + service;
-            const response$ = this.httpClient
-                .get(url, {
-                responseType: 'blob',
-                observe: 'response',
-            })
-                .pipe(catchError(this.handleBlobError.bind(this)));
-            const result = await lastValueFrom(response$);
-            this.isLoading.set(false);
-            return result;
-        }
-        catch (error) {
-            this.isLoading.set(false);
-            throw error;
-        }
-    }
-    /**
-     * Upload a file to the specified service and get the response as a blob
-     * @param service The service endpoint
-     * @param data The data to send
-     * @param host The host to use (primary or secondary)
-     * @returns A promise with the response
-     */
-    async postFileAndGetBlob(service, data, host = this.config.defaultHost) {
-        this.isLoading.set(true);
-        try {
-            let url = this.getHostUrl(host);
-            if (service) {
-                url += '/' + service;
-            }
-            const response$ = this.httpClient
-                .post(url, data, {
-                observe: 'response',
-                responseType: 'blob',
-            })
-                .pipe(catchError(this.handleBlobError.bind(this)));
-            const result = await lastValueFrom(response$);
-            this.isLoading.set(false);
-            return result;
-        }
-        catch (error) {
-            this.isLoading.set(false);
-            throw error;
-        }
-    }
-    /**
-     * Get a file from the specified service as an observable
-     * @param service The service endpoint
-     * @param host The host to use (primary or secondary)
-     * @returns An observable with the response
-     */
-    getFileObservable(service, host = this.config.defaultHost) {
-        const url = this.getHostUrl(host) + '/' + service;
-        return this.httpClient.get(url, { responseType: 'blob' });
-    }
-    /**
-     * Get the URL for the specified host
-     * @param host The host to use (primary or secondary)
-     * @returns The URL for the specified host
-     */
-    getHostUrl(host = this.config.defaultHost) {
-        return host === 'secondary' && this.config.secondaryUrl ? this.config.secondaryUrl : this.config.primaryUrl;
-    }
-    /**
-     * Handle an error from a request
-     * @param error The error to handle
-     * @returns An observable that throws the error
-     */
-    handleRequestError(error) {
-        this.isLoading.set(false);
-        // Set the last error
-        if (error.error && typeof error.error === 'object') {
-            this.lastError.set({
-                error_message: error.error.error_message || 'An error occurred',
-                explanation: error.error.explanation || 'Please try again later',
-                status: error.status,
-                code: error.error.code,
-            });
-        }
-        else {
-            this.lastError.set({
-                error_message: error.message || 'An error occurred',
-                explanation: 'Please try again later',
-                status: error.status,
-            });
-        }
-        // Call the custom error handler if provided
-        if (this.config.errorHandler) {
-            this.config.errorHandler(error);
-        }
-        return throwError(() => error);
-    }
-    /**
-     * Handle an error from a blob request
-     * @param error The error to handle
-     * @returns An observable that throws the error
-     */
-    async handleBlobError(error) {
-        // Convert blob error response to JSON if possible
-        if (error.error instanceof Blob) {
-            try {
-                const errorText = await error.error.text();
-                error.error = JSON.parse(errorText);
-            }
-            catch (e) {
-                // If parsing fails, create a generic error
-                error.error = {
-                    error_message: 'Error processing file',
-                    explanation: 'Unable to process server response',
-                };
-            }
-        }
-        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
-     * @returns A plain object
-     */
-    toPlainObject(obj) {
-        if (!obj)
-            return obj;
-        // Handle simple types
-        if (typeof obj !== 'object' || obj instanceof Blob || obj instanceof File) {
-            return obj;
-        }
-        // Handle arrays
-        if (Array.isArray(obj)) {
-            return obj.map((item) => this.toPlainObject(item));
-        }
-        // Handle objects
-        const result = {};
-        for (const key in obj) {
-            if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                const value = obj[key];
-                // Skip functions and undefined values
-                if (typeof value === 'function' || value === undefined) {
-                    continue;
-                }
-                result[key] = this.toPlainObject(value);
-            }
-        }
-        return result;
-    }
-    postObservableWithProgress(service, data, host = 'primary') {
-        const hostUrl = this.getHostUrl(host);
-        const url = `${hostUrl}/${service}`;
-        return this.httpClient
-            .post(url, data, {
-            reportProgress: true,
-            observe: 'events',
-            responseType: 'blob',
-        })
-            .pipe(map$1((event) => {
-            let progress;
-            let blob;
-            switch (event.type) {
-                case HttpEventType.DownloadProgress:
-                    if (event.total) {
-                        progress = Math.round((100 * event.loaded) / event.total);
-                    }
-                    break;
-                case HttpEventType.Response:
-                    blob = event.body;
-                    break;
-            }
-            return { progress, blob };
-        }), catchError((err) => {
-            this.handleRequestError(err);
-            return throwError(() => err);
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: HttpCoreService, deps: [{ token: HTTP_CORE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: HttpCoreService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: HttpCoreService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [HTTP_CORE_CONFIG]
-                }] }] });
-
-class EntityCommunicationService {
-    constructor(serviceName) {
-        this.serviceName = serviceName;
-        this.httpService = inject(HttpCoreService);
-    }
-    findAll() {
-        return this.httpService.get(`api/${this.serviceName}`);
-    }
-    findOne(id) {
-        return this.httpService.get(`api/${this.serviceName}/${id}`);
-    }
-    createOrUpdate(entity) {
-        // if Id is present then in object, then Update all props in the object
-        return this.httpService.post(`api/${this.serviceName}`, entity);
-    }
-    query(filterConfig) {
-        return this.httpService.post(`api/${this.serviceName}/query`, filterConfig);
-    }
-    partialUpdate(id, partialUpdates) {
-        // In backend object is flattened, so Convert nested objects to dot notation eg. { "video.captions.remotion": captions.captions }
-        return this.httpService.put(`api/${this.serviceName}/${id}`, partialUpdates);
-    }
-    async remove(id) {
-        await this.httpService.delete(`api/${this.serviceName}/${id}`);
-    }
-    clone(id, overrides = {}) {
-        return this.httpService.post(`api/${this.serviceName}/${id}/clone`, overrides);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EntityCommunicationService, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EntityCommunicationService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EntityCommunicationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: undefined }] });
-
-class UiStateService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: UiStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: UiStateService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: UiStateService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 const SUPPORTED_LANGUAGES = [
     'en',
     'es',
@@ -1953,7 +1370,7 @@ const LANGUAGES = {
             en: 'Spanish',
             es: 'Español',
         },
-        status: 'almostready',
+        status: 'ready',
         speakers: 592000000,
     },
     de: {
@@ -1986,21 +1403,6 @@ const LANGUAGES = {
         status: 'almostready',
         speakers: 300000000,
     },
-    zh: {
-        nativeName: '中文 (Zhōngwén)',
-        flag: '🇨🇳',
-        flagImg: 'assets/flags/cn.svg',
-        code: 'zh',
-        i: 5,
-        llmKnowledge: 94,
-        countries: ['China', 'Singapore', 'Taiwan.'],
-        translations: {
-            en: 'Chinese (Mandarin)',
-            es: 'Chino (Mandarín)',
-        },
-        status: 'almostready',
-        speakers: 1120000000,
-    },
     it: {
         nativeName: 'Italiano',
         flag: '🇮🇹',
@@ -2013,7 +1415,7 @@ const LANGUAGES = {
             en: 'Italian',
             es: 'Italiano',
         },
-        status: 'almostready',
+        status: 'ready',
         speakers: 67000000,
     },
     pt: {
@@ -2060,6 +1462,23 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 25000000,
+        releaseDate: '2025-09-08',
+    },
+    zh: {
+        nativeName: '中文 (Zhōngwén)',
+        flag: '🇨🇳',
+        flagImg: 'assets/flags/cn.svg',
+        code: 'zh',
+        i: 5,
+        llmKnowledge: 94,
+        countries: ['China', 'Singapore', 'Taiwan.'],
+        translations: {
+            en: 'Chinese (Mandarin)',
+            es: 'Chino (Mandarín)',
+        },
+        status: 'commingsoon',
+        speakers: 1120000000,
+        releaseDate: '2025-09-15',
     },
     ru: {
         nativeName: 'Русский (Russkiy)',
@@ -2075,6 +1494,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 258000000,
+        releaseDate: '2025-09-22',
     },
     ko: {
         nativeName: '한국어 (Hangugeo)',
@@ -2088,8 +1508,9 @@ const LANGUAGES = {
             en: 'Korean',
             es: 'Coreano',
         },
-        status: 'almostready',
+        status: 'commingsoon',
         speakers: 82000000,
+        releaseDate: '2025-09-22',
     },
     pl: {
         nativeName: 'Polski',
@@ -2105,6 +1526,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 40000000,
+        releaseDate: '2025-09-29',
     },
     sv: {
         nativeName: 'Svenska',
@@ -2120,6 +1542,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 10000000,
+        releaseDate: '2025-10-06',
     },
     tr: {
         nativeName: 'Türkçe',
@@ -2135,6 +1558,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 88000000,
+        releaseDate: '2025-10-06',
     },
     ar: {
         nativeName: 'العربية (Al-Arabiyyah)',
@@ -2176,6 +1600,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 422000000,
+        releaseDate: '2025-10-13',
     },
     vi: {
         nativeName: 'Tiếng Việt',
@@ -2191,6 +1616,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 90000000,
+        releaseDate: '2025-10-20',
     },
     id: {
         nativeName: 'Bahasa Indonesia',
@@ -2206,6 +1632,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 199000000,
+        releaseDate: '2025-10-20',
     },
     da: {
         nativeName: 'Dansk',
@@ -2221,6 +1648,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 6000000,
+        releaseDate: '2025-10-27',
     },
     no: {
         nativeName: 'Norsk',
@@ -2236,6 +1664,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 5300000,
+        releaseDate: '2025-10-27',
     },
     fi: {
         nativeName: 'Suomi',
@@ -2251,6 +1680,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 5400000,
+        releaseDate: '2025-11-03',
     },
     cs: {
         nativeName: 'Čeština',
@@ -2266,6 +1696,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 10700000,
+        releaseDate: '2025-11-03',
     },
     el: {
         nativeName: 'Ελληνικά (Elliniká)',
@@ -2281,6 +1712,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 13500000,
+        releaseDate: '2025-11-17',
     },
     hu: {
         nativeName: 'Magyar',
@@ -2296,6 +1728,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 13000000,
+        releaseDate: '2025-11-25',
     },
     ro: {
         nativeName: 'Română',
@@ -2311,6 +1744,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 24000000,
+        releaseDate: '2025-12-01',
     },
     uk: {
         nativeName: 'Українська (Ukrainska)',
@@ -2326,6 +1760,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 33000000,
+        releaseDate: '2025-12-08',
     },
     he: {
         nativeName: 'עברית (Ivrit)',
@@ -2341,6 +1776,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 9000000,
+        releaseDate: '2025-12-15',
     },
     th: {
         nativeName: 'ภาษาไทย (Phasa Thai)',
@@ -2356,6 +1792,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 69000000,
+        releaseDate: '2025-12-15',
     },
     hi: {
         nativeName: 'हिन्दी (Hindī)',
@@ -2371,6 +1808,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 602000000,
+        releaseDate: '2025-12-22',
     },
     ca: {
         nativeName: 'Català',
@@ -2386,6 +1824,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 10000000,
+        releaseDate: '2025-12-22',
     },
     bg: {
         nativeName: 'Български (Balgarski)',
@@ -2401,6 +1840,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 9000000,
+        releaseDate: '2025-12-22',
     },
     eo: {
         nativeName: 'Esperanto',
@@ -2416,6 +1856,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 2000000,
+        releaseDate: '2025-12-29',
     },
     ia: {
         nativeName: 'Interlingua',
@@ -2431,6 +1872,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 1500,
+        releaseDate: '2025-12-29',
     },
     hr: {
         nativeName: 'Hrvatski',
@@ -2446,6 +1888,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 5700000,
+        releaseDate: '2025-12-29',
     },
     sk: {
         nativeName: 'Slovenčina',
@@ -2461,6 +1904,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 5400000,
+        releaseDate: '2025-12-29',
     },
     fil: {
         nativeName: 'Filipino',
@@ -2476,6 +1920,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 109000000,
+        releaseDate: '2025-12-29',
     },
     tl: {
         // Tagalog often used as base for Filipino, but distinct ISO code
@@ -2492,6 +1937,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 109000000,
+        releaseDate: '2025-12-29',
     },
     lt: {
         nativeName: 'Lietuvių',
@@ -2507,6 +1953,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 2800000,
+        releaseDate: '2025-12-29',
     },
     lv: {
         nativeName: 'Latviešu',
@@ -2522,6 +1969,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 1900000,
+        releaseDate: '2025-12-29',
     },
     sl: {
         nativeName: 'Slovenščina',
@@ -2537,6 +1985,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 2500000,
+        releaseDate: '2025-12-29',
     },
     et: {
         nativeName: 'Eesti',
@@ -2552,6 +2001,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 1100000,
+        releaseDate: '2025-12-29',
     },
     ms: {
         nativeName: 'Bahasa Melayu',
@@ -2567,6 +2017,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 290000000,
+        releaseDate: '2025-12-29',
     },
     sw: {
         nativeName: 'Kiswahili',
@@ -2582,6 +2033,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 200000000,
+        releaseDate: '2025-12-29',
     },
     fa: {
         nativeName: 'فارسی (Fārsī)',
@@ -2597,6 +2049,7 @@ const LANGUAGES = {
         },
         status: 'commingsoon',
         speakers: 110000000,
+        releaseDate: '2025-12-29',
     },
     bn: {
         nativeName: 'বাংলা (Bangla)',
@@ -2857,12 +2310,749 @@ const LANGUAGES = {
 function getLangDesc(langCode, lang) {
     return LANGUAGES[langCode]?.translations[lang] || langCode;
 }
-function getSupportedLanguageOptions(lang = 'es') {
-    return SUPPORTED_LANGUAGES.map((langCode) => ({
-        value: langCode,
-        label: getLangDesc(langCode, lang),
-    }));
+function getSupportedLanguageOptions(lang = 'es') {
+    return SUPPORTED_LANGUAGES.map((langCode) => ({
+        value: langCode,
+        label: getLangDesc(langCode, lang),
+    }));
+}
+
+class LangDescTranslation {
+    transform(value, lang) {
+        return getLangDesc(value, lang);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LangDescTranslation, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: LangDescTranslation, isStandalone: true, name: "langDesc" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LangDescTranslation, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'langDesc',
+                    standalone: true,
+                }]
+        }] });
+
+class ConfirmService {
+    constructor() {
+        this.pdialogService = inject(DialogService);
+    }
+    openConfirm(title = '', message = '', acceptText = 'Aceptar') {
+        const dialogRef = this.pdialogService.open(ConfirmComponent, {
+            data: {
+                message: message,
+                title: title,
+                acceptText,
+            },
+            closable: true,
+            modal: true,
+        });
+        return dialogRef.onClose;
+    }
+    confirm(options) {
+        const dialogRef = this.pdialogService.open(ConfirmComponent, {
+            data: {
+                message: options.message || '',
+                title: options.title || 'Confirmación',
+                acceptText: options.acceptText || 'Aceptar',
+                cancelText: options.cancelText || 'Cancelar',
+                warning: options.warning || null,
+                oneBotton: options.oneBotton || false,
+                piIcon: options.piIcon || null,
+            },
+            closable: true,
+            modal: true,
+        });
+        return firstValueFrom(dialogRef.onClose);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConfirmService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConfirmService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ConfirmService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class PromptComponent {
+    constructor() {
+        this.ref = inject(DynamicDialogRef);
+        this.config = inject(DynamicDialogConfig);
+        this.title = signal('Prompt', ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.message = signal('', ...(ngDevMode ? [{ debugName: "message" }] : []));
+        this.acceptText = signal('Accept', ...(ngDevMode ? [{ debugName: "acceptText" }] : []));
+        this.cancelText = signal('Cancel', ...(ngDevMode ? [{ debugName: "cancelText" }] : []));
+        this.inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    }
+    ngOnInit() {
+        this.title.set(this.config.data?.title || 'Prompt');
+        this.message.set(this.config.data?.message || '');
+        this.acceptText.set(this.config.data?.acceptText || 'Accept');
+        this.cancelText.set(this.config.data?.cancelText || 'Cancel');
+        // Set initial value if provided
+        this.inputValue.set(this.config.data?.initialValue || '');
+    }
+    accept() {
+        this.ref.close(this.inputValue());
+    }
+    cancel() {
+        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$3.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,
+            args: [{ selector: 'dc-prompt', standalone: true, imports: [CommonModule, ButtonModule, InputTextModule, FormsModule, MessageModule, TextareaModule], 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" }]
+        }] });
+
+class PromptService {
+    constructor() {
+        this.dialogService = inject(DialogService);
+    }
+    /**
+     * Opens a prompt dialog.
+     * @param options Configuration options for the prompt dialog.
+     * @returns A promise that resolves with the input value if accepted, or null if canceled.
+     */
+    openPrompt(options) {
+        const dialogRef = this.dialogService.open(PromptComponent, {
+            data: {
+                title: options.title || 'Prompt',
+                message: options.message || '',
+                acceptText: options.acceptText || 'Accept',
+                cancelText: options.cancelText || 'Cancel',
+                initialValue: options.initialValue || '', // Pass initialValue to component data
+            },
+            header: options.title || 'Prompt', // Set header for accessibility and title bar
+            closable: true,
+            modal: true,
+            width: '700px', // Optional: Adjust width as needed
+        });
+        // Return the result when the dialog closes
+        return firstValueFrom(dialogRef.onClose);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PromptService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PromptService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: PromptService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Injection token for HttpCoreService configuration
+ */
+const HTTP_CORE_CONFIG = new InjectionToken('HTTP_CORE_CONFIG');
+/**
+ * Modern HTTP service for Angular applications
+ * Provides methods for making HTTP requests with proper error handling and response transformation
+ */
+class HttpCoreService {
+    constructor(config) {
+        this.httpClient = inject(HttpClient);
+        // Use signals for reactive state
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.lastError = signal(null, ...(ngDevMode ? [{ debugName: "lastError" }] : []));
+        if (config && config.primaryUrl) {
+            this.config = {
+                defaultHost: 'primary',
+                ...config,
+            };
+        }
+        else {
+            // Initialize with a placeholder - this will be set properly with setConfig
+            this.config = {
+                primaryUrl: '',
+                defaultHost: 'primary',
+            };
+            if (!config) {
+                console.warn('HttpCoreService: No configuration provided. Use setConfig to configure the service.');
+            }
+            else if (!config.primaryUrl) {
+                console.warn('HttpCoreService: primaryUrl is required in configuration. Use setConfig to set it.');
+            }
+        }
+    }
+    /**
+     * Set the configuration for the service
+     * This allows for manual configuration when not using dependency injection
+     */
+    setConfig(config) {
+        this.config = {
+            ...this.config,
+            ...config,
+        };
+    }
+    /**
+     * Get the loading state as a signal
+     */
+    loading() {
+        return this.isLoading;
+    }
+    /**
+     * Get the last error as a signal
+     */
+    error() {
+        return this.lastError;
+    }
+    async postHttp({ service, data, host }) {
+        this.isLoading.set(true);
+        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 result = await lastValueFrom(response$);
+            this.isLoading.set(false);
+            return result;
+        }
+        catch (error) {
+            this.isLoading.set(false);
+            throw error;
+        }
+    }
+    async putHttp({ service, data, host }) {
+        this.isLoading.set(true);
+        try {
+            const url = this.getHostUrl(host) + '/' + service;
+            const dataPlain = this.toPlainObject(data);
+            const response$ = this.httpClient.put(url, dataPlain).pipe(catchError(this.handleRequestError.bind(this)));
+            const result = await lastValueFrom(response$);
+            this.isLoading.set(false);
+            return result;
+        }
+        catch (error) {
+            this.isLoading.set(false);
+            throw error;
+        }
+    }
+    async getHttp({ service, host, skipErrorHandling = false }) {
+        this.isLoading.set(true);
+        try {
+            const url = this.getHostUrl(host) + '/' + service;
+            const response$ = this.httpClient.get(url).pipe(catchError((err) => {
+                if (!skipErrorHandling) {
+                    return this.handleRequestError(err);
+                }
+                return throwError(() => err);
+            }));
+            const result = await lastValueFrom(response$);
+            this.isLoading.set(false);
+            return result;
+        }
+        catch (error) {
+            this.isLoading.set(false);
+            throw error;
+        }
+    }
+    async deleteHttp({ service, host }) {
+        this.isLoading.set(true);
+        try {
+            const url = this.getHostUrl(host) + '/' + service;
+            const response$ = this.httpClient.delete(url).pipe(catchError(this.handleRequestError.bind(this)));
+            const result = await lastValueFrom(response$);
+            this.isLoading.set(false);
+            return result;
+        }
+        catch (error) {
+            this.isLoading.set(false);
+            throw error;
+        }
+    }
+    /**
+     * Make a POST request to the specified service
+     * @param service The service endpoint
+     * @param data The data to send
+     * @param host The host to use (primary or secondary)
+     * @returns A promise with the response
+     * @deprecated Use postHttp instead
+     */
+    async post(service, data, host = this.config.defaultHost) {
+        return this.postHttp({ service, data, host });
+    }
+    /**
+     * Make a POST request to a specific URL
+     * @param baseUrl The base URL
+     * @param service The service endpoint
+     * @param data The data to send
+     * @returns A promise with the response
+     */
+    async postToUrl(baseUrl, service, data) {
+        this.isLoading.set(true);
+        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 result = await lastValueFrom(response$);
+            this.isLoading.set(false);
+            return result;
+        }
+        catch (error) {
+            this.isLoading.set(false);
+            throw error;
+        }
+    }
+    /**
+     * Make a PUT request to the specified service
+     * @param service The service endpoint
+     * @param data The data to send
+     * @param host The host to use (primary or secondary)
+     * @returns A promise with the response
+     * @deprecated Use putHttp instead
+     */
+    async put(service, data, host = this.config.defaultHost) {
+        return this.putHttp({ service, data, host });
+    }
+    /**
+     * Make a PUT request to a specific URL
+     * @param baseUrl The base URL
+     * @param service The service endpoint
+     * @param data The data to send
+     * @returns A promise with the response
+     */
+    async putToUrl(baseUrl, service, data) {
+        this.isLoading.set(true);
+        try {
+            const url = `${baseUrl}/${service}`;
+            const dataPlain = this.toPlainObject(data);
+            const response$ = this.httpClient.put(url, dataPlain).pipe(catchError(this.handleRequestError.bind(this)));
+            const result = await lastValueFrom(response$);
+            this.isLoading.set(false);
+            return result;
+        }
+        catch (error) {
+            this.isLoading.set(false);
+            throw error;
+        }
+    }
+    /**
+     * Make a GET request to the specified service
+     * @param service The service endpoint
+     * @param host The host to use (primary or secondary)
+     * @param skipErrorHandling Whether to skip error handling
+     * @returns A promise with the response
+     * @deprecated Use getHttp instead
+     */
+    async get(service, host = this.config.defaultHost, skipErrorHandling = false) {
+        return this.getHttp({ service, host, skipErrorHandling });
+    }
+    /**
+     * Make a GET request to a specific URL
+     * @param baseUrl The base URL
+     * @param service The service endpoint
+     * @param skipErrorHandling Whether to skip error handling
+     * @returns A promise with the response
+     */
+    async getFromUrl(baseUrl, service, skipErrorHandling = false) {
+        this.isLoading.set(true);
+        try {
+            const url = `${baseUrl}/${service}`;
+            const response$ = this.httpClient.get(url).pipe(catchError((err) => {
+                if (!skipErrorHandling) {
+                    return this.handleRequestError(err);
+                }
+                return throwError(() => err);
+            }));
+            const result = await lastValueFrom(response$);
+            this.isLoading.set(false);
+            return result;
+        }
+        catch (error) {
+            this.isLoading.set(false);
+            throw error;
+        }
+    }
+    /**
+     * Make a DELETE request to the specified service
+     * @param service The service endpoint
+     * @param host The host to use (primary or secondary)
+     * @returns A promise with the response
+     * @deprecated Use deleteHttp instead
+     */
+    async delete(service, host = this.config.defaultHost) {
+        return this.deleteHttp({ service, host });
+    }
+    /**
+     * Make a DELETE request to a specific URL
+     * @param baseUrl The base URL
+     * @param service The service endpoint
+     * @returns A promise with the response
+     */
+    async deleteFromUrl(baseUrl, service) {
+        this.isLoading.set(true);
+        try {
+            const url = `${baseUrl}/${service}`;
+            const response$ = this.httpClient.delete(url).pipe(catchError(this.handleRequestError.bind(this)));
+            const result = await lastValueFrom(response$);
+            this.isLoading.set(false);
+            return result;
+        }
+        catch (error) {
+            this.isLoading.set(false);
+            throw error;
+        }
+    }
+    /**
+     * Get an observable for a GET request
+     * @param service The service endpoint
+     * @param host The host to use (primary or secondary)
+     * @returns An observable with the response
+     */
+    getObservable(service, host = this.config.defaultHost) {
+        const url = this.getHostUrl(host) + '/' + service;
+        return this.httpClient.get(url).pipe(catchError(this.handleRequestError.bind(this)));
+    }
+    /**
+     * Get an observable for a POST request
+     * @param service The service endpoint
+     * @param data The data to send
+     * @param skipErrorHandling Whether to skip error handling
+     * @param host The host to use (primary or secondary)
+     * @returns An observable with the response
+     */
+    postObservable(service, data, skipErrorHandling = false, host = this.config.defaultHost) {
+        const url = this.getHostUrl(host) + '/' + service;
+        const dataPlain = this.toPlainObject(data);
+        return this.httpClient.post(url, dataPlain).pipe(catchError((err) => {
+            if (!skipErrorHandling) {
+                return this.handleRequestError(err);
+            }
+            return throwError(() => err);
+        }));
+    }
+    /**
+     * Get an observable for a DELETE request
+     * @param service The service endpoint
+     * @param host The host to use (primary or secondary)
+     * @returns An observable with the response
+     */
+    deleteObservable(service, host = this.config.defaultHost) {
+        const url = this.getHostUrl(host) + '/' + service;
+        return this.httpClient.delete(url).pipe(catchError(this.handleRequestError.bind(this)));
+    }
+    /**
+     * 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 uploadFile(service, file, metadata = null, host = this.config.defaultHost) {
+        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
+     * @param host The host to use (primary or secondary)
+     * @returns A promise with the response
+     */
+    async downloadFile(service, host = this.config.defaultHost) {
+        this.isLoading.set(true);
+        try {
+            const url = this.getHostUrl(host) + '/' + service;
+            const response$ = this.httpClient
+                .get(url, {
+                responseType: 'blob',
+                observe: 'response',
+            })
+                .pipe(catchError(this.handleBlobError.bind(this)));
+            const result = await lastValueFrom(response$);
+            this.isLoading.set(false);
+            return result;
+        }
+        catch (error) {
+            this.isLoading.set(false);
+            throw error;
+        }
+    }
+    /**
+     * Upload a file to the specified service and get the response as a blob
+     * @param service The service endpoint
+     * @param data The data to send
+     * @param host The host to use (primary or secondary)
+     * @returns A promise with the response
+     */
+    async postFileAndGetBlob(service, data, host = this.config.defaultHost) {
+        this.isLoading.set(true);
+        try {
+            let url = this.getHostUrl(host);
+            if (service) {
+                url += '/' + service;
+            }
+            const response$ = this.httpClient
+                .post(url, data, {
+                observe: 'response',
+                responseType: 'blob',
+            })
+                .pipe(catchError(this.handleBlobError.bind(this)));
+            const result = await lastValueFrom(response$);
+            this.isLoading.set(false);
+            return result;
+        }
+        catch (error) {
+            this.isLoading.set(false);
+            throw error;
+        }
+    }
+    /**
+     * Get a file from the specified service as an observable
+     * @param service The service endpoint
+     * @param host The host to use (primary or secondary)
+     * @returns An observable with the response
+     */
+    getFileObservable(service, host = this.config.defaultHost) {
+        const url = this.getHostUrl(host) + '/' + service;
+        return this.httpClient.get(url, { responseType: 'blob' });
+    }
+    /**
+     * Get the URL for the specified host
+     * @param host The host to use (primary or secondary)
+     * @returns The URL for the specified host
+     */
+    getHostUrl(host = this.config.defaultHost) {
+        if (host === 'primary') {
+            return this.config.primaryUrl;
+        }
+        if (host === 'secondary' && this.config.secondaryUrl) {
+            return this.config.secondaryUrl;
+        }
+        else {
+            return host;
+        }
+    }
+    /**
+     * Handle an error from a request
+     * @param error The error to handle
+     * @returns An observable that throws the error
+     */
+    handleRequestError(error) {
+        this.isLoading.set(false);
+        // Set the last error
+        if (error.error && typeof error.error === 'object') {
+            this.lastError.set({
+                error_message: error.error.error_message || 'An error occurred',
+                explanation: error.error.explanation || 'Please try again later',
+                status: error.status,
+                code: error.error.code,
+            });
+        }
+        else {
+            this.lastError.set({
+                error_message: error.message || 'An error occurred',
+                explanation: 'Please try again later',
+                status: error.status,
+            });
+        }
+        // Call the custom error handler if provided
+        if (this.config.errorHandler) {
+            this.config.errorHandler(error);
+        }
+        return throwError(() => error);
+    }
+    /**
+     * Handle an error from a blob request
+     * @param error The error to handle
+     * @returns An observable that throws the error
+     */
+    async handleBlobError(error) {
+        // Convert blob error response to JSON if possible
+        if (error.error instanceof Blob) {
+            try {
+                const errorText = await error.error.text();
+                error.error = JSON.parse(errorText);
+            }
+            catch (e) {
+                // If parsing fails, create a generic error
+                error.error = {
+                    error_message: 'Error processing file',
+                    explanation: 'Unable to process server response',
+                };
+            }
+        }
+        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
+     * @returns A plain object
+     */
+    toPlainObject(obj) {
+        if (!obj)
+            return obj;
+        // Handle simple types
+        if (typeof obj !== 'object' || obj instanceof Blob || obj instanceof File) {
+            return obj;
+        }
+        // Handle arrays
+        if (Array.isArray(obj)) {
+            return obj.map((item) => this.toPlainObject(item));
+        }
+        // Handle objects
+        const result = {};
+        for (const key in obj) {
+            if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                const value = obj[key];
+                // Skip functions and undefined values
+                if (typeof value === 'function' || value === undefined) {
+                    continue;
+                }
+                result[key] = this.toPlainObject(value);
+            }
+        }
+        return result;
+    }
+    postObservableWithProgress(service, data, host = 'primary') {
+        const hostUrl = this.getHostUrl(host);
+        const url = `${hostUrl}/${service}`;
+        return this.httpClient
+            .post(url, data, {
+            reportProgress: true,
+            observe: 'events',
+            responseType: 'blob',
+        })
+            .pipe(map$1((event) => {
+            let progress;
+            let blob;
+            switch (event.type) {
+                case HttpEventType.DownloadProgress:
+                    if (event.total) {
+                        progress = Math.round((100 * event.loaded) / event.total);
+                    }
+                    break;
+                case HttpEventType.Response:
+                    blob = event.body;
+                    break;
+            }
+            return { progress, blob };
+        }), catchError((err) => {
+            this.handleRequestError(err);
+            return throwError(() => err);
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: HttpCoreService, deps: [{ token: HTTP_CORE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: HttpCoreService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: HttpCoreService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [HTTP_CORE_CONFIG]
+                }] }] });
+
+class EntityCommunicationService {
+    constructor(serviceName, customHost) {
+        this.serviceName = serviceName;
+        this.customHost = customHost;
+        this.httpService = inject(HttpCoreService);
+    }
+    findAll() {
+        return this.httpService.getHttp({ service: `api/${this.serviceName}`, host: this.customHost });
+    }
+    findOne(id) {
+        return this.httpService.getHttp({ service: `api/${this.serviceName}/${id}`, host: this.customHost });
+    }
+    createOrUpdate(entity) {
+        // if Id is present then in object, then Update all props in the object
+        return this.httpService.postHttp({ service: `api/${this.serviceName}`, data: entity, host: this.customHost });
+    }
+    query(filterConfig) {
+        return this.httpService.postHttp({ service: `api/${this.serviceName}/query`, data: filterConfig, 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 });
+    }
+    async remove(id) {
+        await this.httpService.deleteHttp({ service: `api/${this.serviceName}/${id}`, host: this.customHost });
+    }
+    clone(id, overrides = {}) {
+        return this.httpService.postHttp({ service: `api/${this.serviceName}/${id}/clone`, data: overrides });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EntityCommunicationService, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EntityCommunicationService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: EntityCommunicationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined }, { type: undefined }] });
+
+class UiStateService {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: UiStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: UiStateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: UiStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class FormUtilsService {
+    constructor() {
+        this.fb = inject(FormBuilder);
+    }
+    createMetaFormGroup() {
+        return this.fb.group({
+            authorId: [''],
+            authorEmail: [''],
+            takenCount: [0],
+            level: [0],
+        });
+    }
+    createManageableFormGroup() {
+        return this.fb.group({
+            isPublic: [false],
+            status: ['draft'],
+        });
+    }
+    createLearnableFormGroup() {
+        return this.fb.group({
+            level: new FormControl(0),
+            takenCount: new FormControl(0),
+            tags: this.fb.array([]),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FormUtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FormUtilsService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: FormUtilsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
 const MoodStateOptions = [
     // Emociones básicas y fundamentales
@@ -2913,5 +3103,5 @@ const MoodStateOptions = [
  * Generated bundle index. Do not edit.
  */
 
-export { AudioSpeed, AudioSpeedReverse, ChatUserSettings, ConfirmComponent, ConfirmService, DCFilterBarComponent, DCProgressToastComponent, DcAuditableViewerComponent, DcExtensionsViewerComponent, DcLearnableViewerComponent, DcManageableViewerComponent, DcReactionsViewerComponent, EModelQuality, EmptyStateComponent, EntityBaseFormComponent, EntityBaseListComponent, EntityCommunicationService, GetPathPipe, HTTP_CORE_CONFIG, HttpCoreService, IAIModel, LANGUAGES, LoadingBarComponent, LoadingBarService, ModelQualityOptions, MoodStateOptions, OptionValue, PaginationBase, PromptService, QuickTableComponent, SUPPORTED_LANGUAGES, TOAST_ALERTS_TOKEN, ToastAlertsAbstractService, UiStateService, availibleFilters, extractJsonFromString, formatCamelCaseString, getLangDesc, getSupportedLanguageOptions, provideToastAlert, sortOptions, sortTypes };
+export { AudioSpeed, AudioSpeedReverse, ChatUserSettings, ConfirmComponent, ConfirmService, DCFilterBarComponent, DCProgressToastComponent, DcAuditableViewerComponent, DcExtensionsViewerComponent, DcLearnableFormComponent, DcLearnableViewerComponent, DcManageableFormComponent, DcManageableViewerComponent, DcReactionsViewerComponent, EModelQuality, EmptyStateComponent, EntityBaseFormComponent, EntityBaseListComponent, EntityCommunicationService, 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 };
 //# sourceMappingURL=dataclouder-ngx-core.mjs.map