npm - @verdocs/web-sdk - Versions diffs - 5.0.49 → 5.0.52 - Mend

@verdocs/web-sdk 5.0.49 → 5.0.52

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 (541) hide show

package/dist/components/{p-2b0d2fbd.js.map → p-c04daa8c.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-2b0d2fbd.js","mappings":"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","names":[],"sources":["src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n font-family: $primary-font;\n box-sizing: border-box;\n position: fixed;\n z-index: 10000;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #0000007f;\n\n .dialog {\n width: 100%;\n max-width: 340px;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n background: $dialog-bg;\n }\n\n .heading {\n display: flex;\n flex-direction: row;\n padding: 20px 20px 0 20px;\n line-height: 28px;\n font-size: 20px;\n font-weight: 500;\n }\n\n .content {\n font-size: 14px;\n padding: 20px;\n }\n\n .buttons {\n display: flex;\n margin: 20px 0 0 0;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n\n verdocs-button {\n margin-left: 16px;\n }\n }\n\n canvas {\n background: $verdocs-grey-4;\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, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/*\n Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n /\n@Component({\n tag: 'verdocs-signature-dialog',\n styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n private canvasElement?: HTMLCanvasElement;\n\n /\n Initial signature text\n /\n @Prop() name: string = '';\n\n /\n Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n * representation of the signature adopted.\n /\n @Event({composed: true}) next: EventEmitter<string>;\n\n /\n Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n /\n @Event({composed: true}) exit: EventEmitter;\n\n @State() fontLoaded = false;\n\n @State() enteredName: string = '';\n\n @State() mode: string = 'type';\n\n componentWillLoad() {\n this.enteredName = this.name;\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.enteredName).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.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n }\n\n handleNameChange(e: any) {\n this.enteredName = e.target.value;\n }\n\n handleCancel(e: any) {\n e.stopPropagation();\n e.preventDefault();\n this.exit.emit();\n }\n\n handleAdopt(e: any) {\n e.stopPropagation();\n e.preventDefault();\n const data = this.canvasElement.toDataURL('image/png');\n this.next.emit(data);\n }\n\n /\n selColor(hex: string) {\n this.color = hex;\n this.animateDraw();\n }\n\n stopDraw() {\n this.paint = false;\n this.adoptedAndSigned = !this.hasSignature();\n }\n\n draw(e) {\n this.paint = true;\n this.addPoints(e, false);\n this.animateDraw();\n }\n\n recordPoints(e) {\n if (this.paint) {\n this.addPoints(e, true);\n this.animateDraw();\n }\n }\n\n animateDraw() {\n this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n this.canvas.strokeStyle = this.color \|\| '#000000';\n this.canvas.lineJoin = 'round';\n this.canvas.lineWidth = 3;\n\n for (let i = 0; i < this.points.length; i++) {\n this.canvas.beginPath();\n if (this.points[i].drag && i) {\n this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n } else {\n this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n }\n\n this.canvas.lineTo(this.points[i].x, this.points[i].y);\n this.canvas.closePath();\n this.canvas.stroke();\n }\n }\n\n drawCurve(color: string, curve: number) {\n this.canvas.beginPath();\n }\n\n\n\n addPoints(e, drag: boolean) {\n if (window) {\n let x;\n let y;\n e.preventDefault();\n if (e.touches && e.touches.length > 0) {\n x = e.touches[0].clientX;\n } else {\n x = e.clientX;\n }\n\n if (e.touches && e.touches.length > 0) {\n y = e.touches[0].clientY;\n } else {\n y = e.clientY;\n }\n const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n this.points.push({\n x: x - rect.left,\n y: y - rect.top,\n drag: drag\n });\n }\n }\n\n clearPad() {\n this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n this.points = [];\n this.adoptedAndSigned = !this.hasSignature();\n }\n\n async adoptAndSign() {\n try {\n this.adoptedAndSigned = true;\n await this.updateFullName();\n await this.captureSignatureFromCanvas();\n const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n this.handleMode();\n } catch (err) {\n this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n }\n }\n\n handleMode() {\n let currentField;\n switch (this.mode) {\n case 'signerview':\n if (this.signatureMode === 'Signature') {\n this.signatureService.postSignatureBlob().then(result => {\n if (result && result.id && result.url) {\n currentField = this.signatureService.currField;\n this.signatureService.updateSigned(currentField.fName, true);\n this.signatureService.toggleSig(false);\n this.signatureService.setSignatureId(result.id);\n this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n this.eventTracker.createEvent({\n category: 'verdoc',\n action: 'verdoc signed',\n label: `verdoc id: ${this.envelopeId}`\n })\n if (res && res.settings) {\n this.signatureService.setSignatureData(res.settings.base64);\n this.signatureService.setSignatureId(res.settings.signature_id);\n }\n this.snackbarService.dismiss();\n this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n }).catch(err => {\n this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n duration: 3000\n });\n this.adoptedAndSigned = false;\n return err;\n });\n }\n });\n } else {\n this.signatureService.postInitialBlob().then(result => {\n if (result && result.id && result.url) {\n currentField = this.signatureService.currField;\n this.signatureService.updateInitialed(currentField.fName, true);\n this.signatureService.setInitialId(result.id);\n this.signatureService.toggleSig(false);\n this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n if (res && res.settings) {\n this.signatureService.setInitialData(res.settings.base64);\n this.signatureService.setInitialId(res.settings.initial_id);\n }\n this.snackbarService.dismiss();\n this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n }).catch(err => {\n this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n duration: 3000\n });\n this.adoptedAndSigned = false;\n return err;\n });\n }\n });\n }\n break;\n }\n }\n /\n\n render() {\n return (\n <Host onClick={e => this.handleCancel(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">Create Your Signature</div>\n\n <div class=\"content\">\n <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\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\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-c04daa8c.js","mappings":"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","names":[],"sources":["src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n font-family: $primary-font;\n box-sizing: border-box;\n position: fixed;\n z-index: 10000;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #0000007f;\n\n .dialog {\n width: 100%;\n max-width: 340px;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n background: $dialog-bg;\n }\n\n .heading {\n display: flex;\n flex-direction: row;\n padding: 20px 20px 0 20px;\n line-height: 28px;\n font-size: 20px;\n font-weight: 500;\n }\n\n .content {\n font-size: 14px;\n padding: 20px;\n }\n\n .buttons {\n display: flex;\n margin: 20px 0 0 0;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n\n verdocs-button {\n margin-left: 16px;\n }\n }\n\n canvas {\n background: $verdocs-grey-4;\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, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/*\n Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n /\n@Component({\n tag: 'verdocs-signature-dialog',\n styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n private canvasElement?: HTMLCanvasElement;\n\n /\n Initial signature text\n /\n @Prop() name: string = '';\n\n /\n Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n * representation of the signature adopted.\n /\n @Event({composed: true}) next: EventEmitter<string>;\n\n /\n Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n /\n @Event({composed: true}) exit: EventEmitter;\n\n @State() fontLoaded = false;\n\n @State() enteredName: string = '';\n\n @State() mode: string = 'type';\n\n componentWillLoad() {\n this.enteredName = this.name;\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.enteredName).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.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n }\n\n handleNameChange(e: any) {\n this.enteredName = e.target.value;\n }\n\n handleCancel(e: any) {\n e.stopPropagation();\n e.preventDefault();\n this.exit.emit();\n }\n\n handleAdopt(e: any) {\n e.stopPropagation();\n e.preventDefault();\n const data = this.canvasElement.toDataURL('image/png');\n this.next.emit(data);\n }\n\n /\n selColor(hex: string) {\n this.color = hex;\n this.animateDraw();\n }\n\n stopDraw() {\n this.paint = false;\n this.adoptedAndSigned = !this.hasSignature();\n }\n\n draw(e) {\n this.paint = true;\n this.addPoints(e, false);\n this.animateDraw();\n }\n\n recordPoints(e) {\n if (this.paint) {\n this.addPoints(e, true);\n this.animateDraw();\n }\n }\n\n animateDraw() {\n this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n this.canvas.strokeStyle = this.color \|\| '#000000';\n this.canvas.lineJoin = 'round';\n this.canvas.lineWidth = 3;\n\n for (let i = 0; i < this.points.length; i++) {\n this.canvas.beginPath();\n if (this.points[i].drag && i) {\n this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n } else {\n this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n }\n\n this.canvas.lineTo(this.points[i].x, this.points[i].y);\n this.canvas.closePath();\n this.canvas.stroke();\n }\n }\n\n drawCurve(color: string, curve: number) {\n this.canvas.beginPath();\n }\n\n\n\n addPoints(e, drag: boolean) {\n if (window) {\n let x;\n let y;\n e.preventDefault();\n if (e.touches && e.touches.length > 0) {\n x = e.touches[0].clientX;\n } else {\n x = e.clientX;\n }\n\n if (e.touches && e.touches.length > 0) {\n y = e.touches[0].clientY;\n } else {\n y = e.clientY;\n }\n const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n this.points.push({\n x: x - rect.left,\n y: y - rect.top,\n drag: drag\n });\n }\n }\n\n clearPad() {\n this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n this.points = [];\n this.adoptedAndSigned = !this.hasSignature();\n }\n\n async adoptAndSign() {\n try {\n this.adoptedAndSigned = true;\n await this.updateFullName();\n await this.captureSignatureFromCanvas();\n const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n this.handleMode();\n } catch (err) {\n this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n }\n }\n\n handleMode() {\n let currentField;\n switch (this.mode) {\n case 'signerview':\n if (this.signatureMode === 'Signature') {\n this.signatureService.postSignatureBlob().then(result => {\n if (result && result.id && result.url) {\n currentField = this.signatureService.currField;\n this.signatureService.updateSigned(currentField.fName, true);\n this.signatureService.toggleSig(false);\n this.signatureService.setSignatureId(result.id);\n this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n this.eventTracker.createEvent({\n category: 'verdoc',\n action: 'verdoc signed',\n label: `verdoc id: ${this.envelopeId}`\n })\n if (res && res.settings) {\n this.signatureService.setSignatureData(res.settings.base64);\n this.signatureService.setSignatureId(res.settings.signature_id);\n }\n this.snackbarService.dismiss();\n this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n }).catch(err => {\n this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n duration: 3000\n });\n this.adoptedAndSigned = false;\n return err;\n });\n }\n });\n } else {\n this.signatureService.postInitialBlob().then(result => {\n if (result && result.id && result.url) {\n currentField = this.signatureService.currField;\n this.signatureService.updateInitialed(currentField.fName, true);\n this.signatureService.setInitialId(result.id);\n this.signatureService.toggleSig(false);\n this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n if (res && res.settings) {\n this.signatureService.setInitialData(res.settings.base64);\n this.signatureService.setInitialId(res.settings.initial_id);\n }\n this.snackbarService.dismiss();\n this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n }).catch(err => {\n this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n duration: 3000\n });\n this.adoptedAndSigned = false;\n return err;\n });\n }\n });\n }\n break;\n }\n }\n /\n\n render() {\n return (\n <Host onClick={e => this.handleCancel(e)}>\n <div class=\"dialog\">\n <div class=\"heading\">Create Your Signature</div>\n\n <div class=\"content\">\n <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\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\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-1c5981db.js → p-cd5b046b.js} RENAMED Viewed

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1f51246d.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-20f1beff.js';
 import { VerdocsEndpoint, getEnvelope, getInPersonLink, formatFullName } from '@verdocs/js-sdk';
 import { V as VerdocsToast } from './p-04c07b7b.js';
 import { S as SDKError } from './p-fd97809c.js';
 import { S as Store } from './p-33300e3a.js';
-import { d as defineCustomElement$1 } from './p-f5ccf125.js';
+import { d as defineCustomElement$1 } from './p-77b37d23.js';
 const verdocsEnvelopeRecipientLinkCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-envelope-recipient-link{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:100000;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-family:\"Inter\", \"Barlow\", sans-serif;background-color:rgba(0, 0, 0, 0.4980392157)}verdocs-envelope-recipient-link .summary-content{width:600px;display:-ms-flexbox;display:flex;max-width:90%;font-size:18px;-ms-flex:0 0 600px;flex:0 0 600px;border-radius:6px;background:#ffffff;-ms-flex-direction:column;flex-direction:column;padding:30px 20px 20px}verdocs-envelope-recipient-link .summary-content .summary-title{font-size:20px;font-weight:700;margin:0 0 10px 0;color:#33364b}verdocs-envelope-recipient-link .summary-recipient{display:-ms-flexbox;display:flex;color:#33364b;margin:8px 0 24px 0;-ms-flex-direction:column;flex-direction:column}verdocs-envelope-recipient-link .summary-recipient .role-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin:0 0 8px 0;color:#092c4c}verdocs-envelope-recipient-link .summary-recipient .role-info{gap:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end}verdocs-envelope-recipient-link .summary-recipient .role-full-name{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:rgb(249, 250, 251)}verdocs-envelope-recipient-link .summary-recipient .recipient-link{width:120px;padding:0 16px;font-weight:500;margin:0 0 0 8px;text-align:center;font-size:0.875rem;border-radius:100%;color:rgb(55, 65, 81);line-height:1.25rem;background-color:#d8d8d8;border:2px solid rgb(156, 163, 175)}verdocs-envelope-recipient-link .summary-recipient .link-wrapper{gap:5px;display:-ms-flexbox;display:flex;margin:4px 0 0 0;-ms-flex-direction:row;flex-direction:row}verdocs-envelope-recipient-link .summary-recipient .link-wrapper .link{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;overflow:hidden;margin:0 6px 0 0;border-radius:4px;white-space:nowrap;-ms-flex-align:center;align-items:center;text-overflow:ellipsis;border:1px solid #cccccc;background:rgb(249, 250, 251)}verdocs-envelope-recipient-link .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:10px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-envelope-recipient-link .buttons verdocs-button{-ms-flex:0 0 120px;flex:0 0 120px;margin-left:10px;white-space:nowrap}verdocs-envelope-recipient-link .buttons verdocs-button button{width:100%}";
 const VerdocsEnvelopeRecipientLinkStyle0 = verdocsEnvelopeRecipientLinkCss;
@@ -145,4 +145,4 @@ function defineCustomElement() {
 export { VerdocsEnvelopeRecipientLink as V, defineCustomElement as d };
-//# sourceMappingURL=p-1c5981db.js.map
+//# sourceMappingURL=p-cd5b046b.js.map

package/dist/components/{p-1c5981db.js.map → p-cd5b046b.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-1c5981db.js","mappings":"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","names":[],"sources":["src/components/envelopes/verdocs-envelope-recipient-link/verdocs-envelope-recipient-link.scss?tag=verdocs-envelope-recipient-link","src/components/envelopes/verdocs-envelope-recipient-link/verdocs-envelope-recipient-link.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-envelope-recipient-link {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n z-index: 100000;\n position: fixed;\n align-items: center;\n justify-content: center;\n font-family: $primary-font;\n background-color: #0000007f;\n\n .summary-content {\n width: 600px;\n display: flex;\n max-width: 90%;\n font-size: 18px;\n flex: 0 0 600px;\n border-radius: 6px;\n background: #ffffff;\n flex-direction: column;\n padding: 30px 20px 20px;\n\n .summary-title {\n font-size: 20px;\n font-weight: 700;\n margin: 0 0 10px 0;\n color: $verdocs-dark-blue;\n }\n }\n\n .summary-recipient {\n display: flex;\n color: $verdocs-grey-1;\n margin: 8px 0 24px 0;\n flex-direction: column;\n\n .role-name {\n flex: 1;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n margin: 0 0 8px 0;\n color: $verdocs-grey-0;\n }\n\n .role-details {\n }\n\n .role-info {\n gap: 5px;\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n }\n\n .role-full-name {\n flex: 1;\n height: 34px;\n display: flex;\n font-size: 16px;\n padding: 0 12px;\n border-radius: 4px;\n align-items: center;\n border: 1px solid #cccccc;\n background: rgb(249, 250, 251);\n }\n\n .recipient-link {\n width: 120px;\n padding: 0 16px;\n font-weight: 500;\n margin: 0 0 0 8px;\n text-align: center;\n font-size: 0.875rem;\n border-radius: 100%;\n color: rgb(55, 65, 81);\n line-height: 1.25rem;\n background-color: #d8d8d8;\n border: 2px solid rgb(156, 163, 175);\n }\n\n .link-wrapper {\n gap: 5px;\n display: flex;\n margin: 4px 0 0 0;\n flex-direction: row;\n\n .link {\n flex: 1;\n height: 34px;\n display: flex;\n font-size: 16px;\n padding: 0 12px;\n overflow: hidden;\n margin: 0 6px 0 0;\n border-radius: 4px;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n border: 1px solid #cccccc;\n background: rgb(249, 250, 251);\n }\n }\n }\n\n .buttons {\n display: flex;\n column-gap: 15px;\n margin: 10px 0 0 0;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n\n verdocs-button {\n flex: 0 0 120px;\n margin-left: 10px;\n white-space: nowrap;\n\n button {\n width: 100%;\n }\n }\n }\n}\n","import {Component, Prop, Host, h, State, Event, EventEmitter} from '@stencil/core';\nimport {formatFullName, getEnvelope, getInPersonLink, IEnvelope, IRecipient, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\n/*\n Displays a single recipient from an envelope, with the opportunity to copy an in-person\n * signing link for that recipient to use.\n /\n@Component({\n tag: 'verdocs-envelope-recipient-link',\n styleUrl: 'verdocs-envelope-recipient-link.scss',\n})\nexport class VerdocsEnvelopeRecipientLink {\n private envelopeListenerId = null;\n\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 envelope ID to edit.\n /\n @Prop() envelopeId: string = '';\n\n /\n The role to load.\n /\n @Prop() roleName: string = '';\n\n /\n Event fired when the user clicks Done to proceed. It is up to the host application\n * to redirect the user to the appropriate next workflow step.\n /\n @Event({composed: true}) next: EventEmitter<{envelope: IEnvelope}>;\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() isOpen: boolean;\n @State() gettingLink = true;\n @State() link = '';\n\n @State() loading = true;\n @State() envelope: IEnvelope \| null = null;\n @State() recipient: IRecipient \| null = null;\n\n async componentWillLoad() {\n try {\n this.endpoint.loadSession();\n\n if (!this.envelopeId) {\n console.log(`[RECIPIENT_LINK] Missing required envelope ID ${this.envelopeId}`);\n return;\n }\n\n if (!this.endpoint.session) {\n console.log('[RECIPIENT_LINK] Unable to start session, must be authenticated');\n return;\n }\n\n this.listenToEnvelope();\n } catch (e) {\n console.log('[RECIPIENT_LINK] Error loading envelope', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n disconnectedCallback() {\n this.unlistenToEnvelope();\n }\n\n async listenToEnvelope() {\n console.log('[SIDEBAR] Loading envelope', this.envelopeId);\n this.unlistenToEnvelope();\n Store.subscribe(\n 'envelopes',\n this.envelopeId,\n () => getEnvelope(this.endpoint, this.envelopeId),\n false,\n (envelope: IEnvelope) => {\n this.envelope = envelope;\n this.loading = false;\n\n this.recipient = (this.envelope?.recipients \|\| []).find(r => r.role_name === this.roleName);\n this.getLink(this.recipient);\n },\n );\n }\n\n unlistenToEnvelope() {\n if (this.envelopeListenerId) {\n Store.store.delListener(this.envelopeListenerId);\n this.envelopeListenerId = null;\n }\n }\n\n handleDone(e: any) {\n e.preventDefault();\n this.next?.emit({envelope: this.envelope});\n }\n\n copyLink(link: string) {\n navigator.clipboard\n .writeText(link)\n .then(() => VerdocsToast('Link copied to clipboard!', {style: 'success', duration: 3000}))\n .catch(e => {\n console.warn('[RECIPIENT_LINK] Error copying to clipboard', e);\n VerdocsToast(`Unable to copy to clipboard: ${e.message}`, {style: 'error'});\n });\n }\n\n getLink(recipient: IRecipient) {\n this.gettingLink = true;\n getInPersonLink(this.endpoint, recipient.envelope_id, recipient.role_name)\n .then(response => {\n this.gettingLink = false;\n this.link = response.link;\n // NOTE: Left here for documentation purposes. We don't auto-copy the link because many browsers now\n // error on that because we aren't the focus/gesture-initiator since we're a new component just being\n // drawn in the DOM. So we let the user click to trigger that.\n // this.copyLink(response.link);\n })\n .catch(e => {\n this.gettingLink = false;\n console.log('[RECIPIENT_LINK] Error getting link', e);\n VerdocsToast('Unable to get link: ' + e.message, {style: 'error'});\n });\n }\n\n render() {\n if (this.loading \|\| !this.recipient) {\n return <Host />;\n }\n\n // const recipientsWithActions = getRecipientsWithActions(this.store.state); const showLinkButton = recipientCanAct(recipient, recipientsWithActions); const link =\n // this.links[recipient.role_name]; const gettingLink = this.gettingLinks[recipient.role_name]; return (\n\n const fullName = formatFullName(this.recipient);\n return (\n <Host>\n <div class=\"summary-content\">\n <h1 class=\"summary-title\">In-Person Signing Link</h1>\n <div class=\"summary-rows\">\n <div class=\"summary-recipient\">\n <div class=\"role-name\">{this.recipient.role_name}</div>\n <div class=\"role-details\">\n <div class=\"role-info\">\n <div class=\"role-full-name\">\n {fullName} ({this.recipient.email \|\| this.recipient.phone})\n </div>\n {!this.link && (\n <verdocs-button\n size=\"small\"\n variant=\"outline\"\n label={this.gettingLink ? 'Loading...' : 'Get Link'}\n disabled={this.gettingLink}\n onClick={() => this.getLink(this.recipient)}\n />\n )}\n </div>\n\n {this.link && (\n <div class=\"link-wrapper\">\n <div class=\"link\">{this.link}</div>\n <verdocs-button size=\"small\" variant=\"outline\" label=\"Copy\" onClick={() => this.copyLink(this.link)} />\n </div>\n )}\n </div>\n </div>\n </div>\n\n <div class=\"buttons\">\n <verdocs-button size=\"small\" label=\"Done\" onClick={e => this.handleDone(e)} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-cd5b046b.js","mappings":"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","names":[],"sources":["src/components/envelopes/verdocs-envelope-recipient-link/verdocs-envelope-recipient-link.scss?tag=verdocs-envelope-recipient-link","src/components/envelopes/verdocs-envelope-recipient-link/verdocs-envelope-recipient-link.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-envelope-recipient-link {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n z-index: 100000;\n position: fixed;\n align-items: center;\n justify-content: center;\n font-family: $primary-font;\n background-color: #0000007f;\n\n .summary-content {\n width: 600px;\n display: flex;\n max-width: 90%;\n font-size: 18px;\n flex: 0 0 600px;\n border-radius: 6px;\n background: #ffffff;\n flex-direction: column;\n padding: 30px 20px 20px;\n\n .summary-title {\n font-size: 20px;\n font-weight: 700;\n margin: 0 0 10px 0;\n color: $verdocs-dark-blue;\n }\n }\n\n .summary-recipient {\n display: flex;\n color: $verdocs-grey-1;\n margin: 8px 0 24px 0;\n flex-direction: column;\n\n .role-name {\n flex: 1;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n margin: 0 0 8px 0;\n color: $verdocs-grey-0;\n }\n\n .role-details {\n }\n\n .role-info {\n gap: 5px;\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n }\n\n .role-full-name {\n flex: 1;\n height: 34px;\n display: flex;\n font-size: 16px;\n padding: 0 12px;\n border-radius: 4px;\n align-items: center;\n border: 1px solid #cccccc;\n background: rgb(249, 250, 251);\n }\n\n .recipient-link {\n width: 120px;\n padding: 0 16px;\n font-weight: 500;\n margin: 0 0 0 8px;\n text-align: center;\n font-size: 0.875rem;\n border-radius: 100%;\n color: rgb(55, 65, 81);\n line-height: 1.25rem;\n background-color: #d8d8d8;\n border: 2px solid rgb(156, 163, 175);\n }\n\n .link-wrapper {\n gap: 5px;\n display: flex;\n margin: 4px 0 0 0;\n flex-direction: row;\n\n .link {\n flex: 1;\n height: 34px;\n display: flex;\n font-size: 16px;\n padding: 0 12px;\n overflow: hidden;\n margin: 0 6px 0 0;\n border-radius: 4px;\n white-space: nowrap;\n align-items: center;\n text-overflow: ellipsis;\n border: 1px solid #cccccc;\n background: rgb(249, 250, 251);\n }\n }\n }\n\n .buttons {\n display: flex;\n column-gap: 15px;\n margin: 10px 0 0 0;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n\n verdocs-button {\n flex: 0 0 120px;\n margin-left: 10px;\n white-space: nowrap;\n\n button {\n width: 100%;\n }\n }\n }\n}\n","import {Component, Prop, Host, h, State, Event, EventEmitter} from '@stencil/core';\nimport {formatFullName, getEnvelope, getInPersonLink, IEnvelope, IRecipient, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\n/*\n Displays a single recipient from an envelope, with the opportunity to copy an in-person\n * signing link for that recipient to use.\n /\n@Component({\n tag: 'verdocs-envelope-recipient-link',\n styleUrl: 'verdocs-envelope-recipient-link.scss',\n})\nexport class VerdocsEnvelopeRecipientLink {\n private envelopeListenerId = null;\n\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 envelope ID to edit.\n /\n @Prop() envelopeId: string = '';\n\n /\n The role to load.\n /\n @Prop() roleName: string = '';\n\n /\n Event fired when the user clicks Done to proceed. It is up to the host application\n * to redirect the user to the appropriate next workflow step.\n /\n @Event({composed: true}) next: EventEmitter<{envelope: IEnvelope}>;\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() isOpen: boolean;\n @State() gettingLink = true;\n @State() link = '';\n\n @State() loading = true;\n @State() envelope: IEnvelope \| null = null;\n @State() recipient: IRecipient \| null = null;\n\n async componentWillLoad() {\n try {\n this.endpoint.loadSession();\n\n if (!this.envelopeId) {\n console.log(`[RECIPIENT_LINK] Missing required envelope ID ${this.envelopeId}`);\n return;\n }\n\n if (!this.endpoint.session) {\n console.log('[RECIPIENT_LINK] Unable to start session, must be authenticated');\n return;\n }\n\n this.listenToEnvelope();\n } catch (e) {\n console.log('[RECIPIENT_LINK] Error loading envelope', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n disconnectedCallback() {\n this.unlistenToEnvelope();\n }\n\n async listenToEnvelope() {\n console.log('[SIDEBAR] Loading envelope', this.envelopeId);\n this.unlistenToEnvelope();\n Store.subscribe(\n 'envelopes',\n this.envelopeId,\n () => getEnvelope(this.endpoint, this.envelopeId),\n false,\n (envelope: IEnvelope) => {\n this.envelope = envelope;\n this.loading = false;\n\n this.recipient = (this.envelope?.recipients \|\| []).find(r => r.role_name === this.roleName);\n this.getLink(this.recipient);\n },\n );\n }\n\n unlistenToEnvelope() {\n if (this.envelopeListenerId) {\n Store.store.delListener(this.envelopeListenerId);\n this.envelopeListenerId = null;\n }\n }\n\n handleDone(e: any) {\n e.preventDefault();\n this.next?.emit({envelope: this.envelope});\n }\n\n copyLink(link: string) {\n navigator.clipboard\n .writeText(link)\n .then(() => VerdocsToast('Link copied to clipboard!', {style: 'success', duration: 3000}))\n .catch(e => {\n console.warn('[RECIPIENT_LINK] Error copying to clipboard', e);\n VerdocsToast(`Unable to copy to clipboard: ${e.message}`, {style: 'error'});\n });\n }\n\n getLink(recipient: IRecipient) {\n this.gettingLink = true;\n getInPersonLink(this.endpoint, recipient.envelope_id, recipient.role_name)\n .then(response => {\n this.gettingLink = false;\n this.link = response.link;\n // NOTE: Left here for documentation purposes. We don't auto-copy the link because many browsers now\n // error on that because we aren't the focus/gesture-initiator since we're a new component just being\n // drawn in the DOM. So we let the user click to trigger that.\n // this.copyLink(response.link);\n })\n .catch(e => {\n this.gettingLink = false;\n console.log('[RECIPIENT_LINK] Error getting link', e);\n VerdocsToast('Unable to get link: ' + e.message, {style: 'error'});\n });\n }\n\n render() {\n if (this.loading \|\| !this.recipient) {\n return <Host />;\n }\n\n // const recipientsWithActions = getRecipientsWithActions(this.store.state); const showLinkButton = recipientCanAct(recipient, recipientsWithActions); const link =\n // this.links[recipient.role_name]; const gettingLink = this.gettingLinks[recipient.role_name]; return (\n\n const fullName = formatFullName(this.recipient);\n return (\n <Host>\n <div class=\"summary-content\">\n <h1 class=\"summary-title\">In-Person Signing Link</h1>\n <div class=\"summary-rows\">\n <div class=\"summary-recipient\">\n <div class=\"role-name\">{this.recipient.role_name}</div>\n <div class=\"role-details\">\n <div class=\"role-info\">\n <div class=\"role-full-name\">\n {fullName} ({this.recipient.email \|\| this.recipient.phone})\n </div>\n {!this.link && (\n <verdocs-button\n size=\"small\"\n variant=\"outline\"\n label={this.gettingLink ? 'Loading...' : 'Get Link'}\n disabled={this.gettingLink}\n onClick={() => this.getLink(this.recipient)}\n />\n )}\n </div>\n\n {this.link && (\n <div class=\"link-wrapper\">\n <div class=\"link\">{this.link}</div>\n <verdocs-button size=\"small\" variant=\"outline\" label=\"Copy\" onClick={() => this.copyLink(this.link)} />\n </div>\n )}\n </div>\n </div>\n </div>\n\n <div class=\"buttons\">\n <verdocs-button size=\"small\" label=\"Done\" onClick={e => this.handleDone(e)} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-7f6c97d5.js → p-cd8c3571.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-1f51246d.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-20f1beff.js';
 const verdocsLoaderCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-loader{display:block;position:absolute;top:50%;left:50%;margin-left:-20px;margin-top:-20px;font-size:24px;width:24px;height:24px;border-radius:50%;text-indent:-9999em;-webkit-animation:load5 1.1s infinite ease;animation:verdocs-loader-kf 1.1s infinite ease;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}@-webkit-keyframes verdocs-loader-kf{0%,100%{-webkit-box-shadow:0em -2.6em 0em 0em #aaaaaa, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.3), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4);box-shadow:0em -2.6em 0em 0em #aaaaaa, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.3), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4)}12.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.4), 1.8em -1.8em 0 0em #aaaaaa, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.4), 1.8em -1.8em 0 0em #aaaaaa, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3)}25%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.3), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4), 2.5em 0em 0 0em #aaaaaa, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.3), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4), 2.5em 0em 0 0em #aaaaaa, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}37.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3), 2.5em 0em 0 0em rgba(0, 0, 0, 0.4), 1.75em 1.75em 0 0em #aaaaaa, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3), 2.5em 0em 0 0em rgba(0, 0, 0, 0.4), 1.75em 1.75em 0 0em #aaaaaa, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}50%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.3), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.4), 0em 2.5em 0 0em #aaaaaa, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.3), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.4), 0em 2.5em 0 0em #aaaaaa, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}62.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.3), 0em 2.5em 0 0em rgba(0, 0, 0, 0.4), -1.8em 1.8em 0 0em #aaaaaa, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.3), 0em 2.5em 0 0em rgba(0, 0, 0, 0.4), -1.8em 1.8em 0 0em #aaaaaa, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}75%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.3), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.4), -2.6em 0em 0 0em #aaaaaa, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.3), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.4), -2.6em 0em 0 0em #aaaaaa, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}87.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.3), -2.6em 0em 0 0em rgba(0, 0, 0, 0.4), -1.8em -1.8em 0 0em #aaaaaa;box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.3), -2.6em 0em 0 0em rgba(0, 0, 0, 0.4), -1.8em -1.8em 0 0em #aaaaaa}}@keyframes verdocs-loader-kf{0%,100%{-webkit-box-shadow:0em -2.6em 0em 0em #aaaaaa, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.3), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4);box-shadow:0em -2.6em 0em 0em #aaaaaa, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.3), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4)}12.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.4), 1.8em -1.8em 0 0em #aaaaaa, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.4), 1.8em -1.8em 0 0em #aaaaaa, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3)}25%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.3), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4), 2.5em 0em 0 0em #aaaaaa, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.3), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4), 2.5em 0em 0 0em #aaaaaa, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}37.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3), 2.5em 0em 0 0em rgba(0, 0, 0, 0.4), 1.75em 1.75em 0 0em #aaaaaa, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3), 2.5em 0em 0 0em rgba(0, 0, 0, 0.4), 1.75em 1.75em 0 0em #aaaaaa, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}50%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.3), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.4), 0em 2.5em 0 0em #aaaaaa, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.3), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.4), 0em 2.5em 0 0em #aaaaaa, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}62.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.3), 0em 2.5em 0 0em rgba(0, 0, 0, 0.4), -1.8em 1.8em 0 0em #aaaaaa, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.3), 0em 2.5em 0 0em rgba(0, 0, 0, 0.4), -1.8em 1.8em 0 0em #aaaaaa, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}75%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.3), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.4), -2.6em 0em 0 0em #aaaaaa, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.3), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.4), -2.6em 0em 0 0em #aaaaaa, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2)}87.5%{-webkit-box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.3), -2.6em 0em 0 0em rgba(0, 0, 0, 0.4), -1.8em -1.8em 0 0em #aaaaaa;box-shadow:0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.3), -2.6em 0em 0 0em rgba(0, 0, 0, 0.4), -1.8em -1.8em 0 0em #aaaaaa}}";
 const VerdocsLoaderStyle0 = verdocsLoaderCss;
@@ -29,4 +29,4 @@ function defineCustomElement() {
 export { VerdocsLoader as V, defineCustomElement as d };
-//# sourceMappingURL=p-7f6c97d5.js.map
+//# sourceMappingURL=p-cd8c3571.js.map

package/dist/components/{p-7f6c97d5.js.map → p-cd8c3571.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~7f6c97d5~~.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,m9UAAm9U,CAAC;AAC7+U,4BAAe,gBAAgB;;MCalB,aAAa;;;;;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;KACjB;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-loader/verdocs-loader.scss?tag=verdocs-loader","src/components/controls/verdocs-loader/verdocs-loader.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-loader {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n margin-left: -20px;\n margin-top: -20px;\n font-size: 24px;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n text-indent: -9999em;\n -webkit-animation: load5 1.1s infinite ease;\n animation: verdocs-loader-kf 1.1s infinite ease;\n -webkit-transform: translateZ(0);\n -ms-transform: translateZ(0);\n transform: translateZ(0);\n}\n\n@keyframes verdocs-loader-kf {\n 0%,\n 100% {\n box-shadow: 0em -2.6em 0em 0em $verdocs-bg-2, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.3), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4);\n }\n 12.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.4), 1.8em -1.8em 0 0em $verdocs-bg-2, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3);\n }\n 25% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.3), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4), 2.5em 0em 0 0em $verdocs-bg-2, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 37.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3), 2.5em 0em 0 0em rgba(0, 0, 0, 0.4), 1.75em 1.75em 0 0em $verdocs-bg-2,\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 50% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.3), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.4),\n 0em 2.5em 0 0em $verdocs-bg-2, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 62.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.3),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.4), -1.8em 1.8em 0 0em $verdocs-bg-2, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 75% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.3), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.4), -2.6em 0em 0 0em $verdocs-bg-2, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 87.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.3), -2.6em 0em 0 0em rgba(0, 0, 0, 0.4), -1.8em -1.8em 0 0em $verdocs-bg-2;\n }\n}\n","import {Component, h, Host} from '@stencil/core';\n\n/*\n Animated loader placeholder. There are currently no configuration options for this control.\n \n ```ts\n * <verdocs-loader />\n * ```\n */\n@Component({\n tag: 'verdocs-loader',\n styleUrl: 'verdocs-loader.scss',\n shadow: false,\n})\nexport class VerdocsLoader {\n render() {\n return <Host />;\n }\n}\n"],"version":3}
1	+ {"file":"p-cd8c3571.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,m9UAAm9U,CAAC;AAC7+U,4BAAe,gBAAgB;;MCalB,aAAa;;;;;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;KACjB;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-loader/verdocs-loader.scss?tag=verdocs-loader","src/components/controls/verdocs-loader/verdocs-loader.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-loader {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n margin-left: -20px;\n margin-top: -20px;\n font-size: 24px;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n text-indent: -9999em;\n -webkit-animation: load5 1.1s infinite ease;\n animation: verdocs-loader-kf 1.1s infinite ease;\n -webkit-transform: translateZ(0);\n -ms-transform: translateZ(0);\n transform: translateZ(0);\n}\n\n@keyframes verdocs-loader-kf {\n 0%,\n 100% {\n box-shadow: 0em -2.6em 0em 0em $verdocs-bg-2, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.3), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4);\n }\n 12.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.4), 1.8em -1.8em 0 0em $verdocs-bg-2, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3);\n }\n 25% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.3), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4), 2.5em 0em 0 0em $verdocs-bg-2, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 37.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3), 2.5em 0em 0 0em rgba(0, 0, 0, 0.4), 1.75em 1.75em 0 0em $verdocs-bg-2,\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 50% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.3), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.4),\n 0em 2.5em 0 0em $verdocs-bg-2, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 62.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.3),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.4), -1.8em 1.8em 0 0em $verdocs-bg-2, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 75% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.3), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.4), -2.6em 0em 0 0em $verdocs-bg-2, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n }\n 87.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.3), -2.6em 0em 0 0em rgba(0, 0, 0, 0.4), -1.8em -1.8em 0 0em $verdocs-bg-2;\n }\n}\n","import {Component, h, Host} from '@stencil/core';\n\n/*\n Animated loader placeholder. There are currently no configuration options for this control.\n \n ```ts\n * <verdocs-loader />\n * ```\n */\n@Component({\n tag: 'verdocs-loader',\n styleUrl: 'verdocs-loader.scss',\n shadow: false,\n})\nexport class VerdocsLoader {\n render() {\n return <Host />;\n }\n}\n"],"version":3}

