@verdocs/web-sdk 2.2.8 → 2.2.10

package/dist/components/verdocs-build.js

@@ -3,27 +3,33 @@ 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$k } from './verdocs-button2.js';
-import { d as defineCustomElement$j } from './verdocs-checkbox2.js';
-import { d as defineCustomElement$i } from './verdocs-component-error2.js';
-import { d as defineCustomElement$h } from './verdocs-file-chooser2.js';
-import { d as defineCustomElement$g } from './verdocs-help-icon2.js';
-import { d as defineCustomElement$f } from './verdocs-loader2.js';
-import { d as defineCustomElement$e } from './verdocs-ok-dialog2.js';
-import { d as defineCustomElement$d } from './verdocs-progress-bar2.js';
-import { d as defineCustomElement$c } from './verdocs-radio-button2.js';
-import { d as defineCustomElement$b } from './verdocs-select-input2.js';
-import { d as defineCustomElement$a } from './verdocs-template-attachments2.js';
-import { d as defineCustomElement$9 } from './verdocs-template-create2.js';
-import { d as defineCustomElement$8 } from './verdocs-template-document-page2.js';
-import { d as defineCustomElement$7 } from './verdocs-template-fields2.js';
-import { d as defineCustomElement$6 } from './verdocs-template-role-properties2.js';
-import { d as defineCustomElement$5 } from './verdocs-template-roles2.js';
-import { d as defineCustomElement$4 } from './verdocs-template-sender2.js';
-import { d as defineCustomElement$3 } from './verdocs-text-input2.js';
+import { d as defineCustomElement$q } from './verdocs-button2.js';
+import { d as defineCustomElement$p } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$o } from './verdocs-component-error2.js';
+import { d as defineCustomElement$n } from './verdocs-contact-picker2.js';
+import { d as defineCustomElement$m } from './verdocs-file-chooser2.js';
+import { d as defineCustomElement$l } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$k } from './verdocs-loader2.js';
+import { d as defineCustomElement$j } from './verdocs-ok-dialog2.js';
+import { d as defineCustomElement$i } from './verdocs-preview2.js';
+import { d as defineCustomElement$h } from './verdocs-progress-bar2.js';
+import { d as defineCustomElement$g } from './verdocs-radio-button2.js';
+import { d as defineCustomElement$f } from './verdocs-select-input2.js';
+import { d as defineCustomElement$e } from './verdocs-send2.js';
+import { d as defineCustomElement$d } from './verdocs-template-attachments2.js';
+import { d as defineCustomElement$c } from './verdocs-template-document-page2.js';
+import { d as defineCustomElement$b } from './verdocs-template-fields2.js';
+import { d as defineCustomElement$a } from './verdocs-template-name2.js';
+import { d as defineCustomElement$9 } from './verdocs-template-reminders2.js';
+import { d as defineCustomElement$8 } from './verdocs-template-role-properties2.js';
+import { d as defineCustomElement$7 } from './verdocs-template-roles2.js';
+import { d as defineCustomElement$6 } from './verdocs-template-sender2.js';
+import { d as defineCustomElement$5 } from './verdocs-template-visibility2.js';
+import { d as defineCustomElement$4 } from './verdocs-text-input2.js';
+import { d as defineCustomElement$3 } from './verdocs-toggle-button2.js';
 import { d as defineCustomElement$2 } from './verdocs-toolbar-icon2.js';
 
-const verdocsBuildCss = "verdocs-build{display:-ms-flexbox;display:flex;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
+const verdocsBuildCss = "verdocs-build{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-build .steps{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;padding:0 20px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#46497d}verdocs-build .steps .step{height:50px;padding:0 20px;opacity:0.6;display:-ms-flexbox;display:flex;color:#ffffff;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-build .steps .step.active{opacity:1;background-color:#707ae5}verdocs-build .content{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}verdocs-build verdocs-template-attachments,verdocs-build verdocs-template-roles{margin:20px}verdocs-build verdocs-template-fields{border-top:1px solid #777777}verdocs-build verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-build verdocs-template-fields{width:100%}verdocs-build verdocs-preview{-ms-flex:1;flex:1}";
 
 const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -63,15 +69,13 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.step = 'preview';
     (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('');
   }
