ngx-dsxlibrary 2.21.68 → 2.21.69

package/fesm2022/ngx-dsxlibrary.mjs

@@ -1,11 +1,11 @@
 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 { 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, ChangeDetectionStrategy, NgModule, Injector, ViewChild } from '@angular/core';
 import * as i1 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';
-import { CommonModule, AsyncPipe, DecimalPipe, Location } from '@angular/common';
+import { CommonModule, AsyncPipe, DecimalPipe, Location, JsonPipe } from '@angular/common';
 import * as i2$1 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
 import * as i3 from 'primeng/api';
@@ -54,14 +54,14 @@ import { CardModule } from 'primeng/card';
 import { CheckboxModule } from 'primeng/checkbox';
 import { ContextMenuModule } from 'primeng/contextmenu';
 import { DataViewModule } from 'primeng/dataview';
-import { DatePickerModule } from 'primeng/datepicker';
+import { DatePickerModule, DatePicker } from 'primeng/datepicker';
 import { DividerModule } from 'primeng/divider';
 import { DrawerModule } from 'primeng/drawer';
 import { FieldsetModule } from 'primeng/fieldset';
 import { IconFieldModule } from 'primeng/iconfield';
 import { InputIconModule } from 'primeng/inputicon';
 import { InputMaskModule } from 'primeng/inputmask';
-import { InputNumberModule } from 'primeng/inputnumber';
+import { InputNumberModule, InputNumber } from 'primeng/inputnumber';
 import { InputTextModule } from 'primeng/inputtext';
 import { KeyFilterModule } from 'primeng/keyfilter';
 import { KnobModule } from 'primeng/knob';
