@verdocs/web-sdk 1.12.44 → 1.13.0

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

@@ -1,13 +1,13 @@
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
-import TemplateStore from '../../../utils/templateStore';
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 /**
  * Display a multi-line text input field.
  */
 export class VerdocsFieldTextarea {
   constructor() {
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -30,7 +30,7 @@ export class VerdocsFieldTextarea {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    TemplateStore.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -40,7 +40,7 @@ export class VerdocsFieldTextarea {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, settings.value);
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: TemplateStore.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -63,6 +63,24 @@ export class VerdocsFieldTextarea {
   }
   static get properties() {
     return {
+      "templateid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+        },
+        "attribute": "templateid",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "field": {
         "type": "unknown",
         "mutable": false,

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

@@ -1,7 +1,6 @@
 import interact from 'interactjs';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
-import TemplateStore from '../../../utils/templateStore';
 import { getFieldSettings } from '../../../utils/utils';
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 /**
@@ -9,6 +8,7 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
  */
 export class VerdocsFieldTextbox {
   constructor() {
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -31,7 +31,7 @@ export class VerdocsFieldTextbox {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    TemplateStore.updateCount++;
+    // TemplateStore.updateCount++;
   }
   componentDidRender() {
     interact.dynamicDrop(true);
@@ -70,7 +70,7 @@ export class VerdocsFieldTextbox {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }), this.editable && (h("div", { class: "resizer", ref: el => (this.resizeHandle = el) }, h("div", { class: "resizer-inner" }))), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: TemplateStore.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }), this.editable && (h("div", { class: "resizer", ref: el => (this.resizeHandle = el) }, h("div", { class: "resizer-inner" }))), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -93,6 +93,24 @@ export class VerdocsFieldTextbox {
   }
   static get properties() {
     return {
+      "templateid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+        },
+        "attribute": "templateid",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "field": {
         "type": "unknown",
         "mutable": false,

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

@@ -2,13 +2,13 @@ import { format } from 'date-fns';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
-import TemplateStore from '../../../utils/templateStore';
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 /**
  * Display a timestamp field.
  */
 export class VerdocsFieldTimestamp {
   constructor() {
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -31,7 +31,7 @@ export class VerdocsFieldTimestamp {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    TemplateStore.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c;
@@ -47,7 +47,7 @@ export class VerdocsFieldTimestamp {
     return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order,
       // TODO: It would really make more sense to show the date and time but the default width of 64px for this field
       // is encoded in a ton of existing entries in the database and is hard to change.
-      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: TemplateStore.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -70,6 +70,24 @@ export class VerdocsFieldTimestamp {
   }
   static get properties() {
     return {
+      "templateid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+        },
+        "attribute": "templateid",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "field": {
         "type": "unknown",
         "mutable": false,

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

@@ -1,7 +1,6 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { h, Host } from '@stencil/core';
-import TemplateStore from '../../../utils/templateStore';
-import { loadTemplate } from '../../../utils/Templates';
+import { getTemplateStore } from '../../../utils/TemplateStore';
 import { SDKError } from '../../../utils/errors';
 const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
 /**
@@ -10,35 +9,46 @@ const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
  */
 export class VerdocsTemplateAttachments {
   constructor() {
+    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 || !TemplateStore.template) {
+    // Checking
+    if (!this.endpoint.session || !templateState.profile_id) {
       return h(Host, { class: "empty" });
     }
-    return (h(Host, null, h("h5", null, "Attachments"), TemplateStore.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 is() { return "verdocs-template-attachments"; }
   static get originalStyleUrls() {
@@ -94,11 +104,6 @@ export class VerdocsTemplateAttachments {
       }
     };
   }
-  static get states() {
-    return {
-      "loading": {}
-    };
-  }
   static get events() {
     return [{
         "method": "close",

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -1,9 +1,8 @@
-import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import uuidv4 from 'uuid-browser';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { deleteField, updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
-import TemplateStore from '../../../utils/templateStore';
-import { loadTemplate } from '../../../utils/Templates';
+import { getTemplateStore } from '../../../utils/TemplateStore';
 import { SDKError } from '../../../utils/errors';
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
@@ -14,6 +13,7 @@ const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"
  */
 export class VerdocsTemplateFieldProperties {
   constructor() {
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
     this.fieldName = '';
@@ -33,11 +33,11 @@ export class VerdocsTemplateFieldProperties {
     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) {
@@ -45,11 +45,11 @@ export class VerdocsTemplateFieldProperties {
         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 = TemplateStore.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`);
       }
@@ -60,31 +60,31 @@ export class VerdocsTemplateFieldProperties {
       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 = TemplateStore.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();
@@ -107,9 +107,9 @@ export class VerdocsTemplateFieldProperties {
     }
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       this.dirty = false;
-      const field = TemplateStore.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;
@@ -120,8 +120,8 @@ export class VerdocsTemplateFieldProperties {
           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);
@@ -154,9 +154,9 @@ export class VerdocsTemplateFieldProperties {
     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 = TemplateStore.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;
@@ -164,9 +164,10 @@ export class VerdocsTemplateFieldProperties {
         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();
-      TemplateStore.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);
@@ -177,13 +178,13 @@ export class VerdocsTemplateFieldProperties {
     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);
-        TemplateStore.fields = [...TemplateStore.fields.filter(field => field.name !== this.fieldName)];
-        TemplateStore.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);
@@ -191,11 +192,12 @@ export class VerdocsTemplateFieldProperties {
     }
   }
   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 || !TemplateStore.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) {
@@ -206,7 +208,7 @@ export class VerdocsTemplateFieldProperties {
       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: TemplateStore.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",

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

@@ -3,8 +3,7 @@ import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { createField, updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
 import { defaultHeight, defaultWidth, getRoleIndex, renderDocumentField, updateCssTransform } from '../../../utils/utils';
-import TemplateStore from '../../../utils/templateStore';
-import { loadTemplate } from '../../../utils/Templates';
+import { getRoleNames, getTemplateStore } from '../../../utils/TemplateStore';
 import { SDKError } from '../../../utils/errors';
 const iconTextbox = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
 const iconTextarea = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z"/></svg>';
@@ -39,6 +38,7 @@ const menuOptions = [
 export class VerdocsTemplateFields {
   constructor() {
     this.pageHeights = {};
+    this.store = null;
     this.cachedPageInfo = {};
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
@@ -48,7 +48,7 @@ export class VerdocsTemplateFields {
     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) {
@@ -56,23 +56,17 @@ export class VerdocsTemplateFields {
         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 = TemplateStore.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() {
@@ -98,15 +92,14 @@ export class VerdocsTemplateFields {
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
     el.addEventListener('settingsChanged', () => {
-      var _a;
-      console.log('Settings', TemplateStore.fields);
+      var _a, _b, _c, _d;
       this.selectedRoleName = field.role_name;
       console.log('settings changed', this.selectedRoleName, field);
-      el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, field.role_name));
-      el.field = TemplateStore.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: TemplateStore.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 });
@@ -115,12 +108,13 @@ export class VerdocsTemplateFields {
       }
     });
     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: TemplateStore.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);
@@ -128,16 +122,17 @@ export class VerdocsTemplateFields {
     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 = TemplateStore.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(TemplateStore.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;
@@ -190,6 +185,7 @@ export class VerdocsTemplateFields {
     }
   }
   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);
@@ -203,7 +199,7 @@ export class VerdocsTemplateFields {
     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 = TemplateStore.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) {
@@ -235,14 +231,15 @@ export class VerdocsTemplateFields {
     }
   }
   generateFieldName(type, pageNumber) {
+    var _a, _b;
     let i = 1;
     let fieldName;
     do {
       fieldName = `${type}P${pageNumber}-${i}`;
       console.log('testing field', fieldName);
       i++;
-    } while (TemplateStore.fields.some(field => field.name === fieldName));
-    console.log('Will use field name', fieldName, TemplateStore.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.
@@ -253,7 +250,7 @@ export class VerdocsTemplateFields {
     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;
@@ -343,21 +340,24 @@ export class VerdocsTemplateFields {
       }
       const saved = await createField(this.endpoint, this.templateId, field);
       console.log('Saved field', saved);
-      TemplateStore.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: TemplateStore.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 (TemplateStore.loading || !TemplateStore.template) {
+    if (!((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    const pages = [...TemplateStore.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');