@verdocs/web-sdk 1.12.30 → 1.12.33

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-67233b76.js');
-const Envelopes = require('./Envelopes-d28eaba2.js');
+const Envelopes = require('./Envelopes-f81d02b1.js');
 require('./Types-35abf4e8.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-a27c59d0.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Primitives = require('./Primitives-be5088cb.js');
-const utils = require('./utils-6f0ef095.js');
+const utils = require('./utils-aa7160e9.js');
 const errors = require('./errors-0396da3d.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-67233b76.js');
 require('./Types-35abf4e8.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-a27c59d0.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
 const templateStore = require('./templateStore-1862f03c.js');
 const Templates = require('./Templates-6705a1ce.js');
 const errors = require('./errors-0396da3d.js');

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

@@ -6,14 +6,14 @@ const index = require('./index-67233b76.js');
 require('./Types-35abf4e8.js');
 const Templates = require('./Templates-ed812768.js');
 const TemplateDocuments = require('./TemplateDocuments-1c6620b0.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-a27c59d0.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
 const errors = require('./errors-0396da3d.js');
-const interact_min = require('./interact.min-5a50a2ac.js');
+const interact_min = require('./interact.min-29d23a9c.js');
 const Fields = require('./Fields-705a2168.js');
-const utils = require('./utils-6f0ef095.js');
+const utils = require('./utils-aa7160e9.js');
 const templateStore = require('./templateStore-1862f03c.js');
 const Templates$1 = require('./Templates-6705a1ce.js');
-require('./Envelopes-d28eaba2.js');
+require('./Envelopes-f81d02b1.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
 require('./Primitives-be5088cb.js');

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-67233b76.js');
 require('./Types-35abf4e8.js');
 const TemplateDocuments = require('./TemplateDocuments-1c6620b0.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-a27c59d0.js');
-const utils = require('./utils-6f0ef095.js');
-require('./Envelopes-d28eaba2.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
+const utils = require('./utils-aa7160e9.js');
+require('./Envelopes-f81d02b1.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
 

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

@@ -5,7 +5,7 @@ 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-a27c59d0.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
 const templateStore = require('./templateStore-1862f03c.js');
 const Templates = require('./Templates-6705a1ce.js');
 const errors = require('./errors-0396da3d.js');

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

@@ -5,7 +5,7 @@ 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-a27c59d0.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-67233b76.js');
 require('./Types-35abf4e8.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-a27c59d0.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
 const templateStore = require('./templateStore-1862f03c.js');
 const Templates = require('./Templates-6705a1ce.js');
 const errors = require('./errors-0396da3d.js');

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-67233b76.js');
 require('./Types-35abf4e8.js');
 const Roles = require('./Roles-9b593b95.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-a27c59d0.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
 const templateStore = require('./templateStore-1862f03c.js');
 const Templates = require('./Templates-6705a1ce.js');
 const errors = require('./errors-0396da3d.js');

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

@@ -3,22 +3,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-67233b76.js');
-const interact_min = require('./interact.min-5a50a2ac.js');
+const interact_min = require('./interact.min-29d23a9c.js');
 require('./Types-35abf4e8.js');
 const Roles = require('./Roles-9b593b95.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-a27c59d0.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
 const Colors = require('./Colors-e809dcc9.js');
 const templateStore = require('./templateStore-1862f03c.js');
 const Templates = require('./Templates-6705a1ce.js');
-const utils = require('./utils-6f0ef095.js');
+const utils = require('./utils-aa7160e9.js');
 const errors = require('./errors-0396da3d.js');
 require('./Primitives-be5088cb.js');
 require('./Templates-ed812768.js');
-require('./Envelopes-d28eaba2.js');
+require('./Envelopes-f81d02b1.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
 
-const verdocsTemplateRolesCss = "verdocs-template-roles{display:block;min-width:400px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-roles>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-roles>form h5{font-size:16px;font-weight:bold;color:#4c56cb;margin:0 0 10px 0}verdocs-template-roles>form .participants{position:relative}verdocs-template-roles>form .left-line{top:32px;left:11px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-template-roles>form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;min-height:35px;margin-left:40px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:6px 0 4px 0}verdocs-template-roles>form .row .row-roles{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles>form .row .icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-template-roles>form .row .sender{height:30px;display:-ms-flexbox;display:flex;font-size:14px;padding:0 5px 0 15px;line-height:30px;-ms-flex-direction:row;flex-direction:row;border-radius:30px;border:1px solid #c6c9cc;background-color:#f5f5fa}verdocs-template-roles>form .row .complete{height:30px;display:-ms-flexbox;display:flex;font-size:14px;padding:0 15px;line-height:30px;-ms-flex-direction:row;flex-direction:row;border-radius:30px;background-color:#f5f5fa;border:1px solid #aeb4bf}verdocs-template-roles>form .row .label{font-weight:bold;margin-right:6px;color:#33364b}verdocs-template-roles>form .row .settings-button{margin:0 0 0 9px;cursor:pointer}verdocs-template-roles>form .row .recipient{height:30px;display:-ms-flexbox;display:flex;font-size:14px;border-radius:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:0 5px 0 6px;white-space:nowrap;border:1px solid #aeb4bf}verdocs-template-roles>form .row .recipient .type-icon{width:24px;height:24px;-webkit-transform:scale(0.8);transform:scale(0.8);opacity:0.6;margin:0 12px 0 0}verdocs-template-roles>form .row .recipient.dragging{position:absolute}verdocs-template-roles>form .row .recipient.dragging+.dropzone{display:none !important}verdocs-template-roles>form .row .dropzone{width:14px;height:30px;display:none}verdocs-template-roles>form .row .dropzone svg{fill:#cccccc}verdocs-template-roles>form .row .dropzone.visible{margin:0 7px;display:-ms-flexbox;display:flex;-ms-flex:0 0 14px;flex:0 0 14px}verdocs-template-roles>form .row .dropzone.active{-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;background:#654dcb7f;border:1px dashed #654dcb}verdocs-template-roles>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-roles>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-roles>form input:focus{outline:none}verdocs-template-roles .row.add-sequence{display:none}verdocs-template-roles .add-role{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-role:hover{opacity:1}verdocs-template-roles .add-role svg{width:32px;height:32px}verdocs-template-roles .add-step{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-step:hover{opacity:1}verdocs-template-roles .add-step svg{width:32px;height:32px}verdocs-template-roles.dragging .add-role{display:none}verdocs-template-roles.dragging form .row .recipient+.dropzone{display:-ms-flexbox;display:flex}verdocs-template-roles.dragging .row.add-sequence{display:-ms-flexbox;display:flex}verdocs-template-roles.dragging .row.add-sequence .dropzone{opacity:0.5;-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;-ms-flex-align:center;align-items:center;background:#654dcb7f;-ms-flex-pack:center;justify-content:center;border:1px dashed #654dcb}verdocs-template-roles.dragging .row.add-sequence .dropzone.active{opacity:1}verdocs-template-roles .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles .empty{font-size:13px;margin-top:15px;margin-bottom:5px}verdocs-template-roles .empty svg{width:20px;height:20px;stroke:#666666;margin-bottom:-5px}verdocs-template-roles ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-moz-placeholder{color:#aaaaaa}verdocs-template-roles :-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::placeholder{color:#aaaaaa}";
+const verdocsTemplateRolesCss = "verdocs-template-roles{display:block;min-width:400px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-roles>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-roles>form h5{font-size:16px;font-weight:bold;color:#4c56cb;margin:0 0 10px 0}verdocs-template-roles>form .participants{position:relative}verdocs-template-roles>form .left-line{top:32px;left:11px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-template-roles>form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;min-height:35px;margin-left:40px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:6px 0 4px 0}verdocs-template-roles>form .row .row-roles{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles>form .row .icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-template-roles>form .row .sender{height:30px;display:-ms-flexbox;display:flex;font-size:14px;line-height:30px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;padding:0 5px 0 15px;border:1px solid #c6c9cc;background-color:#f5f5fa}verdocs-template-roles>form .row .complete{height:30px;display:-ms-flexbox;display:flex;font-size:14px;padding:0 15px;line-height:30px;-ms-flex-direction:row;flex-direction:row;border-radius:30px;background-color:#f5f5fa;border:1px solid #aeb4bf}verdocs-template-roles>form .row .label{font-weight:bold;margin-right:6px;color:#33364b}verdocs-template-roles>form .row .settings-button{display:-ms-flexbox;display:flex;cursor:pointer;margin:0 0 0 9px}verdocs-template-roles>form .row .recipient{height:30px;display:-ms-flexbox;display:flex;font-size:14px;border-radius:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:0 5px 0 6px;white-space:nowrap;border:2px solid #aeb4bf}verdocs-template-roles>form .row .recipient .type-icon{width:24px;height:24px;-webkit-transform:scale(0.8);transform:scale(0.8);opacity:0.6;margin:0 12px 0 0}verdocs-template-roles>form .row .recipient.dragging{position:absolute}verdocs-template-roles>form .row .recipient.dragging+.dropzone{display:none !important}verdocs-template-roles>form .row .dropzone{width:14px;height:30px;display:none}verdocs-template-roles>form .row .dropzone svg{fill:#cccccc}verdocs-template-roles>form .row .dropzone.visible{margin:0 7px;display:-ms-flexbox;display:flex;-ms-flex:0 0 14px;flex:0 0 14px}verdocs-template-roles>form .row .dropzone.active{-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;background:#654dcb7f;border:1px dashed #654dcb}verdocs-template-roles>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-roles>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-roles>form input:focus{outline:none}verdocs-template-roles .row.add-sequence{display:none}verdocs-template-roles .add-role{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-role:hover{opacity:1}verdocs-template-roles .add-role svg{width:32px;height:32px}verdocs-template-roles .add-step{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-step:hover{opacity:1}verdocs-template-roles .add-step svg{width:32px;height:32px}verdocs-template-roles.dragging .add-role{display:none}verdocs-template-roles.dragging form .row .recipient+.dropzone{display:-ms-flexbox;display:flex}verdocs-template-roles.dragging .row.add-sequence{display:-ms-flexbox;display:flex}verdocs-template-roles.dragging .row.add-sequence .dropzone{opacity:0.5;-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;-ms-flex-align:center;align-items:center;background:#654dcb7f;-ms-flex-pack:center;justify-content:center;border:1px dashed #654dcb}verdocs-template-roles.dragging .row.add-sequence .dropzone.active{opacity:1}verdocs-template-roles .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles .empty{font-size:13px;margin-top:15px;margin-bottom:5px}verdocs-template-roles .empty svg{width:20px;height:20px;stroke:#666666;margin-bottom:-5px}verdocs-template-roles ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-moz-placeholder{color:#aaaaaa}verdocs-template-roles :-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::placeholder{color:#aaaaaa}";
 
 const senderLabels = {
   [VerdocsEndpoint.TemplateSenderTypes.EVERYONE]: 'Everyone',
@@ -138,7 +138,11 @@ const VerdocsTemplateRoles = class {
             sequence: role.sequence,
             order: role.order,
           })))
-            .then(() => console.log('[ROLES] Updated roles'))
+            .then(() => {
+            var _a;
+            console.log('[ROLES] Updated roles');
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated-role', endpoint: this.endpoint, template: templateStore.state.template });
+          })
             .catch(e => console.log('[ROLES] Role updates failed', e));
         }
       }.bind(this),
@@ -230,10 +234,12 @@ const VerdocsTemplateRoles = class {
       delegator: false,
     })
       .then(r => {
+      var _a;
       console.log('Created role', r);
       templateStore.state.template.roles.push(r);
       this.renumberTemplateRoles();
       this.forceRerender++;
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'created-role', endpoint: this.endpoint, template: templateStore.state.template });
     })
       .catch(e => {
       console.log('Error creating role', e);
@@ -274,18 +280,21 @@ const VerdocsTemplateRoles = class {
       return (index.h(index.Host, null, index.h("verdocs-loader", null)));
     }
     const roleNames = (((_a = templateStore.state.template) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name);
-    return (index.h(index.Host, null, index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off", "data-r": this.forceRerender }, index.h("h5", null, "Roles"), index.h("div", { class: "participants" }, index.h("div", { class: "left-line" }), index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: startIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "sender" }, index.h("span", { class: "label" }, "Sender:"), " ", senderLabels[templateStore.state.template.sender], ' ', index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })))), index.h("div", { class: "row add-sequence", "data-sequence": 0 }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), this.sequences.map(sequence => (index.h(index.Fragment, null, index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: stepIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), templateStore.state.template.roles
+    return (index.h(index.Host, null, index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off", "data-r": this.forceRerender }, index.h("h5", null, "Roles and Workflow"), index.h("div", { class: "participants" }, index.h("div", { class: "left-line" }), index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: startIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "sender" }, index.h("span", { class: "label" }, "Sender:"), " ", senderLabels[templateStore.state.template.sender], ' ', index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })))), index.h("div", { class: "row add-sequence", "data-sequence": 0 }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), this.sequences.map(sequence => (index.h(index.Fragment, null, index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: stepIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), templateStore.state.template.roles
       .filter(role => role.sequence === sequence)
       .map(role => {
-      return (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 })));
+      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: () => {
         this.showingRoleDialog = null;
         this.forceRerender++;
       }, onDelete: e => {
+        var _a;
         console.log('deleted', e.detail);
         this.renumberTemplateRoles();
         this.showingRoleDialog = null;
         this.forceRerender++;
+        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'deleted-role', endpoint: this.endpoint, template: templateStore.state.template });
       } })), this.showingSenderDialog && index.h("verdocs-template-sender", { endpoint: this.endpoint, templateId: this.templateId, onClose: () => (this.showingSenderDialog = false) })));
   }
   get el() { return index.getElement(this); }

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

@@ -5,7 +5,7 @@ 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-a27c59d0.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
 const templateStore = require('./templateStore-1862f03c.js');
 const Templates = require('./Templates-6705a1ce.js');
 const errors = require('./errors-0396da3d.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-d28eaba2.js');
+const Envelopes = require('./Envelopes-f81d02b1.js');
 const Types = require('./Types-35abf4e8.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-a27c59d0.js');
-const utils = require('./utils-6f0ef095.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-e0d39762.js');
+const utils = require('./utils-aa7160e9.js');
 const errors = require('./errors-0396da3d.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
@@ -66,9 +66,10 @@ const VerdocsView = class {
       headerTarget.append(headerEl);
     }
   }
+  // TODO: Move this to the page renderer once the EnvelopePage model is deployed and envelope pages are individually processed
   async reloadEnvelope() {
     var _a, _b, _c;
-    console.log('[VIEW] Checking for updated envelope');
+    console.log('[VIEW] Loading envelope...');
     try {
       this.envelope = await Envelopes.throttledGetEnvelope(this.endpoint, this.envelopeId);
       this.roleNames = this.envelope.recipients.map(r => r.role_name);
@@ -135,7 +136,7 @@ const VerdocsView = class {
   render() {
     var _a;
     if (!this.envelope) {
-      return (index.h(index.Host, null, index.h("verdocs-loader", null)));
+      return (index.h(index.Host, null, index.h("img", { src: "https://verdocs-public-assets.s3.amazonaws.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })));
     }
     const menuOptions = [{ id: 'print', label: 'Print' }];
     if (userCanCancelEnvelope(this.endpoint.session, this.envelope)) {

package/dist/collection/components/elements/verdocs-envelope-document-page/verdocs-envelope-document-page.js

@@ -24,7 +24,7 @@ export class VerdocsEnvelopeDocumentPage {
     this.naturalHeight = this.virtualHeight;
     this.aspectRatio = this.virtualWidth / this.virtualHeight;
     this.skipFirstNotification = true;
-    this.pageDisplayUri = '';
+    this.pageDisplayUri = 'https://verdocs-public-assets.s3.amazonaws.com/page-loading-placeholder.png';
   }
   async componentWillLoad() {
     this.pageDisplayUri = await getEnvelopeDocumentPageDisplayUri(this.endpoint, this.envelopeId, this.documentId, this.pageNumber);

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

@@ -38,9 +38,10 @@ export class VerdocsView {
       headerTarget.append(headerEl);
     }
   }
+  // TODO: Move this to the page renderer once the EnvelopePage model is deployed and envelope pages are individually processed
   async reloadEnvelope() {
     var _a, _b, _c;
-    console.log('[VIEW] Checking for updated envelope');
+    console.log('[VIEW] Loading envelope...');
     try {
       this.envelope = await throttledGetEnvelope(this.endpoint, this.envelopeId);
       this.roleNames = this.envelope.recipients.map(r => r.role_name);
@@ -107,7 +108,7 @@ export class VerdocsView {
   render() {
     var _a;
     if (!this.envelope) {
-      return (h(Host, null, h("verdocs-loader", null)));
+      return (h(Host, null, h("img", { src: "https://verdocs-public-assets.s3.amazonaws.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })));
     }
     const menuOptions = [{ id: 'print', label: 'Print' }];
     if (userCanCancelEnvelope(this.endpoint.session, this.envelope)) {

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

@@ -56,10 +56,11 @@ verdocs-template-roles > form .row .sender {
   height: 30px;
   display: flex;
   font-size: 14px;
-  padding: 0 5px 0 15px;
   line-height: 30px;
-  flex-direction: row;
+  align-items: center;
   border-radius: 30px;
+  flex-direction: row;
+  padding: 0 5px 0 15px;
   border: 1px solid #c6c9cc;
   background-color: #f5f5fa;
 }
@@ -80,8 +81,9 @@ verdocs-template-roles > form .row .label {
   color: #33364b;
 }
 verdocs-template-roles > form .row .settings-button {
-  margin: 0 0 0 9px;
+  display: flex;
   cursor: pointer;
+  margin: 0 0 0 9px;
 }
 verdocs-template-roles > form .row .recipient {
   height: 30px;
@@ -92,7 +94,7 @@ verdocs-template-roles > form .row .recipient {
   flex-direction: row;
   padding: 0 5px 0 6px;
   white-space: nowrap;
-  border: 1px solid #aeb4bf;
+  border: 2px solid #aeb4bf;
 }
 verdocs-template-roles > form .row .recipient .type-icon {
   width: 24px;

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

@@ -124,7 +124,11 @@ export class VerdocsTemplateRoles {
             sequence: role.sequence,
             order: role.order,
           })))
-            .then(() => console.log('[ROLES] Updated roles'))
+            .then(() => {
+            var _a;
+            console.log('[ROLES] Updated roles');
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated-role', endpoint: this.endpoint, template: TemplateStore.template });
+          })
             .catch(e => console.log('[ROLES] Role updates failed', e));
         }
       }.bind(this),
@@ -216,10 +220,12 @@ export class VerdocsTemplateRoles {
       delegator: false,
     })
       .then(r => {
+      var _a;
       console.log('Created role', r);
       TemplateStore.template.roles.push(r);
       this.renumberTemplateRoles();
       this.forceRerender++;
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'created-role', endpoint: this.endpoint, template: TemplateStore.template });
     })
       .catch(e => {
       console.log('Error creating role', e);
@@ -260,18 +266,21 @@ export class VerdocsTemplateRoles {
       return (h(Host, null, h("verdocs-loader", null)));
     }
     const roleNames = (((_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name);
-    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off", "data-r": this.forceRerender }, h("h5", null, "Roles"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "row-roles" }, h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[TemplateStore.template.sender], ' ', h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })))), h("div", { class: "row add-sequence", "data-sequence": 0 }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), this.sequences.map(sequence => (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), TemplateStore.template.roles
+    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off", "data-r": this.forceRerender }, h("h5", null, "Roles and Workflow"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "row-roles" }, h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[TemplateStore.template.sender], ' ', h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })))), h("div", { class: "row add-sequence", "data-sequence": 0 }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), this.sequences.map(sequence => (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), TemplateStore.template.roles
       .filter(role => role.sequence === sequence)
       .map(role => {
-      return (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 })));
+      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: () => {
         this.showingRoleDialog = null;
         this.forceRerender++;
       }, onDelete: e => {
+        var _a;
         console.log('deleted', e.detail);
         this.renumberTemplateRoles();
         this.showingRoleDialog = null;
         this.forceRerender++;
+        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'deleted-role', endpoint: this.endpoint, template: TemplateStore.template });
       } })), this.showingSenderDialog && h("verdocs-template-sender", { endpoint: this.endpoint, templateId: this.templateId, onClose: () => (this.showingSenderDialog = false) })));
   }
   static get is() { return "verdocs-template-roles"; }

package/dist/components/Envelopes.js

@@ -135,7 +135,12 @@ var getFieldAttachment = function (endpoint, envelopeId, fieldName) { return __a
 var getEnvelopeDocumentPageDisplayUri = function (endpoint, envelopeId, documentId, page) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
         return [2 /*return*/, endpoint.api
-                .get("/envelopes/".concat(envelopeId, "/envelope_documents/").concat(documentId, "/pages/").concat(page, "/image"), { timeout: 60000 })
+                .get("/envelopes/".concat(envelopeId, "/envelope_documents/").concat(documentId, "/pages/").concat(page, "/image"), {
+                timeout: 20000,
+                'axios-retry': {
+                    retries: 5,
+                },
+            })
                 .then(function (r) { return r.data; })];
     });
 }); };