@verdocs/web-sdk 2.3.16 → 2.3.19

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;
+      this.watcher = this.fieldStore.onChange(this.fieldName, (field) => {
         console.log('Field changed', field);
-        this.type = field.type;
-        this.name = field.name;
-        this.label = field.label;
-        this.group = field.name;
-        this.roleName = field.role_name;
-        this.required = field.required;
-        this.fieldType = field.type;
-        // TODO: Talk about how we want to handle labels/placeholders
-        this.placeholder = ((_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,24 @@ 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 newEl = renderDocumentField(field, pageInfo, roleIndex, {disabled: true, editable: true, draggable: true});
-    // if (!newEl) {
-    //   return;
-    // }
+    this.reRenderField(field, pageInfo.pageNumber);
   }
   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,11 +148,11 @@ 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);
-    fields.forEach(field => this.reRenderField(field, 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];
@@ -190,7 +195,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 +210,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 +235,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 +256,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 +352,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 +361,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 +370,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,14 @@ 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);
     store.reset();
   }
   template.fields.forEach(field => {
@@ -16,3 +17,19 @@ export const createTemplateFieldStore = (template) => {
   });
   return store;
 };
+export const createTemplateFieldStoreFromEnvelope = (envelope) => {
+  let store = getTemplateFieldStore(envelope.template_id);
+  if (!store) {
+    console.log('Creating field store for envelope', envelope.id, envelope.template_id);
+    store = createStore({});
+    templateFieldStores[envelope.template_id] = store;
+  }
+  else {
+    console.log('Resetting field store for envelope', envelope.id, envelope.template_id);
+    store.reset();
+  }
+  envelope.fields.forEach(field => {
+    store.set(field.name, field);
+  });
+  return store;
+};

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); };

package/dist/collection/utils/utils.js

