@verdocs/web-sdk 4.2.158 → 5.0.1

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

@@ -1,17 +1,17 @@
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-7786799a.js';
-import { VerdocsEndpoint, resendInvitation, cancelEnvelope, formatFullName, updateEnvelope, userIsEnvelopeOwner, capitalize } from '@verdocs/js-sdk';
-import { g as getEnvelopeStore, u as updateStoreEnvelope } from './p-821f2345.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-324ed895.js';
+import { VerdocsEndpoint, getEnvelope, resendInvitation, cancelEnvelope, formatFullName, updateEnvelope, userIsEnvelopeOwner, capitalize } from '@verdocs/js-sdk';
 import { F as FORMAT_TIMESTAMP } from './p-c7ee88c7.js';
 import { V as VerdocsToast } from './p-04c07b7b.js';
 import { S as SDKError } from './p-fd97809c.js';
-import { d as defineCustomElement$9 } from './p-ac7578f6.js';
-import { d as defineCustomElement$8 } from './p-df4ac086.js';
-import { d as defineCustomElement$7 } from './p-4535a9fd.js';
-import { d as defineCustomElement$6 } from './p-69881420.js';
-import { d as defineCustomElement$5 } from './p-83245875.js';
-import { d as defineCustomElement$4 } from './p-8b27ce22.js';
-import { d as defineCustomElement$3 } from './p-db4a15fd.js';
-import { d as defineCustomElement$2 } from './p-e4a852b5.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-a3e12c74.js';
+import { d as defineCustomElement$7 } from './p-c7b00ce6.js';
+import { d as defineCustomElement$6 } from './p-0ca7012b.js';
+import { d as defineCustomElement$5 } from './p-cf6ea837.js';
+import { d as defineCustomElement$4 } from './p-5d4bbcd0.js';
+import { d as defineCustomElement$3 } from './p-fcad60f5.js';
+import { d as defineCustomElement$2 } from './p-c8fedb4e.js';
 import { f as format } from './p-12bab948.js';
 
 const verdocsEnvelopeSidebarCss = "@-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-sidebar{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;-ms-flex:0 0 56px;flex:0 0 56px;width:56px;min-height:400px;height:100%;background:#41435e;-webkit-transition:0.5s cubic-bezier(0.35, 0, 0.25, 1);transition:0.5s cubic-bezier(0.35, 0, 0.25, 1)}verdocs-envelope-sidebar.open{-ms-flex:0 0 400px;flex:0 0 400px;max-width:100%;width:400px}@media screen and (max-width: 500px){verdocs-envelope-sidebar.open{-ms-flex:0 0 300px;flex:0 0 300px;width:300px}}verdocs-envelope-sidebar .side-buttons{-ms-flex-direction:column;flex-direction:column;-ms-flex:0 0 56px;flex:0 0 56px;display:-ms-flexbox;display:flex}verdocs-envelope-sidebar .side-buttons button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:50px;outline:none;border:none;border-left:2px solid transparent;background:none;width:100%}verdocs-envelope-sidebar .side-buttons button.active{border-left:2px solid #50bd80}verdocs-envelope-sidebar .side-buttons button svg{color:white;width:24px;height:24px}verdocs-envelope-sidebar .content{-ms-flex:1;flex:1;display:none;color:white;-ms-flex-direction:column;flex-direction:column;padding:12px 16px 16px}verdocs-envelope-sidebar.open .content{display:-ms-flexbox;display:flex;overflow-y:scroll}verdocs-envelope-sidebar verdocs-ok-dialog .content{color:black}verdocs-envelope-sidebar .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px;font-size:16px;line-height:24px;font-weight:400}verdocs-envelope-sidebar .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:14px;font-size:14px;font-weight:500;line-height:16px;color:#fff}verdocs-envelope-sidebar .manage-recipients-button{-ms-flex-item-align:center;align-self:center;white-space:nowrap;width:100%;margin:0 0 10px 0}verdocs-envelope-sidebar .manage-recipients-button .label{color:#ffffff;font-size:14px}verdocs-envelope-sidebar .manage-recipients-button button{width:100%}verdocs-envelope-sidebar .recipient-detail{-ms-flex:0;flex:0;padding:8px;font-size:14px;position:relative;-ms-flex-direction:column;flex-direction:column;border:solid 1px #979797;margin-bottom:16px}verdocs-envelope-sidebar .recipient-header{-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;gap:6px;-ms-flex-align:center;align-items:center;margin-bottom:4px}verdocs-envelope-sidebar .recipient-number{width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:24px;font-size:14px;font-weight:500;border:solid 1px #979797}verdocs-envelope-sidebar .recipient-name{-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box;text-transform:capitalize}verdocs-envelope-sidebar .recipient-status{-ms-flex:0 0 100px;flex:0 0 100px;border-radius:5px;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100px;min-width:100px;background-color:#616161;text-transform:capitalize;font-size:14px;padding:3px 0}verdocs-envelope-sidebar .recipient-status.invited{background-color:#ff8f00}verdocs-envelope-sidebar .recipient-status.opened{background-color:#616161}verdocs-envelope-sidebar .recipient-status.signed,verdocs-envelope-sidebar .recipient-status.submitted{background-color:#2e7d32}verdocs-envelope-sidebar .recipient-status.pending{background-color:#0277bd}verdocs-envelope-sidebar .recipient-status.canceled,verdocs-envelope-sidebar .recipient-status.declined{background-color:#c62828}@media screen and (max-width: 500px){verdocs-envelope-sidebar .recipient-status{-ms-flex:1 1 60px;flex:1 1 60px;max-width:60px;min-width:60px}}verdocs-envelope-sidebar .recipient-content{-ms-flex-direction:column;flex-direction:column}verdocs-envelope-sidebar .recipient-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-envelope-sidebar .history-entry{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:8px 0 0;margin:8px 0 0;border-top:1px solid #dddddd}verdocs-envelope-sidebar .history-entry .activity-icon{margin-right:14px}verdocs-envelope-sidebar .history-entry .activity-icon svg{width:24px;height:24px;fill:#ffffff}verdocs-envelope-sidebar .history-entry .activity-text{font-size:14px;line-height:16px;margin-bottom:4px}verdocs-envelope-sidebar .history-entry .activity-date{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .content .history-entry:first-of-type{border-top:none}verdocs-envelope-sidebar .reminders{margin:15px 0 30px 0}verdocs-envelope-sidebar .reminders .form-row{margin:8px 0 0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-envelope-sidebar .reminders .form-row .reminders-label{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}verdocs-envelope-sidebar .reminders .form-row .form-label{-ms-flex:1;flex:1}verdocs-envelope-sidebar .reminders .form-row verdocs-text-input{margin:0;width:100px}";
