@verdocs/web-sdk 1.0.25 → 1.1.0

package/dist/collection/components/controls/{toggle-icon-buttons/toggle-icon-buttons.css → verdocs-toggle/verdocs-toggle.css}

@@ -1,17 +1,15 @@
-toggle-icon-buttons {
+verdocs-toggle {
   /* Fallback font for old browsers */
   font-family: sans-serif;
   font-family: var(--verdocs-font);
 }
-
-toggle-icon-buttons .container {
+verdocs-toggle .container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   background-color: #f2f5fa;
 }
-
-toggle-icon-buttons .label {
+verdocs-toggle .label {
   font-size: 24px;
   font-weight: 700;
   color: #33364b;
@@ -19,46 +17,38 @@ toggle-icon-buttons .label {
   margin-right: 27px;
   font-family: sans-serif;
 }
-
-toggle-icon-buttons .buttons {
+verdocs-toggle .buttons {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
 }
-
-toggle-icon-buttons .buttons button {
+verdocs-toggle .buttons button {
   width: 60px;
   height: 60px;
   border: 2px solid #654dcb;
   border-radius: 5px;
   cursor: pointer;
 }
-
-toggle-icon-buttons .buttons button:not(:last-child) {
+verdocs-toggle .buttons button:not(:last-child) {
   margin-right: 11px;
 }
-
-toggle-icon-buttons .buttons svg {
+verdocs-toggle .buttons svg {
   width: 30px;
   height: 30px;
 }
-
-toggle-icon-buttons .buttons button:hover {
+verdocs-toggle .buttons button:hover {
   background-color: #654dcb;
   transition: 0.25s;
 }
-
-toggle-icon-buttons .buttons button:hover svg {
+verdocs-toggle .buttons button:hover svg {
   fill: #f2f5fa;
   transition: 0.25s;
 }
-
-toggle-icon-buttons .selected {
+verdocs-toggle .selected {
   background-color: #707ae5;
   transition: 0.25s;
 }
-
-toggle-icon-buttons .selected svg {
+verdocs-toggle .selected svg {
   fill: #ffffff;
   transition: 0.25s;
 }

package/dist/collection/components/controls/{toggle-icon-buttons/toggle-icon-buttons.js → verdocs-toggle/verdocs-toggle.js}

@@ -6,15 +6,19 @@ import { Component, Prop, h, Listen } from '@stencil/core';
  *
  * ```
  */
-export class ToggleIconButtons {
+export class VerdocsToggle {
   handleClick(event) {
     event.preventDefault();
     let container = event.target;
     if (container.matches('toggle-icon-buttons')) {
       container = event.target.shadowRoot;
       const element = container.activeElement;
-      const siblings = Array.from(element.parentElement.children).filter((child) => { return child !== element; });
-      siblings.map((sibling) => { return sibling.classList.remove('selected'); });
+      const siblings = Array.from(element.parentElement.children).filter(child => {
+        return child !== element;
+      });
+      siblings.map((sibling) => {
+        return sibling.classList.remove('selected');
+      });
       if (!element.classList.contains('selected')) {
         element.classList.add('selected');
       }
@@ -25,12 +29,12 @@ export class ToggleIconButtons {
       h("span", { class: "label" }, `${this.options.label}:`),
       h("div", { class: "buttons" }, this.options.buttons.map((button, index) => (h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index === this.options.defaultSelection ? 'selected' : '' }))))));
   }
-  static get is() { return "toggle-icon-buttons"; }
+  static get is() { return "verdocs-toggle"; }
   static get originalStyleUrls() { return {
-    "$": ["toggle-icon-buttons.scss"]
+    "$": ["verdocs-toggle.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["toggle-icon-buttons.css"]
+    "$": ["verdocs-toggle.css"]
   }; }
   static get properties() { return {
     "options": {
@@ -56,7 +60,7 @@ export class ToggleIconButtons {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"light\" | \"dark\"",
+        "original": "'light' | 'dark'",
         "resolved": "\"dark\" | \"light\"",
         "references": {}
       },

package/dist/collection/components/controls/{toggle-icon-buttons/toggle-icon-buttons.stories.js → verdocs-toggle/verdocs-toggle.stories.js}

@@ -5,23 +5,23 @@ const dummyOptions = {
   buttons: [
     {
       id: 'list-view',
-      icon: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M3,5v14h18V5H3z M7,7v2H5V7H7z M5,13v-2h2v2H5z M5,15h2v2H5V15z M19,17H9v-2h10V17z M19,13H9v-2h10V13z M19,9H9V7h10V9z"/></svg>'
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M3,5v14h18V5H3z M7,7v2H5V7H7z M5,13v-2h2v2H5z M5,15h2v2H5V15z M19,17H9v-2h10V17z M19,13H9v-2h10V13z M19,9H9V7h10V9z"/></svg>',
     },
     {
       id: 'grid-view',
-      icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 5v14h19V5H3zm17 4h-2.25V7H20v2zM9.25 11h2.25v2H9.25v-2zm-2 2H5v-2h2.25v2zm4.25-4H9.25V7h2.25v2zm2-2h2.25v2H13.5V7zm-2 8v2H9.25v-2h2.25zm2 0h2.25v2H13.5v-2zm0-2v-2h2.25v2H13.5zm4.25-2H20v2h-2.25v-2zM7.25 7v2H5V7h2.25zM5 15h2.25v2H5v-2zm12.75 2v-2H20v2h-2.25z"/></svg>'
-    }
-  ]
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 5v14h19V5H3zm17 4h-2.25V7H20v2zM9.25 11h2.25v2H9.25v-2zm-2 2H5v-2h2.25v2zm4.25-4H9.25V7h2.25v2zm2-2h2.25v2H13.5V7zm-2 8v2H9.25v-2h2.25zm2 0h2.25v2H13.5v-2zm0-2v-2h2.25v2H13.5zm4.25-2H20v2h-2.25v-2zM7.25 7v2H5V7h2.25zM5 15h2.25v2H5v-2zm12.75 2v-2H20v2h-2.25z"/></svg>',
+    },
+  ],
 };
 export default {
-  title: 'Controls/Toggle Icon Buttons',
-  component: 'toggle-icon-buttons',
+  title: 'Controls/Toggle',
+  component: 'verdocs-toggle',
   args: {
-    options: dummyOptions
-  },
-  argTypes: {
-    options: { type: 'object', control: 'object' },
-    theme: { type: 'string', control: 'radio', options: ['light', 'dark'], defaultValue: 'light' }
+    options: dummyOptions,
   },
+  // argTypes: {
+  //   options: {type: 'object', control: 'object'},
+  //   theme: {type: 'string', control: 'radio', options:['light', 'dark'], defaultValue: 'light'}
+  // },
 };
-export const Default = ({ options, theme }) => html `<toggle-icon-buttons .options="${options}" .theme="${theme}"></toggle-icon-buttons>`;
+export const Toggle = ({ options, theme }) => html `<toggle-icon-buttons .options="${options}" .theme="${theme}"></toggle-icon-buttons>`;

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

@@ -0,0 +1,86 @@
+verdocs-initial-dialog {
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  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: flex;
+  align-items: center;
+  justify-content: center;
+  background: #0000007f;
+}
+verdocs-initial-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-initial-dialog .heading {
+  display: flex;
+  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: flex;
+  margin: 20px 0 0 0;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+verdocs-initial-dialog .buttons verdocs-button {
+  margin-left: 16px;
+}
+verdocs-initial-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-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: flex;
+  flex-direction: row;
+}
+verdocs-initial-dialog .tabs .tab {
+  padding: 8px 15px;
+  cursor: pointer;
+}
+verdocs-initial-dialog .tabs .tab.active {
+  border-bottom: 2px solid #ccc;
+}
+verdocs-initial-dialog .tabs .tab:hover {
+  color: var(--verdocs-primary-color);
+}

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

@@ -0,0 +1,329 @@
+import { Component, Prop, Host, h, Event, State } from '@stencil/core';
+/**
+ * Display a dialog that allows the user to specify an initials image, either by using a signature-font-generated image
+ * based on their full name, or by hand-drawing their initials with a mouse or tablet.
+ */
+export class VerdocsInitialDialog {
+  constructor() {
+    /**
+     * 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() })))))));
+  }
+  static get is() { return "verdocs-initial-dialog"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-initial-dialog.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-initial-dialog.css"]
+  }; }
+  static get properties() { return {
+    "fullname": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Initial signature text"
+      },
+      "attribute": "fullname",
+      "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"
+    }
+  }; }
+  static get states() { return {
+    "fontLoaded": {},
+    "enteredInitials": {},
+    "mode": {}
+  }; }
+  static get events() { return [{
+      "method": "adopt",
+      "name": "adopt",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the initials are adopted."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "cancel",
+      "name": "cancel",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the step is cancelled."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,18 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Dialogs/Initial Dialog',
+  component: 'verdocs-initial-dialog',
+  args: {
+    open: true,
+    fullname: 'Paige Turner',
+  },
+  argTypes: {
+    closed: {
+      action: 'closed',
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+export const InitialDialog = ({ fullname, open, closed }) => html `<verdocs-initial-dialog .fullname=${fullname} .open=${open} @closed=${closed} />`;

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

@@ -0,0 +1,48 @@
+verdocs-ok-dialog {
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  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;
+}