ngx-dsxlibrary 2.21.43 → 2.21.45

package/README.md

@@ -49,10 +49,13 @@ Notas:
 
 La librería expone un archivo CSS con `@font-face` para que cualquier proyecto consumidor lo importe una sola vez.
 
+Tambien expone un archivo de personalizacion base para PrimeNG, para mantener estilos uniformes entre proyectos consumidores.
+
 En el `styles.css`/`styles.scss` del proyecto consumidor:
 
 ```css
 @import "ngx-dsxlibrary/assets/css/fonts.css";
+@import "ngx-dsxlibrary/assets/css/primeng_dsx.css";
 ```
 
 Las rutas del CSS están definidas como `url("/fonts/...")`, por lo que el proyecto consumidor debe publicar esos archivos en `/fonts`.

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

@@ -822,6 +822,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
 class DocxPreviewComponent {
     view = viewChild('viewer', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
     visibleState = signal(false, ...(ngDevMode ? [{ debugName: "visibleState" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    rendered = signal(false, ...(ngDevMode ? [{ debugName: "rendered" }] : /* istanbul ignore next */ []));
     renderToken = 0;
     set visible(value) {
         this.visibleState.set(!!value);
@@ -840,18 +842,19 @@ class DocxPreviewComponent {
                 return;
             }
             if (!isVisible) {
-                this.renderToken++;
-                container.innerHTML = '';
+                this.resetViewer(container);
                 return;
             }
+            this.loading.set(true);
+            this.rendered.set(false);
             if (!(fileBlob instanceof Blob)) {
-                this.renderToken++;
+                this.finishWithFallback(container);
                 container.innerHTML =
                     '<p>No hay un archivo .docx válido para previsualizar.</p>';
                 return;
             }
             if (!fileBlob.size) {
-                this.renderToken++;
+                this.finishWithFallback(container);
                 container.innerHTML = '<p>El archivo .docx está vacío.</p>';
                 return;
             }
@@ -865,6 +868,18 @@ class DocxPreviewComponent {
             void this.renderDocx(fileBlob, container, options, token);
         });
     }
+    resetViewer(container) {
+        this.renderToken++;
+        this.loading.set(false);
+        this.rendered.set(false);
+        container.innerHTML = '';
+    }
+    finishWithFallback(container) {
+        this.renderToken++;
+        this.loading.set(false);
+        this.rendered.set(true);
+        container.innerHTML = '';
+    }
     async renderDocx(fileBlob, container, options, token) {
         try {
             const viteDocxModulePath = '/@id/docx-preview';
@@ -875,6 +890,10 @@ class DocxPreviewComponent {
                 return;
             }
             await docxPreviewModule.renderAsync(fileBlob, container, undefined, options);
+            if (token === this.renderToken && this.visibleState()) {
+                this.loading.set(false);
+                this.rendered.set(true);
+            }
         }
         catch (error) {
             if (token !== this.renderToken || !this.visibleState()) {
@@ -883,6 +902,8 @@ class DocxPreviewComponent {
             console.error('[DocxPreview] Error al renderizar el archivo DOCX.', error);
             container.innerHTML =
                 '<p>No se pudo renderizar la vista previa DOCX. Verifica la consola para más detalles.</p>';
+            this.loading.set(false);
+            this.rendered.set(true);
         }
     }
     onHide() {
@@ -894,11 +915,11 @@ class DocxPreviewComponent {
         this.visibleChange.emit(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DocxPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: DocxPreviewComponent, isStandalone: true, selector: "app-docx-preview", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "view", first: true, predicate: ["viewer"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-dialog\r\n  [visible]=\"visible\"\r\n  (onHide)=\"onHide()\"\r\n  [modal]=\"true\"\r\n  [breakpoints]=\"{ '1199px': '75vw', '575px': '90vw' }\"\r\n  [style]=\"{ width: '80vw' }\"\r\n  [draggable]=\"false\"\r\n  [resizable]=\"false\"\r\n  [closable]=\"true\"\r\n  [maximizable]=\"true\"\r\n>\r\n  <ng-template #header>\r\n    <div class=\"flex justify-content-center align-items-center gap-2 px-2\">\r\n      <p-avatar image=\"icon2/word-2019.png\" />\r\n      <span class=\"font-bold\">Vista preliminar del documento</span>\r\n    </div>\r\n  </ng-template>\r\n  <div #viewer></div>\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"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DocxPreviewComponent, isStandalone: true, selector: "app-docx-preview", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "view", first: true, predicate: ["viewer"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-dialog\r\n  [visible]=\"visible\"\r\n  (onHide)=\"onHide()\"\r\n  [modal]=\"true\"\r\n  [breakpoints]=\"{ '1199px': '75vw', '575px': '90vw' }\"\r\n  [style]=\"{ width: '80vw' }\"\r\n  [draggable]=\"false\"\r\n  [resizable]=\"false\"\r\n  [closable]=\"true\"\r\n  [maximizable]=\"true\"\r\n>\r\n  <ng-template #header>\r\n    <div class=\"flex justify-content-center align-items-center gap-2 px-2\">\r\n      <p-avatar image=\"icon2/word-2019.png\" />\r\n      <span class=\"font-bold\">Vista preliminar del documento</span>\r\n    </div>\r\n  </ng-template>\r\n  <div class=\"docx-preview-shell\">\r\n    @if (loading()) {\r\n      <div class=\"docx-preview-loading\">\r\n        <span class=\"docx-preview-spinner\"></span>\r\n        <span>Cargando vista previa del documento...</span>\r\n      </div>\r\n    }\r\n\r\n    <div\r\n      #viewer\r\n      class=\"docx-preview-viewer\"\r\n      [class.is-hidden]=\"loading() && !rendered()\"\r\n    ></div>\r\n  </div>\r\n</p-dialog>\r\n", styles: [".docx-preview-shell{position:relative;min-height:60vh}.docx-preview-loading{align-items:center;color:#475569;display:flex;flex-direction:column;gap:.75rem;justify-content:center;min-height:60vh;text-align:center}.docx-preview-spinner{animation:docx-preview-spin .8s linear infinite;border:3px solid rgba(71,85,105,.15);border-top-color:#2563eb;border-radius:50%;display:inline-block;height:2.25rem;width:2.25rem}.docx-preview-viewer{min-height:60vh;transition:opacity .18s ease}.docx-preview-viewer.is-hidden{opacity:0;pointer-events:none;position:absolute;inset:0}@keyframes docx-preview-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\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: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DocxPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-docx-preview', imports: [DialogModule, AvatarModule], template: "<p-dialog\r\n  [visible]=\"visible\"\r\n  (onHide)=\"onHide()\"\r\n  [modal]=\"true\"\r\n  [breakpoints]=\"{ '1199px': '75vw', '575px': '90vw' }\"\r\n  [style]=\"{ width: '80vw' }\"\r\n  [draggable]=\"false\"\r\n  [resizable]=\"false\"\r\n  [closable]=\"true\"\r\n  [maximizable]=\"true\"\r\n>\r\n  <ng-template #header>\r\n    <div class=\"flex justify-content-center align-items-center gap-2 px-2\">\r\n      <p-avatar image=\"icon2/word-2019.png\" />\r\n      <span class=\"font-bold\">Vista preliminar del documento</span>\r\n    </div>\r\n  </ng-template>\r\n  <div #viewer></div>\r\n</p-dialog>\r\n" }]
+            args: [{ selector: 'app-docx-preview', imports: [DialogModule, AvatarModule], template: "<p-dialog\r\n  [visible]=\"visible\"\r\n  (onHide)=\"onHide()\"\r\n  [modal]=\"true\"\r\n  [breakpoints]=\"{ '1199px': '75vw', '575px': '90vw' }\"\r\n  [style]=\"{ width: '80vw' }\"\r\n  [draggable]=\"false\"\r\n  [resizable]=\"false\"\r\n  [closable]=\"true\"\r\n  [maximizable]=\"true\"\r\n>\r\n  <ng-template #header>\r\n    <div class=\"flex justify-content-center align-items-center gap-2 px-2\">\r\n      <p-avatar image=\"icon2/word-2019.png\" />\r\n      <span class=\"font-bold\">Vista preliminar del documento</span>\r\n    </div>\r\n  </ng-template>\r\n  <div class=\"docx-preview-shell\">\r\n    @if (loading()) {\r\n      <div class=\"docx-preview-loading\">\r\n        <span class=\"docx-preview-spinner\"></span>\r\n        <span>Cargando vista previa del documento...</span>\r\n      </div>\r\n    }\r\n\r\n    <div\r\n      #viewer\r\n      class=\"docx-preview-viewer\"\r\n      [class.is-hidden]=\"loading() && !rendered()\"\r\n    ></div>\r\n  </div>\r\n</p-dialog>\r\n", styles: [".docx-preview-shell{position:relative;min-height:60vh}.docx-preview-loading{align-items:center;color:#475569;display:flex;flex-direction:column;gap:.75rem;justify-content:center;min-height:60vh;text-align:center}.docx-preview-spinner{animation:docx-preview-spin .8s linear infinite;border:3px solid rgba(71,85,105,.15);border-top-color:#2563eb;border-radius:50%;display:inline-block;height:2.25rem;width:2.25rem}.docx-preview-viewer{min-height:60vh;transition:opacity .18s ease}.docx-preview-viewer.is-hidden{opacity:0;pointer-events:none;position:absolute;inset:0}@keyframes docx-preview-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.ViewChild, args: ['viewer', { isSignal: true }] }], visible: [{
                 type: Input
             }], visibleChange: [{