@verdocs/web-sdk 1.11.11 → 1.12.1

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

@@ -96,7 +96,7 @@ export class VerdocsSend {
   handleCancel(e) {
     var _a;
     e.stopPropagation();
-    (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit();
+    (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
   render() {
     const roleNames = TemplateStore.template.roles.map(role => role.name) || [];
@@ -104,7 +104,7 @@ export class VerdocsSend {
     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 => {
       var _a, _b, _c;
-      return (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", { onCancel: () => (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) }))));
+      return (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: `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"; }
@@ -192,14 +192,14 @@ export class VerdocsSend {
           }
         }
       }, {
-        "method": "cancel",
-        "name": "cancel",
+        "method": "exit",
+        "name": "exit",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "The user canceled the process."
+          "text": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name."
         },
         "complexType": {
           "original": "any",

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

@@ -18,7 +18,7 @@ export class VerdocsFieldAttachment {
   handleShow() {
     this.dialog = document.createElement('verdocs-upload-dialog');
     this.dialog.open = true;
-    this.dialog.addEventListener('cancel', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
+    this.dialog.addEventListener('exit', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
     document.addEventListener('done', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
     document.body.append(this.dialog);
   }

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

@@ -37,7 +37,7 @@ export class VerdocsFieldInitial {
     this.dialog = document.createElement('verdocs-initial-dialog');
     this.dialog.setAttribute('initials', this.initials);
     this.dialog.setAttribute('roleindex', this.roleindex);
-    this.dialog.addEventListener('cancel', () => this.hideDialog());
+    this.dialog.addEventListener('exit', () => this.hideDialog());
     this.dialog.addEventListener('next', e => this.handleAdopt(e));
     document.body.append(this.dialog);
   }
@@ -243,14 +243,14 @@ export class VerdocsFieldInitial {
           "references": {}
         }
       }, {
-        "method": "cancel",
-        "name": "cancel",
+        "method": "exit",
+        "name": "exit",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event emitted when the user cancels the process."
+          "text": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name."
         },
         "complexType": {
           "original": "any",

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

@@ -38,7 +38,7 @@ export class VerdocsFieldSignature {
     this.dialog = document.createElement('verdocs-signature-dialog');
     this.dialog.setAttribute('name', this.name);
     this.dialog.setAttribute('roleindex', this.roleindex);
-    this.dialog.addEventListener('cancel', () => this.hideDialog());
+    this.dialog.addEventListener('exit', () => this.hideDialog());
     this.dialog.addEventListener('next', e => this.handleAdopt(e));
     document.body.append(this.dialog);
   }

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

@@ -32,9 +32,7 @@ export class VerdocsTemplateCreate {
   }
   handleCancel(e) {
     e.stopPropagation();
-    console.log('Canceling');
-    this.testev.emit();
-    this.cancel.emit();
+    this.exit.emit();
   }
   async handleSubmit(e) {
     var _a, _b, _c;
@@ -131,29 +129,14 @@ export class VerdocsTemplateCreate {
   }
   static get events() {
     return [{
-        "method": "cancel",
-        "name": "cancel",
+        "method": "exit",
+        "name": "exit",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event fired when the user cancels the dialog."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "testev",
-        "name": "testev",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Test event for debugging"
+          "text": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name."
         },
         "complexType": {
           "original": "any",

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

@@ -4,8 +4,8 @@ export default {
   component: 'verdocs-template-create',
   args: {},
   argTypes: {
-    onCancel: { action: 'cancel' },
+    onExit: { action: 'exit' },
     onNext: { action: 'next' },
   },
 };
-export const Create = ({ onCancel, onNext }) => html `<verdocs-template-create @next=${onNext} @cancel=${onCancel} />`;
+export const Create = ({ onExit, onNext }) => html `<verdocs-template-create @next=${onNext} @exit=${onExit} />`;

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

@@ -13,20 +13,24 @@ const iconRadio = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24
 const iconDatepicker = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z"/></svg>';
 const iconSignature = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z"/></svg>';
 const iconInitial = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z"/></svg>';
-const iconClock = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path fill="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>';
+const iconClock = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="none"><path fill="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>';
 const iconBarsDown = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" /></svg>';
+const separator = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.707 14.707"><g><rect x="6.275" y="0" fill="#ffffff7f" width="1" height="15"/></g></svg>';
 const menuOptions = [
-  // {id: 'attachment', tooltip: 'Attachment', icon: 'A'},
-  { id: 'checkbox', tooltip: 'Check Box', icon: iconCheck },
-  { id: 'date', tooltip: 'Date', icon: iconDatepicker },
-  { id: 'dropdown', tooltip: 'Dropdown', icon: iconBarsDown },
-  { id: 'initial', tooltip: 'Initials', icon: iconInitial },
-  // {id: 'payment', tooltip: 'Payment', icon: 'P'},
-  { id: 'radio', tooltip: 'Radio Button', icon: iconRadio },
   { id: 'signature', tooltip: 'Signature', icon: iconSignature },
-  { id: 'textarea', tooltip: 'Text Area', icon: iconMultiline },
+  { id: 'initial', tooltip: 'Initials', icon: iconInitial },
+  { id: 'sep1', tooltip: '', icon: separator },
   { id: 'textbox', tooltip: 'Text Box', icon: iconSingleline },
+  { id: 'textarea', tooltip: 'Text Area', icon: iconMultiline },
+  { id: 'checkbox', tooltip: 'Check Box', icon: iconCheck },
+  { id: 'radio', tooltip: 'Radio Button', icon: iconRadio },
+  { id: 'dropdown', tooltip: 'Dropdown', icon: iconBarsDown },
+  { id: 'sep2', tooltip: '', icon: separator },
+  { id: 'date', tooltip: 'Date', icon: iconDatepicker },
   { id: 'timestamp', tooltip: 'Timestamp', icon: iconClock },
+  // {id: 'sep3', tooltip: '', icon: separator},
+  // {id: 'attachment', tooltip: 'Attachment', icon: 'A'},
+  // {id: 'payment', tooltip: 'Payment', icon: 'P'},
 ];
 /**
  * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to
@@ -271,7 +275,12 @@ export class VerdocsTemplateFields {
     pages.sort((a, b) => a.sequence - b.sequence);
     return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-r": this.rerender, onSubmit: () => {
         console.log('onSubmit');
-      } }, h("div", { id: "verdocs-template-fields-toolbar" }, menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => (this.placing = option.id) })))), h("div", { class: "pages" }, pages.map(page => {
+      } }, h("div", { id: "verdocs-template-fields-toolbar" }, menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => {
+        if (option.tooltip) {
+          // We have empty tooltips on the separators, quick hack...
+          this.placing = option.id;
+        }
+      } })))), h("div", { class: "pages" }, pages.map(page => {
       return (h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
@@ -359,41 +368,6 @@ export class VerdocsTemplateFields {
   }
   static get events() {
     return [{
-        "method": "next",
-        "name": "next",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user completes the step."
-        },
-        "complexType": {
-          "original": "ITemplate",
-          "resolved": "ITemplate",
-          "references": {
-            "ITemplate": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Templates/Types"
-            }
-          }
-        }
-      }, {
-        "method": "cancel",
-        "name": "cancel",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user cancels the dialog."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
         "method": "sdkError",
         "name": "sdkError",
         "bubbles": true,

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

@@ -3,17 +3,14 @@ export default {
   title: 'Templates/Fields',
   component: 'verdocs-template-fields',
   args: {
-    templateId: 'ea7a792f-7e46-4662-a0ff-db6bd389306e',
-    // templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
-  },
-  argTypes: {
-    onCancel: { action: 'cancel' },
-    onNext: { action: 'next' },
+    // templateId: 'ea7a792f-7e46-4662-a0ff-db6bd389306e',
+    templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
   },
+  argTypes: {},
   parameters: {
     layout: 'fullscreen',
   },
 };
-export const Fields = ({ templateId, onCancel, onNext }) => html `<div style="height: 600px">
-  <verdocs-template-fields .templateId=${templateId} @cancel=${onCancel} @next=${onNext} />
+export const Fields = ({ templateId }) => html `<div style="height: 600px">
+  <verdocs-template-fields .templateId=${templateId} />
 </div>`;

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

@@ -41,7 +41,7 @@ export class VerdocsTemplateProperties {
   handleCancel(e) {
     var _a;
     e.stopPropagation();
-    (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit();
+    (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
   handleSubmit(e) {
     var _a;
@@ -125,14 +125,14 @@ export class VerdocsTemplateProperties {
   }
   static get events() {
     return [{
-        "method": "cancel",
-        "name": "cancel",
+        "method": "exit",
+        "name": "exit",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event fired when the user cancels the dialog."
+          "text": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name."
         },
         "complexType": {
           "original": "any",

package/dist/collection/components/templates/verdocs-template-properties/verdocs-template-properties.stories.js

@@ -6,8 +6,8 @@ export default {
     templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
   },
   argTypes: {
-    onCancel: { action: 'cancel' },
+    onExit: { action: 'exit' },
     onNext: { action: 'next' },
   },
 };
-export const Properties = ({ onCancel, onNext, templateId }) => html `<verdocs-template-properties .templateId=${templateId} @cancel=${onCancel} @next=${onNext} />`;
+export const Properties = ({ onExit, onNext, templateId }) => html `<verdocs-template-properties .templateId=${templateId} @exit=${onExit} @next=${onNext} />`;

package/dist/collection/components/templates/{verdocs-template-recipients → verdocs-template-roles}/verdocs-template-roles.js

@@ -145,7 +145,7 @@ export class VerdocsTemplateRoles {
   handleCancel(e) {
     var _a;
     e.stopPropagation();
-    (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit();
+    (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
   handleSubmit(e) {
     var _a;
@@ -353,14 +353,14 @@ export class VerdocsTemplateRoles {
           "references": {}
         }
       }, {
-        "method": "cancel",
-        "name": "cancel",
+        "method": "exit",
+        "name": "exit",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event fired when the user cancels the dialog."
+          "text": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name."
         },
         "complexType": {
           "original": "any",

package/dist/collection/components/templates/{verdocs-template-recipients → verdocs-template-roles}/verdocs-template-roles.stories.js

@@ -8,7 +8,7 @@ export default {
   },
   argTypes: {
     onSave: { action: 'save' },
-    onCancel: { action: 'cancel' },
+    onExit: { action: 'exit' },
   },
 };
-export const Roles = ({ templateId, onCancel, onSave }) => html `<verdocs-template-roles .templateId=${templateId} @cancel=${onCancel} @save=${onSave} />`;
+export const Roles = ({ templateId, onExit, onSave }) => html `<verdocs-template-roles .templateId=${templateId} @exit=${onExit} @save=${onSave} />`;

package/dist/components/index.d.ts

@@ -49,7 +49,7 @@ export { VerdocsTemplateName as VerdocsTemplateName } from '../types/components/
 export { VerdocsTemplateProperties as VerdocsTemplateProperties } from '../types/components/templates/verdocs-template-properties/verdocs-template-properties';
 export { VerdocsTemplateReminders as VerdocsTemplateReminders } from '../types/components/templates/verdocs-template-reminders/verdocs-template-reminders';
 export { VerdocsTemplateRoleProperties as VerdocsTemplateRoleProperties } from '../types/components/templates/verdocs-template-role-properties/verdocs-template-role-properties';
-export { VerdocsTemplateRoles as VerdocsTemplateRoles } from '../types/components/templates/verdocs-template-recipients/verdocs-template-roles';
+export { VerdocsTemplateRoles as VerdocsTemplateRoles } from '../types/components/templates/verdocs-template-roles/verdocs-template-roles';
 export { VerdocsTemplateSender as VerdocsTemplateSender } from '../types/components/templates/verdocs-template-sender/verdocs-template-sender';
 export { VerdocsTemplateTags as VerdocsTemplateTags } from '../types/components/controls/verdocs-template-tags/verdocs-template-tags';
 export { VerdocsTemplateVisibility as VerdocsTemplateVisibility } from '../types/components/templates/verdocs-template-visibillity/verdocs-template-visibility';

package/dist/components/verdocs-build.js

@@ -55,19 +55,11 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.step = 'fields';
     // this.step = 'properties';
   }
-  handlePropertiesUpdated(e) {
-    console.log('updated', e.detail);
-    this.step = 'recipients';
-  }
-  handleRecipientsUpdated(e) {
-    console.log('updated', e.detail);
-    this.step = 'fields';
-  }
   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", { onCancel: e => this.handleCancel(e), onNext: e => this.handleTemplateCreated(e) }), this.step === 'fields' && h("verdocs-template-fields", { onCancel: e => this.handleCancel(e), onNext: e => this.handleCancel(e) })));
+    return (h(Host, null, this.step === 'create' && h("verdocs-template-create", { onExit: e => this.handleCancel(e), onNext: e => this.handleTemplateCreated(e) }), this.step === 'fields' && h("verdocs-template-fields", null)));
   }
   static get style() { return verdocsBuildCss; }
 }, [0, "verdocs-build", {

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

@@ -13,7 +13,7 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class extends HTML
     super();
     this.__registerHost();
     this.searchContacts = createEvent(this, "searchContacts", 7);
-    this.cancel = createEvent(this, "cancel", 7);
+    this.exit = createEvent(this, "exit", 7);
     this.next = createEvent(this, "next", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateRole = null;
@@ -57,7 +57,7 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class extends HTML
     var _a;
     e.stopPropagation();
     this.showSuggestions = false;
-    (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit();
+    (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
   handleSubmit(e) {
     var _a;

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

@@ -22,7 +22,7 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
   handleShow() {
     this.dialog = document.createElement('verdocs-upload-dialog');
     this.dialog.open = true;
-    this.dialog.addEventListener('cancel', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
+    this.dialog.addEventListener('exit', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
     document.addEventListener('done', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
     document.body.append(this.dialog);
   }

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

@@ -20,7 +20,7 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     super();
     this.__registerHost();
     this.adopt = createEvent(this, "adopt", 7);
-    this.cancel = createEvent(this, "cancel", 7);
+    this.exit = createEvent(this, "exit", 7);
     this.fieldChange = createEvent(this, "fieldChange", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.settingsPress = createEvent(this, "settingsPress", 7);
@@ -53,7 +53,7 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.dialog = document.createElement('verdocs-initial-dialog');
     this.dialog.setAttribute('initials', this.initials);
     this.dialog.setAttribute('roleindex', this.roleindex);
-    this.dialog.addEventListener('cancel', () => this.hideDialog());
+    this.dialog.addEventListener('exit', () => this.hideDialog());
     this.dialog.addEventListener('next', e => this.handleAdopt(e));
     document.body.append(this.dialog);
   }

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

@@ -52,7 +52,7 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.dialog = document.createElement('verdocs-signature-dialog');
     this.dialog.setAttribute('name', this.name);
     this.dialog.setAttribute('roleindex', this.roleindex);
-    this.dialog.addEventListener('cancel', () => this.hideDialog());
+    this.dialog.addEventListener('exit', () => this.hideDialog());
     this.dialog.addEventListener('next', e => this.handleAdopt(e));
     document.body.append(this.dialog);
   }

package/dist/components/verdocs-initial-dialog2.js

@@ -10,7 +10,7 @@ const VerdocsInitialDialog = /*@__PURE__*/ proxyCustomElement(class extends HTML
     super();
     this.__registerHost();
     this.next = createEvent(this, "next", 7);
-    this.cancel = createEvent(this, "cancel", 7);
+    this.exit = createEvent(this, "exit", 7);
     this.initials = '';
     this.fontLoaded = false;
     this.enteredInitials = '';
@@ -53,7 +53,7 @@ const VerdocsInitialDialog = /*@__PURE__*/ proxyCustomElement(class extends HTML
   handleCancel(e) {
     e.stopPropagation();
     e.preventDefault();
-    this.cancel.emit();
+    this.exit.emit();
   }
   handleAdopt(e) {
     e.stopPropagation();

package/dist/components/verdocs-kba-dialog.js

@@ -8,7 +8,7 @@ const VerdocsKbaDialog$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   constructor() {
     super();
     this.__registerHost();
-    this.cancel = createEvent(this, "cancel", 7);
+    this.exit = createEvent(this, "exit", 7);
     this.next = createEvent(this, "next", 7);
     this.step = 1;
     this.steps = 3;
@@ -21,7 +21,7 @@ const VerdocsKbaDialog$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.response = '';
   }
   handleCancel() {
-    this.cancel.emit();
+    this.exit.emit();
   }
   // We need a separate event handler for clicking the background because it can receive events "through" other child components
   handleDismiss(e) {

package/dist/components/verdocs-ok-dialog2.js

@@ -8,7 +8,7 @@ const VerdocsOkDialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     super();
     this.__registerHost();
     this.next = createEvent(this, "next", 7);
-    this.cancel = createEvent(this, "cancel", 7);
+    this.exit = createEvent(this, "exit", 7);
     this.heading = '';
     this.message = '';
     this.showCancel = false;
@@ -17,13 +17,13 @@ const VerdocsOkDialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.next.emit();
   }
   handleCancel() {
-    this.cancel.emit();
+    this.exit.emit();
   }
   // We need a separate event handler for clicking the background because it can receive events "through" other child components
   handleDismiss(e) {
     if (e.target.className === 'background-overlay') {
       e.preventDefault();
-      this.cancel.emit();
+      this.exit.emit();
     }
   }
   render() {

package/dist/components/verdocs-send.js

@@ -21,7 +21,7 @@ const VerdocsSend$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.send = createEvent(this, "send", 7);
-    this.cancel = createEvent(this, "cancel", 7);
+    this.exit = createEvent(this, "exit", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
     this.levels = [];
     this.endpoint = VerdocsEndpoint.getDefault();
@@ -100,7 +100,7 @@ const VerdocsSend$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   handleCancel(e) {
     var _a;
     e.stopPropagation();
-    (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit();
+    (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
   render() {
     const roleNames = state.template.roles.map(role => role.name) || [];
@@ -108,7 +108,7 @@ const VerdocsSend$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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 => {
       var _a, _b, _c;
-      return (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", { onCancel: () => (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) }))));
+      return (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: `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-signature-dialog2.js

@@ -10,7 +10,7 @@ const VerdocsSignatureDialog = /*@__PURE__*/ proxyCustomElement(class extends HT
     super();
     this.__registerHost();
     this.next = createEvent(this, "next", 7);
-    this.cancel = createEvent(this, "cancel", 7);
+    this.exit = createEvent(this, "exit", 7);
     this.name = '';
     this.fontLoaded = false;
     this.enteredName = '';
@@ -53,7 +53,7 @@ const VerdocsSignatureDialog = /*@__PURE__*/ proxyCustomElement(class extends HT
   handleCancel(e) {
     e.stopPropagation();
     e.preventDefault();
-    this.cancel.emit();
+    this.exit.emit();
   }
   handleAdopt(e) {
     e.stopPropagation();

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

@@ -15,8 +15,7 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class extends HTM
   constructor() {
     super();
     this.__registerHost();
-    this.cancel = createEvent(this, "cancel", 7);
-    this.testev = createEvent(this, "testev", 7);
+    this.exit = createEvent(this, "exit", 7);
     this.next = createEvent(this, "next", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
@@ -40,9 +39,7 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   handleCancel(e) {
     e.stopPropagation();
-    console.log('Canceling');
-    this.testev.emit();
-    this.cancel.emit();
+    this.exit.emit();
   }
   async handleSubmit(e) {
     var _a, _b, _c;

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

@@ -20,27 +20,29 @@ const iconRadio = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24
 const iconDatepicker = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z"/></svg>';
 const iconSignature = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z"/></svg>';
 const iconInitial = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z"/></svg>';
-const iconClock = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path fill="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>';
+const iconClock = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="none"><path fill="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>';
 const iconBarsDown = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" /></svg>';
+const separator = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.707 14.707"><g><rect x="6.275" y="0" fill="#ffffff7f" width="1" height="15"/></g></svg>';
 const menuOptions = [
-  // {id: 'attachment', tooltip: 'Attachment', icon: 'A'},
-  { id: 'checkbox', tooltip: 'Check Box', icon: iconCheck },
-  { id: 'date', tooltip: 'Date', icon: iconDatepicker },
-  { id: 'dropdown', tooltip: 'Dropdown', icon: iconBarsDown },
-  { id: 'initial', tooltip: 'Initials', icon: iconInitial },
-  // {id: 'payment', tooltip: 'Payment', icon: 'P'},
-  { id: 'radio', tooltip: 'Radio Button', icon: iconRadio },
   { id: 'signature', tooltip: 'Signature', icon: iconSignature },
-  { id: 'textarea', tooltip: 'Text Area', icon: iconMultiline },
+  { id: 'initial', tooltip: 'Initials', icon: iconInitial },
+  { id: 'sep1', tooltip: '', icon: separator },
   { id: 'textbox', tooltip: 'Text Box', icon: iconSingleline },
+  { id: 'textarea', tooltip: 'Text Area', icon: iconMultiline },
+  { id: 'checkbox', tooltip: 'Check Box', icon: iconCheck },
+  { id: 'radio', tooltip: 'Radio Button', icon: iconRadio },
+  { id: 'dropdown', tooltip: 'Dropdown', icon: iconBarsDown },
+  { id: 'sep2', tooltip: '', icon: separator },
+  { id: 'date', tooltip: 'Date', icon: iconDatepicker },
   { id: 'timestamp', tooltip: 'Timestamp', icon: iconClock },
+  // {id: 'sep3', tooltip: '', icon: separator},
+  // {id: 'attachment', tooltip: 'Attachment', icon: 'A'},
+  // {id: 'payment', tooltip: 'Payment', icon: 'P'},
 ];
 const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.next = createEvent(this, "next", 7);
-    this.cancel = createEvent(this, "cancel", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
     this.templateUpdated = createEvent(this, "templateUpdated", 7);
     this.pageHeights = {};
@@ -280,7 +282,12 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     pages.sort((a, b) => a.sequence - b.sequence);
     return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-r": this.rerender, onSubmit: () => {
         console.log('onSubmit');
-      } }, h("div", { id: "verdocs-template-fields-toolbar" }, menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => (this.placing = option.id) })))), h("div", { class: "pages" }, pages.map(page => {
+      } }, h("div", { id: "verdocs-template-fields-toolbar" }, menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => {
+        if (option.tooltip) {
+          // We have empty tooltips on the separators, quick hack...
+          this.placing = option.id;
+        }
+      } })))), h("div", { class: "pages" }, pages.map(page => {
       return (h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },