ngx-dsxlibrary 2.21.67 → 2.21.68

package/fesm2022/ngx-dsxlibrary.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, forwardRef, Component, EventEmitter, effect, Output, viewChild, signal, Input, model, inject, computed, Injectable, isDevMode, InjectionToken, output, HostBinding, ChangeDetectorRef, untracked, Pipe, ViewEncapsulation, HostListener, Directive, NgZone, ElementRef, NgModule, Injector } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, FormControl, NG_VALIDATORS, FormBuilder, Validators, ReactiveFormsModule, NgControl, FormGroup } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, AbstractControl, FormControl, NG_VALIDATORS, FormBuilder, Validators, ReactiveFormsModule, NgControl, FormGroup } from '@angular/forms';
 import * as i2 from 'primeng/togglebutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 import * as i1$1 from '@angular/common';
@@ -1079,7 +1079,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ selector: 'icon-dsx', imports: [AsyncPipe], template: "<span class=\"dsx-icon\" [innerHTML]=\"svg$ | async\"></span>\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:1em;height:1em;font-size:24px;line-height:1;flex-shrink:0}.dsx-icon{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}:host ::ng-deep .dsx-icon svg{width:100%;height:100%;fill:currentColor;shape-rendering:geometricPrecision;stroke:currentColor;stroke-width:4px;stroke-linejoin:round;stroke-linecap:round;overflow:visible;transition:fill .2s ease,stroke .2s ease}\n"] }]
         }], ctorParameters: () => [{ type: IconDsxService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
 
-// app-message-error.component.ts - Versión corregida
 class AppMessageErrorComponent {
     elementRef;
     renderer;
@@ -1128,7 +1127,6 @@ class AppMessageErrorComponent {
         this.renderer = renderer;
     }
     ngAfterViewInit() {
-        // Intentar encontrar el floatLabel padre
         this.floatLabelElement = this.elementRef.nativeElement.closest('.p-floatlabel');
         if (this.floatLabelElement) {
             this.previousInlineMarginBottom =
@@ -1142,7 +1140,6 @@ class AppMessageErrorComponent {
                 console.log('[ERROR-COMPONENT] No hay FloatLabel, modo estático');
             }
         }
-        // Observador de visibilidad
         if (typeof window !== 'undefined' && 'IntersectionObserver' in window) {
             this.observer = new IntersectionObserver((entries) => {
                 entries.forEach((entry) => {
@@ -1191,7 +1188,6 @@ class AppMessageErrorComponent {
         if (this.observer) {
             this.observer.disconnect();
         }
-        // Restaurar margen solo si existe floatLabelElement
         if (this.floatLabelElement) {
             if (this.previousInlineMarginBottom) {
                 this.renderer.setStyle(this.floatLabelElement, 'margin-bottom', this.previousInlineMarginBottom);
@@ -1202,11 +1198,7 @@ class AppMessageErrorComponent {
         }
     }
     syncFloatLabelSpacing() {
-        // Si no hay floatLabel, no hacemos nada (el CSS maneja el espaciado)
-        if (!this.floatLabelElement) {
-            return;
-        }
-        if (!this.isElementAttachedAndVisible)
+        if (!this.floatLabelElement || !this.isElementAttachedAndVisible)
             return;
         const isVisible = this.isControlErrorVisible();
         const desiredSpace = this.getFloatLabelErrorSpace();
@@ -1228,11 +1220,9 @@ class AppMessageErrorComponent {
         this.renderer.removeStyle(this.floatLabelElement, 'margin-bottom');
     }
     isControlErrorVisible() {
-        // ✅ La condición base es la misma para ambos contextos
         if (!this.control || !this.control.invalid) {
             return false;
         }
-        // Solo mostrar si el usuario ha interactuado
         return !!(this.control.touched || this.control.dirty);
     }
     getFloatLabelErrorSpace() {
@@ -1258,11 +1248,11 @@ class AppMessageErrorComponent {
         return num % 1 === 0 ? String(num) : parseFloat(num.toFixed(2)).toString();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AppMessageErrorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AppMessageErrorComponent, isStandalone: true, selector: "app-message-error", inputs: { control: "control", form: "form", debugMode: "debugMode" }, ngImport: i0, template: "<!-- app-message-error.component.html -->\r\n<div class=\"dsx-error-slot\" [class.is-visible]=\"isControlErrorVisible()\">\r\n  <div class=\"dsx-error-message\">\r\n    <div class=\"dsx-error-message-content\">\r\n      <!-- \uD83C\uDFAF INYECTA ESTA L\u00CDNEA TEMPORAL DE DEPURACI\u00D3N AQU\u00CD -->\r\n      <!-- <span\r\n        style=\"\r\n          color: blue;\r\n          font-size: 10px;\r\n          display: block;\r\n          word-break: break-all;\r\n        \"\r\n      >\r\n        DEBUG ERRORES: {{ control?.errors | json }}\r\n      </span> -->\r\n\r\n      <icon-dsx name=\"warning\"></icon-dsx>\r\n\r\n      @if (control?.errors?.[\"required\"]) {\r\n        El campo <strong>es requerido.</strong>\r\n      } @else if (control?.errors?.[\"invalidNIT\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidNIT\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n        <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDate\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDate\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minimumAge\"]) {\r\n        <strong>{{ control?.errors?.[\"minimumAge\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minlength\"]) {\r\n        Debe tener al menos\r\n        <strong>{{ control?.errors?.[\"minlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"maxlength\"]) {\r\n        Debe tener como m\u00E1ximo\r\n        <strong>{{ control?.errors?.[\"maxlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"min\"]) {\r\n        El valor m\u00EDnimo permitido es\r\n        <strong>{{ formatNumber(control?.errors?.[\"min\"]?.min) }}</strong>\r\n      } @else if (control?.errors?.[\"max\"]) {\r\n        El valor m\u00E1ximo permitido es\r\n        <strong>{{ formatNumber(control?.errors?.[\"max\"]?.max) }}</strong>\r\n      } @else if (control?.errors?.[\"email\"]) {\r\n        Debe ser una direcci\u00F3n de correo v\u00E1lida.\r\n      } @else if (control?.errors?.[\"pattern\"]) {\r\n        El campo no tiene el formato requerido.\r\n      } @else if (control?.errors?.[\"alreadyValueExists\"]) {\r\n        <strong>{{ control?.errors?.[\"alreadyValueExists\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidTemplateVariables\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateVariables\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateVariables\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateVariables\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else if (control?.errors?.[\"invalidTemplateStructure\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateStructure\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateStructure\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateStructure\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else if (control?.errors?.[\"similitudDetectada\"]) {\r\n        <!-- \uD83C\uDFAF Estructuraci\u00F3n del mensaje con el nombre aislado en negrita -->\r\n        Ya existe un registro muy similar en el sistema:\r\n        <strong\r\n          >\"{{ control?.errors?.[\"similitudDetectada\"]?.sugerencia }}\"</strong\r\n        >.\r\n      } @else {\r\n        Existe un error a\u00FAn no identificado.\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Mensaje para formulario en general (Cambiado form.touched por form.dirty para evitar falsos positivos al clicar el fondo) -->\r\n@if (form?.invalid && form?.dirty) {\r\n  <div class=\"mt-2 mb-2\">\r\n    @if (this.form?.errors?.[\"atLeastOneRequired\"]) {\r\n      <p-tag severity=\"danger\" [rounded]=\"true\">\r\n        {{ form?.getError(\"atLeastOneRequired\")?.message }}\r\n      </p-tag>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".dsx-error-slot{display:block;max-height:0;overflow:hidden;opacity:0;transform:translateY(-2px);transition:opacity .15s ease,transform .15s ease}.dsx-error-slot.is-visible{max-height:80px;opacity:1;transform:translateY(0)}.dsx-error-message{display:block;width:100%}.dsx-error-message-content{display:flex;align-items:center;gap:.5rem;width:100%;box-sizing:border-box;padding:.4rem .7rem;font-size:.85rem;background:var(--dsx-error-bg, #fff2f0)!important;color:var(--dsx-error-color, #b42318)!important;border-left:3px solid var(--dsx-error-color, #b42318)!important;border-radius:.375rem;box-shadow:0 1px 2px #0000000f;line-height:1.4}.dsx-error-icon{flex:0 0 auto;line-height:1;display:inline-flex;align-items:center;justify-content:center}.dsx-error-message-content icon-dsx,.dsx-error-message-content icon-dsx svg,.dsx-error-message-content icon-dsx svg path{color:var(--dsx-error-color, #ff5a4e)!important;fill:var(--dsx-error-color, #e45036)!important}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:10;pointer-events:none}:host-context(.p-floatlabel) .dsx-error-slot{margin-top:.1rem}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{margin-top:.1rem}:host-context(.p-floatlabel) .dsx-error-message-content{padding:.35rem .7rem .35rem .5rem}:host-context(:not(.p-floatlabel)){display:block;width:100%}:host-context(:not(.p-floatlabel)) .dsx-error-slot.is-visible{margin-top:.2rem;margin-bottom:0}:host-context(:not(.p-floatlabel)) .dsx-error-message-content{padding:.35rem .7rem}@media(max-width:640px){.dsx-error-message-content{padding:.3rem .6rem;font-size:.8rem;gap:.4rem}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{margin-top:.05rem}:host-context(:not(.p-floatlabel)) .dsx-error-slot.is-visible{margin-top:.15rem}}@media(prefers-color-scheme:dark){.dsx-error-message-content{background:#2d1a1a;border-left-color:#ef4444;color:#fca5a5}.dsx-error-message-content icon-dsx,.dsx-error-message-content icon-dsx svg,.dsx-error-message-content icon-dsx svg path{color:#ef4444!important;fill:#ef4444!important}}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: IconDsxComponent, selector: "icon-dsx", inputs: ["name", "style", "debug"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AppMessageErrorComponent, isStandalone: true, selector: "app-message-error", inputs: { control: "control", form: "form", debugMode: "debugMode" }, ngImport: i0, template: "<div class=\"dsx-error-slot\" [class.is-visible]=\"isControlErrorVisible()\">\r\n  <div class=\"dsx-error-message\">\r\n    <div class=\"dsx-error-message-content\">\r\n      <icon-dsx name=\"warning\"></icon-dsx>\r\n\r\n      @if (control?.errors?.[\"required\"]) {\r\n        El campo <strong>es requerido.</strong>\r\n      } @else if (control?.errors?.[\"invalidNIT\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidNIT\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n        <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDate\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDate\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minimumAge\"]) {\r\n        <strong>{{ control?.errors?.[\"minimumAge\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minlength\"]) {\r\n        Debe tener al menos\r\n        <strong>{{ control?.errors?.[\"minlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"maxlength\"]) {\r\n        Debe tener como m\u00E1ximo\r\n        <strong>{{ control?.errors?.[\"maxlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"min\"]) {\r\n        El valor m\u00EDnimo permitido es\r\n        <strong>{{ formatNumber(control?.errors?.[\"min\"]?.min) }}</strong>\r\n      } @else if (control?.errors?.[\"max\"]) {\r\n        El valor m\u00E1ximo permitido es\r\n        <strong>{{ formatNumber(control?.errors?.[\"max\"]?.max) }}</strong>\r\n      } @else if (control?.errors?.[\"email\"]) {\r\n        Debe ser una direcci\u00F3n de correo v\u00E1lida.\r\n      } @else if (control?.errors?.[\"pattern\"]) {\r\n        El campo no tiene el formato requerido.\r\n      } @else if (control?.errors?.[\"alreadyValueExists\"]) {\r\n        <strong>{{ control?.errors?.[\"alreadyValueExists\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidTemplateVariables\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateVariables\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateVariables\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateVariables\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else if (control?.errors?.[\"invalidTemplateStructure\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateStructure\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateStructure\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateStructure\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else if (control?.errors?.[\"similitudDetectada\"]) {\r\n        Ya existe un registro muy similar en el sistema:\r\n        <strong\r\n          >\"{{ control?.errors?.[\"similitudDetectada\"]?.sugerencia }}\"</strong\r\n        >.\r\n      } @else {\r\n        Existe un error a\u00FAn no identificado.\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Mensaje para formulario en general -->\r\n@if (form?.invalid && form?.dirty) {\r\n  <div class=\"mt-2 mb-2\">\r\n    @if (this.form?.errors?.[\"atLeastOneRequired\"]) {\r\n      <p-tag severity=\"danger\" [rounded]=\"true\">\r\n        {{ form?.getError(\"atLeastOneRequired\")?.message }}\r\n      </p-tag>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".dsx-error-slot{display:block;max-height:0;overflow:hidden;opacity:0;transform:translateY(-4px) scale(.98);transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1),margin .25s cubic-bezier(.4,0,.2,1)}.dsx-error-slot.is-visible{max-height:60px;opacity:1;transform:translateY(0) scale(1)}.dsx-error-message{display:block;width:100%}.dsx-error-message-content{display:flex;align-items:center;gap:.4rem;width:100%;box-sizing:border-box;padding:.25rem .6rem;font-size:.82rem;background:var(--dsx-error-bg, #fff2f0)!important;color:var(--dsx-error-color, #b42318)!important;border-left:3px solid var(--dsx-error-color, #b42318)!important;border-radius:.3rem;box-shadow:0 1px 2px #0000000f;line-height:1.3;animation:errorSlideIn .25s cubic-bezier(.4,0,.2,1)}.dsx-error-icon{flex:0 0 auto;line-height:1;display:inline-flex;align-items:center;justify-content:center}.dsx-error-icon icon-dsx{transform:scale(.85);transition:transform .2s ease}.dsx-error-slot.is-visible .dsx-error-icon icon-dsx{transform:scale(1)}.dsx-error-message-content icon-dsx,.dsx-error-message-content icon-dsx svg,.dsx-error-message-content icon-dsx svg path{color:var(--dsx-error-color, #ff5a4e)!important;fill:var(--dsx-error-color, #e45036)!important}@keyframes errorSlideIn{0%{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes errorPulse{0%{box-shadow:0 1px 2px #0000000f}50%{box-shadow:0 2px 8px #b4231826}to{box-shadow:0 1px 2px #0000000f}}.dsx-error-slot.is-visible .dsx-error-message-content{animation:errorSlideIn .25s cubic-bezier(.4,0,.2,1),errorPulse .4s ease .15s}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:10;pointer-events:none}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{margin-top:.08rem}:host-context(.p-floatlabel) .dsx-error-message-content{padding:.2rem .6rem .2rem .4rem}:host-context(:not(.p-floatlabel)){display:block;width:100%}:host-context(:not(.p-floatlabel)) .dsx-error-slot.is-visible{margin-top:.15rem;margin-bottom:0}:host-context(:not(.p-floatlabel)) .dsx-error-message-content{padding:.2rem .6rem}@media(max-width:640px){.dsx-error-message-content{padding:.15rem .5rem;font-size:.75rem;gap:.3rem}.dsx-error-icon icon-dsx{transform:scale(.8)}.dsx-error-slot{transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}@keyframes errorSlideIn{0%{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{margin-top:.05rem}:host-context(:not(.p-floatlabel)) .dsx-error-slot.is-visible{margin-top:.1rem}}@media(prefers-color-scheme:dark){.dsx-error-message-content{background:#2d1a1a;border-left-color:#ef4444;color:#fca5a5}.dsx-error-message-content icon-dsx,.dsx-error-message-content icon-dsx svg,.dsx-error-message-content icon-dsx svg path{color:#ef4444!important;fill:#ef4444!important}@keyframes errorPulse{0%{box-shadow:0 1px 2px #0000004d}50%{box-shadow:0 2px 8px #ef444433}to{box-shadow:0 1px 2px #0000004d}}}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: IconDsxComponent, selector: "icon-dsx", inputs: ["name", "style", "debug"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AppMessageErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-message-error', standalone: true, imports: [TagModule, IconDsxComponent], template: "<!-- app-message-error.component.html -->\r\n<div class=\"dsx-error-slot\" [class.is-visible]=\"isControlErrorVisible()\">\r\n  <div class=\"dsx-error-message\">\r\n    <div class=\"dsx-error-message-content\">\r\n      <!-- \uD83C\uDFAF INYECTA ESTA L\u00CDNEA TEMPORAL DE DEPURACI\u00D3N AQU\u00CD -->\r\n      <!-- <span\r\n        style=\"\r\n          color: blue;\r\n          font-size: 10px;\r\n          display: block;\r\n          word-break: break-all;\r\n        \"\r\n      >\r\n        DEBUG ERRORES: {{ control?.errors | json }}\r\n      </span> -->\r\n\r\n      <icon-dsx name=\"warning\"></icon-dsx>\r\n\r\n      @if (control?.errors?.[\"required\"]) {\r\n        El campo <strong>es requerido.</strong>\r\n      } @else if (control?.errors?.[\"invalidNIT\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidNIT\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n        <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDate\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDate\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minimumAge\"]) {\r\n        <strong>{{ control?.errors?.[\"minimumAge\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minlength\"]) {\r\n        Debe tener al menos\r\n        <strong>{{ control?.errors?.[\"minlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"maxlength\"]) {\r\n        Debe tener como m\u00E1ximo\r\n        <strong>{{ control?.errors?.[\"maxlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"min\"]) {\r\n        El valor m\u00EDnimo permitido es\r\n        <strong>{{ formatNumber(control?.errors?.[\"min\"]?.min) }}</strong>\r\n      } @else if (control?.errors?.[\"max\"]) {\r\n        El valor m\u00E1ximo permitido es\r\n        <strong>{{ formatNumber(control?.errors?.[\"max\"]?.max) }}</strong>\r\n      } @else if (control?.errors?.[\"email\"]) {\r\n        Debe ser una direcci\u00F3n de correo v\u00E1lida.\r\n      } @else if (control?.errors?.[\"pattern\"]) {\r\n        El campo no tiene el formato requerido.\r\n      } @else if (control?.errors?.[\"alreadyValueExists\"]) {\r\n        <strong>{{ control?.errors?.[\"alreadyValueExists\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidTemplateVariables\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateVariables\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateVariables\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateVariables\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else if (control?.errors?.[\"invalidTemplateStructure\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateStructure\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateStructure\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateStructure\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else if (control?.errors?.[\"similitudDetectada\"]) {\r\n        <!-- \uD83C\uDFAF Estructuraci\u00F3n del mensaje con el nombre aislado en negrita -->\r\n        Ya existe un registro muy similar en el sistema:\r\n        <strong\r\n          >\"{{ control?.errors?.[\"similitudDetectada\"]?.sugerencia }}\"</strong\r\n        >.\r\n      } @else {\r\n        Existe un error a\u00FAn no identificado.\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Mensaje para formulario en general (Cambiado form.touched por form.dirty para evitar falsos positivos al clicar el fondo) -->\r\n@if (form?.invalid && form?.dirty) {\r\n  <div class=\"mt-2 mb-2\">\r\n    @if (this.form?.errors?.[\"atLeastOneRequired\"]) {\r\n      <p-tag severity=\"danger\" [rounded]=\"true\">\r\n        {{ form?.getError(\"atLeastOneRequired\")?.message }}\r\n      </p-tag>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".dsx-error-slot{display:block;max-height:0;overflow:hidden;opacity:0;transform:translateY(-2px);transition:opacity .15s ease,transform .15s ease}.dsx-error-slot.is-visible{max-height:80px;opacity:1;transform:translateY(0)}.dsx-error-message{display:block;width:100%}.dsx-error-message-content{display:flex;align-items:center;gap:.5rem;width:100%;box-sizing:border-box;padding:.4rem .7rem;font-size:.85rem;background:var(--dsx-error-bg, #fff2f0)!important;color:var(--dsx-error-color, #b42318)!important;border-left:3px solid var(--dsx-error-color, #b42318)!important;border-radius:.375rem;box-shadow:0 1px 2px #0000000f;line-height:1.4}.dsx-error-icon{flex:0 0 auto;line-height:1;display:inline-flex;align-items:center;justify-content:center}.dsx-error-message-content icon-dsx,.dsx-error-message-content icon-dsx svg,.dsx-error-message-content icon-dsx svg path{color:var(--dsx-error-color, #ff5a4e)!important;fill:var(--dsx-error-color, #e45036)!important}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:10;pointer-events:none}:host-context(.p-floatlabel) .dsx-error-slot{margin-top:.1rem}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{margin-top:.1rem}:host-context(.p-floatlabel) .dsx-error-message-content{padding:.35rem .7rem .35rem .5rem}:host-context(:not(.p-floatlabel)){display:block;width:100%}:host-context(:not(.p-floatlabel)) .dsx-error-slot.is-visible{margin-top:.2rem;margin-bottom:0}:host-context(:not(.p-floatlabel)) .dsx-error-message-content{padding:.35rem .7rem}@media(max-width:640px){.dsx-error-message-content{padding:.3rem .6rem;font-size:.8rem;gap:.4rem}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{margin-top:.05rem}:host-context(:not(.p-floatlabel)) .dsx-error-slot.is-visible{margin-top:.15rem}}@media(prefers-color-scheme:dark){.dsx-error-message-content{background:#2d1a1a;border-left-color:#ef4444;color:#fca5a5}.dsx-error-message-content icon-dsx,.dsx-error-message-content icon-dsx svg,.dsx-error-message-content icon-dsx svg path{color:#ef4444!important;fill:#ef4444!important}}\n"] }]
+            args: [{ selector: 'app-message-error', standalone: true, imports: [TagModule, IconDsxComponent], template: "<div class=\"dsx-error-slot\" [class.is-visible]=\"isControlErrorVisible()\">\r\n  <div class=\"dsx-error-message\">\r\n    <div class=\"dsx-error-message-content\">\r\n      <icon-dsx name=\"warning\"></icon-dsx>\r\n\r\n      @if (control?.errors?.[\"required\"]) {\r\n        El campo <strong>es requerido.</strong>\r\n      } @else if (control?.errors?.[\"invalidNIT\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidNIT\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n        <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDate\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDate\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minimumAge\"]) {\r\n        <strong>{{ control?.errors?.[\"minimumAge\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minlength\"]) {\r\n        Debe tener al menos\r\n        <strong>{{ control?.errors?.[\"minlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"maxlength\"]) {\r\n        Debe tener como m\u00E1ximo\r\n        <strong>{{ control?.errors?.[\"maxlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"min\"]) {\r\n        El valor m\u00EDnimo permitido es\r\n        <strong>{{ formatNumber(control?.errors?.[\"min\"]?.min) }}</strong>\r\n      } @else if (control?.errors?.[\"max\"]) {\r\n        El valor m\u00E1ximo permitido es\r\n        <strong>{{ formatNumber(control?.errors?.[\"max\"]?.max) }}</strong>\r\n      } @else if (control?.errors?.[\"email\"]) {\r\n        Debe ser una direcci\u00F3n de correo v\u00E1lida.\r\n      } @else if (control?.errors?.[\"pattern\"]) {\r\n        El campo no tiene el formato requerido.\r\n      } @else if (control?.errors?.[\"alreadyValueExists\"]) {\r\n        <strong>{{ control?.errors?.[\"alreadyValueExists\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidTemplateVariables\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateVariables\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateVariables\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateVariables\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else if (control?.errors?.[\"invalidTemplateStructure\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateStructure\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateStructure\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateStructure\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else if (control?.errors?.[\"similitudDetectada\"]) {\r\n        Ya existe un registro muy similar en el sistema:\r\n        <strong\r\n          >\"{{ control?.errors?.[\"similitudDetectada\"]?.sugerencia }}\"</strong\r\n        >.\r\n      } @else {\r\n        Existe un error a\u00FAn no identificado.\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Mensaje para formulario en general -->\r\n@if (form?.invalid && form?.dirty) {\r\n  <div class=\"mt-2 mb-2\">\r\n    @if (this.form?.errors?.[\"atLeastOneRequired\"]) {\r\n      <p-tag severity=\"danger\" [rounded]=\"true\">\r\n        {{ form?.getError(\"atLeastOneRequired\")?.message }}\r\n      </p-tag>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".dsx-error-slot{display:block;max-height:0;overflow:hidden;opacity:0;transform:translateY(-4px) scale(.98);transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1),margin .25s cubic-bezier(.4,0,.2,1)}.dsx-error-slot.is-visible{max-height:60px;opacity:1;transform:translateY(0) scale(1)}.dsx-error-message{display:block;width:100%}.dsx-error-message-content{display:flex;align-items:center;gap:.4rem;width:100%;box-sizing:border-box;padding:.25rem .6rem;font-size:.82rem;background:var(--dsx-error-bg, #fff2f0)!important;color:var(--dsx-error-color, #b42318)!important;border-left:3px solid var(--dsx-error-color, #b42318)!important;border-radius:.3rem;box-shadow:0 1px 2px #0000000f;line-height:1.3;animation:errorSlideIn .25s cubic-bezier(.4,0,.2,1)}.dsx-error-icon{flex:0 0 auto;line-height:1;display:inline-flex;align-items:center;justify-content:center}.dsx-error-icon icon-dsx{transform:scale(.85);transition:transform .2s ease}.dsx-error-slot.is-visible .dsx-error-icon icon-dsx{transform:scale(1)}.dsx-error-message-content icon-dsx,.dsx-error-message-content icon-dsx svg,.dsx-error-message-content icon-dsx svg path{color:var(--dsx-error-color, #ff5a4e)!important;fill:var(--dsx-error-color, #e45036)!important}@keyframes errorSlideIn{0%{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes errorPulse{0%{box-shadow:0 1px 2px #0000000f}50%{box-shadow:0 2px 8px #b4231826}to{box-shadow:0 1px 2px #0000000f}}.dsx-error-slot.is-visible .dsx-error-message-content{animation:errorSlideIn .25s cubic-bezier(.4,0,.2,1),errorPulse .4s ease .15s}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:10;pointer-events:none}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{margin-top:.08rem}:host-context(.p-floatlabel) .dsx-error-message-content{padding:.2rem .6rem .2rem .4rem}:host-context(:not(.p-floatlabel)){display:block;width:100%}:host-context(:not(.p-floatlabel)) .dsx-error-slot.is-visible{margin-top:.15rem;margin-bottom:0}:host-context(:not(.p-floatlabel)) .dsx-error-message-content{padding:.2rem .6rem}@media(max-width:640px){.dsx-error-message-content{padding:.15rem .5rem;font-size:.75rem;gap:.3rem}.dsx-error-icon icon-dsx{transform:scale(.8)}.dsx-error-slot{transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}@keyframes errorSlideIn{0%{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{margin-top:.05rem}:host-context(:not(.p-floatlabel)) .dsx-error-slot.is-visible{margin-top:.1rem}}@media(prefers-color-scheme:dark){.dsx-error-message-content{background:#2d1a1a;border-left-color:#ef4444;color:#fca5a5}.dsx-error-message-content icon-dsx,.dsx-error-message-content icon-dsx svg,.dsx-error-message-content icon-dsx svg path{color:#ef4444!important;fill:#ef4444!important}@keyframes errorPulse{0%{box-shadow:0 1px 2px #0000004d}50%{box-shadow:0 2px 8px #ef444433}to{box-shadow:0 1px 2px #0000004d}}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { control: [{
                 type: Input
             }], form: [{
@@ -2671,11 +2661,18 @@ class UtilityAddService {
         const resolvedOptions = Array.isArray(groupValidatorsOrOptions)
             ? options
             : (groupValidatorsOrOptions ?? options);
+        // IMPORTANTE: Cambiamos el tipado a AbstractControl para permitir meter FormArrays o FormGroups
         const formGroup = {};
-        // Crear controles de formulario individuales
+        // Crear controles de formulario individuales o inyectar estructuras abstractas
         for (const key in config) {
             if (Object.prototype.hasOwnProperty.call(config, key)) {
                 const fieldConfig = config[key];
+                // ¡EL CAMBIO MÁGICO!: Si ya pasaste un FormArray o FormGroup pre-construido, lo asignamos directo
+                if (fieldConfig instanceof AbstractControl) {
+                    formGroup[key] = fieldConfig;
+                    continue; // Saltamos a la siguiente iteración
+                }
+                // Tu lógica intacta original para los FormControl estándar
                 const { value, validators = [], asyncValidators = [], } = fieldConfig;
                 const hasAssignedDisabled = Object.prototype.hasOwnProperty.call(fieldConfig, 'disabled');
                 const disabled = hasAssignedDisabled
@@ -4771,13 +4768,9 @@ class DsxAutocomplete {
     // Inputs usando Señales
     datasource = input.required(...(ngDevMode ? [{ debugName: "datasource" }] : /* istanbul ignore next */ []));
     optionLabel = input.required(...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
-    // Label del input (ej: 'Requisitos')
     label = input('Seleccionar', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    //Delay por defecto
     delay = input(100, ...(ngDevMode ? [{ debugName: "delay" }] : /* istanbul ignore next */ []));
-    // OBLIGATORIO para la creación automática: nombre de la propiedad ID (ej: 'requisitoId')
     idKey = input.required(...(ngDevMode ? [{ debugName: "idKey" }] : /* istanbul ignore next */ []));
-    // Opcional para PrimeNG (por defecto toma el valor de idKey para identificar duplicados)
     dataKey = input('', ...(ngDevMode ? [{ debugName: "dataKey" }] : /* istanbul ignore next */ []));
     permitirCrear = input(false, ...(ngDevMode ? [{ debugName: "permitirCrear" }] : /* istanbul ignore next */ []));
     debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
@@ -4788,20 +4781,30 @@ class DsxAutocomplete {
     onChange = () => { };
     onTouched = () => { };
     disabled = false;
+    lastLogTime = 0;
+    timeoutLimpieza = null;
+    logDebug(message, data) {
+        if (!this.debug())
+            return;
+        const now = Date.now();
+        if (now - this.lastLogTime < 50)
+            return;
+        this.lastLogTime = now;
+        console.log(`[DsxAutocomplete] ${message}`, data || '');
+    }
     searchRequisitos(event) {
         const inicio = performance.now();
         const label = this.optionLabel();
-        // FLUJO A: El usuario hizo clic en el botón dropdown (Texto vacío)
+        // FLUJO A: Dropdown (sin texto)
         if (!event.query || event.query.trim() === '') {
-            // Cargamos TODO el universo de datos para que el usuario pueda navegar libremente
             const todoElUniverso = this.datasource();
             this.dataFiltrada.set(todoElUniverso);
-            if (this.debug()) {
-                console.log('[DsxAutocomplete] Modo dropdown activo: Mostrando lista completa de registros:', todoElUniverso.length);
-            }
+            this.logDebug('Modo dropdown activo', {
+                registros: todoElUniverso.length,
+            });
             return;
         }
-        // FLUJO B: El usuario está escribiendo (Búsqueda inteligente con límite de 10)
+        // FLUJO B: Búsqueda
         const palabrasBuscadas = event.query
             .toLowerCase()
             .trim()
@@ -4812,25 +4815,26 @@ class DsxAutocomplete {
             const textoRegistro = String(item[label] || '').toLowerCase();
             return palabrasBuscadas.every((palabra) => textoRegistro.includes(palabra));
         })
-            .slice(0, 10); // <-- El límite se aplica estrictamente al escribir
+            .slice(0, 10);
         this.dataFiltrada.set(filtrados);
-        if (this.debug()) {
-            console.log(`[DsxAutocomplete] Búsqueda inteligente para "${event.query}" tardó ${(performance.now() - inicio).toFixed(2)}ms. Encontrados:`, filtrados.length);
-        }
+        this.logDebug(`Búsqueda "${event.query}" (${(performance.now() - inicio).toFixed(2)}ms)`, { encontrados: filtrados.length });
     }
     evaluarYAgregar(event) {
         const valorInput = event.target.value?.trim();
-        if (!valorInput)
+        if (!valorInput) {
+            this.dataFiltrada.set([]);
             return;
+        }
         const sugerencias = this.dataFiltrada();
         const actuales = this.value || [];
-        const campoId = this.idKey(); // Obtenemos de forma segura el nombre del ID stringificado
+        const campoId = this.idKey();
         if (sugerencias.length > 0) {
             const primeraMatch = sugerencias[0];
-            // Comparamos identidades usando el campoId dinámico
             const yaExiste = actuales.some((item) => item[campoId] === primeraMatch[campoId]);
-            if (!yaExiste)
+            if (!yaExiste) {
                 this.actualizarFormulario([...actuales, primeraMatch]);
+                this.logDebug('✅ Elemento agregado');
+            }
         }
         else if (this.permitirCrear()) {
             let nuevo;
@@ -4838,7 +4842,6 @@ class DsxAutocomplete {
                 nuevo = this.factoryNuevoRegistro()(valorInput);
             }
             else {
-                // Al estructurar el objeto usando [campoId], garantizamos que viaje con el nombre correcto de tu entidad
                 nuevo = {
                     [campoId]: 0,
                     [this.optionLabel()]: valorInput.toUpperCase(),
@@ -4846,19 +4849,47 @@ class DsxAutocomplete {
                 };
             }
             this.actualizarFormulario([...actuales, nuevo]);
+            this.logDebug('🆕 Nuevo elemento creado', valorInput);
         }
         event.target.value = '';
         this.dataFiltrada.set([]);
     }
+    onHide() {
+        this.logDebug('Dropdown ocultado - Limpiando estado');
+        // Limpiar timeout anterior si existe
+        if (this.timeoutLimpieza) {
+            clearTimeout(this.timeoutLimpieza);
+            this.timeoutLimpieza = null;
+        }
+        // Limpiar después de un pequeño delay
+        this.timeoutLimpieza = setTimeout(() => {
+            this.dataFiltrada.set([]);
+            this.timeoutLimpieza = null;
+        }, 100);
+    }
+    onShow() {
+        this.logDebug('Dropdown mostrado');
+        // Limpiar timeout pendiente
+        if (this.timeoutLimpieza) {
+            clearTimeout(this.timeoutLimpieza);
+            this.timeoutLimpieza = null;
+        }
+    }
     actualizarFormulario(nuevaLista) {
         this.value = nuevaLista;
         this.onChange(this.value);
-        if (this.debug())
-            console.log('[DsxAutocomplete] Estado del Formulario Actualizado con Objetos:', this.value);
+        this.logDebug('Formulario actualizado', {
+            total: nuevaLista.length,
+        });
     }
     // --- ControlValueAccessor ---
     writeValue(value) {
         this.value = value || [];
+        this.dataFiltrada.set([]);
+        if (this.timeoutLimpieza) {
+            clearTimeout(this.timeoutLimpieza);
+            this.timeoutLimpieza = null;
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -4876,7 +4907,7 @@ class DsxAutocomplete {
                 useExisting: forwardRef(() => DsxAutocomplete),
                 multi: true,
             },
-        ], ngImport: i0, template: "<p-floatlabel variant=\"on\">\r\n  <p-autoComplete\r\n    fluid\r\n    multiple\r\n    [dropdown]=\"true\"\r\n    [suggestions]=\"dataFiltrada()\"\r\n    (completeMethod)=\"searchRequisitos($event)\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onChange(value)\"\r\n    (onBlur)=\"onTouched()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"optionLabel()\"\r\n    [dataKey]=\"dataKey() || idKey()\"\r\n    (keyup.enter)=\"evaluarYAgregar($event)\"\r\n    [delay]=\"delay()\"\r\n  >\r\n  </p-autoComplete>\r\n  <label>{{ label() }}</label>\r\n</p-floatlabel>\r\n", styles: [""], dependencies: [{ kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] });
+        ], ngImport: i0, template: "<p-floatlabel variant=\"on\">\r\n  <p-autoComplete\r\n    fluid\r\n    multiple\r\n    [dropdown]=\"true\"\r\n    [suggestions]=\"dataFiltrada()\"\r\n    (completeMethod)=\"searchRequisitos($event)\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onChange(value)\"\r\n    (onBlur)=\"onTouched()\"\r\n    (onShow)=\"onShow()\"\r\n    (onHide)=\"onHide()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"optionLabel()\"\r\n    [dataKey]=\"dataKey() || idKey()\"\r\n    (keyup.enter)=\"evaluarYAgregar($event)\"\r\n    [delay]=\"delay()\"\r\n    placeholder=\"Ingresa un texto....\"\r\n  >\r\n  </p-autoComplete>\r\n  <label>{{ label() }}</label>\r\n</p-floatlabel>\r\n", styles: [""], dependencies: [{ kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxAutocomplete, decorators: [{
             type: Component,
@@ -4886,13 +4917,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => DsxAutocomplete),
                             multi: true,
                         },
-                    ], template: "<p-floatlabel variant=\"on\">\r\n  <p-autoComplete\r\n    fluid\r\n    multiple\r\n    [dropdown]=\"true\"\r\n    [suggestions]=\"dataFiltrada()\"\r\n    (completeMethod)=\"searchRequisitos($event)\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onChange(value)\"\r\n    (onBlur)=\"onTouched()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"optionLabel()\"\r\n    [dataKey]=\"dataKey() || idKey()\"\r\n    (keyup.enter)=\"evaluarYAgregar($event)\"\r\n    [delay]=\"delay()\"\r\n  >\r\n  </p-autoComplete>\r\n  <label>{{ label() }}</label>\r\n</p-floatlabel>\r\n" }]
+                    ], template: "<p-floatlabel variant=\"on\">\r\n  <p-autoComplete\r\n    fluid\r\n    multiple\r\n    [dropdown]=\"true\"\r\n    [suggestions]=\"dataFiltrada()\"\r\n    (completeMethod)=\"searchRequisitos($event)\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onChange(value)\"\r\n    (onBlur)=\"onTouched()\"\r\n    (onShow)=\"onShow()\"\r\n    (onHide)=\"onHide()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"optionLabel()\"\r\n    [dataKey]=\"dataKey() || idKey()\"\r\n    (keyup.enter)=\"evaluarYAgregar($event)\"\r\n    [delay]=\"delay()\"\r\n    placeholder=\"Ingresa un texto....\"\r\n  >\r\n  </p-autoComplete>\r\n  <label>{{ label() }}</label>\r\n</p-floatlabel>\r\n" }]
         }], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], idKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "idKey", required: true }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], permitirCrear: [{ type: i0.Input, args: [{ isSignal: true, alias: "permitirCrear", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], factoryNuevoRegistro: [{ type: i0.Input, args: [{ isSignal: true, alias: "factoryNuevoRegistro", required: false }] }] } });
 
 class FileComponent {
     // Inputs
     existingFile = input(null, ...(ngDevMode ? [{ debugName: "existingFile" }] : /* istanbul ignore next */ []));
     existingFileName = input(null, ...(ngDevMode ? [{ debugName: "existingFileName" }] : /* istanbul ignore next */ []));
+    overrideFileName = input(null, ...(ngDevMode ? [{ debugName: "overrideFileName" }] : /* istanbul ignore next */ []));
     debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
     required = input(true, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     accept = input('.xls,.xlsx', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
@@ -5101,7 +5133,7 @@ class FileComponent {
         console.log(`[FileComponent] ${method}`, data || '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FileComponent, isStandalone: true, selector: "dsx-file-upload", inputs: { existingFile: { classPropertyName: "existingFile", publicName: "existingFile", isSignal: true, isRequired: false, transformFunction: null }, existingFileName: { classPropertyName: "existingFileName", publicName: "existingFileName", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, pTooltipOverride: { classPropertyName: "pTooltipOverride", publicName: "pTooltipOverride", isSignal: true, isRequired: false, transformFunction: null }, tooltipPositionOverride: { classPropertyName: "tooltipPositionOverride", publicName: "tooltipPositionOverride", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, invalidSummary: { classPropertyName: "invalidSummary", publicName: "invalidSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidDetail: { classPropertyName: "invalidDetail", publicName: "invalidDetail", isSignal: true, isRequired: false, transformFunction: null }, invalidSizeSummary: { classPropertyName: "invalidSizeSummary", publicName: "invalidSizeSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidSizeDetail: { classPropertyName: "invalidSizeDetail", publicName: "invalidSizeDetail", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FileComponent, isStandalone: true, selector: "dsx-file-upload", inputs: { existingFile: { classPropertyName: "existingFile", publicName: "existingFile", isSignal: true, isRequired: false, transformFunction: null }, existingFileName: { classPropertyName: "existingFileName", publicName: "existingFileName", isSignal: true, isRequired: false, transformFunction: null }, overrideFileName: { classPropertyName: "overrideFileName", publicName: "overrideFileName", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, pTooltipOverride: { classPropertyName: "pTooltipOverride", publicName: "pTooltipOverride", isSignal: true, isRequired: false, transformFunction: null }, tooltipPositionOverride: { classPropertyName: "tooltipPositionOverride", publicName: "tooltipPositionOverride", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, invalidSummary: { classPropertyName: "invalidSummary", publicName: "invalidSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidDetail: { classPropertyName: "invalidDetail", publicName: "invalidDetail", isSignal: true, isRequired: false, transformFunction: null }, invalidSizeSummary: { classPropertyName: "invalidSizeSummary", publicName: "invalidSizeSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidSizeDetail: { classPropertyName: "invalidSizeDetail", publicName: "invalidSizeDetail", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FileComponent),
@@ -5112,7 +5144,7 @@ class FileComponent {
                 useExisting: forwardRef(() => FileComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\"> \uD83D\uDCC4 {{ existingFileName() }} </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex items-center gap-2\">\r\n    <p-fileUpload\r\n      #fileUpload\r\n      mode=\"basic\"\r\n      [accept]=\"accept()\"\r\n      [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n      [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n      [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n      [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n      [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n      (onSelect)=\"onSelect($event)\"\r\n      [disabled]=\"!isFileUploadEnabled()\"\r\n      [pTooltip]=\"pTooltipOverride()\"\r\n      [tooltipPosition]=\"tooltipPositionOverride()\"\r\n    />\r\n\r\n    @if (isReplacing() || existingFile()) {\r\n      <p-button\r\n        icon=\"pi pi-times\"\r\n        [rounded]=\"true\"\r\n        severity=\"secondary\"\r\n        (click)=\"cancelReplace()\"\r\n        [disabled]=\"disabled()\"\r\n        pTooltip=\"Cancelar reemplazo\"\r\n        tooltipPosition=\"top\"\r\n      />\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-size:clamp(.85rem,1vw + .5rem,1.4rem);font-weight:500;color:#2c3e50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"], dependencies: [{ kind: "component", type: FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+        ], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\">\r\n      \uD83D\uDCC4 {{ overrideFileName() ?? existingFileName() }}\r\n    </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex items-center gap-2\">\r\n    <p-fileUpload\r\n      #fileUpload\r\n      mode=\"basic\"\r\n      [accept]=\"accept()\"\r\n      [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n      [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n      [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n      [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n      [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n      (onSelect)=\"onSelect($event)\"\r\n      [disabled]=\"!isFileUploadEnabled()\"\r\n      [pTooltip]=\"pTooltipOverride()\"\r\n      [tooltipPosition]=\"tooltipPositionOverride()\"\r\n    />\r\n\r\n    @if (isReplacing() || existingFile()) {\r\n      <p-button\r\n        icon=\"pi pi-times\"\r\n        [rounded]=\"true\"\r\n        severity=\"secondary\"\r\n        (click)=\"cancelReplace()\"\r\n        [disabled]=\"disabled()\"\r\n        pTooltip=\"Cancelar reemplazo\"\r\n        tooltipPosition=\"top\"\r\n      />\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-size:clamp(.85rem,1vw + .5rem,1.4rem);font-weight:500;color:#2c3e50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"], dependencies: [{ kind: "component", type: FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
@@ -5127,8 +5159,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => FileComponent),
                             multi: true,
                         },
-                    ], template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\"> \uD83D\uDCC4 {{ existingFileName() }} </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex items-center gap-2\">\r\n    <p-fileUpload\r\n      #fileUpload\r\n      mode=\"basic\"\r\n      [accept]=\"accept()\"\r\n      [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n      [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n      [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n      [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n      [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n      (onSelect)=\"onSelect($event)\"\r\n      [disabled]=\"!isFileUploadEnabled()\"\r\n      [pTooltip]=\"pTooltipOverride()\"\r\n      [tooltipPosition]=\"tooltipPositionOverride()\"\r\n    />\r\n\r\n    @if (isReplacing() || existingFile()) {\r\n      <p-button\r\n        icon=\"pi pi-times\"\r\n        [rounded]=\"true\"\r\n        severity=\"secondary\"\r\n        (click)=\"cancelReplace()\"\r\n        [disabled]=\"disabled()\"\r\n        pTooltip=\"Cancelar reemplazo\"\r\n        tooltipPosition=\"top\"\r\n      />\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-size:clamp(.85rem,1vw + .5rem,1.4rem);font-weight:500;color:#2c3e50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { existingFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFile", required: false }] }], existingFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFileName", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], pTooltipOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "pTooltipOverride", required: false }] }], tooltipPositionOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPositionOverride", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], invalidSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSummary", required: false }] }], invalidDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidDetail", required: false }] }], invalidSizeSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSizeSummary", required: false }] }], invalidSizeDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSizeDetail", required: false }] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }] } });
+                    ], template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\">\r\n      \uD83D\uDCC4 {{ overrideFileName() ?? existingFileName() }}\r\n    </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex items-center gap-2\">\r\n    <p-fileUpload\r\n      #fileUpload\r\n      mode=\"basic\"\r\n      [accept]=\"accept()\"\r\n      [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n      [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n      [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n      [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n      [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n      (onSelect)=\"onSelect($event)\"\r\n      [disabled]=\"!isFileUploadEnabled()\"\r\n      [pTooltip]=\"pTooltipOverride()\"\r\n      [tooltipPosition]=\"tooltipPositionOverride()\"\r\n    />\r\n\r\n    @if (isReplacing() || existingFile()) {\r\n      <p-button\r\n        icon=\"pi pi-times\"\r\n        [rounded]=\"true\"\r\n        severity=\"secondary\"\r\n        (click)=\"cancelReplace()\"\r\n        [disabled]=\"disabled()\"\r\n        pTooltip=\"Cancelar reemplazo\"\r\n        tooltipPosition=\"top\"\r\n      />\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-size:clamp(.85rem,1vw + .5rem,1.4rem);font-weight:500;color:#2c3e50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { existingFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFile", required: false }] }], existingFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFileName", required: false }] }], overrideFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "overrideFileName", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], pTooltipOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "pTooltipOverride", required: false }] }], tooltipPositionOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPositionOverride", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], invalidSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSummary", required: false }] }], invalidDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidDetail", required: false }] }], invalidSizeSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSizeSummary", required: false }] }], invalidSizeDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSizeDetail", required: false }] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }] } });
 
 class JsonHighlightPipe {
     /**
@@ -8112,7 +8144,7 @@ class DsxSelect {
     optionValue = input(undefined, ...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
     // Iconos
     useIcon = input(true, ...(ngDevMode ? [{ debugName: "useIcon" }] : /* istanbul ignore next */ []));