-  handleTemplateCreated(e) {
+  handleAttachmentsNext() {
     var _a;
-    console.log('Created', e.detail);
     this.step = 'roles';
     (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('roles');
   }
-  handleRolesDone(e) {
+  handleRolesNext() {
     var _a;
-    console.log('Roles', e.detail);
     this.step = 'fields';
     (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('fields');
   }
@@ -79,7 +83,7 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
-    return (h(Host, null, this.step === 'create' && h("verdocs-template-create", { onExit: e => this.handleCancel(e), onNext: e => this.handleTemplateCreated(e) }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, onExit: e => this.handleCancel(e), onNext: e => this.handleTemplateCreated(e) })), this.step === 'roles' && h("verdocs-template-roles", { onExit: e => this.handleCancel(e), onNext: e => this.handleTemplateCreated(e) }), this.step === 'settings' && h("verdocs-template-settings", { templateId: this.templateId }), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId }), this.step === 'preview' && h("verdocs-template-preview", null)));
+    return (h(Host, null, h("div", { class: "steps" }, h("div", { class: `step ${this.step === 'attachments' ? 'active' : ''}`, onClick: () => (this.step = 'attachments') }, "Attachments"), h("div", { class: `step ${this.step === 'roles' ? 'active' : ''}`, onClick: () => (this.step = 'roles') }, "Roles"), h("div", { class: `step ${this.step === 'settings' ? 'active' : ''}`, onClick: () => (this.step = 'settings') }, "Settings"), h("div", { class: `step ${this.step === 'fields' ? 'active' : ''}`, onClick: () => (this.step = 'fields') }, "Fields"), h("div", { class: `step ${this.step === 'preview' ? 'active' : ''}`, onClick: () => (this.step = 'preview') }, "Preview/Send")), h("div", { class: "content" }, this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext() })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleRolesNext() })), this.step === 'settings' && (h("div", { style: { flexDirection: 'column', gap: '20px', display: 'flex', maxWidth: '400px', margin: '20px' } }, h("verdocs-template-name", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' } }), h("verdocs-template-reminders", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' } }), h("verdocs-template-visibility", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' } }))), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint }), this.step === 'preview' && (h("div", { style: { flexDirection: 'row', display: 'flex', width: '100%' } }, h("div", { style: { display: 'flex', flex: '0' } }, h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint })), h("div", { style: { display: 'flex', flex: '1' } }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint })))))));
   }
   static get style() { return verdocsBuildCss; }
 }, [0, "verdocs-build", {
@@ -92,7 +96,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-build", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-loader", "verdocs-ok-dialog", "verdocs-progress-bar", "verdocs-radio-button", "verdocs-select-input", "verdocs-template-attachments", "verdocs-template-create", "verdocs-template-document-page", "verdocs-template-fields", "verdocs-template-role-properties", "verdocs-template-roles", "verdocs-template-sender", "verdocs-text-input", "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-preview", "verdocs-progress-bar", "verdocs-radio-button", "verdocs-select-input", "verdocs-send", "verdocs-template-attachments", "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)) {
@@ -101,90 +105,120 @@ function defineCustomElement$1() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$q();
       }
       break;
     case "verdocs-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$p();
       }
       break;
     case "verdocs-component-error":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$o();
+      }
+      break;
+    case "verdocs-contact-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$n();
       }
       break;
     case "verdocs-file-chooser":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$m();
       }
       break;
     case "verdocs-help-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$l();
       }
       break;
     case "verdocs-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$k();
       }
       break;
     case "verdocs-ok-dialog":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$j();
+      }
+      break;
+    case "verdocs-preview":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
       }
       break;
     case "verdocs-progress-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$h();
       }
       break;
     case "verdocs-radio-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$g();
       }
       break;
     case "verdocs-select-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$f();
+      }
+      break;
+    case "verdocs-send":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
       }
       break;
     case "verdocs-template-attachments":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "verdocs-template-document-page":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "verdocs-template-fields":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "verdocs-template-name":
       if (!customElements.get(tagName)) {
         defineCustomElement$a();
       }
       break;
-    case "verdocs-template-create":
+    case "verdocs-template-reminders":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }
       break;
-    case "verdocs-template-document-page":
+    case "verdocs-template-role-properties":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }
       break;
-    case "verdocs-template-fields":
+    case "verdocs-template-roles":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }
       break;
-    case "verdocs-template-role-properties":
+    case "verdocs-template-sender":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
       break;
-    case "verdocs-template-roles":
+    case "verdocs-template-visibility":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }
       break;
-    case "verdocs-template-sender":
+    case "verdocs-text-input":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }
       break;
-    case "verdocs-text-input":
+    case "verdocs-toggle-button":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

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-envelopes-list.js

