@verdocs/web-sdk 1.12.21 → 1.12.23

package/dist/components/templateStore.js

@@ -1,6 +1,197 @@
-import { c as createStore } from './index3.js';
+import { getRenderingRef, forceUpdate } from '@stencil/core/internal/client';
 import { i as integerSequence } from './Primitives.js';
 
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        var _a;
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(unwrappedState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
 // NOTE: Do not attempt to convert this to a named-export module. It triggers compilation issues in Rollup that I spent days trying to
 const { state, onChange } = createStore({
   templateId: '',

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { t as throttledGetEnvelope } from './Envelopes.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { g as getEnvelopeById, s as state } from './Envelopes2.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$2 } from './verdocs-dropdown2.js';
 import { f as format } from './index2.js';
@@ -40,6 +40,8 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
     this.envelopeUpdated = createEvent(this, "envelopeUpdated", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
     this.envelopeId = '';
+    this.envelope = null;
+    this.roleNames = [];
     this.activeTab = 1;
     this.panelOpen = false;
   }
@@ -48,14 +50,15 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
   }
   // TODO: Handling signing vs preview-as-user cases
   // TODO: Handle anonymous case and failure to load due to not being logged in
-  async componentDidLoad() {
+  async componentWillRender() {
     var _a, _b, _c;
     if (!this.envelopeId) {
       console.error(`[SIDEBAR] Missing required envelopeId`);
       return;
     }
     try {
-      await getEnvelopeById(this.endpoint, this.envelopeId);
+      this.envelope = await throttledGetEnvelope(this.endpoint, this.envelopeId);
+      this.roleNames = this.envelope.recipients.map(r => r.role_name);
     }
     catch (e) {
       (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
@@ -68,31 +71,31 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
   // TODO: Refactor to a common library?
   canResendRecipient(recipient) {
     return (!['pending', 'declined', 'submitted', 'canceled'].includes(recipient.status) && //
-      !['complete', 'declined', 'canceled'].includes(state.envelope.status));
+      !['complete', 'declined', 'canceled'].includes(this.envelope.status));
   }
   canModifyRecipient(recipient) {
     return (!recipient.claimed && //
       !['declined', 'signed', 'submitted', 'canceled'].includes(recipient.status) &&
-      !['complete', 'declined', 'canceled'].includes(state.envelope.status));
+      !['complete', 'declined', 'canceled'].includes(this.envelope.status));
   }
   handleRecipientAction(recipient, id) {
     var _a;
     console.log('recipient action', id, recipient);
-    (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: id });
+    (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: id });
   }
   prepareHistoryEntries() {
     const entries = [];
-    const histories = state.envelope.histories || [];
-    entries.push({ icon: 'pencil', message: 'Envelope created.', date: new Date(state.envelope.created_at) });
-    if (state.envelope.status === 'complete') {
-      entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date(state.envelope.updated_at) });
+    const histories = this.envelope.histories || [];
+    entries.push({ icon: 'pencil', message: 'Envelope created.', date: new Date(this.envelope.created_at) });
+    if (this.envelope.status === 'complete') {
+      entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date(this.envelope.updated_at) });
     }
     const ownerCanceled = histories.some(history => history.event === 'owner:canceled');
