@verdocs/web-sdk 4.2.158 → 5.0.1

package/dist/components/{p-1e66385b.js → p-5d82a9f3.js}

@@ -1,17 +1,18 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-7786799a.js';
-import { VerdocsEndpoint, getOrganizationContacts, isValidEmail, createEnvelope, getRGBA, formatFullName } from '@verdocs/js-sdk';
-import { g as getTemplateRoleStore, b as getRoleNames, a as getRoleIndex } from './p-9b5a4f9e.js';
-import { g as getTemplateStore } from './p-09d28afd.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-324ed895.js';
+import { VerdocsEndpoint, getTemplate, getOrganizationContacts, isValidEmail, createEnvelope, getRGBA, formatFullName } from '@verdocs/js-sdk';
+import { g as getRoleNames, a as getRoleIndex } from './p-ea5954bd.js';
 import { V as VerdocsToast } from './p-04c07b7b.js';
 import { S as SDKError } from './p-fd97809c.js';
-import { d as defineCustomElement$8 } from './p-ac7578f6.js';
-import { d as defineCustomElement$7 } from './p-921297ba.js';
-import { d as defineCustomElement$6 } from './p-a655b737.js';
-import { d as defineCustomElement$5 } from './p-69881420.js';
-import { d as defineCustomElement$4 } from './p-8b27ce22.js';
-import { d as defineCustomElement$3 } from './p-263dc67d.js';
-import { d as defineCustomElement$2 } from './p-6b369b14.js';
-import { d as defineCustomElement$1 } from './p-0e64ccc3.js';
+import { S as Store } from './p-da4d4eed.js';
+import { d as defineCustomElement$9 } from './p-0e332769.js';
+import { d as defineCustomElement$8 } from './p-84ae0283.js';
+import { d as defineCustomElement$7 } from './p-15d530b8.js';
+import { d as defineCustomElement$6 } from './p-0ca7012b.js';
+import { d as defineCustomElement$5 } from './p-1ae5d7e0.js';
+import { d as defineCustomElement$4 } from './p-5d4bbcd0.js';
+import { d as defineCustomElement$3 } from './p-315d6592.js';
+import { d as defineCustomElement$2 } from './p-b16c202a.js';
+import { d as defineCustomElement$1 } from './p-9bb47a5a.js';
 
 const verdocsSendCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-send{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.sendable{display:-ms-flexbox;display:flex}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 rgba(151, 151, 151, 0.2666666667)}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:rgba(0, 0, 0, 0.537254902)}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;border:2px solid #dddddd;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)}";
 const VerdocsSendStyle0 = verdocsSendCss;
@@ -29,6 +30,7 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
         this.exit = createEvent(this, "exit", 7);
         this.sdkError = createEvent(this, "sdkError", 7);
         this.searchContacts = createEvent(this, "searchContacts", 7);
+        this.templateListenerId = null;
         this.endpoint = VerdocsEndpoint.getDefault();
         this.templateId = null;
         this.environment = '';
@@ -37,15 +39,33 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
         this.sessionContacts = [];
         this.sending = false;
         this.rolesCompleted = {};
-        this.templateStore = null;
-        this.roleStore = null;
+        this.loading = true;
+        this.template = null;
+    }
+    disconnectedCallback() {
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        console.log('[SEND] Loading template', this.templateId);
+        this.unlistenToTemplate();
+        Store.subscribe('templates', this.templateId, () => getTemplate(this.endpoint, this.templateId), false, (template) => {
+            this.template = template;
+            this.loading = false;
+            this.rolesCompleted = {};
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            Store.store.delListener(this.templateListenerId);
+            this.templateListenerId = null;
+        }
     }
     async reset() {
         this.rolesCompleted = {};
     }
     onTemplateIdChanged(newTemplateId) {
         console.log('[SEND] Template ID changed', newTemplateId);
-        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+        this.listenToTemplate();
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -82,37 +102,18 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
                 console.log(`[SEND] Missing required template ID ${this.templateId}`);
                 return;
             }
-            return this.loadTemplate(this.templateId);
+            this.listenToTemplate();
         }
         catch (e) {
             console.log('[SEND] Error with send session', e);
             (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
         }
     }
