@verdocs/web-sdk 1.11.11 → 1.12.1

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

@@ -16,7 +16,7 @@ const VerdocsTemplateProperties$1 = /*@__PURE__*/ proxyCustomElement(class exten
   constructor() {
     super();
     this.__registerHost();
-    this.cancel = createEvent(this, "cancel", 7);
+    this.exit = createEvent(this, "exit", 7);
     this.next = createEvent(this, "next", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
@@ -52,7 +52,7 @@ const VerdocsTemplateProperties$1 = /*@__PURE__*/ proxyCustomElement(class exten
   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;

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

@@ -39,7 +39,7 @@ const VerdocsTemplateRoles$1 = /*@__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.sdkError = createEvent(this, "sdkError", 7);
     this.templateUpdated = createEvent(this, "templateUpdated", 7);
     this.sequences = [];
@@ -159,7 +159,7 @@ const VerdocsTemplateRoles$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   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;

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

@@ -10,13 +10,13 @@ const VerdocsUploadDialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   constructor() {
     super();
     this.__registerHost();
-    this.cancel = createEvent(this, "cancel", 7);
+    this.exit = createEvent(this, "exit", 7);
     this.next = createEvent(this, "next", 7);
     this.draggingOver = false;
     this.decodedFiles = [];
   }
   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/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-03-01T16:17:53",
+  "timestamp": "2023-03-02T16:36:27",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -832,12 +832,12 @@
       "methods": [],
       "events": [
         {
-          "event": "cancel",
+          "event": "exit",
           "detail": "any",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event fired when the user cancels the dialog.",
+          "docs": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.",
           "docsTags": []
         },
         {
@@ -1979,21 +1979,21 @@
           "docsTags": []
         },
         {
-          "event": "cancel",
-          "detail": "any",
+          "event": "deleted",
+          "detail": "{ fieldName: string; }",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event emitted when the user cancels the process.",
+          "docs": "Event fired when the field is deleted.",
           "docsTags": []
         },
         {
-          "event": "deleted",
-          "detail": "{ fieldName: string; }",
+          "event": "exit",
+          "detail": "any",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event fired when the field is deleted.",
+          "docs": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.",
           "docsTags": []
         },
         {
@@ -3553,12 +3553,12 @@
       "methods": [],
       "events": [
         {
-          "event": "cancel",
+          "event": "exit",
           "detail": "any",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event fired when the step is cancelled.",
+          "docs": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.",
           "docsTags": []
         },
         {
@@ -3747,12 +3747,12 @@
       "methods": [],
       "events": [
         {
-          "event": "cancel",
+          "event": "exit",
           "detail": "any",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event fired when the dialog is closed. The event data will contain the closure reason.",
+          "docs": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.",
           "docsTags": []
         },
         {
@@ -3894,12 +3894,12 @@
       "methods": [],
       "events": [
         {
-          "event": "cancel",
+          "event": "exit",
           "detail": "any",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event fired when the user clicks the background overlay or Cancel button.",
+          "docs": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.",
           "docsTags": []
         },
         {
@@ -4670,12 +4670,12 @@
       ],
       "events": [
         {
-          "event": "cancel",
+          "event": "exit",
           "detail": "any",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "The user canceled the process.",
+          "docs": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.",
           "docsTags": []
         },
         {
@@ -4870,12 +4870,12 @@
       "methods": [],
       "events": [
         {
-          "event": "cancel",
+          "event": "exit",
           "detail": "any",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Fired if the user cancels the dialog.",
+          "docs": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.",
           "docsTags": []
         },
         {
@@ -5184,12 +5184,12 @@
       "methods": [],
       "events": [
         {
-          "event": "cancel",
+          "event": "exit",
           "detail": "any",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event fired when the user cancels the dialog.",
+          "docs": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.",
           "docsTags": []
         },
         {
@@ -5209,15 +5209,6 @@
           "composed": true,
           "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": "testev",
-          "detail": "any",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "Test event for debugging",
-          "docsTags": []
         }
       ],
       "listeners": [],
@@ -5618,24 +5609,6 @@
       ],
       "methods": [],
       "events": [
-        {
-          "event": "cancel",
-          "detail": "any",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "Event fired when the user cancels the dialog.",
-          "docsTags": []
-        },
-        {
-          "event": "next",
-          "detail": "ITemplate",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "Event fired when the user completes the step.",
-          "docsTags": []
-        },
         {
           "event": "sdkError",
           "detail": "SDKError",
@@ -5818,12 +5791,12 @@
       "methods": [],
       "events": [
         {
-          "event": "cancel",
+          "event": "exit",
           "detail": "any",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event fired when the user cancels the dialog.",
+          "docs": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.",
           "docsTags": []
         },
         {
@@ -6115,7 +6088,7 @@
       }
     },
     {
-      "filePath": "./src/components/templates/verdocs-template-recipients/verdocs-template-roles.tsx",
+      "filePath": "./src/components/templates/verdocs-template-roles/verdocs-template-roles.tsx",
       "encapsulation": "none",
       "tag": "verdocs-template-roles",
       "docs": "Displays an edit form that allows the user to adjust a template's roles and workflow.",
@@ -6159,12 +6132,12 @@
       "methods": [],
       "events": [
         {
-          "event": "cancel",
+          "event": "exit",
           "detail": "any",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event fired when the user cancels the dialog.",
+          "docs": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.",
           "docsTags": []
         },
         {
@@ -6980,12 +6953,12 @@
       "methods": [],
       "events": [
         {
-          "event": "cancel",
+          "event": "exit",
           "detail": "any",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Event fired when the dialog is cancelled.",
+          "docs": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.",
           "docsTags": []
         },
         {

package/dist/esm/verdocs-build.entry.js

@@ -52,19 +52,11 @@ const VerdocsBuild = class {
     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)));
   }
 };
 VerdocsBuild.style = verdocsBuildCss;

package/dist/esm/verdocs-contact-picker.entry.js

@@ -11,7 +11,7 @@ const VerdocsContactPicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     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;
@@ -55,7 +55,7 @@ const VerdocsContactPicker = class {
     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/esm/verdocs-field-attachment.entry.js

@@ -21,7 +21,7 @@ const VerdocsFieldAttachment = class {
   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/esm/verdocs-field-initial.entry.js

@@ -16,7 +16,7 @@ const VerdocsFieldInitial = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     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);
@@ -49,7 +49,7 @@ const VerdocsFieldInitial = class {
     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/esm/verdocs-field-signature.entry.js

@@ -48,7 +48,7 @@ const VerdocsFieldSignature = class {
     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/esm/verdocs-initial-dialog.entry.js

@@ -6,7 +6,7 @@ const VerdocsInitialDialog = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     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 = '';
@@ -49,7 +49,7 @@ const VerdocsInitialDialog = class {
   handleCancel(e) {
     e.stopPropagation();
     e.preventDefault();
-    this.cancel.emit();
+    this.exit.emit();
   }
   handleAdopt(e) {
     e.stopPropagation();

package/dist/esm/verdocs-kba-dialog.entry.js

@@ -6,7 +6,7 @@ const QuestionIcon = `<svg width="40" height="40" viewBox="0 0 40 40" fill="none
 const VerdocsKbaDialog = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.cancel = createEvent(this, "cancel", 7);
+    this.exit = createEvent(this, "exit", 7);
     this.next = createEvent(this, "next", 7);
     this.step = 1;
     this.steps = 3;
@@ -19,7 +19,7 @@ const VerdocsKbaDialog = class {
     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/esm/verdocs-ok-dialog.entry.js

@@ -6,7 +6,7 @@ const VerdocsOkDialog = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     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;
@@ -15,13 +15,13 @@ const VerdocsOkDialog = class {
     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/esm/verdocs-send.entry.js

@@ -24,7 +24,7 @@ const VerdocsSend = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     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();
@@ -103,7 +103,7 @@ const VerdocsSend = class {
   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) || [];
@@ -111,7 +111,7 @@ const VerdocsSend = class {
     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) }))));
   }
 };

package/dist/esm/verdocs-signature-dialog.entry.js

@@ -6,7 +6,7 @@ const VerdocsSignatureDialog = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     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 = '';
@@ -49,7 +49,7 @@ const VerdocsSignatureDialog = class {
   handleCancel(e) {
     e.stopPropagation();
     e.preventDefault();
-    this.cancel.emit();
+    this.exit.emit();
   }
   handleAdopt(e) {
     e.stopPropagation();

package/dist/esm/verdocs-template-create_2.entry.js

@@ -22,8 +22,7 @@ const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
 const VerdocsTemplateCreate = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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();
@@ -47,9 +46,7 @@ const VerdocsTemplateCreate = class {
   }
   handleCancel(e) {
     e.stopPropagation();
-    console.log('Canceling');
-    this.testev.emit();
-    this.cancel.emit();
+    this.exit.emit();
   }
   async handleSubmit(e) {
     var _a, _b, _c;
@@ -114,26 +111,28 @@ 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 = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    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 = {};
@@ -373,7 +372,12 @@ const VerdocsTemplateFields = class {
     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' },

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

@@ -12,7 +12,7 @@ const verdocsTemplatePropertiesCss = "verdocs-template-properties{font-family:\"
 const VerdocsTemplateProperties = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.cancel = createEvent(this, "cancel", 7);
+    this.exit = createEvent(this, "exit", 7);
     this.next = createEvent(this, "next", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
@@ -48,7 +48,7 @@ const VerdocsTemplateProperties = class {
   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;

package/dist/esm/verdocs-template-roles.entry.js

@@ -36,7 +36,7 @@ const VerdocsTemplateRoles = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.next = createEvent(this, "next", 7);
-    this.cancel = createEvent(this, "cancel", 7);
+    this.exit = createEvent(this, "exit", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
     this.templateUpdated = createEvent(this, "templateUpdated", 7);
     this.sequences = [];
@@ -156,7 +156,7 @@ const VerdocsTemplateRoles = class {
   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;

package/dist/esm/verdocs-upload-dialog.entry.js

@@ -8,13 +8,13 @@ const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewB
 const VerdocsUploadDialog = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.cancel = createEvent(this, "cancel", 7);
+    this.exit = createEvent(this, "exit", 7);
     this.next = createEvent(this, "next", 7);
     this.draggingOver = false;
     this.decodedFiles = [];
   }
   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/esm-es5/verdocs-build.entry.js

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,o){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,s){function i(e){try{l(o.next(e))}catch(e){s(e)}}function a(e){try{l(o["throw"](e))}catch(e){s(e)}}function l(e){e.done?n(e.value):r(e.value).then(i,a)}l((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},o,r,s,i;return i={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function a(e){return function(t){return l([e,t])}}function l(i){if(o)throw new TypeError("Generator is already executing.");while(n)try{if(o=1,r&&(s=i[0]&2?r["return"]:i[0]?r["throw"]||((s=r["return"])&&s.call(r),0):r.next)&&!(s=s.call(r,i[1])).done)return s;if(r=0,s)i=[i[0]&2,s.value];switch(i[0]){case 0:case 1:s=i;break;case 4:n.label++;return{value:i[1],done:false};case 5:n.label++;r=i[1];i=[0];continue;case 7:i=n.ops.pop();n.trys.pop();continue;default:if(!(s=n.trys,s=s.length>0&&s[s.length-1])&&(i[0]===6||i[0]===2)){n=0;continue}if(i[0]===3&&(!s||i[1]>s[0]&&i[1]<s[3])){n.label=i[1];break}if(i[0]===6&&n.label<s[1]){n.label=s[1];s=i;break}if(s&&n.label<s[2]){n.label=s[2];n.ops.push(i);break}if(s[2])n.ops.pop();n.trys.pop();continue}i=t.call(e,n)}catch(e){i=[6,e];r=0}finally{o=s=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host}from"./index-e64d45e2.js";import{V as VerdocsEndpoint}from"./VerdocsEndpoint-d50a8d28.js";import{l as loadTemplate}from"./Templates-f8a6628a.js";import{S as SDKError}from"./errors-9b5498c8.js";import"./Token-54690789.js";import"./Templates-8e4ab976.js";import"./templateStore-5cb73464.js";import"./index-24fd1580.js";import"./Primitives-054bc6e5.js";var 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}';var VerdocsBuild=function(){function e(e){registerInstance(this,e);this.sdkError=createEvent(this,"sdkError",7);this.fields=[];this.endpoint=VerdocsEndpoint.getDefault();this.templateId=null;this.step="create";this.pdfUrl=null;this.template=null}e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,n,o;return __generator(this,(function(r){switch(r.label){case 0:this.endpoint.loadSession();if(!this.endpoint.session){console.log("[BUILD] Unable to start builder session, must be authenticated");return[2]}if(!this.templateId){console.log("[BUILD] No template ID specified, showing upload option");this.step="create";return[2]}r.label=1;case 1:r.trys.push([1,3,,4]);console.log("[BUILD] Loading template ".concat(this.templateId));return[4,loadTemplate(this.endpoint,this.templateId)];case 2:r.sent();this.step="fields";return[3,4];case 3:o=r.sent();console.log("[BUILD] Error loading template",o);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new SDKError(o.message,(t=o.response)===null||t===void 0?void 0:t.status,(n=o.response)===null||n===void 0?void 0:n.data));return[3,4];case 4:return[2]}}))}))};e.prototype.handleCancel=function(e){console.log("Cancel",e.detail);this.step=""};e.prototype.handleTemplateCreated=function(e){console.log("Created",e.detail);this.step="fields"};e.prototype.handlePropertiesUpdated=function(e){console.log("updated",e.detail);this.step="recipients"};e.prototype.handleRecipientsUpdated=function(e){console.log("updated",e.detail);this.step="fields"};e.prototype.render=function(){var e=this;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:function(t){return e.handleCancel(t)},onNext:function(t){return e.handleTemplateCreated(t)}}),this.step==="fields"&&h("verdocs-template-fields",{onCancel:function(t){return e.handleCancel(t)},onNext:function(t){return e.handleCancel(t)}}))};return e}();VerdocsBuild.style=verdocsBuildCss;export{VerdocsBuild as verdocs_build};
+var __awaiter=this&&this.__awaiter||function(e,t,n,r){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,s){function i(e){try{l(r.next(e))}catch(e){s(e)}}function a(e){try{l(r["throw"](e))}catch(e){s(e)}}function l(e){e.done?n(e.value):o(e.value).then(i,a)}l((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},r,o,s,i;return i={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function a(e){return function(t){return l([e,t])}}function l(i){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,o&&(s=i[0]&2?o["return"]:i[0]?o["throw"]||((s=o["return"])&&s.call(o),0):o.next)&&!(s=s.call(o,i[1])).done)return s;if(o=0,s)i=[i[0]&2,s.value];switch(i[0]){case 0:case 1:s=i;break;case 4:n.label++;return{value:i[1],done:false};case 5:n.label++;o=i[1];i=[0];continue;case 7:i=n.ops.pop();n.trys.pop();continue;default:if(!(s=n.trys,s=s.length>0&&s[s.length-1])&&(i[0]===6||i[0]===2)){n=0;continue}if(i[0]===3&&(!s||i[1]>s[0]&&i[1]<s[3])){n.label=i[1];break}if(i[0]===6&&n.label<s[1]){n.label=s[1];s=i;break}if(s&&n.label<s[2]){n.label=s[2];n.ops.push(i);break}if(s[2])n.ops.pop();n.trys.pop();continue}i=t.call(e,n)}catch(e){i=[6,e];o=0}finally{r=s=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host}from"./index-e64d45e2.js";import{V as VerdocsEndpoint}from"./VerdocsEndpoint-d50a8d28.js";import{l as loadTemplate}from"./Templates-f8a6628a.js";import{S as SDKError}from"./errors-9b5498c8.js";import"./Token-54690789.js";import"./Templates-8e4ab976.js";import"./templateStore-5cb73464.js";import"./index-24fd1580.js";import"./Primitives-054bc6e5.js";var 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}';var VerdocsBuild=function(){function e(e){registerInstance(this,e);this.sdkError=createEvent(this,"sdkError",7);this.fields=[];this.endpoint=VerdocsEndpoint.getDefault();this.templateId=null;this.step="create";this.pdfUrl=null;this.template=null}e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,n,r;return __generator(this,(function(o){switch(o.label){case 0:this.endpoint.loadSession();if(!this.endpoint.session){console.log("[BUILD] Unable to start builder session, must be authenticated");return[2]}if(!this.templateId){console.log("[BUILD] No template ID specified, showing upload option");this.step="create";return[2]}o.label=1;case 1:o.trys.push([1,3,,4]);console.log("[BUILD] Loading template ".concat(this.templateId));return[4,loadTemplate(this.endpoint,this.templateId)];case 2:o.sent();this.step="fields";return[3,4];case 3:r=o.sent();console.log("[BUILD] Error loading template",r);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new SDKError(r.message,(t=r.response)===null||t===void 0?void 0:t.status,(n=r.response)===null||n===void 0?void 0:n.data));return[3,4];case 4:return[2]}}))}))};e.prototype.handleCancel=function(e){console.log("Cancel",e.detail);this.step=""};e.prototype.handleTemplateCreated=function(e){console.log("Created",e.detail);this.step="fields"};e.prototype.render=function(){var e=this;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:function(t){return e.handleCancel(t)},onNext:function(t){return e.handleTemplateCreated(t)}}),this.step==="fields"&&h("verdocs-template-fields",null))};return e}();VerdocsBuild.style=verdocsBuildCss;export{VerdocsBuild as verdocs_build};