@dataclouder/ngx-core 0.1.9 → 0.1.10

package/fesm2022/dataclouder-ngx-core.mjs

@@ -1,9 +1,8 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, ChangeDetectionStrategy, Output, HostListener, InjectionToken, Directive, Injectable, Pipe, ViewChild } from '@angular/core';
-import { NgIf, CommonModule } from '@angular/common';
+import { input, Input, Component, output, ChangeDetectionStrategy, inject, HostListener, InjectionToken, Directive, Injectable, ChangeDetectorRef, Pipe, signal, effect, ViewChild, Optional, Inject } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i2 from 'primeng/button';
+import * as i1$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i4 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
@@ -13,43 +12,44 @@ import * as i6 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i7 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
-import * as i1$1 from 'primeng/api';
-import { MessageService } from 'primeng/api';
-import * as i3 from 'primeng/message';
+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 { MessageModule } from 'primeng/message';
-import * as i1$2 from 'primeng/dynamicdialog';
-import * as i1$3 from '@angular/router';
+import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { firstValueFrom } from 'rxjs';
-import * as i4$1 from 'primeng/progressbar';
+import { firstValueFrom, tap, catchError, lastValueFrom, throwError } from 'rxjs';
+import * as i3$1 from 'primeng/progressbar';
 import { ProgressBarModule, ProgressBar } from 'primeng/progressbar';
-import * as i3$1 from 'primeng/toast';
+import * as i2$1 from 'primeng/toast';
 import { ToastModule, Toast } from 'primeng/toast';
 import { CardModule } from 'primeng/card';
+import * as i4$1 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
 import { SpeedDialModule } from 'primeng/speeddial';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i4$2 from 'primeng/table';
