@verdocs/web-sdk 2.2.9 → 2.2.11

package/dist/components/verdocs-dropdown2.js

@@ -1,63 +1,80 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as createPopper } from './popper.js';
 
-const verdocsDropdownCss = "verdocs-dropdown{font-family:\"Inter\", \"Barlow\", sans-serif;display:block}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown .items{width:200px;display:none;z-index:10000;border-radius:5px;background:#33354c;border:1px solid #654dcb}verdocs-dropdown .items[data-show]{display:block}verdocs-dropdown .option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}verdocs-dropdown .option:hover{cursor:pointer;background:#55bc81}verdocs-dropdown .option[disabled]{color:#aaaaaa}verdocs-dropdown .option[disabled]:hover{color:#aaaaaa;cursor:inherit;background:transparent}verdocs-dropdown .separator{border-top:1px solid #ffffff5f;height:1px;padding-top:5px;margin-top:5px}verdocs-dropdown.open .items{display:block}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}";
+const verdocsDropdownCss = "verdocs-dropdown{display:block;position:relative;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}#verdocs-dropdown-menu-items{width:200px;z-index:10000;position:absolute;border-radius:5px;background:#33354c;border:1px solid #654dcb}.verdocs-dropdown-menu-separator{height:1px;margin-top:5px;padding-top:5px;border-top:1px solid #ffffff5f}.verdocs-dropdown-menu-option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}.verdocs-dropdown-menu-option:hover{cursor:pointer;background:#55bc81}.verdocs-dropdown-menu-option[disabled]{color:#aaaaaa}.verdocs-dropdown-menu-option[disabled]:hover{cursor:inherit;background:transparent;color:#aaaaaa}";
 
+const MENU_ID = 'verdocs-dropdown-menu-items';
 const DropdownArrow = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#50BE80"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>`;
+function debounce(func, wait, immediate) {
+  let timeout;
+  return function () {
+    const context = this, args = arguments;
+    const later = function () {
+      timeout = null;
+      if (!immediate)
+        func.apply(context, args);
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow)
+      func.apply(context, args);
+  };
+}
 const VerdocsDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.optionSelected = createEvent(this, "optionSelected", 7);
-    // We need to do this to reliably disconnect the click-away listener
-    this.clickListenerSymbol = new AbortController();
     this.options = [];
-    this.open = undefined;
-  }
-  componentDidLoad() {
-    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 6] } }] });
-    window.addEventListener('click', this.clickListener.bind(this), { signal: this.clickListenerSymbol.signal });
   }