@@ -1079,6 +1079,7 @@ 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
 class AppMessageErrorComponent {
     elementRef;
     renderer;
@@ -1106,7 +1107,7 @@ class AppMessageErrorComponent {
             this.lastErrorsCount = nuevoControl.errors
                 ? Object.keys(nuevoControl.errors).length
                 : 0;
-            if (this.debugMode) {
+            if (this.isDevelopmentMode() && this.debugMode) {
                 console.log('[ERROR-COMPONENT] Control asignado:', {
                     status: nuevoControl.status,
                     errors: nuevoControl.errors,
@@ -1131,12 +1132,12 @@ class AppMessageErrorComponent {
         if (this.floatLabelElement) {
             this.previousInlineMarginBottom =
                 this.floatLabelElement.style.marginBottom;
-            if (this.debugMode) {
+            if (this.isDevelopmentMode() && this.debugMode) {
                 console.log('[ERROR-COMPONENT] FloatLabel encontrado, modo absoluto');
             }
         }
         else {
-            if (this.debugMode) {
+            if (this.isDevelopmentMode() && this.debugMode) {
                 console.log('[ERROR-COMPONENT] No hay FloatLabel, modo estático');
             }
         }
@@ -1145,7 +1146,8 @@ class AppMessageErrorComponent {
                 entries.forEach((entry) => {
                     const wasVisible = this.isElementAttachedAndVisible;
                     this.isElementAttachedAndVisible = entry.isIntersecting;
-                    if (this.debugMode &&
+                    if (this.isDevelopmentMode() &&
+                        this.debugMode &&
                         wasVisible !== this.isElementAttachedAndVisible) {
                         console.log('[ERROR-COMPONENT] Visibilidad:', this.isElementAttachedAndVisible);
                     }
@@ -1170,7 +1172,7 @@ class AppMessageErrorComponent {
             this.control.touched !== this.lastControlTouched ||
             this.control.dirty !== this.lastControlDirty ||
             currentErrorsCount !== this.lastErrorsCount) {
-            if (this.debugMode) {
+            if (this.isDevelopmentMode() && this.debugMode) {
                 console.log('[ERROR-COMPONENT] Cambio detectado:', {
                     invalid: this.control.invalid,
                     touched: this.control.touched,
@@ -1241,18 +1243,140 @@ class AppMessageErrorComponent {
         }
         return this.defaultFloatLabelErrorSpace;
     }
-    formatNumber(value) {
+    /**
+     * Obtiene el mensaje de error de un error específico del control
+     * @param errorKey - La clave del error
+     * @returns El mensaje de error o un string vacío
+     */
+    getErrorMessage(errorKey) {
+        if (!this.control || !this.control.errors) {
+            return '';
+        }
+        const error = this.control.errors[errorKey];
+        if (!error) {
+            return '';
+        }
+        if (typeof error === 'object' && error !== null && 'message' in error) {
+            return error.message;
+        }
+        return '';
+    }
+    /**
+     * Obtiene el valor de un error específico del control
+     * @param errorKey - La clave del error
+     * @param propertyKey - La propiedad del error a obtener
+     * @returns El valor de la propiedad o undefined
+     */
+    getErrorValue(errorKey, propertyKey) {
+        if (!this.control || !this.control.errors) {
+            return undefined;
+        }
+        const error = this.control.errors[errorKey];
+        if (!error || typeof error !== 'object') {
+            return undefined;
+        }
+        return error[propertyKey];
+    }
+    /**
+     * Obtiene los detalles de un error de template
+     * @param errorKey - La clave del error (invalidTemplateVariables o invalidTemplateStructure)
+     * @returns El array de detalles o un array vacío
+     */
+    getTemplateErrorDetails(errorKey) {
+        if (!this.control || !this.control.errors) {
+            return [];
+        }
+        const error = this.control.errors[errorKey];
+        if (!error || typeof error !== 'object' || !('details' in error)) {
+            return [];
+        }
+        const details = error.details;
+        return Array.isArray(details) ? details : [];
+    }
+    /**
+     * Obtiene el primer detalle de un error de template
+     * @param errorKey - La clave del error
+     * @returns El primer detalle o string vacío
+     */
+    getFirstTemplateErrorDetail(errorKey) {
+        const details = this.getTemplateErrorDetails(errorKey);
+        return details.length > 0 ? details[0] : '';
+    }
+    /**
+     * Obtiene el mensaje completo para similitud detectada
+     * @returns El mensaje formateado
+     */
+    getSimilitudMessage() {
+        if (!this.control || !this.control.errors) {
+            return '';
+        }
+        const error = this.control.errors['similitudDetectada'];
+        if (!error || typeof error !== 'object' || !('sugerencia' in error)) {
+            return '';
+        }
+        return `Ya existe un registro muy similar en el sistema: "${error.sugerencia}".`;
+    }
+    /**
+     * Obtiene el mensaje de error de un error específico del formulario
+     * @param errorKey - La clave del error
+     * @returns El mensaje de error o un mensaje por defecto
+     */
+    getFormError(errorKey) {
+        if (!this.form) {
+            return '';
+        }
+        const error = this.form.getError(errorKey);
+        if (error && typeof error === 'object' && 'message' in error) {
+            return error.message;
+        }
+        // Mensaje por defecto según el tipo de error
+        switch (errorKey) {
+            case 'atLeastOneRequired':
+                return 'Al menos un campo es requerido';
+            default:
+                return 'Error en el formulario';
+        }
+    }
+    /**
+     * Formatea un número con separadores de miles (coma) y decimales (punto)
+     * @param value - El valor a formatear (puede ser número o string)
+     * @param showDecimals - Si se deben mostrar siempre los decimales
+     * @returns String formateado con separadores de miles
+     */
+    formatNumber(value, showDecimals = false) {
+        // Si es null o undefined, retornar string vacío
+        if (value === null || value === undefined) {
+            return '';
+        }
+        // Convertir a número
         const num = Number(value);
-        if (isNaN(num))
-            return String(value ?? '');
-        return num % 1 === 0 ? String(num) : parseFloat(num.toFixed(2)).toString();
+        // Si no es un número válido, retornar el valor original como string
+        if (isNaN(num)) {
+            return String(value);
+        }
+        // Si es un número entero y no se piden decimales, mostrar solo enteros
+        if (num % 1 === 0 && !showDecimals) {
+            // Formatear con separadores de miles usando coma
+            return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        }
+        // Para números con decimales, usar formato personalizado
+        const parts = num.toFixed(2).split('.');
+        const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        const decimalPart = parts[1];
+        return `${integerPart}.${decimalPart}`;
+    }
+    /**
+     * Verifica si estamos en modo desarrollo
+     */
+    isDevelopmentMode() {
+        return typeof window !== 'undefined' && window.ngDevMode !== false;
     }
     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: "<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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AppMessageErrorComponent, isStandalone: true, selector: "dsx-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      <!-- Usamos control.errors en lugar de control?.errors -->\r\n      @if (control && control.errors && control.errors[\"required\"]) {\r\n        El campo <strong>es requerido.</strong>\r\n      } @else if (control && control.errors && control.errors[\"invalidNIT\"]) {\r\n        <strong>{{ getErrorMessage(\"invalidNIT\") }}</strong>\r\n      } @else if (control && control.errors && control.errors[\"invalidCUI\"]) {\r\n        <strong>{{ getErrorMessage(\"invalidCUI\") }}</strong>\r\n      } @else if (\r\n        control && control.errors && control.errors[\"invalidDateRange\"]\r\n      ) {\r\n        <strong>{{ getErrorMessage(\"invalidDateRange\") }}</strong>\r\n      } @else if (control && control.errors && control.errors[\"dateNotRange\"]) {\r\n        <strong>{{ getErrorMessage(\"dateNotRange\") }}</strong>\r\n      } @else if (control && control.errors && control.errors[\"invalidDate\"]) {\r\n        <strong>{{ getErrorMessage(\"invalidDate\") }}</strong>\r\n      } @else if (control && control.errors && control.errors[\"minimumAge\"]) {\r\n        <strong>{{ getErrorMessage(\"minimumAge\") }}</strong>\r\n      } @else if (control && control.errors && control.errors[\"minlength\"]) {\r\n        Debe tener al menos\r\n        <strong>{{\r\n          formatNumber(getErrorValue(\"minlength\", \"requiredLength\"), false)\r\n        }}</strong>\r\n        caracteres.\r\n      } @else if (control && control.errors && control.errors[\"maxlength\"]) {\r\n        Debe tener como m\u00E1ximo\r\n        <strong>{{\r\n          formatNumber(getErrorValue(\"maxlength\", \"requiredLength\"), false)\r\n        }}</strong>\r\n        caracteres.\r\n      } @else if (control && control.errors && control.errors[\"min\"]) {\r\n        El valor m\u00EDnimo permitido es\r\n        <strong>{{ formatNumber(getErrorValue(\"min\", \"min\"), true) }}</strong>\r\n      } @else if (control && control.errors && control.errors[\"max\"]) {\r\n        El valor m\u00E1ximo permitido es\r\n        <strong>{{ formatNumber(getErrorValue(\"max\", \"max\"), true) }}</strong>\r\n      } @else if (control && control.errors && control.errors[\"email\"]) {\r\n        Debe ser una direcci\u00F3n de correo v\u00E1lida.\r\n      } @else if (control && control.errors && control.errors[\"pattern\"]) {\r\n        El campo no tiene el formato requerido.\r\n      } @else if (\r\n        control && control.errors && control.errors[\"alreadyValueExists\"]\r\n      ) {\r\n        <strong>{{ getErrorMessage(\"alreadyValueExists\") }}</strong>\r\n      } @else if (\r\n        control && control.errors && control.errors[\"invalidTemplateVariables\"]\r\n      ) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>{{ getErrorMessage(\"invalidTemplateVariables\") }}</strong>\r\n          @if (getTemplateErrorDetails(\"invalidTemplateVariables\").length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ getFirstTemplateErrorDetail(\"invalidTemplateVariables\") }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else if (\r\n        control && control.errors && control.errors[\"invalidTemplateStructure\"]\r\n      ) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>{{ getErrorMessage(\"invalidTemplateStructure\") }}</strong>\r\n          @if (getTemplateErrorDetails(\"invalidTemplateStructure\").length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ getFirstTemplateErrorDetail(\"invalidTemplateStructure\") }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else if (\r\n        control && control.errors && control.errors[\"similitudDetectada\"]\r\n      ) {\r\n        <strong>{{ getSimilitudMessage() }}</strong>\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 && form.invalid && form.dirty) {\r\n  <div class=\"mt-2 mb-2\">\r\n    @if (form.errors && form.errors[\"atLeastOneRequired\"]) {\r\n      <p-tag severity=\"danger\" [rounded]=\"true\">\r\n        {{ getFormError(\"atLeastOneRequired\") }}\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: "<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"] }]
+            args: [{ selector: 'dsx-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      <!-- Usamos control.errors en lugar de control?.errors -->\r\n      @if (control && control.errors && control.errors[\"required\"]) {\r\n        El campo <strong>es requerido.</strong>\r\n      } @else if (control && control.errors && control.errors[\"invalidNIT\"]) {\r\n        <strong>{{ getErrorMessage(\"invalidNIT\") }}</strong>\r\n      } @else if (control && control.errors && control.errors[\"invalidCUI\"]) {\r\n        <strong>{{ getErrorMessage(\"invalidCUI\") }}</strong>\r\n      } @else if (\r\n        control && control.errors && control.errors[\"invalidDateRange\"]\r\n      ) {\r\n        <strong>{{ getErrorMessage(\"invalidDateRange\") }}</strong>\r\n      } @else if (control && control.errors && control.errors[\"dateNotRange\"]) {\r\n        <strong>{{ getErrorMessage(\"dateNotRange\") }}</strong>\r\n      } @else if (control && control.errors && control.errors[\"invalidDate\"]) {\r\n        <strong>{{ getErrorMessage(\"invalidDate\") }}</strong>\r\n      } @else if (control && control.errors && control.errors[\"minimumAge\"]) {\r\n        <strong>{{ getErrorMessage(\"minimumAge\") }}</strong>\r\n      } @else if (control && control.errors && control.errors[\"minlength\"]) {\r\n        Debe tener al menos\r\n        <strong>{{\r\n          formatNumber(getErrorValue(\"minlength\", \"requiredLength\"), false)\r\n        }}</strong>\r\n        caracteres.\r\n      } @else if (control && control.errors && control.errors[\"maxlength\"]) {\r\n        Debe tener como m\u00E1ximo\r\n        <strong>{{\r\n          formatNumber(getErrorValue(\"maxlength\", \"requiredLength\"), false)\r\n        }}</strong>\r\n        caracteres.\r\n      } @else if (control && control.errors && control.errors[\"min\"]) {\r\n        El valor m\u00EDnimo permitido es\r\n        <strong>{{ formatNumber(getErrorValue(\"min\", \"min\"), true) }}</strong>\r\n      } @else if (control && control.errors && control.errors[\"max\"]) {\r\n        El valor m\u00E1ximo permitido es\r\n        <strong>{{ formatNumber(getErrorValue(\"max\", \"max\"), true) }}</strong>\r\n      } @else if (control && control.errors && control.errors[\"email\"]) {\r\n        Debe ser una direcci\u00F3n de correo v\u00E1lida.\r\n      } @else if (control && control.errors && control.errors[\"pattern\"]) {\r\n        El campo no tiene el formato requerido.\r\n      } @else if (\r\n        control && control.errors && control.errors[\"alreadyValueExists\"]\r\n      ) {\r\n        <strong>{{ getErrorMessage(\"alreadyValueExists\") }}</strong>\r\n      } @else if (\r\n        control && control.errors && control.errors[\"invalidTemplateVariables\"]\r\n      ) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>{{ getErrorMessage(\"invalidTemplateVariables\") }}</strong>\r\n          @if (getTemplateErrorDetails(\"invalidTemplateVariables\").length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ getFirstTemplateErrorDetail(\"invalidTemplateVariables\") }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else if (\r\n        control && control.errors && control.errors[\"invalidTemplateStructure\"]\r\n      ) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>{{ getErrorMessage(\"invalidTemplateStructure\") }}</strong>\r\n          @if (getTemplateErrorDetails(\"invalidTemplateStructure\").length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ getFirstTemplateErrorDetail(\"invalidTemplateStructure\") }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else if (\r\n        control && control.errors && control.errors[\"similitudDetectada\"]\r\n      ) {\r\n        <strong>{{ getSimilitudMessage() }}</strong>\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 && form.invalid && form.dirty) {\r\n  <div class=\"mt-2 mb-2\">\r\n    @if (form.errors && form.errors[\"atLeastOneRequired\"]) {\r\n      <p-tag severity=\"danger\" [rounded]=\"true\">\r\n        {{ getFormError(\"atLeastOneRequired\") }}\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: [{
@@ -4207,6 +4331,8 @@ class DsxButtonComponent {
     renderCount = 0;
     _paramService = inject((ParameterValuesService));
     _router = inject(Router);
+    // Agrega un input para el tamaño
+    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _environment = inject(ENVIRONMENT, {
         optional: true,
     });
@@ -4392,8 +4518,18 @@ class DsxButtonComponent {
     get buttonLabel() {
         return this.iconOnly() ? undefined : this.label;
     }
+    // Y modifica el getter buttonSize
     get buttonSize() {
-        return this.isCompactIconButton ? 'small' : undefined;
+        // Si el usuario especificó un tamaño, úsalo
+        if (this.size()) {
+            return this.size();
+        }
+        // Si es compacto, siempre small
+        if (this.isCompactIconButton) {
+            return 'small';
+        }
+        // Por defecto, small para todos los botones
+        return 'small';
     }
     get buttonStyleClass() {
         return this.isCompactIconButton ? 'dsx-button-compact' : undefined;
@@ -4635,12 +4771,12 @@ class DsxButtonComponent {
         console.timeEnd(`[dsx-button:${this.type()}] ${label}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DsxButtonComponent, isStandalone: true, selector: "dsx-button", inputs: { debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerPath: { classPropertyName: "routerPath", publicName: "routerPath", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyWidth: { classPropertyName: "iconOnlyWidth", publicName: "iconOnlyWidth", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, parameterName: { classPropertyName: "parameterName", publicName: "parameterName", isSignal: true, isRequired: false, transformFunction: null }, parameterExpectedValue: { classPropertyName: "parameterExpectedValue", publicName: "parameterExpectedValue", isSignal: true, isRequired: false, transformFunction: null }, parameterIndex: { classPropertyName: "parameterIndex", publicName: "parameterIndex", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, requireIdInput: { classPropertyName: "requireIdInput", publicName: "requireIdInput", isSignal: true, isRequired: false, transformFunction: null }, requiresIdGreaterThanZero: { classPropertyName: "requiresIdGreaterThanZero", publicName: "requiresIdGreaterThanZero", isSignal: true, isRequired: false, transformFunction: null }, labelOverride: { classPropertyName: "labelOverride", publicName: "labelOverride", isSignal: true, isRequired: false, transformFunction: null }, tooltipOverride: { classPropertyName: "tooltipOverride", publicName: "tooltipOverride", isSignal: true, isRequired: false, transformFunction: null }, iconOverride: { classPropertyName: "iconOverride", publicName: "iconOverride", isSignal: true, isRequired: false, transformFunction: null }, primeIconOverride: { classPropertyName: "primeIconOverride", publicName: "primeIconOverride", isSignal: true, isRequired: false, transformFunction: null }, colorOverride: { classPropertyName: "colorOverride", publicName: "colorOverride", isSignal: true, isRequired: false, transformFunction: null }, outlinedOverride: { classPropertyName: "outlinedOverride", publicName: "outlinedOverride", isSignal: true, isRequired: false, transformFunction: null }, showValidateButtonOverride: { classPropertyName: "showValidateButtonOverride", publicName: "showValidateButtonOverride", isSignal: true, isRequired: false, transformFunction: null }, showRestoreButtonOverride: { classPropertyName: "showRestoreButtonOverride", publicName: "showRestoreButtonOverride", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { properties: { "class.dsx-button-compact-host": "this.compactHostClass" } }, ngImport: i0, template: "<!--Bot\u00F3n con las configuraciones din\u00E1micas para CRUD -->\r\n@if (visible()) {\r\n<p-button\r\n  [label]=\"buttonLabel\"\r\n  [style]=\"buttonStyleComputed()\"\r\n  [styleClass]=\"buttonStyleClass\"\r\n  [pTooltip]=\"tooltip()\"\r\n  [tooltipDisabled]=\"disabled()\"\r\n  tooltipPosition=\"top\"\r\n  [rounded]=\"rounded()\"\r\n  [text]=\"isCompactIconButton\"\r\n  [size]=\"buttonSize\"\r\n  severity=\"secondary\"\r\n  [disabled]=\"disabled()\"\r\n  [icon]=\"iconOnly() ? primeIcon : undefined\"\r\n  (click)=\"onButtonClick()\"\r\n>\r\n  @if (!iconOnly()) {\r\n  <span class=\"material-symbols-outlined dsx-button-icon-small\"\r\n    >{{ materialIcon }}</span\r\n  >\r\n  }\r\n</p-button>\r\n}\r\n", styles: [".dsx-button-icon-small{font-size:1.25rem;vertical-align:middle}:host{display:inline-flex;margin-bottom:.25rem}:host.dsx-button-compact-host{margin-bottom:0}:host ::ng-deep .p-button .p-button-label{font-family:Montserrat,Roboto,sans-serif;font-weight:500;letter-spacing:.01em}:host ::ng-deep .p-button.dsx-button-compact{min-height:2rem;padding-block:.2rem}:host ::ng-deep .p-button .material-symbols-outlined.p-button-icon{line-height:1;vertical-align:middle}:host ::ng-deep .p-button.dsx-button-compact .p-button-icon{margin:0;font-size:1.2rem;line-height:1}:host ::ng-deep .p-button.dsx-button-compact .material-symbols-outlined.p-button-icon{font-variation-settings:\"FILL\" 1,\"wght\" 500,\"GRAD\" 0,\"opsz\" 24}:host ::ng-deep .p-button:disabled,:host ::ng-deep .p-button.p-disabled{cursor:not-allowed!important;opacity:.45!important;filter:grayscale(.2) saturate(.75)}:host ::ng-deep .p-button:disabled *,:host ::ng-deep .p-button.p-disabled *{cursor:not-allowed!important}.p-button.dsx-button-outlined-neutral,.p-button.dsx-button-outlined-info{background:#f5f7fa!important;border:1.5px solid #0066cc!important;color:#06c!important}.p-button.dsx-button-outlined-neutral:disabled,.p-button.dsx-button-outlined-info:disabled{background:#f5f7fa!important;border:1.5px solid #b0bec5!important;color:#b0bec5!important}\n"], dependencies: [{ 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"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DsxButtonComponent, isStandalone: true, selector: "dsx-button", inputs: { debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerPath: { classPropertyName: "routerPath", publicName: "routerPath", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyWidth: { classPropertyName: "iconOnlyWidth", publicName: "iconOnlyWidth", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, parameterName: { classPropertyName: "parameterName", publicName: "parameterName", isSignal: true, isRequired: false, transformFunction: null }, parameterExpectedValue: { classPropertyName: "parameterExpectedValue", publicName: "parameterExpectedValue", isSignal: true, isRequired: false, transformFunction: null }, parameterIndex: { classPropertyName: "parameterIndex", publicName: "parameterIndex", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, requireIdInput: { classPropertyName: "requireIdInput", publicName: "requireIdInput", isSignal: true, isRequired: false, transformFunction: null }, requiresIdGreaterThanZero: { classPropertyName: "requiresIdGreaterThanZero", publicName: "requiresIdGreaterThanZero", isSignal: true, isRequired: false, transformFunction: null }, labelOverride: { classPropertyName: "labelOverride", publicName: "labelOverride", isSignal: true, isRequired: false, transformFunction: null }, tooltipOverride: { classPropertyName: "tooltipOverride", publicName: "tooltipOverride", isSignal: true, isRequired: false, transformFunction: null }, iconOverride: { classPropertyName: "iconOverride", publicName: "iconOverride", isSignal: true, isRequired: false, transformFunction: null }, primeIconOverride: { classPropertyName: "primeIconOverride", publicName: "primeIconOverride", isSignal: true, isRequired: false, transformFunction: null }, colorOverride: { classPropertyName: "colorOverride", publicName: "colorOverride", isSignal: true, isRequired: false, transformFunction: null }, outlinedOverride: { classPropertyName: "outlinedOverride", publicName: "outlinedOverride", isSignal: true, isRequired: false, transformFunction: null }, showValidateButtonOverride: { classPropertyName: "showValidateButtonOverride", publicName: "showValidateButtonOverride", isSignal: true, isRequired: false, transformFunction: null }, showRestoreButtonOverride: { classPropertyName: "showRestoreButtonOverride", publicName: "showRestoreButtonOverride", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { properties: { "class.dsx-button-compact-host": "this.compactHostClass" } }, ngImport: i0, template: "<!--Bot\u00F3n con las configuraciones din\u00E1micas para CRUD -->\r\n@if (visible()) {\r\n<p-button\r\n  [label]=\"buttonLabel\"\r\n  [style]=\"buttonStyleComputed()\"\r\n  [styleClass]=\"buttonStyleClass\"\r\n  [pTooltip]=\"tooltip()\"\r\n  [tooltipDisabled]=\"disabled()\"\r\n  tooltipPosition=\"top\"\r\n  [rounded]=\"rounded()\"\r\n  [text]=\"isCompactIconButton\"\r\n  [size]=\"buttonSize\"\r\n  severity=\"secondary\"\r\n  [disabled]=\"disabled()\"\r\n  [icon]=\"iconOnly() ? primeIcon : undefined\"\r\n  (click)=\"onButtonClick()\"\r\n>\r\n  @if (!iconOnly()) {\r\n  <span class=\"material-symbols-outlined dsx-button-icon-small\"\r\n    >{{ materialIcon }}</span\r\n  >\r\n  }\r\n</p-button>\r\n}\r\n", styles: [".dsx-button-icon-small{font-size:1.25rem;vertical-align:middle}:host{display:inline-flex;margin-bottom:.25rem}:host.dsx-button-compact-host{margin-bottom:0}:host ::ng-deep .p-button.dsx-button-compact{min-height:2rem;padding-block:.2rem}:host ::ng-deep .p-button .material-symbols-outlined.p-button-icon{line-height:1;vertical-align:middle}:host ::ng-deep .p-button.dsx-button-compact .p-button-icon{margin:0;font-size:1.2rem;line-height:1}:host ::ng-deep .p-button.dsx-button-compact .material-symbols-outlined.p-button-icon{font-variation-settings:\"FILL\" 1,\"wght\" 500,\"GRAD\" 0,\"opsz\" 24}:host ::ng-deep .p-button:disabled,:host ::ng-deep .p-button.p-disabled{cursor:not-allowed!important;opacity:.45!important;filter:grayscale(.2) saturate(.75)}:host ::ng-deep .p-button:disabled *,:host ::ng-deep .p-button.p-disabled *{cursor:not-allowed!important}.p-button.dsx-button-outlined-neutral,.p-button.dsx-button-outlined-info{background:#f5f7fa!important;border:1.5px solid #0066cc!important;color:#06c!important}.p-button.dsx-button-outlined-neutral:disabled,.p-button.dsx-button-outlined-info:disabled{background:#f5f7fa!important;border:1.5px solid #b0bec5!important;color:#b0bec5!important}\n"], dependencies: [{ 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"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dsx-button', imports: [Button, TooltipModule], template: "<!--Bot\u00F3n con las configuraciones din\u00E1micas para CRUD -->\r\n@if (visible()) {\r\n<p-button\r\n  [label]=\"buttonLabel\"\r\n  [style]=\"buttonStyleComputed()\"\r\n  [styleClass]=\"buttonStyleClass\"\r\n  [pTooltip]=\"tooltip()\"\r\n  [tooltipDisabled]=\"disabled()\"\r\n  tooltipPosition=\"top\"\r\n  [rounded]=\"rounded()\"\r\n  [text]=\"isCompactIconButton\"\r\n  [size]=\"buttonSize\"\r\n  severity=\"secondary\"\r\n  [disabled]=\"disabled()\"\r\n  [icon]=\"iconOnly() ? primeIcon : undefined\"\r\n  (click)=\"onButtonClick()\"\r\n>\r\n  @if (!iconOnly()) {\r\n  <span class=\"material-symbols-outlined dsx-button-icon-small\"\r\n    >{{ materialIcon }}</span\r\n  >\r\n  }\r\n</p-button>\r\n}\r\n", styles: [".dsx-button-icon-small{font-size:1.25rem;vertical-align:middle}:host{display:inline-flex;margin-bottom:.25rem}:host.dsx-button-compact-host{margin-bottom:0}:host ::ng-deep .p-button .p-button-label{font-family:Montserrat,Roboto,sans-serif;font-weight:500;letter-spacing:.01em}:host ::ng-deep .p-button.dsx-button-compact{min-height:2rem;padding-block:.2rem}:host ::ng-deep .p-button .material-symbols-outlined.p-button-icon{line-height:1;vertical-align:middle}:host ::ng-deep .p-button.dsx-button-compact .p-button-icon{margin:0;font-size:1.2rem;line-height:1}:host ::ng-deep .p-button.dsx-button-compact .material-symbols-outlined.p-button-icon{font-variation-settings:\"FILL\" 1,\"wght\" 500,\"GRAD\" 0,\"opsz\" 24}:host ::ng-deep .p-button:disabled,:host ::ng-deep .p-button.p-disabled{cursor:not-allowed!important;opacity:.45!important;filter:grayscale(.2) saturate(.75)}:host ::ng-deep .p-button:disabled *,:host ::ng-deep .p-button.p-disabled *{cursor:not-allowed!important}.p-button.dsx-button-outlined-neutral,.p-button.dsx-button-outlined-info{background:#f5f7fa!important;border:1.5px solid #0066cc!important;color:#06c!important}.p-button.dsx-button-outlined-neutral:disabled,.p-button.dsx-button-outlined-info:disabled{background:#f5f7fa!important;border:1.5px solid #b0bec5!important;color:#b0bec5!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], compactHostClass: [{
+            args: [{ selector: 'dsx-button', imports: [Button, TooltipModule], template: "<!--Bot\u00F3n con las configuraciones din\u00E1micas para CRUD -->\r\n@if (visible()) {\r\n<p-button\r\n  [label]=\"buttonLabel\"\r\n  [style]=\"buttonStyleComputed()\"\r\n  [styleClass]=\"buttonStyleClass\"\r\n  [pTooltip]=\"tooltip()\"\r\n  [tooltipDisabled]=\"disabled()\"\r\n  tooltipPosition=\"top\"\r\n  [rounded]=\"rounded()\"\r\n  [text]=\"isCompactIconButton\"\r\n  [size]=\"buttonSize\"\r\n  severity=\"secondary\"\r\n  [disabled]=\"disabled()\"\r\n  [icon]=\"iconOnly() ? primeIcon : undefined\"\r\n  (click)=\"onButtonClick()\"\r\n>\r\n  @if (!iconOnly()) {\r\n  <span class=\"material-symbols-outlined dsx-button-icon-small\"\r\n    >{{ materialIcon }}</span\r\n  >\r\n  }\r\n</p-button>\r\n}\r\n", styles: [".dsx-button-icon-small{font-size:1.25rem;vertical-align:middle}:host{display:inline-flex;margin-bottom:.25rem}:host.dsx-button-compact-host{margin-bottom:0}:host ::ng-deep .p-button.dsx-button-compact{min-height:2rem;padding-block:.2rem}:host ::ng-deep .p-button .material-symbols-outlined.p-button-icon{line-height:1;vertical-align:middle}:host ::ng-deep .p-button.dsx-button-compact .p-button-icon{margin:0;font-size:1.2rem;line-height:1}:host ::ng-deep .p-button.dsx-button-compact .material-symbols-outlined.p-button-icon{font-variation-settings:\"FILL\" 1,\"wght\" 500,\"GRAD\" 0,\"opsz\" 24}:host ::ng-deep .p-button:disabled,:host ::ng-deep .p-button.p-disabled{cursor:not-allowed!important;opacity:.45!important;filter:grayscale(.2) saturate(.75)}:host ::ng-deep .p-button:disabled *,:host ::ng-deep .p-button.p-disabled *{cursor:not-allowed!important}.p-button.dsx-button-outlined-neutral,.p-button.dsx-button-outlined-info{background:#f5f7fa!important;border:1.5px solid #0066cc!important;color:#06c!important}.p-button.dsx-button-outlined-neutral:disabled,.p-button.dsx-button-outlined-info:disabled{background:#f5f7fa!important;border:1.5px solid #b0bec5!important;color:#b0bec5!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], compactHostClass: [{
                 type: HostBinding,
                 args: ['class.dsx-button-compact-host']
             }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerPath", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], iconOnlyWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnlyWidth", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], parameterName: [{ type: i0.Input, args: [{ isSignal: true, alias: "parameterName", required: false }] }], parameterExpectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "parameterExpectedValue", required: false }] }], parameterIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "parameterIndex", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], requireIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireIdInput", required: false }] }], requiresIdGreaterThanZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiresIdGreaterThanZero", required: false }] }], labelOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelOverride", required: false }] }], tooltipOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOverride", required: false }] }], iconOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOverride", required: false }] }], primeIconOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "primeIconOverride", required: false }] }], colorOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorOverride", required: false }] }], outlinedOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlinedOverride", required: false }] }], showValidateButtonOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValidateButtonOverride", required: false }] }], showRestoreButtonOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRestoreButtonOverride", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
@@ -4723,7 +4859,7 @@ const ACTION_CONFIG = {
     details: {
         label: 'Detalles',
         icon: 'list',
-        primeIcon: 'pi pi-list',
+        primeIcon: 'fa-solid fa-list-ol',
         colorToken: 'details',
         tooltip: 'Detalle de registro',
     },
@@ -5334,11 +5470,11 @@ class JsonValuesDebujComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonValuesDebujComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JsonValuesDebujComponent, isStandalone: true, selector: "app-json-values-debuj", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form() && shouldShowVisual) {\r\n  <div class=\"custom-container\">\r\n    <pre class=\"custom-pre\" [innerHTML]=\"debugValue() | jsonHighlight\"></pre>\r\n  </div>\r\n}\r\n", styles: [".custom-container{width:100%;overflow:auto;max-height:700px;background:#1e1e1e;border:1px solid #333;border-radius:8px;box-shadow:0 4px 12px #0000004d;padding:1.25rem;margin-bottom:1.25rem}.custom-pre{margin:0;white-space:pre-wrap;word-break:break-word;word-wrap:break-word;font-family:Segoe UI,Fira Code,JetBrains Mono,Consolas,Monaco,Courier New,monospace;font-size:15px;line-height:1.65;color:#d4d4d4;font-weight:400}.json-key{color:#9cdcfe;font-weight:600;font-size:15px}.json-string{color:#ce9178;font-size:15px}.json-number{color:#b5cea8;font-weight:600;font-size:15px}.json-boolean{color:#569cd6;font-weight:700;font-size:15px}.json-null{color:gray;font-style:italic;font-size:15px}.json-bracket{color:gold;font-weight:700;font-size:16px}.json-colon{color:#d4d4d4;font-weight:500}.json-comma{color:gray;font-size:14px}.json-date-part{color:#4fc1ff;font-weight:600;font-size:15px}.json-date-sep{color:gray}.json-date-time{color:#c586c0;font-size:15px}.custom-container::-webkit-scrollbar{width:12px;height:12px}.custom-container::-webkit-scrollbar-track{background:#252526;border-radius:6px}.custom-container::-webkit-scrollbar-thumb{background:#555;border-radius:6px;transition:background .2s ease}.custom-container::-webkit-scrollbar-thumb:hover{background:#777}.custom-container::-webkit-scrollbar-corner{background:#1e1e1e}.custom-container{font-smooth:antialiased;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.custom-pre:hover{background:#252526;transition:background .2s ease;cursor:text}.json-null,.json-undefined{color:#f48771;font-style:italic;opacity:.8}.json-empty{color:gray;font-style:italic}.json-comma+br{margin-bottom:2px}\n"], dependencies: [{ kind: "pipe", type: JsonHighlightPipe, name: "jsonHighlight" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JsonValuesDebujComponent, isStandalone: true, selector: "app-json-values-debuj", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form() && shouldShowVisual) {\r\n  <div class=\"custom-container\">\r\n    <pre class=\"custom-pre\" [innerHTML]=\"debugValue() | jsonHighlight\"></pre>\r\n  </div>\r\n}\r\n", styles: [".custom-container{width:100%;overflow:auto;max-height:700px;background:#1e1e1e;border:1px solid #333;border-radius:8px;box-shadow:0 4px 12px #0000004d;padding:1.25rem;margin-bottom:1.25rem}.custom-pre{margin:0;white-space:pre-wrap;word-break:break-word;word-wrap:break-word;font-family:Segoe UI,Fira Code,JetBrains Mono,Consolas,Monaco,Courier New,monospace;font-size:15px;line-height:1.65;color:#d4d4d4;font-weight:400}.json-key{color:#9cdcfe;font-weight:600;font-size:15px}.json-string{color:#ce9178;font-size:15px}.json-number{color:#b5cea8;font-weight:600;font-size:15px}.json-boolean{color:#569cd6;font-weight:700;font-size:15px}.json-null{color:gray;font-style:italic;font-size:15px}.json-bracket{color:gold;font-weight:700;font-size:16px}.json-colon{color:#d4d4d4;font-weight:500}.json-comma{color:gray;font-size:14px}.json-date-part{color:#4fc1ff;font-weight:600;font-size:15px}.json-date-sep{color:gray}.json-date-time{color:#c586c0;font-size:15px}.custom-container::-webkit-scrollbar{width:12px;height:12px}.custom-container::-webkit-scrollbar-track{background:#252526;border-radius:6px}.custom-container::-webkit-scrollbar-thumb{background:#555;border-radius:6px;transition:background .2s ease}.custom-container::-webkit-scrollbar-thumb:hover{background:#777}.custom-container::-webkit-scrollbar-corner{background:#1e1e1e}.custom-container{font-smooth:antialiased;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.json-null,.json-undefined{color:#f48771;font-style:italic;opacity:.8}.json-empty{color:gray;font-style:italic}.json-comma+br{margin-bottom:2px}\n"], dependencies: [{ kind: "pipe", type: JsonHighlightPipe, name: "jsonHighlight" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonValuesDebujComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-json-values-debuj', standalone: true, imports: [JsonHighlightPipe], encapsulation: ViewEncapsulation.None, template: "@if (form() && shouldShowVisual) {\r\n  <div class=\"custom-container\">\r\n    <pre class=\"custom-pre\" [innerHTML]=\"debugValue() | jsonHighlight\"></pre>\r\n  </div>\r\n}\r\n", styles: [".custom-container{width:100%;overflow:auto;max-height:700px;background:#1e1e1e;border:1px solid #333;border-radius:8px;box-shadow:0 4px 12px #0000004d;padding:1.25rem;margin-bottom:1.25rem}.custom-pre{margin:0;white-space:pre-wrap;word-break:break-word;word-wrap:break-word;font-family:Segoe UI,Fira Code,JetBrains Mono,Consolas,Monaco,Courier New,monospace;font-size:15px;line-height:1.65;color:#d4d4d4;font-weight:400}.json-key{color:#9cdcfe;font-weight:600;font-size:15px}.json-string{color:#ce9178;font-size:15px}.json-number{color:#b5cea8;font-weight:600;font-size:15px}.json-boolean{color:#569cd6;font-weight:700;font-size:15px}.json-null{color:gray;font-style:italic;font-size:15px}.json-bracket{color:gold;font-weight:700;font-size:16px}.json-colon{color:#d4d4d4;font-weight:500}.json-comma{color:gray;font-size:14px}.json-date-part{color:#4fc1ff;font-weight:600;font-size:15px}.json-date-sep{color:gray}.json-date-time{color:#c586c0;font-size:15px}.custom-container::-webkit-scrollbar{width:12px;height:12px}.custom-container::-webkit-scrollbar-track{background:#252526;border-radius:6px}.custom-container::-webkit-scrollbar-thumb{background:#555;border-radius:6px;transition:background .2s ease}.custom-container::-webkit-scrollbar-thumb:hover{background:#777}.custom-container::-webkit-scrollbar-corner{background:#1e1e1e}.custom-container{font-smooth:antialiased;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.custom-pre:hover{background:#252526;transition:background .2s ease;cursor:text}.json-null,.json-undefined{color:#f48771;font-style:italic;opacity:.8}.json-empty{color:gray;font-style:italic}.json-comma+br{margin-bottom:2px}\n"] }]
+            args: [{ selector: 'app-json-values-debuj', standalone: true, imports: [JsonHighlightPipe], encapsulation: ViewEncapsulation.None, template: "@if (form() && shouldShowVisual) {\r\n  <div class=\"custom-container\">\r\n    <pre class=\"custom-pre\" [innerHTML]=\"debugValue() | jsonHighlight\"></pre>\r\n  </div>\r\n}\r\n", styles: [".custom-container{width:100%;overflow:auto;max-height:700px;background:#1e1e1e;border:1px solid #333;border-radius:8px;box-shadow:0 4px 12px #0000004d;padding:1.25rem;margin-bottom:1.25rem}.custom-pre{margin:0;white-space:pre-wrap;word-break:break-word;word-wrap:break-word;font-family:Segoe UI,Fira Code,JetBrains Mono,Consolas,Monaco,Courier New,monospace;font-size:15px;line-height:1.65;color:#d4d4d4;font-weight:400}.json-key{color:#9cdcfe;font-weight:600;font-size:15px}.json-string{color:#ce9178;font-size:15px}.json-number{color:#b5cea8;font-weight:600;font-size:15px}.json-boolean{color:#569cd6;font-weight:700;font-size:15px}.json-null{color:gray;font-style:italic;font-size:15px}.json-bracket{color:gold;font-weight:700;font-size:16px}.json-colon{color:#d4d4d4;font-weight:500}.json-comma{color:gray;font-size:14px}.json-date-part{color:#4fc1ff;font-weight:600;font-size:15px}.json-date-sep{color:gray}.json-date-time{color:#c586c0;font-size:15px}.custom-container::-webkit-scrollbar{width:12px;height:12px}.custom-container::-webkit-scrollbar-track{background:#252526;border-radius:6px}.custom-container::-webkit-scrollbar-thumb{background:#555;border-radius:6px;transition:background .2s ease}.custom-container::-webkit-scrollbar-thumb:hover{background:#777}.custom-container::-webkit-scrollbar-corner{background:#1e1e1e}.custom-container{font-smooth:antialiased;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.json-null,.json-undefined{color:#f48771;font-style:italic;opacity:.8}.json-empty{color:gray;font-style:italic}.json-comma+br{margin-bottom:2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
 
 class IcoLabel {
@@ -7744,54 +7880,197 @@ function createInitialCache(cacheKeys) {
 }
 
 class HeaderDsx {
+    // Inputs
     id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     etiqueta = input.required(...(ngDevMode ? [{ debugName: "etiqueta" }] : /* istanbul ignore next */ []));
     defaultPNG = input('icon/folder_001.png', ...(ngDevMode ? [{ debugName: "defaultPNG" }] : /* istanbul ignore next */ []));
     defaultGIF = input('gif/file.gif', ...(ngDevMode ? [{ debugName: "defaultGIF" }] : /* istanbul ignore next */ []));
     icoPNG = input(null, ...(ngDevMode ? [{ debugName: "icoPNG" }] : /* istanbul ignore next */ []));
     icoGIF = input(null, ...(ngDevMode ? [{ debugName: "icoGIF" }] : /* istanbul ignore next */ []));
-    icono = null;
-    textoEncabezado = null;
     subTitulo = input(null, ...(ngDevMode ? [{ debugName: "subTitulo" }] : /* istanbul ignore next */ []));
+    debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
+    // Signals
+    icono = signal(null, ...(ngDevMode ? [{ debugName: "icono" }] : /* istanbul ignore next */ []));
+    textoEncabezado = signal(null, ...(ngDevMode ? [{ debugName: "textoEncabezado" }] : /* istanbul ignore next */ []));
+    // Métricas de performance públicas
+    performanceMetrics = {
+        renderCount: 0,
+        lastRenderTime: 0,
+        totalRenderTime: 0,
+        averageRenderTime: 0,
+        lastUpdateTimestamp: 0,
+    };
+    // Computed
+    modo = computed(() => {
+        const id = this.id();
+        if (id === null)
+            return 'Lista';
+        if (id === 0)
+            return 'Registro';
+        if (id > 0)
+            return 'Edición';
+        return 'Desconocido';
+    }, ...(ngDevMode ? [{ debugName: "modo" }] : /* istanbul ignore next */ []));
+    // Control de producción
+    isProduction = !isDevMode();
+    constructor() {
+        effect(() => {
+            if (this.debug() && !this.isProduction) {
+                this.logPerformance('Debug mode activado');
+            }
+        });
+    }
     ngOnInit() {
+        const startTime = performance.now();
         this.definirTexto();
-        //throw new Error('Method not implemented.');
+        this.performanceMetrics.lastUpdateTimestamp = Date.now();
+        this.logPerformance('Componente inicializado');
+        const endTime = performance.now();
+        this.logPerformance(`Tiempo de inicialización: ${(endTime - startTime).toFixed(2)}ms`);
+    }
+    ngOnChanges(changes) {
+        const startTime = performance.now();
+        this.performanceMetrics.renderCount++;
+        // Solo procesar si hay cambios relevantes
+        if (this.tieneCambiosRelevantes(changes)) {
+            this.logPerformance('Detectado cambio en inputs', {
+                cambios: Object.keys(changes),
+                idActual: this.id(),
+                idAnterior: changes['id']?.previousValue,
+                idNuevo: changes['id']?.currentValue,
+            });
+            this.definirTexto();
+        }
+        const endTime = performance.now();
+        const renderTime = endTime - startTime;
+        this.performanceMetrics.lastRenderTime = renderTime;
+        this.performanceMetrics.totalRenderTime += renderTime;
+        this.performanceMetrics.averageRenderTime =
+            this.performanceMetrics.totalRenderTime /
+                this.performanceMetrics.renderCount;
+        this.logPerformance('Cambio procesado', {
+            renderTime: renderTime.toFixed(2) + 'ms',
+            renderCount: this.performanceMetrics.renderCount,
+            avgRenderTime: this.performanceMetrics.averageRenderTime.toFixed(2) + 'ms',
+        });
+    }
+    tieneCambiosRelevantes(changes) {
+        const relevantKeys = ['id', 'etiqueta', 'icoPNG', 'icoGIF', 'subTitulo'];
+        for (const key of relevantKeys) {
+            if (changes[key] &&
+                changes[key].currentValue !== changes[key].previousValue) {
+                return true;
+            }
+        }
+        return false;
     }
     definirTexto() {
-        // Validaciones para el texto del encabezado según el valor de ID
-        // Caso 1: No se proporcionó ID (indefinido o nulo) -> Plural
-        if (this.id() === null) {
-            this.textoEncabezado = this.etiqueta();
+        const startTime = performance.now();
+        const idActual = this.id();
+        if (this.debug() && !this.isProduction) {
+            console.group(`🔍 HeaderDsx - Definiendo texto para ID: ${idActual}`);
+        }
+        let nuevoTexto;
+        let nuevoIcono = null;
+        // Determinar texto
+        if (idActual === null) {
+            nuevoTexto = this.etiqueta();
+            this.logDebug('Caso 1: ID null - Modo lista');
+        }
+        else if (idActual === 0) {
+            nuevoTexto = `Registrar ${this.etiqueta()}`;
+            this.logDebug('Caso 2: ID = 0 - Modo registro');
+        }
+        else if (idActual > 0) {
+            nuevoTexto = `Editar ${this.etiqueta()}`;
+            this.logDebug('Caso 3: ID > 0 - Modo edición', {
+                id: idActual,
+                texto: nuevoTexto,
+            });
+        }
+        else {
+            nuevoTexto = this.etiqueta();
+            this.logDebug('Caso desconocido', { id: idActual });
         }
-        // Caso 2: El ID existe y vale exactamente 0 -> Registrar
-        else if (this.id() === 0) {
-            this.textoEncabezado = `Registrar ${this.etiqueta()}`;
+        // Determinar icono
+        if (this.icoPNG() !== null) {
+            nuevoIcono = this.icoPNG();
+            this.logDebug('Icono: Usando PNG personalizado', { icono: nuevoIcono });
         }
-        // Caso 3: El ID es mayor que 0 -> Editar
-        else if (this.id() > 0) {
-            this.textoEncabezado = `Editar ${this.etiqueta()}`;
+        else if (this.icoGIF() !== null) {
+            nuevoIcono = this.icoGIF();
+            this.logDebug('Icono: Usando GIF personalizado', { icono: nuevoIcono });
         }
-        // Validaciones para el icono según el valor de ID
-        // Caso 1: No se proporcionó ningún icono -> Usar el icono por defecto
-        if (this.icoPNG() === null && this.icoGIF() === null) {
-            this.icono = this.defaultPNG();
+        else {
+            nuevoIcono = this.defaultPNG();
+            this.logDebug('Icono: Usando default', { icono: nuevoIcono });
         }
-        // Caso 2: Se proporcionó un icono PNG -> Usar el icono PNG
-        else if (this.icoPNG() !== null) {
-            this.icono = this.icoPNG();
+        // Actualizar solo si hay cambios
+        if (this.textoEncabezado() !== nuevoTexto) {
+            this.textoEncabezado.set(nuevoTexto);
         }
-        // Caso 3: Se proporcionó un icono GIF -> Usar el icono GIF
-        else if (this.icoGIF() !== null) {
-            this.icono = this.icoGIF();
+        if (this.icono() !== nuevoIcono) {
+            this.icono.set(nuevoIcono);
+        }
+        this.logDebug('Estado final actualizado', {
+            texto: nuevoTexto,
+            icono: nuevoIcono,
+            id: idActual,
+            modo: this.modo(),
+        });
+        if (this.debug() && !this.isProduction) {
+            console.groupEnd();
+        }
+        const endTime = performance.now();
+        this.logPerformance(`Tiempo de definición de texto: ${(endTime - startTime).toFixed(2)}ms`);
+    }
+    logDebug(message, data) {
+        if (this.debug() && !this.isProduction) {
+            console.log(`[HeaderDsx Debug] ${message}`, data ? data : '');
+        }
+    }
+    logPerformance(message, data) {
+        if (this.debug() && !this.isProduction) {
+            console.log(`⚡ [HeaderDsx Performance] ${message}`, data ? data : '');
+        }
+    }
+    // Métodos públicos
+    getPerformanceMetrics() {
+        return {
+            ...this.performanceMetrics,
+            currentMode: this.modo(),
+            currentText: this.textoEncabezado(),
+            currentIcon: this.icono(),
+            currentId: this.id(),
+        };
+    }
+    getPerformanceSummary() {
+        const metrics = this.performanceMetrics;
+        return `📊 Renders: ${metrics.renderCount} | Promedio: ${metrics.averageRenderTime.toFixed(2)}ms | Último: ${metrics.lastRenderTime.toFixed(2)}ms`;
+    }
+    debugInfo() {
+        if (this.debug() && !this.isProduction) {
+            console.group('=== HeaderDsx Debug Info ===');
+            console.log('ID:', this.id());
+            console.log('Etiqueta:', this.etiqueta());
+            console.log('Texto Encabezado:', this.textoEncabezado());
+            console.log('Icono:', this.icono());
+            console.log('Subtítulo:', this.subTitulo());
+            console.log('Modo:', this.modo());
+            console.log('Debug Mode:', this.debug());
+            console.log('Performance Metrics:', this.getPerformanceMetrics());
+            console.log('Performance Summary:', this.getPerformanceSummary());
+            console.log('===============================');
+            console.groupEnd();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HeaderDsx, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: HeaderDsx, isStandalone: true, selector: "header-dsx", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, etiqueta: { classPropertyName: "etiqueta", publicName: "etiqueta", isSignal: true, isRequired: true, transformFunction: null }, defaultPNG: { classPropertyName: "defaultPNG", publicName: "defaultPNG", isSignal: true, isRequired: false, transformFunction: null }, defaultGIF: { classPropertyName: "defaultGIF", publicName: "defaultGIF", isSignal: true, isRequired: false, transformFunction: null }, icoPNG: { classPropertyName: "icoPNG", publicName: "icoPNG", isSignal: true, isRequired: false, transformFunction: null }, icoGIF: { classPropertyName: "icoGIF", publicName: "icoGIF", isSignal: true, isRequired: false, transformFunction: null }, subTitulo: { classPropertyName: "subTitulo", publicName: "subTitulo", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"area-fieldset-header flex items-center gap-2 px-2\">\r\n  <p-avatar [image]=\"icono!\"></p-avatar>\r\n  <div class=\"flex flex-col\">\r\n    <h3>{{ textoEncabezado }}</h3>\r\n    @if(subTitulo() !== null ){\r\n    <ng-container>\r\n      <span class=\"text-xs text-gray-600\">{{ subTitulo() }}</span>\r\n    </ng-container>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: HeaderDsx, isStandalone: true, selector: "header-dsx", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, etiqueta: { classPropertyName: "etiqueta", publicName: "etiqueta", isSignal: true, isRequired: true, transformFunction: null }, defaultPNG: { classPropertyName: "defaultPNG", publicName: "defaultPNG", isSignal: true, isRequired: false, transformFunction: null }, defaultGIF: { classPropertyName: "defaultGIF", publicName: "defaultGIF", isSignal: true, isRequired: false, transformFunction: null }, icoPNG: { classPropertyName: "icoPNG", publicName: "icoPNG", isSignal: true, isRequired: false, transformFunction: null }, icoGIF: { classPropertyName: "icoGIF", publicName: "icoGIF", isSignal: true, isRequired: false, transformFunction: null }, subTitulo: { classPropertyName: "subTitulo", publicName: "subTitulo", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"area-fieldset-header flex items-center gap-2 px-2\">\r\n  <p-avatar [image]=\"icono()!\"></p-avatar>\r\n  <div class=\"flex flex-col\">\r\n    <h3>{{ textoEncabezado() }}</h3>\r\n    @if(subTitulo() !== null ){\r\n    <span class=\"text-xs text-gray-600\">{{ subTitulo() }}</span>\r\n    }\r\n    <!-- Debug info con m\u00E9tricas de performance -->\r\n    @if(debug()){\r\n    <div\r\n      class=\"text-xs mt-1 px-2 py-1 rounded flex flex-wrap items-center gap-1\"\r\n      [class]=\"id() === 0 ? 'bg-blue-50 text-blue-700' : \r\n                   id() !== null && id()! > 0 ? 'bg-green-50 text-green-700' : \r\n                   'bg-gray-50 text-gray-700'\"\r\n    >\r\n      <span>\uD83D\uDD0D</span>\r\n      <span>ID: {{ id() }}</span>\r\n      <span>|</span>\r\n      <span>Modo: <strong>{{ modo() }}</strong></span>\r\n      <span>|</span>\r\n      <span>Texto: {{ textoEncabezado() }}</span>\r\n      @if(id() !== null && id()! > 0){\r\n      <span class=\"ml-1 text-xs\">(Editando ID {{ id() }})</span>\r\n      }\r\n      <!-- M\u00E9tricas de performance -->\r\n      <span class=\"ml-1 text-xs text-gray-400\">\r\n        | Render: {{ performanceMetrics.renderCount }} | Avg: {{\r\n        performanceMetrics.averageRenderTime.toFixed(1) }}ms\r\n      </span>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HeaderDsx, decorators: [{
             type: Component,
-            args: [{ selector: 'header-dsx', imports: [AvatarModule], template: "<div class=\"area-fieldset-header flex items-center gap-2 px-2\">\r\n  <p-avatar [image]=\"icono!\"></p-avatar>\r\n  <div class=\"flex flex-col\">\r\n    <h3>{{ textoEncabezado }}</h3>\r\n    @if(subTitulo() !== null ){\r\n    <ng-container>\r\n      <span class=\"text-xs text-gray-600\">{{ subTitulo() }}</span>\r\n    </ng-container>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], etiqueta: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiqueta", required: true }] }], defaultPNG: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPNG", required: false }] }], defaultGIF: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultGIF", required: false }] }], icoPNG: [{ type: i0.Input, args: [{ isSignal: true, alias: "icoPNG", required: false }] }], icoGIF: [{ type: i0.Input, args: [{ isSignal: true, alias: "icoGIF", required: false }] }], subTitulo: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitulo", required: false }] }] } });
+            args: [{ selector: 'header-dsx', imports: [AvatarModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"area-fieldset-header flex items-center gap-2 px-2\">\r\n  <p-avatar [image]=\"icono()!\"></p-avatar>\r\n  <div class=\"flex flex-col\">\r\n    <h3>{{ textoEncabezado() }}</h3>\r\n    @if(subTitulo() !== null ){\r\n    <span class=\"text-xs text-gray-600\">{{ subTitulo() }}</span>\r\n    }\r\n    <!-- Debug info con m\u00E9tricas de performance -->\r\n    @if(debug()){\r\n    <div\r\n      class=\"text-xs mt-1 px-2 py-1 rounded flex flex-wrap items-center gap-1\"\r\n      [class]=\"id() === 0 ? 'bg-blue-50 text-blue-700' : \r\n                   id() !== null && id()! > 0 ? 'bg-green-50 text-green-700' : \r\n                   'bg-gray-50 text-gray-700'\"\r\n    >\r\n      <span>\uD83D\uDD0D</span>\r\n      <span>ID: {{ id() }}</span>\r\n      <span>|</span>\r\n      <span>Modo: <strong>{{ modo() }}</strong></span>\r\n      <span>|</span>\r\n      <span>Texto: {{ textoEncabezado() }}</span>\r\n      @if(id() !== null && id()! > 0){\r\n      <span class=\"ml-1 text-xs\">(Editando ID {{ id() }})</span>\r\n      }\r\n      <!-- M\u00E9tricas de performance -->\r\n      <span class=\"ml-1 text-xs text-gray-400\">\r\n        | Render: {{ performanceMetrics.renderCount }} | Avg: {{\r\n        performanceMetrics.averageRenderTime.toFixed(1) }}ms\r\n      </span>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], etiqueta: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiqueta", required: true }] }], defaultPNG: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPNG", required: false }] }], defaultGIF: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultGIF", required: false }] }], icoPNG: [{ type: i0.Input, args: [{ isSignal: true, alias: "icoPNG", required: false }] }], icoGIF: [{ type: i0.Input, args: [{ isSignal: true, alias: "icoGIF", required: false }] }], subTitulo: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitulo", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
 
 class DsxAddToolsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxAddToolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -8123,6 +8402,456 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
+// dsxdate-short.ts
+class DsxdateShort {
+    injector = inject(Injector);
+    // ✅ Exponer isDevMode como propiedad pública
+    isDevMode = isDevMode();
+    // === INPUTS CONFIGURABLES ===
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('dd/mm/yyyy', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    dateFormat = input('dd/mm/yy', ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
+    showOnFocus = input(false, ...(ngDevMode ? [{ debugName: "showOnFocus" }] : /* istanbul ignore next */ []));
+    showButtonBar = input(true, ...(ngDevMode ? [{ debugName: "showButtonBar" }] : /* istanbul ignore next */ []));
+    debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
+    // === STATE ===
+    debugEnabled = signal(false, ...(ngDevMode ? [{ debugName: "debugEnabled" }] : /* istanbul ignore next */ []));
+    // === OBTENER EL CONTROL PADRE ===
+    ngControl = computed(() => {
+        try {
+            return this.injector.get(NgControl);
+        }
+        catch {
+            return null;
+        }
+    }, ...(ngDevMode ? [{ debugName: "ngControl" }] : /* istanbul ignore next */ []));
+    // === CONTROL PADRE PARA ERRORES ===
+    parentControl = computed(() => {
+        const control = this.ngControl();
+        return control?.control || null;
+    }, ...(ngDevMode ? [{ debugName: "parentControl" }] : /* istanbul ignore next */ []));
+    // === CONTROL INTERNO (para el template) ===
+    fechaControl = new FormControl(null);
+    // === CONTROL VALUE ACCESSOR ===
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Debug effect
+        effect(() => {
+            const isDebug = this.debug() && this.isDevMode;
+            this.debugEnabled.set(isDebug);
+            if (isDebug) {
+                console.log('[dsxdate-short] === DEBUG MODE ACTIVADO ===');
+                console.log('[dsxdate-short] Configuración:', {
+                    label: this.label(),
+                    placeholder: this.placeholder(),
+                    dateFormat: this.dateFormat(),
+                    showIcon: this.showIcon(),
+                    showOnFocus: this.showOnFocus(),
+                    showButtonBar: this.showButtonBar(),
+                });
+                console.log('[dsxdate-short] Control padre:', this.parentControl());
+            }
+        });
+        // ✅ SINCRONIZAR VALIDADORES DEL PADRE AL CONTROL INTERNO
+        effect(() => {
+            const parentCtrl = this.parentControl();
+            if (parentCtrl) {
+                // Copiar validadores del padre al control interno
+                const validators = parentCtrl.validator;
+                const asyncValidators = parentCtrl.asyncValidator;
+                if (this.debugEnabled()) {
+                    console.log('[dsxdate-short] 🔄 Sincronizando validadores del padre');
+                    console.log('[dsxdate-short] Validadores del padre:', validators);
+                }
+                this.fechaControl.setValidators(validators ? [validators] : []);
+                this.fechaControl.setAsyncValidators(asyncValidators ? [asyncValidators] : []);
+                this.fechaControl.updateValueAndValidity({ emitEvent: false });
+                if (this.debugEnabled()) {
+                    console.log('[dsxdate-short] ✅ Validadores sincronizados');
+                    console.log('[dsxdate-short] Estado del control interno:', {
+                        valid: this.fechaControl.valid,
+                        invalid: this.fechaControl.invalid,
+                        errors: this.fechaControl.errors,
+                    });
+                }
+            }
+        });
+        // Monitorear cambios del control padre
+        effect(() => {
+            if (this.debugEnabled()) {
+                const parentCtrl = this.parentControl();
+                console.log('[dsxdate-short] 📊 Parent Control state:', {
+                    value: parentCtrl?.value,
+                    status: parentCtrl?.status,
+                    errors: parentCtrl?.errors,
+                    valid: parentCtrl?.valid,
+                    invalid: parentCtrl?.invalid,
+                    touched: parentCtrl?.touched,
+                    dirty: parentCtrl?.dirty,
+                });
+            }
+        });
+        // Sincronizar cambios del control interno al padre
+        this.fechaControl.valueChanges.subscribe((value) => {
+            if (this.debugEnabled()) {
+                console.log('[dsxdate-short] 🔄 valueChanges - Nuevo valor:', value);
+            }
+            this.onChange(value);
+        });
+        // Sincronizar touched
+        this.fechaControl.statusChanges.subscribe(() => {
+            if (this.debugEnabled()) {
+                console.log('[dsxdate-short] 📊 statusChanges - Estado:', this.fechaControl.status);
+            }
+            this.onTouched();
+        });
+    }
+    // === MÉTODOS DE DEBUG ===
+    log(message, data) {
+        if (this.debugEnabled() && this.isDevMode) {
+            if (data !== undefined) {
+                console.log(`[dsxdate-short] ${message}`, data);
+            }
+            else {
+                console.log(`[dsxdate-short] ${message}`);
+            }
+        }
+    }
+    /**
+     * Convierte cualquier fecha (string ISO, Date, moment) a Date válido
+     */
+    convertirFechaADate(fecha) {
+        if (this.debugEnabled()) {
+            this.log('🔄 convertirFechaADate - entrada:', fecha);
+        }
+        if (!fecha) {
+            this.log('convertirFechaADate - fecha vacía, retornando null');
+            return null;
+        }
+        if (fecha instanceof Date && !isNaN(fecha.getTime())) {
+            this.log('✅ convertirFechaADate - es Date válido:', fecha);
+            return fecha;
+        }
+        if (typeof fecha === 'string') {
+            this.log('📝 convertirFechaADate - procesando string:', fecha);
+            const momentDate = moment(fecha);
+            if (momentDate.isValid()) {
+                const result = momentDate.toDate();
+                this.log('✅ convertirFechaADate - string convertido a Date:', result);
+                return result;
+            }
+            this.log('❌ convertirFechaADate - string inválido para moment');
+        }
+        if (moment.isMoment(fecha)) {
+            this.log('✅ convertirFechaADate - es objeto moment');
+            return fecha.toDate();
+        }
+        const parsed = new Date(fecha);
+        if (!isNaN(parsed.getTime())) {
+            this.log('✅ convertirFechaADate - parseo directo exitoso:', parsed);
+            return parsed;
+        }
+        this.log('❌ convertirFechaADate - no se pudo convertir, retornando null');
+        return null;
+    }
+    // === CONTROL VALUE ACCESSOR IMPLEMENTATION ===
+    writeValue(value) {
+        if (this.debugEnabled()) {
+            this.log('📥 writeValue - Valor recibido:', value);
+        }
+        const fechaConvertida = this.convertirFechaADate(value);
+        if (this.debugEnabled()) {
+            this.log('📥 writeValue - Valor convertido:', fechaConvertida);
+        }
+        this.fechaControl.setValue(fechaConvertida, { emitEvent: false });
+    }
+    registerOnChange(fn) {
+        if (this.debugEnabled()) {
+            this.log('📞 registerOnChange - Callback registrado');
+        }
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        if (this.debugEnabled()) {
+            this.log('📞 registerOnTouched - Callback registrado');
+        }
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (this.debugEnabled()) {
+            this.log(`🚫 setDisabledState - Deshabilitado: ${isDisabled}`);
+        }
+        if (isDisabled) {
+            this.fechaControl.disable({ emitEvent: false });
+        }
+        else {
+            this.fechaControl.enable({ emitEvent: false });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxdateShort, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DsxdateShort, isStandalone: true, selector: "dsxdate-short", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showOnFocus: { classPropertyName: "showOnFocus", publicName: "showOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showButtonBar: { classPropertyName: "showButtonBar", publicName: "showButtonBar", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DsxdateShort),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxdateShort, decorators: [{
+            type: Component,
+            args: [{ selector: 'dsxdate-short', imports: [
+                        CommonModule,
+                        FloatLabel,
+                        DatePicker,
+                        ReactiveFormsModule,
+                        AppMessageErrorComponent,
+                        JsonPipe,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DsxdateShort),
+                            multi: true,
+                        },
+                    ], template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnFocus", required: false }] }], showButtonBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonBar", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
+
+// dsx-input-currency.ts
+class DsxInputCurrency {
+    inputNumber;
+    injector = inject(Injector);
+    // === INPUTS CONFIGURABLES ===
+    label = input('Saldo Actual', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    currency = input('GTQ', ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+    locale = input('es-GT', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    minFractionDigits = input(2, ...(ngDevMode ? [{ debugName: "minFractionDigits" }] : /* istanbul ignore next */ []));
+    maxFractionDigits = input(2, ...(ngDevMode ? [{ debugName: "maxFractionDigits" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    selectAllOnFocus = input(true, ...(ngDevMode ? [{ debugName: "selectAllOnFocus" }] : /* istanbul ignore next */ []));
+    debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
+    showError = input(true, ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    // === OUTPUTS ===
+    valueChange = output();
+    focus = output();
+    blur = output();
+    // === STATE ===
+    valueSignal = signal(null, ...(ngDevMode ? [{ debugName: "valueSignal" }] : /* istanbul ignore next */ []));
+    touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    debugEnabled = signal(false, ...(ngDevMode ? [{ debugName: "debugEnabled" }] : /* istanbul ignore next */ []));
+    // === COMPUTED ===
+    resolvedLabel = computed(() => this.label(), ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    resolvedCurrency = computed(() => this.currency(), ...(ngDevMode ? [{ debugName: "resolvedCurrency" }] : /* istanbul ignore next */ []));
+    resolvedLocale = computed(() => this.locale(), ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
+    // === OBTENER EL CONTROL PADRE ===
+    ngControl = computed(() => {
+        try {
+            return this.injector.get(NgControl);
+        }
+        catch {
+            return null;
+        }
+    }, ...(ngDevMode ? [{ debugName: "ngControl" }] : /* istanbul ignore next */ []));
+    // === CONTROL PADRE PARA ERRORES ===
+    parentControl = computed(() => {
+        const control = this.ngControl();
+        return control?.control || null;
+    }, ...(ngDevMode ? [{ debugName: "parentControl" }] : /* istanbul ignore next */ []));
+    // === CONTROL INTERNO (para el template) ===
+    control = new FormControl();
+    // === CONTROL VALUE ACCESSOR ===
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Debug effect
+        effect(() => {
+            const isDebug = this.debug() && isDevMode();
+            this.debugEnabled.set(isDebug);
+            if (isDebug) {
+                console.log('[dsx-input-currency] === DEBUG MODE ACTIVADO ===');
+                console.log('[dsx-input-currency] Configuración:', {
+                    label: this.label(),
+                    currency: this.currency(),
+                    locale: this.locale(),
+                    minFractionDigits: this.minFractionDigits(),
+                    maxFractionDigits: this.maxFractionDigits(),
+                    placeholder: this.placeholder(),
+                    readonly: this.readonly(),
+                    selectAllOnFocus: this.selectAllOnFocus(),
+                });
+                console.log('[dsx-input-currency] Control padre:', this.parentControl());
+            }
+        });
+        // Monitorear cambios del control padre
+        effect(() => {
+            if (this.debugEnabled()) {
+                const parentCtrl = this.parentControl();
+                console.log('[dsx-input-currency] 📊 Parent Control state:', {
+                    value: parentCtrl?.value,
+                    status: parentCtrl?.status,
+                    errors: parentCtrl?.errors,
+                    valid: parentCtrl?.valid,
+                    invalid: parentCtrl?.invalid,
+                    touched: parentCtrl?.touched,
+                    dirty: parentCtrl?.dirty,
+                });
+            }
+        });
+    }
+    ngAfterViewInit() {
+        if (this.debugEnabled()) {
+            console.log('[dsx-input-currency] ngAfterViewInit - Vista inicializada');
+        }
+        // Sincronizar el control padre con el interno
+        const parentCtrl = this.parentControl();
+        if (parentCtrl) {
+            this.control.setValue(parentCtrl.value, { emitEvent: false });
+        }
+        if (this.inputNumber && this.selectAllOnFocus()) {
+            const inputElement = this.inputNumber.input
+                .nativeElement;
+            if (this.debugEnabled()) {
+                console.log('[dsx-input-currency] Input element encontrado');
+            }
+            const originalFocus = inputElement.focus.bind(inputElement);
+            const enhancedFocus = function () {
+                originalFocus();
+                setTimeout(() => this.select(), 0);
+            };
+            inputElement.focus = enhancedFocus;
+        }
+    }
+    // === MÉTODOS PÚBLICOS ===
+    onValueChange(value) {
+        // ✅ Solo procesar si es un número válido
+        if (value === null || value === undefined || isNaN(value)) {
+            return;
+        }
+        if (this.debugEnabled()) {
+            console.log(`[dsx-input-currency] 📝 onValueChange - Valor: ${value}`);
+        }
+        this.valueSignal.set(value);
+        this.onChange(value);
+        this.valueChange.emit(value);
+        const parentCtrl = this.parentControl();
+        if (parentCtrl) {
+            parentCtrl.setValue(value, { emitEvent: true });
+        }
+    }
+    onFocus() {
+        if (this.debugEnabled()) {
+            console.log(`[dsx-input-currency] 🔍 onFocus - Evento focus emitido`);
+        }
+        if (this.selectAllOnFocus() && this.inputNumber) {
+            const inputElement = this.inputNumber.input
+                .nativeElement;
+            if (inputElement && typeof inputElement.select === 'function') {
+                setTimeout(() => {
+                    inputElement.select();
+                    if (this.debugEnabled()) {
+                        console.log('[dsx-input-currency] ✅ Input seleccionado completamente');
+                    }
+                }, 0);
+            }
+        }
+        this.focus.emit();
+    }
+    onBlur() {
+        const wasTouched = this.touched();
+        this.touched.set(true);
+        this.control.markAsTouched();
+        const parentCtrl = this.parentControl();
+        if (parentCtrl) {
+            parentCtrl.markAsTouched();
+        }
+        if (this.debugEnabled()) {
+            console.log(`[dsx-input-currency] 👋 onBlur - touched: ${!wasTouched ? 'Primera vez' : 'Ya estaba touched'}`);
+        }
+        this.blur.emit();
+    }
+    // === MÉTODOS DE DEBUG ===
+    log(message, data) {
+        if (this.debugEnabled() && isDevMode()) {
+            if (data !== undefined) {
+                console.log(`[dsx-input-currency] ${message}`, data);
+            }
+            else {
+                console.log(`[dsx-input-currency] ${message}`);
+            }
+        }
+    }
+    // === CONTROL VALUE ACCESSOR IMPLEMENTATION ===
+    writeValue(value) {
+        if (this.debugEnabled()) {
+            console.log(`[dsx-input-currency] 📥 writeValue - Valor recibido: ${value}`);
+        }
+        this.valueSignal.set(value);
+        this.control.setValue(value, { emitEvent: false });
+    }
+    registerOnChange(fn) {
+        if (this.debugEnabled()) {
+            console.log('[dsx-input-currency] 📞 registerOnChange - Callback registrado');
+        }
+        this.onChange = fn;
+        this.control.valueChanges.subscribe((val) => {
+            if (this.debugEnabled()) {
+                console.log(`[dsx-input-currency] 🔄 valueChanges - Nuevo valor: ${val}`);
+            }
+            this.onChange(val);
+        });
+    }
+    registerOnTouched(fn) {
+        if (this.debugEnabled()) {
+            console.log('[dsx-input-currency] 📞 registerOnTouched - Callback registrado');
+        }
+        this.onTouched = fn;
+        this.control.statusChanges.subscribe(() => {
+            if (this.debugEnabled()) {
+                console.log(`[dsx-input-currency] 📊 statusChanges - Estado: ${this.control.status}`);
+            }
+            this.onTouched();
+        });
+    }
+    setDisabledState(isDisabled) {
+        if (this.debugEnabled()) {
+            console.log(`[dsx-input-currency] 🚫 setDisabledState - Deshabilitado: ${isDisabled}`);
+        }
+        if (isDisabled) {
+            this.control.disable({ emitEvent: false });
+        }
+        else {
+            this.control.enable({ emitEvent: false });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxInputCurrency, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DsxInputCurrency, isStandalone: true, selector: "dsx-input-currency", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, minFractionDigits: { classPropertyName: "minFractionDigits", publicName: "minFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, maxFractionDigits: { classPropertyName: "maxFractionDigits", publicName: "maxFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selectAllOnFocus: { classPropertyName: "selectAllOnFocus", publicName: "selectAllOnFocus", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", focus: "focus", blur: "blur" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DsxInputCurrency),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputNumber", first: true, predicate: InputNumber, descendants: true }], ngImport: i0, template: "<!-- dsx-input-currency.html -->\r\n<p-floatLabel [variant]=\"'on'\">\r\n  <p-inputNumber\r\n    #inputNumber\r\n    fluid\r\n    [mode]=\"'currency'\"\r\n    [currency]=\"resolvedCurrency()\"\r\n    [locale]=\"resolvedLocale()\"\r\n    [minFractionDigits]=\"minFractionDigits()\"\r\n    [maxFractionDigits]=\"maxFractionDigits()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [autocomplete]=\"'off'\"\r\n    [formControl]=\"control\"\r\n    [readonly]=\"readonly()\"\r\n    (onFocus)=\"onFocus()\"\r\n    (onBlur)=\"onBlur()\"\r\n    (onInput)=\"onValueChange($event.value)\"\r\n  />\r\n  <label>{{ resolvedLabel() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- Mensaje de error usando el control padre -->\r\n@if (showError() && parentControl()) {\r\n<!-- [debugMode]=\"true\" -->\r\n<dsx-message-error [control]=\"parentControl()\" />\r\n}\r\n", styles: [":host ::ng-deep .p-inputnumber-input{text-align:right}\n"], dependencies: [{ kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxInputCurrency, decorators: [{
+            type: Component,
+            args: [{ selector: 'dsx-input-currency', imports: [
+                        FloatLabel,
+                        InputNumber,
+                        AppMessageErrorComponent,
+                        ReactiveFormsModule,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DsxInputCurrency),
+                            multi: true,
+                        },
+                    ], template: "<!-- dsx-input-currency.html -->\r\n<p-floatLabel [variant]=\"'on'\">\r\n  <p-inputNumber\r\n    #inputNumber\r\n    fluid\r\n    [mode]=\"'currency'\"\r\n    [currency]=\"resolvedCurrency()\"\r\n    [locale]=\"resolvedLocale()\"\r\n    [minFractionDigits]=\"minFractionDigits()\"\r\n    [maxFractionDigits]=\"maxFractionDigits()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [autocomplete]=\"'off'\"\r\n    [formControl]=\"control\"\r\n    [readonly]=\"readonly()\"\r\n    (onFocus)=\"onFocus()\"\r\n    (onBlur)=\"onBlur()\"\r\n    (onInput)=\"onValueChange($event.value)\"\r\n  />\r\n  <label>{{ resolvedLabel() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- Mensaje de error usando el control padre -->\r\n@if (showError() && parentControl()) {\r\n<!-- [debugMode]=\"true\" -->\r\n<dsx-message-error [control]=\"parentControl()\" />\r\n}\r\n", styles: [":host ::ng-deep .p-inputnumber-input{text-align:right}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputNumber: [{
+                type: ViewChild,
+                args: [InputNumber]
+            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], selectAllOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllOnFocus", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], showError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showError", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], focus: [{ type: i0.Output, args: ["focus"] }], blur: [{ type: i0.Output, args: ["blur"] }] } });
+
 // dsx-select.component.ts
 class DsxSelect {
     injector = inject(Injector);
@@ -8137,22 +8866,28 @@ class DsxSelect {
     dataList = input.required(...(ngDevMode ? [{ debugName: "dataList" }] : /* istanbul ignore next */ []));
     variant = input('on', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    filterPlaceholder = input('Buscar ...', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
+    filterPlaceholder = input('Buscar item...', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
     showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
     // Override opcional (solo cuando la convención no aplica)
     optionLabel = input(undefined, ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
     optionValue = input(undefined, ...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
+    // ✨ NUEVO: Campo secundario opcional (para mostrar información adicional)
+    secondaryField = input(undefined, ...(ngDevMode ? [{ debugName: "secondaryField" }] : /* istanbul ignore next */ []));
+    showSecondaryField = computed(() => !!this.secondaryField(), ...(ngDevMode ? [{ debugName: "showSecondaryField" }] : /* istanbul ignore next */ []));
+    // ✨ NUEVO: Virtual Scroll (por defecto desactivado)
+    virtualScroll = input(false, ...(ngDevMode ? [{ debugName: "virtualScroll" }] : /* istanbul ignore next */ []));
+    virtualScrollItemSize = input(40, ...(ngDevMode ? [{ debugName: "virtualScrollItemSize" }] : /* istanbul ignore next */ []));
     // Iconos
     useIcon = input(true, ...(ngDevMode ? [{ debugName: "useIcon" }] : /* 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 */ []));
-    // ✅ Mostrar mensajes de error (por defecto true)
+    // Mostrar mensajes de error (por defecto true)
     showError = input(true, ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
     // Signal model para two-way binding
     selectedValue = model(null, ...(ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []));
-    // Computed: OptionValue inferido automáticamente (siempre string)
+    // Computed: OptionValue inferido automáticamente
     resolvedOptionValue = computed(() => {
         if (this.optionValue()) {
             return this.optionValue();
@@ -8166,7 +8901,7 @@ class DsxSelect {
         }
         return 'id';
     }, ...(ngDevMode ? [{ debugName: "resolvedOptionValue" }] : /* istanbul ignore next */ []));
-    // Computed: OptionLabel inferido automáticamente (siempre string)
+    // Computed: OptionLabel inferido automáticamente
     resolvedOptionLabel = computed(() => {
         if (this.optionLabel()) {
             return this.optionLabel();
@@ -8180,7 +8915,7 @@ class DsxSelect {
         }
         return 'nombre';
     }, ...(ngDevMode ? [{ debugName: "resolvedOptionLabel" }] : /* istanbul ignore next */ []));
-    // Computed: Label inferido automáticamente (siempre string)
+    // Computed: Label inferido automáticamente
     resolvedLabel = computed(() => {
         if (this.label()) {
             return this.label();
@@ -8193,7 +8928,7 @@ class DsxSelect {
         }
         return 'Campo';
     }, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
-    // ✅ Computed: Obtener el control para errores (solo si showError es true)
+    // Computed: Obtener el control para errores
     errorControl = computed(() => {
         if (!this.showError())
             return null;
@@ -8215,6 +8950,8 @@ class DsxSelect {
                     optionLabel: this.resolvedOptionLabel(),
                     label: this.resolvedLabel(),
                     showError: this.showError(),
+                    virtualScroll: this.virtualScroll(),
+                    secondaryField: this.secondaryField(),
                 });
             }
         });
@@ -8228,14 +8965,22 @@ class DsxSelect {
                 console.log(`Control: ${this.getFormControlName()}`);
                 console.log(`Items: ${dataList.length}`);
                 console.log(`Using: optionValue="${this.resolvedOptionValue()}", optionLabel="${this.resolvedOptionLabel()}"`);
+                if (this.secondaryField()) {
+                    console.log(`Secondary field: "${this.secondaryField()}"`);
+                }
                 console.log(`Time since last update: ${(currentTime - this.lastChangeTimestamp).toFixed(2)}ms`);
                 if (dataList.length > 0 && this.debug()) {
                     console.log(`Sample:`, dataList[0]);
                     console.log(`Value sample:`, dataList[0][this.resolvedOptionValue()]);
                     console.log(`Label sample:`, dataList[0][this.resolvedOptionLabel()]);
+                    if (this.secondaryField()) {
+                        const secondary = this.secondaryField();
+                        console.log(`Secondary sample:`, dataList[0][secondary]);
+                    }
                 }
                 if (dataList.length > 500) {
                     console.warn(`⚠️ Large dataset: ${dataList.length} items`);
+                    console.log(`💡 Consider enabling virtualScroll="true"`);
                 }
                 console.groupEnd();
             }
@@ -8302,14 +9047,41 @@ class DsxSelect {
             console.groupEnd();
         }
     }
+    // dsx-select.component.ts - Agregar estos métodos
+    /**
+     * Cuando el select recibe foco
+     */
+    onFocus() {
+        if (this.debug()) {
+            console.log('[DsxSelect] onFocus');
+        }
+    }
+    /**
+     * Cuando el panel de opciones se cierra (el usuario ha interactuado)
+     * Este es el evento clave que marca el control como touched
+     */
+    onHide() {
+        if (this.debug()) {
+            console.log('[DsxSelect] onHide - dropdown closed');
+        }
+        // Marcar como touched cuando el usuario cierra el dropdown
+        // Esto incluye: seleccionar un valor O hacer clic fuera
+        if (this.ngControl?.control && !this.ngControl.control.touched) {
+            this.ngControl.control.markAsTouched();
+            this.onTouched();
+            if (this.debug()) {
+                console.log('[DsxSelect] Control marked as touched (onHide)');
+            }
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DsxSelect, isStandalone: true, selector: "dsx-select", inputs: { dataList: { classPropertyName: "dataList", publicName: "dataList", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, useIcon: { classPropertyName: "useIcon", publicName: "useIcon", isSignal: true, isRequired: false, transformFunction: null }, itemIcon: { classPropertyName: "itemIcon", publicName: "itemIcon", isSignal: true, isRequired: false, transformFunction: null }, selectedIcon: { classPropertyName: "selectedIcon", publicName: "selectedIcon", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValue: "selectedValueChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DsxSelect, isStandalone: true, selector: "dsx-select", inputs: { dataList: { classPropertyName: "dataList", publicName: "dataList", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, secondaryField: { classPropertyName: "secondaryField", publicName: "secondaryField", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, useIcon: { classPropertyName: "useIcon", publicName: "useIcon", isSignal: true, isRequired: false, transformFunction: null }, itemIcon: { classPropertyName: "itemIcon", publicName: "itemIcon", isSignal: true, isRequired: false, transformFunction: null }, selectedIcon: { classPropertyName: "selectedIcon", publicName: "selectedIcon", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValue: "selectedValueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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    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"] }] });
+        ], 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    [virtualScroll]=\"virtualScroll()\"\r\n    [virtualScrollItemSize]=\"virtualScrollItemSize()\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (onFocus)=\"onFocus()\"\r\n    (onHide)=\"onHide()\"\r\n  >\r\n    <!-- Item template -->\r\n    <ng-template let-item #item>\r\n      <div class=\"flex align-items-center gap-2\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"itemIcon()\" class=\"text-cyan-500! mr-1\"></icon-dsx>\r\n        } @if (showSecondaryField()) {\r\n        <div class=\"flex flex-col\">\r\n          <span class=\"font-semibold text-sky-800\">\r\n            {{ item[resolvedOptionLabel()] }}\r\n          </span>\r\n          <span class=\"text-xs text-gray-400\">\r\n            {{ item[secondaryField()!] }}\r\n          </span>\r\n        </div>\r\n        } @else { {{ item[resolvedOptionLabel()] }} }\r\n      </div>\r\n    </ng-template>\r\n\r\n    <!-- Selected item template -->\r\n    <ng-template #selectedItem let-selectedOptions>\r\n      <div class=\"flex align-items-center gap-2\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"selectedIcon()\" class=\"text-green-600!\"></icon-dsx>\r\n        } @if (showSecondaryField() && selectedOptions) {\r\n        <div class=\"flex gap-x-2\">\r\n          <span class=\"font-semibold text-sky-700\">\r\n            {{ selectedOptions[resolvedOptionLabel()] }}\r\n          </span>\r\n          <span class=\"text-gray-400\">\r\n            {{ selectedOptions[secondaryField()!] }}\r\n          </span>\r\n        </div>\r\n        } @else { {{ 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<!-- Mensaje de error condicional -->\r\n@if (showError() && errorControl()) {\r\n<dsx-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: "dsx-message-error", inputs: ["control", "form", "debugMode"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxSelect, decorators: [{
             type: Component,
@@ -8325,8 +9097,8 @@ 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    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"] }] } });
+                    ], 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    [virtualScroll]=\"virtualScroll()\"\r\n    [virtualScrollItemSize]=\"virtualScrollItemSize()\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (onFocus)=\"onFocus()\"\r\n    (onHide)=\"onHide()\"\r\n  >\r\n    <!-- Item template -->\r\n    <ng-template let-item #item>\r\n      <div class=\"flex align-items-center gap-2\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"itemIcon()\" class=\"text-cyan-500! mr-1\"></icon-dsx>\r\n        } @if (showSecondaryField()) {\r\n        <div class=\"flex flex-col\">\r\n          <span class=\"font-semibold text-sky-800\">\r\n            {{ item[resolvedOptionLabel()] }}\r\n          </span>\r\n          <span class=\"text-xs text-gray-400\">\r\n            {{ item[secondaryField()!] }}\r\n          </span>\r\n        </div>\r\n        } @else { {{ item[resolvedOptionLabel()] }} }\r\n      </div>\r\n    </ng-template>\r\n\r\n    <!-- Selected item template -->\r\n    <ng-template #selectedItem let-selectedOptions>\r\n      <div class=\"flex align-items-center gap-2\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"selectedIcon()\" class=\"text-green-600!\"></icon-dsx>\r\n        } @if (showSecondaryField() && selectedOptions) {\r\n        <div class=\"flex gap-x-2\">\r\n          <span class=\"font-semibold text-sky-700\">\r\n            {{ selectedOptions[resolvedOptionLabel()] }}\r\n          </span>\r\n          <span class=\"text-gray-400\">\r\n            {{ selectedOptions[secondaryField()!] }}\r\n          </span>\r\n        </div>\r\n        } @else { {{ 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<!-- Mensaje de error condicional -->\r\n@if (showError() && errorControl()) {\r\n<dsx-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 }] }], secondaryField: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryField", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", 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"] }] } });
 
 /**
  * Servicio genérico para consumir endpoints REST de la API.
@@ -9583,24 +10355,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 // form-preview.service.ts
 class FormPreviewService {
+    environment;
+    constructor() {
+        // Inyectar el token en el constructor
+        this.environment = inject(ENVIRONMENT);
+    }
+    /**
+     * Construye el HTML para el preview de un objeto
+     * @param data - Objeto con los datos a mostrar
+     * @param fields - Configuración de los campos a mostrar
+     * @param options - Opciones de configuración
+     * @returns String con el HTML generado
+     *
+     * @example
+     * ```typescript
+     * const data = {
+     *   usuario: {
+     *     nombre: 'Juan Pérez',
+     *     email: 'juan@email.com'
+     *   },
+     *   estado: 1
+     * };
+     *
+     * const fields = [
+     *   { key: 'usuario.nombre', label: 'Nombre' },
+     *   { key: 'usuario.email', label: 'Email' },
+     *   {
+     *     key: 'estado',
+     *     label: 'Estado',
+     *     referenceMap: new Map([[1, 'Activo'], [2, 'Inactivo']])
+     *   }
+     * ];
+     *
+     * const html = this.formPreviewService.buildObjectSummaryHtml(data, fields, {
+     *   title: 'Datos del Usuario',
+     *   showEmpty: false,
+     *   compact: true,
+     *   debug: false
+     * });
+     * ```
+     */
     buildObjectSummaryHtml(data, fields, options) {
         const debug = options?.debug ?? false;
-        if (debug) {
+        const isDev = !this.environment.production;
+        // Solo ejecutar logs si estamos en desarrollo y debug está activado
+        if (debug && isDev) {
             this.debugInputData(data, fields, options);
         }
+        // Logs de error siempre se muestran en desarrollo si debug está activado
         if (!data) {
-            if (debug)
+            if (debug && isDev) {
                 console.error('❌ FormPreview: data es null o undefined');
+            }
             return '';
         }
         if (!fields || fields.length === 0) {
-            if (debug)
+            if (debug && isDev) {
                 console.error('❌ FormPreview: fields está vacío');
+            }
             return '';
         }
         const showEmpty = options?.showEmpty ?? false;
         const compact = options?.compact ?? true;
-        const title = options?.title || 'Datos del formulario';
+        const title = options?.title || '📋 Datos a guardar';
         const cells = [];
         const propiedadesNoEncontradas = [];
         for (const field of fields) {
@@ -9609,7 +10426,8 @@ class FormPreviewService {
             if (field.referenceMap && value !== undefined && value !== null) {
                 const originalValue = value;
                 value = this.resolveReferenceValue(value, field);
-                if (debug) {
+                // Logs de depuración solo en desarrollo
+                if (debug && isDev) {
                     console.log(`🔍 Resolviendo referencia para "${field.key}":`, {
                         original: originalValue,
                         resuelto: value,
@@ -9636,7 +10454,8 @@ class FormPreviewService {
                 value: valueText || '—',
             });
         }
-        if (debug) {
+        // Logs de depuración solo en desarrollo
+        if (debug && isDev) {
             if (propiedadesNoEncontradas.length > 0) {
                 console.warn('⚠️ FormPreview: Propiedades no encontradas:', propiedadesNoEncontradas);
                 console.warn('📋 Propiedades disponibles en data:', Object.keys(data));
@@ -9656,7 +10475,6 @@ class FormPreviewService {
         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));
         }
@@ -9665,40 +10483,32 @@ class FormPreviewService {
     resolveSingleReference(value, field) {
         if (!value)
             return value;
-        // Si ya es objeto, devolverlo
-        if (typeof value === 'object' && value !== null) {
+        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;
@@ -9711,9 +10521,8 @@ class FormPreviewService {
         const parts = path.split('.');
         let result = obj;
         for (const part of parts) {
-            if (result === null || result === undefined) {
+            if (result === null || result === undefined)
                 return undefined;
-            }
             result = result[part];
         }
         return result;
@@ -9816,6 +10625,9 @@ class FormPreviewService {
     `;
     }
     debugInputData(data, fields, options) {
+        const isDev = !this.environment.production;
+        if (!isDev)
+            return;
         console.group('🔍 FormPreview Debug');
         console.log('📊 Data:', data);
         console.log('📋 Propiedades disponibles:', data ? Object.keys(data) : 'data es null');
@@ -9866,13 +10678,17 @@ class FormPreviewService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FormPreviewService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [] });
 
 // table-preview.service.ts
 class TablePreviewService {
+    environment = inject(ENVIRONMENT);
+    isProduction = this.environment?.production ?? false;
     buildSingleRowSummaryHtml(row, columns, options) {
-        const debug = options?.debug ?? false; // Por defecto false
-        // Solo mostrar logs si debug está activado
+        const debug = !this.isProduction && (options?.debug ?? false);
+        const showRowId = options?.showRowId ?? false;
+        const title = options?.title || '🗑️ Datos a eliminar';
+        const icon = options?.icon || '';
         if (debug) {
             this.debugInputData(row, columns, options);
         }
@@ -9892,33 +10708,50 @@ class TablePreviewService {
         const rowId = options?.rowId?.trim() || '1';
         const cells = [];
         const propiedadesNoEncontradas = [];
+        // Si showRowId está activo, agregamos una fila con el ID
+        if (showRowId) {
+            cells.push({ label: 'ID', value: rowId });
+        }
         for (const col of columns) {
-            // Obtener key
             const key = typeof col === 'string' ? col : col.key;
-            // Obtener valor con validación
+            const formatFn = typeof col === 'object' ? col.format : undefined;
             const value = this.getNestedValue(row, key);
-            const valueText = this.formatValue(value);
-            // Registrar si no se encontró la propiedad
+            let valueText;
+            if (formatFn && typeof formatFn === 'function') {
+                try {
+                    valueText = formatFn(value, row) ?? '';
+                }
+                catch (error) {
+                    if (debug) {
+                        console.error(`❌ Error al formatear "${key}":`, error);
+                    }
+                    valueText = this.formatValue(value);
+                }
+            }
+            else {
+                valueText = this.formatValue(value);
+            }
             if (value === undefined) {
                 propiedadesNoEncontradas.push(key);
             }
-            // Filtrar vacíos
-            if (!includeEmpty && !valueText)
+            const isEmpty = value === null ||
+                value === undefined ||
+                value === '' ||
+                (Array.isArray(value) && value.length === 0);
+            if (!includeEmpty && isEmpty)
                 continue;
-            // Obtener label
             let label = headerMap[key];
             if (!label && typeof col === 'object' && col.label)
                 label = col.label;
             if (!label)
                 label = this.humanizeKey(key);
-            cells.push({ label, value: valueText || '—' });
+            const displayValue = isEmpty ? '—' : valueText;
+            cells.push({ label, value: displayValue });
         }
-        // Solo mostrar logs si debug está activado
         if (debug) {
             if (propiedadesNoEncontradas.length > 0) {
                 console.warn('⚠️ TablePreview: Propiedades no encontradas:', propiedadesNoEncontradas);
                 console.warn('📋 Propiedades disponibles en rowData:', Object.keys(row));
-                console.warn('💡 Sugerencia: Verifica que los nombres coincidan exactamente');
             }
             if (cells.length === 0) {
                 console.error('❌ TablePreview: No se generaron celdas. Verifica tus columnas y datos.');
@@ -9931,7 +10764,7 @@ class TablePreviewService {
         }
         if (!cells.length)
             return '';
-        return this.generateCompactHtml(rowId, cells, showLabel);
+        return this.generateCompactHtml(cells, showLabel, title, icon);
     }
     getNestedValue(obj, path) {
         if (!obj || !path)
@@ -9949,6 +10782,8 @@ class TablePreviewService {
     formatValue(value) {
         if (value === null || value === undefined)
             return '';
+        if (typeof value === 'number')
+            return String(value);
         if (value instanceof Date)
             return value.toLocaleDateString();
         if (typeof value === 'object') {
@@ -9970,30 +10805,29 @@ class TablePreviewService {
             .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
             .join(' ');
     }
-    generateCompactHtml(rowId, cells, showLabel) {
-        const rowIdWidth = Math.min(Math.max(rowId.length, 1), 3);
+    generateCompactHtml(cells, showLabel, title, icon) {
         return `
       <div style="margin: 8px 0; border: 1px solid #e9ecef; border-radius: 6px; overflow: hidden; background: #ffffff; font-size: 13px;">
+        <!-- Encabezado con título e ícono -->
+        <div style="padding: 10px 12px; background: #f8f9fa; border-bottom: 1px solid #e9ecef; font-weight: 600; color: #212529; text-align: center; font-size: 14px;">
+          ${icon ? `<span style="margin-right: 8px; font-size: 18px;">${icon}</span>` : ''}
+          ${this.escapeHtml(title)}
+        </div>
+        
+        <!-- Tabla de datos -->
         <table style="width: 100%; border-collapse: collapse; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
           <tbody>
             ${cells
             .map((cell, i) => `
               <tr style="border-bottom: ${i < cells.length - 1 ? '0.5px solid #f1f3f5' : 'none'}">
-                ${i === 0
-            ? `
-                  <td style="padding: 6px 8px; background: #f8f9fa; font-weight: 600; color: #6c757d; border-right: 0.5px solid #f1f3f5; vertical-align: top;">
-                    ${this.escapeHtml(rowId)}
-                  </td>
-                `
-            : ''}
                 ${showLabel
             ? `
-                  <td style="padding: 6px 8px; background: #f8f9fa; text-transform: uppercase; width: auto; color: #6c757d; border-right: 0.5px solid #f1f3f5;">
+                  <td style="padding: 8px 12px; background: #f8f9fa; text-transform: uppercase; width: 40%; color: #6c757d; border-right: 0.5px solid #f1f3f5; font-weight: 600; font-size: 11px; letter-spacing: 0.3px;">
                     ${this.escapeHtml(cell.label)}
                   </td>
                 `
             : ''}
-                <td style="padding: 6px 8px; color: #212529; font-weight: 500;">
+                <td style="padding: 8px 12px; color: #212529; font-weight: 500;">
                   ${this.escapeHtml(cell.value)}
                 </td>
               </tr>
@@ -10010,7 +10844,6 @@ class TablePreviewService {
         console.log('📋 Propiedades disponibles:', row ? Object.keys(row) : 'row es null');
         console.log('🎯 Columns solicitadas:', columns);
         console.log('⚙️ Options:', options);
-        // Verificar cada columna
         if (row) {
             for (const col of columns) {
                 const key = typeof col === 'string' ? col : col.key;
@@ -10018,7 +10851,6 @@ class TablePreviewService {
                 const existe = value !== undefined;
                 if (!existe) {
                     console.warn(`❌ Propiedad "${key}" NO existe en rowData`);
-                    // Sugerir propiedades similares
                     const similares = this.findSimilarProperties(key, Object.keys(row));
                     if (similares.length > 0) {
                         console.warn(`💡 Quizás quisiste decir: ${similares.join(', ')}`);
@@ -10036,16 +10868,14 @@ class TablePreviewService {
         const searchLower = search.toLowerCase();
         for (const prop of properties) {
             const propLower = prop.toLowerCase();
-            // Buscar similitudes (contiene o es similar)
             if (propLower.includes(searchLower) || searchLower.includes(propLower)) {
                 similares.push(prop);
             }
-            // Distancia de Levenshtein simple (máximo 3 caracteres de diferencia)
             else if (this.levenshteinDistance(searchLower, propLower) <= 3) {
                 similares.push(prop);
             }
         }
-        return similares.slice(0, 3); // Máximo 3 sugerencias
+        return similares.slice(0, 3);
     }
     levenshteinDistance(a, b) {
         if (a.length === 0)
@@ -10769,5 +11599,5 @@ function sorensenDiceValidator(dataSource, key, umbral = 0.7) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPES, AlertaService, AppMessageErrorComponent, AppMessageHelpComponent, ArrowNavigationDirective, AuthorizeService, AutoScrollHeightDirective, BaseCRUDService, CACHE_KEYS, CacheService, CssV2Component, DSX_PALETTE, DateIndicator, DocxPreviewComponent, DsxAddToolsModule, DsxAutocomplete, DsxButtonComponent, DsxEnableDisable, DsxMessagesService, DsxSelect, DsxStatusToggle, DteService, ENVIRONMENT, EndpointService, ErrorHandlerService, FileComponent, FormPreviewService, GTQFormatter, HeaderDsx, HelpersService, HttpHelpersService, INITIAL_PARAMETERS, IcoLabel, IconDsxComponent, JoinByPipe, JsonHighlightPipe, JsonValuesDebujComponent, JsonViewerComponent, KpicardComponent, LoadingComponent, LoadingLottieComponent, LogoDsxComponent, MasterDetailChangeService, NavbarDsxComponent, NetworkStatusComponent, OnlyRangoPatternDirective, ParameterValuesService, PdfPreviewComponent, PrimeNgModule, QrGenerator, ResultFileService, SWEET_ALERT_THEMES, ScreenInspector, SecurityService, SelectAllOnFocusDirective, SpinnerLoadingService, SweetAlert2DialogService, TablePreviewService, TemplateHighlight, TokenPurposeLogin, TruncatePipe, UtilityAddService, asyncExistsValidator, atLeastOneFieldRequiredValidator, chainControlGroups, createCurrencyFormatter, createInitialCache, createTypedCacheProvider, cuiValidator, dateMinMaxValidator, dateRangeValidator, dateRangeValidatorFromTo, developmentEnvironment, getActionMessageConfig, getZeroBasedRolIndex, guardTokenPurposeGuard, httpAuthorizeInterceptor, minimumAgeValidator, nitValidator, productionEnvironment, provideEnvironment, sorensenDiceValidator, templateStructureValidator, templateVariablesValidator, validateEnvironmentConfig };
+export { ACTION_TYPES, AlertaService, AppMessageErrorComponent, AppMessageHelpComponent, ArrowNavigationDirective, AuthorizeService, AutoScrollHeightDirective, BaseCRUDService, CACHE_KEYS, CacheService, CssV2Component, DSX_PALETTE, DateIndicator, DocxPreviewComponent, DsxAddToolsModule, DsxAutocomplete, DsxButtonComponent, DsxEnableDisable, DsxInputCurrency, DsxMessagesService, DsxSelect, DsxStatusToggle, DsxdateShort, DteService, ENVIRONMENT, EndpointService, ErrorHandlerService, FileComponent, FormPreviewService, GTQFormatter, HeaderDsx, HelpersService, HttpHelpersService, INITIAL_PARAMETERS, IcoLabel, IconDsxComponent, JoinByPipe, JsonHighlightPipe, JsonValuesDebujComponent, JsonViewerComponent, KpicardComponent, LoadingComponent, LoadingLottieComponent, LogoDsxComponent, MasterDetailChangeService, NavbarDsxComponent, NetworkStatusComponent, OnlyRangoPatternDirective, ParameterValuesService, PdfPreviewComponent, PrimeNgModule, QrGenerator, ResultFileService, SWEET_ALERT_THEMES, ScreenInspector, SecurityService, SelectAllOnFocusDirective, SpinnerLoadingService, SweetAlert2DialogService, TablePreviewService, TemplateHighlight, TokenPurposeLogin, TruncatePipe, UtilityAddService, asyncExistsValidator, atLeastOneFieldRequiredValidator, chainControlGroups, createCurrencyFormatter, createInitialCache, createTypedCacheProvider, cuiValidator, dateMinMaxValidator, dateRangeValidator, dateRangeValidatorFromTo, developmentEnvironment, getActionMessageConfig, getZeroBasedRolIndex, guardTokenPurposeGuard, httpAuthorizeInterceptor, minimumAgeValidator, nitValidator, productionEnvironment, provideEnvironment, sorensenDiceValidator, templateStructureValidator, templateVariablesValidator, validateEnvironmentConfig };
 //# sourceMappingURL=ngx-dsxlibrary.mjs.map