@verdocs/web-sdk 1.12.14 → 1.12.15

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

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { i as interact } from './interact.min.js';
 import { g as getRGBA } from './Colors.js';
 import { s as state } from './templateStore.js';
 import { g as getFieldSettings } from './utils.js';
@@ -11,7 +12,7 @@ import { d as defineCustomElement$4 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$3 } from './verdocs-template-field-properties2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{width:100%;height:100%;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:none;outline:none}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox 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-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}";
+const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{width:100%;height:100%;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:none;outline:none}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox .resizer{position:absolute;bottom:1px;right:1px;width:8px;height:8px;z-index:9999}verdocs-field-textbox .resizer:hover{cursor:nwse-resize}verdocs-field-textbox .resizer .resizer-inner{position:absolute;bottom:0}verdocs-field-textbox .resizer .resizer-inner:before{position:absolute;top:-4px;left:-0.5px;content:\"\";display:block;width:10px;height:1px;background-color:rgba(0, 0, 0, 0.32);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}verdocs-field-textbox .resizer .resizer-inner:after{position:absolute;top:-1.5px;left:4.5px;content:\"\";display:block;width:5px;height:1px;background-color:rgba(0, 0, 0, 0.32);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}verdocs-field-textbox 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-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}";
 
 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 VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -29,7 +30,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.rerender = 0;
   }
   async focusField() {
-    this.el.focus();
+    this.inputEl.focus();
   }
   async showSettingsPanel() {
     const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
@@ -45,16 +46,45 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
     state.updateCount++;
   }
+  componentDidRender() {
+    interact.dynamicDrop(true);
+    if (this.editable) {
+      interact(this.resizeHandle).resizable({
+        listeners: {
+          start(event) {
+            console.log('[TEXTBOX] Resize started', event.type, event.target);
+          },
+          move: this.handleResize.bind(this),
+          end(event) {
+            console.log('[TEXTBOX] Resize end', event);
+          },
+        },
+      });
+    }
+  }
+  handleResize(event) {
+    console.log('[TEXTBOX] Resize', event.delta);
+    const oldX = +(event.target.getAttribute('resizeX') || 0);
+    const oldY = +(event.target.getAttribute('resizeY') || 0);
+    const newX = event.dx + oldX;
+    const newY = event.dy + oldY;
+    this.el.style.width = `${parseFloat(this.el.style.width || '0') + event.dx}px`;
+    // Single line text fields are not resizeable in height
+    // this.el.style.height = `${parseFloat(this.el.style.height || '0') + event.dy}px`;
+    event.target.setAttribute('resizeX', newX);
+    event.target.setAttribute('resizeY', newY);
+  }
   render() {
     var _a, _b, _c, _d;
     const settings = getFieldSettings(this.field);
     let disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
     const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
+    console.log('settings', settings);
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }), this.editable && (h("div", { class: "resizer", ref: el => (this.resizeHandle = el) }, h("div", { class: "resizer-inner" }))), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -64,6 +94,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         return this.hideSettingsPanel();
       } })))));
   }
+  get el() { return this; }
   static get style() { return verdocsFieldTextboxCss; }
 }, [0, "verdocs-field-textbox", {
     "field": [16],

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

@@ -11,9 +11,11 @@ import { d as defineCustomElement$3 } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$2 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
 
-const verdocsTemplateFieldPropertiesCss = "verdocs-template-field-properties{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input{margin:0}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}verdocs-template-field-properties h6{-ms-flex:1;flex:1;font-size:16px;font-weight:bold;margin:0 0 8px 0;color:#092c4c}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:#a50021}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 10px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}";
+const verdocsTemplateFieldPropertiesCss = "verdocs-template-field-properties{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input{margin:0;-ms-flex:1;flex:1}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}verdocs-template-field-properties h6{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:bold;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;color:#092c4c}verdocs-template-field-properties h6 .help-icon{opacity:0.5}verdocs-template-field-properties h6 .help-icon:hover{opacity:1;cursor:pointer}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:#a50021}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 10px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}";
 
+const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
+const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
 const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -31,10 +33,12 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     this.setting = null;
     this.name = '';
     this.roleName = '';
+    this.fieldType = '';
     this.required = false;
     this.options = [];
     this.placeholder = '';
     this.defaultValue = '';
+    this.showingHelp = true;
   }
   async componentWillLoad() {
     var _a, _b, _c, _d, _e;
@@ -61,6 +65,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
       this.name = field.name;
       this.roleName = field.role_name;
       this.required = field.required;
+      this.fieldType = field.type;
       this.placeholder = field.label; // TODO: Talk about how we want to handle labels/placeholders
       this.defaultValue = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.value) || '';
       this.setting = field.setting || {};
@@ -153,13 +158,20 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     if (!this.endpoint.session || !state.template) {
       return h(Host, { class: "empty" });
     }
-    return (h(Host, null, h("h6", null, "Field Settings"), 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) => {
+    if (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" }, "Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the \"name\" field."), h("p", { class: "instructions" }, "If marked required, the participant must complete the field before proceeding..")));
+    }
+    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 = 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) => {
         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: state.template.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
         this.roleName = e.target.value;
         this.dirty = true;
-      } }), h("verdocs-help-icon", { text: "The participant who will complete this field." })), ['textbox', 'textarea'].includes(this.type) && (h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.name, autocomplete: "off", helpText: "Placeholder to display if the field is empty.", placeholder: "Placeholder...", onInput: (e) => {
+      } })), ['textbox', 'textarea'].includes(this.type) && (h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.name, autocomplete: "off",
+      // helpText="Placeholder to display if the field is empty."
+      placeholder: "Placeholder...", onInput: (e) => {
         this.placeholder = e.target.value;
         this.dirty = true;
       } })), h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Required"), h("verdocs-checkbox", { id: "verdocs-is-required", name: "is-required", checked: this.required, value: "on", onInput: (e) => {
