legalesign-document-viewer 0.4.2 → 0.4.4

package/dist/components/ls-document-viewer.js

@@ -1,29 +1,29 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CEhCcP_A.js';
-import { a as alter, o as oob, f as findDimensions, r as recalculateCoordinates, b as findIn, u as updateTemplate, d as defineCustomElement$I, m as matchData, v as validate, c as moveField, g as getApiType, e as addField, h as getTemplate } from './p-CIoxINZp.js';
+import { a as alter, o as oob, f as findDimensions, r as recalculateCoordinates, b as findIn, u as updateTemplate, d as defineCustomElement$I, m as matchData, v as validate, c as moveField, g as getApiType, e as addField, h as getTemplate } from './p-C8ZQeYj-.js';
 import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
 import { d as defineCustomElement$J } from './p-R3_FOlEq.js';
 import { d as defineCustomElement$H } from './p-D-yItxA4.js';
 import { d as defineCustomElement$G } from './p-CuyjSEEv.js';
 import { d as defineCustomElement$F } from './p-BUfnTaTZ.js';
-import { d as defineCustomElement$E } from './p-CUXWZqch.js';
+import { d as defineCustomElement$E } from './p-DPtMBZYM.js';
 import { d as defineCustomElement$D } from './p-DCZnqvsu.js';
-import { d as defineCustomElement$C } from './p-BHQ0WY5x.js';
+import { d as defineCustomElement$C } from './p-FjzffTyc.js';
 import { d as defineCustomElement$B } from './p-B3axAGVs.js';
 import { d as defineCustomElement$A } from './p-cwpKMDgH.js';
 import { d as defineCustomElement$z } from './p-BzY8ubZE.js';
-import { d as defineCustomElement$y } from './p-BiG71xua.js';
+import { d as defineCustomElement$y } from './p-DmszHmWG.js';
 import { d as defineCustomElement$x } from './p-DGuG1Bmj.js';
 import { d as defineCustomElement$w } from './p-CNc1l7mG.js';
 import { d as defineCustomElement$v } from './p-CaBVuofO.js';
-import { d as defineCustomElement$u } from './p-DrfpABSq.js';
-import { d as defineCustomElement$t } from './p-DYB1QfP2.js';
-import { d as defineCustomElement$s } from './p-CXoPln5K.js';
-import { d as defineCustomElement$r } from './p-qC7H9a3g.js';
-import { d as defineCustomElement$q } from './p-AZOh1kUH.js';
-import { d as defineCustomElement$p } from './p-jBcf1cHz.js';
-import { d as defineCustomElement$o } from './p-BvGLH5NQ.js';
-import { d as defineCustomElement$n } from './p-BmIVpWDh.js';
-import { d as defineCustomElement$m } from './p-U9xqUgfL.js';
+import { d as defineCustomElement$u } from './p-B2etz1Ic.js';
+import { d as defineCustomElement$t } from './p-B7S9E2ci.js';
+import { d as defineCustomElement$s } from './p-QEWyXsBw.js';
+import { d as defineCustomElement$r } from './p-DKx68i7a.js';
+import { d as defineCustomElement$q } from './p-DDNZkGBj.js';
+import { d as defineCustomElement$p } from './p-DyU3O3tg.js';
+import { d as defineCustomElement$o } from './p-BzxhEsKd.js';
+import { d as defineCustomElement$n } from './p-BiOHci04.js';
+import { d as defineCustomElement$m } from './p-CCt1S0nA.js';
 import { d as defineCustomElement$l } from './p-HB8K0xP0.js';
 import { d as defineCustomElement$k } from './p-Cqxe6wZe.js';
 import { d as defineCustomElement$j } from './p-DZ_KhOns.js';
@@ -35,9 +35,9 @@ import { d as defineCustomElement$e } from './p-CdFJ_FQz.js';
 import { d as defineCustomElement$d } from './p-D-U9fbV-.js';
 import { d as defineCustomElement$c } from './p-DMgdq7Zj.js';
 import { d as defineCustomElement$b } from './p-DKcMRnoh.js';
