@verdocs/web-sdk 1.0.25 → 1.4.0

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

@@ -0,0 +1,47 @@
+verdocs-ok-dialog {
+  font-family: "Barlow", sans-serif;
+  box-sizing: border-box;
+}
+verdocs-ok-dialog .background-overlay {
+  position: absolute;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #0000007f;
+}
+verdocs-ok-dialog .dialog {
+  max-width: 50%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);
+}
+verdocs-ok-dialog .heading {
+  display: flex;
+  font-size: 16px;
+  flex-direction: row;
+  background: #444444;
+  padding: 8px 16px;
+  color: white;
+}
+verdocs-ok-dialog .content {
+  font-size: 14px;
+  background: #fff;
+  padding: 20px;
+}
+verdocs-ok-dialog .buttons {
+  display: flex;
+  margin: 20px 0 0 0;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+}
+verdocs-ok-dialog .buttons verdocs-button {
+  margin-left: 16px;
+}

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

@@ -0,0 +1,146 @@
+import { Component, Prop, h, Event, Host } from '@stencil/core';
+/**
+ * Display a simple text dialog box with an Ok button. 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 VerdocsOkDialog {
+  constructor() {
+    /**
+     * The title of the dialog. "title" is a reserved word, so we use heading.
+     */
+    this.heading = '';
+    /**
+     * The message content to display.
+     */
+    this.message = '';
+    /**
+     * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.
+     */
+    this.open = false;
+    /**
+     * If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background
+     * overlay to dismiss it.
+     */
+    this.cancel = false;
+  }
+  handleClose(reason) {
+    this.closed.emit(reason);
+    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.handleClose('cancel');
+    }
+  }
+  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" }, this.heading),
+          h("div", { class: "content" },
+            this.message,
+            h("div", { class: "buttons" },
+              this.cancel ? h("verdocs-button", { label: "CANCEL", variant: "outline", onPress: () => this.handleClose('cancel') }) : h("div", { style: { display: 'none' } }),
+              h("verdocs-button", { label: "OK", onPress: () => this.handleClose('ok') })))))));
+  }
+  static get is() { return "verdocs-ok-dialog"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-ok-dialog.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-ok-dialog.css"]
+  }; }
+  static get properties() { return {
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The title of the dialog. \"title\" is a reserved word, so we use heading."
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "message": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The message content to display."
+      },
+      "attribute": "message",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "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"
+    },
+    "cancel": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background\noverlay to dismiss it."
+      },
+      "attribute": "cancel",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "closed",
+      "name": "closed",
+      "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": "'cancel' | 'ok'",
+        "resolved": "\"cancel\" | \"ok\"",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,20 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Dialogs/Ok Dialog',
+  component: 'verdocs-ok-dialog',
+  args: {
+    open: true,
+    cancel: true,
+    heading: 'Login Error',
+    message: 'Login failed. Please check your username and password and try again.',
+  },
+  argTypes: {
+    closed: {
+      action: 'closed',
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+export const OkDialog = ({ heading, message, open, cancel, closed }) => html `<verdocs-ok-dialog .heading=${heading} .message=${message} .open=${open} .cancel=${cancel} @closed=${closed} />`;

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

@@ -0,0 +1,85 @@
+verdocs-signature-dialog {
+  font-family: "Barlow", sans-serif;
+  box-sizing: border-box;
+  display: none;
+}
+verdocs-signature-dialog.open {
+  display: block;
+}
+verdocs-signature-dialog .background-overlay {
+  position: absolute;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #0000007f;
+}
+verdocs-signature-dialog .dialog {
+  width: 100%;
+  max-width: 340px;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);
+  background: #f9f9f9;
+}
+verdocs-signature-dialog .heading {
+  display: flex;
+  flex-direction: row;
+  padding: 20px 20px 0 20px;
+  line-height: 28px;
+  font-size: 20px;
+  font-weight: 500;
+}
+verdocs-signature-dialog .content {
+  font-size: 14px;
+  padding: 20px;
+}
+verdocs-signature-dialog .buttons {
+  display: flex;
+  margin: 20px 0 0 0;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+verdocs-signature-dialog .buttons verdocs-button {
+  margin-left: 16px;
+}
+verdocs-signature-dialog canvas {
+  background: #fff;
+  box-sizing: border-box;
+  margin: 0 auto;
+  width: 300px;
+  height: 79px;
+  max-width: 100%;
+  box-shadow: 0 0 6px 0 #0000001f;
+}
+verdocs-signature-dialog .disclaimer {
+  text-align: justify;
+  padding: 8px 0;
+  font-size: 11px;
+  line-height: 14px;
+  color: rgba(0, 0, 0, 0.54);
+}
+verdocs-signature-dialog .as-shown {
+  font-size: 11px;
+  margin: 4px 0 20px 4px;
+  color: rgba(0, 0, 0, 0.54);
+}
+verdocs-signature-dialog .tabs {
+  display: flex;
+  flex-direction: row;
+}
+verdocs-signature-dialog .tabs .tab {
+  padding: 8px 15px;
+  cursor: pointer;
+}
+verdocs-signature-dialog .tabs .tab.active {
+  border-bottom: 2px solid #ccc;
+}
+verdocs-signature-dialog .tabs .tab:hover {
+  color: var(--verdocs-primary-color);
+}