@dataclouder/ngx-core 0.1.27 → 0.1.30

package/fesm2022/dataclouder-ngx-core.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, Input, Component, output, ChangeDetectionStrategy, inject, HostListener, ChangeDetectorRef, Injectable, Pipe, signal, effect, ViewChild, Directive, InjectionToken, Optional, Inject } from '@angular/core';
+import { input, Input, Component, inject, output, ChangeDetectionStrategy, HostListener, ChangeDetectorRef, Injectable, Pipe, signal, effect, ViewChild, Directive, InjectionToken, Optional, Inject } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { FormBuilder, FormsModule, ReactiveFormsModule, FormGroup, FormArray } from '@angular/forms';
 import * as i1$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i4 from 'primeng/dialog';
@@ -93,6 +93,7 @@ const sortTypes = [
 const DEFAULT_FILTERS = { filters: {}, page: 0, rowsPerPage: 10, sort: { _id: -1 } };
 class DCFilterBarComponent {
     constructor() {
+        this.fb = inject(FormBuilder);
         // Signal Inputs
         this.items = input([]);
         this.options = input({ showCreateButton: true });
@@ -102,8 +103,6 @@ class DCFilterBarComponent {
         this.onFilterAction = output();
         this.onChangeSort = output();
         this.onNew = output();
-        // Internal State
-        this.customFilterModels = [];
         this.availibleFilters = availibleFilters;
         this.sortOptions = sortOptions;
         this.isSearchVisible = false;
@@ -115,19 +114,20 @@ class DCFilterBarComponent {
         this.dateRange = [];
     }
     ngOnInit() {
-        console.log('customFilters', this.customFilters);
-        if (this.customFilters.length > 0) {
-            console.log('customFilters', this.customFilters);
-            for (const filter of this.customFilters) {
-                console.log('Deberia agregar un filtro nuevo', filter);
-                // this.availibleFilters.push({
-                //   name: filter.name,
-                //   type: filter.type,
-                //   options: filter.options,
-                // });
-            }
+        this.buildCustomFiltersForm();
+    }
+    ngOnChanges(changes) {
+        if (changes['customFilters']) {
+            this.buildCustomFiltersForm();
         }
     }
+    buildCustomFiltersForm() {
+        const formControls = {};
+        for (const filter of this.customFilters) {
+            formControls[filter.field] = [filter.defaultValue || null];
+        }
+        this.customFiltersForm = this.fb.group(formControls);
+    }
     changeFilter(event) {
         console.log('Filter changed');
     }
@@ -154,6 +154,14 @@ class DCFilterBarComponent {
         this.doItemAction({ action: 'filterChange', item: this.filter });
     }
     applyFilters() {
+        const customFilterValues = this.customFiltersForm.value;
+        const activeFilters = Object.entries(customFilterValues).reduce((acc, [key, value]) => {
+            if (value !== null && value !== undefined && value !== '') {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+        this.filter.filters = { ...this.filter.filters, ...activeFilters };
         this.doItemAction({ action: 'filterChange', item: this.filter });
         this.isFilterVisible = false;
     }
@@ -161,11 +169,11 @@ 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: { 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      <i style=\"position: absolute; right: -5px; top: -5px; z-index: 2; color: grey\" class=\"pi pi-key\"></i>\n      <p-button icon=\"pi pi-plus\" label=\"Crear Nueva\" severity=\"secondary\" (click)=\"createNew()\" />\n    </span>\n    }\n  </div>\n\n  @if(options()?.showViewButton){\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n  } @if(options()?.showActions){ @for(item of items(); track $index) {\n  <p-button [icon]=\"item.icon\" variant=\"text\" (click)=\"doItemAction({ action: item.title, item: item })\" severity=\"secondary\"></p-button>\n  }\n\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"isFilterVisible = true\" />\n  </div>\n  }\n</div>\n\n@if (placeholder) {\n<span class=\"search-flex\" (click)=\"search(null)\"> <i class=\"pi pi-times\"></i>{{ placeholder }} </span>\n}\n\n<p-dialog [(visible)]=\"isSearchVisible\" [dismissableMask]=\"true\" [modal]=\"true\" [showHeader]=\"false\" (onHide)=\"isSearchVisible = false\">\n  <p>Haz una b\u00FAsqueda (Enter)</p>\n  <div>\n    <span>\n      <input (keydown.enter)=\"search(placeholder)\" type=\"text\" pInputText [(ngModel)]=\"placeholder\" />\n    </span>\n  </div>\n</p-dialog>\n\n<p-dialog [(visible)]=\"isFilterVisible\" [modal]=\"true\" [style]=\"{ width: '70vw', height: '70vh' }\" [header]=\"'Filtros'\">\n  <div class=\"flex flex-column gap-4\">\n    <!-- Sort Options -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Ordenar por</label>\n      <p-select [options]=\"sortOptions\" [(ngModel)]=\"selectedSort\" optionLabel=\"label\" [style]=\"{ width: '100%' }\" placeholder=\"Seleccionar orden\"> </p-select>\n    </div>\n\n    <p-multiselect\n      [options]=\"availibleFilters\"\n      [(ngModel)]=\"selectedFilters\"\n      optionLabel=\"name\"\n      placeholder=\"Filtros R\u00E1pidos\"\n      [maxSelectedLabels]=\"3\"\n      styleClass=\"w-full md:w-80\" />\n\n    <!-- Date Filter -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Rango de fechas</label>\n      <p-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;position:relative}.background-bar{background-color:var(--p-primary-color);display:flex;border-radius:10px;justify-content:space-between;padding:10px}.button-flex{display:flex;margin-right:10px}.white{color:#fff}.search-flex{margin-left:10px}.search-dialog{width:750px;-webkit-backdrop-filter:blur(70px);backdrop-filter:blur(70px)}.border-none{border:none}.bg-black-alpha-50{background-color:var(--p-primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: 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", "highlightOnSelect"], 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" }, usesOnChanges: true, 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      <i style=\"position: absolute; right: -5px; top: -5px; z-index: 2; color: grey\" class=\"pi pi-key\"></i>\n      <p-button icon=\"pi pi-plus\" label=\"Crear Nueva\" severity=\"secondary\" (click)=\"createNew()\" />\n    </span>\n    }\n  </div>\n\n  @if(options()?.showViewButton){\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n  } @if(options()?.showActions){ @for(item of items(); track $index) {\n  <p-button [icon]=\"item.icon\" variant=\"text\" (click)=\"doItemAction({ action: item.title, item: item })\" severity=\"secondary\"></p-button>\n  }\n\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"isFilterVisible = true\" />\n  </div>\n  }\n</div>\n\n@if (placeholder) {\n<span class=\"search-flex\" (click)=\"search(null)\"> <i class=\"pi pi-times\"></i>{{ placeholder }} </span>\n}\n\n<p-dialog [(visible)]=\"isSearchVisible\" [dismissableMask]=\"true\" [modal]=\"true\" [showHeader]=\"false\" (onHide)=\"isSearchVisible = false\">\n  <p>Haz una b\u00FAsqueda (Enter)</p>\n  <div>\n    <span>\n      <input (keydown.enter)=\"search(placeholder)\" type=\"text\" pInputText [(ngModel)]=\"placeholder\" />\n    </span>\n  </div>\n</p-dialog>\n\n<p-dialog [(visible)]=\"isFilterVisible\" [modal]=\"true\" [style]=\"{ width: '70vw', height: '70vh' }\" [header]=\"'Filtros'\">\n  <div class=\"flex flex-column gap-4\">\n    <!-- Sort Options -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Ordenar por</label>\n      <p-select [options]=\"sortOptions\" [(ngModel)]=\"selectedSort\" optionLabel=\"label\" [style]=\"{ width: '100%' }\" placeholder=\"Seleccionar orden\"> </p-select>\n    </div>\n\n    <p-multiselect\n      [options]=\"availibleFilters\"\n      [(ngModel)]=\"selectedFilters\"\n      optionLabel=\"name\"\n      placeholder=\"Filtros R\u00E1pidos\"\n      [maxSelectedLabels]=\"3\"\n      styleClass=\"w-full md:w-80\" />\n\n    <!-- Date Filter -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Rango de fechas</label>\n      <p-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    <form [formGroup]=\"customFiltersForm\">\n      <h4>Filtros Personalizados</h4>\n      @for (customFilter of customFilters; track customFilter.field) {\n      <div class=\"field\">\n        <label class=\"font-semibold block mb-2\">{{ customFilter.name }}</label>\n        @switch (customFilter.type) { @case ('select') {\n        <p-select\n          [options]=\"customFilter.options\"\n          [formControlName]=\"customFilter.field\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [style]=\"{ width: '100%' }\"\n          placeholder=\"Seleccionar {{ customFilter.name }}\" />\n        } @case ('string') {\n        <input type=\"text\" pInputText [formControlName]=\"customFilter.field\" class=\"w-full\" />\n        } @case ('date') {\n        <p-calendar [formControlName]=\"customFilter.field\" [style]=\"{ width: '100%' }\" dateFormat=\"dd/mm/yy\"></p-calendar>\n        } }\n      </div>\n      }\n    </form>\n    }\n\n    <!-- Recent/All Toggle -->\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"flex justify-content-end gap-2\">\n      <p-button label=\"Limpiar\" icon=\"pi pi-trash\" (click)=\"clearFilters()\" styleClass=\"p-button-text\"> </p-button>\n      <p-button label=\"Aplicar\" icon=\"pi pi-check\" (click)=\"applyFilters()\" severity=\"primary\"> </p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:block}.admin{margin-left:10px;position:relative}.background-bar{background-color:var(--p-primary-color);display:flex;border-radius:10px;justify-content:space-between;padding:10px}.button-flex{display:flex;margin-right:10px}.white{color:#fff}.search-flex{margin-left:10px}.search-dialog{width:750px;-webkit-backdrop-filter:blur(70px);backdrop-filter:blur(70px)}.border-none{border:none}.bg-black-alpha-50{background-color:var(--p-primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "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", "highlightOnSelect"], 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 (options()?.showCreateButton) {\n    <span class=\"admin\">\n      <i style=\"position: absolute; right: -5px; top: -5px; z-index: 2; color: grey\" class=\"pi pi-key\"></i>\n      <p-button icon=\"pi pi-plus\" label=\"Crear Nueva\" severity=\"secondary\" (click)=\"createNew()\" />\n    </span>\n    }\n  </div>\n\n  @if(options()?.showViewButton){\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n  } @if(options()?.showActions){ @for(item of items(); track $index) {\n  <p-button [icon]=\"item.icon\" variant=\"text\" (click)=\"doItemAction({ action: item.title, item: item })\" severity=\"secondary\"></p-button>\n  }\n\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"isFilterVisible = true\" />\n  </div>\n  }\n</div>\n\n@if (placeholder) {\n<span class=\"search-flex\" (click)=\"search(null)\"> <i class=\"pi pi-times\"></i>{{ placeholder }} </span>\n}\n\n<p-dialog [(visible)]=\"isSearchVisible\" [dismissableMask]=\"true\" [modal]=\"true\" [showHeader]=\"false\" (onHide)=\"isSearchVisible = false\">\n  <p>Haz una b\u00FAsqueda (Enter)</p>\n  <div>\n    <span>\n      <input (keydown.enter)=\"search(placeholder)\" type=\"text\" pInputText [(ngModel)]=\"placeholder\" />\n    </span>\n  </div>\n</p-dialog>\n\n<p-dialog [(visible)]=\"isFilterVisible\" [modal]=\"true\" [style]=\"{ width: '70vw', height: '70vh' }\" [header]=\"'Filtros'\">\n  <div class=\"flex flex-column gap-4\">\n    <!-- Sort Options -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Ordenar por</label>\n      <p-select [options]=\"sortOptions\" [(ngModel)]=\"selectedSort\" optionLabel=\"label\" [style]=\"{ width: '100%' }\" placeholder=\"Seleccionar orden\"> </p-select>\n    </div>\n\n    <p-multiselect\n      [options]=\"availibleFilters\"\n      [(ngModel)]=\"selectedFilters\"\n      optionLabel=\"name\"\n      placeholder=\"Filtros R\u00E1pidos\"\n      [maxSelectedLabels]=\"3\"\n      styleClass=\"w-full md:w-80\" />\n\n    <!-- Date Filter -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Rango de fechas</label>\n      <p-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;position:relative}.background-bar{background-color:var(--p-primary-color);display:flex;border-radius:10px;justify-content:space-between;padding:10px}.button-flex{display:flex;margin-right:10px}.white{color:#fff}.search-flex{margin-left:10px}.search-dialog{width:750px;-webkit-backdrop-filter:blur(70px);backdrop-filter:blur(70px)}.border-none{border:none}.bg-black-alpha-50{background-color:var(--p-primary-color)}\n"] }]
+            args: [{ selector: 'dc-filter-bar', standalone: true, imports: [FormsModule, ReactiveFormsModule, 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      <i style=\"position: absolute; right: -5px; top: -5px; z-index: 2; color: grey\" class=\"pi pi-key\"></i>\n      <p-button icon=\"pi pi-plus\" label=\"Crear Nueva\" severity=\"secondary\" (click)=\"createNew()\" />\n    </span>\n    }\n  </div>\n\n  @if(options()?.showViewButton){\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n  } @if(options()?.showActions){ @for(item of items(); track $index) {\n  <p-button [icon]=\"item.icon\" variant=\"text\" (click)=\"doItemAction({ action: item.title, item: item })\" severity=\"secondary\"></p-button>\n  }\n\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"isFilterVisible = true\" />\n  </div>\n  }\n</div>\n\n@if (placeholder) {\n<span class=\"search-flex\" (click)=\"search(null)\"> <i class=\"pi pi-times\"></i>{{ placeholder }} </span>\n}\n\n<p-dialog [(visible)]=\"isSearchVisible\" [dismissableMask]=\"true\" [modal]=\"true\" [showHeader]=\"false\" (onHide)=\"isSearchVisible = false\">\n  <p>Haz una b\u00FAsqueda (Enter)</p>\n  <div>\n    <span>\n      <input (keydown.enter)=\"search(placeholder)\" type=\"text\" pInputText [(ngModel)]=\"placeholder\" />\n    </span>\n  </div>\n</p-dialog>\n\n<p-dialog [(visible)]=\"isFilterVisible\" [modal]=\"true\" [style]=\"{ width: '70vw', height: '70vh' }\" [header]=\"'Filtros'\">\n  <div class=\"flex flex-column gap-4\">\n    <!-- Sort Options -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Ordenar por</label>\n      <p-select [options]=\"sortOptions\" [(ngModel)]=\"selectedSort\" optionLabel=\"label\" [style]=\"{ width: '100%' }\" placeholder=\"Seleccionar orden\"> </p-select>\n    </div>\n\n    <p-multiselect\n      [options]=\"availibleFilters\"\n      [(ngModel)]=\"selectedFilters\"\n      optionLabel=\"name\"\n      placeholder=\"Filtros R\u00E1pidos\"\n      [maxSelectedLabels]=\"3\"\n      styleClass=\"w-full md:w-80\" />\n\n    <!-- Date Filter -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Rango de fechas</label>\n      <p-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    <form [formGroup]=\"customFiltersForm\">\n      <h4>Filtros Personalizados</h4>\n      @for (customFilter of customFilters; track customFilter.field) {\n      <div class=\"field\">\n        <label class=\"font-semibold block mb-2\">{{ customFilter.name }}</label>\n        @switch (customFilter.type) { @case ('select') {\n        <p-select\n          [options]=\"customFilter.options\"\n          [formControlName]=\"customFilter.field\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [style]=\"{ width: '100%' }\"\n          placeholder=\"Seleccionar {{ customFilter.name }}\" />\n        } @case ('string') {\n        <input type=\"text\" pInputText [formControlName]=\"customFilter.field\" class=\"w-full\" />\n        } @case ('date') {\n        <p-calendar [formControlName]=\"customFilter.field\" [style]=\"{ width: '100%' }\" dateFormat=\"dd/mm/yy\"></p-calendar>\n        } }\n      </div>\n      }\n    </form>\n    }\n\n    <!-- Recent/All Toggle -->\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"flex justify-content-end gap-2\">\n      <p-button label=\"Limpiar\" icon=\"pi pi-trash\" (click)=\"clearFilters()\" styleClass=\"p-button-text\"> </p-button>\n      <p-button label=\"Aplicar\" icon=\"pi pi-check\" (click)=\"applyFilters()\" severity=\"primary\"> </p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:block}.admin{margin-left:10px;position:relative}.background-bar{background-color:var(--p-primary-color);display:flex;border-radius:10px;justify-content:space-between;padding:10px}.button-flex{display:flex;margin-right:10px}.white{color:#fff}.search-flex{margin-left:10px}.search-dialog{width:750px;-webkit-backdrop-filter:blur(70px);backdrop-filter:blur(70px)}.border-none{border:none}.bg-black-alpha-50{background-color:var(--p-primary-color)}\n"] }]
         }], propDecorators: { customFilters: [{
                 type: Input
             }] } });
@@ -994,10 +1002,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
             type: Directive
         }], ctorParameters: () => [] });
 
