@verdocs/web-sdk 2.3.14 → 2.3.15

package/dist/components/verdocs-portal2.js

@@ -0,0 +1,93 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const verdocsPortalCss = "";
+
+const Z_INDEX = '10001';
+const VerdocsPortal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.clickAway = createEvent(this, "clickAway", 7);
+    this.moved = false;
+    this.anchor = undefined;
+    this.voffset = 0;
+    this.align = 'left';
+  }
+  handleScroll() {
+    this.calculatePosition();
+  }
+  handleResize() {
+    this.calculatePosition();
+  }
+  handleClick(e) {
+    var _a;
+    if (!this.element.contains(e.target)) {
+      (_a = this.clickAway) === null || _a === void 0 ? void 0 : _a.emit();
+    }
+  }
+  calculateLeft() {
+    const anchorEl = document.getElementById(this.anchor);
+    if (!anchorEl)
+      return 0;
+    const anchorRect = anchorEl.getBoundingClientRect();
+    if (this.align === 'left') {
+      return Math.max(anchorRect.left, 0);
+    }
+    if (this.align === 'right') {
+      return Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
+    }
+    return Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
+  }
+  calculateTop() {
+    const anchorEl = document.getElementById(this.anchor);
+    if (!anchorEl)
+      return 0;
+    const anchorRect = anchorEl.getBoundingClientRect();
+    return anchorRect.bottom + this.voffset;
+  }
+  calculatePosition() {
+    this.portal.style.top = `${this.calculateTop()}px`;
+    this.portal.style.left = `${this.calculateLeft()}px`;
+  }
+  componentWillLoad() {
+    var _a;
+    const id = `${this.anchor}-portal`;
+    (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
+    this.portal = document.createElement('div');
+    this.portal.setAttribute('id', id);
+    this.portal.style.zIndex = Z_INDEX;
+    this.portal.style.position = 'absolute';
+    document.body.append(this.portal);
+  }
+  componentDidLoad() {
+    this.portal.appendChild(this.element);
+    this.calculatePosition();
+  }
+  disconnectedCallback() {
+    this.moved ? this.portal.remove() : (this.moved = true);
+  }
+  render() {
+    return (h(Host, { ref: el => (this.element = el) }, h("slot", null)));
+  }
+  static get style() { return verdocsPortalCss; }
+}, [4, "verdocs-portal", {
+    "anchor": [1],
+    "voffset": [2],
+    "align": [1]
+  }, [[11, "scroll", "handleScroll"], [11, "resize", "handleResize"], [10, "click", "handleClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-portal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-portal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsPortal);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsPortal as V, defineCustomElement as d };

package/dist/components/verdocs-search.js

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { d as defineCustomElement$4 } from './verdocs-quick-functions2.js';
-import { d as defineCustomElement$3 } from './verdocs-search-activity2.js';
+import { d as defineCustomElement$3 } from './verdocs-quick-functions2.js';
 import { d as defineCustomElement$2 } from './verdocs-search-box2.js';
 
 const verdocsSearchCss = "verdocs-search{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;background-color:#1e2031}verdocs-search search-box{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:20px 10px}verdocs-search .boxes{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:20px 0}verdocs-search search-recent,verdocs-search search-saved,verdocs-search search-quick-functions,verdocs-search search-starred{display:-ms-flexbox;display:flex;margin:0 20px 20px 0}";
@@ -24,7 +23,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-search", "verdocs-quick-functions", "verdocs-search-activity", "verdocs-search-box"];
+  const components = ["verdocs-search", "verdocs-quick-functions", "verdocs-search-box"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-search":
       if (!customElements.get(tagName)) {
@@ -32,11 +31,6 @@ function defineCustomElement$1() {
       }
       break;
     case "verdocs-quick-functions":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "verdocs-search-activity":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/verdocs-send2.js

@@ -7,8 +7,9 @@ import { g as getRGBA } from './Colors.js';
 import { g as getTemplateStore } from './TemplateStore.js';
 import { b as getRoleIndex } from './utils.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$4 } from './verdocs-button2.js';
-import { d as defineCustomElement$3 } from './verdocs-contact-picker2.js';
+import { d as defineCustomElement$5 } from './verdocs-button2.js';
+import { d as defineCustomElement$4 } from './verdocs-contact-picker2.js';
+import { d as defineCustomElement$3 } from './verdocs-portal2.js';
 import { d as defineCustomElement$2 } from './verdocs-spinner2.js';
 import { d as defineCustomElement$1 } from './verdocs-toggle-button2.js';
 
@@ -153,7 +154,8 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Host, { class: { sendable: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
       var _a, _b, _c, _d, _e, _f;
       const unknown = !role.email;
-      return unknown ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))));
+      const elId = `verdocs-send-recipient-${role.name}`;
+      return unknown ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
     })))), h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
   }
   static get style() { return verdocsSendCss; }
