@verdocs/web-sdk 2.3.6 → 2.3.8

package/dist/collection/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.css

@@ -1,6 +1,9 @@
 verdocs-contact-picker {
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  display: block;
+  border: 1px solid #ebebeb;
   background-color: #ffffff;
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
 }
 verdocs-contact-picker form {
   background-color: #f5f5fa;

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

@@ -25,7 +25,6 @@ export class VerdocsFieldDropdown {
   }
   async showSettingsPanel() {
     const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
-    console.log('will hide', settingsPanel);
     if (settingsPanel && settingsPanel.showPanel) {
       settingsPanel.showPanel();
     }

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

@@ -185,6 +185,7 @@ export class VerdocsTemplateFields {
     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;
@@ -194,12 +195,14 @@ export class VerdocsTemplateFields {
     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);
     // 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 - field.setting.width, naturalHeight - field.setting.height);
+    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':

package/dist/components/index.d.ts

@@ -35,6 +35,7 @@ export { VerdocsLoader as VerdocsLoader } from '../types/components/controls/ver
 export { VerdocsOkDialog as VerdocsOkDialog } from '../types/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog';
 export { VerdocsOrganizationCard as VerdocsOrganizationCard } from '../types/components/controls/verdocs-organization-card/verdocs-organization-card';
 export { VerdocsQuickFilter as VerdocsPagination } from '../types/components/controls/verdocs-pagination/verdocs-pagination';
+export { VerdocsPortal as VerdocsPortal } from '../types/components/controls/verdocs-portal/verdocs-portal';
 export { VerdocsPreview as VerdocsPreview } from '../types/components/embeds/verdocs-preview/verdocs-preview';
 export { VerdocsProgressBar as VerdocsProgressBar } from '../types/components/controls/verdocs-progress-bar/verdocs-progress-bar';
 export { VerdocsQuickFilter as VerdocsQuickFilter } from '../types/components/controls/verdocs-quick-filter/verdocs-quick-filter';

package/dist/components/index.js

@@ -35,6 +35,7 @@ export { VerdocsLoader, defineCustomElement as defineCustomElementVerdocsLoader
 export { VerdocsOkDialog, defineCustomElement as defineCustomElementVerdocsOkDialog } from './verdocs-ok-dialog.js';
 export { VerdocsOrganizationCard, defineCustomElement as defineCustomElementVerdocsOrganizationCard } from './verdocs-organization-card.js';
 export { VerdocsPagination, defineCustomElement as defineCustomElementVerdocsPagination } from './verdocs-pagination.js';
+export { VerdocsPortal, defineCustomElement as defineCustomElementVerdocsPortal } from './verdocs-portal.js';
 export { VerdocsPreview, defineCustomElement as defineCustomElementVerdocsPreview } from './verdocs-preview.js';
 export { VerdocsProgressBar, defineCustomElement as defineCustomElementVerdocsProgressBar } from './verdocs-progress-bar.js';
 export { VerdocsQuickFilter, defineCustomElement as defineCustomElementVerdocsQuickFilter } from './verdocs-quick-filter.js';

package/dist/components/verdocs-build.js

@@ -3,14 +3,15 @@ import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$u } from './verdocs-button2.js';
-import { d as defineCustomElement$t } from './verdocs-checkbox2.js';
-import { d as defineCustomElement$s } from './verdocs-component-error2.js';
-import { d as defineCustomElement$r } from './verdocs-contact-picker2.js';
-import { d as defineCustomElement$q } from './verdocs-file-chooser2.js';
-import { d as defineCustomElement$p } from './verdocs-help-icon2.js';
-import { d as defineCustomElement$o } from './verdocs-loader2.js';
-import { d as defineCustomElement$n } from './verdocs-ok-dialog2.js';
+import { d as defineCustomElement$v } from './verdocs-button2.js';
+import { d as defineCustomElement$u } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$t } from './verdocs-component-error2.js';
+import { d as defineCustomElement$s } from './verdocs-contact-picker2.js';
+import { d as defineCustomElement$r } from './verdocs-file-chooser2.js';
+import { d as defineCustomElement$q } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$p } from './verdocs-loader2.js';
+import { d as defineCustomElement$o } from './verdocs-ok-dialog2.js';
+import { d as defineCustomElement$n } from './verdocs-portal2.js';
 import { d as defineCustomElement$m } from './verdocs-preview2.js';
 import { d as defineCustomElement$l } from './verdocs-progress-bar2.js';
 import { d as defineCustomElement$k } from './verdocs-radio-button2.js';
@@ -143,7 +144,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-build", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-contact-picker", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-loader", "verdocs-ok-dialog", "verdocs-preview", "verdocs-progress-bar", "verdocs-radio-button", "verdocs-select-input", "verdocs-send", "verdocs-spinner", "verdocs-tabs", "verdocs-template-attachments", "verdocs-template-build-tabs", "verdocs-template-create", "verdocs-template-document-page", "verdocs-template-fields", "verdocs-template-name", "verdocs-template-reminders", "verdocs-template-role-properties", "verdocs-template-roles", "verdocs-template-sender", "verdocs-template-visibility", "verdocs-text-input", "verdocs-toggle-button", "verdocs-toolbar-icon"];
+  const components = ["verdocs-build", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-contact-picker", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-loader", "verdocs-ok-dialog", "verdocs-portal", "verdocs-preview", "verdocs-progress-bar", "verdocs-radio-button", "verdocs-select-input", "verdocs-send", "verdocs-spinner", "verdocs-tabs", "verdocs-template-attachments", "verdocs-template-build-tabs", "verdocs-template-create", "verdocs-template-document-page", "verdocs-template-fields", "verdocs-template-name", "verdocs-template-reminders", "verdocs-template-role-properties", "verdocs-template-roles", "verdocs-template-sender", "verdocs-template-visibility", "verdocs-text-input", "verdocs-toggle-button", "verdocs-toolbar-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-build":
       if (!customElements.get(tagName)) {
@@ -152,40 +153,45 @@ function defineCustomElement$1() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$u();
+        defineCustomElement$v();
       }
       break;
     case "verdocs-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$t();
+        defineCustomElement$u();
       }
       break;
     case "verdocs-component-error":
       if (!customElements.get(tagName)) {
-        defineCustomElement$s();
+        defineCustomElement$t();
       }
       break;
     case "verdocs-contact-picker":
       if (!customElements.get(tagName)) {
-        defineCustomElement$r();
+        defineCustomElement$s();
       }
       break;
     case "verdocs-file-chooser":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$r();
       }
       break;
     case "verdocs-help-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$q();
       }
       break;
     case "verdocs-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$p();
       }
       break;
     case "verdocs-ok-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$o();
