@verdocs/web-sdk 1.12.44 → 1.13.1

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

@@ -4,8 +4,7 @@ import './Types.js';
 import { u as updateField, c as createField } from './Fields.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { a as getRoleIndex, r as renderDocumentField, c as updateCssTransform, d as defaultWidth, e as defaultHeight } 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$4 } from './verdocs-component-error2.js';
 import { d as defineCustomElement$3 } from './verdocs-loader2.js';
@@ -47,6 +46,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.sdkError = createEvent(this, "sdkError", 7);
     this.templateUpdated = createEvent(this, "templateUpdated", 7);
     this.pageHeights = {};
+    this.store = null;
     this.cachedPageInfo = {};
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
@@ -56,7 +56,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.rerender = 1;
   }
   async componentWillLoad() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     try {
       this.endpoint.loadSession();
       if (!this.templateId) {
@@ -64,23 +64,17 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
         return;
       }
       if (!this.endpoint.session) {
-        console.log('[BUILD] Unable to start builder session, must be authenticated');
+        console.log('[FIELDS] Unable to start builder session, must be authenticated');
         return;
       }
-      try {
-        console.log(`[FIELDS] Loading template ${this.templateId}`, this.endpoint.session);
-        await loadTemplate(this.endpoint, this.templateId, true);
-        this.selectedRoleName = state.roleNames[0];
-        console.log('Starting with role', this.selectedRoleName);
-      }
-      catch (e) {
-        console.log('[FIELDS] 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));
-      }
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+      console.log(`[FIELDS] Loading template ${this.templateId}`, this.endpoint.session);
+      this.selectedRoleName = ((_d = (_c = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name) || '';
+      console.log('Starting with role', this.selectedRoleName);
     }
     catch (e) {
       console.log('[FIELDS] Error with preview session', e);
-      (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.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));
     }
   }
   componentDidRender() {
@@ -106,15 +100,14 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
     el.addEventListener('settingsChanged', () => {
-      var _a;
-      console.log('Settings', state.fields);
+      var _a, _b, _c, _d;
       this.selectedRoleName = field.role_name;
       console.log('settings changed', this.selectedRoleName, field);
-      el.setAttribute('roleindex', getRoleIndex(state.roleNames, field.role_name));
-      el.field = state.fields.find(f => f.name === field.name);
+      el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
+      el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
       this.rerender++;
       el.setAttribute('rerender', this.rerender);
-      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: state.template, event: 'updated-field' });
+      (_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: (_d = this.store) === null || _d === void 0 ? void 0 : _d.state, event: 'updated-field' });
       console.log('Re-rendering field', field.name, pageInfo.pageNumber);
       this.reRenderField(field, pageInfo.pageNumber);
       const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
@@ -123,12 +116,13 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       }
     });
     el.addEventListener('deleted', () => {
-      var _a;
+      var _a, _b;
       console.log('deleted', this, field);
       el.remove();
       this.rerender++;
-      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: state.template, event: 'updated-field' });
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
     });
+    el.setAttribute('templateid', this.templateId);
     el.setAttribute('roleindex', roleIndex);
     el.setAttribute('pageNumber', pageInfo.pageNumber);
     el.setAttribute('xScale', pageInfo.xScale);
