@verdocs/web-sdk 1.9.25 → 1.9.30

package/dist/components/verdocs-view.js

@@ -1,262 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import './Types.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { a as getRoleIndex, r as renderDocumentField, s as savePDF } from './utils.js';
-import { g as getEnvelopeById, s as state } from './Envelopes.js';
-import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$3 } from './verdocs-document-page2.js';
-import { d as defineCustomElement$2 } from './verdocs-loader2.js';
-
-const verdocsViewCss = "verdocs-view{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-view div,verdocs-view canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-view .header{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.25s;transition:all 0.25s;-ms-flex-pack:center;justify-content:center;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-view .header .inner{width:100%;max-width:1028px}verdocs-view .toolbar{width:100%;margin:0 auto;padding:0 14px;position:relative}verdocs-view .tools{width:100%;color:#fff;height:56px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}verdocs-view .tools .logo{width:77.5px;margin:-6px 0 0 5px}verdocs-view .tools .title{padding-left:16px;font-size:18px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}verdocs-view .document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-view .document .inner{width:100%;max-width:1028px}";
-
-const PrintIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"></path></svg>`;
-const DownloadIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"></path></svg>`;
-const VerdocsView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.sdkError = createEvent(this, "sdkError", 7);
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.envelopeId = '';
-  }
-  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) {
-      console.error(`[VIEW] Missing reuqired envelopeId`);
-      return;
-    }
-    try {
-      await getEnvelopeById(this.endpoint, this.envelopeId);
-    }
-    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));
-    }
-  }
-  // Determine whether a page is "rotated" (in either direction)
-  // isRotated(rotation) {
-  //   return rotation !== 0 && rotation % 180 !== 0;
-  // }
-  // Render one document page. Note that pageNumber is 1-based.
-  // async renderPage(pageNumber: number): Promise<void> {
-  //   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] Skipping rendering page not yet in DOM', {pageNumber});
-  //     return;
-  //   }
-  //
-  //   const pageMetrics = this.sourcePageMetrics[pageNumber];
-  //
-  //   console.log('[VIEW] Rendering page', {pageNumber, pageMetrics, domPage});
-  //   try {
-  //     // const pdfPage = await this.pdfDocument.getPage(pageNumber);
-  //     // const viewport = pdfPage.getViewport({scale: domPage.xScale});
-  //     // console.log('[VIEW] Page viewport', domPage.xScale, viewport);
-  //
-  //     // const canvas = document.getElementById(`${domPage.containerId}-page`) as HTMLCanvasElement | null;
-  //     // if (!canvas) {
-  //     //   console.log('[VIEW] 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) {
-  //     this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
-  //     console.warn('[VIEW] 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] Error rendering pages', e);
-  //     }
-  //   }
-  // }
-  // onProgress(progress: OnProgressParameters) {
-  //   console.log(`[VIEW] 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] Parsed page metrics', this.sourcePageMetrics);
-  // }
-  // loadAndRender(src: string): void {
-  //   console.log('[VIEW] 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] 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] Loading error', e);
-  //     });
-  // }
-  // async handlePageRendered(e: any) {
-  //   e.stopPropagation();
-  //
-  //   const domPage = e.detail as IDocumentPageInfo;
-  //   this.domPages[domPage.pageNumber] = domPage;
-  //   await this.renderPage(domPage.pageNumber);
-  // }
-  attachFieldAttributes(pageInfo, roleIndex, el) {
-    el.setAttribute('roleindex', roleIndex);
-    el.setAttribute('xScale', pageInfo.xScale);
-    el.setAttribute('yScale', pageInfo.yScale);
-  }
-  handlePageRendered(e) {
-    const pageInfo = e.detail;
-    console.log('[SIGN] Page rendered', pageInfo);
-    state.envelope.recipients.map(recipient => {
-      const fields = recipient.fields.filter(field => field.page === pageInfo.pageNumber);
-      // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
-      console.log('[SIGN] Fields on page', fields);
-      fields.forEach(field => {
-        const roleIndex = getRoleIndex(state.roleNames, field.recipient_role);
-        const el = renderDocumentField(field, pageInfo, roleIndex, {
-          disabled: true,
-          editable: false,
-          draggable: false,
-          done: true,
-        });
-        if (!el) {
-          return;
-        }
-        if (Array.isArray(el)) {
-          el.map(e => this.attachFieldAttributes(pageInfo, roleIndex, e));
-        }
-        else {
-          this.attachFieldAttributes(pageInfo, roleIndex, el);
-        }
-        // interact(el).draggable({
-        //   listeners: {
-        //     start(event) {
-        //       console.log('[FIELDS] Drag started', event.type, event.target);
-        //     },
-        //     move(event) {
-        //       const oldX = +(event.target.getAttribute('posX') || 0);
-        //       const oldY = +(event.target.getAttribute('posY') || 0);
-        //       const xScale = +(event.target.getAttribute('xScale') || 1);
-        //       const yScale = +(event.target.getAttribute('yScale') || 1);
-        //       const newX = event.dx / xScale + oldX;
-        //       const newY = event.dy / yScale + oldY;
-        //       event.target.setAttribute('posX', newX);
-        //       event.target.setAttribute('posy', newY);
-        //       updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
-        //     },
-        //     end(event) {
-        //       console.log('[FIELDS] Drag ended', event);
-        //       // event.target.setAttribute('posX', 0);
-        //       // event.target.setAttribute('posy', 0);
-        //       // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);
-        //     },
-        //   },
-        // });
-      });
-    });
-  }
-  render() {
-    var _a;
-    console.log('[VIEW] Rendering', state.error, state.loading, state.envelope);
-    if (state.loading || !state.envelope) {
-      return (h(Host, null, h("verdocs-loader", null)));
-    }
-    if (state.error) {
-      return (h(Host, null, h("div", null, state.error)));
-    }
-    return (h(Host, null, h("div", { class: "header" }, h("div", { class: "inner" }, h("div", { class: "toolbar" }, h("div", { class: "tools" }, h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, state.envelope.name), h("div", { style: { flex: '1' } }), h("div", { innerHTML: PrintIcon, style: { width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer' }, onClick: () => window.print() }), h("div", { innerHTML: DownloadIcon, style: { width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer', marginLeft: '16px', maginRight: '30px' }, onClick: () => savePDF(this.endpoint, state.envelope, state.envelope.envelope_document_id).catch(() => { }) })))))), h("div", { class: "document" }, (((_a = state.envelope) === null || _a === void 0 ? void 0 : _a.documents) || []).map(envelopeDocument => {
-      const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
-      pages.sort((a, b) => a.sequence - b.sequence);
-      return (h(Fragment, null, pages.map(page => (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
-          { name: 'page', type: 'canvas' },
-          { name: 'controls', type: 'div' },
-        ] })))));
-    }))));
-  }
-  get component() { return this; }
-  static get style() { return verdocsViewCss; }
-}, [0, "verdocs-view", {
-    "endpoint": [16],
-    "envelopeId": [1, "envelope-id"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-view", "verdocs-document-page", "verdocs-loader"];
-  components.forEach(tagName => { switch (tagName) {
-    case "verdocs-view":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsView$1);
-      }
-      break;
-    case "verdocs-document-page":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "verdocs-loader":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { V as VerdocsView$1, d as defineCustomElement$1 } from './verdocs-view2.js';
 
 const VerdocsView = VerdocsView$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-view.js.map

@@ -1 +1 @@
-{"file":"verdocs-view.js","mappings":"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","names":["VerdocsView","EnvelopeStore"],"sources":["./src/components/embeds/verdocs-view/verdocs-view.scss?tag=verdocs-view","./src/components/embeds/verdocs-view/verdocs-view.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-view {\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  min-height: 600px;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: $verdocs-primary-font;\n\n  div,\n  canvas {\n    box-sizing: border-box;\n  }\n\n  .header {\n    flex: 0;\n    display: flex;\n    z-index: 1000;\n    align-items: center;\n    transition: all 0.25s;\n    justify-content: center;\n    background-color: $medium-bg;\n    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 24%), 0 0 4px 0 rgb(0 0 0 / 12%);\n\n    .inner {\n      width: 100%;\n      max-width: 1028px;\n    }\n  }\n\n  .toolbar {\n    width: 100%;\n    margin: 0 auto;\n    padding: 0 14px;\n    position: relative;\n  }\n\n  .tools {\n    width: 100%;\n    color: #fff;\n    height: 56px;\n    display: flex;\n    font-size: 12px;\n    align-items: center;\n    flex-direction: row;\n    background-color: $medium-bg;\n\n    .logo {\n      width: 77.5px;\n      margin: -6px 0 0 5px;\n    }\n\n    .title {\n      padding-left: 16px;\n      font-size: 18px;\n      font-weight: 500;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .document {\n    flex: 1;\n    height: 100%;\n    display: flex;\n    padding: 15px;\n    row-gap: 15px;\n    min-height: 200px;\n    position: relative;\n    overflow-y: scroll;\n    align-items: center;\n    box-sizing: border-box;\n    flex-direction: column;\n    justify-content: center;\n\n    .inner {\n      width: 100%;\n      max-width: 1028px;\n    }\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Element, Event, Host, Prop, EventEmitter, Fragment} from '@stencil/core';\nimport {getRoleIndex, renderDocumentField, savePDF} from '../../../utils/utils';\nimport {getEnvelopeById} from '../../../utils/Envelopes';\nimport EnvelopeStore from '../../../utils/envelopeStore';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport {SDKError} from '../../../utils/errors';\n\nconst PrintIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z\"></path></svg>`;\n\nconst DownloadIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z\"></path></svg>`;\n\n/**\n * Render the documents attached to an envelope in read-only (view) mode. All documents are displayed in order.\n */\n@Component({\n  tag: 'verdocs-view',\n  styleUrl: 'verdocs-view.scss',\n  shadow: false,\n})\nexport class VerdocsView {\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. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored.\n   */\n  @Prop() envelopeId: string = '';\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  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) {\n      console.error(`[VIEW] Missing reuqired envelopeId`);\n      return;\n    }\n\n    try {\n      await getEnvelopeById(this.endpoint, this.envelopeId);\n    } catch (e) {\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  // Determine whether a page is \"rotated\" (in either direction)\n  // isRotated(rotation) {\n  //   return rotation !== 0 && rotation % 180 !== 0;\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] Skipping rendering page not yet in DOM', {pageNumber});\n  //     return;\n  //   }\n  //\n  //   const pageMetrics = this.sourcePageMetrics[pageNumber];\n  //\n  //   console.log('[VIEW] 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] Page viewport', domPage.xScale, viewport);\n  //\n  //     // const canvas = document.getElementById(`${domPage.containerId}-page`) as HTMLCanvasElement | null;\n  //     // if (!canvas) {\n  //     //   console.log('[VIEW] 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] 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] Error rendering pages', e);\n  //     }\n  //   }\n  // }\n\n  // onProgress(progress: OnProgressParameters) {\n  //   console.log(`[VIEW] 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] Parsed page metrics', this.sourcePageMetrics);\n  // }\n\n  // loadAndRender(src: string): void {\n  //   console.log('[VIEW] 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] 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] 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  attachFieldAttributes(pageInfo, roleIndex, el) {\n    el.setAttribute('roleindex', roleIndex);\n    el.setAttribute('xScale', pageInfo.xScale);\n    el.setAttribute('yScale', pageInfo.yScale);\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IDocumentPageInfo;\n    console.log('[SIGN] Page rendered', pageInfo);\n\n    EnvelopeStore.envelope.recipients.map(recipient => {\n      const fields = recipient.fields.filter(field => field.page === pageInfo.pageNumber);\n      // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n      console.log('[SIGN] Fields on page', fields);\n      fields.forEach(field => {\n        const roleIndex = getRoleIndex(EnvelopeStore.roleNames, field.recipient_role);\n        const el = renderDocumentField(field, pageInfo, roleIndex, {\n          disabled: true,\n          editable: false,\n          draggable: false,\n          done: true,\n        });\n        if (!el) {\n          return;\n        }\n\n        if (Array.isArray(el)) {\n          el.map(e => this.attachFieldAttributes(pageInfo, roleIndex, e));\n        } else {\n          this.attachFieldAttributes(pageInfo, roleIndex, el);\n        }\n\n        // interact(el).draggable({\n        //   listeners: {\n        //     start(event) {\n        //       console.log('[FIELDS] Drag started', event.type, event.target);\n        //     },\n        //     move(event) {\n        //       const oldX = +(event.target.getAttribute('posX') || 0);\n        //       const oldY = +(event.target.getAttribute('posY') || 0);\n        //       const xScale = +(event.target.getAttribute('xScale') || 1);\n        //       const yScale = +(event.target.getAttribute('yScale') || 1);\n        //       const newX = event.dx / xScale + oldX;\n        //       const newY = event.dy / yScale + oldY;\n        //       event.target.setAttribute('posX', newX);\n        //       event.target.setAttribute('posy', newY);\n        //       updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);\n        //     },\n        //     end(event) {\n        //       console.log('[FIELDS] Drag ended', event);\n        //       // event.target.setAttribute('posX', 0);\n        //       // event.target.setAttribute('posy', 0);\n        //       // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);\n        //     },\n        //   },\n        // });\n      });\n    });\n  }\n\n  render() {\n    console.log('[VIEW] Rendering', EnvelopeStore.error, EnvelopeStore.loading, EnvelopeStore.envelope);\n    if (EnvelopeStore.loading || !EnvelopeStore.envelope) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (EnvelopeStore.error) {\n      return (\n        <Host>\n          <div>{EnvelopeStore.error}</div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class=\"header\">\n          <div class=\"inner\">\n            <div class=\"toolbar\">\n              <div class=\"tools\">\n                <Fragment>\n                  <img src=\"https://verdocs.com/assets/white-logo.svg\" alt=\"Verdocs Logo\" class=\"logo\" />\n                  <div class=\"title\">{EnvelopeStore.envelope.name}</div>\n                  <div style={{flex: '1'}} />\n                  <div innerHTML={PrintIcon} style={{width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer'}} onClick={() => window.print()} />\n                  <div\n                    innerHTML={DownloadIcon}\n                    style={{width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer', marginLeft: '16px', maginRight: '30px'}}\n                    onClick={() => savePDF(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.envelope.envelope_document_id).catch(() => {})}\n                  />\n                </Fragment>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"document\">\n          {(EnvelopeStore.envelope?.documents || []).map(envelopeDocument => {\n            const pages = [...(envelopeDocument?.pages || [])];\n            pages.sort((a, b) => a.sequence - b.sequence);\n\n            return (\n              <Fragment>\n                {pages.map(page => (\n                  <verdocs-document-page\n                    pageImageUri={page.display_uri}\n                    virtualWidth={612}\n                    virtualHeight={792}\n                    pageNumber={page.sequence}\n                    onPageRendered={e => this.handlePageRendered(e)}\n                    layers={[\n                      {name: 'page', type: 'canvas'},\n                      {name: 'controls', type: 'div'},\n                    ]}\n                  />\n                ))}\n              </Fragment>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-view.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/verdocs-view2.js

@@ -0,0 +1,160 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import './Types.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { j as getEnvelope, s as savePDF } from './utils.js';
+import { c as createStore } from './index3.js';
+import { g as getTemplate } from './Templates2.js';
+import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$2 } from './verdocs-document-page2.js';
+import { d as defineCustomElement$1 } from './verdocs-loader2.js';
+
+// NOTE: Do not attempt to convert this to a named-export module. It triggers compilation issues in Rollup that I spent days trying to
+const { state, onChange } = createStore({
+  envelope: null,
+  template: null,
+  loadProgress: 0,
+  loading: true,
+  error: '',
+  roleNames: [],
+  dirty: false,
+});
+onChange('envelope', async (newEnvelope) => {
+  if (!newEnvelope) {
+    console.log('[ENVELOPESTORE] Clearing envelope');
+    state.roleNames = [];
+    state.dirty = false;
+    state.loading = false;
+    state.error = '';
+    state.loadProgress = 0;
+    return;
+  }
+  console.log('[ENVELOPESTORE] Loaded envelope', newEnvelope);
+  state.roleNames = newEnvelope.recipients.map(recipient => recipient.role_name);
+  console.log('[ENVELOPESTORE] Loaded roles', state.roleNames);
+});
+
+// Allows envelope data to be cached for reuse between components, without parent components having to prop-drill entire envelopes into
+// child elements.
+const getEnvelopeById = async (endpoint, envelopeId) => {
+  var _a, _b;
+  if (!envelopeId) {
+    console.log(`[ENVELOPES] Missing required envelope ID`);
+    return;
+  }
+  if (((_a = state.envelope) === null || _a === void 0 ? void 0 : _a.id) === envelopeId) {
+    console.log(`[ENVELOPES] Skipping load for already-loaded envelope ID`);
+    return;
+  }
+  state.error = '';
+  state.loading = true;
+  state.envelope = null;
+  try {
+    console.log(`[ENVELOPES] Loading envelope ${envelopeId}`);
+    const envelope = await getEnvelope(endpoint, envelopeId, true);
+    if (!envelope) {
+      console.log('[ENVELOPES] Unable to load envelope');
+      return;
+    }
+    state.envelope = envelope;
+    const template = await getTemplate(endpoint, envelope.template_id, true);
+    if (!envelope) {
+      console.log('[ENVELOPES] Unable to load template');
+      return;
+    }
+    state.template = template;
+    state.loading = false;
+  }
+  catch (e) {
+    state.loading = false;
+    state.error = ((_b = e === null || e === void 0 ? void 0 : e.response) === null || _b === void 0 ? void 0 : _b.status) === 401 ? 'Authentication required' : e.message;
+    console.log('[ENVELOPES] Error loading envelope', e);
+    throw e;
+  }
+};
+
+const verdocsViewCss = "verdocs-view{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-view div,verdocs-view canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-view .header{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.25s;transition:all 0.25s;-ms-flex-pack:center;justify-content:center;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-view .header .inner{width:100%;max-width:1028px}verdocs-view .toolbar{width:100%;margin:0 auto;padding:0 14px;position:relative}verdocs-view .tools{width:100%;color:#fff;height:56px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}verdocs-view .tools .logo{width:77.5px;margin:-6px 0 0 5px}verdocs-view .tools .title{padding-left:16px;font-size:18px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}verdocs-view .document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-view .document .inner{width:100%;max-width:1028px}";
+
+const PrintIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"></path></svg>`;
+const DownloadIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"></path></svg>`;
+const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.envelopeId = '';
+  }
+  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) {
+      console.error(`[VIEW] Missing required envelopeId`);
+      return;
+    }
+    try {
+      await getEnvelopeById(this.endpoint, this.envelopeId);
+    }
+    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));
+    }
+  }
+  handlePageRendered(e) {
+    const pageInfo = e.detail;
+    console.log('[SIGN] Page rendered', pageInfo);
+  }
+  render() {
+    var _a;
+    console.log('[VIEW] Rendering', state.error, state.loading, state.envelope);
+    if (state.loading || !state.envelope) {
+      return (h(Host, null, h("verdocs-loader", null)));
+    }
+    if (state.error) {
+      return (h(Host, null, h("div", null, state.error)));
+    }
+    return (h(Host, null, h("div", { class: "header" }, h("div", { class: "inner" }, h("div", { class: "toolbar" }, h("div", { class: "tools" }, h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, state.envelope.name), h("div", { style: { flex: '1' } }), h("div", { innerHTML: PrintIcon, style: { width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer' }, onClick: () => window.print() }), h("div", { innerHTML: DownloadIcon, style: { width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer', marginLeft: '16px', maginRight: '30px' }, onClick: () => savePDF(this.endpoint, state.envelope, state.envelope.envelope_document_id).catch(() => { }) })))))), h("div", { class: "document" }, (((_a = state.envelope) === null || _a === void 0 ? void 0 : _a.documents) || []).map(envelopeDocument => {
+      const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
+      pages.sort((a, b) => a.sequence - b.sequence);
+      return (h(Fragment, null, pages.map(page => (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
+          { name: 'page', type: 'canvas' },
+          { name: 'controls', type: 'div' },
+        ] })))));
+    }))));
+  }
+  get component() { return this; }
+  static get style() { return verdocsViewCss; }
+}, [0, "verdocs-view", {
+    "endpoint": [16],
+    "envelopeId": [1, "envelope-id"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-view", "verdocs-document-page", "verdocs-loader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-view":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsView);
+      }
+      break;
+    case "verdocs-document-page":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsView as V, defineCustomElement as d, getEnvelopeById as g, state as s };
+
+//# sourceMappingURL=verdocs-view2.js.map

package/dist/components/verdocs-view2.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-view2.js","mappings":"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","names":["EnvelopeStore"],"sources":["./src/utils/envelopeStore.ts","./src/utils/Envelopes.ts","./src/components/embeds/verdocs-view/verdocs-view.scss?tag=verdocs-view","./src/components/embeds/verdocs-view/verdocs-view.tsx"],"sourcesContent":["// NOTE: Do not attempt to convert this to a named-export module. It triggers compilation issues in Rollup that I spent days trying to\n// resolve. This needs to export a single default value of the store's state. Any helper functions should go in Templates.ts here.\n\nimport {createStore} from '@stencil/store';\nimport {IEnvelope} from '@verdocs/js-sdk/Envelopes/Types';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\n\nconst {state, onChange} = createStore({\n  envelope: null as IEnvelope | null,\n  template: null as ITemplate | null,\n  loadProgress: 0,\n  loading: true,\n  error: '',\n\n  roleNames: [] as string[],\n  dirty: false,\n});\n\nonChange('envelope', async newEnvelope => {\n  if (!newEnvelope) {\n    console.log('[ENVELOPESTORE] Clearing envelope');\n    state.roleNames = [];\n    state.dirty = false;\n    state.loading = false;\n    state.error = '';\n    state.loadProgress = 0;\n    return;\n  }\n\n  console.log('[ENVELOPESTORE] Loaded envelope', newEnvelope);\n\n  state.roleNames = newEnvelope.recipients.map(recipient => recipient.role_name);\n  newEnvelope.recipients;\n  console.log('[ENVELOPESTORE] Loaded roles', state.roleNames);\n});\n\nexport default state;\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getEnvelope} from '@verdocs/js-sdk/Envelopes/Envelopes';\nimport EnvelopeStore from './envelopeStore';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\n\n// Allows envelope data to be cached for reuse between components, without parent components having to prop-drill entire envelopes into\n// child elements.\nexport const getEnvelopeById = async (endpoint: VerdocsEndpoint, envelopeId: string) => {\n  if (!envelopeId) {\n    console.log(`[ENVELOPES] Missing required envelope ID`);\n    return;\n  }\n\n  if (EnvelopeStore.envelope?.id === envelopeId) {\n    console.log(`[ENVELOPES] Skipping load for already-loaded envelope ID`);\n    return;\n  }\n\n  EnvelopeStore.error = '';\n  EnvelopeStore.loading = true;\n  EnvelopeStore.envelope = null;\n\n  try {\n    console.log(`[ENVELOPES] Loading envelope ${envelopeId}`);\n    const envelope = await getEnvelope(endpoint, envelopeId, true);\n    if (!envelope) {\n      console.log('[ENVELOPES] Unable to load envelope');\n      return;\n    }\n\n    EnvelopeStore.envelope = envelope;\n\n    const template = await getTemplate(endpoint, envelope.template_id, true);\n    if (!envelope) {\n      console.log('[ENVELOPES] Unable to load template');\n      return;\n    }\n\n    EnvelopeStore.template = template;\n    EnvelopeStore.loading = false;\n  } catch (e) {\n    EnvelopeStore.loading = false;\n    EnvelopeStore.error = e?.response?.status === 401 ? 'Authentication required' : e.message;\n    console.log('[ENVELOPES] Error loading envelope', e);\n    throw e;\n  }\n};\n","@import '../../../theme.scss';\n\nverdocs-view {\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  min-height: 600px;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: $verdocs-primary-font;\n\n  div,\n  canvas {\n    box-sizing: border-box;\n  }\n\n  .header {\n    flex: 0;\n    display: flex;\n    z-index: 1000;\n    align-items: center;\n    transition: all 0.25s;\n    justify-content: center;\n    background-color: $medium-bg;\n    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 24%), 0 0 4px 0 rgb(0 0 0 / 12%);\n\n    .inner {\n      width: 100%;\n      max-width: 1028px;\n    }\n  }\n\n  .toolbar {\n    width: 100%;\n    margin: 0 auto;\n    padding: 0 14px;\n    position: relative;\n  }\n\n  .tools {\n    width: 100%;\n    color: #fff;\n    height: 56px;\n    display: flex;\n    font-size: 12px;\n    align-items: center;\n    flex-direction: row;\n    background-color: $medium-bg;\n\n    .logo {\n      width: 77.5px;\n      margin: -6px 0 0 5px;\n    }\n\n    .title {\n      padding-left: 16px;\n      font-size: 18px;\n      font-weight: 500;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .document {\n    flex: 1;\n    height: 100%;\n    display: flex;\n    padding: 15px;\n    row-gap: 15px;\n    min-height: 200px;\n    position: relative;\n    overflow-y: scroll;\n    align-items: center;\n    box-sizing: border-box;\n    flex-direction: column;\n    justify-content: center;\n\n    .inner {\n      width: 100%;\n      max-width: 1028px;\n    }\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Element, Event, Host, Prop, EventEmitter, Fragment} from '@stencil/core';\nimport {getEnvelopeById} from '../../../utils/Envelopes';\nimport EnvelopeStore from '../../../utils/envelopeStore';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport {SDKError} from '../../../utils/errors';\nimport {savePDF} from '../../../utils/utils';\n\nconst PrintIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z\"></path></svg>`;\n\nconst DownloadIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z\"></path></svg>`;\n\n/**\n * Render the documents attached to an envelope in read-only (view) mode. All documents are displayed in order.\n */\n@Component({\n  tag: 'verdocs-view',\n  styleUrl: 'verdocs-view.scss',\n  shadow: false,\n})\nexport class VerdocsView {\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. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored.\n   */\n  @Prop() envelopeId: string = '';\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  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) {\n      console.error(`[VIEW] Missing required envelopeId`);\n      return;\n    }\n\n    try {\n      await getEnvelopeById(this.endpoint, this.envelopeId);\n    } catch (e) {\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IDocumentPageInfo;\n    console.log('[SIGN] Page rendered', pageInfo);\n  }\n\n  render() {\n    console.log('[VIEW] Rendering', EnvelopeStore.error, EnvelopeStore.loading, EnvelopeStore.envelope);\n    if (EnvelopeStore.loading || !EnvelopeStore.envelope) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (EnvelopeStore.error) {\n      return (\n        <Host>\n          <div>{EnvelopeStore.error}</div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class=\"header\">\n          <div class=\"inner\">\n            <div class=\"toolbar\">\n              <div class=\"tools\">\n                <Fragment>\n                  <img src=\"https://verdocs.com/assets/white-logo.svg\" alt=\"Verdocs Logo\" class=\"logo\" />\n                  <div class=\"title\">{EnvelopeStore.envelope.name}</div>\n                  <div style={{flex: '1'}} />\n                  <div innerHTML={PrintIcon} style={{width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer'}} onClick={() => window.print()} />\n                  <div\n                    innerHTML={DownloadIcon}\n                    style={{width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer', marginLeft: '16px', maginRight: '30px'}}\n                    onClick={() => savePDF(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.envelope.envelope_document_id).catch(() => {})}\n                  />\n                </Fragment>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"document\">\n          {(EnvelopeStore.envelope?.documents || []).map(envelopeDocument => {\n            const pages = [...(envelopeDocument?.pages || [])];\n            pages.sort((a, b) => a.sequence - b.sequence);\n\n            return (\n              <Fragment>\n                {pages.map(page => (\n                  <verdocs-document-page\n                    pageImageUri={page.display_uri}\n                    virtualWidth={612}\n                    virtualHeight={792}\n                    pageNumber={page.sequence}\n                    onPageRendered={e => this.handlePageRendered(e)}\n                    layers={[\n                      {name: 'page', type: 'canvas'},\n                      {name: 'controls', type: 'div'},\n                    ]}\n                  />\n                ))}\n              </Fragment>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-01-19T01:49:38",
+  "timestamp": "2023-01-19T13:44:44",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -807,7 +807,7 @@
         {
           "name": "virtualHeight",
           "type": "number",
-          "mutable": false,
+          "mutable": true,
           "attr": "virtual-height",
           "reflectToAttr": false,
           "docs": "The \"virtual\" height of the page canvas.  Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\nthe aspect ratio of the final rendered element when scaling up/down.",
@@ -3939,6 +3939,7 @@
         "verdocs-dropdown",
         "verdocs-checkbox",
         "verdocs-button",
+        "verdocs-view",
         "verdocs-document-page",
         "verdocs-ok-dialog"
       ],
@@ -3948,9 +3949,14 @@
           "verdocs-dropdown",
           "verdocs-checkbox",
           "verdocs-button",
+          "verdocs-view",
           "verdocs-document-page",
           "verdocs-ok-dialog"
         ],