-    itemIcon = input('label', ...(ngDevMode ? [{ debugName: "itemIcon" }] : /* istanbul ignore next */ []));
+    itemIcon = input('keyboard_arrow_right', ...(ngDevMode ? [{ debugName: "itemIcon" }] : /* istanbul ignore next */ []));
     selectedIcon = input('done_outline', ...(ngDevMode ? [{ debugName: "selectedIcon" }] : /* istanbul ignore next */ []));
     // Debug solo consola
     debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
@@ -8277,7 +8309,7 @@ class DsxSelect {
                 useExisting: forwardRef(() => DsxSelect),
                 multi: true,
             },
-        ], ngImport: i0, template: "<!-- dsx-select.html -->\r\n<p-floatLabel [variant]=\"variant()\">\r\n  <p-select\r\n    fluid\r\n    [options]=\"dataList()\"\r\n    [filter]=\"true\"\r\n    [filterPlaceholder]=\"filterPlaceholder()\"\r\n    [showClear]=\"showClear()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"resolvedOptionLabel()\"\r\n    [optionValue]=\"resolvedOptionValue()\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n  >\r\n    <ng-template let-item #item>\r\n      <div class=\"flex align-items-center\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"itemIcon()\" class=\"text-cyan-500! mr-1\"></icon-dsx>\r\n        } {{ item[resolvedOptionLabel()] }}\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #selectedItem let-selectedOptions>\r\n      <div class=\"flex align-items-center\">\r\n        @if (useIcon()) {\r\n        <icon-dsx\r\n          [name]=\"selectedIcon()\"\r\n          class=\"text-green-600! mr-1\"\r\n        ></icon-dsx>\r\n        } {{ selectedOptions?.[resolvedOptionLabel()] }}\r\n      </div>\r\n    </ng-template>\r\n  </p-select>\r\n  <label>{{ resolvedLabel() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 Mensaje de error condicional (dentro del floatLabel) -->\r\n@if (showError() && errorControl()) {\r\n<app-message-error [control]=\"errorControl()\" />\r\n}\r\n", styles: ["icon-dsx{font-size:1.5em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: IconDsxComponent, selector: "icon-dsx", inputs: ["name", "style", "debug"] }, { kind: "component", type: AppMessageErrorComponent, selector: "app-message-error", inputs: ["control", "form", "debugMode"] }] });
+        ], ngImport: i0, template: "<!-- dsx-select.html -->\r\n<p-floatLabel [variant]=\"variant()\">\r\n  <p-select\r\n    fluid\r\n    appendTo=\"body\"\r\n    [options]=\"dataList()\"\r\n    [filter]=\"true\"\r\n    [filterPlaceholder]=\"filterPlaceholder()\"\r\n    [showClear]=\"showClear()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"resolvedOptionLabel()\"\r\n    [optionValue]=\"resolvedOptionValue()\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n  >\r\n    <ng-template let-item #item>\r\n      <div class=\"flex align-items-center\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"itemIcon()\"></icon-dsx>\r\n        } {{ item[resolvedOptionLabel()] }}\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #selectedItem let-selectedOptions>\r\n      <div class=\"flex align-items-center\">\r\n        @if (useIcon()) {\r\n        <icon-dsx\r\n          [name]=\"selectedIcon()\"\r\n          class=\"text-green-600! mr-1\"\r\n        ></icon-dsx>\r\n        } {{ selectedOptions?.[resolvedOptionLabel()] }}\r\n      </div>\r\n    </ng-template>\r\n  </p-select>\r\n  <label>{{ resolvedLabel() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 Mensaje de error condicional (dentro del floatLabel) -->\r\n@if (showError() && errorControl()) {\r\n<app-message-error [control]=\"errorControl()\" />\r\n}\r\n", styles: ["icon-dsx{font-size:1.5em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: IconDsxComponent, selector: "icon-dsx", inputs: ["name", "style", "debug"] }, { kind: "component", type: AppMessageErrorComponent, selector: "app-message-error", inputs: ["control", "form", "debugMode"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxSelect, decorators: [{
             type: Component,
@@ -8293,7 +8325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => DsxSelect),
                             multi: true,
                         },
