ngx-dsxlibrary 2.21.72 → 2.21.73

package/fesm2022/ngx-dsxlibrary.mjs

@@ -5,7 +5,7 @@ import { FormsModule, NG_VALUE_ACCESSOR, AbstractControl, FormControl, NG_VALIDA
 import * as i2 from 'primeng/togglebutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 import * as i1$1 from '@angular/common';
-import { CommonModule, AsyncPipe, JsonPipe, DatePipe, DecimalPipe, Location } from '@angular/common';
+import { CommonModule, AsyncPipe, JsonPipe, DecimalPipe, DatePipe, Location } from '@angular/common';
 import * as i2$1 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
 import * as i3 from 'primeng/api';
@@ -4301,25 +4301,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * | details   | Azul índigo    | Abrir detalle de registro                         |
  */
 const DSX_PALETTE = {
-    danger: '#EF5350',
-    warning: '#FF7043',
+    brown: '#8D6E63',
     caution: '#FFB300',
-    success: '#0ba055',
-    primary: '#0066cc',
-    info: '#26C6DA',
-    neutral: '#90A4AE',
-    restore: '#B0BEC5',
-    return: '#11438d',
-    view: '#00838F',
+    cyan: '#00BCD4',
+    danger: '#EF5350',
+    details: '#3949AB',
+    download: '#e6763a',
     excel: '#217346',
-    download: '#E65100',
     import: '#546E7A',
-    details: '#3949AB',
+    info: '#26C6DA',
     magenta: '#D81B60',
-    cyan: '#00BCD4',
+    neutral: '#90A4AE',
     olive: '#808000',
-    brown: '#8D6E63',
+    primary: '#0066cc',
+    restore: '#B0BEC5',
+    return: '#11438d',
     slate: '#607D8B',
+    success: '#0ba055',
+    upload: '#5C6BC0', // 👈 Agregado: Índigo para contrastar limpiamente con download (naranja)
+    view: '#00838F',
+    warning: '#FF7043',
 };
 /** Tipos que necesitan un `[id]` mayor a 0 para poder mostrarse. */
 const TYPES_REQUIRING_ID = [
@@ -4932,7 +4933,7 @@ const ACTION_CONFIG = {
     details: {
         label: 'Detalles',
         icon: 'list',
-        primeIcon: 'fa-solid fa-list-ol',
+        primeIcon: 'fa-solid fa-list-check',
         colorToken: 'details',
         tooltip: 'Detalle de registro',
     },
@@ -4960,7 +4961,7 @@ const ACTION_CONFIG = {
     download: {
         label: 'Descargar',
         icon: 'download',
-        primeIcon: 'pi pi-download',
+        primeIcon: 'fa-solid fa-cloud-arrow-down',
         colorToken: 'download',
         tooltip: 'Descargar archivo',
     },
@@ -5001,12 +5002,8 @@ class FileComponent {
     // --- Para el manejo de errores del formulario y debug ---
     _control = null;
     // Computed para el control de errores
-    errorControl = computed(() => {
-        return this._control;
-    }, ...(ngDevMode ? [{ debugName: "errorControl" }] : /* istanbul ignore next */ []));
-    // Signal para errores del control
+    errorControl = computed(() => this._control, ...(ngDevMode ? [{ debugName: "errorControl" }] : /* istanbul ignore next */ []));
     controlErrors = signal(null, ...(ngDevMode ? [{ debugName: "controlErrors" }] : /* istanbul ignore next */ []));
-    // Estado del control
     controlValid = signal(true, ...(ngDevMode ? [{ debugName: "controlValid" }] : /* istanbul ignore next */ []));
     controlTouched = signal(false, ...(ngDevMode ? [{ debugName: "controlTouched" }] : /* istanbul ignore next */ []));
     controlDirty = signal(false, ...(ngDevMode ? [{ debugName: "controlDirty" }] : /* istanbul ignore next */ []));
@@ -5022,33 +5019,44 @@ class FileComponent {
             return false;
         return this._control.errors?.['required'] ?? false;
     }
-    // Computed properties
+    // ============================================
+    // COMPUTED PROPERTIES - LIMPIOS Y CLAROS
+    // ============================================
+    // ✅ Hay archivo guardado en BD (fuente: existingFileName)
     hasExistingFile = computed(() => {
         if (!this.isViewActive())
             return false;
-        const hasFile = !!this.existingFileName() && !this.isReplacing() && !this.existingFile();
-        if (this.debug() && this.isViewActive())
-            this.log('hasExistingFile', { hasFile });
+        const hasFile = !!this.existingFileName() && !this.isReplacing();
+        if (this.debug() && this.isViewActive()) {
+            this.log('hasExistingFile', {
+                hasFile,
+                existingFileName: this.existingFileName(),
+                isReplacing: this.isReplacing(),
+            });
+        }
         return hasFile;
     }, ...(ngDevMode ? [{ debugName: "hasExistingFile" }] : /* istanbul ignore next */ []));
+    // ✅ Mostrar estado de edición (archivo guardado SIN archivo seleccionado)
     showExistingFile = computed(() => {
         if (!this.isViewActive())
             return false;
         const show = this.hasExistingFile() && !this.isReplacing();
-        if (this.debug() && this.isViewActive())
-            this.log('showExistingFile', { show });
+        if (this.debug() && this.isViewActive()) {
+            this.log('showExistingFile', {
+                show,
+                hasExistingFile: this.hasExistingFile(),
+                isReplacing: this.isReplacing(),
+            });
+        }
         return show;
     }, ...(ngDevMode ? [{ debugName: "showExistingFile" }] : /* istanbul ignore next */ []));
+    // ✅ El upload está habilitado solo si el padre no lo deshabilita
     isFileUploadEnabled = computed(() => {
         if (!this.isViewActive())
             return false;
-        if (this.disabled())
-            return false;
-        const enabled = !this.hasExistingFile() || this.isReplacing();
-        if (this.debug() && this.isViewActive())
-            this.log('isFileUploadEnabled', { enabled });
-        return enabled;
+        return !this.disabled();
     }, ...(ngDevMode ? [{ debugName: "isFileUploadEnabled" }] : /* istanbul ignore next */ []));
+    // ✅ Botón de reemplazo deshabilitado
     isReplaceButtonDisabled = computed(() => {
         if (!this.isViewActive())
             return true;
@@ -5058,6 +5066,7 @@ class FileComponent {
             return true;
         return false;
     }, ...(ngDevMode ? [{ debugName: "isReplaceButtonDisabled" }] : /* istanbul ignore next */ []));
+    // ✅ Tipo de archivo permitido para mostrar
     allowedFileTypeLabel = computed(() => {
         if (!this.isViewActive())
             return 'archivo';
@@ -5112,11 +5121,11 @@ class FileComponent {
             this.isViewActive.set(true);
             if (this.debug()) {
                 console.log('[FileComponent] ✅ View activated');
-                console.log('[FileComponent] 📋 Configuración actual:', {
+                console.log('[FileComponent] 📋 Configuración:', {
                     accept: this.accept(),
                     maxFileSize: this.maxFileSize(),
                     debug: this.debug(),
-                    isDevMode: this.isDevMode,
+                    existingFileName: this.existingFileName(),
                 });
             }
         });
@@ -5124,183 +5133,101 @@ class FileComponent {
     ngOnDestroy() {
         this.isViewActive.set(false);
         if (this.debug())
-            console.log('[FileComponent] 🗑️ Component destroyed');
+            console.log('[FileComponent] 🗑️ Destroyed');
     }
-    // --- Método para validar archivo manualmente ---
+    // --- Validación de archivo ---
     validateFile(file) {
         if (this.debug()) {
-            this.log('🔍 validateFile - Iniciando validación manual', {
+            this.log('🔍 validateFile', {
                 fileName: file.name,
                 fileSize: file.size,
-                fileType: file.type,
                 accept: this.accept(),
                 maxSize: this.maxFileSize(),
             });
         }
-        // Validar tipo de archivo
         const acceptStr = this.accept();
         if (acceptStr) {
             const acceptedExtensions = acceptStr
                 .split(',')
                 .map((ext) => ext.trim().toLowerCase());
             const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
-            if (this.debug()) {
-                this.log('🔍 validateFile - Verificando extensión', {
-                    fileExtension,
-                    acceptedExtensions,
-                    matches: acceptedExtensions.includes(fileExtension),
-                });
-            }
             if (!acceptedExtensions.includes(fileExtension)) {
                 const detail = this.invalidDetail().replace('{0}', this.allowedFileTypeLabel());
-                const message = `${this.invalidSummary()} ${detail}`;
-                if (this.debug())
-                    this.log('❌ validateFile - Tipo de archivo no permitido', {
-                        message,
-                    });
-                return { valid: false, error: message };
+                return { valid: false, error: `${this.invalidSummary()} ${detail}` };
             }
         }
-        // Validar tamaño
         const maxSizeBytes = this.maxFileSize() * 1024 * 1024;
-        if (this.debug()) {
-            this.log('🔍 validateFile - Verificando tamaño', {
-                fileSize: file.size,
-                maxSizeBytes,
-                maxSizeMB: this.maxFileSize(),
-            });
-        }
         if (file.size > maxSizeBytes) {
             const detail = this.invalidSizeDetail().replace('{0}', `${this.maxFileSize()} MB`);
-            const message = `${this.invalidSizeSummary()} ${detail}`;
-            if (this.debug())
-                this.log('❌ validateFile - Tamaño excedido', { message });
-            return { valid: false, error: message };
+            return { valid: false, error: `${this.invalidSizeSummary()} ${detail}` };
         }
         if (this.debug())
-            this.log('✅ validateFile - Archivo válido');
+            this.log('✅ validateFile - Válido');
         return { valid: true };
     }
-    // --- Métodos para el manejo de errores ---
-    showError() {
-        return !!(this._control && this._control.invalid && this._control.touched);
-    }
-    // Actualizar estado del control
-    updateControlState() {
-        if (this._control) {
-            this.controlValid.set(this._control.valid);
-            this.controlTouched.set(this._control.touched);
-            this.controlDirty.set(this._control.dirty);
-            this.controlErrors.set(this._control.errors);
-        }
-    }
-    // Forzar recarga (para debug)
-    forceReload() {
-        if (this.debug()) {
-            console.log('[FileComponent] 🔄 Force reload');
-            if (this._control) {
-                this._control.updateValueAndValidity();
-                this.updateControlState();
-            }
-            this.cdr.detectChanges();
-        }
-    }
     // --- Métodos públicos ---
     onSelect(event) {
-        const startTime = performance.now();
         if (this.debug()) {
-            this.log('📤 onSelect - Evento recibido', {
-                files: event.files,
-                currentFiles: event.currentFiles,
-                isFileUploadEnabled: this.isFileUploadEnabled(),
+            this.log('📤 onSelect', {
+                isReplacing: this.isReplacing(),
+                hasExistingFile: this.hasExistingFile(),
+                disabled: this.disabled(),
             });
         }
-        if (!this.isViewActive()) {
-            if (this.debug())
-                this.log('⚠️ Componente no activo, ignorando selección');
-            return;
-        }
-        if (!this.isFileUploadEnabled()) {
-            console.warn('[FileComponent] ⚠️ File upload is disabled');
+        if (!this.isViewActive() || this.disabled()) {
+            if (this.disabled())
+                console.warn('[FileComponent] ⚠️ Disabled');
             this.fileUpload()?.clear();
             return;
         }
         const file = event.files?.[0] ?? null;
         if (!file) {
             if (this.debug())
-                this.log('⚠️ No se seleccionó ningún archivo');
+                this.log('⚠️ No file selected');
             return;
         }
         if (this.debug()) {
-            this.log('📄 Archivo seleccionado', {
+            this.log('📄 File selected', {
                 name: file.name,
-                size: file.size,
+                size: this.formatFileSize(file.size),
                 type: file.type,
-                sizeFormatted: this.formatFileSize(file.size),
             });
         }
-        // Validar archivo manualmente
         const validation = this.validateFile(file);
         if (!validation.valid) {
-            // Archivo inválido - mostrar error y limpiar
             this.errorMessage.set(validation.error || 'Archivo inválido');
             this.fileUpload()?.clear();
             this.value = null;
             this.onChange(null);
-            if (this.debug()) {
-                this.log('❌ Archivo inválido - Limpiando selección', {
-                    error: validation.error,
-                });
-            }
-            // Auto-ocultar error después de 5 segundos
             setTimeout(() => {
                 this.errorMessage.set(null);
                 if (this.debug())
-                    this.log('⏰ Mensaje de error auto-ocultado después de 5s');
+                    this.log('⏰ Error auto-ocultado');
             }, 5000);
-            // Actualizar estado del control
             this.updateControlState();
             return;
         }
-        // Archivo válido
+        // ✅ Archivo válido
         this.errorMessage.set(null);
         this.value = file;
         this.onChange(file);
         this.markAsTouched();
-        if (this.isReplacing() && file) {
+        // ✅ Salir del modo reemplazo si estaba activo
+        if (this.isReplacing()) {
             this.isReplacing.set(false);
             if (this.debug())
-                this.log('🔄 Reemplazo completado');
+                this.log('🔄 Reemplazo completado', { file: file.name });
         }
         if (this.control) {
             this.control.updateValueAndValidity();
         }
-        // Actualizar estado del control
         this.updateControlState();
-        const endTime = performance.now();
-        if (this.debug()) {
-            this.log(`⏱️ onSelect completado en ${(endTime - startTime).toFixed(2)}ms`);
-        }
-    }
-    clear() {
         if (this.debug())
-            this.log('🧹 clear() - Limpiando componente');
-        if (!this.isViewActive())
-            return;
-        this.fileUpload()?.clear();
-        this.value = null;
-        this.errorMessage.set(null);
-        this.onChange(null);
-        this.markAsTouched();
-        if (this.control)
-            this.control.updateValueAndValidity();
-        this.updateControlState();
-        if (this.debug())
-            this.log('✅ Limpieza completada');
+            this.log('⏱️ onSelect completado');
     }
-    clearFile() {
+    clear() {
         if (this.debug())
-            this.log('🧹 clearFile() - Limpiando archivo seleccionado');
+            this.log('🧹 clearFile()');
         if (!this.isViewActive())
             return;
         this.fileUpload()?.clear();
@@ -5314,46 +5241,23 @@ class FileComponent {
         if (this.debug())
             this.log('✅ Archivo limpiado');
     }
-    writeValue(value) {
-        if (!this.isViewActive())
-            return;
-        if (this.debug()) {
-            this.log('✍️ writeValue', {
-                value: value?.name || null,
-                size: value?.size ? this.formatFileSize(value.size) : null,
-            });
-        }
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        if (this.debug())
-            this.log('📝 registerOnChange');
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        if (this.debug())
-            this.log('📝 registerOnTouched');
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        if (!this.isViewActive())
-            return;
+    startReplace() {
         if (this.debug()) {
-            this.log('🔒 setDisabledState', {
-                isDisabled,
-                previousState: this.disabled(),
+            this.log('🔄 startReplace', {
+                hasExistingFile: this.hasExistingFile(),
+                existingFileName: this.existingFileName(),
             });
         }
-        this.disabled.set(isDisabled);
-    }
-    startReplace() {
-        if (this.debug())
-            this.log('🔄 startReplace - Iniciando reemplazo');
         if (!this.isViewActive())
             return;
         if (this.disabled()) {
             if (this.debug())
-                this.log('⛔ Reemplazo cancelado - componente deshabilitado');
+                this.log('⛔ Reemplazo cancelado - disabled');
+            return;
+        }
+        if (!this.hasExistingFile()) {
+            if (this.debug())
+                this.log('⛔ Reemplazo cancelado - no hay archivo existente');
             return;
         }
         this.fileUpload()?.clear();
@@ -5366,7 +5270,7 @@ class FileComponent {
     }
     cancelReplace() {
         if (this.debug())
-            this.log('❌ cancelReplace - Cancelando reemplazo');
+            this.log('❌ cancelReplace');
         if (!this.isViewActive())
             return;
         this.isReplacing.set(false);
@@ -5380,29 +5284,87 @@ class FileComponent {
     }
     choose(event, chooseCallback) {
         if (this.debug())
-            this.log('🔍 choose - Abriendo selector de archivos');
+            this.log('🔍 choose - Abriendo selector');
         chooseCallback();
     }
+    // --- ControlValueAccessor ---
+    writeValue(value) {
+        if (!this.isViewActive())
+            return;
+        if (this.debug())
+            this.log('✍️ writeValue', { value: value?.name || null });
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        if (this.debug())
+            this.log('📝 registerOnChange');
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        if (this.debug())
+            this.log('📝 registerOnTouched');
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (!this.isViewActive())
+            return;
+        if (this.debug())
+            this.log('🔒 setDisabledState', { isDisabled });
+        this.disabled.set(isDisabled);
+    }
+    // --- Helpers ---
     formatFileSize(bytes) {
         if (!bytes)
             return '';
         const sizes = ['B', 'KB', 'MB', 'GB'];
         const i = Math.floor(Math.log(bytes) / Math.log(1024));
-        const value = (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0);
-        return `${value} ${sizes[i]}`;
+        return `${(bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0)} ${sizes[i]}`;
+    }
+    showError() {
+        return !!(this._control && this._control.invalid && this._control.touched);
+    }
+    updateControlState() {
+        if (this._control) {
+            this.controlValid.set(this._control.valid);
+            this.controlTouched.set(this._control.touched);
+            this.controlDirty.set(this._control.dirty);
+            this.controlErrors.set(this._control.errors);
+        }
+    }
+    // ✅ Método para diagnóstico (solo debug)
+    diagnoseState() {
+        if (this.debug()) {
+            console.log('🔍 === DIAGNÓSTICO ===');
+            console.log('isReplacing:', this.isReplacing());
+            console.log('existingFileName:', this.existingFileName());
+            console.log('hasExistingFile:', this.hasExistingFile());
+            console.log('showExistingFile:', this.showExistingFile());
+            console.log('isFileUploadEnabled:', this.isFileUploadEnabled());
+            console.log('isReplaceButtonDisabled:', this.isReplaceButtonDisabled());
+            console.log('value:', this.value);
+            console.log('disabled:', this.disabled());
+            console.log('isRequired:', this.isRequired());
+            console.log('🔍 === FIN ===');
+        }
+    }
+    forceReload() {
+        if (this.debug()) {
+            console.log('[FileComponent] 🔄 Force reload');
+            if (this._control) {
+                this._control.updateValueAndValidity();
+                this.updateControlState();
+            }
+            this.cdr.detectChanges();
+        }
     }
     // --- Validación ---
     validate(control) {
-        const startTime = performance.now();
         this._control = control;
         this.control = control;
-        if (!this.isViewActive()) {
-            if (this.debug())
-                this.log('⚠️ validate - Componente no activo');
+        if (!this.isViewActive())
             return null;
-        }
         if (this.debug()) {
-            this.log('🔍 validate - Ejecutando validación', {
+            this.log('🔍 validate', {
                 isRequired: this.isRequired(),
                 hasExistingFile: this.hasExistingFile(),
                 isReplacing: this.isReplacing(),
@@ -5411,39 +5373,18 @@ class FileComponent {
                 errorMessage: this.errorMessage(),
             });
         }
-        // Actualizar estado del control
         this.updateControlState();
-        // Si hay un mensaje de error, consideramos que la validación falla
         if (this.errorMessage()) {
-            if (this.debug())
-                this.log('❌ validate - Error: Hay un mensaje de error activo');
             return { invalidFile: true };
         }
         if (!this.isRequired()) {
-            if (this.debug())
-                this.log('✅ validate - No requerido, pasa validación');
             return null;
         }
-        if (this.hasExistingFile()) {
-            if (this.debug())
-                this.log('✅ validate - Archivo existente, pasa validación');
+        // ✅ Pasa si hay archivo guardado O hay archivo seleccionado
+        if (this.hasExistingFile() || this.value) {
             return null;
         }
-        if (this.isReplacing() && !this.value) {
-            if (this.debug())
-                this.log('❌ validate - Error: Reemplazando pero sin archivo');
-            return { required: true };
-        }
-        if (!this.hasExistingFile() && !this.value) {
-            if (this.debug())
-                this.log('❌ validate - Error: Sin archivo seleccionado');
-            return { required: true };
-        }
-        const endTime = performance.now();
-        if (this.debug()) {
-            this.log(`✅ validate - Validación exitosa en ${(endTime - startTime).toFixed(2)}ms`);
-        }
-        return null;
+        return { required: true };
     }
     // --- Privados ---
     onChange = (_) => { };
@@ -5453,7 +5394,7 @@ class FileComponent {
             this.touched = true;
             this.onTouched();
             if (this.debug())
-                this.log('👆 markAsTouched - Componente marcado como touched');
+                this.log('👆 markAsTouched');
         }
     }
     log(method, data) {
@@ -5471,7 +5412,7 @@ class FileComponent {
                 useExisting: forwardRef(() => FileComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\">\r\n      \uD83D\uDCC4 {{ overrideFileName() ?? existingFileName() }}\r\n    </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex flex-col gap-1\">\r\n    <div class=\"flex items-center gap-2\">\r\n      <p-fileUpload\r\n        fluid\r\n        #fileUpload\r\n        chooseIcon=\"fa-solid fa-file-arrow-up\"\r\n        [accept]=\"accept()\"\r\n        [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n        [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n        [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n        [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n        [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n        (onSelect)=\"onSelect($event)\"\r\n        [disabled]=\"!isFileUploadEnabled()\"\r\n        [pTooltip]=\"`${pTooltipOverride()} ${allowedFileTypeLabel()}`\"\r\n        [tooltipPosition]=\"tooltipPositionOverride()\"\r\n      >\r\n        <ng-template\r\n          #header\r\n          let-files\r\n          let-chooseCallback=\"chooseCallback\"\r\n          let-clearCallback=\"clearCallback\"\r\n        >\r\n          <!-- Mostrar el bot\u00F3n de upload SOLO si NO hay archivo seleccionado -->\r\n          @if (!files || files.length === 0) {\r\n            <p-button\r\n              (onClick)=\"choose($event, chooseCallback)\"\r\n              icon=\"fa-solid fa-cloud-arrow-up\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n            />\r\n          }\r\n\r\n          <span class=\"file-upload-placeholder\">\r\n            <i class=\"fa-regular fa-file-lines placeholder-icon\"></i>\r\n            <span class=\"placeholder-text\">\r\n              @if (files && files.length > 0) {\r\n                <span class=\"file-selected\">\r\n                  <i class=\"fa-regular fa-file-pdf file-icon\"></i>\r\n                  {{ files[0]?.name }}\r\n                  <span class=\"file-size\"\r\n                    >({{ formatFileSize(files[0]?.size) }})</span\r\n                  >\r\n                </span>\r\n              } @else if (allowedFileTypeLabel() !== \"archivo\") {\r\n                <span class=\"empty-warning\">Ning\u00FAn</span>\r\n                <span class=\"file-type empty-warning-type\">{{\r\n                  allowedFileTypeLabel()\r\n                }}</span>\r\n                <span class=\"empty-warning\">seleccionado</span>\r\n              } @else {\r\n                <span class=\"empty-warning\">Ning\u00FAn archivo seleccionado</span>\r\n              }\r\n            </span>\r\n          </span>\r\n\r\n          <!-- Mostrar bot\u00F3n de limpiar SOLO si hay archivo seleccionado -->\r\n          @if (files && files.length > 0) {\r\n            <p-button\r\n              icon=\"fa-solid fa-xmark\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              (onClick)=\"clearFile()\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n              styleClass=\"clear-button\"\r\n            />\r\n          }\r\n        </ng-template>\r\n        <!-- Ocultar la vista previa por defecto -->\r\n        <ng-template #content></ng-template>\r\n        <ng-template #file></ng-template>\r\n      </p-fileUpload>\r\n\r\n      @if (isReplacing() || existingFile()) {\r\n        <p-button\r\n          icon=\"pi pi-times\"\r\n          [rounded]=\"true\"\r\n          severity=\"secondary\"\r\n          (click)=\"cancelReplace()\"\r\n          [disabled]=\"disabled()\"\r\n          pTooltip=\"Cancelar reemplazo\"\r\n          tooltipPosition=\"top\"\r\n        />\r\n      }\r\n    </div>\r\n\r\n    <!-- Mensajes de error (validaci\u00F3n de PrimeNG) -->\r\n    @if (errorMessage()) {\r\n      <div class=\"file-error-message\">\r\n        <i class=\"pi pi-exclamation-circle\"></i>\r\n        {{ errorMessage() }}\r\n      </div>\r\n    }\r\n\r\n    <!-- Mensaje de error del formulario (dsx-message-error) -->\r\n    @if (showError() && errorControl()) {\r\n      <dsx-message-error [control]=\"errorControl()\" />\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n  <div class=\"debug-panel\">\r\n    <div class=\"debug-header\">\r\n      <div class=\"debug-info\">\r\n        <strong>\uD83D\uDD0D Debug File Upload:</strong>\r\n        <span class=\"debug-item\"\r\n          >Archivo: {{ value ? value.name : \"Ninguno\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Tama\u00F1o: {{ value ? formatFileSize(value.size) : \"-\" }}</span\r\n        >\r\n        <span class=\"debug-item\">Tipo: {{ value ? value.type : \"-\" }}</span>\r\n        <span\r\n          class=\"debug-item\"\r\n          [style.color]=\"controlValid() ? '#10b981' : '#ef4444'\"\r\n        >\r\n          {{ controlValid() ? \"\u2705 V\u00E1lido\" : \"\u274C Inv\u00E1lido\" }}\r\n        </span>\r\n        <!-- Cambiar esta l\u00EDnea en el panel de debug -->\r\n        <span class=\"debug-item\"\r\n          >Required: {{ isRequired() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Reemplazando: {{ isReplacing() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n      </div>\r\n      <div class=\"debug-actions\">\r\n        <button (click)=\"forceReload()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDD04 Recargar\r\n        </button>\r\n        <button (click)=\"clearFile()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83E\uDDF9 Limpiar\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if (errorMessage()) {\r\n      <div class=\"debug-error\">\r\n        <strong>\u26A0\uFE0F Error activo:</strong> {{ errorMessage() }}\r\n      </div>\r\n    }\r\n    @if (controlErrors()) {\r\n      <div class=\"debug-errors\">\r\n        <strong>\u274C Errores del formulario:</strong>\r\n        <pre>{{ controlErrors() | json }}</pre>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-size:clamp(.85rem,1vw + .5rem,1.4rem);font-weight:500;color:#2c3e50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}::ng-deep .p-fileupload .p-fileupload-header{display:flex!important;align-items:center!important;gap:.75rem!important;padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{background:transparent!important;border:2px dashed #d1d5db!important;border-radius:8px!important;padding:.5rem 1rem!important;margin:.5rem!important;min-height:40px!important;min-width:40px!important;transition:all .25s ease!important;color:#6b7280!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:not(:disabled):hover{border-color:#3b82f6!important;background:#eff6ff!important;box-shadow:0 0 0 3px #3b82f61a!important;color:#3b82f6!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:disabled{opacity:.5!important;cursor:not-allowed!important;border-color:#e5e7eb!important;color:#9ca3af!important}::ng-deep .p-fileupload .p-fileupload-header .p-button .p-button-icon{font-size:1.2rem!important;transition:color .25s ease!important}.file-upload-placeholder{display:flex;align-items:center;gap:.75rem;pointer-events:none;white-space:nowrap;padding:0 .5rem}.placeholder-icon{font-size:1.35rem;color:#94a3b8;transition:all .3s ease}.placeholder-text{color:#94a3b8;font-size:.875rem;font-weight:400;transition:all .3s ease;letter-spacing:.01em}.placeholder-text .file-type{color:#64748b;font-size:.8rem;font-weight:600;transition:all .3s ease;letter-spacing:.03em;text-transform:uppercase;background:#f1f5f9;padding:.1rem .4rem;border-radius:4px;margin:0 .1rem}.placeholder-text .empty-warning{color:#d97706;font-weight:500;transition:color .3s ease}.placeholder-text .file-type.empty-warning-type{color:#b45309;background:#fef3c7;font-weight:600}.file-selected{display:flex;align-items:center;gap:.5rem;color:#1f2937;font-weight:500;font-size:.85rem}.file-selected .file-icon{font-size:1.2rem;color:#bb1589}.file-selected .file-size{color:#9ca3af;font-weight:400;font-size:.75rem;margin-left:.25rem}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-icon{color:#3b82f6}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text{color:#1f2937}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text .empty-warning{color:#2563eb}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type.empty-warning-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-buttonbar{display:none!important}::ng-deep .p-fileupload .p-fileupload-content{padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-button.clear-button{background:transparent!important;border:none!important;border-radius:8px!important;padding:.5rem!important;min-width:40px!important;height:40px!important;transition:all .25s ease!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important}::ng-deep .p-fileupload .p-fileupload-header .p-button.clear-button:not(:disabled):hover{background:none!important;border:none!important;box-shadow:none!important;transform:scale(1.05)!important}::ng-deep .p-button.clear-button .p-button-icon{color:#6b7280!important;font-size:1.1rem!important;transition:all .25s ease!important}::ng-deep .p-button.clear-button:not(:disabled):hover .p-button-icon{color:#ef4444!important}::ng-deep .p-button.clear-button:disabled{opacity:.5!important;cursor:not-allowed!important}.file-error-message{display:flex;align-items:center;gap:.5rem;color:#dc2626;font-size:.875rem;font-weight:400;padding:.25rem .75rem;background:#fef2f2;border-radius:6px;border:1px solid #fecaca;animation:slideDown .3s ease}.file-error-message i{font-size:1rem;color:#dc2626;flex-shrink:0}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.debug-panel{margin-top:8px;font-size:11px;color:#374151;background:#f8fafc;padding:8px 12px;border-radius:6px;font-family:monospace;border:1px solid #e2e8f0;width:100%}.debug-header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.debug-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.debug-item{font-size:11px;color:#475569}.debug-item strong{color:#1e293b}.debug-actions{display:flex;gap:6px}.debug-btn{font-size:10px;padding:2px 10px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;transition:all .2s ease;color:#475569;font-family:monospace}.debug-btn:hover{background:#f1f5f9;border-color:#94a3b8}.debug-error,.debug-errors{margin-top:6px;padding:4px 8px;background:#fef2f2;border-radius:4px;color:#dc2626;font-size:11px;border:1px solid #fecaca}.debug-errors pre{margin:4px 0 0;font-size:10px;color:#991b1b;white-space:pre-wrap;word-break:break-all}@media(max-width:640px){.placeholder-icon{font-size:1.1rem!important}.placeholder-text{font-size:.75rem!important}.placeholder-text .file-type{font-size:.7rem!important;padding:.05rem .3rem!important}.file-selected{font-size:.75rem!important}.file-selected .file-icon{font-size:1rem!important}.file-selected .file-size{font-size:.65rem!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{padding:.4rem .75rem!important;min-height:34px!important;min-width:34px!important}::ng-deep .p-button.clear-button{min-width:34px!important;height:34px!important}.file-error-message{font-size:.75rem!important;padding:.2rem .5rem!important}.debug-panel{font-size:10px;padding:6px 8px}.debug-item{font-size:10px}.debug-btn{font-size:9px;padding:2px 6px}}\n"], dependencies: [{ kind: "component", type: FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "pipe", type: JsonPipe, name: "json" }] });
+        ], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\">\r\n      \uD83D\uDCC4 {{ overrideFileName() ?? existingFileName() }}\r\n    </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex flex-col gap-1\">\r\n    <div class=\"flex items-center gap-2\">\r\n      <p-fileUpload\r\n        fluid\r\n        #fileUpload\r\n        chooseIcon=\"fa-solid fa-file-arrow-up\"\r\n        [accept]=\"accept()\"\r\n        [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n        [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n        [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n        [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n        [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n        (onSelect)=\"onSelect($event)\"\r\n        [disabled]=\"!isFileUploadEnabled()\"\r\n        [pTooltip]=\"`${pTooltipOverride()} ${allowedFileTypeLabel()}`\"\r\n        [tooltipPosition]=\"tooltipPositionOverride()\"\r\n      >\r\n        <ng-template\r\n          #header\r\n          let-files\r\n          let-chooseCallback=\"chooseCallback\"\r\n          let-clearCallback=\"clearCallback\"\r\n        >\r\n          <!-- Mostrar el bot\u00F3n de upload SOLO si NO hay archivo seleccionado -->\r\n          @if (!files || files.length === 0) {\r\n            <p-button\r\n              (onClick)=\"choose($event, chooseCallback)\"\r\n              icon=\"fa-solid fa-cloud-arrow-up\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n            />\r\n          }\r\n\r\n          <span class=\"file-upload-placeholder\">\r\n            <i class=\"fa-regular fa-file-lines placeholder-icon\"></i>\r\n            <span class=\"placeholder-text\">\r\n              @if (files && files.length > 0) {\r\n                <span class=\"file-selected\">\r\n                  <i class=\"fa-regular fa-file-pdf file-icon\"></i>\r\n                  {{ files[0]?.name }}\r\n                  <span class=\"file-size\"\r\n                    >({{ formatFileSize(files[0]?.size) }})</span\r\n                  >\r\n                </span>\r\n              } @else if (allowedFileTypeLabel() !== \"archivo\") {\r\n                <span class=\"empty-warning\">Ning\u00FAn</span>\r\n                <span class=\"file-type empty-warning-type\">{{\r\n                  allowedFileTypeLabel()\r\n                }}</span>\r\n                <span class=\"empty-warning\">seleccionado</span>\r\n              } @else {\r\n                <span class=\"empty-warning\">Ning\u00FAn archivo seleccionado</span>\r\n              }\r\n            </span>\r\n          </span>\r\n\r\n          <!-- Mostrar bot\u00F3n de limpiar SOLO si hay archivo seleccionado -->\r\n          @if (files && files.length > 0) {\r\n            <p-button\r\n              icon=\"fa-solid fa-xmark\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              (onClick)=\"clear()\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n              styleClass=\"clear-button\"\r\n            />\r\n          }\r\n        </ng-template>\r\n        <!-- Ocultar la vista previa por defecto -->\r\n        <ng-template #content></ng-template>\r\n        <ng-template #file></ng-template>\r\n      </p-fileUpload>\r\n\r\n      <!-- Bot\u00F3n para cancelar remplazo -->\r\n      @if (isReplacing()) {\r\n        <p-button\r\n          icon=\"pi pi-times\"\r\n          [rounded]=\"true\"\r\n          severity=\"secondary\"\r\n          (click)=\"cancelReplace()\"\r\n          [disabled]=\"disabled()\"\r\n          pTooltip=\"Cancelar reemplazo\"\r\n          tooltipPosition=\"top\"\r\n        />\r\n      }\r\n    </div>\r\n\r\n    <!-- Mensajes de error (validaci\u00F3n de PrimeNG) -->\r\n    @if (errorMessage()) {\r\n      <div class=\"file-error-message\">\r\n        <i class=\"pi pi-exclamation-circle\"></i>\r\n        {{ errorMessage() }}\r\n      </div>\r\n    }\r\n\r\n    <!-- Mensaje de error del formulario (dsx-message-error) -->\r\n    @if (showError() && errorControl()) {\r\n      <dsx-message-error [control]=\"errorControl()\" />\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n  <div class=\"debug-panel\">\r\n    <div class=\"debug-header\">\r\n      <div class=\"debug-info\">\r\n        <strong>\uD83D\uDD0D Debug File Upload:</strong>\r\n        <span class=\"debug-item\"\r\n          >Archivo: {{ value ? value.name : \"Ninguno\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Tama\u00F1o: {{ value ? formatFileSize(value.size) : \"-\" }}</span\r\n        >\r\n        <span class=\"debug-item\">Tipo: {{ value ? value.type : \"-\" }}</span>\r\n        <span\r\n          class=\"debug-item\"\r\n          [style.color]=\"controlValid() ? '#10b981' : '#ef4444'\"\r\n        >\r\n          {{ controlValid() ? \"\u2705 V\u00E1lido\" : \"\u274C Inv\u00E1lido\" }}\r\n        </span>\r\n        <span class=\"debug-item\"\r\n          >Required: {{ isRequired() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Reemplazando: {{ isReplacing() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <!-- === ESTADOS ADICIONALES PARA DEBUG === -->\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA hasExistingFile: {{ hasExistingFile() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA existingFileName: {{ existingFileName() || \"null\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA isFileUploadEnabled: {{ isFileUploadEnabled() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA showExistingFile: {{ showExistingFile() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA value: {{ value ? value.name : \"null\" }}\r\n        </span>\r\n      </div>\r\n      <div class=\"debug-actions\">\r\n        <button (click)=\"forceReload()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDD04 Recargar\r\n        </button>\r\n        <button (click)=\"clear()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83E\uDDF9 Limpiar\r\n        </button>\r\n        <button (click)=\"diagnoseState()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDCCA Diagn\u00F3stico\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if (errorMessage()) {\r\n      <div class=\"debug-error\">\r\n        <strong>\u26A0\uFE0F Error activo:</strong> {{ errorMessage() }}\r\n      </div>\r\n    }\r\n    @if (controlErrors()) {\r\n      <div class=\"debug-errors\">\r\n        <strong>\u274C Errores del formulario:</strong>\r\n        <pre>{{ controlErrors() | json }}</pre>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-weight:500;color:#1d8678;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}::ng-deep .p-fileupload .p-fileupload-header{display:flex!important;align-items:center!important;gap:.75rem!important;padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{background:transparent!important;border:2px dashed #d1d5db!important;border-radius:8px!important;padding:.5rem 1rem!important;margin:.5rem!important;min-height:40px!important;min-width:40px!important;transition:all .25s ease!important;color:#6b7280!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:not(:disabled):hover{border-color:#3b82f6!important;background:#eff6ff!important;box-shadow:0 0 0 3px #3b82f61a!important;color:#3b82f6!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:disabled{opacity:.5!important;cursor:not-allowed!important;border-color:#e5e7eb!important;color:#9ca3af!important}::ng-deep .p-fileupload .p-fileupload-header .p-button .p-button-icon{font-size:1.2rem!important;transition:color .25s ease!important}.file-upload-placeholder{display:flex;align-items:center;gap:.75rem;pointer-events:none;white-space:nowrap;padding:0 .5rem}.placeholder-icon{font-size:1.35rem;color:#94a3b8;transition:all .3s ease}.placeholder-text{color:#94a3b8;font-size:.875rem;font-weight:400;transition:all .3s ease;letter-spacing:.01em}.placeholder-text .file-type{color:#64748b;font-size:.8rem;font-weight:600;transition:all .3s ease;letter-spacing:.03em;text-transform:uppercase;background:#f1f5f9;padding:.1rem .4rem;border-radius:4px;margin:0 .1rem}.placeholder-text .empty-warning{color:#d97706;font-weight:500;transition:color .3s ease}.placeholder-text .file-type.empty-warning-type{color:#b45309;background:#fef3c7;font-weight:600}.file-selected{display:flex;align-items:center;gap:.5rem;color:#1f2937;font-weight:500;font-size:.85rem}.file-selected .file-icon{font-size:1.2rem;color:#22994a}.file-selected .file-size{color:#9ca3af;font-weight:400;font-size:.75rem;margin-left:.25rem}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-icon{color:#3b82f6}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text{color:#1f2937}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text .empty-warning{color:#2563eb}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type.empty-warning-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-buttonbar{display:none!important}::ng-deep .p-fileupload .p-fileupload-content{padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-button.clear-button{background:transparent!important;border:none!important;border-radius:8px!important;padding:.5rem!important;min-width:40px!important;height:40px!important;transition:all .25s ease!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important}::ng-deep .p-fileupload .p-fileupload-header .p-button.clear-button:not(:disabled):hover{background:none!important;border:none!important;box-shadow:none!important;transform:scale(1.05)!important}::ng-deep .p-button.clear-button .p-button-icon{color:#6b7280!important;font-size:1.1rem!important;transition:all .25s ease!important}::ng-deep .p-button.clear-button:not(:disabled):hover .p-button-icon{color:#ef4444!important}::ng-deep .p-button.clear-button:disabled{opacity:.5!important;cursor:not-allowed!important}.file-error-message{display:flex;align-items:center;gap:.5rem;color:#dc2626;font-size:.875rem;font-weight:400;padding:.25rem .75rem;background:#fef2f2;border-radius:6px;border:1px solid #fecaca;animation:slideDown .3s ease}.file-error-message i{font-size:1rem;color:#dc2626;flex-shrink:0}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.debug-panel{margin-top:8px;font-size:11px;color:#374151;background:#f8fafc;padding:8px 12px;border-radius:6px;font-family:monospace;border:1px solid #e2e8f0;width:100%}.debug-header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.debug-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.debug-item{font-size:11px;color:#475569}.debug-item strong{color:#1e293b}.debug-actions{display:flex;gap:6px}.debug-btn{font-size:10px;padding:2px 10px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;transition:all .2s ease;color:#475569;font-family:monospace}.debug-btn:hover{background:#f1f5f9;border-color:#94a3b8}.debug-error,.debug-errors{margin-top:6px;padding:4px 8px;background:#fef2f2;border-radius:4px;color:#dc2626;font-size:11px;border:1px solid #fecaca}.debug-errors pre{margin:4px 0 0;font-size:10px;color:#991b1b;white-space:pre-wrap;word-break:break-all}@media(max-width:640px){.placeholder-icon{font-size:1.1rem!important}.placeholder-text{font-size:.75rem!important}.placeholder-text .file-type{font-size:.7rem!important;padding:.05rem .3rem!important}.file-selected{font-size:.75rem!important}.file-selected .file-icon{font-size:1rem!important}.file-selected .file-size{font-size:.65rem!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{padding:.4rem .75rem!important;min-height:34px!important;min-width:34px!important}::ng-deep .p-button.clear-button{min-width:34px!important;height:34px!important}.file-error-message{font-size:.75rem!important;padding:.2rem .5rem!important}.debug-panel{font-size:10px;padding:6px 8px}.debug-item{font-size:10px}.debug-btn{font-size:9px;padding:2px 6px}}\n"], dependencies: [{ kind: "component", type: FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "pipe", type: JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
@@ -5486,7 +5427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => FileComponent),
                             multi: true,
                         },
-                    ], template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\">\r\n      \uD83D\uDCC4 {{ overrideFileName() ?? existingFileName() }}\r\n    </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex flex-col gap-1\">\r\n    <div class=\"flex items-center gap-2\">\r\n      <p-fileUpload\r\n        fluid\r\n        #fileUpload\r\n        chooseIcon=\"fa-solid fa-file-arrow-up\"\r\n        [accept]=\"accept()\"\r\n        [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n        [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n        [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n        [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n        [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n        (onSelect)=\"onSelect($event)\"\r\n        [disabled]=\"!isFileUploadEnabled()\"\r\n        [pTooltip]=\"`${pTooltipOverride()} ${allowedFileTypeLabel()}`\"\r\n        [tooltipPosition]=\"tooltipPositionOverride()\"\r\n      >\r\n        <ng-template\r\n          #header\r\n          let-files\r\n          let-chooseCallback=\"chooseCallback\"\r\n          let-clearCallback=\"clearCallback\"\r\n        >\r\n          <!-- Mostrar el bot\u00F3n de upload SOLO si NO hay archivo seleccionado -->\r\n          @if (!files || files.length === 0) {\r\n            <p-button\r\n              (onClick)=\"choose($event, chooseCallback)\"\r\n              icon=\"fa-solid fa-cloud-arrow-up\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n            />\r\n          }\r\n\r\n          <span class=\"file-upload-placeholder\">\r\n            <i class=\"fa-regular fa-file-lines placeholder-icon\"></i>\r\n            <span class=\"placeholder-text\">\r\n              @if (files && files.length > 0) {\r\n                <span class=\"file-selected\">\r\n                  <i class=\"fa-regular fa-file-pdf file-icon\"></i>\r\n                  {{ files[0]?.name }}\r\n                  <span class=\"file-size\"\r\n                    >({{ formatFileSize(files[0]?.size) }})</span\r\n                  >\r\n                </span>\r\n              } @else if (allowedFileTypeLabel() !== \"archivo\") {\r\n                <span class=\"empty-warning\">Ning\u00FAn</span>\r\n                <span class=\"file-type empty-warning-type\">{{\r\n                  allowedFileTypeLabel()\r\n                }}</span>\r\n                <span class=\"empty-warning\">seleccionado</span>\r\n              } @else {\r\n                <span class=\"empty-warning\">Ning\u00FAn archivo seleccionado</span>\r\n              }\r\n            </span>\r\n          </span>\r\n\r\n          <!-- Mostrar bot\u00F3n de limpiar SOLO si hay archivo seleccionado -->\r\n          @if (files && files.length > 0) {\r\n            <p-button\r\n              icon=\"fa-solid fa-xmark\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              (onClick)=\"clearFile()\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n              styleClass=\"clear-button\"\r\n            />\r\n          }\r\n        </ng-template>\r\n        <!-- Ocultar la vista previa por defecto -->\r\n        <ng-template #content></ng-template>\r\n        <ng-template #file></ng-template>\r\n      </p-fileUpload>\r\n\r\n      @if (isReplacing() || existingFile()) {\r\n        <p-button\r\n          icon=\"pi pi-times\"\r\n          [rounded]=\"true\"\r\n          severity=\"secondary\"\r\n          (click)=\"cancelReplace()\"\r\n          [disabled]=\"disabled()\"\r\n          pTooltip=\"Cancelar reemplazo\"\r\n          tooltipPosition=\"top\"\r\n        />\r\n      }\r\n    </div>\r\n\r\n    <!-- Mensajes de error (validaci\u00F3n de PrimeNG) -->\r\n    @if (errorMessage()) {\r\n      <div class=\"file-error-message\">\r\n        <i class=\"pi pi-exclamation-circle\"></i>\r\n        {{ errorMessage() }}\r\n      </div>\r\n    }\r\n\r\n    <!-- Mensaje de error del formulario (dsx-message-error) -->\r\n    @if (showError() && errorControl()) {\r\n      <dsx-message-error [control]=\"errorControl()\" />\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n  <div class=\"debug-panel\">\r\n    <div class=\"debug-header\">\r\n      <div class=\"debug-info\">\r\n        <strong>\uD83D\uDD0D Debug File Upload:</strong>\r\n        <span class=\"debug-item\"\r\n          >Archivo: {{ value ? value.name : \"Ninguno\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Tama\u00F1o: {{ value ? formatFileSize(value.size) : \"-\" }}</span\r\n        >\r\n        <span class=\"debug-item\">Tipo: {{ value ? value.type : \"-\" }}</span>\r\n        <span\r\n          class=\"debug-item\"\r\n          [style.color]=\"controlValid() ? '#10b981' : '#ef4444'\"\r\n        >\r\n          {{ controlValid() ? \"\u2705 V\u00E1lido\" : \"\u274C Inv\u00E1lido\" }}\r\n        </span>\r\n        <!-- Cambiar esta l\u00EDnea en el panel de debug -->\r\n        <span class=\"debug-item\"\r\n          >Required: {{ isRequired() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Reemplazando: {{ isReplacing() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n      </div>\r\n      <div class=\"debug-actions\">\r\n        <button (click)=\"forceReload()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDD04 Recargar\r\n        </button>\r\n        <button (click)=\"clearFile()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83E\uDDF9 Limpiar\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if (errorMessage()) {\r\n      <div class=\"debug-error\">\r\n        <strong>\u26A0\uFE0F Error activo:</strong> {{ errorMessage() }}\r\n      </div>\r\n    }\r\n    @if (controlErrors()) {\r\n      <div class=\"debug-errors\">\r\n        <strong>\u274C Errores del formulario:</strong>\r\n        <pre>{{ controlErrors() | json }}</pre>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-size:clamp(.85rem,1vw + .5rem,1.4rem);font-weight:500;color:#2c3e50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}::ng-deep .p-fileupload .p-fileupload-header{display:flex!important;align-items:center!important;gap:.75rem!important;padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{background:transparent!important;border:2px dashed #d1d5db!important;border-radius:8px!important;padding:.5rem 1rem!important;margin:.5rem!important;min-height:40px!important;min-width:40px!important;transition:all .25s ease!important;color:#6b7280!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:not(:disabled):hover{border-color:#3b82f6!important;background:#eff6ff!important;box-shadow:0 0 0 3px #3b82f61a!important;color:#3b82f6!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:disabled{opacity:.5!important;cursor:not-allowed!important;border-color:#e5e7eb!important;color:#9ca3af!important}::ng-deep .p-fileupload .p-fileupload-header .p-button .p-button-icon{font-size:1.2rem!important;transition:color .25s ease!important}.file-upload-placeholder{display:flex;align-items:center;gap:.75rem;pointer-events:none;white-space:nowrap;padding:0 .5rem}.placeholder-icon{font-size:1.35rem;color:#94a3b8;transition:all .3s ease}.placeholder-text{color:#94a3b8;font-size:.875rem;font-weight:400;transition:all .3s ease;letter-spacing:.01em}.placeholder-text .file-type{color:#64748b;font-size:.8rem;font-weight:600;transition:all .3s ease;letter-spacing:.03em;text-transform:uppercase;background:#f1f5f9;padding:.1rem .4rem;border-radius:4px;margin:0 .1rem}.placeholder-text .empty-warning{color:#d97706;font-weight:500;transition:color .3s ease}.placeholder-text .file-type.empty-warning-type{color:#b45309;background:#fef3c7;font-weight:600}.file-selected{display:flex;align-items:center;gap:.5rem;color:#1f2937;font-weight:500;font-size:.85rem}.file-selected .file-icon{font-size:1.2rem;color:#bb1589}.file-selected .file-size{color:#9ca3af;font-weight:400;font-size:.75rem;margin-left:.25rem}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-icon{color:#3b82f6}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text{color:#1f2937}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text .empty-warning{color:#2563eb}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type.empty-warning-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-buttonbar{display:none!important}::ng-deep .p-fileupload .p-fileupload-content{padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-button.clear-button{background:transparent!important;border:none!important;border-radius:8px!important;padding:.5rem!important;min-width:40px!important;height:40px!important;transition:all .25s ease!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important}::ng-deep .p-fileupload .p-fileupload-header .p-button.clear-button:not(:disabled):hover{background:none!important;border:none!important;box-shadow:none!important;transform:scale(1.05)!important}::ng-deep .p-button.clear-button .p-button-icon{color:#6b7280!important;font-size:1.1rem!important;transition:all .25s ease!important}::ng-deep .p-button.clear-button:not(:disabled):hover .p-button-icon{color:#ef4444!important}::ng-deep .p-button.clear-button:disabled{opacity:.5!important;cursor:not-allowed!important}.file-error-message{display:flex;align-items:center;gap:.5rem;color:#dc2626;font-size:.875rem;font-weight:400;padding:.25rem .75rem;background:#fef2f2;border-radius:6px;border:1px solid #fecaca;animation:slideDown .3s ease}.file-error-message i{font-size:1rem;color:#dc2626;flex-shrink:0}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.debug-panel{margin-top:8px;font-size:11px;color:#374151;background:#f8fafc;padding:8px 12px;border-radius:6px;font-family:monospace;border:1px solid #e2e8f0;width:100%}.debug-header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.debug-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.debug-item{font-size:11px;color:#475569}.debug-item strong{color:#1e293b}.debug-actions{display:flex;gap:6px}.debug-btn{font-size:10px;padding:2px 10px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;transition:all .2s ease;color:#475569;font-family:monospace}.debug-btn:hover{background:#f1f5f9;border-color:#94a3b8}.debug-error,.debug-errors{margin-top:6px;padding:4px 8px;background:#fef2f2;border-radius:4px;color:#dc2626;font-size:11px;border:1px solid #fecaca}.debug-errors pre{margin:4px 0 0;font-size:10px;color:#991b1b;white-space:pre-wrap;word-break:break-all}@media(max-width:640px){.placeholder-icon{font-size:1.1rem!important}.placeholder-text{font-size:.75rem!important}.placeholder-text .file-type{font-size:.7rem!important;padding:.05rem .3rem!important}.file-selected{font-size:.75rem!important}.file-selected .file-icon{font-size:1rem!important}.file-selected .file-size{font-size:.65rem!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{padding:.4rem .75rem!important;min-height:34px!important;min-width:34px!important}::ng-deep .p-button.clear-button{min-width:34px!important;height:34px!important}.file-error-message{font-size:.75rem!important;padding:.2rem .5rem!important}.debug-panel{font-size:10px;padding:6px 8px}.debug-item{font-size:10px}.debug-btn{font-size:9px;padding:2px 6px}}\n"] }]
+                    ], template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\">\r\n      \uD83D\uDCC4 {{ overrideFileName() ?? existingFileName() }}\r\n    </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex flex-col gap-1\">\r\n    <div class=\"flex items-center gap-2\">\r\n      <p-fileUpload\r\n        fluid\r\n        #fileUpload\r\n        chooseIcon=\"fa-solid fa-file-arrow-up\"\r\n        [accept]=\"accept()\"\r\n        [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n        [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n        [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n        [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n        [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n        (onSelect)=\"onSelect($event)\"\r\n        [disabled]=\"!isFileUploadEnabled()\"\r\n        [pTooltip]=\"`${pTooltipOverride()} ${allowedFileTypeLabel()}`\"\r\n        [tooltipPosition]=\"tooltipPositionOverride()\"\r\n      >\r\n        <ng-template\r\n          #header\r\n          let-files\r\n          let-chooseCallback=\"chooseCallback\"\r\n          let-clearCallback=\"clearCallback\"\r\n        >\r\n          <!-- Mostrar el bot\u00F3n de upload SOLO si NO hay archivo seleccionado -->\r\n          @if (!files || files.length === 0) {\r\n            <p-button\r\n              (onClick)=\"choose($event, chooseCallback)\"\r\n              icon=\"fa-solid fa-cloud-arrow-up\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n            />\r\n          }\r\n\r\n          <span class=\"file-upload-placeholder\">\r\n            <i class=\"fa-regular fa-file-lines placeholder-icon\"></i>\r\n            <span class=\"placeholder-text\">\r\n              @if (files && files.length > 0) {\r\n                <span class=\"file-selected\">\r\n                  <i class=\"fa-regular fa-file-pdf file-icon\"></i>\r\n                  {{ files[0]?.name }}\r\n                  <span class=\"file-size\"\r\n                    >({{ formatFileSize(files[0]?.size) }})</span\r\n                  >\r\n                </span>\r\n              } @else if (allowedFileTypeLabel() !== \"archivo\") {\r\n                <span class=\"empty-warning\">Ning\u00FAn</span>\r\n                <span class=\"file-type empty-warning-type\">{{\r\n                  allowedFileTypeLabel()\r\n                }}</span>\r\n                <span class=\"empty-warning\">seleccionado</span>\r\n              } @else {\r\n                <span class=\"empty-warning\">Ning\u00FAn archivo seleccionado</span>\r\n              }\r\n            </span>\r\n          </span>\r\n\r\n          <!-- Mostrar bot\u00F3n de limpiar SOLO si hay archivo seleccionado -->\r\n          @if (files && files.length > 0) {\r\n            <p-button\r\n              icon=\"fa-solid fa-xmark\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              (onClick)=\"clear()\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n              styleClass=\"clear-button\"\r\n            />\r\n          }\r\n        </ng-template>\r\n        <!-- Ocultar la vista previa por defecto -->\r\n        <ng-template #content></ng-template>\r\n        <ng-template #file></ng-template>\r\n      </p-fileUpload>\r\n\r\n      <!-- Bot\u00F3n para cancelar remplazo -->\r\n      @if (isReplacing()) {\r\n        <p-button\r\n          icon=\"pi pi-times\"\r\n          [rounded]=\"true\"\r\n          severity=\"secondary\"\r\n          (click)=\"cancelReplace()\"\r\n          [disabled]=\"disabled()\"\r\n          pTooltip=\"Cancelar reemplazo\"\r\n          tooltipPosition=\"top\"\r\n        />\r\n      }\r\n    </div>\r\n\r\n    <!-- Mensajes de error (validaci\u00F3n de PrimeNG) -->\r\n    @if (errorMessage()) {\r\n      <div class=\"file-error-message\">\r\n        <i class=\"pi pi-exclamation-circle\"></i>\r\n        {{ errorMessage() }}\r\n      </div>\r\n    }\r\n\r\n    <!-- Mensaje de error del formulario (dsx-message-error) -->\r\n    @if (showError() && errorControl()) {\r\n      <dsx-message-error [control]=\"errorControl()\" />\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n  <div class=\"debug-panel\">\r\n    <div class=\"debug-header\">\r\n      <div class=\"debug-info\">\r\n        <strong>\uD83D\uDD0D Debug File Upload:</strong>\r\n        <span class=\"debug-item\"\r\n          >Archivo: {{ value ? value.name : \"Ninguno\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Tama\u00F1o: {{ value ? formatFileSize(value.size) : \"-\" }}</span\r\n        >\r\n        <span class=\"debug-item\">Tipo: {{ value ? value.type : \"-\" }}</span>\r\n        <span\r\n          class=\"debug-item\"\r\n          [style.color]=\"controlValid() ? '#10b981' : '#ef4444'\"\r\n        >\r\n          {{ controlValid() ? \"\u2705 V\u00E1lido\" : \"\u274C Inv\u00E1lido\" }}\r\n        </span>\r\n        <span class=\"debug-item\"\r\n          >Required: {{ isRequired() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Reemplazando: {{ isReplacing() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <!-- === ESTADOS ADICIONALES PARA DEBUG === -->\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA hasExistingFile: {{ hasExistingFile() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA existingFileName: {{ existingFileName() || \"null\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA isFileUploadEnabled: {{ isFileUploadEnabled() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA showExistingFile: {{ showExistingFile() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA value: {{ value ? value.name : \"null\" }}\r\n        </span>\r\n      </div>\r\n      <div class=\"debug-actions\">\r\n        <button (click)=\"forceReload()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDD04 Recargar\r\n        </button>\r\n        <button (click)=\"clear()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83E\uDDF9 Limpiar\r\n        </button>\r\n        <button (click)=\"diagnoseState()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDCCA Diagn\u00F3stico\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if (errorMessage()) {\r\n      <div class=\"debug-error\">\r\n        <strong>\u26A0\uFE0F Error activo:</strong> {{ errorMessage() }}\r\n      </div>\r\n    }\r\n    @if (controlErrors()) {\r\n      <div class=\"debug-errors\">\r\n        <strong>\u274C Errores del formulario:</strong>\r\n        <pre>{{ controlErrors() | json }}</pre>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-weight:500;color:#1d8678;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}::ng-deep .p-fileupload .p-fileupload-header{display:flex!important;align-items:center!important;gap:.75rem!important;padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{background:transparent!important;border:2px dashed #d1d5db!important;border-radius:8px!important;padding:.5rem 1rem!important;margin:.5rem!important;min-height:40px!important;min-width:40px!important;transition:all .25s ease!important;color:#6b7280!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:not(:disabled):hover{border-color:#3b82f6!important;background:#eff6ff!important;box-shadow:0 0 0 3px #3b82f61a!important;color:#3b82f6!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:disabled{opacity:.5!important;cursor:not-allowed!important;border-color:#e5e7eb!important;color:#9ca3af!important}::ng-deep .p-fileupload .p-fileupload-header .p-button .p-button-icon{font-size:1.2rem!important;transition:color .25s ease!important}.file-upload-placeholder{display:flex;align-items:center;gap:.75rem;pointer-events:none;white-space:nowrap;padding:0 .5rem}.placeholder-icon{font-size:1.35rem;color:#94a3b8;transition:all .3s ease}.placeholder-text{color:#94a3b8;font-size:.875rem;font-weight:400;transition:all .3s ease;letter-spacing:.01em}.placeholder-text .file-type{color:#64748b;font-size:.8rem;font-weight:600;transition:all .3s ease;letter-spacing:.03em;text-transform:uppercase;background:#f1f5f9;padding:.1rem .4rem;border-radius:4px;margin:0 .1rem}.placeholder-text .empty-warning{color:#d97706;font-weight:500;transition:color .3s ease}.placeholder-text .file-type.empty-warning-type{color:#b45309;background:#fef3c7;font-weight:600}.file-selected{display:flex;align-items:center;gap:.5rem;color:#1f2937;font-weight:500;font-size:.85rem}.file-selected .file-icon{font-size:1.2rem;color:#22994a}.file-selected .file-size{color:#9ca3af;font-weight:400;font-size:.75rem;margin-left:.25rem}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-icon{color:#3b82f6}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text{color:#1f2937}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text .empty-warning{color:#2563eb}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type.empty-warning-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-buttonbar{display:none!important}::ng-deep .p-fileupload .p-fileupload-content{padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-button.clear-button{background:transparent!important;border:none!important;border-radius:8px!important;padding:.5rem!important;min-width:40px!important;height:40px!important;transition:all .25s ease!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important}::ng-deep .p-fileupload .p-fileupload-header .p-button.clear-button:not(:disabled):hover{background:none!important;border:none!important;box-shadow:none!important;transform:scale(1.05)!important}::ng-deep .p-button.clear-button .p-button-icon{color:#6b7280!important;font-size:1.1rem!important;transition:all .25s ease!important}::ng-deep .p-button.clear-button:not(:disabled):hover .p-button-icon{color:#ef4444!important}::ng-deep .p-button.clear-button:disabled{opacity:.5!important;cursor:not-allowed!important}.file-error-message{display:flex;align-items:center;gap:.5rem;color:#dc2626;font-size:.875rem;font-weight:400;padding:.25rem .75rem;background:#fef2f2;border-radius:6px;border:1px solid #fecaca;animation:slideDown .3s ease}.file-error-message i{font-size:1rem;color:#dc2626;flex-shrink:0}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.debug-panel{margin-top:8px;font-size:11px;color:#374151;background:#f8fafc;padding:8px 12px;border-radius:6px;font-family:monospace;border:1px solid #e2e8f0;width:100%}.debug-header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.debug-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.debug-item{font-size:11px;color:#475569}.debug-item strong{color:#1e293b}.debug-actions{display:flex;gap:6px}.debug-btn{font-size:10px;padding:2px 10px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;transition:all .2s ease;color:#475569;font-family:monospace}.debug-btn:hover{background:#f1f5f9;border-color:#94a3b8}.debug-error,.debug-errors{margin-top:6px;padding:4px 8px;background:#fef2f2;border-radius:4px;color:#dc2626;font-size:11px;border:1px solid #fecaca}.debug-errors pre{margin:4px 0 0;font-size:10px;color:#991b1b;white-space:pre-wrap;word-break:break-all}@media(max-width:640px){.placeholder-icon{font-size:1.1rem!important}.placeholder-text{font-size:.75rem!important}.placeholder-text .file-type{font-size:.7rem!important;padding:.05rem .3rem!important}.file-selected{font-size:.75rem!important}.file-selected .file-icon{font-size:1rem!important}.file-selected .file-size{font-size:.65rem!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{padding:.4rem .75rem!important;min-height:34px!important;min-width:34px!important}::ng-deep .p-button.clear-button{min-width:34px!important;height:34px!important}.file-error-message{font-size:.75rem!important;padding:.2rem .5rem!important}.debug-panel{font-size:10px;padding:6px 8px}.debug-item{font-size:10px}.debug-btn{font-size:9px;padding:2px 6px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { existingFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFile", required: false }] }], existingFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFileName", required: false }] }], overrideFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "overrideFileName", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], pTooltipOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "pTooltipOverride", required: false }] }], tooltipPositionOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPositionOverride", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], invalidSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSummary", required: false }] }], invalidDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidDetail", required: false }] }], invalidSizeSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSizeSummary", required: false }] }], invalidSizeDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSizeDetail", required: false }] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }] } });
 
 function uid() {
@@ -5495,10 +5436,11 @@ function uid() {
 class JsonValuesDebujComponent {
     form = input(null, ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
     debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
-    debounceTime = input(300, ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ [])); // ✅ Configurable
+    debounceTime = input(300, ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ []));
     debugValue = signal(null, ...(ngDevMode ? [{ debugName: "debugValue" }] : /* istanbul ignore next */ []));
     serializedValue = signal('', ...(ngDevMode ? [{ debugName: "serializedValue" }] : /* istanbul ignore next */ []));
     fileInfo = signal(null, ...(ngDevMode ? [{ debugName: "fileInfo" }] : /* istanbul ignore next */ []));
+    filesSummary = signal('', ...(ngDevMode ? [{ debugName: "filesSummary" }] : /* istanbul ignore next */ []));
     isDevModeSignal = computed(() => isDevMode(), ...(ngDevMode ? [{ debugName: "isDevModeSignal" }] : /* istanbul ignore next */ []));
     isDebugEnabledSignal = computed(() => {
         const isDev = this.isDevModeSignal();
@@ -5521,7 +5463,6 @@ class JsonValuesDebujComponent {
     subscription;
     changesCount = 0;
     isInitialized = false;
-    lastLogTime = 0;
     shouldShowVisual = computed(() => {
         const show = this.isDevModeSignal();
         if (this._lastVisualState !== show) {
@@ -5594,17 +5535,17 @@ class JsonValuesDebujComponent {
             this.updateSerializedValue(rawValue);
             this.updateFileInfo(rawValue);
             if (this.shouldShowLogs()) {
+                const filesFound = this.findFilesInObject(rawValue);
                 console.log(`[JsonDebug:${this.id}] 📊 Procesamiento inicial`, {
                     hasFile: !!rawValue?.file,
                     fileType: rawValue?.file ? typeof rawValue.file : 'N/A',
                     serializedLength: this.serializedValue().length,
+                    filesFound: filesFound.length,
+                    filesSummary: filesFound.map((f) => f.path).join(', '),
                 });
             }
-            // ✅ Aplicar debounce y distinctUntilChanged para reducir logs
             this.subscription = form.valueChanges
-                .pipe(debounceTime(this.debounceTime()), // ✅ Esperar 300ms antes de emitir
-            distinctUntilChanged((prev, curr) => {
-                // ✅ Comparar si los valores son iguales
+                .pipe(debounceTime(this.debounceTime()), distinctUntilChanged((prev, curr) => {
                 return JSON.stringify(prev) === JSON.stringify(curr);
             }))
                 .subscribe(() => {
@@ -5617,10 +5558,15 @@ class JsonValuesDebujComponent {
                 const endTime = performance.now();
                 if (this.shouldShowLogs()) {
                     const elapsed = endTime - startTime;
+                    const filesFound = this.findFilesInObject(rawValue);
                     console.log(`[JsonDebug:${this.id}] 🔄 Cambio #${this.changesCount}`, {
                         tiempoMs: elapsed.toFixed(2),
                         hasFile: !!rawValue?.file,
                         serializedLength: this.serializedValue().length,
+                        filesFound: filesFound.length,
+                        filesSummary: filesFound
+                            .map((f) => `${f.path} (${f.file?.name || 'sin nombre'})`)
+                            .join(', '),
                         warning: elapsed > 10 ? '⚠️ Cambio lento' : '✅ OK',
                     });
                     if (this.changesCount % 10 === 0) {
@@ -5643,34 +5589,51 @@ class JsonValuesDebujComponent {
             });
         });
     }
+    // ✅ Método recursivo para encontrar archivos en toda la estructura
+    findFilesInObject(obj, path = 'root') {
+        const files = [];
+        if (!obj || typeof obj !== 'object') {
+            return files;
+        }
+        // Verificar si el objeto actual tiene un archivo
+        if (obj.file && (obj.file instanceof File || obj.file instanceof Blob)) {
+            files.push({
+                path: path,
+                file: obj.file,
+                name: obj.file.name || 'sin nombre',
+                size: obj.file.size || 0,
+                type: obj.file.type || 'desconocido',
+            });
+        }
+        // Si es un array, recorrer sus elementos
+        if (Array.isArray(obj)) {
+            obj.forEach((item, index) => {
+                const childFiles = this.findFilesInObject(item, `${path}[${index}]`);
+                files.push(...childFiles);
+            });
+        }
+        // Si es un objeto, recorrer sus propiedades
+        else if (typeof obj === 'object') {
+            Object.keys(obj).forEach((key) => {
+                // Saltar la propiedad 'file' si ya la procesamos y es un File
+                if (key === 'file' &&
+                    (obj.file instanceof File || obj.file instanceof Blob)) {
+                    return;
+                }
+                const childFiles = this.findFilesInObject(obj[key], `${path}.${key}`);
+                files.push(...childFiles);
+            });
+        }
+        return files;
+    }
     updateSerializedValue(value) {
         if (!value) {
             this.serializedValue.set('');
             return;
         }
         try {
-            const copy = { ...value };
-            if (copy.file && typeof copy.file === 'object') {
-                const fileProps = {};
-                if ('name' in copy.file && copy.file.name !== undefined) {
-                    fileProps.name = copy.file.name;
-                }
-                if ('size' in copy.file && copy.file.size !== undefined) {
-                    fileProps.size = copy.file.size;
-                }
-                if ('type' in copy.file && copy.file.type !== undefined) {
-                    fileProps.type = copy.file.type;
-                }
-                if ('lastModified' in copy.file &&
-                    copy.file.lastModified !== undefined) {
-                    fileProps.lastModified = copy.file.lastModified;
-                }
-                const otherProps = Object.keys(copy.file).filter((key) => !['name', 'size', 'type', 'lastModified'].includes(key));
-                otherProps.forEach((key) => {
-                    fileProps[key] = copy.file[key];
-                });
-                copy.file = fileProps;
-            }
+            // ✅ Clonar y procesar archivos en toda la estructura
+            const copy = this.cloneWithFileProcessing(value);
             this.serializedValue.set(JSON.stringify(copy, null, 2));
         }
         catch (error) {
@@ -5680,41 +5643,104 @@ class JsonValuesDebujComponent {
             }
         }
     }
+    // ✅ Clonar objeto procesando archivos recursivamente
+    cloneWithFileProcessing(obj) {
+        if (!obj || typeof obj !== 'object') {
+            return obj;
+        }
+        // Si es un File o Blob, extraer sus propiedades
+        if (obj instanceof File || obj instanceof Blob) {
+            const fileProps = {
+                __type: obj instanceof File ? 'File' : 'Blob',
+            };
+            if ('name' in obj && obj.name !== undefined) {
+                fileProps.name = obj.name;
+            }
+            if ('size' in obj && obj.size !== undefined) {
+                fileProps.size = obj.size;
+            }
+            if ('type' in obj && obj.type !== undefined) {
+                fileProps.type = obj.type;
+            }
+            if ('lastModified' in obj && obj.lastModified !== undefined) {
+                fileProps.lastModified = obj.lastModified;
+            }
+            return fileProps;
+        }
+        // Si es un array, procesar cada elemento
+        if (Array.isArray(obj)) {
+            return obj.map((item) => this.cloneWithFileProcessing(item));
+        }
+        // Si es un objeto, procesar cada propiedad
+        const result = {};
+        Object.keys(obj).forEach((key) => {
+            // Si la propiedad es 'file' y es un File/Blob, procesarla
+            if (key === 'file' &&
+                (obj[key] instanceof File || obj[key] instanceof Blob)) {
+                result[key] = this.cloneWithFileProcessing(obj[key]);
+            }
+            else {
+                result[key] = this.cloneWithFileProcessing(obj[key]);
+            }
+        });
+        return result;
+    }
     updateFileInfo(value) {
-        if (!value || !value.file) {
+        if (!value) {
             this.fileInfo.set(null);
+            this.filesSummary.set('');
             return;
         }
-        const file = value.file;
+        // ✅ Buscar todos los archivos en la estructura
+        const files = this.findFilesInObject(value);
+        if (files.length === 0) {
+            this.fileInfo.set({
+                exists: false,
+                isEmpty: true,
+                message: 'No hay archivos seleccionados',
+                count: 0,
+            });
+            this.filesSummary.set('📭 Sin archivos');
+            return;
+        }
+        // ✅ Resumir información de archivos
+        const summary = files
+            .map((f) => {
+            const name = f.file?.name || 'sin nombre';
+            const size = f.file?.size || 0;
+            const sizeStr = size > 0 ? `${(size / 1024).toFixed(1)} KB` : '0 KB';
+            return `${name} (${sizeStr}) en ${f.path}`;
+        })
+            .join('; ');
+        this.filesSummary.set(`📁 ${files.length} archivo(s): ${summary}`);
+        // ✅ Información detallada
         const info = {
             exists: true,
-            isFile: file instanceof File,
-            isBlob: file instanceof Blob,
-            hasName: 'name' in file,
-            hasSize: 'size' in file,
-            hasType: 'type' in file,
-            hasLastModified: 'lastModified' in file,
+            count: files.length,
+            files: files.map((f) => ({
+                path: f.path,
+                name: f.name,
+                size: f.size,
+                type: f.type,
+            })),
+            summary: summary,
         };
-        if ('name' in file && file.name !== undefined) {
-            info.name = file.name;
-        }
-        if ('size' in file && file.size !== undefined) {
-            info.size = file.size;
-        }
-        if ('type' in file && file.type !== undefined) {
-            info.mimeType = file.type;
-        }
-        if ('lastModified' in file && file.lastModified !== undefined) {
-            info.lastModified = file.lastModified;
-        }
         this.fileInfo.set(info);
     }
-    hasFile() {
-        return !!this.fileInfo();
+    hasFileProperty() {
+        const value = this.debugValue();
+        if (!value)
+            return false;
+        // ✅ Buscar archivos en toda la estructura
+        const files = this.findFilesInObject(value);
+        return files.length > 0;
     }
     getFileInfo() {
         return this.fileInfo();
     }
+    getFilesSummary() {
+        return this.filesSummary();
+    }
     ngOnDestroy() {
         if (this.shouldShowLogs()) {
             console.log(`[JsonDebug:${this.id}] 💀 Destroy`, {
@@ -5728,11 +5754,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 }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- json-values-debuj.component.html -->\r\n@if (shouldShowVisual()) {\r\n  <div class=\"json-debug-container\">\r\n    <div class=\"json-debug-header\">\r\n      <span class=\"json-debug-id\">\uD83D\uDD0D Debug #{{ id }}</span>\r\n      <span class=\"json-debug-info\">\r\n        @if (debugValue()) {\r\n          <span class=\"badge badge-success\">\u2713 Formulario activo</span>\r\n        } @else {\r\n          <span class=\"badge badge-danger\">\u2717 Sin formulario</span>\r\n        }\r\n      </span>\r\n    </div>\r\n\r\n    @if (debugValue()) {\r\n      <div class=\"json-debug-content\">\r\n        <!-- Informaci\u00F3n del archivo (si existe) -->\r\n        @if (hasFile()) {\r\n          <div class=\"file-info-box\">\r\n            <div class=\"file-info-header\">\uD83D\uDCC1 Archivo seleccionado</div>\r\n            <div class=\"file-info-grid\">\r\n              <div class=\"file-info-item\">\r\n                <span class=\"label\">Nombre:</span>\r\n                <span class=\"value\">{{ getFileInfo()?.name || \"N/A\" }}</span>\r\n              </div>\r\n              <div class=\"file-info-item\">\r\n                <span class=\"label\">Tama\u00F1o:</span>\r\n                <span class=\"value\"\r\n                  >{{ getFileInfo()?.size | number }} bytes</span\r\n                >\r\n              </div>\r\n              <div class=\"file-info-item\">\r\n                <span class=\"label\">Tipo:</span>\r\n                <span class=\"value\">{{\r\n                  getFileInfo()?.mimeType || \"N/A\"\r\n                }}</span>\r\n              </div>\r\n              @if (getFileInfo()?.lastModified) {\r\n                <div class=\"file-info-item\">\r\n                  <span class=\"label\">Modificado:</span>\r\n                  <span class=\"value\">{{\r\n                    getFileInfo()?.lastModified | date: \"medium\"\r\n                  }}</span>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        <!-- JSON -->\r\n        <div class=\"json-display\">\r\n          <pre class=\"json-colored\">{{ serializedValue() }}</pre>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".json-debug-container{margin:10px 0;border:1px solid #dee2e6;border-radius:8px;background-color:#f8f9fa;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;box-shadow:0 2px 8px #0000001a}.json-debug-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px 8px 0 0;color:#fff}.json-debug-id{font-weight:700;font-size:14px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.badge{padding:4px 14px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-success{background-color:#10b981;color:#fff;box-shadow:0 2px 4px #10b9814d}.badge-danger{background-color:#ef4444;color:#fff;box-shadow:0 2px 4px #ef44444d}.json-debug-content{padding:16px 20px}.file-info-box{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #bae6fd;border-radius:6px;padding:12px 16px;margin-bottom:16px}.file-info-header{font-weight:600;color:#0369a1;font-size:13px;margin-bottom:8px}.file-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px}.file-info-item{padding:4px 8px;background-color:#fff;border-radius:4px;border:1px solid #e5e7eb}.file-info-item .label{font-weight:600;color:#6b7280;margin-right:8px;font-size:12px}.file-info-item .value{color:#0369a1;font-family:Consolas,Monaco,Courier New,monospace;font-size:12px}.json-display{margin-top:0}.json-colored{margin:0;padding:16px 20px;background-color:#1e1e1e;border-radius:6px;overflow:auto;font-size:13px;line-height:1.7;color:#d4d4d4;min-height:50px;max-height:500px;font-family:Consolas,Monaco,Courier New,monospace;white-space:pre}.json-colored::-webkit-scrollbar{width:10px;height:10px}.json-colored::-webkit-scrollbar-track{background:#2d2d2d;border-radius:4px}.json-colored::-webkit-scrollbar-thumb{background:#666;border-radius:4px}.json-colored::-webkit-scrollbar-thumb:hover{background:#888}@media(max-width:768px){.json-debug-header{flex-direction:column;gap:8px;padding:10px 16px}.json-debug-content{padding:12px 16px}.file-info-grid{grid-template-columns:1fr}.json-colored{font-size:11px;padding:12px 14px;max-height:300px}}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }], 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 }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- json-values-debuj.component.html -->\r\n@if (shouldShowVisual()) {\r\n  <div class=\"json-debug-container\">\r\n    <div class=\"json-debug-header\">\r\n      <span class=\"json-debug-id\">\uD83D\uDD0D Debug #{{ id }}</span>\r\n      <span class=\"json-debug-info\">\r\n        @if (debugValue()) {\r\n          <span class=\"badge badge-success\">\u2713 Formulario activo</span>\r\n        } @else {\r\n          <span class=\"badge badge-danger\">\u2717 Sin formulario</span>\r\n        }\r\n      </span>\r\n    </div>\r\n\r\n    @if (debugValue()) {\r\n      <div class=\"json-debug-content\">\r\n        <!-- \u2705 Informaci\u00F3n de archivos encontrados en toda la estructura -->\r\n        @if (hasFileProperty()) {\r\n          <div class=\"file-info-box\">\r\n            <div class=\"file-info-header\">\r\n              \uD83D\uDCC1 Archivos encontrados ({{ getFileInfo()?.count || 0 }})\r\n            </div>\r\n            <div class=\"file-info-grid\">\r\n              @for (file of getFileInfo()?.files || []; track file.path) {\r\n                <div class=\"file-info-item file-item\">\r\n                  <div class=\"file-path\">\uD83D\uDCC4 {{ file.path }}</div>\r\n                  <div class=\"file-details\">\r\n                    <span class=\"label\">Nombre:</span>\r\n                    <span class=\"value\">{{ file.name }}</span>\r\n                  </div>\r\n                  <div class=\"file-details\">\r\n                    <span class=\"label\">Tama\u00F1o:</span>\r\n                    <span class=\"value\"\r\n                      >{{ file.size / 1024 | number: \"1.1-1\" }} KB</span\r\n                    >\r\n                  </div>\r\n                  <div class=\"file-details\">\r\n                    <span class=\"label\">Tipo:</span>\r\n                    <span class=\"value\">{{ file.type || \"Desconocido\" }}</span>\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <div class=\"file-info-box file-empty\">\r\n            <div class=\"file-info-header\">\uD83D\uDCED Sin archivos seleccionados</div>\r\n          </div>\r\n        }\r\n\r\n        <!-- JSON -->\r\n        <div class=\"json-display\">\r\n          <pre class=\"json-colored\">{{ serializedValue() }}</pre>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".json-debug-container{margin:10px 0;border:1px solid #dee2e6;border-radius:8px;background-color:#f8f9fa;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;box-shadow:0 2px 8px #0000001a}.json-debug-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px 8px 0 0;color:#fff}.json-debug-id{font-weight:700;font-size:14px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.badge{padding:4px 14px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-success{background-color:#10b981;color:#fff;box-shadow:0 2px 4px #10b9814d}.badge-danger{background-color:#ef4444;color:#fff;box-shadow:0 2px 4px #ef44444d}.json-debug-content{padding:16px 20px}.file-info-box{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #bae6fd;border-radius:6px;padding:12px 16px;margin-bottom:16px}.file-info-header{font-weight:600;color:#0369a1;font-size:13px;margin-bottom:8px}.file-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px}.file-info-item{padding:4px 8px;background-color:#fff;border-radius:4px;border:1px solid #e5e7eb}.file-info-item .label{font-weight:600;color:#6b7280;margin-right:8px;font-size:12px}.file-info-item .value{color:#0369a1;font-family:Consolas,Monaco,Courier New,monospace;font-size:12px}.json-display{margin-top:0}.json-colored{margin:0;padding:16px 20px;background-color:#1e1e1e;border-radius:6px;overflow:auto;font-size:13px;line-height:1.7;color:#d4d4d4;min-height:50px;max-height:500px;font-family:Consolas,Monaco,Courier New,monospace;white-space:pre}.json-colored::-webkit-scrollbar{width:10px;height:10px}.json-colored::-webkit-scrollbar-track{background:#2d2d2d;border-radius:4px}.json-colored::-webkit-scrollbar-thumb{background:#666;border-radius:4px}.json-colored::-webkit-scrollbar-thumb:hover{background:#888}@media(max-width:768px){.json-debug-header{flex-direction:column;gap:8px;padding:10px 16px}.json-debug-content{padding:12px 16px}.file-info-grid{grid-template-columns:1fr}.json-colored{font-size:11px;padding:12px 14px;max-height:300px}}\n"], dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }], 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: [DatePipe, DecimalPipe], encapsulation: ViewEncapsulation.None, template: "<!-- json-values-debuj.component.html -->\r\n@if (shouldShowVisual()) {\r\n  <div class=\"json-debug-container\">\r\n    <div class=\"json-debug-header\">\r\n      <span class=\"json-debug-id\">\uD83D\uDD0D Debug #{{ id }}</span>\r\n      <span class=\"json-debug-info\">\r\n        @if (debugValue()) {\r\n          <span class=\"badge badge-success\">\u2713 Formulario activo</span>\r\n        } @else {\r\n          <span class=\"badge badge-danger\">\u2717 Sin formulario</span>\r\n        }\r\n      </span>\r\n    </div>\r\n\r\n    @if (debugValue()) {\r\n      <div class=\"json-debug-content\">\r\n        <!-- Informaci\u00F3n del archivo (si existe) -->\r\n        @if (hasFile()) {\r\n          <div class=\"file-info-box\">\r\n            <div class=\"file-info-header\">\uD83D\uDCC1 Archivo seleccionado</div>\r\n            <div class=\"file-info-grid\">\r\n              <div class=\"file-info-item\">\r\n                <span class=\"label\">Nombre:</span>\r\n                <span class=\"value\">{{ getFileInfo()?.name || \"N/A\" }}</span>\r\n              </div>\r\n              <div class=\"file-info-item\">\r\n                <span class=\"label\">Tama\u00F1o:</span>\r\n                <span class=\"value\"\r\n                  >{{ getFileInfo()?.size | number }} bytes</span\r\n                >\r\n              </div>\r\n              <div class=\"file-info-item\">\r\n                <span class=\"label\">Tipo:</span>\r\n                <span class=\"value\">{{\r\n                  getFileInfo()?.mimeType || \"N/A\"\r\n                }}</span>\r\n              </div>\r\n              @if (getFileInfo()?.lastModified) {\r\n                <div class=\"file-info-item\">\r\n                  <span class=\"label\">Modificado:</span>\r\n                  <span class=\"value\">{{\r\n                    getFileInfo()?.lastModified | date: \"medium\"\r\n                  }}</span>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        <!-- JSON -->\r\n        <div class=\"json-display\">\r\n          <pre class=\"json-colored\">{{ serializedValue() }}</pre>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".json-debug-container{margin:10px 0;border:1px solid #dee2e6;border-radius:8px;background-color:#f8f9fa;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;box-shadow:0 2px 8px #0000001a}.json-debug-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px 8px 0 0;color:#fff}.json-debug-id{font-weight:700;font-size:14px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.badge{padding:4px 14px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-success{background-color:#10b981;color:#fff;box-shadow:0 2px 4px #10b9814d}.badge-danger{background-color:#ef4444;color:#fff;box-shadow:0 2px 4px #ef44444d}.json-debug-content{padding:16px 20px}.file-info-box{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #bae6fd;border-radius:6px;padding:12px 16px;margin-bottom:16px}.file-info-header{font-weight:600;color:#0369a1;font-size:13px;margin-bottom:8px}.file-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px}.file-info-item{padding:4px 8px;background-color:#fff;border-radius:4px;border:1px solid #e5e7eb}.file-info-item .label{font-weight:600;color:#6b7280;margin-right:8px;font-size:12px}.file-info-item .value{color:#0369a1;font-family:Consolas,Monaco,Courier New,monospace;font-size:12px}.json-display{margin-top:0}.json-colored{margin:0;padding:16px 20px;background-color:#1e1e1e;border-radius:6px;overflow:auto;font-size:13px;line-height:1.7;color:#d4d4d4;min-height:50px;max-height:500px;font-family:Consolas,Monaco,Courier New,monospace;white-space:pre}.json-colored::-webkit-scrollbar{width:10px;height:10px}.json-colored::-webkit-scrollbar-track{background:#2d2d2d;border-radius:4px}.json-colored::-webkit-scrollbar-thumb{background:#666;border-radius:4px}.json-colored::-webkit-scrollbar-thumb:hover{background:#888}@media(max-width:768px){.json-debug-header{flex-direction:column;gap:8px;padding:10px 16px}.json-debug-content{padding:12px 16px}.file-info-grid{grid-template-columns:1fr}.json-colored{font-size:11px;padding:12px 14px;max-height:300px}}\n"] }]
+            args: [{ selector: 'app-json-values-debuj', standalone: true, imports: [DatePipe, DecimalPipe], encapsulation: ViewEncapsulation.None, template: "<!-- json-values-debuj.component.html -->\r\n@if (shouldShowVisual()) {\r\n  <div class=\"json-debug-container\">\r\n    <div class=\"json-debug-header\">\r\n      <span class=\"json-debug-id\">\uD83D\uDD0D Debug #{{ id }}</span>\r\n      <span class=\"json-debug-info\">\r\n        @if (debugValue()) {\r\n          <span class=\"badge badge-success\">\u2713 Formulario activo</span>\r\n        } @else {\r\n          <span class=\"badge badge-danger\">\u2717 Sin formulario</span>\r\n        }\r\n      </span>\r\n    </div>\r\n\r\n    @if (debugValue()) {\r\n      <div class=\"json-debug-content\">\r\n        <!-- \u2705 Informaci\u00F3n de archivos encontrados en toda la estructura -->\r\n        @if (hasFileProperty()) {\r\n          <div class=\"file-info-box\">\r\n            <div class=\"file-info-header\">\r\n              \uD83D\uDCC1 Archivos encontrados ({{ getFileInfo()?.count || 0 }})\r\n            </div>\r\n            <div class=\"file-info-grid\">\r\n              @for (file of getFileInfo()?.files || []; track file.path) {\r\n                <div class=\"file-info-item file-item\">\r\n                  <div class=\"file-path\">\uD83D\uDCC4 {{ file.path }}</div>\r\n                  <div class=\"file-details\">\r\n                    <span class=\"label\">Nombre:</span>\r\n                    <span class=\"value\">{{ file.name }}</span>\r\n                  </div>\r\n                  <div class=\"file-details\">\r\n                    <span class=\"label\">Tama\u00F1o:</span>\r\n                    <span class=\"value\"\r\n                      >{{ file.size / 1024 | number: \"1.1-1\" }} KB</span\r\n                    >\r\n                  </div>\r\n                  <div class=\"file-details\">\r\n                    <span class=\"label\">Tipo:</span>\r\n                    <span class=\"value\">{{ file.type || \"Desconocido\" }}</span>\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <div class=\"file-info-box file-empty\">\r\n            <div class=\"file-info-header\">\uD83D\uDCED Sin archivos seleccionados</div>\r\n          </div>\r\n        }\r\n\r\n        <!-- JSON -->\r\n        <div class=\"json-display\">\r\n          <pre class=\"json-colored\">{{ serializedValue() }}</pre>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".json-debug-container{margin:10px 0;border:1px solid #dee2e6;border-radius:8px;background-color:#f8f9fa;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;box-shadow:0 2px 8px #0000001a}.json-debug-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px 8px 0 0;color:#fff}.json-debug-id{font-weight:700;font-size:14px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.badge{padding:4px 14px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-success{background-color:#10b981;color:#fff;box-shadow:0 2px 4px #10b9814d}.badge-danger{background-color:#ef4444;color:#fff;box-shadow:0 2px 4px #ef44444d}.json-debug-content{padding:16px 20px}.file-info-box{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #bae6fd;border-radius:6px;padding:12px 16px;margin-bottom:16px}.file-info-header{font-weight:600;color:#0369a1;font-size:13px;margin-bottom:8px}.file-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px}.file-info-item{padding:4px 8px;background-color:#fff;border-radius:4px;border:1px solid #e5e7eb}.file-info-item .label{font-weight:600;color:#6b7280;margin-right:8px;font-size:12px}.file-info-item .value{color:#0369a1;font-family:Consolas,Monaco,Courier New,monospace;font-size:12px}.json-display{margin-top:0}.json-colored{margin:0;padding:16px 20px;background-color:#1e1e1e;border-radius:6px;overflow:auto;font-size:13px;line-height:1.7;color:#d4d4d4;min-height:50px;max-height:500px;font-family:Consolas,Monaco,Courier New,monospace;white-space:pre}.json-colored::-webkit-scrollbar{width:10px;height:10px}.json-colored::-webkit-scrollbar-track{background:#2d2d2d;border-radius:4px}.json-colored::-webkit-scrollbar-thumb{background:#666;border-radius:4px}.json-colored::-webkit-scrollbar-thumb:hover{background:#888}@media(max-width:768px){.json-debug-header{flex-direction:column;gap:8px;padding:10px 16px}.json-debug-content{padding:12px 16px}.file-info-grid{grid-template-columns:1fr}.json-colored{font-size:11px;padding:12px 14px;max-height:300px}}\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 }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }] } });
 
 class IcoLabel {