@@ -136,16 +130,17 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     el.setAttribute('name', field.name);
   }
   handlePageRendered(e) {
+    var _a;
     const pageInfo = e.detail;
     console.log('[FIELDS] Page rendered', pageInfo.pageNumber, pageInfo);
     this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
     this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
-    const fields = state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
+    const fields = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
     fields.forEach(field => this.reRenderField(field, pageInfo.pageNumber));
   }
   reRenderField(field, pageNumber) {
     const pageInfo = this.cachedPageInfo[pageNumber];
-    const roleIndex = getRoleIndex(state.roleNames, field.role_name);
+    const roleIndex = getRoleIndex(getRoleNames(this.store), field.role_name);
     const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
     if (!el) {
       return;
@@ -198,6 +193,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
   }
   async handleMoveField(e) {
+    var _a;
     const pageNumber = e.target.getAttribute('pageNumber');
     const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
     console.log('[FIELDS] Drag ended', pageNumber, e.target);
@@ -211,7 +207,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - e.rect.width, naturalHeight - e.rect.height);
     const name = e.target.getAttribute('name');
     const option = +(e.target.getAttribute('option') || '0');
-    const field = state.fields.find(field => field.name === name);
+    const field = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.find(field => field.name === name);
     console.log('Will update', name, option, field);
     if (field) {
       switch (field.type) {
@@ -243,14 +239,15 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
   }
   generateFieldName(type, pageNumber) {
+    var _a, _b;
     let i = 1;
     let fieldName;
     do {
       fieldName = `${type}P${pageNumber}-${i}`;
       console.log('testing field', fieldName);
       i++;
-    } while (state.fields.some(field => field.name === fieldName));
-    console.log('Will use field name', fieldName, state.fields);
+    } while ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.some(field => field.name === fieldName));
+    console.log('Will use field name', fieldName, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.fields);
     return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
@@ -261,7 +258,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     return { x, y };
   }
   async handleClickPage(e, page) {
-    var _a;
+    var _a, _b, _c;
     if (this.placing) {
       console.log('Placing field', this.placing, page.sequence, e.offsetX, e.offsetY);
       const pageNumber = page.sequence;
@@ -351,21 +348,24 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       }
       const saved = await createField(this.endpoint, this.templateId, field);
       console.log('Saved field', saved);
-      state.fields.push(saved);
+      if (this.store.state) {
+        this.store.state.fields = [...(_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields, saved];
+      }
       this.placing = null;
-      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: state.template, event: 'added-field' });
+      (_b = this.templateUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: (_c = this.store) === null || _c === void 0 ? void 0 : _c.state, event: 'added-field' });
       this.handlePageRendered({ detail: this.cachedPageInfo[pageNumber] });
     }
   }
   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." })));
     }
     // TODO: Render a better error
