@verdocs/web-sdk 1.12.43 → 1.13.0

package/dist/components/verdocs-preview.js

@@ -2,8 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { r as renderDocumentField, a as getRoleIndex } from './utils.js';
-import { s as state } from './templateStore.js';
-import { l as loadTemplate } from './Templates.js';
+import { g as getTemplateStore, a as getRoleNames } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$3 } from './verdocs-loader2.js';
 import { d as defineCustomElement$2 } from './verdocs-template-document-page2.js';
@@ -15,39 +14,45 @@ const VerdocsPreview$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     super();
     this.__registerHost();
     this.sdkError = createEvent(this, "sdkError", 7);
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
   }
-  // TODO: Move to state store so we can load this one time
-  async componentDidLoad() {
+  async componentWillLoad() {
     var _a, _b, _c;
-    this.endpoint.loadSession();
-    if (!this.templateId) {
-      console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);
-      return;
-    }
     try {
-      console.log(`[PREVIEW] Loading template ${this.templateId}`);
-      await loadTemplate(this.endpoint, this.templateId, true);
+      this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[PREVIEW] Unable to start builder session, must be authenticated');
+        return;
+      }
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+      console.log(`[PREVIEW] Loading template ${this.templateId}`, this.endpoint.session);
     }
     catch (e) {
-      console.log('[PREVIEW] Error loading template', e);
+      console.log('[PREVIEW] Error with preview session', e);
       (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
     }
   }
   handlePageRendered(e) {
+    var _a, _b;
     const pageInfo = e.detail;
     // console.log('[PREVIEW] Page rendered', pageInfo);
-    const fields = state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
+    const fields = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
     // console.log('[PREVIEW] Fields on page', fields);
-    fields.forEach(field => renderDocumentField(field, pageInfo, getRoleIndex(state.roleNames, field.role_name), { disabled: true, editable: false, draggable: false }));
+    fields.forEach(field => renderDocumentField(field, pageInfo, getRoleIndex(getRoleNames(this.store), field.role_name), { disabled: true, editable: false, draggable: false }));
   }
   render() {
+    var _a, _b, _c, _d;
     // TODO: Render a better error
-    if (state.loading || !state.template) {
+    if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    const pages = [...state.template.pages];
+    const pages = [...(_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.pages];
     pages.sort((a, b) => a.sequence - b.sequence);
     return (h(Host, null, pages.map(page => {
       return (h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onPageRendered: e => this.handlePageRendered(e), layers: [

package/dist/components/verdocs-search-activity2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { a as getTemplates } from './Templates2.js';
+import { g as getTemplates } from './Templates.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 

package/dist/components/verdocs-send.js

@@ -3,8 +3,7 @@ import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { i as isValidEmail, a as isValidPhone } from './Validators.js';
 import { g as getRGBA } from './Colors.js';
-import { s as state } from './templateStore.js';
-import { l as loadTemplate } from './Templates.js';
+import { g as getTemplateStore } from './TemplateStore.js';
 import { a as getRoleIndex } from './utils.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$4 } from './verdocs-button2.js';
@@ -26,6 +25,7 @@ const VerdocsSend$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.sdkError = createEvent(this, "sdkError", 7);
     this.searchContacts = createEvent(this, "searchContacts", 7);
     this.levels = [];
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
     this.containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;
@@ -38,22 +38,25 @@ const VerdocsSend$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.rolesCompleted = {};
   }
   async componentWillLoad() {
-    var _a, _b, _c, _d, _e, _f;
-    const loadSessionResult = this.endpoint.loadSession();
-    if (!this.templateId) {
-      console.log(`[SEND] Missing required template ID ${this.templateId}`);
-      return;
-    }
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     try {
-      console.log(`[SEND] Loading template ${this.templateId}`);
-      await loadTemplate(this.endpoint, this.templateId, true);
-      if (!((_a = state.template) === null || _a === void 0 ? void 0 : _a.is_sendable)) {
+      const loadSessionResult = this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.log(`[SEND] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[SEND] Unable to start builder session, must be authenticated');
+        return;
+      }
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+      if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable)) {
         console.warn(`[SEND] Template is not sendable`, this.templateId);
       }
-      if ((_b = state.template) === null || _b === void 0 ? void 0 : _b.roles) {
+      if ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles) {
         const rolesAtLevel = {};
         this.rolesCompleted = {};
-        state.template.roles.forEach(role => {
+        (_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.roles.forEach(role => {
           const level = role.sequence - 1;
           rolesAtLevel[level] || (rolesAtLevel[level] = []);
           const id = `r-${level}-${rolesAtLevel[level].length}`;
@@ -63,18 +66,18 @@ const VerdocsSend$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
         this.levels.sort((a, b) => a - b);
       }
+      if ((_g = loadSessionResult === null || loadSessionResult === void 0 ? void 0 : loadSessionResult.session) === null || _g === void 0 ? void 0 : _g.profile) {
+        this.sessionContacts.push({
+          id: loadSessionResult.session.profile.id,
+          name: `${loadSessionResult.session.profile.first_name} ${loadSessionResult.session.profile.last_name}`,
+          email: loadSessionResult.session.profile.email,
+          phone: loadSessionResult.session.profile.phone,
+        });
+      }
     }
     catch (e) {
-      console.log('[SEND] Error loading template', e);
-      (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
-    }
-    if ((_f = loadSessionResult.session) === null || _f === void 0 ? void 0 : _f.profile) {
-      this.sessionContacts.push({
-        id: loadSessionResult.session.profile.id,
-        name: `${loadSessionResult.session.profile.first_name} ${loadSessionResult.session.profile.last_name}`,
-        email: loadSessionResult.session.profile.email,
-        phone: loadSessionResult.session.profile.phone,
-      });
+      console.log('[SEND] Error with preview session', e);
+      (_h = this.sdkError) === null || _h === void 0 ? void 0 : _h.emit(new SDKError(e.message, (_j = e.response) === null || _j === void 0 ? void 0 : _j.status, (_k = e.response) === null || _k === void 0 ? void 0 : _k.data));
     }
   }
   getLevelIcon(level) {
@@ -98,9 +101,9 @@ const VerdocsSend$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.showPickerForId = role.id;
   }
   handleSend(e) {
-    var _a;
+    var _a, _b, _c;
     e.stopPropagation();
-    (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit({ roles: Object.values(this.rolesCompleted), name: state.template.name, template_id: this.templateId });
+    (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit({ roles: Object.values(this.rolesCompleted), name: (_c = (_b = this.store) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name, template_id: this.templateId });
   }
   handleCancel(e) {
     var _a;
@@ -108,11 +111,11 @@ const VerdocsSend$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
   render() {
-    var _a, _b;
-    const roleNames = (((_a = state.template) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name) || [];
+    var _a, _b, _c, _d;
+    const roleNames = (((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) || []).map(role => role.name) || [];
     const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
     const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-    return (h(Host, { class: { sendable: (_b = state.template) === null || _b === void 0 ? void 0 : _b.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
+    return (h(Host, { class: { sendable: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
       var _a, _b, _c, _d, _e, _f;
       const unknown = !role.email;
       return unknown ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))));

package/dist/components/verdocs-sign.js

@@ -3,7 +3,7 @@ import { g as getSigningSession, t as throttledGetEnvelope, u as updateEnvelopeF
 import { R as RecipientStates } from './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators.js';
-import { f as fullNameToInitials, i as integerSequence } from './Primitives.js';
+import { f as fullNameToInitials, i as integerSequence, d as defineCustomElement$2 } from './verdocs-view2.js';
 import { s as saveAttachment, u as updateDocumentFieldValue, a as getRoleIndex, r as renderDocumentField, b as getFieldId } from './utils.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
@@ -12,7 +12,6 @@ import { d as defineCustomElement$6 } from './verdocs-dropdown2.js';
 import { d as defineCustomElement$5 } from './verdocs-envelope-document-page2.js';
 import { d as defineCustomElement$4 } from './verdocs-loader2.js';
 import { d as defineCustomElement$3 } from './verdocs-ok-dialog2.js';
-import { d as defineCustomElement$2 } from './verdocs-view2.js';
 
 var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }

package/dist/components/verdocs-template-attachments.js

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { s as state } from './templateStore.js';
-import { l as loadTemplate } from './Templates.js';
+import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$3 } from './verdocs-component-error2.js';
 import { d as defineCustomElement$2 } from './verdocs-loader2.js';
@@ -16,41 +15,51 @@ const VerdocsTemplateAttachments$1 = /*@__PURE__*/ proxyCustomElement(class exte
     this.__registerHost();
     this.close = createEvent(this, "close", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
-    this.loading = true;
   }
   async componentWillLoad() {
     var _a, _b, _c;
     try {
       this.endpoint.loadSession();
-      await loadTemplate(this.endpoint, this.templateId);
-      this.loading = false;
+      if (!this.templateId) {
+        console.log(`[ROLES] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[ROLES] Unable to start builder session, must be authenticated');
+        return;
+      }
+      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+      this.endpoint.loadSession();
     }
     catch (e) {
-      console.log('[TEMPLATE NAME] Error loading template', e);
-      this.loading = false;
+      console.log('[TEMPLATE ATTACHMENTS] Error loading template', 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));
     }
   }
   render() {
+    var _a, _b;
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
-    if (this.loading) {
+    const templateState = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state;
+    if (!templateState.isLoaded) {
       return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
     }
     // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-    if (!this.endpoint.session || !state.template) {
+    // Checking
+    if (!this.endpoint.session || !templateState.profile_id) {
       return h(Host, { class: "empty" });
     }
-    return (h(Host, null, h("h5", null, "Attachments"), state.template.template_documents.map(document => (h("div", { class: "attachment" }, h("span", { innerHTML: FileIcon }), document.name, " (", document.page_numbers, " page", document.page_numbers > 1 ? 's' : '', ")")))));
+    return (h(Host, null, h("h5", null, "Attachments"), (_b = this.store) === null || _b === void 0 ? void 0 :
+      _b.state.template_documents.map(document => (h("div", { class: "attachment" }, h("span", { innerHTML: FileIcon }), document.name, " (", document.page_numbers, " page", document.page_numbers > 1 ? 's' : '', ")")))));
   }
   static get style() { return verdocsTemplateAttachmentsCss; }
 }, [0, "verdocs-template-attachments", {
     "endpoint": [16],
-    "templateId": [1, "template-id"],
-    "loading": [32]
+    "templateId": [1, "template-id"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/verdocs-template-create2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
-import { c as createTemplate, g as getTemplate } from './Templates2.js';
+import { c as createTemplate, a as getTemplate } from './Templates.js';
 import { c as createTemplateDocument } from './TemplateDocuments.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { S as SDKError } from './errors.js';

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

@@ -1,10 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as commonjsGlobal } from './_commonjsHelpers.js';
 import './Types.js';
 import { u as updateField, d as deleteField } from './Fields.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { c as commonjsGlobal } from './_commonjsHelpers.js';
-import { s as state } from './templateStore.js';
-import { l as loadTemplate } from './Templates.js';
+import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$6 } from './verdocs-button2.js';
 import { d as defineCustomElement$5 } from './verdocs-checkbox2.js';
@@ -215,6 +214,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     this.delete = createEvent(this, "delete", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
     this.fieldName = '';
@@ -234,11 +234,11 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     this.showingHelp = false;
   }
   async componentWillLoad() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     try {
       this.endpoint.loadSession();
       if (!this.templateId) {
-        console.error(`[FIELD PROPERTIES] Missing required template ID`);
+        console.log(`[ROLES] Missing required template ID ${this.templateId}`);
         return;
       }
       if (!this.fieldName) {
@@ -246,11 +246,11 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
         return;
       }
       if (!this.endpoint.session) {
-        console.error('[FIELD PROPERTIES] Unable to start builder session, must be authenticated');
+        console.log('[ROLES] Unable to start builder session, must be authenticated');
         return;
       }
-      await loadTemplate(this.endpoint, this.templateId);
-      const field = state.fields.find(field => field.name === this.fieldName);
+      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+      const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
       if (!field) {
         console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in template`);
       }
@@ -261,31 +261,31 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
       this.required = field.required;
       this.fieldType = field.type;
       this.placeholder = field.label; // TODO: Talk about how we want to handle labels/placeholders
-      this.defaultValue = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.value) || '';
+      this.defaultValue = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.value) || '';
       this.setting = field.setting || {};
-      this.options = ((_b = field.setting) === null || _b === void 0 ? void 0 : _b.options) || [];
+      this.options = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.options) || [];
       this.dirty = false;
       this.loading = false;
     }
     catch (e) {
       console.log('[FIELD PROPERTIES] Error loading template', e);
       this.loading = false;
-      (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
+      (_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));
     }
   }
   handleCancel(e) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     e.stopPropagation();
-    const field = state.fields.find(field => field.name === this.fieldName);
+    const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
     if (field) {
       this.name = field.name;
       this.roleName = field.role_name;
       this.required = field.required;
       this.placeholder = field.label; // TODO: Talk about how we want to handle labels/placeholders
-      this.defaultValue = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.result) || '';
+      this.defaultValue = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.result) || '';
     }
     this.dirty = false;
-    (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+    (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
   }
   handleSave(e) {
     e.stopPropagation();
@@ -308,9 +308,9 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     }
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       this.dirty = false;
-      const field = state.fields.find(field => field.name === this.fieldName);
+      const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
       if (field) {
         field.name = this.name;
         field.role_name = this.roleName;
@@ -321,8 +321,8 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
           field.setting.options = this.options;
         }
       }
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
-      (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+      (_c = this.settingsChanged) === null || _c === void 0 ? void 0 : _c.emit({ fieldName: this.fieldName });
+      (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
     })
       .catch(() => {
       console.log('Field update failed', e);
@@ -355,9 +355,9 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     newProperties.setting.options = this.options;
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       this.dirty = false;
-      const field = state.fields.find(field => field.name === this.fieldName);
+      const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
       if (field) {
         field.name = this.name;
         field.role_name = this.roleName;
@@ -365,9 +365,10 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
         field.label = this.placeholder;
         field.setting.result = this.defaultValue;
       }
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
-      (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
-      state.updateCount++;
+      (_c = this.settingsChanged) === null || _c === void 0 ? void 0 : _c.emit({ fieldName: this.fieldName });
+      (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
+      // TODO: Verify this
+      // TemplateStore.updateCount++;
     })
       .catch(() => {
       console.log('Field update failed', e);
@@ -378,13 +379,13 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     if (window.confirm('Are you sure you wish to remove this field? This action cannot be undone.')) {
       deleteField(this.endpoint, this.templateId, this.fieldName)
         .then(r => {
-        var _a;
+        var _a, _b, _c, _d, _e;
         console.log('Field deleted', r);
-        state.fields = [...state.fields.filter(field => field.name !== this.fieldName)];
-        state.template.roles.forEach(role => {
+        this.store.state.fields = [...(_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.filter(field => field.name !== this.fieldName)];
+        (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.forEach(role => {
           role.fields = [...role.fields.filter(field => field.name !== this.fieldName)];
         });
-        (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
+        (_e = this.delete) === null || _e === void 0 ? void 0 : _e.emit({ templateId: this.templateId, roleName: this.roleName });
       })
         .catch(e => {
         console.log('Deletion error', e);
@@ -392,11 +393,12 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     }
   }
   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." })));
     }
     // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-    if (!this.endpoint.session || !state.template) {
+    if (!this.endpoint.session || !((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
       return h(Host, { class: "empty" });
     }
     if (this.helpText && this.showingHelp) {
@@ -407,7 +409,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
       placeholder: "Field Name...", onInput: (e) => {
         this.name = e.target.value;
         this.dirty = true;
-      } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: state.template.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
+      } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
         this.roleName = e.target.value;
         this.dirty = true;
       } })), ['textbox', 'textarea'].includes(this.type) && (h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.name, autocomplete: "off",