@dataclouder/ngx-core 0.1.11 → 0.1.13

package/fesm2022/dataclouder-ngx-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, Input, Component, output, ChangeDetectionStrategy, inject, HostListener, InjectionToken, Directive, Injectable, ChangeDetectorRef, Pipe, signal, effect, ViewChild, Optional, Inject } from '@angular/core';
+import { input, Input, Component, output, ChangeDetectionStrategy, inject, HostListener, ChangeDetectorRef, Injectable, Pipe, signal, effect, ViewChild, InjectionToken, Directive, Optional, Inject } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$1 from 'primeng/button';
@@ -17,9 +17,6 @@ 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 '@angular/router';
-import { RouterModule } from '@angular/router';
-import { firstValueFrom, tap, catchError, lastValueFrom, throwError } from 'rxjs';
 import * as i3$1 from 'primeng/progressbar';
 import { ProgressBarModule, ProgressBar } from 'primeng/progressbar';
 import * as i2$1 from 'primeng/toast';
@@ -27,11 +24,16 @@ import { ToastModule, Toast } from 'primeng/toast';
 import { CardModule } from 'primeng/card';
 import * as i4$1 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
+import { RouterModule, ActivatedRoute, Router } from '@angular/router';
 import { SpeedDialModule } from 'primeng/speeddial';
 import { PaginatorModule } from 'primeng/paginator';
 import * as i3$2 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import { get } from 'lodash';
