import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-AiOs8RvA.js';
import { d as defineCustomElement$3 } from './p-DMVmShTi.js';
import { d as defineCustomElement$2 } from './p-Bbomvxyl.js';
import { d as defineCustomElement$1 } from './p-xz67XcVg.js';

const verdocsSignatureDialogCss = "@-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-signature-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-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:#ffffff;-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-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 #cccccc}verdocs-signature-dialog .tabs .tab:hover{color:#55bc81}";

const VerdocsSignatureDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsSignatureDialog extends H {
    constructor() {
        super();
        this.__registerHost();
        this.next = createEvent(this, "next");
        this.exit = createEvent(this, "exit");
        /**
         * Initial signature text
         */
        this.name = '';
        this.fontLoaded = false;
        this.enteredName = '';
        this.mode = 'type';
    }
    componentWillLoad() {
        this.enteredName = this.name;
        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);
    }
    handleNameChange(e) {
        this.enteredName = 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 (h(Host, { key: 'dea4d21238c781bda1f5fdaec35b51e798a8f073', onClick: e => this.handleCancel(e) }, h("div", { key: '2cc79e7a89ce233347bd2cfc46441106a2d02728', class: "dialog" }, h("div", { key: '983646ce131571a60e89d9e5f96479c8473ee888', class: "heading" }, "Create Your Signature"), h("div", { key: '7909c75a451b6778ea69d637949e29b83e3e3b12', class: "content" }, h("verdocs-text-input", { key: 'fd2b5b6a259aab0636bcda106175d225712a05e8', placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), h("div", { key: '7c3795b469571dd019e9a8a79c7110b647795147', class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }), h("div", { key: 'ddc7ccd402ba1023e7ffbc5c1a94208149563d32', 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", { key: '74dc260aee414296796d156f3dea10919eca6da3', class: "buttons" }, h("verdocs-button", { key: '24747ae1cc4d47a640fc509c9b3c66e06fff0eb8', label: "CANCEL", size: "normal", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'b845f87b51e1998d69ce579693b871536b316230', label: "Adopt & Sign", size: "normal", onClick: e => this.handleAdopt(e) }))))));
    }
    static get style() { return verdocsSignatureDialogCss; }
}, [0, "verdocs-signature-dialog", {
        "name": [1],
        "fontLoaded": [32],
        "enteredName": [32],
        "mode": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-signature-dialog", "verdocs-button", "verdocs-help-icon", "verdocs-text-input"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-signature-dialog":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsSignatureDialog);
            }
            break;
        case "verdocs-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "verdocs-help-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "verdocs-text-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { VerdocsSignatureDialog as V, defineCustomElement as d };
//# sourceMappingURL=p-CcCzvmO0.js.map

//# sourceMappingURL=p-CcCzvmO0.js.map