@verdocs/web-sdk 1.11.3 → 1.11.5

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

@@ -6,25 +6,27 @@ import { defaultHeight, defaultWidth, getRoleIndex, renderDocumentField, updateC
 import TemplateStore from '../../../utils/templateStore';
 import { loadTemplate } from '../../../utils/Templates';
 import { SDKError } from '../../../utils/errors';
-const iconSingleline = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
-const iconMultiline = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z"/></svg>';
-const iconCheck = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z"/></svg>';
-const iconRadio = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z"/></svg>';
-const iconDatepicker = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z"/></svg>';
-const iconSignature = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z"/></svg>';
-const iconInitial = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z"/></svg>';
+const iconSingleline = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
+const iconMultiline = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z"/></svg>';
+const iconCheck = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z"/></svg>';
+const iconRadio = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z"/></svg>';
+const iconDatepicker = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z"/></svg>';
+const iconSignature = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z"/></svg>';
+const iconInitial = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z"/></svg>';
+const iconClock = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path fill="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>';
+const iconBarsDown = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" /></svg>';
 const menuOptions = [
   // {id: 'attachment', tooltip: 'Attachment', icon: 'A'},
   { id: 'checkbox', tooltip: 'Check Box', icon: iconCheck },
   { id: 'date', tooltip: 'Date', icon: iconDatepicker },
-  { id: 'dropdown', tooltip: 'Dropdown', icon: 'O' },
+  { id: 'dropdown', tooltip: 'Dropdown', icon: iconBarsDown },
   { id: 'initial', tooltip: 'Initials', icon: iconInitial },
   // {id: 'payment', tooltip: 'Payment', icon: 'P'},
   { id: 'radio', tooltip: 'Radio Button', icon: iconRadio },
   { id: 'signature', tooltip: 'Signature', icon: iconSignature },
   { id: 'textarea', tooltip: 'Text Area', icon: iconMultiline },
   { id: 'textbox', tooltip: 'Text Box', icon: iconSingleline },
-  { id: 'timestamp', tooltip: 'Timestamp', icon: 'X' },
+  { id: 'timestamp', tooltip: 'Timestamp', icon: iconClock },
 ];
 /**
  * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to
@@ -36,6 +38,7 @@ export class VerdocsTemplateFields {
     this.cachedPageInfo = {};
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
+    this.toolbarTargetId = null;
     this.placing = null;
     this.selectedRoleName = '';
     this.rerender = 1;
@@ -70,6 +73,19 @@ export class VerdocsTemplateFields {
   }
   componentDidRender() {
     interact.dynamicDrop(true);
+    const toolbarTarget = this.toolbarTargetId ? document.getElementById(this.toolbarTargetId) : null;
+    const toolbarEl = document.getElementById('verdocs-template-fields-toolbar');
+    if (toolbarTarget && toolbarEl) {
+      console.log('[FIELDS] Moving toolbar');
+      toolbarEl.remove();
+      toolbarTarget.append(toolbarEl);
+    }
+  }
+  // Stop field-placement mode if ESC is pressed
+  handleKeyDown(ev) {
+    if (ev.key === 'Escape') {
+      this.placing = null;
+    }
   }
   async handleFieldChange(field, e, optionId) {
     console.log('[FIELDS] handleFieldChange', field, e, optionId);
@@ -84,6 +100,13 @@ export class VerdocsTemplateFields {
       this.rerender++;
       (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: TemplateStore.template, event: 'updated-field' });
     });
+    el.addEventListener('deleted', () => {
+      var _a;
+      console.log('deleted', this, field);
+      el.remove();
+      this.rerender++;
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: TemplateStore.template, event: 'updated-field' });
+    });
     el.setAttribute('roleindex', roleIndex);
     el.setAttribute('pageNumber', pageInfo.pageNumber);
     el.setAttribute('xScale', pageInfo.xScale);
@@ -153,10 +176,14 @@ export class VerdocsTemplateFields {
     }
   }
   generateFieldName(type, pageNumber) {
-    var _a;
-    const page = (_a = TemplateStore.template.pages) === null || _a === void 0 ? void 0 : _a[pageNumber - 1];
-    const fields = (page === null || page === void 0 ? void 0 : page.fields) || [];
-    return `${type}P${pageNumber}-${fields.length}`;
+    let i = 1;
+    let fieldName;
+    do {
+      fieldName = `${type}P${pageNumber}-${i}`;
+      i++;
+    } while (TemplateStore.fields.some(field => field.name === fieldName));
+    console.log('Field name', fieldName);
+    return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
   viewCoordinatesToPageCoordinates(viewX, viewY, pageNumber, xMax, yMax) {
@@ -168,6 +195,7 @@ export class VerdocsTemplateFields {
   async handleClickPage(e, page) {
     var _a;
     if (this.placing) {
+      console.log('Placing field', this.placing, page.sequence, e.offsetX, e.offsetY);
       const pageNumber = page.sequence;
       const clickedX = e.offsetX;
       const clickedY = e.offsetY;
@@ -241,15 +269,12 @@ export class VerdocsTemplateFields {
     pages.sort((a, b) => a.sequence - b.sequence);
     return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-r": this.rerender, onSubmit: () => {
         console.log('onSubmit');
-      } }, h("div", { class: "pages" }, pages.map(page => {
-      // console.log('rendering page', page);
+      } }, h("div", { id: "verdocs-template-fields-toolbar" }, menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => (this.placing = option.id) })))), h("div", { class: "pages" }, pages.map(page => {
       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' },
         ] }));
-    })), h("verdocs-floating-menu", { options: menuOptions, onOptionSelected: e => {
-        this.placing = e.detail.id;
-      } })));
+    }))));
   }
   static get is() { return "verdocs-template-fields"; }
   static get originalStyleUrls() {
@@ -302,6 +327,24 @@ export class VerdocsTemplateFields {
         "attribute": "template-id",
         "reflect": false,
         "defaultValue": "null"
+      },
+      "toolbarTargetId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | null",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If set, (recommended), the host application should create a <DIV> element with a unique ID. When this\ncomponent renders, the toolbar will be removed from its default location and placed in the target element.\nThis allows the parent application to more easily control its placement and scroll effects."
+        },
+        "attribute": "toolbar-target-id",
+        "reflect": false,
+        "defaultValue": "null"
       }
     };
   }
@@ -394,4 +437,13 @@ export class VerdocsTemplateFields {
         }
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/utils/Templates.js

@@ -22,7 +22,7 @@ export const loadTemplate = async (endpoint, templateId, forceReload = false) =>
   TemplateStore.template = null;
   try {
     console.log(`[TEMPLATES] Loading template ${templateId}`);
-    const template = await getTemplate(endpoint, templateId, true);
+    const template = await getTemplate(endpoint, templateId);
     if (!template) {
       console.log('[TEMPLATES] Unable to load template');
       return;

package/dist/components/Templates.js

@@ -23,7 +23,7 @@ const loadTemplate = async (endpoint, templateId, forceReload = false) => {
   state.template = null;
   try {
     console.log(`[TEMPLATES] Loading template ${templateId}`);
-    const template = await getTemplate(endpoint, templateId, true);
+    const template = await getTemplate(endpoint, templateId);
     if (!template) {
       console.log('[TEMPLATES] Unable to load template');
       return;

package/dist/components/verdocs-build.js

@@ -2,9 +2,8 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { l as loadTemplate } from './Templates.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$9 } from './verdocs-button2.js';
-import { d as defineCustomElement$8 } from './verdocs-component-error2.js';
-import { d as defineCustomElement$7 } from './verdocs-floating-menu2.js';
+import { d as defineCustomElement$8 } from './verdocs-button2.js';
+import { d as defineCustomElement$7 } from './verdocs-component-error2.js';
 import { d as defineCustomElement$6 } from './verdocs-loader2.js';
 import { d as defineCustomElement$5 } from './verdocs-template-create2.js';
 import { d as defineCustomElement$4 } from './verdocs-template-document-page2.js';
@@ -82,7 +81,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-build", "verdocs-button", "verdocs-component-error", "verdocs-floating-menu", "verdocs-loader", "verdocs-template-create", "verdocs-template-document-page", "verdocs-template-fields", "verdocs-toolbar-icon"];
+  const components = ["verdocs-build", "verdocs-button", "verdocs-component-error", "verdocs-loader", "verdocs-template-create", "verdocs-template-document-page", "verdocs-template-fields", "verdocs-toolbar-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-build":
       if (!customElements.get(tagName)) {
@@ -90,16 +89,11 @@ function defineCustomElement$1() {
       }
       break;
     case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "verdocs-component-error":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }
       break;
-    case "verdocs-floating-menu":
+    case "verdocs-component-error":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }

package/dist/components/verdocs-field-checkbox.js

@@ -19,6 +19,7 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     super();
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.option = 0;
     this.disabled = false;
@@ -51,7 +52,7 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     }
     return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-field-date.js

@@ -2570,6 +2570,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.__registerHost();
     this.settingsPress = createEvent(this, "settingsPress", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -2623,7 +2624,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     }
     return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-field-dropdown.js

@@ -11,6 +11,7 @@ const VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.__registerHost();
     this.fieldChange = createEvent(this, "fieldChange", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.disabled = false;
     this.roleindex = 0;

package/dist/components/verdocs-field-initial.js

@@ -24,6 +24,7 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.fieldChange = createEvent(this, "fieldChange", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.settingsPress = createEvent(this, "settingsPress", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.disabled = false;
     this.initials = '';
@@ -80,7 +81,7 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
     return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, value ? (h("img", { src: value, alt: "Initials" })) : (h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-field-payment.js

@@ -12,6 +12,7 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.signatureComplete = createEvent(this, "signatureComplete", 7);
     this.initialComplete = createEvent(this, "initialComplete", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this._fields = [];
     // envelopeFieldsFormGroup: FormGroup;
     this.signatureFile = null;

package/dist/components/verdocs-field-radio-button.js

@@ -21,6 +21,7 @@ const VerdocsFieldRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class extends
     super();
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.option = 0;
     this.disabled = false;
@@ -55,7 +56,7 @@ const VerdocsFieldRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class extends
     }
     return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", value: option.id, tabIndex: settings.order, name: this.field.name, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-field-signature.js

@@ -22,6 +22,7 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.fieldChange = createEvent(this, "fieldChange", 7);
     this.settingsPress = createEvent(this, "settingsPress", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.name = '';
     this.disabled = false;
@@ -79,7 +80,7 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     }
     return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-field-textarea.js

@@ -19,6 +19,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     super();
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -52,7 +53,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     }
     return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-field-textbox.js

@@ -19,6 +19,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     super();
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -53,7 +54,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
     return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-field-timestamp.js

@@ -20,6 +20,7 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     super();
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.deleted = createEvent(this, "deleted", 7);
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -59,7 +60,7 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
       // is encoded in a ton of existing entries in the database and is hard to change.
       value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;

package/dist/components/verdocs-floating-menu.js

@@ -1,4 +1,126 @@
-import { V as VerdocsFloatingMenu$1, d as defineCustomElement$1 } from './verdocs-floating-menu2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './verdocs-toolbar-icon2.js';
+
+const verdocsFloatingMenuCss = "verdocs-floating-menu{display:none}#verdocs-floating-menu{position:absolute;width:56px;height:56px;display:-ms-flexbox;display:flex;-ms-flex:0 0 fit-content;flex:0 0 fit-content}#verdocs-floating-menu:not(.force-closed):hover{height:500px}#verdocs-floating-menu:not(.force-closed):hover .trigger{-webkit-box-shadow:0 10px 25px #4c56cb;box-shadow:0 10px 25px #4c56cb;-webkit-transform:translatey(2px);transform:translatey(2px);-webkit-transition:all 0.3s;transition:all 0.3s}#verdocs-floating-menu:not(.force-closed):hover .options{display:-ms-flexbox;display:flex}#verdocs-floating-menu:not(.force-closed):hover .options .option{-webkit-animation:vfm-appear 0.1s forwards 0.2s;animation:vfm-appear 0.1s forwards 0.2s}#verdocs-floating-menu .trigger{position:absolute;width:56px;height:56px;background:#654dcb;bottom:0;border-radius:50%;left:0;right:0;margin:auto;color:white;line-height:52px;text-align:center;font-size:44px;z-index:100;-webkit-box-shadow:0 10px 25px -5px #4c56cb;box-shadow:0 10px 25px -5px #4c56cb;cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s}#verdocs-floating-menu .options{width:56px;-ms-flex-direction:column;flex-direction:column;-ms-flex:0 0 fit-content;flex:0 0 fit-content;position:absolute;bottom:70px;display:none}#verdocs-floating-menu .option{background:#654dcb;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:50%;width:36px;height:36px;margin:5px auto;color:white;font-weight:500;text-align:center;line-height:36px;opacity:0}#verdocs-floating-menu verdocs-toolbar-icon .icon{display:-ms-flexbox;display:flex}#verdocs-floating-menu verdocs-toolbar-icon .icon svg{fill:#ffffff}@-webkit-keyframes vfm-appear{0%{opacity:0}30%{-webkit-transform:scale(0.4);transform:scale(0.4);opacity:0.3}70%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0.6}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes vfm-appear{0%{opacity:0}30%{-webkit-transform:scale(0.4);transform:scale(0.4);opacity:0.3}70%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0.6}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}";
+
+// @see https://stackoverflow.com/a/49186677/1812436
+const getScrollParent = node => {
+  const regex = /(auto|scroll)/;
+  const parents = (_node, ps) => {
+    if (_node.parentNode === null) {
+      return ps;
+    }
+    return parents(_node.parentNode, ps.concat([_node]));
+  };
+  const style = (_node, prop) => getComputedStyle(_node, null).getPropertyValue(prop);
+  const overflow = _node => style(_node, 'overflow') + style(_node, 'overflow-y') + style(_node, 'overflow-x');
+  const scroll = _node => regex.test(overflow(_node));
+  const scrollParent = _node => {
+    if (!(_node instanceof HTMLElement || _node instanceof SVGElement)) {
+      return;
+    }
+    const ps = parents(_node.parentNode, []);
+    for (let i = 0; i < ps.length; i += 1) {
+      if (scroll(ps[i])) {
+        return ps[i];
+      }
+    }
+    return document.scrollingElement || document.documentElement;
+  };
+  return scrollParent(node);
+};
+const VerdocsFloatingMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.optionSelected = createEvent(this, "optionSelected", 7);
+    this.menuContainer = null;
+    this.scrollParent = null;
+    this.scrollParentParent = null;
+    this.options = [];
+  }
+  componentDidLoad() {
+    this.menuContainer = document.createElement('div');
+    this.menuContainer.id = 'verdocs-floating-menu';
+    let el = document.createElement('div');
+    el.className = 'trigger';
+    el.innerText = '+';
+    this.menuContainer.append(el);
+    el = document.createElement('div');
+    el.className = 'options';
+    this.menuContainer.append(el);
+    const localhandleSelect = this.handleSelect.bind(this);
+    this.options.forEach(option => {
+      const childEl = document.createElement('div');
+      childEl.className = 'option';
+      childEl.addEventListener('click', () => localhandleSelect(option));
+      el.append(childEl);
+      const iconEl = document.createElement('verdocs-toolbar-icon');
+      iconEl.setAttribute('icon', option.icon);
+      iconEl.setAttribute('text', option.tooltip);
+      iconEl.setAttribute('placement', 'left');
+      childEl.append(iconEl);
+    });
+    document.body.append(this.menuContainer);
+    this.scrollParent = getScrollParent(this.el);
+    if (this.scrollParent) {
+      this.scrollParentParent = this.scrollParent.parentElement;
+      this.repositionTrigger(this.scrollParent);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.menuContainer) === null || _a === void 0 ? void 0 : _a.remove();
+  }
+  handleSelect(option) {
+    var _a;
+    (_a = this.optionSelected) === null || _a === void 0 ? void 0 : _a.emit(option);
+    const el = document.getElementById('verdocs-floating-menu');
+    if (el) {
+      el.className = 'force-closed';
+      setTimeout(() => {
+        el.className = '';
+      }, 100);
+    }
+  }
+  repositionTrigger(scrollParent) {
+    const scrollParentParent = scrollParent.parentElement;
+    if (scrollParentParent) {
+      const bounds = scrollParentParent.getBoundingClientRect();
+      const menu = document.getElementById('verdocs-floating-menu');
+      if (menu) {
+        menu.style.bottom = `${document.documentElement.clientHeight - (document.documentElement.scrollTop + bounds.bottom) + 10}px`;
+        menu.style.left = `${bounds.right - 80}px`;
+      }
+    }
+  }
+  render() {
+    return h(Host, null);
+  }
+  get el() { return this; }
+  static get style() { return verdocsFloatingMenuCss; }
+}, [0, "verdocs-floating-menu", {
+    "options": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-floating-menu", "verdocs-toolbar-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-floating-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsFloatingMenu$1);
+      }
+      break;
+    case "verdocs-toolbar-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
 
 const VerdocsFloatingMenu = VerdocsFloatingMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-preview.js

@@ -36,9 +36,9 @@ const VerdocsPreview$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    console.log('[PREVIEW] Page rendered', pageInfo);
+    // console.log('[PREVIEW] Page rendered', pageInfo);
     const fields = state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
-    console.log('[PREVIEW] Fields on page', fields);
+    // console.log('[PREVIEW] Fields on page', fields);
     fields.forEach(field => renderDocumentField(field, pageInfo, getRoleIndex(state.roleNames, field.role_name), { disabled: true, editable: false, draggable: false }));
   }
   render() {

package/dist/components/verdocs-template-create2.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$3 } from './verdocs-button2.js';
 import { d as defineCustomElement$2 } from './verdocs-component-error2.js';
 import { d as defineCustomElement$1 } from './verdocs-loader2.js';
 
-const verdocsTemplateCreateCss = "verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;max-width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end;padding:0 0 30px 0}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
+const verdocsTemplateCreateCss = "verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end;padding:0 0 30px 0}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
 
 const unicodeNBSP = ' ';
 const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
@@ -43,7 +43,7 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class extends HTM
     (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit();
   }
   async handleSubmit(e) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     e.stopPropagation();
     // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.
     if (!this.file) {
@@ -55,19 +55,29 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class extends HTM
       console.log('[CREATE] Created template', template);
       const template_document = await createTemplateDocument(this.endpoint, template.id, this.file);
       console.log('[CREATE] Created document', template_document);
-      const finalTemplate = await getTemplate(this.endpoint, template.id);
-      console.log('[CREATE] Retrieved new template', finalTemplate);
-      // for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {
-      //   console.log('Updating page', pageNumber);
-      //   const page = await createPage(this.endpoint, template.id, {sequence: pageNumber, page_number: pageNumber, document_id: template_document.id});
-      //   console.log('Created page', page);
-      // }
-      (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(finalTemplate);
-      this.creating = false;
+      let finalTemplate = null;
+      const processingWait = setInterval(async () => {
+        var _a;
+        console.log('[CREATE] Waiting for template to be processed...', template_document);
+        finalTemplate = await getTemplate(this.endpoint, template.id);
+        if (finalTemplate === null || finalTemplate === void 0 ? void 0 : finalTemplate.processed) {
+          console.log('[CREATE] Retrieved new template', finalTemplate);
+          // for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {
+          //   console.log('Updating page', pageNumber);
+          //   const page = await createPage(this.endpoint, template.id, {sequence: pageNumber, page_number: pageNumber, document_id: template_document.id});
+          //   console.log('Created page', page);
+          // }
+          if (processingWait) {
+            clearInterval(processingWait);
+          }
+          (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(finalTemplate);
+          this.creating = false;
+        }
+      }, 3000);
     }
     catch (e) {
       console.log('[CREATE] Error creating template', e);
-      (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
+      (_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));
       this.creating = false;
     }
   }
@@ -75,7 +85,7 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), h("div", { class: "loading-text" }, "Uploading, please wait..."))) : (h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
+    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), h("div", { class: "loading-text" }, "Processing, please wait..."))) : (h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
         marginTop: '20px',
         marginBottom: '20px',
         fontSize: '16px',

package/dist/components/verdocs-template-document-page2.js

@@ -75,7 +75,7 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class exten
   }
   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) => {
+    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