@verdocs/web-sdk 1.10.10 → 1.11.1

package/dist/components/verdocs-sign.js

@@ -3,7 +3,7 @@ import { g as getSigningSession, u as updateEnvelopeField, a as updateEnvelopeFi
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators.js';
 import { f as fullNameToInitials } from './Primitives.js';
-import { s as savePDF, u as updateDocumentFieldValue, a as getRoleIndex, r as renderDocumentField, b as getFieldId } from './utils.js';
+import { s as saveAttachment, u as updateDocumentFieldValue, a as getRoleIndex, r as renderDocumentField, b as getFieldId } from './utils.js';
 import { g as getEnvelopeById, s as state } from './Envelopes.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
@@ -217,29 +217,35 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
   }
   async handleOptionSelected(e) {
+    var _a, _b, _c, _d, _e;
     switch (e.detail.id) {
       case 'later':
         this.finishLater = true;
         this.showFinishLater = true;
+        (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'later' });
         // this.router.navigate([`view/sign/${this.envelopeId}/role/${this.roleName}/saved`]);
         break;
       case 'claim':
         window.alert('This feature will be available in an upcoming release.');
+        (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'claimed' });
         break;
       case 'decline':
         {
           const declineResult = await envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId);
           console.log('Decline result', declineResult);
+          (_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'declined' });
           this.isDone = true;
         }
         break;
       case 'print':
         window.print();
+        (_d = this.envelopeUpdated) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'printed' });
         break;
       case 'download':
-        savePDF(this.endpoint, state.envelope, state.envelope.envelope_document_id).catch(e => {
+        saveAttachment(this.endpoint, state.envelope, state.envelope.envelope_document_id).catch(e => {
           console.log('Error downloading PDF', e);
         });
+        (_e = this.envelopeUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'downloaded' });
         break;
     }
   }
