npm - @verdocs/web-sdk - Versions diffs - 1.9.9 → 1.9.14 - Mend

@verdocs/web-sdk 1.9.9 → 1.9.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (768) hide show

package/dist/esm/verdocs-initial-dialog.entry.js CHANGED Viewed

@@ -5,10 +5,9 @@ const verdocsInitialDialogCss = "verdocs-initial-dialog{font-family:\"Barlow\",
 const VerdocsInitialDialog = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.adopt = createEvent(this, "adopt", 7);
+    this.next = createEvent(this, "next", 7);
     this.cancel = createEvent(this, "cancel", 7);
     this.initials = '';
-    this.open = false;
     this.fontLoaded = false;
     this.enteredInitials = '';
     this.mode = 'type';
@@ -56,12 +55,10 @@ const VerdocsInitialDialog = class {
   }
   handleAdopt() {
     const data = this.canvasElement.toDataURL('image/png');
-    this.adopt.emit(data);
-    this.open = false;
+    this.next.emit(data);
   }
   handleCancel() {
     this.cancel.emit();
-    this.open = false;
   }
   /*
   selColor(hex: string) {
@@ -221,7 +218,7 @@ const VerdocsInitialDialog = class {
   }
    */
   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, onInput: 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() })))))));
+    return (h(Host, null, 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, onInput: e => this.handleNameChange(e) }), h("div", { 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", { 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", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "Adopt & Sign", onClick: () => this.handleAdopt() })))))));
   }
 };
 VerdocsInitialDialog.style = verdocsInitialDialogCss;

package/dist/esm/verdocs-initial-dialog.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-initial-dialog.entry.js","mappings":"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","names":[],"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 display: none;\n\n &.open {\n display: block;\n }\n\n .background-overlay {\n position: absolute;\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\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 Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n /\n @Prop() open: boolean = false;\n\n /\n Event fired when the initials are adopted.\n /\n @Event({composed: true}) adopt: EventEmitter<string>;\n\n /\n Event fired when the step is cancelled.\n /\n @Event({composed: true}) cancel: 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 // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n handleDismiss(e: any) {\n e.stopPropagation();\n if (e.target.className === 'background-overlay') {\n this.handleCancel();\n }\n }\n\n handleNameChange(e: any) {\n this.enteredInitials = e.target.value;\n }\n\n handleAdopt() {\n const data = this.canvasElement.toDataURL('image/png');\n this.adopt.emit(data);\n this.open = false;\n }\n\n handleCancel() {\n this.cancel.emit();\n this.open = false;\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 class={{open: this.open}}>\n <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">Create Your Initial</div>\n\n <div class=\"content\">\n <verdocs-text-input placeholder=\"Initials...\" label=\"Initials\" value={this.enteredInitials} onInput={e => this.handleNameChange(e)} />\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 — just the same as a pen-and-paper signature or initial.\n </div>\n\n <div class=\"buttons\">\n <verdocs-button label=\"CANCEL\" variant=\"outline\" onPress={() => this.handleCancel()} />\n <verdocs-button label=\"Adopt & Sign\" onPress={() => this.handleAdopt()} />\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-initial-dialog.entry.js","mappings":"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","names":[],"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 display: none;\n\n &.open {\n display: block;\n }\n\n .background-overlay {\n position: absolute;\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\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 Event fired when the initials are adopted.\n /\n @Event({composed: true}) next: EventEmitter<string>;\n\n /\n Event fired when the step is cancelled.\n /\n @Event({composed: true}) cancel: 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 // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n handleDismiss(e: any) {\n e.stopPropagation();\n if (e.target.className === 'background-overlay') {\n this.handleCancel();\n }\n }\n\n handleNameChange(e: any) {\n this.enteredInitials = e.target.value;\n }\n\n handleAdopt() {\n const data = this.canvasElement.toDataURL('image/png');\n this.next.emit(data);\n }\n\n handleCancel() {\n this.cancel.emit();\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>\n <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">Create Your Initial</div>\n\n <div class=\"content\">\n <verdocs-text-input placeholder=\"Initials...\" label=\"Initials\" value={this.enteredInitials} onInput={e => this.handleNameChange(e)} />\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 — just the same as a pen-and-paper signature or initial.\n </div>\n\n <div class=\"buttons\">\n <verdocs-button label=\"CANCEL\" variant=\"outline\" onClick={() => this.handleCancel()} />\n <verdocs-button label=\"Adopt & Sign\" onClick={() => this.handleAdopt()} />\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/verdocs-kba-dialog.entry.js CHANGED Viewed

@@ -12,7 +12,7 @@ const VerdocsKbaDialog = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.cancel = createEvent(this, "cancel", 7);
-    this.done = createEvent(this, "done", 7);
+    this.next = createEvent(this, "next", 7);
     this.step = 1;
     this.steps = 3;
     this.helptitle = 'One Time Code';
@@ -21,12 +21,10 @@ const VerdocsKbaDialog = class {
     this.label = 'PIN';
     this.placeholder = 'Enter your PIN...';
     this.choices = ['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd'];
-    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) {
@@ -36,13 +34,12 @@ const VerdocsKbaDialog = class {
     }
   }
   handleDone() {
-    this.done.emit(this.response);
-    this.open = false;
+    this.next.emit(this.response);
   }
   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: () => {
+    return (h(Host, null, 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 }))))));
+      } }, 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", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "Done", onClick: () => this.handleDone(), disabled: !this.response }))))));
   }
 };
 VerdocsKbaDialog.style = verdocsKbaDialogCss;

