@verdocs/web-sdk 1.12.35 → 1.12.37

package/dist/cjs/verdocs-template-create_3.cjs.entry.js

@@ -3,19 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-67233b76.js');
-require('./Types-35abf4e8.js');
-const Templates = require('./Templates-ed812768.js');
+require('./Types-f89f9116.js');
+const Templates = require('./Templates-e258cbd5.js');
 const TemplateDocuments = require('./TemplateDocuments-1c6620b0.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-3e95f87f.js');
 const errors = require('./errors-0396da3d.js');
-const interact_min = require('./interact.min-29d23a9c.js');
+const interact_min = require('./interact.min-531805f2.js');
 const Fields = require('./Fields-705a2168.js');
-const utils = require('./utils-aa7160e9.js');
+const utils = require('./utils-3a88b566.js');
 const templateStore = require('./templateStore-1862f03c.js');
-const Templates$1 = require('./Templates-6705a1ce.js');
+const Templates$1 = require('./Templates-f310df2f.js');
 const Roles = require('./Roles-9b593b95.js');
 const Colors = require('./Colors-e809dcc9.js');
-require('./Envelopes-f81d02b1.js');
+require('./Envelopes-4d03f708.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
 require('./Primitives-be5088cb.js');
@@ -69,12 +69,15 @@ const VerdocsTemplateCreate = class {
       const template = await Templates.createTemplate(this.endpoint, { name: this.file.name });
       console.log('[CREATE] Created template', template);
       const template_document = await TemplateDocuments.createTemplateDocument(this.endpoint, template.id, this.file, percent => {
-        console.log('Upload progress', percent);
-        this.progressPercent = percent;
+        if (percent >= 99) {
+          this.progressLabel = 'Processing...';
+          this.progressPercent = 100;
+        }
+        else {
+          this.progressPercent = percent;
+        }
       });
       console.log('[CREATE] Created document', template_document);
-      this.progressLabel = 'Processing...';
-      this.progressPercent = 0;
       const finalTemplate = await Templates.getTemplate(this.endpoint, template.id);
       (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(finalTemplate);
       this.creating = false;
@@ -607,14 +610,12 @@ const VerdocsTemplateRoles = class {
       },
     });
   }
