@verdocs/web-sdk 1.11.2 → 1.11.3

package/dist/collection/collection-manifest.json

@@ -31,6 +31,7 @@
     "./components/elements/verdocs-quick-functions/verdocs-quick-functions.js",
     "./components/elements/verdocs-search-activity/verdocs-search-activity.js",
     "./components/elements/verdocs-search-tabs/verdocs-search-tabs.js",
+    "./components/elements/verdocs-template-document-page/verdocs-template-document-page.js",
     "./components/embeds/verdocs-build/verdocs-build.js",
     "./components/embeds/verdocs-preview/verdocs-preview.js",
     "./components/embeds/verdocs-search/verdocs-search.js",

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

@@ -0,0 +1,15 @@
+verdocs-template-document-page {
+  width: 100%;
+  position: relative;
+}
+verdocs-template-document-page .verdocs-template-document-page-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-shadow: 0 0 10px 5px #0000000f;
+}
+verdocs-template-document-page .verdocs-template-document-page-layer.img {
+  width: 100%;
+}

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

@@ -0,0 +1,275 @@
+// NOTE: This component does not have a story because it's not intended for external use.
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { h, Host } from '@stencil/core';
+import { getTemplateDocumentPageDisplayUri } from '@verdocs/js-sdk/Templates/TemplateDocuments';
+import { throttle } from '../../../utils/utils';
+/**
+ * Represents one document page. This is primarily a layout container used to coordinate positions of
+ * page-related layers such as the page itself, signature fields, etc. It is not intended to be used
+ * on its own as an individual component.
+ */
+export class VerdocsTemplateDocumentPage {
+  constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.documentId = '';
+    this.pageNumber = 1;
+    this.virtualWidth = 612;
+    this.virtualHeight = 792;
+    this.layers = [{ name: 'page', type: 'canvas' }];
+    this.containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;
+    this.renderedWidth = this.virtualWidth;
+    this.renderedHeight = this.virtualHeight;
+    this.naturalWidth = this.virtualWidth;
+    this.naturalHeight = this.virtualHeight;
+    this.aspectRatio = this.virtualWidth / this.virtualHeight;
+    this.skipFirstNotification = true;
+    this.pageDisplayUri = '';
+  }
+  async componentWillLoad() {
+    const uri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.templateId, this.documentId, this.pageNumber);
+    console.log('pd', uri);
+    this.pageDisplayUri = uri;
+  }
+  componentDidLoad() {
+    this.resizeObserver = new ResizeObserver(throttle(entries => {
+      for (const entry of entries) {
+        const renderedWidth = entry.contentRect.width;
+        this.renderedWidth = renderedWidth;
+        this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);
+      }
+      this.notifyRenderedSize();
+    }, 100));
+    this.resizeObserver.observe(this.container);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.
+  // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.
+  // componentDidRender() {
+  //   this.notifyRenderedSize();
+  // }
+  notifyRenderedSize() {
+    // We skip one notification because by default we will always get at least two, one when rendering the initial size
+    // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.
+    if (this.skipFirstNotification) {
+      this.skipFirstNotification = false;
+      return;
+    }
+    this.pageRendered.emit({
+      // container: this.container,
+      containerId: this.containerId,
+      pageNumber: this.pageNumber,
+      virtualWidth: this.virtualWidth,
+      virtualHeight: this.virtualHeight,
+      renderedWidth: this.renderedWidth,
+      renderedHeight: this.renderedHeight,
+      naturalWidth: this.naturalWidth,
+      naturalHeight: this.naturalHeight,
+      aspectRatio: this.aspectRatio,
+      xScale: this.renderedWidth / this.virtualWidth,
+      yScale: this.renderedHeight / this.virtualHeight,
+    });
+  }
+  render() {
+    const height = `${this.renderedHeight}px`;
+    return (h(Host, { id: `${this.containerId}`, style: { height } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, onLoad: (e) => {
+        // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
+        // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
+        // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
+        // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the
+        // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the
+        // aspect ratio to adjust the "virtual" height in case the page is not 8.5"x11".
+        // TODO: Store this in the DB with each page.
+        this.naturalWidth = e.target.naturalWidth;
+        this.naturalHeight = e.target.naturalHeight;
+        this.aspectRatio = this.naturalWidth / this.naturalHeight;
+        this.virtualHeight = this.virtualWidth / this.aspectRatio;
+      } })) : (h("div", null)))));
+  }
+  static get is() { return "verdocs-template-document-page"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-template-document-page.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-template-document-page.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 load from."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      },
+      "templateId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The ID of the template the document is for."
+        },
+        "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 ID of the document to display."
+        },
+        "attribute": "document-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "pageNumber": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The page number being rendered. (Reminder: page numbers are 1-based.)"
+        },
+        "attribute": "page-number",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "virtualWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\nthe aspect ratio of the final rendered element when scaling up/down."
+        },
+        "attribute": "virtual-width",
+        "reflect": false,
+        "defaultValue": "612"
+      },
+      "virtualHeight": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "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."
+        },
+        "attribute": "virtual-height",
+        "reflect": false,
+        "defaultValue": "792"
+      },
+      "layers": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IPageLayer[]",
+          "resolved": "IPageLayer[]",
+          "references": {
+            "IPageLayer": {
+              "location": "import",
+              "path": "../../../utils/Types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\nThe parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\nif `pages` was ['page', 'fields'] the structure will be:\n\n```\n    <div id=\"verdocs-document-page-ker2fr1p9\">\n      <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n      <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n    </div>\n```"
+        },
+        "defaultValue": "[{name: 'page', type: 'canvas'}]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "containerId": {},
+      "renderedWidth": {},
+      "renderedHeight": {},
+      "naturalWidth": {},
+      "naturalHeight": {},
+      "aspectRatio": {},
+      "skipFirstNotification": {},
+      "pageDisplayUri": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "pageRendered",
+        "name": "pageRendered",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a page has been rendered. This is also fired when the page is resized."
+        },
+        "complexType": {
+          "original": "IDocumentPageInfo",
+          "resolved": "IDocumentPageInfo",
+          "references": {
+            "IDocumentPageInfo": {
+              "location": "import",
+              "path": "../../../utils/Types"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "container"; }
+}

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

@@ -32,9 +32,6 @@ export class VerdocsPreview {
       (_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));
     }
   }
