@verdocs/web-sdk 2.3.63 → 2.3.65

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

@@ -1,209 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
-import { i as interact_min } from './interact.min.js';
-import './Types.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { u as updateField } from './Fields.js';
-import { g as getRGBA } from './Colors.js';
-import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
-import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
-import { g as getFieldSettings } from './utils.js';
-import { S as SettingsIcon } from './Icons.js';
-import { d as defineCustomElement$9 } from './verdocs-button2.js';
-import { d as defineCustomElement$8 } from './verdocs-checkbox2.js';
-import { d as defineCustomElement$7 } from './verdocs-component-error2.js';
-import { d as defineCustomElement$6 } from './verdocs-help-icon2.js';
-import { d as defineCustomElement$5 } from './verdocs-portal2.js';
-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 verdocsFieldTextareaCss = "verdocs-field-textarea{width:150px;height:15px;display:block;font-size:11px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{cursor:inherit;width:100%;height:100%;resize:none;border:none;outline:none;padding:0 3px;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)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textarea 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-textarea verdocs-button-panel[data-active],verdocs-field-textarea verdocs-button-panel:hover{opacity:1}verdocs-field-textarea verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textarea verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textarea .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-textarea .settings-icon svg{fill:#707ae5}verdocs-field-textarea .settings-icon:hover{opacity:1}";
-
-const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.settingsChanged = createEvent(this, "settingsChanged", 7);
-    this.deleted = createEvent(this, "deleted", 7);
-    this.fieldStore = null;
-    this.roleStore = null;
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateid = '';
-    this.fieldname = '';
-    this.disabled = false;
-    this.editable = false;
-    this.moveable = false;
-    this.done = false;
-    this.xscale = 1;
-    this.yscale = 1;
-    this.showingProperties = false;
-  }
-  async focusField() {
-    this.inputEl.focus();
-  }
-  async showSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
-    if (settingsPanel && settingsPanel.showPanel) {
-      settingsPanel.showPanel();
-    }
-  }
-  async hideSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
-    if (settingsPanel && settingsPanel.hidePanel) {
-      settingsPanel.hidePanel();
-    }
-  }
-  async componentWillLoad() {
-    this.fieldStore = getTemplateFieldStore(this.templateid);
-    this.roleStore = getTemplateRoleStore(this.templateid);
-  }
-  componentDidRender() {
-    interact_min.dynamicDrop(true);
-    if (this.editable) {
-      interact_min(this.el).resizable({
-        edges: { top: true, bottom: true, left: true, right: true },
-        listeners: {
-          start: this.handleResizeStart.bind(this),
-          move: this.handleResize.bind(this),
-          end: this.handleResizeEnd.bind(this),
-        },
-      });
-    }
-  }
-  handleResizeStart(e) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  handleResize(e) {
-    let { x = 0, y = 0, h = 0 } = e.target.dataset;
-    let { width, height } = e.rect;
-    x = (parseFloat(x) || 0) + e.deltaRect.left;
-    y = (parseFloat(y) || 0) + e.deltaRect.top;
-    h = (parseFloat(h) || 0) + e.deltaRect.height;
-    Object.assign(e.target.style, {
-      width: `${width}px`,
-      height: `${height}px`,
-      transform: `translate(${x}px, ${y + h}px)`,
-    });
-    Object.assign(e.target.dataset, { x, y, h });
-  }
-  handleResizeEnd(e) {
-    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-    if (!field) {
-      return h(Fragment, null);
-    }
-    const newSettings = { ...getFieldSettings(field) };
-    const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);
-    newSettings.width = Math.round(parseFloat(e.target.style.width) / this.xscale);
-    newSettings.height = Math.round(parseFloat(e.target.style.height) / this.yscale);
-    newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
-    newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
-    updateField(this.endpoint, this.templateid, this.fieldname, { setting: newSettings })
-      .then(field => {
-      var _a;
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldname, settings: newSettings, field });
-      Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
-    })
-      .catch(e => console.log('Field update failed', e));
-  }
-  render() {
-    var _a, _b;
-    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-    const roleIndex = getRoleIndex(this.roleStore, field.role_name);
-    const backgroundColor = field['rgba'] || getRGBA(roleIndex);
-    if (!field) {
-      return h(Fragment, null);
-    }
-    const settings = getFieldSettings(field);
-    const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
-    if (this.done) {
-      return h(Host, { class: { done: this.done } }, settings.value);
-    }
-    return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled, done: this.done }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, disabled: disabled, name: field.name, required: field === null || field === void 0 ? void 0 : field.required, ref: el => (this.inputEl = el) }, value), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
-        e.stopPropagation();
-        this.showingProperties = !this.showingProperties;
-      } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${this.fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
-        var _a;
-        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
-        return this.hideSettingsPanel();
-      }, onSettingsChanged: e => {
-        var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
-        return this.hideSettingsPanel();
-      }, helpText: 'Text areas may be used to create multi-line text fields.' })))))));
-  }
-  get el() { return this; }
-  static get style() { return verdocsFieldTextareaCss; }
-}, [0, "verdocs-field-textarea", {
-    "endpoint": [16],
-    "templateid": [1],
-    "fieldname": [1],
-    "disabled": [4],
-    "editable": [4],
-    "moveable": [4],
-    "done": [4],
-    "xscale": [2],
-    "yscale": [2],
-    "showingProperties": [32],
-    "focusField": [64],
-    "showSettingsPanel": [64],
-    "hideSettingsPanel": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-field-textarea", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
-  components.forEach(tagName => { switch (tagName) {
-    case "verdocs-field-textarea":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsFieldTextarea$1);
-      }
-      break;
-    case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "verdocs-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "verdocs-component-error":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "verdocs-help-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "verdocs-portal":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "verdocs-select-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "verdocs-template-field-properties":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "verdocs-text-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { V as VerdocsFieldTextarea$1, d as defineCustomElement$1 } from './verdocs-field-textarea2.js';
 
 const VerdocsFieldTextarea = VerdocsFieldTextarea$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{esm/verdocs-field-textarea.entry.js → components/verdocs-field-textarea2.js}

@@ -1,25 +1,27 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, a as getElement } from './index-172625c5.js';
-import { i as interact_min } from './interact.min-ef12935a.js';
-import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-56fa3371.js';
-import { u as updateField } from './Fields-c82e6df3.js';
-import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getTemplateFieldStore } from './TemplateFieldStore-211c1ed4.js';
-import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-447f2cb6.js';
-import { g as getFieldSettings } from './utils-86fc7318.js';
-import { S as SettingsIcon } from './Icons-ddea87bf.js';
-import './_commonjsHelpers-5ec8f9b7.js';
-import './index-4439b0d1.js';
-import './Envelopes-627c5239.js';
-import './Files-70a192df.js';
-import './Types-1628dc71.js';
-import './index-914ed6f7.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
+import { i as interact_min } from './interact.min.js';
+import './Types.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { u as updateField, d as defineCustomElement$2 } from './verdocs-template-field-properties2.js';
+import { g as getRGBA } from './Colors.js';
+import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
+import { g as getFieldSettings } from './utils.js';
+import { S as SettingsIcon } from './Icons.js';
+import { d as defineCustomElement$8 } from './verdocs-button2.js';
+import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$6 } from './verdocs-component-error2.js';
+import { d as defineCustomElement$5 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$4 } from './verdocs-portal2.js';
+import { d as defineCustomElement$3 } from './verdocs-select-input2.js';
+import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
 
 const verdocsFieldTextareaCss = "verdocs-field-textarea{width:150px;height:15px;display:block;font-size:11px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{cursor:inherit;width:100%;height:100%;resize:none;border:none;outline:none;padding:0 3px;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)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textarea 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-textarea verdocs-button-panel[data-active],verdocs-field-textarea verdocs-button-panel:hover{opacity:1}verdocs-field-textarea verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textarea verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textarea .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-textarea .settings-icon svg{fill:#707ae5}verdocs-field-textarea .settings-icon:hover{opacity:1}";
 
