@verdocs/web-sdk 1.9.6 → 1.9.10

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

@@ -0,0 +1,388 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { h, Host } from '@stencil/core';
+import { getTemplateDocument } from '@verdocs/js-sdk/Templates/TemplateDocuments';
+import { SDKError } from '../../../utils/errors';
+/**
+ * View a single document attached to a template. Note that if you are accessing a template that is not public, you must be authenticated.
+ * You can authenticate within this Storybook via the Embeds > Auth control.
+ */
+export class VerdocsViewTemplateDocument {
+  constructor() {
+    this.domPages = {};
+    this.sourcePageMetrics = {};
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.documentId = '';
+    this.rotation = 0;
+    this.pageLayers = [
+      { name: 'page', type: 'canvas' },
+      { name: 'controls', type: 'div' },
+    ];
+    this.templateDocument = 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.templateId || !this.documentId) {
+      console.log(`[VIEW-TEMPLATE] Missing required template ID ${this.templateId}`);
+      return;
+    }
+    try {
+      console.log(`[VIEW-TEMPLATE] Loading template ${this.templateId}`);
+      this.templateDocument = await getTemplateDocument(this.endpoint, this.templateId, this.documentId);
+      if (!this.templateDocument) {
+        console.error('[VIEW-TEMPLATE] Unable to load template document', this.templateId, this.documentId);
+      }
+      console.log('[VIEW-TEMPLATE] Got template', this.templateDocument);
+    }
+    catch (e) {
+      console.log('[VIEW-TEMPLATE] Error loading template', 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-TEMPLATE] Skipping rendering page not yet in DOM', { pageNumber });
+      return;
+    }
+    const pageMetrics = this.sourcePageMetrics[pageNumber];
+    // console.log('[VIEW-TEMPLATE] 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-TEMPLATE] 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-TEMPLATE] Rendering pages', (_a = this.templateDocument) === null || _a === void 0 ? void 0 : _a.pages);
+    // TODO: The API is supposed to always return these sorted...
+    const pages = [...(((_b = this.templateDocument) === 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-template-document"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-view-template-document.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-view-template-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()"
+      },
+      "templateId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template ID to render"
+        },
+        "attribute": "template-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 within the template"
+        },
+        "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 {
+      "templateDocument": {}
+    };
+  }
+  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-template-document.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"verdocs-view-template-document.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-view-template-document/verdocs-view-template-document.tsx"],"names":[],"mappings":"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","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Element, Event, Host, Prop, EventEmitter, State} from '@stencil/core';\nimport {getTemplateDocument} from '@verdocs/js-sdk/Templates/TemplateDocuments';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {ITemplateDocument} from '@verdocs/js-sdk/Templates/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 a template. Note that if you are accessing a template that is not public, you must be authenticated.\n * You can authenticate within this Storybook via the Embeds > Auth control.\n */\n@Component({\n  tag: 'verdocs-view-template-document',\n  styleUrl: 'verdocs-view-template-document.scss',\n  shadow: false,\n})\nexport class VerdocsViewTemplateDocument {\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 template ID to render\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * The document ID to render within the template\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() templateDocument: ITemplateDocument | 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.templateId || !this.documentId) {\n      console.log(`[VIEW-TEMPLATE] Missing required template ID ${this.templateId}`);\n      return;\n    }\n\n    try {\n      console.log(`[VIEW-TEMPLATE] Loading template ${this.templateId}`);\n      this.templateDocument = await getTemplateDocument(this.endpoint, this.templateId, this.documentId);\n      if (!this.templateDocument) {\n        console.error('[VIEW-TEMPLATE] Unable to load template document', this.templateId, this.documentId);\n      }\n\n      console.log('[VIEW-TEMPLATE] Got template', this.templateDocument);\n    } catch (e) {\n      console.log('[VIEW-TEMPLATE] Error loading template', 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-TEMPLATE] Skipping rendering page not yet in DOM', {pageNumber});\n      return;\n    }\n\n    const pageMetrics = this.sourcePageMetrics[pageNumber];\n\n    // console.log('[VIEW-TEMPLATE] 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-TEMPLATE] 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-TEMPLATE] Rendering pages', this.templateDocument?.pages);\n\n    // TODO: The API is supposed to always return these sorted...\n    const pages = [...(this.templateDocument?.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-template-document/verdocs-view-template-document.stories.js