-  disconnectedCallback() {
-    this.clickListenerSymbol.abort();
-  }
-  clickListener(e) {
-    const outside = !(e.target == this.el || this.el.contains(e.target));
-    if (outside) {
-      this.hide();
-    }
+  // TODO: This isn't super efficient but it works for now
+  handleResize() {
+    debounce(this.repositionDropdown.bind(this), 100);
   }
   handleSelectOption(e, option) {
+    var _a;
     e.stopPropagation();
-    // this.isOpen = false;
-    this.optionSelected.emit(option);
+    (_a = this.optionSelected) === null || _a === void 0 ? void 0 : _a.emit(option);
     this.hide();
   }
+  repositionDropdown() {
+    var _a, _b;
+    const menu = document.getElementById(MENU_ID);
+    if (menu) {
+      const bodyWidth = document.body.scrollWidth;
+      const buttonRect = (_a = this.dropdownButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+      const triggerHeight = ((_b = this.dropdownButton) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 28;
+      menu.style.top = `${((buttonRect === null || buttonRect === void 0 ? void 0 : buttonRect.top) || 0) + triggerHeight}px`;
+      menu.style.right = `${Math.max(0, bodyWidth - ((buttonRect === null || buttonRect === void 0 ? void 0 : buttonRect.right) || 0))}px`;
+    }
+  }
   // See https://popper.js.org/docs/v2/tutorial/
   // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists
   showDropdown() {
-    var _a, _b;
-    // this.isOpen = true;
-    this.open = true;
-    this.dropdownMenu.setAttribute('data-show', '');
-    this.dropdownMenu.removeAttribute('aria-hidden');
-    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
-      ...options,
-      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],
-    })).catch(() => { });
-    (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
-  }
-  handleHideDropdown(e) {
-    var _a, _b;
-    if (((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.localName) === 'button' && ((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.className) === 'arrow') {
-      // This event is fired when a menu element is clicked because the button "loses focus" then too
-      return;
-    }
     this.hide();
+    const menu = document.createElement('div');
+    menu.id = MENU_ID;
+    this.options.forEach(option => {
+      if (!option.label) {
+        const separator = document.createElement('div');
+        separator.className = 'verdocs-dropdown-menu-separator';
+        menu.appendChild(separator);
+      }
+      else {
+        const button = document.createElement('button');
+        button.className = 'verdocs-dropdown-menu-option';
+        button.disabled = option.disabled || false;
+        button.innerHTML = option.label;
+        button.addEventListener('click', e => this.handleSelectOption(e, option));
+        menu.appendChild(button);
+      }
+    });
+    document.body.appendChild(menu);
+    setTimeout(this.repositionDropdown.bind(this), 50);
   }
-  toggleDropdown(e) {
+  toggle(e) {
     e.stopPropagation();
-    if (this.open) {
+    if (document.getElementById(MENU_ID)) {
       this.hide();
     }
     else {
@@ -66,24 +83,18 @@ const VerdocsDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   hide() {
     var _a;
-    this.open = false;
-    this.dropdownMenu.removeAttribute('data-show');
-    this.dropdownMenu.setAttribute('aria-hidden', 'true');
-    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
-      ...options,
-      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],
-    })).catch(() => { });
+    (_a = document.getElementById(MENU_ID)) === null || _a === void 0 ? void 0 : _a.remove();
   }
   render() {
-    var _a;
-    return (h(Host, { class: { open: !!this.open } }, h("button", { class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => option.label ? (h("button", { onClick: e => this.handleSelectOption(e, option), class: "option", disabled: option.disabled }, option.label)) : (h("div", { class: "separator" }))))));
+    return (h(Host, null, h("button", { class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
+      // onBlur={() => this.hide()}
+      ref: el => (this.dropdownButton = el) })));
   }
   get el() { return this; }
   static get style() { return verdocsDropdownCss; }
 }, [0, "verdocs-dropdown", {
-    "options": [16],
-    "open": [32]
-  }]);
+    "options": [16]
+  }, [[9, "resize", "handleResize"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/verdocs-preview.js

@@ -1,95 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import './Types.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { r as renderDocumentField, a as getRoleIndex } from './utils.js';
-import { g as getTemplateStore, a as getRoleNames } from './TemplateStore.js';
-import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$3 } from './verdocs-loader2.js';
-import { d as defineCustomElement$2 } from './verdocs-template-document-page2.js';
-
-const verdocsPreviewCss = "verdocs-preview{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
-
-const VerdocsPreview$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.sdkError = createEvent(this, "sdkError", 7);
-    this.store = null;
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateId = null;
-  }
-  async componentWillLoad() {
-    var _a, _b, _c;
-    try {
-      this.endpoint.loadSession();
-      if (!this.templateId) {
-        console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);
-        return;
-      }
-      if (!this.endpoint.session) {
-        console.log('[PREVIEW] Unable to start builder session, must be authenticated');
-        return;
-      }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
-      console.log(`[PREVIEW] Loading template ${this.templateId}`, this.endpoint.session);
-    }
-    catch (e) {
-      console.log('[PREVIEW] Error with preview session', e);
-      (_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));
-    }
-  }
-  handlePageRendered(e) {
-    var _a, _b;
-    const pageInfo = e.detail;
-    // console.log('[PREVIEW] Page rendered', pageInfo);
-    const fields = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
-    // console.log('[PREVIEW] Fields on page', fields);
-    fields.forEach(field => renderDocumentField(field, pageInfo, getRoleIndex(getRoleNames(this.store), field.role_name), { disabled: true, editable: false, draggable: false }));
-  }
-  render() {
-    var _a, _b, _c, _d;
-    // TODO: Render a better error
-    if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
-      return (h(Host, null, h("verdocs-loader", null)));
-    }
-    const pages = [...(_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.pages];
-    pages.sort((a, b) => a.sequence - b.sequence);
-    return (h(Host, null, pages.map(page => {
-      return (h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onPageRendered: e => this.handlePageRendered(e), layers: [
-          { name: 'page', type: 'canvas' },
-          { name: 'controls', type: 'div' },
-        ] }));
-    })));
-  }
-  static get style() { return verdocsPreviewCss; }
-}, [0, "verdocs-preview", {
-    "endpoint": [16],
-    "templateId": [1, "template-id"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-preview", "verdocs-loader", "verdocs-template-document-page"];
-  components.forEach(tagName => { switch (tagName) {
-    case "verdocs-preview":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsPreview$1);
-      }
-      break;
-    case "verdocs-loader":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "verdocs-template-document-page":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { V as VerdocsPreview$1, d as defineCustomElement$1 } from './verdocs-preview2.js';
 
 const VerdocsPreview = VerdocsPreview$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{esm/verdocs-preview.entry.js → components/verdocs-preview2.js}

@@ -1,22 +1,18 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-151c0874.js';
-import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
-import { r as renderDocumentField, a as getRoleIndex } from './utils-51d998e2.js';
-import { g as getTemplateStore, a as getRoleNames } from './TemplateStore-01a9d18f.js';
-import { S as SDKError } from './errors-9b5498c8.js';
-import './_commonjsHelpers-5ec8f9b7.js';
-import './Envelopes-5e32159f.js';
-import './Files-70a192df.js';
-import './Types-de18e225.js';
-import './index-914ed6f7.js';
-import './index-38d7bc0b.js';
-import './Templates-f90883f7.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { r as renderDocumentField, b as getRoleIndex } from './utils.js';
+import { g as getTemplateStore, a as getRoleNames } from './TemplateStore.js';
+import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$2 } from './verdocs-loader2.js';
+import { d as defineCustomElement$1 } from './verdocs-template-document-page2.js';
 
 const verdocsPreviewCss = "verdocs-preview{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
 
-const VerdocsPreview = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const VerdocsPreview = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
     this.sdkError = createEvent(this, "sdkError", 7);
     this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
@@ -65,7 +61,34 @@ const VerdocsPreview = class {
         ] }));
     })));
   }
