@verdocs/web-sdk 1.0.25 → 1.4.0

package/dist/cjs/verdocs-signature-dialog.cjs.entry.js

@@ -0,0 +1,239 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a24f3b6a.js');
+
+const verdocsSignatureDialogCss = "verdocs-signature-dialog{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-signature-dialog .dialog{width:100%;max-width:340px;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);background:#f9f9f9}verdocs-signature-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;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:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}verdocs-signature-dialog .buttons verdocs-button{margin-left:16px}verdocs-signature-dialog canvas{background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:300px;height:79px;max-width:100%;-webkit-box-shadow:0 0 6px 0 #0000001f;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:-ms-flexbox;display:flex;-ms-flex-direction:row;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)}";
+
+const VerdocsSignatureDialog = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.adopt = index.createEvent(this, "adopt", 7);
+    this.cancel = index.createEvent(this, "cancel", 7);
+    /**
+     * 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.enteredName = '';
+    this.mode = 'type';
+  }
+  componentWillLoad() {
+    this.enteredName = this.fullname;
+    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.enteredName).width > canvasWidth - 32); // 32px padding each side
+    context.textAlign = 'center';
+    context.textBaseline = 'middle';
+    context.font = `${fontSize}px Dancing Script`;
+    context.fillText(this.enteredName, 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.enteredName = 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 (index.h(index.Host, { class: { open: this.open } }, index.h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { class: "dialog" }, index.h("div", { class: "heading" }, "Create Your Signature"), index.h("div", { class: "content" }, index.h("verdocs-text-input", { placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onFieldInput: e => this.handleNameChange(e) }), index.h("div", { class: "as-shown" }, "As shown on driver's license or govt. ID card."), index.h("div", { class: "tabs" }, index.h("div", { class: { tab: true, active: this.mode === 'type' }, onClick: () => (this.mode = 'type') }, "Type"), index.h("div", { class: { tab: true, active: this.mode === 'draw' }, onClick: () => (this.mode = 'draw') }, "Draw")), this.fontLoaded ? index.h("canvas", { ref: el => (this.canvasElement = el) }) : index.h("div", { style: { display: 'none' } }), index.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."), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "CANCEL", size: "normal", variant: "outline", onPress: () => this.handleCancel() }), index.h("verdocs-button", { label: "Adopt & Sign", size: "normal", onPress: () => this.handleAdopt() })))))));
+  }
+};
+VerdocsSignatureDialog.style = verdocsSignatureDialogCss;
+
+exports.verdocs_signature_dialog = VerdocsSignatureDialog;