-  handleCancel(e) {
+  handleCancel() {
     var _a;
-    e.stopPropagation();
     (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
-  handleSubmit(e) {
+  handleSubmit() {
     var _a;
-    e.stopPropagation();
     (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit();
   }
   sortTemplateRoles() {
@@ -734,7 +735,7 @@ const VerdocsTemplateRoles = class {
       .map(role => {
       const unknown = !role.email;
       return unknown ? (index.h(index.Fragment, null, index.h("div", { class: "recipient", style: { backgroundColor: Colors.getRGBA(utils.getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, index.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), index.h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (index.h(index.Fragment, null, index.h("div", { class: "recipient", style: { borderColor: Colors.getRGBA(utils.getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, index.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.full_name, " ", index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), index.h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
-    }), index.h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), this.sequences.length > 0 && (index.h("div", { class: "row add-sequence", "data-sequence": sequence }, index.h("div", { class: "row-roles" }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), index.h("div", { class: "row", "data-sequence": this.sequences.length + 1 }, index.h("div", { class: "row-roles" }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: doneIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (index.h("div", { class: "empty" }, "You must add at least one Role before proceeding.", index.h("br", null), " Click the ", index.h("span", { innerHTML: plusIcon }), " Add button above to get started.")), index.h("div", { class: "buttons" }, index.h("div", { class: "flex-fill" }), index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (index.h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
+    }), index.h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), this.sequences.length > 0 && (index.h("div", { class: "row add-sequence", "data-sequence": sequence }, index.h("div", { class: "row-roles" }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), index.h("div", { class: "row", "data-sequence": this.sequences.length + 1 }, index.h("div", { class: "row-roles" }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: doneIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (index.h("div", { class: "empty" }, "You must add at least one Role before proceeding.", index.h("br", null), " Click the ", index.h("span", { innerHTML: plusIcon }), " Add button above to get started.")), index.h("div", { class: "buttons" }, index.h("div", { class: "flex-fill" }), index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), index.h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (index.h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
         this.showingRoleDialog = null;
         this.forceRerender++;
       }, onDelete: e => {

package/dist/cjs/verdocs-template-document-page.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-67233b76.js');
-require('./Types-35abf4e8.js');
+require('./Types-f89f9116.js');
 const TemplateDocuments = require('./TemplateDocuments-1c6620b0.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
-const utils = require('./utils-aa7160e9.js');
-require('./Envelopes-f81d02b1.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-3e95f87f.js');
+const utils = require('./utils-3a88b566.js');
+require('./Envelopes-4d03f708.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
 

package/dist/cjs/verdocs-template-name.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-67233b76.js');
-require('./Types-35abf4e8.js');
-const Templates$1 = require('./Templates-ed812768.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
+require('./Types-f89f9116.js');
+const Templates$1 = require('./Templates-e258cbd5.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-3e95f87f.js');
 const templateStore = require('./templateStore-1862f03c.js');
-const Templates = require('./Templates-6705a1ce.js');
+const Templates = require('./Templates-f310df2f.js');
 const errors = require('./errors-0396da3d.js');
 require('./Primitives-be5088cb.js');
 

package/dist/cjs/verdocs-template-properties.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-67233b76.js');
-require('./Types-35abf4e8.js');
-const Templates = require('./Templates-ed812768.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
+require('./Types-f89f9116.js');
+const Templates = require('./Templates-e258cbd5.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-3e95f87f.js');
 const errors = require('./errors-0396da3d.js');
 const templateStore = require('./templateStore-1862f03c.js');
 require('./Primitives-be5088cb.js');

package/dist/cjs/verdocs-template-reminders.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-67233b76.js');
-require('./Types-35abf4e8.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
+require('./Types-f89f9116.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-3e95f87f.js');
 const templateStore = require('./templateStore-1862f03c.js');
-const Templates = require('./Templates-6705a1ce.js');
+const Templates = require('./Templates-f310df2f.js');
 const errors = require('./errors-0396da3d.js');
 require('./Primitives-be5088cb.js');
-require('./Templates-ed812768.js');
+require('./Templates-e258cbd5.js');
 
 var createReminder = function (endpoint, templateId, params) {
     return endpoint.api //

package/dist/cjs/verdocs-template-role-properties_2.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-67233b76.js');
-require('./Types-35abf4e8.js');
+require('./Types-f89f9116.js');
 const Roles = require('./Roles-9b593b95.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-3e95f87f.js');
 const templateStore = require('./templateStore-1862f03c.js');
-const Templates = require('./Templates-6705a1ce.js');
+const Templates = require('./Templates-f310df2f.js');
 const errors = require('./errors-0396da3d.js');
-const Templates$1 = require('./Templates-ed812768.js');
+const Templates$1 = require('./Templates-e258cbd5.js');
 require('./Primitives-be5088cb.js');
 
 const verdocsTemplateRolePropertiesCss = "verdocs-template-role-properties{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-role-properties div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-role-properties .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-template-role-properties .dialog{width:340px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-template-role-properties .heading{display:-ms-flexbox;display:flex;font-size:20px;font-weight:500;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-role-properties .buttons verdocs-button{margin-left:16px}verdocs-template-role-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-role-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-role-properties verdocs-text-input{margin:0 0 10px 0}verdocs-template-role-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-role-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-role-properties verdocs-text-input verdocs-text-input{margin:0}verdocs-template-role-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-role-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-role-properties .delete-button:active{background:#f3f3f3}verdocs-template-role-properties .delete-button svg{width:24px;height:24px}";

package/dist/cjs/verdocs-template-visibility.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-67233b76.js');
-require('./Types-35abf4e8.js');
-const Templates$1 = require('./Templates-ed812768.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
+require('./Types-f89f9116.js');
+const Templates$1 = require('./Templates-e258cbd5.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-3e95f87f.js');
 const templateStore = require('./templateStore-1862f03c.js');
-const Templates = require('./Templates-6705a1ce.js');
+const Templates = require('./Templates-f310df2f.js');
 const errors = require('./errors-0396da3d.js');
 require('./Primitives-be5088cb.js');
 

package/dist/cjs/verdocs-view.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-67233b76.js');
-const Envelopes = require('./Envelopes-f81d02b1.js');
-const Types = require('./Types-35abf4e8.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
-const utils = require('./utils-aa7160e9.js');
+const Envelopes = require('./Envelopes-4d03f708.js');
+const Types = require('./Types-f89f9116.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-3e95f87f.js');
+const utils = require('./utils-3a88b566.js');
 const errors = require('./errors-0396da3d.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');

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

@@ -1,10 +1,13 @@
 verdocs-send {
-  display: flex;
   padding: 10px;
   position: relative;
   background: #ffffff;
   flex-direction: column;
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  display: none;
+}
+verdocs-send.sendable {
+  display: flex;
 }
 verdocs-send .recipients {
   position: relative;

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

@@ -15,6 +15,9 @@ const doneIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"
  * Because most applications have custom workflow requirements to trigger after sending an Envelope, this component does not actually
  * perform that operation. Parent applications should listen for the `onSend` event, and can pass the contents of `event.detail`
  * directly to the `createEnvelope()` call in JS-SDK.
+ *
+ * Host applications should ensure the template is "sendable" before displaying this component. To be sendable, a template must have
+ * at least one document attached, at least one participant defined, and at least one field assigned to every "signer" participant.
  */
 export class VerdocsSend {
   constructor() {
@@ -40,6 +43,9 @@ export class VerdocsSend {
     try {
       console.log(`[SEND] Loading template ${this.templateId}`);
       await loadTemplate(this.endpoint, this.templateId, true);
+      if (!TemplateStore.template.is_sendable) {
+        console.warn(`[SEND] Template is not sendable`, this.templateId);
+      }
       if ((_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles) {
         const rolesAtLevel = {};
         this.rolesCompleted = {};
@@ -99,14 +105,14 @@ export class VerdocsSend {
     (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
   render() {
-    const roleNames = TemplateStore.template.roles.map(role => role.name) || [];
+    var _a;
+    const roleNames = (((_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.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: {} }, 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 => {
+    return (h(Host, { class: { sendable: TemplateStore.template.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;
-      console.log('showing role', role);
       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 => console.log('Search', 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.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 => console.log('Search', e.detail) }))));
+      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 is() { return "verdocs-send"; }
@@ -228,6 +234,26 @@ export class VerdocsSend {
             }
           }
         }
+      }, {
+        "method": "searchContacts",
+        "name": "searchContacts",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user enters text in a search field. The parent application may use this to update\nthe `contactSuggestions` property."
+        },
+        "complexType": {
+          "original": "IContactSearchEvent",
+          "resolved": "IContactSearchEvent",
+          "references": {
+            "IContactSearchEvent": {
+              "location": "import",
+              "path": "../../elements/verdocs-contact-picker/verdocs-contact-picker"
+            }
+          }
+        }
       }];
   }
   static get methods() {

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

@@ -4,6 +4,7 @@ import { createInitials } from '@verdocs/js-sdk/Envelopes/Initials';
 import { fullNameToInitials } from '@verdocs/js-sdk/Utils/Primitives';
 import { createSignature } from '@verdocs/js-sdk/Envelopes/Signatures';
 import { isValidEmail, isValidPhone } from '@verdocs/js-sdk/Templates/Validators';
+import { RecipientStates } from '@verdocs/js-sdk/Envelopes/Types';
 import { Host, Fragment, h } from '@stencil/core';
 import { envelopeRecipientAgree, envelopeRecipientDecline, envelopeRecipientSubmit } from '@verdocs/js-sdk/Envelopes/Recipients';
 import { throttledGetEnvelope, updateEnvelopeFieldInitials, updateEnvelopeFieldSignature } from '@verdocs/js-sdk/Envelopes/Envelopes';
@@ -393,6 +394,22 @@ export class VerdocsSign {
       //   },
       // });
     });
+    this.envelope.recipients
+      .filter(r => r.role_name !== this.recipient.role_name && (r.status === RecipientStates.SUBMITTED || r.status === RecipientStates.CANCELED || r.status === RecipientStates.DECLINED))
+      .forEach(recipient => {
+      recipient.fields.forEach(field => {
+        const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: false, draggable: false, done: this.isDone });
+        if (!el) {
+          return;
+        }
+        if (Array.isArray(el)) {
+          el.map(e => this.attachFieldAttributes(pageInfo, field, roleIndex, e));
+        }
+        else {
+          this.attachFieldAttributes(pageInfo, field, roleIndex, el);
+        }
+      });
+    });
     // Render fields for "the other" recipients
     this.envelope.recipients
       .filter(recipient => recipient.role_name !== this.recipient.role_name)

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

@@ -50,12 +50,15 @@ export class VerdocsTemplateCreate {
       const template = await createTemplate(this.endpoint, { name: this.file.name });
       console.log('[CREATE] Created template', template);
       const template_document = await createTemplateDocument(this.endpoint, template.id, this.file, percent => {
-        console.log('Upload progress', percent);
-        this.progressPercent = percent;
+        if (percent >= 99) {
+          this.progressLabel = 'Processing...';
+          this.progressPercent = 100;
+        }
+        else {
+          this.progressPercent = percent;
+        }
       });
       console.log('[CREATE] Created document', template_document);
-      this.progressLabel = 'Processing...';
-      this.progressPercent = 0;
       const finalTemplate = await getTemplate(this.endpoint, template.id);
       (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(finalTemplate);
       this.creating = false;

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

@@ -146,14 +146,12 @@ export class VerdocsTemplateRoles {
       },
     });
   }
-  handleCancel(e) {
+  handleCancel() {
     var _a;
-    e.stopPropagation();
     (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
-  handleSubmit(e) {
+  handleSubmit() {
     var _a;
-    e.stopPropagation();
     (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit();
   }
   sortTemplateRoles() {
@@ -273,7 +271,7 @@ export class VerdocsTemplateRoles {
       .map(role => {
       const unknown = !role.email;
       return unknown ? (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (h(Fragment, null, h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.full_name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
-    }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), this.sequences.length > 0 && (h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), h("div", { class: "row", "data-sequence": this.sequences.length + 1 }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-roles" }, h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
+    }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), this.sequences.length > 0 && (h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), h("div", { class: "row", "data-sequence": this.sequences.length + 1 }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-roles" }, h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
         this.showingRoleDialog = null;
         this.forceRerender++;
       }, onDelete: e => {

package/dist/components/Envelopes.js

@@ -56,10 +56,10 @@ var getSigningSession = function (endpoint, params) { return __awaiter(void 0, v
 /**
  * Get all metadata for an Envelope.
  */
-var getEnvelope = function (endpoint, envelopeId, ssr) { return __awaiter(void 0, void 0, void 0, function () {
+var getEnvelope = function (endpoint, envelopeId) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
         return [2 /*return*/, endpoint.api //
-                .get("/envelopes/".concat(envelopeId) + (ssr ? '?ssr=true' : ''))
+                .get("/envelopes/".concat(envelopeId))
                 .then(function (r) { return r.data; })];
     });
 }); };
@@ -154,7 +154,7 @@ var throttledGetEnvelope = function (endpoint, envelopeId) {
     if (cachedEnvelopes[envelopeId] && cachedEnvelopes[envelopeId].loaded + 2000 < new Date().getTime()) {
         return cachedEnvelopes[envelopeId].envelope;
     }
-    return getEnvelope(endpoint, envelopeId, true).then(function (envelope) {
+    return getEnvelope(endpoint, envelopeId).then(function (envelope) {
         cachedEnvelopes[envelopeId] = { loaded: new Date().getTime(), envelope: envelope };
         return envelope;
     });

package/dist/components/Templates2.js

@@ -30,9 +30,9 @@ var getTemplates = function (endpoint, params) {
  * const template = await Templates.getTemplate((VerdocsEndpoint.getDefault(), '83da3d70-7857-4392-b876-c4592a304bc9');
  * ```
  */
-var getTemplate = function (endpoint, templateId, ssr) {
+var getTemplate = function (endpoint, templateId) {
     return endpoint.api //
-        .get("/templates/".concat(templateId) + (ssr ? '?ssr=true' : ''))
+        .get("/templates/".concat(templateId))
         .then(function (r) { return r.data; });
 };
 /**

package/dist/components/Types.js

@@ -112,4 +112,4 @@ var DocumentFieldTypes;
     DocumentFieldTypes["PAYMENT"] = "payment";
 })(DocumentFieldTypes || (DocumentFieldTypes = {}));
 
-export { EnvelopeStates as E, decodeAccessTokenBody as d };
+export { EnvelopeStates as E, RecipientStates as R, decodeAccessTokenBody as d };

package/dist/components/verdocs-send.js

@@ -11,7 +11,7 @@ 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{display:-ms-flexbox;display:flex;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}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 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>';
@@ -24,6 +24,7 @@ const VerdocsSend$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
@@ -46,6 +47,9 @@ const VerdocsSend$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     try {
       console.log(`[SEND] Loading template ${this.templateId}`);
       await loadTemplate(this.endpoint, this.templateId, true);
+      if (!state.template.is_sendable) {
+        console.warn(`[SEND] Template is not sendable`, this.templateId);
+      }
       if ((_a = state.template) === null || _a === void 0 ? void 0 : _a.roles) {
         const rolesAtLevel = {};
         this.rolesCompleted = {};
@@ -104,14 +108,14 @@ const VerdocsSend$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
   render() {
-    const roleNames = state.template.roles.map(role => role.name) || [];
+    var _a;
+    const roleNames = (((_a = state.template) === null || _a === void 0 ? void 0 : _a.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: {} }, 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 => {
+    return (h(Host, { class: { sendable: state.template.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;
-      console.log('showing role', role);
       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 => console.log('Search', 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.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 => console.log('Search', e.detail) }))));
+      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; }

package/dist/components/verdocs-sign.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { g as getSigningSession, t as throttledGetEnvelope, u as updateEnvelopeField, a as updateEnvelopeFieldSignature, b as updateEnvelopeFieldInitials } from './Envelopes.js';
-import './Types.js';
+import { R as RecipientStates } from './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators.js';
 import { f as fullNameToInitials } from './Primitives.js';
@@ -481,6 +481,22 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       //   },
       // });
     });
+    this.envelope.recipients
+      .filter(r => r.role_name !== this.recipient.role_name && (r.status === RecipientStates.SUBMITTED || r.status === RecipientStates.CANCELED || r.status === RecipientStates.DECLINED))
+      .forEach(recipient => {
+      recipient.fields.forEach(field => {
+        const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: false, draggable: false, done: this.isDone });
+        if (!el) {
+          return;
+        }
+        if (Array.isArray(el)) {
+          el.map(e => this.attachFieldAttributes(pageInfo, field, roleIndex, e));
+        }
+        else {
+          this.attachFieldAttributes(pageInfo, field, roleIndex, el);
+        }
+      });
+    });
     // Render fields for "the other" recipients
     this.envelope.recipients
       .filter(recipient => recipient.role_name !== this.recipient.role_name)

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

@@ -59,12 +59,15 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class extends HTM
       const template = await createTemplate(this.endpoint, { name: this.file.name });
       console.log('[CREATE] Created template', template);
       const template_document = await createTemplateDocument(this.endpoint, template.id, this.file, percent => {
-        console.log('Upload progress', percent);
-        this.progressPercent = percent;
+        if (percent >= 99) {
+          this.progressLabel = 'Processing...';
+          this.progressPercent = 100;
+        }
+        else {
+          this.progressPercent = percent;
+        }
       });
       console.log('[CREATE] Created document', template_document);
-      this.progressLabel = 'Processing...';
-      this.progressPercent = 0;
       const finalTemplate = await getTemplate(this.endpoint, template.id);
       (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(finalTemplate);
       this.creating = false;

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

@@ -161,14 +161,12 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
       },
     });
   }
-  handleCancel(e) {
+  handleCancel() {
     var _a;
-    e.stopPropagation();
     (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
-  handleSubmit(e) {
+  handleSubmit() {
     var _a;
-    e.stopPropagation();
     (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit();
   }
   sortTemplateRoles() {
@@ -288,7 +286,7 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
       .map(role => {
       const unknown = !role.email;
       return unknown ? (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (h(Fragment, null, h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.full_name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
-    }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), this.sequences.length > 0 && (h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), h("div", { class: "row", "data-sequence": this.sequences.length + 1 }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-roles" }, h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
+    }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), this.sequences.length > 0 && (h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), h("div", { class: "row", "data-sequence": this.sequences.length + 1 }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-roles" }, h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
         this.showingRoleDialog = null;
         this.forceRerender++;
       }, onDelete: e => {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-03-20T14:53:10",
+  "timestamp": "2023-03-22T15:00:52",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -5012,7 +5012,7 @@
       "filePath": "./src/components/embeds/verdocs-send/verdocs-send.tsx",
       "encapsulation": "none",
       "tag": "verdocs-send",
-      "docs": "Display a form to collect recipient information for a new Envelope. If used anonymously, the specified `templateId` must be public.\nBecause most applications have custom workflow requirements to trigger after sending an Envelope, this component does not actually\nperform that operation. Parent applications should listen for the `onSend` event, and can pass the contents of `event.detail`\ndirectly to the `createEnvelope()` call in JS-SDK.",
+      "docs": "Display a form to collect recipient information for a new Envelope. If used anonymously, the specified `templateId` must be public.\nBecause most applications have custom workflow requirements to trigger after sending an Envelope, this component does not actually\nperform that operation. Parent applications should listen for the `onSend` event, and can pass the contents of `event.detail`\ndirectly to the `createEnvelope()` call in JS-SDK.\n\nHost applications should ensure the template is \"sendable\" before displaying this component. To be sendable, a template must have\nat least one document attached, at least one participant defined, and at least one field assigned to every \"signer\" participant.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -5082,6 +5082,15 @@
           "docs": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component.",
           "docsTags": []
         },
+        {
+          "event": "searchContacts",
+          "detail": "IContactSearchEvent",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired when the user enters text in a search field. The parent application may use this to update\nthe `contactSuggestions` property.",
+          "docsTags": []
+        },
         {
           "event": "send",
           "detail": "{ roles: IRole[]; name: string; template_id: string; }",