@verdocs/web-sdk 1.0.23 → 1.2.0

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

@@ -0,0 +1,363 @@
+import { Component, h, Host, Prop, Event, State } from '@stencil/core';
+/**
+ * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
+ * input types like text and checkbox.
+ */
+export class VerdocsFieldPayment {
+  constructor() {
+    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 is() { return "verdocs-field-payment"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-field-payment.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-field-payment.css"]
+  }; }
+  static get properties() { return {
+    "field": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IDocumentField",
+        "resolved": "IDocumentField",
+        "references": {
+          "IDocumentField": {
+            "location": "import",
+            "path": "@verdocs/js-sdk/Documents/Documents"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The field to display."
+      }
+    },
+    "fields": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "any[]",
+        "resolved": "any[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "pageNum": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "page-num",
+      "reflect": false
+    },
+    "roleName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "role-name",
+      "reflect": false
+    },
+    "fieldId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "field-id",
+      "reflect": false
+    },
+    "recipients": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "recipients",
+      "reflect": false
+    },
+    "selectedRoleName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected-role-name",
+      "reflect": false
+    },
+    "pdfPages": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "any[]",
+        "resolved": "any[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "currentSignature": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current-signature",
+      "reflect": false
+    },
+    "currentSignatureId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current-signature-id",
+      "reflect": false
+    },
+    "currentInitial": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current-initial",
+      "reflect": false
+    },
+    "currentInitialId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current-initial-id",
+      "reflect": false
+    },
+    "focused": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "focused",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "signed": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "signed",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "preparedMessage": {},
+    "signatureUrl": {}
+  }; }
+  static get events() { return [{
+      "method": "signatureComplete",
+      "name": "signatureComplete",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "initialComplete",
+      "name": "initialComplete",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/elements/verdocs-field-payment/verdocs-field-payment.stories.js

@@ -0,0 +1,8 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Elements/Document Fields/Payment',
+  component: 'verdocs-field-payment',
+  args: {},
+  argTypes: {},
+};
+export const Payment = ({}) => html `<verdocs-field-payment />`;

package/dist/collection/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.css

@@ -0,0 +1,58 @@
+verdocs-field-radio-button {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  width: 14px;
+  height: 14px;
+  display: block;
+  font-size: 11px;
+  position: relative;
+  background-color: transparent;
+  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;
+  transition: all 250ms ease;
+}
+verdocs-field-radio-button input[type=radio]:checked + label:before {
+  background-color: #55bc81;
+  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 {
+  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 {
+  animation: verdocs-field-pulse 0.75s 2;
+}

package/dist/collection/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.js

@@ -0,0 +1,174 @@
+import { Component, h, Host, Prop, Event } from '@stencil/core';
+/**
+ * Displays a radio button.
+ */
+export class VerdocsFieldRadioButton {
+  constructor() {
+    /**
+     * 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 is() { return "verdocs-field-radio-button"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-field-radio-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-field-radio-button.css"]
+  }; }
+  static get properties() { return {
+    "order": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the tabIndex of the input element."
+      },
+      "attribute": "order",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the value of the input element."
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the value of the input element."
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the name of the input element."
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If true, the field will be marked required."
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the disabled attribute of the input element."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "fieldChange",
+      "name": "fieldChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\nIt is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\nkeypress."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.stories.js

@@ -0,0 +1,13 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Elements/Document Fields/Radio Button',
+  component: 'verdocs-field-radio-button',
+  args: {
+    required: false,
+    value: 'id-1',
+    checked: false,
+    name: 'radio-1',
+  },
+  argTypes: {},
+};
+export const RadioButton = ({ required, value, checked, name }) => html `<verdocs-field-radio-button .required=${required} .value=${value} .checked=${checked} .name=${name} />`;

package/dist/collection/components/elements/verdocs-field-signature/verdocs-field-signature.css

@@ -0,0 +1,39 @@
+verdocs-field-signature {
+  /* Fallback font for old browsers */
+  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;
+  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 {
+  box-sizing: border-box;
+  border: none;
+  color: rgba(0, 0, 0, 0.87);
+  font-weight: 500;
+  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 {
+  animation: verdocs-field-pulse 0.75s 2;
+}