@@ -51,21 +51,22 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsE
         this.envelopeUpdated = createEvent(this, "envelopeUpdated", 7);
         this.toggle = createEvent(this, "toggle", 7);
         this.another = createEvent(this, "another", 7);
-        this.store = null;
+        this.envelopeListenerId = null;
         this.endpoint = VerdocsEndpoint.getDefault();
         this.envelopeId = '';
         this.activeTab = 1;
         this.panelOpen = false;
         this.showRecipientDialog = '';
         this.showCancelDialog = false;
-        this.loading = true;
         this.remindersEnabled = false;
         this.updatingReminders = false;
         this.initialReminder = null;
         this.followupReminders = null;
+        this.loading = true;
+        this.envelope = null;
     }
     async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c;
         try {
             this.endpoint.loadSession();
             if (!this.envelopeId) {
@@ -76,21 +77,38 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsE
                 console.log('[SIDEBAR] Unable to start session, must be authenticated');
                 return;
             }
-            this.store = await getEnvelopeStore(this.endpoint, this.envelopeId, true);
-            this.sortEnvelopeRecipients();
-            this.initialReminder = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.initial_reminder;
-            this.followupReminders = (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.followup_reminders;
-            this.remindersEnabled = !!this.initialReminder;
-            this.loading = false;
+            this.listenToEnvelope();
         }
         catch (e) {
             console.log('[SIDEBAR] Error loading envelope', e);
-            (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
+            (_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));
+        }
+    }
+    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) => {
+            var _a, _b;
+            this.envelope = envelope;
+            this.loading = false;
+            this.sortEnvelopeRecipients();
+            this.initialReminder = (_a = this.envelope) === null || _a === void 0 ? void 0 : _a.initial_reminder;
+            this.followupReminders = (_b = this.envelope) === null || _b === void 0 ? void 0 : _b.followup_reminders;
+            this.remindersEnabled = !!this.initialReminder;
+        });
+    }
+    unlistenToEnvelope() {
+        if (this.envelopeListenerId) {
+            Store.store.delListener(this.envelopeListenerId);
+            this.envelopeListenerId = null;
         }
     }
     sortEnvelopeRecipients() {
-        var _a, _b;
-        (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.recipients.sort((a, b) => {
+        var _a;
+        (((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.recipients) || []).sort((a, b) => {
             return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
         });
     }
@@ -102,12 +120,12 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsE
     }
     // TODO: Refactor to a common library?
     canResendRecipient(recipient) {
-        var _a, _b;
+        var _a;
         return (!['pending', 'declined', 'submitted', 'canceled'].includes(recipient.status) && //
-            !['complete', 'declined', 'canceled'].includes((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.status));
+            !['complete', 'declined', 'canceled'].includes((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.status));
     }
     handleRecipientAction(recipient, id) {
-        var _a, _b;
+        var _a;
         console.log('[SIDEBAR] Recipient action', id, recipient);
         switch (id) {
             case 'reminder':
@@ -130,20 +148,22 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsE
                 VerdocsToast('This feature will be enabled in a future release. Please try again later.', { style: 'info' });
                 break;
         }
-        (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state, event: id });
+        (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: id });
     }
     handleCancelEnvelope() {
         this.loading = true;
         cancelEnvelope(this.endpoint, this.envelopeId)
             .then(async (r) => {
-            var _a, _b;
+            var _a;
             console.log('[SIDEBAR] Envelope canceled', r);
             VerdocsToast('Envelope canceled', { style: 'success' });
-            this.store = await getEnvelopeStore(this.endpoint, this.envelopeId, true);
-            this.sortEnvelopeRecipients();
+            // TODO: Use returned value instead?
+            const newEnvelope = JSON.parse(JSON.stringify(this.envelope));
+            newEnvelope.status = 'canceled';
+            Store.updateEnvelope(this.envelopeId, newEnvelope);
             this.loading = false;
             this.panelOpen = false;
-            (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state, event: 'canceled' });
+            (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: newEnvelope, event: 'canceled' });
         })
             .catch(e => {
             console.log('[SIDEBAR] Error canceling envelope', e);
@@ -152,22 +172,22 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsE
         });
     }
     prepareHistoryEntries() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f;
         const entries = [];
