@verdocs/web-sdk 2.3.63 → 2.3.65

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

@@ -1,157 +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 verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown.disabled{opacity:0.5}verdocs-field-dropdown select{cursor:inherit;position:absolute;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 6px, calc(100% - 3px) 6px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2);padding:0 5px}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid #cc0000}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-dropdown verdocs-button-panel{display:block;margin-left:-33px;margin-top:-1px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-dropdown .settings-icon{position:absolute;top:-2px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-dropdown .settings-icon svg{fill:#707ae5}verdocs-field-dropdown .settings-icon:hover{opacity:1}";
-
-const VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.fieldChange = createEvent(this, "fieldChange", 7);
-    this.settingsChanged = createEvent(this, "settingsChanged", 7);
-    this.deleted = createEvent(this, "deleted", 7);
-    this.fieldStore = null;
-    this.roleStore = null;
-    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.el.focus();
-  }
-  handleChange(e) {
-    this.fieldChange.emit(e.target.value);
-  }
-  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 value = (settings === null || settings === void 0 ? void 0 : settings.value) || '';
-    if (this.done) {
-      return h(Host, { class: { done: this.done } }, value);
-    }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("select", { tabIndex: settings.order, disabled: disabled, ref: el => (this.el = el), onChange: e => this.handleChange(e) }, h("option", { value: "" }, "Select..."), (settings.options || []).map(option => (h("option", { value: option.id, selected: option.value === value }, option.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-${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: "Dropdowns are used to capture a recipient's selection of one of several options." })))))));
-  }
-  static get style() { return verdocsFieldDropdownCss; }
-}, [0, "verdocs-field-dropdown", {
-    "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-dropdown", "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-dropdown":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsFieldDropdown$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 VerdocsFieldDropdown$1, d as defineCustomElement$1 } from './verdocs-field-dropdown2.js';
 
 const VerdocsFieldDropdown = VerdocsFieldDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{esm/verdocs-field-dropdown.entry.js → components/verdocs-field-dropdown2.js}

@@ -1,22 +1,24 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } 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 verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown.disabled{opacity:0.5}verdocs-field-dropdown select{cursor:inherit;position:absolute;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 6px, calc(100% - 3px) 6px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2);padding:0 5px}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid #cc0000}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-dropdown verdocs-button-panel{display:block;margin-left:-33px;margin-top:-1px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-dropdown .settings-icon{position:absolute;top:-2px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-dropdown .settings-icon svg{fill:#707ae5}verdocs-field-dropdown .settings-icon:hover{opacity:1}";
 
-const VerdocsFieldDropdown = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const VerdocsFieldDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
     this.fieldChange = createEvent(this, "fieldChange", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
@@ -30,6 +32,7 @@ const VerdocsFieldDropdown = class {
     this.done = false;
     this.xscale = 1;
     this.yscale = 1;
+    this.pagenumber = 1;
     this.showingProperties = false;
   }
   async focusField() {
@@ -81,7 +84,75 @@ const VerdocsFieldDropdown = class {
         return this.hideSettingsPanel();
       }, helpText: "Dropdowns are used to capture a recipient's selection of one of several options." })))))));
   }
-};
-VerdocsFieldDropdown.style = verdocsFieldDropdownCss;
+  static get style() { return verdocsFieldDropdownCss; }
+}, [0, "verdocs-field-dropdown", {
+    "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-dropdown", "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-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsFieldDropdown);
+      }
+      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 { VerdocsFieldDropdown as verdocs_field_dropdown };
+export { VerdocsFieldDropdown as V, defineCustomElement as d };

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

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

package/dist/{esm/verdocs-field-initial.entry.js → components/verdocs-field-initial2.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-initial-dialog2.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 verdocsFieldInitialCss = "verdocs-field-initial{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-initial.disabled{opacity:0.5}verdocs-field-initial.done{border:none;opacity:1}verdocs-field-initial img{display:block;max-width:100%;max-height:100%}verdocs-field-initial button{cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-initial button.hide{display:none}verdocs-field-initial.required{border:1px solid #cc0000}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-initial verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-initial verdocs-button-panel[data-active],verdocs-field-initial verdocs-button-panel:hover{opacity:1}verdocs-field-initial verdocs-button-panel .icon svg{fill:#333333}verdocs-field-initial verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-initial .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-initial .settings-icon svg{fill:#707ae5}verdocs-field-initial .settings-icon:hover{opacity:1}";
 
-const VerdocsFieldInitial = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const VerdocsFieldInitial = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
     this.adopt = createEvent(this, "adopt", 7);
     this.exit = createEvent(this, "exit", 7);
     this.fieldChange = createEvent(this, "fieldChange", 7);
@@ -34,6 +37,7 @@ const VerdocsFieldInitial = class {
     this.done = false;
     this.xscale = 1;
     this.yscale = 1;
+    this.pagenumber = 1;
     this.showingProperties = false;
     this.tempInitials = '';
   }
@@ -103,7 +107,82 @@ const VerdocsFieldInitial = class {
         return this.hideSettingsPanel();
       }, helpText: "initial fields capture the recipient's initials on a clause or page." })))))));
   }
-};
-VerdocsFieldInitial.style = verdocsFieldInitialCss;
+  static get style() { return verdocsFieldInitialCss; }
+}, [0, "verdocs-field-initial", {
+    "templateid": [1],
+    "fieldname": [1],
+    "disabled": [4],
+    "initials": [1],
+    "editable": [4],
+    "moveable": [4],
+    "done": [4],
+    "xscale": [2],
+    "yscale": [2],
+    "pagenumber": [2],
+    "showingProperties": [32],
+    "tempInitials": [32],
+    "focusField": [64],
+    "showSettingsPanel": [64],
+    "hideSettingsPanel": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-field-initial", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-field-initial":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsFieldInitial);
+      }
+      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-initial-dialog":
+      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 { VerdocsFieldInitial as verdocs_field_initial };
+export { VerdocsFieldInitial as V, defineCustomElement as d };

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

@@ -34,6 +34,7 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.signed = false;
     this.xscale = 1;
     this.yscale = 1;
+    this.pagenumber = 1;
     this.preparedMessage = undefined;
     this.signatureUrl = '';
     this.roleindex = 0;
@@ -97,6 +98,7 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "signed": [4],
     "xscale": [2],
     "yscale": [2],
+    "pagenumber": [2],
     "roleindex": [2],
     "preparedMessage": [32],
     "signatureUrl": [32],