@@ -63,6 +63,7 @@ export const setControlStyles = (el, field, xScale, yScale, option) => {
   var _a, _b, _c, _d;
   const settings = field.setting || field.settings;
   let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = settings;
+  // console.log('scs', field, settings, x, y);
   const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
   if (optionSettings) {
     x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
@@ -96,6 +97,7 @@ export const updateDocumentFieldValue = (field) => {
 };
 export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
   var _a, _b;
+  // console.log('rdf', field);
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
   // console.log('[renderDocumentField]', field, docPage, roleIndex, fieldOptions);
   const controlsDiv = document.getElementById(docPage.containerId + '-controls');
@@ -129,6 +131,8 @@ export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) =>
       el.field = field;
       el.setAttribute('id', id);
       el.setAttribute('roleIndex', roleIndex);
+      el.setAttribute('fieldname', field.name);
+      el.setAttribute('templateid', 'template_id' in field ? field.template_id : 'PREVIEW');
       if (disabled) {
         el.setAttribute('tabindex', -1);
         el.setAttribute('disabled', true);
@@ -283,13 +287,6 @@ export const saveAttachment = async (endpoint, envelope, documentId) => {
   const data = await Envelopes.getEnvelopeFile(endpoint, envelope.id, documentId);
   downloadBlob(data, fileName);
 };
-export const saveCertificate = async (endpoint, envelope, documentId) => {
-  // e.g "Colorado Motor Vehicle Bill of Sale_certificate.pdf"
-  const date = format(new Date(envelope.updated_at), FORMAT_DATE);
-  const fileName = `${envelope.name} - ${date}_certificate.pdf`;
-  const data = await Envelopes.getEnvelopeFile(endpoint, envelope.id, documentId);
-  downloadBlob(data, fileName);
-};
 export const saveEnvelopesAsZip = async (endpoint, envelopes) => {
   var _a;
   const zip = new jszip();

package/dist/components/EnvelopeStore.js

@@ -1,5 +1,5 @@
 import { c as createStore } from './index4.js';
-import { m as getEnvelope } from './Envelopes.js';
+import { b as getEnvelope } from './Envelopes.js';
 
 const createEnvelopeStore = (envelopeId) => {
   const now = new Date().toISOString();

package/dist/components/Envelopes.js

@@ -259,4 +259,4 @@ var listEnvelopes = function (endpoint, params) {
         .then(function (r) { return r.data; });
 };
 
-export { getSigningSession as a, updateEnvelopeFieldSignature as b, cancelEnvelope as c, updateEnvelopeFieldInitials as d, uploadEnvelopeFieldAttachment as e, getEnvelopeDocumentPageDisplayUri as f, getSummary as g, createEnvelope as h, getDocumentDownloadLink as i, getEnvelopeFile as j, getFieldAttachment as k, listEnvelopes as l, getEnvelope as m, throttledGetEnvelope as t, updateEnvelopeField as u };
+export { getSigningSession as a, getEnvelope as b, cancelEnvelope as c, updateEnvelopeFieldSignature as d, updateEnvelopeFieldInitials as e, uploadEnvelopeFieldAttachment as f, getSummary as g, getEnvelopeDocumentPageDisplayUri as h, createEnvelope as i, getDocumentDownloadLink as j, getEnvelopeFile as k, listEnvelopes as l, getFieldAttachment as m, throttledGetEnvelope as t, updateEnvelopeField as u };

package/dist/components/TemplateFieldStore.js

@@ -0,0 +1,38 @@
+import { c as createStore } from './index4.js';
+
+const templateFieldStores = {};
+const getTemplateFieldStore = (templateId) => templateFieldStores[templateId];
+const createTemplateFieldStore = (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);
+    store.reset();
+  }
+  template.fields.forEach(field => {
+    store.set(field.name, field);
+  });
+  return store;
+};
+const createTemplateFieldStoreFromEnvelope = (envelope) => {
+  let store = getTemplateFieldStore(envelope.template_id);
+  if (!store) {
+    console.log('Creating field store for envelope', envelope.id, envelope.template_id);
+    store = createStore({});
+    templateFieldStores[envelope.template_id] = store;
+  }
+  else {
+    console.log('Resetting field store for envelope', envelope.id, envelope.template_id);
+    store.reset();
+  }
+  envelope.fields.forEach(field => {
+    store.set(field.name, field);
+  });
+  return store;
+};
+
+export { createTemplateFieldStore as a, createTemplateFieldStoreFromEnvelope as c, getTemplateFieldStore as g };

package/dist/components/TemplateStore.js

@@ -1,23 +1,6 @@
 import { c as createStore } from './index4.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;
-};
+import { a as createTemplateFieldStore } from './TemplateFieldStore.js';
 
 const createTemplateStore = (templateId) => {
   const now = new Date().toISOString();
@@ -86,6 +69,7 @@ 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);
@@ -97,9 +81,8 @@ 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 { getTemplateFieldStore as a, getRoleNames as b, createTemplateFieldStore as c, getTemplateStore as g };
+export { getRoleNames as a, getTemplateStore as g };

package/dist/components/utils.js

@@ -1,5 +1,5 @@
 import { a as createCommonjsModule, c as commonjsGlobal, b as commonjsRequire } from './_commonjsHelpers.js';
-import { j as getEnvelopeFile, k as getFieldAttachment } from './Envelopes.js';
+import { k as getEnvelopeFile, m as getFieldAttachment } from './Envelopes.js';
 import './Types.js';
 import { d as downloadBlob } from './Files.js';
 import { a as FORMAT_DATE } from './Types2.js';
@@ -84,6 +84,7 @@ const setControlStyles = (el, field, xScale, yScale, option) => {
   var _a, _b, _c, _d;
   const settings = field.setting || field.settings;
   let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = settings;
+  // console.log('scs', field, settings, x, y);
   const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
   if (optionSettings) {
     x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
@@ -117,6 +118,7 @@ const updateDocumentFieldValue = (field) => {
 };
 const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
   var _a, _b;
+  // console.log('rdf', field);
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
   // console.log('[renderDocumentField]', field, docPage, roleIndex, fieldOptions);
   const controlsDiv = document.getElementById(docPage.containerId + '-controls');
@@ -150,6 +152,8 @@ const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
       el.field = field;
       el.setAttribute('id', id);
       el.setAttribute('roleIndex', roleIndex);
+      el.setAttribute('fieldname', field.name);
+      el.setAttribute('templateid', 'template_id' in field ? field.template_id : 'PREVIEW');
       if (disabled) {
         el.setAttribute('tabindex', -1);
         el.setAttribute('disabled', true);