@@ -17,7 +17,7 @@ import { d as defineCustomElement$4 } from './verdocs-spinner2.js';
 import { d as defineCustomElement$3 } from './verdocs-status-indicator2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-const verdocsEnvelopesListCss = "verdocs-envelopes-list{display:-ms-flexbox;display:flex;padding:10px;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-envelopes-list .envelope-placeholder{height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin:5px 0;border-radius:5px;background:#f5f5fa}verdocs-envelopes-list .header{width:100%;row-gap:4px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-envelopes-list .header .filter{width:300px}verdocs-envelopes-list .header verdocs-text-input{margin:0}verdocs-envelopes-list .header verdocs-text-input input{height:32px}verdocs-envelopes-list .filter{-ms-flex-align:center;align-items:center}verdocs-envelopes-list .envelope{width:100%;margin:3px 0;background:#ffffff}verdocs-envelopes-list .envelope:hover{cursor:pointer;background:#f5f5fa}verdocs-envelopes-list .envelope .inner{gap:14px;display:-ms-flexbox;display:flex;padding:8px 20px;border-radius:6px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}verdocs-envelopes-list .envelope .inner svg{width:24px;height:24px}verdocs-envelopes-list .vert-spacer{height:50px;display:-ms-flexbox;display:flex;-ms-flex:0 0 1px;flex:0 0 1px;border-right:1px solid #dad8dd}verdocs-envelopes-list .last-modified{color:#444;display:-ms-flexbox;display:flex;-ms-flex:0 0 180px;flex:0 0 180px;font-size:16px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;white-space:nowrap}verdocs-envelopes-list .envelope-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;color:#000000;font-size:18px;line-height:28px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}verdocs-envelopes-list .envelope-recipients{color:#4b5563;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}verdocs-envelopes-list .empty-text{font-size:20px;text-align:center;margin:16px 0 0 0;padding:80px 80px;border:2px solid #ccc}verdocs-envelopes-list .containing{gap:12px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}";
+const verdocsEnvelopesListCss = "verdocs-envelopes-list{display:-ms-flexbox;display:flex;padding:10px;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif}@media screen and (max-width: 800px){verdocs-envelopes-list{font-size:14px}}verdocs-envelopes-list .envelope-placeholder{height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin:5px 0;border-radius:5px;background:#f5f5fa}verdocs-envelopes-list .header{width:100%;row-gap:4px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-envelopes-list .header .filter{width:300px}verdocs-envelopes-list .header verdocs-text-input{margin:0}verdocs-envelopes-list .header verdocs-text-input input{height:32px}verdocs-envelopes-list .filter{-ms-flex-align:center;align-items:center}verdocs-envelopes-list .envelope{width:100%;margin:3px 0;background:#ffffff}verdocs-envelopes-list .envelope:hover{cursor:pointer;background:#f5f5fa}verdocs-envelopes-list .envelope .inner{gap:12px;display:-ms-flexbox;display:flex;padding:8px 14px;border-radius:5px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;container-type:inline-size}verdocs-envelopes-list .envelope .inner svg{width:24px;height:24px}verdocs-envelopes-list .vert-spacer{height:50px;display:-ms-flexbox;display:flex;-ms-flex:0 0 1px;flex:0 0 1px;border-right:1px solid #dad8dd}@media screen and (max-width: 800px){verdocs-envelopes-list .vert-spacer{display:none}}@media screen and (max-width: 800px){verdocs-envelopes-list .envelope-icon{display:none}}@media screen and (max-width: 800px){verdocs-envelopes-list verdocs-checkbox{display:none}}verdocs-envelopes-list .last-modified{color:#444;display:-ms-flexbox;display:flex;-ms-flex:0 0 180px;flex:0 0 180px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;white-space:nowrap}@media screen and (max-width: 800px){verdocs-envelopes-list .last-modified{display:none}}verdocs-envelopes-list .envelope-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;color:#000000;line-height:28px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}verdocs-envelopes-list .envelope-recipients{color:#4b5563;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}verdocs-envelopes-list .empty-text{text-align:center;margin:16px 0 0 0;padding:80px 80px;border:2px solid #ccc}verdocs-envelopes-list .containing{gap:12px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}@media screen and (max-width: 800px){verdocs-envelopes-list verdocs-status-indicator{font-size:14px}}";
 
 const DocumentIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000000" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" /></svg>`;
 const ViewFilters = [
@@ -241,7 +241,7 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
           else {
             this.selectedEnvelopes = this.selectedEnvelopes.filter(e => e.id !== envelope.id);
           }
-        } }), h("div", { class: "vert-spacer" }), h("span", { innerHTML: DocumentIcon }), h("div", { class: "envelope-name" }, envelope.name, ":\u00A0 ", h("div", { class: "envelope-recipients" }, envelope.recipients.map(r => r.full_name).join(', '))), h("div", { class: "vert-spacer" }), h("verdocs-status-indicator", { envelope: envelope, style: { width: '125px' } }), h("div", { class: "vert-spacer" }), h("div", { class: "last-modified" }, new Date(envelope.updated_at).toLocaleString()), h("div", { class: "vert-spacer" }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => {
+        } }), h("div", { class: "vert-spacer" }), h("span", { innerHTML: DocumentIcon, class: "envelope-icon" }), h("div", { class: "envelope-name" }, envelope.name, ":\u00A0 ", h("div", { class: "envelope-recipients" }, envelope.recipients.map(r => r.full_name).join(', '))), h("div", { class: "vert-spacer" }), h("verdocs-status-indicator", { envelope: envelope, style: { width: '125px' } }), h("div", { class: "vert-spacer" }), h("div", { class: "last-modified" }, new Date(envelope.updated_at).toLocaleString()), h("div", { class: "vert-spacer" }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => {
           var _a, _b;
           switch (e.detail.id) {
             case 'view':

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 };