@verdocs/web-sdk 1.2.0 → 1.4.6

package/dist/components/verdocs-field-dropdown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsFieldDropdown extends Components.VerdocsFieldDropdown, HTMLElement {}
+export const VerdocsFieldDropdown: {
+  prototype: VerdocsFieldDropdown;
+  new (): VerdocsFieldDropdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { V as VerdocsFieldDropdown$1, d as defineCustomElement$1 } from './verdocs-field-dropdown2.js';
+
+const VerdocsFieldDropdown = VerdocsFieldDropdown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsFieldDropdown, defineCustomElement };

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

@@ -0,0 +1,78 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+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 select{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) 4px, calc(100% - 3px) 4px, 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)}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid var(--verdocs-required-color)}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.fieldFocus = createEvent(this, "fieldFocus", 7);
+    this.fieldBlur = createEvent(this, "fieldBlur", 7);
+    this.fieldChange = createEvent(this, "fieldChange", 7);
+    /**
+     * The optoins to choose from.
+     */
+    this.options = [];
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+    /**
+     * The currently selected value.
+     */
+    this.value = '';
+    this.focused = false;
+  }
+  async focusField() {
+    this.focused = true;
+    this.el.focus();
+    this.fieldFocus.emit(true);
+  }
+  handleBlur() {
+    this.focused = false;
+    this.fieldBlur.emit(true);
+  }
+  handleFocus() {
+    this.focused = true;
+    this.fieldFocus.emit(true);
+  }
+  handleChange(e) {
+    this.fieldChange.emit(e.target.value);
+  }
+  render() {
+    return (h(Host, { class: { focused: this.focused, required: this.required } }, h("select", { tabIndex: this.order, disabled: this.disabled, ref: el => (this.el = el), onChange: e => this.handleChange(e), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus() }, h("option", { value: "" }, "Select..."), this.options.map(option => (h("option", { value: option.id, selected: option.value === this.value }, option.value))))));
+  }
+  static get style() { return verdocsFieldDropdownCss; }
+}, [0, "verdocs-field-dropdown", {
+    "options": [16],
+    "required": [4],
+    "order": [2],
+    "disabled": [4],
+    "value": [1],
+    "focused": [32],
+    "focusField": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-field-dropdown"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-field-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsFieldDropdown);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsFieldDropdown as V, defineCustomElement as d };

package/dist/components/verdocs-field-initial.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsFieldInitial extends Components.VerdocsFieldInitial, HTMLElement {}
+export const VerdocsFieldInitial: {
+  prototype: VerdocsFieldInitial;
+  new (): VerdocsFieldInitial;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { V as VerdocsFieldInitial$1, d as defineCustomElement$1 } from './verdocs-field-initial2.js';
+
+const VerdocsFieldInitial = VerdocsFieldInitial$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsFieldInitial, defineCustomElement };

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

@@ -0,0 +1,86 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './verdocs-button2.js';
+import { d as defineCustomElement$2 } from './verdocs-initial-dialog2.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 img{display:block;max-width:100%;max-height:100%}verdocs-field-initial button{-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 var(--verdocs-required-color)}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldInitial = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.adopt = createEvent(this, "adopt", 7);
+    this.cancel = createEvent(this, "cancel", 7);
+    /**
+     * Whether the field is required.
+     */
+    this.required = false;
+    /**
+     * The user's full name.
+     */
+    this.fullName = '';
+    /**
+     * The base64 signature value.
+     */
+    this.value = '';
+  }
+  async focusField() {
+    this.handleShow();
+  }
+  handleShow() {
+    this.dialog = document.createElement('verdocs-initial-dialog');
+    this.dialog.open = true;
+    this.dialog.fullName = this.fullName;
+    this.dialog.addEventListener('cancel', () => {
+      var _a;
+      console.log('cancel');
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.addEventListener('adopt', e => {
+      var _a;
+      console.log('adopt', e);
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.body.append(this.dialog);
+  }
+  render() {
+    return (h(Host, { class: { required: this.required } }, this.value !== '' ? (h("img", { src: this.value, alt: "Initials" })) : (h("button", { class: {}, onClick: () => this.handleShow() }, "Initial"))));
+  }
+  static get style() { return verdocsFieldInitialCss; }
+}, [0, "verdocs-field-initial", {
+    "required": [4],
+    "fullName": [1, "full-name"],
+    "value": [1],
+    "focusField": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-field-initial", "verdocs-button", "verdocs-initial-dialog", "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$3();
+      }
+      break;
+    case "verdocs-initial-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsFieldInitial as V, defineCustomElement as d };

package/dist/components/verdocs-field-payment.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsFieldPayment extends Components.VerdocsFieldPayment, HTMLElement {}
+export const VerdocsFieldPayment: {
+  prototype: VerdocsFieldPayment;
+  new (): VerdocsFieldPayment;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { V as VerdocsFieldPayment$1, d as defineCustomElement$1 } from './verdocs-field-payment2.js';
+
+const VerdocsFieldPayment = VerdocsFieldPayment$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsFieldPayment, defineCustomElement };

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

@@ -0,0 +1,114 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const verdocsFieldPaymentCss = "verdocs-field-payment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{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-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;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) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldPayment = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.signatureComplete = createEvent(this, "signatureComplete", 7);
+    this.initialComplete = createEvent(this, "initialComplete", 7);
+    this.focused = false;
+    this.signed = false;
+    this.signatureUrl = '';
+    this._fields = [];
+    // envelopeFieldsFormGroup: FormGroup;
+    this.signatureFile = null;
+    this.initialFile = null;
+    this.focusOrderNumber = -1;
+    this.focusFieldName = '';
+    this.activeElement = null;
+    this.showError = {
+      pageNum: -1,
+      fieldIndex: -1,
+      type: null,
+    };
+    this.dialogOpened = false;
+    this.closeAllErrors = false;
+    this.fieldsMap = {};
+    this.fieldsForCurrentSigner = [];
+    this.fontSize = 11;
+    this.averageFontWidth = 5;
+    this.requiredFields = [];
+  }
+  componentWillLoad() {
+    // Load validators
+    // Load fields
+    // Get role names
+    console.log('sign field', this.field);
+    if (this.recipients && this.recipients.length > 0) {
+      const preparer = this.recipients.find(r => r.type === 'preparer');
+      console.log('Found preparer', preparer);
+      if (preparer) {
+        this.preparedMessage = `Prepared by ${preparer['full_name']}`;
+      }
+    }
+  }
+  // [tabIndex]="field.role !== roleName ? -1 : 1"
+  // [ngStyle]="field.element_style"
+  // [value]="field.value"
+  // (click)="initiateSign(field)"
+  // (blur)="validateChanges(field)"
+  // [disabled]="field.role!==roleName"
+  // [id]="field.key"
+  // <button _ngcontent-app-root-c342="" class="envelope__field" tabindex="1" ng-reflect-ng-style="[object Object]"
+  // ng-reflect-ng-class="[object Object]" value="" id="signatureP5-1"
+  // style="height: 100%; width: 100%; background: none; font-size: 11px; border: 1px solid rgb(204, 0, 0);"> Signature </button>
+  //     bottom: 229.333
+  // px
+  // ;
+  //     left: 169.333
+  // px
+  // ;
+  //     height: 41
+  // px
+  // ;
+  //     width: 82
+  // px
+  // ;
+  //     background-color: rgba(156, 39, 176, 0.4);
+  //     transform: scale(1.33333, 1.33333);
+  // }
+  // <style>
+  // .envelope__item[_ngcontent-app-root-c342] {
+  //     position: absolute;
+  //     transform-origin: bottom left;
+  //     opacity: 1;
+  render() {
+    return (h(Host, { class: { focused: this.focused, storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']) } }, h("button", { class: { hide: this.signed } }, "Payment"), this.signed ? h("div", { class: "frame" }) : h("div", { style: { display: 'none' } }), h("img", { width: "100%", height: "100%", src: this.signatureUrl })));
+  }
+  static get style() { return verdocsFieldPaymentCss; }
+}, [0, "verdocs-field-payment", {
+    "field": [16],
+    "fields": [16],
+    "pageNum": [2, "page-num"],
+    "roleName": [1, "role-name"],
+    "fieldId": [1, "field-id"],
+    "recipients": [8],
+    "selectedRoleName": [1, "selected-role-name"],
+    "pdfPages": [16],
+    "currentSignature": [1, "current-signature"],
+    "currentSignatureId": [1, "current-signature-id"],
+    "currentInitial": [1, "current-initial"],
+    "currentInitialId": [1, "current-initial-id"],
+    "focused": [4],
+    "signed": [4],
+    "preparedMessage": [32],
+    "signatureUrl": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-field-payment"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-field-payment":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsFieldPayment);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsFieldPayment as V, defineCustomElement as d };

package/dist/components/verdocs-field-radio-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsFieldRadioButton extends Components.VerdocsFieldRadioButton, HTMLElement {}
+export const VerdocsFieldRadioButton: {
+  prototype: VerdocsFieldRadioButton;
+  new (): VerdocsFieldRadioButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { V as VerdocsFieldRadioButton$1, d as defineCustomElement$1 } from './verdocs-field-radio-button2.js';
+
+const VerdocsFieldRadioButton = VerdocsFieldRadioButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsFieldRadioButton, defineCustomElement };

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

@@ -0,0 +1,66 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const verdocsFieldRadioButtonCss = "verdocs-field-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:14px;height:14px;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 input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button input[type=radio]+label:before{content:\"\";background:#f4f4f4;border-radius:100%;border:1px solid rgba(0, 0, 0, 0.2);display:inline-block;width:13px;height:13px;position:relative;top:2px;margin-right:2px;vertical-align:top;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f4f4f4;box-shadow:inset 0 0 0 2px #f4f4f4}verdocs-field-radio-button input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f4f4f4;box-shadow:inset 0 0 0 4px #f4f4f4;border-color:#b4b4b4;background:#b4b4b4}verdocs-field-radio-button input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required input[type=radio]+label:before{border:1px solid var(--verdocs-required-color)}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}";
+
+const VerdocsFieldRadioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.fieldChange = createEvent(this, "fieldChange", 7);
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the value of the input element.
+     */
+    this.checked = false;
+    /**
+     * Sets the value of the input element.
+     */
+    this.value = '';
+    /**
+     * Sets the name of the input element.
+     */
+    this.name = '';
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+  }
+  handleChange(e) {
+    console.log('changed', e);
+    this.fieldChange.emit(e.target.checked);
+  }
+  render() {
+    return (h(Host, { class: { required: this.required, storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']) } }, h("input", { type: "radio", tabIndex: this.order, value: this.value, name: this.name, id: `${this.name}=${this.value}`, checked: this.checked, disabled: this.disabled, required: this.required, onChange: e => this.handleChange(e) }), h("label", { htmlFor: `${this.name}=${this.value}` })));
+  }
+  static get style() { return verdocsFieldRadioButtonCss; }
+}, [0, "verdocs-field-radio-button", {
+    "order": [2],
+    "checked": [4],
+    "value": [1],
+    "name": [1],
+    "required": [4],
+    "disabled": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-field-radio-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-field-radio-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsFieldRadioButton);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsFieldRadioButton as V, defineCustomElement as d };

package/dist/components/verdocs-field-signature.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsFieldSignature extends Components.VerdocsFieldSignature, HTMLElement {}
+export const VerdocsFieldSignature: {
+  prototype: VerdocsFieldSignature;
+  new (): VerdocsFieldSignature;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { V as VerdocsFieldSignature$1, d as defineCustomElement$1 } from './verdocs-field-signature2.js';
+
+const VerdocsFieldSignature = VerdocsFieldSignature$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsFieldSignature, defineCustomElement };

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

@@ -0,0 +1,86 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './verdocs-button2.js';
+import { d as defineCustomElement$2 } from './verdocs-signature-dialog2.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 img{display:block;max-width:100%;max-height:100%}verdocs-field-signature button{-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 var(--verdocs-required-color)}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldSignature = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.adopt = createEvent(this, "adopt", 7);
+    this.cancel = createEvent(this, "cancel", 7);
+    /**
+     * Whether the field is required.
+     */
+    this.required = false;
+    /**
+     * The user's full name.
+     */
+    this.fullName = '';
+    /**
+     * The base64 signature value.
+     */
+    this.value = '';
+  }
+  async focusField() {
+    this.handleShow();
+  }
+  handleShow() {
+    this.dialog = document.createElement('verdocs-signature-dialog');
+    this.dialog.open = true;
+    this.dialog.fullName = this.fullName;
+    this.dialog.addEventListener('cancel', () => {
+      var _a;
+      console.log('cancel');
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.addEventListener('adopt', e => {
+      var _a;
+      console.log('adopt', e);
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.body.append(this.dialog);
+  }
+  render() {
+    return (h(Host, { class: { required: this.required } }, this.value !== '' ? (h("img", { src: this.value, alt: "Signature" })) : (h("button", { class: {}, onClick: () => this.handleShow() }, "Signature"))));
+  }
+  static get style() { return verdocsFieldSignatureCss; }
+}, [0, "verdocs-field-signature", {
+    "required": [4],
+    "fullName": [1, "full-name"],
+    "value": [1],
+    "focusField": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-field-signature", "verdocs-button", "verdocs-signature-dialog", "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$3();
+      }
+      break;
+    case "verdocs-signature-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsFieldSignature as V, defineCustomElement as d };

package/dist/components/verdocs-field-textarea.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsFieldTextarea extends Components.VerdocsFieldTextarea, HTMLElement {}
+export const VerdocsFieldTextarea: {
+  prototype: VerdocsFieldTextarea;
+  new (): VerdocsFieldTextarea;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { V as VerdocsFieldTextarea$1, d as defineCustomElement$1 } from './verdocs-field-textarea2.js';
+
+const VerdocsFieldTextarea = VerdocsFieldTextarea$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsFieldTextarea, defineCustomElement };

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

@@ -0,0 +1,82 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea textarea{-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%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid var(--verdocs-required-color)}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.fieldFocus = createEvent(this, "fieldFocus", 7);
+    this.fieldBlur = createEvent(this, "fieldBlur", 7);
+    this.fieldChange = createEvent(this, "fieldChange", 7);
+    this.fieldInput = createEvent(this, "fieldInput", 7);
+    /**
+     * A placeholder to assist the user in completing the field.
+     */
+    this.placeholder = '';
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the value of the input element.
+     */
+    this.value = '';
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+    this.focused = false;
+  }
+  async focusField() {
+    this.focused = true;
+    this.el.focus();
+    this.fieldFocus.emit(true);
+  }
+  handleBlur() {
+    this.focused = false;
+    this.fieldBlur.emit(true);
+  }
+  handleFocus() {
+    this.focused = true;
+    this.fieldFocus.emit(true);
+  }
+  handleChange(e) {
+    this.fieldChange.emit(e.target.value);
+  }
+  handleInput(e) {
+    this.fieldInput.emit(e.target.value);
+  }
+  render() {
+    return (h(Host, { class: { focused: this.focused, required: this.required, storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']) } }, h("textarea", { placeholder: this.placeholder || '', tabIndex: this.order, value: this.value, disabled: this.disabled, required: this.required, ref: el => (this.el = el), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), onChange: e => this.handleChange(e), onInput: e => this.handleInput(e) })));
+  }
+  static get style() { return verdocsFieldTextareaCss; }
+}, [0, "verdocs-field-textarea", {
+    "placeholder": [1],
+    "order": [2],
+    "value": [1],
+    "required": [4],
+    "disabled": [4],
+    "focused": [32],
+    "focusField": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-field-textarea"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-field-textarea":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsFieldTextarea);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsFieldTextarea as V, defineCustomElement as d };

package/dist/components/verdocs-field-textbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsFieldTextbox extends Components.VerdocsFieldTextbox, HTMLElement {}
+export const VerdocsFieldTextbox: {
+  prototype: VerdocsFieldTextbox;
+  new (): VerdocsFieldTextbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { V as VerdocsFieldTextbox$1, d as defineCustomElement$1 } from './verdocs-field-textbox2.js';
+
+const VerdocsFieldTextbox = VerdocsFieldTextbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsFieldTextbox, defineCustomElement };