-        const histories = ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.history_entries) || [];
-        entries.push({ icon: 'pencil', message: 'Envelope created.', date: new Date((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.created_at) });
-        if (((_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.status) === 'complete') {
-            entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date((_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.updated_at) });
+        const histories = ((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.history_entries) || [];
+        entries.push({ icon: 'pencil', message: 'Envelope created.', date: new Date((_b = this.envelope) === null || _b === void 0 ? void 0 : _b.created_at) });
+        if (((_c = this.envelope) === null || _c === void 0 ? void 0 : _c.status) === 'complete') {
+            entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date((_d = this.envelope) === null || _d === void 0 ? void 0 : _d.updated_at) });
         }
         // TODO: Shift back to server-side generating these events? We'll still need
         // to tolerate both cases here for a while.
         const ownerCanceled = histories.some(history => history.event === 'owner:canceled');
-        if (((_k = (_j = this.store) === null || _j === void 0 ? void 0 : _j.state) === null || _k === void 0 ? void 0 : _k.status) === 'canceled' && !ownerCanceled) {
-            entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date((_m = (_l = this.store) === null || _l === void 0 ? void 0 : _l.state) === null || _m === void 0 ? void 0 : _m.canceled_at) });
+        if (((_e = this.envelope) === null || _e === void 0 ? void 0 : _e.status) === 'canceled' && !ownerCanceled) {
+            entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date((_f = this.envelope) === null || _f === void 0 ? void 0 : _f.canceled_at) });
         }
         histories.forEach(history => {
             var _a;
-            const recipient = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.recipients.find(recipient => recipient.role_name === history.role_name);
+            const recipient = (((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.recipients) || []).find(recipient => recipient.role_name === history.role_name);
             const fullName = formatFullName(recipient);
             switch (history.event.toLowerCase()) {
                 case 'recipient:signed':
@@ -283,7 +303,7 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsE
     // canModify(recipient: IRecipient) {
     //   const invalidRecipientStatus = ['declined', 'signed', 'submitted', 'canceled'];
     //   const invalidEnvelopeStatus = ['complete', 'declined', 'canceled'];
-    //   return recipient.claimed !== true && invalidRecipientStatus.indexOf(recipient.status) === -1 && invalidEnvelopeStatus.indexOf(this.store?.state?.status) === -1;
+    //   return recipient.claimed !== true && invalidRecipientStatus.indexOf(recipient.status) === -1 && invalidEnvelopeStatus.indexOf(this.envelope?.status) === -1;
     // }
     handleToggleReminders() {
         if (this.remindersEnabled) {
@@ -299,32 +319,33 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsE
         updateEnvelope(this.endpoint, this.envelopeId, { initial_reminder, followup_reminders })
             .then(envelope => {
             console.log('Updated', envelope);
-            updateStoreEnvelope(this.store, envelope);
+            Store.updateEnvelope(this.envelopeId, envelope);
             this.initialReminder = envelope.initial_reminder;
             this.followupReminders = envelope.followup_reminders;
             this.remindersEnabled = !!envelope.initial_reminder;
             this.updatingReminders = false;
         })
             .catch(e => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c;
             console.log('Error updating envelope', e);
-            this.initialReminder = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.initial_reminder;
-            this.followupReminders = (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.followup_reminders;
-            this.remindersEnabled = !!((_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.initial_reminder);
+            this.initialReminder = (_a = this.envelope) === null || _a === void 0 ? void 0 : _a.initial_reminder;
+            this.followupReminders = (_b = this.envelope) === null || _b === void 0 ? void 0 : _b.followup_reminders;
+            this.remindersEnabled = !!((_c = this.envelope) === null || _c === void 0 ? void 0 : _c.initial_reminder);
             this.updatingReminders = false;
             alert(e.response.data.error);
         });
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
-        if (!this.store.state) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        if (this.loading) {
+            // We don't show a loading indicator for the sidebar, to avoid FOUS
             return h(Host, null);
         }
-        const isEnvelopeOwner = userIsEnvelopeOwner(this.endpoint.profile, this.store.state);
+        const isEnvelopeOwner = userIsEnvelopeOwner(this.endpoint.profile, this.envelope);
         const historyEntries = this.prepareHistoryEntries();
-        const functionsDisabled = ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.status) !== 'pending' && ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.status) !== 'in progress';
-        return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "side-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" }, (_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date((_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.created_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date((_k = (_j = this.store) === null || _j === void 0 ? void 0 : _j.state) === null || _k === void 0 ? void 0 : _k.updated_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, capitalize((_m = (_l = this.store) === null || _l === void 0 ? void 0 : _l.state) === null || _m === void 0 ? void 0 : _m.status)), h("div", { class: "label" }, "Owner ID"), h("div", { class: "value" }, (_p = (_o = this.store) === null || _o === void 0 ? void 0 : _o.state) === null || _p === void 0 ? void 0 : _p.profile_id), h("div", { class: "label" }, "Owner Name"), h("div", { class: "value" }, formatFullName((_r = (_q = this.store) === null || _q === void 0 ? void 0 : _q.state) === null || _r === void 0 ? void 0 : _r.profile)), h("div", { class: "label" }, "Owner Email"), h("div", { class: "value" }, (_u = (_t = (_s = this.store) === null || _s === void 0 ? void 0 : _s.state) === null || _t === void 0 ? void 0 : _t.profile) === null || _u === void 0 ? void 0 : _u.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), (_w = (_v = this.store) === null || _v === void 0 ? void 0 : _v.state) === null || _w === void 0 ? void 0 :
-            _w.recipients.map((recipient, index) => {
+        const functionsDisabled = ((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.status) !== 'pending' && ((_b = this.envelope) === null || _b === void 0 ? void 0 : _b.status) !== 'in progress';
+        return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "side-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" }, (_c = this.envelope) === null || _c === void 0 ? void 0 : _c.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date((_d = this.envelope) === null || _d === void 0 ? void 0 : _d.created_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date((_e = this.envelope) === null || _e === void 0 ? void 0 : _e.updated_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, capitalize((_f = this.envelope) === null || _f === void 0 ? void 0 : _f.status)), h("div", { class: "label" }, "Owner ID"), h("div", { class: "value" }, (_g = this.envelope) === null || _g === void 0 ? void 0 : _g.profile_id), h("div", { class: "label" }, "Owner Name"), h("div", { class: "value" }, formatFullName((_h = this.envelope) === null || _h === void 0 ? void 0 : _h.profile)), h("div", { class: "label" }, "Owner Email"), h("div", { class: "value" }, (_k = (_j = this.envelope) === null || _j === void 0 ? void 0 : _j.profile) === null || _k === void 0 ? void 0 : _k.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), (_l = this.envelope) === null || _l === void 0 ? void 0 :
+            _l.recipients.map((recipient, index) => {
                 const canGetInPersonLink = recipient.status !== 'submitted' && recipient.status !== 'canceled' && recipient.status !== 'declined';
                 const canSendReminder = this.canResendRecipient(recipient);
                 const fullName = formatFullName(recipient);
@@ -341,7 +362,7 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsE
             } })), h("div", { class: "form-row" }, h("div", { class: "form-label" }, "Follow-up Reminders:"), h("verdocs-text-input", { placeholder: "In hours...", disabled: functionsDisabled || this.updatingReminders, value: String(Math.floor(this.followupReminders / MS_PER_DAY)), onBlur: (e) => {
                 this.followupReminders = Number(e.target.value) * MS_PER_DAY;
                 this.handleSetReminders(this.initialReminder, this.followupReminders);
-            } })), h("div", { class: "form-row" }, h("div", { class: "form-label" }, "Next Reminder:"), h("div", { style: { color: '#dddddd' } }, format(new Date((_y = (_x = this.store) === null || _x === void 0 ? void 0 : _x.state) === null || _y === void 0 ? void 0 : _y.next_reminder), 'P p'))))))), isEnvelopeOwner && (h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Cancel Envelope", onClick: () => (this.showCancelDialog = !functionsDisabled), disabled: functionsDisabled })))), this.activeTab === 3 && (h("div", { class: "content" }, h("div", { class: "title" }, "History"), historyEntries.map(entry => (h("div", { class: "history-entry" }, h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), h("div", { class: "activity-details" }, h("div", { class: "activity-text" }, entry.message), h("div", { class: "activity-date" }, format(entry.date, FORMAT_TIMESTAMP)))))))), this.showRecipientDialog && (h("verdocs-envelope-recipient-link", { envelopeId: this.envelopeId, roleName: this.showRecipientDialog, onNext: () => (this.showRecipientDialog = '') })), this.showCancelDialog && (h("verdocs-ok-dialog", { heading: "Cancel Envelope?", message: 'Are you sure you want to cancel this Envelope? This action cannot be undone.', onNext: () => {
+            } })), h("div", { class: "form-row" }, h("div", { class: "form-label" }, "Next Reminder:"), h("div", { style: { color: '#dddddd' } }, format(new Date((_m = this.envelope) === null || _m === void 0 ? void 0 : _m.next_reminder), 'P p'))))))), isEnvelopeOwner && (h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Cancel Envelope", onClick: () => (this.showCancelDialog = !functionsDisabled), disabled: functionsDisabled })))), this.activeTab === 3 && (h("div", { class: "content" }, h("div", { class: "title" }, "History"), historyEntries.map(entry => (h("div", { class: "history-entry" }, h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), h("div", { class: "activity-details" }, h("div", { class: "activity-text" }, entry.message), h("div", { class: "activity-date" }, format(entry.date, FORMAT_TIMESTAMP)))))))), this.showRecipientDialog && (h("verdocs-envelope-recipient-link", { envelopeId: this.envelopeId, roleName: this.showRecipientDialog, onNext: () => (this.showRecipientDialog = '') })), this.showCancelDialog && (h("verdocs-ok-dialog", { heading: "Cancel Envelope?", message: 'Are you sure you want to cancel this Envelope? This action cannot be undone.', onNext: () => {
                 this.showCancelDialog = false;
                 this.handleCancelEnvelope();
             } }))));
