ngx-dsxlibrary 2.21.71 → 2.21.72

package/fesm2022/ngx-dsxlibrary.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { input, forwardRef, Component, EventEmitter, effect, Output, viewChild, signal, Input, model, inject, computed, Injectable, isDevMode, InjectionToken, output, HostBinding, ChangeDetectorRef, untracked, Pipe, ViewEncapsulation, HostListener, Directive, NgZone, ElementRef, ChangeDetectionStrategy, NgModule, Injector, ViewChild } from '@angular/core';
+import { input, forwardRef, Component, EventEmitter, effect, Output, viewChild, signal, Input, model, inject, computed, Injectable, isDevMode, InjectionToken, output, HostBinding, ChangeDetectorRef, untracked, ViewEncapsulation, HostListener, Directive, NgZone, ElementRef, ChangeDetectionStrategy, NgModule, Pipe, Injector, ViewChild } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, AbstractControl, FormControl, NG_VALIDATORS, FormBuilder, Validators, ReactiveFormsModule, NgControl, FormGroup } from '@angular/forms';
 import * as i2 from 'primeng/togglebutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 import * as i1$1 from '@angular/common';
-import { CommonModule, AsyncPipe, DecimalPipe, Location, JsonPipe } from '@angular/common';
+import { CommonModule, AsyncPipe, JsonPipe, DatePipe, DecimalPipe, Location } from '@angular/common';
 import * as i2$1 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
 import * as i3 from 'primeng/api';
@@ -60,6 +60,7 @@ import { DrawerModule } from 'primeng/drawer';
 import { FieldsetModule } from 'primeng/fieldset';
 import { IconFieldModule } from 'primeng/iconfield';
 import { InputIconModule } from 'primeng/inputicon';
+import * as i1$8 from 'primeng/inputmask';
 import { InputMaskModule } from 'primeng/inputmask';
 import { InputNumberModule, InputNumber } from 'primeng/inputnumber';
 import { InputTextModule } from 'primeng/inputtext';
