@verdocs/web-sdk 2.3.16 → 2.3.18

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

@@ -2,10 +2,10 @@ import interact from 'interactjs';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { updateField } from '@verdocs/js-sdk/Templates/Fields';
-import { h, Host } from '@stencil/core';
-import { getFieldSettings } from '../../../utils/utils';
+import { h, Host, Fragment } from '@stencil/core';
 import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
-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>';
+import { getFieldSettings } from '../../../utils/utils';
+const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" /></svg>';
 /**
  * Display a text input field.
  */
@@ -14,7 +14,6 @@ export class VerdocsFieldTextbox {
     this.fieldStore = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateid = '';
-    this.field = null;
     this.fieldname = '';
     this.disabled = false;
     this.editable = false;
@@ -24,24 +23,24 @@ export class VerdocsFieldTextbox {
     this.xscale = 1;
     this.yscale = 1;
     this.rerender = 0;
+    this.showingProperties = false;
   }
   async focusField() {
     this.inputEl.focus();
   }
   async showSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
     if (settingsPanel && settingsPanel.showPanel) {
       settingsPanel.showPanel();
     }
   }
   async hideSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
   }
   async componentWillLoad() {
-    console.log('Loading field', this.field);
     this.fieldStore = getTemplateFieldStore(this.templateid);
   }
   componentDidRender() {
@@ -75,28 +74,31 @@ export class VerdocsFieldTextbox {
     Object.assign(e.target.dataset, { x, y, h });
   }
   handleResizeEnd(e) {
-    const newSettings = { ...getFieldSettings(this.field) };
+    const field = this.fieldStore.get(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);
     newSettings.height = Math.round(parseFloat(e.target.style.height) / this.yscale);
     newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
     newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
-    updateField(this.endpoint, this.templateid, this.field.name, { setting: newSettings })
+    updateField(this.endpoint, this.templateid, this.fieldname, { setting: newSettings })
       .then(field => {
       var _a;
       console.log('update result', field);
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings, field });
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name, settings: newSettings, field });
       Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
     })
       .catch(e => console.log('Field update failed', e));
   }
   render() {
-    var _a, _b, _c, _d;
-    const f = this.fieldStore.get(this.fieldname);
-    console.log('rendering field', f);
-    const settings = getFieldSettings(this.field);
+    var _a, _b;
+    const field = this.fieldStore.get(this.fieldname);
+    if (!field) {
+      return h(Fragment, null);
+    }
+    const settings = getFieldSettings(field);
     let disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
+    const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
     const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
     const width = settings.width || 150;
     // TODO: This is an outdated technique from the old system. We should compute it.
@@ -104,15 +106,18 @@ 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", 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), maxlength: maxlength }), 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: field.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", name: 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: field === null || field === void 0 ? void 0 : field.required, ref: el => (this.inputEl = el), maxlength: maxlength }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: settingsIcon, onClick: (e) => {
+        e.stopPropagation();
+        this.showingProperties = !this.showingProperties;
+      } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
         var _a;
-        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();
-      }, helpText: 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.' })))));
+      }, helpText: 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.' })))))));
   }
   static get is() { return "verdocs-field-textbox"; }
   static get originalStyleUrls() {
@@ -166,31 +171,6 @@ export class VerdocsFieldTextbox {
         "reflect": false,
         "defaultValue": "''"
       },
-      "field": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "IEnvelopeField | ITemplateField | null",
-          "resolved": "IEnvelopeField | ITemplateField",
-          "references": {
-            "IEnvelopeField": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
-            },
-            "ITemplateField": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Templates/Types"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The document or template field to display."
-        },
-        "defaultValue": "null"
-      },
       "fieldname": {
         "type": "string",
         "mutable": false,
@@ -355,6 +335,11 @@ export class VerdocsFieldTextbox {
       }
     };
   }
