@verdocs/web-sdk 1.9.6 → 1.9.10

package/dist/collection/components/elements/verdocs-view-envelope-document/verdocs-view-envelope-document.css

@@ -0,0 +1,16 @@
+verdocs-view-envelope-document {
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  display: flex;
+  padding: 15px;
+  row-gap: 15px;
+  min-height: 200px;
+  position: relative;
+  align-items: center;
+  box-sizing: border-box;
+  flex-direction: column;
+  width: 100%;
+}
+verdocs-view-envelope-document div,
+verdocs-view-envelope-document canvas {
+  box-sizing: border-box;
+}

package/dist/collection/components/elements/verdocs-view-envelope-document/verdocs-view-envelope-document.js

@@ -0,0 +1,390 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { getEnvelopeDocument } from '@verdocs/js-sdk/Envelopes/Envelopes';
+import { h, Host } from '@stencil/core';
+import { SDKError } from '../../../utils/errors';
+/**
+ * View a single document attached to an envelope. Note that envelopes always require authentication to access them. If you are viewing
+ * this component in Storybook, visit Embeds > Auth first to log in, then paste a valid envelopeId and documentId in the properties
+ * below from your account to view that envelope. If you want to see an anonymous-access use case, this component is functionally similar
+ * to ViewTemplateDocument, which is pre-configured to display a public template.
+ */
+export class VerdocsViewEnvelopeDocument {
+  constructor() {
+    this.domPages = {};
+    this.sourcePageMetrics = {};
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.envelopeId = '';
+    this.documentId = '';
+    this.rotation = 0;
+    this.pageLayers = [
+      { name: 'page', type: 'canvas' },
+      { name: 'controls', type: 'div' },
+    ];
+    this.envelopeDocument = null;
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+  }
+  // TODO: Handling signing vs preview-as-user cases
+  // TODO: Handle anonymous case and failure to load due to not being logged in
+  async componentDidLoad() {
+    var _a, _b, _c;
+    if (!this.envelopeId || !this.documentId) {
+      console.log(`[VIEW-ENVELOPE] Missing required envelope ID ${this.envelopeId}`);
+      return;
+    }
+    try {
+      console.log(`[VIEW-ENVELOPE] Loading envelope ${this.envelopeId}`);
+      this.envelopeDocument = await getEnvelopeDocument(this.endpoint, this.envelopeId, this.documentId);
+      if (!this.envelopeDocument) {
+        console.error('[VIEW-ENVELOPE] Unable to load envelope document', this.envelopeId, this.documentId);
+      }
+      console.log('[VIEW-ENVELOPE] Got envelope document', this.envelopeDocument);
+    }
+    catch (e) {
+      console.log('[VIEW-ENVELOPE] Error loading envelope', e);
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+    }
+  }
+  // Render one document page. Note that pageNumber is 1-based.
+  async renderPage(pageNumber) {
+    var _a, _b, _c;
+    const domPage = this.domPages[pageNumber];
+    // Two async operations happen here, loading the PDF and rendering the DOM div/canvas placeholders to draw the pages on.
+    if (!domPage) {
+      console.log('[VIEW-ENVELOPE] Skipping rendering page not yet in DOM', { pageNumber });
+      return;
+    }
+    const pageMetrics = this.sourcePageMetrics[pageNumber];
+    console.log('[VIEW-ENVELOPE] Rendering page', { pageNumber, pageMetrics, domPage });
+    try {
+      // const pdfPage = await this.pdfDocument.getPage(pageNumber);
+      // const viewport = pdfPage.getViewport({scale: domPage.xScale});
+      // console.log('[VIEW-TEMPLATE] Page viewport', domPage.xScale, viewport);
+      // const canvas = document.getElementById(`${domPage.containerId}-page`) as HTMLCanvasElement | null;
+      // if (!canvas) {
+      //   console.log('[VIEW-TEMPLATE] Unable to find canvas element');
+      //   return;
+      // }
+      //
+      // canvas.width = domPage.renderedWidth;
+      // canvas.height = domPage.renderedHeight;
+      // const canvasContext = canvas.getContext('2d');
+      // canvasContext.clearRect(0, 0, domPage.renderedWidth, domPage.renderedHeight);
+      // await pdfPage.render({canvasContext, viewport});
+      this.pageRendered.emit({
+        renderedPage: domPage,
+        sourcePageMetrics: pageMetrics,
+        pages: this.domPages,
+      });
+    }
+    catch (e) {
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+      console.warn('[VIEW-ENVELOPE] Error rendering page', e);
+    }
+  }
+  // async renderPages(): Promise<void> {
+  //   const pageNumbersToRender = integerSequence(1, this.numPages);
+  //   for await (let pageNumber of pageNumbersToRender) {
+  //     try {
+  //       await this.renderPage(pageNumber);
+  //     } catch (e) {
+  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //       console.warn('[VIEW-TEMPLATE] Error rendering pages', e);
+  //     }
+  //   }
+  // }
+  // onProgress(progress: OnProgressParameters) {
+  //   console.log(`[VIEW-TEMPLATE] Progress ${Math.floor((progress.loaded / progress.total) * 100)} (${progress.loaded} / ${progress.total})`);
+  //   this.loadProgress = Math.floor((100 * progress.loaded) / progress.total);
+  // }
+  // After a document is done loading, go through its pages to get their dimensions
+  // async parsePageMetrics(pdfDocument: pdfjsLib.PDFDocumentProxy) {
+  //   const pageNumbersToRender = integerSequence(1, pdfDocument.numPages);
+  //
+  //   for await (let pageNumber of pageNumbersToRender) {
+  //     const pdfPage = await pdfDocument.getPage(1);
+  //     const [pageX0, pageY0, pageX1, pageY1] = pdfPage.view;
+  //     this.sourcePageMetrics[pageNumber] = {width: pageX1 - pageX0, height: pageY1 - pageY0};
+  //   }
+  //
+  //   console.log('[VIEW-TEMPLATE] Parsed page metrics', this.sourcePageMetrics);
+  // }
+  // loadAndRender(src: string): void {
+  //   console.log('[VIEW-TEMPLATE] Loading', src);
+  //
+  //   const token = this.endpoint.getToken();
+  //   const httpHeaders = token ? {Authorization: `Bearer ${token}`} : {};
+  //
+  //   const source = {
+  //     url: src,
+  //     cMapUrl: CMAPS_URL,
+  //     cMapPacked: true,
+  //     httpHeaders,
+  //     withCredentials: true,
+  //     stopAtErrors: true,
+  //     verbosity: pdfjsLib.VerbosityLevel.WARNINGS,
+  //     // verbosity: pdfjsLib.VerbosityLevel.INFOS,
+  //   } as DocumentInitParameters;
+  //
+  //   // @ts-ignore
+  //   const loadingTask = pdf.getDocument(source, null, null, this.onProgress);
+  //   loadingTask.onProgress = this.onProgress;
+  //   loadingTask.promise
+  //     .then(async (pdfDocument: pdfjsLib.PDFDocumentProxy) => {
+  //       await this.parsePageMetrics(pdfDocument);
+  //
+  //       this.pdfDocument = pdfDocument;
+  //       this.numPages = pdfDocument.numPages;
+  //       this.fingerprints = pdfDocument.fingerprints;
+  //       console.log(`[VIEW-TEMPLATE] Got PDF document fingerprints "${this.fingerprints.join(', ')}", ${this.numPages} page(s)`);
+  //
+  //       // We don't try to render the pages here, setting loadProtress triggers that by adding the individual page entries in
+  //       // DOM in render() below. Each page then fires onPageRendered when it is ready to receive content.
+  //       this.loadProgress = 100;
+  //     })
+  //     .catch(e => {
+  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //       console.log('[VIEW-TEMPLATE] Loading error', e);
+  //     });
+  // }
+  async handlePageRendered(e) {
+    e.stopPropagation();
+    const domPage = e.detail;
+    this.domPages[domPage.pageNumber] = domPage;
+    await this.renderPage(domPage.pageNumber);
+  }
+  render() {
+    var _a, _b;
+    console.log('[VIEW-ENVELOPE] Rendering pages', (_a = this.envelopeDocument) === null || _a === void 0 ? void 0 : _a.pages);
+    // TODO: The API is supposed to always return these sorted...
+    const pages = [...(((_b = this.envelopeDocument) === null || _b === void 0 ? void 0 : _b.pages) || [])];
+    pages.sort((a, b) => a.sequence - b.sequence);
+    // TODO: Error handling for missing pages. Is it better to skip the page or show a placeholder?
+    return (h(Host, null, pages.map(page => (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792,
+      // TODO: Store image dimensions in the DB rows and pass them to clients with the page data
+      // virtualWidth={this.sourcePageMetrics[pageNumber]?.width || 612}
+      // virtualHeight={this.sourcePageMetrics[pageNumber]?.height || 792}
+      pageNumber: page.sequence, layers: this.pageLayers, onPageRendered: p => this.handlePageRendered(p) })))));
+  }
+  static get is() { return "verdocs-view-envelope-document"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-view-envelope-document.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-view-envelope-document.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "endpoint": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VerdocsEndpoint",
+          "resolved": "VerdocsEndpoint",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      },
+      "envelopeId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The envelope ID to render"
+        },
+        "attribute": "envelope-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "documentId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The document ID to render"
+        },
+        "attribute": "document-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "rotation": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "0 | 90 | 180 | 270",
+          "resolved": "0 | 180 | 270 | 90",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Rotate the PDF in degrees"
+        },
+        "attribute": "rotation",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "pageLayers": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IPageLayer[]",
+          "resolved": "IPageLayer[]",
+          "references": {
+            "IPageLayer": {
+              "location": "import",
+              "path": "../../../utils/Types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Layers will be passed through to the individual pages inside this component."
+        },
+        "defaultValue": "[\n    {name: 'page', type: 'canvas'},\n    {name: 'controls', type: 'div'},\n  ]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "envelopeDocument": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "pageRendered",
+        "name": "pageRendered",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a page has been rendered"
+        },
+        "complexType": {
+          "original": "IPageRenderEvent",
+          "resolved": "IPageRenderEvent",
+          "references": {
+            "IPageRenderEvent": {
+              "location": "local"
+            }
+          }
+        }
+      }, {
+        "method": "pageLoaded",
+        "name": "pageLoaded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a page has been changed"
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "pageChange",
+        "name": "pageChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a page has been changed"
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "pageInit",
+        "name": "pageInit",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a page has been initialized"
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "scaleChange",
+        "name": "scaleChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a page has been scaled"
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "sdkError",
+        "name": "sdkError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
+        },
+        "complexType": {
+          "original": "SDKError",
+          "resolved": "SDKError",
+          "references": {
+            "SDKError": {
+              "location": "import",
+              "path": "../../../utils/errors"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "component"; }
+}
+//# sourceMappingURL=verdocs-view-envelope-document.js.map

package/dist/collection/components/elements/verdocs-view-envelope-document/verdocs-view-envelope-document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"verdocs-view-envelope-document.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-view-envelope-document/verdocs-view-envelope-document.tsx"],"names":[],"mappings":"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","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {IEnvelopeDocument} from '@verdocs/js-sdk/Envelopes/Types';\nimport {getEnvelopeDocument} from '@verdocs/js-sdk/Envelopes/Envelopes';\nimport {Component, h, Element, Event, Host, Prop, EventEmitter, State} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {SDKError} from '../../../utils/errors';\n\nexport interface ISourcePageMetrics {\n  width: number;\n  height: number;\n}\n\nexport interface IPageRenderEvent {\n  renderedPage: IDocumentPageInfo;\n  sourcePageMetrics: ISourcePageMetrics;\n  pages: Record<number, IDocumentPageInfo>;\n}\n\n/**\n * View a single document attached to an envelope. Note that envelopes always require authentication to access them. If you are viewing\n * this component in Storybook, visit Embeds > Auth first to log in, then paste a valid envelopeId and documentId in the properties\n * below from your account to view that envelope. If you want to see an anonymous-access use case, this component is functionally similar\n * to ViewTemplateDocument, which is pre-configured to display a public template.\n */\n@Component({\n  tag: 'verdocs-view-envelope-document',\n  styleUrl: 'verdocs-view-envelope-document.scss',\n  shadow: false,\n})\nexport class VerdocsViewEnvelopeDocument {\n  @Element() component: HTMLElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The envelope ID to render\n   */\n  @Prop() envelopeId: string = '';\n\n  /**\n   * The document ID to render\n   */\n  @Prop() documentId: string = '';\n\n  /**\n   * Rotate the PDF in degrees\n   */\n  @Prop() rotation: 0 | 90 | 180 | 270 = 0;\n\n  /**\n   * Layers will be passed through to the individual pages inside this component.\n   */\n  @Prop() pageLayers: IPageLayer[] = [\n    {name: 'page', type: 'canvas'},\n    {name: 'controls', type: 'div'},\n  ];\n\n  /**\n   * Fired when a page has been rendered\n   */\n  @Event() pageRendered: EventEmitter<IPageRenderEvent>;\n\n  /**\n   * Fired when a page has been changed\n   */\n  @Event() pageLoaded: EventEmitter<number>;\n\n  /**\n   * Fired when a page has been changed\n   */\n  @Event() pageChange: EventEmitter<number>;\n\n  /**\n   * Fired when a page has been initialized\n   */\n  @Event() pageInit: EventEmitter<number>;\n\n  /**\n   * Fired when a page has been scaled\n   */\n  @Event() scaleChange: EventEmitter<number>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() envelopeDocument: IEnvelopeDocument | null = null;\n\n  domPages: Record<number, IDocumentPageInfo> = {};\n\n  sourcePageMetrics: Record<number, {width: number; height: number}> = {};\n\n  componentWillLoad() {\n    this.endpoint.loadSession();\n  }\n\n  // TODO: Handling signing vs preview-as-user cases\n  // TODO: Handle anonymous case and failure to load due to not being logged in\n  async componentDidLoad() {\n    if (!this.envelopeId || !this.documentId) {\n      console.log(`[VIEW-ENVELOPE] Missing required envelope ID ${this.envelopeId}`);\n      return;\n    }\n\n    try {\n      console.log(`[VIEW-ENVELOPE] Loading envelope ${this.envelopeId}`);\n      this.envelopeDocument = await getEnvelopeDocument(this.endpoint, this.envelopeId, this.documentId);\n      if (!this.envelopeDocument) {\n        console.error('[VIEW-ENVELOPE] Unable to load envelope document', this.envelopeId, this.documentId);\n      }\n\n      console.log('[VIEW-ENVELOPE] Got envelope document', this.envelopeDocument);\n    } catch (e) {\n      console.log('[VIEW-ENVELOPE] Error loading envelope', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  // Render one document page. Note that pageNumber is 1-based.\n  async renderPage(pageNumber: number): Promise<void> {\n    const domPage = this.domPages[pageNumber];\n\n    // Two async operations happen here, loading the PDF and rendering the DOM div/canvas placeholders to draw the pages on.\n    if (!domPage) {\n      console.log('[VIEW-ENVELOPE] Skipping rendering page not yet in DOM', {pageNumber});\n      return;\n    }\n\n    const pageMetrics = this.sourcePageMetrics[pageNumber];\n\n    console.log('[VIEW-ENVELOPE] Rendering page', {pageNumber, pageMetrics, domPage});\n    try {\n      // const pdfPage = await this.pdfDocument.getPage(pageNumber);\n      // const viewport = pdfPage.getViewport({scale: domPage.xScale});\n      // console.log('[VIEW-TEMPLATE] Page viewport', domPage.xScale, viewport);\n\n      // const canvas = document.getElementById(`${domPage.containerId}-page`) as HTMLCanvasElement | null;\n      // if (!canvas) {\n      //   console.log('[VIEW-TEMPLATE] Unable to find canvas element');\n      //   return;\n      // }\n      //\n      // canvas.width = domPage.renderedWidth;\n      // canvas.height = domPage.renderedHeight;\n      // const canvasContext = canvas.getContext('2d');\n      // canvasContext.clearRect(0, 0, domPage.renderedWidth, domPage.renderedHeight);\n      // await pdfPage.render({canvasContext, viewport});\n\n      this.pageRendered.emit({\n        renderedPage: domPage,\n        sourcePageMetrics: pageMetrics,\n        pages: this.domPages,\n      });\n    } catch (e) {\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      console.warn('[VIEW-ENVELOPE] Error rendering page', e);\n    }\n  }\n\n  // async renderPages(): Promise<void> {\n  //   const pageNumbersToRender = integerSequence(1, this.numPages);\n  //   for await (let pageNumber of pageNumbersToRender) {\n  //     try {\n  //       await this.renderPage(pageNumber);\n  //     } catch (e) {\n  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n  //       console.warn('[VIEW-TEMPLATE] Error rendering pages', e);\n  //     }\n  //   }\n  // }\n\n  // onProgress(progress: OnProgressParameters) {\n  //   console.log(`[VIEW-TEMPLATE] Progress ${Math.floor((progress.loaded / progress.total) * 100)} (${progress.loaded} / ${progress.total})`);\n  //   this.loadProgress = Math.floor((100 * progress.loaded) / progress.total);\n  // }\n\n  // After a document is done loading, go through its pages to get their dimensions\n  // async parsePageMetrics(pdfDocument: pdfjsLib.PDFDocumentProxy) {\n  //   const pageNumbersToRender = integerSequence(1, pdfDocument.numPages);\n  //\n  //   for await (let pageNumber of pageNumbersToRender) {\n  //     const pdfPage = await pdfDocument.getPage(1);\n  //     const [pageX0, pageY0, pageX1, pageY1] = pdfPage.view;\n  //     this.sourcePageMetrics[pageNumber] = {width: pageX1 - pageX0, height: pageY1 - pageY0};\n  //   }\n  //\n  //   console.log('[VIEW-TEMPLATE] Parsed page metrics', this.sourcePageMetrics);\n  // }\n\n  // loadAndRender(src: string): void {\n  //   console.log('[VIEW-TEMPLATE] Loading', src);\n  //\n  //   const token = this.endpoint.getToken();\n  //   const httpHeaders = token ? {Authorization: `Bearer ${token}`} : {};\n  //\n  //   const source = {\n  //     url: src,\n  //     cMapUrl: CMAPS_URL,\n  //     cMapPacked: true,\n  //     httpHeaders,\n  //     withCredentials: true,\n  //     stopAtErrors: true,\n  //     verbosity: pdfjsLib.VerbosityLevel.WARNINGS,\n  //     // verbosity: pdfjsLib.VerbosityLevel.INFOS,\n  //   } as DocumentInitParameters;\n  //\n  //   // @ts-ignore\n  //   const loadingTask = pdf.getDocument(source, null, null, this.onProgress);\n  //   loadingTask.onProgress = this.onProgress;\n  //   loadingTask.promise\n  //     .then(async (pdfDocument: pdfjsLib.PDFDocumentProxy) => {\n  //       await this.parsePageMetrics(pdfDocument);\n  //\n  //       this.pdfDocument = pdfDocument;\n  //       this.numPages = pdfDocument.numPages;\n  //       this.fingerprints = pdfDocument.fingerprints;\n  //       console.log(`[VIEW-TEMPLATE] Got PDF document fingerprints \"${this.fingerprints.join(', ')}\", ${this.numPages} page(s)`);\n  //\n  //       // We don't try to render the pages here, setting loadProtress triggers that by adding the individual page entries in\n  //       // DOM in render() below. Each page then fires onPageRendered when it is ready to receive content.\n  //       this.loadProgress = 100;\n  //     })\n  //     .catch(e => {\n  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n  //       console.log('[VIEW-TEMPLATE] Loading error', e);\n  //     });\n  // }\n\n  async handlePageRendered(e: any) {\n    e.stopPropagation();\n\n    const domPage = e.detail as IDocumentPageInfo;\n    this.domPages[domPage.pageNumber] = domPage;\n    await this.renderPage(domPage.pageNumber);\n  }\n\n  render() {\n    console.log('[VIEW-ENVELOPE] Rendering pages', this.envelopeDocument?.pages);\n\n    // TODO: The API is supposed to always return these sorted...\n    const pages = [...(this.envelopeDocument?.pages || [])];\n    pages.sort((a, b) => a.sequence - b.sequence);\n\n    // TODO: Error handling for missing pages. Is it better to skip the page or show a placeholder?\n    return (\n      <Host>\n        {pages.map(page => (\n          <verdocs-document-page\n            pageImageUri={page.display_uri}\n            virtualWidth={612}\n            virtualHeight={792}\n            // TODO: Store image dimensions in the DB rows and pass them to clients with the page data\n            // virtualWidth={this.sourcePageMetrics[pageNumber]?.width || 612}\n            // virtualHeight={this.sourcePageMetrics[pageNumber]?.height || 792}\n            pageNumber={page.sequence}\n            layers={this.pageLayers}\n            onPageRendered={p => this.handlePageRendered(p)}\n          />\n        ))}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/elements/verdocs-view-envelope-document/verdocs-view-envelope-document.stories.js