-    if (state.envelope.status === 'canceled' && !ownerCanceled) {
-      entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date(state.envelope.canceled_at) });
+    if (this.envelope.status === 'canceled' && !ownerCanceled) {
+      entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date(this.envelope.canceled_at) });
     }
     histories.forEach(history => {
-      const user = state.envelope.recipients.find(recipient => recipient.role_name === history.role_name);
+      const user = this.envelope.recipients.find(recipient => recipient.role_name === history.role_name);
       const name = (user === null || user === void 0 ? void 0 : user.full_name) || '';
       switch (history.event.toLowerCase()) {
         case 'recipient:signed':
@@ -196,15 +199,15 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
   }
   render() {
     var _a, _b, _c;
-    if (!state.envelope) {
+    if (!this.envelope) {
       return h(Host, null);
     }
     const session = this.endpoint.getSession();
-    const isEnvelopeOwner = session.profile_id === state.envelope.profile_id; // TODO: What about org admins?
+    const isEnvelopeOwner = session.profile_id === this.envelope.profile_id; // TODO: What about org admins?
     const historyEntries = this.prepareHistoryEntries();
-    return (h(Host, { class: this.panelOpen ? 'open' : '', "data-r": state.updateCount }, h("div", { class: "buttons" }, h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (h("div", { class: "content" }, h("div", { class: "title" }, "Details"), h("div", { class: "label" }, "Envelope ID"), h("div", { class: "value" }, state.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(state.envelope.created_at), 'PP pp')), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(state.envelope.updated_at), 'PP pp')), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, state.envelope.status), h("div", { class: "label" }, "Verdoc Owner ID"), h("div", { class: "value" }, state.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = state.envelope.profile) === null || _a === void 0 ? void 0 :
-      _a.first_name, " ", (_b = state.envelope.profile) === null || _b === void 0 ? void 0 :
-      _b.last_name), h("div", { class: "label" }, "Verdoc Owner Email"), h("div", { class: "value" }, (_c = state.envelope.profile) === null || _c === void 0 ? void 0 : _c.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), state.envelope.recipients.map((recipient, index) => (h("div", { class: "recipient-detail" }, h("div", { class: "recipient-header" }, h("div", { class: "recipient-number" }, index + 1), h("div", { class: "recipient-type" }, recipient.type), h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && (h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
+    return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "buttons" }, h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (h("div", { class: "content" }, h("div", { class: "title" }, "Details"), h("div", { class: "label" }, "Envelope ID"), h("div", { class: "value" }, this.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(this.envelope.created_at), 'PP pp')), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(this.envelope.updated_at), 'PP pp')), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, this.envelope.status), h("div", { class: "label" }, "Verdoc Owner ID"), h("div", { class: "value" }, this.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = this.envelope.profile) === null || _a === void 0 ? void 0 :
+      _a.first_name, " ", (_b = this.envelope.profile) === null || _b === void 0 ? void 0 :
+      _b.last_name), h("div", { class: "label" }, "Verdoc Owner Email"), h("div", { class: "value" }, (_c = this.envelope.profile) === null || _c === void 0 ? void 0 : _c.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), this.envelope.recipients.map((recipient, index) => (h("div", { class: "recipient-detail" }, h("div", { class: "recipient-header" }, h("div", { class: "recipient-number" }, index + 1), h("div", { class: "recipient-type" }, recipient.type), h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && (h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
         { id: 'reminder', label: 'Send Reminder', disabled: !this.canResendRecipient(recipient) },
         { id: 'modify', label: 'Modify Recipient', disabled: !this.canModifyRecipient(recipient) },
         { id: 'inperson', label: 'Get In-Person Link', disabled: !this.canModifyRecipient(recipient) || !['invited', 'opened'].includes(recipient.status) },
@@ -216,6 +219,8 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
 }, [0, "verdocs-envelope-sidebar", {
     "endpoint": [16],
     "envelopeId": [1, "envelope-id"],
+    "envelope": [32],
+    "roleNames": [32],
     "activeTab": [32],
     "panelOpen": [32]
   }]);

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

@@ -90,7 +90,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         var _a;
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();
-      } })))));
+      }, helpText: 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.' })))));
   }
   get el() { return this; }
   static get style() { return verdocsFieldTextboxCss; }

package/dist/components/verdocs-sign.js

@@ -1,11 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { g as getSigningSession, u as updateEnvelopeField, a as updateEnvelopeFieldSignature, b as updateEnvelopeFieldInitials } from './Envelopes.js';
+import { g as getSigningSession, t as throttledGetEnvelope, u as updateEnvelopeField, a as updateEnvelopeFieldSignature, b as updateEnvelopeFieldInitials } from './Envelopes.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators.js';
 import { f as fullNameToInitials } from './Primitives.js';
 import { s as saveAttachment, u as updateDocumentFieldValue, a as getRoleIndex, r as renderDocumentField, b as getFieldId } from './utils.js';
-import { g as getEnvelopeById, s as state } from './Envelopes2.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -134,6 +133,8 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.roleId = null;
     this.inviteCode = null;
     this.headerTargetId = null;
+    this.envelope = null;
+    this.roleNames = [];
     this.recipient = null;
     this.signerToken = null;
     this.hasSignature = false;