@@ -354,11 +375,12 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsE
         "panelOpen": [32],
         "showRecipientDialog": [32],
         "showCancelDialog": [32],
-        "loading": [32],
         "remindersEnabled": [32],
         "updatingReminders": [32],
         "initialReminder": [32],
-        "followupReminders": [32]
+        "followupReminders": [32],
+        "loading": [32],
+        "envelope": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/verdocs-envelopes-list.js

@@ -1,18 +1,18 @@
-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, getEnvelopes, integerSequence, getRecipientsWithActions, userCanCancelEnvelope, userCanAct, formatFullName, cancelEnvelope } from '@verdocs/js-sdk';
-import { s as saveEnvelopesAsZip } from './p-b0af9b72.js';
+import { s as saveEnvelopesAsZip } from './p-4bc5ac82.js';
 import { V as VerdocsToast } from './p-04c07b7b.js';
 import { S as SDKError } from './p-fd97809c.js';
-import { d as defineCustomElement$b } from './p-ac7578f6.js';
-import { d as defineCustomElement$a } from './p-4dc4418a.js';
-import { d as defineCustomElement$9 } from './p-df4ac086.js';
-import { d as defineCustomElement$8 } from './p-69881420.js';
-import { d as defineCustomElement$7 } from './p-877eaf65.js';
-import { d as defineCustomElement$6 } from './p-8b27ce22.js';
-import { d as defineCustomElement$5 } from './p-42a676b7.js';
-import { d as defineCustomElement$4 } from './p-6b369b14.js';
-import { d as defineCustomElement$3 } from './p-82fb3284.js';
-import { d as defineCustomElement$2 } from './p-e4a852b5.js';
+import { d as defineCustomElement$b } from './p-0e332769.js';
+import { d as defineCustomElement$a } from './p-3201d529.js';
+import { d as defineCustomElement$9 } from './p-a3e12c74.js';
+import { d as defineCustomElement$8 } from './p-0ca7012b.js';
+import { d as defineCustomElement$7 } from './p-5eb45a4f.js';
+import { d as defineCustomElement$6 } from './p-5d4bbcd0.js';
+import { d as defineCustomElement$5 } from './p-ec894daf.js';
+import { d as defineCustomElement$4 } from './p-b16c202a.js';
+import { d as defineCustomElement$3 } from './p-58c2bd5d.js';
+import { d as defineCustomElement$2 } from './p-c8fedb4e.js';
 
 const verdocsEnvelopesListCss = "@-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-envelopes-list{display:-ms-flexbox;display:flex;padding:10px;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif}@media screen and (max-width: 800px){verdocs-envelopes-list{font-size:14px}}verdocs-envelopes-list .envelope-placeholder{height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin:5px 0;border-radius:5px;background:#f5f5fa}verdocs-envelopes-list .header{width:100%;row-gap:4px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-envelopes-list .header .filter{width:300px}verdocs-envelopes-list .header verdocs-text-input{margin:0}verdocs-envelopes-list .header verdocs-text-input input{height:32px}verdocs-envelopes-list .filter{-ms-flex-align:center;align-items:center}verdocs-envelopes-list .envelope{width:100%;margin:3px 0;background:#ffffff}verdocs-envelopes-list .envelope:hover{cursor:pointer;background:#f5f5fa}verdocs-envelopes-list .envelope .inner{gap:12px;display:-ms-flexbox;display:flex;padding:8px 14px;border-radius:5px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;container-type:inline-size}verdocs-envelopes-list .envelope .inner svg{width:24px;height:24px}verdocs-envelopes-list .vert-spacer{height:50px;display:-ms-flexbox;display:flex;-ms-flex:0 0 1px;flex:0 0 1px;border-right:1px solid #dad8dd}@media screen and (max-width: 800px){verdocs-envelopes-list .vert-spacer{display:none}}@media screen and (max-width: 800px){verdocs-envelopes-list .envelope-icon{display:none}}@media screen and (max-width: 800px){verdocs-envelopes-list verdocs-checkbox{display:none}}verdocs-envelopes-list .last-modified{color:#444;display:-ms-flexbox;display:flex;-ms-flex:0 0 180px;flex:0 0 180px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;white-space:nowrap}@media screen and (max-width: 800px){verdocs-envelopes-list .last-modified{display:none}}verdocs-envelopes-list .envelope-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;color:#000000;line-height:28px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}verdocs-envelopes-list .envelope-recipients{color:#4b5563;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}verdocs-envelopes-list .empty-text{text-align:center;margin:16px 0 0 0;padding:80px 80px;border:2px solid #ccc}verdocs-envelopes-list .containing{gap:12px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}@media screen and (max-width: 800px){verdocs-envelopes-list verdocs-status-indicator{font-size:14px}}";
 const VerdocsEnvelopesListStyle0 = verdocsEnvelopesListCss;

