@verdocs/web-sdk 2.3.14 → 2.3.16

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

@@ -2,6 +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 { getTemplateStore } from '../../../utils/TemplateStore';
 import { SDKError } from '../../../utils/errors';
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
@@ -12,20 +13,23 @@ const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"
  */
 export class VerdocsTemplateFieldProperties {
   constructor() {
-    this.store = null;
+    this.templateStore = null;
+    this.fieldStore = null;
+    this.watcher = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
     this.fieldName = '';
     this.helpText = '';
     this.dirty = false;
     this.loading = true;
-    this.type = 'signature';
     this.setting = null;
+    this.label = '';
+    this.type = 'textbox';
     this.name = '';
+    this.required = false;
     this.roleName = '';
     this.group = '';
     this.fieldType = '';
-    this.required = false;
     this.options = [];
     this.placeholder = '';
     this.value = '';
@@ -33,7 +37,7 @@ export class VerdocsTemplateFieldProperties {
     this.showingHelp = false;
   }
   async componentWillLoad() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g;
     try {
       this.endpoint.loadSession();
       if (!this.templateId) {
@@ -48,52 +52,81 @@ export class VerdocsTemplateFieldProperties {
         console.log('[FIELD PROPERTIES] Unable to start builder session, must be authenticated');
         return;
       }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, 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);
+      this.templateStore = await getTemplateStore(this.endpoint, this.templateId);
+      this.fieldStore = await createTemplateFieldStore(this.templateStore.state);
+      const field = this.fieldStore.get(this.fieldName);
       if (!field) {
-        console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in template`);
+        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;
+      });
+      console.log('watcher', this.watcher);
       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 = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.placeholder) || '';
-      this.value = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.result) || '';
-      this.leading = ((_e = field.setting) === null || _e === void 0 ? void 0 : _e.leading) || 0;
+      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 = ((_f = field.setting) === null || _f === void 0 ? void 0 : _f.options) || [];
+      this.options = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.options) || [];
       this.dirty = false;
       this.loading = false;
+      console.log('Displaying settings for', this.setting);
     }
     catch (e) {
       console.log('[FIELD PROPERTIES] Error loading template', e);
       this.loading = false;
-      (_g = this.sdkError) === null || _g === void 0 ? void 0 : _g.emit(new SDKError(e.message, (_h = e.response) === null || _h === void 0 ? void 0 : _h.status, (_j = e.response) === null || _j === void 0 ? void 0 : _j.data));
+      (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
     }
   }
   handleCancel(e) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     e.stopPropagation();
-    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);
+    const field = this.fieldStore.get(this.fieldName);
     if (field) {
       this.name = field.name;
+      this.label = field.label;
       this.roleName = field.role_name;
       this.required = field.required;
       // TODO: Talk about how we want to handle labels/placeholders
-      this.placeholder = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.placeholder) || '';
-      this.value = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.result) || '';
-      this.leading = ((_e = field.setting) === null || _e === void 0 ? void 0 : _e.leading) || 0;
+      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.dirty = false;
-    (_f = this.close) === null || _f === void 0 ? void 0 : _f.emit();
+    (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
   }
   handleSave(e) {
     e.stopPropagation();
     const newProperties = {
       name: this.name,
+      label: this.label || null,
       required: this.required,
       role_name: this.roleName,
       // TODO: Default value in setting?
@@ -113,6 +146,7 @@ export class VerdocsTemplateFieldProperties {
         options: this.options,
       };
     }
+    console.log('FP: Will update', newProperties);
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(field => {
       var _a, _b;
@@ -164,33 +198,19 @@ export class VerdocsTemplateFieldProperties {
     });
   }
   updateField(newField) {
-    const newFields = [...this.store.state.fields];
-    newFields.forEach(field => {
-      if (field.name === this.fieldName) {
-        Object.assign(field, newField);
-        // 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;
-        // }
-      }
-    });
-    this.store.state.fields = newFields;
+    const oldField = this.fieldStore.get(this.fieldName) || {};
+    console.log('Updating field', newField, oldField);
+    Object.assign(oldField, newField);
+    this.fieldStore.set(this.fieldName, 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, _b, _c, _d, _e;
-        this.store.state.fields = [...(_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.filter(field => field.name !== this.fieldName)];
-        (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.forEach(role => {
-          role.fields = [...role.fields.filter(field => field.name !== this.fieldName)];
-        });
-        (_e = this.delete) === null || _e === void 0 ? void 0 : _e.emit({ templateId: this.templateId, roleName: this.roleName });
+        var _a;
+        this.fieldStore.set(this.fieldName, undefined);
+        (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
       })
         .catch(e => {
         console.log('[FIELD PROPERTIES] Deletion error', e);
@@ -198,12 +218,13 @@ export class VerdocsTemplateFieldProperties {
     }
   }
   render() {
-    var _a, _b, _c, _d;
+    var _a;
+    // console.log('Rendering field properties', this.fieldStore.get(this.fieldName));
     if (!this.endpoint.session) {
       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 || !((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
+    if (!this.endpoint.session || !this.fieldStore.get(this.fieldName)) {
       return h(Host, { class: "empty" });
     }
     if (this.helpText && this.showingHelp) {
@@ -214,7 +235,12 @@ export class VerdocsTemplateFieldProperties {
       placeholder: "Field Name...", onInput: (e) => {
         this.name = e.target.value;
         this.dirty = true;
-      } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
+      } })), h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-label", label: "Optional Label", value: this.label, 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: "Optional Label...", onInput: (e) => {
+        this.label = e.target.value;
+        this.dirty = true;
+      } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_a = this.templateStore.state) === null || _a === void 0 ? void 0 : _a.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
         this.roleName = e.target.value;
         this.dirty = true;
       } })), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-value", label: "Value", value: this.value, autocomplete: "off", placeholder: "Pre-defined value...", onInput: (e) => {
@@ -346,13 +372,14 @@ export class VerdocsTemplateFieldProperties {
     return {
       "dirty": {},
       "loading": {},
-      "type": {},
       "setting": {},
+      "label": {},
+      "type": {},
       "name": {},
+      "required": {},
       "roleName": {},
       "group": {},
       "fieldType": {},
-      "required": {},
       "options": {},
       "placeholder": {},
       "value": {},

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

@@ -4,6 +4,7 @@ import { integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
 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 { createTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 import { getRoleNames, getTemplateStore } from '../../../utils/TemplateStore';
 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>';
@@ -39,7 +40,8 @@ const menuOptions = [
 export class VerdocsTemplateFields {
   constructor() {
     this.pageHeights = {};
-    this.store = null;
+    this.templateStore = null;
+    this.fieldStore = null;
     this.cachedPageInfo = {};
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
@@ -61,9 +63,10 @@ export class VerdocsTemplateFields {
         console.log('[FIELDS] Unable to start builder session, must be authenticated');
         return;
       }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
-      console.log(`[FIELDS] Loaded template ${this.templateId}`, this.store.state);
-      this.selectedRoleName = ((_d = (_c = (_b = (_a = this.store) === 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) || '';
+      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) {
@@ -84,8 +87,8 @@ export class VerdocsTemplateFields {
   componentWillUpdate() {
     var _a, _b, _c, _d, _e, _f;
     // If a new role was added and there were none yet so far, or the "selected" role was deleted, reset our selection
-    if (!this.selectedRoleName || !(((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) || []).find(role => role.name === this.selectedRoleName)) {
-      this.selectedRoleName = ((_f = (_e = (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.name) || '';
+    if (!this.selectedRoleName || !(((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) || []).find(role => role.name === this.selectedRoleName)) {
+      this.selectedRoleName = ((_f = (_e = (_d = (_c = this.templateStore) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.name) || '';
       console.log('[FIELDS] Selected new role', this.selectedRoleName);
     }
   }
@@ -99,35 +102,39 @@ export class VerdocsTemplateFields {
     console.log('[FIELDS] handleFieldChange', field, e, optionId);
     this.rerender++;
   }
-  handleFieldSettingsChange(pageInfo, field, roleIndex, el, newFieldData) {
-    var _a, _b, _c, _d;
+  handleFieldSettingsChange(pageInfo, field, el, newFieldData) {
+    var _a, _b;
+    // handleFieldSettingsChange(pageInfo: any, field: any, roleIndex: number, el: any, newFieldData: any) {
     console.log('[FIELDS] Field settings changed', field.name, newFieldData);
     Object.assign(field, newFieldData);
     el.field = newFieldData;
     this.selectedRoleName = field.role_name;
-    el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
-    el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
+    el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.templateStore), field.role_name));
+    el.field = this.fieldStore.get(field.name);
     this.rerender++;
     el.setAttribute('rerender', this.rerender);
-    (_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: (_d = this.store) === null || _d === void 0 ? void 0 : _d.state, event: 'updated-field' });
+    (_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);
-    this.reRenderField(field, pageInfo.pageNumber);
-    const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
-    if (!newEl) {
-      return;
-    }
+    this.fieldStore.set(field.name, field);
+    // 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) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
-    el.addEventListener('settingsChanged', e => this.handleFieldSettingsChange(pageInfo, field, roleIndex, el, e.detail.field));
+    el.addEventListener('settingsChanged', e => this.handleFieldSettingsChange(pageInfo, field, el, e.detail.field));
+    // el.addEventListener('settingsChanged', e => this.handleFieldSettingsChange(pageInfo, field, roleIndex, el, e.detail.field));
     el.addEventListener('deleted', () => {
       var _a, _b;
       console.log('[FIELDS] Deleted', this, field);
       el.remove();
       this.rerender++;
-      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
+      (_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' });
     });
     el.setAttribute('templateid', this.templateId);
+    el.setAttribute('fieldname', field.name);
     el.setAttribute('roleindex', roleIndex);
     el.setAttribute('pageNumber', pageInfo.pageNumber);
     el.setAttribute('xScale', pageInfo.xScale);
@@ -135,17 +142,16 @@ export class VerdocsTemplateFields {
     el.setAttribute('name', field.name);
   }
   handlePageRendered(e) {
-    var _a;
     const pageInfo = e.detail;
     console.log('[FIELDS] Page rendered', pageInfo.pageNumber, pageInfo);
     this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
     this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
-    const fields = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
+    const fields = Object.values(this.fieldStore.state).filter(field => field.page_sequence === pageInfo.pageNumber);
     fields.forEach(field => this.reRenderField(field, pageInfo.pageNumber));
   }
   reRenderField(field, pageNumber) {
     const pageInfo = this.cachedPageInfo[pageNumber];
-    const roleIndex = getRoleIndex(getRoleNames(this.store), field.role_name);
+    const roleIndex = getRoleIndex(getRoleNames(this.templateStore), field.role_name);
     const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
     if (!el) {
       return;
@@ -181,62 +187,68 @@ export class VerdocsTemplateFields {
     updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
   }
   async handleMoveEnd(event) {
-    var _a;
+    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;
+    }
     const pageNumber = event.target.getAttribute('pageNumber');
     const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
     const clientRect = event.target.getBoundingClientRect();
     const parent = event.target.parentElement;
     const parentRect = parent.getBoundingClientRect();
+    const width = field.setting.width || defaultWidth(field.type);
+    const height = field.setting.height || defaultHeight(field.type);
     // These two being backwards is not a mistake. Left measures "over" from the left (positive displacement) while bottom measures
     // "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);
-    const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - event.rect.width, naturalHeight - event.rect.height);
-    const name = event.target.getAttribute('name');
-    const option = +(event.target.getAttribute('option') || '0');
-    const field = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.find(field => field.name === name);
-    if (field) {
-      switch (field.type) {
-        case 'attachment':
-        case 'payment':
-        case 'initial':
-        case 'signature':
-        case 'date':
-        case 'dropdown':
-        case 'textarea':
-        case 'textbox':
-        case 'timestamp':
-          field.setting.x = x;
-          field.setting.y = y;
-          break;
-        case 'checkbox_group':
-        case 'radio_button_group':
-          {
-            const opt = field.setting.options[option];
-            if (opt) {
-              opt.x = x;
-              opt.y = y;
-            }
+    // 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':
+      case 'initial':
+      case 'signature':
+      case 'date':
+      case 'dropdown':
+      case 'textarea':
+      case 'textbox':
+      case 'timestamp':
+        field.setting.x = x;
+        field.setting.y = y;
+        break;
+      case 'checkbox_group':
+      case 'radio_button_group':
+        {
+          const opt = field.setting.options[option];
+          if (opt) {
+            opt.x = x;
+            opt.y = y;
           }
-          break;
-      }
-      console.log('[FIELDS] Will update', name, option, field);
-      const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
-      const pageInfo = this.cachedPageInfo[pageNumber];
-      const roleIndex = getRoleIndex(getRoleNames(this.store), field.role_name);
-      this.handleFieldSettingsChange(pageInfo, field, roleIndex, event.target, newFieldData);
-      event.target.removeAttribute('posX');
-      event.target.removeAttribute('posY');
+        }
+        break;
     }
+    console.log('[FIELDS] Will update', name, 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);
+    event.target.removeAttribute('posX');
+    event.target.removeAttribute('posY');
   }
   generateFieldName(type, pageNumber) {
-    var _a;
     let i = 1;
     let fieldName;
     do {
       fieldName = `${type}P${pageNumber}-${i}`;
       i++;
-    } while ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.some(field => field.name === fieldName));
+    } while (Object.values(this.fieldStore.state).some(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.
@@ -244,10 +256,11 @@ 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) {
-    var _a, _b, _c;
+    var _a, _b;
     if (this.placing) {
       const clickedX = e.offsetX;
       const clickedY = e.offsetY;
@@ -274,6 +287,7 @@ export class VerdocsTemplateFields {
         width,
         height,
       };
+      console.log('[FIELDS] Will save new field', field);
       // TODO: Fix how the server validates all this. It uses a JSON schema and is very particular about shapes for each field type.
       //  That makes it harder for third party developers to create fields via API calls. It would be better to always set X/Y and
       //  let the server normalize the rest, discarding properties that are invalid and back-filling defaults as needed.
@@ -340,11 +354,9 @@ export class VerdocsTemplateFields {
       }
       const saved = await createField(this.endpoint, this.templateId, field);
       console.log('Saved field', saved);
-      if (this.store.state) {
-        this.store.state.fields = [...(_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields, saved];
-      }
+      this.fieldStore.set(saved.name, saved);
       this.placing = null;
-      (_b = this.templateUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: (_c = this.store) === null || _c === void 0 ? void 0 : _c.state, event: 'added-field' });
+      (_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.handlePageRendered({ detail: this.cachedPageInfo[pageNumber] });
     }
   }
@@ -355,10 +367,10 @@ export class VerdocsTemplateFields {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
     // TODO: Render a better error
-    if (!((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
+    if (!((_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    const selectableRoles = (_c = (_b = this.store) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.roles.map(role => ({ value: role.name, label: role.name }));
+    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');
       } }, 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: () => {
@@ -372,13 +384,13 @@ export class VerdocsTemplateFields {
             this.showMustSelectRole = true;
           }
         }
-      } })))), h("div", { class: "pages" }, (((_e = (_d = this.store) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e.template_documents) || []).map(document => {
+      } })))), h("div", { class: "pages" }, (((_e = (_d = this.templateStore) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e.template_documents) || []).map(document => {
       const pageNumbers = integerSequence(1, document.page_numbers);
       return pageNumbers.map(page => (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
         ] })));
-    })), this.showMustSelectRole && (h("verdocs-ok-dialog", { heading: "Unable to add field", message: ((_h = (_g = (_f = this.store) === null || _f === void 0 ? void 0 : _f.state) === null || _g === void 0 ? void 0 : _g.roles) === null || _h === void 0 ? void 0 : _h.length) > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.', onNext: () => (this.showMustSelectRole = false) }))));
+    })), this.showMustSelectRole && (h("verdocs-ok-dialog", { heading: "Unable to add field", message: ((_h = (_g = (_f = this.templateStore) === null || _f === void 0 ? void 0 : _f.state) === null || _g === void 0 ? void 0 : _g.roles) === null || _h === void 0 ? void 0 : _h.length) > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.', onNext: () => (this.showMustSelectRole = false) }))));
   }
   static get is() { return "verdocs-template-fields"; }
   static get originalStyleUrls() {

package/dist/collection/utils/TemplateFieldStore.js

@@ -0,0 +1,18 @@
+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) {
+    store = createStore({});
+    templateFieldStores[template.id] = store;
+  }
+  else {
+    store.reset();
+  }
+  template.fields.forEach(field => {
+    store.set(field.name, field);
+  });
+  return store;
+};

package/dist/collection/utils/TemplateStore.js

@@ -1,6 +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";
 const createTemplateStore = (templateId) => {
   const now = new Date().toISOString();
   return createStore({
@@ -79,6 +80,7 @@ export const getTemplateStore = async (endpoint, templateId, forceReload = false
     store.state.isLoading = false;
     store.state.updateCount++;
   }
+  createTemplateFieldStore(store.state);
   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); };

package/dist/collection/utils/Types.js

@@ -1,2 +1,3 @@
-export const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
+export const FORMAT_TIMESTAMP = 'P';
+// export const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
 export const FORMAT_DATE = 'Y-MM-dd';

package/dist/components/Envelopes.js

@@ -96,6 +96,7 @@ var getSummary = function (endpoint, page) { return __awaiter(void 0, void 0, vo
  */
 var getSigningSession = function (endpoint, params) { return __awaiter(void 0, void 0, void 0, function () {
     return __generator(this, function (_a) {
+        window.console.log('[JS_SDK] getSigningSession', params, endpoint.api);
         return [2 /*return*/, endpoint.api //
                 .get("/envelopes/".concat(params.envelopeId, "/recipients/").concat(encodeURIComponent(params.roleId), "/invitation/").concat(params.inviteCode))
                 .then(function (r) {
@@ -223,12 +224,7 @@ var getEnvelopeDocumentPageDisplayUri = function (endpoint, envelopeId, document
     return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             return [2 /*return*/, endpoint.api
-                    .get("/envelopes/".concat(envelopeId, "/envelope_documents/").concat(documentId, "/pages/").concat(page, "/image?type=").concat(type), {
-                    timeout: 20000,
-                    'axios-retry': {
-                        retries: 5,
-                    },
-                })
+                    .get("/envelopes/".concat(envelopeId, "/envelope_documents/").concat(documentId, "/pages/").concat(page, "/image?type=").concat(type), { timeout: 20000 })
                     .then(function (r) { return r.data; })];
         });
     });

package/dist/components/TemplateStore.js

@@ -1,5 +1,23 @@
 import { c as createStore } from './index4.js';
-import { e as getTemplate, b as TemplateSenderTypes } from './VerdocsEndpoint.js';
+import { g as getTemplate, b as TemplateSenderTypes } from './VerdocsEndpoint.js';
+
+const templateFieldStores = {};
+const getTemplateFieldStore = (templateId) => templateFieldStores[templateId];
+const createTemplateFieldStore = (template) => {
+  console.log('Creating template field store for template: ', template);
+  let store = getTemplateFieldStore(template.id);
+  if (!store) {
+    store = createStore({});
+    templateFieldStores[template.id] = store;
+  }
+  else {
+    store.reset();
+  }
+  template.fields.forEach(field => {
+    store.set(field.name, field);
+  });
+  return store;
+};
 
 const createTemplateStore = (templateId) => {
   const now = new Date().toISOString();
@@ -79,8 +97,9 @@ const getTemplateStore = async (endpoint, templateId, forceReload = false) => {
     store.state.isLoading = false;
     store.state.updateCount++;
   }
+  createTemplateFieldStore(store.state);
   return store;
 };
 const getRoleNames = (store) => { var _a; return (((_a = store === null || store === void 0 ? void 0 : store.state) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name); };
 
-export { getRoleNames as a, getTemplateStore as g };
+export { getTemplateFieldStore as a, getRoleNames as b, createTemplateFieldStore as c, getTemplateStore as g };

package/dist/components/Types2.js

@@ -1,4 +1,5 @@
-const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
+const FORMAT_TIMESTAMP = 'P';
+// export const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
 const FORMAT_DATE = 'Y-MM-dd';
 
 export { FORMAT_TIMESTAMP as F, FORMAT_DATE as a };