@verdocs/web-sdk 4.2.158 → 5.0.1

package/dist/collection/components/templates/verdocs-template-roles/verdocs-template-roles.js

@@ -1,13 +1,13 @@
 import interact from "interactjs";
 import { h, Fragment, Host } from "@stencil/core";
-import { createTemplateRole, formatFullName, getRGBA, updateTemplateRole, VerdocsEndpoint } from "@verdocs/js-sdk";
-import { getRoleIndex, getTemplateRoleStore, updateStoreRole } from "../../../utils/TemplateRoleStore";
-import { getTemplateStore } from "../../../utils/TemplateStore";
+import { createTemplateRole, formatFullName, getRGBA, getTemplate, updateTemplateRole, VerdocsEndpoint } from "@verdocs/js-sdk";
+import { getRoleIndex } from "../../../utils/Templates";
 import { SDKError } from "../../../utils/errors";
-const senderLabels = {
-    template_owner: 'Template Owner',
-    envelope_creator: 'Envelope Creator',
-};
+import { Store } from "../../../utils/Datastore";
+// const senderLabels: Record<TTemplateSender, string> = {
+//   template_owner: 'Template Owner',
+//   envelope_creator: 'Envelope Creator',
+// };
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="#00000089"><path d="m8.021 17.917-.313-2.5q-.27-.125-.625-.334-.354-.208-.625-.395l-2.312.979-1.979-3.438 1.979-1.5q-.021-.167-.031-.364-.011-.198-.011-.365 0-.146.011-.344.01-.198.031-.385l-1.979-1.5 1.979-3.417 2.312.958q.271-.187.615-.385t.635-.344l.313-2.5h3.958l.313 2.5q.312.167.625.344.312.177.604.385l2.333-.958 1.979 3.417-1.979 1.521q.021.187.021.364V10q0 .146-.01.333-.011.188-.011.396l1.958 1.5-1.979 3.438-2.312-.979q-.292.208-.615.395-.323.188-.614.334l-.313 2.5Zm1.937-5.355q1.063 0 1.813-.75t.75-1.812q0-1.062-.75-1.812t-1.813-.75q-1.041 0-1.802.75-.76.75-.76 1.812t.76 1.812q.761.75 1.802.75Zm0-1.333q-.5 0-.864-.364-.365-.365-.365-.865t.365-.865q.364-.364.864-.364t.865.364q.365.365.365.865t-.365.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.187q.605-.167 1.136-.49.531-.323 1.031-.802l2.021.875.854-1.375-1.792-1.354q.105-.333.136-.635.031-.303.031-.615 0-.292-.031-.573-.031-.281-.115-.635l1.792-1.396-.834-1.375-2.062.875q-.438-.438-1.021-.781-.583-.344-1.125-.49l-.271-2.208H9.167l-.271 2.208q-.584.146-1.125.458-.542.313-1.042.792l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.479.458 1.021.771.542.312 1.146.479Z"/></svg>';
 const startIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="#00000089"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';
 const stepIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="#00000089"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';
