@verdocs/web-sdk 1.1.0 → 1.4.2

package/dist/collection/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.js

@@ -0,0 +1,292 @@
+import { Component, Prop, h, Event, Fragment, Host, State } from '@stencil/core';
+import Question from './question.svg';
+/**
+ * Display a text input field. This adds a partially-transparent overlay and screen-centered dialog
+ * box with a message and optional header/title. An OK button is shown that will dismiss the message.
+ * It can also be dismissed by clicking the background overlay.
+ */
+export class VerdocsKbaDialog {
+  constructor() {
+    /**
+     * Which step this confirmation is for, in a multi-step process. Ignored if `steps` is < 2.
+     */
+    this.step = 1;
+    /**
+     * How many steps exist in a multi-step process. Set to 1 for a single-step process (hides the indicator).
+     */
+    this.steps = 3;
+    /**
+     * If set, a help/instructions box will be displayed with this title
+     */
+    this.helptitle = 'One Time Code';
+    /**
+     * If set, a help/instructions box will be displayed with this text
+     */
+    this.helptext = 'Please check your text messages for a security code, and enter the code below.';
+    /**
+     * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.
+     */
+    this.mode = 'choice';
+    /**
+     * For text input challenges, the label to display next to the input field.
+     */
+    this.label = 'PIN';
+    /**
+     * For text input challenges, the placeholder to display inside the input field.
+     */
+    this.placeholder = 'Enter your PIN...';
+    /**
+     * For choice challenges, a set of choices to choose from. 6 choices is recommended to fit most screen sizes.
+     */
+    this.choices = ['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd'];
+    /**
+     * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.
+     */
+    this.open = false;
+    this.response = '';
+  }
+  handleCancel() {
+    this.cancel.emit();
+    this.open = false;
+  }
+  // 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();
+    }
+  }
+  handleDone() {
+    this.done.emit(this.response);
+    this.open = false;
+  }
+  render() {
+    return (h(Host, { style: { display: this.open ? 'block' : 'none' } },
+      h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) },
+        h("div", { class: "dialog" },
+          h("div", { class: "heading" },
+            "Confirm Your Identity",
+            this.steps > 1 ? (h("span", { class: "step" },
+              "(",
+              this.step,
+              "/",
+              this.steps,
+              ")")) : (h(Fragment, null))),
+          h("div", { class: "help-box" },
+            h("div", { class: "help-icon", innerHTML: Question }),
+            h("div", { class: "help-details" },
+              h("div", { class: "help-title" }, this.helptitle),
+              h("div", { class: "help-text" }, this.helptext))),
+          this.mode === 'choice' ? (h("div", { class: "choices" }, this.choices.map(choice => (h("div", { class: `choice ${choice === this.response ? 'selected' : ''}`, onClick: () => {
+              this.response = choice;
+            } }, choice))))) : (h("div", { class: "input" },
+            h("label", { htmlFor: "verdocs-kba-input" }, this.label),
+            h("input", { type: "text", id: "verdocs-kba-input", name: "verdocs-kba-input", placeholder: this.placeholder }))),
+          h("div", { class: "buttons" },
+            h("verdocs-button", { label: "Cancel", variant: "outline", onPress: () => this.handleCancel() }),
+            h("verdocs-button", { label: "Done", onPress: () => this.handleDone(), disabled: !this.response }))))));
+  }
+  static get is() { return "verdocs-kba-dialog"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-kba-dialog.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-kba-dialog.css"]
+  }; }
+  static get properties() { return {
+    "step": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Which step this confirmation is for, in a multi-step process. Ignored if `steps` is < 2."
+      },
+      "attribute": "step",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "steps": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "How many steps exist in a multi-step process. Set to 1 for a single-step process (hides the indicator)."
+      },
+      "attribute": "steps",
+      "reflect": false,
+      "defaultValue": "3"
+    },
+    "helptitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If set, a help/instructions box will be displayed with this title"
+      },
+      "attribute": "helptitle",
+      "reflect": false,
+      "defaultValue": "'One Time Code'"
+    },
+    "helptext": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If set, a help/instructions box will be displayed with this text"
+      },
+      "attribute": "helptext",
+      "reflect": false,
+      "defaultValue": "'Please check your text messages for a security code, and enter the code below.'"
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'text' | 'choice'",
+        "resolved": "\"choice\" | \"text\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed."
+      },
+      "attribute": "mode",
+      "reflect": false,
+      "defaultValue": "'choice'"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "For text input challenges, the label to display next to the input field."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "'PIN'"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "For text input challenges, the placeholder to display inside the input field."
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "'Enter your PIN...'"
+    },
+    "choices": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "For choice challenges, a set of choices to choose from. 6 choices is recommended to fit most screen sizes."
+      },
+      "defaultValue": "['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd']"
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed."
+      },
+      "attribute": "open",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "response": {}
+  }; }
+  static get events() { return [{
+      "method": "cancel",
+      "name": "cancel",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the dialog is closed. The event data will contain the closure reason."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "done",
+      "name": "done",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the dialog is closed. The event data will contain the closure reason."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.stories.js

@@ -0,0 +1,36 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Dialogs/KBA Dialog',
+  component: 'verdocs-kba-dialog',
+  args: {
+    open: true,
+    mode: 'choice',
+    helptitle: 'One Time Code',
+    helptext: 'Please check your text messages for a security code, and enter the code below.',
+    label: 'PIN',
+    placeholder: 'Enter your PIN...',
+    step: 1,
+    steps: 3,
+    choices: ['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd'],
+  },
+  argTypes: {
+    closed: {
+      action: 'closed',
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+export const KBADialog = ({ helptitle, helptext, label, placeholder, mode, step, steps, choices, open, closed }) => html `<verdocs-kba-dialog
+    .mode=${mode}
+    .helptitle=${helptitle}
+    .helptext=${helptext}
+    .label=${label}
+    .placeholder=${placeholder}
+    .step=${step}
+    .steps=${steps}
+    .choices=${choices}
+    .open=${open}
+    @closed=${closed}
+  />`;

package/dist/collection/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.css

@@ -1,6 +1,5 @@
 verdocs-ok-dialog {
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   box-sizing: border-box;
 }
 verdocs-ok-dialog .background-overlay {
@@ -29,11 +28,11 @@ verdocs-ok-dialog .heading {
   flex-direction: row;
   background: #444444;
   padding: 8px 16px;
-  color: white;
+  color: #ffffff;
 }
 verdocs-ok-dialog .content {
   font-size: 14px;
-  background: #fff;
+  background: #ffffff;
   padding: 20px;
 }
 verdocs-ok-dialog .buttons {

package/dist/collection/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.css

@@ -1,6 +1,5 @@
 verdocs-signature-dialog {
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   box-sizing: border-box;
   display: none;
 }
@@ -25,7 +24,7 @@ verdocs-signature-dialog .dialog {
   border-radius: 4px;
   overflow: hidden;
   box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);
-  background: #f9f9f9;
+  background: #f5f5fa;
 }
 verdocs-signature-dialog .heading {
   display: flex;
@@ -50,7 +49,7 @@ verdocs-signature-dialog .buttons verdocs-button {
   margin-left: 16px;
 }
 verdocs-signature-dialog canvas {
-  background: #fff;
+  background: #ffffff;
   box-sizing: border-box;
   margin: 0 auto;
   width: 300px;
@@ -79,8 +78,8 @@ verdocs-signature-dialog .tabs .tab {
   cursor: pointer;
 }
 verdocs-signature-dialog .tabs .tab.active {
-  border-bottom: 2px solid #ccc;
+  border-bottom: 2px solid #cccccc;
 }
 verdocs-signature-dialog .tabs .tab:hover {
-  color: var(--verdocs-primary-color);
+  color: #55bc81;
 }

package/dist/collection/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.js

@@ -238,8 +238,8 @@ export class VerdocsSignatureDialog {
             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() })))))));
+              h("verdocs-button", { label: "CANCEL", size: "normal", variant: "outline", onPress: () => this.handleCancel() }),
+              h("verdocs-button", { label: "Adopt & Sign", size: "normal", onPress: () => this.handleAdopt() })))))));
   }
   static get is() { return "verdocs-signature-dialog"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.css

@@ -1,6 +1,5 @@
 verdocs-upload-dialog {
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   box-sizing: border-box;
 }
 verdocs-upload-dialog div {
@@ -24,7 +23,7 @@ verdocs-upload-dialog .dialog {
   flex-direction: column;
   border-radius: 4px;
   overflow: hidden;
-  background: #fff;
+  background: #ffffff;
   padding: 16px;
   box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);
 }
@@ -62,7 +61,7 @@ verdocs-upload-dialog .drop-target p {
   margin: 12px 0;
 }
 verdocs-upload-dialog .drop-target.dragging-over {
-  border: 5px solid blue;
+  border: 5px solid #4c56cb;
 }
 verdocs-upload-dialog .drop-target > verdocs-button {
   margin: 12px 0;

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

@@ -1,7 +1,5 @@
 verdocs-field-attachment {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   width: 24px;
   height: 24px;
   display: block;
@@ -14,7 +12,7 @@ verdocs-field-attachment span {
   cursor: pointer;
 }
 verdocs-field-attachment.required span {
-  border: 1px solid var(--verdocs-required-color);
+  border: 1px solid #cc0000;
 }
 verdocs-field-attachment.focused {
   animation: verdocs-field-pulse 0.75s 2;

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Attachment',
+  title: 'Document Fields/Attachment',
   component: 'verdocs-field-attachment',
   args: {},
   argTypes: {},

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

@@ -1,8 +1,6 @@
 @charset "UTF-8";
 verdocs-field-checkbox {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   font-size: 11px;
   background-color: transparent;
   transform-origin: bottom left;

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Checkbox',
+  title: 'Document Fields/Checkbox',
   component: 'verdocs-field-checkbox',
   args: {
     required: false,

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

@@ -259,9 +259,7 @@
 }
 
 verdocs-field-date {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   width: 64px;
   height: 15px;
   display: block;

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Date',
+  title: 'Document Fields/Date',
   component: 'verdocs-field-date',
   args: {
     placeholder: 'Select Date',

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

@@ -1,7 +1,5 @@
 verdocs-field-dropdown {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   width: 85px;
   height: 20px;
   display: block;

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Dropdown',
+  title: 'Document Fields/Dropdown',
   component: 'verdocs-field-dropdown',
   args: {
     order: 1,

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

@@ -1,7 +1,5 @@
 verdocs-field-initial {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   width: 83px;
   height: 36px;
   display: block;

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Initial',
+  title: 'Document Fields/Initial',
   component: 'verdocs-field-initial',
   args: {
     required: false,

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

@@ -1,7 +1,5 @@
 verdocs-field-payment {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   width: 24px;
   height: 24px;
   display: block;

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Payment',
+  title: 'Document Fields/Payment',
   component: 'verdocs-field-payment',
   args: {},
   argTypes: {},

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

@@ -1,7 +1,5 @@
 verdocs-field-radio-button {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   width: 14px;
   height: 14px;
   display: block;

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Radio Button',
+  title: 'Document Fields/Radio Button',
   component: 'verdocs-field-radio-button',
   args: {
     required: false,

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

@@ -1,7 +1,5 @@
 verdocs-field-signature {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   width: 83px;
   height: 36px;
   display: block;

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Signature',
+  title: 'Document Fields/Signature',
   component: 'verdocs-field-signature',
   args: {
     required: false,

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

@@ -1,7 +1,5 @@
 verdocs-field-textarea {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   width: 150px;
   height: 15px;
   display: block;

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Textarea',
+  title: 'Document Fields/Textarea',
   component: 'verdocs-field-textarea',
   args: {
     placeholder: 'Email address...',

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

@@ -1,7 +1,5 @@
 verdocs-field-textbox {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   width: 150px;
   height: 15px;
   display: block;

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Document Fields/Textbox',
+  title: 'Document Fields/Textbox',
   component: 'verdocs-field-textbox',
   args: {
     placeholder: 'Email address...',