@verdocs/web-sdk 2.3.24 → 2.3.26

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

@@ -3,7 +3,7 @@ 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 { a as createTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore.js';
 import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$6 } from './verdocs-button2.js';
@@ -217,7 +217,6 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     this.sdkError = createEvent(this, "sdkError", 7);
     this.templateStore = null;
     this.fieldStore = null;
-    this.watcher = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
     this.fieldName = '';
@@ -258,7 +257,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
       createTemplateFieldStore(this.templateStore.state);
       this.fieldStore = await createTemplateFieldStore(this.templateStore.state);
       // 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 +265,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 +291,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 +331,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 +377,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 +410,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) {
@@ -486,7 +470,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) => {

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

@@ -4,7 +4,7 @@ import './Types.js';
 import { V as VerdocsEndpoint, b as TemplateSenderTypes } from './VerdocsEndpoint.js';
 import { u as updateRole, c as createRole, d as defineCustomElement$3 } from './verdocs-template-role-properties2.js';
 import { g as getRGBA } from './Colors.js';
-import { g as getTemplateStore, b as getTemplateRoleStore } from './TemplateStore.js';
+import { g as getTemplateStore, b as getTemplateRoleStore, u as updateStoreRole } from './TemplateStore.js';
 import { b as getRoleIndex } from './utils.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$a } from './verdocs-button2.js';
@@ -82,6 +82,7 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
           const oldX = +(e.target.getAttribute('dX') || 0);
           const oldY = +(e.target.getAttribute('dY') || 0);
           const sequence = +(e.target.dataset['sequence'] || 0);
+          const order = +(e.target.dataset['order'] || 0);
           const newX = e.dx + oldX;
           const newY = e.dy + oldY;
           e.target.setAttribute('dX', newX);
@@ -89,7 +90,8 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
           const rect = e.target.getBoundingClientRect();
           // Note: I never did figure out exactly why this is, but if we don't offset the transform
           // the dragged item is offset from the mouse cursor quite a bit.
-          e.target.style.transform = `translate(${newX + 80}px, ${newY - rect.height * sequence}px)`;
+          console.log('w', rect.width);
+          e.target.style.transform = `translate(${newX + rect.width - (order + 1)}px, ${newY - rect.height * sequence}px)`;
         }.bind(this),
         end: function handleEnd(e) {
           e.target.classList.remove('dragging');
@@ -103,22 +105,17 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
     });
     interact_min('.dropzone').dropzone({
       overlap: 0.05,
-      ondrop: async function handleDrop(event) {
+      ondrop: async function onDrop(event) {
         var _a;
+        console.log('dropped', event.target.classList);
         event.target.classList.remove('active');
         const roleName = event.relatedTarget.dataset.rolename;
         const targetSequence = +event.target.dataset.sequence;
         const targetOrder = +event.target.dataset.order;
-        const changingRole = this.roleStore.get(roleName);
-        if (changingRole) {
-          // To handle the renumbering, we update the role being moved to the new values, which will be some half-interval e.g.
-          // sequence 1.5 order 1. Then we sort/renumber the roles at each level to determine their final ordering values.
-          const newRole = { ...changingRole, sequence: targetSequence, order: targetOrder };
-          this.roleStore.set(changingRole.name, newRole);
-          await this.renumberTemplateRoles();
-          (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, roles: this.getSortedRoles() });
-          console.log('[ROLES] Updated roles', this.getSortedRoles());
-        }
+        updateStoreRole(this.roleStore, roleName, { sequence: targetSequence, order: targetOrder });
+        await this.renumberTemplateRoles();
+        console.log('[ROLES] Updated roles', this.getSortedRoles());
+        (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, roles: this.getSortedRoles() });
       }.bind(this),
       ondropactivate: e => {
         e.target.classList.add('visible');
@@ -143,9 +140,7 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
     (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit();
   }
   getSortedRoles() {
-    return Object.values(this.roleStore.state)
-      .filter(role => role !== undefined)
-      .sort((a, b) => {
+    return this.roleStore.state.roles.sort((a, b) => {
       return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
     });
   }
@@ -165,12 +160,13 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
   getRolesAtSequence(sequence) {
     // 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
-    return Object.values(this.roleStore.state).filter(role => role && role.sequence === sequence);
+    return this.roleStore.state.roles.filter(role => role && role.sequence === sequence);
   }
   // When the user drags a role around, we handle placement "between" items by assigning it a half-order number
   // e.g. 1.5 to place it between items 1 and 2, 0.5 to place it at the beginning, or last+0.5 to place it at the end.
   // Then we re-sort the list of roles and renumber them.
   renumberTemplateRoles() {
+    console.log('Renumbering roles', this.getSequenceNumbers(), JSON.stringify(this.roleStore.state));
     // Avoid dupe renumber attempts
     const renumbered = [];
     // If the user dragged an entry from below a row to above it, we end up here like [1,0]. Make sure it's [0,1] for the next operation.
@@ -189,13 +185,13 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
   }
   // Look for name conflicts, because they're UGC and can be anything, regardless of order.
   getNextRoleName() {
-    var _a;
+    console.log('Getting next role name', JSON.stringify(this.roleStore.state));
     let name = '';
-    let nextNumber = Object.keys(this.roleStore).length;
+    let nextNumber = Object.keys(this.roleStore.state).length - 1;
     do {
       nextNumber++;
       name = `Recipient ${nextNumber}`;
-    } while (!name || Object.values((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.state).some(role => role && role.name === name));
+    } while (!name || this.roleStore.state.roles.some(role => role && role.name === name));
     return name;
   }
   callCreateRole(name, sequence, order) {
@@ -214,7 +210,7 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
       .then(async (r) => {
       var _a;
       console.log('[ROLES] Created role', r);
-      this.roleStore.set(r.name, r);
+      this.roleStore.set('roles', [...this.roleStore.state.roles, r]);
       await this.renumberTemplateRoles();
       (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'added', endpoint: this.endpoint, templateId: this.templateId, roles: this.getSortedRoles() });
     })
@@ -242,11 +238,13 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
     if (!((_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
       return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
     }
+    console.log('Rendering roles', this.roleStore.get('roles'));
     const roleNames = this.getRoleNames();
     const sequences = this.getSequenceNumbers();
+    console.log('Rendering', roleNames, sequences);
     return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Roles and Workflow"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "row-roles" }, h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[(_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.sender], ' ', h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })))), h("div", { class: "row add-sequence", "data-sequence": 0 }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), sequences.map(sequence => (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), this.getRolesAtSequence(sequence).map(role => {
       const unknown = !role.email;
-      return unknown ? (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name, "data-sequence": sequence }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (h(Fragment, null, h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name, "data-sequence": sequence }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.full_name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
+      return unknown ? (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (h(Fragment, null, h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.full_name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
     }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), sequences.length > 0 && (h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), h("div", { class: "row", "data-sequence": sequences.length + 1 }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, sequences.length + 1) }))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-roles" }, h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
         this.showingRoleDialog = null;
       }, onDelete: async () => {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-01-15T05:11:36",
+  "timestamp": "2024-01-16T00:56:36",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -8747,7 +8747,7 @@
         {
           "name": "fieldName",
           "type": "string",
-          "mutable": false,
+          "mutable": true,
           "attr": "field-name",
           "reflectToAttr": false,
           "docs": "The field to configure.",

package/dist/esm/{EnvelopeStore-17c0bc52.js → EnvelopeStore-24a1f38f.js}

@@ -8,7 +8,6 @@ const createEnvelopeStore = (envelopeId) => {
     isLoaded: false,
     isError: false,
     error: null,
-    updateCount: 0,
     roleNames: [],
     id: envelopeId,
     template_id: '',
@@ -73,7 +72,6 @@ const getEnvelopeStore = async (endpoint, envelopeId, forceReload = false) => {
       throw e;
     }
     store.state.isLoading = false;
-    store.state.updateCount++;
   }
   return store;
 };

package/dist/esm/{TemplateFieldStore-295f240e.js → TemplateFieldStore-0516a7ec.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 { createTemplateFieldStoreFromEnvelope as a, createTemplateFieldStore as c, getTemplateFieldStore as g };
+export { createTemplateFieldStoreFromEnvelope as a, createTemplateFieldStore as c, getTemplateFieldStore as g, updateStoreField as u };

package/dist/esm/{TemplateStore-1ee18675.js → TemplateStore-618fb47f.js}

@@ -1,6 +1,6 @@
 import { c as createStore } from './index-4439b0d1.js';
 import { g as getTemplate, T as TemplateSenderTypes } from './VerdocsEndpoint-56fa3371.js';
-import { c as createTemplateFieldStore } from './TemplateFieldStore-295f240e.js';
+import { c as createTemplateFieldStore } from './TemplateFieldStore-0516a7ec.js';
 
 const templateRoleStores = {};
 const getTemplateRoleStore = (templateId) => templateRoleStores[templateId];
@@ -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();
@@ -28,7 +41,6 @@ const createTemplateStore = (templateId) => {
     isLoaded: false,
     isError: false,
     error: null,
-    updateCount: 0,
     roleNames: [],
     id: templateId,
     name: '',
@@ -99,10 +111,9 @@ const getTemplateStore = async (endpoint, templateId, forceReload = false) => {
       throw e;
     }
     store.state.isLoading = false;
-    store.state.updateCount++;
   }
   return store;
 };
 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/esm/ipc-test.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, h, H as Host } from './index-172625c5.js';
 import './Types-5f31149e.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-56fa3371.js';
-import { g as getTemplateStore } from './TemplateStore-1ee18675.js';
+import { g as getTemplateStore } from './TemplateStore-618fb47f.js';
 import './index-4439b0d1.js';
-import './TemplateFieldStore-295f240e.js';
+import './TemplateFieldStore-0516a7ec.js';
 
 const ipcTestCss = "ipc-test{max-width:800px;display:block}";