@verdocs/web-sdk 2.3.15 → 2.3.18

package/dist/cjs/verdocs-field-dropdown.cjs.entry.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5463795e.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-0916d10f.js');
+const TemplateFieldStore = require('./TemplateFieldStore-48265c39.js');
+const utils = require('./utils-c531813b.js');
+require('./index-f712049c.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Envelopes-0b9deb2c.js');
 require('./Types-f89f9116.js');
@@ -12,7 +14,7 @@ require('./Files-4bdc0c0f.js');
 require('./Types-fb95ed6b.js');
 require('./index-7c19ba1d.js');
 
-const verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown.disabled{opacity:0.5}verdocs-field-dropdown select{cursor:inherit;position:absolute;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 6px, calc(100% - 3px) 6px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2);padding:0 5px}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid #cc0000}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-dropdown verdocs-button-panel{display:block;margin-left:-33px;margin-top:-1px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
+const verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown.disabled{opacity:0.5}verdocs-field-dropdown select{cursor:inherit;position:absolute;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 6px, calc(100% - 3px) 6px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2);padding:0 5px}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid #cc0000}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-dropdown verdocs-button-panel{display:block;margin-left:-33px;margin-top:-1px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-dropdown .settings-icon{position:absolute;top:-2px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-dropdown .settings-icon svg{fill:#707ae5}verdocs-field-dropdown .settings-icon:hover{opacity:1}";
 
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldDropdown = class {
@@ -21,14 +23,18 @@ const VerdocsFieldDropdown = class {
     this.fieldChange = index.createEvent(this, "fieldChange", 7);
     this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.deleted = index.createEvent(this, "deleted", 7);
+    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();
@@ -37,36 +43,46 @@ const VerdocsFieldDropdown = class {
     this.fieldChange.emit(e.target.value);
   }
   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 = TemplateFieldStore.getTemplateFieldStore(this.templateid);
+  }
   render() {
     var _a, _b;
-    const settings = utils.getFieldSettings(this.field);
+    const field = this.fieldStore.get(this.fieldname);
+    if (!field) {
+      return index.h(index.Fragment, null);
+    }
+    const settings = utils.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'] || Colors.getRGBA(this.roleindex);
+    const backgroundColor = field['rgba'] || Colors.getRGBA(this.roleindex);
     const value = (settings === null || settings === void 0 ? void 0 : settings.value) || '';
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, value);
     }
-    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, index.h("select", { tabIndex: settings.order, disabled: disabled, ref: el => (this.el = el), onChange: e => this.handleChange(e) }, index.h("option", { value: "" }, "Select..."), (settings.options || []).map(option => (index.h("option", { value: option.id, selected: option.value === value }, option.value)))), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, index.h("select", { tabIndex: settings.order, disabled: disabled, ref: el => (this.el = el), onChange: e => this.handleChange(e) }, index.h("option", { value: "" }, "Select..."), (settings.options || []).map(option => (index.h("option", { value: option.id, selected: option.value === value }, option.value)))), this.editable && (index.h(index.Fragment, null, index.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 && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, index.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: "Dropdowns are used to capture a recipient's selection of one of several options." })))))));
   }
 };
 VerdocsFieldDropdown.style = verdocsFieldDropdownCss;

package/dist/cjs/verdocs-field-initial.cjs.entry.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5463795e.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-0916d10f.js');
+const TemplateFieldStore = require('./TemplateFieldStore-48265c39.js');
+const utils = require('./utils-c531813b.js');
+require('./index-f712049c.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Envelopes-0b9deb2c.js');
 require('./Types-f89f9116.js');
@@ -12,7 +14,7 @@ require('./Files-4bdc0c0f.js');
 require('./Types-fb95ed6b.js');
 require('./index-7c19ba1d.js');
 