@@ -180,24 +181,25 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       if (this.agreed) {
         this.nextButtonLabel = 'Next';
       }
-      await getEnvelopeById(this.endpoint, this.envelopeId, true);
-      if (state.envelope.documents.length > 0) {
+      this.envelope = await throttledGetEnvelope(this.endpoint, this.envelopeId);
+      this.roleNames = this.envelope.recipients.map(r => r.role_name);
+      if (this.envelope.documents.length > 0) {
         this.documentsSingularPlural = 'document(s)';
       }
-      this.recipientIndex = state.envelope.recipients.findIndex(recipient => recipient.role_name == this.roleId);
+      this.recipientIndex = this.envelope.recipients.findIndex(recipient => recipient.role_name == this.roleId);
       if (this.recipientIndex > -1) {
-        this.recipient = state.envelope.recipients[this.recipientIndex];
+        this.recipient = this.envelope.recipients[this.recipientIndex];
         this.agreed = this.recipient.agreed;
         console.log('[SIGN] Found our recipient in the envelope', this.recipientIndex, this.recipient);
       }
       else {
-        console.log('[SIGN] Could not find our recipient record', this.roleId, state.envelope.recipients);
+        console.log('[SIGN] Could not find our recipient record', this.roleId, this.envelope.recipients);
       }
       this.isDone = ['submitted', 'canceled', 'declined'].includes(this.recipient.status);
       // TODO: Fix service to allow this?
       // const sigs = await getSignatures();
       // console.log('sigs', sigs);
-      (_d = this.envelopeLoaded) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: state.envelope });
+      (_d = this.envelopeLoaded) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: this.envelope });
     }
     catch (e) {
       console.log('Error with signing session', e);
@@ -219,7 +221,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       var _a;
       this.nextButtonLabel = 'Next';
       this.agreed = true; // The server returns a recipient object but it's not "deep" so we track this locally
-      (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'agreed' });
+      (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'agreed' });
     })
       .catch(e => {
       var _a, _b, _c;
@@ -233,29 +235,29 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       case 'later':
         this.finishLater = true;
         this.showFinishLater = true;
-        (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'later' });
+        (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'later' });
         break;
       case 'claim':
         window.alert('This feature will be available in an upcoming release.');
-        (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'claimed' });
+        (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'claimed' });
         break;
       case 'decline':
         {
           const declineResult = await envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId);
           console.log('Decline result', declineResult);
-          (_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'declined' });
+          (_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'declined' });
           this.isDone = true;
         }
         break;
       case 'print':
         window.print();
-        (_d = this.envelopeUpdated) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'printed' });
+        (_d = this.envelopeUpdated) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'printed' });
         break;
       case 'download':
-        saveAttachment(this.endpoint, state.envelope, state.envelope.envelope_document_id).catch(e => {
+        saveAttachment(this.endpoint, this.envelope, this.envelope.envelope_document_id).catch(e => {
           console.log('Error downloading PDF', e);
         });
-        (_e = this.envelopeUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'downloaded' });
+        (_e = this.envelopeUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'downloaded' });
         break;
     }
   }
@@ -434,7 +436,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    const roleIndex = getRoleIndex(state.roleNames, this.recipient.role_name);
+    const roleIndex = getRoleIndex(this.roleNames, this.recipient.role_name);
     const recipientFields = this.recipient.fields.filter(field => field.page === pageInfo.pageNumber);
     console.log('[SIGN] Page rendered, updating fields', { pageInfo, roleIndex, recipientFields });
     recipientFields.forEach(field => {
@@ -474,10 +476,10 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       // });
     });
     // Render fields for "the other" recipients