+      }
+      break;
+    case "verdocs-portal":
       if (!customElements.get(tagName)) {
         defineCustomElement$n();
       }

package/dist/components/verdocs-contact-picker2.js

@@ -5,7 +5,7 @@ import { d as convertToE164 } from './utils.js';
 import { d as defineCustomElement$2 } from './verdocs-button2.js';
 import { d as defineCustomElement$1 } from './verdocs-toggle-button2.js';
 
-const verdocsContactPickerCss = "verdocs-contact-picker{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;background-color:#ffffff}verdocs-contact-picker form{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:1000000;position:absolute;background:#ffffff;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form .dropdown .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .dropdown .suggestion svg{fill:#666666}verdocs-contact-picker form .dropdown .suggestion .avatar{width:48px;height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin-right:8px;border-radius:100%}verdocs-contact-picker form .dropdown .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .dropdown .suggestion .name{font-size:16px;font-weight:500;margin-bottom:3px;color:#092c4c}verdocs-contact-picker form .dropdown .suggestion .destination{font-size:14px;margin-bottom:3px;color:#33364b}verdocs-contact-picker form .dropdown .suggestion:hover{background:#eee;cursor:pointer}verdocs-contact-picker .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-contact-picker ::-webkit-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-moz-placeholder{color:#aaaaaa}verdocs-contact-picker :-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::placeholder{color:#aaaaaa}verdocs-contact-picker [data-lastpass-icon-root]{display:none !important}";
+const verdocsContactPickerCss = "verdocs-contact-picker{display:block;border:1px solid #ebebeb;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:1000000;position:absolute;background:#ffffff;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form .dropdown .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .dropdown .suggestion svg{fill:#666666}verdocs-contact-picker form .dropdown .suggestion .avatar{width:48px;height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin-right:8px;border-radius:100%}verdocs-contact-picker form .dropdown .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .dropdown .suggestion .name{font-size:16px;font-weight:500;margin-bottom:3px;color:#092c4c}verdocs-contact-picker form .dropdown .suggestion .destination{font-size:14px;margin-bottom:3px;color:#33364b}verdocs-contact-picker form .dropdown .suggestion:hover{background:#eee;cursor:pointer}verdocs-contact-picker .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-contact-picker ::-webkit-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-moz-placeholder{color:#aaaaaa}verdocs-contact-picker :-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::placeholder{color:#aaaaaa}verdocs-contact-picker [data-lastpass-icon-root]{display:none !important}";
 
 const messageIcon = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>';
 const delegateIcon = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AssignmentIndIcon" tabindex="-1" title="AssignmentInd"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"></path></svg>';

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

