legalesign-document-viewer 0.4.2 → 0.4.3

package/dist/components/ls-recipient-card.js

@@ -1,4 +1,4 @@
-import { L as LsRecipientCard$1, d as defineCustomElement$1 } from './p-Kpy4Ytig.js';
+import { L as LsRecipientCard$1, d as defineCustomElement$1 } from './p-B2ofj7BM.js';
 
 const LsRecipientCard = LsRecipientCard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-Kpy4Ytig.js → p-B2ofj7BM.js}

@@ -12,7 +12,9 @@ const LsRecipientCard = /*@__PURE__*/ proxyCustomElement(class LsRecipientCard e
         this.__registerHost();
         this.__attachShadow();
         this.changeSigner = createEvent(this, "changeSigner");
+        this.fieldSelected = createEvent(this, "fieldSelected");
     }
+    get component() { return this; }
     /**
      * The initial template data, including the link for background PDF. See README and
      * example for correct GraphQL query and data structure.
@@ -20,6 +22,14 @@ const LsRecipientCard = /*@__PURE__*/ proxyCustomElement(class LsRecipientCard e
      */
     recipient;
     activeRecipient;
+    fieldTypeSelected = {
+        label: 'Signature',
+        formElementType: 'signature',
+        elementType: 'signature',
+        validation: 0,
+        defaultHeight: 27,
+        defaultWidth: 120,
+    };
     template;
     isHovered = false;
     setIsHovered(value) {
@@ -33,13 +43,24 @@ const LsRecipientCard = /*@__PURE__*/ proxyCustomElement(class LsRecipientCard e
     filtertoolbox = null;
     // Send an internal event to be processed
     changeSigner;
+    // Send an internal event to be processed
+    fieldSelected;
+    handleFieldTypeSelected(event) {
+        console.log(event);
+        const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
+        console.log(fields);
+        fields.forEach(element => {
+            element.isSelected = element.formElementType === event.detail.formElementType;
+        });
+        this.fieldTypeSelected = event.detail;
+    }
     showTool(fieldFormType) {
         return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
     }
     render() {
         const recipientFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.recipient.signerIndex) || [];
         const recipientSignatures = recipientFields.filter(f => f.elementType === 'signature' || f.elementType === 'auto sign');
-        return (h(Host, { key: 'a61996a542ccf7e67c50d27a206311b836ffd331' }, h("div", { key: 'c7e1b9cdc6e23240953386ce15277f21d07d7042', class: 'participant-card top-card full-card', style: {
+        return (h(Host, { key: '4f5d189dbc71916be6d7154e9f12d48ebe12b249' }, h("div", { key: '50fda2b924adb494baaf57d3aff345166af49a67', class: 'participant-card top-card full-card', style: {
                 background: defaultRolePalette[this.recipient?.signerIndex % 100].s10,
                 border: `1px solid ${defaultRolePalette[this.recipient?.signerIndex % 100].s60}`,
                 outline: `${this.recipient.signerIndex === this.activeRecipient ? '4px solid ' + defaultRolePalette[this.recipient?.signerIndex % 100].s40 : 'none'}`,
@@ -51,24 +72,25 @@ const LsRecipientCard = /*@__PURE__*/ proxyCustomElement(class LsRecipientCard e
                 this.setIsHovered(true);
             }, onMouseLeave: () => {
                 this.setIsHovered(false);
-            } }, h("div", { key: '340f57166fc89348676fb4f04c9bf11c28f354f3', class: 'participant-card-inner' }, h("div", { key: '093fc0179aa7ccbaf59b3fb1e317eab48a1b1e39', class: 'participant-card-top-items' }, h("div", { key: '5dcb9006a31945c30a8819f47bc2a1e5d09115f1', class: 'role-label', style: {
+            } }, 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: {
                 background: defaultRolePalette[this.recipient?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.recipient?.signerIndex % 100].s90,
-            } }, h("ls-icon", { key: '57fece7def421db9ad2c75d249bb78307b80fd9f', name: this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature' }), String(this.recipient?.signerIndex).padStart(2, '0')), h("ls-icon", { key: '4420600e91f6ae98fd3ec380e3e8df5de65cf320', 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: '7810f97612a5a67e3a5d83c2e5795714e24141db', class: "dot", style: { display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && recipientSignatures.length === 0 ? 'block' : 'none' } })), h("div", { key: 'b95ed306f8c102bacae11a31f3d695ba1e2880b8', class: 'participant-card-text' }, h("p", { key: 'b14508d659d06b32958b4cfadf6482d170b88752', class: "participant-text-description", style: {
+            } }, 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: {
                 color: defaultRolePalette[this.recipient?.signerIndex % 100].s100,
-            } }, this.recipient?.firstname + ' ' + this.recipient?.lastname), h("p", { key: '3514b5b0159ad4f2dcb4eac61316168557841ee8', class: "participant-text-type", style: {
+            } }, this.recipient?.firstname + ' ' + this.recipient?.lastname), h("p", { key: '013de8ebb99f5e0828b11d1b04ac9c0128d2b45c', class: "participant-text-type", style: {
                 color: defaultRolePalette[this.recipient?.signerIndex % 100].s80,
-            } }, this.recipient.email)), this.recipient.signerIndex === this.activeRecipient && (h("div", { key: 'e359cfa64086998b6b8f28608b4f27c5196a1cb3', class: "fields-box" }, this.recipient.signerIndex > 0 && this.showTool('signature') && (h("ls-toolbox-field", { key: '60a8368bca61edf6d0d4c902ecc11271ab8190c7', 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: '5aa6302e0f08af58730278ca3e50f82c4b6e2e6d', 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: 'e8145ff9b67fe928b328c6d6d0c05f8035096d1c', 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: '2b3abf2743037a6a29df2f3e21e217d76c7b3eba', 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: 'e2991a8eb23d6355ba439cd365261525fd098e15', 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: '645d024c0e2b8ce8b88447f1829f9c60512f96a2', 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: 'a50f70b67e2e3d4655334624824dce66d60b72e3', 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: 'd07a3754d0e3a5f0f9b91c3184d1223a3835eedd', 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: '04a765bf3c5ae0777fd5a7ca3005253a95f47a2d', 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: '26129ce59e002c24af33dc30595872a446fb85f0', 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: '2c79066642214c45d2ac2905efdceb95fd90dded', 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: '365192282126b7a5d076e92c5432b08ab97b76b5', 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: '9e727a702c3afdc705114f01c81cc30b70499603', 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: '249819b054e52899b9b5dbdf582a766be313a874', 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: '48d6c0e3df1cbb2623bdd9e39a42681c0ae6f64b' }), h("ls-tooltip", { key: 'd56c2c5f27650cafa149e2dad4cc4f99cdd604d9', id: "ls-tooltip-master" })));
+            } }, 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" })));
     }
     static get style() { return lsRecipientCardCss; }
 }, [257, "ls-recipient-card", {
         "recipient": [16],
         "activeRecipient": [2, "active-recipient"],
+        "fieldTypeSelected": [16, "field-type-selected"],
         "template": [16],
         "validationErrors": [16, "validation-errors"],
         "filtertoolbox": [1],
         "isHovered": [32]
-    }]);
+    }, [[0, "fieldTypeSelected", "handleFieldTypeSelected"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -100,6 +122,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsRecipientCard as L, defineCustomElement as d };
-//# sourceMappingURL=p-Kpy4Ytig.js.map
+//# sourceMappingURL=p-B2ofj7BM.js.map
 
-//# sourceMappingURL=p-Kpy4Ytig.js.map
+//# sourceMappingURL=p-B2ofj7BM.js.map

package/dist/components/p-B2ofj7BM.js.map

@@ -0,0 +1 @@
+{"file":"p-B2ofj7BM.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-recipient-card/ls-recipient-card.css?tag=ls-recipient-card&encapsulation=shadow","src/components/ls-recipient-card/ls-recipient-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.participant-card {\n  display: flex;\n  padding: 0.75rem;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.5rem;\n  align-self: stretch;\n}\n\n.dot {\n  width: 0.5rem;\n  height: 0.5rem;\n  background: var(--red-50, #ff706b);\n  border-radius: 50%;\n  margin-right: 0.25rem;\n}\n\n.top-card {\n  border-radius: 1rem 1rem 0 0;\n}\n\n.full-card {\n  border-radius: 1.5rem;\n}\n\n.bottom-card {\n  border-radius: 0 0 1rem 1rem;\n}\n\n.participant-card-inner {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.hidden {\n  visibility: hidden;\n  display: none;\n}\n\n.form-button-set {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.role-label {\n  display: flex;\n  padding: 0.125rem 0.5rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.fields-box {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.role-label.fields {\n  border-radius: 1rem;\n  margin-top: 0.5rem;\n}\n\n.innerButton {\n  margin: 0px;\n  padding: 0px;\n  max-height: 1.25rem !important;\n  max-width: 1.25rem !important;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--default-button-colour);\n}\n\n.innerButton:hover {\n  color: var(--hover-button-colour);\n}\n\n.participant-card-top-items {\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.button-set {\n  display: flex;\n  gap: 0.125rem;\n}\n\n.participant-text-description {\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.participant-text-type {\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.titleButton {\n  width: 100%;\n  text-align: left;\n  background-color: transparent;\n  border: none;\n}\n\n/* Global Styles */\n\n.full-width {\n  width: 100%;\n}\n\n.participant-card-text {\n  padding: 0 0.125rem 0.125rem 0.125rem;\n}\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n  width: 100%;\n}\n\n.input-wrapper {\n  position: relative;\n  width: fit-content;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.tertiary {\n  border: 1px solid var(--primary-60, #4456f6);\n  background: transparent;\n  color: var(--primary-70, #2134dc);\n}\n\nbutton.tertiary:hover {\n  border: 1px solid var(--primary-70, #2134dc);\n  border: 1px solid var(--primary-80, #0c34b8);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background: transparent;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n  background-color: var(--red-10, #fff1f0);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State, Listen, Element } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { LSApiRecipient } from '../../types/LSApiRecipient';\nimport { LSApiTemplate } from '../../components';\nimport { ValidationError } from '../../types/ValidationError';\nimport { IToolboxField } from '../interfaces/IToolboxField';\n\n@Component({\n  tag: 'ls-recipient-card',\n  styleUrl: 'ls-recipient-card.css',\n  shadow: true,\n})\nexport class LsRecipientCard {\n  @Element() component: HTMLElement;\n  /**\n   * The initial template data, including the link for background PDF. See README and\n   * example for correct GraphQL query and data structure.\n   * {LSApiTemplate}\n   */\n  @Prop() recipient: LSApiRecipient;\n  @Prop() activeRecipient: number;\n  @Prop() fieldTypeSelected: IToolboxField = {\n    label: 'Signature',\n    formElementType: 'signature',\n    elementType: 'signature',\n    validation: 0,\n    defaultHeight: 27,\n    defaultWidth: 120,\n  };\n  @Prop() template: LSApiTemplate;\n  @State() isHovered: boolean = false;\n\n  private setIsHovered(value: boolean) {\n    this.isHovered = value;\n  }\n  @Prop() validationErrors: ValidationError[] = [];\n  \n  /**\n   * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list.\n   * {string}\n   */\n  @Prop() filtertoolbox?: string = null;\n\n  // Send an internal event to be processed\n  @Event() changeSigner: EventEmitter<number>;\n\n  // Send an internal event to be processed\n  @Event() fieldSelected: EventEmitter<IToolboxField>;\n\n    @Listen('fieldTypeSelected')\n    handleFieldTypeSelected(event) {\n      console.log(event);\n      const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');\n  \n      console.log(fields);\n  \n      fields.forEach(element => {\n        element.isSelected = element.formElementType === event.detail.formElementType;\n      });\n  \n      this.fieldTypeSelected = event.detail;\n    }\n\n  \n  showTool(fieldFormType: string): boolean {\n    return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);\n  }\n\n  render() {\n    const recipientFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.recipient.signerIndex) || [];\n    const recipientSignatures = recipientFields.filter(f => f.elementType === 'signature' || f.elementType === 'auto sign');\n    return (\n      <Host>\n        <div\n          class={'participant-card top-card full-card'}\n          style={{\n            background: defaultRolePalette[this.recipient?.signerIndex % 100].s10,\n            border: `1px solid ${defaultRolePalette[this.recipient?.signerIndex % 100].s60}`,\n            outline: `${this.recipient.signerIndex === this.activeRecipient ? '4px solid ' + defaultRolePalette[this.recipient?.signerIndex % 100].s40 : 'none'}`,\n            marginTop: this.recipient.roleType === 'WITNESS' ? '-0.813rem' : '0',\n            cursor: 'pointer',\n          }}\n          onClick={() => {\n            this.changeSigner.emit(this.recipient.signerIndex);\n          }}\n          onMouseEnter={() => {\n            this.setIsHovered(true);\n          }}\n          onMouseLeave={() => {\n            this.setIsHovered(false);\n          }}\n        >\n          <div class={'participant-card-inner'}>\n            <div class={'participant-card-top-items'}>\n              <div\n                class={'role-label'}\n                style={{\n                  background: defaultRolePalette[this.recipient?.signerIndex % 100].s20,\n                  color: defaultRolePalette[this.recipient?.signerIndex % 100].s90,\n                }}\n              >\n                <ls-icon name={this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature'} />\n                {String(this.recipient?.signerIndex).padStart(2, '0')}\n              </div>\n              <ls-icon\n                name=\"cursor-click\"\n                size=\"16\"\n                customStyle={{ color: defaultRolePalette[this.recipient?.signerIndex % 100].s70 }}\n                solid\n                style={{ display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? 'block' : 'none' }}\n              />\n              <div class=\"dot\" style={{ display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && recipientSignatures.length === 0 ? 'block' : 'none' }} />\n            </div>\n\n            <div class={'participant-card-text'}>\n              <p\n                class=\"participant-text-description\"\n                style={{\n                  color: defaultRolePalette[this.recipient?.signerIndex % 100].s100,\n                }}\n              >\n                {this.recipient?.firstname + ' ' + this.recipient?.lastname}\n              </p>\n              <p\n                class=\"participant-text-type\"\n                style={{\n                  color: defaultRolePalette[this.recipient?.signerIndex % 100].s80,\n                }}\n              >\n                {this.recipient.email}\n              </p>\n              {/* {this.recipient?.roleType !== 'APPROVER' && (\n                <div\n                  class={'role-label fields'}\n                  style={{\n                    background:\n                      recipientFields.length === 0 ? defaultRolePalette[this.recipient?.signerIndex % 100].s60 : defaultRolePalette[this.recipient?.signerIndex % 100].s20,\n                    color: recipientFields.length === 0 ? 'white' : defaultRolePalette[this.recipient?.signerIndex % 100].s90,\n                    // display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? '' : 'none',\n                  }}\n                >\n                  {recipientSignatures.length === 0 && <ls-icon name=\"exclamation-circle\" size=\"16\" style={{ marginRight: '0.125rem' }} />}\n                  {recipientSignatures.length === 0 ? 'Signature Required' : `${recipientFields.length} ${recipientFields.length === 1 ? 'Field' : 'Fields'}`}\n                </div>\n              )} */}\n            </div>\n            {this.recipient.signerIndex === this.activeRecipient && (\n              <div class=\"fields-box\">\n                {this.recipient.signerIndex > 0 && this.showTool('signature') && (\n                  <ls-toolbox-field\n                    elementType=\"signature\"\n                    formElementType=\"signature\"\n                    label=\"Signature\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={0}\n                    icon=\"signature\"\n                    tooltip=\"Use this field to collect Signatures from Participants\"\n                    signer={this.recipient.signerIndex}\n                    redDot={recipientSignatures.length === 0}\n                  />\n                )}\n\n                {this.recipient.signerIndex === 0 && this.showTool('auto sign') && (\n                  <ls-toolbox-field\n                    elementType=\"auto sign\"\n                    formElementType=\"auto sign\"\n                    label=\"Auto Sign\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={3000}\n                    icon=\"auto-sign\"\n                    tooltip=\"Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.showTool('text') && (\n                  <ls-toolbox-field\n                    elementType=\"text\"\n                    formElementType=\"text\"\n                    label=\"Text\"\n                    defaultHeight={27}\n                    defaultWidth={100}\n                    validation={0}\n                    icon=\"text\"\n                    tooltip=\"A field for collecting any plain text values such as: names, addresses or descriptions\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.recipient.signerIndex > 0 && this.showTool('signing date') && (\n                  <ls-toolbox-field\n                    elementType=\"signing date\"\n                    formElementType=\"signing date\"\n                    label=\"Signing Date\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={30}\n                    icon=\"auto-date\"\n                    tooltip=\"Automatically inserts the date upon completion by the assigned Participant\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('date') && (\n                  <ls-toolbox-field\n                    elementType=\"date\"\n                    formElementType=\"date\"\n                    label=\"Date\"\n                    defaultHeight={27}\n                    defaultWidth={80}\n                    validation={2}\n                    icon=\"calender\"\n                    tooltip=\"A field for collecting dates with built-in date formatting options\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.showTool('email') && (\n                  <ls-toolbox-field\n                    elementType=\"email\"\n                    formElementType=\"email\"\n                    label=\"Email\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={1}\n                    icon=\"at-symbol\"\n                    tooltip=\"A Field to only accept entries formatted as an email address (e.g., example@example.com)\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('initials') && (\n                  <ls-toolbox-field\n                    elementType=\"initials\"\n                    formElementType=\"initials\"\n                    label=\"Initials\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={2000}\n                    icon=\"initials\"\n                    tooltip=\"Use this field anywhere Participants are required to Initial your document\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('number') && (\n                  <ls-toolbox-field\n                    elementType=\"number\"\n                    formElementType=\"number\"\n                    label=\"Number\"\n                    defaultHeight={27}\n                    defaultWidth={80}\n                    validation={50}\n                    icon=\"hashtag\"\n                    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)\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('dropdown') && (\n                  <ls-toolbox-field\n                    elementType=\"dropdown\"\n                    formElementType=\"dropdown\"\n                    label=\"Dropdown\"\n                    defaultHeight={27}\n                    defaultWidth={80}\n                    validation={20}\n                    icon=\"dropdown\"\n                    tooltip=\"Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('checkbox') && (\n                  <ls-toolbox-field\n                    elementType=\"checkbox\"\n                    formElementType=\"checkbox\"\n                    label=\"Checkbox\"\n                    defaultHeight={27}\n                    defaultWidth={27}\n                    validation={25}\n                    icon=\"check\"\n                    tooltip=\"Places a checkbox on your document. Handy for T&Cs or  ✔/✗ sections\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.recipient.signerIndex > 0 && this.showTool('regex') && (\n                  <ls-toolbox-field\n                    elementType=\"regex\"\n                    formElementType=\"regex\"\n                    label=\"Regex\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={93}\n                    icon=\"code\"\n                    tooltip=\"Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.recipient.signerIndex > 0 && this.showTool('image') && (\n                  <ls-toolbox-field\n                    elementType=\"image\"\n                    formElementType=\"image\"\n                    label=\"Image\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={90}\n                    icon=\"photograph\"\n                    tooltip=\"Use when you need Participants to upload their own images during the signing process\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.recipient.signerIndex > 0 && this.showTool('file') && (\n                  <ls-toolbox-field\n                    elementType=\"file\"\n                    formElementType=\"file\"\n                    label=\"File\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={74}\n                    icon=\"upload\"\n                    tooltip=\"Use when you need Participants to upload their own documents during the signing process\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.recipient.signerIndex > 0 && this.showTool('drawn') && (\n                  <ls-toolbox-field\n                    elementType=\"drawn\"\n                    formElementType=\"drawn\"\n                    label=\"Drawn\"\n                    defaultHeight={120}\n                    defaultWidth={120}\n                    validation={90}\n                    icon=\"pencil\"\n                    tooltip=\"Allow users to draw on the document using their mouse or touchscreen\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/loader.js

@@ -4,7 +4,7 @@ export { s as setNonce } from './index-BzcAlD18.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["ls-field-properties-dropdown",[[257,"ls-field-properties-dropdown",{"dataItem":[16,"data-item"]}]]],["ls-formfield",[[260,"ls-formfield",{"name":[1],"fieldId":[1,"field-id"],"label":[1],"as":[1],"value":[1032],"placeholder":[1],"descriptionText":[1,"description-text"],"errorText":[1,"error-text"],"aria":[1],"inputRef":[1,"input-ref"],"infoTooltipText":[1,"info-tooltip-text"],"hoverTooltipText":[1,"hover-tooltip-text"],"disabled":[4],"extraLabel":[1,"extra-label"],"required":[4],"valid":[4],"dirty":[4],"count":[4],"countMax":[2,"count-max"],"buttonClick":[16,"button-click"],"buttonIcon":[1,"button-icon"],"labelIcon":[1,"label-icon"],"fieldIcon":[1,"field-icon"],"_value":[32]},null,{"value":["valueWatcher"]}]]],["ls-compose-manager",[[257,"ls-compose-manager",{"template":[16]}]]],["ls-document-options_45",[[257,"ls-document-viewer",{"template":[1],"token":[1],"userpool":[1],"endpoint":[1],"templateid":[1],"recipients":[1],"_recipients":[16],"zoom":[1026],"pageNum":[1026,"page-num"],"pageCount":[1026,"page-count"],"signer":[1026],"groupInfo":[1032,"group-info"],"mode":[1],"manager":[1025],"displayTable":[1028,"display-table"],"filtertoolbox":[1],"showstatusbar":[4],"showpagepreview":[4],"readonly":[4],"showtableview":[4],"toolboxFilter":[1,"toolbox-filter"],"_template":[32],"validationErrors":[32],"status":[32],"selected":[32],"isLoading":[32],"fieldTypeSelected":[32],"pageNext":[64],"pagePrev":[64],"unselect":[64],"setZoom":[64]},[[0,"mutate","mutateHandler"],[0,"fieldTypeSelected","handleFieldTypeSelected"],[0,"update","updateHandler"],[0,"addParticipant","addParticpantHandler"],[0,"changeSigner","updateSigner"],[0,"selectFields","selectFieldsHandler"],[0,"roleChange","roleHandler"]],{"mode":["modeHandler"]}],[257,"ls-field-properties",{"dataItem":[16,"data-item"]}],[257,"ls-statusbar",{"zoom":[1026],"page":[1026],"pageCount":[1026,"page-count"],"editor":[16]}],[257,"ls-participant-manager",{"editor":[16],"template":[16]}],[257,"ls-toolbar",{"dataItem":[1040,"data-item"],"groupInfo":[16,"group-info"],"template":[16],"editor":[1040]}],[257,"ls-document-options",{"template":[1040],"editTitle":[32]},null,{"template":["selectedHandler"]}],[257,"ls-recipient-card",{"recipient":[16],"activeRecipient":[2,"active-recipient"],"template":[16],"validationErrors":[16,"validation-errors"],"filtertoolbox":[1],"isHovered":[32]}],[257,"ls-validation-manager",{"validationErrors":[16,"validation-errors"]}],[257,"ls-feature-column",{"manager":[1025],"mode":[1]}],[257,"ls-validation-tag",{"status":[1025],"validationErrors":[1040,"validation-errors"],"isExpanded":[1028,"is-expanded"],"type":[1],"showDropDown":[4,"show-drop-down"]}],[257,"ls-editor-table",{"editor":[16]}],[257,"ls-page-loader"],[257,"ls-recipient-manager"],[257,"ls-field-properties-date",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-email",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-file",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-general",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-image",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-number",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-signature",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-text",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-multiple",{"dataItem":[1040,"data-item"]}],[257,"ls-field-properties-autosign",{"dataItem":[16,"data-item"]}],[257,"ls-helper-bar",{"expanded":[1028],"shortcutsBtn":[32]}],[257,"ls-participant-card",{"signer":[16],"index":[2],"editable":[1028],"template":[16],"swapUpBtn":[32],"swapDownBtn":[32],"editBtn":[32],"deleteParticipantBtn":[32]},null,{"editable":["modeHandler"]}],[257,"ls-field-format",{"dataItem":[1040,"data-item"]},null,{"dataItem":["selectFieldsHandler"]}],[257,"ls-participant-select",{"selected":[1025],"roles":[16],"selectedRole":[32],"isOpen":[32]},null,{"roles":["handleRoleLoad"]}],[257,"ls-field-distribute",{"dataItem":[1040,"data-item"]}],[257,"ls-field-alignment",{"dataItem":[1040,"data-item"]}],[257,"ls-field-size",{"dataItem":[1040,"data-item"]}],[257,"ls-toolbox-field",{"formElementType":[1,"form-element-type"],"elementType":[1,"element-type"],"validation":[2],"fixedAspect":[2,"fixed-aspect"],"redDot":[4,"red-dot"],"label":[1],"icon":[1],"tooltip":[1],"defaultHeight":[2,"default-height"],"defaultWidth":[2,"default-width"],"signer":[2],"isSelected":[1028,"is-selected"]},[[1,"dragstart","handleDragStart"],[0,"keydown","handleKeyDown"]]],[257,"ls-keyboard-shortcuts",{"referenceElement":[16,"reference-element"],"visible":[32]}],[257,"ls-field-content",{"dataItem":[1040,"data-item"],"showValidationTypes":[4,"show-validation-types"]}],[257,"ls-field-placement",{"dataItem":[1040,"data-item"]}],[257,"ls-field-properties-advanced",{"dataItem":[1040,"data-item"],"expanded":[1028]}],[257,"ls-field-type-display",{"assignee":[2],"fieldType":[1,"field-type"]}],[257,"ls-field-properties-container",{"dataItem":[16,"data-item"],"tabs":[16],"selectedTab":[1537,"selected-tab"]}],[257,"ls-field-dimensions",{"dataItem":[1040,"data-item"]}],[257,"ls-field-footer",{"dataItem":[1040,"data-item"]}],[257,"ls-input-wrapper",{"leadingIcon":[1,"leading-icon"],"select":[4]}],[257,"ls-props-section",{"sectionTitle":[1,"section-title"],"sectionDescription":[1,"section-description"],"row":[4]}],[260,"ls-toggle",{"checked":[1028],"indeterminate":[4]}],[257,"ls-editor-field",{"dataItem":[1040,"data-item"],"selected":[4],"readonly":[4],"type":[1],"page":[16],"fixedAspect":[2,"fixed-aspect"],"isEditing":[32],"heldEdge":[32],"isEdgeDragging":[32],"innerValue":[32]},[[0,"keydown","handleInput"],[3,"mousemove","handleMouseMove"],[2,"dblclick","handleDoubleClick"],[0,"dragstart","handleDragStart"]],{"selected":["watchSelectedHandler"]}],[257,"ls-tooltip",{"referenceElement":[1040,"reference-element"],"placement":[1025],"tooltipText":[1025,"tooltip-text"],"tooltipTitle":[1025,"tooltip-title"],"tooltipLocked":[4,"tooltip-locked"],"hide":[64]},null,{"referenceElement":["updateReferenceHandler"]}],[257,"ls-icon",{"name":[1],"solid":[4],"color":[1],"size":[1],"customStyle":[16,"custom-style"]}]]],["ls-number-input_5",[[257,"ls-number-input",{"type":[1],"name":[1],"value":[1026],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[256,"ls-radio-input",{"radioId":[1,"radio-id"],"label":[1],"icon":[1],"name":[1],"checked":[4],"disabled":[4],"customStyle":[16,"custom-style"]}],[260,"ls-select-input",{"name":[1],"value":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[257,"ls-text-input",{"type":[1],"name":[1],"value":[1025],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"],"showPassword":[32]}],[257,"ls-textarea-input",{"name":[1],"value":[1],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}]]]], options);
+  return bootstrapLazy([["ls-field-properties-dropdown",[[257,"ls-field-properties-dropdown",{"dataItem":[16,"data-item"]}]]],["ls-formfield",[[260,"ls-formfield",{"name":[1],"fieldId":[1,"field-id"],"label":[1],"as":[1],"value":[1032],"placeholder":[1],"descriptionText":[1,"description-text"],"errorText":[1,"error-text"],"aria":[1],"inputRef":[1,"input-ref"],"infoTooltipText":[1,"info-tooltip-text"],"hoverTooltipText":[1,"hover-tooltip-text"],"disabled":[4],"extraLabel":[1,"extra-label"],"required":[4],"valid":[4],"dirty":[4],"count":[4],"countMax":[2,"count-max"],"buttonClick":[16,"button-click"],"buttonIcon":[1,"button-icon"],"labelIcon":[1,"label-icon"],"fieldIcon":[1,"field-icon"],"_value":[32]},null,{"value":["valueWatcher"]}]]],["ls-compose-manager",[[257,"ls-compose-manager",{"template":[16]}]]],["ls-document-options_45",[[257,"ls-document-viewer",{"template":[1],"token":[1],"userpool":[1],"endpoint":[1],"templateid":[1],"recipients":[1],"_recipients":[16],"zoom":[1026],"pageNum":[1026,"page-num"],"pageCount":[1026,"page-count"],"signer":[1026],"groupInfo":[1032,"group-info"],"mode":[1],"manager":[1025],"displayTable":[1028,"display-table"],"filtertoolbox":[1],"showstatusbar":[4],"showpagepreview":[4],"readonly":[4],"showtableview":[4],"toolboxFilter":[1,"toolbox-filter"],"_template":[32],"validationErrors":[32],"status":[32],"selected":[32],"isLoading":[32],"fieldTypeSelected":[32],"pageNext":[64],"pagePrev":[64],"unselect":[64],"setZoom":[64]},[[0,"mutate","mutateHandler"],[0,"fieldTypeSelected","handleFieldTypeSelected"],[0,"update","updateHandler"],[0,"addParticipant","addParticpantHandler"],[0,"changeSigner","updateSigner"],[0,"selectFields","selectFieldsHandler"],[0,"roleChange","roleHandler"]],{"mode":["modeHandler"]}],[257,"ls-field-properties",{"dataItem":[16,"data-item"]}],[257,"ls-statusbar",{"zoom":[1026],"page":[1026],"pageCount":[1026,"page-count"],"editor":[16]}],[257,"ls-participant-manager",{"editor":[16],"template":[16]}],[257,"ls-toolbar",{"dataItem":[1040,"data-item"],"groupInfo":[16,"group-info"],"template":[16],"editor":[1040]}],[257,"ls-document-options",{"template":[1040],"editTitle":[32]},null,{"template":["selectedHandler"]}],[257,"ls-recipient-card",{"recipient":[16],"activeRecipient":[2,"active-recipient"],"fieldTypeSelected":[16,"field-type-selected"],"template":[16],"validationErrors":[16,"validation-errors"],"filtertoolbox":[1],"isHovered":[32]},[[0,"fieldTypeSelected","handleFieldTypeSelected"]]],[257,"ls-validation-manager",{"validationErrors":[16,"validation-errors"]}],[257,"ls-feature-column",{"manager":[1025],"mode":[1]}],[257,"ls-validation-tag",{"status":[1025],"validationErrors":[1040,"validation-errors"],"isExpanded":[1028,"is-expanded"],"type":[1],"showDropDown":[4,"show-drop-down"]}],[257,"ls-editor-table",{"editor":[16]}],[257,"ls-page-loader"],[257,"ls-recipient-manager"],[257,"ls-field-properties-date",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-email",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-file",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-general",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-image",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-number",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-signature",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-text",{"dataItem":[16,"data-item"]}],[257,"ls-field-properties-multiple",{"dataItem":[1040,"data-item"]}],[257,"ls-field-properties-autosign",{"dataItem":[16,"data-item"]}],[257,"ls-helper-bar",{"expanded":[1028],"shortcutsBtn":[32]}],[257,"ls-participant-card",{"signer":[16],"index":[2],"editable":[1028],"template":[16],"swapUpBtn":[32],"swapDownBtn":[32],"editBtn":[32],"deleteParticipantBtn":[32]},null,{"editable":["modeHandler"]}],[257,"ls-field-format",{"dataItem":[1040,"data-item"]},null,{"dataItem":["selectFieldsHandler"]}],[257,"ls-participant-select",{"selected":[1025],"roles":[16],"selectedRole":[32],"isOpen":[32]},null,{"roles":["handleRoleLoad"]}],[257,"ls-field-distribute",{"dataItem":[1040,"data-item"]}],[257,"ls-field-alignment",{"dataItem":[1040,"data-item"]}],[257,"ls-field-size",{"dataItem":[1040,"data-item"]}],[257,"ls-toolbox-field",{"formElementType":[1,"form-element-type"],"elementType":[1,"element-type"],"validation":[2],"fixedAspect":[2,"fixed-aspect"],"redDot":[4,"red-dot"],"label":[1],"icon":[1],"tooltip":[1],"defaultHeight":[2,"default-height"],"defaultWidth":[2,"default-width"],"signer":[2],"isSelected":[1028,"is-selected"]},[[1,"dragstart","handleDragStart"],[0,"keydown","handleKeyDown"]]],[257,"ls-keyboard-shortcuts",{"referenceElement":[16,"reference-element"],"visible":[32]}],[257,"ls-field-content",{"dataItem":[1040,"data-item"],"showValidationTypes":[4,"show-validation-types"]}],[257,"ls-field-placement",{"dataItem":[1040,"data-item"]}],[257,"ls-field-properties-advanced",{"dataItem":[1040,"data-item"],"expanded":[1028]}],[257,"ls-field-type-display",{"assignee":[2],"fieldType":[1,"field-type"]}],[257,"ls-field-properties-container",{"dataItem":[16,"data-item"],"tabs":[16],"selectedTab":[1537,"selected-tab"]}],[257,"ls-field-dimensions",{"dataItem":[1040,"data-item"]}],[257,"ls-field-footer",{"dataItem":[1040,"data-item"]}],[257,"ls-input-wrapper",{"leadingIcon":[1,"leading-icon"],"select":[4]}],[257,"ls-props-section",{"sectionTitle":[1,"section-title"],"sectionDescription":[1,"section-description"],"row":[4]}],[260,"ls-toggle",{"checked":[1028],"indeterminate":[4]}],[257,"ls-editor-field",{"dataItem":[1040,"data-item"],"selected":[4],"readonly":[4],"type":[1],"page":[16],"fixedAspect":[2,"fixed-aspect"],"isEditing":[32],"heldEdge":[32],"isEdgeDragging":[32],"innerValue":[32]},[[0,"keydown","handleInput"],[3,"mousemove","handleMouseMove"],[2,"dblclick","handleDoubleClick"],[0,"dragstart","handleDragStart"]],{"selected":["watchSelectedHandler"]}],[257,"ls-tooltip",{"referenceElement":[1040,"reference-element"],"placement":[1025],"tooltipText":[1025,"tooltip-text"],"tooltipTitle":[1025,"tooltip-title"],"tooltipLocked":[4,"tooltip-locked"],"hide":[64]},null,{"referenceElement":["updateReferenceHandler"]}],[257,"ls-icon",{"name":[1],"solid":[4],"color":[1],"size":[1],"customStyle":[16,"custom-style"]}]]],["ls-number-input_5",[[257,"ls-number-input",{"type":[1],"name":[1],"value":[1026],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[256,"ls-radio-input",{"radioId":[1,"radio-id"],"label":[1],"icon":[1],"name":[1],"checked":[4],"disabled":[4],"customStyle":[16,"custom-style"]}],[260,"ls-select-input",{"name":[1],"value":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}],[257,"ls-text-input",{"type":[1],"name":[1],"value":[1025],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"],"showPassword":[32]}],[257,"ls-textarea-input",{"name":[1],"value":[1],"placeholder":[1],"aria":[1],"inputRef":[1,"input-ref"],"disabled":[4],"displayOnly":[4,"display-only"],"required":[4],"valid":[4],"dirty":[4],"countMax":[2,"count-max"],"buttonClick":[8,"button-click"],"buttonIcon":[1,"button-icon"],"fieldIcon":[1,"field-icon"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/ls-document-options_45.entry.js

@@ -25407,7 +25407,7 @@ const LsDocumentViewer = class {
         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;
@@ -25423,10 +25423,10 @@ const LsDocumentViewer = class {
                 }
                 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"]
@@ -35804,7 +35804,9 @@ const LsRecipientCard = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.changeSigner = createEvent(this, "changeSigner");
+        this.fieldSelected = createEvent(this, "fieldSelected");
     }
+    get component() { return getElement(this); }
     /**
      * The initial template data, including the link for background PDF. See README and
      * example for correct GraphQL query and data structure.
@@ -35812,6 +35814,14 @@ const LsRecipientCard = class {
      */
     recipient;
     activeRecipient;
+    fieldTypeSelected = {
+        label: 'Signature',
+        formElementType: 'signature',
+        elementType: 'signature',
+        validation: 0,
+        defaultHeight: 27,
+        defaultWidth: 120,
+    };
     template;
     isHovered = false;
     setIsHovered(value) {
@@ -35825,13 +35835,24 @@ const LsRecipientCard = class {
     filtertoolbox = null;
     // Send an internal event to be processed
     changeSigner;
+    // Send an internal event to be processed
+    fieldSelected;
+    handleFieldTypeSelected(event) {
+        console.log(event);
+        const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
+        console.log(fields);
+        fields.forEach(element => {
+            element.isSelected = element.formElementType === event.detail.formElementType;
+        });
+        this.fieldTypeSelected = event.detail;
+    }
     showTool(fieldFormType) {
         return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
     }
     render() {
         const recipientFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.recipient.signerIndex) || [];
         const recipientSignatures = recipientFields.filter(f => f.elementType === 'signature' || f.elementType === 'auto sign');
-        return (h(Host, { key: 'a61996a542ccf7e67c50d27a206311b836ffd331' }, h("div", { key: 'c7e1b9cdc6e23240953386ce15277f21d07d7042', class: 'participant-card top-card full-card', style: {
+        return (h(Host, { key: '4f5d189dbc71916be6d7154e9f12d48ebe12b249' }, h("div", { key: '50fda2b924adb494baaf57d3aff345166af49a67', class: 'participant-card top-card full-card', style: {
                 background: defaultRolePalette[this.recipient?.signerIndex % 100].s10,
                 border: `1px solid ${defaultRolePalette[this.recipient?.signerIndex % 100].s60}`,
                 outline: `${this.recipient.signerIndex === this.activeRecipient ? '4px solid ' + defaultRolePalette[this.recipient?.signerIndex % 100].s40 : 'none'}`,
@@ -35843,14 +35864,14 @@ const LsRecipientCard = class {
                 this.setIsHovered(true);
             }, onMouseLeave: () => {
                 this.setIsHovered(false);
-            } }, h("div", { key: '340f57166fc89348676fb4f04c9bf11c28f354f3', class: 'participant-card-inner' }, h("div", { key: '093fc0179aa7ccbaf59b3fb1e317eab48a1b1e39', class: 'participant-card-top-items' }, h("div", { key: '5dcb9006a31945c30a8819f47bc2a1e5d09115f1', class: 'role-label', style: {
+            } }, 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: {
                 background: defaultRolePalette[this.recipient?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.recipient?.signerIndex % 100].s90,
-            } }, h("ls-icon", { key: '57fece7def421db9ad2c75d249bb78307b80fd9f', name: this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature' }), String(this.recipient?.signerIndex).padStart(2, '0')), h("ls-icon", { key: '4420600e91f6ae98fd3ec380e3e8df5de65cf320', 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: '7810f97612a5a67e3a5d83c2e5795714e24141db', class: "dot", style: { display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && recipientSignatures.length === 0 ? 'block' : 'none' } })), h("div", { key: 'b95ed306f8c102bacae11a31f3d695ba1e2880b8', class: 'participant-card-text' }, h("p", { key: 'b14508d659d06b32958b4cfadf6482d170b88752', class: "participant-text-description", style: {
+            } }, 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: {
                 color: defaultRolePalette[this.recipient?.signerIndex % 100].s100,
-            } }, this.recipient?.firstname + ' ' + this.recipient?.lastname), h("p", { key: '3514b5b0159ad4f2dcb4eac61316168557841ee8', class: "participant-text-type", style: {
+            } }, this.recipient?.firstname + ' ' + this.recipient?.lastname), h("p", { key: '013de8ebb99f5e0828b11d1b04ac9c0128d2b45c', class: "participant-text-type", style: {
                 color: defaultRolePalette[this.recipient?.signerIndex % 100].s80,
-            } }, this.recipient.email)), this.recipient.signerIndex === this.activeRecipient && (h("div", { key: 'e359cfa64086998b6b8f28608b4f27c5196a1cb3', class: "fields-box" }, this.recipient.signerIndex > 0 && this.showTool('signature') && (h("ls-toolbox-field", { key: '60a8368bca61edf6d0d4c902ecc11271ab8190c7', 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: '5aa6302e0f08af58730278ca3e50f82c4b6e2e6d', 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: 'e8145ff9b67fe928b328c6d6d0c05f8035096d1c', 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: '2b3abf2743037a6a29df2f3e21e217d76c7b3eba', 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: 'e2991a8eb23d6355ba439cd365261525fd098e15', 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: '645d024c0e2b8ce8b88447f1829f9c60512f96a2', 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: 'a50f70b67e2e3d4655334624824dce66d60b72e3', 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: 'd07a3754d0e3a5f0f9b91c3184d1223a3835eedd', 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: '04a765bf3c5ae0777fd5a7ca3005253a95f47a2d', 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: '26129ce59e002c24af33dc30595872a446fb85f0', 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: '2c79066642214c45d2ac2905efdceb95fd90dded', 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: '365192282126b7a5d076e92c5432b08ab97b76b5', 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: '9e727a702c3afdc705114f01c81cc30b70499603', 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: '249819b054e52899b9b5dbdf582a766be313a874', 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: '48d6c0e3df1cbb2623bdd9e39a42681c0ae6f64b' }), h("ls-tooltip", { key: 'd56c2c5f27650cafa149e2dad4cc4f99cdd604d9', id: "ls-tooltip-master" })));
+            } }, 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" })));
     }
 };
 LsRecipientCard.style = lsRecipientCardCss;