package/dist/components/{p-83ecee53.js → p-d16c9dd7.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1f51246d.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-20f1beff.js';
 import { VerdocsEndpoint, getEnvelopeDocumentPageDisplayUri } from '@verdocs/js-sdk';
 import { t as throttle } from './p-af5ecc92.js';
@@ -107,7 +107,7 @@ const VerdocsEnvelopeDocumentPage = /*@__PURE__*/ proxyCustomElement(class Verdo
     }
     render() {
         const height = `${this.renderedHeight}px`;
-        return (h(Host, { key: 'cca4f6b0c00556a1662ee175292d59b249b17604', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+        return (h(Host, { key: '52fea0a651da570fe851a27db144ae889c4301ad', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
                 // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
                 // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
                 // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
@@ -158,4 +158,4 @@ function defineCustomElement() {
 export { VerdocsEnvelopeDocumentPage as V, defineCustomElement as d };
-//# sourceMappingURL=p-83ecee53.js.map
+//# sourceMappingURL=p-d16c9dd7.js.map

package/dist/components/{p-83ecee53.js.map → p-d16c9dd7.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-83ecee53.js","mappings":"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","names":[],"sources":["src/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.scss?tag=verdocs-envelope-document-page","src/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-envelope-document-page {\n width: 100%;\n position: relative;\n\n .verdocs-envelope-document-page-layer {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n box-shadow: 0 0 10px 5px #0000000f;\n\n &.img {\n width: 100%;\n }\n }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getEnvelopeDocumentPageDisplayUri, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {throttle} from '../../../utils/utils';\n\n/*\n Represents one document page. This is primarily a layout container used to coordinate positions of\n * page-related layers such as the page itself, signature fields, etc. It is not intended to be used\n * on its own as an individual component.\n /\n@Component({\n tag: 'verdocs-envelope-document-page',\n styleUrl: 'verdocs-envelope-document-page.scss',\n shadow: false,\n})\nexport class VerdocsEnvelopeDocumentPage {\n @Element() container: HTMLElement;\n private resizeObserver: ResizeObserver;\n\n /\n The endpoint to load from.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The ID of the envelope the document is for.\n /\n @Prop() envelopeId: string = '';\n\n /\n The ID of the document to display.\n /\n @Prop() documentId: string = '';\n\n /\n The page number being rendered. (Reminder: page numbers are 1-based.)\n /\n @Prop() pageNumber: number = 1;\n\n /\n The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n * the aspect ratio of the final rendered element when scaling up/down.\n /\n @Prop() virtualWidth: number = 612;\n\n /\n The \"virtual\" height of the page canvas. Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n * the aspect ratio of the final rendered element when scaling up/down.\n /\n @Prop({mutable: true}) virtualHeight: number = 792;\n\n /\n The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n * if `pages` was ['page', 'fields'] the structure will be:\n \n ```\n * <div id=\"verdocs-envelope-document-page-ker2fr1p9\">\n * <div id=\"verdocs-envelope-document-page-ker2fr1p9-page\"></div>\n * <div id=\"verdocs-envelope-document-page-ker2fr1p9-fields\"></div>\n * </div>\n * ```\n /\n @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n @Prop() type: 'original' \| 'filled' \| 'certificate' = 'original';\n\n /\n Fired when a page has been rendered. This is also fired when the page is resized.\n /\n @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n @State() containerId = `verdocs-envelope-document-page-${Math.random().toString(36).substring(2, 11)}`;\n\n @State() renderedWidth: number = this.virtualWidth;\n @State() renderedHeight: number = this.virtualHeight;\n @State() naturalWidth: number = this.virtualWidth;\n @State() naturalHeight: number = this.virtualHeight;\n @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n\n @State() skipFirstNotification = true;\n\n @State() pageDisplayUri = 'https://verdocs-public-assets.s3.amazonaws.com/page-loading-placeholder.png';\n\n async componentWillLoad() {\n this.pageDisplayUri = await getEnvelopeDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber, this.type);\n }\n\n componentDidLoad() {\n this.resizeObserver = new ResizeObserver(\n throttle(entries => {\n for (const entry of entries) {\n const renderedWidth = entry.contentRect.width;\n this.renderedWidth = renderedWidth;\n this.renderedHeight = this.virtualHeight (renderedWidth / this.virtualWidth);\n }\n\n this.notifyRenderedSize();\n }, 100),\n );\n\n this.resizeObserver.observe(this.container);\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.\n // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.\n // componentDidRender() {\n // this.notifyRenderedSize();\n // }\n\n notifyRenderedSize() {\n // We skip one notification because by default we will always get at least two, one when rendering the initial size\n // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.\n if (this.skipFirstNotification) {\n this.skipFirstNotification = false;\n return;\n }\n\n this.pageRendered.emit({\n // container: this.container,\n containerId: this.containerId,\n documentId: this.documentId,\n pageNumber: this.pageNumber,\n virtualWidth: this.virtualWidth,\n virtualHeight: this.virtualHeight,\n renderedWidth: this.renderedWidth,\n renderedHeight: this.renderedHeight,\n naturalWidth: this.naturalWidth,\n naturalHeight: this.naturalHeight,\n aspectRatio: this.aspectRatio,\n xScale: this.renderedWidth / this.virtualWidth,\n yScale: this.renderedHeight / this.virtualHeight,\n });\n }\n\n render() {\n const height = `${this.renderedHeight}px`;\n\n return (\n <Host id={`${this.containerId}`} style={{height, flex: `0 0 ${height}`}}>\n {this.layers.map(layer =>\n layer.type === 'div' ? (\n <div class=\"verdocs-envelope-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}} />\n ) : this.pageDisplayUri ? (\n <img\n class=\"verdocs-envelope-document-page-layer img\"\n id={`${this.containerId}-${layer.name}`}\n src={this.pageDisplayUri}\n alt={`Page ${this.pageNumber}`}\n aria-hidden={true}\n loading=\"lazy\"\n onLoad={(e: any) => {\n // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that\n // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).\n // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values\n // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the\n // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the\n // aspect ratio to adjust the \"virtual\" height in case the page is not 8.5\"x11\".\n // TODO: Store this in the DB with each page.\n this.naturalWidth = e.target.naturalWidth;\n this.naturalHeight = e.target.naturalHeight;\n this.aspectRatio = this.naturalWidth / this.naturalHeight;\n this.virtualHeight = this.virtualWidth / this.aspectRatio;\n this.renderedHeight = e.target.offsetWidth / this.aspectRatio;\n }}\n />\n ) : (\n <div></div>\n ),\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-d16c9dd7.js","mappings":"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","names":[],"sources":["src/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.scss?tag=verdocs-envelope-document-page","src/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-envelope-document-page {\n width: 100%;\n position: relative;\n\n .verdocs-envelope-document-page-layer {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n box-shadow: 0 0 10px 5px #0000000f;\n\n &.img {\n width: 100%;\n }\n }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getEnvelopeDocumentPageDisplayUri, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {throttle} from '../../../utils/utils';\n\n/*\n Represents one document page. This is primarily a layout container used to coordinate positions of\n * page-related layers such as the page itself, signature fields, etc. It is not intended to be used\n * on its own as an individual component.\n /\n@Component({\n tag: 'verdocs-envelope-document-page',\n styleUrl: 'verdocs-envelope-document-page.scss',\n shadow: false,\n})\nexport class VerdocsEnvelopeDocumentPage {\n @Element() container: HTMLElement;\n private resizeObserver: ResizeObserver;\n\n /\n The endpoint to load from.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The ID of the envelope the document is for.\n /\n @Prop() envelopeId: string = '';\n\n /\n The ID of the document to display.\n /\n @Prop() documentId: string = '';\n\n /\n The page number being rendered. (Reminder: page numbers are 1-based.)\n /\n @Prop() pageNumber: number = 1;\n\n /\n The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n * the aspect ratio of the final rendered element when scaling up/down.\n /\n @Prop() virtualWidth: number = 612;\n\n /\n The \"virtual\" height of the page canvas. Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n * the aspect ratio of the final rendered element when scaling up/down.\n /\n @Prop({mutable: true}) virtualHeight: number = 792;\n\n /\n The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n * if `pages` was ['page', 'fields'] the structure will be:\n \n ```\n * <div id=\"verdocs-envelope-document-page-ker2fr1p9\">\n * <div id=\"verdocs-envelope-document-page-ker2fr1p9-page\"></div>\n * <div id=\"verdocs-envelope-document-page-ker2fr1p9-fields\"></div>\n * </div>\n * ```\n /\n @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n @Prop() type: 'original' \| 'filled' \| 'certificate' = 'original';\n\n /\n Fired when a page has been rendered. This is also fired when the page is resized.\n /\n @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n @State() containerId = `verdocs-envelope-document-page-${Math.random().toString(36).substring(2, 11)}`;\n\n @State() renderedWidth: number = this.virtualWidth;\n @State() renderedHeight: number = this.virtualHeight;\n @State() naturalWidth: number = this.virtualWidth;\n @State() naturalHeight: number = this.virtualHeight;\n @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n\n @State() skipFirstNotification = true;\n\n @State() pageDisplayUri = 'https://verdocs-public-assets.s3.amazonaws.com/page-loading-placeholder.png';\n\n async componentWillLoad() {\n this.pageDisplayUri = await getEnvelopeDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber, this.type);\n }\n\n componentDidLoad() {\n this.resizeObserver = new ResizeObserver(\n throttle(entries => {\n for (const entry of entries) {\n const renderedWidth = entry.contentRect.width;\n this.renderedWidth = renderedWidth;\n this.renderedHeight = this.virtualHeight (renderedWidth / this.virtualWidth);\n }\n\n this.notifyRenderedSize();\n }, 100),\n );\n\n this.resizeObserver.observe(this.container);\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.\n // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.\n // componentDidRender() {\n // this.notifyRenderedSize();\n // }\n\n notifyRenderedSize() {\n // We skip one notification because by default we will always get at least two, one when rendering the initial size\n // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.\n if (this.skipFirstNotification) {\n this.skipFirstNotification = false;\n return;\n }\n\n this.pageRendered.emit({\n // container: this.container,\n containerId: this.containerId,\n documentId: this.documentId,\n pageNumber: this.pageNumber,\n virtualWidth: this.virtualWidth,\n virtualHeight: this.virtualHeight,\n renderedWidth: this.renderedWidth,\n renderedHeight: this.renderedHeight,\n naturalWidth: this.naturalWidth,\n naturalHeight: this.naturalHeight,\n aspectRatio: this.aspectRatio,\n xScale: this.renderedWidth / this.virtualWidth,\n yScale: this.renderedHeight / this.virtualHeight,\n });\n }\n\n render() {\n const height = `${this.renderedHeight}px`;\n\n return (\n <Host id={`${this.containerId}`} style={{height, flex: `0 0 ${height}`}}>\n {this.layers.map(layer =>\n layer.type === 'div' ? (\n <div class=\"verdocs-envelope-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}} />\n ) : this.pageDisplayUri ? (\n <img\n class=\"verdocs-envelope-document-page-layer img\"\n id={`${this.containerId}-${layer.name}`}\n src={this.pageDisplayUri}\n alt={`Page ${this.pageNumber}`}\n aria-hidden={true}\n loading=\"lazy\"\n onLoad={(e: any) => {\n // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that\n // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).\n // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values\n // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the\n // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the\n // aspect ratio to adjust the \"virtual\" height in case the page is not 8.5\"x11\".\n // TODO: Store this in the DB with each page.\n this.naturalWidth = e.target.naturalWidth;\n this.naturalHeight = e.target.naturalHeight;\n this.aspectRatio = this.naturalWidth / this.naturalHeight;\n this.virtualHeight = this.virtualWidth / this.aspectRatio;\n this.renderedHeight = e.target.offsetWidth / this.aspectRatio;\n }}\n />\n ) : (\n <div></div>\n ),\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-162ae711.js → p-d666322a.js} RENAMED Viewed

@@ -1,16 +1,16 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-1f51246d.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-20f1beff.js';
 import { getRGBA } from '@verdocs/js-sdk';
 import { S as SettingsIcon } from './p-b0766439.js';
 import { S as Store } from './p-33300e3a.js';
-import { d as defineCustomElement$9 } from './p-f5ccf125.js';
-import { d as defineCustomElement$8 } from './p-96774726.js';
-import { d as defineCustomElement$7 } from './p-39480096.js';
-import { d as defineCustomElement$6 } from './p-d5eae4db.js';
-import { d as defineCustomElement$5 } from './p-7f6c97d5.js';
-import { d as defineCustomElement$4 } from './p-acb41a2e.js';
-import { d as defineCustomElement$3 } from './p-497ceba2.js';
-import { d as defineCustomElement$2 } from './p-c696e5d7.js';
-import { d as defineCustomElement$1 } from './p-a5c69199.js';
+import { d as defineCustomElement$9 } from './p-77b37d23.js';
+import { d as defineCustomElement$8 } from './p-4f96a7dc.js';
+import { d as defineCustomElement$7 } from './p-82c79267.js';
+import { d as defineCustomElement$6 } from './p-bbf082ec.js';
+import { d as defineCustomElement$5 } from './p-cd8c3571.js';
+import { d as defineCustomElement$4 } from './p-062e67e6.js';
+import { d as defineCustomElement$3 } from './p-53900f81.js';
+import { d as defineCustomElement$2 } from './p-e8f6e5b7.js';
+import { d as defineCustomElement$1 } from './p-200b75fc.js';
 const verdocsFieldRadioCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-radio{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-radio svg{margin-top:4px}verdocs-field-radio.disabled.done{opacity:1}verdocs-field-radio div.label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-radio div.group{top:14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#bb0589;border-bottom-left-radius:2px;border-bottom-right-radius:2px}verdocs-field-radio input{cursor:inherit}verdocs-field-radio.disabled input{opacity:0.5}verdocs-field-radio.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio:not(.done) input[type=radio]+label:before{content:\"\";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:12px;height:12px;position:absolute;left:0;top:0;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio:not(.done) 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-field-radio:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio:not(.done) 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:rgb(160, 160, 207.5);background:rgb(160, 160, 207.5)}verdocs-field-radio:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio.required{border:1px solid #cc0000}verdocs-field-radio.hide{display:none}verdocs-field-radio.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-radio verdocs-button-panel{margin-left:-20px;margin-top:-7px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-radio .settings-icon{position:absolute;top:-6px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-radio .settings-icon svg{fill:#707ae5}verdocs-field-radio .settings-icon:hover{opacity:1}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";
 const VerdocsFieldRadioStyle0 = verdocsFieldRadioCss;
@@ -198,4 +198,4 @@ function defineCustomElement() {
 export { VerdocsFieldRadio as V, defineCustomElement as d };
-//# sourceMappingURL=p-162ae711.js.map
+//# sourceMappingURL=p-d666322a.js.map

package/dist/components/{p-162ae711.js.map → p-d666322a.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-162ae711.js","mappings":"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","names":[],"sources":["src/components/fields/verdocs-field-radio/verdocs-field-radio.scss?tag=verdocs-field-radio","src/components/fields/verdocs-field-radio/verdocs-field-radio.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio {\n font-family: $verdocs-primary-font;\n width: 14px;\n height: 14px;\n display: block;\n font-size: 11px;\n position: relative;\n scroll-margin: 20px 0;\n background-color: transparent;\n transform-origin: bottom left;\n border-radius: 100%;\n\n &.focused {\n animation: verdocs-field-pulse 0.4s 1;\n }\n\n svg {\n margin-top: 4px;\n }\n\n &.disabled.done {\n opacity: 1;\n }\n\n // To avoid conflicting with the use of a label for the checkbox itself\n div.label {\n top: -14px;\n left: -1px;\n height: 14px;\n color: white;\n padding: 0 4px;\n font-size: 9px;\n line-height: 13px;\n position: absolute;\n background: #4a4a99;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n }\n\n div.group {\n top: 14px;\n left: -1px;\n height: 14px;\n color: white;\n padding: 0 4px;\n font-size: 9px;\n line-height: 13px;\n position: absolute;\n background: #bb0589;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n }\n\n input {\n // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n cursor: inherit;\n }\n\n &.disabled input {\n opacity: 0.5;\n }\n\n &.done input[type='radio'] {\n margin: 0;\n padding: 0;\n width: 10px;\n height: 10px;\n }\n\n &:not(.done) 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: 12px;\n height: 12px;\n position: absolute;\n left: 0;\n top: 0;\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 border: 1px solid $verdocs-red-1;\n }\n\n &.hide {\n display: none;\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.4s 1;\n }\n\n verdocs-button-panel {\n margin-left: -20px;\n margin-top: -7px;\n transform: scale(0.7);\n }\n\n .settings-icon {\n position: absolute;\n top: -6px;\n left: -20px;\n display: inline-block;\n cursor: pointer;\n opacity: 0.3;\n\n svg {\n fill: $border-color;\n }\n\n &:hover {\n opacity: 1;\n }\n }\n}\n\n@keyframes verdocs-field-pulse {\n 0% {\n background-color: rgba(0, 0, 0, 0.35);\n }\n 50% {\n background-color: rgba(0, 0, 0, 0);\n }\n 100% {\n background-color: rgba(0, 0, 0, 0.35);\n }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\nconst RadioIconUnselected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\nconst RadioIconSelected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\n/*\n Displays a radio button.\n /\n@Component({\n tag: 'verdocs-field-radio',\n styleUrl: 'verdocs-field-radio.scss',\n shadow: false,\n})\nexport class VerdocsFieldRadio {\n /\n Fields may be attached to templates or envelopes, but only template fields may be edited.\n /\n @Prop({reflect: true}) source: 'template' \| 'envelope' = 'template';\n\n /\n The source template or envelope ID the field is found in.\n /\n @Prop({reflect: true}) sourceid: string = '';\n\n /\n The name of the field to display.\n /\n @Prop({reflect: true}) fieldname: string = '';\n\n /\n Override the field's settings. This is intended to be used during signing when fields are being\n * mutated.\n /\n @Prop() field: IEnvelopeField \| null \| undefined = null;\n\n /\n If set, overrides the field's settings object. Primarily used in Storybook mode.\n /\n @Prop({reflect: true}) disabled?: boolean = false;\n\n /\n If set, overrides the field's required object. Primarily used in Storybook mode.\n /\n @Prop({reflect: true}) required?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop({reflect: true}) done?: boolean = false;\n\n /\n If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop({reflect: true}) editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop({reflect: true}) moveable?: boolean = false;\n\n /\n If set, the field will be be scaled horizontally by this factor.\n /\n @Prop({reflect: true}) xscale?: number = 1;\n\n /\n If set, the field will be be scaled vertically by this factor.\n /\n @Prop({reflect: true}) yscale?: number = 1;\n\n /\n The page the field is on\n /\n @Prop({reflect: true}) pagenumber?: number = 1;\n\n @State() showingProperties?: boolean = false;\n @State() focused = false;\n\n /\n Event fired when the field's settings are changed.\n /\n @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n /\n Event fired when the field is deleted.\n /\n @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n @Method()\n async focusField() {\n // Our input field is fake, so we fake the flash too\n this.focused = true;\n setTimeout(() => {\n this.focused = false;\n }, 500);\n }\n\n @Method()\n async showSettingsPanel() {\n const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n if (settingsPanel && settingsPanel.showPanel) {\n settingsPanel.showPanel();\n }\n }\n\n @Method()\n async hideSettingsPanel() {\n const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n if (settingsPanel && settingsPanel.hidePanel) {\n settingsPanel.hidePanel();\n }\n }\n\n render() {\n const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n const {name, required = false, label = '', group = '', value = false} = field \|\| {};\n const backgroundColor = getRGBA(index);\n\n const selected = value === 'true';\n\n if (done) {\n return (\n <Host class={{done}} style={{maxWidth: '10px'}}>\n <span innerHTML={selected ? RadioIconSelected : RadioIconUnselected} />\n </Host>\n );\n }\n\n return (\n <Host class={{required: this.required \|\| required, disabled, done, focused}} style={{backgroundColor}}>\n {label && <div class=\"label\">{label}</div>}\n {editable && group && <div class=\"group\">{group}</div>}\n\n <input id={fieldname} type=\"radio\" name={group \|\| fieldname} value={name} checked={!!selected} disabled={disabled} required={required} />\n <label htmlFor={fieldname} />\n\n {editable && (\n <Fragment>\n <div\n id={`verdocs-settings-panel-trigger-${fieldname}`}\n style={{transform: `scale(${Math.floor((1 / xscale) 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n class=\"settings-icon\"\n innerHTML={SettingsIcon}\n onClick={(e: any) => {\n e.stopPropagation();\n this.showingProperties = !this.showingProperties;\n }}\n />\n\n {this.showingProperties && (\n <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n <verdocs-template-field-properties\n templateId={sourceid}\n fieldName={fieldname}\n onClose={() => (this.showingProperties = false)}\n onDelete={() => {\n this.deleted?.emit({fieldName: fieldname});\n return this.hideSettingsPanel();\n }}\n onSettingsChanged={e => {\n this.settingsChanged?.emit(e.detail);\n return this.hideSettingsPanel();\n }}\n helpText={\"Radio buttons capture the recipient's selection of just one of several related (exclusive) options.\"}\n />\n </verdocs-portal>\n )}\n </Fragment>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-d666322a.js","mappings":"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","names":[],"sources":["src/components/fields/verdocs-field-radio/verdocs-field-radio.scss?tag=verdocs-field-radio","src/components/fields/verdocs-field-radio/verdocs-field-radio.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio {\n font-family: $verdocs-primary-font;\n width: 14px;\n height: 14px;\n display: block;\n font-size: 11px;\n position: relative;\n scroll-margin: 20px 0;\n background-color: transparent;\n transform-origin: bottom left;\n border-radius: 100%;\n\n &.focused {\n animation: verdocs-field-pulse 0.4s 1;\n }\n\n svg {\n margin-top: 4px;\n }\n\n &.disabled.done {\n opacity: 1;\n }\n\n // To avoid conflicting with the use of a label for the checkbox itself\n div.label {\n top: -14px;\n left: -1px;\n height: 14px;\n color: white;\n padding: 0 4px;\n font-size: 9px;\n line-height: 13px;\n position: absolute;\n background: #4a4a99;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n }\n\n div.group {\n top: 14px;\n left: -1px;\n height: 14px;\n color: white;\n padding: 0 4px;\n font-size: 9px;\n line-height: 13px;\n position: absolute;\n background: #bb0589;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n }\n\n input {\n // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n cursor: inherit;\n }\n\n &.disabled input {\n opacity: 0.5;\n }\n\n &.done input[type='radio'] {\n margin: 0;\n padding: 0;\n width: 10px;\n height: 10px;\n }\n\n &:not(.done) 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: 12px;\n height: 12px;\n position: absolute;\n left: 0;\n top: 0;\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 border: 1px solid $verdocs-red-1;\n }\n\n &.hide {\n display: none;\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.4s 1;\n }\n\n verdocs-button-panel {\n margin-left: -20px;\n margin-top: -7px;\n transform: scale(0.7);\n }\n\n .settings-icon {\n position: absolute;\n top: -6px;\n left: -20px;\n display: inline-block;\n cursor: pointer;\n opacity: 0.3;\n\n svg {\n fill: $border-color;\n }\n\n &:hover {\n opacity: 1;\n }\n }\n}\n\n@keyframes verdocs-field-pulse {\n 0% {\n background-color: rgba(0, 0, 0, 0.35);\n }\n 50% {\n background-color: rgba(0, 0, 0, 0);\n }\n 100% {\n background-color: rgba(0, 0, 0, 0.35);\n }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\nconst RadioIconUnselected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\nconst RadioIconSelected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\n/*\n Displays a radio button.\n /\n@Component({\n tag: 'verdocs-field-radio',\n styleUrl: 'verdocs-field-radio.scss',\n shadow: false,\n})\nexport class VerdocsFieldRadio {\n /\n Fields may be attached to templates or envelopes, but only template fields may be edited.\n /\n @Prop({reflect: true}) source: 'template' \| 'envelope' = 'template';\n\n /\n The source template or envelope ID the field is found in.\n /\n @Prop({reflect: true}) sourceid: string = '';\n\n /\n The name of the field to display.\n /\n @Prop({reflect: true}) fieldname: string = '';\n\n /\n Override the field's settings. This is intended to be used during signing when fields are being\n * mutated.\n /\n @Prop() field: IEnvelopeField \| null \| undefined = null;\n\n /\n If set, overrides the field's settings object. Primarily used in Storybook mode.\n /\n @Prop({reflect: true}) disabled?: boolean = false;\n\n /\n If set, overrides the field's required object. Primarily used in Storybook mode.\n /\n @Prop({reflect: true}) required?: boolean = false;\n\n /\n If set, the field is considered \"done\" and is drawn in a display-final-value state.\n /\n @Prop({reflect: true}) done?: boolean = false;\n\n /\n If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n * changed, so it should typically only be enabled in the Builder.\n /\n @Prop({reflect: true}) editable?: boolean = false;\n\n /\n If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n /\n @Prop({reflect: true}) moveable?: boolean = false;\n\n /\n If set, the field will be be scaled horizontally by this factor.\n /\n @Prop({reflect: true}) xscale?: number = 1;\n\n /\n If set, the field will be be scaled vertically by this factor.\n /\n @Prop({reflect: true}) yscale?: number = 1;\n\n /\n The page the field is on\n /\n @Prop({reflect: true}) pagenumber?: number = 1;\n\n @State() showingProperties?: boolean = false;\n @State() focused = false;\n\n /\n Event fired when the field's settings are changed.\n /\n @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n /\n Event fired when the field is deleted.\n /\n @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n @Method()\n async focusField() {\n // Our input field is fake, so we fake the flash too\n this.focused = true;\n setTimeout(() => {\n this.focused = false;\n }, 500);\n }\n\n @Method()\n async showSettingsPanel() {\n const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n if (settingsPanel && settingsPanel.showPanel) {\n settingsPanel.showPanel();\n }\n }\n\n @Method()\n async hideSettingsPanel() {\n const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n if (settingsPanel && settingsPanel.hidePanel) {\n settingsPanel.hidePanel();\n }\n }\n\n render() {\n const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n const {name, required = false, label = '', group = '', value = false} = field \|\| {};\n const backgroundColor = getRGBA(index);\n\n const selected = value === 'true';\n\n if (done) {\n return (\n <Host class={{done}} style={{maxWidth: '10px'}}>\n <span innerHTML={selected ? RadioIconSelected : RadioIconUnselected} />\n </Host>\n );\n }\n\n return (\n <Host class={{required: this.required \|\| required, disabled, done, focused}} style={{backgroundColor}}>\n {label && <div class=\"label\">{label}</div>}\n {editable && group && <div class=\"group\">{group}</div>}\n\n <input id={fieldname} type=\"radio\" name={group \|\| fieldname} value={name} checked={!!selected} disabled={disabled} required={required} />\n <label htmlFor={fieldname} />\n\n {editable && (\n <Fragment>\n <div\n id={`verdocs-settings-panel-trigger-${fieldname}`}\n style={{transform: `scale(${Math.floor((1 / xscale) 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n class=\"settings-icon\"\n innerHTML={SettingsIcon}\n onClick={(e: any) => {\n e.stopPropagation();\n this.showingProperties = !this.showingProperties;\n }}\n />\n\n {this.showingProperties && (\n <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n <verdocs-template-field-properties\n templateId={sourceid}\n fieldName={fieldname}\n onClose={() => (this.showingProperties = false)}\n onDelete={() => {\n this.deleted?.emit({fieldName: fieldname});\n return this.hideSettingsPanel();\n }}\n onSettingsChanged={e => {\n this.settingsChanged?.emit(e.detail);\n return this.hideSettingsPanel();\n }}\n helpText={\"Radio buttons capture the recipient's selection of just one of several related (exclusive) options.\"}\n />\n </verdocs-portal>\n )}\n </Fragment>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-ec06fbd7.js → p-db50e7f0.js} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1f51246d.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-20f1beff.js';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { u as unicodeNBSP } from './p-b0766439.js';
-import { d as defineCustomElement$1 } from './p-f5ccf125.js';
+import { d as defineCustomElement$1 } from './p-77b37d23.js';
 const verdocsFileChooserCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-file-chooser{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-file-chooser .upload-box{text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 15px;color:rgba(0, 0, 0, 0.54)}verdocs-file-chooser .upload-box svg{width:64px;height:64px;fill:#5c6575}verdocs-file-chooser .selected-filename{font-size:20px;font-weight:bold;overflow-wrap:anywhere}verdocs-file-chooser .or-prefer{height:20px;margin:20px 0;font-size:16px}";
 const VerdocsFileChooserStyle0 = verdocsFileChooserCss;
@@ -59,4 +59,4 @@ function defineCustomElement() {
 export { VerdocsFileChooser as V, defineCustomElement as d };
-//# sourceMappingURL=p-ec06fbd7.js.map
+//# sourceMappingURL=p-db50e7f0.js.map

package/dist/components/{p-ec06fbd7.js.map → p-db50e7f0.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~ec06fbd7~~.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,45BAA45B,CAAC;AAC37B,iCAAe,qBAAqB;;MCgBvB,kBAAkB;IAL/B;;;;;;;QASU,aAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE,CAAC;KAiDlE;IAvCC,iBAAiB,CAAC,CAAM;;QACtB,IAAI,CAAC,IAAI,GAAG,CAAA,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,0CAAG,CAAC,CAAC,KAAI,IAAI,CAAC;QACxC,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;QAC3C,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACrD;IAED,gBAAgB,CAAC,CAAM;;QACrB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;QACtC,MAAA,QAAQ,CAAC,cAAc,CAAC,sBAAsB,CAAC,0CAAE,KAAK,EAAE,CAAC;KAC1D;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,yBAAyB,GAAG,kCAAkC,CAAC;QAE/F,QACE,EAAC,IAAI,uDACH,8DACE,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,EAAE,EAAC,sBAAsB,EACzB,MAAM,EAAC,4HAA4H,EACnI,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EACxB,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,GACxC,EAEF,4DAAK,KAAK,EAAC,YAAY,IAGrB,4DAAK,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAO,EAEtF,4DAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,IAAI,GAAG,WAAW,GAAG,sBAAsB,CAAO,EAE/E,uEAAgB,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAI,CACvF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-file-chooser/verdocs-file-chooser.scss?tag=verdocs-file-chooser","src/components/controls/verdocs-file-chooser/verdocs-file-chooser.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-file-chooser {\n display: flex;\n flex-direction: column;\n background-color: $verdocs-grey-4;\n font-family: $verdocs-primary-font;\n\n .upload-box {\n text-align: center;\n box-sizing: border-box;\n padding: 40px 15px;\n //padding: 44px 18px 66px;\n color: rgba(0, 0, 0, 0.54);\n\n svg {\n width: 64px;\n height: 64px;\n fill: #5c6575;\n }\n }\n\n .selected-filename {\n font-size: 20px;\n //margin-top: 20px;\n font-weight: bold;\n overflow-wrap: anywhere;\n }\n\n .or-prefer {\n height: 20px;\n margin: 20px 0;\n font-size: 16px;\n }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State, Host} from '@stencil/core';\nimport {unicodeNBSP} from '../../../utils/Icons';\n\n/*\n Displays a file picker to upload an attachment. This component is just the picker - the host application or component should\n * provide the actual upload functionality.\n \n ```ts\n * <verdocs-file-chooser onFileSelected={(e) => console.log('File Selected', e.detail)} />\n * ```\n /\n@Component({\n tag: 'verdocs-file-chooser',\n styleUrl: 'verdocs-file-chooser.scss',\n shadow: false,\n})\nexport class VerdocsFileChooser {\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 Event fired when a file has been selected. Note that the file may be null if the user is choosing a different file.\n * Host applications should use this event to enable/disable buttons to upload or otherwise process the selected file.\n /\n @Event({composed: true}) fileSelected: EventEmitter<{file: File \| null}>;\n\n @State() file: File \| null;\n\n handleFileChanged(e: any) {\n this.file = e.target.files?.[0] \|\| null;\n this.fileSelected?.emit({file: this.file});\n console.debug('[CHOOSER] Selected file', this.file);\n }\n\n handleSelectFile(e: any) {\n e.stopPropagation();\n this.file = null;\n this.fileSelected?.emit({file: null});\n document.getElementById('verdocs-file-chooser')?.click();\n }\n\n render() {\n const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';\n\n return (\n <Host>\n <input\n type=\"file\"\n multiple\n id=\"verdocs-file-chooser\"\n accept=\"application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document\"\n style={{display: 'none'}}\n onChange={e => this.handleFileChanged(e)}\n />\n\n <div class=\"upload-box\">\n {/<div innerHTML={FileIcon} />*/}\n\n <div class=\"selected-filename\">{this.file ? this.file.name : 'Drag a file here'}</div>\n\n <div class=\"or-prefer\">{this.file ? unicodeNBSP : 'Or, if you prefer...'}</div>\n\n <verdocs-button label={buttonlabel} size=\"small\" onClick={e => this.handleSelectFile(e)} />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-db50e7f0.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,45BAA45B,CAAC;AAC37B,iCAAe,qBAAqB;;MCgBvB,kBAAkB;IAL/B;;;;;;;QASU,aAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE,CAAC;KAiDlE;IAvCC,iBAAiB,CAAC,CAAM;;QACtB,IAAI,CAAC,IAAI,GAAG,CAAA,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,0CAAG,CAAC,CAAC,KAAI,IAAI,CAAC;QACxC,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;QAC3C,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACrD;IAED,gBAAgB,CAAC,CAAM;;QACrB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;QACtC,MAAA,QAAQ,CAAC,cAAc,CAAC,sBAAsB,CAAC,0CAAE,KAAK,EAAE,CAAC;KAC1D;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,yBAAyB,GAAG,kCAAkC,CAAC;QAE/F,QACE,EAAC,IAAI,uDACH,8DACE,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,EAAE,EAAC,sBAAsB,EACzB,MAAM,EAAC,4HAA4H,EACnI,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EACxB,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,GACxC,EAEF,4DAAK,KAAK,EAAC,YAAY,IAGrB,4DAAK,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAO,EAEtF,4DAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,IAAI,GAAG,WAAW,GAAG,sBAAsB,CAAO,EAE/E,uEAAgB,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAI,CACvF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-file-chooser/verdocs-file-chooser.scss?tag=verdocs-file-chooser","src/components/controls/verdocs-file-chooser/verdocs-file-chooser.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-file-chooser {\n display: flex;\n flex-direction: column;\n background-color: $verdocs-grey-4;\n font-family: $verdocs-primary-font;\n\n .upload-box {\n text-align: center;\n box-sizing: border-box;\n padding: 40px 15px;\n //padding: 44px 18px 66px;\n color: rgba(0, 0, 0, 0.54);\n\n svg {\n width: 64px;\n height: 64px;\n fill: #5c6575;\n }\n }\n\n .selected-filename {\n font-size: 20px;\n //margin-top: 20px;\n font-weight: bold;\n overflow-wrap: anywhere;\n }\n\n .or-prefer {\n height: 20px;\n margin: 20px 0;\n font-size: 16px;\n }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State, Host} from '@stencil/core';\nimport {unicodeNBSP} from '../../../utils/Icons';\n\n/*\n Displays a file picker to upload an attachment. This component is just the picker - the host application or component should\n * provide the actual upload functionality.\n \n ```ts\n * <verdocs-file-chooser onFileSelected={(e) => console.log('File Selected', e.detail)} />\n * ```\n /\n@Component({\n tag: 'verdocs-file-chooser',\n styleUrl: 'verdocs-file-chooser.scss',\n shadow: false,\n})\nexport class VerdocsFileChooser {\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 Event fired when a file has been selected. Note that the file may be null if the user is choosing a different file.\n * Host applications should use this event to enable/disable buttons to upload or otherwise process the selected file.\n /\n @Event({composed: true}) fileSelected: EventEmitter<{file: File \| null}>;\n\n @State() file: File \| null;\n\n handleFileChanged(e: any) {\n this.file = e.target.files?.[0] \|\| null;\n this.fileSelected?.emit({file: this.file});\n console.debug('[CHOOSER] Selected file', this.file);\n }\n\n handleSelectFile(e: any) {\n e.stopPropagation();\n this.file = null;\n this.fileSelected?.emit({file: null});\n document.getElementById('verdocs-file-chooser')?.click();\n }\n\n render() {\n const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';\n\n return (\n <Host>\n <input\n type=\"file\"\n multiple\n id=\"verdocs-file-chooser\"\n accept=\"application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document\"\n style={{display: 'none'}}\n onChange={e => this.handleFileChanged(e)}\n />\n\n <div class=\"upload-box\">\n {/<div innerHTML={FileIcon} />*/}\n\n <div class=\"selected-filename\">{this.file ? this.file.name : 'Drag a file here'}</div>\n\n <div class=\"or-prefer\">{this.file ? unicodeNBSP : 'Or, if you prefer...'}</div>\n\n <verdocs-button label={buttonlabel} size=\"small\" onClick={e => this.handleSelectFile(e)} />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-e098ba1d.js → p-de58dbf5.js} RENAMED Viewed

@@ -1,14 +1,14 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-1f51246d.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-20f1beff.js';
 import { VerdocsEndpoint, getEnvelope, getDocumentDownloadLink, cancelEnvelope, userCanCancelEnvelope, integerSequence } from '@verdocs/js-sdk';
 import { s as saveEnvelopesAsZip } from './p-af5ecc92.js';
 import { S as SDKError } from './p-fd97809c.js';
 import { S as Store } from './p-33300e3a.js';
-import { d as defineCustomElement$6 } from './p-f5ccf125.js';
-import { d as defineCustomElement$5 } from './p-728ec158.js';
-import { d as defineCustomElement$4 } from './p-83ecee53.js';
-import { d as defineCustomElement$3 } from './p-7f6c97d5.js';
-import { d as defineCustomElement$2 } from './p-ed777fb7.js';
-import { d as defineCustomElement$1 } from './p-acb41a2e.js';
+import { d as defineCustomElement$6 } from './p-77b37d23.js';
+import { d as defineCustomElement$5 } from './p-7b258587.js';
+import { d as defineCustomElement$4 } from './p-d16c9dd7.js';
+import { d as defineCustomElement$3 } from './p-cd8c3571.js';
+import { d as defineCustomElement$2 } from './p-4b831194.js';
+import { d as defineCustomElement$1 } from './p-062e67e6.js';
 const verdocsViewCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-view{display:-ms-flexbox;display:flex;overflow:hidden;min-height:600px;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-view div,verdocs-view canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-view .document{-ms-flex:1;flex:1;width:100%;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;max-width:1200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-view .document .inner{width:100%;max-width:1028px}verdocs-view .loading-indicator{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.7)}#verdocs-view-header{width:100%;color:#fff;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 56px;flex:0 0 56px;padding:0 20px;font-size:12px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}@media all and (max-width: 500px){#verdocs-view-header{padding:0 10px}}#verdocs-view-header .inner{width:100%;display:-ms-flexbox;display:flex;margin:0 auto;padding:0 20px;max-width:1200px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}@media all and (max-width: 500px){#verdocs-view-header .inner{padding:0 10px}}#verdocs-view-header .logo{width:80px;display:none;margin:-6px 0 0 0}#verdocs-view-header .title{font-size:18px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
 const VerdocsViewStyle0 = verdocsViewCss;
@@ -277,4 +277,4 @@ function defineCustomElement() {
 export { VerdocsView as V, defineCustomElement as d };
-//# sourceMappingURL=p-e098ba1d.js.map
+//# sourceMappingURL=p-de58dbf5.js.map