@@ -495,7 +501,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (state.loading || !state.envelope) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    return (h(Host, { class: { agreed: this.agreed } }, !this.isDone && !this.finishLater && h("div", { class: "intro" }, "Please review and act on these documents."), !this.isDone && (h("div", { class: "header" }, !this.agreed ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, state.envelope.name), h("div", { style: { flex: '1' } }))), !this.isDone && !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), !this.isDone && !this.agreed ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), this.isDone ? (
+    return (h(Host, { class: { agreed: this.agreed }, "data-r": state.updateCount }, !this.isDone && !this.finishLater && h("div", { class: "intro" }, "Please review and act on these documents."), !this.isDone && (h("div", { class: "header" }, !this.agreed ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, state.envelope.name), h("div", { style: { flex: '1' } }))), !this.isDone && !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), !this.isDone && !this.agreed ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), this.isDone ? (
     // <div>test</div>
     h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })) : (h("div", { class: "document" }, (state.envelope.documents || []).map(envelopeDocument => {
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];

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

@@ -3,6 +3,7 @@ import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { s as state } from './templateStore.js';
 import { l as loadTemplate } from './Templates.js';
 import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$3 } from './verdocs-component-error2.js';
 import { d as defineCustomElement$2 } from './verdocs-loader2.js';
 
 const verdocsTemplateAttachmentsCss = "verdocs-template-attachments{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-attachments h5{font-size:16px;font-weight:bold;margin:0 0 10px 0;color:#4c56cb}verdocs-template-attachments .attachment{display:-ms-flexbox;display:flex;padding:5px 10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#33364b;border:1px solid #cccccc}verdocs-template-attachments svg{width:24px;height:24px;fill:#5c6575;margin:2px 10px 0 0}";
@@ -32,6 +33,9 @@ const VerdocsTemplateAttachments$1 = /*@__PURE__*/ proxyCustomElement(class exte
     }
   }
   render() {
+    if (!this.endpoint.session) {
+      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
     if (this.loading) {
       return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
     }
@@ -51,13 +55,18 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-template-attachments", "verdocs-loader"];
+  const components = ["verdocs-template-attachments", "verdocs-component-error", "verdocs-loader"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-template-attachments":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, VerdocsTemplateAttachments$1);
       }
       break;
+    case "verdocs-component-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
     case "verdocs-loader":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();

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

@@ -22,12 +22,12 @@ const iconDatepicker = '<svg xmlns="http://www.w3.org/2000/svg" height="24" widt
 const iconSignature = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path 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 d="M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z"/></svg>';
 const menuOptions = [
-  { id: 'attachment', tooltip: 'Attachment', icon: 'A' },
+  // {id: 'attachment', tooltip: 'Attachment', icon: 'A'},
   { id: 'checkbox', tooltip: 'Check Box', icon: iconCheck },
   { id: 'date', tooltip: 'Date', icon: iconDatepicker },
   { id: 'dropdown', tooltip: 'Dropdown', icon: 'O' },
   { id: 'initial', tooltip: 'Initials', icon: iconInitial },
-  { id: 'payment', tooltip: 'Payment', icon: 'P' },
+  // {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 },
@@ -41,12 +41,14 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     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 = {};
     this.cachedPageInfo = {};
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
     this.placing = null;
     this.selectedRoleName = '';
+    this.rerender = 1;
   }
   async componentWillLoad() {
     var _a, _b, _c, _d, _e, _f;
@@ -81,11 +83,16 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   async handleFieldChange(field, e, optionId) {
     console.log('[FIELDS] handleFieldChange', field, e, optionId);
+    this.rerender++;
   }
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
     el.addEventListener('settingsChanged', () => {
+      var _a;
+      console.log('settings changed', this, field);
       el.setAttribute('roleindex', getRoleIndex(state.roleNames, field.role_name));
+      this.rerender++;
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: state.template, event: 'updated-field' });
     });
     el.setAttribute('roleindex', roleIndex);
     el.setAttribute('pageNumber', pageInfo.pageNumber);
@@ -169,6 +176,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     return { x, y };
   }
   async handleClickPage(e, page) {
+    var _a;
     if (this.placing) {
       const pageNumber = page.sequence;
       const clickedX = e.offsetX;
@@ -227,11 +235,11 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       console.log('Saved field', saved);
       state.fields.push(saved);
       this.placing = null;
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: state.template, event: 'added-field' });
       this.handlePageRendered({ detail: this.cachedPageInfo[pageNumber] });
     }
   }
   render() {
-    console.log('rendering', state.updateCount);
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
@@ -241,7 +249,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
     const pages = [...state.template.pages];
     pages.sort((a, b) => a.sequence - b.sequence);
-    return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-updated": state.updateCount, onSubmit: () => {
+    return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-r": this.rerender, onSubmit: () => {
         console.log('onSubmit');
       } }, h("div", { class: "pages" }, pages.map(page => {
       // console.log('rendering page', page);
@@ -258,7 +266,8 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "endpoint": [16],
     "templateId": [1, "template-id"],
     "placing": [32],
-    "selectedRoleName": [32]
+    "selectedRoleName": [32],
+    "rerender": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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

@@ -4,7 +4,8 @@ import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { s as state } from './templateStore.js';
 import { l as loadTemplate } from './Templates.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$5 } from './verdocs-button2.js';
+import { d as defineCustomElement$6 } from './verdocs-button2.js';
+import { d as defineCustomElement$5 } from './verdocs-component-error2.js';
 import { d as defineCustomElement$4 } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$3 } from './verdocs-loader2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
@@ -54,13 +55,12 @@ const VerdocsTemplateName$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
   }
   render() {
+    if (!this.endpoint.session) {
+      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
     if (this.loading) {
       return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
     }
-    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-    if (!this.endpoint.session || !state.template) {
-      return h(Host, { class: "empty" });
-    }
     return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("label", { htmlFor: "verdocs-template-name" }, "Template Name"), h("verdocs-text-input", { id: "verdocs-template-name", value: this.name, autocomplete: "off", placeholder: "Template Name...", onInput: (e) => {
         this.name = e.target.value;
         this.dirty = this.name !== state.template.name;
@@ -78,7 +78,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-template-name", "verdocs-button", "verdocs-help-icon", "verdocs-loader", "verdocs-text-input"];
+  const components = ["verdocs-template-name", "verdocs-button", "verdocs-component-error", "verdocs-help-icon", "verdocs-loader", "verdocs-text-input"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-template-name":
       if (!customElements.get(tagName)) {
@@ -86,6 +86,11 @@ function defineCustomElement$1() {
       }
       break;
     case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-component-error":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }

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

@@ -7,15 +7,16 @@ import { s as state } from './templateStore.js';
 import { l as loadTemplate } from './Templates.js';
 import { a as getRoleIndex } from './utils.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$9 } from './verdocs-button2.js';
-import { d as defineCustomElement$8 } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$a } from './verdocs-button2.js';
+import { d as defineCustomElement$9 } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$8 } from './verdocs-component-error2.js';
 import { d as defineCustomElement$7 } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$6 } from './verdocs-radio-button2.js';
 import { d as defineCustomElement$5 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$3 } from './verdocs-template-sender2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-const verdocsTemplateRecipientsCss = "verdocs-template-recipients{display:block;min-width:400px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-recipients>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-recipients>form h5{font-size:16px;font-weight:bold;color:#4c56cb;margin:0 0 10px 0}verdocs-template-recipients>form .participants{position:relative}verdocs-template-recipients>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-recipients>form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;margin-left:40px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:6px 0 4px 0}verdocs-template-recipients>form .row .row-recipients{-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-recipients>form .row .icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-template-recipients>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-recipients>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-recipients>form .row .label{font-weight:bold;margin-right:6px;color:#33364b}verdocs-template-recipients>form .row .settings-button{margin:4px 0 0 9px;cursor:pointer}verdocs-template-recipients>form .row .recipient{height:30px;display:-ms-flexbox;display:flex;font-size:14px;line-height:30px;border-radius:30px;-ms-flex-direction:row;flex-direction:row;padding:0 5px 0 6px;white-space:nowrap;border:1px solid #aeb4bf}verdocs-template-recipients>form .row .recipient .type-icon{width:24px;height:24px;-webkit-transform:scale(0.8);transform:scale(0.8);opacity:0.6;margin:4px 12px 0 0}verdocs-template-recipients>form .row .recipient.dragging{position:absolute}verdocs-template-recipients>form .row .recipient.dragging+.dropzone{display:none !important}verdocs-template-recipients>form .row .dropzone{width:14px;height:30px;display:none}verdocs-template-recipients>form .row .dropzone svg{fill:#cccccc}verdocs-template-recipients>form .row .dropzone.visible{margin:0 7px;display:-ms-flexbox;display:flex;-ms-flex:0 0 14px;flex:0 0 14px}verdocs-template-recipients>form .row .dropzone.active{-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;background:#654dcb7f;border:1px dashed #654dcb}verdocs-template-recipients>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-recipients>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-recipients>form input:focus{outline:none}verdocs-template-recipients .row.add-sequence{display:none}verdocs-template-recipients .add-role{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-recipients .add-role:hover{opacity:1}verdocs-template-recipients .add-role svg{width:32px;height:32px}verdocs-template-recipients.dragging .add-role{display:none}verdocs-template-recipients.dragging form .row .recipient+.dropzone{display:-ms-flexbox;display:flex}verdocs-template-recipients.dragging .row.add-sequence{display:-ms-flexbox;display:flex}verdocs-template-recipients.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-recipients.dragging .row.add-sequence .dropzone.active{opacity:1}verdocs-template-recipients .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-recipients .empty{font-size:13px;margin-top:15px;margin-bottom:5px}verdocs-template-recipients .empty svg{width:20px;height:20px;stroke:#666666;margin-bottom:-5px}verdocs-template-recipients ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-recipients ::-moz-placeholder{color:#aaaaaa}verdocs-template-recipients :-ms-input-placeholder{color:#aaaaaa}verdocs-template-recipients ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-recipients ::placeholder{color:#aaaaaa}";
+const verdocsTemplateRecipientsCss = "verdocs-template-recipients{display:block;min-width:400px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-recipients>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-recipients>form h5{font-size:16px;font-weight:bold;color:#4c56cb;margin:0 0 10px 0}verdocs-template-recipients>form .participants{position:relative}verdocs-template-recipients>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-recipients>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-recipients>form .row .row-recipients{-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-recipients>form .row .icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-template-recipients>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-recipients>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-recipients>form .row .label{font-weight:bold;margin-right:6px;color:#33364b}verdocs-template-recipients>form .row .settings-button{margin:4px 0 0 9px;cursor:pointer}verdocs-template-recipients>form .row .recipient{height:30px;display:-ms-flexbox;display:flex;font-size:14px;line-height:30px;border-radius:30px;-ms-flex-direction:row;flex-direction:row;padding:0 5px 0 6px;white-space:nowrap;border:1px solid #aeb4bf}verdocs-template-recipients>form .row .recipient .type-icon{width:24px;height:24px;-webkit-transform:scale(0.8);transform:scale(0.8);opacity:0.6;margin:4px 12px 0 0}verdocs-template-recipients>form .row .recipient.dragging{position:absolute}verdocs-template-recipients>form .row .recipient.dragging+.dropzone{display:none !important}verdocs-template-recipients>form .row .dropzone{width:14px;height:30px;display:none}verdocs-template-recipients>form .row .dropzone svg{fill:#cccccc}verdocs-template-recipients>form .row .dropzone.visible{margin:0 7px;display:-ms-flexbox;display:flex;-ms-flex:0 0 14px;flex:0 0 14px}verdocs-template-recipients>form .row .dropzone.active{-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;background:#654dcb7f;border:1px dashed #654dcb}verdocs-template-recipients>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-recipients>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-recipients>form input:focus{outline:none}verdocs-template-recipients .row.add-sequence{display:none}verdocs-template-recipients .add-role{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-recipients .add-role:hover{opacity:1}verdocs-template-recipients .add-role svg{width:32px;height:32px}verdocs-template-recipients .add-step{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-recipients .add-step:hover{opacity:1}verdocs-template-recipients .add-step svg{width:32px;height:32px}verdocs-template-recipients.dragging .add-role{display:none}verdocs-template-recipients.dragging form .row .recipient+.dropzone{display:-ms-flexbox;display:flex}verdocs-template-recipients.dragging .row.add-sequence{display:-ms-flexbox;display:flex}verdocs-template-recipients.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-recipients.dragging .row.add-sequence .dropzone.active{opacity:1}verdocs-template-recipients .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-recipients .empty{font-size:13px;margin-top:15px;margin-bottom:5px}verdocs-template-recipients .empty svg{width:20px;height:20px;stroke:#666666;margin-bottom:-5px}verdocs-template-recipients ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-recipients ::-moz-placeholder{color:#aaaaaa}verdocs-template-recipients :-ms-input-placeholder{color:#aaaaaa}verdocs-template-recipients ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-recipients ::placeholder{color:#aaaaaa}";
 
 const senderLabels = {
   [TemplateSenderTypes.EVERYONE]: 'Everyone',
@@ -39,6 +40,7 @@ const VerdocsTemplateRecipients$1 = /*@__PURE__*/ proxyCustomElement(class exten
     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.sequences = [];
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
@@ -196,17 +198,47 @@ const VerdocsTemplateRecipients$1 = /*@__PURE__*/ proxyCustomElement(class exten
     // Now re-extract them to get our final result e.g. [1, 2, 3]
     this.extractSequenceNumbers();
   }
-  handleAddRole(e, sequence) {
-    e.stopPropagation();
-    // We don't need to look for a unique order number because we're already working with a sorted/renumbered set by now.
-    const order = state.template.roles.filter(role => role.sequence === sequence).length + 1;
-    // We do need to look for name conflicts because they're UGC and can be anything, regardless of order.
+  // Look for name conflicts, because they're UGC and can be anything, regardless of order.
+  getNextRecipientName() {
     let name = '';
     let nextNumber = state.template.roles.length;
     do {
       nextNumber++;
       name = `Recipient ${nextNumber}`;
     } while (!name || state.template.roles.some(role => role.name === name));
+    return name;
+  }
+  handleAddRole(e, sequence) {
+    e.stopPropagation();
+    // We don't need to look for a unique order number because we're already working with a sorted/renumbered set by now.
+    const order = state.template.roles.filter(role => role.sequence === sequence).length + 1;
+    const name = this.getNextRecipientName();
+    console.log('Will create', name, sequence, order);
+    createRole(this.endpoint, this.templateId, {
+      template_id: this.templateId,
+      name,
+      full_name: '',
+      email: '',
+      phone: '',
+      sequence,
+      order,
+      type: 'signer',
+      delegator: false,
+    })
+      .then(r => {
+      console.log('Created role', r);
+      state.template.roles.push(r);
+      this.renumberTemplateRoles();
+      this.forceRerender++;
+    })
+      .catch(e => {
+      console.log('Error creating role', e);
+    });
+  }
+  handleAddStep(e, sequence) {
+    e.stopPropagation();
+    const order = 1;
+    const name = this.getNextRecipientName();
     console.log('Will create', name, sequence, order);
     createRole(this.endpoint, this.templateId, {
       template_id: this.templateId,
@@ -230,12 +262,16 @@ const VerdocsTemplateRecipients$1 = /*@__PURE__*/ proxyCustomElement(class exten
     });
   }
   render() {
-    const roleNames = state.template.roles.map(role => role.name);
+    var _a;
+    if (!this.endpoint.session) {
+      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
+    const roleNames = (((_a = state.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-recipients" }, h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[state.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-recipients" }, 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-recipients" }, h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), state.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 })));
-    }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-recipients" }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step")))))), this.sequences.length < 1 && (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-recipients" }, h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, 1) }))))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-recipients" }, h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
+    }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-recipients" }, 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-recipients" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), this.sequences.length < 1 && (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-recipients" }, h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, 1) }))))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-recipients" }, 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 => {
@@ -259,7 +295,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-template-recipients", "verdocs-button", "verdocs-checkbox", "verdocs-help-icon", "verdocs-radio-button", "verdocs-select-input", "verdocs-template-role-properties", "verdocs-template-sender", "verdocs-text-input"];
+  const components = ["verdocs-template-recipients", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-radio-button", "verdocs-select-input", "verdocs-template-role-properties", "verdocs-template-sender", "verdocs-text-input"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-template-recipients":
       if (!customElements.get(tagName)) {
@@ -268,10 +304,15 @@ function defineCustomElement$1() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "verdocs-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "verdocs-component-error":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }

package/dist/components/verdocs-view2.js

@@ -1,23 +1,20 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { f as saveEnvelopesAsZip, h as saveCertificate, s as saveAttachment } from './utils.js';
 import { g as getEnvelopeById, s as state } from './Envelopes.js';
 import { S as SDKError } from './errors.js';
-import { s as savePDF } from './utils.js';
 import { d as defineCustomElement$3 } from './verdocs-document-page2.js';
 import { d as defineCustomElement$2 } from './verdocs-dropdown2.js';
 import { d as defineCustomElement$1 } from './verdocs-loader2.js';
 
 const verdocsViewCss = "verdocs-view{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-view div,verdocs-view canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-view .header{color:#fff;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 56px;flex:0 0 56px;padding:0 15px;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-view .header .logo{width:80px;display:none;margin:-6px 0 0 10px}verdocs-view .header .title{padding-left:16px;font-size:18px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}verdocs-view .document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-view .document .inner{width:100%;max-width:1028px}";
 
-const menuOptions = [
-  { id: 'print', label: 'Print' },
-  { id: 'download', label: 'Download' },
-];
 const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.sdkError = createEvent(this, "sdkError", 7);
+    this.envelopeUpdated = createEvent(this, "envelopeUpdated", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
     this.envelopeId = '';
   }
@@ -59,15 +56,42 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     // });
   }
   async handleOptionSelected(e) {
+    var _a;
     switch (e.detail.id) {
       case 'print':
         window.print();
+        (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'printed' });
         break;
-      case 'download':
-        savePDF(this.endpoint, state.envelope, state.envelope.envelope_document_id).catch(e => {
+      case 'download-attachments':
+        saveAttachment(this.endpoint, state.envelope, state.envelope.envelope_document_id)
+          .then(() => {
+          var _a;
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'downloaded' });
+        })
+          .catch(e => {
           console.log('Error downloading PDF', e);
         });
         break;
+      case 'download-certificate':
+        saveCertificate(this.endpoint, state.envelope, state.envelope.certificate_document_id)
+          .then(() => {
+          var _a;
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'downloaded' });
+        })
+          .catch(e => {
+          console.log('Error downloading PDF', e);
+        });
+        break;
+      case 'download-all':
+        saveEnvelopesAsZip(this.endpoint, [state.envelope])
+          .then(() => {
+          var _a;
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'downloaded' });
+        })
+          .catch(e => {
+          console.log('Error downloading Zip', e);
+        });
+        break;
     }
   }
   render() {
@@ -79,7 +103,22 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (state.error) {
       return (h(Host, null, h("div", null, state.error)));
     }
-    return (h(Host, null, h("div", { class: "header" }, h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, state.envelope.name), h("div", { style: { flex: '1' } }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document" }, (((_a = state.envelope) === null || _a === void 0 ? void 0 : _a.documents) || [])
+    const menuOptions = [{ id: 'print', label: 'Print' }];
+    const hasAttachments = state.envelope.documents.length > 0;
+    const hasCertificate = !!state.envelope.certificate;
+    if (hasAttachments || hasCertificate) {
+      menuOptions.push({ label: '' });
+    }
+    if (hasAttachments) {
+      menuOptions.push({ id: 'download-attachments', label: 'Download Documents(s)' });
+    }
+    if (hasCertificate) {
+      menuOptions.push({ id: 'download-certificate', label: 'Download Certificate' });
+    }
+    if (hasAttachments && hasCertificate) {
+      menuOptions.push({ id: 'download-all', label: 'Download All Files' });
+    }
+    return (h(Host, { "data-r": state.updateCount }, h("div", { class: "header" }, h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, state.envelope.name), h("div", { style: { flex: '1' } }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document" }, (((_a = state.envelope) === null || _a === void 0 ? void 0 : _a.documents) || [])
       .filter(document => document.type !== 'certificate')
       .map(envelopeDocument => {
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];