@verdocs/web-sdk 2.3.25 → 2.3.27

package/dist/collection/utils/TemplateRoleStore.js

@@ -5,15 +5,28 @@ export const createTemplateRoleStore = (template) => {
   let store = getTemplateRoleStore(template.id);
   if (!store) {
     console.log('Creating template role store for template', template.id);
-    store = createStore({});
+    store = createStore({ roles: [] });
     templateRoleStores[template.id] = store;
   }
   else {
     console.log('Resetting template role store for template', template.id);
     store.reset();
   }
-  template.roles.forEach(role => {
-    store.set(role.name, role);
-  });
+  store.set('roles', [...template.roles]);
   return store;
 };
+export const updateStoreRole = (store, name, newRoleData) => {
+  const newRoles = [
+    ...store.get('roles').map(role => {
+      if (role.name !== name) {
+        return role;
+      }
+      return { ...role, ...newRoleData };
+    }),
+  ];
+  store.set('roles', newRoles);
+};
+export const deleteStoreRole = (store, name) => {
+  const newRoles = [...store.get('roles').filter(field => field.name !== name)];
+  store.set('roles', newRoles);
+};

package/dist/components/TemplateFieldStore.js

@@ -6,33 +6,40 @@ const createTemplateFieldStore = (template) => {
   let store = getTemplateFieldStore(template.id);
   if (!store) {
     console.log('Creating template field store for template', template.id);
-    store = createStore({});
+    store = createStore({ fields: [] });
     templateFieldStores[template.id] = store;
   }
   else {
     console.log('Resetting template field store for template', template.id);
     store.reset();
   }
-  template.fields.forEach(field => {
-    store.set(field.name, field);
-  });
+  store.set('fields', [...template.fields]);
   return store;
 };
 const createTemplateFieldStoreFromEnvelope = (envelope) => {
   let store = getTemplateFieldStore(envelope.template_id);
   if (!store) {
     console.log('Creating field store for envelope', envelope.id, envelope.template_id);
-    store = createStore({});
+    store = createStore({ fields: [] });
     templateFieldStores[envelope.template_id] = store;
   }
   else {
     console.log('Resetting field store for envelope', envelope.id, envelope.template_id);
     store.reset();
   }
-  envelope.fields.forEach(field => {
-    store.set(field.name, field);
-  });
+  store.set('fields', [...envelope.fields]);
   return store;
 };
+const updateStoreField = (store, name, newFieldData) => {
+  const newFields = [
+    ...store.get('fields').map(field => {
+      if (field.name !== name) {
+        return field;
+      }
+      return { ...field, ...newFieldData };
+    }),
+  ];
+  store.set('fields', newFields);
+};
 
-export { createTemplateFieldStore as a, createTemplateFieldStoreFromEnvelope as c, getTemplateFieldStore as g };
+export { createTemplateFieldStore as a, createTemplateFieldStoreFromEnvelope as c, getTemplateFieldStore as g, updateStoreField as u };

package/dist/components/TemplateStore.js

@@ -8,18 +8,31 @@ const createTemplateRoleStore = (template) => {
   let store = getTemplateRoleStore(template.id);
   if (!store) {
     console.log('Creating template role store for template', template.id);
-    store = createStore({});
+    store = createStore({ roles: [] });
     templateRoleStores[template.id] = store;
   }
   else {
     console.log('Resetting template role store for template', template.id);
     store.reset();
   }
-  template.roles.forEach(role => {
-    store.set(role.name, role);
-  });
+  store.set('roles', [...template.roles]);
   return store;
 };