-                    ], template: "<!-- dsx-select.html -->\r\n<p-floatLabel [variant]=\"variant()\">\r\n  <p-select\r\n    fluid\r\n    [options]=\"dataList()\"\r\n    [filter]=\"true\"\r\n    [filterPlaceholder]=\"filterPlaceholder()\"\r\n    [showClear]=\"showClear()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"resolvedOptionLabel()\"\r\n    [optionValue]=\"resolvedOptionValue()\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n  >\r\n    <ng-template let-item #item>\r\n      <div class=\"flex align-items-center\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"itemIcon()\" class=\"text-cyan-500! mr-1\"></icon-dsx>\r\n        } {{ item[resolvedOptionLabel()] }}\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #selectedItem let-selectedOptions>\r\n      <div class=\"flex align-items-center\">\r\n        @if (useIcon()) {\r\n        <icon-dsx\r\n          [name]=\"selectedIcon()\"\r\n          class=\"text-green-600! mr-1\"\r\n        ></icon-dsx>\r\n        } {{ selectedOptions?.[resolvedOptionLabel()] }}\r\n      </div>\r\n    </ng-template>\r\n  </p-select>\r\n  <label>{{ resolvedLabel() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 Mensaje de error condicional (dentro del floatLabel) -->\r\n@if (showError() && errorControl()) {\r\n<app-message-error [control]=\"errorControl()\" />\r\n}\r\n", styles: ["icon-dsx{font-size:1.5em}\n"] }]
+                    ], template: "<!-- dsx-select.html -->\r\n<p-floatLabel [variant]=\"variant()\">\r\n  <p-select\r\n    fluid\r\n    appendTo=\"body\"\r\n    [options]=\"dataList()\"\r\n    [filter]=\"true\"\r\n    [filterPlaceholder]=\"filterPlaceholder()\"\r\n    [showClear]=\"showClear()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"resolvedOptionLabel()\"\r\n    [optionValue]=\"resolvedOptionValue()\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n  >\r\n    <ng-template let-item #item>\r\n      <div class=\"flex align-items-center\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"itemIcon()\"></icon-dsx>\r\n        } {{ item[resolvedOptionLabel()] }}\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #selectedItem let-selectedOptions>\r\n      <div class=\"flex align-items-center\">\r\n        @if (useIcon()) {\r\n        <icon-dsx\r\n          [name]=\"selectedIcon()\"\r\n          class=\"text-green-600! mr-1\"\r\n        ></icon-dsx>\r\n        } {{ selectedOptions?.[resolvedOptionLabel()] }}\r\n      </div>\r\n    </ng-template>\r\n  </p-select>\r\n  <label>{{ resolvedLabel() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 Mensaje de error condicional (dentro del floatLabel) -->\r\n@if (showError() && errorControl()) {\r\n<app-message-error [control]=\"errorControl()\" />\r\n}\r\n", styles: ["icon-dsx{font-size:1.5em}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataList", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], useIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "useIcon", required: false }] }], itemIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemIcon", required: false }] }], selectedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIcon", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], showError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showError", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }, { type: i0.Output, args: ["selectedValueChange"] }] } });
 
 /**
@@ -9551,15 +9583,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 // form-preview.service.ts
 class FormPreviewService {
-    /**
-     * Genera resumen HTML desde un objeto plano
-     * @param data - Objeto con los datos (ej: form.value)
-     * @param fields - Array de campos a mostrar
-     * @param options - Opciones adicionales
-     */
     buildObjectSummaryHtml(data, fields, options) {
         const debug = options?.debug ?? false;
-        // Modo desarrollo: mostrar información de depuración
         if (debug) {
             this.debugInputData(data, fields, options);
         }
@@ -9579,16 +9604,31 @@ class FormPreviewService {
         const cells = [];
         const propiedadesNoEncontradas = [];
         for (const field of fields) {
-            // Obtener valor
-            const value = this.getNestedValue(data, field.key);
+            let value = this.getNestedValue(data, field.key);
+            // Resolver referencia si existe
+            if (field.referenceMap && value !== undefined && value !== null) {
+                const originalValue = value;
+                value = this.resolveReferenceValue(value, field);
+                if (debug) {
+                    console.log(`🔍 Resolviendo referencia para "${field.key}":`, {
+                        original: originalValue,
+                        resuelto: value,
+                        tipoMapa: Array.isArray(field.referenceMap)
+                            ? 'Array'
+                            : field.referenceMap instanceof Map
+                                ? 'Map'
+                                : typeof field.referenceMap === 'function'
+                                    ? 'Función'
+                                    : 'Objeto',
+                    });
+                }
+            }
             const valueText = field.format
                 ? field.format(value)
                 : this.formatValue(value);
-            // Registrar si no se encontró la propiedad
             if (value === undefined) {
                 propiedadesNoEncontradas.push(field.key);
             }
-            // Filtrar vacíos
             if (!showEmpty && !valueText)
                 continue;
             cells.push({
@@ -9596,7 +9636,6 @@ class FormPreviewService {
                 value: valueText || '—',
             });
         }
-        // Modo desarrollo: mostrar advertencias
         if (debug) {
             if (propiedadesNoEncontradas.length > 0) {
                 console.warn('⚠️ FormPreview: Propiedades no encontradas:', propiedadesNoEncontradas);
@@ -9616,6 +9655,56 @@ class FormPreviewService {
             return '';
         return this.generateHtml(title, cells, compact);
     }
+    resolveReferenceValue(value, field) {
+        // Si es array (multi-select)
+        if (Array.isArray(value)) {
+            return value.map((item) => this.resolveSingleReference(item, field));
+        }
+        return this.resolveSingleReference(value, field);
+    }
+    resolveSingleReference(value, field) {
+        if (!value)
+            return value;
+        // Si ya es objeto, devolverlo
+        if (typeof value === 'object' && value !== null) {
+            return value;
+        }
+        const map = field.referenceMap;
+        if (!map)
+            return value;
+        let referencedItem = null;
+        // Si es función
+        if (typeof map === 'function') {
+            referencedItem = map(value);
+        }
+        // Si es Map
+        else if (map instanceof Map) {
+            referencedItem = map.get(value);
+        }
+        // Si es Array
+        else if (Array.isArray(map)) {
+            const idKey = field.referenceId || 'id';
+            referencedItem = map.find((item) => item[idKey] === value);
+        }
+        // Si es objeto literal
+        else if (typeof map === 'object') {
+            referencedItem = map[String(value)];
+        }
+        if (referencedItem) {
+            const labelProp = field.referenceLabel || 'nombre';
+            if (typeof referencedItem === 'object' && referencedItem !== null) {
+                // Buscar la propiedad en el objeto
+                if (referencedItem[labelProp] !== undefined &&
+                    referencedItem[labelProp] !== null) {
+                    return referencedItem[labelProp];
+                }
+                // Si no encuentra la propiedad, devolver el objeto completo
+                return referencedItem;
+            }
+            return referencedItem;
+        }
+        return value;
+    }
     getNestedValue(obj, path) {
         if (!obj || !path)
             return undefined;
@@ -9635,24 +9724,47 @@ class FormPreviewService {
         if (value instanceof Date)
             return value.toLocaleDateString();
         if (typeof value === 'object') {
-            // Para selects, mostrar propiedades comunes
-            if (value.label)
-                return String(value.label);
-            if (value.nombre)
-                return String(value.nombre);
-            if (value.name)
-                return String(value.name);
-            if (value.value)
-                return String(value.value);
-            try {
-                return JSON.stringify(value);
-            }
-            catch {
-                return String(value);
+            if (Array.isArray(value)) {
+                return value
+                    .map((item) => this.formatSingleValue(item))
+                    .filter((v) => v)
+                    .join(', ');
             }
+            return this.formatSingleValue(value);
         }
         return String(value);
     }
+    formatSingleValue(value) {
+        if (!value || typeof value !== 'object')
+            return String(value);
+        const props = [
+            'label',
+            'nombre',
+            'name',
+            'empresaNombre',
+            'descripcion',
+            'description',
+            'text',
+            'value',
+        ];
+        for (const prop of props) {
+            if (value[prop] !== undefined &&
+                value[prop] !== null &&
+                value[prop] !== '') {
+                return String(value[prop]);
+            }
+        }
+        if (value.id !== undefined && value.id !== null) {
+            return `ID: ${value.id}`;
+        }
+        try {
+            const json = JSON.stringify(value);
+            return json.length > 50 ? json.substring(0, 50) + '...' : json;
+        }
+        catch {
+            return '[Objeto]';
+        }
+    }
     generateHtml(title, cells, compact) {
         if (compact) {
             return `
@@ -9679,7 +9791,6 @@ class FormPreviewService {
         </div>
       `;
         }
-        // Versión no compacta (con más padding)
         return `
       <div style="margin: 12px 0; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden; background: #ffffff;">
         <div style="padding: 12px; background: #f8f9fa; border-bottom: 1px solid #dee2e6; font-weight: 600; color: #495057;">
@@ -9710,14 +9821,12 @@ class FormPreviewService {
         console.log('📋 Propiedades disponibles:', data ? Object.keys(data) : 'data es null');
         console.log('🎯 Fields solicitados:', fields);
         console.log('⚙️ Options:', options);
-        // Verificar cada campo
         if (data) {
             for (const field of fields) {
                 const value = this.getNestedValue(data, field.key);
                 const existe = value !== undefined;
                 if (!existe) {
                     console.warn(`❌ Campo "${field.key}" NO existe en data`);
-                    // Sugerir propiedades similares
                     const similares = this.findSimilarProperties(field.key, Object.keys(data));
                     if (similares.length > 0) {
                         console.warn(`💡 Quizás quisiste decir: ${similares.join(', ')}`);
@@ -10376,7 +10485,7 @@ function buildAlreadyExistsMessage(control, options) {
  * Validador asíncrono que verifica si un valor ya existe mediante una llamada a un servicio.
  * Útil para validar unicidad de campos como nombres de usuario, correos electrónicos, etc.
  *
- * Aplica `debounceTime(400)` y `distinctUntilChanged()` para evitar llamadas innecesarias
+ * Aplica `debounceTime(800)` y `distinctUntilChanged()` para evitar llamadas innecesarias
  * al servicio mientras el usuario escribe.
  *
  * @template T Tipo del valor del control a validar.
@@ -10384,39 +10493,93 @@ function buildAlreadyExistsMessage(control, options) {
  *   el identificador del registro actual. Debe retornar un `Observable<boolean>`
  *   emitiendo `true` si el valor ya existe (en otro registro), `false` en caso contrario.
  * @param options Opciones del validador:
- *   - `currentId`: Id opcional del registro en edición para excluirlo en backend.
+ *   - `currentId`: Id fijo del registro en edición para excluirlo en backend.
+ *     ⚠️ Útil cuando el ID no cambia durante la vida del validador.
+ *   - `getCurrentId`: Función que obtiene el ID en tiempo real.
+ *     ✅ **RECOMENDADO** cuando el ID puede cambiar (ej: signals, componentes reactivos).
+ *     Si se proporciona, tiene prioridad sobre `currentId`.
  *   - `fieldName`: Nombre del campo para construir el mensaje dinámico
  *     (si se omite, se intenta inferir del control).
  *   - `errorMessage`: Mensaje personalizado (si se omite y se resuelve nombre
  *     de campo, se usa `El valor {campo} ya existe`).
+ *   - `debug`: Si es `true`, muestra logs en consola para depuración.
  * @returns Un `AsyncValidatorFn` que emite `null` si el valor no existe o el control está vacío,
  *   o un objeto `ValidationErrors` con la clave fija `alreadyValueExists` si el valor ya existe.
  *
  * @example
  * ```ts
- * // Creación
+ * // EJEMPLO 1: Creación (ID fijo o sin ID)
  * email: ['', [], asyncExistsValidator(
  *   (value, id) => this.userService.emailExists({ value, id: Number(id) })
  * )]
  *
- * // Edición (excluyendo el registro actual por id)
+ * // EJEMPLO 2: Edición con ID fijo (cuando el ID no cambia)
  * email: ['', [], asyncExistsValidator(
  *   (value, id) => this.userService.emailExists(value, id),
- *   { currentId: this.id, fieldName: 'email' }
+ *   { currentId: this.userId, fieldName: 'email' }
+ * )]
+ *
+ * // EJEMPLO 3: Edición con ID dinámico (RECOMENDADO con signals)
+ * email: ['', [], asyncExistsValidator(
+ *   (value, id) => this.userService.emailExists(value, id),
+ *   {
+ *     getCurrentId: () => this.id(), // ✅ Obtiene el ID en tiempo real
+ *     fieldName: 'email',
+ *     debug: true // Para depuración
+ *   }
+ * )]
+ *
+ * // EJEMPLO 4: Con mensaje personalizado
+ * codigo: ['', [], asyncExistsValidator(
+ *   (value, id) => this.productService.codigoExists(value, id),
+ *   {
+ *     getCurrentId: () => this.productId(),
+ *     errorMessage: 'El código de producto ya está registrado',
+ *     fieldName: 'código de producto'
+ *   }
  * )]
  * ```
  */
 function asyncExistsValidator(serviceMethod, options = {}) {
-    const { currentId = null, fieldName, errorMessage } = options;
+    const { currentId = null, fieldName, errorMessage, debug = false, getCurrentId, } = options;
     const errorKey = 'alreadyValueExists';
     return (control) => {
-        if (!control.value)
+        if (!control.value) {
+            if (debug)
+                console.log('[AsyncExistsValidator] Control value is empty, returning null');
             return of(null);
+        }
+        // Obtener el ID: prioridad a getCurrentId, luego currentId, luego 0
+        const resolvedId = getCurrentId ? getCurrentId() : currentId;
+        const finalId = resolvedId ?? 0;
+        if (debug) {
+            console.log('[AsyncExistsValidator] Starting validation for:', {
+                value: control.value,
+                currentId: finalId,
+                fieldName,
+                errorMessage,
+                debug,
+                usingGetCurrentId: !!getCurrentId,
+            });
+        }
         return of(control.value).pipe(debounceTime$1(800), distinctUntilChanged$1(), switchMap$1((value) => {
-            const resolvedId = currentId ?? 0;
-            return serviceMethod(value, resolvedId);
+            if (debug) {
+                console.log('[AsyncExistsValidator] Calling service method with:', {
+                    value: value,
+                    resolvedId: finalId,
+                });
+            }
+            return serviceMethod(value, finalId);
         }), map((exists) => {
+            if (debug) {
+                console.log('[AsyncExistsValidator] Service response:', {
+                    exists,
+                    value: control.value,
+                });
+            }
             if (exists) {
+                if (debug)
+                    console.log('[AsyncExistsValidator] Validation failed - value already exists');
                 return {
                     [errorKey]: {
                         message: buildAlreadyExistsMessage(control, {
@@ -10427,8 +10590,15 @@ function asyncExistsValidator(serviceMethod, options = {}) {
                     },
                 };
             }
+            if (debug)
+                console.log('[AsyncExistsValidator] Validation passed - value is available');
             return null;
-        }), catchError(() => of(null)));
+        }), catchError((error) => {
+            if (debug) {
+                console.error('[AsyncExistsValidator] Error occurred:', error);
+            }
+            return of(null);
+        }));
     };
 }
 function templateVariablesValidator(allowedKeys) {