@@ -21,13 +21,31 @@ const iconCC = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill
  */
 export class VerdocsTemplateRoles {
     constructor() {
-        this.templateStore = null;
-        this.roleStore = null;
+        this.templateListenerId = null;
         this.endpoint = VerdocsEndpoint.getDefault();
         this.templateId = '';
         this.showingRoleDialog = null;
         this.sender = null;
         this.loading = true;
+        this.template = null;
+    }
+    disconnectedCallback() {
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        console.log('[ROLES] Loading template', this.templateId);
+        this.unlistenToTemplate();
+        Store.subscribe('templates', this.templateId, () => getTemplate(this.endpoint, this.templateId), false, (template) => {
+            console.log('[BUILD] Template Updated', template);
+            this.template = template;
+            this.loading = false;
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            Store.store.delListener(this.templateListenerId);
+            this.templateListenerId = null;
+        }
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -41,18 +59,7 @@ export class VerdocsTemplateRoles {
                 console.log('[ROLES] Unable to start builder session, must be authenticated');
                 return;
             }
-            await getTemplateStore(this.endpoint, this.templateId, false)
-                .then(ts => {
-                this.templateStore = ts;
-                this.roleStore = getTemplateRoleStore(this.templateId);
-                this.loading = false;
-                this.roleStore.onChange('roles', roles => {
-                    var _a;
-                    console.log('[ROLES] Roles changed', { roles });
-                    (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, roles });
-                });
-            })
-                .catch(e => console.warn(e));
+            this.listenToTemplate();
         }
         catch (e) {
             console.log('[FIELDS] Error with preview session', e);
@@ -96,12 +103,8 @@ export class VerdocsTemplateRoles {
             overlap: 0.05,
             ondrop: async function onDrop(event) {
                 var _a;
-                console.log('dropped', event.target.classList);
                 event.target.classList.remove('active');
-                const roleName = event.relatedTarget.dataset.rolename;
-                const targetSequence = +event.target.dataset.sequence;
-                const targetOrder = +event.target.dataset.order;
-                updateStoreRole(this.roleStore, roleName, { sequence: targetSequence, order: targetOrder });
+                // This will re-sort the roles and renumbers them via server calls if necessary
                 await this.renumberTemplateRoles();
                 console.log('[ROLES] Updated roles', this.getSortedRoles());
                 (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, roles: this.getSortedRoles() });
@@ -129,7 +132,10 @@ export class VerdocsTemplateRoles {
         (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit();
     }
     getSortedRoles() {
-        return this.roleStore.state.roles.sort((a, b) => {
+        var _a;
+        // NOTE: This mutates the source array but that's OK because everything that touches
+        // it will want the same thing done.
+        return (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || []).sort((a, b) => {
             return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
         });
     }
@@ -147,14 +153,15 @@ export class VerdocsTemplateRoles {
         return roles.map(role => role.name);
     }
     getRolesAtSequence(sequence) {
+        var _a;
         // Entries can be undefined when deleted because Stencil has no remove() operator yet for stores.
         // See https://github.com/ionic-team/stencil-store/issues/23
-        return this.roleStore.state.roles.filter(role => role && role.sequence === sequence);
+        return (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || []).filter(role => role && role.sequence === sequence);
     }
     // When the user drags a role around, we handle placement "between" items by assigning it a half-order number
     // e.g. 1.5 to place it between items 1 and 2, 0.5 to place it at the beginning, or last+0.5 to place it at the end.
     // Then we re-sort the list of roles and renumber them.
-    renumberTemplateRoles() {
+    async renumberTemplateRoles() {
         // console.log('Renumbering roles', this.getSequenceNumbers(), JSON.stringify(this.roleStore.state));
         // Avoid dupe renumber attempts
         const renumbered = [];
@@ -167,24 +174,30 @@ export class VerdocsTemplateRoles {
                         role.sequence = newSequenceIndex + 1;
                         role.order = newOrderIndex + 1;
                         renumbered.push(role.name);
-                        renumberRequests.push(updateTemplateRole(this.endpoint, this.templateId, role.name, {
-                            sequence: role.sequence,
-                            order: role.order,
-                        }));
+                        renumberRequests.push(updateTemplateRole(this.endpoint, this.templateId, role.name, { sequence: role.sequence, order: role.order }));
                     }
                 }
             });
         });
-        return Promise.all(renumberRequests);
+        if (renumberRequests.length > 0) {
+            console.log(`[ROLES] Submitting ${renumberRequests.length} renumber requests`);
+            return Promise.all(renumberRequests).then(async () => {
+                // When renumbering, we don't try to update the store for every individual item
+                // changing. We just do it once at the end.
+                this.template = await Store.getTemplate(this.endpoint, this.templateId, true);
+            });
+        }
+        return true;
     }
     // Look for name conflicts, because they're UGC and can be anything, regardless of order.
     getNextRoleName() {
+        var _a, _b;
         let name = '';
-        let nextNumber = Object.keys(this.roleStore.state).length - 1;
+        let nextNumber = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || []).length;
         do {
             nextNumber++;
             name = `Recipient ${nextNumber}`;
-        } while (!name || this.roleStore.state.roles.some(role => role && role.name === name));
+        } while (!name || (((_b = this.template) === null || _b === void 0 ? void 0 : _b.roles) || []).some(role => role && role.name === name));
         return name;
     }
     callCreateRole(name, sequence, order) {
@@ -204,10 +217,15 @@ export class VerdocsTemplateRoles {
             delegator: false,
             kba_method: null,
         })