@@ -4978,7 +4979,6 @@ class FileComponent {
     existingFileName = input(null, ...(ngDevMode ? [{ debugName: "existingFileName" }] : /* istanbul ignore next */ []));
     overrideFileName = input(null, ...(ngDevMode ? [{ debugName: "overrideFileName" }] : /* istanbul ignore next */ []));
     debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
-    required = input(true, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     accept = input('.xls,.xlsx', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
     pTooltipOverride = input('Seleccione un archivo', ...(ngDevMode ? [{ debugName: "pTooltipOverride" }] : /* istanbul ignore next */ []));
     tooltipPositionOverride = input('top', ...(ngDevMode ? [{ debugName: "tooltipPositionOverride" }] : /* istanbul ignore next */ []));
@@ -4990,6 +4990,7 @@ class FileComponent {
     // Signals de estado
     isReplacing = signal(false, ...(ngDevMode ? [{ debugName: "isReplacing" }] : /* istanbul ignore next */ []));
     disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    errorMessage = signal(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     isViewActive = signal(false, ...(ngDevMode ? [{ debugName: "isViewActive" }] : /* istanbul ignore next */ []));
     value = null;
     touched = false;
@@ -4997,7 +4998,31 @@ class FileComponent {
     // Dependencias
     cdr = inject(ChangeDetectorRef);
     fileUpload = viewChild('fileUpload', ...(ngDevMode ? [{ debugName: "fileUpload" }] : /* istanbul ignore next */ []));
-    // Computed properties (solo se "activan" si la vista está activa)
+    // --- 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
+    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 */ []));
+    // --- Detección de modo desarrollo ---
+    get isDevMode() {
+        return (typeof ngDevMode !== 'undefined' &&
+            ngDevMode !== null &&
+            ngDevMode !== false);
+    }
+    // ✅ Método para detectar si el control es requerido
+    isRequired() {
+        if (!this._control)
+            return false;
+        return this._control.errors?.['required'] ?? false;
+    }
+    // Computed properties
     hasExistingFile = computed(() => {
         if (!this.isViewActive())
             return false;
@@ -5033,14 +5058,27 @@ class FileComponent {
             return true;
         return false;
     }, ...(ngDevMode ? [{ debugName: "isReplaceButtonDisabled" }] : /* istanbul ignore next */ []));
-    // --- Constructor: Aquí se crean los effects (contexto de inyección válido) ---
+    allowedFileTypeLabel = computed(() => {
+        if (!this.isViewActive())
+            return 'archivo';
+        const acceptStr = this.accept();
+        if (!acceptStr)
+            return 'archivo';
+        const extensions = acceptStr.split(',').map((ext) => ext.trim());
+        const cleanExtensions = extensions
+            .map((ext) => ext.replace('.', '').toUpperCase())
+            .filter((ext) => ext.length > 0);
+        if (cleanExtensions.length === 0)
+            return 'archivo';
+        if (cleanExtensions.length === 1)
+            return cleanExtensions[0];
+        return cleanExtensions.join(' o ');
+    }, ...(ngDevMode ? [{ debugName: "allowedFileTypeLabel" }] : /* istanbul ignore next */ []));
+    // --- Constructor ---
     constructor() {
-        // Efecto 1: Re-evaluar validación cuando cambie el estado relevante
         effect(() => {
-            // Solo ejecutar si la vista está activa
             if (!this.isViewActive())
                 return;
-            // "Tocar" estas signals para que el efecto dependa de ellas
             const hasFile = this.hasExistingFile();
             const replacing = this.isReplacing();
             const fileName = this.existingFileName();
@@ -5051,14 +5089,12 @@ class FileComponent {
                     fileName,
                 });
             if (this.control) {
-                // Usar untracked para no crear bucles infinitos
                 untracked(() => {
                     this.control?.updateValueAndValidity({ emitEvent: false });
                 });
             }
             this.cdr.detectChanges();
         });
-        // Efecto 2: Cancelar reemplazo si el componente se deshabilita
         effect(() => {
             if (!this.isViewActive())
                 return;
@@ -5072,104 +5108,341 @@ class FileComponent {
         });
     }
     ngAfterViewInit() {
-        // Activar el componente después de que la vista esté lista
         setTimeout(() => {
             this.isViewActive.set(true);
-            if (this.debug())
-                console.log('[FileComponent] View activated');
+            if (this.debug()) {
+                console.log('[FileComponent] ✅ View activated');
+                console.log('[FileComponent] 📋 Configuración actual:', {
+                    accept: this.accept(),
+                    maxFileSize: this.maxFileSize(),
+                    debug: this.debug(),
+                    isDevMode: this.isDevMode,
+                });
+            }
         });
     }
     ngOnDestroy() {
         this.isViewActive.set(false);
         if (this.debug())
-            console.log('[FileComponent] Component destroyed');
+            console.log('[FileComponent] 🗑️ Component destroyed');
+    }
+    // --- Método para validar archivo manualmente ---
+    validateFile(file) {
+        if (this.debug()) {
+            this.log('🔍 validateFile - Iniciando validación manual', {
+                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 };
+            }
+        }
+        // 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 };
+        }
+        if (this.debug())
+            this.log('✅ validateFile - Archivo 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 y ControlValueAccessor ---
+    // --- Métodos públicos ---
     onSelect(event) {
-        if (!this.isViewActive())
+        const startTime = performance.now();
+        if (this.debug()) {
+            this.log('📤 onSelect - Evento recibido', {
+                files: event.files,
+                currentFiles: event.currentFiles,
+                isFileUploadEnabled: this.isFileUploadEnabled(),
+            });
+        }
+        if (!this.isViewActive()) {
+            if (this.debug())
+                this.log('⚠️ Componente no activo, ignorando selección');
             return;
+        }
         if (!this.isFileUploadEnabled()) {
-            console.warn('File upload is disabled');
+            console.warn('[FileComponent] ⚠️ File upload is disabled');
             this.fileUpload()?.clear();
             return;
         }
         const file = event.files?.[0] ?? null;
-        if (this.debug())
-            this.log('File selected', { name: file?.name });
+        if (!file) {
+            if (this.debug())
+                this.log('⚠️ No se seleccionó ningún archivo');
+            return;
+        }
+        if (this.debug()) {
+            this.log('📄 Archivo seleccionado', {
+                name: file.name,
+                size: 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');
+            }, 5000);
+            // Actualizar estado del control
+            this.updateControlState();
+            return;
+        }
+        // Archivo válido
+        this.errorMessage.set(null);
         this.value = file;
         this.onChange(file);
         this.markAsTouched();
         if (this.isReplacing() && file) {
             this.isReplacing.set(false);
+            if (this.debug())
+                this.log('🔄 Reemplazo completado');
         }
         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');
     }
-    writeValue(value) {
+    clearFile() {
+        if (this.debug())
+            this.log('🧹 clearFile() - Limpiando archivo seleccionado');
         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('writeValue', { value: value?.name || null });
+            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;
+        if (this.debug()) {
+            this.log('🔒 setDisabledState', {
+                isDisabled,
+                previousState: this.disabled(),
+            });
+        }
         this.disabled.set(isDisabled);
     }
     startReplace() {
+        if (this.debug())
+            this.log('🔄 startReplace - Iniciando reemplazo');
         if (!this.isViewActive())
             return;
-        if (this.disabled())
+        if (this.disabled()) {
+            if (this.debug())
+                this.log('⛔ Reemplazo cancelado - componente deshabilitado');
             return;
+        }
         this.fileUpload()?.clear();
         this.value = null;
+        this.errorMessage.set(null);
         this.onChange(null);
         this.isReplacing.set(true);
         if (this.debug())
-            this.log('startReplace');
+            this.log('✅ Reemplazo iniciado');
     }
     cancelReplace() {
+        if (this.debug())
+            this.log('❌ cancelReplace - Cancelando reemplazo');
         if (!this.isViewActive())
             return;
         this.isReplacing.set(false);
         this.fileUpload()?.clear();
         this.value = null;
+        this.errorMessage.set(null);
         this.onChange(null);
         this.markAsTouched();
         if (this.debug())
-            this.log('cancelReplace');
+            this.log('✅ Reemplazo cancelado');
+    }
+    choose(event, chooseCallback) {
+        if (this.debug())
+            this.log('🔍 choose - Abriendo selector de archivos');
+        chooseCallback();
+    }
+    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]}`;
     }
     // --- Validación ---
     validate(control) {
+        const startTime = performance.now();
+        this._control = control;
         this.control = control;
-        if (!this.isViewActive())
+        if (!this.isViewActive()) {
+            if (this.debug())
+                this.log('⚠️ validate - Componente no activo');
             return null;
-        if (!this.required())
+        }
+        if (this.debug()) {
+            this.log('🔍 validate - Ejecutando validación', {
+                isRequired: this.isRequired(),
+                hasExistingFile: this.hasExistingFile(),
+                isReplacing: this.isReplacing(),
+                hasValue: !!this.value,
+                valueName: this.value?.name || null,
+                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.hasExistingFile()) {
+            if (this.debug())
+                this.log('✅ validate - Archivo existente, pasa validación');
             return null;
-        if (this.isReplacing() && !this.value)
+        }
+        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.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;
     }
     // --- Privados ---
@@ -5179,13 +5452,15 @@ class FileComponent {
         if (!this.touched) {
             this.touched = true;
             this.onTouched();
+            if (this.debug())
+                this.log('👆 markAsTouched - Componente marcado como touched');
         }
     }
     log(method, data) {
         console.log(`[FileComponent] ${method}`, data || '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FileComponent, isStandalone: true, selector: "dsx-file-upload", inputs: { existingFile: { classPropertyName: "existingFile", publicName: "existingFile", isSignal: true, isRequired: false, transformFunction: null }, existingFileName: { classPropertyName: "existingFileName", publicName: "existingFileName", isSignal: true, isRequired: false, transformFunction: null }, overrideFileName: { classPropertyName: "overrideFileName", publicName: "overrideFileName", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, pTooltipOverride: { classPropertyName: "pTooltipOverride", publicName: "pTooltipOverride", isSignal: true, isRequired: false, transformFunction: null }, tooltipPositionOverride: { classPropertyName: "tooltipPositionOverride", publicName: "tooltipPositionOverride", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, invalidSummary: { classPropertyName: "invalidSummary", publicName: "invalidSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidDetail: { classPropertyName: "invalidDetail", publicName: "invalidDetail", isSignal: true, isRequired: false, transformFunction: null }, invalidSizeSummary: { classPropertyName: "invalidSizeSummary", publicName: "invalidSizeSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidSizeDetail: { classPropertyName: "invalidSizeDetail", publicName: "invalidSizeDetail", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FileComponent, isStandalone: true, selector: "dsx-file-upload", inputs: { existingFile: { classPropertyName: "existingFile", publicName: "existingFile", isSignal: true, isRequired: false, transformFunction: null }, existingFileName: { classPropertyName: "existingFileName", publicName: "existingFileName", isSignal: true, isRequired: false, transformFunction: null }, overrideFileName: { classPropertyName: "overrideFileName", publicName: "overrideFileName", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, pTooltipOverride: { classPropertyName: "pTooltipOverride", publicName: "pTooltipOverride", isSignal: true, isRequired: false, transformFunction: null }, tooltipPositionOverride: { classPropertyName: "tooltipPositionOverride", publicName: "tooltipPositionOverride", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, invalidSummary: { classPropertyName: "invalidSummary", publicName: "invalidSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidDetail: { classPropertyName: "invalidDetail", publicName: "invalidDetail", isSignal: true, isRequired: false, transformFunction: null }, invalidSizeSummary: { classPropertyName: "invalidSizeSummary", publicName: "invalidSizeSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidSizeDetail: { classPropertyName: "invalidSizeDetail", publicName: "invalidSizeDetail", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FileComponent),
@@ -5196,11 +5471,11 @@ 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 items-center gap-2\">\r\n    <p-fileUpload\r\n      #fileUpload\r\n      mode=\"basic\"\r\n      [accept]=\"accept()\"\r\n      [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n      [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n      [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n      [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n      [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n      (onSelect)=\"onSelect($event)\"\r\n      [disabled]=\"!isFileUploadEnabled()\"\r\n      [pTooltip]=\"pTooltipOverride()\"\r\n      [tooltipPosition]=\"tooltipPositionOverride()\"\r\n    />\r\n\r\n    @if (isReplacing() || existingFile()) {\r\n      <p-button\r\n        icon=\"pi pi-times\"\r\n        [rounded]=\"true\"\r\n        severity=\"secondary\"\r\n        (click)=\"cancelReplace()\"\r\n        [disabled]=\"disabled()\"\r\n        pTooltip=\"Cancelar reemplazo\"\r\n        tooltipPosition=\"top\"\r\n      />\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-size:clamp(.85rem,1vw + .5rem,1.4rem);font-weight:500;color:#2c3e50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"], dependencies: [{ kind: "component", type: FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+        ], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\">\r\n      \uD83D\uDCC4 {{ overrideFileName() ?? existingFileName() }}\r\n    </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dsx-file-upload', imports: [FileUpload, Tooltip, Button], providers: [
+            args: [{ selector: 'dsx-file-upload', imports: [FileUpload, Tooltip, Button, JsonPipe, AppMessageErrorComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => FileComponent),
@@ -5211,119 +5486,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => FileComponent),
                             multi: true,
                         },
-                    ], template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\">\r\n      \uD83D\uDCC4 {{ overrideFileName() ?? existingFileName() }}\r\n    </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex items-center gap-2\">\r\n    <p-fileUpload\r\n      #fileUpload\r\n      mode=\"basic\"\r\n      [accept]=\"accept()\"\r\n      [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n      [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n      [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n      [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n      [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n      (onSelect)=\"onSelect($event)\"\r\n      [disabled]=\"!isFileUploadEnabled()\"\r\n      [pTooltip]=\"pTooltipOverride()\"\r\n      [tooltipPosition]=\"tooltipPositionOverride()\"\r\n    />\r\n\r\n    @if (isReplacing() || existingFile()) {\r\n      <p-button\r\n        icon=\"pi pi-times\"\r\n        [rounded]=\"true\"\r\n        severity=\"secondary\"\r\n        (click)=\"cancelReplace()\"\r\n        [disabled]=\"disabled()\"\r\n        pTooltip=\"Cancelar reemplazo\"\r\n        tooltipPosition=\"top\"\r\n      />\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-size:clamp(.85rem,1vw + .5rem,1.4rem);font-weight:500;color:#2c3e50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { existingFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFile", required: false }] }], existingFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFileName", required: false }] }], overrideFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "overrideFileName", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], pTooltipOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "pTooltipOverride", required: false }] }], tooltipPositionOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPositionOverride", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], invalidSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSummary", required: false }] }], invalidDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidDetail", required: false }] }], invalidSizeSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSizeSummary", required: false }] }], invalidSizeDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSizeDetail", required: false }] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }] } });
-
-class JsonHighlightPipe {
-    /**
-     * Stringifica el JSON manteniendo arrays en una línea para una vista más compacta
-     */
-    compactStringify(obj, indent = 0) {
-        const spaces = ' '.repeat(indent);
-        if (obj === null) {
-            return 'null';
-        }
-        if (typeof obj !== 'object') {
-            if (typeof obj === 'string') {
-                return JSON.stringify(obj);
-            }
-            return String(obj);
-        }
-        if (obj instanceof Date) {
-            return JSON.stringify(obj.toISOString());
-        }
-        if (Array.isArray(obj)) {
-            // Mantener arrays en una línea
-            const items = obj.map((item) => {
-                if (item instanceof Date) {
-                    return JSON.stringify(item.toISOString());
-                }
-                if (typeof item === 'object' && item !== null) {
-                    return this.compactStringify(item, indent);
-                }
-                return typeof item === 'string'
-                    ? JSON.stringify(item)
-                    : item === null
-                        ? 'null'
-                        : String(item);
-            });
-            return `[${items.join(', ')}]`;
-        }
-        // Para objetos, mantener la indentación
-        const keys = Object.keys(obj);
-        if (keys.length === 0) {
-            return '{}';
-        }
-        const innerIndent = indent + 2;
-        const innerSpaces = ' '.repeat(innerIndent);
-        const lines = keys.map((key) => {
-            const value = obj[key];
-            const stringified = value instanceof Date
-                ? JSON.stringify(value.toISOString())
-                : typeof value === 'object' && value !== null
-                    ? this.compactStringify(value, innerIndent)
-                    : typeof value === 'string'
-                        ? JSON.stringify(value)
-                        : value === null
-                            ? 'null'
-                            : String(value);
-            return `${innerSpaces}"${key}": ${stringified}`;
-        });
-        return `{\n${lines.join(',\n')}\n${spaces}}`;
-    }
-    instanceId = Math.random().toString(36).slice(2, 8);
-    executions = 0;
-    transform(value) {
-        if (isDevMode()) {
-            this.executions++;
-            if (this.executions % 10 === 0) {
-                console.log(`[jsonHighlight:${this.instanceId}] ${this.executions}`);
-            }
-        }
-        if (!value) {
-            return '';
-        }
-        const json = this.compactStringify(value);
-        // Detecta fechas ISO: "YYYY-MM-DDTHH:MM:SS.mmmZ"
-        const ISO_DATE_RE = /^"(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2}\.\d{3}Z)"$/;
-        // Aplica estilo y colores para diferenciar claves, valores, booleanos, números, etc.
-        return json
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?)/g, (match) => {
-            // Si es una clave (tiene dos puntos al final)
-            if (/:$/.test(match)) {
-                return `<span class="json-key">${match}</span>`;
-            }
-            // Detectar fechas ISO (YYYY-MM-DDTHH:MM:SS.mmmZ)
-            const isoMatch = match.match(ISO_DATE_RE);
-            if (isoMatch) {
-                return `<span class="json-string json-date">"<span class="json-date-part">${isoMatch[1]}</span><span class="json-date-sep">T</span><span class="json-date-time">${isoMatch[2]}</span>"</span>`;
-            }
-            // Si es un string (no tiene dos puntos)
-            return `<span class="json-string">${match}</span>`;
-        })
-            .replace(/\b(true|false|null)\b/g, (match) => {
-            if (match === 'null') {
-                return '<span class="json-null">null</span>';
-            }
-            return `<span class="json-boolean">${match}</span>`;
-        })
-            .replace(/\b(\d+\.?\d*)\b/g, '<span class="json-number">$1</span>')
-            .replace(/[{}\[\]]/g, '<span class="json-bracket">$&</span>')
-            .replace(/,/g, '<span class="json-comma">$&</span>')
-            .replace(/:/g, '<span class="json-colon">$&</span>');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: JsonHighlightPipe, isStandalone: true, name: "jsonHighlight" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonHighlightPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'jsonHighlight',
-                }]
-        }] });
+                    ], 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"] }]
+        }], 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() {
     return Math.random().toString(36).substring(2, 8);
@@ -5331,67 +5495,245 @@ 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
     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 */ []));
+    isDevModeSignal = computed(() => isDevMode(), ...(ngDevMode ? [{ debugName: "isDevModeSignal" }] : /* istanbul ignore next */ []));
+    isDebugEnabledSignal = computed(() => {
+        const isDev = this.isDevModeSignal();
+        const debug = this.debug();
+        const result = isDev && debug;
+        if (this._lastDebugState !== result) {
+            this._lastDebugState = result;
+            if (result) {
+                console.log(`[JsonDebug:${this.id}] 📝 Logs activados`, {
+                    isDevMode: isDev,
+                    debug: debug,
+                });
+            }
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "isDebugEnabledSignal" }] : /* istanbul ignore next */ []));
+    _lastDebugState = null;
+    _lastVisualState = null;
     id = uid();
     subscription;
     changesCount = 0;
-    // Indica si debemos mostrar el componente visualmente
-    get shouldShowVisual() {
-        // Solo mostrar visualmente en modo desarrollo
-        return isDevMode();
-    }
-    // Indica si debemos mostrar logs en consola
-    get shouldShowLogs() {
-        // Solo logs en desarrollo Y cuando debug está explícitamente true
-        return isDevMode() && this.debug() === true;
-    }
+    isInitialized = false;
+    lastLogTime = 0;
+    shouldShowVisual = computed(() => {
+        const show = this.isDevModeSignal();
+        if (this._lastVisualState !== show) {
+            this._lastVisualState = show;
+            if (this.shouldShowLogs()) {
+                console.log(`[JsonDebug:${this.id}] 👁️ Visual: ${show}`, {
+                    isDevMode: isDevMode(),
+                    reason: show ? 'Modo desarrollo activo' : 'Modo producción',
+                });
+            }
+        }
+        return show;
+    }, ...(ngDevMode ? [{ debugName: "shouldShowVisual" }] : /* istanbul ignore next */ []));
+    shouldShowLogs = computed(() => {
+        const isDev = this.isDevModeSignal();
+        const debug = this.debug();
+        const show = isDev && debug;
+        if (this._lastDebugState !== show) {
+            this._lastDebugState = show;
+            if (show) {
+                console.log(`[JsonDebug:${this.id}] 📝 Logs activados`, {
+                    isDevMode: isDev,
+                    debug: debug,
+                });
+            }
+        }
+        return show;
+    }, ...(ngDevMode ? [{ debugName: "shouldShowLogs" }] : /* istanbul ignore next */ []));
     constructor() {
-        if (this.shouldShowLogs) {
-            console.log('[JsonDebug] CONSTRUCTOR', this.id);
+        if (this.shouldShowLogs()) {
+            console.log(`[JsonDebug:${this.id}] 🏗️ Constructor`, {
+                id: this.id,
+                isDevMode: isDevMode(),
+                debug: this.debug(),
+                debounceTime: this.debounceTime(),
+            });
         }
         effect((onCleanup) => {
             const form = this.form();
-            if (!form)
+            if (!form) {
+                if (this.shouldShowLogs() && this.isInitialized) {
+                    console.log(`[JsonDebug:${this.id}] ⚠️ Formulario eliminado`);
+                }
+                if (this.subscription) {
+                    this.subscription.unsubscribe();
+                    this.subscription = undefined;
+                }
+                this.isInitialized = false;
                 return;
-            if (this.shouldShowLogs) {
-                console.log(`[json-debug:${this.id}] EFFECT INIT`, {
+            }
+            if (this.isInitialized && this.subscription) {
+                if (this.shouldShowLogs()) {
+                    console.log(`[JsonDebug:${this.id}] 🔄 Formulario ya inicializado, saltando...`);
+                }
+                return;
+            }
+            if (this.shouldShowLogs()) {
+                console.log(`[JsonDebug:${this.id}] 🔄 Effect iniciado`, {
                     controls: Object.keys(form.controls).length,
+                    timestamp: new Date().toISOString(),
+                    debounceTime: this.debounceTime(),
                 });
             }
-            this.subscription?.unsubscribe();
-            this.debugValue.set(form.getRawValue());
-            this.subscription = form.valueChanges.subscribe(() => {
-                this.debugValue.set(form.getRawValue());
-                if (this.shouldShowLogs) {
-                    this.changesCount++;
-                    console.log(`[json-debug:${this.id}] CHANGE #${this.changesCount}`, {
-                        formValue: form.getRawValue(),
+            if (this.subscription) {
+                this.subscription.unsubscribe();
+                this.subscription = undefined;
+            }
+            const rawValue = form.getRawValue();
+            this.debugValue.set(rawValue);
+            this.updateSerializedValue(rawValue);
+            this.updateFileInfo(rawValue);
+            if (this.shouldShowLogs()) {
+                console.log(`[JsonDebug:${this.id}] 📊 Procesamiento inicial`, {
+                    hasFile: !!rawValue?.file,
+                    fileType: rawValue?.file ? typeof rawValue.file : 'N/A',
+                    serializedLength: this.serializedValue().length,
+                });
+            }
+            // ✅ 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
+                return JSON.stringify(prev) === JSON.stringify(curr);
+            }))
+                .subscribe(() => {
+                const startTime = performance.now();
+                const rawValue = form.getRawValue();
+                this.debugValue.set(rawValue);
+                this.updateSerializedValue(rawValue);
+                this.updateFileInfo(rawValue);
+                this.changesCount++;
+                const endTime = performance.now();
+                if (this.shouldShowLogs()) {
+                    const elapsed = endTime - startTime;
+                    console.log(`[JsonDebug:${this.id}] 🔄 Cambio #${this.changesCount}`, {
+                        tiempoMs: elapsed.toFixed(2),
+                        hasFile: !!rawValue?.file,
+                        serializedLength: this.serializedValue().length,
+                        warning: elapsed > 10 ? '⚠️ Cambio lento' : '✅ OK',
                     });
+                    if (this.changesCount % 10 === 0) {
+                        console.log(`[JsonDebug:${this.id}] 📊 Estadísticas`, {
+                            cambios: this.changesCount,
+                            promedioMs: (elapsed / this.changesCount).toFixed(2),
+                            ultimoMs: elapsed.toFixed(2),
+                        });
+                    }
                 }
             });
+            this.isInitialized = true;
             onCleanup(() => {
-                this.subscription?.unsubscribe();
+                if (this.shouldShowLogs()) {
+                    console.log(`[JsonDebug:${this.id}] 🧹 Limpieza effect`, {
+                        cambiosProcesados: this.changesCount,
+                        isInitialized: this.isInitialized,
+                    });
+                }
             });
         });
     }
