legalesign-document-viewer 0.4.1 → 0.4.3
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.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ls-document-options_45.cjs.entry.js +43 -11
- package/dist/cjs/ls-document-options_45.cjs.entry.js.map +1 -1
- package/dist/cjs/ls-document-viewer.cjs.js +1 -1
- package/dist/collection/components/interfaces/IToolboxField.js +1 -0
- package/dist/collection/components/interfaces/IToolboxField.js.map +1 -1
- package/dist/collection/components/ls-document-viewer/ls-document-viewer.js +3 -3
- package/dist/collection/components/ls-document-viewer/ls-document-viewer.js.map +1 -1
- package/dist/collection/components/ls-document-viewer/mouseHandlers.js.map +1 -1
- package/dist/collection/components/ls-recipient-card/ls-recipient-card.js +81 -5
- package/dist/collection/components/ls-recipient-card/ls-recipient-card.js.map +1 -1
- package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.js +14 -3
- package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.js.map +1 -1
- package/dist/components/ls-document-viewer.js +6 -6
- package/dist/components/ls-document-viewer.js.map +1 -1
- package/dist/components/ls-recipient-card.js +1 -1
- package/dist/components/ls-toolbox-field.js +1 -1
- package/dist/components/ls-validation-manager.js +1 -1
- package/dist/components/{p-CTP4wFFE.js → p-B2ofj7BM.js} +31 -9
- package/dist/components/p-B2ofj7BM.js.map +1 -0
- package/dist/components/{p-C8TAonIH.js → p-BIqQK9GI.js} +3 -3
- package/dist/components/{p-C8TAonIH.js.map → p-BIqQK9GI.js.map} +1 -1
- package/dist/components/{p-CrXwf_vC.js → p-COypjAnE.js} +16 -5
- package/dist/components/p-COypjAnE.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ls-document-options_45.entry.js +43 -11
- package/dist/esm/ls-document-options_45.entry.js.map +1 -1
- package/dist/esm/ls-document-viewer.js +1 -1
- package/dist/ls-document-viewer/ls-document-viewer.esm.js +1 -1
- package/dist/ls-document-viewer/{p-ad86fa96.entry.js → p-bb752fc8.entry.js} +5 -5
- package/dist/ls-document-viewer/p-bb752fc8.entry.js.map +1 -0
- package/dist/types/components/interfaces/IToolboxField.d.ts +1 -1
- package/dist/types/components/ls-document-viewer/ls-document-viewer.d.ts +1 -0
- package/dist/types/components/ls-recipient-card/ls-recipient-card.d.ts +5 -0
- package/dist/types/components.d.ts +12 -0
- package/package.json +1 -1
- package/dist/components/p-CTP4wFFE.js.map +0 -1
- package/dist/components/p-CrXwf_vC.js.map +0 -1
- package/dist/ls-document-viewer/p-ad86fa96.entry.js.map +0 -1
|
@@ -25407,7 +25407,7 @@ const LsDocumentViewer = class {
|
|
|
25407
25407
|
return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
|
|
25408
25408
|
}
|
|
25409
25409
|
render() {
|
|
25410
|
-
return (h(Host, { key: '
|
|
25410
|
+
return (h(Host, { key: '24e54561967e9bf975d292ce20392c45ab346a24' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: 'ab977b3f64fba964ff8fda1c2460c94ca6d2ff91' }), h("div", { key: '2d75654239867fe3950b549bc42733349c741e62', class: "page-header" }, h("div", { key: '4e62b62337608b3fe73be60088f72371c197db97', class: 'left-slot-wrapper' }, h("slot", { key: 'f2a2ef74789a65ab31a0775bb956a5b175c10cad', name: "left-button" })), h("div", { key: '01b97a05b5af8455b23f212564a6c7fb98767131', class: 'right-slot-wrapper' }, h("slot", { key: '076416c9f25ad58fdb384a45112b7036ca18dbf3', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '0bf8356c5dafd6a8c921b93696f9ec4e3bb4a7db' }, h("span", { key: 'c7f12e2e419aac679594ea822f40755e3b45d9c6', class: "header-text-1" }, "Template Creation"), h("span", { key: '2ee2d5f30b58ce0b7bc727b7bdf480e2775af8a9' }, "/"), h("span", { key: '710ead7ec8e82198a5cd57947ff383a7843fb160', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '2e0cadb9a499f941f433c4e99c5a3b686e2c99c7' }, h("span", { key: 'f23f3fb138f0cd002b5d2496dc170c292d018fc4', class: "header-text-1" }, "Compose"), " ", h("span", { key: 'ce7b5d18a8fbbcb81ecaf6312b4dbc0c06049ee4' }, "/"), " ", h("span", { key: '3ba860f3579a068cb979214302fbebebeb4ff3ae', class: "header-text-2" }, this._template?.title)))), this.mode === 'editor' && (h("div", { key: '250a1ec19cc70cdc54904970e45794b89bd16c73', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'ae9152ee7f09a04a3b1b90be1cdb014a316d1214', validationErrors: this.validationErrors }))), h("form", { key: '269870bd47c3e06dea241f82803c6aa48780c55d', id: "ls-editor-form" }, this.mode !== 'preview' ? (h("div", { id: "ls-left-box", class: "leftBox", style: this.mode === 'compose' ? { borderRadius: '1.75rem' } : {} }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, this.mode === 'editor' && (h("ls-feature-column", { mode: this.mode, onManage: manager => {
|
|
25411
25411
|
if (manager.detail === 'document') {
|
|
25412
25412
|
var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
|
|
25413
25413
|
documentManager.template = this._template;
|
|
@@ -25423,10 +25423,10 @@ const LsDocumentViewer = class {
|
|
|
25423
25423
|
}
|
|
25424
25424
|
this.manager = manager.detail;
|
|
25425
25425
|
} })), h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Fields"), h("p", { class: "toolbox-section-description" }, "Drag and drop, or select and double click, to place fields on the Document.")), h("div", { class: "fields-box" }, this.signer > 0 && this.showTool('signature') && (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: this.signer })), this.signer === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", tooltip: "Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending", signer: this.signer })), this.showTool('text') && (h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", tooltip: "A field for collecting any plain text values such as: names, addresses or descriptions", signer: this.signer })), this.signer > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", tooltip: "Automatically inserts the date upon completion by the assigned Participant", signer: this.signer })), this.showTool('date') && (h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", tooltip: "A field for collecting dates with built-in date formatting options", signer: this.signer })), this.showTool('email') && (h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", tooltip: "A Field to only accept entries formatted as an email address (e.g., example@example.com)", signer: this.signer })), this.showTool('initials') && (h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", tooltip: "Use this field anywhere Participants are required to Initial your document", signer: this.signer })), this.showTool('number') && (h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", tooltip: "A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)", signer: this.signer })), this.showTool('dropdown') && (h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "dropdown", tooltip: "Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes", signer: this.signer })), this.showTool('checkbox') && (h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", tooltip: "Places a checkbox on your document. Handy for T&Cs or \u2714/\u2717 sections", signer: this.signer })), this.signer > 0 && this.showTool('regex') && (h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", tooltip: "Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need", signer: this.signer })), this.signer > 0 && this.showTool('image') && (h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", tooltip: "Use when you need Participants to upload their own images during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('file') && (h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", tooltip: "Use when you need Participants to upload their own documents during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { elementType: "drawn", formElementType: "drawn", label: "Drawn", defaultHeight: 120, defaultWidth: 120, validation: 90, icon: "pencil", tooltip: "Allow users to draw on the document using their mouse or touchscreen", signer: this.signer })))), h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' }), h("ls-validation-manager", { id: "ls-validation-manager", class: this.manager === 'validation' ? 'toolbox' : 'hidden' }), h("ls-recipient-manager", { id: "ls-recipient-manager", class: this.manager === 'recipient' ? 'toolbox compose-toolbox' : 'hidden' }, h("ls-validation-tag", { validationErrors: this.validationErrors, style: { position: 'absolute', top: '18px', right: '16px' }, type: "compose" }), this._recipients &&
|
|
25426
|
-
this._recipients.map(recipient => (h("ls-recipient-card", { recipient: recipient, activeRecipient: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, validationErrors: this.validationErrors }))))), !this.displayTable && (h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, h("div", { class: 'properties-header' }, h("div", { class: 'properties-header-icon' }, h("ls-icon", { name: "pre-filled-content" })), h("h1", { class: 'properties-header-title' }, "Field Properties"), h("button", { class: 'tertiaryGrey', onClick: e => {
|
|
25426
|
+
this._recipients.map(recipient => (h("ls-recipient-card", { recipient: recipient, activeRecipient: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, validationErrors: this.validationErrors, fieldTypeSelected: this.fieldTypeSelected }))))), !this.displayTable && (h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, h("div", { class: 'properties-header' }, h("div", { class: 'properties-header-icon' }, h("ls-icon", { name: "pre-filled-content" })), h("h1", { class: 'properties-header-title' }, "Field Properties"), h("button", { class: 'tertiaryGrey', onClick: e => {
|
|
25427
25427
|
this.selected = [];
|
|
25428
25428
|
e.preventDefault();
|
|
25429
|
-
}, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), this.selected.length > 0 && h("ls-toolbar", { key: '
|
|
25429
|
+
}, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), this.selected.length > 0 && h("ls-toolbar", { key: 'c9d61564562f5e8e2daf2d64b7f53f46bfaddc72', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '82ccb98a66969e35302936fc04ea1a343c7b7c88', id: "ls-mid-area" }, h("div", { key: '0670c9bbff024b256513ca6f4dc85a5b890db617', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'b1f6c15bc46f650ddec12df17274a6b38dad2d23', id: "ls-document-frame" }, h("canvas", { key: 'a28c5f0300be933438c23430689c66f7960767e1', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: 'e7f7c65385389d527ec56fb468e81d9c25d90ead', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: 'cff629b4589523648277eaf96019838de3e0a487', id: "ls-box-selector" }))), h("ls-statusbar", { key: '857d84f8b261c2383bf8c248a72f30a0b7ea25b8', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '5d87d0297bf80e96dc013fd957e93313bd988401', id: "ls-tooltip-master" })));
|
|
25430
25430
|
}
|
|
25431
25431
|
static get watchers() { return {
|
|
25432
25432
|
"mode": ["modeHandler"]
|
|
@@ -35804,7 +35804,9 @@ const LsRecipientCard = class {
|
|
|
35804
35804
|
constructor(hostRef) {
|
|
35805
35805
|
registerInstance(this, hostRef);
|
|
35806
35806
|
this.changeSigner = createEvent(this, "changeSigner");
|
|
35807
|
+
this.fieldSelected = createEvent(this, "fieldSelected");
|
|
35807
35808
|
}
|
|
35809
|
+
get component() { return getElement(this); }
|
|
35808
35810
|
/**
|
|
35809
35811
|
* The initial template data, including the link for background PDF. See README and
|
|
35810
35812
|
* example for correct GraphQL query and data structure.
|
|
@@ -35812,6 +35814,14 @@ const LsRecipientCard = class {
|
|
|
35812
35814
|
*/
|
|
35813
35815
|
recipient;
|
|
35814
35816
|
activeRecipient;
|
|
35817
|
+
fieldTypeSelected = {
|
|
35818
|
+
label: 'Signature',
|
|
35819
|
+
formElementType: 'signature',
|
|
35820
|
+
elementType: 'signature',
|
|
35821
|
+
validation: 0,
|
|
35822
|
+
defaultHeight: 27,
|
|
35823
|
+
defaultWidth: 120,
|
|
35824
|
+
};
|
|
35815
35825
|
template;
|
|
35816
35826
|
isHovered = false;
|
|
35817
35827
|
setIsHovered(value) {
|
|
@@ -35825,13 +35835,24 @@ const LsRecipientCard = class {
|
|
|
35825
35835
|
filtertoolbox = null;
|
|
35826
35836
|
// Send an internal event to be processed
|
|
35827
35837
|
changeSigner;
|
|
35838
|
+
// Send an internal event to be processed
|
|
35839
|
+
fieldSelected;
|
|
35840
|
+
handleFieldTypeSelected(event) {
|
|
35841
|
+
console.log(event);
|
|
35842
|
+
const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
|
|
35843
|
+
console.log(fields);
|
|
35844
|
+
fields.forEach(element => {
|
|
35845
|
+
element.isSelected = element.formElementType === event.detail.formElementType;
|
|
35846
|
+
});
|
|
35847
|
+
this.fieldTypeSelected = event.detail;
|
|
35848
|
+
}
|
|
35828
35849
|
showTool(fieldFormType) {
|
|
35829
35850
|
return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
|
|
35830
35851
|
}
|
|
35831
35852
|
render() {
|
|
35832
35853
|
const recipientFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.recipient.signerIndex) || [];
|
|
35833
35854
|
const recipientSignatures = recipientFields.filter(f => f.elementType === 'signature' || f.elementType === 'auto sign');
|
|
35834
|
-
return (h(Host, { key: '
|
|
35855
|
+
return (h(Host, { key: '4f5d189dbc71916be6d7154e9f12d48ebe12b249' }, h("div", { key: '50fda2b924adb494baaf57d3aff345166af49a67', class: 'participant-card top-card full-card', style: {
|
|
35835
35856
|
background: defaultRolePalette[this.recipient?.signerIndex % 100].s10,
|
|
35836
35857
|
border: `1px solid ${defaultRolePalette[this.recipient?.signerIndex % 100].s60}`,
|
|
35837
35858
|
outline: `${this.recipient.signerIndex === this.activeRecipient ? '4px solid ' + defaultRolePalette[this.recipient?.signerIndex % 100].s40 : 'none'}`,
|
|
@@ -35843,14 +35864,14 @@ const LsRecipientCard = class {
|
|
|
35843
35864
|
this.setIsHovered(true);
|
|
35844
35865
|
}, onMouseLeave: () => {
|
|
35845
35866
|
this.setIsHovered(false);
|
|
35846
|
-
} }, h("div", { key: '
|
|
35867
|
+
} }, h("div", { key: '220d962cbfa360b7e19cb1c2ffe032f1d911f14f', class: 'participant-card-inner' }, h("div", { key: 'c750c5ea63887ef7fcb021df307694cfac0392a1', class: 'participant-card-top-items' }, h("div", { key: '65fb65be87735b687c37d0c0dca3f254a726b533', class: 'role-label', style: {
|
|
35847
35868
|
background: defaultRolePalette[this.recipient?.signerIndex % 100].s20,
|
|
35848
35869
|
color: defaultRolePalette[this.recipient?.signerIndex % 100].s90,
|
|
35849
|
-
} }, h("ls-icon", { key: '
|
|
35870
|
+
} }, h("ls-icon", { key: '3f37163f6691206abb77b6473ff0fddc4c6cb89f', name: this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature' }), String(this.recipient?.signerIndex).padStart(2, '0')), h("ls-icon", { key: 'cff1e9cad9cc485b582571f445caa141a842ed8a', name: "cursor-click", size: "16", customStyle: { color: defaultRolePalette[this.recipient?.signerIndex % 100].s70 }, solid: true, style: { display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? 'block' : 'none' } }), h("div", { key: '9286eeb38b3a561d60fccf39b6983bff424def8b', class: "dot", style: { display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && recipientSignatures.length === 0 ? 'block' : 'none' } })), h("div", { key: 'b6ff47eb82f7a7a4ce60dd458b5e81de7e2eb902', class: 'participant-card-text' }, h("p", { key: '8f5adf381c831f604a772aa554abb3e745a81339', class: "participant-text-description", style: {
|
|
35850
35871
|
color: defaultRolePalette[this.recipient?.signerIndex % 100].s100,
|
|
35851
|
-
} }, this.recipient?.firstname + ' ' + this.recipient?.lastname), h("p", { key: '
|
|
35872
|
+
} }, this.recipient?.firstname + ' ' + this.recipient?.lastname), h("p", { key: '013de8ebb99f5e0828b11d1b04ac9c0128d2b45c', class: "participant-text-type", style: {
|
|
35852
35873
|
color: defaultRolePalette[this.recipient?.signerIndex % 100].s80,
|
|
35853
|
-
} }, this.recipient.email)), this.recipient.signerIndex === this.activeRecipient && (h("div", { key: '
|
|
35874
|
+
} }, this.recipient.email)), this.recipient.signerIndex === this.activeRecipient && (h("div", { key: '285107d5913e04b702626e88b262fb079bd765f5', class: "fields-box" }, this.recipient.signerIndex > 0 && this.showTool('signature') && (h("ls-toolbox-field", { key: '5f32fbcd9bf5f5cc66aa24128a62b5f2edc6039d', elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: this.recipient.signerIndex, redDot: recipientSignatures.length === 0 })), this.recipient.signerIndex === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { key: 'da24ec0e8db3d5a192f9c321ddbc6c5a9253d226', elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", tooltip: "Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending", signer: this.recipient.signerIndex })), this.showTool('text') && (h("ls-toolbox-field", { key: '52415f19ee72c572e029144ab81855adafb9f9d2', elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", tooltip: "A field for collecting any plain text values such as: names, addresses or descriptions", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { key: 'ccf6842a97068348b6a50897744c6f198e6583b7', elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", tooltip: "Automatically inserts the date upon completion by the assigned Participant", signer: this.recipient.signerIndex })), this.showTool('date') && (h("ls-toolbox-field", { key: '2070f596b04ef969f8aee7b3b8de0b5b499d73ca', elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", tooltip: "A field for collecting dates with built-in date formatting options", signer: this.recipient.signerIndex })), this.showTool('email') && (h("ls-toolbox-field", { key: '78cd2421bd0039912fbb7de9b2aa47bbb0cdde5d', elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", tooltip: "A Field to only accept entries formatted as an email address (e.g., example@example.com)", signer: this.recipient.signerIndex })), this.showTool('initials') && (h("ls-toolbox-field", { key: '7c6216f0b237b4aaadd1b588ff3092789b20f210', elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", tooltip: "Use this field anywhere Participants are required to Initial your document", signer: this.recipient.signerIndex })), this.showTool('number') && (h("ls-toolbox-field", { key: '9b0d4b004a214021df6a7633b43187438fd0e74d', elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", tooltip: "A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)", signer: this.recipient.signerIndex })), this.showTool('dropdown') && (h("ls-toolbox-field", { key: '5f46b8fbca296c4e2e454c5d5245d8dc05677893', elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "dropdown", tooltip: "Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes", signer: this.recipient.signerIndex })), this.showTool('checkbox') && (h("ls-toolbox-field", { key: '5cc4c83690de16b26bf13b0b1bb873af7f6474aa', elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", tooltip: "Places a checkbox on your document. Handy for T&Cs or \u2714/\u2717 sections", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('regex') && (h("ls-toolbox-field", { key: 'cf499a07dcf68608172072a9bd644c732083a5be', elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", tooltip: "Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('image') && (h("ls-toolbox-field", { key: 'c0c94309cff45e0a2254b75390da463801254d48', elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", tooltip: "Use when you need Participants to upload their own images during the signing process", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('file') && (h("ls-toolbox-field", { key: '08ba12800db536bc6a99ea35f652139f16abcfa1', elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", tooltip: "Use when you need Participants to upload their own documents during the signing process", signer: this.recipient.signerIndex })), this.recipient.signerIndex > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { key: '40cbc830211f62f68c1f9ebaf625d2b25929726f', elementType: "drawn", formElementType: "drawn", label: "Drawn", defaultHeight: 120, defaultWidth: 120, validation: 90, icon: "pencil", tooltip: "Allow users to draw on the document using their mouse or touchscreen", signer: this.recipient.signerIndex })))))), h("slot", { key: 'de53e3523ad0a7eb236a9a89984bfb5c0cfaf0eb' }), h("ls-tooltip", { key: 'a4c0517ec26339b666a8612f9a36937c92f7d039', id: "ls-tooltip-master" })));
|
|
35854
35875
|
}
|
|
35855
35876
|
};
|
|
35856
35877
|
LsRecipientCard.style = lsRecipientCardCss;
|
|
@@ -36033,6 +36054,17 @@ const LsToolboxField = class {
|
|
|
36033
36054
|
isSelected = false;
|
|
36034
36055
|
fieldTypeSelected;
|
|
36035
36056
|
handleDragStart(event) {
|
|
36057
|
+
var canvas = document.createElement('div');
|
|
36058
|
+
canvas.style.position = 'absolute';
|
|
36059
|
+
canvas.style.left = '-100%';
|
|
36060
|
+
canvas.style.zIndex = '-100';
|
|
36061
|
+
canvas.style.height = this.defaultHeight + 'px';
|
|
36062
|
+
canvas.style.width = this.defaultWidth + 'px';
|
|
36063
|
+
canvas.style.backgroundColor = 'rgba(255, 255, 255, 1)';
|
|
36064
|
+
canvas.style.border = `1px dashed ${defaultRolePalette[this.signer % 100].s60}`;
|
|
36065
|
+
canvas.innerHTML = this.formElementType;
|
|
36066
|
+
document.body.appendChild(canvas);
|
|
36067
|
+
event.dataTransfer.setDragImage(canvas, -50, -20);
|
|
36036
36068
|
// Add the target element's id to the data transfer object
|
|
36037
36069
|
event.dataTransfer.setData('application/json', JSON.stringify({
|
|
36038
36070
|
formElementType: this.formElementType,
|
|
@@ -36053,7 +36085,7 @@ const LsToolboxField = class {
|
|
|
36053
36085
|
attachAllTooltips(this.component.shadowRoot);
|
|
36054
36086
|
}
|
|
36055
36087
|
render() {
|
|
36056
|
-
return (h(Host, { key: '
|
|
36088
|
+
return (h(Host, { key: 'b8ba3bf139801233d2d81b5648d1a638505e0972', draggable: "true" }, h("div", { key: '9f6f1f44479fa2157daf47a3504b689d9e420b7b', class: 'ls-toolbox-field', style: this.isSelected && {
|
|
36057
36089
|
background: defaultRolePalette[this.signer % 100].s10,
|
|
36058
36090
|
border: `1px solid ${defaultRolePalette[this.signer % 100].s60}`,
|
|
36059
36091
|
color: defaultRolePalette[this.signer % 100].s80,
|
|
@@ -36068,9 +36100,9 @@ const LsToolboxField = class {
|
|
|
36068
36100
|
defaultWidth: this.defaultWidth,
|
|
36069
36101
|
fixedAspect: this.fixedAspect,
|
|
36070
36102
|
});
|
|
36071
|
-
} }, h("div", { key: '
|
|
36103
|
+
} }, h("div", { key: '30345c85a9b6b6a721813bb4f013087b4a8cabba', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }, "data-tooltip": this.tooltip, "data-tooltip-placement": "right" }, h("ls-icon", { key: '765ea21ea33d53efd63ba1b79a1f573cf86d51e8', name: this.icon, size: "20" })), h("p", { key: '233dc63ee920abb8402e44b0ba9c5398034bb5bb', class: "toolbox-field-label", style: this.isSelected && {
|
|
36072
36104
|
color: defaultRolePalette[this.signer % 100].s80,
|
|
36073
|
-
} }, this.label), this.redDot && (h("div", { key: '
|
|
36105
|
+
} }, this.label), this.redDot && (h("div", { key: '9f4c19c86d0a4dad73e0d3f9b4607e845065ed0c', class: 'warning-box' }, h("ls-icon", { key: 'd304104665589be58cfe07c425d3e27251019279', name: "exclamation-circle", size: "18", solid: true }))), h("ls-icon", { key: '69daa9ade2b006ee3d7e15cd92ce607c21fb7a43', name: "drag-vertical", size: "16", color: "#787a80" })), h("ls-tooltip", { key: '6068cd2f85ee3baf054b20d7b5738d7421894f25', id: "ls-tooltip-master", tooltipText: "Something" })));
|
|
36074
36106
|
}
|
|
36075
36107
|
};
|
|
36076
36108
|
LsToolboxField.style = lsToolboxFieldCss;
|