+        "verdocs-view": [
+          "verdocs-loader",
+          "verdocs-document-page"
+        ],
         "verdocs-ok-dialog": [
           "verdocs-button"
         ]
@@ -5215,7 +5221,9 @@
       "styles": [],
       "slots": [],
       "parts": [],
-      "dependents": [],
+      "dependents": [
+        "verdocs-sign"
+      ],
       "dependencies": [
         "verdocs-loader",
         "verdocs-document-page"
@@ -5224,6 +5232,9 @@
         "verdocs-view": [
           "verdocs-loader",
           "verdocs-document-page"
+        ],
+        "verdocs-sign": [
+          "verdocs-view"
         ]
       }
     }

package/dist/esm/{Envelopes-bd915f3e.js → Envelopes-b87b1909.js}

@@ -1,9 +1,11 @@
-import { h as getEnvelope } from './utils-c666adcf.js';
+import { j as getEnvelope } from './utils-5cddd371.js';
 import { c as createStore } from './index-fd7b8a34.js';
+import { g as getTemplate } from './Templates-0638b1e4.js';
 
 // NOTE: Do not attempt to convert this to a named-export module. It triggers compilation issues in Rollup that I spent days trying to
 const { state, onChange } = createStore({
   envelope: null,
+  template: null,
   loadProgress: 0,
   loading: true,
   error: '',
@@ -29,16 +31,17 @@ onChange('envelope', async (newEnvelope) => {
 // child elements.
 const getEnvelopeById = async (endpoint, envelopeId) => {
   var _a, _b;
-  state.envelope = null;
   if (!envelopeId) {
     console.log(`[ENVELOPES] Missing required envelope ID`);
     return;
   }
   if (((_a = state.envelope) === null || _a === void 0 ? void 0 : _a.id) === envelopeId) {
+    console.log(`[ENVELOPES] Skipping load for already-loaded envelope ID`);
     return;
   }
   state.error = '';
   state.loading = true;
+  state.envelope = null;
   try {
     console.log(`[ENVELOPES] Loading envelope ${envelopeId}`);
     const envelope = await getEnvelope(endpoint, envelopeId, true);
@@ -47,6 +50,12 @@ const getEnvelopeById = async (endpoint, envelopeId) => {
       return;
     }
     state.envelope = envelope;
+    const template = await getTemplate(endpoint, envelope.template_id, true);
+    if (!envelope) {
+      console.log('[ENVELOPES] Unable to load template');
+      return;
+    }
+    state.template = template;
     state.loading = false;
   }
   catch (e) {
@@ -59,4 +68,4 @@ const getEnvelopeById = async (endpoint, envelopeId) => {
 
 export { getEnvelopeById as g, state as s };
 
-//# sourceMappingURL=Envelopes-bd915f3e.js.map
+//# sourceMappingURL=Envelopes-b87b1909.js.map

package/dist/esm/Envelopes-b87b1909.js.map

@@ -0,0 +1 @@
+{"file":"Envelopes-b87b1909.js","mappings":";;;;AAAA;MAOM,EAAC,KAAK,EAAE,QAAQ,EAAC,GAAG,WAAW,CAAC;EACpC,QAAQ,EAAE,IAAwB;EAClC,QAAQ,EAAE,IAAwB;EAClC,YAAY,EAAE,CAAC;EACf,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,EAAE;EAET,SAAS,EAAE,EAAc;EACzB,KAAK,EAAE,KAAK;CACb,EAAE;AAEH,QAAQ,CAAC,UAAU,EAAE,OAAM,WAAW;EACpC,IAAI,CAAC,WAAW,EAAE;IAChB,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC,CAAC;IACjD,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;IACrB,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;IACpB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;IACjB,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC;IACvB,OAAO;GACR;EAED,OAAO,CAAC,GAAG,CAAC,iCAAiC,EAAE,WAAW,CAAC,CAAC;EAE5D,KAAK,CAAC,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,SAAS,CAAC,CAAC;EAE/E,OAAO,CAAC,GAAG,CAAC,8BAA8B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;AAC/D,CAAC,CAAC;;AC7BF;AACA;MACa,eAAe,GAAG,OAAO,QAAyB,EAAE,UAAkB;;EACjF,IAAI,CAAC,UAAU,EAAE;IACf,OAAO,CAAC,GAAG,CAAC,0CAA0C,CAAC,CAAC;IACxD,OAAO;GACR;EAED,IAAI,CAAA,MAAAA,KAAa,CAAC,QAAQ,0CAAE,EAAE,MAAK,UAAU,EAAE;IAC7C,OAAO,CAAC,GAAG,CAAC,0DAA0D,CAAC,CAAC;IACxE,OAAO;GACR;EAEDA,KAAa,CAAC,KAAK,GAAG,EAAE,CAAC;EACzBA,KAAa,CAAC,OAAO,GAAG,IAAI,CAAC;EAC7BA,KAAa,CAAC,QAAQ,GAAG,IAAI,CAAC;EAE9B,IAAI;IACF,OAAO,CAAC,GAAG,CAAC,gCAAgC,UAAU,EAAE,CAAC,CAAC;IAC1D,MAAM,QAAQ,GAAG,MAAM,WAAW,CAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IAC/D,IAAI,CAAC,QAAQ,EAAE;MACb,OAAO,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAC;MACnD,OAAO;KACR;IAEDA,KAAa,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAElC,MAAM,QAAQ,GAAG,MAAM,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IACzE,IAAI,CAAC,QAAQ,EAAE;MACb,OAAO,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAC;MACnD,OAAO;KACR;IAEDA,KAAa,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAClCA,KAAa,CAAC,OAAO,GAAG,KAAK,CAAC;GAC/B;EAAC,OAAO,CAAC,EAAE;IACVA,KAAa,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9BA,KAAa,CAAC,KAAK,GAAG,CAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,QAAQ,0CAAE,MAAM,MAAK,GAAG,GAAG,yBAAyB,GAAG,CAAC,CAAC,OAAO,CAAC;IAC1F,OAAO,CAAC,GAAG,CAAC,oCAAoC,EAAE,CAAC,CAAC,CAAC;IACrD,MAAM,CAAC,CAAC;GACT;AACH;;;;","names":["EnvelopeStore"],"sources":["./src/utils/envelopeStore.ts","./src/utils/Envelopes.ts"],"sourcesContent":["// NOTE: Do not attempt to convert this to a named-export module. It triggers compilation issues in Rollup that I spent days trying to\n// resolve. This needs to export a single default value of the store's state. Any helper functions should go in Templates.ts here.\n\nimport {createStore} from '@stencil/store';\nimport {IEnvelope} from '@verdocs/js-sdk/Envelopes/Types';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\n\nconst {state, onChange} = createStore({\n  envelope: null as IEnvelope | null,\n  template: null as ITemplate | null,\n  loadProgress: 0,\n  loading: true,\n  error: '',\n\n  roleNames: [] as string[],\n  dirty: false,\n});\n\nonChange('envelope', async newEnvelope => {\n  if (!newEnvelope) {\n    console.log('[ENVELOPESTORE] Clearing envelope');\n    state.roleNames = [];\n    state.dirty = false;\n    state.loading = false;\n    state.error = '';\n    state.loadProgress = 0;\n    return;\n  }\n\n  console.log('[ENVELOPESTORE] Loaded envelope', newEnvelope);\n\n  state.roleNames = newEnvelope.recipients.map(recipient => recipient.role_name);\n  newEnvelope.recipients;\n  console.log('[ENVELOPESTORE] Loaded roles', state.roleNames);\n});\n\nexport default state;\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getEnvelope} from '@verdocs/js-sdk/Envelopes/Envelopes';\nimport EnvelopeStore from './envelopeStore';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\n\n// Allows envelope data to be cached for reuse between components, without parent components having to prop-drill entire envelopes into\n// child elements.\nexport const getEnvelopeById = async (endpoint: VerdocsEndpoint, envelopeId: string) => {\n  if (!envelopeId) {\n    console.log(`[ENVELOPES] Missing required envelope ID`);\n    return;\n  }\n\n  if (EnvelopeStore.envelope?.id === envelopeId) {\n    console.log(`[ENVELOPES] Skipping load for already-loaded envelope ID`);\n    return;\n  }\n\n  EnvelopeStore.error = '';\n  EnvelopeStore.loading = true;\n  EnvelopeStore.envelope = null;\n\n  try {\n    console.log(`[ENVELOPES] Loading envelope ${envelopeId}`);\n    const envelope = await getEnvelope(endpoint, envelopeId, true);\n    if (!envelope) {\n      console.log('[ENVELOPES] Unable to load envelope');\n      return;\n    }\n\n    EnvelopeStore.envelope = envelope;\n\n    const template = await getTemplate(endpoint, envelope.template_id, true);\n    if (!envelope) {\n      console.log('[ENVELOPES] Unable to load template');\n      return;\n    }\n\n    EnvelopeStore.template = template;\n    EnvelopeStore.loading = false;\n  } catch (e) {\n    EnvelopeStore.loading = false;\n    EnvelopeStore.error = e?.response?.status === 401 ? 'Authentication required' : e.message;\n    console.log('[ENVELOPES] Error loading envelope', e);\n    throw e;\n  }\n};\n"],"version":3}

package/dist/esm/{Templates-653648bb.js → Templates-452173e6.js}

@@ -1,5 +1,5 @@
 import { g as getTemplate } from './Templates-0638b1e4.js';
-import { s as state } from './templateStore-8585145f.js';
+import { s as state } from './templateStore-d6995852.js';
 
 const loadTemplate = async (endpoint, templateId) => {
   state.template = null;
@@ -26,4 +26,4 @@ const loadTemplate = async (endpoint, templateId) => {
 
 export { loadTemplate as l };
 
-//# sourceMappingURL=Templates-653648bb.js.map
+//# sourceMappingURL=Templates-452173e6.js.map