package/dist/esm/verdocs-kba-dialog.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-kba-dialog.entry.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,kkEAAkkE;;MCYjlE,gBAAgB;;;;;gBAIJ,CAAC;iBAKA,CAAC;qBAKG,eAAe;oBAKhB,gFAAgF;gBAKzE,QAAQ;iBAKlB,KAAK;uBAKC,mBAAmB;mBAKrB,CAAC,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,WAAW,EAAE,gBAAgB,CAAC;~~gBAKtG~~,~~KAAK;oBAYT,~~EAAE;;EAEtB,YAAY;IACV,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;~~IACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;GACnB~~;;EAGD,aAAa,CAAC,CAAM;IAClB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;MAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;GACF;EAED,UAAU;IACR,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;~~IAC9B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC~~;~~GACnB;~~EAED,MAAM;IACJ,QACE,EAAC,IAAI,~~IAAC~~,~~KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,EAAC,IAClD,~~WAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IACjE,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,SAAS,6BAEjB,IAAI,CAAC,KAAK,GAAG,CAAC,IACb,YAAM,KAAK,EAAC,MAAM,SACd,IAAI,CAAC,IAAI,OAAG,IAAI,CAAC,KAAK,MACnB,KAEP,EAAC,QAAQ,OAAG,CACb,CACG,EAEN,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,WAAW,EAAC,SAAS,EAAE,QAAQ,GAAI,EAC9C,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,SAAS,CAAO,EAC9C,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAO,CACxC,CACF,EAEL,IAAI,CAAC,IAAI,KAAK,QAAQ,IACrB,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtB,WACE,KAAK,EAAE,UAAU,MAAM,KAAK,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC7D,OAAO,EAAE;QACP,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;OACxB,IAEA,MAAM,CACH,CACP,CAAC,CACE,KAEN,WAAK,KAAK,EAAC,OAAO,IAChB,aAAO,OAAO,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAS,EACvD,aAAO,IAAI,EAAC,MAAM,EAAC,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,mBAAmB,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,GAAI,CAChG,CACP,EAED,WAAK,KAAK,EAAC,SAAS,IAClB,sBAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAI,EACvF,sBAAgB,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAI,CACvF,CACF,CACF,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.scss?tag=verdocs-kba-dialog","./src/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-kba-dialog {\n font-family: $primary-font;\n box-sizing: border-box;\n\n div {\n box-sizing: border-box;\n }\n\n .background-overlay {\n position: absolute;\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\n .dialog {\n width: 440px;\n display: flex;\n flex-direction: column;\n border-radius: 4px;\n overflow: hidden;\n background: #fff;\n padding: 16px;\n box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n }\n\n .heading {\n display: flex;\n flex-direction: row;\n font-size: 20px;\n font-weight: 500;\n }\n\n .step {\n margin-left: 6px;\n color: #666;\n }\n\n .help-box {\n background-color: $border-color;\n display: flex;\n flex-direction: row;\n margin: 14px 0;\n padding: 14px;\n align-items: center;\n color: white;\n }\n\n .help-details {\n display: flex;\n flex-direction: column;\n margin-left: 15px;\n font-size: 14px;\n }\n\n .help-icon {\n width: 40px;\n height: 40px;\n }\n\n .help-title {\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .help-text {\n font-weight: 400;\n }\n\n .choices {\n display: grid;\n gap: 15px;\n grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n margin: 0 0 15px 0;\n }\n\n .choice {\n border: 1px solid $border-color;\n border-radius: 5px;\n display: flex;\n height: 60px;\n justify-content: center;\n align-items: center;\n text-align: center;\n color: $choice-available-color;\n cursor: pointer;\n\n &.selected {\n background-color: $border-color;\n color: $verdocs-grey-4;\n }\n }\n\n .buttons {\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: flex-end;\n\n verdocs-button {\n margin-left: 16px;\n }\n }\n}\n","import {Component, Prop, h, Event, EventEmitter, Fragment, Host, State} from '@stencil/core';\nimport Question from './question.svg';\n\n/*\n Display a text input field. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n /\n@Component({\n tag: 'verdocs-kba-dialog',\n styleUrl: 'verdocs-kba-dialog.scss',\n})\nexport class VerdocsKbaDialog {\n /\n Which step this confirmation is for, in a multi-step process. Ignored if `steps` is < 2.\n /\n @Prop() step: number = 1;\n\n /\n How many steps exist in a multi-step process. Set to 1 for a single-step process (hides the indicator).\n /\n @Prop() steps: number = 3;\n\n /\n If set, a help/instructions box will be displayed with this title\n /\n @Prop() helptitle: string = 'One Time Code';\n\n /\n If set, a help/instructions box will be displayed with this text\n /\n @Prop() helptext: string = 'Please check your text messages for a security code, and enter the code below.';\n\n /\n Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n /\n @Prop() mode: 'text' \| 'choice' = 'choice';\n\n /\n For text input challenges, the label to display next to the input field.\n /\n @Prop() label: string = 'PIN';\n\n /\n For text input challenges, the placeholder to display inside the input field.\n /\n @Prop() placeholder: string = 'Enter your PIN...';\n\n /\n For choice challenges, a set of choices to choose from. 6 choices is recommended to fit most screen sizes.\n /\n @Prop() choices: string[] = ['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd'];\n\n /\n Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n /\n @Prop() open: boolean = false;\n\n /\n Event fired when the dialog is closed. The event data will contain the closure reason.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired when the dialog is closed. The event data will contain the ~~closure~~ ~~reason~~.\n */\n @Event({composed: true}) ~~done~~: EventEmitter<string>;\n\n @State() response = '';\n\n handleCancel() {\n this.cancel.emit();\n ~~this.open = false;\n~~ }\n\n // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n handleDismiss(e: any) {\n if (e.target.className === 'background-overlay') {\n e.preventDefault();\n this.handleCancel();\n }\n }\n\n handleDone() {\n this.~~done~~.emit(this.response);\n ~~this.open = false;\n~~ }\n\n render() {\n return (\n <Host ~~style={{display: this.open ? 'block' : 'none'}}~~>\n <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">\n Confirm Your Identity\n {this.steps > 1 ? (\n <span class=\"step\">\n ({this.step}/{this.steps})\n </span>\n ) : (\n <Fragment />\n )}\n </div>\n\n <div class=\"help-box\">\n <div class=\"help-icon\" innerHTML={Question} />\n <div class=\"help-details\">\n <div class=\"help-title\">{this.helptitle}</div>\n <div class=\"help-text\">{this.helptext}</div>\n </div>\n </div>\n\n {this.mode === 'choice' ? (\n <div class=\"choices\">\n {this.choices.map(choice => (\n <div\n class={`choice ${choice === this.response ? 'selected' : ''}`}\n onClick={() => {\n this.response = choice;\n }}\n >\n {choice}\n </div>\n ))}\n </div>\n ) : (\n <div class=\"input\">\n <label htmlFor=\"verdocs-kba-input\">{this.label}</label>\n <input type=\"text\" id=\"verdocs-kba-input\" name=\"verdocs-kba-input\" placeholder={this.placeholder} />\n </div>\n )}\n\n <div class=\"buttons\">\n <verdocs-button label=\"Cancel\" variant=\"outline\" ~~onPress~~={() => this.handleCancel()} />\n <verdocs-button label=\"Done\" ~~onPress~~={() => this.handleDone()} disabled={!this.response} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-kba-dialog.entry.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,kkEAAkkE;;MCYjlE,gBAAgB;;;;;gBAIJ,CAAC;iBAKA,CAAC;qBAKG,eAAe;oBAKhB,gFAAgF;gBAKzE,QAAQ;iBAKlB,KAAK;uBAKC,mBAAmB;mBAKrB,CAAC,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,WAAW,EAAE,gBAAgB,CAAC;oBAY1G,EAAE;;EAEtB,YAAY;IACV,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;GACpB;;EAGD,aAAa,CAAC,CAAM;IAClB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;MAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;GACF;EAED,UAAU;IACR,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GAC/B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IACjE,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,SAAS,6BAEjB,IAAI,CAAC,KAAK,GAAG,CAAC,IACb,YAAM,KAAK,EAAC,MAAM,SACd,IAAI,CAAC,IAAI,OAAG,IAAI,CAAC,KAAK,MACnB,KAEP,EAAC,QAAQ,OAAG,CACb,CACG,EAEN,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,WAAW,EAAC,SAAS,EAAE,QAAQ,GAAI,EAC9C,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,SAAS,CAAO,EAC9C,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAO,CACxC,CACF,EAEL,IAAI,CAAC,IAAI,KAAK,QAAQ,IACrB,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtB,WACE,KAAK,EAAE,UAAU,MAAM,KAAK,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC7D,OAAO,EAAE;QACP,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;OACxB,IAEA,MAAM,CACH,CACP,CAAC,CACE,KAEN,WAAK,KAAK,EAAC,OAAO,IAChB,aAAO,OAAO,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAS,EACvD,aAAO,IAAI,EAAC,MAAM,EAAC,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,mBAAmB,EAAC,WAAW,EAAE,IAAI,CAAC,WAAW,GAAI,CAChG,CACP,EAED,WAAK,KAAK,EAAC,SAAS,IAClB,sBAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAI,EACvF,sBAAgB,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAI,CACvF,CACF,CACF,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.scss?tag=verdocs-kba-dialog","./src/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-kba-dialog {\n font-family: $primary-font;\n box-sizing: border-box;\n\n div {\n box-sizing: border-box;\n }\n\n .background-overlay {\n position: absolute;\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\n .dialog {\n width: 440px;\n display: flex;\n flex-direction: column;\n border-radius: 4px;\n overflow: hidden;\n background: #fff;\n padding: 16px;\n box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n }\n\n .heading {\n display: flex;\n flex-direction: row;\n font-size: 20px;\n font-weight: 500;\n }\n\n .step {\n margin-left: 6px;\n color: #666;\n }\n\n .help-box {\n background-color: $border-color;\n display: flex;\n flex-direction: row;\n margin: 14px 0;\n padding: 14px;\n align-items: center;\n color: white;\n }\n\n .help-details {\n display: flex;\n flex-direction: column;\n margin-left: 15px;\n font-size: 14px;\n }\n\n .help-icon {\n width: 40px;\n height: 40px;\n }\n\n .help-title {\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .help-text {\n font-weight: 400;\n }\n\n .choices {\n display: grid;\n gap: 15px;\n grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n margin: 0 0 15px 0;\n }\n\n .choice {\n border: 1px solid $border-color;\n border-radius: 5px;\n display: flex;\n height: 60px;\n justify-content: center;\n align-items: center;\n text-align: center;\n color: $choice-available-color;\n cursor: pointer;\n\n &.selected {\n background-color: $border-color;\n color: $verdocs-grey-4;\n }\n }\n\n .buttons {\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: flex-end;\n\n verdocs-button {\n margin-left: 16px;\n }\n }\n}\n","import {Component, Prop, h, Event, EventEmitter, Fragment, Host, State} from '@stencil/core';\nimport Question from './question.svg';\n\n/*\n Display a text input field. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n /\n@Component({\n tag: 'verdocs-kba-dialog',\n styleUrl: 'verdocs-kba-dialog.scss',\n})\nexport class VerdocsKbaDialog {\n /\n Which step this confirmation is for, in a multi-step process. Ignored if `steps` is < 2.\n /\n @Prop() step: number = 1;\n\n /\n How many steps exist in a multi-step process. Set to 1 for a single-step process (hides the indicator).\n /\n @Prop() steps: number = 3;\n\n /\n If set, a help/instructions box will be displayed with this title\n /\n @Prop() helptitle: string = 'One Time Code';\n\n /\n If set, a help/instructions box will be displayed with this text\n /\n @Prop() helptext: string = 'Please check your text messages for a security code, and enter the code below.';\n\n /\n Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n /\n @Prop() mode: 'text' \| 'choice' = 'choice';\n\n /\n For text input challenges, the label to display next to the input field.\n /\n @Prop() label: string = 'PIN';\n\n /\n For text input challenges, the placeholder to display inside the input field.\n /\n @Prop() placeholder: string = 'Enter your PIN...';\n\n /\n For choice challenges, a set of choices to choose from. 6 choices is recommended to fit most screen sizes.\n /\n @Prop() choices: string[] = ['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd'];\n\n /\n Event fired when the dialog is closed. The event data will contain the closure reason.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired when the dialog is closed. The event data will contain the value selected.\n */\n @Event({composed: true}) next: EventEmitter<string>;\n\n @State() response = '';\n\n handleCancel() {\n this.cancel.emit();\n }\n\n // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n handleDismiss(e: any) {\n if (e.target.className === 'background-overlay') {\n e.preventDefault();\n this.handleCancel();\n }\n }\n\n handleDone() {\n this.next.emit(this.response);\n }\n\n render() {\n return (\n <Host>\n <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">\n Confirm Your Identity\n {this.steps > 1 ? (\n <span class=\"step\">\n ({this.step}/{this.steps})\n </span>\n ) : (\n <Fragment />\n )}\n </div>\n\n <div class=\"help-box\">\n <div class=\"help-icon\" innerHTML={Question} />\n <div class=\"help-details\">\n <div class=\"help-title\">{this.helptitle}</div>\n <div class=\"help-text\">{this.helptext}</div>\n </div>\n </div>\n\n {this.mode === 'choice' ? (\n <div class=\"choices\">\n {this.choices.map(choice => (\n <div\n class={`choice ${choice === this.response ? 'selected' : ''}`}\n onClick={() => {\n this.response = choice;\n }}\n >\n {choice}\n </div>\n ))}\n </div>\n ) : (\n <div class=\"input\">\n <label htmlFor=\"verdocs-kba-input\">{this.label}</label>\n <input type=\"text\" id=\"verdocs-kba-input\" name=\"verdocs-kba-input\" placeholder={this.placeholder} />\n </div>\n )}\n\n <div class=\"buttons\">\n <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n <verdocs-button label=\"Done\" onClick={() => this.handleDone()} disabled={!this.response} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/verdocs-ok-dialog.entry.js CHANGED Viewed

@@ -5,25 +5,27 @@ const verdocsOkDialogCss = "verdocs-ok-dialog{font-family:\"Barlow\", sans-serif
 const VerdocsOkDialog = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.closed = createEvent(this, "closed", 7);
+    this.next = createEvent(this, "next", 7);
+    this.cancel = createEvent(this, "cancel", 7);
     this.heading = '';
     this.message = '';
-    this.open = false;
-    this.cancel = false;
+    this.showCancel = false;
   }
-  handleClose(reason) {
-    this.closed.emit(reason);
-    this.open = false;
+  handleOk() {
+    this.next.emit();
+  }
+  handleCancel() {
+    this.cancel.emit();
   }
   // 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');
+      this.cancel.emit();
     }
   }
   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') })))))));
+    return (h(Host, null, 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.showCancel ? h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: () => this.handleCancel() }) : h("div", { style: { display: 'none' } }), h("verdocs-button", { label: "OK", onClick: () => this.handleOk() })))))));
   }
 };
 VerdocsOkDialog.style = verdocsOkDialogCss;

