ngx-dsxlibrary 2.21.74 → 2.21.76

package/fesm2022/ngx-dsxlibrary.mjs

@@ -5,7 +5,7 @@ import { FormsModule, NG_VALUE_ACCESSOR, AbstractControl, FormControl, NG_VALIDA
 import * as i2 from 'primeng/togglebutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 import * as i1$1 from '@angular/common';
-import { CommonModule, AsyncPipe, JsonPipe, DecimalPipe, DatePipe, Location } from '@angular/common';
+import { CommonModule, AsyncPipe, JsonPipe, DecimalPipe, Location } from '@angular/common';
 import * as i2$1 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
 import * as i3 from 'primeng/api';
@@ -18,6 +18,8 @@ import * as i2$3 from 'primeng/avatar';
 import { AvatarModule, Avatar } from 'primeng/avatar';
 import * as i2$2 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
+import * as i4 from 'primeng/button';
+import { ButtonModule, Button } from 'primeng/button';
 import * as i1$4 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$5 from 'primeng/tabs';
@@ -27,8 +29,6 @@ import * as i1$6 from '@angular/common/http';
 import { HttpClient, HttpHeaders, HttpParams, HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
 import { debounceTime, distinctUntilChanged, switchMap, shareReplay as shareReplay$1, map as map$1, take as take$1 } from 'rxjs/operators';
 import { Router, RouterLink } from '@angular/router';
-import * as i1$7 from 'primeng/button';
-import { Button, ButtonModule } from 'primeng/button';
 import moment from 'moment-timezone';
 import { ToastrService } from 'ngx-toastr';
 import Swal from 'sweetalert2';
@@ -37,7 +37,7 @@ import { LottieComponent } from 'ngx-lottie';
 import { createTimeline } from 'animejs';
 import * as i3$1 from 'primeng/image';
 import { ImageModule } from 'primeng/image';
-import * as i4 from 'primeng/menubar';
+import * as i4$1 from 'primeng/menubar';
 import { MenubarModule } from 'primeng/menubar';
 import { JwtHelperService } from '@auth0/angular-jwt';
 import { CookieService } from 'ngx-cookie-service';
@@ -52,6 +52,7 @@ import { AvatarGroupModule } from 'primeng/avatargroup';
 import { BadgeModule } from 'primeng/badge';
 import { CardModule } from 'primeng/card';
 import { CheckboxModule } from 'primeng/checkbox';
+import { ChipModule } from 'primeng/chip';
 import { ContextMenuModule } from 'primeng/contextmenu';
 import { DataViewModule } from 'primeng/dataview';
 import { DatePickerModule, DatePicker } from 'primeng/datepicker';
@@ -60,7 +61,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 * as i1$7 from 'primeng/inputmask';
 import { InputMaskModule } from 'primeng/inputmask';
 import { InputNumberModule, InputNumber } from 'primeng/inputnumber';
 import { InputTextModule } from 'primeng/inputtext';
@@ -833,7 +834,33 @@ class PdfPreviewComponent {
     visible = model(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     blob = input(null, ...(ngDevMode ? [{ debugName: "blob" }] : /* istanbul ignore next */ []));
     objectUrl = null;
-    pdfUrl = null;
+    fileUrl = null;
+    fileType = null;
+    fileName = '';
+    fileSize = '';
+    rawBlob = null;
+    mimeTypeMap = {
+        'application/pdf': 'PDF',
+        'image/jpeg': 'JPEG',
+        'image/png': 'PNG',
+        'image/gif': 'GIF',
+        'image/webp': 'WebP',
+    };
+    supportedTypes = [
+        'application/pdf',
+        'image/jpeg',
+        'image/png',
+        'image/gif',
+        'image/webp',
+    ];
+    // Mapeo de iconos por tipo
+    iconMap = {
+        'application/pdf': 'pi pi-file-pdf',
+        'image/jpeg': 'pi pi-image',
+        'image/png': 'pi pi-image',
+        'image/gif': 'pi pi-image',
+        'image/webp': 'pi pi-image',
+    };
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
         effect((onCleanup) => {
@@ -841,43 +868,112 @@ class PdfPreviewComponent {
             const isVisible = this.visible();
             if (!isVisible || file === null) {
                 this.limpiarUrlAnterior();
+                this.fileName = '';
+                this.fileSize = '';
+                this.fileType = null;
+                this.rawBlob = null;
                 return;
             }
-            if (file.type !== 'application/pdf') {
+            if (!this.isFileSupported(file)) {
                 this.limpiarUrlAnterior();
-                console.warn('El archivo recibido no es un PDF válido');
+                console.warn('Tipo de archivo no soportado:', file.type);
+                this.fileType = null;
+                this.rawBlob = null;
                 return;
             }
+            this.rawBlob = file;
+            this.fileType = file.type;
+            this.fileName = this.getFileNameFromBlob(file);
+            this.fileSize = this.formatFileSize(file.size);
             this.limpiarUrlAnterior();
             const currentObjectUrl = URL.createObjectURL(file);
             this.objectUrl = currentObjectUrl;
-            this.pdfUrl =
+            this.fileUrl =
                 this.sanitizer.bypassSecurityTrustResourceUrl(currentObjectUrl);
             onCleanup(() => {
                 URL.revokeObjectURL(currentObjectUrl);
                 if (this.objectUrl === currentObjectUrl) {
                     this.objectUrl = null;
-                    this.pdfUrl = null;
+                    this.fileUrl = null;
                 }
             });
         });
     }
+    isFileSupported(file) {
+        return this.supportedTypes.includes(file.type);
+    }
+    getFileNameFromBlob(blob) {
+        if (blob.name) {
+            return blob.name;
+        }
+        const extension = this.mimeTypeMap[blob.type] || 'archivo';
+        return `documento_soporte.${extension.toLowerCase()}`;
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
     limpiarUrlAnterior() {
         if (this.objectUrl) {
             URL.revokeObjectURL(this.objectUrl);
             this.objectUrl = null;
         }
-        this.pdfUrl = null;
+        this.fileUrl = null;
+    }
+    // Getters para el template
+    get isPdf() {
+        return this.fileType === 'application/pdf';
+    }
+    get isImage() {
+        return this.fileType?.startsWith('image/') || false;
+    }
+    get fileTypeLabel() {
+        return this.fileType
+            ? this.mimeTypeMap[this.fileType] || this.fileType
+            : '';
+    }
+    getFileIcon() {
+        if (!this.fileType)
+            return 'pi pi-file';
+        return this.iconMap[this.fileType] || 'pi pi-file';
+    }
+    // Descargar archivo
+    downloadFile() {
+        if (!this.rawBlob || !this.fileName) {
+            console.warn('No hay archivo para descargar');
+            return;
+        }
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(this.rawBlob);
+        link.download = this.fileName;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        // Limpiar URL creada para la descarga
+        setTimeout(() => {
+            URL.revokeObjectURL(link.href);
+        }, 100);
+    }
+    // Eventos de imagen
+    onImageLoad() {
+        console.log('Imagen cargada correctamente');
+    }
+    onImageError() {
+        console.warn('Error al cargar la imagen');
     }
     ngOnDestroy() {
         this.limpiarUrlAnterior();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PdfPreviewComponent, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PdfPreviewComponent, isStandalone: true, selector: "app-pdf-preview", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, ngImport: i0, template: "<p-dialog\r\n  header=\"Vista previa del documento de soporte\"\r\n  [(visible)]=\"visible\"\r\n  [style]=\"{ width: '80vw', height: '90vh' }\"\r\n  [closable]=\"true\"\r\n  [maximizable]=\"true\"\r\n>\r\n  @if (pdfUrl) {\r\n    <iframe\r\n      [src]=\"pdfUrl\"\r\n      width=\"100%\"\r\n      height=\"100%\"\r\n      style=\"border: none\"\r\n    ></iframe>\r\n  }\r\n</p-dialog>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2$2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PdfPreviewComponent, isStandalone: true, selector: "app-pdf-preview", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, ngImport: i0, template: "<p-dialog\r\n  [(visible)]=\"visible\"\r\n  [style]=\"{ width: '80vw', height: '90vh' }\"\r\n  [closable]=\"true\"\r\n  [maximizable]=\"true\"\r\n  [modal]=\"true\"\r\n>\r\n  <!-- Header personalizado -->\r\n  <ng-template pTemplate=\"header\">\r\n    <div class=\"dialog-header\">\r\n      <div class=\"header-left\">\r\n        <i [class]=\"getFileIcon()\" class=\"file-icon\"></i>\r\n        <div class=\"header-info\">\r\n          <span class=\"header-title\"\r\n            >Vista previa del documento de soporte</span\r\n          >\r\n          @if (fileName) {\r\n            <div class=\"header-details\">\r\n              <span class=\"file-name\">{{ fileName }}</span>\r\n              <span class=\"file-meta\">\r\n                <span class=\"file-type\">{{ fileTypeLabel }}</span>\r\n                <span class=\"file-size\">{{ fileSize }}</span>\r\n              </span>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"header-actions\">\r\n        @if (fileUrl) {\r\n          <button\r\n            pButton\r\n            type=\"button\"\r\n            icon=\"pi pi-download\"\r\n            class=\"p-button-rounded p-button-text p-button-sm\"\r\n            (click)=\"downloadFile()\"\r\n            pTooltip=\"Descargar archivo\"\r\n            tooltipPosition=\"top\"\r\n          ></button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Contenido -->\r\n  <div class=\"preview-wrapper\">\r\n    <!-- Caso: Sin archivo -->\r\n    @if (!fileUrl) {\r\n      <div class=\"empty-state\">\r\n        <i class=\"pi pi-file\"></i>\r\n        <p>No hay archivo seleccionado</p>\r\n      </div>\r\n    }\r\n    <!-- Caso: PDF -->\r\n    @else if (isPdf) {\r\n      <iframe\r\n        [src]=\"fileUrl\"\r\n        width=\"100%\"\r\n        height=\"100%\"\r\n        style=\"border: none\"\r\n        class=\"pdf-iframe\"\r\n      ></iframe>\r\n    }\r\n    <!-- Caso: Imagen -->\r\n    @else if (isImage) {\r\n      <div class=\"image-container\">\r\n        <img\r\n          [src]=\"fileUrl\"\r\n          [alt]=\"fileName || 'Vista previa de imagen'\"\r\n          class=\"preview-image\"\r\n          (load)=\"onImageLoad()\"\r\n          (error)=\"onImageError()\"\r\n        />\r\n      </div>\r\n    }\r\n  </div>\r\n</p-dialog>\r\n", styles: [".dialog-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.5rem 0;gap:1rem}.header-left{display:flex;align-items:center;gap:.75rem;min-width:0;flex:1}.file-icon{font-size:1.5rem;color:var(--primary-color, #3b82f6);flex-shrink:0}.header-info{display:flex;flex-direction:column;gap:.125rem;min-width:0}.header-title{font-size:1rem;font-weight:600;color:var(--text-color, #333);line-height:1.3}.header-details{display:flex;align-items:center;gap:.75rem;font-size:.8rem;color:var(--text-color-secondary, #666);flex-wrap:wrap}.file-name{font-weight:500;color:var(--text-color, #333);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-meta{display:flex;align-items:center;gap:.5rem}.file-type{background:var(--surface-hover, #f0f0f0);padding:.0625rem .5rem;border-radius:12px;font-size:.7rem;font-weight:500;color:var(--text-color-secondary, #666)}.file-size{font-size:.75rem;color:var(--text-color-secondary, #666)}.header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.header-actions ::ng-deep .p-button.p-button-text{color:var(--text-color-secondary, #666)}.header-actions ::ng-deep .p-button.p-button-text:hover{color:var(--primary-color, #3b82f6);background:var(--surface-hover, #f0f0f0)}.preview-wrapper{width:100%;height:calc(100% - 10px);min-height:400px;position:relative;background:var(--surface-ground, #f8f9fa);border-radius:4px;overflow:hidden}.pdf-iframe{width:100%;height:100%;border:none;background:#fff}.image-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--surface-ground, #f8f9fa)}.preview-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 2px 8px #0000001a;transition:transform .2s}.preview-image:hover{transform:scale(1.02)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--text-color-secondary, #666);height:100%;min-height:400px}.empty-state i{font-size:4rem;opacity:.4;color:var(--text-color-secondary, #666)}.empty-state p{margin:0;font-size:1rem;font-weight:400}@media(max-width:768px){.dialog-header{flex-direction:column;align-items:stretch;gap:.5rem;padding:.25rem 0}.header-left{gap:.5rem}.file-icon{font-size:1.25rem}.header-title{font-size:.9rem}.header-details{font-size:.7rem;gap:.5rem}.file-name{max-width:150px}.header-actions{justify-content:flex-end;padding-top:.25rem;border-top:1px solid var(--surface-border, #e0e0e0)}.preview-wrapper{min-height:300px}.preview-image{max-height:70vh}}@media(max-width:480px){.file-name{max-width:100px}.header-details{flex-wrap:wrap}}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2$2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PdfPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pdf-preview', imports: [DialogModule], template: "<p-dialog\r\n  header=\"Vista previa del documento de soporte\"\r\n  [(visible)]=\"visible\"\r\n  [style]=\"{ width: '80vw', height: '90vh' }\"\r\n  [closable]=\"true\"\r\n  [maximizable]=\"true\"\r\n>\r\n  @if (pdfUrl) {\r\n    <iframe\r\n      [src]=\"pdfUrl\"\r\n      width=\"100%\"\r\n      height=\"100%\"\r\n      style=\"border: none\"\r\n    ></iframe>\r\n  }\r\n</p-dialog>\r\n" }]
+            args: [{ selector: 'app-pdf-preview', imports: [DialogModule, ButtonModule, TooltipModule], template: "<p-dialog\r\n  [(visible)]=\"visible\"\r\n  [style]=\"{ width: '80vw', height: '90vh' }\"\r\n  [closable]=\"true\"\r\n  [maximizable]=\"true\"\r\n  [modal]=\"true\"\r\n>\r\n  <!-- Header personalizado -->\r\n  <ng-template pTemplate=\"header\">\r\n    <div class=\"dialog-header\">\r\n      <div class=\"header-left\">\r\n        <i [class]=\"getFileIcon()\" class=\"file-icon\"></i>\r\n        <div class=\"header-info\">\r\n          <span class=\"header-title\"\r\n            >Vista previa del documento de soporte</span\r\n          >\r\n          @if (fileName) {\r\n            <div class=\"header-details\">\r\n              <span class=\"file-name\">{{ fileName }}</span>\r\n              <span class=\"file-meta\">\r\n                <span class=\"file-type\">{{ fileTypeLabel }}</span>\r\n                <span class=\"file-size\">{{ fileSize }}</span>\r\n              </span>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"header-actions\">\r\n        @if (fileUrl) {\r\n          <button\r\n            pButton\r\n            type=\"button\"\r\n            icon=\"pi pi-download\"\r\n            class=\"p-button-rounded p-button-text p-button-sm\"\r\n            (click)=\"downloadFile()\"\r\n            pTooltip=\"Descargar archivo\"\r\n            tooltipPosition=\"top\"\r\n          ></button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Contenido -->\r\n  <div class=\"preview-wrapper\">\r\n    <!-- Caso: Sin archivo -->\r\n    @if (!fileUrl) {\r\n      <div class=\"empty-state\">\r\n        <i class=\"pi pi-file\"></i>\r\n        <p>No hay archivo seleccionado</p>\r\n      </div>\r\n    }\r\n    <!-- Caso: PDF -->\r\n    @else if (isPdf) {\r\n      <iframe\r\n        [src]=\"fileUrl\"\r\n        width=\"100%\"\r\n        height=\"100%\"\r\n        style=\"border: none\"\r\n        class=\"pdf-iframe\"\r\n      ></iframe>\r\n    }\r\n    <!-- Caso: Imagen -->\r\n    @else if (isImage) {\r\n      <div class=\"image-container\">\r\n        <img\r\n          [src]=\"fileUrl\"\r\n          [alt]=\"fileName || 'Vista previa de imagen'\"\r\n          class=\"preview-image\"\r\n          (load)=\"onImageLoad()\"\r\n          (error)=\"onImageError()\"\r\n        />\r\n      </div>\r\n    }\r\n  </div>\r\n</p-dialog>\r\n", styles: [".dialog-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.5rem 0;gap:1rem}.header-left{display:flex;align-items:center;gap:.75rem;min-width:0;flex:1}.file-icon{font-size:1.5rem;color:var(--primary-color, #3b82f6);flex-shrink:0}.header-info{display:flex;flex-direction:column;gap:.125rem;min-width:0}.header-title{font-size:1rem;font-weight:600;color:var(--text-color, #333);line-height:1.3}.header-details{display:flex;align-items:center;gap:.75rem;font-size:.8rem;color:var(--text-color-secondary, #666);flex-wrap:wrap}.file-name{font-weight:500;color:var(--text-color, #333);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-meta{display:flex;align-items:center;gap:.5rem}.file-type{background:var(--surface-hover, #f0f0f0);padding:.0625rem .5rem;border-radius:12px;font-size:.7rem;font-weight:500;color:var(--text-color-secondary, #666)}.file-size{font-size:.75rem;color:var(--text-color-secondary, #666)}.header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.header-actions ::ng-deep .p-button.p-button-text{color:var(--text-color-secondary, #666)}.header-actions ::ng-deep .p-button.p-button-text:hover{color:var(--primary-color, #3b82f6);background:var(--surface-hover, #f0f0f0)}.preview-wrapper{width:100%;height:calc(100% - 10px);min-height:400px;position:relative;background:var(--surface-ground, #f8f9fa);border-radius:4px;overflow:hidden}.pdf-iframe{width:100%;height:100%;border:none;background:#fff}.image-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--surface-ground, #f8f9fa)}.preview-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 2px 8px #0000001a;transition:transform .2s}.preview-image:hover{transform:scale(1.02)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--text-color-secondary, #666);height:100%;min-height:400px}.empty-state i{font-size:4rem;opacity:.4;color:var(--text-color-secondary, #666)}.empty-state p{margin:0;font-size:1rem;font-weight:400}@media(max-width:768px){.dialog-header{flex-direction:column;align-items:stretch;gap:.5rem;padding:.25rem 0}.header-left{gap:.5rem}.file-icon{font-size:1.25rem}.header-title{font-size:.9rem}.header-details{font-size:.7rem;gap:.5rem}.file-name{max-width:150px}.header-actions{justify-content:flex-end;padding-top:.25rem;border-top:1px solid var(--surface-border, #e0e0e0)}.preview-wrapper{min-height:300px}.preview-image{max-height:70vh}}@media(max-width:480px){.file-name{max-width:100px}.header-details{flex-wrap:wrap}}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.DomSanitizer }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], blob: [{ type: i0.Input, args: [{ isSignal: true, alias: "blob", required: false }] }] } });
 
 class TemplateHighlight {
@@ -1792,11 +1888,11 @@ class AppMessageHelpComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AppMessageHelpComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AppMessageHelpComponent, isStandalone: true, selector: "dsx-message-help", inputs: { control: "control", currentIdControl: "currentIdControl", helperFunction: "helperFunction", dataSource: "dataSource", key: "key", umbral: "umbral", debugMode: "debugMode", idFieldName: "idFieldName", maxSugerencias: "maxSugerencias" }, ngImport: i0, template: "<div class=\"dsx-help-slot\" [class.is-visible]=\"isHelpVisible()\">\r\n  @if (isHelpVisible()) {\r\n    <div\r\n      class=\"dsx-help-message\"\r\n      [class.is-warning]=\"helperFunction === 'similarity'\"\r\n    >\r\n      @if (helperFunction === \"similarity\") {\r\n        <icon-dsx name=\"emergency_home\"></icon-dsx>\r\n      } @else {\r\n        <icon-dsx name=\"chat_info\"></icon-dsx>\r\n      }\r\n      <span>{{ getHelpMessage() }}</span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.dsx-help-slot{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .22s ease,margin-top .22s ease,opacity .18s ease}.dsx-help-slot.is-visible{max-height:4rem;margin-top:.3rem;opacity:1}.dsx-help-message{--dsx-help-color: #067647;--dsx-help-bg: #ecfdf3;color:var(--dsx-help-color);font-family:Roboto,Montserrat,sans-serif;font-size:clamp(.75rem,.72rem + .12vw,.8125rem);font-weight:400;line-height:1.35;letter-spacing:.01em;display:flex;align-items:center;gap:.35rem;position:relative;z-index:1;padding:.2rem .45rem;border-left:3px solid var(--dsx-help-color);border-radius:0 6px 6px 0;background:var(--dsx-help-bg);box-shadow:0 1px 2px #00000014;width:100%;max-width:100%;white-space:normal;word-break:break-word;transform:translateY(-2px);transition:transform .2s ease;box-sizing:border-box}.dsx-help-message.is-warning{--dsx-help-color: #b54708;--dsx-help-bg: #fffaeb}.dsx-help-slot.is-visible .dsx-help-message{transform:translateY(0)}.dsx-help-icon{flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-help-color)}.dsx-help-message svg{width:1rem;height:1rem;flex-shrink:0;display:inline-block;vertical-align:middle;transition:color .2s ease,fill .2s ease,stroke .2s ease}.dsx-help-message svg,.dsx-help-message svg path{fill:var(--dsx-help-color);stroke:var(--dsx-help-color)}.dsx-help-message span{flex:1;word-break:break-word}@media(max-width:640px){.dsx-help-slot.is-visible{max-height:5rem}.dsx-help-message{width:100%;max-width:100%}}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:3;pointer-events:none}:host-context(.p-floatlabel) .dsx-help-slot{max-height:none;margin-top:.25rem;overflow:visible;opacity:0;transform:translateY(-3px);transition:opacity .16s ease,transform .18s ease}:host-context(.p-floatlabel) .dsx-help-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-help-message{width:100%;max-width:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: IconDsxComponent, selector: "icon-dsx", inputs: ["name", "style", "debug"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AppMessageHelpComponent, isStandalone: true, selector: "dsx-message-help", inputs: { control: "control", currentIdControl: "currentIdControl", helperFunction: "helperFunction", dataSource: "dataSource", key: "key", umbral: "umbral", debugMode: "debugMode", idFieldName: "idFieldName", maxSugerencias: "maxSugerencias" }, ngImport: i0, template: "<div class=\"dsx-help-slot\" [class.is-visible]=\"isHelpVisible()\">\r\n  @if (isHelpVisible()) {\r\n    <div\r\n      class=\"dsx-help-message\"\r\n      [class.is-warning]=\"helperFunction === 'similarity'\"\r\n    >\r\n      <span>{{ getHelpMessage() }}</span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.dsx-help-slot{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .22s ease,margin-top .22s ease,opacity .18s ease}.dsx-help-slot.is-visible{max-height:4rem;margin-top:.15rem;opacity:1}.dsx-help-message{--dsx-help-color: #059669;color:var(--dsx-help-color);font-family:Roboto,Montserrat,sans-serif;font-size:clamp(.7rem,.68rem + .08vw,.75rem);font-weight:400;line-height:1.4;letter-spacing:.01em;padding:.1rem 0;border:none;background:transparent;box-shadow:none;width:100%;max-width:100%;white-space:normal;word-break:break-word;box-sizing:border-box}.dsx-help-message.is-warning{--dsx-help-color: #d97706}.dsx-help-message span{display:block;word-break:break-word;color:var(--dsx-help-color)}.dsx-help-slot.is-visible .dsx-help-message{animation:fadeInHelp .2s ease}@keyframes fadeInHelp{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.dsx-help-slot.is-visible{max-height:5rem}.dsx-help-message{font-size:clamp(.6rem,.55rem + .15vw,.65rem);padding:.05rem 0}}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:3;pointer-events:none}:host-context(.p-floatlabel) .dsx-help-slot{max-height:none;margin-top:.1rem;overflow:visible;opacity:0;transform:translateY(-2px);transition:opacity .16s ease,transform .18s ease}:host-context(.p-floatlabel) .dsx-help-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-help-message{width:100%;max-width:100%;padding:.05rem 0;box-sizing:border-box}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AppMessageHelpComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dsx-message-help', imports: [IconDsxComponent], template: "<div class=\"dsx-help-slot\" [class.is-visible]=\"isHelpVisible()\">\r\n  @if (isHelpVisible()) {\r\n    <div\r\n      class=\"dsx-help-message\"\r\n      [class.is-warning]=\"helperFunction === 'similarity'\"\r\n    >\r\n      @if (helperFunction === \"similarity\") {\r\n        <icon-dsx name=\"emergency_home\"></icon-dsx>\r\n      } @else {\r\n        <icon-dsx name=\"chat_info\"></icon-dsx>\r\n      }\r\n      <span>{{ getHelpMessage() }}</span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.dsx-help-slot{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .22s ease,margin-top .22s ease,opacity .18s ease}.dsx-help-slot.is-visible{max-height:4rem;margin-top:.3rem;opacity:1}.dsx-help-message{--dsx-help-color: #067647;--dsx-help-bg: #ecfdf3;color:var(--dsx-help-color);font-family:Roboto,Montserrat,sans-serif;font-size:clamp(.75rem,.72rem + .12vw,.8125rem);font-weight:400;line-height:1.35;letter-spacing:.01em;display:flex;align-items:center;gap:.35rem;position:relative;z-index:1;padding:.2rem .45rem;border-left:3px solid var(--dsx-help-color);border-radius:0 6px 6px 0;background:var(--dsx-help-bg);box-shadow:0 1px 2px #00000014;width:100%;max-width:100%;white-space:normal;word-break:break-word;transform:translateY(-2px);transition:transform .2s ease;box-sizing:border-box}.dsx-help-message.is-warning{--dsx-help-color: #b54708;--dsx-help-bg: #fffaeb}.dsx-help-slot.is-visible .dsx-help-message{transform:translateY(0)}.dsx-help-icon{flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-help-color)}.dsx-help-message svg{width:1rem;height:1rem;flex-shrink:0;display:inline-block;vertical-align:middle;transition:color .2s ease,fill .2s ease,stroke .2s ease}.dsx-help-message svg,.dsx-help-message svg path{fill:var(--dsx-help-color);stroke:var(--dsx-help-color)}.dsx-help-message span{flex:1;word-break:break-word}@media(max-width:640px){.dsx-help-slot.is-visible{max-height:5rem}.dsx-help-message{width:100%;max-width:100%}}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:3;pointer-events:none}:host-context(.p-floatlabel) .dsx-help-slot{max-height:none;margin-top:.25rem;overflow:visible;opacity:0;transform:translateY(-3px);transition:opacity .16s ease,transform .18s ease}:host-context(.p-floatlabel) .dsx-help-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-help-message{width:100%;max-width:100%;box-sizing:border-box}\n"] }]
+            args: [{ selector: 'dsx-message-help', imports: [IconDsxComponent], template: "<div class=\"dsx-help-slot\" [class.is-visible]=\"isHelpVisible()\">\r\n  @if (isHelpVisible()) {\r\n    <div\r\n      class=\"dsx-help-message\"\r\n      [class.is-warning]=\"helperFunction === 'similarity'\"\r\n    >\r\n      <span>{{ getHelpMessage() }}</span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%}.dsx-help-slot{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .22s ease,margin-top .22s ease,opacity .18s ease}.dsx-help-slot.is-visible{max-height:4rem;margin-top:.15rem;opacity:1}.dsx-help-message{--dsx-help-color: #059669;color:var(--dsx-help-color);font-family:Roboto,Montserrat,sans-serif;font-size:clamp(.7rem,.68rem + .08vw,.75rem);font-weight:400;line-height:1.4;letter-spacing:.01em;padding:.1rem 0;border:none;background:transparent;box-shadow:none;width:100%;max-width:100%;white-space:normal;word-break:break-word;box-sizing:border-box}.dsx-help-message.is-warning{--dsx-help-color: #d97706}.dsx-help-message span{display:block;word-break:break-word;color:var(--dsx-help-color)}.dsx-help-slot.is-visible .dsx-help-message{animation:fadeInHelp .2s ease}@keyframes fadeInHelp{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.dsx-help-slot.is-visible{max-height:5rem}.dsx-help-message{font-size:clamp(.6rem,.55rem + .15vw,.65rem);padding:.05rem 0}}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:3;pointer-events:none}:host-context(.p-floatlabel) .dsx-help-slot{max-height:none;margin-top:.1rem;overflow:visible;opacity:0;transform:translateY(-2px);transition:opacity .16s ease,transform .18s ease}:host-context(.p-floatlabel) .dsx-help-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-help-message{width:100%;max-width:100%;padding:.05rem 0;box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { control: [{
                 type: Input
             }], currentIdControl: [{
@@ -2235,22 +2331,23 @@ function provideEnvironment(environment) {
  * - `import`   → Importar datos desde archivo (azul acero)
  */
 const ACTION_TYPES = {
+    cancel: 'cancel',
+    create: 'create',
+    details: 'details',
+    download: 'download',
+    edit: 'edit',
+    export: 'export',
     hardDelete: 'hardDelete',
-    softDelete: 'softDelete',
-    return: 'return',
     home: 'home',
-    validate: 'validate',
+    import: 'import',
+    refresh: 'refresh',
     restore: 'restore',
-    edit: 'edit',
-    create: 'create',
+    return: 'return',
     save: 'save',
+    softDelete: 'softDelete',
     update: 'update',
-    refresh: 'refresh',
-    details: 'details',
+    validate: 'validate',
     view: 'view',
-    export: 'export',
-    download: 'download',
-    import: 'import',
 };
 function getActionMessageConfig(action, secondArg, thirdArg) {
     const isActive = action === 'softDelete' || action === 'hardDelete'
@@ -4913,14 +5010,14 @@ const ACTION_CONFIG = {
         icon: 'save',
         primeIcon: 'pi pi-save',
         colorToken: 'success',
-        tooltip: 'Guardar nuevo registro',
+        tooltip: 'Guardar registro',
     },
     update: {
         label: 'Actualizar',
         icon: 'edit_note',
         primeIcon: 'pi pi-save',
         colorToken: 'primary',
-        tooltip: 'Actualizar registro existente',
+        tooltip: 'Actualizar registro',
     },
     refresh: {
         label: 'Refrescar',
@@ -4972,8 +5069,444 @@ const ACTION_CONFIG = {
         colorToken: 'import',
         tooltip: 'Importar desde archivo',
     },
+    cancel: {
+        label: 'Cancelar',
+        icon: 'cancel',
+        primeIcon: 'pi pi-times',
+        colorToken: 'danger',
+        tooltip: 'Cancelar operación',
+    },
 };
 
+// dsx-calendar-view.component.ts - VERSIÓN CON isDevMode()
+class DsxCalendarView {
+    // ============================================
+    // INPUTS
+    // ============================================
+    // Two-way binding
+    startDate = model(null, ...(ngDevMode ? [{ debugName: "startDate" }] : /* istanbul ignore next */ []));
+    endDate = model(null, ...(ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []));
+    excludeSundays = model(false, ...(ngDevMode ? [{ debugName: "excludeSundays" }] : /* istanbul ignore next */ []));
+    // Configuración
+    holidays = input([], ...(ngDevMode ? [{ debugName: "holidays" }] : /* istanbul ignore next */ []));
+    compactMode = input(true, ...(ngDevMode ? [{ debugName: "compactMode" }] : /* istanbul ignore next */ []));
+    showKPI = input(true, ...(ngDevMode ? [{ debugName: "showKPI" }] : /* istanbul ignore next */ []));
+    debugMode = input(false, ...(ngDevMode ? [{ debugName: "debugMode" }] : /* istanbul ignore next */ []));
+    isEdit = input(false, ...(ngDevMode ? [{ debugName: "isEdit" }] : /* istanbul ignore next */ []));
+    showControls = input(true, ...(ngDevMode ? [{ debugName: "showControls" }] : /* istanbul ignore next */ []));
+    // Output
+    rangeChanged = output();
+    // ============================================
+    // STATE
+    // ============================================
+    startDateStr = signal('', ...(ngDevMode ? [{ debugName: "startDateStr" }] : /* istanbul ignore next */ []));
+    endDateStr = signal('', ...(ngDevMode ? [{ debugName: "endDateStr" }] : /* istanbul ignore next */ []));
+    // ✅ Exponer isDevMode como propiedad pública para el template si es necesario
+    isDevMode = isDevMode();
+    // ============================================
+    // COMPUTED
+    // ============================================
+    shouldShowControls = computed(() => {
+        return this.isEdit() || this.showControls();
+    }, ...(ngDevMode ? [{ debugName: "shouldShowControls" }] : /* istanbul ignore next */ []));
+    months = computed(() => {
+        const perfStart = this.shouldLog() ? performance.now() : 0;
+        const start = this.startDateStr();
+        const end = this.endDateStr();
+        if (!start || !end) {
+            this.logPerformance('months', perfStart);
+            return [];
+        }
+        const zonaHoraria = 'America/Guatemala';
+        const startDate = moment(start).tz(zonaHoraria).toDate();
+        const endDate = moment(end).tz(zonaHoraria).toDate();
+        if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
+            this.logDebug('Fechas inválidas:', { start, end });
+            this.logPerformance('months', perfStart);
+            return [];
+        }
+        this.logDebug('fecha inicio: ', startDate);
+        this.logDebug('fecha final: ', endDate);
+        const startMonth = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
+        const endMonth = new Date(endDate.getFullYear(), endDate.getMonth(), 1);
+        const monthsToShow = [];
+        monthsToShow.push(this.generateMonth(startMonth, startDate, endDate));
+        if (startMonth.getTime() !== endMonth.getTime()) {
+            monthsToShow.push(this.generateMonth(endMonth, startDate, endDate));
+        }
+        this.logPerformance('months', perfStart);
+        return monthsToShow;
+    }, ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
+    formattedHolidays = computed(() => {
+        const perfStart = this.shouldLog() ? performance.now() : 0;
+        const holidays = this.kpi()?.holidaysList || [];
+        const result = holidays.map((h) => ({
+            date: this.normalizeDateToString(h.dateHoliday),
+            label: h.labelHoliday,
+        }));
+        this.logPerformance('formattedHolidays', perfStart);
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "formattedHolidays" }] : /* istanbul ignore next */ []));
+    // ============================================
+    // KPI: Estadísticas del rango (CORREGIDO)
+    // ============================================
+    kpi = computed(() => {
+        const perfStart = this.shouldLog() ? performance.now() : 0;
+        const start = this.startDateStr();
+        const end = this.endDateStr();
+        if (!start || !end) {
+            this.logPerformance('kpi', perfStart);
+            return null;
+        }
+        const startDate = new Date(start);
+        const endDate = new Date(end);
+        if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
+            this.logPerformance('kpi', perfStart);
+            return null;
+        }
+        const holidays = this.holidays();
+        const excludeSun = this.excludeSundays();
+        // 1. Calcular días totales
+        const totalDays = this.getDaysBetween(startDate, endDate);
+        // 2. Calcular domingos en el rango
+        let sundays = 0;
+        const current = new Date(startDate);
+        while (current <= endDate) {
+            if (current.getDay() === 0) {
+                sundays++;
+            }
+            current.setDate(current.getDate() + 1);
+        }
+        // 3. 🔥 Calcular feriados en el rango
+        const holidaysInRange = holidays.filter((h) => {
+            const hStr = this.normalizeDateToString(h.dateHoliday);
+            return hStr >= start && hStr <= end;
+        });
+        // 4. 🔥 Días hábiles = total - domingos - feriados
+        let businessDays = totalDays;
+        if (excludeSun) {
+            businessDays = totalDays - sundays;
+        }
+        // 🔥 CORRECCIÓN: Restar feriados independientemente de excludeSun
+        businessDays = businessDays - holidaysInRange.length;
+        const kpiResult = {
+            totalDays,
+            businessDays,
+            holidays: holidaysInRange.length,
+            sundays: excludeSun ? sundays : 0,
+            holidaysList: holidaysInRange,
+            startDate: start,
+            endDate: end,
+        };
+        this.logDebug('KPI calculado:', kpiResult);
+        this.logPerformance('kpi', perfStart);
+        return kpiResult;
+    }, ...(ngDevMode ? [{ debugName: "kpi" }] : /* istanbul ignore next */ []));
+    // ============================================
+    // EFFECTS
+    // ============================================
+    constructor() {
+        effect(() => {
+            const perfStart = this.shouldLog() ? performance.now() : 0;
+            const value = this.startDate();
+            const formatted = this.formatInputDate(value);
+            this.startDateStr.set(formatted);
+            this.logDebug('startDate actualizado:', { value, formatted });
+            this.emitRangeChange();
+            this.logPerformance('startDate effect', perfStart);
+        });
+        effect(() => {
+            const perfStart = this.shouldLog() ? performance.now() : 0;
+            const value = this.endDate();
+            const formatted = this.formatInputDate(value);
+            this.endDateStr.set(formatted);
+            this.logDebug('endDate actualizado:', { value, formatted });
+            this.emitRangeChange();
+            this.logPerformance('endDate effect', perfStart);
+        });
+        effect(() => {
+            this.logDebug('excludeSundays actualizado:', this.excludeSundays());
+        });
+    }
+    // ============================================
+    // PRIVATE METHODS
+    // ============================================
+    normalizeDateToString(date) {
+        const perfStart = this.shouldLog() ? performance.now() : 0;
+        let result = '';
+        if (!date) {
+            this.logPerformance('normalizeDateToString', perfStart);
+            return result;
+        }
+        if (date instanceof Date) {
+            if (isNaN(date.getTime())) {
+                this.logPerformance('normalizeDateToString', perfStart);
+                return result;
+            }
+            result = this.formatDate(date);
+        }
+        if (typeof date === 'string') {
+            if (/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+                result = date;
+            }
+            else {
+                const parsed = new Date(date);
+                if (!isNaN(parsed.getTime())) {
+                    result = this.formatDate(parsed);
+                }
+            }
+        }
+        this.logPerformance('normalizeDateToString', perfStart);
+        return result;
+    }
+    formatInputDate(value) {
+        if (!value)
+            return '';
+        if (value instanceof Date) {
+            if (isNaN(value.getTime()))
+                return '';
+            return this.formatDate(value);
+        }
+        if (typeof value === 'string') {
+            if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+                return value;
+            }
+            const date = new Date(value);
+            if (!isNaN(date.getTime())) {
+                return this.formatDate(date);
+            }
+            return '';
+        }
+        return '';
+    }
+    emitRangeChange() {
+        const start = this.startDateStr();
+        const end = this.endDateStr();
+        if (start && end) {
+            this.logDebug('Emitiendo rangeChanged:', { start, end });
+            this.rangeChanged.emit({ start, end });
+        }
+    }
+    // ============================================
+    // PUBLIC METHODS (Template)
+    // ============================================
+    onStartDateChange(event) {
+        if (!this.isEdit())
+            return;
+        const perfStart = this.shouldLog() ? performance.now() : 0;
+        const value = event.target.value;
+        this.startDate.set(value);
+        this.logDebug('onStartDateChange:', value);
+        this.logPerformance('onStartDateChange', perfStart);
+    }
+    onEndDateChange(event) {
+        if (!this.isEdit())
+            return;
+        const perfStart = this.shouldLog() ? performance.now() : 0;
+        const value = event.target.value;
+        this.endDate.set(value);
+        this.logDebug('onEndDateChange:', value);
+        this.logPerformance('onEndDateChange', perfStart);
+    }
+    onToggleSundays(event) {
+        if (!this.isEdit())
+            return;
+        const perfStart = this.shouldLog() ? performance.now() : 0;
+        const checked = event.target.checked;
+        this.excludeSundays.set(checked);
+        this.logDebug('onToggleSundays:', checked);
+        this.logPerformance('onToggleSundays', perfStart);
+    }
+    // ============================================
+    // GENERATE MONTH
+    // ============================================
+    generateMonth(monthDate, rangeStart, rangeEnd) {
+        const perfStart = this.shouldLog() ? performance.now() : 0;
+        const year = monthDate.getFullYear();
+        const month = monthDate.getMonth();
+        const firstDay = new Date(year, month, 1);
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const startDayOfWeek = firstDay.getDay();
+        const days = [];
+        const holidays = this.holidays();
+        const totalRangeDays = this.getDaysBetween(rangeStart, rangeEnd);
+        // Días anteriores
+        const prevMonthLastDay = new Date(year, month, 0).getDate();
+        for (let i = startDayOfWeek - 1; i >= 0; i--) {
+            const d = new Date(year, month, -i);
+            days.push({
+                date: d,
+                day: prevMonthLastDay - i,
+                isCurrentMonth: false,
+                isSunday: d.getDay() === 0,
+                isInRange: false,
+                isStart: false,
+                isEnd: false,
+                isHoliday: false,
+                disabled: false,
+            });
+        }
+        // Días del mes actual
+        for (let i = 1; i <= daysInMonth; i++) {
+            const d = new Date(year, month, i);
+            const dateStr = this.formatDate(d);
+            const holiday = holidays.find((h) => {
+                const hStr = this.normalizeDateToString(h.dateHoliday);
+                return hStr === dateStr;
+            });
+            const isSunday = d.getDay() === 0;
+            const isInRange = this.isDateInRange(d, rangeStart, rangeEnd);
+            const isStart = this.isSameDay(d, rangeStart);
+            const isEnd = this.isSameDay(d, rangeEnd);
+            const disabled = this.excludeSundays() && isSunday;
+            let rangePosition = 0;
+            if (isInRange && !disabled) {
+                const dayDiff = this.getDaysBetween(rangeStart, d) - 1;
+                rangePosition = totalRangeDays > 1 ? dayDiff / (totalRangeDays - 1) : 0;
+            }
+            days.push({
+                date: d,
+                day: i,
+                isCurrentMonth: true,
+                isSunday,
+                isInRange,
+                isStart,
+                isEnd,
+                isHoliday: !!holiday,
+                holidayLabel: holiday?.labelHoliday,
+                disabled,
+                rangePosition,
+            });
+        }
+        // Días siguientes
+        const totalCells = Math.ceil((startDayOfWeek + daysInMonth) / 7) * 7;
+        const remaining = totalCells - days.length;
+        for (let i = 1; i <= remaining; i++) {
+            const d = new Date(year, month + 1, i);
+            days.push({
+                date: d,
+                day: i,
+                isCurrentMonth: false,
+                isSunday: d.getDay() === 0,
+                isInRange: false,
+                isStart: false,
+                isEnd: false,
+                isHoliday: false,
+                disabled: false,
+            });
+        }
+        // Recalcular para días del mes actual
+        for (const day of days) {
+            if (day.isCurrentMonth) {
+                const d = day.date;
+                day.isInRange = this.isDateInRange(d, rangeStart, rangeEnd);
+                day.isStart = this.isSameDay(d, rangeStart);
+                day.isEnd = this.isSameDay(d, rangeEnd);
+                day.disabled = this.excludeSundays() && day.isSunday;
+                if (day.isInRange && !day.disabled) {
+                    const dayDiff = this.getDaysBetween(rangeStart, d) - 1;
+                    day.rangePosition =
+                        totalRangeDays > 1 ? dayDiff / (totalRangeDays - 1) : 0;
+                }
+            }
+        }
+        const monthNames = [
+            'Enero',
+            'Febrero',
+            'Marzo',
+            'Abril',
+            'Mayo',
+            'Junio',
+            'Julio',
+            'Agosto',
+            'Septiembre',
+            'Octubre',
+            'Noviembre',
+            'Diciembre',
+        ];
+        this.logPerformance('generateMonth', perfStart);
+        return {
+            label: `${monthNames[month]} ${year}`,
+            days,
+        };
+    }
+    // ============================================
+    // HELPERS
+    // ============================================
+    getDaysBetween(start, end) {
+        const s = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+        const e = new Date(end.getFullYear(), end.getMonth(), end.getDate());
+        const diffTime = Math.abs(e.getTime() - s.getTime());
+        return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+    }
+    isDateInRange(date, start, end) {
+        const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+        const s = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+        const e = new Date(end.getFullYear(), end.getMonth(), end.getDate());
+        return d >= s && d <= e;
+    }
+    isSameDay(d1, d2) {
+        if (!d2)
+            return false;
+        return (d1.getFullYear() === d2.getFullYear() &&
+            d1.getMonth() === d2.getMonth() &&
+            d1.getDate() === d2.getDate());
+    }
+    formatDate(date) {
+        const y = date.getFullYear();
+        const m = String(date.getMonth() + 1).padStart(2, '0');
+        const d = String(date.getDate()).padStart(2, '0');
+        return `${y}-${m}-${d}`;
+    }
+    // ============================================
+    // LOGGING - SIMPLE Y SEGURO
+    // ============================================
+    /**
+     * Verifica si debemos mostrar logs
+     * ✅ Usa isDevMode() de Angular - simple y confiable
+     */
+    shouldLog() {
+        return isDevMode() && this.debugMode();
+    }
+    /**
+     * Log de depuración - Solo visible en desarrollo con debugMode=true
+     * 🔥 NUNCA se ejecuta en producción
+     */
+    logDebug(...args) {
+        if (this.shouldLog()) {
+            console.log('[DsxCalendarView]', ...args);
+        }
+    }
+    /**
+     * Log de rendimiento - Mide tiempos de ejecución
+     * 🔥 NUNCA se ejecuta en producción
+     */
+    logPerformance(method, startTime) {
+        if (this.shouldLog() && startTime > 0) {
+            const elapsed = (performance.now() - startTime).toFixed(2);
+            if (Number(elapsed) > 0.1) {
+                console.log(`[DsxCalendarView] ⚡ ${method} - ${elapsed}ms`);
+            }
+        }
+    }
+    // ============================================
+    // TEMPLATE HELPERS
+    // ============================================
+    chunk(arr, size) {
+        const result = [];
+        for (let i = 0; i < arr.length; i += size) {
+            result.push(arr.slice(i, i + size));
+        }
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxCalendarView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DsxCalendarView, isStandalone: true, selector: "dsx-calendar-view", inputs: { startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, excludeSundays: { classPropertyName: "excludeSundays", publicName: "excludeSundays", isSignal: true, isRequired: false, transformFunction: null }, holidays: { classPropertyName: "holidays", publicName: "holidays", isSignal: true, isRequired: false, transformFunction: null }, compactMode: { classPropertyName: "compactMode", publicName: "compactMode", isSignal: true, isRequired: false, transformFunction: null }, showKPI: { classPropertyName: "showKPI", publicName: "showKPI", isSignal: true, isRequired: false, transformFunction: null }, debugMode: { classPropertyName: "debugMode", publicName: "debugMode", isSignal: true, isRequired: false, transformFunction: null }, isEdit: { classPropertyName: "isEdit", publicName: "isEdit", isSignal: true, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange", excludeSundays: "excludeSundaysChange", rangeChanged: "rangeChanged" }, ngImport: i0, template: "<!-- dsx-calendar-view.html - ACTUALIZADO CON showControls -->\r\n\r\n<div class=\"calendar-range\" [class.compact]=\"compactMode()\">\r\n  <!-- ==========================================\r\n       CONTROLES - Ocultables con showControls\r\n       ========================================== -->\r\n  @if (shouldShowControls()) {\r\n  <div class=\"controls\">\r\n    <div class=\"control-group\">\r\n      <label>Fecha Inicio</label>\r\n      <input\r\n        type=\"date\"\r\n        [value]=\"startDateStr()\"\r\n        (input)=\"onStartDateChange($event)\"\r\n        [disabled]=\"!isEdit()\"\r\n      />\r\n    </div>\r\n    <div class=\"control-group\">\r\n      <label>Fecha Fin</label>\r\n      <input\r\n        type=\"date\"\r\n        [value]=\"endDateStr()\"\r\n        (input)=\"onEndDateChange($event)\"\r\n        [disabled]=\"!isEdit()\"\r\n      />\r\n    </div>\r\n    <div class=\"control-group checkbox\">\r\n      <label>\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"excludeSundays()\"\r\n          (change)=\"onToggleSundays($event)\"\r\n          [disabled]=\"!isEdit()\"\r\n        />\r\n        Excluir Domingos\r\n      </label>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- ==========================================\r\n       KPIs\r\n       ========================================== -->\r\n  @if (showKPI() && kpi()) {\r\n  <div class=\"kpi-container\">\r\n    <div class=\"kpi-item\">\r\n      <span class=\"kpi-label\">\r\n        <i class=\"fa-regular fa-calendar-days\"></i>\r\n        D\u00EDas calendario\r\n      </span>\r\n      <span class=\"kpi-value\">{{ kpi()?.totalDays }}</span>\r\n    </div>\r\n    <div class=\"kpi-item\">\r\n      <span class=\"kpi-label\">\r\n        <i class=\"fa-regular fa-circle-check\"></i>\r\n        D\u00EDas h\u00E1biles\r\n      </span>\r\n      <span class=\"kpi-value\">{{ kpi()?.businessDays }}</span>\r\n    </div>\r\n    <div class=\"kpi-item\">\r\n      <span class=\"kpi-label\">\r\n        <i class=\"fa-solid fa-not-equal\"></i>\r\n        Feriados\r\n      </span>\r\n      <span class=\"kpi-value\">{{ kpi()?.holidays }}</span>\r\n    </div>\r\n    @if (excludeSundays()) {\r\n    <div class=\"kpi-item\">\r\n      <span class=\"kpi-label\">\r\n        <i class=\"fa-solid fa-calendar-day\"></i>\r\n        Domingos\r\n      </span>\r\n      <span class=\"kpi-value\">{{ kpi()?.sundays }}</span>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n\r\n  <!-- ==========================================\r\n       CALENDARIO\r\n       ========================================== -->\r\n  <div class=\"months-grid\">\r\n    @for (month of months(); track month.label) {\r\n    <div class=\"month-card\">\r\n      <div class=\"month-title\">{{ month.label }}</div>\r\n      <table class=\"calendar-table\">\r\n        <thead>\r\n          <tr>\r\n            @for (dia of ['Do','Lu','Ma','Mi','Ju','Vi','Sa']; track dia) {\r\n            <th>{{ dia }}</th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (row of chunk(month.days, 7); track $index) {\r\n          <tr>\r\n            @for (day of row; track day.date) {\r\n            <td\r\n              [class.other-month]=\"!day.isCurrentMonth\"\r\n              [class.sunday]=\"day.isSunday && !day.disabled && day.isCurrentMonth\"\r\n              [class.disabled-sunday]=\"day.disabled\"\r\n              [class.in-range]=\"day.isInRange && day.isCurrentMonth\"\r\n              [class.start-date]=\"day.isStart && day.isCurrentMonth\"\r\n              [class.end-date]=\"day.isEnd && day.isCurrentMonth\"\r\n              [class.holiday]=\"day.isHoliday && day.isCurrentMonth\"\r\n              [class.same-day]=\"day.isStart && day.isEnd\"\r\n              [style.--range-position]=\"day.rangePosition\"\r\n              [title]=\"day.isHoliday ? day.holidayLabel : ''\"\r\n            >\r\n              <span class=\"day-number\">{{ day.day }}</span>\r\n              @if (day.isHoliday && day.isCurrentMonth) {\r\n              <span class=\"holiday-label\">{{ day.holidayLabel }}</span>\r\n              }\r\n            </td>\r\n            }\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- ==========================================\r\n       FERIADOS DETALLE\r\n       ========================================== -->\r\n  @if (kpi()?.holidays && formattedHolidays().length) {\r\n  <div class=\"holidays-detail\">\r\n    <div class=\"holidays-detail-title\">\r\n      <i class=\"fa-solid fa-calendar-day\"></i>\r\n      Feriados en el per\u00EDodo\r\n    </div>\r\n    <div class=\"holidays-detail-list\">\r\n      @for (h of formattedHolidays(); track h.date) {\r\n      <span class=\"holiday-detail-tag\">\r\n        <i class=\"fa-regular fa-calendar\"></i>\r\n        {{ h.date }} - {{ h.label }}\r\n      </span>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".calendar-range{font-family:system-ui,-apple-system,sans-serif;max-width:100%;padding:8px}.calendar-range.compact{max-width:750px;margin:0 auto}.controls{display:flex;flex-wrap:wrap;gap:16px 24px;margin-bottom:12px;padding:10px 16px;background:#f8f9fa;border-radius:6px;border:1px solid #e9ecef;align-items:center;justify-content:center}.control-group{display:flex;align-items:center;gap:8px}.control-group label{font-size:.8rem;font-weight:600;color:#495057;white-space:nowrap}.control-group input[type=date]{padding:4px 8px;border:1px solid #ced4da;border-radius:4px;font-size:.8rem;background:#fff;min-width:130px}.control-group.checkbox{margin-left:0;padding-left:8px;border-left:1px solid #dee2e6}.control-group.checkbox label{font-weight:400;font-size:.75rem;cursor:pointer;display:flex;align-items:center;gap:4px}.kpi-container{display:flex;flex-wrap:wrap;gap:20px 32px;padding:10px 20px;margin-bottom:12px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:8px;border:1px solid #dee2e6;justify-content:center;align-items:center}.kpi-item{display:flex;align-items:center;gap:6px;font-size:.85rem}.kpi-label{color:#6c757d;font-weight:500}.kpi-value{font-weight:700;color:#212529;font-size:1.1rem;min-width:24px;text-align:center;background:#fff;padding:0 8px;border-radius:4px}.kpi-holidays{display:none}.months-grid{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.month-card{flex:1 1 auto;min-width:230px;max-width:300px;background:#fff;border:1px solid #dee2e6;border-radius:6px;padding:6px 4px 4px}.month-title{text-align:center;font-size:.85rem;font-weight:600;color:#212529;margin-bottom:4px;padding:2px 0}.calendar-table{width:100%;border-collapse:collapse;font-size:.7rem;table-layout:fixed}.calendar-table th{text-align:center;font-weight:600;color:#6c757d;padding:2px 0;font-size:.65rem}.calendar-table td{text-align:center;padding:2px 0;border-radius:3px;height:28px;vertical-align:middle;font-size:.7rem;transition:background .1s;position:relative}.other-month{color:#ced4da;background:transparent}.sunday{background:#ffe0e0}.disabled-sunday{background:#f1f3f5!important;color:#adb5bd!important;cursor:default}.in-range{background:#c4eeff}.start-date{background:#28a745!important;color:#fff!important;border-radius:3px 0 0 3px;font-weight:700}.end-date{background:#d17015!important;color:#fff!important;border-radius:0 3px 3px 0;font-weight:700}.same-day{background:#28a745!important;color:#fff!important;border-radius:3px}.day-number{display:block;font-size:.75rem;line-height:1.2}.holiday:not(.other-month){background:#e8f0fe!important;border:2px solid #1a5a8c!important;border-radius:4px!important;position:relative;z-index:1}.holiday .day-number{font-weight:700!important;color:#1a3a5c!important}.holiday-label{display:block;font-size:.45rem;line-height:1.2;color:#1a3a5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:95%;margin:0 auto;background:#1a5a8c1a;border-radius:2px;padding:0 2px;font-weight:600}.holiday:hover .holiday-label{white-space:normal;overflow:visible;position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#1a3a5c;color:#fff;padding:4px 10px;border-radius:4px;font-size:.6rem;z-index:10;box-shadow:0 2px 8px #0003;max-width:180px;white-space:nowrap}.holidays-detail{margin-top:12px;padding:10px 16px;background:#f0f4f8;border:1px solid #1a5a8c;border-radius:8px;border-left:4px solid #1a5a8c}.holidays-detail-title{font-size:.8rem;font-weight:600;color:#1a3a5c;margin-bottom:6px;display:flex;align-items:center;gap:6px}.holidays-detail-title i{color:#1a5a8c}.holidays-detail-list{display:flex;flex-wrap:wrap;gap:6px 12px}.holiday-detail-tag{font-size:.7rem;color:#1a3a5c;background:#e8f0fe;padding:2px 12px;border-radius:12px;border:1px solid #b3cfe5;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.holiday-detail-tag i{font-size:.6rem;color:#1a5a8c}.control-group input:disabled,.control-group input[disabled]{background:#f1f3f5!important;color:#6c757d!important;cursor:not-allowed;opacity:.7}.control-group input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6}.control-group.checkbox label:has(input:disabled){color:#6c757d;cursor:not-allowed}@media(max-width:600px){.month-card{min-width:180px;max-width:100%}.controls{gap:10px;padding:8px 12px;flex-direction:column;align-items:stretch}.control-group{justify-content:space-between}.control-group input[type=date]{min-width:100px;flex:1}.control-group.checkbox{border-left:none;padding-left:0;justify-content:center}.kpi-container{gap:10px 16px;padding:8px 12px;justify-content:center}.kpi-item{font-size:.75rem}.kpi-value{font-size:.9rem;min-width:20px;padding:0 4px}.holidays-detail{padding:8px 12px}.holiday-detail-tag{font-size:.6rem;padding:2px 8px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxCalendarView, decorators: [{
+            type: Component,
+            args: [{ selector: 'dsx-calendar-view', standalone: true, imports: [CommonModule, FormsModule], template: "<!-- dsx-calendar-view.html - ACTUALIZADO CON showControls -->\r\n\r\n<div class=\"calendar-range\" [class.compact]=\"compactMode()\">\r\n  <!-- ==========================================\r\n       CONTROLES - Ocultables con showControls\r\n       ========================================== -->\r\n  @if (shouldShowControls()) {\r\n  <div class=\"controls\">\r\n    <div class=\"control-group\">\r\n      <label>Fecha Inicio</label>\r\n      <input\r\n        type=\"date\"\r\n        [value]=\"startDateStr()\"\r\n        (input)=\"onStartDateChange($event)\"\r\n        [disabled]=\"!isEdit()\"\r\n      />\r\n    </div>\r\n    <div class=\"control-group\">\r\n      <label>Fecha Fin</label>\r\n      <input\r\n        type=\"date\"\r\n        [value]=\"endDateStr()\"\r\n        (input)=\"onEndDateChange($event)\"\r\n        [disabled]=\"!isEdit()\"\r\n      />\r\n    </div>\r\n    <div class=\"control-group checkbox\">\r\n      <label>\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"excludeSundays()\"\r\n          (change)=\"onToggleSundays($event)\"\r\n          [disabled]=\"!isEdit()\"\r\n        />\r\n        Excluir Domingos\r\n      </label>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- ==========================================\r\n       KPIs\r\n       ========================================== -->\r\n  @if (showKPI() && kpi()) {\r\n  <div class=\"kpi-container\">\r\n    <div class=\"kpi-item\">\r\n      <span class=\"kpi-label\">\r\n        <i class=\"fa-regular fa-calendar-days\"></i>\r\n        D\u00EDas calendario\r\n      </span>\r\n      <span class=\"kpi-value\">{{ kpi()?.totalDays }}</span>\r\n    </div>\r\n    <div class=\"kpi-item\">\r\n      <span class=\"kpi-label\">\r\n        <i class=\"fa-regular fa-circle-check\"></i>\r\n        D\u00EDas h\u00E1biles\r\n      </span>\r\n      <span class=\"kpi-value\">{{ kpi()?.businessDays }}</span>\r\n    </div>\r\n    <div class=\"kpi-item\">\r\n      <span class=\"kpi-label\">\r\n        <i class=\"fa-solid fa-not-equal\"></i>\r\n        Feriados\r\n      </span>\r\n      <span class=\"kpi-value\">{{ kpi()?.holidays }}</span>\r\n    </div>\r\n    @if (excludeSundays()) {\r\n    <div class=\"kpi-item\">\r\n      <span class=\"kpi-label\">\r\n        <i class=\"fa-solid fa-calendar-day\"></i>\r\n        Domingos\r\n      </span>\r\n      <span class=\"kpi-value\">{{ kpi()?.sundays }}</span>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n\r\n  <!-- ==========================================\r\n       CALENDARIO\r\n       ========================================== -->\r\n  <div class=\"months-grid\">\r\n    @for (month of months(); track month.label) {\r\n    <div class=\"month-card\">\r\n      <div class=\"month-title\">{{ month.label }}</div>\r\n      <table class=\"calendar-table\">\r\n        <thead>\r\n          <tr>\r\n            @for (dia of ['Do','Lu','Ma','Mi','Ju','Vi','Sa']; track dia) {\r\n            <th>{{ dia }}</th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (row of chunk(month.days, 7); track $index) {\r\n          <tr>\r\n            @for (day of row; track day.date) {\r\n            <td\r\n              [class.other-month]=\"!day.isCurrentMonth\"\r\n              [class.sunday]=\"day.isSunday && !day.disabled && day.isCurrentMonth\"\r\n              [class.disabled-sunday]=\"day.disabled\"\r\n              [class.in-range]=\"day.isInRange && day.isCurrentMonth\"\r\n              [class.start-date]=\"day.isStart && day.isCurrentMonth\"\r\n              [class.end-date]=\"day.isEnd && day.isCurrentMonth\"\r\n              [class.holiday]=\"day.isHoliday && day.isCurrentMonth\"\r\n              [class.same-day]=\"day.isStart && day.isEnd\"\r\n              [style.--range-position]=\"day.rangePosition\"\r\n              [title]=\"day.isHoliday ? day.holidayLabel : ''\"\r\n            >\r\n              <span class=\"day-number\">{{ day.day }}</span>\r\n              @if (day.isHoliday && day.isCurrentMonth) {\r\n              <span class=\"holiday-label\">{{ day.holidayLabel }}</span>\r\n              }\r\n            </td>\r\n            }\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- ==========================================\r\n       FERIADOS DETALLE\r\n       ========================================== -->\r\n  @if (kpi()?.holidays && formattedHolidays().length) {\r\n  <div class=\"holidays-detail\">\r\n    <div class=\"holidays-detail-title\">\r\n      <i class=\"fa-solid fa-calendar-day\"></i>\r\n      Feriados en el per\u00EDodo\r\n    </div>\r\n    <div class=\"holidays-detail-list\">\r\n      @for (h of formattedHolidays(); track h.date) {\r\n      <span class=\"holiday-detail-tag\">\r\n        <i class=\"fa-regular fa-calendar\"></i>\r\n        {{ h.date }} - {{ h.label }}\r\n      </span>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".calendar-range{font-family:system-ui,-apple-system,sans-serif;max-width:100%;padding:8px}.calendar-range.compact{max-width:750px;margin:0 auto}.controls{display:flex;flex-wrap:wrap;gap:16px 24px;margin-bottom:12px;padding:10px 16px;background:#f8f9fa;border-radius:6px;border:1px solid #e9ecef;align-items:center;justify-content:center}.control-group{display:flex;align-items:center;gap:8px}.control-group label{font-size:.8rem;font-weight:600;color:#495057;white-space:nowrap}.control-group input[type=date]{padding:4px 8px;border:1px solid #ced4da;border-radius:4px;font-size:.8rem;background:#fff;min-width:130px}.control-group.checkbox{margin-left:0;padding-left:8px;border-left:1px solid #dee2e6}.control-group.checkbox label{font-weight:400;font-size:.75rem;cursor:pointer;display:flex;align-items:center;gap:4px}.kpi-container{display:flex;flex-wrap:wrap;gap:20px 32px;padding:10px 20px;margin-bottom:12px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:8px;border:1px solid #dee2e6;justify-content:center;align-items:center}.kpi-item{display:flex;align-items:center;gap:6px;font-size:.85rem}.kpi-label{color:#6c757d;font-weight:500}.kpi-value{font-weight:700;color:#212529;font-size:1.1rem;min-width:24px;text-align:center;background:#fff;padding:0 8px;border-radius:4px}.kpi-holidays{display:none}.months-grid{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.month-card{flex:1 1 auto;min-width:230px;max-width:300px;background:#fff;border:1px solid #dee2e6;border-radius:6px;padding:6px 4px 4px}.month-title{text-align:center;font-size:.85rem;font-weight:600;color:#212529;margin-bottom:4px;padding:2px 0}.calendar-table{width:100%;border-collapse:collapse;font-size:.7rem;table-layout:fixed}.calendar-table th{text-align:center;font-weight:600;color:#6c757d;padding:2px 0;font-size:.65rem}.calendar-table td{text-align:center;padding:2px 0;border-radius:3px;height:28px;vertical-align:middle;font-size:.7rem;transition:background .1s;position:relative}.other-month{color:#ced4da;background:transparent}.sunday{background:#ffe0e0}.disabled-sunday{background:#f1f3f5!important;color:#adb5bd!important;cursor:default}.in-range{background:#c4eeff}.start-date{background:#28a745!important;color:#fff!important;border-radius:3px 0 0 3px;font-weight:700}.end-date{background:#d17015!important;color:#fff!important;border-radius:0 3px 3px 0;font-weight:700}.same-day{background:#28a745!important;color:#fff!important;border-radius:3px}.day-number{display:block;font-size:.75rem;line-height:1.2}.holiday:not(.other-month){background:#e8f0fe!important;border:2px solid #1a5a8c!important;border-radius:4px!important;position:relative;z-index:1}.holiday .day-number{font-weight:700!important;color:#1a3a5c!important}.holiday-label{display:block;font-size:.45rem;line-height:1.2;color:#1a3a5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:95%;margin:0 auto;background:#1a5a8c1a;border-radius:2px;padding:0 2px;font-weight:600}.holiday:hover .holiday-label{white-space:normal;overflow:visible;position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#1a3a5c;color:#fff;padding:4px 10px;border-radius:4px;font-size:.6rem;z-index:10;box-shadow:0 2px 8px #0003;max-width:180px;white-space:nowrap}.holidays-detail{margin-top:12px;padding:10px 16px;background:#f0f4f8;border:1px solid #1a5a8c;border-radius:8px;border-left:4px solid #1a5a8c}.holidays-detail-title{font-size:.8rem;font-weight:600;color:#1a3a5c;margin-bottom:6px;display:flex;align-items:center;gap:6px}.holidays-detail-title i{color:#1a5a8c}.holidays-detail-list{display:flex;flex-wrap:wrap;gap:6px 12px}.holiday-detail-tag{font-size:.7rem;color:#1a3a5c;background:#e8f0fe;padding:2px 12px;border-radius:12px;border:1px solid #b3cfe5;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.holiday-detail-tag i{font-size:.6rem;color:#1a5a8c}.control-group input:disabled,.control-group input[disabled]{background:#f1f3f5!important;color:#6c757d!important;cursor:not-allowed;opacity:.7}.control-group input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6}.control-group.checkbox label:has(input:disabled){color:#6c757d;cursor:not-allowed}@media(max-width:600px){.month-card{min-width:180px;max-width:100%}.controls{gap:10px;padding:8px 12px;flex-direction:column;align-items:stretch}.control-group{justify-content:space-between}.control-group input[type=date]{min-width:100px;flex:1}.control-group.checkbox{border-left:none;padding-left:0;justify-content:center}.kpi-container{gap:10px 16px;padding:8px 12px;justify-content:center}.kpi-item{font-size:.75rem}.kpi-value{font-size:.9rem;min-width:20px;padding:0 4px}.holidays-detail{padding:8px 12px}.holiday-detail-tag{font-size:.6rem;padding:2px 8px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: false }] }, { type: i0.Output, args: ["startDateChange"] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }, { type: i0.Output, args: ["endDateChange"] }], excludeSundays: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeSundays", required: false }] }, { type: i0.Output, args: ["excludeSundaysChange"] }], holidays: [{ type: i0.Input, args: [{ isSignal: true, alias: "holidays", required: false }] }], compactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMode", required: false }] }], showKPI: [{ type: i0.Input, args: [{ isSignal: true, alias: "showKPI", required: false }] }], debugMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugMode", required: false }] }], isEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEdit", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], rangeChanged: [{ type: i0.Output, args: ["rangeChanged"] }] } });
+
 class FileComponent {
     // Inputs
     existingFile = input(null, ...(ngDevMode ? [{ debugName: "existingFile" }] : /* istanbul ignore next */ []));
@@ -5073,15 +5606,18 @@ class FileComponent {
         const acceptStr = this.accept();
         if (!acceptStr)
             return 'archivo';
-        const extensions = acceptStr.split(',').map((ext) => ext.trim());
-        const cleanExtensions = extensions
-            .map((ext) => ext.replace('.', '').toUpperCase())
+        const cleanExtensions = acceptStr
+            .split(',')
+            .map((ext) => ext.trim().replace('.', '').toUpperCase())
             .filter((ext) => ext.length > 0);
         if (cleanExtensions.length === 0)
             return 'archivo';
-        if (cleanExtensions.length === 1)
-            return cleanExtensions[0];
-        return cleanExtensions.join(' o ');
+        // Formateador nativo en español para listas disyuntivas ("o")
+        const formatter = new Intl.ListFormat('es', {
+            style: 'long',
+            type: 'disjunction',
+        });
+        return formatter.format(cleanExtensions);
     }, ...(ngDevMode ? [{ debugName: "allowedFileTypeLabel" }] : /* istanbul ignore next */ []));
     // --- Constructor ---
     constructor() {
@@ -5412,7 +5948,7 @@ class FileComponent {
                 useExisting: forwardRef(() => FileComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\">\r\n      \uD83D\uDCC4 {{ overrideFileName() ?? existingFileName() }}\r\n    </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex flex-col gap-1\">\r\n    <div class=\"flex items-center gap-2\">\r\n      <p-fileUpload\r\n        fluid\r\n        #fileUpload\r\n        chooseIcon=\"fa-solid fa-file-arrow-up\"\r\n        [accept]=\"accept()\"\r\n        [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n        [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n        [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n        [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n        [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n        (onSelect)=\"onSelect($event)\"\r\n        [disabled]=\"!isFileUploadEnabled()\"\r\n        [pTooltip]=\"`${pTooltipOverride()} ${allowedFileTypeLabel()}`\"\r\n        [tooltipPosition]=\"tooltipPositionOverride()\"\r\n      >\r\n        <ng-template\r\n          #header\r\n          let-files\r\n          let-chooseCallback=\"chooseCallback\"\r\n          let-clearCallback=\"clearCallback\"\r\n        >\r\n          <!-- Mostrar el bot\u00F3n de upload SOLO si NO hay archivo seleccionado -->\r\n          @if (!files || files.length === 0) {\r\n            <p-button\r\n              (onClick)=\"choose($event, chooseCallback)\"\r\n              icon=\"fa-solid fa-cloud-arrow-up\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n            />\r\n          }\r\n\r\n          <span class=\"file-upload-placeholder\">\r\n            <i class=\"fa-regular fa-file-lines placeholder-icon\"></i>\r\n            <span class=\"placeholder-text\">\r\n              @if (files && files.length > 0) {\r\n                <span class=\"file-selected\">\r\n                  <i class=\"fa-regular fa-file-pdf file-icon\"></i>\r\n                  {{ files[0]?.name }}\r\n                  <span class=\"file-size\"\r\n                    >({{ formatFileSize(files[0]?.size) }})</span\r\n                  >\r\n                </span>\r\n              } @else if (allowedFileTypeLabel() !== \"archivo\") {\r\n                <span class=\"empty-warning\">Ning\u00FAn</span>\r\n                <span class=\"file-type empty-warning-type\">{{\r\n                  allowedFileTypeLabel()\r\n                }}</span>\r\n                <span class=\"empty-warning\">seleccionado</span>\r\n              } @else {\r\n                <span class=\"empty-warning\">Ning\u00FAn archivo seleccionado</span>\r\n              }\r\n            </span>\r\n          </span>\r\n\r\n          <!-- Mostrar bot\u00F3n de limpiar SOLO si hay archivo seleccionado -->\r\n          @if (files && files.length > 0) {\r\n            <p-button\r\n              icon=\"fa-solid fa-xmark\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              (onClick)=\"clear()\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n              styleClass=\"clear-button\"\r\n            />\r\n          }\r\n        </ng-template>\r\n        <!-- Ocultar la vista previa por defecto -->\r\n        <ng-template #content></ng-template>\r\n        <ng-template #file></ng-template>\r\n      </p-fileUpload>\r\n\r\n      <!-- Bot\u00F3n para cancelar remplazo -->\r\n      @if (isReplacing()) {\r\n        <p-button\r\n          icon=\"pi pi-times\"\r\n          [rounded]=\"true\"\r\n          severity=\"secondary\"\r\n          (click)=\"cancelReplace()\"\r\n          [disabled]=\"disabled()\"\r\n          pTooltip=\"Cancelar reemplazo\"\r\n          tooltipPosition=\"top\"\r\n        />\r\n      }\r\n    </div>\r\n\r\n    <!-- Mensajes de error (validaci\u00F3n de PrimeNG) -->\r\n    @if (errorMessage()) {\r\n      <div class=\"file-error-message\">\r\n        <i class=\"pi pi-exclamation-circle\"></i>\r\n        {{ errorMessage() }}\r\n      </div>\r\n    }\r\n\r\n    <!-- Mensaje de error del formulario (dsx-message-error) -->\r\n    @if (showError() && errorControl()) {\r\n      <dsx-message-error [control]=\"errorControl()\" />\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n  <div class=\"debug-panel\">\r\n    <div class=\"debug-header\">\r\n      <div class=\"debug-info\">\r\n        <strong>\uD83D\uDD0D Debug File Upload:</strong>\r\n        <span class=\"debug-item\"\r\n          >Archivo: {{ value ? value.name : \"Ninguno\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Tama\u00F1o: {{ value ? formatFileSize(value.size) : \"-\" }}</span\r\n        >\r\n        <span class=\"debug-item\">Tipo: {{ value ? value.type : \"-\" }}</span>\r\n        <span\r\n          class=\"debug-item\"\r\n          [style.color]=\"controlValid() ? '#10b981' : '#ef4444'\"\r\n        >\r\n          {{ controlValid() ? \"\u2705 V\u00E1lido\" : \"\u274C Inv\u00E1lido\" }}\r\n        </span>\r\n        <span class=\"debug-item\"\r\n          >Required: {{ isRequired() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Reemplazando: {{ isReplacing() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <!-- === ESTADOS ADICIONALES PARA DEBUG === -->\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA hasExistingFile: {{ hasExistingFile() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA existingFileName: {{ existingFileName() || \"null\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA isFileUploadEnabled: {{ isFileUploadEnabled() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA showExistingFile: {{ showExistingFile() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA value: {{ value ? value.name : \"null\" }}\r\n        </span>\r\n      </div>\r\n      <div class=\"debug-actions\">\r\n        <button (click)=\"forceReload()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDD04 Recargar\r\n        </button>\r\n        <button (click)=\"clear()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83E\uDDF9 Limpiar\r\n        </button>\r\n        <button (click)=\"diagnoseState()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDCCA Diagn\u00F3stico\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if (errorMessage()) {\r\n      <div class=\"debug-error\">\r\n        <strong>\u26A0\uFE0F Error activo:</strong> {{ errorMessage() }}\r\n      </div>\r\n    }\r\n    @if (controlErrors()) {\r\n      <div class=\"debug-errors\">\r\n        <strong>\u274C Errores del formulario:</strong>\r\n        <pre>{{ controlErrors() | json }}</pre>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-weight:500;color:#1d8678;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}::ng-deep .p-fileupload .p-fileupload-header{display:flex!important;align-items:center!important;gap:.75rem!important;padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{background:transparent!important;border:2px dashed #d1d5db!important;border-radius:8px!important;padding:.5rem 1rem!important;margin:.5rem!important;min-height:40px!important;min-width:40px!important;transition:all .25s ease!important;color:#6b7280!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:not(:disabled):hover{border-color:#3b82f6!important;background:#eff6ff!important;box-shadow:0 0 0 3px #3b82f61a!important;color:#3b82f6!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:disabled{opacity:.5!important;cursor:not-allowed!important;border-color:#e5e7eb!important;color:#9ca3af!important}::ng-deep .p-fileupload .p-fileupload-header .p-button .p-button-icon{font-size:1.2rem!important;transition:color .25s ease!important}.file-upload-placeholder{display:flex;align-items:center;gap:.75rem;pointer-events:none;white-space:nowrap;padding:0 .5rem}.placeholder-icon{font-size:1.35rem;color:#94a3b8;transition:all .3s ease}.placeholder-text{color:#94a3b8;font-size:.875rem;font-weight:400;transition:all .3s ease;letter-spacing:.01em}.placeholder-text .file-type{color:#64748b;font-size:.8rem;font-weight:600;transition:all .3s ease;letter-spacing:.03em;text-transform:uppercase;background:#f1f5f9;padding:.1rem .4rem;border-radius:4px;margin:0 .1rem}.placeholder-text .empty-warning{color:#d97706;font-weight:500;transition:color .3s ease}.placeholder-text .file-type.empty-warning-type{color:#b45309;background:#fef3c7;font-weight:600}.file-selected{display:flex;align-items:center;gap:.5rem;color:#1f2937;font-weight:500;font-size:.85rem}.file-selected .file-icon{font-size:1.2rem;color:#22994a}.file-selected .file-size{color:#9ca3af;font-weight:400;font-size:.75rem;margin-left:.25rem}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-icon{color:#3b82f6}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text{color:#1f2937}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text .empty-warning{color:#2563eb}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type.empty-warning-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-buttonbar{display:none!important}::ng-deep .p-fileupload .p-fileupload-content{padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-button.clear-button{background:transparent!important;border:none!important;border-radius:8px!important;padding:.5rem!important;min-width:40px!important;height:40px!important;transition:all .25s ease!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important}::ng-deep .p-fileupload .p-fileupload-header .p-button.clear-button:not(:disabled):hover{background:none!important;border:none!important;box-shadow:none!important;transform:scale(1.05)!important}::ng-deep .p-button.clear-button .p-button-icon{color:#6b7280!important;font-size:1.1rem!important;transition:all .25s ease!important}::ng-deep .p-button.clear-button:not(:disabled):hover .p-button-icon{color:#ef4444!important}::ng-deep .p-button.clear-button:disabled{opacity:.5!important;cursor:not-allowed!important}.file-error-message{display:flex;align-items:center;gap:.5rem;color:#dc2626;font-size:.875rem;font-weight:400;padding:.25rem .75rem;background:#fef2f2;border-radius:6px;border:1px solid #fecaca;animation:slideDown .3s ease}.file-error-message i{font-size:1rem;color:#dc2626;flex-shrink:0}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.debug-panel{margin-top:8px;font-size:11px;color:#374151;background:#f8fafc;padding:8px 12px;border-radius:6px;font-family:monospace;border:1px solid #e2e8f0;width:100%}.debug-header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.debug-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.debug-item{font-size:11px;color:#475569}.debug-item strong{color:#1e293b}.debug-actions{display:flex;gap:6px}.debug-btn{font-size:10px;padding:2px 10px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;transition:all .2s ease;color:#475569;font-family:monospace}.debug-btn:hover{background:#f1f5f9;border-color:#94a3b8}.debug-error,.debug-errors{margin-top:6px;padding:4px 8px;background:#fef2f2;border-radius:4px;color:#dc2626;font-size:11px;border:1px solid #fecaca}.debug-errors pre{margin:4px 0 0;font-size:10px;color:#991b1b;white-space:pre-wrap;word-break:break-all}@media(max-width:640px){.placeholder-icon{font-size:1.1rem!important}.placeholder-text{font-size:.75rem!important}.placeholder-text .file-type{font-size:.7rem!important;padding:.05rem .3rem!important}.file-selected{font-size:.75rem!important}.file-selected .file-icon{font-size:1rem!important}.file-selected .file-size{font-size:.65rem!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{padding:.4rem .75rem!important;min-height:34px!important;min-width:34px!important}::ng-deep .p-button.clear-button{min-width:34px!important;height:34px!important}.file-error-message{font-size:.75rem!important;padding:.2rem .5rem!important}.debug-panel{font-size:10px;padding:6px 8px}.debug-item{font-size:10px}.debug-btn{font-size:9px;padding:2px 6px}}\n"], dependencies: [{ kind: "component", type: FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "pipe", type: JsonPipe, name: "json" }] });
+        ], 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            <span class=\"placeholder-text\">\r\n              @if (files && files.length > 0) {\r\n                <span class=\"file-selected\">\r\n                  <i class=\"fa-solid fa-paperclip 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                <i\r\n                  class=\"fa-regular fa-file-lines fa-fade placeholder-icon\"\r\n                ></i>\r\n                <span class=\"empty-warning\">Ning\u00FAn</span>\r\n                <span class=\"file-type empty-warning-type\">{{\r\n                  allowedFileTypeLabel()\r\n                }}</span>\r\n                <span class=\"empty-warning\">seleccionado.</span>\r\n              } @else {\r\n                <span class=\"empty-warning\">Ning\u00FAn archivo seleccionado.</span>\r\n              }\r\n            </span>\r\n          </span>\r\n\r\n          <!-- Mostrar bot\u00F3n de limpiar SOLO si hay archivo seleccionado -->\r\n          @if (files && files.length > 0) {\r\n            <p-button\r\n              icon=\"fa-solid fa-xmark\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              (onClick)=\"clear()\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n              styleClass=\"clear-button\"\r\n            />\r\n          }\r\n        </ng-template>\r\n        <!-- Ocultar la vista previa por defecto -->\r\n        <ng-template #content></ng-template>\r\n        <ng-template #file></ng-template>\r\n      </p-fileUpload>\r\n\r\n      <!-- Bot\u00F3n para cancelar remplazo -->\r\n      @if (isReplacing()) {\r\n        <p-button\r\n          icon=\"pi pi-times\"\r\n          [rounded]=\"true\"\r\n          severity=\"secondary\"\r\n          (click)=\"cancelReplace()\"\r\n          [disabled]=\"disabled()\"\r\n          pTooltip=\"Cancelar reemplazo\"\r\n          tooltipPosition=\"top\"\r\n        />\r\n      }\r\n    </div>\r\n\r\n    <!-- Mensajes de error (validaci\u00F3n de PrimeNG) -->\r\n    @if (errorMessage()) {\r\n      <div class=\"file-error-message\">\r\n        <i class=\"pi pi-exclamation-circle\"></i>\r\n        {{ errorMessage() }}\r\n      </div>\r\n    }\r\n\r\n    <!-- Mensaje de error del formulario (dsx-message-error) -->\r\n    @if (showError() && errorControl()) {\r\n      <dsx-message-error [control]=\"errorControl()\" />\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n  <div class=\"debug-panel\">\r\n    <div class=\"debug-header\">\r\n      <div class=\"debug-info\">\r\n        <strong>\uD83D\uDD0D Debug File Upload:</strong>\r\n        <span class=\"debug-item\"\r\n          >Archivo: {{ value ? value.name : \"Ninguno\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Tama\u00F1o: {{ value ? formatFileSize(value.size) : \"-\" }}</span\r\n        >\r\n        <span class=\"debug-item\">Tipo: {{ value ? value.type : \"-\" }}</span>\r\n        <span\r\n          class=\"debug-item\"\r\n          [style.color]=\"controlValid() ? '#10b981' : '#ef4444'\"\r\n        >\r\n          {{ controlValid() ? \"\u2705 V\u00E1lido\" : \"\u274C Inv\u00E1lido\" }}\r\n        </span>\r\n        <span class=\"debug-item\"\r\n          >Required: {{ isRequired() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Reemplazando: {{ isReplacing() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <!-- === ESTADOS ADICIONALES PARA DEBUG === -->\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA hasExistingFile: {{ hasExistingFile() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA existingFileName: {{ existingFileName() || \"null\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA isFileUploadEnabled: {{ isFileUploadEnabled() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA showExistingFile: {{ showExistingFile() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA value: {{ value ? value.name : \"null\" }}\r\n        </span>\r\n      </div>\r\n      <div class=\"debug-actions\">\r\n        <button (click)=\"forceReload()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDD04 Recargar\r\n        </button>\r\n        <button (click)=\"clear()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83E\uDDF9 Limpiar\r\n        </button>\r\n        <button (click)=\"diagnoseState()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDCCA Diagn\u00F3stico\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if (errorMessage()) {\r\n      <div class=\"debug-error\">\r\n        <strong>\u26A0\uFE0F Error activo:</strong> {{ errorMessage() }}\r\n      </div>\r\n    }\r\n    @if (controlErrors()) {\r\n      <div class=\"debug-errors\">\r\n        <strong>\u274C Errores del formulario:</strong>\r\n        <pre>{{ controlErrors() | json }}</pre>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-weight:500;color:#1d8678;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}::ng-deep .p-fileupload .p-fileupload-header{display:flex!important;align-items:center!important;gap:.75rem!important;padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{background:transparent!important;border:2px dashed #d1d5db!important;border-radius:8px!important;padding:.5rem 1rem!important;margin:.5rem!important;min-height:40px!important;min-width:40px!important;transition:all .25s ease!important;color:#6b7280!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:not(:disabled):hover{border-color:#3b82f6!important;background:#eff6ff!important;box-shadow:0 0 0 3px #3b82f61a!important;color:#3b82f6!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:disabled{opacity:.5!important;cursor:not-allowed!important;border-color:#e5e7eb!important;color:#9ca3af!important}::ng-deep .p-fileupload .p-fileupload-header .p-button .p-button-icon{font-size:1.2rem!important;transition:color .25s ease!important}.file-upload-placeholder{display:flex;align-items:center;gap:.75rem;pointer-events:none;white-space:nowrap;padding:0 .5rem}.placeholder-icon{font-size:1.35rem;color:#94a3b8;transition:all .3s ease}.placeholder-text{color:#94a3b8;font-size:.875rem;font-weight:400;transition:all .3s ease;letter-spacing:.01em}.placeholder-text .file-type{color:#64748b;font-size:.8rem;font-weight:600;transition:all .3s ease;letter-spacing:.03em;text-transform:uppercase;background:#f1f5f9;padding:.1rem .4rem;border-radius:4px;margin:0 .1rem}.placeholder-text .empty-warning{color:#d97706;font-weight:500;transition:color .3s ease}.placeholder-text .file-type.empty-warning-type{color:#3f3e37;background:#dfc800;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:#3ad46d}.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,
@@ -5427,7 +5963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => FileComponent),
                             multi: true,
                         },
-                    ], template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\">\r\n      \uD83D\uDCC4 {{ overrideFileName() ?? existingFileName() }}\r\n    </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex flex-col gap-1\">\r\n    <div class=\"flex items-center gap-2\">\r\n      <p-fileUpload\r\n        fluid\r\n        #fileUpload\r\n        chooseIcon=\"fa-solid fa-file-arrow-up\"\r\n        [accept]=\"accept()\"\r\n        [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n        [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n        [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n        [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n        [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n        (onSelect)=\"onSelect($event)\"\r\n        [disabled]=\"!isFileUploadEnabled()\"\r\n        [pTooltip]=\"`${pTooltipOverride()} ${allowedFileTypeLabel()}`\"\r\n        [tooltipPosition]=\"tooltipPositionOverride()\"\r\n      >\r\n        <ng-template\r\n          #header\r\n          let-files\r\n          let-chooseCallback=\"chooseCallback\"\r\n          let-clearCallback=\"clearCallback\"\r\n        >\r\n          <!-- Mostrar el bot\u00F3n de upload SOLO si NO hay archivo seleccionado -->\r\n          @if (!files || files.length === 0) {\r\n            <p-button\r\n              (onClick)=\"choose($event, chooseCallback)\"\r\n              icon=\"fa-solid fa-cloud-arrow-up\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n            />\r\n          }\r\n\r\n          <span class=\"file-upload-placeholder\">\r\n            <i class=\"fa-regular fa-file-lines placeholder-icon\"></i>\r\n            <span class=\"placeholder-text\">\r\n              @if (files && files.length > 0) {\r\n                <span class=\"file-selected\">\r\n                  <i class=\"fa-regular fa-file-pdf file-icon\"></i>\r\n                  {{ files[0]?.name }}\r\n                  <span class=\"file-size\"\r\n                    >({{ formatFileSize(files[0]?.size) }})</span\r\n                  >\r\n                </span>\r\n              } @else if (allowedFileTypeLabel() !== \"archivo\") {\r\n                <span class=\"empty-warning\">Ning\u00FAn</span>\r\n                <span class=\"file-type empty-warning-type\">{{\r\n                  allowedFileTypeLabel()\r\n                }}</span>\r\n                <span class=\"empty-warning\">seleccionado</span>\r\n              } @else {\r\n                <span class=\"empty-warning\">Ning\u00FAn archivo seleccionado</span>\r\n              }\r\n            </span>\r\n          </span>\r\n\r\n          <!-- Mostrar bot\u00F3n de limpiar SOLO si hay archivo seleccionado -->\r\n          @if (files && files.length > 0) {\r\n            <p-button\r\n              icon=\"fa-solid fa-xmark\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              (onClick)=\"clear()\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n              styleClass=\"clear-button\"\r\n            />\r\n          }\r\n        </ng-template>\r\n        <!-- Ocultar la vista previa por defecto -->\r\n        <ng-template #content></ng-template>\r\n        <ng-template #file></ng-template>\r\n      </p-fileUpload>\r\n\r\n      <!-- Bot\u00F3n para cancelar remplazo -->\r\n      @if (isReplacing()) {\r\n        <p-button\r\n          icon=\"pi pi-times\"\r\n          [rounded]=\"true\"\r\n          severity=\"secondary\"\r\n          (click)=\"cancelReplace()\"\r\n          [disabled]=\"disabled()\"\r\n          pTooltip=\"Cancelar reemplazo\"\r\n          tooltipPosition=\"top\"\r\n        />\r\n      }\r\n    </div>\r\n\r\n    <!-- Mensajes de error (validaci\u00F3n de PrimeNG) -->\r\n    @if (errorMessage()) {\r\n      <div class=\"file-error-message\">\r\n        <i class=\"pi pi-exclamation-circle\"></i>\r\n        {{ errorMessage() }}\r\n      </div>\r\n    }\r\n\r\n    <!-- Mensaje de error del formulario (dsx-message-error) -->\r\n    @if (showError() && errorControl()) {\r\n      <dsx-message-error [control]=\"errorControl()\" />\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n  <div class=\"debug-panel\">\r\n    <div class=\"debug-header\">\r\n      <div class=\"debug-info\">\r\n        <strong>\uD83D\uDD0D Debug File Upload:</strong>\r\n        <span class=\"debug-item\"\r\n          >Archivo: {{ value ? value.name : \"Ninguno\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Tama\u00F1o: {{ value ? formatFileSize(value.size) : \"-\" }}</span\r\n        >\r\n        <span class=\"debug-item\">Tipo: {{ value ? value.type : \"-\" }}</span>\r\n        <span\r\n          class=\"debug-item\"\r\n          [style.color]=\"controlValid() ? '#10b981' : '#ef4444'\"\r\n        >\r\n          {{ controlValid() ? \"\u2705 V\u00E1lido\" : \"\u274C Inv\u00E1lido\" }}\r\n        </span>\r\n        <span class=\"debug-item\"\r\n          >Required: {{ isRequired() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Reemplazando: {{ isReplacing() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <!-- === ESTADOS ADICIONALES PARA DEBUG === -->\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA hasExistingFile: {{ hasExistingFile() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA existingFileName: {{ existingFileName() || \"null\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA isFileUploadEnabled: {{ isFileUploadEnabled() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA showExistingFile: {{ showExistingFile() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA value: {{ value ? value.name : \"null\" }}\r\n        </span>\r\n      </div>\r\n      <div class=\"debug-actions\">\r\n        <button (click)=\"forceReload()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDD04 Recargar\r\n        </button>\r\n        <button (click)=\"clear()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83E\uDDF9 Limpiar\r\n        </button>\r\n        <button (click)=\"diagnoseState()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDCCA Diagn\u00F3stico\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if (errorMessage()) {\r\n      <div class=\"debug-error\">\r\n        <strong>\u26A0\uFE0F Error activo:</strong> {{ errorMessage() }}\r\n      </div>\r\n    }\r\n    @if (controlErrors()) {\r\n      <div class=\"debug-errors\">\r\n        <strong>\u274C Errores del formulario:</strong>\r\n        <pre>{{ controlErrors() | json }}</pre>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-weight:500;color:#1d8678;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}::ng-deep .p-fileupload .p-fileupload-header{display:flex!important;align-items:center!important;gap:.75rem!important;padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{background:transparent!important;border:2px dashed #d1d5db!important;border-radius:8px!important;padding:.5rem 1rem!important;margin:.5rem!important;min-height:40px!important;min-width:40px!important;transition:all .25s ease!important;color:#6b7280!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:not(:disabled):hover{border-color:#3b82f6!important;background:#eff6ff!important;box-shadow:0 0 0 3px #3b82f61a!important;color:#3b82f6!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:disabled{opacity:.5!important;cursor:not-allowed!important;border-color:#e5e7eb!important;color:#9ca3af!important}::ng-deep .p-fileupload .p-fileupload-header .p-button .p-button-icon{font-size:1.2rem!important;transition:color .25s ease!important}.file-upload-placeholder{display:flex;align-items:center;gap:.75rem;pointer-events:none;white-space:nowrap;padding:0 .5rem}.placeholder-icon{font-size:1.35rem;color:#94a3b8;transition:all .3s ease}.placeholder-text{color:#94a3b8;font-size:.875rem;font-weight:400;transition:all .3s ease;letter-spacing:.01em}.placeholder-text .file-type{color:#64748b;font-size:.8rem;font-weight:600;transition:all .3s ease;letter-spacing:.03em;text-transform:uppercase;background:#f1f5f9;padding:.1rem .4rem;border-radius:4px;margin:0 .1rem}.placeholder-text .empty-warning{color:#d97706;font-weight:500;transition:color .3s ease}.placeholder-text .file-type.empty-warning-type{color:#b45309;background:#fef3c7;font-weight:600}.file-selected{display:flex;align-items:center;gap:.5rem;color:#1f2937;font-weight:500;font-size:.85rem}.file-selected .file-icon{font-size:1.2rem;color:#22994a}.file-selected .file-size{color:#9ca3af;font-weight:400;font-size:.75rem;margin-left:.25rem}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-icon{color:#3b82f6}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text{color:#1f2937}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text .empty-warning{color:#2563eb}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type.empty-warning-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-buttonbar{display:none!important}::ng-deep .p-fileupload .p-fileupload-content{padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-button.clear-button{background:transparent!important;border:none!important;border-radius:8px!important;padding:.5rem!important;min-width:40px!important;height:40px!important;transition:all .25s ease!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important}::ng-deep .p-fileupload .p-fileupload-header .p-button.clear-button:not(:disabled):hover{background:none!important;border:none!important;box-shadow:none!important;transform:scale(1.05)!important}::ng-deep .p-button.clear-button .p-button-icon{color:#6b7280!important;font-size:1.1rem!important;transition:all .25s ease!important}::ng-deep .p-button.clear-button:not(:disabled):hover .p-button-icon{color:#ef4444!important}::ng-deep .p-button.clear-button:disabled{opacity:.5!important;cursor:not-allowed!important}.file-error-message{display:flex;align-items:center;gap:.5rem;color:#dc2626;font-size:.875rem;font-weight:400;padding:.25rem .75rem;background:#fef2f2;border-radius:6px;border:1px solid #fecaca;animation:slideDown .3s ease}.file-error-message i{font-size:1rem;color:#dc2626;flex-shrink:0}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.debug-panel{margin-top:8px;font-size:11px;color:#374151;background:#f8fafc;padding:8px 12px;border-radius:6px;font-family:monospace;border:1px solid #e2e8f0;width:100%}.debug-header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.debug-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.debug-item{font-size:11px;color:#475569}.debug-item strong{color:#1e293b}.debug-actions{display:flex;gap:6px}.debug-btn{font-size:10px;padding:2px 10px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;transition:all .2s ease;color:#475569;font-family:monospace}.debug-btn:hover{background:#f1f5f9;border-color:#94a3b8}.debug-error,.debug-errors{margin-top:6px;padding:4px 8px;background:#fef2f2;border-radius:4px;color:#dc2626;font-size:11px;border:1px solid #fecaca}.debug-errors pre{margin:4px 0 0;font-size:10px;color:#991b1b;white-space:pre-wrap;word-break:break-all}@media(max-width:640px){.placeholder-icon{font-size:1.1rem!important}.placeholder-text{font-size:.75rem!important}.placeholder-text .file-type{font-size:.7rem!important;padding:.05rem .3rem!important}.file-selected{font-size:.75rem!important}.file-selected .file-icon{font-size:1rem!important}.file-selected .file-size{font-size:.65rem!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{padding:.4rem .75rem!important;min-height:34px!important;min-width:34px!important}::ng-deep .p-button.clear-button{min-width:34px!important;height:34px!important}.file-error-message{font-size:.75rem!important;padding:.2rem .5rem!important}.debug-panel{font-size:10px;padding:6px 8px}.debug-item{font-size:10px}.debug-btn{font-size:9px;padding:2px 6px}}\n"] }]
+                    ], 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            <span class=\"placeholder-text\">\r\n              @if (files && files.length > 0) {\r\n                <span class=\"file-selected\">\r\n                  <i class=\"fa-solid fa-paperclip 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                <i\r\n                  class=\"fa-regular fa-file-lines fa-fade placeholder-icon\"\r\n                ></i>\r\n                <span class=\"empty-warning\">Ning\u00FAn</span>\r\n                <span class=\"file-type empty-warning-type\">{{\r\n                  allowedFileTypeLabel()\r\n                }}</span>\r\n                <span class=\"empty-warning\">seleccionado.</span>\r\n              } @else {\r\n                <span class=\"empty-warning\">Ning\u00FAn archivo seleccionado.</span>\r\n              }\r\n            </span>\r\n          </span>\r\n\r\n          <!-- Mostrar bot\u00F3n de limpiar SOLO si hay archivo seleccionado -->\r\n          @if (files && files.length > 0) {\r\n            <p-button\r\n              icon=\"fa-solid fa-xmark\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              (onClick)=\"clear()\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n              styleClass=\"clear-button\"\r\n            />\r\n          }\r\n        </ng-template>\r\n        <!-- Ocultar la vista previa por defecto -->\r\n        <ng-template #content></ng-template>\r\n        <ng-template #file></ng-template>\r\n      </p-fileUpload>\r\n\r\n      <!-- Bot\u00F3n para cancelar remplazo -->\r\n      @if (isReplacing()) {\r\n        <p-button\r\n          icon=\"pi pi-times\"\r\n          [rounded]=\"true\"\r\n          severity=\"secondary\"\r\n          (click)=\"cancelReplace()\"\r\n          [disabled]=\"disabled()\"\r\n          pTooltip=\"Cancelar reemplazo\"\r\n          tooltipPosition=\"top\"\r\n        />\r\n      }\r\n    </div>\r\n\r\n    <!-- Mensajes de error (validaci\u00F3n de PrimeNG) -->\r\n    @if (errorMessage()) {\r\n      <div class=\"file-error-message\">\r\n        <i class=\"pi pi-exclamation-circle\"></i>\r\n        {{ errorMessage() }}\r\n      </div>\r\n    }\r\n\r\n    <!-- Mensaje de error del formulario (dsx-message-error) -->\r\n    @if (showError() && errorControl()) {\r\n      <dsx-message-error [control]=\"errorControl()\" />\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n  <div class=\"debug-panel\">\r\n    <div class=\"debug-header\">\r\n      <div class=\"debug-info\">\r\n        <strong>\uD83D\uDD0D Debug File Upload:</strong>\r\n        <span class=\"debug-item\"\r\n          >Archivo: {{ value ? value.name : \"Ninguno\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Tama\u00F1o: {{ value ? formatFileSize(value.size) : \"-\" }}</span\r\n        >\r\n        <span class=\"debug-item\">Tipo: {{ value ? value.type : \"-\" }}</span>\r\n        <span\r\n          class=\"debug-item\"\r\n          [style.color]=\"controlValid() ? '#10b981' : '#ef4444'\"\r\n        >\r\n          {{ controlValid() ? \"\u2705 V\u00E1lido\" : \"\u274C Inv\u00E1lido\" }}\r\n        </span>\r\n        <span class=\"debug-item\"\r\n          >Required: {{ isRequired() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Reemplazando: {{ isReplacing() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <!-- === ESTADOS ADICIONALES PARA DEBUG === -->\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA hasExistingFile: {{ hasExistingFile() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA existingFileName: {{ existingFileName() || \"null\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA isFileUploadEnabled: {{ isFileUploadEnabled() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA showExistingFile: {{ showExistingFile() ? \"\u2705\" : \"\u274C\" }}\r\n        </span>\r\n        <span\r\n          class=\"debug-item\"\r\n          style=\"background: #f0f0f0; padding: 0 6px; border-radius: 4px\"\r\n        >\r\n          \uD83D\uDCCA value: {{ value ? value.name : \"null\" }}\r\n        </span>\r\n      </div>\r\n      <div class=\"debug-actions\">\r\n        <button (click)=\"forceReload()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDD04 Recargar\r\n        </button>\r\n        <button (click)=\"clear()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83E\uDDF9 Limpiar\r\n        </button>\r\n        <button (click)=\"diagnoseState()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDCCA Diagn\u00F3stico\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if (errorMessage()) {\r\n      <div class=\"debug-error\">\r\n        <strong>\u26A0\uFE0F Error activo:</strong> {{ errorMessage() }}\r\n      </div>\r\n    }\r\n    @if (controlErrors()) {\r\n      <div class=\"debug-errors\">\r\n        <strong>\u274C Errores del formulario:</strong>\r\n        <pre>{{ controlErrors() | json }}</pre>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-weight:500;color:#1d8678;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}::ng-deep .p-fileupload .p-fileupload-header{display:flex!important;align-items:center!important;gap:.75rem!important;padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{background:transparent!important;border:2px dashed #d1d5db!important;border-radius:8px!important;padding:.5rem 1rem!important;margin:.5rem!important;min-height:40px!important;min-width:40px!important;transition:all .25s ease!important;color:#6b7280!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:not(:disabled):hover{border-color:#3b82f6!important;background:#eff6ff!important;box-shadow:0 0 0 3px #3b82f61a!important;color:#3b82f6!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:disabled{opacity:.5!important;cursor:not-allowed!important;border-color:#e5e7eb!important;color:#9ca3af!important}::ng-deep .p-fileupload .p-fileupload-header .p-button .p-button-icon{font-size:1.2rem!important;transition:color .25s ease!important}.file-upload-placeholder{display:flex;align-items:center;gap:.75rem;pointer-events:none;white-space:nowrap;padding:0 .5rem}.placeholder-icon{font-size:1.35rem;color:#94a3b8;transition:all .3s ease}.placeholder-text{color:#94a3b8;font-size:.875rem;font-weight:400;transition:all .3s ease;letter-spacing:.01em}.placeholder-text .file-type{color:#64748b;font-size:.8rem;font-weight:600;transition:all .3s ease;letter-spacing:.03em;text-transform:uppercase;background:#f1f5f9;padding:.1rem .4rem;border-radius:4px;margin:0 .1rem}.placeholder-text .empty-warning{color:#d97706;font-weight:500;transition:color .3s ease}.placeholder-text .file-type.empty-warning-type{color:#3f3e37;background:#dfc800;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:#3ad46d}.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() {
@@ -5626,64 +6162,91 @@ class JsonValuesDebujComponent {
         }
         return files;
     }
-    updateSerializedValue(value) {
-        if (!value) {
-            this.serializedValue.set('');
-            return;
+    // ✅ Método para serializar cualquier valor (incluyendo fechas)
+    serializeValue(value) {
+        // Si es null o undefined
+        if (value === null || value === undefined) {
+            return null;
         }
-        try {
-            // ✅ Clonar y procesar archivos en toda la estructura
-            const copy = this.cloneWithFileProcessing(value);
-            this.serializedValue.set(JSON.stringify(copy, null, 2));
+        // ✅ Si es un objeto Date, convertirlo a string ISO
+        if (value instanceof Date) {
+            return value.toISOString();
         }
-        catch (error) {
-            this.serializedValue.set('Error al serializar: ' + error);
-            if (this.shouldShowLogs()) {
-                console.error('[JsonDebug] Error serializing value:', error);
-            }
+        // ✅ Si es un objeto moment (si usas moment.js)
+        if (value && typeof value === 'object' && value._isAMomentObject) {
+            return value.toISOString();
         }
-    }
-    // ✅ Clonar objeto procesando archivos recursivamente
-    cloneWithFileProcessing(obj) {
-        if (!obj || typeof obj !== 'object') {
-            return obj;
+        // ✅ Si es un objeto dayjs (si usas dayjs)
+        if (value &&
+            typeof value === 'object' &&
+            value.$d &&
+            value.$d instanceof Date) {
+            return value.toISOString();
+        }
+        // ✅ Si es un objeto con propiedades de fecha (como { year, month, day })
+        if (value &&
+            typeof value === 'object' &&
+            value.year !== undefined &&
+            value.month !== undefined &&
+            value.day !== undefined) {
+            try {
+                const date = new Date(value.year, value.month - 1, value.day);
+                return date.toISOString();
+            }
+            catch (e) {
+                return value;
+            }
         }
         // Si es un File o Blob, extraer sus propiedades
-        if (obj instanceof File || obj instanceof Blob) {
+        if (value instanceof File || value instanceof Blob) {
             const fileProps = {
-                __type: obj instanceof File ? 'File' : 'Blob',
+                __type: value instanceof File ? 'File' : 'Blob',
             };
-            if ('name' in obj && obj.name !== undefined) {
-                fileProps.name = obj.name;
+            if ('name' in value && value.name !== undefined) {
+                fileProps.name = value.name;
             }
-            if ('size' in obj && obj.size !== undefined) {
-                fileProps.size = obj.size;
+            if ('size' in value && value.size !== undefined) {
+                fileProps.size = value.size;
             }
-            if ('type' in obj && obj.type !== undefined) {
-                fileProps.type = obj.type;
+            if ('type' in value && value.type !== undefined) {
+                fileProps.type = value.type;
             }
-            if ('lastModified' in obj && obj.lastModified !== undefined) {
-                fileProps.lastModified = obj.lastModified;
+            if ('lastModified' in value && value.lastModified !== undefined) {
+                fileProps.lastModified = value.lastModified;
             }
             return fileProps;
         }
         // Si es un array, procesar cada elemento
-        if (Array.isArray(obj)) {
-            return obj.map((item) => this.cloneWithFileProcessing(item));
+        if (Array.isArray(value)) {
+            return value.map((item) => this.serializeValue(item));
         }
         // Si es un objeto, procesar cada propiedad
-        const result = {};
-        Object.keys(obj).forEach((key) => {
-            // Si la propiedad es 'file' y es un File/Blob, procesarla
-            if (key === 'file' &&
-                (obj[key] instanceof File || obj[key] instanceof Blob)) {
-                result[key] = this.cloneWithFileProcessing(obj[key]);
-            }
-            else {
-                result[key] = this.cloneWithFileProcessing(obj[key]);
+        if (typeof value === 'object') {
+            const result = {};
+            Object.keys(value).forEach((key) => {
+                result[key] = this.serializeValue(value[key]);
+            });
+            return result;
+        }
+        // Primitivos (string, number, boolean)
+        return value;
+    }
+    updateSerializedValue(value) {
+        if (!value) {
+            this.serializedValue.set('');
+            return;
+        }
+        try {
+            // ✅ Serializar todo el objeto (incluyendo fechas)
+            const serialized = this.serializeValue(value);
+            this.serializedValue.set(JSON.stringify(serialized, null, 2));
+        }
+        catch (error) {
+            this.serializedValue.set('Error al serializar: ' + error);
+            if (this.shouldShowLogs()) {
+                console.error('[JsonDebug] Error serializing value:', error);
             }
-        });
-        return result;
+        }
     }
     updateFileInfo(value) {
         if (!value) {
@@ -5691,7 +6254,7 @@ class JsonValuesDebujComponent {
             this.filesSummary.set('');
             return;
         }
-        // ✅ Buscar todos los archivos en la estructura
+        // Buscar todos los archivos en la estructura
         const files = this.findFilesInObject(value);
         if (files.length === 0) {
             this.fileInfo.set({
@@ -5703,7 +6266,7 @@ class JsonValuesDebujComponent {
             this.filesSummary.set('📭 Sin archivos');
             return;
         }
-        // ✅ Resumir información de archivos
+        // Resumir información de archivos
         const summary = files
             .map((f) => {
             const name = f.file?.name || 'sin nombre';
@@ -5713,7 +6276,7 @@ class JsonValuesDebujComponent {
         })
             .join('; ');
         this.filesSummary.set(`📁 ${files.length} archivo(s): ${summary}`);
-        // ✅ Información detallada
+        // Información detallada
         const info = {
             exists: true,
             count: files.length,
@@ -5731,7 +6294,6 @@ class JsonValuesDebujComponent {
         const value = this.debugValue();
         if (!value)
             return false;
-        // ✅ Buscar archivos en toda la estructura
         const files = this.findFilesInObject(value);
         return files.length > 0;
     }
@@ -5758,7 +6320,7 @@ class JsonValuesDebujComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonValuesDebujComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-json-values-debuj', standalone: true, imports: [DatePipe, DecimalPipe], encapsulation: ViewEncapsulation.None, template: "<!-- json-values-debuj.component.html -->\r\n@if (shouldShowVisual()) {\r\n  <div class=\"json-debug-container\">\r\n    <div class=\"json-debug-header\">\r\n      <span class=\"json-debug-id\">\uD83D\uDD0D Debug #{{ id }}</span>\r\n      <span class=\"json-debug-info\">\r\n        @if (debugValue()) {\r\n          <span class=\"badge badge-success\">\u2713 Formulario activo</span>\r\n        } @else {\r\n          <span class=\"badge badge-danger\">\u2717 Sin formulario</span>\r\n        }\r\n      </span>\r\n    </div>\r\n\r\n    @if (debugValue()) {\r\n      <div class=\"json-debug-content\">\r\n        <!-- \u2705 Informaci\u00F3n de archivos encontrados en toda la estructura -->\r\n        @if (hasFileProperty()) {\r\n          <div class=\"file-info-box\">\r\n            <div class=\"file-info-header\">\r\n              \uD83D\uDCC1 Archivos encontrados ({{ getFileInfo()?.count || 0 }})\r\n            </div>\r\n            <div class=\"file-info-grid\">\r\n              @for (file of getFileInfo()?.files || []; track file.path) {\r\n                <div class=\"file-info-item file-item\">\r\n                  <div class=\"file-path\">\uD83D\uDCC4 {{ file.path }}</div>\r\n                  <div class=\"file-details\">\r\n                    <span class=\"label\">Nombre:</span>\r\n                    <span class=\"value\">{{ file.name }}</span>\r\n                  </div>\r\n                  <div class=\"file-details\">\r\n                    <span class=\"label\">Tama\u00F1o:</span>\r\n                    <span class=\"value\"\r\n                      >{{ file.size / 1024 | number: \"1.1-1\" }} KB</span\r\n                    >\r\n                  </div>\r\n                  <div class=\"file-details\">\r\n                    <span class=\"label\">Tipo:</span>\r\n                    <span class=\"value\">{{ file.type || \"Desconocido\" }}</span>\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <div class=\"file-info-box file-empty\">\r\n            <div class=\"file-info-header\">\uD83D\uDCED Sin archivos seleccionados</div>\r\n          </div>\r\n        }\r\n\r\n        <!-- JSON -->\r\n        <div class=\"json-display\">\r\n          <pre class=\"json-colored\">{{ serializedValue() }}</pre>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".json-debug-container{margin:10px 0;border:1px solid #dee2e6;border-radius:8px;background-color:#f8f9fa;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;box-shadow:0 2px 8px #0000001a}.json-debug-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px 8px 0 0;color:#fff}.json-debug-id{font-weight:700;font-size:14px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.badge{padding:4px 14px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-success{background-color:#10b981;color:#fff;box-shadow:0 2px 4px #10b9814d}.badge-danger{background-color:#ef4444;color:#fff;box-shadow:0 2px 4px #ef44444d}.json-debug-content{padding:16px 20px}.file-info-box{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #bae6fd;border-radius:6px;padding:12px 16px;margin-bottom:16px}.file-info-header{font-weight:600;color:#0369a1;font-size:13px;margin-bottom:8px}.file-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px}.file-info-item{padding:4px 8px;background-color:#fff;border-radius:4px;border:1px solid #e5e7eb}.file-info-item .label{font-weight:600;color:#6b7280;margin-right:8px;font-size:12px}.file-info-item .value{color:#0369a1;font-family:Consolas,Monaco,Courier New,monospace;font-size:12px}.json-display{margin-top:0}.json-colored{margin:0;padding:16px 20px;background-color:#1e1e1e;border-radius:6px;overflow:auto;font-size:13px;line-height:1.7;color:#d4d4d4;min-height:50px;max-height:500px;font-family:Consolas,Monaco,Courier New,monospace;white-space:pre}.json-colored::-webkit-scrollbar{width:10px;height:10px}.json-colored::-webkit-scrollbar-track{background:#2d2d2d;border-radius:4px}.json-colored::-webkit-scrollbar-thumb{background:#666;border-radius:4px}.json-colored::-webkit-scrollbar-thumb:hover{background:#888}@media(max-width:768px){.json-debug-header{flex-direction:column;gap:8px;padding:10px 16px}.json-debug-content{padding:12px 16px}.file-info-grid{grid-template-columns:1fr}.json-colored{font-size:11px;padding:12px 14px;max-height:300px}}\n"] }]
+            args: [{ selector: 'app-json-values-debuj', standalone: true, imports: [DecimalPipe], encapsulation: ViewEncapsulation.None, template: "<!-- json-values-debuj.component.html -->\r\n@if (shouldShowVisual()) {\r\n  <div class=\"json-debug-container\">\r\n    <div class=\"json-debug-header\">\r\n      <span class=\"json-debug-id\">\uD83D\uDD0D Debug #{{ id }}</span>\r\n      <span class=\"json-debug-info\">\r\n        @if (debugValue()) {\r\n          <span class=\"badge badge-success\">\u2713 Formulario activo</span>\r\n        } @else {\r\n          <span class=\"badge badge-danger\">\u2717 Sin formulario</span>\r\n        }\r\n      </span>\r\n    </div>\r\n\r\n    @if (debugValue()) {\r\n      <div class=\"json-debug-content\">\r\n        <!-- \u2705 Informaci\u00F3n de archivos encontrados en toda la estructura -->\r\n        @if (hasFileProperty()) {\r\n          <div class=\"file-info-box\">\r\n            <div class=\"file-info-header\">\r\n              \uD83D\uDCC1 Archivos encontrados ({{ getFileInfo()?.count || 0 }})\r\n            </div>\r\n            <div class=\"file-info-grid\">\r\n              @for (file of getFileInfo()?.files || []; track file.path) {\r\n                <div class=\"file-info-item file-item\">\r\n                  <div class=\"file-path\">\uD83D\uDCC4 {{ file.path }}</div>\r\n                  <div class=\"file-details\">\r\n                    <span class=\"label\">Nombre:</span>\r\n                    <span class=\"value\">{{ file.name }}</span>\r\n                  </div>\r\n                  <div class=\"file-details\">\r\n                    <span class=\"label\">Tama\u00F1o:</span>\r\n                    <span class=\"value\"\r\n                      >{{ file.size / 1024 | number: \"1.1-1\" }} KB</span\r\n                    >\r\n                  </div>\r\n                  <div class=\"file-details\">\r\n                    <span class=\"label\">Tipo:</span>\r\n                    <span class=\"value\">{{ file.type || \"Desconocido\" }}</span>\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <div class=\"file-info-box file-empty\">\r\n            <div class=\"file-info-header\">\uD83D\uDCED Sin archivos seleccionados</div>\r\n          </div>\r\n        }\r\n\r\n        <!-- JSON -->\r\n        <div class=\"json-display\">\r\n          <pre class=\"json-colored\">{{ serializedValue() }}</pre>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".json-debug-container{margin:10px 0;border:1px solid #dee2e6;border-radius:8px;background-color:#f8f9fa;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;box-shadow:0 2px 8px #0000001a}.json-debug-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px 8px 0 0;color:#fff}.json-debug-id{font-weight:700;font-size:14px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.badge{padding:4px 14px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-success{background-color:#10b981;color:#fff;box-shadow:0 2px 4px #10b9814d}.badge-danger{background-color:#ef4444;color:#fff;box-shadow:0 2px 4px #ef44444d}.json-debug-content{padding:16px 20px}.file-info-box{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #bae6fd;border-radius:6px;padding:12px 16px;margin-bottom:16px}.file-info-header{font-weight:600;color:#0369a1;font-size:13px;margin-bottom:8px}.file-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px}.file-info-item{padding:4px 8px;background-color:#fff;border-radius:4px;border:1px solid #e5e7eb}.file-info-item .label{font-weight:600;color:#6b7280;margin-right:8px;font-size:12px}.file-info-item .value{color:#0369a1;font-family:Consolas,Monaco,Courier New,monospace;font-size:12px}.json-display{margin-top:0}.json-colored{margin:0;padding:16px 20px;background-color:#1e1e1e;border-radius:6px;overflow:auto;font-size:13px;line-height:1.7;color:#d4d4d4;min-height:50px;max-height:500px;font-family:Consolas,Monaco,Courier New,monospace;white-space:pre}.json-colored::-webkit-scrollbar{width:10px;height:10px}.json-colored::-webkit-scrollbar-track{background:#2d2d2d;border-radius:4px}.json-colored::-webkit-scrollbar-thumb{background:#666;border-radius:4px}.json-colored::-webkit-scrollbar-thumb:hover{background:#888}@media(max-width:768px){.json-debug-header{flex-direction:column;gap:8px;padding:10px 16px}.json-debug-content{padding:12px 16px}.file-info-grid{grid-template-columns:1fr}.json-colored{font-size:11px;padding:12px 14px;max-height:300px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }] } });
 
 class IcoLabel {
@@ -6643,7 +7205,7 @@ class NavbarDsxComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NavbarDsxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: NavbarDsxComponent, isStandalone: true, selector: "app-navbar-dsx", inputs: { appVersion: { classPropertyName: "appVersion", publicName: "appVersion", isSignal: true, isRequired: false, transformFunction: null }, logoWidth: { classPropertyName: "logoWidth", publicName: "logoWidth", isSignal: true, isRequired: false, transformFunction: null }, urlLogo: { classPropertyName: "urlLogo", publicName: "urlLogo", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-menubar>\r\n  <ng-template #start>\r\n    <p-image\r\n      class=\"ms-15\"\r\n      [src]=\"urlLogo()\"\r\n      alt=\"Image\"\r\n      [width]=\"logoWidth()\"\r\n    />\r\n    <span class=\"version-text\">{{ appVersion() }}</span>\r\n  </ng-template>\r\n  <ng-template #end>\r\n    <div>\r\n      <!-- Datos del usuario -->\r\n      <div class=\"navbar-user-info\">\r\n        <icon-dsx name=\"verified_user\" class=\"navbar-user-icon\"></icon-dsx>\r\n        <div class=\"navbar-user-text\">\r\n          <span class=\"navbar-user-name\">\r\n            {{ _authorizeService.getTokenValues.userName }}\r\n          </span>\r\n          <span class=\"navbar-user-role\">\r\n            {{ currentRole }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Componente de estado de red -->\r\n      <app-network-status></app-network-status>\r\n\r\n      <!-- Actualizaci\u00F3n de permisos -->\r\n      <p-button\r\n        size=\"small\"\r\n        class=\"ml-2 mr-2\"\r\n        label=\"Permisos\"\r\n        variant=\"text\"\r\n        severity=\"secondary\"\r\n        (click)=\"actualizarSeguridadIT()\"\r\n      >\r\n        <span class=\"material-symbols-outlined mr-1\">local_police</span>\r\n      </p-button>\r\n\r\n      <label class=\"ui-switch\">\r\n        <input\r\n          type=\"checkbox\"\r\n          [(ngModel)]=\"checked\"\r\n          (click)=\"onThemeChange(!checked ? true : false)\"\r\n        />\r\n        <div class=\"slider\">\r\n          <div class=\"circle\"></div>\r\n        </div>\r\n      </label>\r\n      <!-- <p-inputSwitch\r\n        [(ngModel)]=\"checked\"\r\n        (onChange)=\"onThemeChange($event.checked)\"\r\n      ></p-inputSwitch> -->\r\n    </div>\r\n  </ng-template>\r\n</p-menubar>\r\n", styles: [":host ::ng-deep .p-menubar{display:flex;align-items:center!important;padding:.25rem 1.5rem!important;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:#ffffff73!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px #0f172a14;margin-left:4rem;margin-right:2.5rem}:host ::ng-deep .p-menubar-end>*{display:flex;align-items:center}.version-text{font-size:1.3rem;font-family:Montserrat,sans-serif!important;margin-left:.5rem;font-weight:600;background-image:linear-gradient(to right,#38bdf8,#630cb4);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 4px rgba(0,0,0,.1);padding:.2rem 0}.navbar-user-info{display:flex;align-items:center;gap:.35rem;padding:0 .75rem;border-radius:999px;background-color:#00000005}.navbar-user-icon{font-size:1.5rem;color:#374151}.navbar-user-name{font-size:.8rem;font-weight:500;color:#374151;white-space:nowrap}.navbar-user-text{display:flex;flex-direction:column;line-height:1.1}.navbar-user-role{font-size:.7rem;color:#6b7280;white-space:nowrap}.ui-switch{--switch-bg: rgb(135, 150, 165);--switch-width: 48px;--switch-height: 20px;--circle-diameter: 32px;--circle-bg: rgb(232, 89, 15);--circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2)}.ui-switch input{display:none}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--switch-width);height:var(--switch-height);background:var(--switch-bg);border-radius:999px;position:relative;cursor:pointer}.slider .circle{top:calc(var(--circle-inset) * -1);left:0;width:var(--circle-diameter);height:var(--circle-diameter);position:absolute;background:var(--circle-bg);border-radius:inherit;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+);background-repeat:no-repeat;background-position:center center;transition:left .15s cubic-bezier(.4,0,.2,1) 0ms;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.slider .circle:before{content:\"\";position:absolute;width:100%;height:100%;background:#ffffffbf;border-radius:inherit;transition:all .5s;opacity:0}.ui-switch input:checked+.slider .circle{left:calc(100% - var(--circle-diameter));background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=);background-color:#003892}.ui-switch input:active+.slider .circle:before{transition:0s;opacity:1;width:0;height:0}.navbar-user-info,.ui-switch .slider,.version-text{cursor:pointer}.navbar-user-info:active{transform:scale(.98);transition:transform .05s ease}.ui-switch:active .slider .circle{transform:scale(.95);transition:transform .05s ease}[data-title]{position:relative}[data-title]:hover:after{content:attr(data-title);position:absolute;bottom:125%;left:50%;transform:translate(-50%);background:#000c;color:#fff;font-size:.7rem;padding:.25rem .5rem;border-radius:.25rem;white-space:nowrap;z-index:1000;pointer-events:none;font-family:sans-serif}.navbar-user-info:focus-visible,.ui-switch .slider:focus-visible{outline:2px solid #38bdf8;outline-offset:2px}@media(prefers-reduced-motion:reduce){.navbar-user-info:active,.ui-switch:active .slider .circle{transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$7.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconDsxComponent, selector: "icon-dsx", inputs: ["name", "style", "debug"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i3$1.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "preview", "showTransitionOptions", "hideTransitionOptions", "modalEnterAnimation", "modalLeaveAnimation", "appendTo", "maskMotionOptions", "motionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: i4.Menubar, selector: "p-menubar", inputs: ["model", "styleClass", "autoZIndex", "baseZIndex", "autoDisplay", "autoHide", "breakpoint", "autoHideDelay", "id", "ariaLabel", "ariaLabelledBy"], outputs: ["onFocus", "onBlur"] }, { kind: "component", type: NetworkStatusComponent, selector: "app-network-status" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: NavbarDsxComponent, isStandalone: true, selector: "app-navbar-dsx", inputs: { appVersion: { classPropertyName: "appVersion", publicName: "appVersion", isSignal: true, isRequired: false, transformFunction: null }, logoWidth: { classPropertyName: "logoWidth", publicName: "logoWidth", isSignal: true, isRequired: false, transformFunction: null }, urlLogo: { classPropertyName: "urlLogo", publicName: "urlLogo", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-menubar>\r\n  <ng-template #start>\r\n    <p-image\r\n      class=\"ms-15\"\r\n      [src]=\"urlLogo()\"\r\n      alt=\"Image\"\r\n      [width]=\"logoWidth()\"\r\n    />\r\n    <span class=\"version-text\">{{ appVersion() }}</span>\r\n  </ng-template>\r\n  <ng-template #end>\r\n    <div>\r\n      <!-- Datos del usuario -->\r\n      <div class=\"navbar-user-info\">\r\n        <icon-dsx name=\"verified_user\" class=\"navbar-user-icon\"></icon-dsx>\r\n        <div class=\"navbar-user-text\">\r\n          <span class=\"navbar-user-name\">\r\n            {{ _authorizeService.getTokenValues.userName }}\r\n          </span>\r\n          <span class=\"navbar-user-role\">\r\n            {{ currentRole }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Componente de estado de red -->\r\n      <app-network-status></app-network-status>\r\n\r\n      <!-- Actualizaci\u00F3n de permisos -->\r\n      <p-button\r\n        size=\"small\"\r\n        class=\"ml-2 mr-2\"\r\n        label=\"Permisos\"\r\n        variant=\"text\"\r\n        severity=\"secondary\"\r\n        (click)=\"actualizarSeguridadIT()\"\r\n      >\r\n        <span class=\"material-symbols-outlined mr-1\">local_police</span>\r\n      </p-button>\r\n\r\n      <label class=\"ui-switch\">\r\n        <input\r\n          type=\"checkbox\"\r\n          [(ngModel)]=\"checked\"\r\n          (click)=\"onThemeChange(!checked ? true : false)\"\r\n        />\r\n        <div class=\"slider\">\r\n          <div class=\"circle\"></div>\r\n        </div>\r\n      </label>\r\n      <!-- <p-inputSwitch\r\n        [(ngModel)]=\"checked\"\r\n        (onChange)=\"onThemeChange($event.checked)\"\r\n      ></p-inputSwitch> -->\r\n    </div>\r\n  </ng-template>\r\n</p-menubar>\r\n", styles: [":host ::ng-deep .p-menubar{display:flex;align-items:center!important;padding:.25rem 1.5rem!important;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:#ffffff73!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px #0f172a14;margin-left:4rem;margin-right:2.5rem}:host ::ng-deep .p-menubar-end>*{display:flex;align-items:center}.version-text{font-size:1.3rem;font-family:Montserrat,sans-serif!important;margin-left:.5rem;font-weight:600;background-image:linear-gradient(to right,#38bdf8,#630cb4);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 4px rgba(0,0,0,.1);padding:.2rem 0}.navbar-user-info{display:flex;align-items:center;gap:.35rem;padding:0 .75rem;border-radius:999px;background-color:#00000005}.navbar-user-icon{font-size:1.5rem;color:#374151}.navbar-user-name{font-size:.8rem;font-weight:500;color:#374151;white-space:nowrap}.navbar-user-text{display:flex;flex-direction:column;line-height:1.1}.navbar-user-role{font-size:.7rem;color:#6b7280;white-space:nowrap}.ui-switch{--switch-bg: rgb(135, 150, 165);--switch-width: 48px;--switch-height: 20px;--circle-diameter: 32px;--circle-bg: rgb(232, 89, 15);--circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2)}.ui-switch input{display:none}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--switch-width);height:var(--switch-height);background:var(--switch-bg);border-radius:999px;position:relative;cursor:pointer}.slider .circle{top:calc(var(--circle-inset) * -1);left:0;width:var(--circle-diameter);height:var(--circle-diameter);position:absolute;background:var(--circle-bg);border-radius:inherit;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+);background-repeat:no-repeat;background-position:center center;transition:left .15s cubic-bezier(.4,0,.2,1) 0ms;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.slider .circle:before{content:\"\";position:absolute;width:100%;height:100%;background:#ffffffbf;border-radius:inherit;transition:all .5s;opacity:0}.ui-switch input:checked+.slider .circle{left:calc(100% - var(--circle-diameter));background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=);background-color:#003892}.ui-switch input:active+.slider .circle:before{transition:0s;opacity:1;width:0;height:0}.navbar-user-info,.ui-switch .slider,.version-text{cursor:pointer}.navbar-user-info:active{transform:scale(.98);transition:transform .05s ease}.ui-switch:active .slider .circle{transform:scale(.95);transition:transform .05s ease}[data-title]{position:relative}[data-title]:hover:after{content:attr(data-title);position:absolute;bottom:125%;left:50%;transform:translate(-50%);background:#000c;color:#fff;font-size:.7rem;padding:.25rem .5rem;border-radius:.25rem;white-space:nowrap;z-index:1000;pointer-events:none;font-family:sans-serif}.navbar-user-info:focus-visible,.ui-switch .slider:focus-visible{outline:2px solid #38bdf8;outline-offset:2px}@media(prefers-reduced-motion:reduce){.navbar-user-info:active,.ui-switch:active .slider .circle{transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconDsxComponent, selector: "icon-dsx", inputs: ["name", "style", "debug"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i3$1.Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "preview", "showTransitionOptions", "hideTransitionOptions", "modalEnterAnimation", "modalLeaveAnimation", "appendTo", "maskMotionOptions", "motionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: i4$1.Menubar, selector: "p-menubar", inputs: ["model", "styleClass", "autoZIndex", "baseZIndex", "autoDisplay", "autoHide", "breakpoint", "autoHideDelay", "id", "ariaLabel", "ariaLabelledBy"], outputs: ["onFocus", "onBlur"] }, { kind: "component", type: NetworkStatusComponent, selector: "app-network-status" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NavbarDsxComponent, decorators: [{
             type: Component,
@@ -7023,7 +7585,7 @@ class TokenPurposeLogin {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TokenPurposeLogin, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TokenPurposeLogin, isStandalone: true, selector: "app-token-purpose-login", ngImport: i0, template: "<div class=\"flex\">\r\n  <p-button\r\n    (click)=\"showDialog()\"\r\n    label=\"Generar Token\"\r\n    pTooltip=\"Ingrese sus credenciales para generar un token de acceso.\"\r\n    tooltipPosition=\"top\"\r\n    severity=\"secondary\"\r\n    icon=\"pi pi-lock\"\r\n    [rounded]=\"true\"\r\n    [raised]=\"true\"\r\n  />\r\n</div>\r\n<form [formGroup]=\"form\">\r\n  <p-dialog [(visible)]=\"visible\" [modal]=\"true\" [style]=\"{ width: '30rem' }\">\r\n    <ng-template #header>\r\n      <div class=\"flex items-center gap-2 px-2\">\r\n        <p-avatar image=\"icon/folder.png\" size=\"large\" />\r\n        <h5>Token de Seguridad</h5>\r\n      </div>\r\n    </ng-template>\r\n    <span class=\"text-surface-500 dark:text-surface-400 block\"\r\n      >Ingrese sus credenciales para generar un token de acceso.</span\r\n    >\r\n    <div class=\"mt-3\">\r\n      <p-floatLabel variant=\"in\">\r\n        <p-password\r\n          formControlName=\"password\"\r\n          [invalid]=\"form.get('password')?.invalid && (form.get('password')?.dirty || form.get('password')?.touched)\"\r\n          [feedback]=\"false\"\r\n          [toggleMask]=\"true\"\r\n          fluid\r\n        />\r\n        <label>Contrase\u00F1a</label>\r\n      </p-floatLabel>\r\n      @if (form.get('password')?.invalid && (form.get('password')?.dirty ||\r\n      form.get('password')?.touched)) {\r\n      <small class=\"text-red-500\">La contrase\u00F1a es obligatoria.</small>\r\n      }\r\n    </div>\r\n    <ng-template #footer>\r\n      <p-button\r\n        label=\"Cancelar\"\r\n        variant=\"outlined\"\r\n        [rounded]=\"true\"\r\n        icon=\"pi pi-times\"\r\n        severity=\"danger\"\r\n        (click)=\"visible = false\"\r\n      />\r\n      <p-button\r\n        label=\"Generar\"\r\n        variant=\"outlined\"\r\n        [rounded]=\"true\"\r\n        icon=\"pi pi-unlock\"\r\n        severity=\"success\"\r\n        [disabled]=\"!form.valid\"\r\n        (click)=\"generarTokenPurpose()\"\r\n      />\r\n    </ng-template>\r\n  </p-dialog>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2$2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$7.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i6.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i7.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TokenPurposeLogin, isStandalone: true, selector: "app-token-purpose-login", ngImport: i0, template: "<div class=\"flex\">\r\n  <p-button\r\n    (click)=\"showDialog()\"\r\n    label=\"Generar Token\"\r\n    pTooltip=\"Ingrese sus credenciales para generar un token de acceso.\"\r\n    tooltipPosition=\"top\"\r\n    severity=\"secondary\"\r\n    icon=\"pi pi-lock\"\r\n    [rounded]=\"true\"\r\n    [raised]=\"true\"\r\n  />\r\n</div>\r\n<form [formGroup]=\"form\">\r\n  <p-dialog [(visible)]=\"visible\" [modal]=\"true\" [style]=\"{ width: '30rem' }\">\r\n    <ng-template #header>\r\n      <div class=\"flex items-center gap-2 px-2\">\r\n        <p-avatar image=\"icon/folder.png\" size=\"large\" />\r\n        <h5>Token de Seguridad</h5>\r\n      </div>\r\n    </ng-template>\r\n    <span class=\"text-surface-500 dark:text-surface-400 block\"\r\n      >Ingrese sus credenciales para generar un token de acceso.</span\r\n    >\r\n    <div class=\"mt-3\">\r\n      <p-floatLabel variant=\"in\">\r\n        <p-password\r\n          formControlName=\"password\"\r\n          [invalid]=\"form.get('password')?.invalid && (form.get('password')?.dirty || form.get('password')?.touched)\"\r\n          [feedback]=\"false\"\r\n          [toggleMask]=\"true\"\r\n          fluid\r\n        />\r\n        <label>Contrase\u00F1a</label>\r\n      </p-floatLabel>\r\n      @if (form.get('password')?.invalid && (form.get('password')?.dirty ||\r\n      form.get('password')?.touched)) {\r\n      <small class=\"text-red-500\">La contrase\u00F1a es obligatoria.</small>\r\n      }\r\n    </div>\r\n    <ng-template #footer>\r\n      <p-button\r\n        label=\"Cancelar\"\r\n        variant=\"outlined\"\r\n        [rounded]=\"true\"\r\n        icon=\"pi pi-times\"\r\n        severity=\"danger\"\r\n        (click)=\"visible = false\"\r\n      />\r\n      <p-button\r\n        label=\"Generar\"\r\n        variant=\"outlined\"\r\n        [rounded]=\"true\"\r\n        icon=\"pi pi-unlock\"\r\n        severity=\"success\"\r\n        [disabled]=\"!form.valid\"\r\n        (click)=\"generarTokenPurpose()\"\r\n      />\r\n    </ng-template>\r\n  </p-dialog>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2$2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i6.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i7.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TokenPurposeLogin, decorators: [{
             type: Component,
@@ -8419,6 +8981,7 @@ const PRIME_NG_MODULES = [
     ButtonModule,
     CardModule,
     CheckboxModule,
+    ChipModule,
     ContextMenuModule,
     DataViewModule,
     DatePickerModule,
@@ -8478,6 +9041,7 @@ class PrimeNgModule {
             ButtonModule,
             CardModule,
             CheckboxModule,
+            ChipModule,
             ContextMenuModule,
             DataViewModule,
             DatePickerModule,
@@ -8534,6 +9098,7 @@ class PrimeNgModule {
             ButtonModule,
             CardModule,
             CheckboxModule,
+            ChipModule,
             ContextMenuModule,
             DataViewModule,
             DatePickerModule,
@@ -8992,7 +9557,7 @@ 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    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" }] });
+        ], 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    size=\"small\"\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<dsx-message-help [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$7.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: "component", type: AppMessageHelpComponent, selector: "dsx-message-help", inputs: ["control", "currentIdControl", "helperFunction", "dataSource", "key", "umbral", "debugMode", "idFieldName", "maxSugerencias"] }, { 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,
@@ -9004,13 +9569,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         InputMaskModule,
                         JsonPipe,
                         ReactiveFormsModule,
+                        AppMessageHelpComponent,
                     ], 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    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" }]
+                    ], template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    fluid\r\n    appendTo=\"body\"\r\n    size=\"small\"\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<dsx-message-help [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 {
@@ -9211,7 +9777,7 @@ class DsxdateTime {
                 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" }] });
+        ], 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$7.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,
@@ -10154,7 +10720,7 @@ class DsxSelect {
     virtualScrollItemSize = input(40, ...(ngDevMode ? [{ debugName: "virtualScrollItemSize" }] : /* istanbul ignore next */ []));
     // Iconos
     useIcon = input(true, ...(ngDevMode ? [{ debugName: "useIcon" }] : /* istanbul ignore next */ []));
-    itemIcon = input('keyboard_arrow_right', ...(ngDevMode ? [{ debugName: "itemIcon" }] : /* istanbul ignore next */ []));
+    itemIcon = input('check_small', ...(ngDevMode ? [{ debugName: "itemIcon" }] : /* istanbul ignore next */ []));
     selectedIcon = input('done_outline', ...(ngDevMode ? [{ debugName: "selectedIcon" }] : /* istanbul ignore next */ []));
     // Debug solo consola
     debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
@@ -10356,7 +10922,7 @@ class DsxSelect {
                 useExisting: forwardRef(() => DsxSelect),
                 multi: true,
             },
-        ], ngImport: i0, template: "<!-- dsx-select.html -->\r\n<p-floatLabel [variant]=\"variant()\">\r\n  <p-select\r\n    fluid\r\n    appendTo=\"body\"\r\n    [options]=\"dataList()\"\r\n    [filter]=\"true\"\r\n    [filterPlaceholder]=\"filterPlaceholder()\"\r\n    [showClear]=\"showClear()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"resolvedOptionLabel()\"\r\n    [optionValue]=\"resolvedOptionValue()\"\r\n    [virtualScroll]=\"virtualScroll()\"\r\n    [virtualScrollItemSize]=\"virtualScrollItemSize()\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (onFocus)=\"onFocus()\"\r\n    (onHide)=\"onHide()\"\r\n  >\r\n    <!-- Item template -->\r\n    <ng-template let-item #item>\r\n      <div class=\"flex align-items-center gap-2\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"itemIcon()\" class=\"text-cyan-500! mr-1\"></icon-dsx>\r\n        } @if (showSecondaryField()) {\r\n        <div class=\"flex flex-col\">\r\n          <span class=\"font-semibold text-sky-800\">\r\n            {{ item[resolvedOptionLabel()] }}\r\n          </span>\r\n          <span class=\"text-xs text-gray-400\">\r\n            {{ item[secondaryField()!] }}\r\n          </span>\r\n        </div>\r\n        } @else { {{ item[resolvedOptionLabel()] }} }\r\n      </div>\r\n    </ng-template>\r\n\r\n    <!-- Selected item template -->\r\n    <ng-template #selectedItem let-selectedOptions>\r\n      <div class=\"flex align-items-center gap-2\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"selectedIcon()\" class=\"text-green-600!\"></icon-dsx>\r\n        } @if (showSecondaryField() && selectedOptions) {\r\n        <div class=\"flex gap-x-2\">\r\n          <span class=\"font-semibold text-sky-700\">\r\n            {{ selectedOptions[resolvedOptionLabel()] }}\r\n          </span>\r\n          <span class=\"text-gray-400\">\r\n            {{ selectedOptions[secondaryField()!] }}\r\n          </span>\r\n        </div>\r\n        } @else { {{ selectedOptions?.[resolvedOptionLabel()] }} }\r\n      </div>\r\n    </ng-template>\r\n  </p-select>\r\n  <label>{{ resolvedLabel() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- Mensaje de error condicional -->\r\n@if (showError() && errorControl()) {\r\n<dsx-message-error [control]=\"errorControl()\" />\r\n}\r\n", styles: ["icon-dsx{font-size:1.5em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: IconDsxComponent, selector: "icon-dsx", inputs: ["name", "style", "debug"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }] });
+        ], ngImport: i0, template: "<!-- dsx-select.html -->\r\n<p-floatLabel [variant]=\"variant()\">\r\n  <p-select\r\n    fluid\r\n    appendTo=\"body\"\r\n    size=\"small\"\r\n    [options]=\"dataList()\"\r\n    [filter]=\"true\"\r\n    [filterPlaceholder]=\"filterPlaceholder()\"\r\n    [showClear]=\"showClear()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"resolvedOptionLabel()\"\r\n    [optionValue]=\"resolvedOptionValue()\"\r\n    [virtualScroll]=\"virtualScroll()\"\r\n    [virtualScrollItemSize]=\"virtualScrollItemSize()\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (onFocus)=\"onFocus()\"\r\n    (onHide)=\"onHide()\"\r\n  >\r\n    <!-- Item template -->\r\n    <ng-template let-item #item>\r\n      <div class=\"flex align-items-center gap-1\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"itemIcon()\" class=\"text-gray-500!\"></icon-dsx>\r\n        } @if (showSecondaryField()) {\r\n        <div class=\"flex flex-col\">\r\n          <span class=\"font-semibold text-sky-800\">\r\n            {{ item[resolvedOptionLabel()] }}\r\n          </span>\r\n          <span class=\"text-xs text-gray-400\">\r\n            {{ item[secondaryField()!] }}\r\n          </span>\r\n        </div>\r\n        } @else { {{ item[resolvedOptionLabel()] }} }\r\n      </div>\r\n    </ng-template>\r\n\r\n    <!-- Selected item template -->\r\n    <ng-template #selectedItem let-selectedOptions>\r\n      <div class=\"flex align-items-center gap-1\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"selectedIcon()\" class=\"text-green-600!\"></icon-dsx>\r\n        } @if (showSecondaryField() && selectedOptions) {\r\n        <div class=\"flex gap-x-2\">\r\n          <span class=\"font-semibold text-sky-700\">\r\n            {{ selectedOptions[resolvedOptionLabel()] }}\r\n          </span>\r\n          <span class=\"text-gray-400\">\r\n            {{ selectedOptions[secondaryField()!] }}\r\n          </span>\r\n        </div>\r\n        } @else { {{ selectedOptions?.[resolvedOptionLabel()] }} }\r\n      </div>\r\n    </ng-template>\r\n  </p-select>\r\n  <label>{{ resolvedLabel() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- Mensaje de error condicional -->\r\n@if (showError() && errorControl()) {\r\n<dsx-message-error [control]=\"errorControl()\" />\r\n}\r\n", styles: ["icon-dsx{font-size:1.5em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: IconDsxComponent, selector: "icon-dsx", inputs: ["name", "style", "debug"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxSelect, decorators: [{
             type: Component,
@@ -10372,7 +10938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => DsxSelect),
                             multi: true,
                         },
-                    ], template: "<!-- dsx-select.html -->\r\n<p-floatLabel [variant]=\"variant()\">\r\n  <p-select\r\n    fluid\r\n    appendTo=\"body\"\r\n    [options]=\"dataList()\"\r\n    [filter]=\"true\"\r\n    [filterPlaceholder]=\"filterPlaceholder()\"\r\n    [showClear]=\"showClear()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"resolvedOptionLabel()\"\r\n    [optionValue]=\"resolvedOptionValue()\"\r\n    [virtualScroll]=\"virtualScroll()\"\r\n    [virtualScrollItemSize]=\"virtualScrollItemSize()\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (onFocus)=\"onFocus()\"\r\n    (onHide)=\"onHide()\"\r\n  >\r\n    <!-- Item template -->\r\n    <ng-template let-item #item>\r\n      <div class=\"flex align-items-center gap-2\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"itemIcon()\" class=\"text-cyan-500! mr-1\"></icon-dsx>\r\n        } @if (showSecondaryField()) {\r\n        <div class=\"flex flex-col\">\r\n          <span class=\"font-semibold text-sky-800\">\r\n            {{ item[resolvedOptionLabel()] }}\r\n          </span>\r\n          <span class=\"text-xs text-gray-400\">\r\n            {{ item[secondaryField()!] }}\r\n          </span>\r\n        </div>\r\n        } @else { {{ item[resolvedOptionLabel()] }} }\r\n      </div>\r\n    </ng-template>\r\n\r\n    <!-- Selected item template -->\r\n    <ng-template #selectedItem let-selectedOptions>\r\n      <div class=\"flex align-items-center gap-2\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"selectedIcon()\" class=\"text-green-600!\"></icon-dsx>\r\n        } @if (showSecondaryField() && selectedOptions) {\r\n        <div class=\"flex gap-x-2\">\r\n          <span class=\"font-semibold text-sky-700\">\r\n            {{ selectedOptions[resolvedOptionLabel()] }}\r\n          </span>\r\n          <span class=\"text-gray-400\">\r\n            {{ selectedOptions[secondaryField()!] }}\r\n          </span>\r\n        </div>\r\n        } @else { {{ selectedOptions?.[resolvedOptionLabel()] }} }\r\n      </div>\r\n    </ng-template>\r\n  </p-select>\r\n  <label>{{ resolvedLabel() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- Mensaje de error condicional -->\r\n@if (showError() && errorControl()) {\r\n<dsx-message-error [control]=\"errorControl()\" />\r\n}\r\n", styles: ["icon-dsx{font-size:1.5em}\n"] }]
+                    ], template: "<!-- dsx-select.html -->\r\n<p-floatLabel [variant]=\"variant()\">\r\n  <p-select\r\n    fluid\r\n    appendTo=\"body\"\r\n    size=\"small\"\r\n    [options]=\"dataList()\"\r\n    [filter]=\"true\"\r\n    [filterPlaceholder]=\"filterPlaceholder()\"\r\n    [showClear]=\"showClear()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"resolvedOptionLabel()\"\r\n    [optionValue]=\"resolvedOptionValue()\"\r\n    [virtualScroll]=\"virtualScroll()\"\r\n    [virtualScrollItemSize]=\"virtualScrollItemSize()\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (onFocus)=\"onFocus()\"\r\n    (onHide)=\"onHide()\"\r\n  >\r\n    <!-- Item template -->\r\n    <ng-template let-item #item>\r\n      <div class=\"flex align-items-center gap-1\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"itemIcon()\" class=\"text-gray-500!\"></icon-dsx>\r\n        } @if (showSecondaryField()) {\r\n        <div class=\"flex flex-col\">\r\n          <span class=\"font-semibold text-sky-800\">\r\n            {{ item[resolvedOptionLabel()] }}\r\n          </span>\r\n          <span class=\"text-xs text-gray-400\">\r\n            {{ item[secondaryField()!] }}\r\n          </span>\r\n        </div>\r\n        } @else { {{ item[resolvedOptionLabel()] }} }\r\n      </div>\r\n    </ng-template>\r\n\r\n    <!-- Selected item template -->\r\n    <ng-template #selectedItem let-selectedOptions>\r\n      <div class=\"flex align-items-center gap-1\">\r\n        @if (useIcon()) {\r\n        <icon-dsx [name]=\"selectedIcon()\" class=\"text-green-600!\"></icon-dsx>\r\n        } @if (showSecondaryField() && selectedOptions) {\r\n        <div class=\"flex gap-x-2\">\r\n          <span class=\"font-semibold text-sky-700\">\r\n            {{ selectedOptions[resolvedOptionLabel()] }}\r\n          </span>\r\n          <span class=\"text-gray-400\">\r\n            {{ selectedOptions[secondaryField()!] }}\r\n          </span>\r\n        </div>\r\n        } @else { {{ selectedOptions?.[resolvedOptionLabel()] }} }\r\n      </div>\r\n    </ng-template>\r\n  </p-select>\r\n  <label>{{ resolvedLabel() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- Mensaje de error condicional -->\r\n@if (showError() && errorControl()) {\r\n<dsx-message-error [control]=\"errorControl()\" />\r\n}\r\n", styles: ["icon-dsx{font-size:1.5em}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataList", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], secondaryField: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryField", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], useIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "useIcon", required: false }] }], itemIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemIcon", required: false }] }], selectedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIcon", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], showError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showError", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }, { type: i0.Output, args: ["selectedValueChange"] }] } });
 
 /**
@@ -12540,9 +13106,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 // form-preview.service.ts
 class FormPreviewService {
     environment;
+    isDev;
     constructor() {
-        // Inyectar el token en el constructor
         this.environment = inject(ENVIRONMENT);
+        this.isDev = !this.environment.production;
     }
     /**
      * Construye el HTML para el preview de un objeto
@@ -12553,17 +13120,30 @@ class FormPreviewService {
      *
      * @example
      * ```typescript
+     * // Ejemplo básico
      * const data = {
-     *   usuario: {
-     *     nombre: 'Juan Pérez',
-     *     email: 'juan@email.com'
-     *   },
+     *   empleadoId: 2,
+     *   fechaIngreso: '2026-04-07',
      *   estado: 1
      * };
      *
+     * const empleados = [
+     *   { id: 1, nombreCompleto: 'Juan Pérez' },
+     *   { id: 2, nombreCompleto: 'María García' }
+     * ];
+     *
      * const fields = [
-     *   { key: 'usuario.nombre', label: 'Nombre' },
-     *   { key: 'usuario.email', label: 'Email' },
+     *   {
+     *     key: 'empleadoId',
+     *     label: 'Empleado',
+     *     referenceMap: empleados,
+     *     referenceLabel: 'nombreCompleto'
+     *   },
+     *   {
+     *     key: 'fechaIngreso',
+     *     label: 'Fecha de Ingreso',
+     *     format: 'dateLong'  // "07 de abril de 2026"
+     *   },
      *   {
      *     key: 'estado',
      *     label: 'Estado',
@@ -12571,30 +13151,33 @@ class FormPreviewService {
      *   }
      * ];
      *
-     * const html = this.formPreviewService.buildObjectSummaryHtml(data, fields, {
-     *   title: 'Datos del Usuario',
-     *   showEmpty: false,
-     *   compact: true,
-     *   debug: false
-     * });
+     * const html = this.formPreviewService.buildObjectSummaryHtml(
+     *   data,
+     *   fields,
+     *   {
+     *     title: 'Datos del Usuario',
+     *     showEmpty: false,
+     *     compact: true,
+     *     debug: true  // Solo en desarrollo
+     *   }
+     * );
      * ```
      */
     buildObjectSummaryHtml(data, fields, options) {
         const debug = options?.debug ?? false;
-        const isDev = !this.environment.production;
-        // Solo ejecutar logs si estamos en desarrollo y debug está activado
-        if (debug && isDev) {
+        // 🔍 Debug solo en desarrollo
+        if (debug && this.isDev) {
             this.debugInputData(data, fields, options);
         }
-        // Logs de error siempre se muestran en desarrollo si debug está activado
+        // Validaciones
         if (!data) {
-            if (debug && isDev) {
+            if (debug && this.isDev) {
                 console.error('❌ FormPreview: data es null o undefined');
             }
             return '';
         }
         if (!fields || fields.length === 0) {
-            if (debug && isDev) {
+            if (debug && this.isDev) {
                 console.error('❌ FormPreview: fields está vacío');
             }
             return '';
@@ -12610,11 +13193,13 @@ class FormPreviewService {
             if (field.referenceMap && value !== undefined && value !== null) {
                 const originalValue = value;
                 value = this.resolveReferenceValue(value, field);
-                // Logs de depuración solo en desarrollo
-                if (debug && isDev) {
+                // 🔍 Debug solo en desarrollo
+                if (debug && this.isDev) {
                     console.log(`🔍 Resolviendo referencia para "${field.key}":`, {
                         original: originalValue,
                         resuelto: value,
+                        referenciaId: field.referenceId || field.key || 'id',
+                        referenciaLabel: field.referenceLabel || 'nombre',
                         tipoMapa: Array.isArray(field.referenceMap)
                             ? 'Array'
                             : field.referenceMap instanceof Map
@@ -12625,9 +13210,10 @@ class FormPreviewService {
                     });
                 }
             }
+            // Aplicar formato
             const valueText = field.format
-                ? field.format(value)
-                : this.formatValue(value);
+                ? this.formatValue(value, field.format)
+                : this.formatDefault(value);
             if (value === undefined) {
                 propiedadesNoEncontradas.push(field.key);
             }
@@ -12638,8 +13224,8 @@ class FormPreviewService {
                 value: valueText || '—',
             });
         }
-        // Logs de depuración solo en desarrollo
-        if (debug && isDev) {
+        // 🔍 Debug solo en desarrollo
+        if (debug && this.isDev) {
             if (propiedadesNoEncontradas.length > 0) {
                 console.warn('⚠️ FormPreview: Propiedades no encontradas:', propiedadesNoEncontradas);
                 console.warn('📋 Propiedades disponibles en data:', Object.keys(data));
@@ -12651,19 +13237,29 @@ class FormPreviewService {
                 console.log('📋 Fields:', fields);
             }
             else {
-                console.log('✅ FormPreview: HTML generado correctamente', { cells });
+                console.log('✅ FormPreview: HTML generado correctamente', {
+                    totalCeldas: cells.length,
+                    campos: cells.map((c) => c.label),
+                });
             }
         }
         if (!cells.length)
             return '';
         return this.generateHtml(title, cells, compact);
     }
+    /**
+     * Resuelve el valor de referencia
+     * Soporta: arrays, maps, objetos literales y funciones
+     */
     resolveReferenceValue(value, field) {
         if (Array.isArray(value)) {
             return value.map((item) => this.resolveSingleReference(item, field));
         }
         return this.resolveSingleReference(value, field);
     }
+    /**
+     * Resuelve un valor individual de referencia
+     */
     resolveSingleReference(value, field) {
         if (!value)
             return value;
@@ -12680,8 +13276,31 @@ class FormPreviewService {
             referencedItem = map.get(value);
         }
         else if (Array.isArray(map)) {
-            const idKey = field.referenceId || 'id';
-            referencedItem = map.find((item) => item[idKey] === value);
+            // Si no se especifica referenceId, usar el key del campo
+            const idKey = field.referenceId || field.key || 'id';
+            const labelKey = field.referenceLabel || 'nombre';
+            const found = map.find((item) => {
+                if (item[idKey] !== undefined) {
+                    return item[idKey] === value;
+                }
+                if (item.id !== undefined) {
+                    return item.id === value;
+                }
+                return false;
+            });
+            if (found) {
+                if (found[labelKey] !== undefined && found[labelKey] !== null) {
+                    return found[labelKey];
+                }
+                // Fallback: buscar otras propiedades comunes
+                for (const prop of ['label', 'nombre', 'name', 'text', 'value']) {
+                    if (found[prop] !== undefined && found[prop] !== null) {
+                        return found[prop];
+                    }
+                }
+                return found;
+            }
+            return value;
         }
         else if (typeof map === 'object') {
             referencedItem = map[String(value)];
@@ -12693,12 +13312,23 @@ class FormPreviewService {
                     referencedItem[labelProp] !== null) {
                     return referencedItem[labelProp];
                 }
+                for (const prop of ['label', 'nombre', 'name', 'text', 'value']) {
+                    if (referencedItem[prop] !== undefined &&
+                        referencedItem[prop] !== null) {
+                        return referencedItem[prop];
+                    }
+                }
                 return referencedItem;
             }
             return referencedItem;
         }
         return value;
     }
+    /**
+     * Obtiene un valor anidado usando notación punto
+     * @example
+     * getNestedValue({ user: { name: 'Juan' } }, 'user.name') // 'Juan'
+     */
     getNestedValue(obj, path) {
         if (!obj || !path)
             return undefined;
@@ -12711,7 +13341,29 @@ class FormPreviewService {
         }
         return result;
     }
-    formatValue(value) {
+    /**
+     * Formatea un valor usando el formato especificado
+     * @param value - Valor a formatear
+     * @param format - Formato a aplicar (string predefinido o función personalizada)
+     * @returns String formateado
+     */
+    formatValue(value, format) {
+        if (value === null || value === undefined)
+            return '';
+        // Si es función personalizada, ejecutarla
+        if (typeof format === 'function') {
+            return format(value);
+        }
+        // Si es string, verificar si es un formato de fecha
+        if (typeof format === 'string') {
+            return this.formatDate(value, format);
+        }
+        return this.formatDefault(value);
+    }
+    /**
+     * Formato por defecto para cualquier valor
+     */
+    formatDefault(value) {
         if (value === null || value === undefined)
             return '';
         if (value instanceof Date)
@@ -12727,6 +13379,68 @@ class FormPreviewService {
         }
         return String(value);
     }
+    /**
+     * 🗓️ FORMATOS DE FECHA DISPONIBLES
+     *
+     * Para agregar un nuevo formato:
+     * 1. Agrega el tipo en DateFormat
+     * 2. Agrega el case en el switch del método formatDate
+     * 3. Define las opciones de Intl.DateTimeFormatOptions
+     *
+     * @example
+     * // Agregar 'dateShort' para mostrar "07-abr-2026"
+     * // 1. type DateFormat = 'date' | 'dateLong' | 'dateTime' | 'dateShort'
+     * // 2. case 'dateShort':
+     * //    options.day = '2-digit';
+     * //    options.month = 'short';
+     * //    options.year = 'numeric';
+     * //    break;
+     */
+    formatDate(value, format) {
+        if (!value)
+            return '';
+        const date = value instanceof Date ? value : new Date(value);
+        if (isNaN(date.getTime())) {
+            // Si no es una fecha válida, devolver el valor original
+            return String(value);
+        }
+        const options = {};
+        switch (format) {
+            case 'date':
+                // "07/04/2026"
+                options.day = '2-digit';
+                options.month = '2-digit';
+                options.year = 'numeric';
+                break;
+            case 'dateLong':
+                // "martes 07 de abril de 2026"
+                options.weekday = 'long';
+                options.day = '2-digit';
+                options.month = 'long';
+                options.year = 'numeric';
+                break;
+            case 'dateTime':
+                // "07/04/2026 14:30"
+                options.day = '2-digit';
+                options.month = '2-digit';
+                options.year = 'numeric';
+                options.hour = '2-digit';
+                options.minute = '2-digit';
+                break;
+            default:
+                return this.formatDefault(value);
+        }
+        try {
+            return date.toLocaleDateString('es-ES', options);
+        }
+        catch (error) {
+            // Si hay error al formatear, devolver el valor original
+            return String(value);
+        }
+    }
+    /**
+     * Formatea un valor individual (para objetos y arrays)
+     */
     formatSingleValue(value) {
         if (!value || typeof value !== 'object')
             return String(value);
@@ -12758,6 +13472,9 @@ class FormPreviewService {
             return '[Objeto]';
         }
     }
+    /**
+     * Genera el HTML del preview
+     */
     generateHtml(title, cells, compact) {
         if (compact) {
             return `
@@ -12808,15 +13525,20 @@ class FormPreviewService {
       </div>
     `;
     }
+    /**
+     * 🔍 Debug: Muestra información detallada para depuración
+     * ⚠️ SOLO se ejecuta en entorno de desarrollo
+     */
     debugInputData(data, fields, options) {
-        const isDev = !this.environment.production;
-        if (!isDev)
+        // ⚠️ Seguridad: Si es producción, NO ejecutar nada
+        if (!this.isDev)
             return;
         console.group('🔍 FormPreview Debug');
         console.log('📊 Data:', data);
         console.log('📋 Propiedades disponibles:', data ? Object.keys(data) : 'data es null');
         console.log('🎯 Fields solicitados:', fields);
         console.log('⚙️ Options:', options);
+        console.log('🌍 Entorno:', this.environment.production ? 'Producción' : 'Desarrollo');
         if (data) {
             for (const field of fields) {
                 const value = this.getNestedValue(data, field.key);
@@ -12830,11 +13552,18 @@ class FormPreviewService {
                 }
                 else {
                     console.log(`✅ Campo "${field.key}" existe:`, value);
+                    // Mostrar información del formato si existe
+                    if (field.format) {
+                        console.log(`   📝 Formato: ${typeof field.format === 'function' ? 'Función personalizada' : field.format}`);
+                    }
                 }
             }
         }
         console.groupEnd();
     }
+    /**
+     * Encuentra propiedades similares para sugerencias en debug
+     */
     findSimilarProperties(search, properties) {
         const searchLower = search.toLowerCase();
         return properties
@@ -12844,6 +13573,9 @@ class FormPreviewService {
         })
             .slice(0, 3);
     }
+    /**
+     * Escapa caracteres HTML para evitar inyección
+     */
     escapeHtml(str) {
         if (!str)
             return '';
@@ -13150,6 +13882,147 @@ function createCurrencyFormatter(locale, currency) {
     });
 }
 
+/**
+ * Guarda un valor en localStorage
+ * Soporta: strings, números, objetos, arrays, null, undefined
+ */
+function setStorage(key, value) {
+    try {
+        // 🔧 Manejar null y undefined explícitamente
+        if (value === null) {
+            localStorage.setItem(key, 'null');
+        }
+        else if (value === undefined) {
+            localStorage.setItem(key, 'undefined');
+        }
+        else {
+            localStorage.setItem(key, JSON.stringify(value));
+        }
+    }
+    catch (error) {
+        console.error(`Error guardando en localStorage (${key})`, error);
+    }
+}
+/**
+ * Obtiene un valor desde localStorage
+ * @param defaultValue - Valor por defecto si no existe la clave
+ * @returns El valor guardado o el defaultValue
+ */
+function getStorage(key, defaultValue) {
+    try {
+        const data = localStorage.getItem(key);
+        // Si no existe la clave en el storage
+        if (data === null) {
+            return defaultValue;
+        }
+        // 🔧 Manejar valores especiales
+        if (data === 'null') {
+            return null; // Retorna null explícitamente
+        }
+        if (data === 'undefined') {
+            return undefined;
+        }
+        // Intentar parsear como JSON
+        try {
+            return JSON.parse(data);
+        }
+        catch {
+            // Si no es JSON válido, devolver como string
+            return data;
+        }
+    }
+    catch (error) {
+        console.error(`Error recuperando de localStorage (${key})`, error);
+        return defaultValue;
+    }
+}
+// Función específica para objetos con merge
+function setStorageObject(key, values = {}, merge = true) {
+    try {
+        if (merge) {
+            const current = getStorage(key, {});
+            localStorage.setItem(key, JSON.stringify({ ...current, ...values }));
+        }
+        else {
+            localStorage.setItem(key, JSON.stringify(values));
+        }
+    }
+    catch (error) {
+        console.error(`Error guardando en localStorage (${key})`, error);
+    }
+}
+/**
+ * 🆕 Función para eliminar una clave del storage
+ */
+function removeStorage(key) {
+    try {
+        localStorage.removeItem(key);
+    }
+    catch (error) {
+        console.error(`Error eliminando de localStorage (${key})`, error);
+    }
+}
+/**
+ * 🆕 Función para verificar si existe una clave en el storage
+ */
+function hasStorage(key) {
+    try {
+        return localStorage.getItem(key) !== null;
+    }
+    catch (error) {
+        console.error(`Error verificando en localStorage (${key})`, error);
+        return false;
+    }
+}
+
+/**
+ * Calcula la fecha sumando días hábiles (Lunes a Sábado, Domingos no cuentan)
+ * Los feriados en el rango no consumen días
+ *
+ * @param fechaInicio - Fecha desde donde empezar
+ * @param cantidadDias - Días hábiles a sumar
+ * @param feriados - Lista de feriados (opcional)
+ * @returns Fecha calculada o null si fechaInicio es null
+ *
+ * @example
+ * // Sin feriados
+ * calcularFechaFin(new Date('2026-07-07'), 15) // 2026-07-25
+ *
+ * @example
+ * // Con feriados
+ * calcularFechaFin(
+ *   new Date('2026-07-07'),
+ *   15,
+ *   [{ date: '2026-07-14' }, { date: '2026-07-21' }]
+ * ) // 2026-07-27
+ */
+function dsxCalcularRangoFecha(fechaInicio, cantidadDias, feriados) {
+    // Validación básica
+    if (!fechaInicio)
+        return null;
+    if (cantidadDias === 0)
+        return new Date(fechaInicio);
+    // Crear Set de feriados con moment para comparación directa
+    const feriadosSet = new Set(feriados?.map((f) => moment(f.dateHoliday).format('YYYY-MM-DD')));
+    // Usar moment para la fecha
+    const fecha = moment(fechaInicio).startOf('day');
+    let dias = cantidadDias;
+    while (dias > 0) {
+        fecha.add(1, 'day');
+        const diaSemana = fecha.day(); // 0=domingo
+        const fechaStr = fecha.format('YYYY-MM-DD');
+        // Días que NO consumen días (se saltan):
+        // 1. Domingos
+        // 2. Feriados
+        if (diaSemana === 0 || feriadosSet.has(fechaStr)) {
+            continue;
+        }
+        // Sábado = medio día, resto = día completo
+        dias -= diaSemana === 6 ? 0.5 : 1;
+    }
+    return fecha.toDate();
+}
+
 function chainControlGroups(form, groups) {
     groups.forEach((group) => {
         chainControls(form, group);
@@ -13783,5 +14656,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, 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 };
+export { ACTION_TYPES, AlertaService, AppMessageErrorComponent, AppMessageHelpComponent, ArrowNavigationDirective, AuthorizeService, AutoScrollHeightDirective, BaseCRUDService, CACHE_KEYS, CacheService, CssV2Component, DSX_PALETTE, DateIndicator, DocxPreviewComponent, DsxAddToolsModule, DsxAutocomplete, DsxButtonComponent, DsxCalendarView, 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, dsxCalcularRangoFecha, getActionMessageConfig, getStorage, getZeroBasedRolIndex, guardTokenPurposeGuard, hasStorage, httpAuthorizeInterceptor, minimumAgeValidator, nitValidator, productionEnvironment, provideEnvironment, removeStorage, setStorage, setStorageObject, sorensenDiceValidator, templateStructureValidator, templateVariablesValidator, validateEnvironmentConfig };
 //# sourceMappingURL=ngx-dsxlibrary.mjs.map