@@ -173,7 +175,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-send", "verdocs-button", "verdocs-contact-picker", "verdocs-spinner", "verdocs-toggle-button"];
+  const components = ["verdocs-send", "verdocs-button", "verdocs-contact-picker", "verdocs-portal", "verdocs-spinner", "verdocs-toggle-button"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-send":
       if (!customElements.get(tagName)) {
@@ -182,10 +184,15 @@ function defineCustomElement() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "verdocs-contact-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-portal":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/verdocs-settings-organization2.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { z } from './index3.js';
 import './Types.js';
-import { g as getOrganization, u as updateOrganization } from './Organizations.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { d as convertToE164 } from './utils.js';
 import { V as VerdocsToast } from './Toast.js';
@@ -10,6 +9,28 @@ import { d as defineCustomElement$3 } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$2 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
 
+/**
+ * An Organization is the top level object for ownership for Members, Documents, and Templates.
+ *
+ * @module
+ */
+/**
+ * Get an organization by ID.
+ */
+var getOrganization = function (endpoint, organizationId) {
+    return endpoint.api //
+        .get("/organizations/".concat(organizationId))
+        .then(function (r) { return r.data; });
+};
+/**
+ * Update an organization.
+ */
+var updateOrganization = function (endpoint, organizationId, params) {
+    return endpoint.api //
+        .patch("/organizations/".concat(organizationId), params)
+        .then(function (r) { return r.data; });
+};
+
 const TimeZones = [
   ['International Date Line West', 'GMT-11:00', '(GMT-11:00) International Date Line West'],
   ['Midway Island', 'GMT-11:00', '(GMT-11:00) Midway Island'],

package/dist/components/verdocs-sign.js

@@ -85,6 +85,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.submitting = false;
     this.isDone = false;
     this.showDone = false;
+    this.showLoadError = false;
     this.finishLater = false;
     this.showFinishLater = false;
     this.agreed = false;
@@ -150,6 +151,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     catch (e) {
       console.log('Error with signing session', e);
       (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
+      this.showLoadError = true;
     }
   }
   componentDidRender() {
@@ -276,9 +278,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         if (!e.detail) {
           return;
         }
-        console.log('Creating signature blob', e.detail);
         const signatureBlob = await (await fetch(e.detail)).blob();
-        console.log('Created signature blob', signatureBlob);
         return createSignature(this.endpoint, 'signature', signatureBlob) //
           .then(async (newSignature) => {
           console.log('Signature update result', newSignature);
@@ -326,6 +326,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       case 'textarea':
       case 'date':
       case 'attachment':
+        console.log('Date-type field valid', { required, result, output: !required || result !== '' });
         return !required || result !== '';
       case 'dropdown':
         return !required || value !== '';
@@ -400,7 +401,6 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (invalidFields.length < 1) {
       this.nextButtonLabel = 'Finish';
       if (!this.nextSubmits) {
-        // this.showSubmitDialog = true;
         this.nextSubmits = true;
       }
     }
@@ -513,6 +513,9 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, onNext: () => (this.showFinishLater = false) })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
         this.showDone = false;
         this.isDone = true;
+      } })), this.showLoadError && (h("verdocs-ok-dialog", { heading: "Error Loading Document", message: `Please check with the sender to ensure it has not been canceled, and try again later.`, buttonLabel: "Retry", onNext: () => {
+        this.showLoadError = false;
+        window.location.reload();
       } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null))), !this.agreed && (h("div", { class: "cover" }, h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "By checking this box, you:", onInput: () => this.handleClickAgree() }), h("ul", null, h("li", null, "Agree to use electronic records and signatures, and confirm you have read the", ' ', h("a", { href: "https://verdocs.com/en/electronic-record-signature-disclosure/", target: "_blank" }, "Electronic Record and Signatures Disclosure"), "."), h("li", null, "Agree to Verdocs", ' ', h("a", { href: "https://verdocs.com/en/eula", target: "_blank" }, "End User License Agreement"), ' ', "and confirm you have read Verdocs'", ' ', h("a", { href: "https://verdocs.com/en/privacy-policy/", target: "_blank" }, "Privacy Policy"), ".")))))));
   }
   static get style() { return verdocsSignCss; }