@@ -37,7 +37,6 @@ const VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   async showSettingsPanel() {
     const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
-    console.log('will hide', settingsPanel);
     if (settingsPanel && settingsPanel.showPanel) {
       settingsPanel.showPanel();
     }

package/dist/components/verdocs-portal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsPortal extends Components.VerdocsPortal, HTMLElement {}
+export const VerdocsPortal: {
+  prototype: VerdocsPortal;
+  new (): VerdocsPortal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-portal.js

@@ -0,0 +1,6 @@
+import { V as VerdocsPortal$1, d as defineCustomElement$1 } from './verdocs-portal2.js';
+
+const VerdocsPortal = VerdocsPortal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsPortal, defineCustomElement };

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-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-template-fields2.js

@@ -196,6 +196,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     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;
@@ -205,12 +206,14 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     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);
     // 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 - field.setting.width, naturalHeight - field.setting.height);
+    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':

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-12-17T22:44:32",
+  "timestamp": "2023-12-21T15:00:03",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -562,6 +562,7 @@
           "verdocs-ok-dialog"
         ],
         "verdocs-send": [
+          "verdocs-portal",
           "verdocs-contact-picker",
           "verdocs-button",
           "verdocs-spinner"
@@ -5936,6 +5937,124 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/controls/verdocs-portal/verdocs-portal.tsx",
+      "encapsulation": "none",
+      "tag": "verdocs-portal",
+      "docs": "Display a child component in a \"portal\", popping it out of the main DOM tree\nto allow it to escape the bounds set by its parent.",
+      "docsTags": [
+        {
+          "name": "credit",
+          "text": "https://github.com/tomas-teston/stencil-portal for the basic\ntechnique. This has been altered in a few ways to make it more friendly\nto cases where there may be multiple portals on the page and provide more\nalignment options for the child to be displayed."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "align",
+          "type": "\"center\" | \"left\" | \"right\"",
+          "mutable": false,
+          "attr": "align",
+          "reflectToAttr": false,
+          "docs": "Horizontal alignment.",
+          "docsTags": [],
+          "default": "'left'",
+          "values": [
+            {
+              "value": "center",
+              "type": "string"
+            },
+            {
+              "value": "left",
+              "type": "string"
+            },
+            {
+              "value": "right",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "anchor",
+          "type": "string",
+          "mutable": false,
+          "attr": "anchor",
+          "reflectToAttr": false,
+          "docs": "Unique ID of the parent element to anchor to.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "voffset",
+          "type": "number",
+          "mutable": false,
+          "attr": "voffset",
+          "reflectToAttr": false,
+          "docs": "Vertical offset from the parent.",
+          "docsTags": [],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "clickAway",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "listeners": [
+        {
+          "event": "scroll",
+          "target": "window",
+          "capture": true,
+          "passive": true
+        },
+        {
+          "event": "resize",
+          "target": "window",
+          "capture": true,
+          "passive": true
+        },
+        {
+          "event": "click",
+          "target": "window",
+          "capture": true,
+          "passive": false
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [
+        "verdocs-send"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "verdocs-send": [
+          "verdocs-portal"
+        ]
+      }
+    },
     {
       "filePath": "./src/components/embeds/verdocs-preview/verdocs-preview.tsx",
       "encapsulation": "none",
@@ -6901,12 +7020,14 @@
         "verdocs-build"
       ],
       "dependencies": [
+        "verdocs-portal",
         "verdocs-contact-picker",
         "verdocs-button",
         "verdocs-spinner"
       ],
       "dependencyGraph": {
         "verdocs-send": [
+          "verdocs-portal",
           "verdocs-contact-picker",
           "verdocs-button",
           "verdocs-spinner"