@verdocs/web-sdk 1.0.25 → 1.4.0

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: '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;
+}

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

@@ -0,0 +1,155 @@
+import { Component, h, Host, Prop, Event, Method } from '@stencil/core';
+/**
+ * Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
+ * button will be shown. Clicking the button will show a dialog to adopt a signature.
+ */
+export class VerdocsFieldSignature {
+  constructor() {
+    /**
+     * 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 is() { return "verdocs-field-signature"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-field-signature.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-field-signature.css"]
+  }; }
+  static get properties() { return {
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the field is required."
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "fullName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The user's full name."
+      },
+      "attribute": "full-name",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The base64 signature value."
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get events() { return [{
+      "method": "adopt",
+      "name": "adopt",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "cancel",
+      "name": "cancel",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted when the user cancels the process."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "focusField": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1,10 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Document Fields/Signature',
+  component: 'verdocs-field-signature',
+  args: {
+    required: false,
+  },
+  argTypes: {},
+};
+export const Signature = ({ required }) => html `<verdocs-field-signature .required=${required} />`;

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

@@ -0,0 +1,32 @@
+verdocs-field-textarea {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  width: 150px;
+  height: 15px;
+  display: block;
+  font-size: 11px;
+  position: relative;
+  background-color: transparent;
+  transform-origin: bottom left;
+}
+verdocs-field-textarea textarea {
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.87);
+  font-weight: 500;
+  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 {
+  animation: verdocs-field-pulse 0.75s 2;
+}

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

@@ -0,0 +1,233 @@
+import { Component, h, Host, Prop, Event, State, Method } from '@stencil/core';
+/**
+ * Display a multi-line text input field.
+ */
+export class VerdocsFieldTextarea {
+  constructor() {
+    /**
+     * 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 is() { return "verdocs-field-textarea"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-field-textarea.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-field-textarea.css"]
+  }; }
+  static get properties() { return {
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A placeholder to assist the user in completing the field."
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "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"
+    },
+    "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": "''"
+    },
+    "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 states() { return {
+    "focused": {}
+  }; }
+  static get events() { return [{
+      "method": "fieldFocus",
+      "name": "fieldFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the input field loses focus."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }, {
+      "method": "fieldBlur",
+      "name": "fieldBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the input field gains focus."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }, {
+      "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": {}
+      }
+    }, {
+      "method": "fieldInput",
+      "name": "fieldInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired on every character entered into / deleted from the field."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "focusField": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1,14 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Document Fields/Textarea',
+  component: 'verdocs-field-textarea',
+  args: {
+    placeholder: 'Email address...',
+    order: 1,
+    value: '',
+    disabled: false,
+    required: false,
+  },
+  argTypes: {},
+};
+export const Textarea = ({ placeholder, order, value, required, disabled }) => html `<verdocs-field-textarea .placeholder="${placeholder}" .order="${order}" .required="${required}" .value="${value}" .disabled="${disabled}" />`;