infodocviewdoc 2.0.3 → 3.0.0

package/README.md

@@ -1,6 +1,6 @@
 # MFE Document Viewer Integration Guide
 
-`infodocviewdoc` es una librería Angular para previsualizar documentos en microfrontends SGDEA.
+`infodocviewdoc` es una librería Angular para previsualizar documentos en microfrontends.
 
 ## 1) Instalacion del paquete (ultima version)
 
@@ -15,7 +15,7 @@ Si tu MFE ya existe (con Angular y dependencias base), **solo debes agregar esta
 ```json
 {
   "dependencies": {
-    "infodocviewdoc": "latest",
+    "infodocviewdoc": "3.0.0",
     "@handsontable/angular": "^16.2.0",
     "handsontable": "^16.2.0",
     "jspdf": "^4.1.0",
@@ -50,7 +50,7 @@ Si creas un microfront desde cero, ademas de Angular/base, tu bloque de `depende
     "rxjs": "~7.8.0",
     "tslib": "2.3.0",
     "zone.js": "~0.15.0",
-    "infodocviewdoc": "latest",
+    "infodocviewdoc": "^3.0.0",
     "@handsontable/angular": "^16.2.0",
     "handsontable": "^16.2.0",
     "jspdf": "^4.1.0",
@@ -66,19 +66,61 @@ Despues de agregarlas:
 npm install
 ```
 
-## 3) Configuracion de assets PDF viewer (host)
+## 3) Configuracion de assets PDF viewer en `angular.json` (host)
 
-En `angular.json` del MFE host agrega los assets de `ngx-extended-pdf-viewer`:
+Los ficheros de PDF.js (`viewer-*.mjs`, workers, `cmaps`, etc.) viven en `node_modules/ngx-extended-pdf-viewer/assets`. El host debe **copiarlos al build** para poder servirlos bajo la ruta base de la aplicacion (normalmente `/assets/`).
+
+### Donde colocarlo
+
+En el proyecto del MFE, dentro del **target que realmente usa `ng build` / `ng serve`** (suele llamarse `esbuild`, `build` o `application`), en `architect.<target>.options.assets` (no solo en el target `test`).
+
+Ejemplo con el builder moderno de aplicacion (`@angular-devkit/build-angular:application`):
 
 ```json
