@verdocs/web-sdk 6.5.0-beta.10 → 6.5.0-beta.11

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

@@ -0,0 +1,229 @@
+'use strict';
+
+var index = require('./index-CQ5bTnED.js');
+
+const verdocsInitialDialogCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-initial-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;position:fixed;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:rgba(0, 0, 0, 0.4980392157)}verdocs-initial-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-initial-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-initial-dialog .content{font-size:14px;padding:20px}verdocs-initial-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-initial-dialog .buttons verdocs-button{margin-left:16px}verdocs-initial-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 rgba(0, 0, 0, 0.1215686275);box-shadow:0 0 6px 0 rgba(0, 0, 0, 0.1215686275)}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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-initial-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-initial-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-initial-dialog .tabs .tab:hover{color:#55bc81}";
+
+const VerdocsInitialDialog = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.next = index.createEvent(this, "next");
+        this.exit = index.createEvent(this, "exit");
+        /**
+         * Initial signature text
+         */
+        this.initials = '';
+        this.fontLoaded = false;
+        this.enteredInitials = '';
+        this.mode = 'type';
+    }
+    componentWillLoad() {
+        this.enteredInitials = this.initials.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);
+    }
+    handleNameChange(e) {
+        this.enteredInitials = e.target.value;
+    }
+    handleCancel(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.exit.emit();
+    }
+    handleAdopt(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        const data = this.canvasElement.toDataURL('image/png');
+        this.next.emit(data);
+    }
+    /*
+    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, { key: 'adf8b7f3191850b40c865196d5a435e9d85ef28a', onClick: e => this.handleCancel(e) }, index.h("div", { key: 'c80e81a5ff5a686cbab68b9ac0fa23dd61d9ee32', class: "dialog" }, index.h("div", { key: '622d2ebd26b3ac4003add36dc40c9eef54fb95bc', class: "heading" }, "Create Your Initial"), index.h("div", { key: '8179e48c368a5831b395a01ea6e6dbf19377e3f3', class: "content" }, index.h("verdocs-text-input", { key: 'c5696ad5ab2fc4a703b596d12029e95dcad099b6', placeholder: "Initials...", label: "Initials", value: this.enteredInitials, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), index.h("div", { key: 'a63b403893d70267d94e4029b72a54e50ccc56ae', class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? index.h("canvas", { ref: el => (this.canvasElement = el) }) : index.h("div", { style: { display: 'none' } }), index.h("div", { key: '917afd9ece52ed0716f06d5fb8cc1167644f015d', 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", { key: 'b76005f2943578684934f6e5299d1bcf0bb5f705', class: "buttons" }, index.h("verdocs-button", { key: '5b9a99183f1f31d940a6a22cf4167c84f93d2284', label: "CANCEL", size: "normal", variant: "outline", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: 'e9dbfe8255870db5ff0b5f2aee3d9a3c1e48b702', label: "Adopt & Sign", size: "normal", onClick: e => this.handleAdopt(e) }))))));
+    }
+};
+VerdocsInitialDialog.style = verdocsInitialDialogCss;
+
+exports.verdocs_initial_dialog = VerdocsInitialDialog;
+//# sourceMappingURL=verdocs-initial-dialog.entry.cjs.js.map

package/dist/cjs/verdocs-initial-dialog.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"verdocs-initial-dialog.entry.cjs.js","sources":["src/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.scss?tag=verdocs-initial-dialog","src/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-initial-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  position: fixed;\n  z-index: 10000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0000007f;\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $dialog-bg;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: #fff;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, Host, h, Event, EventEmitter, State} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify an initials image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their initials with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-initial-dialog',\n  styleUrl: 'verdocs-initial-dialog.scss',\n})\nexport class VerdocsInitialDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() initials: string = '';\n\n  /**\n   * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n   * representation of the initials adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredInitials: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredInitials = this.initials.toUpperCase();\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    if (!this.canvasElement) {\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredInitials).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredInitials, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleNameChange(e: any) {\n    this.enteredInitials = e.target.value;\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.exit.emit();\n  }\n\n  handleAdopt(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host onClick={e => this.handleCancel(e)}>\n        <div class=\"dialog\">\n          <div class=\"heading\">Create Your Initial</div>\n\n          <div class=\"content\">\n            <verdocs-text-input\n              placeholder=\"Initials...\"\n              label=\"Initials\"\n              value={this.enteredInitials}\n              onInput={e => this.handleNameChange(e)}\n              onClick={e => e.stopPropagation()}\n            />\n            <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n            {/*<div class=\"tabs\">*/}\n            {/*  <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>*/}\n            {/*    Type*/}\n            {/*  </div>*/}\n            {/*  <div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>*/}\n            {/*    Draw*/}\n            {/*  </div>*/}\n            {/*</div>*/}\n\n            {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n            <div class=\"disclaimer\">\n              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,\n              including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/verdocs-sign.cjs.entry.js

@@ -11,6 +11,29 @@ require('./Types-RUyU-svM.js');
 
 const verdocsSignCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;min-height:700px;position:relative;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f5f5f5;font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif)}verdocs-sign verdocs-button>button.standard{background:#2a63f6}verdocs-sign div{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign input{vertical-align:top}verdocs-sign>.document{-ms-flex:1;flex:1;width:100%;height:100%;-ms-flex-item-align:center;align-self:center;display:-ms-flexbox;display:flex;padding:15px;padding-right:140px;row-gap:15px;max-width:1200px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-sign>.document .inner{width:100%;max-width:1028px}verdocs-sign>.document .document-separator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:10px;padding:12px 20px;width:100%;max-width:1028px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#33364b;color:white;border-radius:6px;font-size:16px;font-weight:500;margin-top:20px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}verdocs-sign>.document .document-separator svg{-ms-flex-negative:0;flex-shrink:0}verdocs-sign>.document .document-separator:first-child{margin-top:0}verdocs-sign .signed-document-container{width:64%;margin-left:260px}@media (max-width: 600px){verdocs-sign .signed-document-container{width:100%;margin-left:0}verdocs-sign>.document{padding-right:15px}verdocs-sign .verdocs-flag-instance{display:none !important}}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:5000;position:absolute;padding-top:100px;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;background:rgba(0, 0, 0, 0.5)}verdocs-sign verdocs-ok-dialog .background-overlay{-ms-flex-align:start;align-items:flex-start;padding-top:100px}verdocs-sign .loading-indicator{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.7)}verdocs-sign .fatal-error{position:absolute;z-index:100;top:0;left:0;right:0;bottom:0;background-color:#4a4a4a;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .fatal-error .placeholder{position:absolute;opacity:0.1;z-index:-1;top:0;left:0;right:0;bottom:0;width:612px;height:792px;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);margin-top:15px}verdocs-sign .fatal-error .message{max-width:360px;width:50%;font-size:16px;background:white;-webkit-box-shadow:3px 3px 9px -1px rgba(0, 0, 0, 0.2470588235);box-shadow:3px 3px 9px -1px rgba(0, 0, 0, 0.2470588235)}verdocs-sign .fatal-error .header{color:white;font-size:18px;font-weight:500;padding:5px 10px;margin:0 0 10px 0;background:#4c56cb}verdocs-sign .fatal-error p{margin:1rem;font-size:14px;font-weight:400;padding:0 10px}@media print{verdocs-sign .header{display:none}}#verdocs-sign-header{color:#fff;width:100%;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 46px;flex:0 0 46px;font-size:12px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}#verdocs-sign-header .inner{width:100%;display:-ms-flexbox;display:flex;margin:0 auto;padding:0 12px;max-width:1200px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}#verdocs-sign-header .logo{width:80px;display:none;margin:-6px 0 0 0}#verdocs-sign-header .title{font-size:18px;font-weight:500;overflow:hidden;white-space:nowrap;padding:0 10px 0 0;text-overflow:ellipsis}.spinner-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background:rgba(0, 0, 0, 0.4980392157);-ms-flex-pack:center;justify-content:center}";
 
+/**
+ * Helper to generate a human-readable label for a field.
+ */
+const getFieldLabel = (field) => {
+    if (!field)
+        return '';
+    const typeMap = {
+        signature: 'Signature',
+        initial: 'Initials',
+        date: 'Date',
+        textbox: 'Text Field',
+        checkbox: 'Checkbox',
+        radio: 'Radio Button',
+        dropdown: 'Dropdown',
+        attachment: 'Attachment',
+        payment: 'Payment',
+    };
+    const typeName = typeMap[field.type] || 'Field';
+    if (field.required) {
+        return `Required ${typeName}*`;
+    }
+    return `Optional ${typeName}`;
+};
 const VerdocsSign = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -95,6 +118,12 @@ const VerdocsSign = class {
             // session and might have a different "view" of the envelope.
             const response = await jsSdk.startSigningSession(this.endpoint, this.envelopeId, this.roleId, this.inviteCode);
             this.processAuthResponse(response);
+            const fillable = this.getSortedFillableFields();
+            if (fillable.length > 0) {
+                setTimeout(() => {
+                    this.focusedField = fillable[0].name;
+                }, 500);
+            }
         }
         catch (e) {
             console.log('[SIGN] Error with signing session', e);
@@ -430,6 +459,7 @@ const VerdocsSign = class {
         // Find and focus the next incomplete field (that is fillable)
         const emptyFields = this.getSortedFillableFields().filter(field => field.required && !jsSdk.isFieldFilled(field, this.getRecipientFields()));
         jsSdk.sortFields(emptyFields);
+        console.log('[SIGN] Pending fields', emptyFields.map(f => `${f.name} (${f.type}) req=${f.required}`));
         // If everything required is filled, try optional fields?
         // The previous logic only looked for required fields for "Next".
         // If we want "Fill or Skip", we should probably look for ANY unfilled field if we want to guide them to optionals too.
@@ -487,7 +517,14 @@ const VerdocsSign = class {
         // Remove existing flags
         const existingFlags = controlsDiv.querySelectorAll('.verdocs-flag-instance');
         existingFlags.forEach(el => el.remove());
-        const nextField = this.getNextRequiredField();
+        let nextField = this.getNextRequiredField();
+        const focusedFieldObj = this.getRecipientFields().find(f => f.name === this.focusedField);
+        // If the currently focused field is unfilled, we should point the flag to IT, not the next one.
+        // getNextRequiredField() is designed for the "Next" button (skipping current), but the visual flag
+        // should guide the user to the current task if it's incomplete.
+        if (focusedFieldObj && !jsSdk.isFieldFilled(focusedFieldObj, this.getRecipientFields())) {
+            nextField = focusedFieldObj;
+        }
         if (nextField && nextField.page === pageInfo.pageNumber && nextField.document_id === pageInfo.documentId) {
             const variant = 'fill';
             let label = 'FILL';
@@ -674,6 +711,10 @@ const VerdocsSign = class {
         el.addEventListener('fieldChange', e => {
             this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
         });
+        el.addEventListener('adopt', () => {
+            this.focusedField = field.name;
+            this.adoptingSignature = true;
+        });
         el.setAttribute('templateid', this.envelope.template_id);
         el.setAttribute('fieldname', field.name);
         el.setAttribute('page', pageInfo.pageNumber);
@@ -742,15 +783,16 @@ const VerdocsSign = class {
             this.processAuthResponse(r);
         })
             .catch(e => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             console.log('[SIGN] Error submitting authentication step', e);
-            if ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.includes('failed')) {
+            console.log((_a = e.response) === null || _a === void 0 ? void 0 : _a.data);
+            if ((_d = (_c = (_b = e.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error) === null || _d === void 0 ? void 0 : _d.includes('failed')) {
                 this.fatalErrorHeader = 'Recipient Verification Failed';
                 this.fatalErrorMessage = 'We were unable to verify your identity. The sender has been notified.';
                 this.isDone = true;
             }
             else {
-                Toast.VerdocsToast(((_e = (_d = e.response) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.error) || 'Unable to verify your identity. Please try again.', { style: 'error' });
+                Toast.VerdocsToast(((_f = (_e = e.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error) || 'Unable to verify your identity. Please try again.', { style: 'error' });
             }
         });
     }
@@ -864,7 +906,16 @@ const VerdocsSign = class {
             : console.log('[SIGN] All field valid');
         return (index.h(index.Host, null, index.h("div", { id: "verdocs-sign-header" }, index.h("div", { class: "inner" }, index.h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), index.h("div", { class: "title" }, this.envelope.name), index.h("div", { style: { flex: '1' } }), !this.finishLater && index.h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), index.h("div", { style: { marginLeft: '10px' } }), index.h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), (() => {
             const focusedFieldObj = this.getSortedFillableFields().find(f => f.name === this.focusedField);
-            return (index.h("verdocs-signing-progress", { mode: this.nextSubmits ? 'completed' : 'start', current: Math.max(1, this.getSortedFillableFields().findIndex(f => f.name === this.focusedField) + 1), total: this.getSortedFillableFields().length, fieldLabel: (focusedFieldObj === null || focusedFieldObj === void 0 ? void 0 : focusedFieldObj.label) || (focusedFieldObj === null || focusedFieldObj === void 0 ? void 0 : focusedFieldObj.name) || '', fieldCompleted: focusedFieldObj ? !!jsSdk.isFieldFilled(focusedFieldObj, this.getRecipientFields()) : false, onStarted: () => {
+            const currentIndex = this.getSortedFillableFields().findIndex(f => f.name === this.focusedField) + 1;
+            const totalFields = this.getSortedFillableFields().length;
+            let mode = 'start';
+            if (this.nextSubmits) {
+                mode = 'completed';
+            }
+            else if (this.signatureId || this.initialId) {
+                mode = 'signing';
+            }
+            return (index.h("verdocs-signing-progress", { mode: mode, current: Math.max(1, currentIndex), total: totalFields, fieldLabel: getFieldLabel(focusedFieldObj), fieldCompleted: focusedFieldObj ? !!jsSdk.isFieldFilled(focusedFieldObj, this.getRecipientFields()) : false, onStarted: () => {
                     this.adoptingSignature = true;
                     // this.handleNext();
                 }, onNext: () => this.handleNext(), onPrevious: () => this.handlePrev(), onExit: () => this.handleNext() }));
@@ -905,6 +956,22 @@ const VerdocsSign = class {
                 this.initialId = initResult.id;
                 this.showSpinner = false;
                 this.adoptingSignature = false;
+                // If we have a focused field, we should auto-apply the new signature/initials to it
+                if (this.focusedField) {
+                    const field = this.getRecipientFields().find(f => f.name === this.focusedField);
+                    if (field && !jsSdk.isFieldFilled(field, this.getRecipientFields())) {
+                        console.log('[SIGN] Auto-applying adopted signature to focused field', field.name);
+                        if (field.type === 'signature') {
+                            const updateResult = await jsSdk.updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.signatureId, false);
+                            this.updateRecipientFieldValue(field.name, updateResult);
+                        }
+                        else if (field.type === 'initial') {
+                            const updateResult = await jsSdk.updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.initialId, false);
+                            this.updateRecipientFieldValue(field.name, updateResult);
+                        }
+                        this.checkRecipientFields();
+                    }
+                }
             }, onExit: () => (this.adoptingSignature = false) })), (this.submitting || this.showSpinner) && (index.h("verdocs-portal", null, index.h("div", { class: "spinner-overlay" }, index.h("verdocs-spinner", null)))), !this.loading && !this.isDone && (index.h("verdocs-sign-footer", { endpoint: this.endpoint, envelopeId: this.envelopeId, isDone: this.isDone, onAskQuestion: (e) => {
                 jsSdk.askQuestion(this.endpoint, this.envelopeId, this.roleId, { question: e.detail.question })
                     .then(() => Toast.VerdocsToast('Your question has been sent.', { style: 'success' }))