@@ -0,0 +1,15 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Elements/View Template Document',
+  component: 'verdocs-view-template-document',
+  args: {
+    templateId: '056b837f-b183-4039-b50a-d68acbf81b67',
+    documentId: '5c7ae8d0-faf6-4059-a0e8-58b60c85b7ca',
+  },
+  argTypes: {},
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export const ViewTemplateDocument = ({ templateId, documentId }) => html `<verdocs-view-template-document .templateId=${templateId} .documentId=${documentId} />`;
+//# sourceMappingURL=verdocs-view-template-document.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"verdocs-view-template-document.stories.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-view-template-document/verdocs-view-template-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,sCAAsC;IAClD,UAAU,EAAE,sCAAsC;GACnD;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 Template Document',\n  component: 'verdocs-view-template-document',\n  args: {\n    templateId: '056b837f-b183-4039-b50a-d68acbf81b67',\n    documentId: '5c7ae8d0-faf6-4059-a0e8-58b60c85b7ca',\n  },\n  argTypes: {},\n  parameters: {\n    layout: 'fullscreen',\n  },\n} as Meta;\n\nexport const ViewTemplateDocument = ({templateId, documentId}) => html`<verdocs-view-template-document .templateId=${templateId} .documentId=${documentId} />`;\n"]}

package/dist/collection/components/embeds/verdocs-auth/verdocs-auth.js

@@ -1,6 +1,6 @@
 import { Auth } from '@verdocs/js-sdk/Users';