+  static get states() {
+    return {
+      "showingProperties": {}
+    };
+  }
   static get events() {
     return [{
         "method": "settingsChanged",

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

@@ -51,4 +51,18 @@ verdocs-field-timestamp verdocs-button-panel .icon svg {
 }
 verdocs-field-timestamp verdocs-button-panel .icon:hover svg {
   fill: #000000;
+}
+verdocs-field-timestamp .settings-icon {
+  position: absolute;
+  top: -3px;
+  left: -20px;
+  display: inline-block;
+  cursor: pointer;
+  opacity: 0.6;
+}
+verdocs-field-timestamp .settings-icon svg {
+  fill: #707ae5;
+}
+verdocs-field-timestamp .settings-icon:hover {
+  opacity: 1;
 }

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

@@ -1,62 +1,77 @@
 import { format } from 'date-fns';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
-import { h, Host } from '@stencil/core';
+import { h, Host, Fragment } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
 import { FORMAT_TIMESTAMP } from '../../../utils/Types';
+import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 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>';
 /**
  * Display a timestamp field.
  */
 export class VerdocsFieldTimestamp {
   constructor() {
+    this.fieldStore = null;
     this.templateid = '';
-    this.field = null;
+    this.fieldname = '';
     this.disabled = false;
     this.editable = false;
     this.moveable = false;
     this.done = false;
     this.roleindex = 0;
     this.rerender = 0;
+    this.xscale = 1;
+    this.yscale = 1;
+    this.showingProperties = false;
   }
   async focusField() {
     this.el.focus();
   }
   async showSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
     if (settingsPanel && settingsPanel.showPanel) {
       settingsPanel.showPanel();
     }
   }
   async hideSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
     // TemplateStore.updateCount++;
   }
+  async componentWillLoad() {
+    this.fieldStore = getTemplateFieldStore(this.templateid);
+  }
   render() {
-    var _a, _b, _c;
-    const settings = getFieldSettings(this.field);
+    var _a, _b;
+    const field = this.fieldStore.get(this.fieldname);
+    if (!field) {
+      return h(Fragment, null);
+    }
+    const settings = getFieldSettings(field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
+    const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
     const value = settings.value || new Date().toISOString();
     const dt = new Date(value);
     const formatted = format(dt, FORMAT_TIMESTAMP);
     if (this.done) {
       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", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order,
+    return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, 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,
       // TODO: It would really make more sense to show the date and time but the default width of 64px for this field
       // is encoded in a ton of existing entries in the database and is hard to change.
-      value: formatted, disabled: true, 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: () => {
+      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: settingsIcon, onClick: (e) => {
+        e.stopPropagation();
+        this.showingProperties = !this.showingProperties;
+      } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
         var _a;
-        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();
-      } })))));
+      }, helpText: 'Time stamps are automatically set when the recipient signs the document.' })))))));
   }
   static get is() { return "verdocs-field-timestamp"; }
   static get originalStyleUrls() {
@@ -89,30 +104,23 @@ export class VerdocsFieldTimestamp {
         "reflect": false,
         "defaultValue": "''"
       },
-      "field": {
-        "type": "unknown",
+      "fieldname": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IEnvelopeField | ITemplateField | null",
-          "resolved": "IEnvelopeField | ITemplateField",
-          "references": {
-            "IEnvelopeField": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
-            },
-            "ITemplateField": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Templates/Types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The document or template field to display."
+          "text": "The name of the field to display."
         },
-        "defaultValue": "null"
+        "attribute": "fieldname",
+        "reflect": false,
+        "defaultValue": "''"
       },
       "disabled": {
         "type": "boolean",
@@ -221,9 +229,50 @@ export class VerdocsFieldTimestamp {
         "attribute": "rerender",
         "reflect": false,
         "defaultValue": "0"
+      },
+      "xscale": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set, the field will be be scaled horizontally by this factor."
+        },
+        "attribute": "xscale",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "yscale": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set, the field will be be scaled vertically by this factor."
+        },
+        "attribute": "yscale",
+        "reflect": false,
+        "defaultValue": "1"
       }
     };
   }
