@verdocs/web-sdk 2.3.24 → 2.3.26

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

@@ -32,7 +32,7 @@ export class VerdocsFieldDate {
     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,
@@ -66,7 +66,7 @@ export class VerdocsFieldDate {
   // 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/collection/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.js

@@ -39,14 +39,13 @@ export class VerdocsFieldDropdown {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    // TemplateStore.updateCount++;
   }
   async componentWillLoad() {
     this.fieldStore = getTemplateFieldStore(this.templateid);
   }
   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-initial/verdocs-field-initial.js

@@ -61,11 +61,10 @@ export class VerdocsFieldInitial {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    // TemplateStore.updateCount++;
   }
   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-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) {
@@ -106,11 +57,10 @@ export class VerdocsFieldPayment {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    // TemplateStore.updateCount++;
   }
   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

@@ -35,14 +35,13 @@ export class VerdocsFieldRadioButton {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    // TemplateStore.updateCount++;
   }
   async componentWillLoad() {
     this.fieldStore = getTemplateFieldStore(this.templateid);
   }
   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

@@ -59,14 +59,13 @@ export class VerdocsFieldSignature {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    // TemplateStore.updateCount++;
   }
   async componentWillLoad() {
     this.fieldStore = getTemplateFieldStore(this.templateid);
   }
   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

@@ -39,7 +39,6 @@ export class VerdocsFieldTextarea {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    // TemplateStore.updateCount++;
   }
   async componentWillLoad() {
     this.fieldStore = getTemplateFieldStore(this.templateid);
@@ -75,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);
@@ -92,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

@@ -37,14 +37,13 @@ export class VerdocsFieldTimestamp {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    // TemplateStore.updateCount++;
   }
   async componentWillLoad() {
     this.fieldStore = getTemplateFieldStore(this.templateid);
   }
   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) => {