-    ngOnDestroy() {
-        if (this.shouldShowLogs) {
-            console.log('[JsonDebug] DESTROY', this.id);
+    updateSerializedValue(value) {
+        if (!value) {
+            this.serializedValue.set('');
+            return;
         }
-        this.subscription?.unsubscribe();
-        if (this.shouldShowLogs) {
-            console.log(`[json-debug:${this.id}] DESTROY SUMMARY`, {
+        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;
+            }
+            this.serializedValue.set(JSON.stringify(copy, null, 2));
+        }
+        catch (error) {
+            this.serializedValue.set('Error al serializar: ' + error);
+            if (this.shouldShowLogs()) {
+                console.error('[JsonDebug] Error serializing value:', error);
+            }
+        }
+    }
+    updateFileInfo(value) {
+        if (!value || !value.file) {
+            this.fileInfo.set(null);
+            return;
+        }
+        const file = value.file;
+        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,
+        };
+        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();
+    }
+    getFileInfo() {
+        return this.fileInfo();
+    }
+    ngOnDestroy() {
+        if (this.shouldShowLogs()) {
+            console.log(`[JsonDebug:${this.id}] 💀 Destroy`, {
                 totalChanges: this.changesCount,
+                tiempoVida: `${(performance.now() / 1000).toFixed(2)}s`,
             });
         }
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            this.subscription = undefined;
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonValuesDebujComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JsonValuesDebujComponent, isStandalone: true, selector: "app-json-values-debuj", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form() && shouldShowVisual) {\r\n  <div class=\"custom-container\">\r\n    <pre class=\"custom-pre\" [innerHTML]=\"debugValue() | jsonHighlight\"></pre>\r\n  </div>\r\n}\r\n", styles: [".custom-container{width:100%;overflow:auto;max-height:700px;background:#1e1e1e;border:1px solid #333;border-radius:8px;box-shadow:0 4px 12px #0000004d;padding:1.25rem;margin-bottom:1.25rem}.custom-pre{margin:0;white-space:pre-wrap;word-break:break-word;word-wrap:break-word;font-family:Segoe UI,Fira Code,JetBrains Mono,Consolas,Monaco,Courier New,monospace;font-size:15px;line-height:1.65;color:#d4d4d4;font-weight:400}.json-key{color:#9cdcfe;font-weight:600;font-size:15px}.json-string{color:#ce9178;font-size:15px}.json-number{color:#b5cea8;font-weight:600;font-size:15px}.json-boolean{color:#569cd6;font-weight:700;font-size:15px}.json-null{color:gray;font-style:italic;font-size:15px}.json-bracket{color:gold;font-weight:700;font-size:16px}.json-colon{color:#d4d4d4;font-weight:500}.json-comma{color:gray;font-size:14px}.json-date-part{color:#4fc1ff;font-weight:600;font-size:15px}.json-date-sep{color:gray}.json-date-time{color:#c586c0;font-size:15px}.custom-container::-webkit-scrollbar{width:12px;height:12px}.custom-container::-webkit-scrollbar-track{background:#252526;border-radius:6px}.custom-container::-webkit-scrollbar-thumb{background:#555;border-radius:6px;transition:background .2s ease}.custom-container::-webkit-scrollbar-thumb:hover{background:#777}.custom-container::-webkit-scrollbar-corner{background:#1e1e1e}.custom-container{font-smooth:antialiased;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.json-null,.json-undefined{color:#f48771;font-style:italic;opacity:.8}.json-empty{color:gray;font-style:italic}.json-comma+br{margin-bottom:2px}\n"], dependencies: [{ kind: "pipe", type: JsonHighlightPipe, name: "jsonHighlight" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JsonValuesDebujComponent, isStandalone: true, selector: "app-json-values-debuj", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonValuesDebujComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-json-values-debuj', standalone: true, imports: [JsonHighlightPipe], encapsulation: ViewEncapsulation.None, template: "@if (form() && shouldShowVisual) {\r\n  <div class=\"custom-container\">\r\n    <pre class=\"custom-pre\" [innerHTML]=\"debugValue() | jsonHighlight\"></pre>\r\n  </div>\r\n}\r\n", styles: [".custom-container{width:100%;overflow:auto;max-height:700px;background:#1e1e1e;border:1px solid #333;border-radius:8px;box-shadow:0 4px 12px #0000004d;padding:1.25rem;margin-bottom:1.25rem}.custom-pre{margin:0;white-space:pre-wrap;word-break:break-word;word-wrap:break-word;font-family:Segoe UI,Fira Code,JetBrains Mono,Consolas,Monaco,Courier New,monospace;font-size:15px;line-height:1.65;color:#d4d4d4;font-weight:400}.json-key{color:#9cdcfe;font-weight:600;font-size:15px}.json-string{color:#ce9178;font-size:15px}.json-number{color:#b5cea8;font-weight:600;font-size:15px}.json-boolean{color:#569cd6;font-weight:700;font-size:15px}.json-null{color:gray;font-style:italic;font-size:15px}.json-bracket{color:gold;font-weight:700;font-size:16px}.json-colon{color:#d4d4d4;font-weight:500}.json-comma{color:gray;font-size:14px}.json-date-part{color:#4fc1ff;font-weight:600;font-size:15px}.json-date-sep{color:gray}.json-date-time{color:#c586c0;font-size:15px}.custom-container::-webkit-scrollbar{width:12px;height:12px}.custom-container::-webkit-scrollbar-track{background:#252526;border-radius:6px}.custom-container::-webkit-scrollbar-thumb{background:#555;border-radius:6px;transition:background .2s ease}.custom-container::-webkit-scrollbar-thumb:hover{background:#777}.custom-container::-webkit-scrollbar-corner{background:#1e1e1e}.custom-container{font-smooth:antialiased;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.json-null,.json-undefined{color:#f48771;font-style:italic;opacity:.8}.json-empty{color:gray;font-style:italic}.json-comma+br{margin-bottom:2px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
+            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"] }]
+        }], 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 {
     ico = input.required(...(ngDevMode ? [{ debugName: "ico" }] : /* istanbul ignore next */ []));
@@ -8272,11 +8614,122 @@ class JoinByPipe {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JoinByPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: JoinByPipe, isStandalone: true, name: "joinBy" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JoinByPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JoinByPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'joinBy',
+                    standalone: true,
+                }]
+        }] });
+
+class JsonHighlightPipe {
+    /**
+     * Stringifica el JSON manteniendo arrays en una línea para una vista más compacta
+     */
+    compactStringify(obj, indent = 0) {
+        const spaces = ' '.repeat(indent);
+        if (obj === null) {
+            return 'null';
+        }
+        if (typeof obj !== 'object') {
+            if (typeof obj === 'string') {
+                return JSON.stringify(obj);
+            }
+            return String(obj);
+        }
+        if (obj instanceof Date) {
+            return JSON.stringify(obj.toISOString());
+        }
+        if (Array.isArray(obj)) {
+            // Mantener arrays en una línea
+            const items = obj.map((item) => {
+                if (item instanceof Date) {
+                    return JSON.stringify(item.toISOString());
+                }
+                if (typeof item === 'object' && item !== null) {
+                    return this.compactStringify(item, indent);
+                }
+                return typeof item === 'string'
+                    ? JSON.stringify(item)
+                    : item === null
+                        ? 'null'
+                        : String(item);
+            });
+            return `[${items.join(', ')}]`;
+        }
+        // Para objetos, mantener la indentación
+        const keys = Object.keys(obj);
+        if (keys.length === 0) {
+            return '{}';
+        }
+        const innerIndent = indent + 2;
+        const innerSpaces = ' '.repeat(innerIndent);
+        const lines = keys.map((key) => {
+            const value = obj[key];
+            const stringified = value instanceof Date
+                ? JSON.stringify(value.toISOString())
+                : typeof value === 'object' && value !== null
+                    ? this.compactStringify(value, innerIndent)
+                    : typeof value === 'string'
+                        ? JSON.stringify(value)
+                        : value === null
+                            ? 'null'
+                            : String(value);
+            return `${innerSpaces}"${key}": ${stringified}`;
+        });
+        return `{\n${lines.join(',\n')}\n${spaces}}`;
+    }
+    instanceId = Math.random().toString(36).slice(2, 8);
+    executions = 0;
+    transform(value) {
+        if (isDevMode()) {
+            this.executions++;
+            if (this.executions % 10 === 0) {
+                console.log(`[jsonHighlight:${this.instanceId}] ${this.executions}`);
+            }
+        }
+        if (!value) {
+            return '';
+        }
+        const json = this.compactStringify(value);
+        // Detecta fechas ISO: "YYYY-MM-DDTHH:MM:SS.mmmZ"
+        const ISO_DATE_RE = /^"(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2}\.\d{3}Z)"$/;
+        // Aplica estilo y colores para diferenciar claves, valores, booleanos, números, etc.
+        return json
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?)/g, (match) => {
+            // Si es una clave (tiene dos puntos al final)
+            if (/:$/.test(match)) {
+                return `<span class="json-key">${match}</span>`;
+            }
+            // Detectar fechas ISO (YYYY-MM-DDTHH:MM:SS.mmmZ)
+            const isoMatch = match.match(ISO_DATE_RE);
+            if (isoMatch) {
+                return `<span class="json-string json-date">"<span class="json-date-part">${isoMatch[1]}</span><span class="json-date-sep">T</span><span class="json-date-time">${isoMatch[2]}</span>"</span>`;
+            }
+            // Si es un string (no tiene dos puntos)
+            return `<span class="json-string">${match}</span>`;
+        })
+            .replace(/\b(true|false|null)\b/g, (match) => {
+            if (match === 'null') {
+                return '<span class="json-null">null</span>';
+            }
+            return `<span class="json-boolean">${match}</span>`;
+        })
+            .replace(/\b(\d+\.?\d*)\b/g, '<span class="json-number">$1</span>')
+            .replace(/[{}\[\]]/g, '<span class="json-bracket">$&</span>')
+            .replace(/,/g, '<span class="json-comma">$&</span>')
+            .replace(/:/g, '<span class="json-colon">$&</span>');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: JsonHighlightPipe, isStandalone: true, name: "jsonHighlight" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonHighlightPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'joinBy',
-                    standalone: true,
+                    name: 'jsonHighlight',
                 }]
         }] });
 