+import { firstValueFrom, tap, catchError, lastValueFrom, throwError } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import * as i4$2 from 'primeng/textarea';
+import { TextareaModule } from 'primeng/textarea';
 import { HttpClient } from '@angular/common/http';
 
 class EmptyStateComponent {
@@ -82,8 +84,8 @@ const DEFAULT_FILTERS = { filters: {}, page: 0, rowsPerPage: 10, sort: { _id: -1
 class DCFilterBarComponent {
     constructor() {
         // Signal Inputs
-        this.isAdmin = input(true); // TODO: create a solution for is admin
         this.items = input([]);
+        this.options = input({ showCreateButton: true });
         // Inputs
         this.customFilters = [];
         // Outputs
@@ -149,12 +151,12 @@ class DCFilterBarComponent {
         this.onFilterAction.emit(filterEvent);
     }
     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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCFilterBarComponent, isStandalone: true, selector: "dc-filter-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onFilterAction: "onFilterAction", onChangeSort: "onChangeSort", onNew: "onNew" }, 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 (options().showCreateButton) {\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  @if(options().showViewButton){\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n  } @if(options().showActions){ @for(item of items(); track $index) {\n  <p-button [icon]=\"item.icon\" variant=\"text\" (click)=\"doItemAction({ action: item.title, item: item })\" severity=\"secondary\"></p-button>\n  }\n\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"isFilterVisible = true\" />\n  </div>\n  }\n</div>\n\n@if (placeholder) {\n<span class=\"search-flex\" (click)=\"search(null)\"> <i class=\"pi pi-times\"></i>{{ placeholder }} </span>\n}\n\n<p-dialog [(visible)]=\"isSearchVisible\" [dismissableMask]=\"true\" [modal]=\"true\" [showHeader]=\"false\" (onHide)=\"isSearchVisible = false\">\n  <p>Haz una b\u00FAsqueda (Enter)</p>\n  <div>\n    <span>\n      <input (keydown.enter)=\"search(placeholder)\" type=\"text\" pInputText [(ngModel)]=\"placeholder\" />\n    </span>\n  </div>\n</p-dialog>\n\n<p-dialog [(visible)]=\"isFilterVisible\" [modal]=\"true\" [style]=\"{ width: '70vw', height: '70vh' }\" [header]=\"'Filtros'\">\n  <div class=\"flex flex-column gap-4\">\n    <!-- Sort Options -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Ordenar por</label>\n      <p-select [options]=\"sortOptions\" [(ngModel)]=\"selectedSort\" optionLabel=\"label\" [style]=\"{ width: '100%' }\" placeholder=\"Seleccionar orden\"> </p-select>\n    </div>\n\n    <p-multiselect\n      [options]=\"availibleFilters\"\n      [(ngModel)]=\"selectedFilters\"\n      optionLabel=\"name\"\n      placeholder=\"Filtros R\u00E1pidos\"\n      [maxSelectedLabels]=\"3\"\n      styleClass=\"w-full md:w-80\" />\n\n    <!-- Date Filter -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Rango de fechas</label>\n      <p-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.2.4", ngImport: i0, type: DCFilterBarComponent, decorators: [{
             type: Component,
-            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: [{
+            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 (options().showCreateButton) {\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  @if(options().showViewButton){\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n  } @if(options().showActions){ @for(item of items(); track $index) {\n  <p-button [icon]=\"item.icon\" variant=\"text\" (click)=\"doItemAction({ action: item.title, item: item })\" severity=\"secondary\"></p-button>\n  }\n\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"isFilterVisible = true\" />\n  </div>\n  }\n</div>\n\n@if (placeholder) {\n<span class=\"search-flex\" (click)=\"search(null)\"> <i class=\"pi pi-times\"></i>{{ placeholder }} </span>\n}\n\n<p-dialog [(visible)]=\"isSearchVisible\" [dismissableMask]=\"true\" [modal]=\"true\" [showHeader]=\"false\" (onHide)=\"isSearchVisible = false\">\n  <p>Haz una b\u00FAsqueda (Enter)</p>\n  <div>\n    <span>\n      <input (keydown.enter)=\"search(placeholder)\" type=\"text\" pInputText [(ngModel)]=\"placeholder\" />\n    </span>\n  </div>\n</p-dialog>\n\n<p-dialog [(visible)]=\"isFilterVisible\" [modal]=\"true\" [style]=\"{ width: '70vw', height: '70vh' }\" [header]=\"'Filtros'\">\n  <div class=\"flex flex-column gap-4\">\n    <!-- Sort Options -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Ordenar por</label>\n      <p-select [options]=\"sortOptions\" [(ngModel)]=\"selectedSort\" optionLabel=\"label\" [style]=\"{ width: '100%' }\" placeholder=\"Seleccionar orden\"> </p-select>\n    </div>\n\n    <p-multiselect\n      [options]=\"availibleFilters\"\n      [(ngModel)]=\"selectedFilters\"\n      optionLabel=\"name\"\n      placeholder=\"Filtros R\u00E1pidos\"\n      [maxSelectedLabels]=\"3\"\n      styleClass=\"w-full md:w-80\" />\n\n    <!-- Date Filter -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Rango de fechas</label>\n      <p-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"] }]
+        }], propDecorators: { customFilters: [{
                 type: Input
             }] } });
 
@@ -214,214 +216,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 args: ['window:keyup.escape', ['$event']]
             }] } });
 
