@verdocs/web-sdk 1.13.2 → 1.13.4

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js

@@ -131,17 +131,20 @@ export class VerdocsSign {
     }
   }
   handleClickAgree() {
+    this.submitting = true;
     envelopeRecipientAgree(this.endpoint, this.envelopeId, this.roleId, true)
       .then(() => {
       var _a;
       this.nextButtonLabel = 'Next';
       this.recipient.agreed = true;
+      this.submitting = false;
       this.agreed = true; // The server returns a recipient object but it's not "deep" so we track this locally
       (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'agreed' });
     })
       .catch(e => {
       var _a, _b, _c;
       console.log('Update failure', e);
+      this.submitting = false;
       (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
     });
   }
@@ -180,6 +183,7 @@ export class VerdocsSign {
     }
   }
   updateRecipientFieldValue(fieldName, updateResult) {
+    console.log('[SIGN] updateRecipientFieldValue', fieldName);
     this.recipient.fields.forEach(oldField => {
       if (oldField.name === fieldName) {
         oldField.settings = updateResult.settings;
@@ -190,10 +194,9 @@ export class VerdocsSign {
     });
   }
   saveFieldChange(fieldName, fields) {
+    console.log('[SIGN] updateRecipientFieldValue', fieldName);
     Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, fieldName, fields) //
-      .then(updateResult => {
-      this.updateRecipientFieldValue(fieldName, updateResult);
-    })
+      .then(updateResult => this.updateRecipientFieldValue(fieldName, updateResult))
       .catch(e => {
       var _a, _b, _c, _d, _e, _f;
       if (((_a = e.response) === null || _a === void 0 ? void 0 : _a.status) === 401 && ((_c = (_b = e.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error) === 'jwt expired') {
@@ -347,7 +350,18 @@ export class VerdocsSign {
   }
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     var _a;
-    el.addEventListener('input', () => this.checkRecipientFields());
+    el.addEventListener('input', (e) => {
+      console.log('[SIGN] onfieldInput', e.detail, e.target.value);
+      // These field types don't emit fieldChange. Should we standardize on that? We don't tap "input" for fields like
+      // text boxes because we'd be updating the field on every keystroke. We do those on blur which fires fieldChange.
+      if (e.target.name.includes('checkbox_group') || e.target.name.includes('radio_button_group')) {
+        console.log('CB', e.target);
+        this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
+      }
+      else {
+        this.checkRecipientFields();
+      }
+    });
     el.addEventListener('focusout', e => this.handleFieldChange(field, e).finally(() => this.checkRecipientFields()));
     el.addEventListener('fieldChange', e => this.handleFieldChange(field, e).finally(() => this.checkRecipientFields()));
     el.setAttribute('roleindex', roleIndex);
@@ -452,7 +466,7 @@ export class VerdocsSign {
       return (h(Host, null, h("verdocs-loader", null)));
     }
     if (this.isDone) {
-      return (h(Host, { class: { agreed: this.agreed } }, this.isDone ? (h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })) : (h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
+      return (h(Host, { class: { agreed: this.agreed } }, h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
           this.showDone = false;
           this.isDone = true;
         } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));

package/dist/collection/components/embeds/verdocs-view/verdocs-view.css

@@ -31,6 +31,16 @@ verdocs-view .document .inner {
   width: 100%;
   max-width: 1028px;
 }
+verdocs-view .loading-indicator {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  z-index: 10000;
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.7);
+}
 
 #verdocs-view-header {
   width: 100%;

package/dist/collection/components/embeds/verdocs-view/verdocs-view.js

@@ -13,7 +13,7 @@ export class VerdocsView {
     this.endpoint = VerdocsEndpoint.getDefault();
     this.envelopeId = '';
     this.headerTargetId = null;
-    this.isProcessing = false;
+    this.canceling = false;
     this.envelope = null;
     this.roleNames = [];
     this.showCancelDone = false;
@@ -61,7 +61,23 @@ export class VerdocsView {
       case 'cancel':
         // TODO: Better option for inline-flow confirmation and alert dialogs.
         if (confirm('Are you sure you wish to cancel this envelope? This action cannot be undone.')) {
-          await cancelEnvelope(this.endpoint, this.envelopeId);
+          this.canceling = true;
+          cancelEnvelope(this.endpoint, this.envelopeId)
+            .then(r => {
+            this.canceling = false;
+            console.log('[VIEW] Envelope canceled', r);
+            return throttledGetEnvelope(this.endpoint, this.envelopeId);
+          })
+            .then(env => {
+            console.log('[VIEW] Loaded new envelope details', env);
+            this.envelope = env;
+          })
+            .catch(e => {
+            var _a, _b, _c;
+            this.canceling = false;
+            console.log('[VIEW] Error canceling envelope', e);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+          });
           this.showCancelDone = true;
           (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'canceled' });
         }
@@ -136,7 +152,7 @@ export class VerdocsView {
         ] })))));
     })), this.showCancelDone && (h("verdocs-ok-dialog", { heading: "Cancelled", message: `This envelope has been cancelled successfully.`, onNext: () => {
         this.showCancelDone = false;
-      } }))));
+      } })), this.canceling && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));
   }
   static get is() { return "verdocs-view"; }
   static get originalStyleUrls() {
@@ -212,7 +228,7 @@ export class VerdocsView {
   }
   static get states() {
     return {
-      "isProcessing": {},
+      "canceling": {},
       "envelope": {},
       "roleNames": {},
       "showCancelDone": {}

package/dist/collection/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.css

@@ -1,10 +1,8 @@
 @charset "UTF-8";
 verdocs-field-checkbox {
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  position: relative;
-  background-color: transparent;
+  line-height: 18px;
   transform-origin: bottom left;
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
 }
 verdocs-field-checkbox.disabled {
   opacity: 0.5;
@@ -14,14 +12,17 @@ verdocs-field-checkbox label > input[type=checkbox] {
 }
 verdocs-field-checkbox label > input[type=checkbox] + *::before {
   content: "";
-  position: absolute;
-  display: block;
-  top: 1px;
-  left: 1px;
-  width: 10px;
-  height: 10px;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  line-height: 18px;
   border-radius: 2px;
-  border: 1px solid rgba(0, 0, 0, 0.7);
+  border-style: solid;
+  margin-right: 0.5rem;
+  border-width: 0.1rem;
+  display: inline-block;
+  vertical-align: bottom;
+  border-color: #aeb4bf;
 }
 verdocs-field-checkbox label > input[type=checkbox]:checked + * {
   color: #55bc81;

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

@@ -39,7 +39,7 @@ export class VerdocsFieldCheckbox {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, option.checked ? '✓' : '☐');
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { name: this.field.name, type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

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

@@ -62,7 +62,7 @@ export class VerdocsFieldDate {
       const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), 'PP') : '';
       return h(Host, { class: { done: this.done } }, formatted);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { name: this.field.name, type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

package/dist/collection/components/fields/verdocs-field-radio-button-group/verdocs-field-radio-button.js

@@ -43,7 +43,7 @@ export class VerdocsFieldRadioButton {
     if (this.done) {
       return (h(Host, { class: { done: this.done }, style: { maxWidth: '10px' } }, h("span", { innerHTML: !!option.selected ? RadioIconSelected : RadioIconUnselected })));
     }
-    return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", value: option.id, tabIndex: settings.order, name: this.field.name, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", name: this.field.name, value: option.id, tabIndex: settings.order, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

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

@@ -40,7 +40,7 @@ export class VerdocsFieldTextarea {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, settings.value);
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, name: this.field.name, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

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

@@ -70,7 +70,7 @@ export class VerdocsFieldTextbox {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }), this.editable && (h("div", { class: "resizer", ref: el => (this.resizeHandle = el) }, h("div", { class: "resizer-inner" }))), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", name: this.field.name, placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }), this.editable && (h("div", { class: "resizer", ref: el => (this.resizeHandle = el) }, h("div", { class: "resizer-inner" }))), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

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

@@ -107,21 +107,11 @@ export class VerdocsTemplateFieldProperties {
     }
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
-      var _a, _b, _c, _d;
+      var _a, _b;
       this.dirty = false;
-      const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
-      if (field) {
-        field.name = this.name;
-        field.role_name = this.roleName;
-        field.required = this.required;
-        field.label = this.placeholder;
-        field.setting.result = this.defaultValue;
-        if (field.setting.options) {
-          field.setting.options = this.options;
-        }
-      }
-      (_c = this.settingsChanged) === null || _c === void 0 ? void 0 : _c.emit({ fieldName: this.fieldName });
-      (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
+      this.updateField();
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
+      (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
       .catch(() => {
       console.log('Field update failed', e);
@@ -150,28 +140,36 @@ export class VerdocsTemplateFieldProperties {
         x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
         y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
       });
-    newProperties.setting = this.setting;
-    newProperties.setting.options = this.options;
+    newProperties.setting = { ...this.setting };
+    delete newProperties.setting.result;
+    newProperties.setting.options = [...this.options];
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
-      var _a, _b, _c, _d;
+      var _a, _b;
       this.dirty = false;
-      const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
-      if (field) {
+      this.updateField();
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
+      (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+    })
+      .catch(() => {
+      console.log('Field update failed', e);
+    });
+  }
+  updateField() {
+    const newFields = [...this.store.state.fields];
+    newFields.forEach(field => {
+      if (field.name === this.fieldName) {
         field.name = this.name;
         field.role_name = this.roleName;
         field.required = this.required;
         field.label = this.placeholder;
-        field.setting.result = this.defaultValue;
+        // field.setting.result = this.defaultValue;
+        if (field.setting.options) {
+          field.setting.options = this.options;
+        }
       }
-      (_c = this.settingsChanged) === null || _c === void 0 ? void 0 : _c.emit({ fieldName: this.fieldName });
-      (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
-      // TODO: Verify this
-      // TemplateStore.updateCount++;
-    })
-      .catch(() => {
-      console.log('Field update failed', e);
     });
+    this.store.state.fields = newFields;
   }
   async handleDelete(e) {
     e.stopPropagation();

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

@@ -42,16 +42,26 @@ verdocs-template-fields #verdocs-template-fields-toolbar {
   height: 50px;
   display: flex;
   flex: 0 0 50px;
+  column-gap: 15px;
+  padding: 0 20px 0 0;
   align-items: center;
   flex-direction: row;
+  color: #f5f5fa;
   justify-content: center;
-  column-gap: 15px;
   background: #46497d;
 }
 verdocs-template-fields #verdocs-template-fields-toolbar svg {
   width: 24px;
   height: 24px;
 }
+verdocs-template-fields #verdocs-template-fields-toolbar .add-for {
+  margin: 0;
+  font-weight: 500;
+  color: #f5f5fa;
+}
+verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input {
+  margin: 0 20px 0 0;
+}
 verdocs-template-fields.placing-attachment {
   cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
 }

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

@@ -349,7 +349,7 @@ export class VerdocsTemplateFields {
     }
   }
   render() {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
@@ -359,9 +359,10 @@ export class VerdocsTemplateFields {
     }
     const pages = [...(_b = this.store) === null || _b === void 0 ? void 0 : _b.state.pages];
     pages.sort((a, b) => a.sequence - b.sequence);
+    const selectableRoles = (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.map(role => ({ value: role.name, label: role.name }));
     return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-r": this.rerender, onSubmit: () => {
         console.log('onSubmit');
-      } }, h("div", { id: "verdocs-template-fields-toolbar" }, menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => {
+      } }, h("div", { id: "verdocs-template-fields-toolbar" }, h("div", { class: "add-for" }, "Add field:"), h("verdocs-select-input", { value: this.selectedRoleName, options: selectableRoles, onInput: (e) => (this.selectedRoleName = e.target.value) }), menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => {
         if (option.tooltip) {
           // We have empty tooltips on the separators, quick hack...
           this.placing = option.id;

package/dist/components/verdocs-checkbox2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const verdocsCheckboxCss = "@charset \"UTF-8\";verdocs-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;line-height:18px}verdocs-checkbox label>input[type=checkbox]{display:none}verdocs-checkbox label>input[type=checkbox]+*::before{content:\"\";width:1rem;height:1rem;-ms-flex-negative:0;flex-shrink:0;line-height:18px;border-radius:2px;border-style:solid;margin-right:0.5rem;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-checkbox.dark label>input[type=checkbox]+*::before{border-color:#ffffff}verdocs-checkbox.dark label>input[type=checkbox]:checked+*::before{background:#55bc81;border-color:#55bc81}";
+const verdocsCheckboxCss = "@charset \"UTF-8\";verdocs-checkbox{line-height:18px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-checkbox label>input[type=checkbox]{display:none}verdocs-checkbox label>input[type=checkbox]+*::before{content:\"\";width:1rem;height:1rem;-ms-flex-negative:0;flex-shrink:0;line-height:18px;border-radius:2px;border-style:solid;margin-right:0.5rem;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-checkbox.dark label>input[type=checkbox]+*::before{border-color:#ffffff}verdocs-checkbox.dark label>input[type=checkbox]:checked+*::before{background:#55bc81;border-color:#55bc81}";
 
 const VerdocsCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -10,7 +10,7 @@ import { d as defineCustomElement$4 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$3 } from './verdocs-template-field-properties2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;font-size:14px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:\"\";position:absolute;display:block;top:1px;left:1px;width:10px;height:10px;border-radius:2px;border:1px solid rgba(0, 0, 0, 0.7)}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{margin-left:-20px;margin-top:-4px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
+const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{line-height:18px;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:\"\";width:1rem;height:1rem;-ms-flex-negative:0;flex-shrink:0;line-height:18px;border-radius:2px;border-style:solid;margin-right:0.5rem;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{margin-left:-20px;margin-top:-4px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
 
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -51,7 +51,7 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     if (this.done) {
       return h(Host, { class: { done: this.done } }, option.checked ? '✓' : '☐');
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { name: this.field.name, type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

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

@@ -2623,7 +2623,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), 'PP') : '';
       return h(Host, { class: { done: this.done } }, formatted);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { name: this.field.name, type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

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

@@ -55,7 +55,7 @@ const VerdocsFieldRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class extends
     if (this.done) {
       return (h(Host, { class: { done: this.done }, style: { maxWidth: '10px' } }, h("span", { innerHTML: !!option.selected ? RadioIconSelected : RadioIconUnselected })));
     }
-    return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", value: option.id, tabIndex: settings.order, name: this.field.name, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", name: this.field.name, value: option.id, tabIndex: settings.order, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

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

@@ -52,7 +52,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     if (this.done) {
       return h(Host, { class: { done: this.done } }, settings.value);
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, name: this.field.name, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

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

@@ -82,7 +82,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }), this.editable && (h("div", { class: "resizer", ref: el => (this.resizeHandle = el) }, h("div", { class: "resizer-inner" }))), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", name: this.field.name, placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }), this.editable && (h("div", { class: "resizer", ref: el => (this.resizeHandle = el) }, h("div", { class: "resizer-inner" }))), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

package/dist/components/verdocs-sign.js

@@ -217,17 +217,20 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   handleClickAgree() {
+    this.submitting = true;
     envelopeRecipientAgree(this.endpoint, this.envelopeId, this.roleId, true)
       .then(() => {
       var _a;
       this.nextButtonLabel = 'Next';
       this.recipient.agreed = true;
+      this.submitting = false;
       this.agreed = true; // The server returns a recipient object but it's not "deep" so we track this locally
       (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'agreed' });
     })
       .catch(e => {
       var _a, _b, _c;
       console.log('Update failure', e);
+      this.submitting = false;
       (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
     });
   }
@@ -266,6 +269,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   updateRecipientFieldValue(fieldName, updateResult) {
+    console.log('[SIGN] updateRecipientFieldValue', fieldName);
     this.recipient.fields.forEach(oldField => {
       if (oldField.name === fieldName) {
         oldField.settings = updateResult.settings;
@@ -276,10 +280,9 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
   }
   saveFieldChange(fieldName, fields) {
+    console.log('[SIGN] updateRecipientFieldValue', fieldName);
     updateEnvelopeField(this.endpoint, this.envelopeId, fieldName, fields) //
-      .then(updateResult => {
-      this.updateRecipientFieldValue(fieldName, updateResult);
-    })
+      .then(updateResult => this.updateRecipientFieldValue(fieldName, updateResult))
       .catch(e => {
       var _a, _b, _c, _d, _e, _f;
       if (((_a = e.response) === null || _a === void 0 ? void 0 : _a.status) === 401 && ((_c = (_b = e.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error) === 'jwt expired') {
@@ -433,7 +436,18 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     var _a;
-    el.addEventListener('input', () => this.checkRecipientFields());
+    el.addEventListener('input', (e) => {
+      console.log('[SIGN] onfieldInput', e.detail, e.target.value);
+      // These field types don't emit fieldChange. Should we standardize on that? We don't tap "input" for fields like
+      // text boxes because we'd be updating the field on every keystroke. We do those on blur which fires fieldChange.
+      if (e.target.name.includes('checkbox_group') || e.target.name.includes('radio_button_group')) {
+        console.log('CB', e.target);
+        this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
+      }
+      else {
+        this.checkRecipientFields();
+      }
+    });
     el.addEventListener('focusout', e => this.handleFieldChange(field, e).finally(() => this.checkRecipientFields()));
     el.addEventListener('fieldChange', e => this.handleFieldChange(field, e).finally(() => this.checkRecipientFields()));
     el.setAttribute('roleindex', roleIndex);
@@ -538,7 +552,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return (h(Host, null, h("verdocs-loader", null)));
     }
     if (this.isDone) {
-      return (h(Host, { class: { agreed: this.agreed } }, this.isDone ? (h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })) : (h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
+      return (h(Host, { class: { agreed: this.agreed } }, h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
           this.showDone = false;
           this.isDone = true;
         } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));

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

@@ -308,21 +308,11 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     }
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
-      var _a, _b, _c, _d;
+      var _a, _b;
       this.dirty = false;
-      const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
-      if (field) {
-        field.name = this.name;
-        field.role_name = this.roleName;
-        field.required = this.required;
-        field.label = this.placeholder;
-        field.setting.result = this.defaultValue;
-        if (field.setting.options) {
-          field.setting.options = this.options;
-        }
-      }
-      (_c = this.settingsChanged) === null || _c === void 0 ? void 0 : _c.emit({ fieldName: this.fieldName });
-      (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
+      this.updateField();
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
+      (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
       .catch(() => {
       console.log('Field update failed', e);
@@ -351,28 +341,36 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
         x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
         y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
       });
-    newProperties.setting = this.setting;
-    newProperties.setting.options = this.options;
+    newProperties.setting = { ...this.setting };
+    delete newProperties.setting.result;
+    newProperties.setting.options = [...this.options];
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
-      var _a, _b, _c, _d;
+      var _a, _b;
       this.dirty = false;
-      const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
-      if (field) {
+      this.updateField();
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
+      (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+    })
+      .catch(() => {
+      console.log('Field update failed', e);
+    });
+  }
+  updateField() {
+    const newFields = [...this.store.state.fields];
+    newFields.forEach(field => {
+      if (field.name === this.fieldName) {
         field.name = this.name;
         field.role_name = this.roleName;
         field.required = this.required;
         field.label = this.placeholder;
-        field.setting.result = this.defaultValue;
+        // field.setting.result = this.defaultValue;
+        if (field.setting.options) {
+          field.setting.options = this.options;
+        }
       }
-      (_c = this.settingsChanged) === null || _c === void 0 ? void 0 : _c.emit({ fieldName: this.fieldName });
-      (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
-      // TODO: Verify this
-      // TemplateStore.updateCount++;
-    })
-      .catch(() => {
-      console.log('Field update failed', e);
     });
+    this.store.state.fields = newFields;
   }
   async handleDelete(e) {
     e.stopPropagation();