+  static get states() {
+    return {
+      "showingProperties": {}
+    };
+  }
   static get events() {
     return [{
         "method": "settingsChanged",

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

@@ -1,5 +1,11 @@
 verdocs-template-field-properties {
+  padding: 20px;
+  display: block;
+  border-radius: 4px;
+  background: #ffffff;
+  border: 1px solid #ccc;
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  box-shadow: 2px 2px 10px 0px #0000001f;
 }
 verdocs-template-field-properties .buttons {
   display: flex;

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

@@ -53,33 +53,34 @@ export class VerdocsTemplateFieldProperties {
         return;
       }
       this.templateStore = await getTemplateStore(this.endpoint, this.templateId);
+      createTemplateFieldStore(this.templateStore.state);
       this.fieldStore = await createTemplateFieldStore(this.templateStore.state);
+      // console.log('tfs', this.fieldStore?.state);
       const field = this.fieldStore.get(this.fieldName);
+      // console.log('gf', field);
       if (!field) {
         console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
       }
       else {
         console.log('props', field);
       }
-      createTemplateFieldStore(this.templateStore.state);
       this.watcher = this.fieldStore.onChange(this.fieldName, field => {
-        var _a, _b, _c, _d;
         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 = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
-        this.value = ((_b = field.setting) === null || _b === void 0 ? void 0 : _b.result) || '';
-        this.leading = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.leading) || 0;
-        this.setting = field.setting || {};
-        this.options = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.options) || [];
-        this.dirty = false;
-        this.loading = false;
+        // 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;
@@ -146,7 +147,7 @@ export class VerdocsTemplateFieldProperties {
         options: this.options,
       };
     }
-    console.log('FP: Will update', newProperties);
+    console.log('FP: Will update', this.fieldName, newProperties);
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(field => {
       var _a, _b;
@@ -199,9 +200,8 @@ export class VerdocsTemplateFieldProperties {
   }
   updateField(newField) {
     const oldField = this.fieldStore.get(this.fieldName) || {};
-    console.log('Updating field', newField, oldField);
+    console.log('Updating field', this.fieldName, newField);
     Object.assign(oldField, newField);
-    this.fieldStore.set(this.fieldName, newField);
   }
   async handleDelete(e) {
     e.stopPropagation();
@@ -230,6 +230,7 @@ export class VerdocsTemplateFieldProperties {
     if (this.helpText && this.showingHelp) {
       return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions", innerHTML: this.helpText })));
     }
+    // console.log('tfp', this.templateId, this.fieldName);
     return (h(Host, null, h("h6", null, capitalize(this.fieldType.replace(/_/g, ' ')), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Field Name", value: this.name, autocomplete: "off",
       //              helpText="The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key."
       placeholder: "Field Name...", onInput: (e) => {

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

@@ -65,9 +65,7 @@ export class VerdocsTemplateFields {
       }
       this.templateStore = await getTemplateStore(this.endpoint, this.templateId, true);
       this.fieldStore = createTemplateFieldStore(this.templateStore.state);
-      console.log(`[FIELDS] Loaded template ${this.templateId}`, this.templateStore.state, this.fieldStore);
       this.selectedRoleName = ((_d = (_c = (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name) || '';
-      console.log('[FIELDS] Starting with role', this.selectedRoleName);
     }
     catch (e) {
       console.log('[FIELDS] Error with preview session', e);
@@ -102,10 +100,10 @@ export class VerdocsTemplateFields {
     console.log('[FIELDS] handleFieldChange', field, e, optionId);
     this.rerender++;
   }
-  handleFieldSettingsChange(pageInfo, field, el, newFieldData) {
+  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', field.name, newFieldData);
+    console.log('[FIELDS] Field settings changed', oldName, field.name, newFieldData);
     Object.assign(field, newFieldData);
     el.field = newFieldData;
     this.selectedRoleName = field.role_name;
@@ -114,17 +112,30 @@ export class VerdocsTemplateFields {
     this.rerender++;
     el.setAttribute('rerender', this.rerender);
     (_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' });
-    console.log('[FIELDS] Re-rendering field', field.name, pageInfo.pageNumber);
+    // 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);
+    // const roleIndex = getRoleIndex(getRoleNames(this.templateStore), field.role_name);
+    // this.attachFieldAttributes(pageInfo, field, roleIndex, el);
+    this.reRenderField(field, pageInfo.pageNumber);
     // const newEl = renderDocumentField(field, pageInfo, roleIndex, {disabled: true, editable: true, draggable: true});
     // if (!newEl) {
     //   return;
     // }
   }
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
+    // console.log('afa', field);
     el.addEventListener('input', e => this.handleFieldChange(field, e));
-    el.addEventListener('settingsChanged', e => this.handleFieldSettingsChange(pageInfo, field, el, e.detail.field));
+    el.addEventListener('settingsChanged', e => this.handleFieldSettingsChange(pageInfo, field, el, e.detail.field, e.detail.fieldName));
     // el.addEventListener('settingsChanged', e => this.handleFieldSettingsChange(pageInfo, field, roleIndex, el, e.detail.field));
     el.addEventListener('deleted', () => {
       var _a, _b;
@@ -143,7 +154,7 @@ export class VerdocsTemplateFields {
   }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    console.log('[FIELDS] Page rendered', pageInfo.pageNumber, pageInfo);
+    // console.log('[FIELDS] Page rendered', pageInfo.pageNumber, pageInfo);
     this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
     this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
     const fields = Object.values(this.fieldStore.state).filter(field => field.page_sequence === pageInfo.pageNumber);
@@ -190,7 +201,6 @@ export class VerdocsTemplateFields {
     const name = event.target.getAttribute('name');
     const option = +(event.target.getAttribute('option') || '0');
     const field = this.fieldStore.get(name);
-    console.log('Dropped field', name, field);
     if (!field) {
       console.log('[FIELDS] Unable to find field', name);
       return;
@@ -206,9 +216,7 @@ export class VerdocsTemplateFields {
     // "up" from the bottom (negative displacement).
     const newX = Math.max(clientRect.left - parentRect.left, 0);
     const newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
-    // console.log('Computing coordinates', {naturalWidth, width: event.rect.width, naturalHeight, height: event.rect.height, newX, newY});
     const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - width, naturalHeight - height);
-    // console.log('Drop End', {x, y, newX, newY});
     switch (field.type) {
       case 'attachment':
       case 'payment':
@@ -233,12 +241,10 @@ export class VerdocsTemplateFields {
         }
         break;
     }
-    console.log('[FIELDS] Will update', name, option, field);
+    console.log('[FIELDS] Will update', name, y, option, field);
     const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
     const pageInfo = this.cachedPageInfo[pageNumber];
-    // const roleIndex = getRoleIndex(getRoleNames(this.templateStore), field.role_name);
-    this.handleFieldSettingsChange(pageInfo, field, event.target, newFieldData);
-    // this.handleFieldSettingsChange(pageInfo, field, roleIndex, event.target, newFieldData);
+    this.handleFieldSettingsChange(pageInfo, field, event.target, newFieldData, name);
     event.target.removeAttribute('posX');
     event.target.removeAttribute('posY');
   }
@@ -256,7 +262,6 @@ export class VerdocsTemplateFields {
     const { xScale = 1, yScale = 1, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
     const x = Math.floor(Math.min(viewX / xScale, xMax));
     const y = Math.floor(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));
-    console.log('Computed coordinates', { x, y, viewX, viewY, xMax, yMax });
     return { x, y };
   }
   async handleClickPage(e, pageNumber) {
@@ -353,7 +358,7 @@ export class VerdocsTemplateFields {
         field.type = 'textbox';
       }
       const saved = await createField(this.endpoint, this.templateId, field);
-      console.log('Saved field', saved);
+      console.log('[FIELDS] Saved field', saved);
       this.fieldStore.set(saved.name, 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' });
@@ -362,7 +367,6 @@ export class VerdocsTemplateFields {
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    console.log('[FIELDS] Rendering', this.selectedRoleName);
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
@@ -372,7 +376,7 @@ export class VerdocsTemplateFields {
     }
     const selectableRoles = (_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.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');
+        // console.log('onSubmit');
       } }, 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: () => {
         // We ignore empty-tooltip entries because they're separators
         if (option.tooltip) {

package/dist/collection/utils/TemplateFieldStore.js

@@ -2,13 +2,15 @@ import { createStore } from '@stencil/store';
 const templateFieldStores = {};
 export const getTemplateFieldStore = (templateId) => templateFieldStores[templateId];
 export const createTemplateFieldStore = (template) => {
-  console.log('Creating template field store for template: ', template);
   let store = getTemplateFieldStore(template.id);
   if (!store) {
+    console.log('Creating template field store for template', template.id);
     store = createStore({});
     templateFieldStores[template.id] = store;
   }
   else {
+    console.log('Resetting template field store for template', template.id);
+    console.trace('Stack');
     store.reset();
   }
   template.fields.forEach(field => {

package/dist/collection/utils/TemplateStore.js

@@ -1,7 +1,7 @@
 import { createStore } from '@stencil/store';
 import { getTemplate } from '@verdocs/js-sdk/Templates/Templates';
 import { TemplateSenderTypes } from '@verdocs/js-sdk/Templates/Types';
-import { createTemplateFieldStore } from "./TemplateFieldStore";
+import { createTemplateFieldStore, getTemplateFieldStore } from './TemplateFieldStore';
 const createTemplateStore = (templateId) => {
   const now = new Date().toISOString();
   return createStore({
@@ -69,6 +69,7 @@ export const getTemplateStore = async (endpoint, templateId, forceReload = false
       store.state.isLoaded = true;
       store.state.isError = false;
       store.state.error = undefined;
+      createTemplateFieldStore(template);
     }
     catch (e) {
       console.error('[TEMPLATES] Error loading template', e);
@@ -80,7 +81,10 @@ export const getTemplateStore = async (endpoint, templateId, forceReload = false
     store.state.isLoading = false;
     store.state.updateCount++;
   }
-  createTemplateFieldStore(store.state);
+  else {
+    // Just make sure it exists
+    getTemplateFieldStore(templateId);
+  }
   return store;
 };
 export const getRoleNames = (store) => { var _a; return (((_a = store === null || store === void 0 ? void 0 : store.state) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name); };