+const updateStoreRole = (store, name, newRoleData) => {
+  const newRoles = [
+    ...store.get('roles').map(role => {
+      if (role.name !== name) {
+        return role;
+      }
+      return { ...role, ...newRoleData };
+    }),
+  ];
+  store.set('roles', newRoles);
+};
+const deleteStoreRole = (store, name) => {
+  const newRoles = [...store.get('roles').filter(field => field.name !== name)];
+  store.set('roles', newRoles);
+};
 
 const createTemplateStore = (templateId) => {
   const now = new Date().toISOString();
@@ -103,4 +116,4 @@ const getTemplateStore = async (endpoint, templateId, forceReload = false) => {
 };
 const getRoleNames = (store) => { var _a; return (((_a = store === null || store === void 0 ? void 0 : store.state) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name); };
 
-export { getRoleNames as a, getTemplateRoleStore as b, createTemplateRoleStore as c, getTemplateStore as g };
+export { getRoleNames as a, getTemplateRoleStore as b, createTemplateRoleStore as c, deleteStoreRole as d, getTemplateStore as g, updateStoreRole as u };

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

@@ -69,7 +69,7 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
   }
   render() {
     var _a, _b;
-    const field = this.fieldStore.get(this.fieldname);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     if (!field) {
       return h(Fragment, null);
     }

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

@@ -52,7 +52,7 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   render() {
     var _a, _b, _c, _d;
-    const field = this.fieldStore.get(this.fieldname);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     if (!field) {
       return h(Fragment, null);
     }

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

@@ -2593,7 +2593,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.fieldStore = getTemplateFieldStore(this.templateid);
   }
   componentDidLoad() {
-    const field = this.fieldStore.get(this.fieldname);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     const { result } = getFieldSettings(field);
     flatpickr('#' + this.containerId, {
       positionElement: this.el,
@@ -2627,7 +2627,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
   render() {
     var _a, _b;
-    const field = this.fieldStore.get(this.fieldname);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     if (!field) {
       return h(Fragment, null);
     }

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

@@ -57,7 +57,7 @@ const VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   render() {
     var _a, _b;
-    const field = this.fieldStore.get(this.fieldname);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     if (!field) {
       return h(Fragment, null);
     }

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

@@ -80,7 +80,7 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   render() {
     var _a, _b;
-    const field = this.fieldStore.get(this.fieldname);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     if (!field) {
       return h(Fragment, null);
     }

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

@@ -13,25 +13,6 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.initialComplete = createEvent(this, "initialComplete", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
-    this._fields = [];
-    // envelopeFieldsFormGroup: FormGroup;
-    this.signatureFile = null;
-    this.initialFile = null;
-    this.focusOrderNumber = -1;
-    this.focusFieldName = '';
-    this.activeElement = null;
-    this.showError = {
-      pageNum: -1,
-      fieldIndex: -1,
-      type: null,
-    };
-    this.dialogOpened = false;
-    this.closeAllErrors = false;
-    this.fieldsMap = {};
-    this.fieldsForCurrentSigner = [];
-    this.fontSize = 11;
-    this.averageFontWidth = 5;
-    this.requiredFields = [];
     this.fieldStore = null;
     this.templateid = '';
     this.fieldname = '';
@@ -70,36 +51,6 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       }
     }
   }
-  // [tabIndex]="field.role !== roleName ? -1 : 1"
-  // [ngStyle]="field.element_style"
-  // [value]="field.value"
-  // (click)="initiateSign(field)"
-  // (blur)="validateChanges(field)"
-  // [disabled]="field.role!==roleName"
-  // [id]="field.key"
-  // <button _ngcontent-app-root-c342="" class="envelope__field" tabindex="1" ng-reflect-ng-style="[object Object]"
-  // ng-reflect-ng-class="[object Object]" value="" id="signatureP5-1"
-  // style="height: 100%; width: 100%; background: none; font-size: 11px; border: 1px solid rgb(204, 0, 0);"> Signature </button>
-  //     bottom: 229.333
-  // px
-  // ;
-  //     left: 169.333
-  // px
-  // ;
-  //     height: 41
-  // px
-  // ;
-  //     width: 82
-  // px
-  // ;
-  //     background-color: rgba(156, 39, 176, 0.4);
-  //     transform: scale(1.33333, 1.33333);
-  // }
-  // <style>
-  // .envelope__item[_ngcontent-app-root-c342] {
-  //     position: absolute;
-  //     transform-origin: bottom left;
-  //     opacity: 1;
   async showSettingsPanel() {
     const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
     if (settingsPanel && settingsPanel.showPanel) {
@@ -114,7 +65,7 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   render() {
     var _a, _b;
-    const field = this.fieldStore.get(this.fieldname);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     if (!field) {
       return h(Fragment, null);
     }

package/dist/components/verdocs-field-radio-button.js

@@ -53,7 +53,7 @@ const VerdocsFieldRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class extends
   }
   render() {
     var _a, _b;
-    const field = this.fieldStore.get(this.fieldname);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     if (!field) {
       return h(Fragment, null);
     }

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

@@ -79,7 +79,7 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
   }
   render() {
     var _a, _b;
-    const field = this.fieldStore.get(this.fieldname);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     if (!field) {
       return h(Fragment, null);
     }

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

@@ -87,7 +87,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     Object.assign(e.target.dataset, { x, y, h });
   }
   handleResizeEnd(e) {
-    const field = this.fieldStore.get(this.fieldname);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     const newSettings = { ...getFieldSettings(field) };
     const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);
     newSettings.width = Math.round(parseFloat(e.target.style.width) / this.xscale);
@@ -104,7 +104,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   render() {
     var _a, _b;
-    const field = this.fieldStore.get(this.fieldname);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     if (!field) {
       return h(Fragment, null);
     }

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

@@ -87,7 +87,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     Object.assign(e.target.dataset, { x, y, h });
   }
   handleResizeEnd(e) {
-    const field = this.fieldStore.get(this.fieldname);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     const newSettings = { ...getFieldSettings(field) };
     const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);
     newSettings.width = Math.round(parseFloat(e.target.style.width) / this.xscale);
@@ -105,7 +105,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   render() {
     var _a, _b;
-    const field = this.fieldStore.get(this.fieldname);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     if (!field) {
       return h(Fragment, null);
     }

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

@@ -55,7 +55,7 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
   }
   render() {
     var _a, _b;
-    const field = this.fieldStore.get(this.fieldname);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
     if (!field) {
       return h(Fragment, null);
     }

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

@@ -3,8 +3,8 @@ import { c as commonjsGlobal } from './_commonjsHelpers.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { u as updateField, d as deleteField } from './Fields.js';
-import { a as createTemplateFieldStore } from './TemplateFieldStore.js';
-import { g as getTemplateStore } from './TemplateStore.js';
+import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore.js';
+import { g as getTemplateStore, b as getTemplateRoleStore } 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';
@@ -217,7 +217,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     this.sdkError = createEvent(this, "sdkError", 7);
     this.templateStore = null;
     this.fieldStore = null;
-    this.watcher = null;
+    this.roleStore = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
     this.fieldName = '';
@@ -255,10 +255,10 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
         return;
       }
       this.templateStore = await getTemplateStore(this.endpoint, this.templateId);
-      createTemplateFieldStore(this.templateStore.state);
-      this.fieldStore = await createTemplateFieldStore(this.templateStore.state);
+      this.fieldStore = await getTemplateFieldStore(this.templateId);
+      this.roleStore = await getTemplateRoleStore(this.templateId);
       // console.log('tfs', this.fieldStore?.state);
-      const field = this.fieldStore.get(this.fieldName);
+      const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
       // console.log('gf', field);
       if (!field) {
         console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
@@ -266,25 +266,6 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
       else {
         console.log('props', field);
       }
-      this.watcher = this.fieldStore.onChange(this.fieldName, (field) => {
-        console.log('Field changed', field);
-        // this.type = field.type;
-        // this.name = field.name;
-        // this.label = field.label;
-        // this.group = field.name;
-        // this.roleName = field.role_name;
-        // this.required = field.required;
-        // this.fieldType = field.type;
-        // // TODO: Talk about how we want to handle labels/placeholders
-        // this.placeholder = field.setting?.placeholder || '';
-        // this.value = field.setting?.result || '';
-        // this.leading = field.setting?.leading || 0;
-        // this.setting = field.setting || {};
-        // this.options = field.setting?.options || [];
-        // this.dirty = false;
-        // this.loading = false;
-      });
-      console.log('watcher', this.watcher);
       this.type = field.type;
       this.name = field.name;
       this.label = field.label;
@@ -311,7 +292,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
   handleCancel(e) {
     var _a, _b, _c, _d;
     e.stopPropagation();
-    const field = this.fieldStore.get(this.fieldName);
+    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
     if (field) {
       this.name = field.name;
       this.label = field.label;
@@ -351,11 +332,19 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     }
     console.log('FP: Will update', this.fieldName, newProperties);
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
-      .then(field => {
+      .then(updated => {
       var _a, _b;
       this.dirty = false;
-      this.updateField(field);
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field });
+      const newFields = [
+        ...this.fieldStore.get('fields').map(field => {
+          if (field.name !== this.fieldName) {
+            return field;
+          }
+          return { ...field, ...updated };
+        }),
+      ];
+      this.fieldStore.set('fields', newFields);
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
       .catch(() => {
@@ -389,29 +378,25 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     delete newProperties.setting.result;
     newProperties.setting.options = [...this.options];
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
-      .then(field => {
+      .then(updated => {
       var _a, _b;
       this.dirty = false;
-      this.updateField(field);
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field });
+      updateStoreField(this.fieldStore, this.fieldName, updated);
+      this.fieldName = updated.name;
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
       .catch(() => {
       console.log('Field update failed', e);
     });
   }
-  updateField(newField) {
-    const oldField = this.fieldStore.get(this.fieldName) || {};
-    console.log('Updating field', this.fieldName, newField);
-    Object.assign(oldField, newField);
-  }
   async handleDelete(e) {
     e.stopPropagation();
     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(() => {
         var _a;
-        this.fieldStore.set(this.fieldName, undefined);
+        this.fieldStore.set('fields', this.fieldStore.get('fields').filter(field => field.name !== this.fieldName));
         (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
       })
         .catch(e => {
@@ -426,7 +411,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
       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 || !this.fieldStore.get(this.fieldName)) {
+    if (!this.endpoint.session || !this.fieldStore.get('fields').some(field => field.name === this.fieldName)) {
       return h(Host, { class: "empty" });
     }
     if (this.helpText && this.showingHelp) {
@@ -443,7 +428,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
       placeholder: "Optional Label...", onInput: (e) => {
         this.label = e.target.value;
         this.dirty = true;
-      } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_a = this.templateStore.state) === null || _a === void 0 ? void 0 : _a.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: (_a = this.roleStore.state) === null || _a === void 0 ? void 0 : _a.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("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-value", label: "Value", value: this.value, autocomplete: "off", placeholder: "Pre-defined value...", onInput: (e) => {
@@ -486,7 +471,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
 }, [0, "verdocs-template-field-properties", {
     "endpoint": [16],
     "templateId": [1, "template-id"],
-    "fieldName": [1, "field-name"],
+    "fieldName": [1025, "field-name"],
     "helpText": [1, "help-text"],
     "dirty": [32],
     "loading": [32],

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

@@ -6,7 +6,7 @@ import { u as updateField, c as createField } from './Fields.js';
 import { i as integerSequence } from './Primitives.js';
 import { b as getRoleIndex, r as renderDocumentField, f as updateCssTransform, h as defaultWidth, i as defaultHeight } from './utils.js';
 import { g as getTemplateStore, b as getTemplateRoleStore, a as getRoleNames } from './TemplateStore.js';
-import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
+import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$7 } from './verdocs-button2.js';
 import { d as defineCustomElement$6 } from './verdocs-component-error2.js';
@@ -111,33 +111,12 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   async handleFieldChange(field, e, optionId) {
     console.log('[FIELDS] handleFieldChange', field, e, optionId);
   }
-  handleFieldSettingsChange(pageInfo, field, el, newFieldData, oldName) {
-    var _a, _b;
-    // handleFieldSettingsChange(pageInfo: any, field: any, roleIndex: number, el: any, newFieldData: any) {
-    console.log('[FIELDS] Field settings changed', oldName, field.name, newFieldData);
-    Object.assign(field, newFieldData);
-    el.field = newFieldData;
-    this.selectedRoleName = field.role_name;
-    el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.templateStore), field.role_name));
-    el.field = this.fieldStore.get(field.name);
-    (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
-    // We do this to avoid dupes if the field gets renamed.
-    if (field.name !== oldName) {
-      console.log('[FIELDS] Renaming field', oldName, field.name);
-      el.remove();
-      delete this.fieldStore.state[oldName];
-    }
-    else {
-      console.log('[FIELDS] Updating existing field', field.name);
-    }
-    // REMINDER: Do not access el past this point! It may have been removed from the DOM.
-    console.log('[FIELDS] Re-rendering field', field.name, pageInfo.pageNumber, field);
-    this.fieldStore.set(field.name, field);
-    this.reRenderField(field, pageInfo.pageNumber);
-  }
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
-    el.addEventListener('settingsChanged', e => this.handleFieldSettingsChange(pageInfo, field, el, e.detail.field, e.detail.fieldName));
+    el.addEventListener('settingsChanged', () => {
+      var _a, _b;
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
+    });
     el.addEventListener('deleted', () => {
       var _a, _b;
       console.log('[FIELDS] Deleted', this, field);
@@ -157,9 +136,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     // console.log('[FIELDS] Page rendered', pageInfo.pageNumber, pageInfo);
     this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
     this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
-    // Entries can be undefined when deleted because Stencil has no remove() operator yet for stores.
-    // See https://github.com/ionic-team/stencil-store/issues/23
-    const fields = Object.values(this.fieldStore.state).filter((field) => field && field.page_sequence === pageInfo.pageNumber);
+    const fields = this.fieldStore.get('fields').filter(field => field && field.page_sequence === pageInfo.pageNumber);
     console.log('[FIELDS] Page rendered', pageInfo, fields);
     fields.forEach((field) => this.reRenderField(field, pageInfo.pageNumber));
   }
@@ -201,9 +178,10 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
   }
   async handleMoveEnd(event) {
+    var _a, _b;
     const name = event.target.getAttribute('name');
     const option = +(event.target.getAttribute('option') || '0');
-    const field = this.fieldStore.get(name);
+    const field = this.fieldStore.get('fields').find(field => field.name === name);
     if (!field) {
       console.log('[FIELDS] Unable to find field', name);
       return;
@@ -246,10 +224,10 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
     console.log('[FIELDS] Will update', name, y, option, field);
     const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
-    const pageInfo = this.cachedPageInfo[pageNumber];
-    this.handleFieldSettingsChange(pageInfo, field, event.target, newFieldData, name);
+    updateStoreField(this.fieldStore, name, newFieldData);
     event.target.removeAttribute('posX');
     event.target.removeAttribute('posY');
+    (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
   }
   generateFieldName(type, pageNumber) {
     let i = 1;
@@ -257,7 +235,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     do {
       fieldName = `${type}P${pageNumber}-${i}`;
       i++;
-    } while (Object.values(this.fieldStore.state).some(field => field && field.name === fieldName));
+    } while (this.fieldStore.get('fields').some(field => field && field.name === fieldName));
     return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
@@ -362,10 +340,9 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       }
       const saved = await createField(this.endpoint, this.templateId, field);
       console.log('[FIELDS] Saved field', saved);
-      this.fieldStore.set(saved.name, saved);
+      this.fieldStore.set('fields', [...this.fieldStore.state.fields, saved]);
       this.placing = null;
       (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
-      this.reRenderField(saved, pageNumber);
     }
   }
   render() {

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
 import { V as VerdocsEndpoint, b as TemplateSenderTypes } from './VerdocsEndpoint.js';
-import { g as getTemplateStore, c as createTemplateRoleStore } from './TemplateStore.js';
+import { g as getTemplateStore, c as createTemplateRoleStore, u as updateStoreRole, d as deleteStoreRole } from './TemplateStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$5 } from './verdocs-button2.js';
@@ -74,7 +74,7 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class ext
       this.templateStore = await getTemplateStore(this.endpoint, this.templateId, false);
       this.fieldStore = getTemplateFieldStore(this.templateId);
       this.roleStore = createTemplateRoleStore(this.templateStore.state);
-      const editingRole = this.roleStore.get(this.roleName);
+      const editingRole = this.roleStore.state.roles.find(role => role.name === this.roleName);
       if (editingRole) {
         this.name = editingRole.name;
         this.type = editingRole.type;
@@ -93,7 +93,7 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class ext
   handleCancel(e) {
     var _a;
     e.stopPropagation();
-    const editingRole = this.roleStore.get(this.roleName);
+    const editingRole = this.roleStore.state.roles.find(role => role.name === this.roleName);
     if (editingRole) {
       this.name = editingRole.name;
       this.type = editingRole.type;
@@ -121,10 +121,7 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class ext
       console.log('[ROLE_PROPERTIES] Update result', r);
       this.saving = false;
       this.dirty = false;
-      this.roleStore.set(r.name, r);
-      if (this.roleName !== r.name) {
-        this.roleStore.set(this.roleName, undefined);
-      }
+      updateStoreRole(this.roleStore, this.roleName, r);
       (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
     })
       .catch(e => {
@@ -136,9 +133,9 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class ext
     e.stopPropagation();
     if (window.confirm('Are you sure you wish to remove this role? All associated fields will be removed as well. This action cannot be undone.')) {
       deleteRole(this.endpoint, this.templateId, this.roleName)
-        .then(r => {
+        .then(() => {
         var _a;
-        delete this.roleStore.state[r.name];
+        deleteStoreRole(this.roleStore, this.roleName);
         (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
       })
         .catch(e => {
@@ -147,7 +144,7 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class ext
     }
   }
   render() {
-    const hasFields = Object.values(this.fieldStore).findIndex(field => field.role_name === this.roleName) !== -1;
+    const hasFields = this.fieldStore.get('fields').some(field => field.role_name === this.roleName);
     return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { class: "dialog" }, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("verdocs-text-input", { id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
         ? 'This role has fields assigned and can no longer be renamed.'
         : 'A unique name to identify the role in the workflow. Submitted data will also be tagged with this value.', placeholder: "Role Name...", onInput: (e) => {