-import { d as defineCustomElement$a } from './p-Kpy4Ytig.js';
+import { d as defineCustomElement$a } from './p-B2ofj7BM.js';
 import { d as defineCustomElement$9 } from './p-DVtr8lsT.js';
-import { d as defineCustomElement$8 } from './p-BooZeojy.js';
+import { d as defineCustomElement$8 } from './p-BNX_U6jC.js';
 import { d as defineCustomElement$7 } from './p-CrVSg3t4.js';
 import { d as defineCustomElement$6 } from './p-DUBoFEsx.js';
 import { d as defineCustomElement$5 } from './p-COypjAnE.js';
@@ -24943,7 +24943,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
     }
     render() {
-        return (h(Host, { key: '18a633cb175d9c7e76e56bf01e3c8424d32ab585' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: '25a75f7af8e901df2fb9437d2919aa57457129cb' }), h("div", { key: '2fdeda62dd2c01754129b6d862aa3c3d5a2a1bdc', class: "page-header" }, h("div", { key: 'e44f3c112b65616bef7ac1cc4d6c5bf52c9b412a', class: 'left-slot-wrapper' }, h("slot", { key: 'eabed050a68f35292d52342623c6a4f2c2b92a9e', name: "left-button" })), h("div", { key: '1d4a9b8686e483864dbd47cc070425cf549bddca', class: 'right-slot-wrapper' }, h("slot", { key: '920bf1ffa9cdd895c1d4e66dd051ce41ad100a45', name: "right-button" })), this.mode === 'editor' && (h("div", { key: 'bda295d8ee65a355b25d8eb6679525a2d62e011c' }, h("span", { key: '997ef8d75cb7edafb33a6dcfbd1bbf2f9a0465f4', class: "header-text-1" }, "Template Creation"), h("span", { key: '855cd0855037a719dc9f0611cdb917bfa12db68b' }, "/"), h("span", { key: 'd540dcabca2c39bdb479ae9d5fbaf3a370c88be9', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '3c564705e5bdc91b1a3c1f490dac2ec2dd9ba20a' }, h("span", { key: 'a65c1bf128737b35c331b949eb184e20488c3e0f', class: "header-text-1" }, "Compose"), " ", h("span", { key: 'bba6eb666e75486141c87addab7060a7f863007a' }, "/"), " ", h("span", { key: '5a754925c20d7114601f363560284acaa30387f4', class: "header-text-2" }, this._template?.title)))), this.mode === 'editor' && (h("div", { key: 'f181cf2c95e1ccd0955aad5945b949706319d398', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'f0ee01d4e1aefc4caa16cfc40037c950b18c7ea7', validationErrors: this.validationErrors }))), h("form", { key: '168931f3d1225b9f2ffeecd507cd1b24c2e3978a', 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 => {
+        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 => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -24959,10 +24959,10 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
                 }
                 this.manager = manager.detail;
             } })), 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 &&
-            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 => {
+            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 => {
                 this.selected = [];
                 e.preventDefault();
-            }, "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: '3e5ba341473bf08a29091ab12c3fee99bbdc2671', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: 'a929a78238ace37b999bc30a4410c9ec23a8cfbe', id: "ls-mid-area" }, h("div", { key: 'c6da6a55d0d837b301222cbcbbef093475345b51', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'f442db65d13cc0accc891528e0cbd63b78d0dfb1', id: "ls-document-frame" }, h("canvas", { key: '678382556830d4e99a651378e1898cbf2b537bd6', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: '6309f63776709b22b169ba539c780795bee2132a', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '0e6b11139b50ab2ee5d9a1162e29f9a4122e1f92', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'e2f14c7674d5ba0ac660ab8e02c9c55195a3b6b6', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '6fbd2449f461859b491a6754996ba149256a4857', id: "ls-tooltip-master" })));
+            }, "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" })));
     }
     static get watchers() { return {
         "mode": ["modeHandler"]