+import * as i3$2 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import { get } from 'lodash';
+import { HttpClient } from '@angular/common/http';
 
 class EmptyStateComponent {
     constructor() {
         this.headingText = 'No existe el recurso que buscas';
         this.subHeadingText = 'Intenta más tarde';
-        this.mainIconSrcString = 'assets/img/empty-states/empty-box.png';
+        this.mainIconSrcString = input('assets/img/empty-states/empty-box.png');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: EmptyStateComponent, isStandalone: true, selector: "dc-empty-state", inputs: { headingText: "headingText", subHeadingText: "subHeadingText", mainIconSrcString: "mainIconSrcString" }, ngImport: i0, template: "<div class=\"grid justify-content-center\">\r\n  <div class=\"empty-state-content\">\r\n    <h5 class=\"text-center\" *ngIf=\"headingText\">{{ headingText }}</h5>\r\n    <img width=\"180px\" class=\"image-empty-state\" src=\"{{ mainIconSrcString }}\" />\r\n    <h6 *ngIf=\"subHeadingText\">{{ subHeadingText }}</h6>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".empty-state-content{padding-top:20px}.empty-state-content .image-empty-state{filter:grayscale(40%);padding-top:10px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: EmptyStateComponent, isStandalone: true, selector: "dc-empty-state", inputs: { headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: false, isRequired: false, transformFunction: null }, subHeadingText: { classPropertyName: "subHeadingText", publicName: "subHeadingText", isSignal: false, isRequired: false, transformFunction: null }, mainIconSrcString: { classPropertyName: "mainIconSrcString", publicName: "mainIconSrcString", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid justify-content-center\">\n  <div class=\"empty-state-content\">\n    @if (headingText) {\n      <h5 class=\"text-center\">{{ headingText }}</h5>\n    }\n    <img width=\"180px\" class=\"image-empty-state\" src=\"{{ mainIconSrcString() }}\" />\n    @if (subHeadingText) {\n      <h6>{{ subHeadingText }}</h6>\n    }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".empty-state-content{padding-top:20px}.empty-state-content .image-empty-state{filter:grayscale(40%);padding-top:10px}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: EmptyStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-empty-state', standalone: true, imports: [NgIf], template: "<div class=\"grid justify-content-center\">\r\n  <div class=\"empty-state-content\">\r\n    <h5 class=\"text-center\" *ngIf=\"headingText\">{{ headingText }}</h5>\r\n    <img width=\"180px\" class=\"image-empty-state\" src=\"{{ mainIconSrcString }}\" />\r\n    <h6 *ngIf=\"subHeadingText\">{{ subHeadingText }}</h6>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".empty-state-content{padding-top:20px}.empty-state-content .image-empty-state{filter:grayscale(40%);padding-top:10px}\n"] }]
+            args: [{ selector: 'dc-empty-state', standalone: true, imports: [], template: "<div class=\"grid justify-content-center\">\n  <div class=\"empty-state-content\">\n    @if (headingText) {\n      <h5 class=\"text-center\">{{ headingText }}</h5>\n    }\n    <img width=\"180px\" class=\"image-empty-state\" src=\"{{ mainIconSrcString() }}\" />\n    @if (subHeadingText) {\n      <h6>{{ subHeadingText }}</h6>\n    }\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".empty-state-content{padding-top:20px}.empty-state-content .image-empty-state{filter:grayscale(40%);padding-top:10px}\n"] }]
         }], propDecorators: { headingText: [{
                 type: Input
             }], subHeadingText: [{
                 type: Input
-            }], mainIconSrcString: [{
-                type: Input
             }] } });
 
 const availibleFilters = [
@@ -81,11 +81,16 @@ const sortTypes = [
 const DEFAULT_FILTERS = { filters: {}, page: 0, rowsPerPage: 10, sort: { _id: -1 } };
 class DCFilterBarComponent {
     constructor() {
-        this.isAdmin = true; // TODO: create a solution for is admin
+        // Signal Inputs
+        this.isAdmin = input(true); // TODO: create a solution for is admin
+        this.items = input([]);
+        // Inputs
         this.customFilters = [];
-        this.items = [];
-        this.onFilterAction = new EventEmitter();
-        this.onChangeSort = new EventEmitter();
+        // Outputs
+        this.onFilterAction = output();
+        this.onChangeSort = output();
+        this.onNew = output();
+        // Internal State
         this.customFilterModels = [];
         this.availibleFilters = availibleFilters;
         this.sortOptions = sortOptions;
@@ -119,9 +124,8 @@ class DCFilterBarComponent {
         this.onChangeSort.emit(event.value);
     }
     createNew() {
-        // this.router.navigate(['edit/'], { relativeTo: this.route });
         console.log('createNew from core components');
-        this.doItemAction({ action: 'new', item: null });
+        this.onNew.emit('new');
     }
     search(text = null) {
         if (!text) {
@@ -144,22 +148,14 @@ class DCFilterBarComponent {
     doItemAction(filterEvent) {
         this.onFilterAction.emit(filterEvent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DCFilterBarComponent, isStandalone: true, selector: "dc-filter-bar", inputs: { isAdmin: "isAdmin", customFilters: "customFilters", items: "items" }, outputs: { onFilterAction: "onFilterAction", onChangeSort: "onChangeSort" }, ngImport: i0, template: "<div class=\"background-bar\">\n  <div class=\"button-flex\">\n    <div>\n      <p-button icon=\"pi pi-search\" label=\"buscar\" severity=\"secondary\" (click)=\"isSearchVisible = true\" />\n    </div>\n\n    @if (isAdmin) {\n    <span class=\"admin\">\n      <p-button icon=\"pi pi-plus\" label=\"Crear Nueva\" severity=\"secondary\" (click)=\"createNew()\" />\n    </span>\n    }\n  </div>\n\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n\n  @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\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"isFilterVisible = true\" />\n  </div>\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-calendar\n        [(ngModel)]=\"dateRange\"\n        selectionMode=\"range\"\n        [showButtonBar]=\"true\"\n        [style]=\"{ width: '100%' }\"\n        placeholder=\"Seleccionar fechas\"\n        dateFormat=\"dd/mm/yy\">\n      </p-calendar>\n    </div>\n\n    @if (customFilters?.length > 0) {\n    <h4>Filtros Personalizados (No terminado...) </h4>\n    <h6>Encontrar la forma de que cada custom filter se renderize como un nuevo form.</h6>\n    @for (filter of customFilters; track filter.name) {\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">{{ filter.name }}</label>\n    </div>\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}.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: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "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", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i7.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCFilterBarComponent, isStandalone: true, selector: "dc-filter-bar", inputs: { isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onFilterAction: "onFilterAction", onChangeSort: "onChangeSort", onNew: "onNew" }, ngImport: i0, template: "<div class=\"background-bar\">\n  <div class=\"button-flex\">\n    <div>\n      <p-button icon=\"pi pi-search\" label=\"buscar\" severity=\"secondary\" (click)=\"isSearchVisible = true\" />\n    </div>\n\n    @if (isAdmin()) {\n    <span class=\"admin\">\n      <p-button icon=\"pi pi-plus\" label=\"Crear Nueva\" severity=\"secondary\" (click)=\"createNew()\" />\n    </span>\n    }\n  </div>\n\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n\n  @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\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"isFilterVisible = true\" />\n  </div>\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-calendar\n        [(ngModel)]=\"dateRange\"\n        selectionMode=\"range\"\n        [showButtonBar]=\"true\"\n        [style]=\"{ width: '100%' }\"\n        placeholder=\"Seleccionar fechas\"\n        dateFormat=\"dd/mm/yy\">\n      </p-calendar>\n    </div>\n\n    @if (customFilters?.length > 0) {\n    <h4>Filtros Personalizados (No terminado...) </h4>\n    <h6>Encontrar la forma de que cada custom filter se renderize como un nuevo form.</h6>\n    @for (filter of customFilters; track filter.name) {\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">{{ filter.name }}</label>\n    </div>\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}.background-bar{background-color:var(--p-primary-color);display:flex;border-radius:10px;justify-content:space-between;padding:10px}.button-flex{display:flex;margin-right:10px}.white{color:#fff}.search-flex{margin-left:10px}.search-dialog{width:750px;-webkit-backdrop-filter:blur(70px);backdrop-filter:blur(70px)}.border-none{border:none}.bg-black-alpha-50{background-color:var(--p-primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: 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", "autofocus", "fluid", "buttonProps"], 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", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "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", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i7.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCFilterBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCFilterBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-filter-bar', standalone: true, imports: [CommonModule, FormsModule, ButtonModule, DialogModule, SelectModule, MultiSelectModule, CalendarModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"background-bar\">\n  <div class=\"button-flex\">\n    <div>\n      <p-button icon=\"pi pi-search\" label=\"buscar\" severity=\"secondary\" (click)=\"isSearchVisible = true\" />\n    </div>\n\n    @if (isAdmin) {\n    <span class=\"admin\">\n      <p-button icon=\"pi pi-plus\" label=\"Crear Nueva\" severity=\"secondary\" (click)=\"createNew()\" />\n    </span>\n    }\n  </div>\n\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n\n  @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\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"isFilterVisible = true\" />\n  </div>\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-calendar\n        [(ngModel)]=\"dateRange\"\n        selectionMode=\"range\"\n        [showButtonBar]=\"true\"\n        [style]=\"{ width: '100%' }\"\n        placeholder=\"Seleccionar fechas\"\n        dateFormat=\"dd/mm/yy\">\n      </p-calendar>\n    </div>\n\n    @if (customFilters?.length > 0) {\n    <h4>Filtros Personalizados (No terminado...) </h4>\n    <h6>Encontrar la forma de que cada custom filter se renderize como un nuevo form.</h6>\n    @for (filter of customFilters; track filter.name) {\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">{{ filter.name }}</label>\n    </div>\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}.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"] }]
-        }], ctorParameters: () => [], propDecorators: { isAdmin: [{
-                type: Input
-            }], customFilters: [{
-                type: Input
-            }], items: [{
+            args: [{ selector: 'dc-filter-bar', standalone: true, imports: [FormsModule, ButtonModule, DialogModule, SelectModule, MultiSelectModule, CalendarModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"background-bar\">\n  <div class=\"button-flex\">\n    <div>\n      <p-button icon=\"pi pi-search\" label=\"buscar\" severity=\"secondary\" (click)=\"isSearchVisible = true\" />\n    </div>\n\n    @if (isAdmin()) {\n    <span class=\"admin\">\n      <p-button icon=\"pi pi-plus\" label=\"Crear Nueva\" severity=\"secondary\" (click)=\"createNew()\" />\n    </span>\n    }\n  </div>\n\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n\n  @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\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"isFilterVisible = true\" />\n  </div>\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-calendar\n        [(ngModel)]=\"dateRange\"\n        selectionMode=\"range\"\n        [showButtonBar]=\"true\"\n        [style]=\"{ width: '100%' }\"\n        placeholder=\"Seleccionar fechas\"\n        dateFormat=\"dd/mm/yy\">\n      </p-calendar>\n    </div>\n\n    @if (customFilters?.length > 0) {\n    <h4>Filtros Personalizados (No terminado...) </h4>\n    <h6>Encontrar la forma de que cada custom filter se renderize como un nuevo form.</h6>\n    @for (filter of customFilters; track filter.name) {\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">{{ filter.name }}</label>\n    </div>\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}.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"] }]
+        }], ctorParameters: () => [], propDecorators: { customFilters: [{
                 type: Input
-            }], onFilterAction: [{
-                type: Output
-            }], onChangeSort: [{
-                type: Output
             }] } });
 
 class ConfirmComponent {
@@ -169,9 +165,9 @@ class ConfirmComponent {
     onEscapte(_event) {
         this.cancel();
     }
-    constructor(dynamicDialogConfig, ref) {
-        this.dynamicDialogConfig = dynamicDialogConfig;
-        this.ref = ref;
+    constructor() {
+        this.dynamicDialogConfig = inject(DynamicDialogConfig);
+        this.ref = inject(DynamicDialogRef);
         this.title = 'Confirmación';
         if (this.dynamicDialogConfig.data) {
             this.title = this.dynamicDialogConfig.data.title;
@@ -190,13 +186,13 @@ class ConfirmComponent {
     confirm() {
         this.ref.close(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ConfirmComponent, deps: [{ token: i1$2.DynamicDialogConfig }, { token: i1$2.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", 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\">\r\n  <p-message severity=\"secondary\"> {{ title }}</p-message>\r\n\r\n  <div style=\"text-align: center; padding: 1rem\">\r\n    <i style=\"font-size: 4rem; color: #ff0040\" class=\"pi {{ piIcon }}\"></i>\r\n  </div>\r\n\r\n  <div>{{ message }} </div>\r\n\r\n  @if (warning) {\r\n  <p-message severity=\"warn\">\r\n    <i class=\"pi pi-exclamation-triangle\"></i>\r\n    {{ warning }}</p-message\r\n  >\r\n  }\r\n\r\n  <br /><br />\r\n\r\n  <div>\r\n    <div style=\"float: right\">\r\n      <p-button *ngIf=\"oneBotton\" label=\"Ok\" (click)=\"confirm()\"></p-button>\r\n    </div>\r\n\r\n    <div *ngIf=\"!oneBotton\" class=\"options\">\r\n      <p-button [label]=\"cancelText\" (click)=\"cancel()\" severity=\"secondary\"></p-button>\r\n      <p-button [label]=\"acceptText\" (click)=\"confirm()\" severity=\"danger\"></p-button>\r\n    </div>\r\n  </div>\r\n</div>\r\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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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", "autofocus", "fluid", "buttonProps"], 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ConfirmComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-confirm', standalone: true, imports: [NgIf, ButtonModule, MessageModule], template: "<div class=\"form-input-card\">\r\n  <p-message severity=\"secondary\"> {{ title }}</p-message>\r\n\r\n  <div style=\"text-align: center; padding: 1rem\">\r\n    <i style=\"font-size: 4rem; color: #ff0040\" class=\"pi {{ piIcon }}\"></i>\r\n  </div>\r\n\r\n  <div>{{ message }} </div>\r\n\r\n  @if (warning) {\r\n  <p-message severity=\"warn\">\r\n    <i class=\"pi pi-exclamation-triangle\"></i>\r\n    {{ warning }}</p-message\r\n  >\r\n  }\r\n\r\n  <br /><br />\r\n\r\n  <div>\r\n    <div style=\"float: right\">\r\n      <p-button *ngIf=\"oneBotton\" label=\"Ok\" (click)=\"confirm()\"></p-button>\r\n    </div>\r\n\r\n    <div *ngIf=\"!oneBotton\" class=\"options\">\r\n      <p-button [label]=\"cancelText\" (click)=\"cancel()\" severity=\"secondary\"></p-button>\r\n      <p-button [label]=\"acceptText\" (click)=\"confirm()\" severity=\"danger\"></p-button>\r\n    </div>\r\n  </div>\r\n</div>\r\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"] }]
-        }], ctorParameters: () => [{ type: i1$2.DynamicDialogConfig }, { type: i1$2.DynamicDialogRef }], propDecorators: { title: [{
+            args: [{ selector: 'app-confirm', standalone: true, imports: [ButtonModule, MessageModule], 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"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], message: [{
                 type: Input
@@ -229,6 +225,7 @@ function provideToastAlert(serviceImplementation) {
         },
     ];
 }
+// @deprecated, moved to ngx-tts
 var AudioSpeed;
 (function (AudioSpeed) {
     AudioSpeed["VerySlow"] = "verySlow";
@@ -252,11 +249,16 @@ class PaginationBase {
     constructor(route, router) {
         this.route = route;
         this.router = router;
+        /**
+         * Available actions for items.
+         * Must be implemented by child classes.
+         */
+        this.actions = input();
         /**
          * Event emitted when an action is performed on an item.
          * Emits an object containing the item and the action that was triggered.
          */
-        this.onAction = new EventEmitter();
+        this.onAction = output();
         /** Current first record index for the paginator */
         this.paginatorFirst = 0;
         /** Number of rows to display per page */
@@ -323,20 +325,16 @@ class PaginationBase {
     doAction(actionEvent) {
         this.onAction.emit(actionEvent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: PaginationBase, deps: [{ token: i1$3.ActivatedRoute }, { token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.1", type: PaginationBase, isStandalone: true, inputs: { actions: "actions" }, outputs: { onAction: "onAction" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PaginationBase, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: PaginationBase, isStandalone: true, inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: PaginationBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PaginationBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i1$3.ActivatedRoute }, { type: i1$3.Router }], propDecorators: { actions: [{
-                type: Input
-            }], onAction: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }] });
 
 class ConfirmService {
-    constructor(pdialogService) {
-        this.pdialogService = pdialogService;
+    constructor() {
+        this.pdialogService = inject(DialogService);
     }
     openConfirm(title = '', message = '', acceptText = 'Aceptar') {
         const dialogRef = this.pdialogService.open(ConfirmComponent, {
@@ -366,15 +364,15 @@ class ConfirmService {
         });
         return firstValueFrom(dialogRef.onClose);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ConfirmService, deps: [{ token: i1$2.DialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ConfirmService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConfirmService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConfirmService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ConfirmService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ConfirmService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.DialogService }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Extracts and parses the first JSON object or array found within a string.
@@ -425,13 +423,13 @@ function extractJsonFromString(content) {
 }
 
 class DCProgressToastComponent {
-    constructor(messageService, cdr) {
-        this.messageService = messageService;
-        this.cdr = cdr;
+    constructor() {
+        this.messageService = inject(MessageService);
+        this.cdr = inject(ChangeDetectorRef);
         this.visible = false;
-        this.progress = 0;
-        this.processCompleted = new EventEmitter();
-        this.processClosed = new EventEmitter();
+        this.progress = input(0);
+        this.processCompleted = output();
+        this.processClosed = output();
     }
     ngOnChanges(changes) {
         if (changes['visible'] && changes['visible'].currentValue) {
@@ -442,7 +440,7 @@ class DCProgressToastComponent {
         }
         // Handle progress changes
         if (changes['progress']) {
-            if (this.progress >= 100) {
+            if (this.progress() >= 100) {
                 this.onComplete();
             }
             this.cdr.markForCheck();
@@ -478,20 +476,14 @@ class DCProgressToastComponent {
         this.messageService.clear('confirm');
         this.processClosed.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCProgressToastComponent, deps: [{ token: i1$1.MessageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: DCProgressToastComponent, isStandalone: true, selector: "dc-progress-toast", inputs: { visible: "visible", progress: "progress" }, 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i3$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i4$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCProgressToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i2$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "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", "style", "unit", "mode", "color"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DCProgressToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCProgressToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-progress-toast', standalone: true, providers: [MessageService], imports: [ButtonModule, CommonModule, ToastModule, ProgressBarModule, Toast, ButtonModule, ProgressBar], 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" }]
-        }], ctorParameters: () => [{ type: i1$1.MessageService }, { type: i0.ChangeDetectorRef }], propDecorators: { visible: [{
+            args: [{ selector: 'dc-progress-toast', standalone: true, providers: [MessageService], imports: [ButtonModule, ToastModule, ProgressBarModule, Toast, ButtonModule, ProgressBar], 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" }]
+        }], ctorParameters: () => [], propDecorators: { visible: [{
                 type: Input
-            }], progress: [{
-                type: Input
-            }], processCompleted: [{
-                type: Output
-            }], processClosed: [{
-                type: Output
             }] } });
 
 /**
@@ -619,10 +611,10 @@ class LoadingBarService {
             }
         }, intervalMs);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: LoadingBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: LoadingBarService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LoadingBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LoadingBarService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: LoadingBarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LoadingBarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -630,25 +622,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
         }], ctorParameters: () => [] });
 
 class LoadingBarComponent {
-    constructor(loadingBarService) {
-        this.loadingBarService = loadingBarService;
+    constructor() {
+        this.loadingBarService = inject(LoadingBarService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: LoadingBarComponent, deps: [{ token: LoadingBarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: LoadingBarComponent, isStandalone: true, selector: "dc-loading-bar", providers: [MessageService], ngImport: i0, template: "@if (loadingBarService.isShowing) {\n<p-progressbar [color]=\"loadingBarService.color\" [mode]=\"loadingBarService.mode\" [style]=\"{ height: '4px' }\" [value]=\"loadingBarService.progress\" />\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i4$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: LoadingBarComponent, isStandalone: true, selector: "dc-loading-bar", providers: [MessageService], ngImport: i0, template: "@if (loadingBarService.isShowing) {\n<p-progressbar [color]=\"loadingBarService.color\" [mode]=\"loadingBarService.mode\" [style]=\"{ height: '4px' }\" [value]=\"loadingBarService.progress\" />\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i3$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: LoadingBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LoadingBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-loading-bar', standalone: true, providers: [MessageService], imports: [ButtonModule, CommonModule, ToastModule, ProgressBarModule, ButtonModule, ProgressBar], template: "@if (loadingBarService.isShowing) {\n<p-progressbar [color]=\"loadingBarService.color\" [mode]=\"loadingBarService.mode\" [style]=\"{ height: '4px' }\" [value]=\"loadingBarService.progress\" />\n}\n" }]
-        }], ctorParameters: () => [{ type: LoadingBarService }] });
+            args: [{ selector: 'dc-loading-bar', standalone: true, providers: [MessageService], imports: [ButtonModule, ToastModule, ProgressBarModule, ButtonModule, ProgressBar], template: "@if (loadingBarService.isShowing) {\n<p-progressbar [color]=\"loadingBarService.color\" [mode]=\"loadingBarService.mode\" [style]=\"{ height: '4px' }\" [value]=\"loadingBarService.progress\" />\n}\n" }]
+        }], ctorParameters: () => [] });
 
 class GetPathPipe {
     transform(obj, path) {
         return get(obj, path, 'No disponible');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: GetPathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.1", ngImport: i0, type: GetPathPipe, isStandalone: true, name: "getPath" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GetPathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: GetPathPipe, isStandalone: true, name: "getPath" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: GetPathPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: GetPathPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'getPath',
@@ -656,95 +648,586 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                 }]
         }] });
 
-// TODO: extends PaginationBase this handle filter, pagination, and url params ?page=1
 class QuickTableComponent {
-    constructor(router, route, cdr) {
-        this.cdr = cdr;
-        this.onlyView = false;
-        this.columns = [];
-        this.tableData = [];
-        this.actions = [{ title: 'edit', label: 'Edit', icon: 'pi pi-pencil', severity: 'primary' }];
-        this.onAction = new EventEmitter();
+    constructor() {
+        // Inputs
+        this.columns = input([]);
+        this.tableData = input([]);
+        // Default action is only select
+        this.actions = input([{ title: 'select', label: 'Select', icon: 'pi pi-check', severity: 'primary' }]);
+        // Outputs
+        this.onAction = output();
+        // Signals
+        this._columns = signal([]);
+        this.filters = signal({});
+        this.globalFilterFields = signal([]);
         this.tableColumns = [];
-        // super(route, router);
-    }
-    async ngOnInit() {
-        console.log(this.columns, this.actions);
-        // Initialize table data
-        this.initializeTableColumns();
-        this.cdr.detectChanges();
+        // super();
+        effect(() => {
+            this.initializeTableColumns();
+            this.initializeFilters();
+        });
     }
-    ngAfterViewInit() {
-        if (this.table) {
-            // this.configureTable();
+    initializeTableColumns() {
+        if (!this.columns()) {
+            console.warn('No columns provided. please privide columns for acuracy');
+            if (this.tableData()[0]) {
+                this.tableColumns = Object.keys(this.tableData()[0]).map((key) => ({
+                    field: key,
+                    header: key,
+                    sortable: true,
+                }));
+                console.log(this.tableColumns);
+                this._columns.set(this.tableColumns);
+            }
+        }
+        else {
+            // Transform string column names to column objects
+            this.tableColumns = this.columns().map((col) => ({
+                field: col,
+                header: col,
+                sortable: true,
+            }));
+            // Add actions column
+            this.tableColumns.push({
+                field: 'actions',
+                header: 'Actions',
+            });
+            this._columns.set(this.tableColumns);
         }
-        console.log(this.columns, this.actions);
     }
-    // // Implement the abstract method from PaginationBase
-    // override loadData(): Promise<void> {
-    //   return Promise.resolve();
+    // private configureTable(): void {
+    //   // Configure table properties programmatically if needed
+    //   this.table.reset();
+    //   this.table.rows = 5;
+    //   this.table.paginator = true;
+    //   this.table.rowsPerPageOptions = [5, 10, 20];
+    //   this.table.tableStyle = { 'min-width': '50rem' };
+    //   this.cdr.detectChanges();
     // }
-    initializeTableColumns() {
-        // Transform string column names to column objects
-        this.tableColumns = this.columns.map((col) => ({
-            field: col,
-            header: col,
-            sortable: true,
-        }));
-        // Add actions column
-        this.tableColumns.push({
-            field: 'actions',
-            header: 'Actions',
-        });
-    }
-    configureTable() {
-        // Configure table properties programmatically if needed
-        this.table.reset();
-        this.table.rows = 5;
-        this.table.paginator = true;
-        this.table.rowsPerPageOptions = [5, 10, 20];
-        this.table.tableStyle = { 'min-width': '50rem' };
-        this.cdr.detectChanges();
-    }
     selectItem(item, action) {
         console.log('onAction', { item, action });
         this.onAction.emit({ item, action: action.label });
     }
-    getActionTemplate(item) {
-        if (!this.onlyView) {
-            return {
-                edit: () => this.selectItem(item, { title: 'edit', label: 'Edit', icon: 'pi pi-pencil', severity: 'primary' }),
-                delete: () => this.selectItem(item, { title: 'delete', label: 'Delete', icon: 'pi pi-trash', severity: 'danger' }),
-                view: () => this.selectItem(item, { title: 'view', label: 'View', icon: 'pi pi-eye', severity: 'info' }),
-            };
+    onGlobalFilter(event) {
+        const value = event.target.value;
+        this.table.filterGlobal(value, FilterMatchMode.CONTAINS);
+    }
+    getFilterType(column) {
+        if (column.type === 'image') {
+            return 'text';
         }
-        else {
-            return {
-                select: () => this.selectItem(item, { title: 'select', label: 'Select', icon: 'pi pi-check', severity: 'primary' }),
-            };
+        return 'text';
+    }
+    initializeFilters() {
+        // Initialize filters
+        const filterObj = {};
+        const fields = [];
+        if (this._columns()) {
+            this._columns().forEach((col) => {
+                if (col.field !== 'actions') {
+                    // Add field to global filter fields
+                    fields.push(col.field);
+                    // Initialize filter for this column
+                    filterObj[col.field] = {
+                        value: null,
+                        matchMode: FilterMatchMode.CONTAINS,
+                    };
+                }
+            });
         }
+        this.filters.set(filterObj);
+        this.globalFilterFields.set(fields);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: QuickTableComponent, deps: [{ token: i1$3.Router }, { token: i1$3.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: QuickTableComponent, isStandalone: true, selector: "app-quick-table", inputs: { onlyView: "onlyView", columns: "columns", tableData: "tableData", actions: "actions" }, outputs: { onAction: "onAction" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["dataTable"], descendants: true }], ngImport: i0, template: "<p-table #dataTable [value]=\"tableData\" [columns]=\"columns\">\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n      @for (column of columns; track column) {\n      <th>{{ column.header }}</th>\n      }\n\n      <th>Actions </th>\n    </tr>\n  </ng-template>\n  <ng-template #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.field }}\" alt=\"Image\" class=\"image\" />\n        </div>\n        } @else {\n        <span>{{ item | getPath: column.field}} </span>\n        }\n      </td>\n      }\n\n      <td>\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      </td>\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host{display:block;height:100%}.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: i1$1.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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i4$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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: "ngmodule", type: RouterModule }, { kind: "pipe", type: GetPathPipe, name: "getPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: QuickTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", 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: "table", first: true, predicate: ["dataTable"], descendants: true }], ngImport: i0, template: "<p-table #dataTable [value]=\"tableData()\" [columns]=\"_columns()\" [globalFilterFields]=\"globalFilterFields()\" [filters]=\"filters()\">\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\n      <th>Actions</th>\n    </tr>\n    <tr>\n      @for (column of columns; track column) {\n      <th>\n        <p-columnFilter [type]=\"getFilterType(column)\" [field]=\"column.field\" placeholder=\"Search\" [showMenu]=\"false\"></p-columnFilter>\n      </th>\n      }\n      <th></th>\n    </tr>\n  </ng-template>\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.field }}\" alt=\"Image\" class=\"image\" />\n        </div>\n        } @else {\n        <span>{{ item | getPath: column.field}} </span>\n        }\n      </td>\n      }\n\n      <td>\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      </td>\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host{display:block;height:100%}.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", "autofocus", "fluid", "buttonProps"], 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", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: RouterModule }, { kind: "pipe", type: GetPathPipe, name: "getPath" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: QuickTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: QuickTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-quick-table', imports: [CardModule, ButtonModule, SpeedDialModule, PaginatorModule, TableModule, RouterModule, GetPathPipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<p-table #dataTable [value]=\"tableData\" [columns]=\"columns\">\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n      @for (column of columns; track column) {\n      <th>{{ column.header }}</th>\n      }\n\n      <th>Actions </th>\n    </tr>\n  </ng-template>\n  <ng-template #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.field }}\" alt=\"Image\" class=\"image\" />\n        </div>\n        } @else {\n        <span>{{ item | getPath: column.field}} </span>\n        }\n      </td>\n      }\n\n      <td>\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      </td>\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host{display:block;height:100%}.generic-list-container{display:flex;flex-direction:column;height:100%}.generic-list-content{margin-top:10px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin-bottom:10px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}.image-container{width:50px;height:50px;border-radius:50%;overflow:hidden;display:flex;justify-content:center;align-items:center}.image-container img{width:100%;height:100%;object-fit:cover}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.Router }, { type: i1$3.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { onlyView: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }], tableData: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], onAction: [{
-                type: Output
-            }], table: [{
+            args: [{ selector: 'app-quick-table', imports: [CardModule, ButtonModule, SpeedDialModule, PaginatorModule, TableModule, RouterModule, GetPathPipe, InputTextModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<p-table #dataTable [value]=\"tableData()\" [columns]=\"_columns()\" [globalFilterFields]=\"globalFilterFields()\" [filters]=\"filters()\">\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\n      <th>Actions</th>\n    </tr>\n    <tr>\n      @for (column of columns; track column) {\n      <th>\n        <p-columnFilter [type]=\"getFilterType(column)\" [field]=\"column.field\" placeholder=\"Search\" [showMenu]=\"false\"></p-columnFilter>\n      </th>\n      }\n      <th></th>\n    </tr>\n  </ng-template>\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.field }}\" alt=\"Image\" class=\"image\" />\n        </div>\n        } @else {\n        <span>{{ item | getPath: column.field}} </span>\n        }\n      </td>\n      }\n\n      <td>\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      </td>\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host{display:block;height:100%}.generic-list-container{display:flex;flex-direction:column;height:100%}.generic-list-content{margin-top:10px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin-bottom:10px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}.image-container{width:50px;height:50px;border-radius:50%;overflow:hidden;display:flex;justify-content:center;align-items:center}.image-container img{width:100%;height:100%;object-fit:cover}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { table: [{
                 type: ViewChild,
                 args: ['dataTable']
             }] } });
 
+/**
+ * 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);
+        this.lastError = signal(null);
+        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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", 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: "19.2.4", ngImport: i0, type: HttpCoreService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: HttpCoreService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [HTTP_CORE_CONFIG]
+                }] }] });
+
 /*
  * Public API Surface of core-components
  */
@@ -753,5 +1236,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AudioSpeed, ConfirmComponent, ConfirmService, DCFilterBarComponent, DCProgressToastComponent, EmptyStateComponent, GetPathPipe, LoadingBarComponent, LoadingBarService, OptionValue, PaginationBase, QuickTableComponent, TOAST_ALERTS_TOKEN, ToastAlertsAbstractService, availibleFilters, extractJsonFromString, provideToastAlert, sortOptions, sortTypes };
+export { AudioSpeed, ConfirmComponent, ConfirmService, DCFilterBarComponent, DCProgressToastComponent, EmptyStateComponent, GetPathPipe, HTTP_CORE_CONFIG, HttpCoreService, LoadingBarComponent, LoadingBarService, OptionValue, PaginationBase, QuickTableComponent, TOAST_ALERTS_TOKEN, ToastAlertsAbstractService, availibleFilters, extractJsonFromString, provideToastAlert, sortOptions, sortTypes };
 //# sourceMappingURL=dataclouder-ngx-core.mjs.map