@verdocs/web-sdk 2.3.63 → 2.3.65

package/dist/components/verdocs-field-radio-button.js

@@ -1,155 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
-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 verdocsFieldRadioButtonCss = "verdocs-field-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:12px;height:12px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button svg{margin-top:4px}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button.disabled.done{opacity:1}verdocs-field-radio-button input{cursor:inherit}verdocs-field-radio-button.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio-button:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button:not(.done) input[type=radio]+label:before{content:\"\";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button:not(.done) input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button:not(.done) input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-radio-button verdocs-button-panel{margin-left:-20px;margin-top:-7px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-radio-button .settings-icon{position:absolute;top:-6px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-radio-button .settings-icon svg{fill:#707ae5}verdocs-field-radio-button .settings-icon:hover{opacity:1}";
-
-const RadioIconUnselected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
-const RadioIconSelected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
-const VerdocsFieldRadioButton$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.templateid = '';
-    this.fieldname = '';
-    this.option = 0;
-    this.disabled = false;
-    this.done = false;
-    this.editable = false;
-    this.moveable = false;
-    this.xscale = 1;
-    this.yscale = 1;
-    this.showingProperties = false;
-  }
-  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);
-  }
-  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 required = field.required;
-    const option = settings.options[this.option];
-    const id = `${field.name}-${option.id}`;
-    if (this.done) {
-      return (h(Host, { class: { done: this.done }, style: { maxWidth: '10px' } }, h("span", { innerHTML: !!option.selected ? RadioIconSelected : RadioIconUnselected })));
-    }
-    return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", name: field.name, value: option.id, tabIndex: settings.order, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), 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: "Radio buttons capture the recipient's selection of just one of several related (exclusive) options." })))))));
-  }
-  static get style() { return verdocsFieldRadioButtonCss; }
-}, [0, "verdocs-field-radio-button", {
-    "templateid": [1],
-    "fieldname": [1],
-    "option": [2],
-    "disabled": [4],
-    "done": [4],
-    "editable": [4],
-    "moveable": [4],
-    "xscale": [2],
-    "yscale": [2],
-    "showingProperties": [32],
-    "showSettingsPanel": [64],
-    "hideSettingsPanel": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-field-radio-button", "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-radio-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsFieldRadioButton$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 VerdocsFieldRadioButton$1, d as defineCustomElement$1 } from './verdocs-field-radio-button2.js';
 
 const VerdocsFieldRadioButton = VerdocsFieldRadioButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{esm/verdocs-field-radio-button.entry.js → components/verdocs-field-radio-button2.js}

@@ -1,24 +1,26 @@
-import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-172625c5.js';
-import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-447f2cb6.js';
-import { g as getTemplateFieldStore } from './TemplateFieldStore-211c1ed4.js';
-import { g as getFieldSettings } from './utils-86fc7318.js';
-import { S as SettingsIcon } from './Icons-ddea87bf.js';
-import './index-4439b0d1.js';
-import './_commonjsHelpers-5ec8f9b7.js';
-import './Envelopes-627c5239.js';
-import './Types-5f31149e.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 { 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$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$2 } from './verdocs-template-field-properties2.js';
+import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
 
 const verdocsFieldRadioButtonCss = "verdocs-field-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:12px;height:12px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button svg{margin-top:4px}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button.disabled.done{opacity:1}verdocs-field-radio-button input{cursor:inherit}verdocs-field-radio-button.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio-button:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button:not(.done) input[type=radio]+label:before{content:\"\";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button:not(.done) input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button:not(.done) input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-radio-button verdocs-button-panel{margin-left:-20px;margin-top:-7px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-radio-button .settings-icon{position:absolute;top:-6px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-radio-button .settings-icon svg{fill:#707ae5}verdocs-field-radio-button .settings-icon:hover{opacity:1}";
 
 const RadioIconUnselected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
 const RadioIconSelected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
-const VerdocsFieldRadioButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const VerdocsFieldRadioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
     this.fieldStore = null;
@@ -32,6 +34,7 @@ const VerdocsFieldRadioButton = class {
     this.moveable = false;
     this.xscale = 1;
     this.yscale = 1;
+    this.pagenumber = 1;
     this.showingProperties = false;
   }
   async showSettingsPanel() {
@@ -79,7 +82,75 @@ const VerdocsFieldRadioButton = class {
         return this.hideSettingsPanel();
       }, helpText: "Radio buttons capture the recipient's selection of just one of several related (exclusive) options." })))))));
   }