-const VerdocsFieldTextarea = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const VerdocsFieldTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
     this.fieldStore = null;
@@ -33,6 +35,7 @@ const VerdocsFieldTextarea = class {
     this.done = false;
     this.xscale = 1;
     this.yscale = 1;
+    this.pagenumber = 1;
     this.showingProperties = false;
   }
   async focusField() {
@@ -130,8 +133,77 @@ const VerdocsFieldTextarea = class {
         return this.hideSettingsPanel();
       }, helpText: 'Text areas may be used to create multi-line text fields.' })))))));
   }
-  get el() { return getElement(this); }
-};
-VerdocsFieldTextarea.style = verdocsFieldTextareaCss;
+  get el() { return this; }
+  static get style() { return verdocsFieldTextareaCss; }
+}, [0, "verdocs-field-textarea", {
+    "endpoint": [16],
+    "templateid": [1],
+    "fieldname": [1],
+    "disabled": [4],
+    "editable": [4],
+    "moveable": [4],
+    "done": [4],
+    "xscale": [2],
+    "yscale": [2],
+    "pagenumber": [2],
+    "showingProperties": [32],
+    "focusField": [64],
+    "showSettingsPanel": [64],
+    "hideSettingsPanel": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-field-textarea", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-field-textarea":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsFieldTextarea);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "verdocs-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "verdocs-component-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-portal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-select-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-template-field-properties":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
 
-export { VerdocsFieldTextarea as verdocs_field_textarea };
+export { VerdocsFieldTextarea as V, defineCustomElement as d };

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

@@ -1,211 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
-import { i as interact_min } from './interact.min.js';
-import './Types.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { u as updateField } from './Fields.js';
-import { g as getRGBA } from './Colors.js';
-import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
-import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
-import { g as getFieldSettings } from './utils.js';
-import { S as SettingsIcon } from './Icons.js';
-import { d as defineCustomElement$9 } from './verdocs-button2.js';
-import { d as defineCustomElement$8 } from './verdocs-checkbox2.js';
-import { d as defineCustomElement$7 } from './verdocs-component-error2.js';
-import { d as defineCustomElement$6 } from './verdocs-help-icon2.js';
-import { d as defineCustomElement$5 } from './verdocs-portal2.js';
-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;-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;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{cursor:inherit;width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;position:absolute;-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)}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}verdocs-field-textbox .settings-icon{position:absolute;top:-4px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-textbox .settings-icon svg{fill:#707ae5}verdocs-field-textbox .settings-icon:hover{opacity:1}";
-
-const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.settingsChanged = createEvent(this, "settingsChanged", 7);
-    this.deleted = createEvent(this, "deleted", 7);
-    this.fieldStore = null;
-    this.roleStore = null;
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateid = '';
-    this.fieldname = '';
-    this.disabled = false;
-    this.editable = false;
-    this.moveable = false;
-    this.done = false;
-    this.xscale = 1;
-    this.yscale = 1;
-    this.showingProperties = false;
-  }
-  async focusField() {
-    this.inputEl.focus();
-  }
-  async showSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
-    if (settingsPanel && settingsPanel.showPanel) {
-      settingsPanel.showPanel();
-    }
-  }
-  async hideSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
-    if (settingsPanel && settingsPanel.hidePanel) {
-      settingsPanel.hidePanel();
-    }
-  }
-  async componentWillLoad() {
-    this.fieldStore = getTemplateFieldStore(this.templateid);
-    this.roleStore = getTemplateRoleStore(this.templateid);
-  }
-  componentDidRender() {
-    interact_min.dynamicDrop(true);
-    if (this.editable) {
-      interact_min(this.el).resizable({
-        edges: { top: false, bottom: false, left: true, right: true },
-        listeners: {
-          start: this.handleResizeStart.bind(this),
-          move: this.handleResize.bind(this),
-          end: this.handleResizeEnd.bind(this),
-        },
-      });
-    }
-  }
-  handleResizeStart(e) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  handleResize(e) {
-    let { x = 0, y = 0, h = 0 } = e.target.dataset;
-    let { width, height } = e.rect;
-    x = (parseFloat(x) || 0) + e.deltaRect.left;
-    y = (parseFloat(y) || 0) + e.deltaRect.top;
-    h = (parseFloat(h) || 0) + e.deltaRect.height;
-    Object.assign(e.target.style, {
-      width: `${width}px`,
-      height: `${height}px`,
-      transform: `translate(${x}px, ${y + h}px)`,
-    });
-    Object.assign(e.target.dataset, { x, y, h });
-  }
-  handleResizeEnd(e) {
-    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-    const newSettings = { ...getFieldSettings(field) };
-    const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);
-    newSettings.width = Math.round(parseFloat(e.target.style.width) / this.xscale);
-    newSettings.height = Math.round(parseFloat(e.target.style.height) / this.yscale);
-    newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
-    newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
-    updateField(this.endpoint, this.templateid, this.fieldname, { setting: newSettings })
-      .then(field => {
-      var _a;
-      console.log('Update result', field);
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name, settings: newSettings, field });
-      Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
-    })
-      .catch(e => console.log('Field update failed', e));
-  }
-  render() {
-    var _a, _b;
-    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-    console.log('Rendering tb', this.fieldname, field);
-    const roleIndex = getRoleIndex(this.roleStore, field.role_name);
-    const backgroundColor = field['rgba'] || getRGBA(roleIndex);
-    if (!field) {
-      return h(Fragment, null);
-    }
-    const settings = getFieldSettings(field);
-    let disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
-    const width = settings.width || 150;
-    // TODO: This is an outdated technique from the old system. We should compute it.
-    const maxlength = width / 5;
-    if (this.done) {
-      return h(Host, { class: { done: this.done } }, value);
-    }
-    return (h(Host, { class: { required: field.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", name: field.name, 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: field === null || field === void 0 ? void 0 : field.required, ref: el => (this.inputEl = el), maxlength: maxlength }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
-        e.stopPropagation();
-        this.showingProperties = !this.showingProperties;
-      } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
-        var _a;
-        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
-        return this.hideSettingsPanel();
-      }, onSettingsChanged: e => {
-        var _a;
-        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
-        return this.hideSettingsPanel();
-      }, helpText: 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.' })))))));
-  }
-  get el() { return this; }
-  static get style() { return verdocsFieldTextboxCss; }
-}, [0, "verdocs-field-textbox", {
-    "endpoint": [16],
-    "templateid": [1],
-    "fieldname": [1],
-    "disabled": [4],
-    "editable": [4],
-    "moveable": [4],
-    "done": [4],
-    "xscale": [2],
-    "yscale": [2],
-    "showingProperties": [32],
-    "focusField": [64],
-    "showSettingsPanel": [64],
-    "hideSettingsPanel": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-field-textbox", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
-  components.forEach(tagName => { switch (tagName) {
-    case "verdocs-field-textbox":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsFieldTextbox$1);
-      }
-      break;
-    case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "verdocs-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "verdocs-component-error":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "verdocs-help-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "verdocs-portal":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "verdocs-select-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "verdocs-template-field-properties":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "verdocs-text-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { V as VerdocsFieldTextbox$1, d as defineCustomElement$1 } from './verdocs-field-textbox2.js';
 
 const VerdocsFieldTextbox = VerdocsFieldTextbox$1;
 const defineCustomElement = defineCustomElement$1;