-            .then(async (r) => {
+            .then(async (role) => {
             var _a;
-            console.log('[ROLES] Created role', r);
-            this.roleStore.set('roles', [...this.roleStore.state.roles, r]);
+            console.log('[ROLES] Created role', role);
+            const newTemplate = JSON.parse(JSON.stringify(this.template));
+            newTemplate.roles.push(role);
+            // TODO: Verify this immediately triggers a self-update
+            console.log('Updating template in data store');
+            Store.updateTemplate(this.templateId, newTemplate);
+            // This will re-sort the roles and renumbers them via server calls if necessary
             await this.renumberTemplateRoles();
             (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'added', endpoint: this.endpoint, templateId: this.templateId, roles: this.getSortedRoles() });
         })
@@ -228,25 +246,23 @@ export class VerdocsTemplateRoles {
         this.callCreateRole(name, sequence, order);
     }
     render() {
-        var _a, _b, _c, _d;
         if (!this.endpoint.session) {
             return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
-        if (this.loading || !((_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
-            console.log('Loading', this.loading, (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state.isLoaded);
+        if (this.loading || !this.template) {
             return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
         }
         const roleNames = this.getRoleNames();
         const sequences = this.getSequenceNumbers();
-        return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Roles and Workflow"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "row-roles" }, h("div", { class: "sender" }, h("span", { class: "label" }, "Owner:"), " ", senderLabels[(_d = (_c = this.templateStore) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.sender], ' '))), h("div", { class: "row add-sequence", "data-sequence": 0 }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), sequences.map(sequence => (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), this.getRolesAtSequence(sequence).map(role => {
+        return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Roles and Workflow"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "row-roles" }, h("div", { class: "sender" }, h("span", { class: "label" }, "Send Envelope")))), h("div", { class: "row add-sequence", "data-sequence": 0 }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), sequences.map(sequence => (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), this.getRolesAtSequence(sequence).map(role => {
             const unknown = !role.email;
-            console.log('ras', sequence, role);
-            return unknown ? (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (h(Fragment, null, h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), formatFullName(role), " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
+            return unknown ? (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(this.template, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (h(Fragment, null, h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(this.template, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), formatFullName(role), " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
         }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), sequences.length > 0 && (h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), h("div", { class: "row", "data-sequence": sequences.length + 1 }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, sequences.length + 1) }))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-roles" }, h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
                 this.showingRoleDialog = null;
             }, onDelete: async () => {
                 var _a;
                 this.showingRoleDialog = null;
+                // This will re-sort the roles and renumbers them via server calls if necessary
                 await this.renumberTemplateRoles();
                 (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'deleted', endpoint: this.endpoint, templateId: this.templateId, roles: this.getSortedRoles() });
             } }))));
@@ -310,7 +326,8 @@ export class VerdocsTemplateRoles {
         return {
             "showingRoleDialog": {},
             "sender": {},
-            "loading": {}
+            "loading": {},
+            "template": {}
         };
     }
     static get events() {

package/dist/collection/components/templates/verdocs-template-star/verdocs-template-star.js

@@ -38,7 +38,7 @@ export class VerdocsTemplateStar {
         });
     }
     render() {
-        return (h(Host, { key: '4b2e5c3bc4bbbbdeb699f23d36af8bd409677d02' }, h("div", { key: 'cac3bad8a37bcf044e037391bee73932b95931d1', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: '3b947e3b3e0a8fe4a91aeba068bc10a86dbe82f5', class: "count" }, this.template.star_counter || '--')));
+        return (h(Host, { key: 'a6f58209cd99b4c9e5865ca1d65447d720a42968' }, h("div", { key: '06039fdfd887e1edcf40df20cd853765b8d3f981', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: '5e5c42134c1b1e46b78340d13d21a2c78e3d941c', class: "count" }, this.template.star_counter || '--')));
     }
     static get is() { return "verdocs-template-star"; }
     static get originalStyleUrls() {

package/dist/collection/components/templates/verdocs-template-tags/verdocs-template-tags.js

@@ -8,7 +8,7 @@ export class VerdocsTemplateTags {
     }
     render() {
         var _a;
-        return (h(Host, { key: '5b52ce24a601aa820868affd555ce4b46935938d' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (h("span", null, tag)))));
+        return (h(Host, { key: 'bc1467762286083fab80ee7bab00155fc5d0c521' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (h("span", null, tag)))));
     }
     static get is() { return "verdocs-template-tags"; }
     static get originalStyleUrls() {

package/dist/collection/utils/Datastore.js

@@ -0,0 +1,141 @@
+import { createStore } from "tinybase";
+import { getTemplate } from "@verdocs/js-sdk";
+const store = createStore();
+// For now, we clear the database every page load to keep it clean and small.
+// We're only using it to synchronize data between isolated components. e-Signing
+// flows don't really benefit from "offline-first" approaches anyway, since most
+// of a user's interactions need to go through our servers anyway.
+store.delTables();
+store.delValues();
+console.log('[STORE] Data store initialized.');
+export const safeJsonParse = (val, fallback) => {
+    try {
+        return JSON.parse(val);
+    }
+    catch (e) {
+        return fallback || null;
+    }
+};
+export const objectToRow = (obj) => {
+    const row = {};
+    for (let key in obj) {
+        if (typeof obj[key] === 'string' || typeof obj[key] === 'number' || typeof obj[key] === 'boolean') {
+            row[key] = obj[key];
+        }
+        else if (obj[key] === null) {
+            row[`__null__${key}`] = '';
+        }
+        else if (Array.isArray(obj[key])) {
+            row[`__array__${key}`] = JSON.stringify(obj[key]);
+        }
+        else if (typeof obj[key] === 'object') {
+            row[`__object__${key}`] = JSON.stringify(obj[key]);
+        }
+    }
+    return row;
+};
+export const rowToObject = (row) => {
+    const obj = {};
+    for (let key in row) {
+        if (key.startsWith('__null__')) {
+            obj[key.replace('__null__', '')] = null;
+        }
+        else if (typeof row[key] === 'string' && key.startsWith('__array__')) {
+            obj[key.replace('__array__', '')] = safeJsonParse(row[key]);
+        }
+        else if (typeof row[key] === 'string' && key.startsWith('__object__')) {
+            obj[key.replace('__object__', '')] = safeJsonParse(row[key]);
+        }
+        else {
+            obj[key] = row[key];
+        }
+    }
+    return obj;
+};
+export const Store = {
+    store,
+    // Extends the store's listener mechanism with two features:
+    // 1. Apply typing to the return result, and pass the whole updated value to the callback instead
+    //    of just the "changes".
+    // 2. Fire the callback immediately with the current value, so that the component can initialize.
+    subscribe(tableId, rowId, getter, forceReload, callback) {
+        // We call the callback immediately if the row exists so we get an SWR-like behavior.
+        if (store.hasRow(tableId, rowId)) {
+            callback(rowToObject(store.getRow(tableId, rowId)));
+        }
+        const listenerId = store.addRowListener(tableId, rowId, () => {
+            const row = store.getRow(tableId, rowId);
+            callback(rowToObject(row));
+        });
+        if (!store.hasRow(tableId, rowId) || forceReload) {
+            console.log('[STORE] Reloading', { tableId, rowId });
+            getter()
+                .then(result => {
+                // We don't need to call the callback because it's already listening
+                console.log('[STORE] Loaded row', { tableId, rowId, forceReload }, result);
+                store.setRow(tableId, rowId, objectToRow(result));
+            })
+                .catch(e => {
+                console.error('[STORE] Error getting row', { tableId, rowId, forceReload }, e);
+            });
+        }
+        return listenerId;
+    },
+    unsubscribe(listenerId) {
+        store.delListener(listenerId);
+    },
+    async getTemplate(endpoint, templateId, reload = false) {
+        if (!reload) {
+            if (!store.hasRow('templates', templateId)) {
+                return null;
+            }
+            const row = store.getRow('templates', templateId);
+            return rowToObject(row);
+        }
+        const template = await getTemplate(endpoint, templateId);
+        store.setRow('templates', templateId, objectToRow(template));
+        return template;
+    },
+    updateTemplate(templateId, template) {
+        store.setRow('templates', templateId, objectToRow(template));
+        return template;
+    },
+    async getEnvelope(endpoint, envelopeId, reload = false) {
+        if (!reload) {
+            if (!store.hasRow('envelopes', envelopeId)) {
+                return null;
+            }
+            const row = store.getRow('envelopes', envelopeId);
+            return rowToObject(row);
+        }
+        const envelope = await getTemplate(endpoint, envelopeId);
+        store.setRow('envelopes', envelopeId, objectToRow(envelope));
+        return envelope;
+    },
+    updateEnvelope(envelopeId, envelope) {
+        store.setRow('envelopes', envelopeId, objectToRow(envelope));
+        return envelope;
+    },
+    // Get a field from an already-loaded envelope or template. Intended to be
+    // called by the verdocs-field-* components themselves which are only rendered
+    // after a template or envelope is already loaded and cached in the store, so
+    // no attempt is made to load the parent record if it isn't already known.
+    getField(source, sourceId, fieldName) {
+        if (source === 'template') {
+            const row = store.getRow('templates', sourceId);
+            const template = rowToObject(row);
+            const field = (template.fields || []).find(field => field.name === fieldName);
+            const roleNames = (template.roles || []).map(role => role.name);
+            const index = roleNames.findIndex(name => name === field.role_name);
+            return { index: Math.max(index, 0), field };
+        }
+        else {
+            const row = store.getRow('envelopes', sourceId);
+            const envelope = rowToObject(row);
+            const field = (envelope.fields || []).find(field => field.name === fieldName);
+            const roleNames = (envelope.recipients || []).map(recipient => recipient.role_name);
+            const index = roleNames.findIndex(name => name === field.role_name);
+            return { index, field };
+        }
+    },
+};

package/dist/collection/utils/Templates.js

@@ -0,0 +1,2 @@
+export const getRoleNames = (template) => ((template === null || template === void 0 ? void 0 : template.roles) || []).map(role => role.name);
+export const getRoleIndex = (template, role_name) => Math.max(getRoleNames(template).findIndex(name => name === role_name), 0);

package/dist/collection/utils/utils.js

@@ -89,7 +89,7 @@ export const updateDocumentFieldValue = (field) => {
         existingField.setAttribute('disabled', false); // We need this to trigger a re-render
     }
 };
-export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
+export const renderDocumentField = (source, field, docPage, fieldOptions, tabIndex = 1) => {
     var _a, _b;
     const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
     const controlsDiv = document.getElementById(docPage.containerId + '-controls');
@@ -124,7 +124,8 @@ export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1)
             el.field = field;
             el.setAttribute('id', id);
             el.setAttribute('fieldname', field.name);
-            el.setAttribute('templateid', 'template_id' in field ? field.template_id : 'PREVIEW');
+            el.setAttribute('source', source);
+            el.setAttribute('sourceid', 'template_id' in field ? field.template_id : field.envelope_id);
             if (disabled) {
                 el.setAttribute('tabindex', -1);
                 el.setAttribute('disabled', true);

package/dist/components/index.js

@@ -55,12 +55,10 @@ import { VerdocsTemplateCreate } from './verdocs-template-create.js';
 import { VerdocsTemplateDocumentPage } from './verdocs-template-document-page.js';
 import { VerdocsTemplateFieldProperties } from './verdocs-template-field-properties.js';
 import { VerdocsTemplateFields } from './verdocs-template-fields.js';
-import { VerdocsTemplateName } from './verdocs-template-name.js';
 import { VerdocsTemplateRoleProperties } from './verdocs-template-role-properties.js';
 import { VerdocsTemplateRoles } from './verdocs-template-roles.js';
 import { VerdocsTemplateStar } from './verdocs-template-star.js';
 import { VerdocsTemplateTags } from './verdocs-template-tags.js';
-import { VerdocsTemplateVisibility } from './verdocs-template-visibility.js';
 import { VerdocsTemplatesList } from './verdocs-templates-list.js';
 import { VerdocsTextInput } from './verdocs-text-input.js';
 import { VerdocsToggle } from './verdocs-toggle.js';
@@ -68,7 +66,7 @@ import { VerdocsToggleButton } from './verdocs-toggle-button.js';
 import { VerdocsToolbarIcon } from './verdocs-toolbar-icon.js';
 import { VerdocsUploadDialog } from './verdocs-upload-dialog.js';
 import { VerdocsView } from './verdocs-view.js';
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-7786799a.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-324ed895.js';
 
 const defineCustomElements = (opts) => {
     if (typeof customElements !== 'undefined') {
@@ -130,12 +128,10 @@ const defineCustomElements = (opts) => {
             VerdocsTemplateDocumentPage,
             VerdocsTemplateFieldProperties,
             VerdocsTemplateFields,
-            VerdocsTemplateName,
             VerdocsTemplateRoleProperties,
             VerdocsTemplateRoles,
             VerdocsTemplateStar,
             VerdocsTemplateTags,
-            VerdocsTemplateVisibility,
             VerdocsTemplatesList,
             VerdocsTextInput,
             VerdocsToggle,

package/dist/components/{p-3044c9cb.js → p-070bebd7.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';
 import { c as createPopper } from './p-68a5aaff.js';
 
 const verdocsButtonPanelCss = "@-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-button-panel{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer;opacity:0.6}verdocs-button-panel .icon svg{fill:#707ae5}verdocs-button-panel .icon:hover{opacity:1}.verdocs-button-panel-content{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:320px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{font-size:16px;font-weight:bold;margin:0 0 16px 0;color:#092c4c;border-bottom:1px solid #cccccc}";

package/dist/components/{p-1b60debe.js → p-0a69031f.js}

@@ -1,16 +1,16 @@
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } 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 { d as defineCustomElement$8 } from './p-ac7578f6.js';
-import { d as defineCustomElement$7 } from './p-4dc4418a.js';
-import { d as defineCustomElement$6 } from './p-921297ba.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-b2bf338f.js';
-import { d as defineCustomElement$1 } 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-3201d529.js';
+import { d as defineCustomElement$7 } from './p-84ae0283.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-0d063bf9.js';
+import { d as defineCustomElement$1 } from './p-c8fedb4e.js';
 
 const verdocsFieldDropdownCss = "@-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-dropdown{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown label{top:-14px;left:0;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-dropdown select{cursor:inherit;position:absolute;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) 6px, calc(100% - 3px) 6px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2);padding:0 5px}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.disabled select{opacity:0.5}verdocs-field-dropdown.required select{border:1px solid #cc0000}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-dropdown verdocs-button-panel{display:block;margin-left:-33px;margin-top:-1px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-dropdown .settings-icon{position:absolute;top:-2px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-dropdown .settings-icon svg{fill:#707ae5}verdocs-field-dropdown .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 VerdocsFieldDropdownStyle0 = verdocsFieldDropdownCss;
@@ -22,9 +22,8 @@ const VerdocsFieldDropdown = /*@__PURE__*/ proxyCustomElement(class VerdocsField
         this.fieldChange = createEvent(this, "fieldChange", 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.editable = false;
@@ -60,15 +59,11 @@ const VerdocsFieldDropdown = /*@__PURE__*/ proxyCustomElement(class VerdocsField
             settingsPanel.hidePanel();
         }
     }
-    async componentWillLoad() {
-        this.fieldStore = getTemplateFieldStore(this.templateid);
-        this.roleStore = getTemplateRoleStore(this.templateid);
-    }
     render() {
-        const { templateid, fieldname = '', editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
-        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        let { required = false, role_name = '', value = '', label = '', options } = field || {};
-        const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index, field } = Store.getField(source, sourceid, fieldname);
+        let { required = false, value = '', label = '', options } = field || {};
+        const backgroundColor = getRGBA(index);
         if (done) {
             return h(Host, { class: { done } }, value);
         }
@@ -78,7 +73,7 @@ const VerdocsFieldDropdown = /*@__PURE__*/ proxyCustomElement(class VerdocsField
         return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), h("select", { disabled: disabled, onChange: e => this.handleChange(e), ref: el => (this.selectEl = el) }, h("option", { value: "" }, "Select..."), options.map(option => (h("option", { value: option.id, selected: option.id === value }, option.label))), !options.length && h("option", { value: "NA" }, "N/A")), 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-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
                 var _a;
                 (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                 return this.hideSettingsPanel();
@@ -90,7 +85,8 @@ const VerdocsFieldDropdown = /*@__PURE__*/ proxyCustomElement(class VerdocsField
     }
     static get style() { return VerdocsFieldDropdownStyle0; }
 }, [0, "verdocs-field-dropdown", {
-        "templateid": [513],
+        "source": [513],
+        "sourceid": [513],
         "fieldname": [513],
         "disabled": [516],
         "editable": [516],
@@ -109,7 +105,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-field-dropdown", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
+    const components = ["verdocs-field-dropdown", "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-dropdown":
             if (!customElements.get(tagName)) {
@@ -118,20 +114,25 @@ function defineCustomElement() {
             break;
         case "verdocs-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "verdocs-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "verdocs-component-error":
             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-69881420.js → p-0ca7012b.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';
 import { c as createPopper } from './p-68a5aaff.js';
 
 const verdocsHelpIconCss = "@-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-help-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block;opacity:0.3;position:relative}verdocs-help-icon:hover{opacity:1}verdocs-help-icon .icon{display:inline-block}verdocs-help-icon .tooltip{display:none;min-width:200px;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:500;position:absolute;padding:5px 10px;font-size:12px;border-radius:4px;z-index:10000}verdocs-help-icon .tooltip .arrow,verdocs-help-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-help-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-help-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-help-icon .tooltip[data-show]{display:block}verdocs-help-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-help-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-help-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-help-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}";