-    state.envelope.recipients
+    this.envelope.recipients
       .filter(recipient => recipient.role_name !== this.recipient.role_name)
       .forEach(otherRecipient => {
-      const otherRoleIndex = getRoleIndex(state.roleNames, otherRecipient.role_name);
+      const otherRoleIndex = getRoleIndex(this.roleNames, otherRecipient.role_name);
       const recipientFields = otherRecipient.fields.filter(field => field.page === pageInfo.pageNumber);
       // We don't render other recipients' fields if they've already acted, because those values are now stamped into the document page.
       // TODO: Do we want to render alternate treatments for recipients who have declined (red boxes?) and/or if the envelope is cancelled?
@@ -508,13 +510,13 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.checkRecipientFields();
   }
   render() {
-    if (state.loading || !state.envelope) {
+    if (!this.envelope) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
     if (this.isDone) {
-      return (h(Host, { class: { agreed: this.agreed }, "data-r": state.updateCount }, this.isDone ? (h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })) : (h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') })));
+      return (h(Host, { class: { agreed: this.agreed } }, this.isDone ? (h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })) : (h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') })));
     }
-    return (h(Host, { class: { agreed: this.agreed }, "data-r": state.updateCount }, !this.finishLater && h("div", { class: "intro" }, "Please review and act on these documents."), h("div", { id: "verdocs-sign-header" }, !this.agreed ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, state.envelope.name), h("div", { style: { flex: '1' } }))), !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })), !this.agreed ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), h("div", { class: "document", style: { paddingTop: this.headerTargetId ? '15px' : '70px' } }, (state.envelope.documents || []).map(envelopeDocument => {
+    return (h(Host, { class: { agreed: this.agreed } }, !this.finishLater && h("div", { class: "intro" }, "Please review and act on these documents."), h("div", { id: "verdocs-sign-header" }, !this.agreed ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }))), !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })), !this.agreed ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), h("div", { class: "document", style: { paddingTop: this.headerTargetId ? '70px' : '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
       pages.sort((a, b) => a.sequence - b.sequence);
       return (h(Fragment, null, pages.map(page => {
@@ -539,6 +541,8 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "roleId": [1, "role-id"],
     "inviteCode": [1, "invite-code"],
     "headerTargetId": [1, "header-target-id"],
+    "envelope": [32],
+    "roleNames": [32],
     "recipient": [32],
     "signerToken": [32],
     "hasSignature": [32],

package/dist/components/verdocs-template-field-properties2.js

@@ -28,6 +28,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
     this.fieldName = '';
+    this.helpText = '';
     this.dirty = false;
     this.loading = true;
     this.type = 'signature';
@@ -39,7 +40,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     this.options = [];
     this.placeholder = '';
     this.defaultValue = '';
-    this.showingHelp = true;
+    this.showingHelp = false;
   }
   async componentWillLoad() {
     var _a, _b, _c, _d, _e;
@@ -159,10 +160,10 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     if (!this.endpoint.session || !state.template) {
       return h(Host, { class: "empty" });
     }
-    if (this.showingHelp) {
-      return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions" }, "Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the \"name\" field."), h("p", { class: "instructions" }, "If marked required, the participant must complete the field before proceeding..")));
+    if (this.helpText && this.showingHelp) {
+      return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions", innerHTML: this.helpText })));
     }
-    return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Field Name", value: this.name, autocomplete: "off",
+    return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Field Name", value: this.name, autocomplete: "off",
       //              helpText="The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key."
       placeholder: "Field Name...", onInput: (e) => {
         this.name = e.target.value;
@@ -208,6 +209,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     "endpoint": [16],
     "templateId": [1, "template-id"],
     "fieldName": [1, "field-name"],
+    "helpText": [1, "help-text"],
     "dirty": [32],
     "loading": [32],
     "type": [32],

package/dist/components/verdocs-view2.js

@@ -1,9 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { d as cancelEnvelope } from './Envelopes.js';
+import { t as throttledGetEnvelope, d as cancelEnvelope } from './Envelopes.js';
 import { E as EnvelopeStates } from './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { f as saveEnvelopesAsZip, h as saveCertificate, s as saveAttachment } from './utils.js';
-import { g as getEnvelopeById, s as state } from './Envelopes2.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$3 } from './verdocs-dropdown2.js';
 import { d as defineCustomElement$2 } from './verdocs-envelope-document-page2.js';
@@ -40,6 +39,8 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.envelopeId = '';
     this.headerTargetId = null;
     this.isProcessing = false;
+    this.envelope = null;
+    this.roleNames = [];
   }
   componentWillLoad() {
     this.endpoint.loadSession();
@@ -66,8 +67,9 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     var _a, _b, _c;
     console.log('[VIEW] Checking for updated envelope');
     try {
-      await getEnvelopeById(this.endpoint, this.envelopeId, true);
-      this.isProcessing = state.envelope.documents.some(document => document.type === 'attachment' && !document.processed);
+      this.envelope = await throttledGetEnvelope(this.endpoint, this.envelopeId);
+      this.roleNames = this.envelope.recipients.map(r => r.role_name);
+      this.isProcessing = this.envelope.documents.some(document => document.type === 'attachment' && !document.processed);
       if (this.isProcessing) {
         setTimeout(() => this.reloadEnvelope(), 3000);
       }
@@ -87,38 +89,38 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         // TODO: Better option for inline-flow confirmation and alert dialogs.
         if (confirm('Are you sure you wish to cancel this envelope? This action cannot be undone.')) {
           await cancelEnvelope(this.endpoint, this.envelopeId);
-          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'canceled' });
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'canceled' });
         }
         break;
       case 'print':
         window.print();
-        (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'printed' });
+        (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'printed' });
         break;
       case 'download-attachments':
-        saveAttachment(this.endpoint, state.envelope, state.envelope.envelope_document_id)
+        saveAttachment(this.endpoint, this.envelope, this.envelope.envelope_document_id)
           .then(() => {
           var _a;
-          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'downloaded' });
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'downloaded' });
         })
           .catch(e => {
           console.log('Error downloading PDF', e);
         });
         break;
       case 'download-certificate':