@@ -175,7 +187,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
         backgroundColor: '#333333',
         padding: '5px 8px',
         color: '#ffffff',
-      } }, "Options ", h("verdocs-help-icon", { text: "Each option requires a unique ID and value. The ID will be stored when the user selects an option." })), h("div", { class: "row-header" }, h("h6", null, "ID"), h("h6", null, "Label"), h("div", { style: { width: '34px' } })), this.options.map((option, index) => (h("div", { class: "row option-row", key: index }, h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
+      } }, "Options"), h("div", { class: "row-header" }, h("h6", null, "ID"), h("h6", null, "Label"), h("div", { style: { width: '34px' } })), this.options.map((option, index) => (h("div", { class: "row option-row", key: index }, h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
         this.options[index].id = e.target.value;
         this.dirty = true;
       } }), h("verdocs-text-input", { id: `verdocs-option-value-${option.id}`, value: option.value, placeholder: "Display value", onInput: (e) => {
@@ -201,10 +213,12 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     "setting": [32],
     "name": [32],
     "roleName": [32],
+    "fieldType": [32],
     "required": [32],
     "options": [32],
     "placeholder": [32],
-    "defaultValue": [32]
+    "defaultValue": [32],
+    "showingHelp": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-03-13T15:41:37",
+  "timestamp": "2023-03-14T15:28:31",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -1527,7 +1527,6 @@
           "verdocs-component-error",
           "verdocs-text-input",
           "verdocs-select-input",
-          "verdocs-help-icon",
           "verdocs-checkbox",
           "verdocs-button"
         ],
@@ -1748,7 +1747,6 @@
           "verdocs-component-error",
           "verdocs-text-input",
           "verdocs-select-input",
-          "verdocs-help-icon",
           "verdocs-checkbox",
           "verdocs-button"
         ],
@@ -1969,7 +1967,6 @@
           "verdocs-component-error",
           "verdocs-text-input",
           "verdocs-select-input",
-          "verdocs-help-icon",
           "verdocs-checkbox",
           "verdocs-button"
         ],
@@ -2243,7 +2240,6 @@
           "verdocs-component-error",
           "verdocs-text-input",
           "verdocs-select-input",
-          "verdocs-help-icon",
           "verdocs-checkbox",
           "verdocs-button"
         ]
@@ -2815,7 +2811,6 @@
           "verdocs-component-error",
           "verdocs-text-input",
           "verdocs-select-input",
-          "verdocs-help-icon",
           "verdocs-checkbox",
           "verdocs-button"
         ],
@@ -3071,7 +3066,6 @@
           "verdocs-component-error",
           "verdocs-text-input",
           "verdocs-select-input",
-          "verdocs-help-icon",
           "verdocs-checkbox",
           "verdocs-button"
         ]
@@ -3280,7 +3274,6 @@
           "verdocs-component-error",
           "verdocs-text-input",
           "verdocs-select-input",
-          "verdocs-help-icon",
           "verdocs-checkbox",
           "verdocs-button"
         ],
@@ -3492,7 +3485,6 @@
           "verdocs-component-error",
           "verdocs-text-input",
           "verdocs-select-input",
-          "verdocs-help-icon",
           "verdocs-checkbox",
           "verdocs-button"
         ],
@@ -3704,7 +3696,6 @@
           "verdocs-component-error",
           "verdocs-text-input",
           "verdocs-select-input",
-          "verdocs-help-icon",
           "verdocs-checkbox",
           "verdocs-button"
         ],
@@ -3797,16 +3788,12 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "verdocs-template-field-properties",
         "verdocs-template-role-properties",
         "verdocs-template-sender",
         "verdocs-text-input"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "verdocs-template-field-properties": [
-          "verdocs-help-icon"
-        ],
         "verdocs-template-role-properties": [
           "verdocs-help-icon"
         ],
@@ -5801,7 +5788,6 @@
         "verdocs-component-error",
         "verdocs-text-input",
         "verdocs-select-input",
-        "verdocs-help-icon",
         "verdocs-checkbox",
         "verdocs-button"
       ],
@@ -5810,7 +5796,6 @@
           "verdocs-component-error",
           "verdocs-text-input",
           "verdocs-select-input",
-          "verdocs-help-icon",
           "verdocs-checkbox",
           "verdocs-button"
         ],

package/dist/esm/{interact.min-dc773ac7.js → interact.min-9ecbb023.js}

@@ -1,4 +1,4 @@
-import { c as getDefaultExportFromCjs, d as createCommonjsModule } from './utils-14a84a09.js';
+import { a as getDefaultExportFromCjs, c as createCommonjsModule } from './utils-be76f4d8.js';
 
 var interact_min = createCommonjsModule(function (module, exports) {
 /* interact.js 1.10.17 | https://interactjs.io/license */

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy(JSON.parse("[[\"verdocs-template-roles\",[[0,\"verdocs-template-roles\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"showingRoleDialog\":[32],\"showingSenderDialog\":[32],\"sender\":[32],\"forceRerender\":[32]}]]],[\"verdocs-field-initial\",[[0,\"verdocs-field-initial\",{\"field\":[16],\"disabled\":[4],\"initials\":[1],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"tempInitials\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-signature\",[[0,\"verdocs-field-signature\",{\"field\":[16],\"name\":[1],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"tempSignature\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-checkbox\",[[0,\"verdocs-field-checkbox\",{\"field\":[16],\"option\":[2],\"disabled\":[4],\"done\":[4],\"roleindex\":[2],\"editable\":[4],\"moveable\":[4],\"rerender\":[2],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-date\",[[0,\"verdocs-field-date\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"containerId\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-dropdown\",[[0,\"verdocs-field-dropdown\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-radio-button\",[[0,\"verdocs-field-radio-button\",{\"field\":[16],\"option\":[2],\"disabled\":[4],\"done\":[4],\"roleindex\":[2],\"editable\":[4],\"moveable\":[4],\"rerender\":[2],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-textarea\",[[0,\"verdocs-field-textarea\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-textbox\",[[0,\"verdocs-field-textbox\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-timestamp\",[[0,\"verdocs-field-timestamp\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-loader\",[[0,\"verdocs-loader\"]]],[\"verdocs-build\",[[0,\"verdocs-build\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"step\":[32],\"pdfUrl\":[32],\"template\":[32]}]]],[\"verdocs-sign\",[[0,\"verdocs-sign\",{\"envelopeId\":[1,\"envelope-id\"],\"roleId\":[1,\"role-id\"],\"inviteCode\":[1,\"invite-code\"],\"recipient\":[32],\"signerToken\":[32],\"hasSignature\":[32],\"nextButtonLabel\":[32],\"nextSubmits\":[32],\"errorMessage\":[32],\"focusedField\":[32],\"isDone\":[32],\"showDone\":[32],\"finishLater\":[32],\"showFinishLater\":[32],\"agreed\":[32],\"documentsSingularPlural\":[32]}]]],[\"verdocs-template-properties\",[[0,\"verdocs-template-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"template\":[32],\"name\":[32],\"visibility\":[32],\"sendReminders\":[32],\"firstReminderDays\":[32],\"reminderDays\":[32]}]]],[\"verdocs-template-reminders\",[[0,\"verdocs-template-reminders\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"showPlanBlocker\":[32],\"sendReminders\":[32],\"firstReminderDays\":[32],\"reminderDays\":[32],\"dirty\":[32],\"loading\":[32]}]]],[\"verdocs-template-name\",[[0,\"verdocs-template-name\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"name\":[32],\"dirty\":[32],\"loading\":[32]}]]],[\"verdocs-auth\",[[0,\"verdocs-auth\",{\"endpoint\":[16],\"visible\":[4],\"logo\":[1],\"isAuthenticated\":[32],\"displayMode\":[32],\"username\":[32],\"password\":[32],\"loggingIn\":[32],\"activeSession\":[32],\"loginError\":[32]}]]],[\"verdocs-search\",[[0,\"verdocs-search\",{\"endpoint\":[16]}]]],[\"verdocs-send\",[[0,\"verdocs-send\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"containerId\":[32],\"rolesAtLevel\":[32],\"showPickerForId\":[32],\"sessionContacts\":[32],\"rolesCompleted\":[32],\"reset\":[64]}]]],[\"verdocs-template-visibility\",[[0,\"verdocs-template-visibility\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"dirty\":[32],\"loading\":[32],\"personal\":[32],\"public\":[32]}]]],[\"verdocs-view\",[[0,\"verdocs-view\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"]}]]],[\"verdocs-upload-dialog\",[[0,\"verdocs-upload-dialog\",{\"draggingOver\":[32],\"decodedFiles\":[32]}]]],[\"verdocs-field-attachment\",[[0,\"verdocs-field-attachment\",{\"field\":[16],\"disabled\":[4],\"roleIndex\":[2,\"role-index\"],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-template-document-page\",[[0,\"verdocs-template-document-page\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"documentId\":[1,\"document-id\"],\"pageNumber\":[2,\"page-number\"],\"virtualWidth\":[2,\"virtual-width\"],\"virtualHeight\":[1026,\"virtual-height\"],\"layers\":[16],\"containerId\":[32],\"renderedWidth\":[32],\"renderedHeight\":[32],\"naturalWidth\":[32],\"naturalHeight\":[32],\"aspectRatio\":[32],\"skipFirstNotification\":[32],\"pageDisplayUri\":[32]}]]],[\"verdocs-preview\",[[0,\"verdocs-preview\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"]}]]],[\"verdocs-template-attachments\",[[0,\"verdocs-template-attachments\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"loading\":[32]}]]],[\"verdocs-envelope-sidebar\",[[0,\"verdocs-envelope-sidebar\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"activeTab\":[32],\"panelOpen\":[32]}]]],[\"verdocs-floating-menu\",[[0,\"verdocs-floating-menu\",{\"options\":[16]}]]],[\"verdocs-kba-dialog\",[[0,\"verdocs-kba-dialog\",{\"step\":[2],\"steps\":[2],\"helptitle\":[1],\"helptext\":[1],\"mode\":[1],\"label\":[1],\"placeholder\":[1],\"choices\":[16],\"response\":[32]}]]],[\"verdocs-field-payment\",[[0,\"verdocs-field-payment\",{\"field\":[16],\"disabled\":[4],\"fields\":[16],\"pageNum\":[2,\"page-num\"],\"roleName\":[1,\"role-name\"],\"fieldId\":[1,\"field-id\"],\"recipients\":[8],\"selectedRoleName\":[1,\"selected-role-name\"],\"pdfPages\":[16],\"currentSignature\":[1,\"current-signature\"],\"currentSignatureId\":[1,\"current-signature-id\"],\"currentInitial\":[1,\"current-initial\"],\"currentInitialId\":[1,\"current-initial-id\"],\"focused\":[4],\"signed\":[4],\"rerender\":[2],\"roleindex\":[2],\"preparedMessage\":[32],\"signatureUrl\":[32],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-organization-card\",[[0,\"verdocs-organization-card\",{\"organization\":[16]}]]],[\"verdocs-search-tabs\",[[0,\"verdocs-search-tabs\",{\"selected\":[32]}]]],[\"verdocs-status-indicator\",[[0,\"verdocs-status-indicator\",{\"size\":[1],\"theme\":[1],\"status\":[1],\"envelope\":[16],\"isOpen\":[32],\"recipientStatusIcons\":[32],\"containerId\":[32]}]]],[\"verdocs-template-card\",[[0,\"verdocs-template-card\",{\"template\":[16]}]]],[\"verdocs-template-tags\",[[0,\"verdocs-template-tags\",{\"tags\":[16]}]]],[\"verdocs-toggle\",[[0,\"verdocs-toggle\",{\"options\":[16],\"theme\":[1],\"selectedOption\":[32]}]]],[\"verdocs-button\",[[0,\"verdocs-button\",{\"label\":[1],\"startIcon\":[1,\"start-icon\"],\"endIcon\":[1,\"end-icon\"],\"size\":[1],\"type\":[1],\"variant\":[1],\"disabled\":[4]}]]],[\"verdocs-checkbox_4\",[[0,\"verdocs-checkbox\",{\"checked\":[4],\"name\":[1],\"label\":[1],\"value\":[1],\"theme\":[1],\"disabled\":[4]}],[0,\"verdocs-text-input\",{\"value\":[1],\"label\":[1],\"placeholder\":[1],\"autocomplete\":[1],\"helpText\":[1,\"help-text\"],\"type\":[1],\"disabled\":[4]}],[0,\"verdocs-component-error\",{\"message\":[1]}],[0,\"verdocs-help-icon\",{\"text\":[1],\"containerId\":[32]}]]],[\"verdocs-initial-dialog\",[[0,\"verdocs-initial-dialog\",{\"initials\":[1],\"fontLoaded\":[32],\"enteredInitials\":[32],\"mode\":[32]}]]],[\"verdocs-signature-dialog\",[[0,\"verdocs-signature-dialog\",{\"name\":[1],\"fontLoaded\":[32],\"enteredName\":[32],\"mode\":[32]}]]],[\"verdocs-toggle-button\",[[0,\"verdocs-toggle-button\",{\"active\":[4],\"icon\":[1],\"label\":[1],\"size\":[1],\"_active\":[32]}]]],[\"verdocs-contact-picker\",[[0,\"verdocs-contact-picker\",{\"endpoint\":[16],\"templateRole\":[16],\"contactSuggestions\":[16],\"name\":[32],\"email\":[32],\"phone\":[32],\"message\":[32],\"showSuggestions\":[32],\"showMessage\":[32],\"delegator\":[32],\"nameFieldId\":[32],\"emailFieldId\":[32],\"phoneFieldId\":[32]}]]],[\"verdocs-radio-button\",[[0,\"verdocs-radio-button\",{\"checked\":[4],\"name\":[1],\"value\":[1],\"disabled\":[4]}]]],[\"verdocs-template-role-properties_2\",[[0,\"verdocs-template-role-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"roleName\":[1,\"role-name\"],\"sender\":[1],\"dirty\":[32],\"saving\":[32],\"name\":[32],\"type\":[32],\"fullName\":[32],\"email\":[32],\"phone\":[32],\"allowDelegation\":[32]}],[0,\"verdocs-template-sender\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"sender\":[1],\"saving\":[32]}]]],[\"verdocs-template-create_2\",[[0,\"verdocs-template-fields\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"toolbarTargetId\":[1,\"toolbar-target-id\"],\"placing\":[32],\"selectedRoleName\":[32],\"rerender\":[32]},[[4,\"keydown\",\"handleKeyDown\"]]],[0,\"verdocs-template-create\",{\"endpoint\":[16],\"file\":[32],\"creating\":[32]}]]],[\"verdocs-ok-dialog\",[[0,\"verdocs-ok-dialog\",{\"heading\":[1],\"message\":[1],\"showCancel\":[4,\"show-cancel\"]}]]],[\"verdocs-quick-functions_3\",[[0,\"verdocs-quick-functions\",{\"endpoint\":[16]}],[0,\"verdocs-search-activity\",{\"endpoint\":[16],\"type\":[1],\"options\":[8],\"emptyMessage\":[32],\"authFailure\":[32],\"title\":[32],\"recent\":[32],\"saved\":[32],\"starred\":[32]}],[0,\"verdocs-search-box\",{\"endpoint\":[16],\"placeholder\":[1],\"type\":[1],\"query\":[1],\"grabsFocus\":[4,\"grabs-focus\"],\"focusField\":[64]}]]],[\"verdocs-toolbar-icon\",[[0,\"verdocs-toolbar-icon\",{\"text\":[1],\"icon\":[1],\"placement\":[1],\"containerId\":[32]}]]],[\"verdocs-dropdown_2\",[[0,\"verdocs-envelope-document-page\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"documentId\":[1,\"document-id\"],\"pageNumber\":[2,\"page-number\"],\"virtualWidth\":[2,\"virtual-width\"],\"virtualHeight\":[1026,\"virtual-height\"],\"layers\":[16],\"containerId\":[32],\"renderedWidth\":[32],\"renderedHeight\":[32],\"naturalWidth\":[32],\"naturalHeight\":[32],\"aspectRatio\":[32],\"skipFirstNotification\":[32],\"pageDisplayUri\":[32]}],[0,\"verdocs-dropdown\",{\"options\":[16],\"open\":[32]}]]],[\"verdocs-button-panel_3\",[[0,\"verdocs-template-field-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"fieldName\":[1,\"field-name\"],\"dirty\":[32],\"loading\":[32],\"type\":[32],\"setting\":[32],\"name\":[32],\"roleName\":[32],\"required\":[32],\"options\":[32],\"placeholder\":[32],\"defaultValue\":[32]}],[4,\"verdocs-button-panel\",{\"icon\":[1],\"showPanel\":[64],\"hidePanel\":[64],\"toggle\":[64]}],[0,\"verdocs-select-input\",{\"value\":[1],\"label\":[1],\"options\":[16],\"disabled\":[4]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"verdocs-template-roles\",[[0,\"verdocs-template-roles\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"showingRoleDialog\":[32],\"showingSenderDialog\":[32],\"sender\":[32],\"forceRerender\":[32]}]]],[\"verdocs-field-initial\",[[0,\"verdocs-field-initial\",{\"field\":[16],\"disabled\":[4],\"initials\":[1],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"tempInitials\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-signature\",[[0,\"verdocs-field-signature\",{\"field\":[16],\"name\":[1],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"tempSignature\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-checkbox\",[[0,\"verdocs-field-checkbox\",{\"field\":[16],\"option\":[2],\"disabled\":[4],\"done\":[4],\"roleindex\":[2],\"editable\":[4],\"moveable\":[4],\"rerender\":[2],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-date\",[[0,\"verdocs-field-date\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"containerId\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-dropdown\",[[0,\"verdocs-field-dropdown\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-radio-button\",[[0,\"verdocs-field-radio-button\",{\"field\":[16],\"option\":[2],\"disabled\":[4],\"done\":[4],\"roleindex\":[2],\"editable\":[4],\"moveable\":[4],\"rerender\":[2],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-textarea\",[[0,\"verdocs-field-textarea\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-textbox\",[[0,\"verdocs-field-textbox\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-timestamp\",[[0,\"verdocs-field-timestamp\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-loader\",[[0,\"verdocs-loader\"]]],[\"verdocs-build\",[[0,\"verdocs-build\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"step\":[32],\"pdfUrl\":[32],\"template\":[32]}]]],[\"verdocs-sign\",[[0,\"verdocs-sign\",{\"envelopeId\":[1,\"envelope-id\"],\"roleId\":[1,\"role-id\"],\"inviteCode\":[1,\"invite-code\"],\"recipient\":[32],\"signerToken\":[32],\"hasSignature\":[32],\"nextButtonLabel\":[32],\"nextSubmits\":[32],\"errorMessage\":[32],\"focusedField\":[32],\"isDone\":[32],\"showDone\":[32],\"finishLater\":[32],\"showFinishLater\":[32],\"agreed\":[32],\"documentsSingularPlural\":[32]}]]],[\"verdocs-template-properties\",[[0,\"verdocs-template-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"template\":[32],\"name\":[32],\"visibility\":[32],\"sendReminders\":[32],\"firstReminderDays\":[32],\"reminderDays\":[32]}]]],[\"verdocs-template-reminders\",[[0,\"verdocs-template-reminders\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"showPlanBlocker\":[32],\"sendReminders\":[32],\"firstReminderDays\":[32],\"reminderDays\":[32],\"dirty\":[32],\"loading\":[32]}]]],[\"verdocs-template-name\",[[0,\"verdocs-template-name\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"name\":[32],\"dirty\":[32],\"loading\":[32]}]]],[\"verdocs-auth\",[[0,\"verdocs-auth\",{\"endpoint\":[16],\"visible\":[4],\"logo\":[1],\"isAuthenticated\":[32],\"displayMode\":[32],\"username\":[32],\"password\":[32],\"loggingIn\":[32],\"activeSession\":[32],\"loginError\":[32]}]]],[\"verdocs-search\",[[0,\"verdocs-search\",{\"endpoint\":[16]}]]],[\"verdocs-send\",[[0,\"verdocs-send\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"containerId\":[32],\"rolesAtLevel\":[32],\"showPickerForId\":[32],\"sessionContacts\":[32],\"rolesCompleted\":[32],\"reset\":[64]}]]],[\"verdocs-template-visibility\",[[0,\"verdocs-template-visibility\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"dirty\":[32],\"loading\":[32],\"personal\":[32],\"public\":[32]}]]],[\"verdocs-view\",[[0,\"verdocs-view\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"]}]]],[\"verdocs-upload-dialog\",[[0,\"verdocs-upload-dialog\",{\"draggingOver\":[32],\"decodedFiles\":[32]}]]],[\"verdocs-field-attachment\",[[0,\"verdocs-field-attachment\",{\"field\":[16],\"disabled\":[4],\"roleIndex\":[2,\"role-index\"],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-template-document-page\",[[0,\"verdocs-template-document-page\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"documentId\":[1,\"document-id\"],\"pageNumber\":[2,\"page-number\"],\"virtualWidth\":[2,\"virtual-width\"],\"virtualHeight\":[1026,\"virtual-height\"],\"layers\":[16],\"containerId\":[32],\"renderedWidth\":[32],\"renderedHeight\":[32],\"naturalWidth\":[32],\"naturalHeight\":[32],\"aspectRatio\":[32],\"skipFirstNotification\":[32],\"pageDisplayUri\":[32]}]]],[\"verdocs-preview\",[[0,\"verdocs-preview\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"]}]]],[\"verdocs-template-attachments\",[[0,\"verdocs-template-attachments\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"loading\":[32]}]]],[\"verdocs-envelope-sidebar\",[[0,\"verdocs-envelope-sidebar\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"activeTab\":[32],\"panelOpen\":[32]}]]],[\"verdocs-floating-menu\",[[0,\"verdocs-floating-menu\",{\"options\":[16]}]]],[\"verdocs-kba-dialog\",[[0,\"verdocs-kba-dialog\",{\"step\":[2],\"steps\":[2],\"helptitle\":[1],\"helptext\":[1],\"mode\":[1],\"label\":[1],\"placeholder\":[1],\"choices\":[16],\"response\":[32]}]]],[\"verdocs-field-payment\",[[0,\"verdocs-field-payment\",{\"field\":[16],\"disabled\":[4],\"fields\":[16],\"pageNum\":[2,\"page-num\"],\"roleName\":[1,\"role-name\"],\"fieldId\":[1,\"field-id\"],\"recipients\":[8],\"selectedRoleName\":[1,\"selected-role-name\"],\"pdfPages\":[16],\"currentSignature\":[1,\"current-signature\"],\"currentSignatureId\":[1,\"current-signature-id\"],\"currentInitial\":[1,\"current-initial\"],\"currentInitialId\":[1,\"current-initial-id\"],\"focused\":[4],\"signed\":[4],\"rerender\":[2],\"roleindex\":[2],\"preparedMessage\":[32],\"signatureUrl\":[32],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-organization-card\",[[0,\"verdocs-organization-card\",{\"organization\":[16]}]]],[\"verdocs-search-tabs\",[[0,\"verdocs-search-tabs\",{\"selected\":[32]}]]],[\"verdocs-status-indicator\",[[0,\"verdocs-status-indicator\",{\"size\":[1],\"theme\":[1],\"status\":[1],\"envelope\":[16],\"isOpen\":[32],\"recipientStatusIcons\":[32],\"containerId\":[32]}]]],[\"verdocs-template-card\",[[0,\"verdocs-template-card\",{\"template\":[16]}]]],[\"verdocs-template-tags\",[[0,\"verdocs-template-tags\",{\"tags\":[16]}]]],[\"verdocs-toggle\",[[0,\"verdocs-toggle\",{\"options\":[16],\"theme\":[1],\"selectedOption\":[32]}]]],[\"verdocs-button\",[[0,\"verdocs-button\",{\"label\":[1],\"startIcon\":[1,\"start-icon\"],\"endIcon\":[1,\"end-icon\"],\"size\":[1],\"type\":[1],\"variant\":[1],\"disabled\":[4]}]]],[\"verdocs-checkbox_4\",[[0,\"verdocs-checkbox\",{\"checked\":[4],\"name\":[1],\"label\":[1],\"value\":[1],\"theme\":[1],\"disabled\":[4]}],[0,\"verdocs-text-input\",{\"value\":[1],\"label\":[1],\"placeholder\":[1],\"autocomplete\":[1],\"helpText\":[1,\"help-text\"],\"type\":[1],\"disabled\":[4]}],[0,\"verdocs-component-error\",{\"message\":[1]}],[0,\"verdocs-help-icon\",{\"text\":[1],\"containerId\":[32]}]]],[\"verdocs-initial-dialog\",[[0,\"verdocs-initial-dialog\",{\"initials\":[1],\"fontLoaded\":[32],\"enteredInitials\":[32],\"mode\":[32]}]]],[\"verdocs-signature-dialog\",[[0,\"verdocs-signature-dialog\",{\"name\":[1],\"fontLoaded\":[32],\"enteredName\":[32],\"mode\":[32]}]]],[\"verdocs-toggle-button\",[[0,\"verdocs-toggle-button\",{\"active\":[4],\"icon\":[1],\"label\":[1],\"size\":[1],\"_active\":[32]}]]],[\"verdocs-contact-picker\",[[0,\"verdocs-contact-picker\",{\"endpoint\":[16],\"templateRole\":[16],\"contactSuggestions\":[16],\"name\":[32],\"email\":[32],\"phone\":[32],\"message\":[32],\"showSuggestions\":[32],\"showMessage\":[32],\"delegator\":[32],\"nameFieldId\":[32],\"emailFieldId\":[32],\"phoneFieldId\":[32]}]]],[\"verdocs-radio-button\",[[0,\"verdocs-radio-button\",{\"checked\":[4],\"name\":[1],\"value\":[1],\"disabled\":[4]}]]],[\"verdocs-template-role-properties_2\",[[0,\"verdocs-template-role-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"roleName\":[1,\"role-name\"],\"sender\":[1],\"dirty\":[32],\"saving\":[32],\"name\":[32],\"type\":[32],\"fullName\":[32],\"email\":[32],\"phone\":[32],\"allowDelegation\":[32]}],[0,\"verdocs-template-sender\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"sender\":[1],\"saving\":[32]}]]],[\"verdocs-template-create_2\",[[0,\"verdocs-template-fields\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"toolbarTargetId\":[1,\"toolbar-target-id\"],\"placing\":[32],\"selectedRoleName\":[32],\"rerender\":[32]},[[4,\"keydown\",\"handleKeyDown\"]]],[0,\"verdocs-template-create\",{\"endpoint\":[16],\"file\":[32],\"creating\":[32]}]]],[\"verdocs-ok-dialog\",[[0,\"verdocs-ok-dialog\",{\"heading\":[1],\"message\":[1],\"showCancel\":[4,\"show-cancel\"]}]]],[\"verdocs-quick-functions_3\",[[0,\"verdocs-quick-functions\",{\"endpoint\":[16]}],[0,\"verdocs-search-activity\",{\"endpoint\":[16],\"type\":[1],\"options\":[8],\"emptyMessage\":[32],\"authFailure\":[32],\"title\":[32],\"recent\":[32],\"saved\":[32],\"starred\":[32]}],[0,\"verdocs-search-box\",{\"endpoint\":[16],\"placeholder\":[1],\"type\":[1],\"query\":[1],\"grabsFocus\":[4,\"grabs-focus\"],\"focusField\":[64]}]]],[\"verdocs-toolbar-icon\",[[0,\"verdocs-toolbar-icon\",{\"text\":[1],\"icon\":[1],\"placement\":[1],\"containerId\":[32]}]]],[\"verdocs-dropdown_2\",[[0,\"verdocs-envelope-document-page\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"documentId\":[1,\"document-id\"],\"pageNumber\":[2,\"page-number\"],\"virtualWidth\":[2,\"virtual-width\"],\"virtualHeight\":[1026,\"virtual-height\"],\"layers\":[16],\"containerId\":[32],\"renderedWidth\":[32],\"renderedHeight\":[32],\"naturalWidth\":[32],\"naturalHeight\":[32],\"aspectRatio\":[32],\"skipFirstNotification\":[32],\"pageDisplayUri\":[32]}],[0,\"verdocs-dropdown\",{\"options\":[16],\"open\":[32]}]]],[\"verdocs-button-panel_3\",[[0,\"verdocs-template-field-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"fieldName\":[1,\"field-name\"],\"dirty\":[32],\"loading\":[32],\"type\":[32],\"setting\":[32],\"name\":[32],\"roleName\":[32],\"fieldType\":[32],\"required\":[32],\"options\":[32],\"placeholder\":[32],\"defaultValue\":[32],\"showingHelp\":[32]}],[4,\"verdocs-button-panel\",{\"icon\":[1],\"showPanel\":[64],\"hidePanel\":[64],\"toggle\":[64]}],[0,\"verdocs-select-input\",{\"value\":[1],\"label\":[1],\"options\":[16],\"disabled\":[4]}]]]]"), options);
   });
 };
 

package/dist/esm/{utils-14a84a09.js → utils-be76f4d8.js}

@@ -367,4 +367,4 @@ const throttle = (f, delay) => {
   };
 };
 
-export { getRoleIndex as a, getFieldId as b, getDefaultExportFromCjs as c, createCommonjsModule as d, updateCssTransform as e, defaultWidth as f, getFieldSettings as g, defaultHeight as h, saveEnvelopesAsZip as i, saveCertificate as j, renderDocumentField as r, saveAttachment as s, throttle as t, updateDocumentFieldValue as u };
+export { getDefaultExportFromCjs as a, getRoleIndex as b, createCommonjsModule as c, getFieldId as d, updateCssTransform as e, defaultWidth as f, getFieldSettings as g, defaultHeight as h, saveEnvelopesAsZip as i, saveCertificate as j, renderDocumentField as r, saveAttachment as s, throttle as t, updateDocumentFieldValue as u };

package/dist/esm/verdocs-button-panel_3.entry.js

@@ -95,9 +95,11 @@ const VerdocsSelectInput = class {
 };
 VerdocsSelectInput.style = verdocsSelectInputCss;
 
-const verdocsTemplateFieldPropertiesCss = "verdocs-template-field-properties{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input{margin:0}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}verdocs-template-field-properties h6{-ms-flex:1;flex:1;font-size:16px;font-weight:bold;margin:0 0 8px 0;color:#092c4c}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:#a50021}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 10px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}";
+const verdocsTemplateFieldPropertiesCss = "verdocs-template-field-properties{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input{margin:0;-ms-flex:1;flex:1}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}verdocs-template-field-properties h6{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:bold;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;color:#092c4c}verdocs-template-field-properties h6 .help-icon{opacity:0.5}verdocs-template-field-properties h6 .help-icon:hover{opacity:1;cursor:pointer}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:#a50021}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 10px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}";
 
+const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
+const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
 const VerdocsTemplateFieldProperties = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -114,10 +116,12 @@ const VerdocsTemplateFieldProperties = class {
     this.setting = null;
     this.name = '';
     this.roleName = '';
+    this.fieldType = '';
     this.required = false;
     this.options = [];
     this.placeholder = '';
     this.defaultValue = '';
+    this.showingHelp = true;
   }
   async componentWillLoad() {
     var _a, _b, _c, _d, _e;
@@ -144,6 +148,7 @@ const VerdocsTemplateFieldProperties = class {
       this.name = field.name;
       this.roleName = field.role_name;
       this.required = field.required;
+      this.fieldType = field.type;
       this.placeholder = field.label; // TODO: Talk about how we want to handle labels/placeholders
       this.defaultValue = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.value) || '';
       this.setting = field.setting || {};
@@ -236,13 +241,20 @@ const VerdocsTemplateFieldProperties = class {
     if (!this.endpoint.session || !state.template) {
       return h(Host, { class: "empty" });
     }
-    return (h(Host, null, h("h6", null, "Field Settings"), 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) => {
+    if (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" }, "Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the \"name\" field."), h("p", { class: "instructions" }, "If marked required, the participant must complete the field before proceeding..")));
+    }
+    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 = 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) => {
         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: state.template.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
         this.roleName = e.target.value;
         this.dirty = true;
-      } }), h("verdocs-help-icon", { text: "The participant who will complete this field." })), ['textbox', 'textarea'].includes(this.type) && (h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.name, autocomplete: "off", helpText: "Placeholder to display if the field is empty.", placeholder: "Placeholder...", onInput: (e) => {
+      } })), ['textbox', 'textarea'].includes(this.type) && (h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.name, autocomplete: "off",
+      // helpText="Placeholder to display if the field is empty."
+      placeholder: "Placeholder...", onInput: (e) => {
         this.placeholder = e.target.value;
         this.dirty = true;
       } })), h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Required"), h("verdocs-checkbox", { id: "verdocs-is-required", name: "is-required", checked: this.required, value: "on", onInput: (e) => {