-};
-VerdocsFieldRadioButton.style = verdocsFieldRadioButtonCss;
+  static get style() { return verdocsFieldRadioButtonCss; }
+}, [0, "verdocs-field-radio-button", {
+    "templateid": [1],
+    "fieldname": [1],
+    "option": [2],
+    "disabled": [4],
+    "done": [4],
+    "editable": [4],
+    "moveable": [4],
+    "xscale": [2],
+    "yscale": [2],
+    "pagenumber": [2],
+    "showingProperties": [32],
+    "showSettingsPanel": [64],
+    "hideSettingsPanel": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-field-radio-button", "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-radio-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsFieldRadioButton);
+      }
+      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 { VerdocsFieldRadioButton as verdocs_field_radio_button };
+export { VerdocsFieldRadioButton as V, defineCustomElement as d };

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

@@ -1,186 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
-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$a } from './verdocs-button2.js';
-import { d as defineCustomElement$9 } from './verdocs-checkbox2.js';
-import { d as defineCustomElement$8 } from './verdocs-component-error2.js';
-import { d as defineCustomElement$7 } from './verdocs-help-icon2.js';
-import { d as defineCustomElement$6 } from './verdocs-portal2.js';
-import { d as defineCustomElement$5 } from './verdocs-select-input2.js';
-import { d as defineCustomElement$4 } from './verdocs-signature-dialog2.js';
-import { d as defineCustomElement$3 } from './verdocs-template-field-properties2.js';
-import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
-
-const verdocsFieldSignatureCss = "verdocs-field-signature{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature.disabled{opacity:0.5}verdocs-field-signature.done{border:none;opacity:1}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature button{cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid #cc0000}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-signature verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-signature verdocs-button-panel[data-active],verdocs-field-signature verdocs-button-panel:hover{opacity:1}verdocs-field-signature verdocs-button-panel .icon svg{fill:#333333}verdocs-field-signature verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-signature .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-signature .settings-icon svg{fill:#707ae5}verdocs-field-signature .settings-icon:hover{opacity:1}";
-
-const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.fieldChange = createEvent(this, "fieldChange", 7);
-    this.settingsPress = createEvent(this, "settingsPress", 7);
-    this.settingsChanged = createEvent(this, "settingsChanged", 7);
-    this.deleted = createEvent(this, "deleted", 7);
-    this.fieldStore = null;
-    this.roleStore = null;
-    this.templateid = '';
-    this.fieldname = '';
-    this.name = '';
-    this.disabled = false;
-    this.editable = false;
-    this.moveable = false;
-    this.done = false;
-    this.xscale = 1;
-    this.yscale = 1;
-    this.showingProperties = false;
-    this.tempSignature = '';
-  }
-  async focusField() {
-    this.handleShow();
-    console.log('focused', this);
-  }
-  hideDialog() {
-    var _a;
-    (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
-    this.dialog = null;
-  }
-  handleAdopt(e) {
-    var _a;
-    console.log('[SIGNATURE] Adopted signature');
-    this.tempSignature = e.detail;
-    (_a = this.fieldChange) === null || _a === void 0 ? void 0 : _a.emit(this.tempSignature);
-    this.hideDialog();
-  }
-  handleShow() {
-    this.dialog = document.createElement('verdocs-signature-dialog');
-    this.dialog.setAttribute('name', this.name);
-    // this.dialog.setAttribute('roleindex', this.roleindex);
-    this.dialog.addEventListener('exit', () => this.hideDialog());
-    this.dialog.addEventListener('next', e => this.handleAdopt(e));
-    document.body.append(this.dialog);
-  }
-  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);
-  }
-  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 value = settings.base64 || this.tempSignature;
-    const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    if (this.done) {
-      return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Signature" }));
-    }
-    return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), 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: "Signature fields capture a recipient's signature on a document." })))))));
-  }
-  static get style() { return verdocsFieldSignatureCss; }
-}, [0, "verdocs-field-signature", {
-    "templateid": [1],
-    "fieldname": [1],
-    "name": [1],
-    "disabled": [4],
-    "editable": [4],
-    "moveable": [4],
-    "done": [4],
-    "xscale": [2],
-    "yscale": [2],
-    "showingProperties": [32],
-    "tempSignature": [32],
-    "focusField": [64],
-    "showSettingsPanel": [64],
-    "hideSettingsPanel": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-field-signature", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-signature-dialog", "verdocs-template-field-properties", "verdocs-text-input"];
-  components.forEach(tagName => { switch (tagName) {
-    case "verdocs-field-signature":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsFieldSignature$1);
-      }
-      break;
-    case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "verdocs-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "verdocs-component-error":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "verdocs-help-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "verdocs-portal":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "verdocs-select-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "verdocs-signature-dialog":
-      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 VerdocsFieldSignature$1, d as defineCustomElement$1 } from './verdocs-field-signature2.js';
 
 const VerdocsFieldSignature = VerdocsFieldSignature$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{esm/verdocs-field-signature.entry.js → components/verdocs-field-signature2.js}

@@ -1,22 +1,25 @@
-import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-172625c5.js';
-import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-447f2cb6.js';
-import { g as getTemplateFieldStore } from './TemplateFieldStore-211c1ed4.js';
-import { g as getFieldSettings } from './utils-86fc7318.js';
-import { S as SettingsIcon } from './Icons-ddea87bf.js';
-import './index-4439b0d1.js';
-import './_commonjsHelpers-5ec8f9b7.js';
-import './Envelopes-627c5239.js';
-import './Types-5f31149e.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 { 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-signature-dialog2.js';
+import { d as defineCustomElement$2 } from './verdocs-template-field-properties2.js';
+import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
 
 const verdocsFieldSignatureCss = "verdocs-field-signature{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature.disabled{opacity:0.5}verdocs-field-signature.done{border:none;opacity:1}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature button{cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid #cc0000}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-signature verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-signature verdocs-button-panel[data-active],verdocs-field-signature verdocs-button-panel:hover{opacity:1}verdocs-field-signature verdocs-button-panel .icon svg{fill:#333333}verdocs-field-signature verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-signature .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-signature .settings-icon svg{fill:#707ae5}verdocs-field-signature .settings-icon:hover{opacity:1}";
 
-const VerdocsFieldSignature = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const VerdocsFieldSignature = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
     this.fieldChange = createEvent(this, "fieldChange", 7);
     this.settingsPress = createEvent(this, "settingsPress", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
@@ -32,6 +35,7 @@ const VerdocsFieldSignature = class {
     this.done = false;
     this.xscale = 1;
     this.yscale = 1;
+    this.pagenumber = 1;
     this.showingProperties = false;
     this.tempSignature = '';
   }
@@ -102,7 +106,82 @@ const VerdocsFieldSignature = class {
         return this.hideSettingsPanel();
       }, helpText: "Signature fields capture a recipient's signature on a document." })))))));
   }
-};
-VerdocsFieldSignature.style = verdocsFieldSignatureCss;
+  static get style() { return verdocsFieldSignatureCss; }
+}, [0, "verdocs-field-signature", {
+    "templateid": [1],
+    "fieldname": [1],
+    "name": [1],
+    "disabled": [4],
+    "editable": [4],
+    "moveable": [4],
+    "done": [4],
+    "xscale": [2],
+    "yscale": [2],
+    "pagenumber": [2],
+    "showingProperties": [32],
+    "tempSignature": [32],
+    "focusField": [64],
+    "showSettingsPanel": [64],
+    "hideSettingsPanel": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-field-signature", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-signature-dialog", "verdocs-template-field-properties", "verdocs-text-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-field-signature":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsFieldSignature);
+      }
+      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-signature-dialog":
+      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 { VerdocsFieldSignature as verdocs_field_signature };
+export { VerdocsFieldSignature as V, defineCustomElement as d };