-const verdocsFieldInitialCss = "verdocs-field-initial{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-initial.disabled{opacity:0.5}verdocs-field-initial.done{border:none;opacity:1}verdocs-field-initial img{display:block;max-width:100%;max-height:100%}verdocs-field-initial button{cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-initial button.hide{display:none}verdocs-field-initial.required{border:1px solid #cc0000}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-initial verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-initial verdocs-button-panel[data-active],verdocs-field-initial verdocs-button-panel:hover{opacity:1}verdocs-field-initial verdocs-button-panel .icon svg{fill:#333333}verdocs-field-initial verdocs-button-panel .icon:hover svg{fill:#000000}";
+const verdocsFieldInitialCss = "verdocs-field-initial{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-initial.disabled{opacity:0.5}verdocs-field-initial.done{border:none;opacity:1}verdocs-field-initial img{display:block;max-width:100%;max-height:100%}verdocs-field-initial button{cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-initial button.hide{display:none}verdocs-field-initial.required{border:1px solid #cc0000}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-initial verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-initial verdocs-button-panel[data-active],verdocs-field-initial verdocs-button-panel:hover{opacity:1}verdocs-field-initial verdocs-button-panel .icon svg{fill:#333333}verdocs-field-initial verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-initial .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-initial .settings-icon svg{fill:#707ae5}verdocs-field-initial .settings-icon:hover{opacity:1}";
 
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldInitial = class {
@@ -24,8 +26,9 @@ const VerdocsFieldInitial = class {
     this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.settingsPress = index.createEvent(this, "settingsPress", 7);
     this.deleted = index.createEvent(this, "deleted", 7);
+    this.fieldStore = null;
     this.templateid = '';
-    this.field = null;
+    this.fieldname = '';
     this.disabled = false;
     this.initials = '';
     this.editable = false;
@@ -33,11 +36,17 @@ const VerdocsFieldInitial = class {
     this.done = false;
     this.roleindex = 0;
     this.rerender = 0;
+    this.xscale = 1;
+    this.yscale = 1;
+    this.showingProperties = false;
     this.tempInitials = '';
   }
   async focusField() {
     this.handleShow();
   }
+  async componentWillLoad() {
+    this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
+  }
   hideDialog() {
     var _a;
     (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
@@ -59,36 +68,43 @@ const VerdocsFieldInitial = class {
     document.body.append(this.dialog);
   }
   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++;
   }
   render() {
-    var _a, _b, _c;
-    const settings = utils.getFieldSettings(this.field);
+    var _a, _b;
+    const field = this.fieldStore.get(this.fieldname);
+    if (!field) {
+      return index.h(index.Fragment, null);
+    }
+    const settings = utils.getFieldSettings(field);
     const value = settings.base64 || this.tempInitials;
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    const backgroundColor = this.field['rgba'] || Colors.getRGBA(this.roleindex);
+    const backgroundColor = field['rgba'] || Colors.getRGBA(this.roleindex);
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, value && index.h("img", { src: value, alt: "Initials" }));
     }
-    return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, value ? (index.h("img", { src: value, alt: "Initials" })) : (index.h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (index.h(index.Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, value ? (index.h("img", { src: value, alt: "Initials" })) : (index.h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (index.h(index.Fragment, null, index.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 && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${this.fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.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: "initial fields capture the recipient's initials on a clause or page." })))))));
   }
 };
 VerdocsFieldInitial.style = verdocsFieldInitialCss;

package/dist/cjs/verdocs-field-payment.cjs.entry.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5463795e.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-0916d10f.js');
+const TemplateFieldStore = require('./TemplateFieldStore-48265c39.js');
+const utils = require('./utils-c531813b.js');
+require('./index-f712049c.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Envelopes-0b9deb2c.js');
 require('./Types-f89f9116.js');
@@ -12,7 +14,7 @@ require('./Files-4bdc0c0f.js');
 require('./Types-fb95ed6b.js');
 require('./index-7c19ba1d.js');
 
