@verdocs/web-sdk 1.10.10 → 1.11.0

package/dist/cjs/verdocs-envelope-sidebar.cjs.entry.js

@@ -4,11 +4,11 @@ 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 Envelopes = require('./Envelopes-9886af0f.js');
 const errors = require('./errors-0396da3d.js');
 const index$1 = require('./index-6528b430.js');
 require('./Token-576f0e8a.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./index-eb130f52.js');
 require('./Templates-ed812768.js');
 
@@ -42,6 +42,7 @@ const VerdocsEnvelopeSidebar = 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 = '';
     this.activeTab = 1;
@@ -80,7 +81,9 @@ const VerdocsEnvelopeSidebar = class {
       !['complete', 'declined', 'canceled'].includes(Envelopes.state.envelope.status));
   }
   handleRecipientAction(recipient, id) {
+    var _a;
     console.log('recipient action', id, recipient);
+    (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: Envelopes.state.envelope, event: id });
   }
   prepareHistoryEntries() {
     const entries = [];
@@ -204,7 +207,7 @@ const VerdocsEnvelopeSidebar = class {
     const session = this.endpoint.getSession();
     const isEnvelopeOwner = session.profile_id === Envelopes.state.envelope.profile_id; // TODO: What about org admins?
     const historyEntries = this.prepareHistoryEntries();
-    return (index.h(index.Host, { class: this.panelOpen ? 'open' : '' }, index.h("div", { class: "buttons" }, index.h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), index.h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), index.h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (index.h("div", { class: "content" }, index.h("div", { class: "title" }, "Details"), index.h("div", { class: "label" }, "Envelope ID"), index.h("div", { class: "value" }, Envelopes.state.envelope.id), index.h("div", { class: "label" }, "Date Created"), index.h("div", { class: "value" }, index$1.format(new Date(Envelopes.state.envelope.created_at), 'PP pp')), index.h("div", { class: "label" }, "Last Modified"), index.h("div", { class: "value" }, index$1.format(new Date(Envelopes.state.envelope.updated_at), 'PP pp')), index.h("div", { class: "label" }, "Status"), index.h("div", { class: "value" }, Envelopes.state.envelope.status), index.h("div", { class: "label" }, "Verdoc Owner UUID"), index.h("div", { class: "value" }, Envelopes.state.envelope.profile_id), index.h("div", { class: "label" }, "Verdoc Owner Name"), index.h("div", { class: "value" }, (_a = Envelopes.state.envelope.profile) === null || _a === void 0 ? void 0 :
+    return (index.h(index.Host, { class: this.panelOpen ? 'open' : '', "data-r": Envelopes.state.updateCount }, index.h("div", { class: "buttons" }, index.h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), index.h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), index.h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (index.h("div", { class: "content" }, index.h("div", { class: "title" }, "Details"), index.h("div", { class: "label" }, "Envelope ID"), index.h("div", { class: "value" }, Envelopes.state.envelope.id), index.h("div", { class: "label" }, "Date Created"), index.h("div", { class: "value" }, index$1.format(new Date(Envelopes.state.envelope.created_at), 'PP pp')), index.h("div", { class: "label" }, "Last Modified"), index.h("div", { class: "value" }, index$1.format(new Date(Envelopes.state.envelope.updated_at), 'PP pp')), index.h("div", { class: "label" }, "Status"), index.h("div", { class: "value" }, Envelopes.state.envelope.status), index.h("div", { class: "label" }, "Verdoc Owner UUID"), index.h("div", { class: "value" }, Envelopes.state.envelope.profile_id), index.h("div", { class: "label" }, "Verdoc Owner Name"), index.h("div", { class: "value" }, (_a = Envelopes.state.envelope.profile) === null || _a === void 0 ? void 0 :
       _a.first_name, " ", (_b = Envelopes.state.envelope.profile) === null || _b === void 0 ? void 0 :
       _b.last_name), index.h("div", { class: "label" }, "Verdoc Owner Email"), index.h("div", { class: "value" }, (_c = Envelopes.state.envelope.profile) === null || _c === void 0 ? void 0 : _c.email))), this.activeTab === 2 && (index.h("div", { class: "content" }, index.h("div", { class: "title" }, "Recipients"), Envelopes.state.envelope.recipients.map((recipient, index$1) => (index.h("div", { class: "recipient-detail" }, index.h("div", { class: "recipient-header" }, index.h("div", { class: "recipient-number" }, index$1 + 1), index.h("div", { class: "recipient-type" }, recipient.type), index.h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && (index.h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
         { id: 'reminder', label: 'Send Reminder', disabled: !this.canResendRecipient(recipient) },

package/dist/cjs/verdocs-field-checkbox.cjs.entry.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 

package/dist/cjs/verdocs-field-date.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const Colors = require('./Colors-e809dcc9.js');
 const templateStore = require('./templateStore-81ad25a7.js');
 const index$1 = require('./index-6528b430.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
 require('./index-eb130f52.js');

package/dist/cjs/verdocs-field-dropdown.cjs.entry.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 

package/dist/cjs/verdocs-field-initial.cjs.entry.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 

package/dist/cjs/verdocs-field-payment.cjs.entry.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 

package/dist/cjs/verdocs-field-radio-button.cjs.entry.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 

package/dist/cjs/verdocs-field-signature.cjs.entry.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 

package/dist/cjs/verdocs-field-textarea.cjs.entry.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 

package/dist/cjs/verdocs-field-textbox.cjs.entry.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 
 const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{width:100%;height:100%;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:none;outline:none}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}";
 

package/dist/cjs/verdocs-field-timestamp.cjs.entry.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
 const index$1 = require('./index-6528b430.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
 require('./index-eb130f52.js');

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

@@ -4,13 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
 const Templates = require('./Templates-2f2ea153.js');
 const errors = require('./errors-0396da3d.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('./Primitives-be5088cb.js');
 require('./Templates-ed812768.js');

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

@@ -8,14 +8,15 @@ const Validators = require('./Validators-16e6d7d1.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 verdocsSendCss = "verdocs-send{display:-ms-flexbox;display:flex;padding:10px;position:relative;background:#ffffff;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-send .recipients{position:relative}verdocs-send .left-line{top:32px;left:20px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-send .level{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-left:50px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:8px 0 4px 0;border-bottom:1px solid #97979744}verdocs-send .level .level-icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-send .level .level-icon svg{fill:#00000089}verdocs-send .level .recipient{height:30px;display:-ms-flexbox;display:flex;-ms-flex:0 0 30px;flex:0 0 30px;color:#000000;cursor:pointer;font-size:14px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;background:#dddddd;white-space:nowrap;padding:2px 10px 2px 14px}verdocs-send .level .recipient .icon{width:22px;height:22px;-ms-flex:0 0 22px;flex:0 0 22px;margin:0 0 0 10px}verdocs-send .level .recipient .icon svg{width:22px;height:22px;fill:#333333;outline:none}verdocs-send .level .complete{-ms-flex:1;flex:1;height:30px;display:-ms-flexbox;display:flex;color:#000000;font-size:14px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:3px 10px 3px 2px}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-direction:row;flex-direction:row}verdocs-send verdocs-contact-picker{left:0;top:41px;z-index:10;position:absolute;border:1px solid #dddddd;-webkit-box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1)}";
 

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

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
-const Envelopes = require('./Envelopes-68058bbe.js');
+const Envelopes = require('./Envelopes-7381bd9a.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Primitives = require('./Primitives-be5088cb.js');
-const utils = require('./utils-865fd657.js');
-const Envelopes$1 = require('./Envelopes-4cc18551.js');
+const utils = require('./utils-f4cfa1fb.js');
+const Envelopes$1 = require('./Envelopes-9886af0f.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Templates-ed812768.js');
 
@@ -217,29 +218,35 @@ const VerdocsSign = class {
     });
   }
   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: Envelopes$1.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: Envelopes$1.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: Envelopes$1.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: Envelopes$1.state.envelope, event: 'printed' });
         break;
       case 'download':
-        utils.savePDF(this.endpoint, Envelopes$1.state.envelope, Envelopes$1.state.envelope.envelope_document_id).catch(e => {
+        utils.saveAttachment(this.endpoint, Envelopes$1.state.envelope, Envelopes$1.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: Envelopes$1.state.envelope, event: 'downloaded' });
         break;
     }
   }
@@ -495,7 +502,7 @@ const VerdocsSign = class {
     if (Envelopes$1.state.loading || !Envelopes$1.state.envelope) {
       return (index.h(index.Host, null, index.h("verdocs-loader", null)));
     }
-    return (index.h(index.Host, { class: { agreed: this.agreed } }, !this.isDone && !this.finishLater && index.h("div", { class: "intro" }, "Please review and act on these documents."), !this.isDone && (index.h("div", { class: "header" }, !this.agreed ? (index.h("div", { class: "agree" }, index.h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (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$1.state.envelope.name), index.h("div", { style: { flex: '1' } }))), !this.isDone && !this.finishLater && index.h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), index.h("div", { style: { marginLeft: '10px' } }), index.h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), !this.isDone && !this.agreed ? index.h("div", { class: "cover" }) : index.h("div", { style: { display: 'none' } }), this.isDone ? (
+    return (index.h(index.Host, { class: { agreed: this.agreed }, "data-r": Envelopes$1.state.updateCount }, !this.isDone && !this.finishLater && index.h("div", { class: "intro" }, "Please review and act on these documents."), !this.isDone && (index.h("div", { class: "header" }, !this.agreed ? (index.h("div", { class: "agree" }, index.h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (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$1.state.envelope.name), index.h("div", { style: { flex: '1' } }))), !this.isDone && !this.finishLater && index.h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), index.h("div", { style: { marginLeft: '10px' } }), index.h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), !this.isDone && !this.agreed ? index.h("div", { class: "cover" }) : index.h("div", { style: { display: 'none' } }), this.isDone ? (
     // <div>test</div>
     index.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); } })) : (index.h("div", { class: "document" }, (Envelopes$1.state.envelope.documents || []).map(envelopeDocument => {
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];

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

@@ -6,14 +6,15 @@ const index = require('./index-1329d89c.js');
 const Templates = require('./Templates-ed812768.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
 const errors = require('./errors-0396da3d.js');
-const interact_min = require('./interact.min-3e3c03a5.js');
+const interact_min = require('./interact.min-d223d04b.js');
 const Fields = require('./Fields-705a2168.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
 const Templates$1 = require('./Templates-2f2ea153.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('./Primitives-be5088cb.js');
 
@@ -146,6 +147,7 @@ const VerdocsTemplateFields = 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.pageHeights = {};
     this.cachedPageInfo = {};
     this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
@@ -190,7 +192,9 @@ const VerdocsTemplateFields = class {
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
     el.addEventListener('settingsChanged', () => {
+      var _a;
       el.setAttribute('roleindex', utils.getRoleIndex(templateStore.state.roleNames, field.role_name));
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: templateStore.state.template, event: 'updated-field' });
     });
     el.setAttribute('roleindex', roleIndex);
     el.setAttribute('pageNumber', pageInfo.pageNumber);
@@ -274,6 +278,7 @@ const VerdocsTemplateFields = class {
     return { x, y };
   }
   async handleClickPage(e, page) {
+    var _a;
     if (this.placing) {
       const pageNumber = page.sequence;
       const clickedX = e.offsetX;
@@ -332,6 +337,7 @@ const VerdocsTemplateFields = class {
       console.log('Saved field', saved);
       templateStore.state.fields.push(saved);
       this.placing = null;
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: templateStore.state.template, event: 'added-field' });
       this.handlePageRendered({ detail: this.cachedPageInfo[pageNumber] });
     }
   }
@@ -346,7 +352,7 @@ const VerdocsTemplateFields = class {
     }
     const pages = [...templateStore.state.template.pages];
     pages.sort((a, b) => a.sequence - b.sequence);
-    return (index.h(index.Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-updated": templateStore.state.updateCount, onSubmit: () => {
+    return (index.h(index.Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-r": templateStore.state.updateCount, onSubmit: () => {
         console.log('onSubmit');
       } }, index.h("div", { class: "pages" }, pages.map(page => {
       // console.log('rendering page', page);

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

@@ -3,20 +3,21 @@
 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}";
 
@@ -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 = '';

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 Attachment(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/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.