npm - @verdocs/web-sdk - Versions diffs - 5.0.17 → 5.0.18 - Mend

@verdocs/web-sdk 5.0.17 → 5.0.18

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

package/dist/collection/components/fields/verdocs-field-date/verdocs-field-date.js CHANGED Viewed

@@ -37,6 +37,7 @@ export class VerdocsFieldDate {
         }, 500);
     }
     componentDidLoad() {
+        console.log('Activating date picker', this.containerId, document.getElementById(this.containerId));
         this.picker = new AirDatepicker(`#${this.containerId}`, {
             locale: localeEn,
             isMobile: true,
@@ -64,6 +65,7 @@ export class VerdocsFieldDate {
     // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
     render() {
         const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        console.log('Rendering date picker', source, sourceid, fieldname);
         const { index, field } = Store.getField(source, sourceid, fieldname, this.field);
         const { required = false, placeholder = 'Date...', value = '', label = '' } = field || {};
         const backgroundColor = getRGBA(index);
@@ -71,7 +73,7 @@ export class VerdocsFieldDate {
         if (this.done) {
             return h(Host, { class: { done } }, formattedValue);
         }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), h("input", { name: fieldname, class: "input-el", type: "text", value: formattedValue, id: fieldname, disabled: disabled, placeholder: placeholder, onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), h("input", { name: fieldname, class: "input-el", type: "text", value: formattedValue, id: this.containerId, disabled: disabled, placeholder: placeholder, onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
             } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {

package/dist/collection/components/fields/verdocs-field-date/verdocs-field-date.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-field-date.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-date/verdocs-field-date.tsx"],"names":[],"mappings":"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","sourcesContent":["import {format} from 'date-fns';\nimport {getRGBA} from '@verdocs/js-sdk';\nimport AirDatepicker from 'air-datepicker';\nimport localeEn from 'air-datepicker/locale/en';\nimport type {ITemplateField} from '@verdocs/js-sdk';\nimport {Component, Element, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {FORMAT_DATE} from '../../../utils/Types';\nimport {Store} from '../../../utils/Datastore';\n\n/*\n Displays a date field. When tapped or clicked, the input element will display a date picker component.\n /\n@Component({\n tag: 'verdocs-field-date',\n styleUrl: 'verdocs-field-date.scss',\n shadow: false,\n})\nexport class VerdocsFieldDate {\n @Element()\n private hostEl: HTMLInputElement;\n\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 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 If set, the field will be be scaled vertically by this factor.\n /\n @Prop() field?: ITemplateField;\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() containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;\n\n @State() showingProperties?: boolean = false;\n\n @Method()\n async focusField() {\n // Our input field is fake, so we fake the flash too\n this.focused = true;\n this.picker?.show();\n setTimeout(() => {\n this.focused = false;\n }, 500);\n }\n\n picker: AirDatepicker<HTMLElement> \| null = null;\n\n componentDidLoad() {\n this.picker = new AirDatepicker<HTMLElement>(`#${this.containerId}`, {\n locale: localeEn,\n isMobile: true,\n autoClose: true,\n onShow: () => (this.focused = true),\n onHide: () => (this.focused = false),\n onSelect: ({date, formattedDate}) => {\n const event = new CustomEvent('fieldChange', {detail: {date, formattedDate}});\n this.hostEl.dispatchEvent(event);\n },\n });\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 @State() focused?: boolean = false;\n\n // NOTE: We don't use a \"date\" field here because browsers vary widely in their formatting of it.\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, placeholder = 'Date...', value = '', label = ''} = field \|\| {};\n const backgroundColor = getRGBA(index);\n\n const formattedValue = value ? format(new Date(value), FORMAT_DATE) : '';\n\n if (this.done) {\n return <Host class={{done}}>{formattedValue}</Host>;\n }\n\n return (\n <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n {label && <label>{label}</label>}\n\n <input\n name={fieldname}\n class=\"input-el\"\n type=\"text\"\n value={formattedValue}\n id={fieldname}\n disabled={disabled}\n placeholder={placeholder}\n onFocus={() => (this.focused = true)}\n onBlur={() => (this.focused = false)}\n />\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-${field.name}`} 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={'Date fields allow the user to select a date.'}\n />\n </verdocs-portal>\n )}\n </Fragment>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"verdocs-field-date.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-date/verdocs-field-date.tsx"],"names":[],"mappings":"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","sourcesContent":["import {format} from 'date-fns';\nimport {getRGBA} from '@verdocs/js-sdk';\nimport AirDatepicker from 'air-datepicker';\nimport localeEn from 'air-datepicker/locale/en';\nimport type {ITemplateField} from '@verdocs/js-sdk';\nimport {Component, Element, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {FORMAT_DATE} from '../../../utils/Types';\nimport {Store} from '../../../utils/Datastore';\n\n/*\n Displays a date field. When tapped or clicked, the input element will display a date picker component.\n /\n@Component({\n tag: 'verdocs-field-date',\n styleUrl: 'verdocs-field-date.scss',\n shadow: false,\n})\nexport class VerdocsFieldDate {\n @Element()\n private hostEl: HTMLInputElement;\n\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 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 If set, the field will be be scaled vertically by this factor.\n /\n @Prop() field?: ITemplateField;\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() containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;\n\n @State() showingProperties?: boolean = false;\n\n @Method()\n async focusField() {\n // Our input field is fake, so we fake the flash too\n this.focused = true;\n this.picker?.show();\n setTimeout(() => {\n this.focused = false;\n }, 500);\n }\n\n picker: AirDatepicker<HTMLElement> \| null = null;\n\n componentDidLoad() {\n console.log('Activating date picker', this.containerId, document.getElementById(this.containerId));\n this.picker = new AirDatepicker<HTMLElement>(`#${this.containerId}`, {\n locale: localeEn,\n isMobile: true,\n autoClose: true,\n onShow: () => (this.focused = true),\n onHide: () => (this.focused = false),\n onSelect: ({date, formattedDate}) => {\n const event = new CustomEvent('fieldChange', {detail: {date, formattedDate}});\n this.hostEl.dispatchEvent(event);\n },\n });\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 @State() focused?: boolean = false;\n\n // NOTE: We don't use a \"date\" field here because browsers vary widely in their formatting of it.\n render() {\n const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n console.log('Rendering date picker', source, sourceid, fieldname);\n\n const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n const {required = false, placeholder = 'Date...', value = '', label = ''} = field \|\| {};\n const backgroundColor = getRGBA(index);\n\n const formattedValue = value ? format(new Date(value), FORMAT_DATE) : '';\n\n if (this.done) {\n return <Host class={{done}}>{formattedValue}</Host>;\n }\n\n return (\n <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n {label && <label>{label}</label>}\n\n <input\n name={fieldname}\n class=\"input-el\"\n type=\"text\"\n value={formattedValue}\n id={this.containerId}\n disabled={disabled}\n placeholder={placeholder}\n onFocus={() => (this.focused = true)}\n onBlur={() => (this.focused = false)}\n />\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-${field.name}`} 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={'Date fields allow the user to select a date.'}\n />\n </verdocs-portal>\n )}\n </Fragment>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/fields/verdocs-field-signature/verdocs-field-signature.js CHANGED Viewed

@@ -70,7 +70,6 @@ export class VerdocsFieldSignature {
     render() {
         const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
         const { index, field } = Store.getField(source, sourceid, fieldname, this.field);
-        console.log('Signature field', index, getRGBA(index), field);
         const { required = false, value = '', label = '', settings = {} } = field || {};
         const { base64 } = settings;
         const backgroundColor = getRGBA(index);

package/dist/collection/components/fields/verdocs-field-signature/verdocs-field-signature.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-field-signature.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-signature/verdocs-field-signature.tsx"],"names":[],"mappings":"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","sourcesContent":["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 console.log('Signature field', index, getRGBA(index), 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"]}
1	+ {"version":3,"file":"verdocs-field-signature.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-signature/verdocs-field-signature.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.js CHANGED Viewed

@@ -106,12 +106,10 @@ export class VerdocsFieldTextbox {
     }
     render() {
         const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
-        console.log('Rendering textbox', source, sourceid, fieldname);
         const { index, field } = Store.getField(source, sourceid, fieldname, this.field);
-        console.log('Textbox', index, getRGBA(index), field);
         let { required = false, placeholder = '', label = '', width = 150, default: value = '', multiline = false } = field || {};
         const backgroundColor = getRGBA(index);
-        // TODO: Consolidate value/defaultValue handling between template and envelope fields
+        // TODO: Consolidate value/defaultValue handling between template and envelope fields.
         if (field === null || field === void 0 ? void 0 : field.value) {
             value = field === null || field === void 0 ? void 0 : field.value;
         }

package/dist/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verdocs-field-textbox.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-textbox/verdocs-field-textbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs';\nimport {getRGBA, IEnvelopeField, ITemplateField, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Element, Prop, Method, Event, EventEmitter, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/*\n Display a simple 1-line text input field.\n /\n@Component({\n tag: 'verdocs-field-textbox',\n styleUrl: 'verdocs-field-textbox.scss',\n shadow: false,\n})\nexport class VerdocsFieldTextbox {\n @Element() el: HTMLElement;\n private inputEl: HTMLInputElement \| HTMLTextAreaElement;\n\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 to support \"preview\" modes where all fields are disabled.\n /\n @Prop({reflect: true}) disabled?: boolean = false;\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}) multiline?: 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 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()\n async focusField() {\n this.inputEl.focus();\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 componentDidRender() {\n interact.dynamicDrop(true);\n\n if (this.editable) {\n interact(this.el).resizable({\n edges: {\n top: '.edge-top',\n left: '.edge-left',\n bottom: '.edge-bottom',\n right: '.edge-right',\n },\n modifiers: [\n interact.modifiers.restrictSize({\n min: {width: 30, height: 15},\n }),\n ],\n listeners: {\n start: this.handleResizeStart.bind(this),\n move: this.handleResize.bind(this),\n end: this.handleResizeEnd.bind(this),\n },\n });\n }\n }\n\n handleResizeStart(e: any) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n handleResize(e: any) {\n let {width, height} = e.rect;\n\n const dX = e.deltaRect.left;\n const dY = e.deltaRect.bottom;\n const currentLeft = parseFloat(e.target.style.left);\n const currentBottom = parseFloat(e.target.style.bottom);\n\n width /= this.xscale;\n height /= this.yscale;\n\n Object.assign(e.target.style, {\n width: `${width}px`,\n height: `${height}px`,\n left: `${currentLeft + dX}px`,\n bottom: `${currentBottom - dY}px`,\n });\n }\n\n handleResizeEnd(e: any) {\n const {sourceid, fieldname} = this;\n\n const width = Math.round(parseFloat(e.target.style.width));\n let height = Math.round(parseFloat(e.target.style.height));\n\n if (height < 20) {\n height = 15;\n }\n const multiline = height > 15;\n\n updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, {width, height, multiline})\n .then(async updatedField => {\n const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n const newTemplate = JSON.parse(JSON.stringify(template));\n const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);\n if (fieldIndex > -1) {\n newTemplate.fields[fieldIndex] = updatedField;\n }\n Store.updateTemplate(this.sourceid, newTemplate);\n\n this.settingsChanged?.emit({fieldName: fieldname, field: updatedField});\n Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n })\n .catch(e => console.log('Field update failed', e));\n }\n\n render() {\n const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n console.log('Rendering textbox', source, sourceid, fieldname);\n const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n console.log('Textbox', index, getRGBA(index), field);\n let {required = false, placeholder = '', label = '', width = 150, default: value = '', multiline = false} = field \|\| {};\n const backgroundColor = getRGBA(index);\n\n // TODO: Consolidate value/defaultValue handling between template and envelope fields\n if ((field as any)?.value) {\n value = (field as any)?.value;\n }\n\n // TODO: This is an outdated technique from the old system. We should compute it.\n const maxlength = width / 5;\n\n if (done) {\n return <Host class={{done}}>{value}</Host>;\n }\n\n return (\n <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n {editable && <div class=\"edge-top\" />}\n {editable && <div class=\"edge-right\" />}\n {editable && <div class=\"edge-left\" />}\n {editable && <div class=\"edge-bottom\" />}\n\n {label && <label>{label}</label>}\n\n {multiline ? (\n <textarea\n name={fieldname}\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n ref={el => (this.inputEl = el)}\n onFocus={() => (this.focused = true)}\n onBlur={() => (this.focused = false)}\n >\n {value}\n </textarea>\n ) : (\n <input\n type=\"text\"\n name={fieldname}\n value={value}\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n maxlength={maxlength}\n ref={el => (this.inputEl = el)}\n onFocus={() => (this.focused = true)}\n onBlur={() => (this.focused = false)}\n />\n )}\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={\n 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the \"name\" field.<br /><br />If marked required, the participant must complete the field before proceeding.'\n }\n />\n </verdocs-portal>\n )}\n </Fragment>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"verdocs-field-textbox.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-textbox/verdocs-field-textbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs';\nimport {getRGBA, IEnvelopeField, ITemplateField, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Element, Prop, Method, Event, EventEmitter, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/*\n Display a simple 1-line text input field.\n /\n@Component({\n tag: 'verdocs-field-textbox',\n styleUrl: 'verdocs-field-textbox.scss',\n shadow: false,\n})\nexport class VerdocsFieldTextbox {\n @Element() el: HTMLElement;\n private inputEl: HTMLInputElement \| HTMLTextAreaElement;\n\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 to support \"preview\" modes where all fields are disabled.\n /\n @Prop({reflect: true}) disabled?: boolean = false;\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}) multiline?: 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 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()\n async focusField() {\n this.inputEl.focus();\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 componentDidRender() {\n interact.dynamicDrop(true);\n\n if (this.editable) {\n interact(this.el).resizable({\n edges: {\n top: '.edge-top',\n left: '.edge-left',\n bottom: '.edge-bottom',\n right: '.edge-right',\n },\n modifiers: [\n interact.modifiers.restrictSize({\n min: {width: 30, height: 15},\n }),\n ],\n listeners: {\n start: this.handleResizeStart.bind(this),\n move: this.handleResize.bind(this),\n end: this.handleResizeEnd.bind(this),\n },\n });\n }\n }\n\n handleResizeStart(e: any) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n handleResize(e: any) {\n let {width, height} = e.rect;\n\n const dX = e.deltaRect.left;\n const dY = e.deltaRect.bottom;\n const currentLeft = parseFloat(e.target.style.left);\n const currentBottom = parseFloat(e.target.style.bottom);\n\n width /= this.xscale;\n height /= this.yscale;\n\n Object.assign(e.target.style, {\n width: `${width}px`,\n height: `${height}px`,\n left: `${currentLeft + dX}px`,\n bottom: `${currentBottom - dY}px`,\n });\n }\n\n handleResizeEnd(e: any) {\n const {sourceid, fieldname} = this;\n\n const width = Math.round(parseFloat(e.target.style.width));\n let height = Math.round(parseFloat(e.target.style.height));\n\n if (height < 20) {\n height = 15;\n }\n const multiline = height > 15;\n\n updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, {width, height, multiline})\n .then(async updatedField => {\n const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n const newTemplate = JSON.parse(JSON.stringify(template));\n const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);\n if (fieldIndex > -1) {\n newTemplate.fields[fieldIndex] = updatedField;\n }\n Store.updateTemplate(this.sourceid, newTemplate);\n\n this.settingsChanged?.emit({fieldName: fieldname, field: updatedField});\n Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n })\n .catch(e => console.log('Field update failed', e));\n }\n\n render() {\n const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n let {required = false, placeholder = '', label = '', width = 150, default: value = '', multiline = false} = field \|\| {};\n const backgroundColor = getRGBA(index);\n\n // TODO: Consolidate value/defaultValue handling between template and envelope fields.\n if ((field as any)?.value) {\n value = (field as any)?.value;\n }\n\n // TODO: This is an outdated technique from the old system. We should compute it.\n const maxlength = width / 5;\n\n if (done) {\n return <Host class={{done}}>{value}</Host>;\n }\n\n return (\n <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n {editable && <div class=\"edge-top\" />}\n {editable && <div class=\"edge-right\" />}\n {editable && <div class=\"edge-left\" />}\n {editable && <div class=\"edge-bottom\" />}\n\n {label && <label>{label}</label>}\n\n {multiline ? (\n <textarea\n name={fieldname}\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n ref={el => (this.inputEl = el)}\n onFocus={() => (this.focused = true)}\n onBlur={() => (this.focused = false)}\n >\n {value}\n </textarea>\n ) : (\n <input\n type=\"text\"\n name={fieldname}\n value={value}\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n maxlength={maxlength}\n ref={el => (this.inputEl = el)}\n onFocus={() => (this.focused = true)}\n onBlur={() => (this.focused = false)}\n />\n )}\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={\n 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the \"name\" field.<br /><br />If marked required, the participant must complete the field before proceeding.'\n }\n />\n </verdocs-portal>\n )}\n </Fragment>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/components/{p-c76fab71.js → p-13260b9f.js} RENAMED Viewed

@@ -7,13 +7,13 @@ import { d as defineCustomElement$m } from './p-3201d529.js';
 import { d as defineCustomElement$l } from './p-84ae0283.js';
 import { d as defineCustomElement$k } from './p-2ddf4d5b.js';
 import { d as defineCustomElement$j } from './p-14c80ae8.js';
-import { d as defineCustomElement$i } from './p-176a07b2.js';
+import { d as defineCustomElement$i } from './p-c9bed8f7.js';
 import { d as defineCustomElement$h } from './p-d8340641.js';
 import { d as defineCustomElement$g } from './p-211fa3e2.js';
 import { d as defineCustomElement$f } from './p-261521bc.js';
-import { d as defineCustomElement$e } from './p-5e378f0e.js';
+import { d as defineCustomElement$e } from './p-bcc8771f.js';
 import { d as defineCustomElement$d } from './p-d9a2e920.js';
-import { d as defineCustomElement$c } from './p-c1159428.js';
+import { d as defineCustomElement$c } from './p-43fa069d.js';
 import { d as defineCustomElement$b } from './p-5182136e.js';
 import { d as defineCustomElement$a } from './p-7f32e087.js';
 import { d as defineCustomElement$9 } from './p-9c0b30f8.js';
@@ -342,4 +342,4 @@ function defineCustomElement() {
 export { VerdocsTemplateDocumentPage as V, defineCustomElement as d };
-//# sourceMappingURL=p-c76fab71.js.map
+//# sourceMappingURL=p-13260b9f.js.map

package/dist/components/{p-c76fab71.js.map → p-13260b9f.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-c76fab71.js","mappings":"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","names":[],"sources":["src/components/templates/verdocs-template-document-page/verdocs-template-document-page.scss?tag=verdocs-template-document-page","src/components/templates/verdocs-template-document-page/verdocs-template-document-page.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-document-page {\n width: 100%;\n position: relative;\n\n .verdocs-template-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 .placeholder {\n opacity: 0.1;\n width: 612px;\n height: 792px;\n box-shadow: 0 0 10px 5px #0000000f;\n }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getTemplate, getTemplateDocumentPageDisplayUri, type ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element, Fragment} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {getControlStyles, getFieldId} from '../../../utils/utils';\nimport {throttle} from '../../../utils/utils';\nimport {Store} from '../../../utils/Datastore';\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-template-document-page',\n styleUrl: 'verdocs-template-document-page.scss',\n shadow: false,\n})\nexport class VerdocsTemplateDocumentPage {\n private templateListenerId = null;\n private resizeObserver: ResizeObserver;\n\n @Element() container: HTMLElement;\n\n /\n The endpoint to load from.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n Whether the fields should be editable (Builder)\n /\n @Prop() editable = false;\n\n /\n Whether the fields should be disabled (Builder)\n /\n @Prop() disabled = false;\n\n /\n Whether the field are interactable (done/submitted disables this)\n /\n @Prop() done = false;\n\n /\n The ID of the template the document is for.\n /\n @Prop() templateId: 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-document-page-ker2fr1p9\">\n * <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n * <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n * </div>\n * ```\n /\n @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\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-document-page-${Math.random().toString(36).substring(2, 11)}`;\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 @State() skipFirstNotification = true;\n @State() pageDisplayUri = '';\n @State() xScale = 1;\n @State() yScale = 1;\n\n @State() loading = true;\n @State() template: ITemplate \| null = null;\n\n async componentWillLoad() {\n this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber);\n this.listenToTemplate();\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 componentDidUpdate() {\n // This is fired when fields are updated and triggers the parent to re-attach behaviors like drag-and-drop\n this.notifyRenderedSize();\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\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 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 const xScale = this.renderedWidth / this.virtualWidth;\n if (this.xScale !== xScale) {\n this.xScale = xScale;\n }\n\n const yScale = this.renderedHeight / this.virtualHeight;\n if (this.yScale !== yScale) {\n this.yScale = yScale;\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,\n yScale,\n });\n }\n\n render() {\n if (this.loading) {\n return (\n <Host>\n <img src=\"https://public-assets.verdocs.com/loading-placeholder.png\" class=\"placeholder\" alt=\"Placeholder page\" />\n </Host>\n );\n }\n\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-template-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}}>\n {layer.name === 'controls' &&\n (this.template?.fields \|\| [])\n .filter(field => field && field.page === this.pageNumber)\n .map(field => {\n const id = getFieldId(field);\n let {name, type, multiline} = field;\n const {xScale, yScale, templateId, editable, disabled, done, pageNumber} = this;\n if (field['setting']?.leading > 0 \|\| field['settings']?.leading > 0) {\n type = 'textarea';\n multiline = true;\n }\n switch (type as any) {\n case 'textbox':\n return (\n <verdocs-field-textbox\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n multiline={multiline}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'textarea':\n return (\n <verdocs-field-textarea\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'date':\n return (\n <verdocs-field-date\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'attachment':\n return (\n <verdocs-field-attachment\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'dropdown':\n return (\n <verdocs-field-dropdown\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'initial':\n return (\n <verdocs-field-initial\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'signature':\n return (\n <verdocs-field-signature\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, this.xScale, this.yScale)}\n />\n );\n case 'timestamp':\n return (\n <verdocs-field-timestamp\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'checkbox':\n return (\n <verdocs-field-checkbox\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'radio':\n return (\n <verdocs-field-radio\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n default:\n return <Fragment>{name}</Fragment>;\n }\n })}\n </div>\n ) : this.pageDisplayUri ? (\n <img\n class=\"verdocs-template-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-13260b9f.js","mappings":"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","names":[],"sources":["src/components/templates/verdocs-template-document-page/verdocs-template-document-page.scss?tag=verdocs-template-document-page","src/components/templates/verdocs-template-document-page/verdocs-template-document-page.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-document-page {\n width: 100%;\n position: relative;\n\n .verdocs-template-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 .placeholder {\n opacity: 0.1;\n width: 612px;\n height: 792px;\n box-shadow: 0 0 10px 5px #0000000f;\n }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getTemplate, getTemplateDocumentPageDisplayUri, type ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element, Fragment} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {getControlStyles, getFieldId} from '../../../utils/utils';\nimport {throttle} from '../../../utils/utils';\nimport {Store} from '../../../utils/Datastore';\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-template-document-page',\n styleUrl: 'verdocs-template-document-page.scss',\n shadow: false,\n})\nexport class VerdocsTemplateDocumentPage {\n private templateListenerId = null;\n private resizeObserver: ResizeObserver;\n\n @Element() container: HTMLElement;\n\n /\n The endpoint to load from.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n Whether the fields should be editable (Builder)\n /\n @Prop() editable = false;\n\n /\n Whether the fields should be disabled (Builder)\n /\n @Prop() disabled = false;\n\n /\n Whether the field are interactable (done/submitted disables this)\n /\n @Prop() done = false;\n\n /\n The ID of the template the document is for.\n /\n @Prop() templateId: 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-document-page-ker2fr1p9\">\n * <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n * <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n * </div>\n * ```\n /\n @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\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-document-page-${Math.random().toString(36).substring(2, 11)}`;\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 @State() skipFirstNotification = true;\n @State() pageDisplayUri = '';\n @State() xScale = 1;\n @State() yScale = 1;\n\n @State() loading = true;\n @State() template: ITemplate \| null = null;\n\n async componentWillLoad() {\n this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber);\n this.listenToTemplate();\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 componentDidUpdate() {\n // This is fired when fields are updated and triggers the parent to re-attach behaviors like drag-and-drop\n this.notifyRenderedSize();\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\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 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 const xScale = this.renderedWidth / this.virtualWidth;\n if (this.xScale !== xScale) {\n this.xScale = xScale;\n }\n\n const yScale = this.renderedHeight / this.virtualHeight;\n if (this.yScale !== yScale) {\n this.yScale = yScale;\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,\n yScale,\n });\n }\n\n render() {\n if (this.loading) {\n return (\n <Host>\n <img src=\"https://public-assets.verdocs.com/loading-placeholder.png\" class=\"placeholder\" alt=\"Placeholder page\" />\n </Host>\n );\n }\n\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-template-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}}>\n {layer.name === 'controls' &&\n (this.template?.fields \|\| [])\n .filter(field => field && field.page === this.pageNumber)\n .map(field => {\n const id = getFieldId(field);\n let {name, type, multiline} = field;\n const {xScale, yScale, templateId, editable, disabled, done, pageNumber} = this;\n if (field['setting']?.leading > 0 \|\| field['settings']?.leading > 0) {\n type = 'textarea';\n multiline = true;\n }\n switch (type as any) {\n case 'textbox':\n return (\n <verdocs-field-textbox\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n multiline={multiline}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'textarea':\n return (\n <verdocs-field-textarea\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'date':\n return (\n <verdocs-field-date\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'attachment':\n return (\n <verdocs-field-attachment\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'dropdown':\n return (\n <verdocs-field-dropdown\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'initial':\n return (\n <verdocs-field-initial\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'signature':\n return (\n <verdocs-field-signature\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, this.xScale, this.yScale)}\n />\n );\n case 'timestamp':\n return (\n <verdocs-field-timestamp\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'checkbox':\n return (\n <verdocs-field-checkbox\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n case 'radio':\n return (\n <verdocs-field-radio\n id={id}\n fieldname={name}\n source=\"template\"\n sourceid={templateId}\n editable={editable}\n disabled={disabled}\n done={done}\n xscale={xScale}\n yscale={yScale}\n pagenumber={pageNumber}\n style={getControlStyles(field, xScale, yScale)}\n />\n );\n default:\n return <Fragment>{name}</Fragment>;\n }\n })}\n </div>\n ) : this.pageDisplayUri ? (\n <img\n class=\"verdocs-template-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-c1159428.js → p-43fa069d.js} RENAMED Viewed

@@ -120,12 +120,10 @@ const VerdocsFieldTextbox = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldT
     }
     render() {
         const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
-        console.log('Rendering textbox', source, sourceid, fieldname);
         const { index, field } = Store.getField(source, sourceid, fieldname, this.field);
-        console.log('Textbox', index, getRGBA(index), field);
         let { required = false, placeholder = '', label = '', width = 150, default: value = '', multiline = false } = field || {};
         const backgroundColor = getRGBA(index);
-        // TODO: Consolidate value/defaultValue handling between template and envelope fields
+        // TODO: Consolidate value/defaultValue handling between template and envelope fields.
         if (field === null || field === void 0 ? void 0 : field.value) {
             value = field === null || field === void 0 ? void 0 : field.value;
         }
@@ -229,4 +227,4 @@ function defineCustomElement() {
 export { VerdocsFieldTextbox as V, defineCustomElement as d };
-//# sourceMappingURL=p-c1159428.js.map
+//# sourceMappingURL=p-43fa069d.js.map

package/dist/components/p-43fa069d.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-43fa069d.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,mpGAAmpG,CAAC;AACnrG,kCAAe,sBAAsB;;MCaxB,mBAAmB;;;;;;sBAO2B,UAAU;wBAKzB,EAAE;yBAKD,EAAE;qBAMM,IAAI;wBAKX,KAAK;yBAKJ,KAAK;wBAMN,KAAK;wBAKL,KAAK;oBAKT,KAAK;sBAKJ,CAAC;sBAKD,CAAC;0BAKG,CAAC;iCAYP,KAAK;uBACf,KAAK;;IAGlC,MAAM,UAAU;QACd,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB;IAGD,MAAM,iBAAiB;QACrB,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,0BAA0B,IAAI,CAAC,SAAS,EAAE,CAAQ,CAAC;QACjG,IAAI,aAAa,IAAI,aAAa,CAAC,SAAS,EAAE;YAC5C,aAAa,CAAC,SAAS,EAAE,CAAC;SAC3B;KACF;IAGD,MAAM,iBAAiB;QACrB,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,0BAA0B,IAAI,CAAC,SAAS,EAAE,CAAQ,CAAC;QACjG,IAAI,aAAa,IAAI,aAAa,CAAC,SAAS,EAAE;YAC5C,aAAa,CAAC,SAAS,EAAE,CAAC;SAC3B;QACD,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;KAChC;IAED,kBAAkB;QAChB,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAE3B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC;gBAC1B,KAAK,EAAE;oBACL,GAAG,EAAE,WAAW;oBAChB,IAAI,EAAE,YAAY;oBAClB,MAAM,EAAE,cAAc;oBACtB,KAAK,EAAE,aAAa;iBACrB;gBACD,SAAS,EAAE;oBACT,QAAQ,CAAC,SAAS,CAAC,YAAY,CAAC;wBAC9B,GAAG,EAAE,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAC;qBAC7B,CAAC;iBACH;gBACD,SAAS,EAAE;oBACT,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;oBACxC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;oBAClC,GAAG,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;iBACrC;aACF,CAAC,CAAC;SACJ;KACF;IAED,iBAAiB,CAAC,CAAM;QACtB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;KACrB;IAED,YAAY,CAAC,CAAM;QACjB,IAAI,EAAC,KAAK,EAAE,MAAM,EAAC,GAAG,CAAC,CAAC,IAAI,CAAC;QAE7B,MAAM,EAAE,GAAG,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC;QAC5B,MAAM,EAAE,GAAG,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC;QAC9B,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACpD,MAAM,aAAa,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAExD,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC;QACrB,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC;QAEtB,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE;YAC5B,KAAK,EAAE,GAAG,KAAK,IAAI;YACnB,MAAM,EAAE,GAAG,MAAM,IAAI;YACrB,IAAI,EAAE,GAAG,WAAW,GAAG,EAAE,IAAI;YAC7B,MAAM,EAAE,GAAG,aAAa,GAAG,EAAE,IAAI;SAClC,CAAC,CAAC;KACJ;IAED,eAAe,CAAC,CAAM;QACpB,MAAM,EAAC,QAAQ,EAAE,SAAS,EAAC,GAAG,IAAI,CAAC;QAEnC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC3D,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;QAE3D,IAAI,MAAM,GAAG,EAAE,EAAE;YACf,MAAM,GAAG,EAAE,CAAC;SACb;QACD,MAAM,SAAS,GAAG,MAAM,GAAG,EAAE,CAAC;QAE9B,WAAW,CAAC,eAAe,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAC,CAAC;aACvF,IAAI,CAAC,OAAM,YAAY;;YACtB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,WAAW,CAAC,eAAe,CAAC,UAAU,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACtF,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;YACzD,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC;YACnF,IAAI,UAAU,GAAG,CAAC,CAAC,EAAE;gBACnB,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,YAAY,CAAC;aAC/C;YACD,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;YAEjD,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC,EAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAC,CAAC,CAAC;YACxE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC,CAAC;SACrD,CAAC;aACD,KAAK,CAAC,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,CAAC;KACtD;IAED,MAAM;QACJ,MAAM,EAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAC,GAAG,IAAI,CAAC;QAC9H,MAAM,EAAC,KAAK,EAAE,KAAK,EAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/E,IAAI,EAAC,QAAQ,GAAG,KAAK,EAAE,WAAW,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,GAAG,EAAE,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,SAAS,GAAG,KAAK,EAAC,GAAG,KAAK,IAAI,EAAE,CAAC;QACxH,MAAM,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;;QAGvC,IAAK,KAAa,aAAb,KAAK,uBAAL,KAAK,CAAU,KAAK,EAAE;YACzB,KAAK,GAAI,KAAa,aAAb,KAAK,uBAAL,KAAK,CAAU,KAAK,CAAC;SAC/B;;QAGD,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;QAE5B,IAAI,IAAI,EAAE;YACR,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,IAAI,EAAC,IAAG,KAAK,CAAQ,CAAC;SAC5C;QAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IACvE,QAAQ,IAAI,WAAK,KAAK,EAAC,UAAU,GAAG,EACpC,QAAQ,IAAI,WAAK,KAAK,EAAC,YAAY,GAAG,EACtC,QAAQ,IAAI,WAAK,KAAK,EAAC,WAAW,GAAG,EACrC,QAAQ,IAAI,WAAK,KAAK,EAAC,aAAa,GAAG,EAEvC,KAAK,IAAI,iBAAQ,KAAK,CAAS,EAE/B,SAAS,IACR,gBACE,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAC9B,OAAO,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EACpC,MAAM,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAEnC,KAAK,CACG,KAEX,aACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAC9B,OAAO,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EACpC,MAAM,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GACpC,CACH,EAEA,QAAQ,KACP,EAAC,QAAQ,QACP,WACE,EAAE,EAAE,kCAAkC,SAAS,EAAE,EACjD,KAAK,EAAE,EAAC,SAAS,EAAE,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,IAAI,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,IAAI,CAAC,GAAG,IAAI,GAAG,EAAC,EACjH,KAAK,EAAC,eAAe,EACrB,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,CAAC,CAAM;gBACd,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC;aAClD,GACD,EAED,IAAI,CAAC,iBAAiB,KACrB,sBAAgB,MAAM,EAAE,kCAAkC,SAAS,EAAE,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,IACxH,yCACE,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,EACvC,QAAQ,EAAE;;gBACR,MAAA,IAAI,CAAC,OAAO,0CAAE,IAAI,CAAC,EAAC,SAAS,EAAE,SAAS,EAAC,CAAC,CAAC;gBAC3C,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;aACjC,EACD,iBAAiB,EAAE,CAAC;;gBAClB,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;gBACrC,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;aACjC,EACD,QAAQ,EACN,oOAAoO,GAEtO,CACa,CAClB,CACQ,CACZ,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/fields/verdocs-field-textbox/verdocs-field-textbox.scss?tag=verdocs-field-textbox","src/components/fields/verdocs-field-textbox/verdocs-field-textbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textbox {\n font-family: $verdocs-primary-font;\n box-sizing: border-box;\n width: 150px;\n height: 15px;\n display: block;\n font-size: 11px;\n position: relative;\n scroll-margin: 20px 0;\n letter-spacing: -0.2px;\n background-color: transparent;\n transform-origin: bottom left;\n border: 1px solid rgba(0, 0, 0, 0.2);\n\n .edge-top,\n .edge-right,\n .edge-left,\n .edge-bottom {\n position: absolute;\n z-index: 10;\n }\n\n .edge-top {\n top: -2px;\n left: 0;\n right: 0;\n height: 5px;\n }\n\n .edge-right {\n top: 0;\n bottom: 0;\n right: -2px;\n width: 5px;\n }\n\n .edge-left {\n top: 0;\n left: -2px;\n bottom: 0;\n width: 5px;\n }\n\n .edge-bottom {\n bottom: -2px;\n left: 0;\n right: 0;\n height: 5px;\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 width: 100%;\n height: 100%;\n border: none;\n outline: none;\n padding: 0 3px;\n font-size: 11px;\n background: none;\n font-weight: 500;\n position: absolute;\n transform-origin: 0 0;\n box-sizing: border-box;\n color: rgba(0, 0, 0, 0.87);\n\n &.hide {\n display: none;\n }\n }\n\n &.disabled input {\n opacity: 0.5;\n }\n\n textarea {\n // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n cursor: inherit;\n\n width: 100%;\n height: 100%;\n resize: none;\n border: none;\n outline: none;\n padding: 0 3px;\n font-size: 11px;\n background: none;\n font-weight: 500;\n transform-origin: 0 0;\n box-sizing: border-box;\n color: rgba(0, 0, 0, 0.87);\n\n &.hide {\n display: none;\n }\n }\n\n &.disabled textarea {\n opacity: 0.5;\n }\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 &.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 // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n // LastPass is ignoring the data-lpignore attribute in some cases\n [data-lastpass-icon-root] {\n display: none !important;\n }\n\n .settings-icon {\n position: absolute;\n top: -4px;\n left: -18px;\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 interact from 'interactjs';\nimport {getRGBA, IEnvelopeField, ITemplateField, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Element, Prop, Method, Event, EventEmitter, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a simple 1-line text input field.\n */\n@Component({\n tag: 'verdocs-field-textbox',\n styleUrl: 'verdocs-field-textbox.scss',\n shadow: false,\n})\nexport class VerdocsFieldTextbox {\n @Element() el: HTMLElement;\n private inputEl: HTMLInputElement | HTMLTextAreaElement;\n\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 to support \"preview\" modes where all fields are disabled.\n */\n @Prop({reflect: true}) disabled?: boolean = false;\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}) multiline?: 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 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()\n async focusField() {\n this.inputEl.focus();\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 componentDidRender() {\n interact.dynamicDrop(true);\n\n if (this.editable) {\n interact(this.el).resizable({\n edges: {\n top: '.edge-top',\n left: '.edge-left',\n bottom: '.edge-bottom',\n right: '.edge-right',\n },\n modifiers: [\n interact.modifiers.restrictSize({\n min: {width: 30, height: 15},\n }),\n ],\n listeners: {\n start: this.handleResizeStart.bind(this),\n move: this.handleResize.bind(this),\n end: this.handleResizeEnd.bind(this),\n },\n });\n }\n }\n\n handleResizeStart(e: any) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n handleResize(e: any) {\n let {width, height} = e.rect;\n\n const dX = e.deltaRect.left;\n const dY = e.deltaRect.bottom;\n const currentLeft = parseFloat(e.target.style.left);\n const currentBottom = parseFloat(e.target.style.bottom);\n\n width /= this.xscale;\n height /= this.yscale;\n\n Object.assign(e.target.style, {\n width: `${width}px`,\n height: `${height}px`,\n left: `${currentLeft + dX}px`,\n bottom: `${currentBottom - dY}px`,\n });\n }\n\n handleResizeEnd(e: any) {\n const {sourceid, fieldname} = this;\n\n const width = Math.round(parseFloat(e.target.style.width));\n let height = Math.round(parseFloat(e.target.style.height));\n\n if (height < 20) {\n height = 15;\n }\n const multiline = height > 15;\n\n updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, {width, height, multiline})\n .then(async updatedField => {\n const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n const newTemplate = JSON.parse(JSON.stringify(template));\n const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);\n if (fieldIndex > -1) {\n newTemplate.fields[fieldIndex] = updatedField;\n }\n Store.updateTemplate(this.sourceid, newTemplate);\n\n this.settingsChanged?.emit({fieldName: fieldname, field: updatedField});\n Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n })\n .catch(e => console.log('Field update failed', e));\n }\n\n render() {\n const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n let {required = false, placeholder = '', label = '', width = 150, default: value = '', multiline = false} = field || {};\n const backgroundColor = getRGBA(index);\n\n // TODO: Consolidate value/defaultValue handling between template and envelope fields.\n if ((field as any)?.value) {\n value = (field as any)?.value;\n }\n\n // TODO: This is an outdated technique from the old system. We should compute it.\n const maxlength = width / 5;\n\n if (done) {\n return <Host class={{done}}>{value}</Host>;\n }\n\n return (\n <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n {editable && <div class=\"edge-top\" />}\n {editable && <div class=\"edge-right\" />}\n {editable && <div class=\"edge-left\" />}\n {editable && <div class=\"edge-bottom\" />}\n\n {label && <label>{label}</label>}\n\n {multiline ? (\n <textarea\n name={fieldname}\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n ref={el => (this.inputEl = el)}\n onFocus={() => (this.focused = true)}\n onBlur={() => (this.focused = false)}\n >\n {value}\n </textarea>\n ) : (\n <input\n type=\"text\"\n name={fieldname}\n value={value}\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n maxlength={maxlength}\n ref={el => (this.inputEl = el)}\n onFocus={() => (this.focused = true)}\n onBlur={() => (this.focused = false)}\n />\n )}\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={\n 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the \"name\" field.<br /><br />If marked required, the participant must complete the field before proceeding.'\n }\n />\n </verdocs-portal>\n )}\n </Fragment>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-a55f08ad.js → p-8a76ec8a.js} RENAMED Viewed

@@ -10,13 +10,13 @@ import { d as defineCustomElement$o } from './p-3201d529.js';
 import { d as defineCustomElement$n } from './p-84ae0283.js';
 import { d as defineCustomElement$m } from './p-2ddf4d5b.js';
 import { d as defineCustomElement$l } from './p-14c80ae8.js';
-import { d as defineCustomElement$k } from './p-176a07b2.js';
+import { d as defineCustomElement$k } from './p-c9bed8f7.js';
 import { d as defineCustomElement$j } from './p-d8340641.js';
 import { d as defineCustomElement$i } from './p-211fa3e2.js';
 import { d as defineCustomElement$h } from './p-261521bc.js';
-import { d as defineCustomElement$g } from './p-5e378f0e.js';
+import { d as defineCustomElement$g } from './p-bcc8771f.js';
 import { d as defineCustomElement$f } from './p-d9a2e920.js';
-import { d as defineCustomElement$e } from './p-c1159428.js';
+import { d as defineCustomElement$e } from './p-43fa069d.js';
 import { d as defineCustomElement$d } from './p-5182136e.js';
 import { d as defineCustomElement$c } from './p-7f32e087.js';
 import { d as defineCustomElement$b } from './p-9c0b30f8.js';
@@ -25,7 +25,7 @@ import { d as defineCustomElement$9 } from './p-b7d080eb.js';
 import { d as defineCustomElement$8 } from './p-6719b0d7.js';
 import { d as defineCustomElement$7 } from './p-62743fd3.js';
 import { d as defineCustomElement$6 } from './p-cce871bf.js';
-import { d as defineCustomElement$5 } from './p-c76fab71.js';
+import { d as defineCustomElement$5 } from './p-13260b9f.js';
 import { d as defineCustomElement$4 } from './p-7cd6c0ce.js';
 import { d as defineCustomElement$3 } from './p-325b3828.js';
 import { d as defineCustomElement$2 } from './p-4d3b9ee9.js';
@@ -505,4 +505,4 @@ function defineCustomElement() {
 export { VerdocsTemplateFields as V, defineCustomElement as d };
-//# sourceMappingURL=p-a55f08ad.js.map
+//# sourceMappingURL=p-8a76ec8a.js.map