@@ -8513,26 +8966,246 @@ class DsxdateShort {
                 useExisting: forwardRef(() => DsxdateShort),
                 multi: true,
             },
-        ], ngImport: i0, template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    appendTo=\"body\"\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
+        ], ngImport: i0, template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    fluid\r\n    appendTo=\"body\"\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "directive", type: i1$8.InputMaskDirective, selector: "[pInputMask]", inputs: ["pInputMaskPT", "pInputMaskUnstyled", "pInputMask", "slotChar", "autoClear", "characterPattern", "keepBuffer"], outputs: ["onComplete", "onUnmaskedChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxdateShort, decorators: [{
             type: Component,
             args: [{ selector: 'dsxdate-short', imports: [
+                        AppMessageErrorComponent,
                         CommonModule,
-                        FloatLabel,
                         DatePicker,
-                        ReactiveFormsModule,
-                        AppMessageErrorComponent,
+                        FloatLabel,
+                        InputMaskModule,
                         JsonPipe,
+                        ReactiveFormsModule,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DsxdateShort),
                             multi: true,
                         },
-                    ], template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    appendTo=\"body\"\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n" }]
+                    ], template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    fluid\r\n    appendTo=\"body\"\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n" }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnFocus", required: false }] }], showButtonBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonBar", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
 