-    if (state.loading || !state.template) {
+    if (!((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    const pages = [...state.template.pages];
+    const pages = [...(_b = this.store) === null || _b === void 0 ? void 0 : _b.state.pages];
     pages.sort((a, b) => a.sequence - b.sequence);
     return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-r": this.rerender, onSubmit: () => {
         console.log('onSubmit');

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

@@ -1,9 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
-import { u as updateTemplate } from './Templates2.js';
+import { u as updateTemplate } from './Templates.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$6 } from './verdocs-button2.js';
 import { d as defineCustomElement$5 } from './verdocs-component-error2.js';
@@ -19,54 +18,64 @@ const VerdocsTemplateName$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.__registerHost();
     this.close = createEvent(this, "close", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
     this.name = '';
     this.dirty = false;
-    this.loading = true;
   }
   async componentWillLoad() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     try {
       this.endpoint.loadSession();
-      await loadTemplate(this.endpoint, this.templateId);
-      this.loading = false;
-      this.name = state.template.name;
+      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.name = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name;
       this.dirty = false;
     }
     catch (e) {
       console.log('[TEMPLATE NAME] Error loading template', e);
-      this.loading = false;
-      (_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));
+      (_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));
     }
   }
   handleCancel(e) {
-    var _a;
+    var _a, _b, _c;
     e.stopPropagation();
-    this.name = state.template.name;
+    this.name = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name;
     this.dirty = false;
     console.log('Closing');
-    (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
+    (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
   }
   async handleSave(e) {
-    var _a;
+    var _a, _b;
     e.stopPropagation();
     await updateTemplate(this.endpoint, this.templateId, { name: this.name });
-    state.template.name = this.name;
+    if ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state) {
+      this.store.state.name = this.name;
+    }
     this.dirty = false;
     console.log('Closing');
-    (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
+    (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
   }
   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) {
+    if ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoading) {
       return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
     }
     return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("label", { htmlFor: "verdocs-template-name" }, "Template Name"), h("verdocs-text-input", { id: "verdocs-template-name", value: this.name, autocomplete: "off", placeholder: "Template Name...", onInput: (e) => {
+        var _a, _b;
         this.name = e.target.value;
-        this.dirty = this.name !== state.template.name;
+        this.dirty = this.name !== ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name);
       } }), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
   }
   static get style() { return verdocsTemplateNameCss; }
@@ -74,8 +83,7 @@ const VerdocsTemplateName$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "endpoint": [16],
     "templateId": [1, "template-id"],
     "name": [32],
-    "dirty": [32],
-    "loading": [32]
+    "dirty": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1,9 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
-import { g as getTemplate } from './Templates2.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
-import { s as state } from './templateStore.js';
 import { d as defineCustomElement$7 } from './verdocs-button2.js';
 import { d as defineCustomElement$6 } from './verdocs-checkbox2.js';
 import { d as defineCustomElement$5 } from './verdocs-component-error2.js';
@@ -20,9 +19,9 @@ const VerdocsTemplateProperties$1 = /*@__PURE__*/ proxyCustomElement(class exten
     this.exit = createEvent(this, "exit", 7);
     this.next = createEvent(this, "next", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
-    this.template = null;
     this.name = '';
     this.visibility = '';
     this.sendReminders = false;
@@ -30,24 +29,24 @@ const VerdocsTemplateProperties$1 = /*@__PURE__*/ proxyCustomElement(class exten
     this.reminderDays = '1';
   }
   async componentWillLoad() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g;
     try {
       this.endpoint.loadSession();
-      console.log(`[PROPERTIES] Loading template ${this.templateId}`);
-      const template = await getTemplate(this.endpoint, this.templateId);
-      if (!template) {
-        console.log('[PREVIEW] Unable to load template');
+      if (!this.templateId) {
+        console.log(`[PROPERTIES] Missing required template ID ${this.templateId}`);
         return;
       }
-      console.log('[PROPERTIES] Got template', template);
-      this.template = template;
-      state.template = template;
-      this.name = template.name;
-      this.sendReminders = template.reminder_id !== null;
+      if (!this.endpoint.session) {
+        console.log('[PROPERTIES] Unable to start builder session, must be authenticated');
+        return;
+      }
+      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+      this.name = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name;
+      this.sendReminders = ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.reminder_id) !== null;
     }
     catch (e) {
       console.log('[PROPERTIES] 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));
+      (_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) {
@@ -75,7 +74,6 @@ const VerdocsTemplateProperties$1 = /*@__PURE__*/ proxyCustomElement(class exten
 }, [0, "verdocs-template-properties", {
     "endpoint": [16],
     "templateId": [1, "template-id"],
-    "template": [32],
     "name": [32],
     "visibility": [32],
     "sendReminders": [32],

package/dist/components/verdocs-template-reminders.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$7 } from './verdocs-button2.js';
 import { d as defineCustomElement$6 } from './verdocs-checkbox2.js';
@@ -35,6 +34,7 @@ const VerdocsTemplateReminders$1 = /*@__PURE__*/ proxyCustomElement(class extend
     this.__registerHost();
     this.close = createEvent(this, "close", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
     this.showPlanBlocker = false;
@@ -42,57 +42,63 @@ const VerdocsTemplateReminders$1 = /*@__PURE__*/ proxyCustomElement(class extend
     this.firstReminderDays = '1';
     this.reminderDays = '1';
     this.dirty = false;
-    this.loading = true;
   }
   async componentWillLoad() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     try {
       this.endpoint.loadSession();
-      await loadTemplate(this.endpoint, this.templateId);
-      this.loading = false;
-      this.sendReminders = !!state.template.reminder_id;
+      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, true);
+      this.sendReminders = !!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.reminder_id);
       this.dirty = false;
     }
     catch (e) {
       console.log('[TEMPLATE REMINDERS] Error loading template', e);
-      this.loading = false;
-      (_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));
+      (_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));
     }
   }
   handleCancel(e) {
-    var _a;
+    var _a, _b, _c;
     e.stopPropagation();
-    this.sendReminders = !!state.template.reminder_id;
+    this.sendReminders = !!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.reminder_id);
     this.dirty = false;
-    (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
+    (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
   }
   async handleSave(e) {
-    var _a;
+    var _a, _b, _c, _d, _e;
     e.stopPropagation();
     if (this.sendReminders) {
       const params = {
         setup_time: 86400000 * +this.firstReminderDays,
         interval_time: 86400000 * +this.reminderDays,
       };
-      if (!state.template.reminder_id) {
+      if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.reminder_id)) {
         await createReminder(this.endpoint, this.templateId, params);
       }
       else {
-        await updateReminder(this.endpoint, this.templateId, state.template.reminder_id, params);
+        await updateReminder(this.endpoint, this.templateId, (_c = this.store) === null || _c === void 0 ? void 0 : _c.state.reminder_id, params);
       }
     }
     else {
-      await deleteReminder(this.endpoint, this.templateId, state.template.reminder_id);
+      await deleteReminder(this.endpoint, this.templateId, (_d = this.store) === null || _d === void 0 ? void 0 : _d.state.reminder_id);
     }
     this.dirty = false;
-    (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
+    (_e = this.close) === null || _e === void 0 ? void 0 : _e.emit();
   }
   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." })));
     }
     // 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" });
     }
     return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Reminders"), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-send-reminders" }, "Send Automatic Reminders"), h("verdocs-checkbox", { id: "verdocs-send-reminders", name: "automatic-reminders", checked: this.sendReminders, value: "on", onInput: (e) => {
@@ -110,8 +116,7 @@ const VerdocsTemplateReminders$1 = /*@__PURE__*/ proxyCustomElement(class extend
     "sendReminders": [32],
     "firstReminderDays": [32],
     "reminderDays": [32],
-    "dirty": [32],
-    "loading": [32]
+    "dirty": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
 import { V as VerdocsEndpoint, T as TemplateSenderTypes } 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$5 } from './verdocs-button2.js';
 import { d as defineCustomElement$4 } from './verdocs-checkbox2.js';
@@ -43,6 +42,7 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class ext
     this.close = createEvent(this, "close", 7);
     this.delete = createEvent(this, "delete", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
     this.roleName = '';
@@ -57,26 +57,19 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class ext
     this.allowDelegation = false;
   }
   async componentWillLoad() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     try {
       this.endpoint.loadSession();
       if (!this.templateId) {
-        console.log(`[TEMPLATE ROLE PROPERTIES] Missing required template ID ${this.templateId}`);
+        console.log(`[ROLE_PROPERTIES] Missing required template ID ${this.templateId}`);
         return;
       }
       if (!this.endpoint.session) {
-        console.log('[TEMPLATE ROLE PROPERTIES] Unable to start builder session, must be authenticated');
+        console.log('[ROLE_PROPERTIES] Unable to start builder session, must be authenticated');
         return;
       }
-      try {
-        console.log(`[TEMPLATE ROLE PROPERTIES] Loading template ${this.templateId}`, this.endpoint.session);
-        await loadTemplate(this.endpoint, this.templateId);
-      }
-      catch (e) {
-        console.log('[TEMPLATE ROLE PROPERTIES] 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));
-      }
-      const editingRole = state.template.roles.find(role => role.name === this.roleName);
+      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+      const editingRole = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles.find(role => role.name === this.roleName);
       if (editingRole) {
         this.name = editingRole.name;
         this.type = editingRole.type;
@@ -89,15 +82,15 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class ext
     }
     catch (e) {
       console.log('[TEMPLATE ROLE PROPERTIES] Error with preview session', e);
-      (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
+      (_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));
     }
   }
   handleCancel(e) {
-    var _a;
+    var _a, _b, _c;
     e.stopPropagation();
-    this.name = state.template.name;
+    this.name = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name;
     this.dirty = false;
-    (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
+    (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
   }
   async handleSave(e) {
     e.stopPropagation();
@@ -115,7 +108,8 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class ext
       console.log('Update result', r);
       this.saving = false;
       this.dirty = false;
-      state.template.roles.forEach(role => {
+      const newRoles = [...this.store.state.roles];
+      newRoles.forEach(role => {
         if (role.name === this.roleName) {
           role.name = this.name;
           role.type = this.type;
@@ -125,10 +119,11 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class ext
           role.delegator = this.allowDelegation;
         }
       });
+      this.store.state.roles = newRoles;
       (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
     })
       .catch(e => {
-      console.log('Uopdate error', e);
+      console.log('Update error', e);
       this.saving = false;
     });
   }
@@ -139,7 +134,7 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class ext
         .then(r => {
         var _a;
         console.log('Role deleted', r);
-        state.template.roles = [...state.template.roles.filter(role => role.name !== this.roleName)];
+        this.store.state.roles = [...this.store.state.roles.filter(role => role.name !== this.roleName)];
         (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
       })
         .catch(e => {