@verdocs/web-sdk 2.3.25 → 2.3.26

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

@@ -8,25 +8,6 @@ import { getFieldSettings } from '../../../utils/utils';
  */
 export class VerdocsFieldPayment {
   constructor() {
-    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 = '';
@@ -65,36 +46,6 @@ export class VerdocsFieldPayment {
       }
     }
   }
-  // [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) {
@@ -109,7 +60,7 @@ export class VerdocsFieldPayment {
   }
   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/collection/components/fields/verdocs-field-radio-button-group/verdocs-field-radio-button.js

@@ -41,7 +41,7 @@ export class VerdocsFieldRadioButton {
   }
   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/collection/components/fields/verdocs-field-signature/verdocs-field-signature.js

@@ -65,7 +65,7 @@ export class VerdocsFieldSignature {
   }
   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/collection/components/fields/verdocs-field-textarea/verdocs-field-textarea.js

@@ -74,7 +74,7 @@ export class VerdocsFieldTextarea {
     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);
@@ -91,7 +91,7 @@ export class VerdocsFieldTextarea {
   }
   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/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.js

@@ -74,7 +74,7 @@ export class VerdocsFieldTextbox {
     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);
@@ -92,7 +92,7 @@ export class VerdocsFieldTextbox {
   }
   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/collection/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.js

@@ -43,7 +43,7 @@ export class VerdocsFieldTimestamp {
   }
   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/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -2,7 +2,7 @@ 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 { createTemplateFieldStore } from '../../../utils/TemplateFieldStore';
+import { createTemplateFieldStore, updateStoreField } from '../../../utils/TemplateFieldStore';
 import { getTemplateStore } from '../../../utils/TemplateStore';
 import { SDKError } from '../../../utils/errors';
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
@@ -15,7 +15,6 @@ export class VerdocsTemplateFieldProperties {
   constructor() {
     this.templateStore = null;
     this.fieldStore = null;
-    this.watcher = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
     this.fieldName = '';
@@ -56,7 +55,7 @@ export class VerdocsTemplateFieldProperties {
       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`);
@@ -64,25 +63,6 @@ export class VerdocsTemplateFieldProperties {
       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;
@@ -109,7 +89,7 @@ export class VerdocsTemplateFieldProperties {
   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;
@@ -149,11 +129,19 @@ export class VerdocsTemplateFieldProperties {
     }
     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(() => {
@@ -187,29 +175,25 @@ export class VerdocsTemplateFieldProperties {
     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 => {
@@ -224,7 +208,7 @@ export class VerdocsTemplateFieldProperties {
       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) {
@@ -333,7 +317,7 @@ export class VerdocsTemplateFieldProperties {
       },
       "fieldName": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",

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

@@ -5,7 +5,7 @@ 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 { getRoleNames, getTemplateStore } from '../../../utils/TemplateStore';
-import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
+import { getTemplateFieldStore, updateStoreField } from '../../../utils/TemplateFieldStore';
 import { getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
 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>';
@@ -101,33 +101,12 @@ export class VerdocsTemplateFields {
   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);
@@ -147,9 +126,7 @@ export class VerdocsTemplateFields {
     // 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));
   }
@@ -191,9 +168,10 @@ export class VerdocsTemplateFields {
     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;
@@ -236,10 +214,10 @@ export class VerdocsTemplateFields {
     }
     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;
@@ -247,7 +225,7 @@ export class VerdocsTemplateFields {
     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.
@@ -352,10 +330,9 @@ export class VerdocsTemplateFields {
       }
       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/collection/components/templates/verdocs-template-role-properties/verdocs-template-role-properties.js

@@ -2,7 +2,7 @@ import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { deleteRole, updateRole } from '@verdocs/js-sdk/Templates/Roles';
 import { h, Host } from '@stencil/core';
 import { TemplateSenderTypes } from '@verdocs/js-sdk/Templates/Types';
-import { createTemplateRoleStore } from '../../../utils/TemplateRoleStore';
+import { createTemplateRoleStore, deleteStoreRole, updateStoreRole } from '../../../utils/TemplateRoleStore';
 import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 import { getTemplateStore } from '../../../utils/TemplateStore';
 import { SDKError } from '../../../utils/errors';
@@ -43,7 +43,7 @@ export class VerdocsTemplateRoleProperties {
       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;
@@ -62,7 +62,7 @@ export class VerdocsTemplateRoleProperties {
   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;
@@ -90,10 +90,7 @@ export class VerdocsTemplateRoleProperties {
       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 => {
@@ -105,9 +102,9 @@ export class VerdocsTemplateRoleProperties {
     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 => {
@@ -116,7 +113,7 @@ export class VerdocsTemplateRoleProperties {
     }
   }
   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/collection/components/templates/verdocs-template-roles/verdocs-template-roles.js

@@ -4,7 +4,7 @@ import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { createRole, updateRole } from '@verdocs/js-sdk/Templates/Roles';
 import { TemplateSenderTypes } from '@verdocs/js-sdk/Templates/Types';
 import { h, Fragment, Host } from '@stencil/core';
-import { getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
+import { getTemplateRoleStore, updateStoreRole } from '../../../utils/TemplateRoleStore';
 import { getTemplateStore } from '../../../utils/TemplateStore';
 import { getRoleIndex } from '../../../utils/utils';
 import { SDKError } from '../../../utils/errors';
@@ -68,6 +68,7 @@ export class VerdocsTemplateRoles {
           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);
@@ -75,7 +76,8 @@ export class VerdocsTemplateRoles {
           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');
@@ -89,22 +91,17 @@ export class VerdocsTemplateRoles {
     });
     interact('.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');
@@ -129,9 +126,7 @@ export class VerdocsTemplateRoles {
     (_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;
     });
   }
@@ -151,12 +146,13 @@ export class VerdocsTemplateRoles {
   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.
@@ -175,13 +171,13 @@ export class VerdocsTemplateRoles {
   }
   // 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) {
@@ -200,7 +196,7 @@ export class VerdocsTemplateRoles {
       .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() });
     })
@@ -228,11 +224,13 @@ export class VerdocsTemplateRoles {
     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/collection/utils/TemplateFieldStore.js

@@ -5,31 +5,42 @@ export 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;
 };
 export 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;
 };
+export 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 const deleteStoreField = (store, name) => {
+  const newFields = [...store.get('fields').filter(field => field.name !== name)];
+  store.set('fields', newFields);
+};