@memberjunction/ng-artifacts 5.23.0 → 5.25.0

package/dist/lib/components/plugins/docx-artifact-viewer.component.js

@@ -0,0 +1,223 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, SecurityContext } from '@angular/core';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseArtifactViewerPluginComponent } from '../base-artifact-viewer.component';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/artifact-file.service";
+import * as i2 from "@angular/platform-browser";
+import * as i3 from "../file-artifact-toolbar.component";
+function DocxArtifactViewerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵelement(1, "i", 6);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Loading document\u2026");
+    i0.ɵɵelementEnd()();
+} }
+function DocxArtifactViewerComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵelement(1, "i", 7);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.errorMessage);
+} }
+function DocxArtifactViewerComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 5);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("innerHTML", ctx_r0.safeHtml, i0.ɵɵsanitizeHtml);
+} }
+/**
+ * Viewer plugin for Word (DOCX) artifact versions stored in MJStorage.
+ *
+ * Downloads the binary file, converts it to HTML using mammoth.js, then
+ * sanitizes the HTML before binding it with [innerHTML].
+ *
+ * Printing opens the sanitized content in a child window so the browser's
+ * native print dialog renders the Word document faithfully.
+ */
+let DocxArtifactViewerComponent = class DocxArtifactViewerComponent extends BaseArtifactViewerPluginComponent {
+    fileService;
+    sanitizer;
+    cdr;
+    isLoading = true;
+    isDownloading = false;
+    errorMessage = '';
+    safeHtml = '';
+    /** Raw HTML produced by mammoth — kept for print. */
+    rawHtml = '';
+    downloadUrl = '';
+    constructor(fileService, sanitizer, cdr) {
+        super();
+        this.fileService = fileService;
+        this.sanitizer = sanitizer;
+        this.cdr = cdr;
+    }
+    get hasDisplayContent() { return true; }
+    async ngOnInit() {
+        await this.loadDocument();
+    }
+    async onDownload() {
+        if (!this.downloadUrl || this.isDownloading) {
+            return;
+        }
+        this.isDownloading = true;
+        this.cdr.markForCheck();
+        try {
+            await this.triggerBrowserDownload(this.downloadUrl, this.artifactVersion?.FileName || 'document.docx');
+        }
+        finally {
+            this.isDownloading = false;
+            this.cdr.markForCheck();
+        }
+    }
+    onPrint() {
+        if (!this.rawHtml) {
+            return;
+        }
+        this.openPrintWindow(this.rawHtml);
+    }
+    // ─── Private helpers ────────────────────────────────────────────────────────
+    async loadDocument() {
+        if (!this.artifactVersion?.ID) {
+            this.showError('No artifact version provided.');
+            return;
+        }
+        try {
+            let arrayBuffer;
+            if (this.artifactVersion.ContentMode === 'File') {
+                // File-backed: download from storage via pre-auth URL
+                this.downloadUrl = await this.fileService.getDownloadUrl(this.artifactVersion.ID);
+                arrayBuffer = await this.fetchAsArrayBuffer(this.downloadUrl);
+            }
+            else {
+                // Inline: content is a base64 data URL stored in the artifact version
+                const content = this.artifactVersion.Content;
+                if (!content) {
+                    this.showError('Artifact has no content.');
+                    return;
+                }
+                arrayBuffer = this.fileService.dataUrlToArrayBuffer(content);
+                // Create an object URL for download support
+                this.downloadUrl = this.fileService.dataUrlToObjectUrl(content, this.artifactVersion.MimeType || 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
+            }
+            const html = await this.convertDocxToHtml(arrayBuffer);
+            this.rawHtml = html;
+            const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, html) ?? '';
+            this.safeHtml = sanitized;
+            this.isLoading = false;
+            this.cdr.markForCheck();
+        }
+        catch (err) {
+            this.showError(`Could not load document: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }
+    async convertDocxToHtml(arrayBuffer) {
+        const mammoth = await import('mammoth');
+        const result = await mammoth.convertToHtml({ arrayBuffer });
+        if (result.messages?.length) {
+            // Log warnings from mammoth (e.g. unsupported features) without breaking display
+            result.messages.forEach(m => console.warn('[DocxViewer] mammoth:', m.message));
+        }
+        return result.value;
+    }
+    async fetchAsArrayBuffer(url) {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status} fetching file`);
+        }
+        return response.arrayBuffer();
+    }
+    /** Open a minimal print window containing only the document HTML. */
+    openPrintWindow(html) {
+        const printWindow = window.open('', '_blank', 'width=900,height=700');
+        if (!printWindow) {
+            console.warn('[DocxViewer] Popup was blocked — cannot print');
+            return;
+        }
+        printWindow.document.write(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset="utf-8">
+          <title>${this.artifactVersion?.FileName ?? 'Document'}</title>
+          <style>
+            body { font-family: Georgia, serif; font-size: 13pt; line-height: 1.6; margin: 2cm; color: #000; }
+            table { border-collapse: collapse; width: 100%; }
+            td, th { border: 1px solid #999; padding: 4px 8px; }
+            th { background: #eee; font-weight: bold; }
+            img { max-width: 100%; }
+          </style>
+        </head>
+        <body>${html}</body>
+      </html>
+    `);
+        printWindow.document.close();
+        printWindow.focus();
+        printWindow.print();
+        printWindow.close();
+    }
+    showError(message) {
+        this.isLoading = false;
+        this.errorMessage = message;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = function DocxArtifactViewerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DocxArtifactViewerComponent)(i0.ɵɵdirectiveInject(i1.ArtifactFileService), i0.ɵɵdirectiveInject(i2.DomSanitizer), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DocxArtifactViewerComponent, selectors: [["mj-docx-artifact-viewer"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 4, consts: [[1, "docx-viewer"], [3, "download", "print", "fileName", "isDownloading", "showPrint"], [1, "docx-viewer__body"], [1, "docx-viewer__state"], [1, "docx-viewer__state", "docx-viewer__state--error"], [1, "docx-viewer__content", 3, "innerHTML"], [1, "fas", "fa-spinner", "fa-spin"], [1, "fas", "fa-exclamation-triangle"]], template: function DocxArtifactViewerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "mj-file-artifact-toolbar", 1);
+            i0.ɵɵlistener("download", function DocxArtifactViewerComponent_Template_mj_file_artifact_toolbar_download_1_listener() { return ctx.onDownload(); })("print", function DocxArtifactViewerComponent_Template_mj_file_artifact_toolbar_print_1_listener() { return ctx.onPrint(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "div", 2);
+            i0.ɵɵconditionalCreate(3, DocxArtifactViewerComponent_Conditional_3_Template, 4, 0, "div", 3)(4, DocxArtifactViewerComponent_Conditional_4_Template, 4, 1, "div", 4)(5, DocxArtifactViewerComponent_Conditional_5_Template, 1, 1, "div", 5);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("fileName", (ctx.artifactVersion == null ? null : ctx.artifactVersion.FileName) || "document.docx")("isDownloading", ctx.isDownloading)("showPrint", true);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoading ? 3 : ctx.errorMessage ? 4 : 5);
+        } }, dependencies: [i3.FileArtifactToolbarComponent], styles: [".docx-viewer[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface);\n    }\n\n    .docx-viewer__body[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      overflow: auto;\n    }\n\n    .docx-viewer__state[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 12px;\n      height: 100%;\n      color: var(--mj-text-muted);\n      font-size: 14px;\n    }\n\n    .docx-viewer__state--error[_ngcontent-%COMP%] {\n      color: var(--mj-status-error-text);\n    }\n\n    .docx-viewer__content[_ngcontent-%COMP%] {\n      padding: 32px 48px;\n      max-width: 900px;\n      margin: 0 auto;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n      line-height: 1.7;\n    }\n\n    \n\n    .docx-viewer__content[_ngcontent-%COMP%]   :is(h1[_ngcontent-%COMP%], h2[_ngcontent-%COMP%], h3[_ngcontent-%COMP%], h4[_ngcontent-%COMP%], h5[_ngcontent-%COMP%], h6[_ngcontent-%COMP%]) {\n      color: var(--mj-text-primary);\n      margin-top: 1.5em;\n      margin-bottom: 0.5em;\n    }\n\n    .docx-viewer__content[_ngcontent-%COMP%]   table[_ngcontent-%COMP%] {\n      border-collapse: collapse;\n      width: 100%;\n      margin: 1em 0;\n    }\n\n    .docx-viewer__content[_ngcontent-%COMP%]   :is(td[_ngcontent-%COMP%], th[_ngcontent-%COMP%]) {\n      border: 1px solid var(--mj-border-default);\n      padding: 6px 10px;\n    }\n\n    .docx-viewer__content[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-card);\n      font-weight: 600;\n    }\n\n    .docx-viewer__content[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {\n      color: var(--mj-text-link);\n    }\n\n    .docx-viewer__content[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n      max-width: 100%;\n      height: auto;\n    }"] });
+};
+DocxArtifactViewerComponent = __decorate([
+    RegisterClass(BaseArtifactViewerPluginComponent, 'DocxArtifactViewerPlugin')
+], DocxArtifactViewerComponent);
+export { DocxArtifactViewerComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DocxArtifactViewerComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-docx-artifact-viewer', template: `
+    <div class="docx-viewer">
+      <mj-file-artifact-toolbar
+        [fileName]="artifactVersion?.FileName || 'document.docx'"
+        [isDownloading]="isDownloading"
+        [showPrint]="true"
+        (download)="onDownload()"
+        (print)="onPrint()">
+      </mj-file-artifact-toolbar>
+
+      <div class="docx-viewer__body">
+        @if (isLoading) {
+          <div class="docx-viewer__state">
+            <i class="fas fa-spinner fa-spin"></i>
+            <span>Loading document…</span>
+          </div>
+        } @else if (errorMessage) {
+          <div class="docx-viewer__state docx-viewer__state--error">
+            <i class="fas fa-exclamation-triangle"></i>
+            <span>{{ errorMessage }}</span>
+          </div>
+        } @else {
+          <div class="docx-viewer__content" [innerHTML]="safeHtml"></div>
+        }
+      </div>
+    </div>
+  `, styles: ["\n    .docx-viewer {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface);\n    }\n\n    .docx-viewer__body {\n      flex: 1;\n      min-height: 0;\n      overflow: auto;\n    }\n\n    .docx-viewer__state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 12px;\n      height: 100%;\n      color: var(--mj-text-muted);\n      font-size: 14px;\n    }\n\n    .docx-viewer__state--error {\n      color: var(--mj-status-error-text);\n    }\n\n    .docx-viewer__content {\n      padding: 32px 48px;\n      max-width: 900px;\n      margin: 0 auto;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n      line-height: 1.7;\n    }\n\n    /* Normalize headings produced by mammoth */\n    .docx-viewer__content :is(h1, h2, h3, h4, h5, h6) {\n      color: var(--mj-text-primary);\n      margin-top: 1.5em;\n      margin-bottom: 0.5em;\n    }\n\n    .docx-viewer__content table {\n      border-collapse: collapse;\n      width: 100%;\n      margin: 1em 0;\n    }\n\n    .docx-viewer__content :is(td, th) {\n      border: 1px solid var(--mj-border-default);\n      padding: 6px 10px;\n    }\n\n    .docx-viewer__content th {\n      background: var(--mj-bg-surface-card);\n      font-weight: 600;\n    }\n\n    .docx-viewer__content a {\n      color: var(--mj-text-link);\n    }\n\n    .docx-viewer__content img {\n      max-width: 100%;\n      height: auto;\n    }\n  "] }]
+    }], () => [{ type: i1.ArtifactFileService }, { type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DocxArtifactViewerComponent, { className: "DocxArtifactViewerComponent", filePath: "src/lib/components/plugins/docx-artifact-viewer.component.ts", lineNumber: 118 }); })();
+//# sourceMappingURL=docx-artifact-viewer.component.js.map

package/dist/lib/components/plugins/docx-artifact-viewer.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"docx-artifact-viewer.component.js","sourceRoot":"","sources":["../../../../src/lib/components/plugins/docx-artifact-viewer.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, ChangeDetectorRef, SecurityContext } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { RegisterClass } from '@memberjunction/global';\nimport { BaseArtifactViewerPluginComponent } from '../base-artifact-viewer.component';\nimport { ArtifactFileService } from '../../services/artifact-file.service';\n\n/**\n * Viewer plugin for Word (DOCX) artifact versions stored in MJStorage.\n *\n * Downloads the binary file, converts it to HTML using mammoth.js, then\n * sanitizes the HTML before binding it with [innerHTML].\n *\n * Printing opens the sanitized content in a child window so the browser's\n * native print dialog renders the Word document faithfully.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-docx-artifact-viewer',\n  template: `\n    <div class=\"docx-viewer\">\n      <mj-file-artifact-toolbar\n        [fileName]=\"artifactVersion?.FileName || 'document.docx'\"\n        [isDownloading]=\"isDownloading\"\n        [showPrint]=\"true\"\n        (download)=\"onDownload()\"\n        (print)=\"onPrint()\">\n      </mj-file-artifact-toolbar>\n\n      <div class=\"docx-viewer__body\">\n        @if (isLoading) {\n          <div class=\"docx-viewer__state\">\n            <i class=\"fas fa-spinner fa-spin\"></i>\n            <span>Loading document…</span>\n          </div>\n        } @else if (errorMessage) {\n          <div class=\"docx-viewer__state docx-viewer__state--error\">\n            <i class=\"fas fa-exclamation-triangle\"></i>\n            <span>{{ errorMessage }}</span>\n          </div>\n        } @else {\n          <div class=\"docx-viewer__content\" [innerHTML]=\"safeHtml\"></div>\n        }\n      </div>\n    </div>\n  `,\n  styles: [`\n    .docx-viewer {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface);\n    }\n\n    .docx-viewer__body {\n      flex: 1;\n      min-height: 0;\n      overflow: auto;\n    }\n\n    .docx-viewer__state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 12px;\n      height: 100%;\n      color: var(--mj-text-muted);\n      font-size: 14px;\n    }\n\n    .docx-viewer__state--error {\n      color: var(--mj-status-error-text);\n    }\n\n    .docx-viewer__content {\n      padding: 32px 48px;\n      max-width: 900px;\n      margin: 0 auto;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n      line-height: 1.7;\n    }\n\n    /* Normalize headings produced by mammoth */\n    .docx-viewer__content :is(h1, h2, h3, h4, h5, h6) {\n      color: var(--mj-text-primary);\n      margin-top: 1.5em;\n      margin-bottom: 0.5em;\n    }\n\n    .docx-viewer__content table {\n      border-collapse: collapse;\n      width: 100%;\n      margin: 1em 0;\n    }\n\n    .docx-viewer__content :is(td, th) {\n      border: 1px solid var(--mj-border-default);\n      padding: 6px 10px;\n    }\n\n    .docx-viewer__content th {\n      background: var(--mj-bg-surface-card);\n      font-weight: 600;\n    }\n\n    .docx-viewer__content a {\n      color: var(--mj-text-link);\n    }\n\n    .docx-viewer__content img {\n      max-width: 100%;\n      height: auto;\n    }\n  `]\n})\n@RegisterClass(BaseArtifactViewerPluginComponent, 'DocxArtifactViewerPlugin')\nexport class DocxArtifactViewerComponent extends BaseArtifactViewerPluginComponent implements OnInit {\n\n  public isLoading = true;\n  public isDownloading = false;\n  public errorMessage = '';\n  public safeHtml: SafeHtml = '';\n\n  /** Raw HTML produced by mammoth — kept for print. */\n  private rawHtml = '';\n  private downloadUrl = '';\n\n  constructor(\n    private fileService: ArtifactFileService,\n    private sanitizer: DomSanitizer,\n    private cdr: ChangeDetectorRef,\n  ) {\n    super();\n  }\n\n  public override get hasDisplayContent(): boolean { return true; }\n\n  async ngOnInit(): Promise<void> {\n    await this.loadDocument();\n  }\n\n  public async onDownload(): Promise<void> {\n    if (!this.downloadUrl || this.isDownloading) {\n      return;\n    }\n    this.isDownloading = true;\n    this.cdr.markForCheck();\n    try {\n      await this.triggerBrowserDownload(\n        this.downloadUrl,\n        this.artifactVersion?.FileName || 'document.docx',\n      );\n    } finally {\n      this.isDownloading = false;\n      this.cdr.markForCheck();\n    }\n  }\n\n  public onPrint(): void {\n    if (!this.rawHtml) {\n      return;\n    }\n    this.openPrintWindow(this.rawHtml);\n  }\n\n  // ─── Private helpers ────────────────────────────────────────────────────────\n\n  private async loadDocument(): Promise<void> {\n    if (!this.artifactVersion?.ID) {\n      this.showError('No artifact version provided.');\n      return;\n    }\n\n    try {\n      let arrayBuffer: ArrayBuffer;\n\n      if (this.artifactVersion.ContentMode === 'File') {\n        // File-backed: download from storage via pre-auth URL\n        this.downloadUrl = await this.fileService.getDownloadUrl(this.artifactVersion.ID);\n        arrayBuffer = await this.fetchAsArrayBuffer(this.downloadUrl);\n      } else {\n        // Inline: content is a base64 data URL stored in the artifact version\n        const content = this.artifactVersion.Content;\n        if (!content) {\n          this.showError('Artifact has no content.');\n          return;\n        }\n        arrayBuffer = this.fileService.dataUrlToArrayBuffer(content);\n        // Create an object URL for download support\n        this.downloadUrl = this.fileService.dataUrlToObjectUrl(\n          content,\n          this.artifactVersion.MimeType || 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'\n        );\n      }\n\n      const html = await this.convertDocxToHtml(arrayBuffer);\n      this.rawHtml = html;\n      const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, html) ?? '';\n      this.safeHtml = sanitized;\n      this.isLoading = false;\n      this.cdr.markForCheck();\n    } catch (err) {\n      this.showError(`Could not load document: ${err instanceof Error ? err.message : String(err)}`);\n    }\n  }\n\n  private async convertDocxToHtml(arrayBuffer: ArrayBuffer): Promise<string> {\n    const mammoth = await import('mammoth');\n    const result = await mammoth.convertToHtml({ arrayBuffer });\n    if (result.messages?.length) {\n      // Log warnings from mammoth (e.g. unsupported features) without breaking display\n      result.messages.forEach(m => console.warn('[DocxViewer] mammoth:', m.message));\n    }\n    return result.value;\n  }\n\n  private async fetchAsArrayBuffer(url: string): Promise<ArrayBuffer> {\n    const response = await fetch(url);\n    if (!response.ok) {\n      throw new Error(`HTTP ${response.status} fetching file`);\n    }\n    return response.arrayBuffer();\n  }\n\n  /** Open a minimal print window containing only the document HTML. */\n  private openPrintWindow(html: string): void {\n    const printWindow = window.open('', '_blank', 'width=900,height=700');\n    if (!printWindow) {\n      console.warn('[DocxViewer] Popup was blocked — cannot print');\n      return;\n    }\n    printWindow.document.write(`\n      <!DOCTYPE html>\n      <html>\n        <head>\n          <meta charset=\"utf-8\">\n          <title>${this.artifactVersion?.FileName ?? 'Document'}</title>\n          <style>\n            body { font-family: Georgia, serif; font-size: 13pt; line-height: 1.6; margin: 2cm; color: #000; }\n            table { border-collapse: collapse; width: 100%; }\n            td, th { border: 1px solid #999; padding: 4px 8px; }\n            th { background: #eee; font-weight: bold; }\n            img { max-width: 100%; }\n          </style>\n        </head>\n        <body>${html}</body>\n      </html>\n    `);\n    printWindow.document.close();\n    printWindow.focus();\n    printWindow.print();\n    printWindow.close();\n  }\n\n  private showError(message: string): void {\n    this.isLoading = false;\n    this.errorMessage = message;\n    this.cdr.markForCheck();\n  }\n\n}\n\n"]}

package/dist/lib/components/plugins/pdf-artifact-viewer.component.d.ts

@@ -0,0 +1,68 @@
+import { OnInit, OnDestroy, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { BaseArtifactViewerPluginComponent } from '../base-artifact-viewer.component';
+import { ArtifactFileService } from '../../services/artifact-file.service';
+import * as i0 from "@angular/core";
+/**
+ * Viewer plugin for PDF artifact versions stored in MJStorage (ContentMode = 'File')
+ * or as inline base64 content (ContentMode = 'Inline').
+ *
+ * Renders one page at a time using PDF.js. The toolbar provides page navigation
+ * (including a direct page-jump input), zoom in/out, download, and print.
+ *
+ * Aspect-ratio preservation: the canvas backing buffer is sized at full HiDPI
+ * resolution while the CSS size uses `aspect-ratio` + `height: auto` so both
+ * dimensions scale proportionally. Pages wider than the panel scroll horizontally
+ * inside the body — no max-width clamping, which is required for zoom to work.
+ */
+export declare class PdfArtifactViewerComponent extends BaseArtifactViewerPluginComponent implements OnInit, OnDestroy {
+    private fileService;
+    private cdr;
+    canvasRef?: ElementRef<HTMLCanvasElement>;
+    isLoading: boolean;
+    isDownloading: boolean;
+    errorMessage: string;
+    currentPage: number;
+    totalPages: number;
+    zoomLevel: number;
+    private pdfDoc;
+    private renderTask;
+    private downloadUrl;
+    private _pdfjsLib;
+    /** Discrete zoom steps — 50 % to 400 %. */
+    private readonly ZOOM_STEPS;
+    /** Base render scale (logical pixels per PDF point at zoom 1.0). */
+    private readonly BASE_SCALE;
+    constructor(fileService: ArtifactFileService, cdr: ChangeDetectorRef);
+    get hasDisplayContent(): boolean;
+    /** Current zoom as an integer percentage for toolbar display. */
+    get zoomPercent(): number;
+    get canZoomIn(): boolean;
+    get canZoomOut(): boolean;
+    ngOnInit(): Promise<void>;
+    ngOnDestroy(): void;
+    goToNextPage(): Promise<void>;
+    goToPrevPage(): Promise<void>;
+    onPageChange(page: number): Promise<void>;
+    onZoomIn(): Promise<void>;
+    onZoomOut(): Promise<void>;
+    onZoomReset(): Promise<void>;
+    onDownload(): Promise<void>;
+    onPrint(): void;
+    private loadPdf;
+    /**
+     * Set the initial zoom so the first page fills the available panel width.
+     * Uses the exact ratio rather than snapping to a ZOOM_STEP so the page fits
+     * pixel-perfectly. Subsequent +/- presses will snap to the nearest step.
+     */
+    private setFitWidthZoom;
+    /** Dynamically import pdfjs-dist and point it at the bundled worker. */
+    private initPdfJs;
+    private loadPdfDocument;
+    private loadPdfFromData;
+    private renderPage;
+    private cancelCurrentRender;
+    private showError;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PdfArtifactViewerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdfArtifactViewerComponent, "mj-pdf-artifact-viewer", never, {}, {}, never, never, false, never>;
+}
+//# sourceMappingURL=pdf-artifact-viewer.component.d.ts.map

package/dist/lib/components/plugins/pdf-artifact-viewer.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdf-artifact-viewer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/plugins/pdf-artifact-viewer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAa,UAAU,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvG,OAAO,EAAE,iCAAiC,EAAE,MAAM,mCAAmC,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;;AAE3E;;;;;;;;;;;GAWG;AACH,qBA8Fa,0BAA2B,SAAQ,iCAAkC,YAAW,MAAM,EAAE,SAAS;IAsB1G,OAAO,CAAC,WAAW;IACnB,OAAO,CAAC,GAAG;IArBW,SAAS,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAE3D,SAAS,UAAQ;IACjB,aAAa,UAAS;IACtB,YAAY,SAAM;IAClB,WAAW,SAAK;IAChB,UAAU,SAAK;IACf,SAAS,SAAO;IAEvB,OAAO,CAAC,MAAM,CAAiC;IAC/C,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,SAAS,CAAyB;IAE1C,2CAA2C;IAC3C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAoD;IAC/E,oEAAoE;IACpE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAO;gBAGxB,WAAW,EAAE,mBAAmB,EAChC,GAAG,EAAE,iBAAiB;IAKhC,IAAoB,iBAAiB,IAAI,OAAO,CAAiB;IAEjE,iEAAiE;IACjE,IAAW,WAAW,IAAI,MAAM,CAA6C;IAE7E,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,UAAU,IAAI,OAAO,CAE/B;IAEK,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAI/B,WAAW,IAAI,IAAI;IAQN,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IAI7B,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IAI7B,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAUzC,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAQzB,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC;IAU1B,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;IAS5B,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAcjC,OAAO,IAAI,IAAI;YAUR,OAAO;IA4CrB;;;;OAIG;YACW,eAAe;IAkB7B,wEAAwE;YAC1D,SAAS;YAQT,eAAe;YAMf,eAAe;YAMf,UAAU;IAwCxB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,SAAS;yCAjQN,0BAA0B;2CAA1B,0BAA0B;CAuQtC"}