package/dist/components/verdocs-field-attachment.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldAttachment$1, d as defineCustomElement$1 } from './p-12594438.js';
+import { V as VerdocsFieldAttachment$1, d as defineCustomElement$1 } from './p-9c3fd545.js';
 
 const VerdocsFieldAttachment = VerdocsFieldAttachment$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-checkbox.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldCheckbox$1, d as defineCustomElement$1 } from './p-03660739.js';
+import { V as VerdocsFieldCheckbox$1, d as defineCustomElement$1 } from './p-4afcdc84.js';
 
 const VerdocsFieldCheckbox = VerdocsFieldCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-date.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldDate$1, d as defineCustomElement$1 } from './p-0162bdd3.js';
+import { V as VerdocsFieldDate$1, d as defineCustomElement$1 } from './p-fd96322b.js';
 
 const VerdocsFieldDate = VerdocsFieldDate$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-dropdown.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldDropdown$1, d as defineCustomElement$1 } from './p-1b60debe.js';
+import { V as VerdocsFieldDropdown$1, d as defineCustomElement$1 } from './p-0a69031f.js';
 
 const VerdocsFieldDropdown = VerdocsFieldDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-initial.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldInitial$1, d as defineCustomElement$1 } from './p-b679d760.js';
+import { V as VerdocsFieldInitial$1, d as defineCustomElement$1 } from './p-49153610.js';
 
 const VerdocsFieldInitial = VerdocsFieldInitial$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-payment.js