-  async handleFieldChange(field, e, optionId) {
-    console.log('[PREVIEW] handleFieldChange', field, e, optionId);
-  }
   handlePageRendered(e) {
     const pageInfo = e.detail;
     console.log('[PREVIEW] Page rendered', pageInfo);
@@ -51,7 +48,7 @@ export class VerdocsPreview {
     pages.sort((a, b) => a.sequence - b.sequence);
     return (h(Host, null, pages.map(page => {
       console.log('rendering page', page);
-      return (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
+      return (h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
         ] }));

package/dist/collection/components/templates/verdocs-template-create/verdocs-template-create.css

@@ -25,7 +25,7 @@ verdocs-template-create .loader-wrapper {
   flex-direction: column;
   box-sizing: border-box;
   position: relative;
-  width: 320px;
+  max-width: 320px;
   height: 320px;
   text-align: center;
   border: 2px dashed #979797;

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js

@@ -243,7 +243,7 @@ export class VerdocsTemplateFields {
         console.log('onSubmit');
       } }, h("div", { class: "pages" }, pages.map(page => {
       // console.log('rendering page', page);
-      return (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
+      return (h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
         ] }));

package/dist/collection/components/templates/verdocs-template-recipients/verdocs-template-recipients.js

@@ -94,6 +94,7 @@ export class VerdocsTemplateRecipients {
     interact('.dropzone').dropzone({
       overlap: 0.05,
       ondrop: function handleDrop(event) {
+        var _a, _b;
         event.target.classList.remove('active');
         // target will be the recipient e.g. <div class="recipient" data-rolename="Buyer" />
         // relatedTarget will be the drop zone, e.g. <div class="dropzone" data-order="2" data-sequence="1" />
@@ -107,7 +108,7 @@ export class VerdocsTemplateRecipients {
         const roleName = event.relatedTarget.dataset.rolename;
         const targetSequence = +event.target.dataset.sequence;
         const targetOrder = +event.target.dataset.order;
-        const changingRole = TemplateStore.template.roles.find(role => role.name === roleName);
+        const changingRole = (_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles.find(role => role.name === roleName);
         if (changingRole) {
           // To handle the renumbering, we update the role being moved to the new values, which will be some half-interval e.g.
           // sequence 1.5 order 1. Then we
@@ -119,7 +120,7 @@ export class VerdocsTemplateRecipients {
           // We have to update ALL the roles to be sure each gets new proper sequence/order numbers assigned.
           // TODO: We could optimize this by tracking "dirty" states and only update the roles that have changed. But it's a LOT more
           //  code to do right, and since most workflows will typically only have 2-4 recipients max, it may not be worth it.
-          Promise.all(TemplateStore.template.roles.map(role => updateRole(this.endpoint, this.templateId, role.name, {
+          Promise.all((_b = TemplateStore.template) === null || _b === void 0 ? void 0 : _b.roles.map(role => updateRole(this.endpoint, this.templateId, role.name, {
             sequence: role.sequence,
             order: role.order,
           })))
@@ -152,13 +153,15 @@ export class VerdocsTemplateRecipients {
     (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit();
   }
   sortTemplateRoles() {
-    TemplateStore.template.roles.sort((a, b) => {
+    var _a;
+    (_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles.sort((a, b) => {
       return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
     });
   }
   extractSequenceNumbers() {
+    var _a;
     this.sequences = [];
-    TemplateStore.template.roles.forEach(role => {
+    (_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles.forEach(role => {
       if (!this.sequences.includes(role.sequence)) {
         this.sequences.push(role.sequence);
       }
@@ -172,9 +175,8 @@ export class VerdocsTemplateRecipients {
     // If the user dragged an entry from below a row to above it, we end up here like [1,0]. Make sure it's [0,1] for the next operation.
     this.sequences.sort((a, b) => a - b);
     this.sequences.forEach((originalSequence, newSequenceIndex) => {
-      TemplateStore.template.roles
-        .filter(role => role.sequence === originalSequence)
-        .forEach((role, newOrderIndex) => {
+      var _a;
+      (_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles.filter(role => role.sequence === originalSequence).forEach((role, newOrderIndex) => {
         if (!renumbered.includes(role.name)) {
           role.sequence = newSequenceIndex + 1;
           role.order = newOrderIndex + 1;
@@ -187,12 +189,13 @@ export class VerdocsTemplateRecipients {
   }
   // Look for name conflicts, because they're UGC and can be anything, regardless of order.
   getNextRecipientName() {
+    var _a, _b;
     let name = '';
-    let nextNumber = TemplateStore.template.roles.length;
+    let nextNumber = (_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles.length;
     do {
       nextNumber++;
       name = `Recipient ${nextNumber}`;
-    } while (!name || TemplateStore.template.roles.some(role => role.name === name));
+    } while (!name || ((_b = TemplateStore.template) === null || _b === void 0 ? void 0 : _b.roles.some(role => role.name === name)));
     return name;
   }
   handleAddRole(e, sequence) {
@@ -253,12 +256,16 @@ export class VerdocsTemplateRecipients {
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
+    if (TemplateStore.loading || !TemplateStore.template) {
+      return (h(Host, null, h("verdocs-loader", null)));
+    }
     const roleNames = (((_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name);
+    console.log('s', this.sequences);
     return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off", "data-r": this.forceRerender }, h("h5", null, "Roles"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "row-recipients" }, h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[TemplateStore.template.sender], ' ', h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })))), h("div", { class: "row add-sequence", "data-sequence": 0 }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "row-recipients" }, h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), this.sequences.map(sequence => (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-recipients" }, h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), TemplateStore.template.roles
       .filter(role => role.sequence === sequence)
       .map(role => {
       return (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
-    }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-recipients" }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step")))))), h("div", { class: "row", "data-sequence": this.sequences.length + 1 }, h("div", { class: "row-recipients" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), this.sequences.length < 1 && (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-recipients" }, h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, 1) }))))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-recipients" }, h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
+    }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), this.sequences.length > 0 && (h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-recipients" }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), h("div", { class: "row", "data-sequence": this.sequences.length + 1 }, h("div", { class: "row-recipients" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), this.sequences.length < 1 && (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-recipients" }, h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, 1) }))))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-recipients" }, h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
         this.showingRoleDialog = null;
         this.forceRerender++;
       }, onDelete: e => {

package/dist/collection/components/templates/verdocs-template-recipients/verdocs-template-recipients.stories.js

@@ -3,8 +3,8 @@ export default {
   title: 'Templates/Recipients',
   component: 'verdocs-template-recipients',
   args: {
+    // templateId: 'ea7a792f-7e46-4662-a0ff-db6bd389306e',
     templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
-    // templateId: '056b837f-b183-4039-b50a-d68acbf81b67',
   },
   argTypes: {
     onSave: { action: 'save' },

package/dist/collection/utils/templateStore.js

@@ -17,6 +17,7 @@ const { state, onChange } = createStore({
   dirty: false,
 });
 onChange('template', async (newTemplate) => {
+  console.log('nt', newTemplate);
   if (!newTemplate) {
     console.log('[TEMPLATESTORE] Clearing template');
     state.fields = [];

package/dist/components/TemplateDocuments.js

@@ -0,0 +1,75 @@
+/**
+ * A TemplateDocument represents a PDF or other attachment in a Template.
+ *
+ * @module
+ */
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+/**
+ * Create a Document for a particular Template.
+ *
+ * ```typescript
+ * import {TemplateDocument} from '@verdocs/js-sdk/Templates';
+ *
+ * await TemplateDocument.createDocument((VerdocsEndpoint.getDefault(), templateID, params);
+ * ```
+ */
+var createTemplateDocument = function (endpoint, templateId, file, onUploadProgress) {
+    var formData = new FormData();
+    formData.append('document', file, file.name);
+    return endpoint.api //
+        .post("/templates/".concat(templateId, "/documents"), formData, {
+        timeout: 60000,
+        onUploadProgress: function (event) {
+            var total = event.total || 1;
+            var loaded = event.loaded || 0;
+            onUploadProgress === null || onUploadProgress === void 0 ? void 0 : onUploadProgress(Math.floor((loaded * 100) / (total || 1)), loaded, total || 1);
+        },
+    })
+        .then(function (r) { return r.data; });
+};
+/**
+ * Get a display URI for a given page in a file attached to a template document. These pages are rendered server-side
+ * into PNG resources suitable for display in IMG tags although they may be used elsewhere. Note that these are
+ * intended for DISPLAY ONLY, and do not contain any encoded metadata from participants. The original asset may be
+ * obtained by calling `getTemplateDocumentFile()` or similar.
+ */
+var getTemplateDocumentPageDisplayUri = function (endpoint, templateId, documentId, page) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+    return [2 /*return*/, endpoint.api.get("/templates/".concat(templateId, "/documents/").concat(documentId, "/pages/").concat(page, "/image")).then(function (r) { return r.data; })];
+}); }); };
+
+export { createTemplateDocument as c, getTemplateDocumentPageDisplayUri as g };

package/dist/components/VerdocsEndpoint.js

@@ -1251,7 +1251,7 @@ const transitionalDefaults = {
 
 const URLSearchParams$1 = typeof URLSearchParams !== 'undefined' ? URLSearchParams : AxiosURLSearchParams;
 
-const FormData$1 = FormData;
+const FormData$1 = typeof FormData !== 'undefined' ? FormData : null;
 
 /**
  * Determine if we're running in a standard browser environment
@@ -1647,11 +1647,15 @@ function isValidHeaderName(str) {
   return /^[-_a-zA-Z]+$/.test(str.trim());
 }
 
-function matchHeaderValue(context, value, header, filter) {
+function matchHeaderValue(context, value, header, filter, isHeaderNameFilter) {
   if (utils.isFunction(filter)) {
     return filter.call(this, value, header);
   }
 
+  if (isHeaderNameFilter) {
+    value = header;
+  }
+
   if (!utils.isString(value)) return;
 
   if (utils.isString(filter)) {
@@ -1795,7 +1799,7 @@ class AxiosHeaders {
 
     while (i--) {
       const key = keys[i];
-      if(!matcher || matchHeaderValue(this, this[key], key, matcher)) {
+      if(!matcher || matchHeaderValue(this, this[key], key, matcher, true)) {
         delete this[key];
         deleted = true;
       }
@@ -2643,7 +2647,7 @@ function mergeConfig(config1, config2) {
   return config;
 }
 
-const VERSION = "1.3.1";
+const VERSION = "1.3.3";
 
 const validators$1 = {};
 

package/dist/components/index.d.ts

@@ -42,6 +42,7 @@ export { VerdocsStatusIndicator as VerdocsStatusIndicator } from '../types/compo
 export { VerdocsTemplateAttachments as VerdocsTemplateAttachments } from '../types/components/templates/verdocs-template-attachments/verdocs-template-attachments';
 export { VerdocsTemplateCard as VerdocsTemplateCard } from '../types/components/controls/verdocs-template-card/verdocs-template-card';
 export { VerdocsTemplateCreate as VerdocsTemplateCreate } from '../types/components/templates/verdocs-template-create/verdocs-template-create';
+export { VerdocsTemplateDocumentPage as VerdocsTemplateDocumentPage } from '../types/components/elements/verdocs-template-document-page/verdocs-template-document-page';
 export { VerdocsTemplateFieldProperties as VerdocsTemplateFieldProperties } from '../types/components/templates/verdocs-template-field-properties/verdocs-template-field-properties';
 export { VerdocsTemplateFields as VerdocsTemplateFields } from '../types/components/templates/verdocs-template-fields/verdocs-template-fields';
 export { VerdocsTemplateName as VerdocsTemplateName } from '../types/components/templates/verdocs-template-name/verdocs-template-name';

package/dist/components/index.js

@@ -42,6 +42,7 @@ export { VerdocsStatusIndicator, defineCustomElement as defineCustomElementVerdo
 export { VerdocsTemplateAttachments, defineCustomElement as defineCustomElementVerdocsTemplateAttachments } from './verdocs-template-attachments.js';
 export { VerdocsTemplateCard, defineCustomElement as defineCustomElementVerdocsTemplateCard } from './verdocs-template-card.js';
 export { VerdocsTemplateCreate, defineCustomElement as defineCustomElementVerdocsTemplateCreate } from './verdocs-template-create.js';
+export { VerdocsTemplateDocumentPage, defineCustomElement as defineCustomElementVerdocsTemplateDocumentPage } from './verdocs-template-document-page.js';
 export { VerdocsTemplateFieldProperties, defineCustomElement as defineCustomElementVerdocsTemplateFieldProperties } from './verdocs-template-field-properties.js';
 export { VerdocsTemplateFields, defineCustomElement as defineCustomElementVerdocsTemplateFields } from './verdocs-template-fields.js';
 export { VerdocsTemplateName, defineCustomElement as defineCustomElementVerdocsTemplateName } from './verdocs-template-name.js';

package/dist/components/templateStore.js

@@ -17,6 +17,7 @@ const { state, onChange } = createStore({
   dirty: false,
 });
 onChange('template', async (newTemplate) => {
+  console.log('nt', newTemplate);
   if (!newTemplate) {
     console.log('[TEMPLATESTORE] Clearing template');
     state.fields = [];