-};
-VerdocsPreview.style = verdocsPreviewCss;
+  static get style() { return verdocsPreviewCss; }
+}, [0, "verdocs-preview", {
+    "endpoint": [16],
+    "templateId": [1, "template-id"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-preview", "verdocs-loader", "verdocs-template-document-page"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-preview":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsPreview);
+      }
+      break;
+    case "verdocs-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-template-document-page":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
 
-export { VerdocsPreview as verdocs_preview };
+export { VerdocsPreview as V, defineCustomElement as d };

package/dist/components/verdocs-send.js

@@ -1,166 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import './Types.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { i as isValidEmail, a as isValidPhone } from './Validators.js';
-import { g as getRGBA } from './Colors.js';
-import { g as getTemplateStore } from './TemplateStore.js';
-import { a 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$2 } from './verdocs-toggle-button2.js';
-
-const verdocsSendCss = "verdocs-send{padding:10px;position:relative;background:#ffffff;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:none}verdocs-send.sendable{display:-ms-flexbox;display:flex}verdocs-send .recipients{position:relative}verdocs-send .left-line{top:32px;left:20px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-send .level{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-left:50px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:8px 0 4px 0;border-bottom:1px solid #97979744}verdocs-send .level .level-icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-send .level .level-icon svg{fill:#00000089}verdocs-send .level .recipient{height:30px;display:-ms-flexbox;display:flex;-ms-flex:0 0 30px;flex:0 0 30px;color:#000000;cursor:pointer;font-size:14px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;background:#dddddd;white-space:nowrap;border:2px solid #dddddd;padding:2px 10px 2px 14px}verdocs-send .level .recipient .icon{width:22px;height:22px;-ms-flex:0 0 22px;flex:0 0 22px;margin:0 0 0 10px}verdocs-send .level .recipient .icon svg{width:22px;height:22px;fill:#333333;outline:none}verdocs-send .level .complete{-ms-flex:1;flex:1;height:30px;display:-ms-flexbox;display:flex;color:#000000;font-size:14px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:3px 10px 3px 2px}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-direction:row;flex-direction:row}verdocs-send verdocs-contact-picker{left:0;top:41px;z-index:10;position:absolute;border:1px solid #dddddd;-webkit-box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1)}";
-
-const editIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>';
-const startIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';
-const stepIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';
-const doneIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z"></path></svg>';
-const VerdocsSend$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.send = createEvent(this, "send", 7);
-    this.exit = createEvent(this, "exit", 7);
-    this.sdkError = createEvent(this, "sdkError", 7);
-    this.searchContacts = createEvent(this, "searchContacts", 7);
-    this.levels = [];
-    this.store = null;
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateId = null;
-    this.containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;
-    this.rolesAtLevel = {};
-    this.showPickerForId = '';
-    this.sessionContacts = [];
-    this.rolesCompleted = {};
-  }
-  async reset() {
-    this.rolesCompleted = {};
-  }
-  async componentWillLoad() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    try {
-      const loadSessionResult = this.endpoint.loadSession();
-      if (!this.templateId) {
-        console.log(`[SEND] Missing required template ID ${this.templateId}`);
-        return;
-      }
-      if (!this.endpoint.session) {
-        console.log('[SEND] Unable to start builder session, must be authenticated');
-        return;
-      }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
-      if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable)) {
-        console.warn(`[SEND] Template is not sendable`, this.templateId);
-      }
-      if ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles) {
-        const rolesAtLevel = {};
-        this.rolesCompleted = {};
-        (_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.roles.forEach(role => {
-          const level = role.sequence - 1;
-          rolesAtLevel[level] || (rolesAtLevel[level] = []);
-          const id = `r-${level}-${rolesAtLevel[level].length}`;
-          rolesAtLevel[level].push({ ...role, id });
-        });
-        this.rolesAtLevel = rolesAtLevel;
-        this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
-        this.levels.sort((a, b) => a - b);
-      }
-      if ((_g = loadSessionResult === null || loadSessionResult === void 0 ? void 0 : loadSessionResult.session) === null || _g === void 0 ? void 0 : _g.profile) {
-        this.sessionContacts.push({
-          id: loadSessionResult.session.profile.id,
-          name: `${loadSessionResult.session.profile.first_name} ${loadSessionResult.session.profile.last_name}`,
-          email: loadSessionResult.session.profile.email,
-          phone: loadSessionResult.session.profile.phone,
-        });
-      }
-    }
-    catch (e) {
-      console.log('[SEND] Error with preview session', e);
-      (_h = this.sdkError) === null || _h === void 0 ? void 0 : _h.emit(new SDKError(e.message, (_j = e.response) === null || _j === void 0 ? void 0 : _j.status, (_k = e.response) === null || _k === void 0 ? void 0 : _k.data));
-    }
-  }
-  getLevelIcon(level) {
-    if (level < 0) {
-      return h("div", { class: "level-icon", innerHTML: startIcon });
-    }
-    else if (level >= this.levels.length) {
-      return h("div", { class: "level-icon", innerHTML: doneIcon });
-    }
-    else {
-      return h("div", { class: "level-icon", innerHTML: stepIcon });
-    }
-  }
-  handleSelectContact(e, role) {
-    e.preventDefault();
-    this.rolesCompleted[role.id] = { ...role, ...e.detail };
-    this.showPickerForId = '';
-  }
-  handleClickRole(e, role) {
-    e.stopPropagation();
-    this.showPickerForId = role.id;
-  }
-  handleSend(e) {
-    var _a, _b, _c;
-    e.stopPropagation();
-    (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit({ roles: Object.values(this.rolesCompleted), name: (_c = (_b = this.store) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name, template_id: this.templateId });
-  }
-  handleCancel(e) {
-    var _a;
-    e.stopPropagation();
-    (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
-  }
-  render() {
-    var _a, _b, _c, _d;
-    const roleNames = (((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) || []).map(role => role.name) || [];
-    const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
-    const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-    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); } }))));
-    })))), 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) }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned, onClick: e => this.handleSend(e) }))));
-  }
-  static get style() { return verdocsSendCss; }
-}, [0, "verdocs-send", {
-    "endpoint": [16],
-    "templateId": [1, "template-id"],
-    "containerId": [32],
-    "rolesAtLevel": [32],
-    "showPickerForId": [32],
-    "sessionContacts": [32],
-    "rolesCompleted": [32],
-    "reset": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-send", "verdocs-button", "verdocs-contact-picker", "verdocs-toggle-button"];
-  components.forEach(tagName => { switch (tagName) {
-    case "verdocs-send":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsSend$1);
-      }
-      break;
-    case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "verdocs-contact-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "verdocs-toggle-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { V as VerdocsSend$1, d as defineCustomElement$1 } from './verdocs-send2.js';
 
 const VerdocsSend = VerdocsSend$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{esm/verdocs-send.entry.js → components/verdocs-send2.js}

@@ -1,18 +1,14 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-151c0874.js';
-import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
-import { i as isValidEmail, a as isValidPhone } from './Validators-f110bae2.js';
-import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getTemplateStore } from './TemplateStore-01a9d18f.js';
-import { a as getRoleIndex } from './utils-51d998e2.js';
-import { S as SDKError } from './errors-9b5498c8.js';
-import './index-38d7bc0b.js';
-import './Templates-f90883f7.js';
-import './_commonjsHelpers-5ec8f9b7.js';
-import './Envelopes-5e32159f.js';
-import './Files-70a192df.js';
-import './Types-de18e225.js';
-import './index-914ed6f7.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { a as isValidEmail, i as isValidPhone } from './Validators.js';
+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$3 } from './verdocs-button2.js';
+import { d as defineCustomElement$2 } from './verdocs-contact-picker2.js';
+import { d as defineCustomElement$1 } from './verdocs-toggle-button2.js';
 
 const verdocsSendCss = "verdocs-send{padding:10px;position:relative;background:#ffffff;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:none}verdocs-send.sendable{display:-ms-flexbox;display:flex}verdocs-send .recipients{position:relative}verdocs-send .left-line{top:32px;left:20px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-send .level{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-left:50px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:8px 0 4px 0;border-bottom:1px solid #97979744}verdocs-send .level .level-icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-send .level .level-icon svg{fill:#00000089}verdocs-send .level .recipient{height:30px;display:-ms-flexbox;display:flex;-ms-flex:0 0 30px;flex:0 0 30px;color:#000000;cursor:pointer;font-size:14px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;background:#dddddd;white-space:nowrap;border:2px solid #dddddd;padding:2px 10px 2px 14px}verdocs-send .level .recipient .icon{width:22px;height:22px;-ms-flex:0 0 22px;flex:0 0 22px;margin:0 0 0 10px}verdocs-send .level .recipient .icon svg{width:22px;height:22px;fill:#333333;outline:none}verdocs-send .level .complete{-ms-flex:1;flex:1;height:30px;display:-ms-flexbox;display:flex;color:#000000;font-size:14px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:3px 10px 3px 2px}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-direction:row;flex-direction:row}verdocs-send verdocs-contact-picker{left:0;top:41px;z-index:10;position:absolute;border:1px solid #dddddd;-webkit-box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1)}";
 
@@ -20,9 +16,10 @@ const editIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"
 const startIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';
 const stepIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';
 const doneIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z"></path></svg>';
-const VerdocsSend = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
     this.send = createEvent(this, "send", 7);
     this.exit = createEvent(this, "exit", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
@@ -124,7 +121,45 @@ const VerdocsSend = class {
       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); } }))));
     })))), 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) }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned, onClick: e => this.handleSend(e) }))));
   }
