@verdocs/web-sdk 1.10.10 → 1.11.1

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

@@ -3,22 +3,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
-const interact_min = require('./interact.min-3e3c03a5.js');
+const interact_min = require('./interact.min-d223d04b.js');
 const Roles = require('./Roles-927719de.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
 const Colors = require('./Colors-e809dcc9.js');
 const templateStore = require('./templateStore-81ad25a7.js');
 const Templates = require('./Templates-2f2ea153.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 require('./Templates-ed812768.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.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 = {
   [VerdocsEndpoint.TemplateSenderTypes.EVERYONE]: 'Everyone',
@@ -41,6 +42,7 @@ const VerdocsTemplateRecipients = class {
     this.next = index.createEvent(this, "next", 7);
     this.cancel = index.createEvent(this, "cancel", 7);
     this.sdkError = index.createEvent(this, "sdkError", 7);
+    this.templateUpdated = index.createEvent(this, "templateUpdated", 7);
     this.sequences = [];
     this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
     this.templateId = '';
@@ -198,17 +200,47 @@ const VerdocsTemplateRecipients = class {
     // 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 = templateStore.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 = templateStore.state.template.roles.length;
     do {
       nextNumber++;
       name = `Recipient ${nextNumber}`;
     } while (!name || templateStore.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 = templateStore.state.template.roles.filter(role => role.sequence === sequence).length + 1;
+    const name = this.getNextRecipientName();
+    console.log('Will create', name, sequence, order);
+    Roles.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);
+      templateStore.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);
     Roles.createRole(this.endpoint, this.templateId, {
       template_id: this.templateId,
@@ -232,12 +264,16 @@ const VerdocsTemplateRecipients = class {
     });
   }
   render() {
-    const roleNames = templateStore.state.template.roles.map(role => role.name);
+    var _a;
+    if (!this.endpoint.session) {
+      return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
+    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-recipients" }, 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-recipients" }, 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-recipients" }, 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 })));
-    }), index.h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), index.h("div", { class: "row add-sequence", "data-sequence": sequence }, index.h("div", { class: "row-recipients" }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step")))))), this.sequences.length < 1 && (index.h(index.Fragment, null, index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: stepIcon }), index.h("div", { class: "row-recipients" }, index.h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, 1) }))))), index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: doneIcon }), index.h("div", { class: "row-recipients" }, index.h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (index.h("div", { class: "empty" }, "You must add at least one Role before proceeding.", index.h("br", null), " Click the ", index.h("span", { innerHTML: plusIcon }), " Add button above to get started.")), index.h("div", { class: "buttons" }, index.h("div", { class: "flex-fill" }), index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (index.h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
+    }), index.h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), index.h("div", { class: "row add-sequence", "data-sequence": sequence }, index.h("div", { class: "row-recipients" }, 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-recipients" }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), this.sequences.length < 1 && (index.h(index.Fragment, null, index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: stepIcon }), index.h("div", { class: "row-recipients" }, index.h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, 1) }))))), index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: doneIcon }), index.h("div", { class: "row-recipients" }, 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 => {

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

@@ -4,25 +4,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
-const Envelopes = require('./Envelopes-4cc18551.js');
+const utils = require('./utils-f4cfa1fb.js');
+const Envelopes = require('./Envelopes-9886af0f.js');
 const errors = require('./errors-0396da3d.js');
-const utils = require('./utils-865fd657.js');
 require('./Token-576f0e8a.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
+require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Templates-ed812768.js');
-require('./Files-4bdc0c0f.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 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.sdkError = index.createEvent(this, "sdkError", 7);
+    this.envelopeUpdated = index.createEvent(this, "envelopeUpdated", 7);
     this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
     this.envelopeId = '';
   }
@@ -64,15 +62,42 @@ const VerdocsView = class {
     // });
   }
   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: Envelopes.state.envelope, event: 'printed' });
+        break;
+      case 'download-attachments':
+        utils.saveAttachment(this.endpoint, Envelopes.state.envelope, Envelopes.state.envelope.envelope_document_id)
+          .then(() => {
+          var _a;
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: Envelopes.state.envelope, event: 'downloaded' });
+        })
+          .catch(e => {
+          console.log('Error downloading PDF', e);
+        });
         break;
-      case 'download':
-        utils.savePDF(this.endpoint, Envelopes.state.envelope, Envelopes.state.envelope.envelope_document_id).catch(e => {
+      case 'download-certificate':
+        utils.saveCertificate(this.endpoint, Envelopes.state.envelope, Envelopes.state.envelope.certificate_document_id)
+          .then(() => {
+          var _a;
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: Envelopes.state.envelope, event: 'downloaded' });
+        })
+          .catch(e => {
           console.log('Error downloading PDF', e);
         });
         break;