+class DsxdateTime {
+    injector = inject(Injector);
+    // ✅ Exponer isDevMode como propiedad pública
+    isDevMode = isDevMode();
+    // === INPUTS CONFIGURABLES ===
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('dd/mm/yyyy 00:00', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    dateFormat = input('dd/mm/yy', ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
+    showOnFocus = input(false, ...(ngDevMode ? [{ debugName: "showOnFocus" }] : /* istanbul ignore next */ []));
+    showButtonBar = input(true, ...(ngDevMode ? [{ debugName: "showButtonBar" }] : /* istanbul ignore next */ []));
+    showTime = input(true, ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
+    hourFormat = input('24', ...(ngDevMode ? [{ debugName: "hourFormat" }] : /* istanbul ignore next */ []));
+    debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
+    // === STATE ===
+    debugEnabled = signal(false, ...(ngDevMode ? [{ debugName: "debugEnabled" }] : /* istanbul ignore next */ []));
+    // === OBTENER EL CONTROL PADRE ===
+    ngControl = computed(() => {
+        try {
+            return this.injector.get(NgControl);
+        }
+        catch {
+            return null;
+        }
+    }, ...(ngDevMode ? [{ debugName: "ngControl" }] : /* istanbul ignore next */ []));
+    // === CONTROL PADRE PARA ERRORES ===
+    parentControl = computed(() => {
+        const control = this.ngControl();
+        return control?.control || null;
+    }, ...(ngDevMode ? [{ debugName: "parentControl" }] : /* istanbul ignore next */ []));
+    // === CONTROL INTERNO (para el template) ===
+    fechaControl = new FormControl(null);
+    // === CONTROL VALUE ACCESSOR ===
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Debug effect
+        effect(() => {
+            const isDebug = this.debug() && this.isDevMode;
+            this.debugEnabled.set(isDebug);
+            if (isDebug) {
+                console.log('[dsxdate-datetime] === DEBUG MODE ACTIVADO ===');
+                console.log('[dsxdate-datetime] Configuración:', {
+                    label: this.label(),
+                    placeholder: this.placeholder(),
+                    dateFormat: this.dateFormat(),
+                    showIcon: this.showIcon(),
+                    showOnFocus: this.showOnFocus(),
+                    showButtonBar: this.showButtonBar(),
+                    showTime: this.showTime(),
+                    hourFormat: this.hourFormat(),
+                });
+                console.log('[dsxdate-datetime] Control padre:', this.parentControl());
+            }
+        });
+        // ✅ SINCRONIZAR VALIDADORES DEL PADRE AL CONTROL INTERNO
+        effect(() => {
+            const parentCtrl = this.parentControl();
+            if (parentCtrl) {
+                // Copiar validadores del padre al control interno
+                const validators = parentCtrl.validator;
+                const asyncValidators = parentCtrl.asyncValidator;
+                if (this.debugEnabled()) {
+                    console.log('[dsxdate-datetime] 🔄 Sincronizando validadores del padre');
+                    console.log('[dsxdate-datetime] Validadores del padre:', validators);
+                }
+                this.fechaControl.setValidators(validators ? [validators] : []);
+                this.fechaControl.setAsyncValidators(asyncValidators ? [asyncValidators] : []);
+                this.fechaControl.updateValueAndValidity({ emitEvent: false });
+                if (this.debugEnabled()) {
+                    console.log('[dsxdate-datetime] ✅ Validadores sincronizados');
+                    console.log('[dsxdate-datetime] Estado del control interno:', {
+                        valid: this.fechaControl.valid,
+                        invalid: this.fechaControl.invalid,
+                        errors: this.fechaControl.errors,
+                    });
+                }
+            }
+        });
+        // Monitorear cambios del control padre
+        effect(() => {
+            if (this.debugEnabled()) {
+                const parentCtrl = this.parentControl();
+                console.log('[dsxdate-datetime] 📊 Parent Control state:', {
+                    value: parentCtrl?.value,
+                    status: parentCtrl?.status,
+                    errors: parentCtrl?.errors,
+                    valid: parentCtrl?.valid,
+                    invalid: parentCtrl?.invalid,
+                    touched: parentCtrl?.touched,
+                    dirty: parentCtrl?.dirty,
+                });
+            }
+        });
+        // Sincronizar cambios del control interno al padre
+        this.fechaControl.valueChanges.subscribe((value) => {
+            if (this.debugEnabled()) {
+                console.log('[dsxdate-datetime] 🔄 valueChanges - Nuevo valor:', value);
+            }
+            this.onChange(value);
+        });
+        // Sincronizar touched
+        this.fechaControl.statusChanges.subscribe(() => {
+            if (this.debugEnabled()) {
+                console.log('[dsxdate-datetime] 📊 statusChanges - Estado:', this.fechaControl.status);
+            }
+            this.onTouched();
+        });
+    }
+    // === MÉTODOS DE DEBUG ===
+    log(message, data) {
+        if (this.debugEnabled() && this.isDevMode) {
+            if (data !== undefined) {
+                console.log(`[dsxdate-datetime] ${message}`, data);
+            }
+            else {
+                console.log(`[dsxdate-datetime] ${message}`);
+            }
+        }
+    }
+    /**
+     * Convierte cualquier fecha (string ISO, Date, moment) a Date válido
+     */
+    convertirFechaADate(fecha) {
+        if (this.debugEnabled()) {
+            this.log('🔄 convertirFechaADate - entrada:', fecha);
+        }
+        if (!fecha) {
+            this.log('convertirFechaADate - fecha vacía, retornando null');
+            return null;
+        }
+        if (fecha instanceof Date && !isNaN(fecha.getTime())) {
+            this.log('✅ convertirFechaADate - es Date válido:', fecha);
+            return fecha;
+        }
+        if (typeof fecha === 'string') {
+            this.log('📝 convertirFechaADate - procesando string:', fecha);
+            const momentDate = moment(fecha);
+            if (momentDate.isValid()) {
+                const result = momentDate.toDate();
+                this.log('✅ convertirFechaADate - string convertido a Date:', result);
+                return result;
+            }
+            this.log('❌ convertirFechaADate - string inválido para moment');
+        }
+        if (moment.isMoment(fecha)) {
+            this.log('✅ convertirFechaADate - es objeto moment');
+            return fecha.toDate();
+        }
+        const parsed = new Date(fecha);
+        if (!isNaN(parsed.getTime())) {
+            this.log('✅ convertirFechaADate - parseo directo exitoso:', parsed);
+            return parsed;
+        }
+        this.log('❌ convertirFechaADate - no se pudo convertir, retornando null');
+        return null;
+    }
+    // === CONTROL VALUE ACCESSOR IMPLEMENTATION ===
+    writeValue(value) {
+        if (this.debugEnabled()) {
+            this.log('📥 writeValue - Valor recibido:', value);
+        }
+        const fechaConvertida = this.convertirFechaADate(value);
+        if (this.debugEnabled()) {
+            this.log('📥 writeValue - Valor convertido:', fechaConvertida);
+        }
+        this.fechaControl.setValue(fechaConvertida, { emitEvent: false });
+    }
+    registerOnChange(fn) {
+        if (this.debugEnabled()) {
+            this.log('📞 registerOnChange - Callback registrado');
+        }
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        if (this.debugEnabled()) {
+            this.log('📞 registerOnTouched - Callback registrado');
+        }
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (this.debugEnabled()) {
+            this.log(`🚫 setDisabledState - Deshabilitado: ${isDisabled}`);
+        }
+        if (isDisabled) {
+            this.fechaControl.disable({ emitEvent: false });
+        }
+        else {
+            this.fechaControl.enable({ emitEvent: false });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxdateTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DsxdateTime, isStandalone: true, selector: "dsxdate-time", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showOnFocus: { classPropertyName: "showOnFocus", publicName: "showOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showButtonBar: { classPropertyName: "showButtonBar", publicName: "showButtonBar", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DsxdateTime),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    fluid\r\n    appendTo=\"body\"\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [showTime]=\"showTime()\"\r\n    [hourFormat]=\"hourFormat()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999 99:99\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "directive", type: i1$8.InputMaskDirective, selector: "[pInputMask]", inputs: ["pInputMaskPT", "pInputMaskUnstyled", "pInputMask", "slotChar", "autoClear", "characterPattern", "keepBuffer"], outputs: ["onComplete", "onUnmaskedChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxdateTime, decorators: [{
+            type: Component,
+            args: [{ selector: 'dsxdate-time', imports: [
+                        AppMessageErrorComponent,
+                        CommonModule,
+                        DatePicker,
+                        FloatLabel,
+                        InputMaskModule,
+                        JsonPipe,
+                        ReactiveFormsModule,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DsxdateTime),
+                            multi: true,
+                        },
+                    ], template: "<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    fluid\r\n    appendTo=\"body\"\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [showTime]=\"showTime()\"\r\n    [hourFormat]=\"hourFormat()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999 99:99\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnFocus", required: false }] }], showButtonBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonBar", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
+
 // dsx-input-currency.ts
 class DsxInputCurrency {
     inputNumber;
@@ -10018,35 +10691,210 @@ class ResultFileService {
      *    FileContents|fileContents, FileDownloadName|fileDownloadName,
      *    ContentType|contentType, title y message.
      *
-     * Si el backend no cumple alguno de estos formatos, la conversión puede fallar
-     * y el cliente recibirá data: null con isSuccess: false.
-     */
-    /**
-     * Procesa un ServiceResult<FileData> para visualizar o descargar.
-     */
-    processFileResult(result, visualizar = false) {
-        if (!result.isSuccess || !result.data?.blob) {
-            this._alertaService.alertaHtmlSuccess(result.title, result.message, {
-                icon: 'question',
-                icono: '',
-                showConfirmButton: true,
-            });
-            return;
-        }
-        const { blob, fileName } = result.data;
-        if (visualizar) {
-            this.PdfView(blob);
-            return;
-        }
-        this.descargarBlob(blob, fileName);
-    }
-    /**
-     * Realiza un GET para descarga y normaliza la respuesta a ServiceResult<FileData>.
+     * Si el backend no cumple alguno de estos formatos, la conversión puede fallar
+     * y el cliente recibirá data: null con isSuccess: false.
+     */
+    /**
+     * Procesa un ServiceResult<FileData> para visualizar o descargar.
+     */
+    processFileResult(result, visualizar = false) {
+        if (!result.isSuccess || !result.data?.blob) {
+            this._alertaService.alertaHtmlSuccess(result.title, result.message, {
+                icon: 'question',
+                icono: '',
+                showConfirmButton: true,
+            });
+            return;
+        }
+        const { blob, fileName } = result.data;
+        if (visualizar) {
+            this.PdfView(blob);
+            return;
+        }
+        this.descargarBlob(blob, fileName);
+    }
+    /**
+     * Realiza una petición GET para descargar un archivo y normaliza la respuesta a un ServiceResult<FileData>.
+     *
+     * 📋 **Descripción General:**
+     * Este método unifica la forma en que se manejan las descargas de archivos, soportando múltiples
+     * formatos de respuesta del backend y normalizándolos a una estructura consistente.
+     *
+     * 🔄 **Formatos de Respuesta Soportados:**
+     *
+     * 1. **Binario Directo** (Recomendado):
+     *    - El backend retorna directamente el archivo binario.
+     *    - El nombre del archivo se obtiene del header `Content-Disposition`.
+     *    - Mensajes opcionales via headers: `x-title`, `x-message`, `title`, `message`.
+     *    - Ejemplo:
+     *      ```
+     *      Content-Type: application/pdf
+     *      Content-Disposition: attachment; filename="documento.pdf"
+     *      x-title: Éxito
+     *      x-message: Descarga completada exitosamente
+     *
+     *      [bytes del archivo]
+     *      ```
+     *
+     * 2. **JSON Serializado con ServiceResult**:
+     *    - El backend retorna un JSON con estructura ServiceResult<FileContentResult>.
+     *    - El archivo viene codificado en Base64 o como array de bytes.
+     *    - Soporta campos en PascalCase o camelCase.
+     *    - Ejemplo:
+     *      ```json
+     *      {
+     *        "isSuccess": true,
+     *        "title": "Éxito",
+     *        "message": "Archivo generado correctamente",
+     *        "data": {
+     *          "fileContents": "base64EncodedString...",
+     *          "fileDownloadName": "reporte.xlsx",
+     *          "contentType": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+     *        }
+     *      }
+     *      ```
+     *
+     * 3. **Error del Backend**:
+     *    - Retorna un ServiceResult con isSuccess: false.
+     *    - Se extrae el título y mensaje de error.
+     *    - Ejemplo:
+     *      ```json
+     *      {
+     *        "isSuccess": false,
+     *        "title": "Error de Validación",
+     *        "message": "El ID del documento no existe"
+     *      }
+     *      ```
+     *
+     * 4. **Error de Red/HTTP**:
+     *    - Captura errores de conexión, timeout, etc.
+     *    - Retorna un ServiceResult con isSuccess: false y mensaje genérico.
+     *
+     * 🎯 **Método de Uso Recomendado:**
+     * ```typescript
+     * // Opción 1: Descarga automática
+     * this.resultFileService.getDownloadableFile('/api/documentos/123')
+     *   .subscribe(result => {
+     *     this.resultFileService.processFileResult(result, false);
+     *   });
+     *
+     * // Opción 2: Visualización de PDF
+     * this.resultFileService.getDownloadableFile('/api/documentos/123')
+     *   .subscribe(result => {
+     *     this.resultFileService.processFileResult(result, true);
+     *   });
+     *
+     * // Opción 3: Procesamiento personalizado
+     * this.resultFileService.getDownloadableFile('/api/documentos/123')
+     *   .subscribe({
+     *     next: (result) => {
+     *       if (result.isSuccess && result.data?.blob) {
+     *         // Procesar el blob manualmente
+     *         const { blob, fileName } = result.data;
+     *         // Hacer algo con el archivo
+     *       } else {
+     *         // Manejar error
+     *         console.error(result.title, result.message);
+     *       }
+     *     },
+     *     error: (error) => {
+     *       console.error('Error de red:', error);
+     *     }
+     *   });
+     * ```
+     *
+     * 📝 **Parámetros:**
+     * @param url - URL del endpoint de descarga.
+     * @param options - Opciones adicionales para la solicitud.
+     * @param options.params - Parámetros de consulta (Query params). Soporta:
+     *   - `string`: valor simple
+     *   - `string[]`: múltiples valores para el mismo parámetro
+     *   - `Date`: se convierte automáticamente a ISO string
+     *   - `number`: se convierte a string
+     *   - `HttpParams`: instancia directamente
+     * @param options.headers - Headers HTTP personalizados (HttpHeaders).
+     * @param options.withCredentials - Enviar cookies/credenciales en la solicitud.
+     *
+     * 🔍 **Estructura de Retorno:**
+     * ```typescript
+     * Observable<ServiceResult<FileData>>
+     * ```
+     *
+     * Donde `ServiceResult<FileData>` tiene:
+     * ```typescript
+     * {
+     *   data: {
+     *     blob: Blob,        // El archivo como Blob
+     *     fileName: string   // Nombre del archivo (con extensión)
+     *   } | null,
+     *   isSuccess: boolean,  // Indica si la operación fue exitosa
+     *   title: string,       // Título del resultado (éxito o error)
+     *   message: string      // Mensaje descriptivo
+     * }
+     * ```
+     *
+     * ⚠️ **Notas Importantes:**
+     * - El método siempre retorna un Observable que emite un ServiceResult.
+     * - Nunca emite error en el Observable (los errores se convierten a ServiceResult con isSuccess: false).
+     * - Para descarga automática usar `processFileResult(result, false)`.
+     * - Para visualización de PDF usar `processFileResult(result, true)`.
+     * - El nombre del archivo se determina en este orden de prioridad:
+     *   1. `Content-Disposition` header (si existe)
+     *   2. `fileDownloadName` del JSON (si es respuesta JSON)
+     *   3. `fileName` del JSON (si es respuesta JSON)
+     *   4. Valor por defecto: 'document'
+     *
+     * 💡 **Ejemplos de Uso Adicionales:**
+     *
+     * ```typescript
+     * // Con parámetros de consulta
+     * const options = {
+     *   params: {
+     *     id: 123,
+     *     formato: 'pdf',
+     *     fechas: ['2024-01-01', '2024-12-31']
+     *   }
+     * };
+     * this.resultFileService.getDownloadableFile('/api/reportes', options)
+     *   .subscribe(result => {
+     *     this.resultFileService.processFileResult(result);
+     *   });
+     *
+     * // Con headers personalizados (ej: autenticación)
+     * const options = {
+     *   headers: new HttpHeaders({
+     *     'Authorization': 'Bearer ' + token,
+     *     'X-Custom-Header': 'valor'
+     *   })
+     * };
+     * this.resultFileService.getDownloadableFile('/api/documentos', options)
+     *   .subscribe(result => {
+     *     this.resultFileService.processFileResult(result);
+     *   });
+     *
+     * // Con credenciales
+     * const options = {
+     *   withCredentials: true
+     * };
+     * this.resultFileService.getDownloadableFile('/api/documentos', options)
+     *   .subscribe(result => {
+     *     this.resultFileService.processFileResult(result);
+     *   });
+     * ```
+     *
+     * 🚀 **Flujo de Trabajo Típico:**
+     * 1. Llamar a `getDownloadableFile(url, options)` con la URL del endpoint.
+     * 2. Suscribirse al Observable.
+     * 3. En el `next`, recibir el `ServiceResult<FileData>`.
+     * 4. Usar `processFileResult(result, visualizar)` para:
+     *    - Descargar automáticamente (visualizar: false)
+     *    - Visualizar PDF en nueva pestaña (visualizar: true)
+     * 5. Alternativamente, procesar el blob manualmente si se necesita.
      *
-     * Nota de integración backend:
-     * - Para nombre de archivo en binario directo, enviar Content-Disposition.
-     * - Para mensajes de éxito, enviar x-title/x-message o title/message en JSON.
-     * - Si se envía JSON serializado, incluir los campos de FileContentResult.
+     * @see processFileResult - Para descargar o visualizar el archivo obtenido.
+     * @see FileData - Estructura de datos del archivo.
+     * @see BlobRequestOptions - Opciones de configuración para la solicitud.
+     * @see ServiceResult - Estructura de resultado estandarizada.
      */
     getDownloadableFile(url, options = {}) {
         return this.http
@@ -10251,25 +11099,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }] });
 
 class SweetAlert2DialogService {
-    /**
-     * Configuración del entorno inyectada (opcional).
-     * Se usa para obtener el tema global de SweetAlert2 desde el environment.
-     */
     environment = inject(ENVIRONMENT, { optional: true });
-    /**
-     * Tema visual por defecto para todas las alertas SweetAlert2.
-     * Se inicializa desde el environment si está configurado, o puede establecerse
-     * manualmente llamando a setDefaultTheme().
-     *
-     * **Prioridad de temas:**
-     * 1. Tema específico pasado en options de cada alerta
-     * 2. Tema establecido con setDefaultTheme()
-     * 3. Tema configurado en environment.sweetAlertTheme
-     * 4. Tema por defecto de SweetAlert2
-     */
     defaultTheme = undefined;
+    NATIVE_ICONS = [
+        'success',
+        'error',
+        'warning',
+        'info',
+        'question',
+    ];
     constructor() {
-        // Inicializar el tema desde el environment si está disponible
         if (this.environment?.sweetAlertTheme) {
             const allowed = SWEET_ALERT_THEMES;
             const themeValue = this.environment.sweetAlertTheme;
@@ -10289,59 +11128,102 @@ class SweetAlert2DialogService {
             img.onerror = (err) => reject(err);
         });
     }
-    // 4. Implementación real del método
-    // 5. Implementación unificada final
-    Dialog(firstParam, text, icoOrIcono, options = {}) {
+    // Implementación unificada
+    Dialog(firstParam, text, secondOrThird, thirdOrOptions) {
         let title = '';
-        let finalOptions = { ...options };
-        let finalIcoOrIcono = icoOrIcono;
-        // DETECTAR SI EL PRIMER PARÁMETRO ES EL OBJETO COMPLETO
+        let messageContent = '';
+        let options = {};
+        let iconFromParam = null;
+        let imageFromOptions = null;
+        // === PROCESAR PARÁMETROS ===
         if (typeof firstParam === 'object' && firstParam !== null) {
-            const { title: cTitle, message: cMessage, icon, icono, ...cOptions } = firstParam;
-            title = cTitle;
-            text = cMessage;
-            finalIcoOrIcono = icon || icono || '';
-            finalOptions = { ...cOptions };
+            // Caso 1: ActionMessageConfig
+            const config = firstParam;
+            title = config.title;
+            messageContent = config.message;
+            // Extraer opciones
+            const { title: _title, message: _message, icon: _icon, icono: _icono, html: _html, footer: _footer, ...restOptions } = config;
+            options = { ...restOptions };
+            if (_html)
+                options.html = _html;
+            if (_footer)
+                options.footer = _footer;
+            // ✅ Si hay icono en el config, es el parámetro
+            if (config.icon) {
+                iconFromParam = config.icon;
+            }
+            // ✅ Si hay icono personalizado en el config
+            if (config.icono) {
+                imageFromOptions = config.icono;
+            }
         }
         else {
+            // Caso 2, 3, 4: Parámetros tradicionales
             title = firstParam;
-        }
-        // A partir de aquí, tu lógica interna se mantiene exactamente igual usando las variables normalizadas
-        let ico = null;
-        let iconoImg = null;
-        if (finalIcoOrIcono) {
-            const nativeIcons = [
-                'success',
-                'error',
-                'warning',
-                'info',
-                'question',
-            ];
-            if (nativeIcons.includes(finalIcoOrIcono)) {
-                ico = finalIcoOrIcono;
+            messageContent = text || '';
+            // Determinar qué tipo de parámetros tenemos
+            if (secondOrThird !== undefined && secondOrThird !== null) {
+                if (typeof secondOrThird === 'string') {
+                    // ✅ Es un icono nativo (Caso 4)
+                    if (this.NATIVE_ICONS.includes(secondOrThird)) {
+                        iconFromParam = secondOrThird;
+                    }
+                    options = thirdOrOptions || {};
+                }
+                else if (typeof secondOrThird === 'object') {
+                    // ✅ Son opciones (Caso 3)
+                    options = secondOrThird;
+                    // ✅ Si hay icono personalizado en options
+                    if (options.icono) {
+                        imageFromOptions = options.icono;
+                    }
+                }
             }
             else {
-                iconoImg = finalIcoOrIcono;
+                // Solo título y texto (Caso 2)
+                options = thirdOrOptions || {};
+                if (options.icono) {
+                    imageFromOptions = options.icono;
+                }
             }
         }
-        // Configuración por defecto de botones y estilos
-        const { confirmButtonText = `Aceptar!`, cancelButtonText = `Cancelar`, showCloseButton = true, showCancelButton = true, imageWidth = 150, imageHeight = 150, theme, ...rest } = finalOptions;
+        // ✅ PRIORIDAD: imageFromOptions (imagen) > iconFromParam (icono nativo)
+        let ico = null;
+        let iconoImg = null;
+        // 1. Si hay imagen en options, usarla (máxima prioridad)
+        if (imageFromOptions) {
+            iconoImg = imageFromOptions;
+        }
+        // 2. Si hay icono en el parámetro, usarlo
+        else if (iconFromParam) {
+            ico = iconFromParam;
+        }
+        // === CONFIGURACIÓN DE LA ALERTA ===
+        const { confirmButtonText = 'Aceptar', cancelButtonText = 'Cancelar', showCloseButton = true, showCancelButton = true, imageWidth = 150, imageHeight = 150, theme, ...rest } = options;
         const alertTheme = theme !== undefined ? theme : this.defaultTheme;
+        // === CONSTRUIR FOOTER ===
         const year = new Date().getFullYear();
-        const baseFooter = this.environment?.sweetAlertFooter ?? 'DEVSOFTXela';
-        const footer = `${baseFooter} <strong>${year}</strong>`;
+        const footerText = options.footer ?? this.environment?.sweetAlertFooter ?? 'DEVSOFTXela';
+        const footer = `${footerText} <strong>${year}</strong>`;
+        // === CONSTRUIR CONFIGURACIÓN DE SWEETALERT ===
         const alertConfig = {
             title,
-            html: text,
             footer,
             showCloseButton,
             showCancelButton,
             confirmButtonText,
             cancelButtonText,
-            //reverseButtons: true,
             ...(alertTheme !== undefined && { theme: alertTheme }),
             ...rest,
         };
+        // === PRIORIDAD DEL CONTENIDO HTML ===
+        if (options.html) {
+            alertConfig.html = options.html;
+        }
+        else if (messageContent) {
+            alertConfig.html = messageContent;
+        }
+        // === IMAGEN O ICONO ===
         if (iconoImg) {
             alertConfig.imageUrl = `/${iconoImg}`;
             alertConfig.imageWidth = imageWidth;
@@ -10365,6 +11247,320 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+class DsxMessagesService {
+    AlertaService = inject(AlertaService);
+    SweetDialog = inject(SweetAlert2DialogService);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxMessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxMessagesService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxMessagesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Obtiene los datos de un FormGroup excluyendo TODAS las propiedades de tipo File
+ *
+ * @param form - FormGroup del cual extraer los datos
+ * @returns Objeto con los datos (sin archivos) y la lista de archivos encontrados
+ *
+ * @internal
+ */
+function getFormDataExcludingFiles(form) {
+    const rawValue = form.getRawValue();
+    const entries = Object.entries(rawValue);
+    const files = [];
+    const data = {};
+    for (const [key, value] of entries) {
+        if (value instanceof File) {
+            files.push(value);
+        }
+        else {
+            data[key] = value;
+        }
+    }
+    return { data: data, files };
+}
+/**
+ * Servicio para guardar entidades y subir archivos automáticamente.
+ *
+ * Este servicio centraliza el flujo común de:
+ * 1. Extraer automáticamente el archivo del FormGroup (por tipo `File`)
+ * 2. Guardar la entidad (sin el archivo) en la base de datos
+ * 3. Si el guardado es exitoso y hay archivo, subirlo
+ * 4. Manejar errores de forma consistente
+ * 5. Resetear el formulario automáticamente en caso de éxito
+ *
+ * @example
+ * // En tu componente:
+ *
+ * // Guardar sin archivo
+ * this._saveEntityPostFile.saveOnly(
+ *   this.form,
+ *   this._baseService.save.bind(this._baseService),
+ *   (response) => {
+ *     this.formState.emit(response);
+ *   }
+ * );
+ *
+ * // Guardar con archivo (se extrae automáticamente)
+ * this._saveEntityPostFile.saveWithFile(
+ *   this.form,
+ *   this._baseService.save.bind(this._baseService),
+ *   this._baseService.AdjuntarSoporte.bind(this._baseService),
+ *   (response) => {
+ *     this.formState.emit(response);
+ *   }
+ * );
+ */
+class SaveEntityPostFileService {
+    /** Servicio para mostrar mensajes al usuario */
+    _dsxMessageService = inject(DsxMessagesService);
+    /** Configuración del entorno (para controlar debug) */
+    environment = inject(ENVIRONMENT);
+    /**
+     * Determina si el debug está activo
+     *
+     * @param debug - Solicitud explícita de debug
+     * @returns `true` solo si `debug=true` Y no estamos en producción
+     *
+     * @internal
+     */
+    shouldLog(debug) {
+        return debug && !this.environment.production;
+    }
+    /**
+     * Guarda una entidad Y sube automáticamente el archivo extraído del FormGroup.
+     *
+     * El servicio extrae automáticamente el archivo del FormGroup (por tipo `File`),
+     * lo excluye del objeto que se envía al backend, y después de guardar
+     * exitosamente, procede a subir el archivo usando el ID generado.
+     *
+     * @param form - FormGroup que contiene los datos del formulario
+     * @param saveMethod - Método de save que recibe los datos (sin archivo)
+     * @param uploadMethod - Método de upload que recibe (id, file) y retorna Observable
+     * @param onSuccess - Callback de éxito (opcional)
+     * @param onError - Callback de error (opcional)
+     * @param resetForm - Función para resetear el formulario (opcional)
+     * @param debug - Activa logs en consola (solo funciona en desarrollo). Por defecto `false`.
+     *
+     * @example
+     * // Uso básico
+     * this._saveEntityPostFile.saveWithFile(
+     *   this.form,
+     *   this._baseService.save.bind(this._baseService),
+     *   this._baseService.AdjuntarSoporte.bind(this._baseService),
+     *   (response) => {
+     *     this.formState.emit(response);
+     *   }
+     * );
+     *
+     * @example
+     * // Con reset personalizado
+     * this._saveEntityPostFile.saveWithFile(
+     *   this.form,
+     *   this._baseService.save.bind(this._baseService),
+     *   this._baseService.AdjuntarSoporte.bind(this._baseService),
+     *   (response) => {
+     *     this.formState.emit(response);
+     *   },
+     *   (error) => {
+     *     console.error('Error:', error);
+     *   },
+     *   () => {
+     *     this.form.reset();
+     *     this.getForm();
+     *     this.cleanFileInput();
+     *   }
+     * );
+     */
+    saveWithFile(form, saveMethod, uploadMethod, deleteMethod, onSuccess, onError, resetForm, debug = false) {
+        this.execute(form, saveMethod, uploadMethod, deleteMethod, onSuccess, onError, resetForm, debug);
+    }
+    /**
+     * Ejecuta el flujo completo de guardado y subida de archivo.
+     *
+     * Este método es privado y contiene la lógica central del servicio.
+     *
+     * ## Flujo de ejecución:
+     * 1. Extrae el archivo del FormGroup (por tipo `File`)
+     * 2. Construye el objeto de datos sin el archivo
+     * 3. Ejecuta el `saveMethod` con los datos limpios
+     * 4. Si el save es exitoso y hay archivo, ejecuta el `uploadMethod`
+     * 5. Si todo es exitoso, ejecuta `resetForm` y `onSuccess`
+     * 6. Si hay error en cualquier paso, ejecuta `onError`
+     *
+     * @param form - FormGroup que contiene los datos del formulario
+     * @param saveMethod - Método de save que recibe los datos (sin archivo)
+     * @param uploadMethod - Método de upload que recibe (id, file) (opcional)
+     * @param onSuccess - Callback de éxito (opcional)
+     * @param onError - Callback de error (opcional)
+     * @param resetForm - Función para resetear el formulario (opcional)
+     * @param debug - Activa logs en consola (solo funciona en desarrollo)
+     *
+     * @internal
+     */
+    execute(form, saveMethod, uploadMethod, deleteMethod, onSuccess, onError, resetForm, debug = false) {
+        const log = this.shouldLog(debug);
+        // 1️⃣ Extraer archivo y datos del FormGroup
+        const { data: saveData, files } = getFormDataExcludingFiles(form);
+        const fileUpload = files.length > 0 ? files[0] : null;
+        if (log) {
+            console.group('📤 [SaveEntityPostFile] Preparando datos');
+            console.log('📄 Datos a guardar (sin archivo):', saveData);
+            console.log('📎 Archivo encontrado:', fileUpload?.name || 'Ninguno');
+            console.groupEnd();
+        }
+        // 2️⃣ Crear el observable del save con los datos sin archivo
+        const save$ = saveMethod(saveData);
+        // 3️⃣ Ejecutar el flujo completo
+        save$.subscribe({
+            next: (saveResult) => {
+                // 📥 Log del save
+                if (log) {
+                    console.group('📥 [SaveEntityPostFile] Respuesta del save');
+                    console.log('Resultado:', saveResult);
+                    console.groupEnd();
+                }
+                // ❌ Si el guardado falla
+                if (!saveResult.isSuccess) {
+                    this._dsxMessageService.SweetDialog.Dialog(saveResult.title || 'Error', saveResult.message || 'Error al guardar los datos', 'error', { showConfirmButton: true, showCancelButton: false });
+                    onError?.(saveResult);
+                    return;
+                }
+                // ✅ Si el guardado es exitoso y hay archivo
+                if (uploadMethod && fileUpload && saveResult.data) {
+                    if (log)
+                        console.log('📤 [SaveEntityPostFile] Subiendo archivo...');
+                    uploadMethod(saveResult.data, fileUpload).subscribe({
+                        next: (uploadResult) => {
+                            // 📥 Log del upload
+                            if (log) {
+                                console.group('📥 [SaveEntityPostFile] Respuesta del upload');
+                                console.log('Resultado:', uploadResult);
+                                console.groupEnd();
+                            }
+                            if (uploadResult.isSuccess) {
+                                // ✅ Éxito: guardado + archivo
+                                if (log)
+                                    console.log('✅ [SaveEntityPostFile] Subida exitosa');
+                                resetForm?.();
+                                onSuccess?.(uploadResult);
+                            }
+                            else {
+                                // ❌ Error en la subida
+                                if (log)
+                                    console.warn('⚠️ [SaveEntityPostFile] Subida falló');
+                                const htmlContent = `
+                    <div style="text-align: left; font-family: -apple-system, system-ui, sans-serif;">
+                      
+                      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
+                        <span style="font-size: 22px;">⚠️</span>
+                        <span style="font-size: 17px; font-weight: 600; color: #1a1a1a;">Archivo no subido</span>
+                      </div>
+
+                      <p style="color: #555; font-size: 14px; line-height: 1.5; margin: 0 0 8px 0;">
+                        El registro se guardó, pero el archivo falló.
+                      </p>
+
+                      <div style="background: #f8f4ec; padding: 6px 12px; border-radius: 4px; margin: 6px 0 14px 0;">
+                        <span style="color: #7a6b4a; font-size: 13px;">
+                          <strong>Motivo:</strong> ${uploadResult.message}
+                        </span>
+                      </div>
+
+                      <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee;">
+                        <p style="font-weight: 500; color: #1a1a1a; font-size: 13px; margin: 0 0 6px 0;">
+                          ¿Qué deseas hacer?
+                        </p>
+                        <div style="font-size: 13px; color: #555; line-height: 1.7;">
+                          <div>📁 Guardar sin archivo <span style="color: #999; font-size: 12px;">(subir después)</span></div>
+                          <div>🗑️ Eliminar registro <span style="color: #999; font-size: 12px;">(corregir y reintentar)</span></div>
+                        </div>
+                      </div>
+
+                    </div>`;
+                                this._dsxMessageService.SweetDialog.Dialog(uploadResult.title || 'Error', '', 'error', {
+                                    html: htmlContent,
+                                    showConfirmButton: true,
+                                    confirmButtonText: 'Guardar',
+                                    showCancelButton: true,
+                                    cancelButtonText: 'Eliminar',
+                                }).then((isConfirmed) => {
+                                    if (isConfirmed) {
+                                        if (log)
+                                            console.warn('⚠️ [SaveEntityPostFile] Se conservo el registro');
+                                        resetForm?.();
+                                        onSuccess?.(saveResult);
+                                    }
+                                    else {
+                                        if (log)
+                                            console.warn('❌ [SaveEntityPostFile] Se elimino el registro');
+                                        // 2️⃣ Crear el observable del save con los datos sin archivo
+                                        const delete$ = deleteMethod(saveResult.data, false);
+                                        delete$.subscribe({
+                                            next: (deleteResult) => {
+                                                // 📥 Log del save
+                                                if (log) {
+                                                    console.group('📥 [SaveEntityPostFile] Respuesta del delete');
+                                                    console.log('Resultado:', deleteResult);
+                                                    console.groupEnd();
+                                                }
+                                                if (deleteResult.isSuccess) {
+                                                    if (log)
+                                                        console.log('✅ [SaveEntityPostFile] Registro eliminado');
+                                                    onSuccess?.(deleteResult);
+                                                }
+                                                else {
+                                                    this._dsxMessageService.SweetDialog.Dialog('❌ Error al eliminar', deleteResult.message ||
+                                                        'No se pudo eliminar el registro.', 'error', {
+                                                        showConfirmButton: true,
+                                                        showCancelButton: false,
+                                                    });
+                                                    onError?.(deleteResult);
+                                                }
+                                            },
+                                            error: (err) => console.warn(err),
+                                            complete: () => '',
+                                        });
+                                    }
+                                });
+                                onError?.(uploadResult);
+                            }
+                        },
+                        error: (uploadError) => {
+                            // ❌ Error en la subida (excepción)
+                            console.warn('Error no controlado en upload:', uploadError);
+                            onError?.(uploadError);
+                        },
+                    });
+                    return;
+                }
+                // ✅ Éxito sin archivo
+                if (log)
+                    console.log('✅ [SaveEntityPostFile] Proceso completado (sin archivo)');
+                resetForm?.();
+                onSuccess?.(saveResult);
+            },
+            error: (error) => {
+                // ❌ Error en el save (excepción)
+                console.warn('Error no controlado en save:', error);
+                onError?.(error);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SaveEntityPostFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SaveEntityPostFileService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SaveEntityPostFileService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class NextToastNotifyService {
     // Configuraciones iniciales por defecto (ambos activados como en tus switches)
     defaultOptions = {
@@ -10408,8 +11604,10 @@ class ResultResponseService {
             else {
                 const guideHtml = this.buildAssociatedGuideHtml(response?.data);
                 const mainMessage = this.formatPrimaryAlertMessage(response.message);
-                this._sweetAlert2DialogService.Dialog(response.title, `${mainMessage}${guideHtml}`, // Se concatena limpiamente sin alterar la lógica
-                'icon/sign.png', {
+                this._sweetAlert2DialogService.Dialog(response.title, 
+                // Se concatena limpiamente sin alterar la lógica
+                `${mainMessage}${guideHtml}`, {
+                    icono: 'icon/sign.png',
                     showCancelButton: false,
                     showConfirmButton: true,
                 });
@@ -10455,10 +11653,407 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
+/**
+ * Servicio especializado para extraer y procesar archivos (Blob) desde respuestas del backend.
+ *
+ * 📋 **Propósito:**
+ * Este servicio actúa como un puente entre la respuesta del backend (normalizada como ServiceResult<FileData>)
+ * y el consumidor final, extrayendo el archivo (Blob) y su nombre de forma segura y validada.
+ *
+ * 🎯 **Cuándo usar este servicio:**
+ * - Cuando necesitas obtener el Blob y el nombre de archivo de un Observable<ServiceResult<FileData>>
+ * - Cuando quieres validar que el archivo existe y no está vacío antes de procesarlo
+ * - Cuando necesitas asegurar que el nombre del archivo tenga la extensión correcta
+ * - Cuando quieres un manejo de errores detallado y estructurado
+ *
+ * 🔄 **Flujo de Trabajo:**
+ * 1. El backend retorna un ServiceResult<FileData> (normalizado por getDownloadableFile)
+ * 2. Este servicio extrae el Blob y el fileName
+ * 3. Valida que el archivo exista y tenga contenido
+ * 4. Asegura que el nombre tenga la extensión correcta según el MIME type
+ * 5. Retorna un objeto con { blob, fileName } o un error estructurado
+ *
+ * 🔗 **Relación con otros servicios:**
+ * - **ResultFileService**: Proporciona el Observable<ServiceResult<FileData>> de entrada
+ * - **AlertaService**: Para mostrar mensajes al usuario
+ *
+ * @see ResultFileService - Servicio que realiza la petición HTTP
+ * @see FileData - Estructura de datos del archivo
+ * @see ServiceResult - Estructura de resultado estandarizada
+ * @see Blob - API nativa de Blob de JavaScript
+ */
+class ResultFileReturnBlobNameService {
+    /** Configuración del entorno (para controlar debug) */
+    environment = inject(ENVIRONMENT);
+    /**
+     * Extrae el Blob y el nombre de archivo de un Observable<ServiceResult<FileData>>,
+     * realizando validaciones exhaustivas y manejo de errores detallado.
+     *
+     * 📝 **Descripción:**
+     * Este método toma el Observable resultante de `getDownloadableFile` y extrae
+     * el archivo (Blob) y su nombre, validando que todo sea correcto antes de
+     * entregar el resultado al consumidor.
+     *
+     * 🔍 **Validaciones Realizadas:**
+     * 1. ✅ Resultado nulo o indefinido → Error: "El resultado es nulo o indefinido"
+     * 2. ✅ isSuccess = false → Error con title y message del backend
+     * 3. ✅ data es null → Error: "El resultado no contiene datos"
+     * 4. ✅ blob es null → Error: "El blob del archivo no está presente"
+     * 5. ✅ blob.size = 0 → Error: "El archivo descargado está vacío (0 bytes)"
+     * 6. ✅ Error de conexión → Error: "No se pudo obtener el archivo del servidor"
+     *
+     * 📁 **Gestión de Extensiones:**
+     * El método automáticamente asegura que el nombre del archivo tenga la extensión
+     * correcta basada en el MIME type. Si el nombre ya tiene extensión, la mantiene.
+     *
+     * 💡 **Ejemplos de Uso:**
+     *
+     * ```typescript
+     * // EJEMPLO 1: Uso básico con descarga automática
+     * const fileObservable = this.resultFileService.getDownloadableFile('/api/documentos/123');
+     *
+     * this.resultFileReturnBlobNameService.extractFileDataFromServiceResultEnhanced(fileObservable)
+     *   .subscribe({
+     *     next: ({ blob, fileName }) => {
+     *       // Descargar el archivo automáticamente
+     *       this.resultFileService.descargarBlob(blob, fileName);
+     *     },
+     *     error: (error) => {
+     *       // Error estructurado
+     *       this.alertaService.mostrarError(error.title, error.message);
+     *     }
+     *   });
+     *
+     * // EJEMPLO 2: Visualizar PDF
+     * const fileObservable = this.resultFileService.getDownloadableFile('/api/documentos/123');
+     *
+     * this.resultFileReturnBlobNameService.extractFileDataFromServiceResultEnhanced(fileObservable)
+     *   .subscribe({
+     *     next: ({ blob, fileName }) => {
+     *       // Crear URL para visualizar
+     *       const url = URL.createObjectURL(blob);
+     *       window.open(url, '_blank');
+     *     },
+     *     error: (error) => {
+     *       console.error('Error al visualizar:', error);
+     *     }
+     *   });
+     *
+     * // EJEMPLO 3: Procesamiento personalizado con validación
+     * const fileObservable = this.resultFileService.getDownloadableFile('/api/reportes', {
+     *   params: { formato: 'excel' }
+     * });
+     *
+     * this.resultFileReturnBlobNameService.extractFileDataFromServiceResultEnhanced(
+     *   fileObservable,
+     *   'reporte_generado'  // fallbackFileName
+     * ).subscribe({
+     *   next: ({ blob, fileName }) => {
+     *     // Procesar el blob según necesidades
+     *     if (fileName.endsWith('.xlsx')) {
+     *       this.procesarExcel(blob);
+     *     } else {
+     *       this.descargarArchivo(blob, fileName);
+     *     }
+     *   },
+     *   error: (error) => {
+     *     // Manejo detallado de errores
+     *     if (error.title === 'Archivo vacío') {
+     *       this.alertaService.advertencia('El archivo está vacío');
+     *     } else if (error.title === 'Error de conexión') {
+     *       this.alertaService.error('Error de red', 'Verifica tu conexión');
+     *     } else {
+     *       this.alertaService.error(error.title, error.message);
+     *     }
+     *   }
+     * });
+     *
+     * // EJEMPLO 4: Uso con loading state
+     * cargando = false;
+     *
+     * descargarDocumento(id: number): void {
+     *   this.cargando = true;
+     *   const fileObservable = this.resultFileService.getDownloadableFile(`/api/documentos/${id}`);
+     *
+     *   this.resultFileReturnBlobNameService.extractFileDataFromServiceResultEnhanced(
+     *     fileObservable,
+     *     `documento_${id}`
+     *   ).subscribe({
+     *     next: ({ blob, fileName }) => {
+     *       this.cargando = false;
+     *       this.resultFileService.descargarBlob(blob, fileName);
+     *       this.alertaService.exito('Descarga completada');
+     *     },
+     *     error: (error) => {
+     *       this.cargando = false;
+     *       this.alertaService.error('Error', error.message);
+     *     }
+     *   });
+     * }
+     *
+     * // EJEMPLO 5: Combinación con otros operadores RxJS
+     * const fileObservable = this.resultFileService.getDownloadableFile('/api/documentos/123');
+     *
+     * this.resultFileReturnBlobNameService.extractFileDataFromServiceResultEnhanced(fileObservable)
+     *   .pipe(
+     *     tap(({ blob, fileName }) => {
+     *       console.log(`Archivo: ${fileName}, Tamaño: ${blob.size} bytes`);
+     *     }),
+     *     delay(1000), // Simular procesamiento
+     *     map(({ blob, fileName }) => ({
+     *       blob,
+     *       fileName,
+     *       tipo: this.obtenerTipoArchivo(fileName)
+     *     }))
+     *   )
+     *   .subscribe(({ blob, fileName, tipo }) => {
+     *     console.log(`Tipo de archivo: ${tipo}`);
+     *   });
+     * ```
+     *
+     * @param fileObservable - Observable que emite un ServiceResult<FileData>
+     * @param fallbackFileName - Nombre alternativo si no se puede determinar el nombre (por defecto: 'archivo sin nombre')
+     *
+     * @returns Observable que emite un objeto con:
+     *   - blob: Blob - El archivo extraído
+     *   - fileName: string - Nombre del archivo con extensión
+     *   - headers?: HttpHeaders - Headers de la respuesta (opcional, actualmente no implementado)
+     *
+     * @throws {Object} En caso de error, emite un objeto con:
+     *   - success: false
+     *   - title: string - Título del error
+     *   - message: string - Mensaje descriptivo
+     *   - error?: any - Error original (en caso de error de conexión)
+     *
+     * @see ResultFileService.getDownloadableFile - Método que genera el Observable de entrada
+     * @see ResultFileService.descargarBlob - Para descargar el archivo extraído
+     * @see ResultFileService.PdfView - Para visualizar PDFs
+     */
+    extractFileDataFromServiceResultEnhanced(fileObservable, fallbackFileName = 'archivo sin nombre') {
+        return new Observable((observer) => {
+            fileObservable.subscribe({
+                next: (result) => {
+                    // Validación completa del resultado
+                    if (!result) {
+                        observer.error({
+                            success: false,
+                            title: 'Resultado nulo',
+                            message: 'El resultado es nulo o indefinido',
+                        });
+                        return;
+                    }
+                    if (!result.isSuccess) {
+                        observer.error({
+                            success: false,
+                            title: result.title || 'Error en la operación',
+                            message: result.message || 'El servidor reportó un error',
+                        });
+                        return;
+                    }
+                    if (!result.data) {
+                        observer.error({
+                            success: false,
+                            title: 'Datos no disponibles',
+                            message: 'El resultado no contiene datos',
+                        });
+                        return;
+                    }
+                    const blob = result.data.blob;
+                    if (!blob) {
+                        observer.error({
+                            success: false,
+                            title: 'Archivo no disponible',
+                            message: 'El blob del archivo no está presente',
+                        });
+                        return;
+                    }
+                    // Validar que el blob tenga tamaño
+                    if (blob.size === 0) {
+                        observer.error({
+                            success: false,
+                            title: 'Archivo vacío',
+                            message: 'El archivo descargado está vacío (0 bytes)',
+                        });
+                        return;
+                    }
+                    // Procesar nombre de archivo
+                    let fileName = result.data.fileName || fallbackFileName;
+                    fileName = this.ensureFileNameWithExtension(fileName, blob.type);
+                    // Log para debugging
+                    this.logIfNotProduction('✅ Archivo extraído exitosamente:', {
+                        tamaño: this.formatFileSize(blob.size),
+                        tipo: blob.type,
+                        nombre: fileName,
+                    });
+                    observer.next({
+                        blob: blob,
+                        fileName: fileName,
+                    });
+                    observer.complete();
+                },
+                error: (err) => {
+                    this.logIfNotProduction('❌ Error extrayendo archivo:', err);
+                    observer.error({
+                        success: false,
+                        title: 'Error de conexión',
+                        message: 'No se pudo obtener el archivo del servidor',
+                        error: err,
+                    });
+                },
+            });
+        });
+    }
+    /**
+     * Asegura que el nombre de archivo tenga una extensión válida.
+     *
+     * 📋 **Funcionamiento:**
+     * 1. Si el nombre ya tiene una extensión (contiene un punto), lo retorna sin cambios.
+     * 2. Si no tiene extensión, intenta obtenerla del MIME type.
+     * 3. Si se puede determinar la extensión, la agrega al nombre.
+     * 4. Si no se puede determinar, retorna el nombre sin cambios.
+     *
+     * 💡 **Ejemplos:**
+     * - `ensureFileNameWithExtension('documento', 'application/pdf')` → `'documento.pdf'`
+     * - `ensureFileNameWithExtension('foto', 'image/jpeg')` → `'foto.jpg'`
+     * - `ensureFileNameWithExtension('archivo.txt', 'text/plain')` → `'archivo.txt'` (ya tiene extensión)
+     * - `ensureFileNameWithExtension('reporte', 'application/unknown')` → `'reporte'`
+     *
+     * @param fileName - Nombre del archivo (puede o no tener extensión)
+     * @param mimeType - Tipo MIME del archivo
+     * @returns Nombre del archivo con extensión (si fue posible determinarla)
+     */
+    ensureFileNameWithExtension(fileName, mimeType) {
+        // Si ya tiene extensión, retornarlo
+        if (fileName.includes('.')) {
+            return fileName;
+        }
+        // Obtener extensión del MIME type
+        const extension = this.getExtensionFromMimeType(mimeType);
+        return extension ? `${fileName}.${extension}` : fileName;
+    }
+    /**
+     * Obtiene la extensión del archivo basado en el MIME type.
+     *
+     * 📁 **Mapa de MIME Types Soportados:**
+     *
+     * | MIME Type | Extensión |
+     * |-----------|-----------|
+     * | application/pdf | pdf |
+     * | application/msword | doc |
+     * | application/vnd.openxmlformats-officedocument.wordprocessingml.document | docx |
+     * | application/vnd.ms-excel | xls |
+     * | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet | xlsx |
+     * | application/vnd.ms-powerpoint | ppt |
+     * | application/vnd.openxmlformats-officedocument.presentationml.presentation | pptx |
+     * | image/jpeg | jpg |
+     * | image/png | png |
+     * | image/gif | gif |
+     * | text/plain | txt |
+     * | application/json | json |
+     * | application/zip | zip |
+     * | application/octet-stream | bin |
+     *
+     * 🔄 **Comportamiento:**
+     * 1. Busca el MIME type en el mapa predefinido.
+     * 2. Si lo encuentra, retorna la extensión correspondiente.
+     * 3. Si no lo encuentra, intenta extraer el subtipo del MIME (ej: 'pdf' de 'application/pdf').
+     * 4. Si el subtipo es 'octet-stream' o no se puede determinar, retorna 'file'.
+     *
+     * @param mimeType - Tipo MIME del archivo
+     * @returns Extensión del archivo (sin el punto) o 'file' si no se puede determinar
+     */
+    getExtensionFromMimeType(mimeType) {
+        const mimeMap = {
+            'application/pdf': 'pdf',
+            'application/msword': 'doc',
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'docx',
+            'application/vnd.ms-excel': 'xls',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xlsx',
+            'application/vnd.ms-powerpoint': 'ppt',
+            'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'pptx',
+            'image/jpeg': 'jpg',
+            'image/png': 'png',
+            'image/gif': 'gif',
+            'text/plain': 'txt',
+            'application/json': 'json',
+            'application/zip': 'zip',
+            'application/octet-stream': 'bin',
+        };
+        // Buscar extensión en el mapa
+        const extension = mimeMap[mimeType];
+        if (extension) {
+            return extension;
+        }
+        // Si no está en el mapa, intentar extraer del MIME type
+        const mimeParts = mimeType.split('/');
+        if (mimeParts.length === 2) {
+            const type = mimeParts[1];
+            if (type !== 'octet-stream') {
+                return type;
+            }
+        }
+        // Si no se puede determinar, devolver 'file'
+        return 'file';
+    }
+    /**
+     * Formatea el tamaño del archivo para logging.
+     *
+     * 📊 **Formato de Salida:**
+     * - Bytes: `"123 B"`
+     * - Kilobytes: `"1.5 KB"`
+     * - Megabytes: `"2.3 MB"`
+     * - Gigabytes: `"1.2 GB"`
+     *
+     * 💡 **Ejemplos:**
+     * - `formatFileSize(0)` → `"0 B"`
+     * - `formatFileSize(1024)` → `"1.00 KB"`
+     * - `formatFileSize(1536)` → `"1.50 KB"`
+     * - `formatFileSize(1048576)` → `"1.00 MB"`
+     *
+     * @param bytes - Tamaño en bytes
+     * @returns String formateado del tamaño
+     */
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+    }
+    /**
+     * Registra mensajes de log solo en entornos de desarrollo.
+     *
+     * 🛠️ **Comportamiento:**
+     * - En desarrollo (production = false): Muestra los logs en consola
+     * - En producción (production = true): No muestra nada
+     *
+     * 📝 **Uso Interno:**
+     * Se utiliza para depuración sin afectar el rendimiento en producción.
+     *
+     * @param args - Argumentos para mostrar en el log
+     */
+    logIfNotProduction(...args) {
+        if (!this.environment.production) {
+            console.log('[ResultFileService]', ...args);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ResultFileReturnBlobNameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ResultFileReturnBlobNameService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ResultFileReturnBlobNameService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class HelpersService {
     Array = inject(ArrayHelpersService);
+    ServiceEntityPostFile = inject(SaveEntityPostFileService);
     ServiceResultFile = inject(ResultFileService);
     ServiceResultResponse = inject(ResultResponseService);
+    ServiceResultFileReturnBlobName = inject(ResultFileReturnBlobNameService);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HelpersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HelpersService, providedIn: 'root' });
 }
@@ -10916,19 +12511,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
-class DsxMessagesService {
-    AlertaService = inject(AlertaService);
-    SweetDialog = inject(SweetAlert2DialogService);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxMessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxMessagesService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxMessagesService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 // form-preview.service.ts
 class FormPreviewService {
     environment;
@@ -12175,5 +13757,5 @@ function sorensenDiceValidator(dataSource, key, umbral = 0.7) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPES, AlertaService, AppMessageErrorComponent, AppMessageHelpComponent, ArrowNavigationDirective, AuthorizeService, AutoScrollHeightDirective, BaseCRUDService, CACHE_KEYS, CacheService, CssV2Component, DSX_PALETTE, DateIndicator, DocxPreviewComponent, DsxAddToolsModule, DsxAutocomplete, DsxButtonComponent, DsxEnableDisable, DsxInputCurrency, DsxMessagesService, DsxSelect, DsxStatusToggle, DsxdateShort, DteService, ENVIRONMENT, EndpointService, ErrorHandlerService, FileComponent, FormPreviewService, GTQFormatter, HeaderDsx, HelpersService, HttpHelpersService, INITIAL_PARAMETERS, IcoLabel, IconDsxComponent, JoinByPipe, JsonHighlightPipe, JsonValuesDebujComponent, JsonViewerComponent, KpicardComponent, LoadingComponent, LoadingLottieComponent, LogoDsxComponent, MasterDetailChangeService, NavbarDsxComponent, NetworkStatusComponent, OnlyRangoPatternDirective, ParameterValuesService, PdfPreviewComponent, PrimeNgModule, QrGenerator, ResultFileService, SWEET_ALERT_THEMES, ScreenInspector, SecurityService, SelectAllOnFocusDirective, SpinnerLoadingService, SweetAlert2DialogService, TablePreviewService, TemplateHighlight, TokenPurposeLogin, TruncatePipe, UtilityAddService, asyncExistsValidator, atLeastOneFieldRequiredValidator, chainControlGroups, createCurrencyFormatter, createInitialCache, createTypedCacheProvider, cuiValidator, dateMinMaxValidator, dateRangeValidator, dateRangeValidatorFromTo, developmentEnvironment, getActionMessageConfig, getZeroBasedRolIndex, guardTokenPurposeGuard, httpAuthorizeInterceptor, minimumAgeValidator, nitValidator, productionEnvironment, provideEnvironment, sorensenDiceValidator, templateStructureValidator, templateVariablesValidator, validateEnvironmentConfig };
+export { ACTION_TYPES, AlertaService, AppMessageErrorComponent, AppMessageHelpComponent, ArrowNavigationDirective, AuthorizeService, AutoScrollHeightDirective, BaseCRUDService, CACHE_KEYS, CacheService, CssV2Component, DSX_PALETTE, DateIndicator, DocxPreviewComponent, DsxAddToolsModule, DsxAutocomplete, DsxButtonComponent, DsxEnableDisable, DsxInputCurrency, DsxMessagesService, DsxSelect, DsxStatusToggle, DsxdateShort, DsxdateTime, DteService, ENVIRONMENT, EndpointService, ErrorHandlerService, FileComponent, FormPreviewService, GTQFormatter, HeaderDsx, HelpersService, HttpHelpersService, INITIAL_PARAMETERS, IcoLabel, IconDsxComponent, JoinByPipe, JsonHighlightPipe, JsonValuesDebujComponent, JsonViewerComponent, KpicardComponent, LoadingComponent, LoadingLottieComponent, LogoDsxComponent, MasterDetailChangeService, NavbarDsxComponent, NetworkStatusComponent, OnlyRangoPatternDirective, ParameterValuesService, PdfPreviewComponent, PrimeNgModule, QrGenerator, ResultFileService, SWEET_ALERT_THEMES, ScreenInspector, SecurityService, SelectAllOnFocusDirective, SpinnerLoadingService, SweetAlert2DialogService, TablePreviewService, TemplateHighlight, TokenPurposeLogin, TruncatePipe, UtilityAddService, asyncExistsValidator, atLeastOneFieldRequiredValidator, chainControlGroups, createCurrencyFormatter, createInitialCache, createTypedCacheProvider, cuiValidator, dateMinMaxValidator, dateRangeValidator, dateRangeValidatorFromTo, developmentEnvironment, getActionMessageConfig, getZeroBasedRolIndex, guardTokenPurposeGuard, httpAuthorizeInterceptor, minimumAgeValidator, nitValidator, productionEnvironment, provideEnvironment, sorensenDiceValidator, templateStructureValidator, templateVariablesValidator, validateEnvironmentConfig };
 //# sourceMappingURL=ngx-dsxlibrary.mjs.map