-        saveCertificate(this.endpoint, state.envelope, state.envelope.certificate_document_id)
+        saveCertificate(this.endpoint, this.envelope, this.envelope.certificate_document_id)
           .then(() => {
           var _a;
-          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'downloaded' });
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'downloaded' });
         })
           .catch(e => {
           console.log('Error downloading PDF', e);
         });
         break;
       case 'download-all':
-        saveEnvelopesAsZip(this.endpoint, [state.envelope])
+        saveEnvelopesAsZip(this.endpoint, [this.envelope])
           .then(() => {
           var _a;
-          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'downloaded' });
+          (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'downloaded' });
         })
           .catch(e => {
           console.log('Error downloading Zip', e);
@@ -128,19 +130,17 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     var _a;
-    if (state.loading || !state.envelope) {
+    if (!this.envelope) {
+      console.log('rendering, no env');
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    if (state.error) {
-      return (h(Host, null, h("div", null, state.error)));
-    }
     const menuOptions = [{ id: 'print', label: 'Print' }];
-    if (userCanCancelEnvelope(this.endpoint.session, state.envelope)) {
+    if (userCanCancelEnvelope(this.endpoint.session, this.envelope)) {
       menuOptions.push({ id: 'cancel', label: 'Cancel' });
     }
     // Add download options to the menu
-    const hasAttachments = state.envelope.documents.length > 0;
-    const hasCertificate = !!state.envelope.certificate;
+    const hasAttachments = this.envelope.documents.length > 0;
+    const hasCertificate = !!this.envelope.certificate;
     if (hasAttachments || hasCertificate) {
       menuOptions.push({ label: '' });
       if (hasAttachments) {
@@ -153,10 +153,11 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         menuOptions.push({ id: 'download-all', label: 'Download All Files' });
       }
     }
-    return (h(Host, { "data-r": state.updateCount }, h("div", { id: "verdocs-view-header" }, h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, state.envelope.name), h("div", { style: { flex: '1' } }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document", style: { paddingTop: this.headerTargetId ? '15px' : '70px' } }, (((_a = state.envelope) === null || _a === void 0 ? void 0 : _a.documents) || [])
+    console.log('docs', this.envelope, this.envelope.documents);
+    return (h(Host, null, h("div", { id: "verdocs-view-header" }, h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document", style: { paddingTop: this.headerTargetId ? '70px' : '15px' } }, (((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.documents) || [])
       .filter(document => document.type !== 'certificate')
       .map(envelopeDocument => {
-      console.log('[VIEW] Rendering document', state.envelope, envelopeDocument);
+      console.log('[VIEW] Rendering document', this.envelope, envelopeDocument);
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
       pages.sort((a, b) => a.sequence - b.sequence);
       if (!envelopeDocument.processed) {
@@ -174,7 +175,9 @@ const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "endpoint": [16],
     "envelopeId": [1, "envelope-id"],
     "headerTargetId": [1, "header-target-id"],
-    "isProcessing": [32]
+    "isProcessing": [32],
+    "envelope": [32],
+    "roleNames": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {