@verdocs/web-sdk 1.12.13 → 1.12.15

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

@@ -1,3 +1,4 @@
+import interact from 'interactjs';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
 import TemplateStore from '../../../utils/templateStore';
@@ -17,7 +18,7 @@ export class VerdocsFieldTextbox {
     this.rerender = 0;
   }
   async focusField() {
-    this.el.focus();
+    this.inputEl.focus();
   }
   async showSettingsPanel() {
     const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
@@ -33,16 +34,45 @@ export class VerdocsFieldTextbox {
     }
     TemplateStore.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: TemplateStore.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: TemplateStore.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();
@@ -285,4 +315,5 @@ export class VerdocsFieldTextbox {
       }
     };
   }
+  static get elementRef() { return "el"; }
 }

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

@@ -3,13 +3,23 @@ export default {
   title: 'Fields/Textbox',
   component: 'verdocs-field-textbox',
   args: {
+    disabled: false,
+    editable: true,
+    moveable: true,
+    done: false,
+    roleindex: 0,
     field: {
-      settings: {
+      name: 'textbox-1',
+      role_name: 'Recipient 1',
+      template_id: '0239fe5f-1b89-499a-bd83-098a2e1b4b9c',
+      type: 'textbox',
+      required: false,
+      setting: {
         x: 0,
         y: 0,
       },
+      page_sequence: 1,
     },
-    disabled: false,
   },
   argTypes: {
     input: {
@@ -18,4 +28,13 @@ export default {
     },
   },
 };
-export const Textbox = ({ field, disabled, input }) => html `<verdocs-field-textbox .field=${field} .disabled=${disabled} @input=${input} />`;
+export const Textbox = ({ field, disabled, editable, moveable, done, roleindex, input }) => html `<verdocs-field-textbox
+  style="transform: scale(1.5); width: 150px; height: 15px;"
+  .field=${field}
+  .disabled=${disabled}
+  .editable=${editable}
+  .moveable=${moveable}
+  .done=${done}
+  .roleindex=${roleindex}
+  @input=${input}
+/>`;

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

@@ -32,6 +32,7 @@ verdocs-template-field-properties verdocs-select-input {
 }
 verdocs-template-field-properties verdocs-text-input {
   margin: 0;
+  flex: 1;
 }
 verdocs-template-field-properties verdocs-text-input label {
   margin: 0;
@@ -70,11 +71,20 @@ verdocs-template-field-properties .delete-button svg {
 }
 verdocs-template-field-properties h6 {
   flex: 1;
+  display: flex;
   font-size: 16px;
   font-weight: bold;
   margin: 0 0 8px 0;
+  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: flex;

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

@@ -4,7 +4,9 @@ import { h, Host } from '@stencil/core';
 import TemplateStore from '../../../utils/templateStore';
 import { loadTemplate } from '../../../utils/Templates';
 import { SDKError } from '../../../utils/errors';
+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 PlusIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>`;
 /**
  * Displays an edit form that allows the user to adjust a field's settings.
@@ -20,10 +22,12 @@ export class VerdocsTemplateFieldProperties {
     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;
@@ -50,6 +54,7 @@ export class VerdocsTemplateFieldProperties {
       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 || {};
@@ -97,18 +102,18 @@ export class VerdocsTemplateFieldProperties {
         options: this.options,
       };
     }
-    console.log('np', this.required, newProperties);
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
       var _a, _b;
       this.dirty = false;
-      TemplateStore.fields.forEach(field => {
+      const field = TemplateStore.fields.find(field => field.name === this.fieldName);
+      if (field) {
         field.name = this.name;
         field.role_name = this.roleName;
         field.required = this.required;
         field.label = this.placeholder;
         field.setting.result = this.defaultValue;
-      });
+      }
       (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
@@ -142,13 +147,20 @@ export class VerdocsTemplateFieldProperties {
     if (!this.endpoint.session || !TemplateStore.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: TemplateStore.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) => {
@@ -164,7 +176,7 @@ export class VerdocsTemplateFieldProperties {
         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) => {
@@ -258,10 +270,12 @@ export class VerdocsTemplateFieldProperties {
       "setting": {},
       "name": {},
       "roleName": {},
+      "fieldType": {},
       "required": {},
       "options": {},
       "placeholder": {},
-      "defaultValue": {}
+      "defaultValue": {},
+      "showingHelp": {}
     };
   }
   static get events() {

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

@@ -99,7 +99,9 @@ export class VerdocsTemplateFields {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
     el.addEventListener('settingsChanged', () => {
       var _a;
-      console.log('settings changed', this, field);
+      console.log('Settings', TemplateStore.fields);
+      this.selectedRoleName = field.role_name;
+      console.log('settings changed', this.selectedRoleName, field);
       el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, field.role_name));
       this.rerender++;
       el.setAttribute('rerender', this.rerender);
@@ -230,9 +232,10 @@ export class VerdocsTemplateFields {
     let fieldName;
     do {
       fieldName = `${type}P${pageNumber}-${i}`;
+      console.log('testing field', fieldName);
       i++;
     } while (TemplateStore.fields.some(field => field.name === fieldName));
-    console.log('Field name', fieldName);
+    console.log('Will use field name', fieldName, TemplateStore.fields);
     return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.

package/dist/components/verdocs-button-panel2.js

@@ -31,39 +31,35 @@ const VerdocsButtonPanel = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     }
   }
   async showPanel() {
-    if (!this.showing) {
-      await this.toggle();
-    }
+    var _a, _b;
+    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+    (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+    this.showing = true;
+    this.hiderEl = document.createElement('div');
+    this.hiderEl.style.zIndex = '100';
+    this.hiderEl.style.position = 'absolute';
+    this.hiderEl.style.top = '0px';
+    this.hiderEl.style.left = '0px';
+    this.hiderEl.style.right = '0px';
+    this.hiderEl.style.bottom = '0px';
+    this.hiderEl.onclick = (e) => {
+      e.stopPropagation();
+      this.toggle();
+    };
+    document.body.appendChild(this.hiderEl);
   }
   async hidePanel() {
-    console.log('Hiding panel', this.showing);
-    if (this.showing) {
-      await this.toggle();
-    }
+    var _a, _b;
+    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
+    (_b = this.hiderEl) === null || _b === void 0 ? void 0 : _b.remove();
+    this.showing = false;
   }
   async toggle() {
-    var _a, _b, _c, _d;
     if (this.showing) {
-      (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
-      (_b = this.hiderEl) === null || _b === void 0 ? void 0 : _b.remove();
-      this.showing = false;
+      await this.hidePanel();
     }
     else {
-      (_c = this.panelEl) === null || _c === void 0 ? void 0 : _c.setAttribute('data-show', '');
-      (_d = this.popperInstance) === null || _d === void 0 ? void 0 : _d.update().catch(() => { });
-      this.showing = true;
-      this.hiderEl = document.createElement('div');
-      this.hiderEl.style.zIndex = '100';
-      this.hiderEl.style.position = 'absolute';
-      this.hiderEl.style.top = '0px';
-      this.hiderEl.style.left = '0px';
-      this.hiderEl.style.right = '0px';
-      this.hiderEl.style.bottom = '0px';
-      this.hiderEl.onclick = (e) => {
-        e.stopPropagation();
-        this.toggle();
-      };
-      document.body.appendChild(this.hiderEl);
+      await this.showPanel();
     }
   }
   render() {

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

@@ -2615,7 +2615,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   }
   // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
   render() {
-    var _a, _b;
+    var _a, _b, _c;
     const settings = getFieldSettings(this.field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
@@ -2623,7 +2623,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), 'PP') : '';
       return h(Host, { class: { done: this.done } }, formatted);
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, 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 }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, 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: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

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 || {};
@@ -108,18 +113,18 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
         options: this.options,
       };
     }
-    console.log('np', this.required, newProperties);
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
       var _a, _b;
       this.dirty = false;
-      state.fields.forEach(field => {
+      const field = state.fields.find(field => field.name === this.fieldName);
+      if (field) {
         field.name = this.name;
         field.role_name = this.roleName;
         field.required = this.required;
         field.label = this.placeholder;
         field.setting.result = this.defaultValue;
-      });
+      }
       (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
@@ -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/components/verdocs-template-fields2.js

@@ -106,7 +106,9 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     el.addEventListener('input', e => this.handleFieldChange(field, e));
     el.addEventListener('settingsChanged', () => {
       var _a;
-      console.log('settings changed', this, field);
+      console.log('Settings', state.fields);
+      this.selectedRoleName = field.role_name;
+      console.log('settings changed', this.selectedRoleName, field);
       el.setAttribute('roleindex', getRoleIndex(state.roleNames, field.role_name));
       this.rerender++;
       el.setAttribute('rerender', this.rerender);
@@ -237,9 +239,10 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     let fieldName;
     do {
       fieldName = `${type}P${pageNumber}-${i}`;
+      console.log('testing field', fieldName);
       i++;
     } while (state.fields.some(field => field.name === fieldName));
-    console.log('Field name', fieldName);
+    console.log('Will use field name', fieldName, state.fields);
     return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.