-const verdocsFieldPaymentCss = "verdocs-field-payment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment.disabled{opacity:0.5}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldPaymentCss = "verdocs-field-payment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment.disabled{opacity:0.5}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-payment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-payment .settings-icon svg{fill:#707ae5}verdocs-field-payment .settings-icon:hover{opacity:1}";
 
 const VerdocsFieldPayment = class {
   constructor(hostRef) {
@@ -40,8 +42,9 @@ const VerdocsFieldPayment = class {
     this.fontSize = 11;
     this.averageFontWidth = 5;
     this.requiredFields = [];
+    this.fieldStore = null;
     this.templateid = '';
-    this.field = null;
+    this.fieldname = '';
     this.disabled = false;
     this.fields = undefined;
     this.pageNum = undefined;
@@ -56,16 +59,19 @@ const VerdocsFieldPayment = class {
     this.currentInitialId = undefined;
     this.focused = false;
     this.signed = false;
+    this.xscale = 1;
+    this.yscale = 1;
     this.rerender = 0;
     this.preparedMessage = undefined;
     this.signatureUrl = '';
     this.roleindex = 0;
+    this.showingProperties = false;
   }
   componentWillLoad() {
+    this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
     // Load validators
     // Load fields
     // Get role names
-    console.log('sign field', this.field);
     if (this.recipients && this.recipients.length > 0) {
       const preparer = this.recipients.find(r => r.type === 'preparer');
       console.log('Found preparer', preparer);
@@ -105,13 +111,13 @@ const VerdocsFieldPayment = class {
   //     transform-origin: bottom left;
   //     opacity: 1;
   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();
     }
@@ -119,11 +125,15 @@ const VerdocsFieldPayment = class {
   }
   render() {
     var _a, _b;
-    const settings = utils.getFieldSettings(this.field);
+    const field = this.fieldStore.get(this.fieldname);
+    if (!field) {
+      return index.h(index.Fragment, null);
+    }
+    const settings = utils.getFieldSettings(field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     console.log('Payment field', settings);
-    const backgroundColor = this.field['rgba'] || Colors.getRGBA(this.roleindex);
-    return (index.h(index.Host, { class: { focused: this.focused, disabled }, style: { backgroundColor } }, index.h("button", { class: { hide: this.signed } }, "$"), this.signed ? index.h("div", { class: "frame" }) : index.h("div", { style: { display: 'none' } }), index.h("img", { width: "100%", height: "100%", src: this.signatureUrl })));
+    const backgroundColor = field['rgba'] || Colors.getRGBA(this.roleindex);
+    return (index.h(index.Host, { class: { focused: this.focused, disabled }, style: { backgroundColor } }, index.h("button", { class: { hide: this.signed } }, "$"), this.signed ? index.h("div", { class: "frame" }) : index.h("div", { style: { display: 'none' } }), index.h("img", { width: "100%", height: "100%", src: this.signatureUrl, alt: "Payment Icon" })));
   }
 };
 VerdocsFieldPayment.style = verdocsFieldPaymentCss;

package/dist/cjs/verdocs-field-radio-button.cjs.entry.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5463795e.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-0916d10f.js');
+const TemplateFieldStore = require('./TemplateFieldStore-48265c39.js');
+const utils = require('./utils-c531813b.js');
+require('./index-f712049c.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Envelopes-0b9deb2c.js');
 require('./Types-f89f9116.js');
@@ -12,7 +14,7 @@ require('./Files-4bdc0c0f.js');
 require('./Types-fb95ed6b.js');
 require('./index-7c19ba1d.js');
 
-const verdocsFieldRadioButtonCss = "verdocs-field-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:12px;height:12px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button svg{margin-top:4px}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button.disabled.done{opacity:1}verdocs-field-radio-button input{cursor:inherit}verdocs-field-radio-button.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio-button:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button:not(.done) input[type=radio]+label:before{content:\"\";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button:not(.done) input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button:not(.done) input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-radio-button verdocs-button-panel{margin-left:-20px;margin-top:-7px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
+const verdocsFieldRadioButtonCss = "verdocs-field-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:12px;height:12px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button svg{margin-top:4px}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button.disabled.done{opacity:1}verdocs-field-radio-button input{cursor:inherit}verdocs-field-radio-button.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio-button:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button:not(.done) input[type=radio]+label:before{content:\"\";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button:not(.done) input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button:not(.done) input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-radio-button verdocs-button-panel{margin-left:-20px;margin-top:-7px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-radio-button .settings-icon{position:absolute;top:-6px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-radio-button .settings-icon svg{fill:#707ae5}verdocs-field-radio-button .settings-icon:hover{opacity:1}";
 
 const RadioIconUnselected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
 const RadioIconSelected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
@@ -22,8 +24,9 @@ const VerdocsFieldRadioButton = class {
     index.registerInstance(this, hostRef);
     this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.deleted = index.createEvent(this, "deleted", 7);
+    this.fieldStore = null;
     this.templateid = '';
-    this.field = null;
+    this.fieldname = '';
     this.option = 0;
     this.disabled = false;
     this.done = false;
@@ -31,40 +34,53 @@ const VerdocsFieldRadioButton = class {
     this.editable = false;
     this.moveable = false;
     this.rerender = 0;
+    this.xscale = 1;
+    this.yscale = 1;
+    this.showingProperties = false;
   }
   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 = TemplateFieldStore.getTemplateFieldStore(this.templateid);
+  }
   render() {
     var _a, _b;
-    const settings = utils.getFieldSettings(this.field);
+    const field = this.fieldStore.get(this.fieldname);
+    if (!field) {
+      return index.h(index.Fragment, null);
+    }
+    const settings = utils.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'] || Colors.getRGBA(this.roleindex);
-    const required = this.field.required;
+    const backgroundColor = field['rgba'] || Colors.getRGBA(this.roleindex);
+    const required = field.required;
     const option = settings.options[this.option];
-    const id = `${this.field.name}-${option.id}`;
+    const id = `${field.name}-${option.id}`;
     if (this.done) {
       return (index.h(index.Host, { class: { done: this.done }, style: { maxWidth: '10px' } }, index.h("span", { innerHTML: !!option.selected ? RadioIconSelected : RadioIconUnselected })));
     }
-    return (index.h(index.Host, { class: { required, disabled }, style: { backgroundColor } }, index.h("input", { id: id, type: "radio", name: this.field.name, value: option.id, tabIndex: settings.order, checked: !!option.selected, disabled: disabled, required: settings.required }), index.h("label", { htmlFor: id }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (index.h(index.Host, { class: { required, disabled }, style: { backgroundColor } }, index.h("input", { id: id, type: "radio", name: field.name, value: option.id, tabIndex: settings.order, checked: !!option.selected, disabled: disabled, required: settings.required }), index.h("label", { htmlFor: id }), this.editable && (index.h(index.Fragment, null, index.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 && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, index.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: "Radio buttons capture the recipient's selection of just one of several related (exclusive) options." })))))));
   }
 };
 VerdocsFieldRadioButton.style = verdocsFieldRadioButtonCss;

package/dist/cjs/verdocs-field-signature.cjs.entry.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5463795e.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-0916d10f.js');
+const TemplateFieldStore = require('./TemplateFieldStore-48265c39.js');
+const utils = require('./utils-c531813b.js');
+require('./index-f712049c.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Envelopes-0b9deb2c.js');
 require('./Types-f89f9116.js');
@@ -12,7 +14,7 @@ require('./Files-4bdc0c0f.js');
 require('./Types-fb95ed6b.js');
 require('./index-7c19ba1d.js');
 
-const verdocsFieldSignatureCss = "verdocs-field-signature{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature.disabled{opacity:0.5}verdocs-field-signature.done{border:none;opacity:1}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature button{cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid #cc0000}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-signature verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-signature verdocs-button-panel[data-active],verdocs-field-signature verdocs-button-panel:hover{opacity:1}verdocs-field-signature verdocs-button-panel .icon svg{fill:#333333}verdocs-field-signature verdocs-button-panel .icon:hover svg{fill:#000000}";
+const verdocsFieldSignatureCss = "verdocs-field-signature{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature.disabled{opacity:0.5}verdocs-field-signature.done{border:none;opacity:1}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature button{cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid #cc0000}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-signature verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-signature verdocs-button-panel[data-active],verdocs-field-signature verdocs-button-panel:hover{opacity:1}verdocs-field-signature verdocs-button-panel .icon svg{fill:#333333}verdocs-field-signature verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-signature .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-signature .settings-icon svg{fill:#707ae5}verdocs-field-signature .settings-icon:hover{opacity:1}";
 
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldSignature = class {
@@ -22,8 +24,9 @@ const VerdocsFieldSignature = class {
     this.settingsPress = index.createEvent(this, "settingsPress", 7);
     this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.deleted = index.createEvent(this, "deleted", 7);
+    this.fieldStore = null;
     this.templateid = '';
-    this.field = null;
+    this.fieldname = '';
     this.name = '';
     this.disabled = false;
     this.editable = false;
@@ -31,6 +34,9 @@ const VerdocsFieldSignature = class {
     this.done = false;
     this.roleindex = 0;
     this.rerender = 0;
+    this.xscale = 1;
+    this.yscale = 1;
+    this.showingProperties = false;
     this.tempSignature = '';
   }
   async focusField() {
@@ -58,36 +64,46 @@ const VerdocsFieldSignature = class {
     document.body.append(this.dialog);
   }
   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 = TemplateFieldStore.getTemplateFieldStore(this.templateid);
+  }
   render() {
-    var _a, _b, _c;
-    const settings = utils.getFieldSettings(this.field);
+    var _a, _b;
+    const field = this.fieldStore.get(this.fieldname);
+    if (!field) {
+      return index.h(index.Fragment, null);
+    }
+    const settings = utils.getFieldSettings(field);
     const value = settings.base64 || this.tempSignature;
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    const backgroundColor = this.field['rgba'] || Colors.getRGBA(this.roleindex);
+    const backgroundColor = field['rgba'] || Colors.getRGBA(this.roleindex);
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, value && index.h("img", { src: value, alt: "Signature" }));
     }
-    return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, value ? index.h("img", { src: value, alt: "Signature" }) : index.h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (index.h(index.Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, value ? index.h("img", { src: value, alt: "Signature" }) : index.h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (index.h(index.Fragment, null, index.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 && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, index.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: "Signature fields capture a recipient's signature on a document." })))))));
   }
 };
 VerdocsFieldSignature.style = verdocsFieldSignatureCss;