@@ -1,7 +1,16 @@
-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, F as Fragment, d as Host } from './p-324ed895.js';
 import { getRGBA } from '@verdocs/js-sdk';
-import { g as getTemplateRoleStore, a as getRoleIndex } from './p-9b5a4f9e.js';
-import { g as getTemplateFieldStore } from './p-00d39dca.js';
+import { S as SettingsIcon } from './p-b0766439.js';
+import { S as Store } from './p-da4d4eed.js';
+import { d as defineCustomElement$a } from './p-0e332769.js';
+import { d as defineCustomElement$9 } from './p-3201d529.js';
+import { d as defineCustomElement$8 } from './p-84ae0283.js';
+import { d as defineCustomElement$7 } from './p-0ca7012b.js';
+import { d as defineCustomElement$6 } from './p-1ae5d7e0.js';
+import { d as defineCustomElement$5 } from './p-5d4bbcd0.js';
+import { d as defineCustomElement$4 } from './p-315d6592.js';
+import { d as defineCustomElement$3 } from './p-0d063bf9.js';
+import { d as defineCustomElement$2 } from './p-c8fedb4e.js';
 
 const verdocsFieldPaymentCss = "@-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-field-payment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment.disabled{opacity:0.5}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-payment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-payment .settings-icon svg{fill:#707ae5}verdocs-field-payment .settings-icon:hover{opacity:1}@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)}}";
 const VerdocsFieldPaymentStyle0 = verdocsFieldPaymentCss;