-{
-  "glob": "**/*",
-  "input": "node_modules/ngx-extended-pdf-viewer/assets",
-  "output": "/assets/"
+"architect": {
+  "esbuild": {
+    "builder": "@angular-devkit/build-angular:application",
+    "options": {
+      "assets": [
+        {
+          "glob": "**/*",
+          "input": "public"
+        },
+        {
+          "glob": "**/*",
+          "input": "node_modules/ngx-extended-pdf-viewer/assets",
+          "output": "/assets/"
+        }
+      ]
+    }
+  }
 }
 ```
 
-Sin esta configuracion puede aparecer el error 404 de `viewer-*.mjs`.
+- Ajusta el primer bloque (`public`, `src/assets`, etc.) segun tu proyecto; lo importante es **anadir** el segundo bloque con `ngx-extended-pdf-viewer/assets`.
+- `output: "/assets/"` hace que los ficheros queden disponibles como `https://<tu-host>/assets/viewer-*.mjs` (y el resto de recursos en el mismo prefijo).
+
+### Si no configuras estos assets
+
+- La libreria puede cargar los mismos recursos desde un **CDN** (jsDelivr) alineado a la version de `ngx-extended-pdf-viewer`: en muchos entornos el PDF **funcionara igual** sin copiar assets.
+- Conviene **mantener** la entrada en `angular.json` si necesitas: **sin acceso a internet**, **CSP** que bloquea dominios externos, o **politica** de no depender de CDN.
+
+### Si sirves los assets locales pero con otra ruta
+
+Puedes usar el input opcional `pdfAssetsBaseUrl` en el componente (por ejemplo la URL base donde el host publica los ficheros, sin barra final o normalizada).
+
+```html
+<sgdea-document-viewer
+  [pdfAssetsBaseUrl]="'https://mi-dominio.com/assets'"
+  ...
+></sgdea-document-viewer>
+```
+
+Si no se define `pdfAssetsBaseUrl` y el host **no** sirve `/assets/` con los ficheros del viewer, se usara el **fallback CDN** interno.
+
+### Sintoma tipico si falta todo (host sin assets y sin CDN)
+
+Error en red **404** sobre `http(s)://<host>/assets/viewer-*.mjs` y el PDF no se renderiza aunque la descarga del archivo sea **200**.
 
 ## 4) Como importar y usar el componente
 
@@ -98,30 +140,43 @@ export class PdfPreviewModalComponent {}
 
 ```html
 <sgdea-document-viewer
+  [fileBlob]="blob"
+  [fileBlobName]="fileName"
   [url]="apiUrl"
-  [nameFile]="objectName"
-  [nameBucket]="bucketName"
-  [nameSpaceBucket]="''"
-  [token]="token">
+  [token]="token"
+  [pdfAssetsBaseUrl]="'https://mi-dominio.com/assets'">
 </sgdea-document-viewer>
 ```
 
 ## 5) Inputs del componente
 
-- `url`: base URL del microservicio de archivos (ej: `https://host-backend`)
-- `nameFile`: ruta/nombre del archivo en bucket (`objectName`)
-- `nameBucket`: nombre del bucket (ej: `attachments`)
-- `nameSpaceBucket`: namespace (si aplica; puede ir vacio)
-- `token`: JWT para `Authorization: Bearer <token>`
+- `fileBlob`: `File | Blob` del documento ya resuelto por el microfront (requerido).
+- `fileBlobName` (opcional): nombre del archivo para inferir la extensión (p. ej. `documento.pdf`).
+- `url` (requerido solo para Office->PDF): base URL del microservicio de conversión (ej: `https://host-backend`).
+- `token` (requerido solo para Office->PDF): JWT para `Authorization: Bearer <token>`.
+- `pdfAssetsBaseUrl` (opcional): URL base donde el host publica los assets de `ngx-extended-pdf-viewer` (p. ej. `https://mi-app.com/assets`).
+
+Notas:
+- Para PDFs/imágenes/texto/Excel el visor renderiza el `fileBlob` directamente.
+- Para Word/PowerPoint el visor llama al microservicio de conversión y requiere `url` y `token`.
+
+## 6) Checklist de integración (microfront)
+
+1. **Tu microfront descarga/prepara el archivo** y le pasa el contenido al componente con `[fileBlob]`.
+2. **Opcional pero recomendado:** pasa `[fileBlobName]` para que el visor detecte la extensión con precisión (especialmente en blobs cuyo `type` es vacío o genérico).
+3. Si el documento es **Office (doc/docx/ppt/pptx)**, el microfront debe pasar `[url]` y `[token]` para que el visor ejecute la conversión a PDF.
+4. Verifica en red que el visor carga `viewer-*.mjs` y workers:
+   - recomendado: copiar `node_modules/ngx-extended-pdf-viewer/assets` al build vía `angular.json` (ver sección 3).
+   - alternativa: usar fallback CDN o definir `[pdfAssetsBaseUrl]`.
 
-## 6) Consideraciones de integracion en MFE
+## 7) Consideraciones de integracion en MFE
 
-- El componente prioriza `@Input()`; si no llegan valores por inputs, usa `queryParams` como fallback.
+- El componente requiere `[fileBlob]` para renderizar.
 - En modales, usa contenedor con `height` definido y `overflow` para Excel grandes.
 - Para obtener token en host, puedes usar `localStorage` o tu servicio de autenticacion central.
-- Mantener contrato estable: ruta y forma de datos enviados al visor via inputs.
+- Mantener contrato estable: forma de datos enviados al visor via inputs (`[fileBlob]`, `[fileBlobName]`, y `[url]`/`[token]` solo para Office->PDF).
 
-## 7) Formatos soportados por el visor
+## 8) Formatos soportados por el visor
 
 - Procesamiento de texto: `.docx`, `.doc`
 - Hojas de calculo: `.xlsx`, `.xls`
@@ -130,7 +185,7 @@ export class PdfPreviewModalComponent {}
 - Texto plano: `.txt`
 - Imagenes: `.jpg`, `.png`, `.tiff`, `.gif`
 
-## 8) Ejemplo rapido de instalacion local (desarrollo)
+## 9) Ejemplo rapido de instalacion local (desarrollo)
 
 Desde el repositorio de la libreria:
 
@@ -146,7 +201,7 @@ En el MFE host:
 npm install "C:/ruta/a/infodocviewdoc-<version>.tgz"
 ```
 
-## 9) Public API exportada
+## 10) Public API exportada
 
 `public-api.ts` exporta:
 
@@ -156,5 +211,5 @@ npm install "C:/ruta/a/infodocviewdoc-<version>.tgz"
 
 Si integras este paquete en otro microfront, valida primero:
 1. dependencias del host,
-2. assets de `ngx-extended-pdf-viewer`,
-3. envio correcto de `url`, `nameFile`, `nameBucket` y `token`.
+2. assets de `ngx-extended-pdf-viewer` en `angular.json` del target de build (recomendado) o, si no, que el entorno permita el fallback CDN / `pdfAssetsBaseUrl`,
+3. envio correcto de `fileBlob`/`fileBlobName`; y `url`/`token` **solo** si el archivo es Office (para conversión).