+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-vertex
+var AudioSpeed;
+(function (AudioSpeed) {
+    AudioSpeed["VerySlow"] = "verySlow";
+    AudioSpeed["Slow"] = "slow";
+    AudioSpeed["Regular"] = "regular";
+    AudioSpeed["Fast"] = "fast";
+    AudioSpeed["VeryFast"] = "veryFast";
+})(AudioSpeed || (AudioSpeed = {}));
+const AudioSpeedReverse = {
+    [AudioSpeed.VerySlow]: 1,
+    [AudioSpeed.Slow]: 2,
+    [AudioSpeed.Regular]: 3,
+    [AudioSpeed.Fast]: 4,
+    [AudioSpeed.VeryFast]: 5,
+};
+class IAIModel {
+}
+// Since it not clear if this bellows to chat AI Or user i put here.
+class ChatUserSettings {
+}
+
 class EntityBaseFormComponent {
     constructor() {
         this.route = inject(ActivatedRoute);
         this.router = inject(Router);
+        this.toastService = inject(TOAST_ALERTS_TOKEN, { optional: true });
         this.entity = signal(undefined);
         this.entityId = toSignal(this.route.paramMap.pipe(map((params) => params.get('id'))));
         this.loadEntityEffect = effect(async () => {
@@ -1011,8 +1053,8 @@ class EntityBaseFormComponent {
                     }
                 }
                 catch (err) {
+                    this.toastService?.error({ title: 'Error', subtitle: 'Error loading entity' });
                     console.error('Error loading entity', err);
-                    // TODO: Consider adding a generic error toast message
                 }
             }
             else {
@@ -1025,16 +1067,15 @@ class EntityBaseFormComponent {
                     }
                 }
                 catch (err) {
+                    this.toastService?.error({ title: 'Error', subtitle: 'Error creating new entity' });
                     console.error('Error creating new entity', err);
-                    // TODO: Consider adding a generic error toast message
                 }
             }
         }, { allowSignalWrites: true });
     }
     async save() {
         if (this.form.invalid) {
-            // TODO: add toast notification
-            console.error('Form is invalid');
+            this.toastService?.error({ title: 'Error', subtitle: 'Form is invalid' });
         }
         const entityData = { ...this.form.value, _id: this.entityId() };
         const result = await this.entityCommunicationService.createOrUpdate(entityData);
@@ -1042,6 +1083,32 @@ class EntityBaseFormComponent {
         this.patchForm(result);
         return result;
     }
+    getDirtyValues(form) {
+        const dirtyValues = {};
+        Object.keys(form.controls).forEach((key) => {
+            const currentControl = form.get(key);
+            if (!currentControl?.dirty) {
+                return;
+            }
+            if (currentControl instanceof FormGroup) {
+                const nestedDirtyValues = this.getDirtyValues(currentControl);
+                if (Object.keys(nestedDirtyValues).length > 0) {
+                    dirtyValues[key] = nestedDirtyValues;
+                }
+            }
+            else if (currentControl instanceof FormArray) {
+                dirtyValues[key] = currentControl.getRawValue();
+            }
+            else {
+                dirtyValues[key] = currentControl.value;
+            }
+        });
+        return dirtyValues;
+    }
+    saveDirtyValues() {
+        const dirtyValues = this.getDirtyValues(this.form);
+        return this.entityCommunicationService.partialUpdate(this.entityId(), dirtyValues);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EntityBaseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: EntityBaseFormComponent, isStandalone: true, ngImport: i0 }); }
 }
@@ -1049,39 +1116,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
             type: Directive
         }] });
 
-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-vertex
-var AudioSpeed;
-(function (AudioSpeed) {
-    AudioSpeed["VerySlow"] = "verySlow";
-    AudioSpeed["Slow"] = "slow";
-    AudioSpeed["Regular"] = "regular";
-    AudioSpeed["Fast"] = "fast";
-    AudioSpeed["VeryFast"] = "veryFast";
-})(AudioSpeed || (AudioSpeed = {}));
-const AudioSpeedReverse = {
-    [AudioSpeed.VerySlow]: 1,
-    [AudioSpeed.Slow]: 2,
-    [AudioSpeed.Regular]: 3,
-    [AudioSpeed.Fast]: 4,
-    [AudioSpeed.VeryFast]: 5,
-};
-class IAIModel {
-}
-// Since it not clear if this bellows to chat AI Or user i put here.
-class ChatUserSettings {
-}
-
 var EModelQuality;
 (function (EModelQuality) {
     EModelQuality["FAST"] = "fast";