ngx-dsxlibrary 2.21.73 → 2.21.75

package/fesm2022/ngx-dsxlibrary-src-lib-components.mjs

@@ -18,6 +18,8 @@ import * as i2$3 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
 import * as i1$3 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
+import * as i4 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
 import * as i1$4 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$5 from 'primeng/tabs';
@@ -765,7 +767,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) => {
@@ -773,43 +801,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: i1$3.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: i1$3.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: i2$2.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 {