@@ -258,7 +270,7 @@ const VerdocsTemplateFieldProperties = class {
         backgroundColor: '#333333',
         padding: '5px 8px',
         color: '#ffffff',
-      } }, "Options ", h("verdocs-help-icon", { text: "Each option requires a unique ID and value. The ID will be stored when the user selects an option." })), h("div", { class: "row-header" }, h("h6", null, "ID"), h("h6", null, "Label"), h("div", { style: { width: '34px' } })), this.options.map((option, index) => (h("div", { class: "row option-row", key: index }, h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
+      } }, "Options"), h("div", { class: "row-header" }, h("h6", null, "ID"), h("h6", null, "Label"), h("div", { style: { width: '34px' } })), this.options.map((option, index) => (h("div", { class: "row option-row", key: index }, h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
         this.options[index].id = e.target.value;
         this.dirty = true;
       } }), h("verdocs-text-input", { id: `verdocs-option-value-${option.id}`, value: option.value, placeholder: "Display value", onInput: (e) => {

package/dist/esm/verdocs-dropdown_2.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, a as getElement
 import { c as createPopper } from './popper-f860750c.js';
 import { f as getEnvelopeDocumentPageDisplayUri } from './Envelopes-3a9b4cff.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-6ec36985.js';
-import { t as throttle } from './utils-14a84a09.js';
+import { t as throttle } from './utils-be76f4d8.js';
 import './Token-54690789.js';
 import './Files-70a192df.js';
 import './index-d264c496.js';

package/dist/esm/verdocs-field-checkbox.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-14a84a09.js';
+import { g as getFieldSettings } from './utils-be76f4d8.js';
 import { s as state } from './templateStore-5cb73464.js';
 import './Envelopes-3a9b4cff.js';
 import './Token-54690789.js';

package/dist/esm/verdocs-field-date.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
-import { g as getFieldSettings } from './utils-14a84a09.js';
+import { g as getFieldSettings } from './utils-be76f4d8.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { s as state } from './templateStore-5cb73464.js';
 import { f as format } from './index-d264c496.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-14a84a09.js';
+import { g as getFieldSettings } from './utils-be76f4d8.js';
 import { s as state } from './templateStore-5cb73464.js';
 import './Envelopes-3a9b4cff.js';
 import './Token-54690789.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-14a84a09.js';
+import { g as getFieldSettings } from './utils-be76f4d8.js';
 import { s as state } from './templateStore-5cb73464.js';
 import './Envelopes-3a9b4cff.js';
 import './Token-54690789.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-14a84a09.js';
+import { g as getFieldSettings } from './utils-be76f4d8.js';
 import { s as state } from './templateStore-5cb73464.js';
 import './Envelopes-3a9b4cff.js';
 import './Token-54690789.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-14a84a09.js';
+import { g as getFieldSettings } from './utils-be76f4d8.js';
 import { s as state } from './templateStore-5cb73464.js';
 import './Envelopes-3a9b4cff.js';
 import './Token-54690789.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-14a84a09.js';
+import { g as getFieldSettings } from './utils-be76f4d8.js';
 import { s as state } from './templateStore-5cb73464.js';
 import './Envelopes-3a9b4cff.js';
 import './Token-54690789.js';

package/dist/esm/verdocs-field-textarea.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-14a84a09.js';
+import { g as getFieldSettings } from './utils-be76f4d8.js';
 import { s as state } from './templateStore-5cb73464.js';
 import './Envelopes-3a9b4cff.js';
 import './Token-54690789.js';