package/dist/esm/verdocs-ok-dialog.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-ok-dialog.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,ulCAAulC;;MCWrmC,eAAe~~;;;;~~mBAIA,EAAE;mBAKF,EAAE;~~gBAKJ~~,KAAK~~;kBAMH,KAAK~~;;~~EAO/B~~,~~WAAW,CAAC,MAAuB~~;~~IACjC~~,IAAI,CAAC,~~MAAM~~,CAAC,IAAI,~~CAAC~~,~~MAAM,~~CAAC,~~CAAC~~;~~IACzB~~,IAAI,CAAC,IAAI,~~GAAG~~,~~KAAK,~~CAAC;~~GACnB~~;;EAGD,aAAa,CAAC,CAAM;IAClB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;MAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,~~WAAW~~,CAAC,~~QAAQ~~,~~CAAC~~,CAAC;~~KAC5B~~;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,~~IAAC~~,~~KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,EAAC,IAClD,~~WAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IACjE,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO,EACzC,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,EAEb,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,~~MAAM~~,GAAG,sBAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,~~WAAW~~,~~CAAC~~,~~QAAQ,CAAC,~~GAAI,GAAG,WAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,GAAI,~~EACjJ~~,sBAAgB,KAAK,EAAC,IAAI,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,~~WAAW~~,~~CAAC~~,~~IAAI,CAAC,~~GAAI,~~CAChE~~,CACF,CACF,CACF,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.scss?tag=verdocs-ok-dialog","./src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-ok-dialog {\n font-family: $primary-font;\n box-sizing: border-box;\n\n .background-overlay {\n position: absolute;\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\n .dialog {\n max-width: 50%;\n display: flex;\n flex-direction: column;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n }\n\n .heading {\n display: flex;\n font-size: 16px;\n flex-direction: row;\n background: #444444;\n padding: 8px 16px;\n color: $verdocs-grey-4;\n }\n\n .content {\n font-size: 16px;\n background: $verdocs-grey-4;\n padding: 20px;\n }\n\n .buttons {\n display: flex;\n margin: 20px 0 0 0;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n\n verdocs-button {\n margin-left: 16px;\n }\n }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host} from '@stencil/core';\n\n/*\n Display a simple text dialog box with an Ok button. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n /\n@Component({\n tag: 'verdocs-ok-dialog',\n styleUrl: 'verdocs-ok-dialog.scss',\n})\nexport class VerdocsOkDialog {\n /\n The title of the dialog. \"title\" is a reserved word, so we use heading.\n /\n @Prop() heading: string = '';\n\n /\n The message content to display.\n /\n @Prop() message: string = '';\n\n /\n Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n /\n @Prop() open: boolean = false;\n\n /\n If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background\n * overlay to dismiss it.\n /\n @Prop() ~~cancel~~: boolean = false;\n\n /\n Event fired when the ~~dialog~~ is ~~closed.~~ ~~The~~ ~~event~~ ~~data~~ ~~will~~ ~~contain~~ the ~~closure~~ ~~reason~~.\n */\n @Event({composed: true}) ~~closed~~: EventEmitter~~<'cancel' \| 'ok'>;\~~n\n ~~handleClose~~(~~reason: 'cancel' \| 'ok'~~) {\n this.~~closed~~.emit(~~reason~~);\n this.~~open = false~~;\n }\n\n // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n handleDismiss(e: any) {\n if (e.target.className === 'background-overlay') {\n e.preventDefault();\n this.~~handleClose~~(~~'cancel'~~);\n }\n }\n\n render() {\n return (\n <Host ~~style={{display: this.open ? 'block' : 'none'}}~~>\n <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">{this.heading}</div>\n <div class=\"content\">\n {this.message}\n\n <div class=\"buttons\">\n {this.~~cancel~~ ? <verdocs-button label=\"CANCEL\" variant=\"outline\" ~~onPress~~={() => this.~~handleClose~~(~~'cancel'~~)} /> : <div style={{display: 'none'}} />}\n <verdocs-button label=\"OK\" ~~onPress~~={() => this.~~handleClose~~(~~'ok'~~)} />\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-ok-dialog.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,ulCAAulC;;MCWrmC,eAAe;;;;;mBAIA,EAAE;mBAKF,EAAE;sBAME,KAAK;;EAYnC,QAAQ;IACN,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;GAClB;EAED,YAAY;IACV,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;GACpB;;EAGD,aAAa,CAAC,CAAM;IAClB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;MAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACpB;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IACjE,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO,EACzC,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,EAEb,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,UAAU,GAAG,sBAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAI,GAAG,WAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,GAAI,EAC9I,sBAAgB,KAAK,EAAC,IAAI,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,GAAI,CACzD,CACF,CACF,CACF,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.scss?tag=verdocs-ok-dialog","./src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-ok-dialog {\n font-family: $primary-font;\n box-sizing: border-box;\n\n .background-overlay {\n position: absolute;\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\n .dialog {\n max-width: 50%;\n display: flex;\n flex-direction: column;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n }\n\n .heading {\n display: flex;\n font-size: 16px;\n flex-direction: row;\n background: #444444;\n padding: 8px 16px;\n color: $verdocs-grey-4;\n }\n\n .content {\n font-size: 16px;\n background: $verdocs-grey-4;\n padding: 20px;\n }\n\n .buttons {\n display: flex;\n margin: 20px 0 0 0;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n\n verdocs-button {\n margin-left: 16px;\n }\n }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host} from '@stencil/core';\n\n/*\n Display a simple text dialog box with an Ok button. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n /\n@Component({\n tag: 'verdocs-ok-dialog',\n styleUrl: 'verdocs-ok-dialog.scss',\n})\nexport class VerdocsOkDialog {\n /\n The title of the dialog. \"title\" is a reserved word, so we use heading.\n /\n @Prop() heading: string = '';\n\n /\n The message content to display.\n /\n @Prop() message: string = '';\n\n /\n If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background\n * overlay to dismiss it.\n /\n @Prop() showCancel: boolean = false;\n\n /\n Event fired when the user clicks the OK button.\n /\n @Event({composed: true}) next: EventEmitter;\n\n /\n Event fired when the user clicks the background overlay or Cancel button.\n */\n @Event({composed: true}) cancel: EventEmitter;\n\n handleOk() {\n this.next.emit();\n }\n\n handleCancel() {\n this.cancel.emit();\n }\n\n // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n handleDismiss(e: any) {\n if (e.target.className === 'background-overlay') {\n e.preventDefault();\n this.cancel.emit();\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">{this.heading}</div>\n <div class=\"content\">\n {this.message}\n\n <div class=\"buttons\">\n {this.showCancel ? <verdocs-button label=\"CANCEL\" variant=\"outline\" onClick={() => this.handleCancel()} /> : <div style={{display: 'none'}} />}\n <verdocs-button label=\"OK\" onClick={() => this.handleOk()} />\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/verdocs-preview.entry.js CHANGED Viewed

@@ -1,13 +1,14 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
 import './Types-ab9f6af8.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-82f4600d.js';
-import { r as renderDocumentField, a as getRoleIndex } from './utils-3f23facc.js';
-import { s as state } from './templateStore-3b26e38d.js';
-import { l as loadTemplate } from './Templates-035e0ea2.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-dac04424.js';
+import { r as renderDocumentField, a as getRoleIndex } from './utils-99a3c1f0.js';
+import { s as state } from './templateStore-96a39844.js';
+import { l as loadTemplate } from './Templates-1034fade.js';
 import { S as SDKError } from './errors-9b5498c8.js';
+import './index-fd7b8a34.js';
 import './Templates-f7c590c0.js';
-const verdocsPreviewCss = "";
+const verdocsPreviewCss = "verdocs-preview{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
 const VerdocsPreview = class {
   constructor(hostRef) {
@@ -44,14 +45,19 @@ const VerdocsPreview = class {
     fields.forEach(field => renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(state.roleNames, field.role_name), this.handleFieldChange, true));
   }
   render() {
-    if (state.loading) {
+    // TODO: Render a better error
+    if (state.loading || !state.template) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    // TODO: Render a better error
-    return (h(Host, null, state.template ? (h("div", { class: "inner" }, h("verdocs-view", { templateId: this.templateId, endpoint: this.endpoint, onPageRendered: e => this.handlePageRendered(e), pageLayers: [
-        { name: 'page', type: 'canvas' },
-        { name: 'controls', type: 'div' },
-      ] }))) : (h("div", null, "Error loading Template. Please try again later."))));
+    const pages = [...state.template.pages];
+    pages.sort((a, b) => a.sequence - b.sequence);
+    return (h(Host, null, pages.map(page => {
+      console.log('rendering page', page);
+      return (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
+          { name: 'page', type: 'canvas' },
+          { name: 'controls', type: 'div' },
+        ] }));
+    })));
   }
 };
 VerdocsPreview.style = verdocsPreviewCss;

package/dist/esm/verdocs-preview.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-preview.entry.js","mappings":"~~;;;;;;;;;~~AAAA,MAAM,iBAAiB,GAAG,~~EAAE~~;;~~MCkBf~~,cAAc;;;;oBAIW,eAAe,CAAC,UAAU,EAAE;sBAK5B,IAAI;;;EASxC,MAAM,gBAAgB;;IACpB,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;IAE5B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACpB,OAAO,CAAC,GAAG,CAAC,0CAA0C,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;MACzE,OAAO;KACR;IAED,IAAI;MACF,OAAO,CAAC,GAAG,CAAC,8BAA8B,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;MAC7D,MAAM,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KACpD;IAAC,OAAO,CAAC,EAAE;MACV,OAAO,CAAC,GAAG,CAAC,kCAAkC,EAAE,CAAC,CAAC,CAAC;MACnD,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,MAAM,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,IAAI,CAAC,CAAC,CAAC;KACpF;GACF;EAED,MAAM,iBAAiB,CAAC,KAAqB,EAAE,CAAM,EAAE,QAAiB;IACtE,OAAO,CAAC,GAAG,CAAC,6BAA6B,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;GAChE;EAED,kBAAkB,CAAC,CAAC;IAClB,MAAM,QAAQ,GAAG,CAAC,CAAC,MAA0B,CAAC;IAC9C,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE,QAAQ,CAAC,CAAC;IAEjD,MAAM,MAAM,GAAGA,KAAa,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,aAAa,KAAK,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAC9G,OAAO,CAAC,GAAG,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC;IAChD,MAAM,CAAC,OAAO,CAAC,KAAK,IAAI,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAY,EAAE,YAAY,CAACA,KAAa,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC,CAAC;GAClK;EAED,MAAM~~;IACJ~~,IAAIA,KAAa,CAAC,OAAO,EAAE;~~MACzB~~,QACE,EAAC,IAAI,QACH,yBAAkB,CACb,EACP;KACH~~;;IAGD~~,~~QACE~~,~~EAAC~~,~~IAAI~~,~~QACFA~~,KAAa,CAAC,QAAQ,~~IACrB~~,~~WAAK~~,KAAK,EAAC,OAAO,~~IAChB~~,~~oBACE~~,~~UAAU~~,EAAE,IAAI,CAAC,~~UAAU~~,~~EAC3B~~,~~QAAQ~~,EAAE,IAAI,CAAC,QAAQ,~~EACvB~~,cAAc,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAC/C,~~UAAU~~,EAAE;~~QACV~~,EAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAC;~~QAC9B~~,EAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAC;~~OAChC~~,GACD,~~CACE~~,~~KAEN~~,~~iEAA0D~~,~~CAC3D,CACI,~~EACP;GACH;;;;;;","names":["TemplateStore"],"sources":["./src/components/embeds/verdocs-preview/verdocs-preview.scss?tag=verdocs-preview","./src/components/embeds/verdocs-preview/verdocs-preview.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-preview {\n ~~//display: flex;\n //overflow: hidden;\n //position: relative;\n //min-height: 600px;\n //flex-direction: column;\n //box-sizing: border-box;\n //~~font-family: $verdocs-primary-font;\n //\n //div {\n // box-sizing: border-box;\n //}\n //\n //.toolbar {\n // width: 100%;\n // margin: 0 auto;\n // padding: 0 14px;\n // position: relative;\n //}\n //\n //.tools {\n // width: 100%;\n // color: #fff;\n // height: 56px;\n // display: flex;\n ~~// font-size~~: ~~12px~~;\n ~~// align-items: center;\n // flex-direction:~~ row~~;\n // background~~-~~color~~: ~~$medium-bg~~;\n ~~//}\n //\n //.cover {\n // top: 0;\n // left: 0;\n // right: 0;\n // bottom: 0;\n // z~~-~~index: 999;\n // position: absolute;\n // background: rgba(0, 0, 0, 0.5);\n //}\n //\n //.document {\n // flex: 1;\n //~~ height: ~~100%;\n // display: flex~~;\n // position: relative;\n ~~// overflow-y: scroll;\n //~~ align-items: center;\n ~~// flex~~-~~direction~~: ~~column;\n // justify~~-~~content: center~~;\n ~~//\n // .inner {\n // width: 100%;\n // max-width: 1028px;\n // }\n //}\n //\n //.agree {\n //~~ flex~~: 1;\n // flex~~-direction: ~~row~~;\n ~~// display: flex;\n // align-items: center;\n // margin-right: 10px;\n //\n // .intro {~~\n ~~// display: none;\~~n ~~// }\n //\n // .header~~ {\n // ~~flex: 0 0 56px;\n // }\n //\n // .agree~~-~~checkbox {\n // background~~: ~~#ccc;\n // flex: 0 0 20px;\n // display: flex;\n // width: 20px;\n // height: 20px;\n //~~ border-radius: 3px;\n // position: relative;\n // margin: 0 10px 0 14px;\n //\n // input[type='checkbox']:checked + label:after {\n // filter: alpha(opacity=100);\n // opacity: 1;\n // }\n //\n // label {\n // left: 2px;\n // top: 2px;\n // width: 16px;\n // height: 16px;\n // cursor: pointer;\n // position: absolute;\n // background: #33354c;\n // box~~-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.8)~~;\n ~~//\n // .agree-checkbox label:hover::after {\n // filter: alpha(opacity=30);\n // opacity: 0.3;\n //~~ }\n //\n // &:after {\n // top: 2px;\n // left: 3px;\n // width: 8px;\n // opacity: 0;\n // height: 5px;\n // content: '';\n // position: absolute;\n // background: transparent;\n // filter: alpha(opacity=0);\n // transform: rotate(-45deg);\n // border: 2px solid #fcfff4;\n // border-top: none;\n // border-right: none;\n // }\n ~~// }\n // }\n //}\n}\n~~","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h} from '@stencil/core';\nimport {Event, EventEmitter, Host} from '@stencil/core';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport {IPageRenderEvent} from '../verdocs-view/verdocs-view';\nimport TemplateStore from '../../../utils/templateStore';\nimport {loadTemplate} from '../../../utils/Templates';\nimport {SDKError} from '../../../utils/errors';\n\n/*\n Display a template preview experience.\n /\n@Component({\n tag: 'verdocs-preview',\n styleUrl: 'verdocs-preview.scss',\n shadow: false,\n})\nexport class VerdocsPreview {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The ID of the template to create the document from.\n /\n @Prop() templateId: string \| null = null;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n // TODO: Move to state store so we can load this one time\n async componentDidLoad() {\n this.endpoint.loadSession();\n\n if (!this.templateId) {\n console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);\n return;\n }\n\n try {\n console.log(`[PREVIEW] Loading template ${this.templateId}`);\n await loadTemplate(this.endpoint, this.templateId);\n } catch (e) {\n console.log('[PREVIEW] Error loading template', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n console.log('[PREVIEW] handleFieldChange', field, e, optionId);\n }\n\n handlePageRendered(e) {\n const pageInfo = e.detail as IPageRenderEvent;\n console.log('[PREVIEW] Page rendered', pageInfo);\n\n const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n console.log('[PREVIEW] Fields on page', fields);\n fields.forEach(field => renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(TemplateStore.roleNames, field.role_name), this.handleFieldChange, true));\n }\n\n render() {\n if (TemplateStore.loading) {\n return (\n <Host>\n <verdocs-loader />\n </Host>\n );\n }\n\n // ~~TODO:~~ ~~Render~~ a ~~better~~ ~~error~~\n return (\n <Host>\n {~~TemplateStore~~.~~template~~ ? (\n ~~<div~~ ~~class=\"inner~~\~~">\~~n <verdocs-~~view~~\n ~~templateId~~={~~this~~.~~templateId~~}\n ~~endpoint~~={~~this~~.~~endpoint~~}\n onPageRendered={e => this.handlePageRendered(e)}\n ~~pageLayers~~={[\n {name: 'page', type: 'canvas'},\n {name: 'controls', type: 'div'},\n ]}\n />\n ~~</div>\n~~ ) ~~: (\~~n ~~<div>Error loading Template. Please try again later.</div>\n~~ )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-preview.entry.js","mappings":";;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,2bAA2b;;MCoBxc,cAAc;;;;oBAIW,eAAe,CAAC,UAAU,EAAE;sBAK5B,IAAI;;;EASxC,MAAM,gBAAgB;;IACpB,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;IAE5B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACpB,OAAO,CAAC,GAAG,CAAC,0CAA0C,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;MACzE,OAAO;KACR;IAED,IAAI;MACF,OAAO,CAAC,GAAG,CAAC,8BAA8B,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;MAC7D,MAAM,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KACpD;IAAC,OAAO,CAAC,EAAE;MACV,OAAO,CAAC,GAAG,CAAC,kCAAkC,EAAE,CAAC,CAAC,CAAC;MACnD,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,MAAM,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,IAAI,CAAC,CAAC,CAAC;KACpF;GACF;EAED,MAAM,iBAAiB,CAAC,KAAqB,EAAE,CAAM,EAAE,QAAiB;IACtE,OAAO,CAAC,GAAG,CAAC,6BAA6B,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;GAChE;EAED,kBAAkB,CAAC,CAAC;IAClB,MAAM,QAAQ,GAAG,CAAC,CAAC,MAA0B,CAAC;IAC9C,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE,QAAQ,CAAC,CAAC;IAEjD,MAAM,MAAM,GAAGA,KAAa,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,aAAa,KAAK,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAC9G,OAAO,CAAC,GAAG,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC;IAChD,MAAM,CAAC,OAAO,CAAC,KAAK,IAAI,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAY,EAAE,YAAY,CAACA,KAAa,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC,CAAC;GAClK;EAED,MAAM;;IAEJ,IAAIA,KAAa,CAAC,OAAO,IAAI,CAACA,KAAa,CAAC,QAAQ,EAAE;MACpD,QACE,EAAC,IAAI,QACH,yBAAkB,CACb,EACP;KACH;IAED,MAAM,KAAK,GAAG,CAAC,GAAGA,KAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC;IAE9C,QACE,EAAC,IAAI,QACF,KAAK,CAAC,GAAG,CAAC,IAAI;MACb,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;MACpC,QACE,6BACE,YAAY,EAAE,IAAI,CAAC,WAAW,EAC9B,YAAY,EAAE,GAAG,EACjB,aAAa,EAAE,GAAG,EAClB,UAAU,EAAE,IAAI,CAAC,QAAQ,EACzB,cAAc,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAC/C,MAAM,EAAE;UACN,EAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAC;UAC9B,EAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAC;SAChC,GACD,EACF;KACH,CAAC,CACG,EACP;GACH;;;;;;","names":["TemplateStore"],"sources":["./src/components/embeds/verdocs-preview/verdocs-preview.scss?tag=verdocs-preview","./src/components/embeds/verdocs-preview/verdocs-preview.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-preview {\n font-family: $verdocs-primary-font;\n display: flex;\n padding: 15px;\n row-gap: 15px;\n min-height: 200px;\n position: relative;\n align-items: center;\n box-sizing: border-box;\n flex-direction: column;\n\n div,\n canvas {\n box-sizing: border-box;\n }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h} from '@stencil/core';\nimport {Event, EventEmitter, Host} from '@stencil/core';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport {IPageRenderEvent} from '../verdocs-view/verdocs-view';\nimport TemplateStore from '../../../utils/templateStore';\nimport {loadTemplate} from '../../../utils/Templates';\nimport {SDKError} from '../../../utils/errors';\n\n/*\n Display a template preview experience. This will display the template's attached\n * documents with signing fields overlaid on each page. Fields will be color-coded\n * by recipient, and will be read-only (cannot be filled, moved, or altered).\n /\n@Component({\n tag: 'verdocs-preview',\n styleUrl: 'verdocs-preview.scss',\n shadow: false,\n})\nexport class VerdocsPreview {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The ID of the template to create the document from.\n /\n @Prop() templateId: string \| null = null;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n // TODO: Move to state store so we can load this one time\n async componentDidLoad() {\n this.endpoint.loadSession();\n\n if (!this.templateId) {\n console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);\n return;\n }\n\n try {\n console.log(`[PREVIEW] Loading template ${this.templateId}`);\n await loadTemplate(this.endpoint, this.templateId);\n } catch (e) {\n console.log('[PREVIEW] Error loading template', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n console.log('[PREVIEW] handleFieldChange', field, e, optionId);\n }\n\n handlePageRendered(e) {\n const pageInfo = e.detail as IPageRenderEvent;\n console.log('[PREVIEW] Page rendered', pageInfo);\n\n const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n console.log('[PREVIEW] Fields on page', fields);\n fields.forEach(field => renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(TemplateStore.roleNames, field.role_name), this.handleFieldChange, true));\n }\n\n render() {\n // TODO: Render a better error\n if (TemplateStore.loading \|\| !TemplateStore.template) {\n return (\n <Host>\n <verdocs-loader />\n </Host>\n );\n }\n\n const pages = [...TemplateStore.template.pages];\n pages.sort((a, b) => a.sequence - b.sequence);\n\n return (\n <Host>\n {pages.map(page => {\n console.log('rendering page', page);\n return (\n <verdocs-document-page\n pageImageUri={page.display_uri}\n virtualWidth={612}\n virtualHeight={792}\n pageNumber={page.sequence}\n onPageRendered={e => this.handlePageRendered(e)}\n layers={[\n {name: 'page', type: 'canvas'},\n {name: 'controls', type: 'div'},\n ]}\n />\n );\n })}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/verdocs-quick-functions_3.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-f78d163d.js';
 import './Types-ab9f6af8.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-82f4600d.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-dac04424.js';
 import { a as getTemplates } from './Templates-f7c590c0.js';
 /**

package/dist/esm/verdocs-radio-button.entry.js CHANGED Viewed

@@ -1,22 +1,17 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
+import { r as registerInstance, h, H as Host } from './index-f78d163d.js';
 const verdocsRadioButtonCss = "verdocs-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:20px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-radio-button.disabled{opacity:0.5}verdocs-radio-button input[type=radio]{position:absolute;opacity:0}verdocs-radio-button input[type=radio]+label:before{content:\"\";background:#f5f5fa;border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:16px;height:16px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-radio-button input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-radio-button input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-radio-button input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-radio-button input[type=radio]+label:empty:before{margin-right:0}verdocs-radio-button.required input[type=radio]+label:before{border:1px solid #cc0000}verdocs-radio-button.hide{display:none}verdocs-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 const VerdocsRadioButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.selected = createEvent(this, "selected", 7);
     this.checked = false;
     this.name = '';
     this.value = '';
     this.disabled = false;
   }
-  handleChange(e) {
-    console.log('changed', e.target.checked);
-    this.selected.emit({ value: this.value });
-  }
   render() {
-    return (h(Host, { class: { disabled: this.disabled } }, h("input", { type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled, onChange: e => this.handleChange(e) }), h("label", { htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
+    return (h(Host, { class: { disabled: this.disabled } }, h("input", { type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), h("label", { htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
   }
 };
 VerdocsRadioButton.style = verdocsRadioButtonCss;

package/dist/esm/verdocs-radio-button.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-radio-button.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,27CAA27C;;~~MCY58C~~,kBAAkB~~;;;;~~mBAIF,KAAK;gBAKT,EAAE;iBAKD,EAAE;oBAKG,KAAK;;~~EASlC~~,~~YAAY,CAAC,CAAM;IACjB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,~~MAAM~~,CAAC,OAAO,CAAC,CAAC~~;~~IACzC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;GACzC;EAED,MAAM;~~IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,IACpC,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,wBAAwB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EACrD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,~~EACvB~~,~~QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACnC,~~EACF,aAAO,OAAO,EAAE,wBAAwB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,GAAI,CAChE,EACP;GACH;;;;;;","names":[],"sources":["./src/components/controls/verdocs-radio-button/verdocs-radio-button.scss?tag=verdocs-radio-button","./src/components/controls/verdocs-radio-button/verdocs-radio-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-radio-button {\n font-family: $verdocs-primary-font;\n width: 20px;\n height: 20px;\n display: block;\n font-size: 11px;\n position: relative;\n background-color: transparent;\n transform-origin: bottom left;\n border-radius: 100%;\n\n &.disabled {\n opacity: 0.5;\n }\n\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n\n + label {\n &:before {\n content: '';\n background: $verdocs-grey-3;\n border-radius: 100%;\n border: 1px solid rgba(0, 0, 0, 0.6);\n display: inline-block;\n width: 16px;\n height: 16px;\n position: absolute;\n left: 1px;\n top: 1px;\n cursor: pointer;\n text-align: center;\n transition: all 250ms ease;\n }\n }\n\n &:checked {\n + label {\n &:before {\n background-color: $verdocs-green;\n box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n }\n }\n }\n\n &:focus {\n + label {\n &:before {\n outline: none;\n border-color: $verdocs-green;\n }\n }\n }\n\n &:disabled {\n + label {\n &:before {\n box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n border-color: darken($verdocs-grey-3, 25%);\n background: darken($verdocs-grey-3, 25%);\n }\n }\n }\n\n + label {\n &:empty {\n &:before {\n margin-right: 0;\n }\n }\n }\n }\n\n &.required {\n input[type='radio'] {\n + label {\n &:before {\n border: 1px solid $verdocs-red-1;\n }\n }\n }\n }\n\n &.hide {\n display: none;\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n}\n","import {Component, h, Host, Prop~~, Event, EventEmitter~~} from '@stencil/core';\n\n/*\n Displays a radio button. Note that this is different from the `verdocs-field-radio-button` component, which is ~~designed~~\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple radio\n * button for UI displays e.g. ~~dialogs~~ ~~and~~ .\n /\n@Component({\n tag: 'verdocs-radio-button',\n styleUrl: 'verdocs-radio-button.scss',\n shadow: false,\n})\nexport class VerdocsRadioButton {\n /\n Whether the radio button is currently selected.\n /\n @Prop() checked: boolean = false;\n\n /\n HTML form field name for the input.\n /\n @Prop() name: string = '';\n\n /\n Value to track with the input.\n /\n @Prop() value: string = '';\n\n /\n If set, the button will still be displayed but not selectable.\n /\n @Prop() disabled?: boolean = false;\n\n /\n Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n * keypress.\n */\n @Event({composed: true}) selected: EventEmitter<{value: string}>;\n\n handleChange(e: any) {\n console.log('changed', e.target.checked);\n this.selected.emit({value: this.value});\n }\n\n render() {\n return (\n <Host class={{disabled: this.disabled}}>\n <input\n type=\"radio\"\n value={this.value}\n name={this.name}\n id={`verdocs-radio-button-${this.name}-${this.value}`}\n checked={this.checked}\n disabled={this.disabled}\n onChange={e => this.handleChange(e)}\n />\n <label htmlFor={`verdocs-radio-button-${this.name}-${this.value}`} />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-radio-button.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,27CAA27C;;MCyB58C,kBAAkB;;;mBAIF,KAAK;gBAKT,EAAE;iBAKD,EAAE;oBAKG,KAAK;;EAElC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,IACpC,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,wBAAwB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EACrD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAEvB,EACF,aAAO,OAAO,EAAE,wBAAwB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,GAAI,CAChE,EACP;GACH;;;;;;","names":[],"sources":["./src/components/controls/verdocs-radio-button/verdocs-radio-button.scss?tag=verdocs-radio-button","./src/components/controls/verdocs-radio-button/verdocs-radio-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-radio-button {\n font-family: $verdocs-primary-font;\n width: 20px;\n height: 20px;\n display: block;\n font-size: 11px;\n position: relative;\n background-color: transparent;\n transform-origin: bottom left;\n border-radius: 100%;\n\n &.disabled {\n opacity: 0.5;\n }\n\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n\n + label {\n &:before {\n content: '';\n background: $verdocs-grey-3;\n border-radius: 100%;\n border: 1px solid rgba(0, 0, 0, 0.6);\n display: inline-block;\n width: 16px;\n height: 16px;\n position: absolute;\n left: 1px;\n top: 1px;\n cursor: pointer;\n text-align: center;\n transition: all 250ms ease;\n }\n }\n\n &:checked {\n + label {\n &:before {\n background-color: $verdocs-green;\n box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n }\n }\n }\n\n &:focus {\n + label {\n &:before {\n outline: none;\n border-color: $verdocs-green;\n }\n }\n }\n\n &:disabled {\n + label {\n &:before {\n box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n border-color: darken($verdocs-grey-3, 25%);\n background: darken($verdocs-grey-3, 25%);\n }\n }\n }\n\n + label {\n &:empty {\n &:before {\n margin-right: 0;\n }\n }\n }\n }\n\n &.required {\n input[type='radio'] {\n + label {\n &:before {\n border: 1px solid $verdocs-red-1;\n }\n }\n }\n }\n\n &.hide {\n display: none;\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.75s 2;\n }\n}\n","import {Component, h, Host, Prop} from '@stencil/core';\n\n/*\n Displays a radio button. Note that this is different from the `verdocs-field-radio-button` component, which is\n * designed to be used in signing experiences and contains settings that connect to template fields. This is just a\n * simple radio button for UI displays e.g. dialog boxes.\n \n This control encapsulates a standard HTML radio button. To subscribe to change events, connect an `onChange`\n * handler. Sample usage:\n \n ```html\n * <verdocs-radio-button\n * value=\"val1\"\n * name=\"someProperty\"\n * checked={this.someProperty === 'val1'}\n * onInput={(e: any) => { this.someProperty = 'val1' }}\n * disabled={false}\n * />\n * ```\n /\n@Component({\n tag: 'verdocs-radio-button',\n styleUrl: 'verdocs-radio-button.scss',\n shadow: false,\n})\nexport class VerdocsRadioButton {\n /\n Whether the radio button is currently selected.\n /\n @Prop() checked: boolean = false;\n\n /\n HTML form field name for the input.\n /\n @Prop() name: string = '';\n\n /\n Value to track with the input.\n /\n @Prop() value: string = '';\n\n /\n If set, the button will still be displayed but not selectable.\n */\n @Prop() disabled?: boolean = false;\n\n render() {\n return (\n <Host class={{disabled: this.disabled}}>\n <input\n type=\"radio\"\n value={this.value}\n name={this.name}\n id={`verdocs-radio-button-${this.name}-${this.value}`}\n checked={this.checked}\n disabled={this.disabled}\n // onChange={e => this.handleChange(e)}\n />\n <label htmlFor={`verdocs-radio-button-${this.name}-${this.value}`} />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/verdocs-search.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-f78d163d.js';
 import './Types-ab9f6af8.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-82f4600d.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-dac04424.js';
 const verdocsSearchCss = "verdocs-search{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;background-color:#1e2031}verdocs-search search-box{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:20px 10px}verdocs-search .boxes{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:20px 0}verdocs-search search-recent,verdocs-search search-saved,verdocs-search search-quick-functions,verdocs-search search-starred{display:-ms-flexbox;display:flex;margin:0 20px 20px 0}";

package/dist/esm/verdocs-send.entry.js CHANGED Viewed

@@ -3,8 +3,8 @@ import { g as getTemplate } from './Templates-f7c590c0.js';
 import './Types-ab9f6af8.js';
 import { i as isValidEmail, a as isValidPhone } from './Validators-f110bae2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-82f4600d.js';
-import { a as getRoleIndex } from './utils-3f23facc.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-dac04424.js';
+import { a as getRoleIndex } from './utils-99a3c1f0.js';
 const verdocsSendCss = "verdocs-send{display:-ms-flexbox;display:flex;padding:10px;position:relative;background:#ffffff;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-send .recipients{position:relative}verdocs-send .left-line{top:32px;left:20px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-send .level{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-left:50px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:8px 0 4px 0;border-bottom:1px solid #97979744}verdocs-send .level .level-icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-send .level .level-icon svg{fill:#00000089}verdocs-send .level .recipient{height:30px;display:-ms-flexbox;display:flex;-ms-flex:0 0 30px;flex:0 0 30px;color:#000000;cursor:pointer;font-size:14px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;background:#dddddd;white-space:nowrap;padding:2px 10px 2px 14px}verdocs-send .level .recipient .icon{width:22px;height:22px;-ms-flex:0 0 22px;flex:0 0 22px;margin:0 0 0 10px}verdocs-send .level .recipient .icon svg{width:22px;height:22px;fill:#333333;outline:none}verdocs-send .level .complete{-ms-flex:1;flex:1;height:30px;display:-ms-flexbox;display:flex;color:#000000;font-size:14px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:3px 10px 3px 2px}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-direction:row;flex-direction:row}verdocs-send verdocs-contact-picker{left:0;top:41px;z-index:10;position:absolute;border:1px solid #dddddd;-webkit-box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1)}";
@@ -113,8 +113,8 @@ const VerdocsSend = class {
     console.log('assigned', allRecipientsAssigned);
     return (h(Host, { class: {} }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Document")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
       var _a, _b, _c;
-      return (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_b = (_a = this.recipientsAssigned[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onCancel: () => (this.showPickerForId = ''), contactSuggestions: this.sessionContacts, templateRole: (_c = this.recipientsAssigned[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => console.log('Search', e.detail), onContactSelected: e => this.handleSelectContact(e, role) }))));
-    })))), h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { class: "complete" }, "Document Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onPress: e => this.handleCancel(e) }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRecipientsAssigned, onPress: e => this.handleSend(e) }))));
+      return (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_b = (_a = this.recipientsAssigned[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onCancel: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.recipientsAssigned[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => console.log('Search', e.detail) }))));
+    })))), h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { class: "complete" }, "Document Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRecipientsAssigned, onClick: e => this.handleSend(e) }))));
   }
 };
 VerdocsSend.style = verdocsSendCss;