@@ -10,15 +19,20 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
     constructor() {
         super();
         this.__registerHost();
-        this.signatureComplete = createEvent(this, "signatureComplete", 7);
-        this.initialComplete = createEvent(this, "initialComplete", 7);
         this.settingsChanged = createEvent(this, "settingsChanged", 7);
         this.deleted = createEvent(this, "deleted", 7);
-        this.fieldStore = null;
-        this.roleStore = null;
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
+        this.done = false;
+        this.editable = false;
+        this.moveable = false;
+        this.xscale = 1;
+        this.yscale = 1;
+        this.pagenumber = 1;
+        this.showingProperties = false;
+        this.focused = false;
         this.fields = undefined;
         this.pageNum = undefined;
         this.roleName = undefined;
@@ -30,19 +44,12 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
         this.currentSignatureId = undefined;
         this.currentInitial = undefined;
         this.currentInitialId = undefined;
-        this.focused = false;
         this.signed = false;
-        this.xscale = 1;
-        this.yscale = 1;
-        this.pagenumber = 1;
         this.preparedMessage = undefined;
         this.signatureUrl = '';
         this.roleindex = 0;
-        this.showingProperties = false;
     }
     componentWillLoad() {
-        this.fieldStore = getTemplateFieldStore(this.templateid);
-        this.roleStore = getTemplateRoleStore(this.templateid);
         // Load validators
         // Load fields
         // Get role names
@@ -54,6 +61,13 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
             }
         }
     }
+    async focusField() {
+        // We don't have a visible input that we can actually focus on, so we fake it
+        this.focused = true;
+        setTimeout(() => {
+            this.focused = false;
+        }, 500);
+    }
     async showSettingsPanel() {
         const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
         if (settingsPanel && settingsPanel.showPanel) {
@@ -67,24 +81,40 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
         }
     }
     render() {
-        var _a;
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-        const roleIndex = getRoleIndex(this.roleStore, field.role_name);
-        const backgroundColor = field['rgba'] || getRGBA(roleIndex);
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index, field } = Store.getField(source, sourceid, fieldname);
+        const backgroundColor = getRGBA(index);
         if (!field) {
             return h(Fragment, null);
         }
