@verdocs/web-sdk 1.0.25 → 1.4.0

package/dist/esm/verdocs-field-dropdown.entry.js

@@ -0,0 +1,55 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-ddbd60b5.js';
+
+const verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:sans-serif;font-family:var(--verdocs-font);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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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))))));
+  }
+};
+VerdocsFieldDropdown.style = verdocsFieldDropdownCss;
+
+export { VerdocsFieldDropdown as verdocs_field_dropdown };

package/dist/esm/verdocs-field-initial.entry.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-ddbd60b5.js';
+
+const verdocsFieldInitialCss = "verdocs-field-initial{font-family:sans-serif;font-family:var(--verdocs-font);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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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"))));
+  }
+};
+VerdocsFieldInitial.style = verdocsFieldInitialCss;
+
+export { VerdocsFieldInitial as verdocs_field_initial };

package/dist/esm/verdocs-field-payment.entry.js

@@ -0,0 +1,82 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-ddbd60b5.js';
+
+const verdocsFieldPaymentCss = "verdocs-field-payment{font-family:sans-serif;font-family:var(--verdocs-font);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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 })));
+  }
+};
+VerdocsFieldPayment.style = verdocsFieldPaymentCss;
+
+export { VerdocsFieldPayment as verdocs_field_payment };

package/dist/esm/verdocs-field-radio-button.entry.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-ddbd60b5.js';
+
+const verdocsFieldRadioButtonCss = "verdocs-field-radio-button{font-family:sans-serif;font-family:var(--verdocs-font);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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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}` })));
+  }
+};
+VerdocsFieldRadioButton.style = verdocsFieldRadioButtonCss;
+
+export { VerdocsFieldRadioButton as verdocs_field_radio_button };

package/dist/esm/verdocs-field-signature.entry.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-ddbd60b5.js';
+
+const verdocsFieldSignatureCss = "verdocs-field-signature{font-family:sans-serif;font-family:var(--verdocs-font);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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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"))));
+  }
+};
+VerdocsFieldSignature.style = verdocsFieldSignatureCss;
+
+export { VerdocsFieldSignature as verdocs_field_signature };

package/dist/esm/verdocs-field-textarea.entry.js

@@ -0,0 +1,59 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-ddbd60b5.js';
+
+const verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:sans-serif;font-family:var(--verdocs-font);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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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) })));
+  }
+};
+VerdocsFieldTextarea.style = verdocsFieldTextareaCss;
+
+export { VerdocsFieldTextarea as verdocs_field_textarea };

package/dist/esm/verdocs-field-textbox.entry.js

@@ -0,0 +1,59 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-ddbd60b5.js';
+
+const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:sans-serif;font-family:var(--verdocs-font);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-textbox input{-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-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid var(--verdocs-required-color)}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldTextbox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 } }, h("input", { type: "text", 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) })));
+  }
+};
+VerdocsFieldTextbox.style = verdocsFieldTextboxCss;
+
+export { VerdocsFieldTextbox as verdocs_field_textbox };

package/dist/esm/verdocs-initial-dialog.entry.js

