@verdocs/web-sdk 1.11.2 → 1.11.4

package/dist/cjs/verdocs-template-recipients.cjs.entry.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const interact_min = require('./interact.min-d223d04b.js');
-const Roles = require('./Roles-927719de.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
+const Roles = require('./Roles-9b593b95.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-26bb7607.js');
 const Colors = require('./Colors-e809dcc9.js');
-const templateStore = require('./templateStore-81ad25a7.js');
-const Templates = require('./Templates-2f2ea153.js');
+const templateStore = require('./templateStore-198752d5.js');
+const Templates = require('./Templates-7a63d848.js');
 const utils = require('./utils-f4cfa1fb.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');
@@ -109,6 +109,7 @@ const VerdocsTemplateRecipients = class {
     interact_min.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" />
@@ -122,7 +123,7 @@ const VerdocsTemplateRecipients = class {
         const roleName = event.relatedTarget.dataset.rolename;
         const targetSequence = +event.target.dataset.sequence;
         const targetOrder = +event.target.dataset.order;
-        const changingRole = templateStore.state.template.roles.find(role => role.name === roleName);
+        const changingRole = (_a = templateStore.state.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
@@ -134,7 +135,7 @@ const VerdocsTemplateRecipients = class {
           // 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.state.template.roles.map(role => Roles.updateRole(this.endpoint, this.templateId, role.name, {
+          Promise.all((_b = templateStore.state.template) === null || _b === void 0 ? void 0 : _b.roles.map(role => Roles.updateRole(this.endpoint, this.templateId, role.name, {
             sequence: role.sequence,
             order: role.order,
           })))
@@ -167,13 +168,15 @@ const VerdocsTemplateRecipients = class {
     (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit();
   }
   sortTemplateRoles() {
-    templateStore.state.template.roles.sort((a, b) => {
+    var _a;
+    (_a = templateStore.state.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.state.template.roles.forEach(role => {
+    (_a = templateStore.state.template) === null || _a === void 0 ? void 0 : _a.roles.forEach(role => {
       if (!this.sequences.includes(role.sequence)) {
         this.sequences.push(role.sequence);
       }
@@ -187,9 +190,8 @@ const VerdocsTemplateRecipients = class {
     // 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.state.template.roles
-        .filter(role => role.sequence === originalSequence)
-        .forEach((role, newOrderIndex) => {
+      var _a;
+      (_a = templateStore.state.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;
@@ -202,12 +204,13 @@ const VerdocsTemplateRecipients = class {
   }
   // Look for name conflicts, because they're UGC and can be anything, regardless of order.
   getNextRecipientName() {
+    var _a, _b;
     let name = '';
-    let nextNumber = templateStore.state.template.roles.length;
+    let nextNumber = (_a = templateStore.state.template) === null || _a === void 0 ? void 0 : _a.roles.length;
     do {
       nextNumber++;
       name = `Recipient ${nextNumber}`;
-    } while (!name || templateStore.state.template.roles.some(role => role.name === name));
+    } while (!name || ((_b = templateStore.state.template) === null || _b === void 0 ? void 0 : _b.roles.some(role => role.name === name)));
     return name;
   }
   handleAddRole(e, sequence) {
@@ -268,12 +271,16 @@ const VerdocsTemplateRecipients = class {
     if (!this.endpoint.session) {
       return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
+    if (templateStore.state.loading || !templateStore.state.template) {
+      return (index.h(index.Host, null, index.h("verdocs-loader", null)));
+    }
     const roleNames = (((_a = templateStore.state.template) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name);
+    console.log('s', this.sequences);
     return (index.h(index.Host, null, index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off", "data-r": this.forceRerender }, index.h("h5", null, "Roles"), index.h("div", { class: "participants" }, index.h("div", { class: "left-line" }), index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: startIcon }), index.h("div", { class: "row-recipients" }, index.h("div", { class: "sender" }, index.h("span", { class: "label" }, "Sender:"), " ", senderLabels[templateStore.state.template.sender], ' ', index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })))), index.h("div", { class: "row add-sequence", "data-sequence": 0 }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("div", { class: "row-recipients" }, index.h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), this.sequences.map(sequence => (index.h(index.Fragment, null, index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: stepIcon }), index.h("div", { class: "row-recipients" }, index.h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), templateStore.state.template.roles
       .filter(role => role.sequence === sequence)
       .map(role => {
       return (index.h(index.Fragment, null, index.h("div", { class: "recipient", style: { backgroundColor: Colors.getRGBA(utils.getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, index.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), index.h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
-    }), index.h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), index.h("div", { class: "row add-sequence", "data-sequence": sequence }, index.h("div", { class: "row-recipients" }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step")))))), index.h("div", { class: "row", "data-sequence": this.sequences.length + 1 }, index.h("div", { class: "row-recipients" }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), this.sequences.length < 1 && (index.h(index.Fragment, null, index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: stepIcon }), index.h("div", { class: "row-recipients" }, index.h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, 1) }))))), index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: doneIcon }), index.h("div", { class: "row-recipients" }, index.h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (index.h("div", { class: "empty" }, "You must add at least one Role before proceeding.", index.h("br", null), " Click the ", index.h("span", { innerHTML: plusIcon }), " Add button above to get started.")), index.h("div", { class: "buttons" }, index.h("div", { class: "flex-fill" }), index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (index.h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
+    }), index.h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), this.sequences.length > 0 && (index.h("div", { class: "row add-sequence", "data-sequence": sequence }, index.h("div", { class: "row-recipients" }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), index.h("div", { class: "row", "data-sequence": this.sequences.length + 1 }, index.h("div", { class: "row-recipients" }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), this.sequences.length < 1 && (index.h(index.Fragment, null, index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: stepIcon }), index.h("div", { class: "row-recipients" }, index.h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, 1) }))))), index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: doneIcon }), index.h("div", { class: "row-recipients" }, index.h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (index.h("div", { class: "empty" }, "You must add at least one Role before proceeding.", index.h("br", null), " Click the ", index.h("span", { innerHTML: plusIcon }), " Add button above to get started.")), index.h("div", { class: "buttons" }, index.h("div", { class: "flex-fill" }), index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (index.h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
         this.showingRoleDialog = null;
         this.forceRerender++;
       }, onDelete: e => {

package/dist/cjs/verdocs-template-reminders.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
-const templateStore = require('./templateStore-81ad25a7.js');
-const Templates = require('./Templates-2f2ea153.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-26bb7607.js');
+const templateStore = require('./templateStore-198752d5.js');
+const Templates = require('./Templates-7a63d848.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');
 require('./index-eb130f52.js');

package/dist/cjs/verdocs-template-role-properties_2.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
-const Roles = require('./Roles-927719de.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
-const templateStore = require('./templateStore-81ad25a7.js');
-const Templates = require('./Templates-2f2ea153.js');
+const Roles = require('./Roles-9b593b95.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-26bb7607.js');
+const templateStore = require('./templateStore-198752d5.js');
+const Templates = require('./Templates-7a63d848.js');
 const errors = require('./errors-0396da3d.js');
 const Templates$1 = require('./Templates-ed812768.js');
 require('./Token-576f0e8a.js');

package/dist/cjs/verdocs-template-visibility.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Templates$1 = require('./Templates-ed812768.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
-const templateStore = require('./templateStore-81ad25a7.js');
-const Templates = require('./Templates-2f2ea153.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-26bb7607.js');
+const templateStore = require('./templateStore-198752d5.js');
+const Templates = require('./Templates-7a63d848.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');
 require('./index-eb130f52.js');

package/dist/cjs/verdocs-toolbar-icon.cjs.entry.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1329d89c.js');
+const popper = require('./popper-11d5f714.js');
+
+const verdocsToolbarIconCss = "verdocs-toolbar-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-toolbar-icon .icon{display:inline-block;cursor:pointer}verdocs-toolbar-icon .icon svg{fill:#5c6575}verdocs-toolbar-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;padding:5px 10px;font-size:13px;position:relative;border-radius:4px;z-index:20000;white-space:nowrap}verdocs-toolbar-icon .tooltip .arrow,verdocs-toolbar-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-toolbar-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-toolbar-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-toolbar-icon .tooltip[data-show]{display:block}verdocs-toolbar-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]{padding:3px 10px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-1px}";
+
+const VerdocsToolbarIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.text = '';
+    this.icon = '';
+    this.placement = 'bottom';
+    this.containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;
+  }
+  componentDidLoad() {
+    this.popperInstance = popper.createPopper(this.iconEl, this.tooltip, {
+      placement: this.placement,
+      modifiers: this.placement === 'left' ? [{ name: 'offset', options: { offset: [0, 20] } }] : [],
+    });
+    // placement: 'top-end',
+    // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
+    // });
+  }
+  disconnectedCallback() {
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+      this.popperInstance = null;
+    }
+  }
+  show() {
+    var _a, _b;
+    (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+    (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+  }
+  hide() {
+    var _a;
+    (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
+  }
+  // handlePress() {
+  //   this.press?.emit();
+  // }
+  render() {
+    return (index.h(index.Host, { class: {} }, index.h("div", { "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), index.h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, index.h("div", { "data-popper-arrow": "true", class: "arrow" }))));
+  }
+};
+VerdocsToolbarIcon.style = verdocsToolbarIconCss;
+
+exports.verdocs_toolbar_icon = VerdocsToolbarIcon;

package/dist/cjs/verdocs-view.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-26bb7607.js');
 const utils = require('./utils-f4cfa1fb.js');
 const Envelopes = require('./Envelopes-9886af0f.js');
 const errors = require('./errors-0396da3d.js');

package/dist/cjs/verdocs-web-sdk.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["verdocs-button.cjs",[[0,"verdocs-button",{"label":[1],"startIcon":[1,"start-icon"],"endIcon":[1,"end-icon"],"size":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-field-initial.cjs",[[0,"verdocs-field-initial",{"field":[16],"disabled":[4],"initials":[1],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"tempInitials":[32],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-signature.cjs",[[0,"verdocs-field-signature",{"field":[16],"name":[1],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"tempSignature":[32],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-template-recipients.cjs",[[0,"verdocs-template-recipients",{"endpoint":[16],"templateId":[1,"template-id"],"showingRoleDialog":[32],"showingSenderDialog":[32],"sender":[32],"forceRerender":[32]}]]],["verdocs-build.cjs",[[0,"verdocs-build",{"endpoint":[16],"templateId":[1,"template-id"],"step":[32],"pdfUrl":[32],"template":[32]}]]],["verdocs-field-checkbox.cjs",[[0,"verdocs-field-checkbox",{"field":[16],"option":[2],"disabled":[4],"done":[4],"roleindex":[2],"editable":[4],"moveable":[4],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-date.cjs",[[0,"verdocs-field-date",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"containerId":[32],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-radio-button.cjs",[[0,"verdocs-field-radio-button",{"field":[16],"option":[2],"disabled":[4],"done":[4],"roleindex":[2],"editable":[4],"moveable":[4],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-textarea.cjs",[[0,"verdocs-field-textarea",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-textbox.cjs",[[0,"verdocs-field-textbox",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-timestamp.cjs",[[0,"verdocs-field-timestamp",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-sign.cjs",[[0,"verdocs-sign",{"envelopeId":[1,"envelope-id"],"roleId":[1,"role-id"],"inviteCode":[1,"invite-code"],"recipient":[32],"signerToken":[32],"hasSignature":[32],"nextButtonLabel":[32],"nextSubmits":[32],"errorMessage":[32],"focusedField":[32],"isDone":[32],"showDone":[32],"finishLater":[32],"showFinishLater":[32],"agreed":[32],"documentsSingularPlural":[32]}]]],["verdocs-template-properties.cjs",[[0,"verdocs-template-properties",{"endpoint":[16],"templateId":[1,"template-id"],"template":[32],"name":[32],"visibility":[32],"sendReminders":[32],"firstReminderDays":[32],"reminderDays":[32]}]]],["verdocs-template-reminders.cjs",[[0,"verdocs-template-reminders",{"endpoint":[16],"templateId":[1,"template-id"],"showPlanBlocker":[32],"sendReminders":[32],"firstReminderDays":[32],"reminderDays":[32],"dirty":[32],"loading":[32]}]]],["verdocs-template-name.cjs",[[0,"verdocs-template-name",{"endpoint":[16],"templateId":[1,"template-id"],"name":[32],"dirty":[32],"loading":[32]}]]],["verdocs-auth.cjs",[[0,"verdocs-auth",{"endpoint":[16],"visible":[4],"logo":[1],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-search.cjs",[[0,"verdocs-search",{"endpoint":[16]}]]],["verdocs-send.cjs",[[0,"verdocs-send",{"endpoint":[16],"templateId":[1,"template-id"],"containerId":[32],"rolesAtLevel":[32],"showPickerForId":[32],"sessionContacts":[32],"rolesCompleted":[32],"reset":[64]}]]],["verdocs-template-visibility.cjs",[[0,"verdocs-template-visibility",{"endpoint":[16],"templateId":[1,"template-id"],"dirty":[32],"loading":[32],"personal":[32],"public":[32]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-field-attachment.cjs",[[0,"verdocs-field-attachment",{"field":[16],"disabled":[4],"roleIndex":[2,"role-index"],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-preview.cjs",[[0,"verdocs-preview",{"endpoint":[16],"templateId":[1,"template-id"]}]]],["verdocs-template-attachments.cjs",[[0,"verdocs-template-attachments",{"endpoint":[16],"templateId":[1,"template-id"],"loading":[32]}]]],["verdocs-envelope-sidebar.cjs",[[0,"verdocs-envelope-sidebar",{"endpoint":[16],"envelopeId":[1,"envelope-id"],"activeTab":[32],"panelOpen":[32]}]]],["verdocs-kba-dialog.cjs",[[0,"verdocs-kba-dialog",{"step":[2],"steps":[2],"helptitle":[1],"helptext":[1],"mode":[1],"label":[1],"placeholder":[1],"choices":[16],"response":[32]}]]],["verdocs-field-dropdown.cjs",[[0,"verdocs-field-dropdown",{"field":[16],"disabled":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-payment.cjs",[[0,"verdocs-field-payment",{"field":[16],"disabled":[4],"fields":[16],"pageNum":[2,"page-num"],"roleName":[1,"role-name"],"fieldId":[1,"field-id"],"recipients":[8],"selectedRoleName":[1,"selected-role-name"],"pdfPages":[16],"currentSignature":[1,"current-signature"],"currentSignatureId":[1,"current-signature-id"],"currentInitial":[1,"current-initial"],"currentInitialId":[1,"current-initial-id"],"focused":[4],"signed":[4],"roleindex":[2],"preparedMessage":[32],"signatureUrl":[32],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-organization-card.cjs",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-search-tabs.cjs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-status-indicator.cjs",[[0,"verdocs-status-indicator",{"size":[1],"theme":[1],"status":[1],"envelope":[16],"isOpen":[32],"recipientStatusIcons":[32],"containerId":[32]}]]],["verdocs-template-card.cjs",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags.cjs",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle.cjs",[[0,"verdocs-toggle",{"options":[16],"theme":[1],"selectedOption":[32]}]]],["verdocs-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"initials":[1],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-signature-dialog.cjs",[[0,"verdocs-signature-dialog",{"name":[1],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-view.cjs",[[0,"verdocs-view",{"endpoint":[16],"envelopeId":[1,"envelope-id"]}]]],["verdocs-toggle-button.cjs",[[0,"verdocs-toggle-button",{"active":[4],"icon":[1],"label":[1],"size":[1],"_active":[32]}]]],["verdocs-contact-picker.cjs",[[0,"verdocs-contact-picker",{"endpoint":[16],"templateRole":[16],"contactSuggestions":[16],"name":[32],"email":[32],"phone":[32],"message":[32],"showSuggestions":[32],"showMessage":[32],"delegator":[32]}]]],["verdocs-template-create_2.cjs",[[0,"verdocs-template-fields",{"endpoint":[16],"templateId":[1,"template-id"],"placing":[32],"selectedRoleName":[32],"rerender":[32]}],[0,"verdocs-template-create",{"endpoint":[16],"file":[32],"creating":[32]}]]],["verdocs-radio-button.cjs",[[0,"verdocs-radio-button",{"checked":[4],"name":[1],"value":[1],"disabled":[4]}]]],["verdocs-template-role-properties_2.cjs",[[0,"verdocs-template-role-properties",{"endpoint":[16],"templateId":[1,"template-id"],"roleName":[1,"role-name"],"sender":[1],"dirty":[32],"saving":[32],"name":[32],"type":[32],"fullName":[32],"email":[32],"phone":[32],"allowDelegation":[32]}],[0,"verdocs-template-sender",{"endpoint":[16],"templateId":[1,"template-id"],"sender":[1],"saving":[32]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"showCancel":[4,"show-cancel"]}]]],["verdocs-quick-functions_3.cjs",[[0,"verdocs-quick-functions",{"endpoint":[16]}],[0,"verdocs-search-activity",{"endpoint":[16],"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}],[0,"verdocs-search-box",{"endpoint":[16],"placeholder":[1],"type":[1],"query":[1],"grabsFocus":[4,"grabs-focus"],"focusField":[64]}]]],["verdocs-dropdown.cjs",[[0,"verdocs-dropdown",{"options":[16],"open":[32]}]]],["verdocs-floating-menu_2.cjs",[[0,"verdocs-floating-menu",{"options":[16]}],[0,"verdocs-toolbar-icon",{"text":[1],"icon":[1],"placement":[1],"containerId":[32]}]]],["verdocs-document-page_2.cjs",[[0,"verdocs-document-page",{"pageImageUri":[1,"page-image-uri"],"pageNumber":[2,"page-number"],"virtualWidth":[2,"virtual-width"],"virtualHeight":[1026,"virtual-height"],"layers":[16],"containerId":[32],"renderedWidth":[32],"renderedHeight":[32],"naturalWidth":[32],"naturalHeight":[32],"aspectRatio":[32],"skipFirstNotification":[32]}],[0,"verdocs-loader"]]],["verdocs-checkbox_4.cjs",[[0,"verdocs-checkbox",{"checked":[4],"name":[1],"label":[1],"value":[1],"theme":[1],"disabled":[4]}],[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"helpText":[1,"help-text"],"type":[1],"disabled":[4]}],[0,"verdocs-component-error",{"message":[1]}],[0,"verdocs-help-icon",{"text":[1],"containerId":[32]}]]],["verdocs-button-panel_3.cjs",[[0,"verdocs-template-field-properties",{"endpoint":[16],"templateId":[1,"template-id"],"fieldName":[1,"field-name"],"dirty":[32],"loading":[32],"type":[32],"name":[32],"roleName":[32],"required":[32],"placeholder":[32],"defaultValue":[32]}],[4,"verdocs-button-panel",{"icon":[1],"showPanel":[64],"hidePanel":[64],"toggle":[64]}],[0,"verdocs-select-input",{"value":[1],"label":[1],"options":[16],"disabled":[4]}]]]], options);
+  return index.bootstrapLazy(JSON.parse("[[\"verdocs-template-recipients.cjs\",[[0,\"verdocs-template-recipients\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"showingRoleDialog\":[32],\"showingSenderDialog\":[32],\"sender\":[32],\"forceRerender\":[32]}]]],[\"verdocs-field-initial.cjs\",[[0,\"verdocs-field-initial\",{\"field\":[16],\"disabled\":[4],\"initials\":[1],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"tempInitials\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-signature.cjs\",[[0,\"verdocs-field-signature\",{\"field\":[16],\"name\":[1],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"tempSignature\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-checkbox.cjs\",[[0,\"verdocs-field-checkbox\",{\"field\":[16],\"option\":[2],\"disabled\":[4],\"done\":[4],\"roleindex\":[2],\"editable\":[4],\"moveable\":[4],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-date.cjs\",[[0,\"verdocs-field-date\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"containerId\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-radio-button.cjs\",[[0,\"verdocs-field-radio-button\",{\"field\":[16],\"option\":[2],\"disabled\":[4],\"done\":[4],\"roleindex\":[2],\"editable\":[4],\"moveable\":[4],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-textarea.cjs\",[[0,\"verdocs-field-textarea\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-textbox.cjs\",[[0,\"verdocs-field-textbox\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-timestamp.cjs\",[[0,\"verdocs-field-timestamp\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-build.cjs\",[[0,\"verdocs-build\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"step\":[32],\"pdfUrl\":[32],\"template\":[32]}]]],[\"verdocs-sign.cjs\",[[0,\"verdocs-sign\",{\"envelopeId\":[1,\"envelope-id\"],\"roleId\":[1,\"role-id\"],\"inviteCode\":[1,\"invite-code\"],\"recipient\":[32],\"signerToken\":[32],\"hasSignature\":[32],\"nextButtonLabel\":[32],\"nextSubmits\":[32],\"errorMessage\":[32],\"focusedField\":[32],\"isDone\":[32],\"showDone\":[32],\"finishLater\":[32],\"showFinishLater\":[32],\"agreed\":[32],\"documentsSingularPlural\":[32]}]]],[\"verdocs-template-properties.cjs\",[[0,\"verdocs-template-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"template\":[32],\"name\":[32],\"visibility\":[32],\"sendReminders\":[32],\"firstReminderDays\":[32],\"reminderDays\":[32]}]]],[\"verdocs-template-reminders.cjs\",[[0,\"verdocs-template-reminders\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"showPlanBlocker\":[32],\"sendReminders\":[32],\"firstReminderDays\":[32],\"reminderDays\":[32],\"dirty\":[32],\"loading\":[32]}]]],[\"verdocs-template-name.cjs\",[[0,\"verdocs-template-name\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"name\":[32],\"dirty\":[32],\"loading\":[32]}]]],[\"verdocs-auth.cjs\",[[0,\"verdocs-auth\",{\"endpoint\":[16],\"visible\":[4],\"logo\":[1],\"isAuthenticated\":[32],\"displayMode\":[32],\"username\":[32],\"password\":[32],\"loggingIn\":[32],\"activeSession\":[32],\"loginError\":[32]}]]],[\"verdocs-search.cjs\",[[0,\"verdocs-search\",{\"endpoint\":[16]}]]],[\"verdocs-initial-dialog.cjs\",[[0,\"verdocs-initial-dialog\",{\"initials\":[1],\"fontLoaded\":[32],\"enteredInitials\":[32],\"mode\":[32]}]]],[\"verdocs-signature-dialog.cjs\",[[0,\"verdocs-signature-dialog\",{\"name\":[1],\"fontLoaded\":[32],\"enteredName\":[32],\"mode\":[32]}]]],[\"verdocs-contact-picker.cjs\",[[0,\"verdocs-contact-picker\",{\"endpoint\":[16],\"templateRole\":[16],\"contactSuggestions\":[16],\"name\":[32],\"email\":[32],\"phone\":[32],\"message\":[32],\"showSuggestions\":[32],\"showMessage\":[32],\"delegator\":[32]}]]],[\"verdocs-send.cjs\",[[0,\"verdocs-send\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"containerId\":[32],\"rolesAtLevel\":[32],\"showPickerForId\":[32],\"sessionContacts\":[32],\"rolesCompleted\":[32],\"reset\":[64]}]]],[\"verdocs-template-visibility.cjs\",[[0,\"verdocs-template-visibility\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"dirty\":[32],\"loading\":[32],\"personal\":[32],\"public\":[32]}]]],[\"verdocs-field-attachment.cjs\",[[0,\"verdocs-field-attachment\",{\"field\":[16],\"disabled\":[4],\"roleIndex\":[2,\"role-index\"],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-template-document-page.cjs\",[[0,\"verdocs-template-document-page\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"documentId\":[1,\"document-id\"],\"pageNumber\":[2,\"page-number\"],\"virtualWidth\":[2,\"virtual-width\"],\"virtualHeight\":[1026,\"virtual-height\"],\"layers\":[16],\"containerId\":[32],\"renderedWidth\":[32],\"renderedHeight\":[32],\"naturalWidth\":[32],\"naturalHeight\":[32],\"aspectRatio\":[32],\"skipFirstNotification\":[32],\"pageDisplayUri\":[32]}]]],[\"verdocs-loader.cjs\",[[0,\"verdocs-loader\"]]],[\"verdocs-preview.cjs\",[[0,\"verdocs-preview\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"]}]]],[\"verdocs-template-attachments.cjs\",[[0,\"verdocs-template-attachments\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"loading\":[32]}]]],[\"verdocs-envelope-sidebar.cjs\",[[0,\"verdocs-envelope-sidebar\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"activeTab\":[32],\"panelOpen\":[32]}]]],[\"verdocs-floating-menu.cjs\",[[0,\"verdocs-floating-menu\",{\"options\":[16]}]]],[\"verdocs-kba-dialog.cjs\",[[0,\"verdocs-kba-dialog\",{\"step\":[2],\"steps\":[2],\"helptitle\":[1],\"helptext\":[1],\"mode\":[1],\"label\":[1],\"placeholder\":[1],\"choices\":[16],\"response\":[32]}]]],[\"verdocs-field-dropdown.cjs\",[[0,\"verdocs-field-dropdown\",{\"field\":[16],\"disabled\":[4],\"roleindex\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-payment.cjs\",[[0,\"verdocs-field-payment\",{\"field\":[16],\"disabled\":[4],\"fields\":[16],\"pageNum\":[2,\"page-num\"],\"roleName\":[1,\"role-name\"],\"fieldId\":[1,\"field-id\"],\"recipients\":[8],\"selectedRoleName\":[1,\"selected-role-name\"],\"pdfPages\":[16],\"currentSignature\":[1,\"current-signature\"],\"currentSignatureId\":[1,\"current-signature-id\"],\"currentInitial\":[1,\"current-initial\"],\"currentInitialId\":[1,\"current-initial-id\"],\"focused\":[4],\"signed\":[4],\"roleindex\":[2],\"preparedMessage\":[32],\"signatureUrl\":[32],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-organization-card.cjs\",[[0,\"verdocs-organization-card\",{\"organization\":[16]}]]],[\"verdocs-search-tabs.cjs\",[[0,\"verdocs-search-tabs\",{\"selected\":[32]}]]],[\"verdocs-status-indicator.cjs\",[[0,\"verdocs-status-indicator\",{\"size\":[1],\"theme\":[1],\"status\":[1],\"envelope\":[16],\"isOpen\":[32],\"recipientStatusIcons\":[32],\"containerId\":[32]}]]],[\"verdocs-template-card.cjs\",[[0,\"verdocs-template-card\",{\"template\":[16]}]]],[\"verdocs-template-tags.cjs\",[[0,\"verdocs-template-tags\",{\"tags\":[16]}]]],[\"verdocs-toggle.cjs\",[[0,\"verdocs-toggle\",{\"options\":[16],\"theme\":[1],\"selectedOption\":[32]}]]],[\"verdocs-radio-button.cjs\",[[0,\"verdocs-radio-button\",{\"checked\":[4],\"name\":[1],\"value\":[1],\"disabled\":[4]}]]],[\"verdocs-document-page_2.cjs\",[[0,\"verdocs-document-page\",{\"pageImageUri\":[1,\"page-image-uri\"],\"pageNumber\":[2,\"page-number\"],\"virtualWidth\":[2,\"virtual-width\"],\"virtualHeight\":[1026,\"virtual-height\"],\"layers\":[16],\"containerId\":[32],\"renderedWidth\":[32],\"renderedHeight\":[32],\"naturalWidth\":[32],\"naturalHeight\":[32],\"aspectRatio\":[32],\"skipFirstNotification\":[32]}],[0,\"verdocs-dropdown\",{\"options\":[16],\"open\":[32]}]]],[\"verdocs-view.cjs\",[[0,\"verdocs-view\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"]}]]],[\"verdocs-button.cjs\",[[0,\"verdocs-button\",{\"label\":[1],\"startIcon\":[1,\"start-icon\"],\"endIcon\":[1,\"end-icon\"],\"size\":[1],\"type\":[1],\"variant\":[1],\"disabled\":[4]}]]],[\"verdocs-upload-dialog.cjs\",[[0,\"verdocs-upload-dialog\",{\"draggingOver\":[32],\"decodedFiles\":[32]}]]],[\"verdocs-checkbox_4.cjs\",[[0,\"verdocs-checkbox\",{\"checked\":[4],\"name\":[1],\"label\":[1],\"value\":[1],\"theme\":[1],\"disabled\":[4]}],[0,\"verdocs-text-input\",{\"value\":[1],\"label\":[1],\"placeholder\":[1],\"autocomplete\":[1],\"helpText\":[1,\"help-text\"],\"type\":[1],\"disabled\":[4]}],[0,\"verdocs-component-error\",{\"message\":[1]}],[0,\"verdocs-help-icon\",{\"text\":[1],\"containerId\":[32]}]]],[\"verdocs-template-role-properties_2.cjs\",[[0,\"verdocs-template-role-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"roleName\":[1,\"role-name\"],\"sender\":[1],\"dirty\":[32],\"saving\":[32],\"name\":[32],\"type\":[32],\"fullName\":[32],\"email\":[32],\"phone\":[32],\"allowDelegation\":[32]}],[0,\"verdocs-template-sender\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"sender\":[1],\"saving\":[32]}]]],[\"verdocs-template-create_2.cjs\",[[0,\"verdocs-template-fields\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"toolbarTargetId\":[1,\"toolbar-target-id\"],\"placing\":[32],\"selectedRoleName\":[32],\"rerender\":[32]}],[0,\"verdocs-template-create\",{\"endpoint\":[16],\"file\":[32],\"creating\":[32]}]]],[\"verdocs-toggle-button.cjs\",[[0,\"verdocs-toggle-button\",{\"active\":[4],\"icon\":[1],\"label\":[1],\"size\":[1],\"_active\":[32]}]]],[\"verdocs-ok-dialog.cjs\",[[0,\"verdocs-ok-dialog\",{\"heading\":[1],\"message\":[1],\"showCancel\":[4,\"show-cancel\"]}]]],[\"verdocs-quick-functions_3.cjs\",[[0,\"verdocs-quick-functions\",{\"endpoint\":[16]}],[0,\"verdocs-search-activity\",{\"endpoint\":[16],\"type\":[1],\"options\":[8],\"emptyMessage\":[32],\"authFailure\":[32],\"title\":[32],\"recent\":[32],\"saved\":[32],\"starred\":[32]}],[0,\"verdocs-search-box\",{\"endpoint\":[16],\"placeholder\":[1],\"type\":[1],\"query\":[1],\"grabsFocus\":[4,\"grabs-focus\"],\"focusField\":[64]}]]],[\"verdocs-toolbar-icon.cjs\",[[0,\"verdocs-toolbar-icon\",{\"text\":[1],\"icon\":[1],\"placement\":[1],\"containerId\":[32]}]]],[\"verdocs-button-panel_3.cjs\",[[0,\"verdocs-template-field-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"fieldName\":[1,\"field-name\"],\"dirty\":[32],\"loading\":[32],\"type\":[32],\"name\":[32],\"roleName\":[32],\"required\":[32],\"placeholder\":[32],\"defaultValue\":[32]}],[4,\"verdocs-button-panel\",{\"icon\":[1],\"showPanel\":[64],\"hidePanel\":[64],\"toggle\":[64]}],[0,\"verdocs-select-input\",{\"value\":[1],\"label\":[1],\"options\":[16],\"disabled\":[4]}]]]]"), options);
 });

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, loading: "lazy", 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/embeds/verdocs-preview/verdocs-preview.stories.js

@@ -3,7 +3,8 @@ export default {
   title: 'Embeds/Preview',
   component: 'verdocs-preview',
   args: {
-    templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
+    templateId: 'ea7a792f-7e46-4662-a0ff-db6bd389306e',
+    // templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
   },
   argTypes: {
     templateId: { control: { type: 'string' } },