-};
-VerdocsSend.style = verdocsSendCss;
+  static get style() { return verdocsSendCss; }
+}, [0, "verdocs-send", {
+    "endpoint": [16],
+    "templateId": [1, "template-id"],
+    "containerId": [32],
+    "rolesAtLevel": [32],
+    "showPickerForId": [32],
+    "sessionContacts": [32],
+    "rolesCompleted": [32],
+    "reset": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-send", "verdocs-button", "verdocs-contact-picker", "verdocs-toggle-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-send":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsSend);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-contact-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-toggle-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
 
-export { VerdocsSend as verdocs_send };
+export { VerdocsSend as V, defineCustomElement as d };

package/dist/components/verdocs-sign.js

@@ -3,9 +3,9 @@ import { a as getSigningSession, t as throttledGetEnvelope, u as updateEnvelopeF
 import { R as RecipientStates } from './Types.js';
 import { e as envelopeRecipientAgree, a as envelopeRecipientDecline, b as envelopeRecipientSubmit } from './Recipients.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { a as isValidPhone, i as isValidEmail } from './Validators.js';
+import { i as isValidPhone, a as isValidEmail } from './Validators.js';
 import { f as fullNameToInitials, i as integerSequence } from './Primitives.js';
-import { b as saveAttachment, u as updateDocumentFieldValue, a as getRoleIndex, r as renderDocumentField, c as getFieldId } from './utils.js';
+import { a as saveAttachment, u as updateDocumentFieldValue, b as getRoleIndex, r as renderDocumentField, c as getFieldId } from './utils.js';
 import { a as FORMAT_DATE } from './Types2.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';