-const TOAST_ALERTS_TOKEN = new InjectionToken('Toast alerts Service');
-class ToastAlertsAbstractService {
-}
-function provideToastAlert(serviceImplementation) {
-    return [
-        {
-            provide: TOAST_ALERTS_TOKEN,
-            useExisting: serviceImplementation,
-        },
-    ];
-}
-// @deprecated, moved to ngx-tts
-var AudioSpeed;
-(function (AudioSpeed) {
-    AudioSpeed["VerySlow"] = "verySlow";
-    AudioSpeed["Slow"] = "slow";
-    AudioSpeed["Regular"] = "regular";
-    AudioSpeed["Fast"] = "fast";
-    AudioSpeed["VeryFast"] = "veryFast";
-})(AudioSpeed || (AudioSpeed = {}));
-
-/**
- * Abstract base class for implementing pagination functionality.
- * Provides common pagination logic, state management, and navigation handling.
- * Child classes must implement the loadData method and define columns.
- */
-class PaginationBase {
-    /**
-     * Creates an instance of PaginationBase.
-     * @param route - The ActivatedRoute for accessing route parameters
-     * @param router - The Router for navigation
-     */
-    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 = output();
-        /** Current first record index for the paginator */
-        this.paginatorFirst = 0;
-        /** Number of rows to display per page */
-        this.paginatorRows = 10;
-        /** Total number of records available */
-        this.totalRecords = 0;
-        /** Current view mode, either cards or table */
-        this.viewMode = 'table';
-        /** Loading state indicator */
-        this.isLoading = false;
-        /** Available button actions for items */
-        this.buttonActions = [];
-        /**
-         * Configuration for filtering, sorting, and pagination.
-         * Includes current page, rows per page, sorting criteria, and applied filters.
-         */
-        this.filterConfig = { page: 0, rowsPerPage: this.paginatorRows, sort: { _id: -1 }, filters: {} };
-        this.initializePagination();
-    }
-    /**
-     * Initializes pagination based on URL query parameters.
-     * Sets the current page from the 'page' query parameter if available.
-     * @private
-     */
-    initializePagination() {
-        const page = this.route.snapshot.queryParamMap.get('page');
-        if (page) {
-            this.filterConfig.page = +page - 1;
-            this.paginatorFirst = this.filterConfig.page * this.paginatorRows;
-        }
-    }
-    /**
-     * Handles pagination events from the paginator component.
-     * Updates the filter configuration, loads new data, and updates the URL.
-     * @param pageEvent - The page event containing page number and rows per page
-     */
-    async onPageChange(pageEvent) {
-        this.paginatorRows = pageEvent.rows;
-        this.filterConfig = {
-            ...this.filterConfig,
-            page: pageEvent.page,
-            rowsPerPage: this.paginatorRows,
-        };
-        await this.loadData();
-        this.updatePageParam(pageEvent.page + 1);
-    }
-    /**
-     * Updates the 'page' query parameter in the URL.
-     * @param newPage - The new page number to set in the URL
-     * @private
-     */
-    updatePageParam(newPage) {
-        const queryParams = { page: newPage };
-        this.router.navigate([], {
-            relativeTo: this.route,
-            queryParams: queryParams,
-            queryParamsHandling: 'merge',
-        });
-    }
-    /**
-     * Handle actions triggered from the table or card view
-     * @param param0 Object containing the item and action that was triggered
-     */
-    doAction(actionEvent) {
-        this.onAction.emit(actionEvent);
-    }
-    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.2.4", ngImport: i0, type: PaginationBase, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }] });
-
-class ConfirmService {
-    constructor() {
-        this.pdialogService = inject(DialogService);
-    }
-    openConfirm(title = '', message = '', acceptText = 'Aceptar') {
-        const dialogRef = this.pdialogService.open(ConfirmComponent, {
-            data: {
-                message: message,
-                title: title,
-                acceptText,
-            },
-            closable: true,
-            modal: true,
-        });
-        return dialogRef.onClose;
-    }
-    confirm(options) {
-        const dialogRef = this.pdialogService.open(ConfirmComponent, {
-            data: {
-                message: options.message || '',
-                title: options.title || 'Confirmación',
-                acceptText: options.acceptText || 'Aceptar',
-                cancelText: options.cancelText || 'Cancelar',
-                warning: options.warning || null,
-                oneBotton: options.oneBotton || false,
-                piIcon: options.piIcon || null,
-            },
-            closable: true,
-            modal: true,
-        });
-        return firstValueFrom(dialogRef.onClose);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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.2.4", ngImport: i0, type: ConfirmService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-/**
- * Extracts and parses the first JSON object or array found within a string.
- *
- * @param content - The input string that may contain JSON data
- * @returns {any} The parsed JSON data if found and valid, or null if:
- *   - No JSON object/array is found in the string
- *   - The found JSON is invalid and cannot be parsed
- *
- * @example
- * // Returns {name: "John"}
- * extractJsonFromString('Some text {"name": "John"} more text');
- *
- * // Returns [1, 2, 3]
- * extractJsonFromString('Before [1,2,3] after');
- *
- * // Returns null
- * extractJsonFromString('No JSON here');
- */
-function extractJsonFromString(content) {
-    console.log(content);
-    try {
-        // First try to parse the entire string as JSON
-        return JSON.parse(content);
-    }
-    catch {
-        try {
-            // If that fails, try to find the first valid JSON object or array in the string
-            const matches = content.match(/(\{[\s\S]*\}|\[[\s\S]*\])/g);
-            if (!matches)
-                return null;
-            // Try each matched potential JSON string until we find a valid one
-            for (const match of matches) {
-                try {
-                    return JSON.parse(match);
-                }
-                catch {
-                    continue;
-                }
-            }
-            return null;
-        }
-        catch (error) {
-            console.error('Error parsing JSON:', error);
-            return null;
-        }
-    }
-}
-
 class DCProgressToastComponent {
     constructor() {
         this.messageService = inject(MessageService);
@@ -558,7 +352,21 @@ class LoadingBarService {
         this.color = '#4BBD97';
         setTimeout(() => {
             this.hideProgressBar();
-        }, 1600);
+        }, 1100);
+    }
+    infoAndHide() {
+        // Clear any existing progress interval
+        if (this.progressInterval) {
+            clearInterval(this.progressInterval);
+            this.progressInterval = null;
+        }
+        this.isShowing = true;
+        this.mode = 'indeterminate';
+        this.progress = 100;
+        this.color = '#45C8F3';
+        setTimeout(() => {
+            this.hideProgressBar();
+        }, 1000);
     }
     /**
      * Demonstrates the loading bar by simulating progress from 0% to 100% over 5 seconds.
@@ -669,7 +477,9 @@ class QuickTableComponent {
         });
     }
     initializeTableColumns() {
-        if (!this.columns()) {
+        debugger;
+        console.log('tableData', this.columns());
+        if (!this.columns() || this.columns().length === 0) {
             console.warn('No columns provided. please privide columns for acuracy');
             if (this.tableData()[0]) {
                 this.tableColumns = Object.keys(this.tableData()[0]).map((key) => ({
@@ -750,6 +560,282 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 args: ['dataTable']
             }] } });
 
+const TOAST_ALERTS_TOKEN = new InjectionToken('Toast alerts Service');
+class ToastAlertsAbstractService {
+}
+function provideToastAlert(serviceImplementation) {
+    return [
+        {
+            provide: TOAST_ALERTS_TOKEN,
+            useExisting: serviceImplementation,
+        },
+    ];
+}
+// @deprecated, moved to ngx-tts
+var AudioSpeed;
+(function (AudioSpeed) {
+    AudioSpeed["VerySlow"] = "verySlow";
+    AudioSpeed["Slow"] = "slow";
+    AudioSpeed["Regular"] = "regular";
+    AudioSpeed["Fast"] = "fast";
+    AudioSpeed["VeryFast"] = "veryFast";
+})(AudioSpeed || (AudioSpeed = {}));
+
+/**
+ * Abstract base class for implementing pagination functionality.
+ * Provides common pagination logic, state management, and navigation handling.
+ * Child classes must implement the loadData method and define columns.
+ */
+class PaginationBase {
+    /**
+     * Creates an instance of PaginationBase.
+     * @param route - The ActivatedRoute for accessing route parameters
+     * @param router - The Router for navigation
+     */
+    constructor() {
+        /**
+         * 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 = output();
+        /** Current first record index for the paginator */
+        this.paginatorFirst = 0;
+        /** Number of rows to display per page */
+        this.paginatorRows = 10;
+        /** Total number of records available */
+        this.totalRecords = 0;
+        /** Current view mode, either cards or table */
+        this.viewMode = 'table';
+        /** Loading state indicator */
+        this.isLoading = false;
+        /** Available button actions for items */
+        this.buttonActions = [];
+        /**
+         * Configuration for filtering, sorting, and pagination.
+         * Includes current page, rows per page, sorting criteria, and applied filters.
+         */
+        this.filterConfig = { page: 0, rowsPerPage: this.paginatorRows, sort: { _id: -1 }, filters: {} };
+        this.route = inject(ActivatedRoute);
+        this.router = inject(Router);
+        this.initializePagination();
+    }
+    /**
+     * Initializes pagination based on URL query parameters.
+     * Sets the current page from the 'page' query parameter if available.
+     * @private
+     */
+    initializePagination() {
+        const page = this.route.snapshot.queryParamMap.get('page');
+        if (page) {
+            this.filterConfig.page = +page - 1;
+            this.paginatorFirst = this.filterConfig.page * this.paginatorRows;
+        }
+    }
+    /**
+     * Handles pagination events from the paginator component.
+     * Updates the filter configuration, loads new data, and updates the URL.
+     * @param pageEvent - The page event containing page number and rows per page
+     */
+    async onPageChange(pageEvent) {
+        this.paginatorRows = pageEvent.rows;
+        this.filterConfig = {
+            ...this.filterConfig,
+            page: pageEvent.page,
+            rowsPerPage: this.paginatorRows,
+        };
+        await this.loadData();
+        this.updatePageParam(pageEvent.page + 1);
+    }
+    /**
+     * Updates the 'page' query parameter in the URL.
+     * @param newPage - The new page number to set in the URL
+     * @private
+     */
+    updatePageParam(newPage) {
+        const queryParams = { page: newPage };
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: queryParams,
+            queryParamsHandling: 'merge',
+        });
+    }
+    /**
+     * Handle actions triggered from the table or card view
+     * @param param0 Object containing the item and action that was triggered
+     */
+    doAction(actionEvent) {
+        this.onAction.emit(actionEvent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PaginationBase, deps: [], 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.2.4", ngImport: i0, type: PaginationBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+/**
+ * Extracts and parses the first JSON object or array found within a string.
+ *
+ * @param content - The input string that may contain JSON data
+ * @returns {any} The parsed JSON data if found and valid, or null if:
+ *   - No JSON object/array is found in the string
+ *   - The found JSON is invalid and cannot be parsed
+ *
+ * @example
+ * // Returns {name: "John"}
+ * extractJsonFromString('Some text {"name": "John"} more text');
+ *
+ * // Returns [1, 2, 3]
+ * extractJsonFromString('Before [1,2,3] after');
+ *
+ * // Returns null
+ * extractJsonFromString('No JSON here');
+ */
+function extractJsonFromString(content) {
+    console.log(content);
+    try {
+        // First try to parse the entire string as JSON
+        return JSON.parse(content);
+    }
+    catch {
+        try {
+            // If that fails, try to find the first valid JSON object or array in the string
+            const matches = content.match(/(\{[\s\S]*\}|\[[\s\S]*\])/g);
+            if (!matches)
+                return null;
+            // Try each matched potential JSON string until we find a valid one
+            for (const match of matches) {
+                try {
+                    return JSON.parse(match);
+                }
+                catch {
+                    continue;
+                }
+            }
+            return null;
+        }
+        catch (error) {
+            console.error('Error parsing JSON:', error);
+            return null;
+        }
+    }
+}
+
+class ConfirmService {
+    constructor() {
+        this.pdialogService = inject(DialogService);
+    }
+    openConfirm(title = '', message = '', acceptText = 'Aceptar') {
+        const dialogRef = this.pdialogService.open(ConfirmComponent, {
+            data: {
+                message: message,
+                title: title,
+                acceptText,
+            },
+            closable: true,
+            modal: true,
+        });
+        return dialogRef.onClose;
+    }
+    confirm(options) {
+        const dialogRef = this.pdialogService.open(ConfirmComponent, {
+            data: {
+                message: options.message || '',
+                title: options.title || 'Confirmación',
+                acceptText: options.acceptText || 'Aceptar',
+                cancelText: options.cancelText || 'Cancelar',
+                warning: options.warning || null,
+                oneBotton: options.oneBotton || false,
+                piIcon: options.piIcon || null,
+            },
+            closable: true,
+            modal: true,
+        });
+        return firstValueFrom(dialogRef.onClose);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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.2.4", ngImport: i0, type: ConfirmService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class PromptComponent {
+    constructor() {
+        this.ref = inject(DynamicDialogRef);
+        this.config = inject(DynamicDialogConfig);
+        this.title = signal('Prompt');
+        this.message = signal('');
+        this.acceptText = signal('Accept');
+        this.cancelText = signal('Cancel');
+        this.inputValue = signal('');
+    }
+    ngOnInit() {
+        this.title.set(this.config.data?.title || 'Prompt');
+        this.message.set(this.config.data?.message || '');
+        this.acceptText.set(this.config.data?.acceptText || 'Accept');
+        this.cancelText.set(this.config.data?.cancelText || 'Cancel');
+        // Set initial value if provided
+        this.inputValue.set(this.config.data?.initialValue || '');
+    }
+    accept() {
+        this.ref.close(this.inputValue());
+    }
+    cancel() {
+        this.ref.close(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PromptComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: PromptComponent, isStandalone: true, selector: "dc-prompt", ngImport: i0, template: "<div class=\"form-input-card p-4\">\n  <p-message severity=\"secondary\"> {{ title() }}</p-message>\n\n  <div class=\"my-4\">{{ message() }}</div>\n\n  <div class=\"p-field mb-4\">\n    <textarea rows=\"5\" cols=\"30\" pTextarea [(ngModel)]=\"inputValue\" class=\"w-full\"></textarea>\n  </div>\n\n  <div class=\"flex justify-content-end gap-2\">\n    <p-button [label]=\"cancelText()\" (click)=\"cancel()\" severity=\"secondary\"></p-button>\n    <p-button [label]=\"acceptText()\" (click)=\"accept()\"></p-button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4$2.Textarea, selector: "[pTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PromptComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dc-prompt', standalone: true, imports: [CommonModule, ButtonModule, InputTextModule, FormsModule, MessageModule, TextareaModule], template: "<div class=\"form-input-card p-4\">\n  <p-message severity=\"secondary\"> {{ title() }}</p-message>\n\n  <div class=\"my-4\">{{ message() }}</div>\n\n  <div class=\"p-field mb-4\">\n    <textarea rows=\"5\" cols=\"30\" pTextarea [(ngModel)]=\"inputValue\" class=\"w-full\"></textarea>\n  </div>\n\n  <div class=\"flex justify-content-end gap-2\">\n    <p-button [label]=\"cancelText()\" (click)=\"cancel()\" severity=\"secondary\"></p-button>\n    <p-button [label]=\"acceptText()\" (click)=\"accept()\"></p-button>\n  </div>\n</div>\n" }]
+        }] });
+
+class PromptService {
+    constructor() {
+        this.dialogService = inject(DialogService);
+    }
+    /**
+     * Opens a prompt dialog.
+     * @param options Configuration options for the prompt dialog.
+     * @returns A promise that resolves with the input value if accepted, or null if canceled.
+     */
+    openPrompt(options) {
+        const dialogRef = this.dialogService.open(PromptComponent, {
+            data: {
+                title: options.title || 'Prompt',
+                message: options.message || '',
+                acceptText: options.acceptText || 'Accept',
+                cancelText: options.cancelText || 'Cancel',
+                initialValue: options.initialValue || '', // Pass initialValue to component data
+            },
+            header: options.title || 'Prompt', // Set header for accessibility and title bar
+            closable: true,
+            modal: true,
+            width: '700px', // Optional: Adjust width as needed
+        });
+        // Return the result when the dialog closes
+        return firstValueFrom(dialogRef.onClose);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PromptService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PromptService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PromptService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /**
  * Injection token for HttpCoreService configuration
  */
@@ -1231,10 +1317,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 /*
  * Public API Surface of core-components
  */
+// Components
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { AudioSpeed, ConfirmComponent, ConfirmService, DCFilterBarComponent, DCProgressToastComponent, EmptyStateComponent, GetPathPipe, HTTP_CORE_CONFIG, HttpCoreService, LoadingBarComponent, LoadingBarService, OptionValue, PaginationBase, PromptService, QuickTableComponent, TOAST_ALERTS_TOKEN, ToastAlertsAbstractService, availibleFilters, extractJsonFromString, provideToastAlert, sortOptions, sortTypes };
 //# sourceMappingURL=dataclouder-ngx-core.mjs.map