@@ -0,0 +1,15 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Elements/View Envelope Document',
+  component: 'verdocs-view-envelope-document',
+  args: {
+    envelopeId: '',
+    documentId: '',
+  },
+  argTypes: {},
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export const ViewEnvelopeDocument = ({ envelopeId, documentId }) => html `<verdocs-view-envelope-document .envelopeId=${envelopeId} .documentId=${documentId} />`;
+//# sourceMappingURL=verdocs-view-envelope-document.stories.js.map

package/dist/collection/components/elements/verdocs-view-envelope-document/verdocs-view-envelope-document.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"verdocs-view-envelope-document.stories.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-view-envelope-document/verdocs-view-envelope-document.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,iCAAiC;EACxC,SAAS,EAAE,gCAAgC;EAC3C,IAAI,EAAE;IACJ,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;GACf;EACD,QAAQ,EAAE,EAAE;EACZ,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;GACrB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAC,UAAU,EAAE,UAAU,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA,+CAA+C,UAAU,gBAAgB,UAAU,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Elements/View Envelope Document',\n  component: 'verdocs-view-envelope-document',\n  args: {\n    envelopeId: '',\n    documentId: '',\n  },\n  argTypes: {},\n  parameters: {\n    layout: 'fullscreen',\n  },\n} as Meta;\n\nexport const ViewEnvelopeDocument = ({envelopeId, documentId}) => html`<verdocs-view-envelope-document .envelopeId=${envelopeId} .documentId=${documentId} />`;\n"]}

package/dist/collection/components/elements/verdocs-view-template-document/verdocs-view-template-document.css

@@ -0,0 +1,16 @@
+verdocs-view-template-document {
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  display: flex;
+  padding: 15px;
+  row-gap: 15px;
+  min-height: 200px;
+  position: relative;
+  align-items: center;
+  box-sizing: border-box;
+  flex-direction: column;
+  width: 100%;
+}
+verdocs-view-template-document div,
+verdocs-view-template-document canvas {
+  box-sizing: border-box;
+}