@@ -534,6 +537,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "submitting": [32],
     "isDone": [32],
     "showDone": [32],
+    "showLoadError": [32],
     "finishLater": [32],
     "showFinishLater": [32],
     "agreed": [32],

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
-import { V as VerdocsEndpoint, a as createTemplate } from './VerdocsEndpoint.js';
+import { V as VerdocsEndpoint, a as createTemplatev2 } from './VerdocsEndpoint.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$4 } from './verdocs-button2.js';
 import { d as defineCustomElement$3 } from './verdocs-component-error2.js';
@@ -55,7 +55,7 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.creating = true;
     this.progressLabel = 'Uploading...';
     try {
-      const template = await createTemplate(this.endpoint, { name: this.file.name, documents: [this.file] }, percent => {
+      const template = await createTemplatev2(this.endpoint, { name: this.file.name, documents: [this.file] }, percent => {
         if (percent >= 99) {
           this.progressLabel = 'Processing...';
           this.progressPercent = 100;

package/dist/components/verdocs-template-field-properties2.js

@@ -223,6 +223,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     this.loading = true;
     this.type = 'signature';
     this.setting = null;
+    this.label = '';
     this.name = '';
     this.roleName = '';
     this.group = '';
@@ -257,6 +258,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
       }
       this.type = field.type;
       this.name = field.name;
+      this.label = field.label;
       this.group = field.name;
       this.roleName = field.role_name;
       this.required = field.required;
@@ -282,6 +284,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
     if (field) {
       this.name = field.name;
+      this.label = field.label;
       this.roleName = field.role_name;
       this.required = field.required;
       // TODO: Talk about how we want to handle labels/placeholders
@@ -296,6 +299,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     e.stopPropagation();
     const newProperties = {
       name: this.name,
+      label: this.label || null,
       required: this.required,
       role_name: this.roleName,
       // TODO: Default value in setting?
@@ -416,6 +420,11 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
       placeholder: "Field Name...", onInput: (e) => {
         this.name = e.target.value;
         this.dirty = true;
+      } })), h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-label", label: "Optional Label", value: this.label, autocomplete: "off",
+      //              helpText="The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key."
+      placeholder: "Optional Label...", onInput: (e) => {
+        this.label = e.target.value;
+        this.dirty = true;
       } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
         this.roleName = e.target.value;
         this.dirty = true;
@@ -465,6 +474,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     "loading": [32],
     "type": [32],
     "setting": [32],
+    "label": [32],
     "name": [32],
     "roleName": [32],
     "group": [32],

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { i as interact } from './interact.min.js';
+import { i as interact_min } from './interact.min.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { u as updateField, c as createField } from './Fields.js';
@@ -83,7 +83,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
   }
   componentDidRender() {
-    interact.dynamicDrop(true);
+    interact_min.dynamicDrop(true);
     const toolbarTarget = this.toolbarTargetId ? document.getElementById(this.toolbarTargetId) : null;
     const toolbarEl = document.getElementById('verdocs-template-fields-toolbar');
     if (toolbarTarget && toolbarEl) {
@@ -173,7 +173,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
   }
   makeDraggable(el) {
-    interact(el).draggable({
+    interact_min(el).draggable({
       listeners: {
         move: this.handleMoveField.bind(this),
         end: this.handleMoveEnd.bind(this),
@@ -193,52 +193,59 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   async handleMoveEnd(event) {
     var _a;
+    const name = event.target.getAttribute('name');
+    const option = +(event.target.getAttribute('option') || '0');
+    const field = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.find(field => field.name === name);
+    console.log('Dropped field', name, field);
+    if (!field) {
+      console.log('[FIELDS] Unable to find field', name);
+      return;
+    }
     const pageNumber = event.target.getAttribute('pageNumber');
     const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
     const clientRect = event.target.getBoundingClientRect();
     const parent = event.target.parentElement;
     const parentRect = parent.getBoundingClientRect();
+    const width = field.setting.width || defaultWidth(field.type);
+    const height = field.setting.height || defaultHeight(field.type);
     // These two being backwards is not a mistake. Left measures "over" from the left (positive displacement) while bottom measures
     // "up" from the bottom (negative displacement).
     const newX = Math.max(clientRect.left - parentRect.left, 0);
     const newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
-    const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - event.rect.width, naturalHeight - event.rect.height);
-    const name = event.target.getAttribute('name');
-    const option = +(event.target.getAttribute('option') || '0');
-    const field = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.find(field => field.name === name);
-    if (field) {
-      switch (field.type) {
-        case 'attachment':
-        case 'payment':
-        case 'initial':
-        case 'signature':
-        case 'date':
-        case 'dropdown':
-        case 'textarea':
-        case 'textbox':
-        case 'timestamp':
-          field.setting.x = x;
-          field.setting.y = y;
-          break;
-        case 'checkbox_group':
-        case 'radio_button_group':
-          {
-            const opt = field.setting.options[option];
-            if (opt) {
-              opt.x = x;
-              opt.y = y;
-            }
+    // console.log('Computing coordinates', {naturalWidth, width: event.rect.width, naturalHeight, height: event.rect.height, newX, newY});
+    const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - width, naturalHeight - height);
+    // console.log('Drop End', {x, y, newX, newY});
+    switch (field.type) {
+      case 'attachment':
+      case 'payment':
+      case 'initial':
+      case 'signature':
+      case 'date':
+      case 'dropdown':
+      case 'textarea':
+      case 'textbox':
+      case 'timestamp':
+        field.setting.x = x;
+        field.setting.y = y;
+        break;
+      case 'checkbox_group':
+      case 'radio_button_group':
+        {
+          const opt = field.setting.options[option];
+          if (opt) {
+            opt.x = x;
+            opt.y = y;
           }
-          break;
-      }
-      console.log('[FIELDS] Will update', name, option, field);
-      const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
-      const pageInfo = this.cachedPageInfo[pageNumber];
-      const roleIndex = getRoleIndex(getRoleNames(this.store), field.role_name);
-      this.handleFieldSettingsChange(pageInfo, field, roleIndex, event.target, newFieldData);
-      event.target.removeAttribute('posX');
-      event.target.removeAttribute('posY');
+        }
+        break;
     }
+    console.log('[FIELDS] Will update', name, option, field);
+    const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
+    const pageInfo = this.cachedPageInfo[pageNumber];
+    const roleIndex = getRoleIndex(getRoleNames(this.store), field.role_name);
+    this.handleFieldSettingsChange(pageInfo, field, roleIndex, event.target, newFieldData);
+    event.target.removeAttribute('posX');
+    event.target.removeAttribute('posY');
   }
   generateFieldName(type, pageNumber) {
     var _a;
@@ -255,6 +262,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     const { xScale = 1, yScale = 1, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
     const x = Math.floor(Math.min(viewX / xScale, xMax));
     const y = Math.floor(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));
+    console.log('Computed coordinates', { x, y, viewX, viewY, xMax, yMax });
     return { x, y };
   }
   async handleClickPage(e, pageNumber) {

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { i as interact } from './interact.min.js';
+import { i as interact_min } from './interact.min.js';
 import './Types.js';
 import { V as VerdocsEndpoint, b as TemplateSenderTypes } from './VerdocsEndpoint.js';
 import { u as updateRole, c as createRole, d as defineCustomElement$3 } from './verdocs-template-role-properties2.js';
@@ -75,8 +75,8 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.renumberTemplateRoles();
   }
   componentDidRender() {
-    interact.dynamicDrop(true);
-    interact('.recipient').draggable({
+    interact_min.dynamicDrop(true);
+    interact_min('.recipient').draggable({
       listeners: {
         start: function handleStart(e) {
           e.target.classList.add('dragging');
@@ -101,7 +101,7 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
         }.bind(this),
       },
     });
-    interact('.dropzone').dropzone({
+    interact_min('.dropzone').dropzone({
       overlap: 0.05,
       ondrop: function handleDrop(event) {
         var _a, _b, _c, _d, _e;