-import { h } from '@stencil/core';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { h } from '@stencil/core';
 import { SDKError } from '../../../utils/errors';
 /**
  * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that
@@ -96,14 +96,14 @@ export class VerdocsAuth {
     }
     if (this.isAuthenticated) {
       if (this.debug) {
-        return (h("div", { class: "status-result debug" }, h("verdocs-button", { label: "Logout", disabled: this.loggingIn, onPress: () => this.handleLogout() })));
+        return (h("div", { class: "status-result debug" }, h("verdocs-button", { label: "Logout", disabled: this.loggingIn, onClick: () => this.handleLogout() })));
       }
       return h("div", { class: "status-result" }, "Authenticated");
     }
     if (this.displayMode === 'signup') {
-      return (h("div", { class: "signup-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for an account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Signup", disabled: this.loggingIn, onPress: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
+      return (h("div", { class: "signup-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for an account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Signup", disabled: this.loggingIn, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
     }
-    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onPress: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } })), this.loginError ? h("verdocs-ok-dialog", { open: true, heading: "Login Error", message: this.loginError, onClosed: () => this.handleClearError() }) : h("div", null)));
+    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } })), this.loginError ? h("verdocs-ok-dialog", { heading: "Login Error", message: this.loginError, onNext: () => this.handleClearError() }) : h("div", null)));
   }
   static get is() { return "verdocs-auth"; }
   static get originalStyleUrls() {

package/dist/collection/components/embeds/verdocs-auth/verdocs-auth.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-auth.js","sourceRoot":"","sources":["../../../../src/components/embeds/verdocs-auth/verdocs-auth.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Auth} from '@verdocs/js-sdk/Users';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport {VerdocsEndpoint, TSession} from '@verdocs/js-sdk';\nimport {SDKError} from '../../../utils/errors';\n\nexport interface IAuthStatus {\n  authenticated: boolean;\n  session: TSession;\n}\n\n/**\n * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that\n * occur during the process (especially successful completion). The success callback will be fired immediately if the\n * user is already authenticated with a valid session, so this component may not always display visibly.\n *\n * To simplify some types of authentication flows, a visibility flag can force this component to never display. This\n * allows you to susbcribe to notifications from the\n *\n * This embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide\n * container to allow sufficient space for the required forms.\n *\n * As noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after\n * the widget is rendered and the user's status has been checked. It may be fired again as the user completes (or\n * cancels) authentication steps.\n *\n * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\n * embed. This Element will reuse the same session produced by logging in via that Embed.\n *\n * ```typescript\n * interface IAuthStatus {\n *   // If true, the user is authenticated with a valid session\n *   authenticated: boolean;\n *\n *   // Details for the user's session\n *   session: IActiveSession | null;\n * }\n * ```\n */\n@Component({\n  tag: 'verdocs-auth',\n  styleUrl: 'verdocs-auth.scss',\n  shadow: false,\n})\nexport class VerdocsAuth {\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   * Normally, if the user has a valid session, this embed will be invisible, otherwise it will display\n   * login / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may\n   * use this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK.\n   */\n  @Prop() visible: boolean = true;\n\n  /**\n   * By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to\n   * override its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be\n   * in SVG format for best results.\n   */\n  @Prop() logo: string = 'https://verdocs.com/assets/blue-logo.svg';\n\n  /**\n   * If the user is authenticated, this embed will normally render invisibly. If debug is set true, a summary\n   * if the user's session details will be displayed instead. This may be useful while debugging authentication\n   * flows in new applications.\n   */\n  @Prop() debug: boolean = false;\n\n  /**\n   * Event fired when session authentication process has completed. Check the event contents for completion status.\n   */\n  @Event({composed: true}) authenticated: EventEmitter<IAuthStatus>;\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() isAuthenticated: boolean = false;\n  @State() displayMode: string = 'login';\n  @State() username: string = '';\n  @State() password: string = '';\n  @State() loggingIn: boolean = false;\n  @State() activeSession: TSession = null;\n  @State() loginError: string | null = null;\n\n  componentWillLoad() {\n    this.endpoint.loadSession();\n    if (this.endpoint.session) {\n      console.log('[AUTH] Authenticated');\n      this.isAuthenticated = true;\n      this.activeSession = this.endpoint.session;\n      this.authenticated?.emit({authenticated: true, session: this.endpoint.session});\n    } else {\n      console.log('[AUTH] Anonymous');\n      this.authenticated?.emit({authenticated: false, session: null});\n    }\n  }\n\n  handleLogin() {\n    this.loggingIn = true;\n    Auth.authenticateUser(this.endpoint, {username: this.username, password: this.password})\n      .then(r => {\n        this.loggingIn = false;\n        this.endpoint.setToken(r.accessToken);\n        this.activeSession = this.endpoint.session;\n        this.isAuthenticated = true;\n        this.authenticated?.emit({authenticated: true, session: this.endpoint.session});\n      })\n      .catch(e => {\n        console.log('[AUTH] Authentication error', e.response, JSON.stringify(e));\n        this.loggingIn = false;\n        this.activeSession = null;\n        this.authenticated?.emit({authenticated: false, session: null});\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n\n        if (e?.response?.status === 403) {\n          this.loginError = 'Please check your username and password and try again.';\n        }\n      });\n  }\n\n  handleLogout() {\n    this.endpoint.clearSession();\n    this.isAuthenticated = false;\n    this.authenticated?.emit({authenticated: false, session: null});\n  }\n\n  handleClearError() {\n    this.loginError = null;\n  }\n\n  render() {\n    if (!this.visible) {\n      return <div style={{display: 'none'}}>Verdocs Auth Placeholder</div>;\n    }\n\n    if (this.isAuthenticated) {\n      if (this.debug) {\n        return (\n          <div class=\"status-result debug\">\n            <verdocs-button label=\"Logout\" disabled={this.loggingIn} onPress={() => this.handleLogout()} />\n          </div>\n        );\n      }\n\n      return <div class=\"status-result\">Authenticated</div>;\n    }\n\n    if (this.displayMode === 'signup') {\n      return (\n        <div class=\"signup-form\">\n          <img src={this.logo} alt=\"Verdocs Logo\" class=\"logo\" />\n\n          <h3>Sign up for an account</h3>\n          <h4>\n            Already have an account?\n            <verdocs-button label=\"Log In\" variant=\"text\" onClick={() => (this.displayMode = 'login')} disabled={this.loggingIn} />\n          </h4>\n\n          <form onSubmit={() => this.handleLogin()}>\n            <verdocs-text-input label=\"Email\" autocomplete=\"username\" value={this.username} onInput={(e: any) => (this.username = e.target.value)} disabled={this.loggingIn} />\n            <verdocs-text-input\n              label=\"Password\"\n              type=\"password\"\n              autocomplete=\"current-password\"\n              value={this.password}\n              onInput={(e: any) => (this.password = e.target.value)}\n              disabled={this.loggingIn}\n            />\n\n            <verdocs-button\n              label=\"Signup\"\n              disabled={this.loggingIn}\n              onPress={() => this.handleLogin()}\n              style={{display: 'flex', justifyContent: 'center', margin: '30px auto 0'}}\n            />\n          </form>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"login-form\">\n        <img src={this.logo} alt=\"Verdocs Logo\" class=\"logo\" />\n\n        <h3>Log in to your account</h3>\n        <h4>\n          Don't have an account?\n          <verdocs-button label=\"Sign Up\" variant=\"text\" onClick={() => (this.displayMode = 'signup')} disabled={this.loggingIn} />\n        </h4>\n\n        <form onSubmit={() => this.handleLogin()}>\n          <verdocs-text-input label=\"Email\" autocomplete=\"username\" value={this.username} onInput={(e: any) => (this.username = e.target.value)} disabled={this.loggingIn} />\n          <verdocs-text-input\n            label=\"Password\"\n            type=\"password\"\n            autocomplete=\"current-password\"\n            value={this.password}\n            onInput={(e: any) => (this.password = e.target.value)}\n            disabled={this.loggingIn}\n          />\n\n          <verdocs-button\n            label=\"Forgot Your Password?\"\n            variant=\"text\"\n            onClick={() => (this.displayMode = 'signup')}\n            disabled={this.loggingIn}\n            style={{display: 'flex', justifyContent: 'center', margin: '10px auto 20px'}}\n          />\n\n          <verdocs-button label=\"Login\" disabled={this.loggingIn} onPress={() => this.handleLogin()} style={{display: 'flex', justifyContent: 'center', margin: '10px auto 0'}} />\n        </form>\n\n        {this.loginError ? <verdocs-ok-dialog open={true} heading=\"Login Error\" message={this.loginError} onClosed={() => this.handleClearError()} /> : <div />}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-auth.js","sourceRoot":"","sources":["../../../../src/components/embeds/verdocs-auth/verdocs-auth.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Auth} from '@verdocs/js-sdk/Users';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {TSession} from '@verdocs/js-sdk/Sessions/Types';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\n\nexport interface IAuthStatus {\n  authenticated: boolean;\n  session: TSession;\n}\n\n/**\n * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that\n * occur during the process (especially successful completion). The success callback will be fired immediately if the\n * user is already authenticated with a valid session, so this component may not always display visibly.\n *\n * To simplify some types of authentication flows, a visibility flag can force this component to never display. This\n * allows you to susbcribe to notifications from the\n *\n * This embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide\n * container to allow sufficient space for the required forms.\n *\n * As noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after\n * the widget is rendered and the user's status has been checked. It may be fired again as the user completes (or\n * cancels) authentication steps.\n *\n * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\n * embed. This Element will reuse the same session produced by logging in via that Embed.\n *\n * ```typescript\n * interface IAuthStatus {\n *   // If true, the user is authenticated with a valid session\n *   authenticated: boolean;\n *\n *   // Details for the user's session\n *   session: IActiveSession | null;\n * }\n * ```\n */\n@Component({\n  tag: 'verdocs-auth',\n  styleUrl: 'verdocs-auth.scss',\n  shadow: false,\n})\nexport class VerdocsAuth {\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   * Normally, if the user has a valid session, this embed will be invisible, otherwise it will display\n   * login / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may\n   * use this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK.\n   */\n  @Prop() visible: boolean = true;\n\n  /**\n   * By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to\n   * override its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be\n   * in SVG format for best results.\n   */\n  @Prop() logo: string = 'https://verdocs.com/assets/blue-logo.svg';\n\n  /**\n   * If the user is authenticated, this embed will normally render invisibly. If debug is set true, a summary\n   * if the user's session details will be displayed instead. This may be useful while debugging authentication\n   * flows in new applications.\n   */\n  @Prop() debug: boolean = false;\n\n  /**\n   * Event fired when session authentication process has completed. Check the event contents for completion status.\n   */\n  @Event({composed: true}) authenticated: EventEmitter<IAuthStatus>;\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() isAuthenticated: boolean = false;\n  @State() displayMode: string = 'login';\n  @State() username: string = '';\n  @State() password: string = '';\n  @State() loggingIn: boolean = false;\n  @State() activeSession: TSession = null;\n  @State() loginError: string | null = null;\n\n  componentWillLoad() {\n    this.endpoint.loadSession();\n    if (this.endpoint.session) {\n      console.log('[AUTH] Authenticated');\n      this.isAuthenticated = true;\n      this.activeSession = this.endpoint.session;\n      this.authenticated?.emit({authenticated: true, session: this.endpoint.session});\n    } else {\n      console.log('[AUTH] Anonymous');\n      this.authenticated?.emit({authenticated: false, session: null});\n    }\n  }\n\n  handleLogin() {\n    this.loggingIn = true;\n    Auth.authenticateUser(this.endpoint, {username: this.username, password: this.password})\n      .then(r => {\n        this.loggingIn = false;\n        this.endpoint.setToken(r.accessToken);\n        this.activeSession = this.endpoint.session;\n        this.isAuthenticated = true;\n        this.authenticated?.emit({authenticated: true, session: this.endpoint.session});\n      })\n      .catch(e => {\n        console.log('[AUTH] Authentication error', e.response, JSON.stringify(e));\n        this.loggingIn = false;\n        this.activeSession = null;\n        this.authenticated?.emit({authenticated: false, session: null});\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n\n        if (e?.response?.status === 403) {\n          this.loginError = 'Please check your username and password and try again.';\n        }\n      });\n  }\n\n  handleLogout() {\n    this.endpoint.clearSession();\n    this.isAuthenticated = false;\n    this.authenticated?.emit({authenticated: false, session: null});\n  }\n\n  handleClearError() {\n    this.loginError = null;\n  }\n\n  render() {\n    if (!this.visible) {\n      return <div style={{display: 'none'}}>Verdocs Auth Placeholder</div>;\n    }\n\n    if (this.isAuthenticated) {\n      if (this.debug) {\n        return (\n          <div class=\"status-result debug\">\n            <verdocs-button label=\"Logout\" disabled={this.loggingIn} onClick={() => this.handleLogout()} />\n          </div>\n        );\n      }\n\n      return <div class=\"status-result\">Authenticated</div>;\n    }\n\n    if (this.displayMode === 'signup') {\n      return (\n        <div class=\"signup-form\">\n          <img src={this.logo} alt=\"Verdocs Logo\" class=\"logo\" />\n\n          <h3>Sign up for an account</h3>\n          <h4>\n            Already have an account?\n            <verdocs-button label=\"Log In\" variant=\"text\" onClick={() => (this.displayMode = 'login')} disabled={this.loggingIn} />\n          </h4>\n\n          <form onSubmit={() => this.handleLogin()}>\n            <verdocs-text-input label=\"Email\" autocomplete=\"username\" value={this.username} onInput={(e: any) => (this.username = e.target.value)} disabled={this.loggingIn} />\n            <verdocs-text-input\n              label=\"Password\"\n              type=\"password\"\n              autocomplete=\"current-password\"\n              value={this.password}\n              onInput={(e: any) => (this.password = e.target.value)}\n              disabled={this.loggingIn}\n            />\n\n            <verdocs-button\n              label=\"Signup\"\n              disabled={this.loggingIn}\n              onClick={() => this.handleLogin()}\n              style={{display: 'flex', justifyContent: 'center', margin: '30px auto 0'}}\n            />\n          </form>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"login-form\">\n        <img src={this.logo} alt=\"Verdocs Logo\" class=\"logo\" />\n\n        <h3>Log in to your account</h3>\n        <h4>\n          Don't have an account?\n          <verdocs-button label=\"Sign Up\" variant=\"text\" onClick={() => (this.displayMode = 'signup')} disabled={this.loggingIn} />\n        </h4>\n\n        <form onSubmit={() => this.handleLogin()}>\n          <verdocs-text-input label=\"Email\" autocomplete=\"username\" value={this.username} onInput={(e: any) => (this.username = e.target.value)} disabled={this.loggingIn} />\n          <verdocs-text-input\n            label=\"Password\"\n            type=\"password\"\n            autocomplete=\"current-password\"\n            value={this.password}\n            onInput={(e: any) => (this.password = e.target.value)}\n            disabled={this.loggingIn}\n          />\n\n          <verdocs-button\n            label=\"Forgot Your Password?\"\n            variant=\"text\"\n            onClick={() => (this.displayMode = 'signup')}\n            disabled={this.loggingIn}\n            style={{display: 'flex', justifyContent: 'center', margin: '10px auto 20px'}}\n          />\n\n          <verdocs-button label=\"Login\" disabled={this.loggingIn} onClick={() => this.handleLogin()} style={{display: 'flex', justifyContent: 'center', margin: '10px auto 0'}} />\n        </form>\n\n        {this.loginError ? <verdocs-ok-dialog heading=\"Login Error\" message={this.loginError} onNext={() => this.handleClearError()} /> : <div />}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/embeds/verdocs-build/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/embeds/verdocs-build/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import {rescale} from '@verdocs/js-sdk/Utils/Fields';\nimport {IDocumentField} from '@verdocs/js-sdk/Documents/Types';\n\nexport function getInputStyle(field: IDocumentField, mode, browserType: string) {\n  const fontSize = 11;\n  let setting = 'setting';\n  if (!!field['settings']) {\n    setting = 'settings';\n  }\n  const inputStyle = {\n    height: '100%',\n    width: '100%',\n    background: 'none',\n  };\n  if ((field[setting] && field[setting].font_size) || field.type === 'date' || field.type === 'signature' || field.type === 'initial' || field.type === 'timestamp') {\n    inputStyle['fontSize'] = fontSize + 'px';\n    inputStyle['letterSpacing'] = '.3px !important';\n  }\n\n  if (field.type === 'dropdown') {\n    inputStyle['fontSize'] = '10.8px';\n    delete inputStyle.background;\n  }\n\n  if (field.type === 'textbox') {\n    inputStyle['fontSize'] = fontSize + 'px';\n    inputStyle['letterSpacing'] = getLetterSpacing(browserType) + 'px';\n  }\n  if (field['required']) {\n    inputStyle['border'] = '1px solid #cc0000';\n  }\n  if (field['prepared'] && field['prepared'] === true && mode !== 'prepareview') {\n    inputStyle['visibility'] = 'hidden';\n  }\n  if (field[setting] && field[setting].color) {\n    inputStyle['color'] = field[setting].color;\n  }\n  if (field[setting] && field[setting].upperCase) {\n    inputStyle['textTransform'] = 'uppercase';\n  }\n\n  if (field[setting] && field[setting].leading > 0) {\n    inputStyle['lineHeight'] = `${rescale(1, field[setting].leading + 0.5)}px`;\n  } else if (field['leading'] && field['leading'] > 0) {\n    inputStyle['lineHeight'] = `${rescale(1, field['leading'] + 0.5)}px`;\n  }\n\n  return inputStyle;\n}\n\nexport function getLetterSpacing(browserType: string) {\n  switch (browserType) {\n    case 'opera':\n      return -0.0018;\n    case 'firefox':\n      return -0.23594210526315787;\n    case 'ie':\n      return -0.0019;\n    case 'edge':\n      return -0.0019;\n    case 'chrome':\n      return -0.0018;\n    case 'safari':\n      return -0.0018;\n    case 'blink':\n      return -0.0018;\n    default:\n      return -0.0018;\n  }\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/embeds/verdocs-build/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import {rescale} from '@verdocs/js-sdk/Utils/Fields';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\n\nexport function getInputStyle(field: IDocumentField, mode, browserType: string) {\n  const fontSize = 11;\n  let setting = 'setting';\n  if (!!field['settings']) {\n    setting = 'settings';\n  }\n  const inputStyle = {\n    height: '100%',\n    width: '100%',\n    background: 'none',\n  };\n  if ((field[setting] && field[setting].font_size) || field.type === 'date' || field.type === 'signature' || field.type === 'initial' || field.type === 'timestamp') {\n    inputStyle['fontSize'] = fontSize + 'px';\n    inputStyle['letterSpacing'] = '.3px !important';\n  }\n\n  if (field.type === 'dropdown') {\n    inputStyle['fontSize'] = '10.8px';\n    delete inputStyle.background;\n  }\n\n  if (field.type === 'textbox') {\n    inputStyle['fontSize'] = fontSize + 'px';\n    inputStyle['letterSpacing'] = getLetterSpacing(browserType) + 'px';\n  }\n  if (field['required']) {\n    inputStyle['border'] = '1px solid #cc0000';\n  }\n  if (field['prepared'] && field['prepared'] === true && mode !== 'prepareview') {\n    inputStyle['visibility'] = 'hidden';\n  }\n  if (field[setting] && field[setting].color) {\n    inputStyle['color'] = field[setting].color;\n  }\n  if (field[setting] && field[setting].upperCase) {\n    inputStyle['textTransform'] = 'uppercase';\n  }\n\n  if (field[setting] && field[setting].leading > 0) {\n    inputStyle['lineHeight'] = `${rescale(1, field[setting].leading + 0.5)}px`;\n  } else if (field['leading'] && field['leading'] > 0) {\n    inputStyle['lineHeight'] = `${rescale(1, field['leading'] + 0.5)}px`;\n  }\n\n  return inputStyle;\n}\n\nexport function getLetterSpacing(browserType: string) {\n  switch (browserType) {\n    case 'opera':\n      return -0.0018;\n    case 'firefox':\n      return -0.23594210526315787;\n    case 'ie':\n      return -0.0019;\n    case 'edge':\n      return -0.0019;\n    case 'chrome':\n      return -0.0018;\n    case 'safari':\n      return -0.0018;\n    case 'blink':\n      return -0.0018;\n    default:\n      return -0.0018;\n  }\n}\n"]}

package/dist/collection/components/embeds/verdocs-build/verdocs-build.js

@@ -1,6 +1,7 @@
-import { Host } from '@stencil/core';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
+import { loadTemplate } from '../../../utils/Templates';
+import { SDKError } from '../../../utils/errors';
 /**
  * Display a template building experience.
  */
@@ -13,7 +14,28 @@ export class VerdocsBuild {
     this.pdfUrl = null;
     this.template = null;
   }
-  async componentDidLoad() { }
+  async componentWillLoad() {
+    var _a, _b, _c;
+    this.endpoint.loadSession();
+    if (!this.endpoint.session) {
+      console.log('[BUILD] Unable to start builder session, must be authenticated');
+      return;
+    }
+    if (!this.templateId) {
+      console.log(`[BUILD] No template ID specified, showing upload option`);
+      this.step = 'create';
+      return;
+    }
+    try {
+      console.log(`[BUILD] Loading template ${this.templateId}`);
+      await loadTemplate(this.endpoint, this.templateId);
+      this.step = 'fields';
+    }
+    catch (e) {
+      console.log('[BUILD] Error loading template', 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));
+    }
+  }
   handleCancel(e) {
     console.log('Cancel', e.detail);
     this.step = '';
@@ -31,7 +53,7 @@ export class VerdocsBuild {
     this.step = 'fields';
   }
   render() {
-    return (h(Host, null, this.step === 'create' && h("verdocs-template-create", { onCancel: e => this.handleCancel(e), onTemplateCreated: e => this.handleTemplateCreated(e) }), this.step === 'properties' && h("verdocs-template-properties", { onCancel: e => this.handleCancel(e), onSettingsUpdated: e => this.handlePropertiesUpdated(e) }), this.step === 'recipients' && h("verdocs-template-recipients", { onCancel: e => this.handleCancel(e), onSettingsUpdated: e => this.handleRecipientsUpdated(e) }), this.step === 'fields' && h("verdocs-template-fields", { onCancel: e => this.handleCancel(e), onSettingsUpdated: e => this.handleCancel(e) })));
+    return (h(Host, null, this.step === 'create' && h("verdocs-template-create", { onCancel: e => this.handleCancel(e), onNext: e => this.handleTemplateCreated(e) }), this.step === 'properties' && h("verdocs-template-properties", { onCancel: e => this.handleCancel(e), onNext: e => this.handlePropertiesUpdated(e) }), this.step === 'recipients' && h("verdocs-template-recipients", { onCancel: e => this.handleCancel(e), onNext: e => this.handleRecipientsUpdated(e) }), this.step === 'fields' && h("verdocs-template-fields", { onCancel: e => this.handleCancel(e), onNext: e => this.handleCancel(e) })));
   }
   static get is() { return "verdocs-build"; }
   static get originalStyleUrls() {