npm - @verdocs/web-sdk - Versions diffs - 5.0.43 → 5.0.45 - Mend

@verdocs/web-sdk 5.0.43 → 5.0.45

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

package/dist/components/{p-710ca15d.js → p-18086502.js} RENAMED Viewed

@@ -5,7 +5,7 @@ import { S as SDKError } from './p-fd97809c.js';
 import { S as Store } from './p-33300e3a.js';
 import { d as defineCustomElement$4 } from './p-84929e4a.js';
 import { d as defineCustomElement$3 } from './p-39480096.js';
-import { d as defineCustomElement$2 } from './p-f7dc9e74.js';
+import { d as defineCustomElement$2 } from './p-7f6c97d5.js';
 import { d as defineCustomElement$1 } from './p-1d98c6e0.js';
 import { f as format } from './p-12bab948.js';
@@ -183,4 +183,4 @@ function defineCustomElement() {
 export { VerdocsTemplateBuildTabs as V, defineCustomElement as d };
-//# sourceMappingURL=p-710ca15d.js.map
+//# sourceMappingURL=p-18086502.js.map

package/dist/components/{p-710ca15d.js.map → p-18086502.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-710ca15d.js","mappings":"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","names":[],"sources":["src/components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs.scss?tag=verdocs-template-build-tabs","src/components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-build-tabs {\n flex: 1;\n gap: 15px;\n display: flex;\n align-items: center;\n flex-direction: row;\n font-family: $verdocs-primary-font;\n\n verdocs-button-panel {\n svg {\n transform: scale(0.8);\n }\n }\n\n verdocs-template-attachments,\n verdocs-template-roles {\n margin: 20px;\n }\n\n verdocs-template-fields {\n border-top: 1px solid #777777;\n }\n\n verdocs-template-attachments {\n padding: 20px;\n background: #ffffff;\n }\n\n verdocs-template-fields {\n width: 100%;\n }\n\n verdocs-preview {\n flex: 1;\n }\n}\n\n.template-details-panel {\n .row {\n display: flex;\n flex-direction: row;\n gap: 8px;\n margin: 10px 0;\n }\n\n label {\n flex: 0 0 70px;\n }\n\n .value {\n flex: 1;\n font-weight: 300;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .icon-button {\n cursor: pointer;\n opacity: 0.8;\n flex: 0;\n width: 18px;\n height: 18px;\n\n svg {\n stroke: #000000;\n width: 18px;\n height: 18px;\n }\n\n &:hover {\n opacity: 1;\n }\n }\n}\n","import {format} from 'date-fns';\nimport {getTemplate, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Event, EventEmitter, Host, Watch, State} from '@stencil/core';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst HelpIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\" fill=\"#5c6575\"><path d=\"M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z\"/></svg>';\n\nconst CopyIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75\" /></svg>`;\n\nconst STEPS = ['attachments', 'roles', 'settings', 'fields', 'preview'];\nexport type TVerdocsBuildStep = 'attachments' \| 'roles' \| 'settings' \| 'fields' \| 'preview';\n\n/*\n Display a set of tabs for the template builder.\n /\n@Component({\n tag: 'verdocs-template-build-tabs',\n styleUrl: 'verdocs-template-build-tabs.scss',\n shadow: false,\n})\nexport class VerdocsTemplateBuildTabs {\n private templateListenerId = 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 ID of the template to create the document from. Unlike most other components, this is an optional parameter here.\n * If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process.\n * If it is not specified, `step` will be ignored and the create step will be shown.\n /\n @Prop({reflect: true, mutable: true}) templateId: string \| null = null;\n\n /\n The step in the creation process to display.\n /\n @Prop({reflect: true, mutable: true}) step: TVerdocsBuildStep = 'preview';\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 /\n Event fired when the user selects a different step.\n */\n @Event({composed: true}) stepChanged: EventEmitter<TVerdocsBuildStep>;\n\n @State() loading = true;\n @State() template: ITemplate \| null = null;\n\n disconnectedCallback() {\n this.unlistenToTemplate();\n }\n\n async listenToTemplate() {\n this.unlistenToTemplate();\n Store.subscribe(\n 'templates',\n this.templateId,\n () => getTemplate(this.endpoint, this.templateId),\n false,\n (template: ITemplate) => {\n this.template = template;\n this.loading = false;\n },\n );\n }\n\n unlistenToTemplate() {\n if (this.templateListenerId) {\n Store.store.delListener(this.templateListenerId);\n this.templateListenerId = null;\n }\n }\n\n @Watch('templateId')\n onTemplateIdChanged(newTemplateId: string) {\n console.log('[BUILD_TABS] Template ID changed', newTemplateId);\n this.listenToTemplate();\n }\n\n @Watch('step')\n onStepChanged(newStep: TVerdocsBuildStep) {\n console.log('[BUILD_TABS] Step changed', newStep);\n }\n\n async componentWillLoad() {\n try {\n this.endpoint.loadSession();\n if (!this.endpoint.session) {\n console.log('[BUILD_TABS] Unable to start builder session, must be authenticated');\n return;\n }\n\n if (!this.templateId) {\n this.step = 'attachments';\n console.log('[BUILD_TABS] Missing required template ID, forcing view to attachments');\n return;\n }\n\n this.listenToTemplate();\n } catch (e) {\n console.log('[BUILD_TABS] Error loading template', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n setStep(e: any) {\n console.log('[BUILD_TABS] Selected step', e.detail.tab.id);\n e.stopPropagation();\n e.preventDefault();\n this.step = e.detail.tab.id;\n this.stepChanged?.emit(e.detail.tab.id);\n }\n\n copyTemplateId() {\n navigator.clipboard\n .writeText(this.templateId)\n .then(() => {\n VerdocsToast('Template ID copied', {style: 'success', duration: 3000});\n })\n .catch(e => {\n console.warn('[BUILD_TABS] Error copying to clipboard', e);\n this.sdkError?.emit(e);\n });\n }\n\n render() {\n if (this.loading) {\n return (\n <Host>\n <verdocs-loader />\n </Host>\n );\n }\n\n if (!this.endpoint.session) {\n return (\n <Host>\n <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n </Host>\n );\n }\n\n const canEditRoles = (this.template?.documents \|\| []).length > 0;\n let canEditFields = canEditRoles && (this.template?.roles \|\| []).length > 0;\n const canPreview = canEditFields && (this.template?.fields \|\| []).length > 0;\n\n let selectedStepIndex = Math.max(STEPS.indexOf(this.step), 0);\n if (!canPreview && selectedStepIndex >= 4) {\n selectedStepIndex = 3;\n }\n if (!canEditFields && selectedStepIndex >= 3) {\n selectedStepIndex = 1;\n }\n if (!canEditRoles && selectedStepIndex >= 1) {\n selectedStepIndex = 0;\n }\n\n return (\n <Host>\n <verdocs-tabs\n onSelectTab={e => this.setStep(e)}\n selectedTab={selectedStepIndex}\n tabs={[\n {id: 'attachments', disabled: false, label: 'Attachment(s)'},\n {id: 'roles', disabled: !canEditRoles, label: 'Roles'},\n {id: 'settings', disabled: !canEditFields, label: 'Settings'},\n {id: 'fields', disabled: !canEditFields, label: 'Fields'},\n {id: 'preview', disabled: !canPreview, label: 'Preview/Send'},\n ]}\n />\n\n {this.templateId && (\n <div class=\"info\">\n <verdocs-button-panel icon={HelpIcon}>\n <div class=\"template-details-panel\">\n <h6>Template Details</h6>\n <div class=\"row\">\n <label>ID:</label>\n <div class=\"value\">{this.templateId}</div>\n <div class=\"icon-button\" innerHTML={CopyIcon} onClick={() => this.copyTemplateId()} />\n </div>\n <div class=\"row\">\n <label>Name:</label>\n <div class=\"value\">{this.template?.name}</div>\n </div>\n <div class=\"row\">\n <label>Visibility:</label>\n <div class=\"value\">{this.template?.is_public ? 'Public' : this.template?.is_personal ? 'Private' : 'Shared'}</div>\n </div>\n <div class=\"row\">\n <label>Created:</label>\n <div class=\"value\">{this.template?.counter ? format(new Date(this.template?.created_at), 'P p') : ''}</div>\n </div>\n <div class=\"row\">\n <label>Used:</label>\n <div class=\"value\">{this.template?.counter} time(s)</div>\n </div>\n </div>\n </verdocs-button-panel>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-18086502.js","mappings":"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","names":[],"sources":["src/components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs.scss?tag=verdocs-template-build-tabs","src/components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-build-tabs {\n flex: 1;\n gap: 15px;\n display: flex;\n align-items: center;\n flex-direction: row;\n font-family: $verdocs-primary-font;\n\n verdocs-button-panel {\n svg {\n transform: scale(0.8);\n }\n }\n\n verdocs-template-attachments,\n verdocs-template-roles {\n margin: 20px;\n }\n\n verdocs-template-fields {\n border-top: 1px solid #777777;\n }\n\n verdocs-template-attachments {\n padding: 20px;\n background: #ffffff;\n }\n\n verdocs-template-fields {\n width: 100%;\n }\n\n verdocs-preview {\n flex: 1;\n }\n}\n\n.template-details-panel {\n .row {\n display: flex;\n flex-direction: row;\n gap: 8px;\n margin: 10px 0;\n }\n\n label {\n flex: 0 0 70px;\n }\n\n .value {\n flex: 1;\n font-weight: 300;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .icon-button {\n cursor: pointer;\n opacity: 0.8;\n flex: 0;\n width: 18px;\n height: 18px;\n\n svg {\n stroke: #000000;\n width: 18px;\n height: 18px;\n }\n\n &:hover {\n opacity: 1;\n }\n }\n}\n","import {format} from 'date-fns';\nimport {getTemplate, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Event, EventEmitter, Host, Watch, State} from '@stencil/core';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst HelpIcon =\n '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\" fill=\"#5c6575\"><path d=\"M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z\"/></svg>';\n\nconst CopyIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75\" /></svg>`;\n\nconst STEPS = ['attachments', 'roles', 'settings', 'fields', 'preview'];\nexport type TVerdocsBuildStep = 'attachments' \| 'roles' \| 'settings' \| 'fields' \| 'preview';\n\n/*\n Display a set of tabs for the template builder.\n /\n@Component({\n tag: 'verdocs-template-build-tabs',\n styleUrl: 'verdocs-template-build-tabs.scss',\n shadow: false,\n})\nexport class VerdocsTemplateBuildTabs {\n private templateListenerId = 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 ID of the template to create the document from. Unlike most other components, this is an optional parameter here.\n * If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process.\n * If it is not specified, `step` will be ignored and the create step will be shown.\n /\n @Prop({reflect: true, mutable: true}) templateId: string \| null = null;\n\n /\n The step in the creation process to display.\n /\n @Prop({reflect: true, mutable: true}) step: TVerdocsBuildStep = 'preview';\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 /\n Event fired when the user selects a different step.\n */\n @Event({composed: true}) stepChanged: EventEmitter<TVerdocsBuildStep>;\n\n @State() loading = true;\n @State() template: ITemplate \| null = null;\n\n disconnectedCallback() {\n this.unlistenToTemplate();\n }\n\n async listenToTemplate() {\n this.unlistenToTemplate();\n Store.subscribe(\n 'templates',\n this.templateId,\n () => getTemplate(this.endpoint, this.templateId),\n false,\n (template: ITemplate) => {\n this.template = template;\n this.loading = false;\n },\n );\n }\n\n unlistenToTemplate() {\n if (this.templateListenerId) {\n Store.store.delListener(this.templateListenerId);\n this.templateListenerId = null;\n }\n }\n\n @Watch('templateId')\n onTemplateIdChanged(newTemplateId: string) {\n console.log('[BUILD_TABS] Template ID changed', newTemplateId);\n this.listenToTemplate();\n }\n\n @Watch('step')\n onStepChanged(newStep: TVerdocsBuildStep) {\n console.log('[BUILD_TABS] Step changed', newStep);\n }\n\n async componentWillLoad() {\n try {\n this.endpoint.loadSession();\n if (!this.endpoint.session) {\n console.log('[BUILD_TABS] Unable to start builder session, must be authenticated');\n return;\n }\n\n if (!this.templateId) {\n this.step = 'attachments';\n console.log('[BUILD_TABS] Missing required template ID, forcing view to attachments');\n return;\n }\n\n this.listenToTemplate();\n } catch (e) {\n console.log('[BUILD_TABS] Error loading template', e);\n this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n }\n }\n\n setStep(e: any) {\n console.log('[BUILD_TABS] Selected step', e.detail.tab.id);\n e.stopPropagation();\n e.preventDefault();\n this.step = e.detail.tab.id;\n this.stepChanged?.emit(e.detail.tab.id);\n }\n\n copyTemplateId() {\n navigator.clipboard\n .writeText(this.templateId)\n .then(() => {\n VerdocsToast('Template ID copied', {style: 'success', duration: 3000});\n })\n .catch(e => {\n console.warn('[BUILD_TABS] Error copying to clipboard', e);\n this.sdkError?.emit(e);\n });\n }\n\n render() {\n if (this.loading) {\n return (\n <Host>\n <verdocs-loader />\n </Host>\n );\n }\n\n if (!this.endpoint.session) {\n return (\n <Host>\n <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n </Host>\n );\n }\n\n const canEditRoles = (this.template?.documents \|\| []).length > 0;\n let canEditFields = canEditRoles && (this.template?.roles \|\| []).length > 0;\n const canPreview = canEditFields && (this.template?.fields \|\| []).length > 0;\n\n let selectedStepIndex = Math.max(STEPS.indexOf(this.step), 0);\n if (!canPreview && selectedStepIndex >= 4) {\n selectedStepIndex = 3;\n }\n if (!canEditFields && selectedStepIndex >= 3) {\n selectedStepIndex = 1;\n }\n if (!canEditRoles && selectedStepIndex >= 1) {\n selectedStepIndex = 0;\n }\n\n return (\n <Host>\n <verdocs-tabs\n onSelectTab={e => this.setStep(e)}\n selectedTab={selectedStepIndex}\n tabs={[\n {id: 'attachments', disabled: false, label: 'Attachment(s)'},\n {id: 'roles', disabled: !canEditRoles, label: 'Roles'},\n {id: 'settings', disabled: !canEditFields, label: 'Settings'},\n {id: 'fields', disabled: !canEditFields, label: 'Fields'},\n {id: 'preview', disabled: !canPreview, label: 'Preview/Send'},\n ]}\n />\n\n {this.templateId && (\n <div class=\"info\">\n <verdocs-button-panel icon={HelpIcon}>\n <div class=\"template-details-panel\">\n <h6>Template Details</h6>\n <div class=\"row\">\n <label>ID:</label>\n <div class=\"value\">{this.templateId}</div>\n <div class=\"icon-button\" innerHTML={CopyIcon} onClick={() => this.copyTemplateId()} />\n </div>\n <div class=\"row\">\n <label>Name:</label>\n <div class=\"value\">{this.template?.name}</div>\n </div>\n <div class=\"row\">\n <label>Visibility:</label>\n <div class=\"value\">{this.template?.is_public ? 'Public' : this.template?.is_personal ? 'Private' : 'Shared'}</div>\n </div>\n <div class=\"row\">\n <label>Created:</label>\n <div class=\"value\">{this.template?.counter ? format(new Date(this.template?.created_at), 'P p') : ''}</div>\n </div>\n <div class=\"row\">\n <label>Used:</label>\n <div class=\"value\">{this.template?.counter} time(s)</div>\n </div>\n </div>\n </verdocs-button-panel>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-44e14cb9.js → p-2985ae11.js} RENAMED Viewed

@@ -23,7 +23,7 @@ const VerdocsProgressBar = /*@__PURE__*/ proxyCustomElement(class VerdocsProgres
     render() {
         const widthPercent = Math.ceil((100 * Math.min(this.percent, 100)) / 100);
         console.log('Rendering progress bar', { widthPercent, label: this.label, showPercent: this.showPercent, percent: this.percent });
-        return (h(Host, { key: 'c57b566587b7fe5f95f7082964dc7d27c46008cb' }, h("div", { key: 'b44243b4c65cdd5ddb7a47028db07e47e1c9373b', class: "labels" }, this.label && h("div", { key: '58715d2cd0a47260618472ed06d3eeda095ea852', class: "label" }, this.label), this.showPercent && h("div", { key: '38b9fa2f2180eee29cdc6aff0562475c9d6cc943', class: "label" }, this.percent, "%")), h("div", { key: '1258f3696cb5852865e7d1af59bf2acb7acfda50', class: "bar" }, h("div", { key: 'eb1346d2b9f7ccce786c358ef247fd3ec62de67f', class: "slider", style: { width: `${widthPercent}%` } }))));
+        return (h(Host, { key: '4fb4646e5feebaf8265fc8042af66d3dcf2426b6' }, h("div", { key: 'd2febb9e8a3b1e89d067324b40aa674287d0fef0', class: "labels" }, this.label && h("div", { key: 'e32eacce952b2ba7bd10819a535b6438c6ba52b4', class: "label" }, this.label), this.showPercent && h("div", { key: '485503902199bcb6752997bef3afcf333c5ce6aa', class: "label" }, this.percent, "%")), h("div", { key: 'ebdfa5c9362f136d7f3690ffeadae2be46a47bc1', class: "bar" }, h("div", { key: 'a72e9c81d14d8e7cc6c37cfcd6a9cb6a27d50a2e', class: "slider", style: { width: `${widthPercent}%` } }))));
     }
     static get style() { return VerdocsProgressBarStyle0; }
 }, [0, "verdocs-progress-bar", {
@@ -47,4 +47,4 @@ function defineCustomElement() {
 export { VerdocsProgressBar as V, defineCustomElement as d };
-//# sourceMappingURL=p-44e14cb9.js.map
+//# sourceMappingURL=p-2985ae11.js.map

package/dist/components/{p-44e14cb9.js.map → p-2985ae11.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~44e14cb9~~.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,ulCAAulC,CAAC;AACtnC,iCAAe,qBAAqB;;MCavB,kBAAkB;IAL/B;;;;;;QASU,UAAK,GAAW,EAAE,CAAC;;;;QAKnB,gBAAW,GAAY,KAAK,CAAC;;;;QAK7B,YAAO,GAAW,CAAC,CAAC;KAmB7B;IAjBC,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC;QAC1E,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,EAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC,CAAC;QAE/H,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,EACnD,IAAI,CAAC,WAAW,IAAI,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,OAAO,MAAQ,CACzD,EAEN,4DAAK,KAAK,EAAC,KAAK,IACd,4DAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,GAAG,YAAY,GAAG,EAAC,GAAQ,CAC1D,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-progress-bar/verdocs-progress-bar.scss?tag=verdocs-progress-bar","src/components/controls/verdocs-progress-bar/verdocs-progress-bar.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-progress-bar {\n font-family: $primary-font;\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n box-sizing: border-box;\n flex-direction: column;\n\n .labels {\n display: flex;\n margin: 0 0 8px 0;\n flex-direction: row;\n justify-content: space-between;\n\n .label {\n display: flex;\n font-size: 14px;\n font-weight: 600;\n margin-right: 8px;\n color: $verdocs-grey-1;\n }\n }\n\n .bar {\n display: flex;\n flex: 0 0 10px;\n border-radius: 5px;\n background-color: $verdocs-bg-1;\n\n .slider {\n display: flex;\n border-radius: 5px;\n background-color: $verdocs-green;\n }\n }\n}\n","import {Component, Prop, h, Host} from '@stencil/core';\n\n/*\n Display a simple progress bar in a style consistent with the design system.\n \n ```ts\n * <verdocs-progress-bar label=\"Uploading...\" showPercent={true} percent={54} />\n * ```\n /\n@Component({\n tag: 'verdocs-progress-bar',\n styleUrl: 'verdocs-progress-bar.scss',\n shadow: false,\n})\nexport class VerdocsProgressBar {\n /\n Optional label to display above the bar\n /\n @Prop() label: string = '';\n\n /\n If true, the progress percentage will be displayed above the bar.\n /\n @Prop() showPercent: boolean = false;\n\n /\n The current progress value (0-100)\n /\n @Prop() percent: number = 0;\n\n render() {\n const widthPercent = Math.ceil((100 Math.min(this.percent, 100)) / 100);\n console.log('Rendering progress bar', {widthPercent, label: this.label, showPercent: this.showPercent, percent: this.percent});\n\n return (\n <Host>\n <div class=\"labels\">\n {this.label && <div class=\"label\">{this.label}</div>}\n {this.showPercent && <div class=\"label\">{this.percent}%</div>}\n </div>\n\n <div class=\"bar\">\n <div class=\"slider\" style={{width: `${widthPercent}%`}}></div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-2985ae11.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,ulCAAulC,CAAC;AACtnC,iCAAe,qBAAqB;;MCavB,kBAAkB;IAL/B;;;;;;QASU,UAAK,GAAW,EAAE,CAAC;;;;QAKnB,gBAAW,GAAY,KAAK,CAAC;;;;QAK7B,YAAO,GAAW,CAAC,CAAC;KAmB7B;IAjBC,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC;QAC1E,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,EAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC,CAAC;QAE/H,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,EACnD,IAAI,CAAC,WAAW,IAAI,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,OAAO,MAAQ,CACzD,EAEN,4DAAK,KAAK,EAAC,KAAK,IACd,4DAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,GAAG,YAAY,GAAG,EAAC,GAAQ,CAC1D,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-progress-bar/verdocs-progress-bar.scss?tag=verdocs-progress-bar","src/components/controls/verdocs-progress-bar/verdocs-progress-bar.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-progress-bar {\n font-family: $primary-font;\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n box-sizing: border-box;\n flex-direction: column;\n\n .labels {\n display: flex;\n margin: 0 0 8px 0;\n flex-direction: row;\n justify-content: space-between;\n\n .label {\n display: flex;\n font-size: 14px;\n font-weight: 600;\n margin-right: 8px;\n color: $verdocs-grey-1;\n }\n }\n\n .bar {\n display: flex;\n flex: 0 0 10px;\n border-radius: 5px;\n background-color: $verdocs-bg-1;\n\n .slider {\n display: flex;\n border-radius: 5px;\n background-color: $verdocs-green;\n }\n }\n}\n","import {Component, Prop, h, Host} from '@stencil/core';\n\n/*\n Display a simple progress bar in a style consistent with the design system.\n \n ```ts\n * <verdocs-progress-bar label=\"Uploading...\" showPercent={true} percent={54} />\n * ```\n /\n@Component({\n tag: 'verdocs-progress-bar',\n styleUrl: 'verdocs-progress-bar.scss',\n shadow: false,\n})\nexport class VerdocsProgressBar {\n /\n Optional label to display above the bar\n /\n @Prop() label: string = '';\n\n /\n If true, the progress percentage will be displayed above the bar.\n /\n @Prop() showPercent: boolean = false;\n\n /\n The current progress value (0-100)\n /\n @Prop() percent: number = 0;\n\n render() {\n const widthPercent = Math.ceil((100 Math.min(this.percent, 100)) / 100);\n console.log('Rendering progress bar', {widthPercent, label: this.label, showPercent: this.showPercent, percent: this.percent});\n\n return (\n <Host>\n <div class=\"labels\">\n {this.label && <div class=\"label\">{this.label}</div>}\n {this.showPercent && <div class=\"label\">{this.percent}%</div>}\n </div>\n\n <div class=\"bar\">\n <div class=\"slider\" style={{width: `${widthPercent}%`}}></div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-51c8b927.js → p-2b0d2fbd.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1f51246d.js';
 import { d as defineCustomElement$3 } from './p-f5ccf125.js';
-import { d as defineCustomElement$2 } from './p-54e4bcee.js';
-import { d as defineCustomElement$1 } from './p-08ddf0b4.js';
+import { d as defineCustomElement$2 } from './p-d5eae4db.js';
+import { d as defineCustomElement$1 } from './p-a5c69199.js';
 const verdocsSignatureDialogCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-signature-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;position:fixed;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:rgba(0, 0, 0, 0.4980392157)}verdocs-signature-dialog .dialog{width:100%;max-width:340px;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);background:#f9f9f9}verdocs-signature-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:20px 20px 0 20px;line-height:28px;font-size:20px;font-weight:500}verdocs-signature-dialog .content{font-size:14px;padding:20px}verdocs-signature-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}verdocs-signature-dialog .buttons verdocs-button{margin-left:16px}verdocs-signature-dialog canvas{background:#ffffff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:300px;height:79px;max-width:100%;-webkit-box-shadow:0 0 6px 0 rgba(0, 0, 0, 0.1215686275);box-shadow:0 0 6px 0 rgba(0, 0, 0, 0.1215686275)}verdocs-signature-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-signature-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-signature-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-signature-dialog .tabs .tab:hover{color:#55bc81}";
 const VerdocsSignatureDialogStyle0 = verdocsSignatureDialogCss;
@@ -223,7 +223,7 @@ const VerdocsSignatureDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsSig
     }
      */
     render() {
-        return (h(Host, { key: 'cac125a1ea43ba8780243580f8837dd6afb76b7d', onClick: e => this.handleCancel(e) }, h("div", { key: '8e3ac9bd2feccb69f1a38bb1c528ee77b3124064', class: "dialog" }, h("div", { key: '3f9c153c3e0f0d028654f1ca68d74070f07b8abe', class: "heading" }, "Create Your Signature"), h("div", { key: 'd7c19bd06774d6cd912eb22dbee61643cd9b0ef7', class: "content" }, h("verdocs-text-input", { key: 'fef1ca39e7f47f321a21dc51fa6ed78eb72227d6', placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), h("div", { key: '3f1e138c623eae8a4d1a031f9e9ac9872ed34dbe', class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }), h("div", { key: 'a02a7459aa1ea8e85696e66d730b5613685ce793', class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), h("div", { key: '79731a3eb6f2e4c23270473d078a0f7bc8e22fd4', class: "buttons" }, h("verdocs-button", { key: '47fef903e84cdeea7245356a78c98d80d5efb970', label: "CANCEL", size: "normal", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'd6e5bc66a5e11d4550613cdc3c24e80dbe952370', label: "Adopt & Sign", size: "normal", onClick: e => this.handleAdopt(e) }))))));
+        return (h(Host, { key: '0a694069aa680c0e4bf3f9dfe3d9dcdec95edb10', onClick: e => this.handleCancel(e) }, h("div", { key: 'b851f14b03e630f0d3e937dede97df6b06438619', class: "dialog" }, h("div", { key: '6baddfeb7ba1e4b9f698b67b3288de23160b6490', class: "heading" }, "Create Your Signature"), h("div", { key: '3b9d9ae04094094560d2ddfe021437bf5f2f1b5d', class: "content" }, h("verdocs-text-input", { key: '79ddffc07771d461fbb0f65f0a45c2ff77ba69fa', placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), h("div", { key: '0e743b62aac8d7306925d2ac58d503fe30573a7a', class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }), h("div", { key: '9c869a3dfed45ebddfd083f1cb10baf36981c279', class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), h("div", { key: 'a5b30e67c16d65a79941eb7ac8344403ccc45c6b', class: "buttons" }, h("verdocs-button", { key: 'c2ec4b0ea899dbb68b3d83a9790732cb1dc8b810', label: "CANCEL", size: "normal", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'b2ef49b243e5cf5af32b06b51f9483f4e2c7d945', label: "Adopt & Sign", size: "normal", onClick: e => this.handleAdopt(e) }))))));
     }
     static get style() { return VerdocsSignatureDialogStyle0; }
 }, [0, "verdocs-signature-dialog", {
@@ -263,4 +263,4 @@ function defineCustomElement() {
 export { VerdocsSignatureDialog as V, defineCustomElement as d };
-//# sourceMappingURL=p-51c8b927.js.map
+//# sourceMappingURL=p-2b0d2fbd.js.map

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

	@@ -1 +1 @@
1	- {"file":"p-51c8b927.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-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}

package/dist/components/{p-6a8c32a6.js → p-3077aff3.js} RENAMED Viewed

@@ -5,13 +5,13 @@ import { S as Store } from './p-33300e3a.js';
 import { d as defineCustomElement$a } from './p-f5ccf125.js';
 import { d as defineCustomElement$9 } from './p-96774726.js';
 import { d as defineCustomElement$8 } from './p-39480096.js';
-import { d as defineCustomElement$7 } from './p-54e4bcee.js';
-import { d as defineCustomElement$6 } from './p-f7dc9e74.js';
-import { d as defineCustomElement$5 } from './p-ca16a8ac.js';
-import { d as defineCustomElement$4 } from './p-8af753b4.js';
-import { d as defineCustomElement$3 } from './p-51c8b927.js';
-import { d as defineCustomElement$2 } from './p-4dbb9783.js';
-import { d as defineCustomElement$1 } from './p-08ddf0b4.js';
+import { d as defineCustomElement$7 } from './p-d5eae4db.js';
+import { d as defineCustomElement$6 } from './p-7f6c97d5.js';
+import { d as defineCustomElement$5 } from './p-acb41a2e.js';
+import { d as defineCustomElement$4 } from './p-497ceba2.js';
+import { d as defineCustomElement$3 } from './p-2b0d2fbd.js';
+import { d as defineCustomElement$2 } from './p-c696e5d7.js';
+import { d as defineCustomElement$1 } from './p-a5c69199.js';
 const verdocsFieldSignatureCss = "@-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-signature{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature 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-signature.done{border:none;opacity:1}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature.disabled img{opacity:0.5}verdocs-field-signature button{cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid rgb(204, 0, 0)}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-signature verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-signature verdocs-button-panel[data-active],verdocs-field-signature verdocs-button-panel:hover{opacity:1}verdocs-field-signature verdocs-button-panel .icon svg{fill:#333333}verdocs-field-signature verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-signature .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-signature .settings-icon svg{fill:#707ae5}verdocs-field-signature .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 VerdocsFieldSignatureStyle0 = verdocsFieldSignatureCss;
@@ -225,4 +225,4 @@ function defineCustomElement() {
 export { VerdocsFieldSignature as V, defineCustomElement as d };
-//# sourceMappingURL=p-6a8c32a6.js.map
+//# sourceMappingURL=p-3077aff3.js.map

package/dist/components/{p-6a8c32a6.js.map → p-3077aff3.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-6a8c32a6.js","mappings":"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","names":[],"sources":["src/components/fields/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","src/components/fields/verdocs-field-signature/verdocs-field-signature.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-signature {\n font-family: $verdocs-primary-font;\n width: 83px;\n height: 36px;\n display: block;\n font-size: 11px;\n position: relative;\n scroll-margin: 20px 0;\n letter-spacing: 0.3px;\n background-color: transparent;\n transform-origin: bottom left;\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n 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 &.done {\n border: none;\n opacity: 1;\n }\n\n img {\n display: block;\n max-width: 100%;\n max-height: 100%;\n }\n\n &.disabled img {\n opacity: 0.5;\n }\n\n button {\n // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n cursor: inherit;\n\n box-sizing: border-box;\n border: none;\n color: rgba(0, 0, 0, 0.87);\n font-weight: 500;\n transform-origin: 0 0;\n height: 100%;\n width: 100%;\n background: none;\n font-size: 11px;\n\n &.hide {\n display: none;\n }\n }\n\n &.required {\n border: 1px solid rgb(204, 0, 0);\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.4s 1;\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n\n .settings-icon {\n position: absolute;\n top: -3px;\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, h, Host, Prop, Event, EventEmitter, Method, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/*\n Displays a signature field. If a signature already exists, it will be displayed and the field\n * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will\n * show a dialog to adopt a signature.\n \n NOTE: When signature fields are completed they will be filled with a signature \"stamp\".\n * This requires operation against a live, valid envelope. If you are testing this component\n * in Storybook, it will not be visible here.\n /\n@Component({\n tag: 'verdocs-field-signature',\n styleUrl: 'verdocs-field-signature.scss',\n shadow: false,\n})\nexport class VerdocsFieldSignature {\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, the signature creation dialog will be initialized with this text.\n /\n @Prop({reflect: true}) name?: string = '';\n\n /\n If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n /\n @Prop({reflect: true}) disabled?: 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 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, 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 /\n Event emitted when the field has changed.\n /\n @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n /\n Event fired on every character entered into / deleted from the field.\n /\n @Event({composed: true}) settingsPress: EventEmitter;\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 @State() showingProperties?: boolean = false;\n @State() focused?: boolean = false;\n\n @Method() async focusField() {\n this.handleShow();\n }\n\n @State()\n tempSignature: string = '';\n\n private dialog?: any;\n\n hideDialog() {\n this.dialog?.remove();\n this.dialog = null;\n this.focused = false;\n }\n\n handleAdopt(e: any) {\n console.log('[SIGNATURE] Adopted signature');\n this.tempSignature = e.detail;\n this.fieldChange?.emit(this.tempSignature);\n this.hideDialog();\n }\n\n handleShow() {\n this.dialog = document.createElement('verdocs-signature-dialog');\n this.dialog.setAttribute('name', this.name);\n // this.dialog.setAttribute('roleindex', this.roleindex);\n this.dialog.addEventListener('exit', () => this.hideDialog());\n this.dialog.addEventListener('next', (e: any) => this.handleAdopt(e));\n document.body.append(this.dialog);\n this.focused = true;\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 this.showingProperties = false;\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 {required = false, value = '', label = '', settings = {}} = field \|\| {};\n const {base64} = settings;\n const backgroundColor = getRGBA(index);\n\n if (done) {\n return <Host class={{done}}>{value && <img src={base64} alt=\"\" />}</Host>;\n }\n\n return (\n <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n {label && <label>{label}</label>}\n\n {base64 ? <img src={base64} alt=\"\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\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.hideSettingsPanel()}\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={\"Signature fields capture a recipient's signature on a document.\"}\n />\n </verdocs-portal>\n )}\n </Fragment>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-3077aff3.js","mappings":"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","names":[],"sources":["src/components/fields/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","src/components/fields/verdocs-field-signature/verdocs-field-signature.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-signature {\n font-family: $verdocs-primary-font;\n width: 83px;\n height: 36px;\n display: block;\n font-size: 11px;\n position: relative;\n scroll-margin: 20px 0;\n letter-spacing: 0.3px;\n background-color: transparent;\n transform-origin: bottom left;\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n 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 &.done {\n border: none;\n opacity: 1;\n }\n\n img {\n display: block;\n max-width: 100%;\n max-height: 100%;\n }\n\n &.disabled img {\n opacity: 0.5;\n }\n\n button {\n // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n cursor: inherit;\n\n box-sizing: border-box;\n border: none;\n color: rgba(0, 0, 0, 0.87);\n font-weight: 500;\n transform-origin: 0 0;\n height: 100%;\n width: 100%;\n background: none;\n font-size: 11px;\n\n &.hide {\n display: none;\n }\n }\n\n &.required {\n border: 1px solid rgb(204, 0, 0);\n }\n\n &.focused {\n animation: verdocs-field-pulse 0.4s 1;\n }\n\n verdocs-button-panel {\n top: -3px;\n left: -2px;\n opacity: 0.5;\n z-index: 1000;\n cursor: pointer;\n position: absolute;\n transform: scale(0.6);\n\n &[data-active],\n &:hover {\n opacity: 1;\n }\n\n .icon {\n svg {\n fill: #333333;\n }\n\n &:hover {\n svg {\n fill: #000000;\n }\n }\n }\n }\n\n .settings-icon {\n position: absolute;\n top: -3px;\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, h, Host, Prop, Event, EventEmitter, Method, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/*\n Displays a signature field. If a signature already exists, it will be displayed and the field\n * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will\n * show a dialog to adopt a signature.\n \n NOTE: When signature fields are completed they will be filled with a signature \"stamp\".\n * This requires operation against a live, valid envelope. If you are testing this component\n * in Storybook, it will not be visible here.\n /\n@Component({\n tag: 'verdocs-field-signature',\n styleUrl: 'verdocs-field-signature.scss',\n shadow: false,\n})\nexport class VerdocsFieldSignature {\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, the signature creation dialog will be initialized with this text.\n /\n @Prop({reflect: true}) name?: string = '';\n\n /\n If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n /\n @Prop({reflect: true}) disabled?: 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 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, 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 /\n Event emitted when the field has changed.\n /\n @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n /\n Event fired on every character entered into / deleted from the field.\n /\n @Event({composed: true}) settingsPress: EventEmitter;\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 @State() showingProperties?: boolean = false;\n @State() focused?: boolean = false;\n\n @Method() async focusField() {\n this.handleShow();\n }\n\n @State()\n tempSignature: string = '';\n\n private dialog?: any;\n\n hideDialog() {\n this.dialog?.remove();\n this.dialog = null;\n this.focused = false;\n }\n\n handleAdopt(e: any) {\n console.log('[SIGNATURE] Adopted signature');\n this.tempSignature = e.detail;\n this.fieldChange?.emit(this.tempSignature);\n this.hideDialog();\n }\n\n handleShow() {\n this.dialog = document.createElement('verdocs-signature-dialog');\n this.dialog.setAttribute('name', this.name);\n // this.dialog.setAttribute('roleindex', this.roleindex);\n this.dialog.addEventListener('exit', () => this.hideDialog());\n this.dialog.addEventListener('next', (e: any) => this.handleAdopt(e));\n document.body.append(this.dialog);\n this.focused = true;\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 this.showingProperties = false;\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 {required = false, value = '', label = '', settings = {}} = field \|\| {};\n const {base64} = settings;\n const backgroundColor = getRGBA(index);\n\n if (done) {\n return <Host class={{done}}>{value && <img src={base64} alt=\"\" />}</Host>;\n }\n\n return (\n <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n {label && <label>{label}</label>}\n\n {base64 ? <img src={base64} alt=\"\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\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.hideSettingsPanel()}\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={\"Signature fields capture a recipient's signature on a document.\"}\n />\n </verdocs-portal>\n )}\n </Fragment>\n )}\n </Host>\n );\n }\n}\n"],"version":3}