@verdocs/web-sdk 2.2.9 → 2.2.11

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.js

@@ -1,7 +1,23 @@
 import { Host } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
 import { h } from '@stencil/core';
+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);
+  };
+}
 /**
  * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden
  * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label.
@@ -20,55 +36,56 @@ const DropdownArrow = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" vie
  */
 export class VerdocsDropdown {
   constructor() {
-    // 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 {
@@ -77,17 +94,12 @@ export class VerdocsDropdown {
   }
   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) })));
   }
   static get is() { return "verdocs-dropdown"; }
   static get originalStyleUrls() {
@@ -124,11 +136,6 @@ export class VerdocsDropdown {
       }
     };
   }
-  static get states() {
-    return {
-      "open": {}
-    };
-  }
   static get events() {
     return [{
         "method": "optionSelected",
@@ -152,4 +159,13 @@ export class VerdocsDropdown {
       }];
   }
   static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.stories.js

@@ -12,7 +12,7 @@ export default {
   component: 'verdocs-dropdown',
   // We can apply default args only shown in Storybook as follows
   args: {
-    options: [{ label: 'Option 1' }, { label: 'Disabled Option', disabled: true }, { lable: '' }, { label: 'Option 2' }],
+    options: [{ label: 'Option 1' }, { label: 'Disabled Option', disabled: true }, { label: '' }, { label: 'Option 2' }],
   },
   // Here we can apply overrides to component property documentation. Note that we don't need to (and shouldn't) specify every field
   // here. Only those that need special attention.

package/dist/collection/components/embeds/verdocs-build/verdocs-build.css

@@ -1,6 +1,50 @@
 verdocs-build {
   display: flex;
+  flex-direction: column;
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+}
+verdocs-build .steps {
+  flex: 0;
+  display: flex;
+  padding: 0 20px;
+  align-items: center;
+  flex-direction: row;
+  background-color: #46497d;
+}
+verdocs-build .steps .step {
+  height: 50px;
+  padding: 0 20px;
+  opacity: 0.6;
+  display: flex;
+  color: #ffffff;
+  cursor: pointer;
+  align-items: center;
   justify-content: center;
+}
+verdocs-build .steps .step.active {
+  opacity: 1;
+  background-color: #707ae5;
+}
+verdocs-build .content {
+  flex: 1;
+  display: flex;
   align-items: center;
+  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 {
+  flex: 1;
 }

package/dist/collection/components/embeds/verdocs-build/verdocs-build.js

@@ -39,23 +39,26 @@ export class VerdocsBuild {
     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');
   }
+  setStep(e, step) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.step = step;
+  }
   render() {
     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: e => this.setStep(e, 'attachments') }, "Attachments"), h("div", { class: `step ${this.step === 'roles' ? 'active' : ''}`, onClick: e => this.setStep(e, 'roles') }, "Roles"), h("div", { class: `step ${this.step === 'settings' ? 'active' : ''}`, onClick: e => this.setStep(e, 'settings') }, "Settings"), h("div", { class: `step ${this.step === 'fields' ? 'active' : ''}`, onClick: e => this.setStep(e, 'fields') }, "Fields"), h("div", { class: `step ${this.step === 'preview' ? 'active' : ''}`, onClick: e => this.setStep(e, '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 is() { return "verdocs-build"; }
   static get originalStyleUrls() {
@@ -113,9 +116,13 @@ export class VerdocsBuild {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'create' | 'attachments' | 'roles' | 'settings' | 'fields' | 'preview'",
-          "resolved": "\"attachments\" | \"create\" | \"fields\" | \"preview\" | \"roles\" | \"settings\"",
-          "references": {}
+          "original": "TVerdocsBuildStep",
+          "resolved": "\"attachments\" | \"fields\" | \"preview\" | \"roles\" | \"settings\"",
+          "references": {
+            "TVerdocsBuildStep": {
+              "location": "local"
+            }
+          }
         },
         "required": false,
         "optional": false,

package/dist/collection/components/embeds/verdocs-build/verdocs-build.stories.js

@@ -2,8 +2,12 @@ import { html } from 'lit-html';
 export default {
   title: 'Embeds/Build',
   component: 'verdocs-build',
+  args: {
+    templateId: '90c2e63d-6b61-4dd2-a2e2-e137778f5ab5',
+    step: 'preview',
+  },
   parameters: {
     layout: 'fullscreen',
   },
 };
-export const Build = ({}) => html `<verdocs-build />`;
+export const Build = ({ templateId, step }) => html `<verdocs-build .step=${step} .templateId=${templateId} />`;

package/dist/collection/components/templates/verdocs-template-roles/verdocs-template-roles.css

@@ -12,7 +12,7 @@ verdocs-template-roles > form {
 verdocs-template-roles > form h5 {
   font-size: 16px;
   font-weight: bold;
-  color: #4c56cb;
+  color: #46497d;
   margin: 0 0 10px 0;
 }
 verdocs-template-roles > form .participants {

package/dist/components/Validators.js

@@ -13,4 +13,4 @@ var isValidEmail = function (email) { return !!email && EMAIL_REGEX.test(email);
 var PHONE_REGEX = /((?:\+|00)[17](?: |\-)?|(?:\+|00)[1-9]\d{0,2}(?: |\-)?|(?:\+|00)1\-\d{3}(?: |\-)?)?(0\d|\([0-9]{3}\)|[1-9]{0,3})(?:((?: |\-)[0-9]{2}){4}|((?:[0-9]{2}){4})|((?: |\-)[0-9]{3}(?: |\-)[0-9]{4})|([0-9]{7}))/;
 var isValidPhone = function (phone) { return !!phone && PHONE_REGEX.test(phone); };
 
-export { isValidPhone as a, isValidEmail as i };
+export { isValidEmail as a, isValidPhone as i };

package/dist/components/utils.js

@@ -385,4 +385,4 @@ const convertToE164 = (input) => {
   return `+1${temp}`;
 };
 
-export { getRoleIndex as a, saveAttachment as b, getFieldId as c, convertToE164 as d, renderedTextWidth as e, updateCssTransform as f, getFieldSettings as g, defaultWidth as h, defaultHeight as i, saveCertificate as j, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };
+export { saveAttachment as a, getRoleIndex as b, getFieldId as c, convertToE164 as d, renderedTextWidth as e, updateCssTransform as f, getFieldSettings as g, defaultWidth as h, defaultHeight as i, saveCertificate as j, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };

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,23 +69,26 @@ 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');
   }
+  setStep(e, step) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.step = step;
+  }
   render() {
     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: e => this.setStep(e, 'attachments') }, "Attachments"), h("div", { class: `step ${this.step === 'roles' ? 'active' : ''}`, onClick: e => this.setStep(e, 'roles') }, "Roles"), h("div", { class: `step ${this.step === 'settings' ? 'active' : ''}`, onClick: e => this.setStep(e, 'settings') }, "Settings"), h("div", { class: `step ${this.step === 'fields' ? 'active' : ''}`, onClick: e => this.setStep(e, 'fields') }, "Fields"), h("div", { class: `step ${this.step === 'preview' ? 'active' : ''}`, onClick: e => this.setStep(e, '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 +101,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 +110,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();
       }