+      case 'download-all':
+        utils.saveEnvelopesAsZip(this.endpoint, [Envelopes.state.envelope])
+          .then(() => {
+          var _a;
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: Envelopes.state.envelope, event: 'downloaded' });
+        })
+          .catch(e => {
+          console.log('Error downloading Zip', e);
+        });
+        break;
     }
   }
   render() {
@@ -84,7 +109,22 @@ const VerdocsView = class {
     if (Envelopes.state.error) {
       return (index.h(index.Host, null, index.h("div", null, Envelopes.state.error)));
     }
-    return (index.h(index.Host, null, index.h("div", { class: "header" }, index.h(index.Fragment, null, index.h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), index.h("div", { class: "title" }, Envelopes.state.envelope.name), index.h("div", { style: { flex: '1' } }), index.h("div", { style: { marginLeft: '10px' } }), index.h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), index.h("div", { class: "document" }, (((_a = Envelopes.state.envelope) === null || _a === void 0 ? void 0 : _a.documents) || [])
+    const menuOptions = [{ id: 'print', label: 'Print' }];
+    const hasAttachments = Envelopes.state.envelope.documents.length > 0;
+    const hasCertificate = !!Envelopes.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 (index.h(index.Host, { "data-r": Envelopes.state.updateCount }, index.h("div", { class: "header" }, index.h(index.Fragment, null, index.h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), index.h("div", { class: "title" }, Envelopes.state.envelope.name), index.h("div", { style: { flex: '1' } }), index.h("div", { style: { marginLeft: '10px' } }), index.h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), index.h("div", { class: "document" }, (((_a = Envelopes.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) || [])];

package/dist/cjs/verdocs-web-sdk.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["verdocs-field-initial.cjs",[[0,"verdocs-field-initial",{"field":[16],"disabled":[4],"initials":[1],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"tempInitials":[32],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-signature.cjs",[[0,"verdocs-field-signature",{"field":[16],"name":[1],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"tempSignature":[32],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-build.cjs",[[0,"verdocs-build",{"endpoint":[16],"templateId":[1,"template-id"],"step":[32],"pdfUrl":[32],"template":[32]}]]],["verdocs-field-checkbox.cjs",[[0,"verdocs-field-checkbox",{"field":[16],"option":[2],"disabled":[4],"done":[4],"roleindex":[2],"editable":[4],"moveable":[4],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-date.cjs",[[0,"verdocs-field-date",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"containerId":[32],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-radio-button.cjs",[[0,"verdocs-field-radio-button",{"field":[16],"option":[2],"disabled":[4],"done":[4],"roleindex":[2],"editable":[4],"moveable":[4],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-textarea.cjs",[[0,"verdocs-field-textarea",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-textbox.cjs",[[0,"verdocs-field-textbox",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-timestamp.cjs",[[0,"verdocs-field-timestamp",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-template-recipients.cjs",[[0,"verdocs-template-recipients",{"endpoint":[16],"templateId":[1,"template-id"],"showingRoleDialog":[32],"showingSenderDialog":[32],"sender":[32],"forceRerender":[32]}]]],["verdocs-sign.cjs",[[0,"verdocs-sign",{"envelopeId":[1,"envelope-id"],"roleId":[1,"role-id"],"inviteCode":[1,"invite-code"],"recipient":[32],"signerToken":[32],"hasSignature":[32],"nextButtonLabel":[32],"nextSubmits":[32],"errorMessage":[32],"focusedField":[32],"isDone":[32],"showDone":[32],"finishLater":[32],"showFinishLater":[32],"agreed":[32],"documentsSingularPlural":[32]}]]],["verdocs-template-properties.cjs",[[0,"verdocs-template-properties",{"endpoint":[16],"templateId":[1,"template-id"],"template":[32],"name":[32],"visibility":[32],"sendReminders":[32],"firstReminderDays":[32],"reminderDays":[32]}]]],["verdocs-template-reminders.cjs",[[0,"verdocs-template-reminders",{"endpoint":[16],"templateId":[1,"template-id"],"showPlanBlocker":[32],"sendReminders":[32],"firstReminderDays":[32],"reminderDays":[32],"dirty":[32],"loading":[32]}]]],["verdocs-auth.cjs",[[0,"verdocs-auth",{"endpoint":[16],"visible":[4],"logo":[1],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-template-name.cjs",[[0,"verdocs-template-name",{"endpoint":[16],"templateId":[1,"template-id"],"name":[32],"dirty":[32],"loading":[32]}]]],["verdocs-search.cjs",[[0,"verdocs-search",{"endpoint":[16]}]]],["verdocs-send.cjs",[[0,"verdocs-send",{"endpoint":[16],"templateId":[1,"template-id"],"containerId":[32],"rolesAtLevel":[32],"showPickerForId":[32],"sessionContacts":[32],"rolesCompleted":[32],"reset":[64]}]]],["verdocs-template-visibility.cjs",[[0,"verdocs-template-visibility",{"endpoint":[16],"templateId":[1,"template-id"],"dirty":[32],"loading":[32],"personal":[32],"public":[32]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-field-attachment.cjs",[[0,"verdocs-field-attachment",{"field":[16],"disabled":[4],"roleIndex":[2,"role-index"],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-preview.cjs",[[0,"verdocs-preview",{"endpoint":[16],"templateId":[1,"template-id"]}]]],["verdocs-envelope-sidebar.cjs",[[0,"verdocs-envelope-sidebar",{"endpoint":[16],"envelopeId":[1,"envelope-id"],"activeTab":[32],"panelOpen":[32]}]]],["verdocs-kba-dialog.cjs",[[0,"verdocs-kba-dialog",{"step":[2],"steps":[2],"helptitle":[1],"helptext":[1],"mode":[1],"label":[1],"placeholder":[1],"choices":[16],"response":[32]}]]],["verdocs-template-attachments.cjs",[[0,"verdocs-template-attachments",{"endpoint":[16],"templateId":[1,"template-id"],"loading":[32]}]]],["verdocs-field-dropdown.cjs",[[0,"verdocs-field-dropdown",{"field":[16],"disabled":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-payment.cjs",[[0,"verdocs-field-payment",{"field":[16],"disabled":[4],"fields":[16],"pageNum":[2,"page-num"],"roleName":[1,"role-name"],"fieldId":[1,"field-id"],"recipients":[8],"selectedRoleName":[1,"selected-role-name"],"pdfPages":[16],"currentSignature":[1,"current-signature"],"currentSignatureId":[1,"current-signature-id"],"currentInitial":[1,"current-initial"],"currentInitialId":[1,"current-initial-id"],"focused":[4],"signed":[4],"roleindex":[2],"preparedMessage":[32],"signatureUrl":[32],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-organization-card.cjs",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-search-tabs.cjs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-status-indicator.cjs",[[0,"verdocs-status-indicator",{"size":[1],"theme":[1],"status":[1],"envelope":[16],"isOpen":[32],"recipientStatusIcons":[32],"containerId":[32]}]]],["verdocs-template-card.cjs",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags.cjs",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle.cjs",[[0,"verdocs-toggle",{"options":[16],"theme":[1],"selectedOption":[32]}]]],["verdocs-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"initials":[1],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-signature-dialog.cjs",[[0,"verdocs-signature-dialog",{"name":[1],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-view.cjs",[[0,"verdocs-view",{"endpoint":[16],"envelopeId":[1,"envelope-id"]}]]],["verdocs-toggle-button.cjs",[[0,"verdocs-toggle-button",{"active":[4],"icon":[1],"label":[1],"size":[1],"_active":[32]}]]],["verdocs-contact-picker.cjs",[[0,"verdocs-contact-picker",{"endpoint":[16],"templateRole":[16],"contactSuggestions":[16],"name":[32],"email":[32],"phone":[32],"message":[32],"showSuggestions":[32],"showMessage":[32],"delegator":[32]}]]],["verdocs-radio-button.cjs",[[0,"verdocs-radio-button",{"checked":[4],"name":[1],"value":[1],"disabled":[4]}]]],["verdocs-button.cjs",[[0,"verdocs-button",{"label":[1],"startIcon":[1,"start-icon"],"endIcon":[1,"end-icon"],"size":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-template-role-properties_2.cjs",[[0,"verdocs-template-role-properties",{"endpoint":[16],"templateId":[1,"template-id"],"roleName":[1,"role-name"],"sender":[1],"dirty":[32],"saving":[32],"name":[32],"type":[32],"fullName":[32],"email":[32],"phone":[32],"allowDelegation":[32]}],[0,"verdocs-template-sender",{"endpoint":[16],"templateId":[1,"template-id"],"sender":[1],"saving":[32]}]]],["verdocs-floating-menu_2.cjs",[[0,"verdocs-floating-menu",{"options":[16]}],[0,"verdocs-toolbar-icon",{"text":[1],"icon":[1],"placement":[1],"containerId":[32]}]]],["verdocs-template-create_2.cjs",[[0,"verdocs-template-fields",{"endpoint":[16],"templateId":[1,"template-id"],"placing":[32],"selectedRoleName":[32]}],[0,"verdocs-template-create",{"endpoint":[16],"file":[32],"creating":[32]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"showCancel":[4,"show-cancel"]}]]],["verdocs-quick-functions_3.cjs",[[0,"verdocs-quick-functions",{"endpoint":[16]}],[0,"verdocs-search-activity",{"endpoint":[16],"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}],[0,"verdocs-search-box",{"endpoint":[16],"placeholder":[1],"type":[1],"query":[1],"grabsFocus":[4,"grabs-focus"],"focusField":[64]}]]],["verdocs-dropdown.cjs",[[0,"verdocs-dropdown",{"options":[16],"open":[32]}]]],["verdocs-document-page_2.cjs",[[0,"verdocs-document-page",{"pageImageUri":[1,"page-image-uri"],"pageNumber":[2,"page-number"],"virtualWidth":[2,"virtual-width"],"virtualHeight":[1026,"virtual-height"],"layers":[16],"containerId":[32],"renderedWidth":[32],"renderedHeight":[32],"naturalWidth":[32],"naturalHeight":[32],"aspectRatio":[32],"skipFirstNotification":[32]}],[0,"verdocs-loader"]]],["verdocs-checkbox_4.cjs",[[0,"verdocs-checkbox",{"checked":[4],"name":[1],"label":[1],"value":[1],"theme":[1],"disabled":[4]}],[0,"verdocs-component-error",{"message":[1]}],[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"helpText":[1,"help-text"],"type":[1],"disabled":[4]}],[0,"verdocs-help-icon",{"text":[1],"containerId":[32]}]]],["verdocs-button-panel_3.cjs",[[0,"verdocs-template-field-properties",{"endpoint":[16],"templateId":[1,"template-id"],"fieldName":[1,"field-name"],"dirty":[32],"loading":[32],"type":[32],"name":[32],"roleName":[32],"required":[32],"placeholder":[32],"defaultValue":[32]}],[4,"verdocs-button-panel",{"icon":[1],"showPanel":[64],"hidePanel":[64],"toggle":[64]}],[0,"verdocs-select-input",{"value":[1],"label":[1],"options":[16],"disabled":[4]}]]]], options);
+  return index.bootstrapLazy([["verdocs-button.cjs",[[0,"verdocs-button",{"label":[1],"startIcon":[1,"start-icon"],"endIcon":[1,"end-icon"],"size":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-field-initial.cjs",[[0,"verdocs-field-initial",{"field":[16],"disabled":[4],"initials":[1],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"tempInitials":[32],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-signature.cjs",[[0,"verdocs-field-signature",{"field":[16],"name":[1],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"tempSignature":[32],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-template-recipients.cjs",[[0,"verdocs-template-recipients",{"endpoint":[16],"templateId":[1,"template-id"],"showingRoleDialog":[32],"showingSenderDialog":[32],"sender":[32],"forceRerender":[32]}]]],["verdocs-build.cjs",[[0,"verdocs-build",{"endpoint":[16],"templateId":[1,"template-id"],"step":[32],"pdfUrl":[32],"template":[32]}]]],["verdocs-field-checkbox.cjs",[[0,"verdocs-field-checkbox",{"field":[16],"option":[2],"disabled":[4],"done":[4],"roleindex":[2],"editable":[4],"moveable":[4],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-date.cjs",[[0,"verdocs-field-date",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"containerId":[32],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-radio-button.cjs",[[0,"verdocs-field-radio-button",{"field":[16],"option":[2],"disabled":[4],"done":[4],"roleindex":[2],"editable":[4],"moveable":[4],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-textarea.cjs",[[0,"verdocs-field-textarea",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-textbox.cjs",[[0,"verdocs-field-textbox",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-timestamp.cjs",[[0,"verdocs-field-timestamp",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-sign.cjs",[[0,"verdocs-sign",{"envelopeId":[1,"envelope-id"],"roleId":[1,"role-id"],"inviteCode":[1,"invite-code"],"recipient":[32],"signerToken":[32],"hasSignature":[32],"nextButtonLabel":[32],"nextSubmits":[32],"errorMessage":[32],"focusedField":[32],"isDone":[32],"showDone":[32],"finishLater":[32],"showFinishLater":[32],"agreed":[32],"documentsSingularPlural":[32]}]]],["verdocs-template-properties.cjs",[[0,"verdocs-template-properties",{"endpoint":[16],"templateId":[1,"template-id"],"template":[32],"name":[32],"visibility":[32],"sendReminders":[32],"firstReminderDays":[32],"reminderDays":[32]}]]],["verdocs-template-reminders.cjs",[[0,"verdocs-template-reminders",{"endpoint":[16],"templateId":[1,"template-id"],"showPlanBlocker":[32],"sendReminders":[32],"firstReminderDays":[32],"reminderDays":[32],"dirty":[32],"loading":[32]}]]],["verdocs-template-name.cjs",[[0,"verdocs-template-name",{"endpoint":[16],"templateId":[1,"template-id"],"name":[32],"dirty":[32],"loading":[32]}]]],["verdocs-auth.cjs",[[0,"verdocs-auth",{"endpoint":[16],"visible":[4],"logo":[1],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-search.cjs",[[0,"verdocs-search",{"endpoint":[16]}]]],["verdocs-send.cjs",[[0,"verdocs-send",{"endpoint":[16],"templateId":[1,"template-id"],"containerId":[32],"rolesAtLevel":[32],"showPickerForId":[32],"sessionContacts":[32],"rolesCompleted":[32],"reset":[64]}]]],["verdocs-template-visibility.cjs",[[0,"verdocs-template-visibility",{"endpoint":[16],"templateId":[1,"template-id"],"dirty":[32],"loading":[32],"personal":[32],"public":[32]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-field-attachment.cjs",[[0,"verdocs-field-attachment",{"field":[16],"disabled":[4],"roleIndex":[2,"role-index"],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-preview.cjs",[[0,"verdocs-preview",{"endpoint":[16],"templateId":[1,"template-id"]}]]],["verdocs-template-attachments.cjs",[[0,"verdocs-template-attachments",{"endpoint":[16],"templateId":[1,"template-id"],"loading":[32]}]]],["verdocs-envelope-sidebar.cjs",[[0,"verdocs-envelope-sidebar",{"endpoint":[16],"envelopeId":[1,"envelope-id"],"activeTab":[32],"panelOpen":[32]}]]],["verdocs-kba-dialog.cjs",[[0,"verdocs-kba-dialog",{"step":[2],"steps":[2],"helptitle":[1],"helptext":[1],"mode":[1],"label":[1],"placeholder":[1],"choices":[16],"response":[32]}]]],["verdocs-field-dropdown.cjs",[[0,"verdocs-field-dropdown",{"field":[16],"disabled":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-payment.cjs",[[0,"verdocs-field-payment",{"field":[16],"disabled":[4],"fields":[16],"pageNum":[2,"page-num"],"roleName":[1,"role-name"],"fieldId":[1,"field-id"],"recipients":[8],"selectedRoleName":[1,"selected-role-name"],"pdfPages":[16],"currentSignature":[1,"current-signature"],"currentSignatureId":[1,"current-signature-id"],"currentInitial":[1,"current-initial"],"currentInitialId":[1,"current-initial-id"],"focused":[4],"signed":[4],"roleindex":[2],"preparedMessage":[32],"signatureUrl":[32],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-organization-card.cjs",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-search-tabs.cjs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-status-indicator.cjs",[[0,"verdocs-status-indicator",{"size":[1],"theme":[1],"status":[1],"envelope":[16],"isOpen":[32],"recipientStatusIcons":[32],"containerId":[32]}]]],["verdocs-template-card.cjs",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags.cjs",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle.cjs",[[0,"verdocs-toggle",{"options":[16],"theme":[1],"selectedOption":[32]}]]],["verdocs-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"initials":[1],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-signature-dialog.cjs",[[0,"verdocs-signature-dialog",{"name":[1],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-view.cjs",[[0,"verdocs-view",{"endpoint":[16],"envelopeId":[1,"envelope-id"]}]]],["verdocs-toggle-button.cjs",[[0,"verdocs-toggle-button",{"active":[4],"icon":[1],"label":[1],"size":[1],"_active":[32]}]]],["verdocs-contact-picker.cjs",[[0,"verdocs-contact-picker",{"endpoint":[16],"templateRole":[16],"contactSuggestions":[16],"name":[32],"email":[32],"phone":[32],"message":[32],"showSuggestions":[32],"showMessage":[32],"delegator":[32]}]]],["verdocs-radio-button.cjs",[[0,"verdocs-radio-button",{"checked":[4],"name":[1],"value":[1],"disabled":[4]}]]],["verdocs-template-role-properties_2.cjs",[[0,"verdocs-template-role-properties",{"endpoint":[16],"templateId":[1,"template-id"],"roleName":[1,"role-name"],"sender":[1],"dirty":[32],"saving":[32],"name":[32],"type":[32],"fullName":[32],"email":[32],"phone":[32],"allowDelegation":[32]}],[0,"verdocs-template-sender",{"endpoint":[16],"templateId":[1,"template-id"],"sender":[1],"saving":[32]}]]],["verdocs-floating-menu_2.cjs",[[0,"verdocs-floating-menu",{"options":[16]}],[0,"verdocs-toolbar-icon",{"text":[1],"icon":[1],"placement":[1],"containerId":[32]}]]],["verdocs-template-create_2.cjs",[[0,"verdocs-template-fields",{"endpoint":[16],"templateId":[1,"template-id"],"placing":[32],"selectedRoleName":[32],"rerender":[32]}],[0,"verdocs-template-create",{"endpoint":[16],"file":[32],"creating":[32]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"showCancel":[4,"show-cancel"]}]]],["verdocs-quick-functions_3.cjs",[[0,"verdocs-quick-functions",{"endpoint":[16]}],[0,"verdocs-search-activity",{"endpoint":[16],"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}],[0,"verdocs-search-box",{"endpoint":[16],"placeholder":[1],"type":[1],"query":[1],"grabsFocus":[4,"grabs-focus"],"focusField":[64]}]]],["verdocs-dropdown.cjs",[[0,"verdocs-dropdown",{"options":[16],"open":[32]}]]],["verdocs-document-page_2.cjs",[[0,"verdocs-document-page",{"pageImageUri":[1,"page-image-uri"],"pageNumber":[2,"page-number"],"virtualWidth":[2,"virtual-width"],"virtualHeight":[1026,"virtual-height"],"layers":[16],"containerId":[32],"renderedWidth":[32],"renderedHeight":[32],"naturalWidth":[32],"naturalHeight":[32],"aspectRatio":[32],"skipFirstNotification":[32]}],[0,"verdocs-loader"]]],["verdocs-checkbox_4.cjs",[[0,"verdocs-checkbox",{"checked":[4],"name":[1],"label":[1],"value":[1],"theme":[1],"disabled":[4]}],[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"helpText":[1,"help-text"],"type":[1],"disabled":[4]}],[0,"verdocs-component-error",{"message":[1]}],[0,"verdocs-help-icon",{"text":[1],"containerId":[32]}]]],["verdocs-button-panel_3.cjs",[[0,"verdocs-template-field-properties",{"endpoint":[16],"templateId":[1,"template-id"],"fieldName":[1,"field-name"],"dirty":[32],"loading":[32],"type":[32],"name":[32],"roleName":[32],"required":[32],"placeholder":[32],"defaultValue":[32]}],[4,"verdocs-button-panel",{"icon":[1],"showPanel":[64],"hidePanel":[64],"toggle":[64]}],[0,"verdocs-select-input",{"value":[1],"label":[1],"options":[16],"disabled":[4]}]]]], options);
 });

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.css

@@ -49,6 +49,12 @@ verdocs-dropdown .option[disabled]:hover {
   cursor: inherit;
   background: transparent;
 }
+verdocs-dropdown .separator {
+  border-top: 1px solid #ffffff5f;
+  height: 1px;
+  padding-top: 5px;
+  margin-top: 5px;
+}
 verdocs-dropdown.open .items {
   display: block;
 }

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.js

@@ -4,13 +4,15 @@ import { h } from '@stencil/core';
 const DropdownArrow = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#50BE80"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>`;
 /**
  * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden
- * when the button is pressed again, or an option is selected.
+ * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label.
  *
  * ```html
  * <verdocs-dropdown
  *   options={[
  *     {label: 'Option 1', disabled: true},
  *     {label: 'Option 2', id: '2'}
+ *     {label: ''}
+ *     {label: 'Option 3', id: '2'}
  *    ]}
  *   label="OK" onClick={() => (console.log('OK clicked'))}
  * />
@@ -85,7 +87,7 @@ export class VerdocsDropdown {
   }
   render() {
     var _a;
-    return (h(Host, { class: { open: !!this.open } }, h("button", { class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("button", { onClick: e => this.handleSelectOption(e, option), class: "option", disabled: option.disabled }, option.label))))));
+    return (h(Host, { class: { open: !!this.open } }, h("button", { class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => option.label ? (h("button", { onClick: e => this.handleSelectOption(e, option), class: "option", disabled: option.disabled }, option.label)) : (h("div", { class: "separator" }))))));
   }
   static get is() { return "verdocs-dropdown"; }
   static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.stories.js

@@ -12,7 +12,7 @@ export default {
   component: 'verdocs-dropdown',
   // We can apply default args only shown in Storybook as follows
   args: {
-    options: [{ label: 'Option 1' }, { label: 'Disabled Option', disabled: true }, { label: 'Option 2' }],
+    options: [{ label: 'Option 1' }, { label: 'Disabled Option', disabled: true }, { lable: '' }, { label: 'Option 2' }],
   },
   // Here we can apply overrides to component property documentation. Note that we don't need to (and shouldn't) specify every field
   // here. Only those that need special attention.

package/dist/collection/components/elements/verdocs-component-error/verdocs-component-error.css

@@ -10,6 +10,8 @@ verdocs-component-error .inner {
   height: 300px;
   display: flex;
   font-size: 18px;
+  box-sizing: border-box;
+  padding: 0 20px;
   background: #ffffff;
   align-items: center;
   justify-content: center;

package/dist/collection/components/elements/verdocs-envelope-sidebar/verdocs-envelope-sidebar.js

@@ -72,6 +72,7 @@ export class VerdocsEnvelopeSidebar {
       !['complete', 'declined', 'canceled'].includes(EnvelopeStore.envelope.status));
   }
   handleRecipientAction(recipient, id) {
+    var _a;
     console.log('recipient action', id, recipient);
     switch (id) {
       case 'reminder':
@@ -80,6 +81,7 @@ export class VerdocsEnvelopeSidebar {
       case 'details':
         break;
     }
+    (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: id });
   }
   prepareHistoryEntries() {
     const entries = [];
@@ -203,7 +205,7 @@ export class VerdocsEnvelopeSidebar {
     const session = this.endpoint.getSession();
     const isEnvelopeOwner = session.profile_id === EnvelopeStore.envelope.profile_id; // TODO: What about org admins?
     const historyEntries = this.prepareHistoryEntries();
-    return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "buttons" }, h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (h("div", { class: "content" }, h("div", { class: "title" }, "Details"), h("div", { class: "label" }, "Envelope ID"), h("div", { class: "value" }, EnvelopeStore.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(EnvelopeStore.envelope.created_at), 'PP pp')), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(EnvelopeStore.envelope.updated_at), 'PP pp')), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, EnvelopeStore.envelope.status), h("div", { class: "label" }, "Verdoc Owner UUID"), h("div", { class: "value" }, EnvelopeStore.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = EnvelopeStore.envelope.profile) === null || _a === void 0 ? void 0 :
+    return (h(Host, { class: this.panelOpen ? 'open' : '', "data-r": EnvelopeStore.updateCount }, h("div", { class: "buttons" }, h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (h("div", { class: "content" }, h("div", { class: "title" }, "Details"), h("div", { class: "label" }, "Envelope ID"), h("div", { class: "value" }, EnvelopeStore.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(EnvelopeStore.envelope.created_at), 'PP pp')), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(EnvelopeStore.envelope.updated_at), 'PP pp')), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, EnvelopeStore.envelope.status), h("div", { class: "label" }, "Verdoc Owner UUID"), h("div", { class: "value" }, EnvelopeStore.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = EnvelopeStore.envelope.profile) === null || _a === void 0 ? void 0 :
       _a.first_name, " ", (_b = EnvelopeStore.envelope.profile) === null || _b === void 0 ? void 0 :
       _b.last_name), h("div", { class: "label" }, "Verdoc Owner Email"), h("div", { class: "value" }, (_c = EnvelopeStore.envelope.profile) === null || _c === void 0 ? void 0 : _c.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), EnvelopeStore.envelope.recipients.map((recipient, index) => (h("div", { class: "recipient-detail" }, h("div", { class: "recipient-header" }, h("div", { class: "recipient-number" }, index + 1), h("div", { class: "recipient-type" }, recipient.type), h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && (h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
         { id: 'reminder', label: 'Send Reminder', disabled: !this.canResendRecipient(recipient) },
@@ -294,6 +296,30 @@ export class VerdocsEnvelopeSidebar {
             }
           }
         }
+      }, {
+        "method": "envelopeUpdated",
+        "name": "envelopeUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the envelope is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}",
+          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "IEnvelope": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Envelopes/Types"
+            }
+          }
+        }
       }];
   }
 }

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

@@ -7,7 +7,7 @@ import { isValidEmail, isValidPhone } from '@verdocs/js-sdk/Templates/Validators
 import { Host, Fragment, h } from '@stencil/core';
 import { updateEnvelopeFieldInitials, updateEnvelopeFieldSignature } from '@verdocs/js-sdk/Envelopes/Envelopes';
 import { envelopeRecipientAgree, envelopeRecipientDecline, envelopeRecipientSubmit } from '@verdocs/js-sdk/Envelopes/Recipients';
-import { getFieldId, getRoleIndex, renderDocumentField, savePDF, updateDocumentFieldValue } from '../../../utils/utils';
+import { getFieldId, getRoleIndex, renderDocumentField, saveAttachment, updateDocumentFieldValue } from '../../../utils/utils';
 import { getEnvelopeById } from '../../../utils/Envelopes';
 import EnvelopeStore from '../../../utils/envelopeStore';
 import { SDKError } from '../../../utils/errors';
@@ -131,29 +131,35 @@ export class VerdocsSign {
     });
   }
   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: EnvelopeStore.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: EnvelopeStore.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: EnvelopeStore.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: EnvelopeStore.envelope, event: 'printed' });
         break;
       case 'download':
-        savePDF(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.envelope.envelope_document_id).catch(e => {
+        saveAttachment(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.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: EnvelopeStore.envelope, event: 'downloaded' });
         break;
     }
   }
@@ -409,7 +415,7 @@ export class VerdocsSign {
     if (EnvelopeStore.loading || !EnvelopeStore.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" }, EnvelopeStore.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": EnvelopeStore.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" }, EnvelopeStore.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" }, (EnvelopeStore.envelope.documents || []).map(envelopeDocument => {
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
@@ -570,7 +576,7 @@ export class VerdocsSign {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event fired when the envelope is updated in any way."
+          "text": "Event fired when the envelope is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems."
         },
         "complexType": {
           "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}",

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

@@ -1,13 +1,9 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { h, Host, Fragment } from '@stencil/core';
+import { saveAttachment, saveCertificate, saveEnvelopesAsZip } from '../../../utils/utils';
 import { getEnvelopeById } from '../../../utils/Envelopes';
 import EnvelopeStore from '../../../utils/envelopeStore';
 import { SDKError } from '../../../utils/errors';
-import { savePDF } from '../../../utils/utils';
-const menuOptions = [
-  { id: 'print', label: 'Print' },
-  { id: 'download', label: 'Download' },
-];
 /**
  * Render the documents attached to an envelope in read-only (view) mode. All documents are displayed in order.
  */
@@ -54,15 +50,42 @@ export class VerdocsView {
     // });
   }
   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: EnvelopeStore.envelope, event: 'printed' });
+        break;
+      case 'download-attachments':
+        saveAttachment(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.envelope.envelope_document_id)
+          .then(() => {
+          var _a;
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'downloaded' });
+        })
+          .catch(e => {
+          console.log('Error downloading PDF', e);
+        });
         break;
-      case 'download':
-        savePDF(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.envelope.envelope_document_id).catch(e => {
+      case 'download-certificate':
+        saveCertificate(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.envelope.certificate_document_id)
+          .then(() => {
+          var _a;
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'downloaded' });
+        })
+          .catch(e => {
           console.log('Error downloading PDF', e);
         });
         break;
+      case 'download-all':
+        saveEnvelopesAsZip(this.endpoint, [EnvelopeStore.envelope])
+          .then(() => {
+          var _a;
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'downloaded' });
+        })
+          .catch(e => {
+          console.log('Error downloading Zip', e);
+        });
+        break;
     }
   }
   render() {
@@ -74,7 +97,22 @@ export class VerdocsView {
     if (EnvelopeStore.error) {
       return (h(Host, null, h("div", null, EnvelopeStore.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" }, EnvelopeStore.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 = EnvelopeStore.envelope) === null || _a === void 0 ? void 0 : _a.documents) || [])
+    const menuOptions = [{ id: 'print', label: 'Print' }];
+    const hasAttachments = EnvelopeStore.envelope.documents.length > 0;
+    const hasCertificate = !!EnvelopeStore.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": EnvelopeStore.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" }, EnvelopeStore.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 = EnvelopeStore.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) || [])];
@@ -160,6 +198,30 @@ export class VerdocsView {
             }
           }
         }
+      }, {
+        "method": "envelopeUpdated",
+        "name": "envelopeUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the envelope is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}",
+          "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "IEnvelope": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Envelopes/Types"
+            }
+          }
+        }
       }];
   }
   static get elementRef() { return "component"; }