package/dist/esm/verdocs-send.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-send.entry.js","mappings":"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","names":[],"sources":["./src/components/embeds/verdocs-send/verdocs-send.scss?tag=verdocs-send","./src/components/embeds/verdocs-send/verdocs-send.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-send {\n display: flex;\n padding: 10px;\n position: relative;\n background: #ffffff;\n flex-direction: column;\n font-family: $verdocs-primary-font;\n\n .recipients {\n position: relative;\n }\n\n // To avoid the need to compute things like heights, this layer is simply displayed \"on top\" of all the level rows. Its\n // background obscures the horizontal lines.\n .left-line {\n top: 32px;\n left: 20px;\n z-index: 1;\n width: 12px;\n bottom: 30px;\n position: absolute;\n background: #ffffff;\n border-left: 3px dotted #9b9b9b;\n }\n\n .level {\n display: flex;\n column-gap: 10px;\n margin-left: 50px;\n position: relative;\n flex-direction: row;\n padding: 8px 0 4px 0;\n border-bottom: 1px solid #97979744;\n\n .level-icon {\n top: 14px;\n z-index: 2;\n left: -40px;\n width: 24px;\n height: 24px;\n position: absolute;\n background: #ffffff;\n\n svg {\n fill: #00000089;\n }\n }\n\n .recipient {\n height: 30px;\n display: flex;\n flex: 0 0 30px;\n color: #000000;\n cursor: pointer;\n font-size: 14px;\n align-items: center;\n border-radius: 30px;\n flex-direction: row;\n background: #dddddd;\n white-space: nowrap;\n padding: 2px 10px 2px 14px;\n\n .icon {\n width: 22px;\n height: 22px;\n flex: 0 0 22px;\n margin: 0 0 0 10px;\n\n svg {\n width: 22px;\n height: 22px;\n fill: #333333;\n outline: none;\n }\n }\n }\n\n .complete {\n flex: 1;\n height: 30px;\n display: flex;\n color: #000000;\n font-size: 14px;\n align-items: center;\n flex-direction: row;\n padding: 3px 10px 3px 2px;\n }\n }\n\n .buttons {\n display: flex;\n margin-top: 10px;\n column-gap: 15px;\n flex-direction: row;\n }\n\n verdocs-contact-picker {\n left: 0;\n top: 41px;\n z-index: 10;\n position: absolute;\n border: 1px solid #dddddd;\n box-shadow: 0 0 6px 3px rgb(0 0 0 / 10%);\n }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {IRole, ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {isValidEmail, isValidPhone} from '@verdocs/js-sdk/Templates/Validators';\nimport {Component, Prop, State, h, Event, EventEmitter, Host} from '@stencil/core';\nimport {getRoleIndex} from '../../../utils/utils';\nimport {SDKError} from '../../../utils/errors';\n\n// TODO: Evaluating this pattern for simple icons vs. importing external SVG files. Try to standardize on an approach soon.\nconst editIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"></path></svg>';\n\nconst startIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z\"></path></svg>';\n\nconst stepIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"></path></svg>';\n\nconst doneIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z\"></path></svg>';\n\ntype TAnnotatedRole = IRole & {id: string};\n\n/*\n Display a form to collect recipient information for a new Document. If used anonymously, the specified `templateId` must be public.\n * If the user is authenticated\n /\n@Component({\n tag: 'verdocs-send',\n styleUrl: 'verdocs-send.scss',\n shadow: false,\n})\nexport class VerdocsSend {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The ID of the template to create the document from.\n /\n @Prop() templateId: string \| null = null;\n\n /\n The user completed the form and clicked send.\n /\n @Event({composed: true}) send: EventEmitter<{recipientsAssigned: IRole[]}>;\n\n /\n The user canceled the process.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n @State() template: ITemplate \| null = null;\n\n @State() pdfUrl = null;\n\n @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n\n @State() rolesAtLevel: Record<number, TAnnotatedRole[]> = {};\n\n @State() showPickerForId = '';\n\n @State() sessionContacts = [];\n\n @State() recipientsAssigned: Record<string, TAnnotatedRole> = {};\n\n levels: number[] = [];\n\n async componentWillLoad() {\n this.sessionContacts = [];\n try {\n const result = await this.endpoint.loadSession();\n\n if (result.session?.profile) {\n this.sessionContacts.push({\n id: result.session.profile.id,\n name: `${result.session.profile.first_name} ${result.session.profile.last_name}`,\n email: result.session.profile.email,\n phone: result.session.profile.phone,\n });\n }\n } catch (e) {\n console.log('Error loading session', e);\n }\n }\n\n async componentDidLoad() {\n console.log('[SEND] Showing template', this.templateId);\n\n try {\n console.log(`[SEND] Loading template ${this.templateId}`);\n const template = await getTemplate(this.endpoint, this.templateId);\n\n console.log('[SEND] Got template', template);\n this.template = template;\n\n if (template?.roles) {\n const rolesAtLevel: Record<number, TAnnotatedRole[]> = {};\n\n template.roles.forEach(role => {\n const level = role.sequence - 1;\n rolesAtLevel[level] \|\|= [];\n const id = `r-${level}-${rolesAtLevel[level].length}`;\n rolesAtLevel[level].push({...role, id});\n });\n\n this.rolesAtLevel = rolesAtLevel;\n this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);\n this.levels.sort((a, b) => a - b);\n }\n } catch (e) {\n console.log('[SEND] Error getting template', e);\n }\n }\n\n getLevelIcon(level: number) {\n if (level < 0) {\n return <div class=\"level-icon\" innerHTML={startIcon} />;\n } else if (level >= this.levels.length) {\n return <div class=\"level-icon\" innerHTML={doneIcon} />;\n } else {\n return <div class=\"level-icon\" innerHTML={stepIcon} />;\n }\n }\n\n handleSelectContact(e: any, role: TAnnotatedRole) {\n e.preventDefault();\n e.detail; // IContactSelectEvent\n this.recipientsAssigned[role.id] = {...role, ...e.detail};\n this.showPickerForId = '';\n }\n\n handleClickRole(e: any, role: TAnnotatedRole) {\n e.stopPropagation();\n this.showPickerForId = role.id;\n }\n\n handleSend(e) {\n e.stopPropagation();\n this.send?.emit({recipientsAssigned: Object.values(this.recipientsAssigned)});\n }\n\n handleCancel(e) {\n e.stopPropagation();\n this.cancel?.emit();\n }\n\n render() {\n const roleNames = this.template?.roles?.map(role => role.name) \|\| [];\n const allRecipientsAssigned =\n Object.values(this.recipientsAssigned).filter(recipient => {\n console.log('valid email', isValidEmail(recipient.email), recipient.email);\n console.log('valid phone', isValidPhone(recipient.phone), recipient.phone);\n return isValidEmail(recipient.email) \|\| isValidPhone(recipient.phone);\n }).length >= this.template?.roles.length;\n console.log('assigned', allRecipientsAssigned);\n\n return (\n <Host class={{}}>\n <div class=\"recipients\">\n <div class=\"left-line\" />\n <div class={`level level-start`}>\n {this.getLevelIcon(-1)}\n <div class=\"complete\">Send Document</div>\n </div>\n\n {this.levels.map(level => (\n <div class={`level level-${level}`}>\n {this.getLevelIcon(level)}\n\n {this.rolesAtLevel[level].map(role => (\n <div class=\"recipient\" style={{backgroundColor: getRGBA(getRoleIndex(roleNames, role.name))}} onClick={e => this.handleClickRole(e, role)}>\n {this.recipientsAssigned[role.id]?.full_name ?? role.name}\n <div class=\"icon\" innerHTML={editIcon} />\n {this.showPickerForId === role.id && (\n <verdocs-contact-picker\n onCancel={() => (this.showPickerForId = '')}\n contactSuggestions={this.sessionContacts}\n templateRole={this.recipientsAssigned[role.id] ?? role}\n onSearchContacts={e => console.log('Search', e.detail)}\n onContactSelected={e => this.handleSelectContact(e, role)}\n />\n )}\n </div>\n ))}\n </div>\n ))}\n\n <div class={`level level-done`}>\n {this.getLevelIcon(this.levels.length)}\n <div class=\"complete\">Document Complete</div>\n </div>\n </div>\n\n <div class=\"buttons\">\n <verdocs-button label=\"Cancel\" size=\"small\" variant=\"outline\" onPress={e => this.handleCancel(e)} />\n <verdocs-button label=\"Send\" size=\"small\" disabled={!allRecipientsAssigned} onPress={e => this.handleSend(e)} />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-send.entry.js","mappings":"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","names":[],"sources":["./src/components/embeds/verdocs-send/verdocs-send.scss?tag=verdocs-send","./src/components/embeds/verdocs-send/verdocs-send.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-send {\n display: flex;\n padding: 10px;\n position: relative;\n background: #ffffff;\n flex-direction: column;\n font-family: $verdocs-primary-font;\n\n .recipients {\n position: relative;\n }\n\n // To avoid the need to compute things like heights, this layer is simply displayed \"on top\" of all the level rows. Its\n // background obscures the horizontal lines.\n .left-line {\n top: 32px;\n left: 20px;\n z-index: 1;\n width: 12px;\n bottom: 30px;\n position: absolute;\n background: #ffffff;\n border-left: 3px dotted #9b9b9b;\n }\n\n .level {\n display: flex;\n column-gap: 10px;\n margin-left: 50px;\n position: relative;\n flex-direction: row;\n padding: 8px 0 4px 0;\n border-bottom: 1px solid #97979744;\n\n .level-icon {\n top: 14px;\n z-index: 2;\n left: -40px;\n width: 24px;\n height: 24px;\n position: absolute;\n background: #ffffff;\n\n svg {\n fill: #00000089;\n }\n }\n\n .recipient {\n height: 30px;\n display: flex;\n flex: 0 0 30px;\n color: #000000;\n cursor: pointer;\n font-size: 14px;\n align-items: center;\n border-radius: 30px;\n flex-direction: row;\n background: #dddddd;\n white-space: nowrap;\n padding: 2px 10px 2px 14px;\n\n .icon {\n width: 22px;\n height: 22px;\n flex: 0 0 22px;\n margin: 0 0 0 10px;\n\n svg {\n width: 22px;\n height: 22px;\n fill: #333333;\n outline: none;\n }\n }\n }\n\n .complete {\n flex: 1;\n height: 30px;\n display: flex;\n color: #000000;\n font-size: 14px;\n align-items: center;\n flex-direction: row;\n padding: 3px 10px 3px 2px;\n }\n }\n\n .buttons {\n display: flex;\n margin-top: 10px;\n column-gap: 15px;\n flex-direction: row;\n }\n\n verdocs-contact-picker {\n left: 0;\n top: 41px;\n z-index: 10;\n position: absolute;\n border: 1px solid #dddddd;\n box-shadow: 0 0 6px 3px rgb(0 0 0 / 10%);\n }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {IRole, ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {isValidEmail, isValidPhone} from '@verdocs/js-sdk/Templates/Validators';\nimport {Component, Prop, State, h, Event, EventEmitter, Host} from '@stencil/core';\nimport {getRoleIndex} from '../../../utils/utils';\nimport {SDKError} from '../../../utils/errors';\n\n// TODO: Evaluating this pattern for simple icons vs. importing external SVG files. Try to standardize on an approach soon.\nconst editIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"></path></svg>';\n\nconst startIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z\"></path></svg>';\n\nconst stepIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"></path></svg>';\n\nconst doneIcon =\n '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z\"></path></svg>';\n\ntype TAnnotatedRole = IRole & {id: string};\n\n/*\n Display a form to collect recipient information for a new Document. If used anonymously, the specified `templateId` must be public.\n * If the user is authenticated\n /\n@Component({\n tag: 'verdocs-send',\n styleUrl: 'verdocs-send.scss',\n shadow: false,\n})\nexport class VerdocsSend {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The ID of the template to create the document from.\n /\n @Prop() templateId: string \| null = null;\n\n /\n The user completed the form and clicked send.\n /\n @Event({composed: true}) send: EventEmitter<{recipientsAssigned: IRole[]}>;\n\n /\n The user canceled the process.\n /\n @Event({composed: true}) cancel: EventEmitter;\n\n /\n Event fired if an error occurs. The event details will contain information about the error. Most errors will\n * terminate the process, and the calling application should correct the condition and re-render the component.\n */\n @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n @State() template: ITemplate \| null = null;\n\n @State() pdfUrl = null;\n\n @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n\n @State() rolesAtLevel: Record<number, TAnnotatedRole[]> = {};\n\n @State() showPickerForId = '';\n\n @State() sessionContacts = [];\n\n @State() recipientsAssigned: Record<string, TAnnotatedRole> = {};\n\n levels: number[] = [];\n\n async componentWillLoad() {\n this.sessionContacts = [];\n try {\n const result = await this.endpoint.loadSession();\n\n if (result.session?.profile) {\n this.sessionContacts.push({\n id: result.session.profile.id,\n name: `${result.session.profile.first_name} ${result.session.profile.last_name}`,\n email: result.session.profile.email,\n phone: result.session.profile.phone,\n });\n }\n } catch (e) {\n console.log('Error loading session', e);\n }\n }\n\n async componentDidLoad() {\n console.log('[SEND] Showing template', this.templateId);\n\n try {\n console.log(`[SEND] Loading template ${this.templateId}`);\n const template = await getTemplate(this.endpoint, this.templateId);\n\n console.log('[SEND] Got template', template);\n this.template = template;\n\n if (template?.roles) {\n const rolesAtLevel: Record<number, TAnnotatedRole[]> = {};\n\n template.roles.forEach(role => {\n const level = role.sequence - 1;\n rolesAtLevel[level] \|\|= [];\n const id = `r-${level}-${rolesAtLevel[level].length}`;\n rolesAtLevel[level].push({...role, id});\n });\n\n this.rolesAtLevel = rolesAtLevel;\n this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);\n this.levels.sort((a, b) => a - b);\n }\n } catch (e) {\n console.log('[SEND] Error getting template', e);\n }\n }\n\n getLevelIcon(level: number) {\n if (level < 0) {\n return <div class=\"level-icon\" innerHTML={startIcon} />;\n } else if (level >= this.levels.length) {\n return <div class=\"level-icon\" innerHTML={doneIcon} />;\n } else {\n return <div class=\"level-icon\" innerHTML={stepIcon} />;\n }\n }\n\n handleSelectContact(e: any, role: TAnnotatedRole) {\n e.preventDefault();\n e.detail; // IContactSelectEvent\n this.recipientsAssigned[role.id] = {...role, ...e.detail};\n this.showPickerForId = '';\n }\n\n handleClickRole(e: any, role: TAnnotatedRole) {\n e.stopPropagation();\n this.showPickerForId = role.id;\n }\n\n handleSend(e) {\n e.stopPropagation();\n this.send?.emit({recipientsAssigned: Object.values(this.recipientsAssigned)});\n }\n\n handleCancel(e) {\n e.stopPropagation();\n this.cancel?.emit();\n }\n\n render() {\n const roleNames = this.template?.roles?.map(role => role.name) \|\| [];\n const allRecipientsAssigned =\n Object.values(this.recipientsAssigned).filter(recipient => {\n console.log('valid email', isValidEmail(recipient.email), recipient.email);\n console.log('valid phone', isValidPhone(recipient.phone), recipient.phone);\n return isValidEmail(recipient.email) \|\| isValidPhone(recipient.phone);\n }).length >= this.template?.roles.length;\n console.log('assigned', allRecipientsAssigned);\n\n return (\n <Host class={{}}>\n <div class=\"recipients\">\n <div class=\"left-line\" />\n <div class={`level level-start`}>\n {this.getLevelIcon(-1)}\n <div class=\"complete\">Send Document</div>\n </div>\n\n {this.levels.map(level => (\n <div class={`level level-${level}`}>\n {this.getLevelIcon(level)}\n\n {this.rolesAtLevel[level].map(role => (\n <div class=\"recipient\" style={{backgroundColor: getRGBA(getRoleIndex(roleNames, role.name))}} onClick={e => this.handleClickRole(e, role)}>\n {this.recipientsAssigned[role.id]?.full_name ?? role.name}\n <div class=\"icon\" innerHTML={editIcon} />\n {this.showPickerForId === role.id && (\n <verdocs-contact-picker\n onCancel={() => (this.showPickerForId = '')}\n onNext={e => this.handleSelectContact(e, role)}\n contactSuggestions={this.sessionContacts}\n templateRole={this.recipientsAssigned[role.id] ?? role}\n onSearchContacts={e => console.log('Search', e.detail)}\n />\n )}\n </div>\n ))}\n </div>\n ))}\n\n <div class={`level level-done`}>\n {this.getLevelIcon(this.levels.length)}\n <div class=\"complete\">Document Complete</div>\n </div>\n </div>\n\n <div class=\"buttons\">\n <verdocs-button label=\"Cancel\" size=\"small\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n <verdocs-button label=\"Send\" size=\"small\" disabled={!allRecipientsAssigned} onClick={e => this.handleSend(e)} />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}