@@ -0,0 +1,239 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-ddbd60b5.js';
+
+const verdocsInitialDialogCss = "verdocs-initial-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;display:none}verdocs-initial-dialog.open{display:block}verdocs-initial-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-initial-dialog .dialog{width:100%;max-width:340px;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);background:#f9f9f9}verdocs-initial-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:20px 20px 0 20px;line-height:28px;font-size:20px;font-weight:500}verdocs-initial-dialog .content{font-size:14px;padding:20px}verdocs-initial-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}verdocs-initial-dialog .buttons verdocs-button{margin-left:16px}verdocs-initial-dialog canvas{background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:300px;height:79px;max-width:100%;-webkit-box-shadow:0 0 6px 0 #0000001f;box-shadow:0 0 6px 0 #0000001f}verdocs-initial-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-initial-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-initial-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-initial-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-initial-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-initial-dialog .tabs .tab:hover{color:#55bc81}";
+
+const VerdocsInitialDialog = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.adopt = createEvent(this, "adopt", 7);
+    this.cancel = createEvent(this, "cancel", 7);
+    /**
+     * Initial signature text
+     */
+    this.fullname = '';
+    /**
+     * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.
+     */
+    this.open = false;
+    this.fontLoaded = false;
+    this.enteredInitials = '';
+    this.mode = 'type';
+  }
+  componentWillLoad() {
+    this.enteredInitials = this.fullname
+      .split(' ')
+      .map(s => s.substring(0, 1))
+      .join('')
+      .toUpperCase();
+    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');
+    ds.load().then(font => {
+      document.fonts.add(font);
+      this.fontLoaded = true;
+    });
+  }
+  componentDidLoad() {
+    this.redrawSignature();
+  }
+  componentDidUpdate() {
+    this.redrawSignature();
+  }
+  redrawSignature() {
+    if (!this.canvasElement) {
+      return;
+    }
+    const canvasWidth = this.canvasElement.width;
+    const context = this.canvasElement.getContext('2d');
+    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
+    let fontSize = 100;
+    do {
+      fontSize -= 2;
+      context.font = `${fontSize}px Dancing Script`;
+    } while (context.measureText(this.enteredInitials).width > canvasWidth - 32); // 32px padding each side
+    context.textAlign = 'center';
+    context.textBaseline = 'middle';
+    context.font = `${fontSize}px Dancing Script`;
+    context.fillText(this.enteredInitials, this.canvasElement.width / 2, this.canvasElement.height / 2);
+  }
+  // We need a separate event handler for clicking the background because it can receive events "through" other child components
+  handleDismiss(e) {
+    if (e.target.className === 'background-overlay') {
+      e.preventDefault();
+      this.handleCancel();
+    }
+  }
+  handleNameChange(e) {
+    this.enteredInitials = e.detail;
+  }
+  handleAdopt() {
+    const data = this.canvasElement.toDataURL('image/png');
+    this.adopt.emit(data);
+    this.open = false;
+  }
+  handleCancel() {
+    this.cancel.emit();
+    this.open = false;
+  }
+  /*
+  selColor(hex: string) {
+    this.color = hex;
+    this.animateDraw();
+  }
+
+  stopDraw() {
+    this.paint = false;
+    this.adoptedAndSigned = !this.hasSignature();
+  }
+
+  draw(e) {
+    this.paint = true;
+    this.addPoints(e, false);
+    this.animateDraw();
+  }
+
+  recordPoints(e) {
+    if (this.paint) {
+      this.addPoints(e, true);
+      this.animateDraw();
+    }
+  }
+
+  animateDraw() {
+    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);
+
+    this.canvas.strokeStyle = this.color || '#000000';
+    this.canvas.lineJoin = 'round';
+    this.canvas.lineWidth = 3;
+
+    for (let i = 0; i < this.points.length; i++) {
+      this.canvas.beginPath();
+      if (this.points[i].drag && i) {
+        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);
+        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);
+      } else {
+        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);
+        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);
+      }
+
+      this.canvas.lineTo(this.points[i].x, this.points[i].y);
+      this.canvas.closePath();
+      this.canvas.stroke();
+    }
+  }
+
+  drawCurve(color: string, curve: number) {
+    this.canvas.beginPath();
+  }
+
+
+
+  addPoints(e, drag: boolean) {
+    if (window) {
+      let x;
+      let y;
+      e.preventDefault();
+      if (e.touches && e.touches.length > 0) {
+        x = e.touches[0].clientX;
+      } else {
+        x = e.clientX;
+      }
+
+      if (e.touches && e.touches.length > 0) {
+        y = e.touches[0].clientY;
+      } else {
+        y = e.clientY;
+      }
+      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();
+      this.points.push({
+        x: x - rect.left,
+        y: y - rect.top,
+        drag: drag
+      });
+    }
+  }
+
+  clearPad() {
+    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);
+    this.points = [];
+    this.adoptedAndSigned = !this.hasSignature();
+  }
+
+    async adoptAndSign() {
+    try {
+      this.adoptedAndSigned = true;
+      await this.updateFullName();
+      await this.captureSignatureFromCanvas();
+      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';
+      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));
+      this.handleMode();
+    } catch (err) {
+      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));
+    }
+  }
+
+  handleMode() {
+    let currentField;
+    switch (this.mode) {
+      case 'signerview':
+        if (this.signatureMode === 'Signature') {
+          this.signatureService.postSignatureBlob().then(result => {
+            if (result && result.id && result.url) {
+              currentField = this.signatureService.currField;
+              this.signatureService.updateSigned(currentField.fName, true);
+              this.signatureService.toggleSig(false);
+              this.signatureService.setSignatureId(result.id);
+              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {
+                this.eventTracker.createEvent({
+                  category: 'verdoc',
+                  action: 'verdoc signed',
+                  label: `verdoc id: ${this.envelopeId}`
+                })
+                if (res && res.settings) {
+                  this.signatureService.setSignatureData(res.settings.base64);
+                  this.signatureService.setSignatureId(res.settings.signature_id);
+                }
+                this.snackbarService.dismiss();
+                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });
+              }).catch(err => {
+                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {
+                  duration: 3000
+                });
+                this.adoptedAndSigned = false;
+                return err;
+              });
+            }
+          });
+        } else {
+          this.signatureService.postInitialBlob().then(result => {
+            if (result && result.id && result.url) {
+              currentField = this.signatureService.currField;
+              this.signatureService.updateInitialed(currentField.fName, true);
+              this.signatureService.setInitialId(result.id);
+              this.signatureService.toggleSig(false);
+              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {
+                if (res && res.settings) {
+                  this.signatureService.setInitialData(res.settings.base64);
+                  this.signatureService.setInitialId(res.settings.initial_id);
+                }
+                this.snackbarService.dismiss();
+                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });
+              }).catch(err => {
+                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {
+                  duration: 3000
+                });
+                this.adoptedAndSigned = false;
+                return err;
+              });
+            }
+          });
+        }
+        break;
+    }
+  }
+   */
+  render() {
+    return (h(Host, { class: { open: this.open } }, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, "Create Your Initial"), h("div", { class: "content" }, h("verdocs-text-input", { placeholder: "Initials...", label: "Initials", value: this.enteredInitials, onFieldInput: e => this.handleNameChange(e) }), h("div", { class: "as-shown" }, "As shown on driver's license or govt. ID card."), h("div", { class: "tabs" }, h("div", { class: { tab: true, active: this.mode === 'type' }, onClick: () => (this.mode = 'type') }, "Type"), h("div", { class: { tab: true, active: this.mode === 'draw' }, onClick: () => (this.mode = 'draw') }, "Draw")), this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }), h("div", { class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), h("div", { class: "buttons" }, h("verdocs-button", { label: "CANCEL", variant: "outline", onPress: () => this.handleCancel() }), h("verdocs-button", { label: "Adopt & Sign", onPress: () => this.handleAdopt() })))))));
+  }
+};
+VerdocsInitialDialog.style = verdocsInitialDialogCss;
+
+export { VerdocsInitialDialog as verdocs_initial_dialog };