-        // TODO:
-        // const settings = getFieldSettings(field);
-        // const disabled = this.disabled ?? settings.disabled ?? false;
-        const disabled = (_a = this.disabled) !== null && _a !== void 0 ? _a : false;
-        return (h(Host, { class: { focused: this.focused, disabled }, style: { backgroundColor } }, h("button", { class: { hide: this.signed } }, "$"), this.signed ? h("div", { class: "frame" }) : h("div", { style: { display: 'none' } }), h("img", { width: "100%", height: "100%", src: this.signatureUrl, alt: "Payment Icon" })));
+        if (done) {
+            return h(Host, { class: { done } }, "$\u2713");
+        }
+        return (h(Host, { class: { focused, disabled }, style: { backgroundColor } }, h("button", { class: { hide: this.signed } }, "$"), this.signed ? h("div", { class: "frame" }) : h("div", { style: { display: 'none' } }), h("img", { width: "100%", height: "100%", src: this.signatureUrl, alt: "Payment Icon" }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+                e.stopPropagation();
+                this.showingProperties = !this.showingProperties;
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+                var _a;
+                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
+                return this.hideSettingsPanel();
+            }, onSettingsChanged: e => {
+                var _a;
+                (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+                return this.hideSettingsPanel();
+            }, helpText: 'Check boxes allow the user to select one or more (non-exclusive) options.' })))))));
     }
     static get style() { return VerdocsFieldPaymentStyle0; }
 }, [0, "verdocs-field-payment", {
-        "templateid": [1],
-        "fieldname": [1],
-        "disabled": [4],
+        "source": [513],
+        "sourceid": [513],
+        "fieldname": [513],
+        "disabled": [516],
+        "done": [516],
+        "editable": [516],
+        "moveable": [516],
+        "xscale": [514],
+        "yscale": [514],
+        "pagenumber": [514],
         "fields": [16],
         "pageNum": [2, "page-num"],
         "roleName": [1, "role-name"],
@@ -96,15 +126,13 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
         "currentSignatureId": [1, "current-signature-id"],
         "currentInitial": [1, "current-initial"],
         "currentInitialId": [1, "current-initial-id"],
-        "focused": [4],
         "signed": [4],
-        "xscale": [2],
-        "yscale": [2],
-        "pagenumber": [2],
         "roleindex": [2],
+        "showingProperties": [32],
+        "focused": [32],
         "preparedMessage": [32],
         "signatureUrl": [32],
-        "showingProperties": [32],
+        "focusField": [64],
         "showSettingsPanel": [64],
         "hideSettingsPanel": [64]
     }]);
@@ -112,13 +140,58 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-field-payment"];
+    const components = ["verdocs-field-payment", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-loader", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-field-payment":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, VerdocsFieldPayment$1);
             }
             break;
+        case "verdocs-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "verdocs-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "verdocs-component-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "verdocs-help-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "verdocs-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "verdocs-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "verdocs-select-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "verdocs-template-field-properties":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "verdocs-text-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 

package/dist/components/verdocs-field-radio.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldRadio$1, d as defineCustomElement$1 } from './p-72e959a7.js';
+import { V as VerdocsFieldRadio$1, d as defineCustomElement$1 } from './p-ecc818bb.js';
 
 const VerdocsFieldRadio = VerdocsFieldRadio$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-signature.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldSignature$1, d as defineCustomElement$1 } from './p-6e8c00bc.js';
+import { V as VerdocsFieldSignature$1, d as defineCustomElement$1 } from './p-b0c02eb8.js';
 
 const VerdocsFieldSignature = VerdocsFieldSignature$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-textarea.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldTextarea$1, d as defineCustomElement$1 } from './p-8f942993.js';
+import { V as VerdocsFieldTextarea$1, d as defineCustomElement$1 } from './p-1ca705bc.js';
 
 const VerdocsFieldTextarea = VerdocsFieldTextarea$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-textbox.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldTextbox$1, d as defineCustomElement$1 } from './p-b8cd75c0.js';
+import { V as VerdocsFieldTextbox$1, d as defineCustomElement$1 } from './p-d9704a51.js';
 
 const VerdocsFieldTextbox = VerdocsFieldTextbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-timestamp.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldTimestamp$1, d as defineCustomElement$1 } from './p-cdf871dd.js';
+import { V as VerdocsFieldTimestamp$1, d as defineCustomElement$1 } from './p-dd701894.js';
 
 const VerdocsFieldTimestamp = VerdocsFieldTimestamp$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-file-chooser.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFileChooser$1, d as defineCustomElement$1 } from './p-fe2dca8c.js';
+import { V as VerdocsFileChooser$1, d as defineCustomElement$1 } from './p-22da6d14.js';
 
 const VerdocsFileChooser = VerdocsFileChooser$1;
 const defineCustomElement = defineCustomElement$1;