-    async loadTemplate(templateId) {
-        var _a, _b, _c, _d, _e;
-        if (!templateId) {
-            return;
-        }
-        try {
-            this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
-            this.roleStore = getTemplateRoleStore(templateId);
-            this.recomputeRolesCompleted();
-            if (!((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable)) {
-                console.warn(`[SEND] Template is not sendable`, templateId);
-            }
-        }
-        catch (e) {
-            console.log('[SEND] Error with preview session', e);
-            (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
-        }
-    }
     recomputeRolesCompleted() {
         var _a;
-        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
-        const rolesAtLevel = {};
         this.rolesCompleted = {};
-        roles.forEach(role => {
+        const rolesAtLevel = {};
+        (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || []).forEach(role => {
             const level = role.sequence - 1;
             rolesAtLevel[level] || (rolesAtLevel[level] = []);
             const id = `r-${level}-${rolesAtLevel[level].length}`;
@@ -126,15 +127,13 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
     }
     getLevels() {
         var _a;
-        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
-        const levels = [...new Set(roles.map(role => role.sequence - 1))];
+        const levels = [...new Set((((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.sequence - 1))];
         levels.sort((a, b) => a - b);
         return levels;
     }
     getRolesAtLevel(level) {
         var _a;
-        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
-        const rolesAtLevel = roles
+        const rolesAtLevel = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || [])
             .filter(role => role.sequence - 1 === level)
             .map((role, index) => ({
             ...role,
@@ -167,7 +166,7 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
         this.showPickerForId = role.id;
     }
     handleSend(e) {
-        var _a, _b, _c;
+        var _a, _b;
         if (this.sending) {
             console.log('[SEND] Skipping duplicate send', e);
             return;
@@ -179,7 +178,7 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
         (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: true });
         const details = {
             template_id: this.templateId,
-            name: ((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name) || '',
+            name: ((_b = this.template) === null || _b === void 0 ? void 0 : _b.name) || 'New Envelope',
             environment: this.environment,
             initial_reminder: 0,
             followup_reminders: 0,
@@ -190,12 +189,12 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
         console.log('[SEND] Creating envelope', details);
         createEnvelope(this.endpoint, details)
             .then(r => {
-            var _a, _b, _c, _d;
+            var _a, _b;
             console.log('[SEND] Send envelope', r);
             this.reset().catch((e) => console.log('Unknown Error', e));
             this.sending = false;
             (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
-            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, name: ((_d = (_c = this.templateStore) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.name) || 'New Envelope', envelope_id: r.id, envelope: r });
+            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, name: details.name, envelope_id: r.id, envelope: r });
         })
             .catch(e => {
             var _a, _b, _c;
@@ -211,22 +210,25 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
         (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
     }
     render() {
-        var _a, _b;
+        var _a;
+        if (this.loading) {
+            return (h(Host, null, h("verdocs-loader", null)));
+        }
         if (!this.endpoint.session) {
             return (h(Host, { style: { display: 'flex' } }, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
         const levels = this.getLevels();
-        const roleNames = getRoleNames(this.roleStore);
         const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email));
         // TODO: Reactivate once SMS is re-enabled
         // const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
-        const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-        // console.log('[SEND] Roles completed', this.rolesCompleted);
-        return (h(Host, { class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.getRolesAtLevel(level).map(role => {
+        const allRolesAssigned = rolesAssigned.length >= getRoleNames(this.template).length;
+        return (h(Host, { class: { sendable: (_a = this.template) === null || _a === void 0 ? void 0 : _a.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.getRolesAtLevel(level).map(role => {
             var _a, _b, _c, _d;
             const unknown = !role.email;
             const elId = `verdocs-send-recipient-${role.role_name}`;
-            return unknown ? (h("div", { class: "recipient", "data-ri": getRoleIndex(this.roleStore, role.role_name), "data-rn": role.role_name, style: { backgroundColor: getRGBA(getRoleIndex(this.roleStore, role.role_name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? formatFullName(this.rolesCompleted[role.id]) : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(this.roleStore, role.role_name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_c = this.rolesCompleted[role.id]) === null || _c === void 0 ? void 0 : _c.first_name) ? formatFullName(this.rolesCompleted[role.id]) : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_d = this.rolesCompleted[role.id]) !== null && _d !== void 0 ? _d : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
+            const roleIndex = getRoleIndex(this.template, role.role_name);
+            const rgba = getRGBA(roleIndex);
+            return unknown ? (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: { backgroundColor: rgba }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? formatFullName(this.rolesCompleted[role.id]) : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", style: { borderColor: rgba }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_c = this.rolesCompleted[role.id]) === null || _c === void 0 ? void 0 : _c.first_name) ? formatFullName(this.rolesCompleted[role.id]) : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_d = this.rolesCompleted[role.id]) !== null && _d !== void 0 ? _d : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
         })))), h("div", { class: `level level-done` }, this.getLevelIcon(levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
     }
     static get watchers() { return {
@@ -242,8 +244,8 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
         "sessionContacts": [32],
         "sending": [32],
         "rolesCompleted": [32],
-        "templateStore": [32],
-        "roleStore": [32],
+        "loading": [32],
+        "template": [32],
         "reset": [64]
     }, undefined, {
         "templateId": ["onTemplateIdChanged"]
@@ -252,7 +254,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-send", "verdocs-button", "verdocs-component-error", "verdocs-contact-picker", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-spinner", "verdocs-toggle-button"];
+    const components = ["verdocs-send", "verdocs-button", "verdocs-component-error", "verdocs-contact-picker", "verdocs-help-icon", "verdocs-loader", "verdocs-portal", "verdocs-select-input", "verdocs-spinner", "verdocs-toggle-button"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-send":
             if (!customElements.get(tagName)) {
@@ -261,20 +263,25 @@ function defineCustomElement() {
             break;
         case "verdocs-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "verdocs-component-error":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "verdocs-contact-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "verdocs-help-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "verdocs-loader":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/components/{p-877eaf65.js → p-5eb45a4f.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-7786799a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-324ed895.js';
 import { integerSequence } from '@verdocs/js-sdk';
 
 const verdocsPaginationCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-pagination{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-pagination .page-button{height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;cursor:pointer;font-size:16px;font-weight:600;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#33364b;border:1px solid #654dcb}verdocs-pagination .page-button svg{width:18px;height:18px}verdocs-pagination .page-button.selected{cursor:default;color:#ffffff;background:#654dcb}verdocs-pagination .ellipsis{width:38px;height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;line-height:32px;-ms-flex-pack:center;justify-content:center;color:#33364b}";

package/dist/components/{p-62f8b36c.js → p-6400f542.js}

@@ -1,13 +1,14 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-7786799a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-324ed895.js';
 import { VerdocsEndpoint, getEnvelope, getDocumentDownloadLink, cancelEnvelope, userCanCancelEnvelope, integerSequence } from '@verdocs/js-sdk';
-import { s as saveEnvelopesAsZip } from './p-b0af9b72.js';
+import { s as saveEnvelopesAsZip } from './p-4bc5ac82.js';
 import { S as SDKError } from './p-fd97809c.js';
-import { d as defineCustomElement$6 } from './p-ac7578f6.js';
-import { d as defineCustomElement$5 } from './p-df4ac086.js';
-import { d as defineCustomElement$4 } from './p-7927a846.js';
-import { d as defineCustomElement$3 } from './p-90540412.js';
-import { d as defineCustomElement$2 } from './p-83245875.js';
-import { d as defineCustomElement$1 } from './p-8b27ce22.js';
+import { S as Store } from './p-da4d4eed.js';
+import { d as defineCustomElement$6 } from './p-0e332769.js';
+import { d as defineCustomElement$5 } from './p-a3e12c74.js';
+import { d as defineCustomElement$4 } from './p-8d3c0b4c.js';
+import { d as defineCustomElement$3 } from './p-1ae5d7e0.js';
+import { d as defineCustomElement$2 } from './p-cf6ea837.js';
+import { d as defineCustomElement$1 } from './p-5d4bbcd0.js';
 
 const verdocsViewCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-view{display:-ms-flexbox;display:flex;overflow:hidden;min-height:600px;position:relative;-ms-flex-align:center;align-items:center;-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 .document{-ms-flex:1;flex:1;width:100%;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;max-width:1200px;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}verdocs-view .document .inner{width:100%;max-width:1028px}verdocs-view .loading-indicator{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.7)}#verdocs-view-header{width:100%;color:#fff;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 56px;flex:0 0 56px;padding:0 20px;font-size:12px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-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)}@media all and (max-width: 500px){#verdocs-view-header{padding:0 10px}}#verdocs-view-header .inner{width:100%;display:-ms-flexbox;display:flex;margin:0 auto;padding:0 20px;max-width:1200px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}@media all and (max-width: 500px){#verdocs-view-header .inner{padding:0 10px}}#verdocs-view-header .logo{width:80px;display:none;margin:-6px 0 0 0}#verdocs-view-header .title{font-size:18px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
 const VerdocsViewStyle0 = verdocsViewCss;
@@ -21,14 +22,15 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class VerdocsView extends H
         this.another = createEvent(this, "another", 7);
         this.view = createEvent(this, "view", 7);
         this.next = createEvent(this, "next", 7);
+        this.envelopeListenerId = null;
         this.endpoint = null;
         this.envelopeId = '';
-        this.envelope = null;
         this.headerTargetId = null;
         this.canceling = false;
-        this.roleNames = [];
         this.showCancelDone = false;
         this.showLoadError = false;
+        this.loading = true;
+        this.envelope = null;
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -40,12 +42,12 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class VerdocsView extends H
             console.error(`[VIEW] Missing required envelopeId`);
             return;
         }
+        this.listenToEnvelope();
         if (!this.envelope) {
             try {
                 console.log('[VIEW] Loading envelope...');
                 this.envelope = await getEnvelope(this.endpoint, this.envelopeId);
                 console.log('[VIEW] Loaded envelope', this.envelope);
-                this.roleNames = this.envelope.recipients.map(r => r.role_name);
             }
             catch (e) {
                 this.showLoadError = true;
@@ -62,6 +64,23 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class VerdocsView extends H
             headerTarget.append(headerEl);
         }
     }
+    disconnectedCallback() {
+        this.unlistenToEnvelope();
+    }
+    async listenToEnvelope() {
+        console.log('[SIDEBAR] Loading envelope', this.envelopeId);
+        this.unlistenToEnvelope();
+        Store.subscribe('envelopes', this.envelopeId, () => getEnvelope(this.endpoint, this.envelopeId), false, (envelope) => {
+            this.envelope = envelope;
+            this.loading = false;
+        });
+    }
+    unlistenToEnvelope() {
+        if (this.envelopeListenerId) {
+            Store.store.delListener(this.envelopeListenerId);
+            this.envelopeListenerId = null;
+        }
+    }
     handlePageRendered(_e) {
         // const pageInfo = e.detail as IDocumentPageInfo;
         // console.log('[VIEW] Page rendered', pageInfo);
@@ -138,6 +157,9 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class VerdocsView extends H
     }
     render() {
         var _a;
+        if (this.loading) {
+            return (h(Host, null, h("verdocs-loader", null)));
+        }
         if (this.showLoadError) {
             return (h(Host, null, h("verdocs-ok-dialog", { heading: "Unable to View Envelope", message: `Sorry, that envelope is not valid.`, buttonLabel: "OK", onNext: () => {
                     this.showLoadError = false;
@@ -187,12 +209,12 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class VerdocsView extends H
 }, [0, "verdocs-view", {
         "endpoint": [16],
         "envelopeId": [1, "envelope-id"],
-        "envelope": [1040],
         "headerTargetId": [1, "header-target-id"],
         "canceling": [32],
-        "roleNames": [32],
         "showCancelDone": [32],
-        "showLoadError": [32]
+        "showLoadError": [32],
+        "loading": [32],
+        "envelope": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/{p-e4ac6259.js → p-6fcd99d1.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-7786799a.js';
-import { d as defineCustomElement$1 } from './p-ac7578f6.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-324ed895.js';
+import { d as defineCustomElement$1 } from './p-0e332769.js';
 
 const verdocsKbaDialogCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-kba-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-kba-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-kba-dialog .background-overlay{position:fixed;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:rgba(0, 0, 0, 0.4980392157)}verdocs-kba-dialog .dialog{width:440px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#fff;padding:16px;gap:14px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-kba-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-kba-dialog .step{margin-left:6px;color:#666}verdocs-kba-dialog .help-box{background-color:#707ae5;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:14px;-ms-flex-align:center;align-items:center;color:white}verdocs-kba-dialog .help-details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-left:15px;font-size:14px}verdocs-kba-dialog .help-icon{width:40px;height:40px}verdocs-kba-dialog .help-title{font-weight:600;margin-bottom:4px}verdocs-kba-dialog .help-text{font-weight:400}verdocs-kba-dialog .input{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:10px;-ms-flex-align:center;align-items:center;margin:16px 0 32px}verdocs-kba-dialog .input label{-ms-flex:0;flex:0;line-height:10px;font-weight:500;white-space:nowrap}verdocs-kba-dialog .input input{-ms-flex:1;flex:1;padding:2px 8px;border-radius:3px;border:1px solid #cccccc}verdocs-kba-dialog .field{gap:10px;margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;max-width:100%}verdocs-kba-dialog .field .required{color:red;position:relative;top:-0.5em;font-size:80%}verdocs-kba-dialog .field label{-ms-flex:0 0 100px;flex:0 0 100px;font-weight:500;line-height:10px;text-align:right;white-space:nowrap}verdocs-kba-dialog .field input{width:40%;-ms-flex-positive:1;flex-grow:1;padding:2px 8px;border-radius:3px;border:1px solid #cccccc}verdocs-kba-dialog .choices{display:grid;gap:15px;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));margin:0 0 15px 0}verdocs-kba-dialog .choice{border:1px solid #707ae5;border-radius:5px;display:-ms-flexbox;display:flex;height:60px;font-size:14px;padding:0 5px;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center;color:#5c6575;cursor:pointer}verdocs-kba-dialog .choice.selected{background-color:#707ae5;color:#ffffff}verdocs-kba-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-kba-dialog .buttons verdocs-button{margin-left:16px}";
 const VerdocsKbaDialogStyle0 = verdocsKbaDialogCss;

package/dist/components/{p-921297ba.js → p-84ae0283.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-7786799a.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-324ed895.js';
 
 const verdocsComponentErrorCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-component-error{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-component-error .inner{-ms-flex:1;flex:1;height:300px;display:-ms-flexbox;display:flex;font-size:18px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 20px;background:#ffffff;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}";
 const VerdocsComponentErrorStyle0 = verdocsComponentErrorCss;

package/dist/components/{p-7927a846.js → p-8d3c0b4c.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-7786799a.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-324ed895.js';
 import { VerdocsEndpoint, getEnvelopeDocumentPageDisplayUri } from '@verdocs/js-sdk';
-import { t as throttle } from './p-b0af9b72.js';
+import { t as throttle } from './p-4bc5ac82.js';
 
 const verdocsEnvelopeDocumentPageCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-envelope-document-page{width:100%;position:relative}verdocs-envelope-document-page .verdocs-envelope-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-envelope-document-page .verdocs-envelope-document-page-layer.img{width:100%}";
 const VerdocsEnvelopeDocumentPageStyle0 = verdocsEnvelopeDocumentPageCss;