legalesign-document-viewer 0.7.1 → 0.7.2

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

@@ -0,0 +1,299 @@
+import { Host, h } from "@stencil/core";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
+export class LsRecipientCard {
+    component;
+    /**
+     * The initial template data, including the link for background PDF. See README and
+     * example for correct GraphQL query and data structure.
+     * {LSApiTemplate}
+     */
+    recipient;
+    activeRecipient;
+    fieldTypeSelected = {
+        label: 'Signature',
+        formElementType: 'signature',
+        elementType: 'signature',
+        validation: 0,
+        defaultHeight: 27,
+        defaultWidth: 120,
+    };
+    template;
+    isHovered = false;
+    setIsHovered(value) {
+        this.isHovered = value;
+    }
+    validationErrors = [];
+    /**
+     * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list.
+     * {string}
+     */
+    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);
+    }
+    cardRef;
+    handleExpandCollapse() {
+        if (!this.cardRef)
+            return;
+        const isActive = this.activeRecipient === this.recipient.signerIndex;
+        if (isActive) {
+            // Expand
+            this.cardRef.style.maxHeight = this.cardRef.scrollHeight + 'px';
+        }
+        else {
+            // Collapse
+            this.cardRef.style.maxHeight = '6rem';
+        }
+    }
+    componentDidLoad() {
+        const isActive = this.activeRecipient === this.recipient.signerIndex;
+        this.cardRef.style.maxHeight = isActive ? this.cardRef.scrollHeight + 'px' : '6rem';
+    }
+    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: '903130cf529b43981b952104f0becfe3072348b2' }, h("div", { key: '9297686e83f551a7b853fb4ac042d91353121bb9', ref: el => (this.cardRef = el), class: `participant-card top-card full-card ${this.activeRecipient === this.recipient.signerIndex ? 'expanded' : ''}`, style: {
+                background: defaultRolePalette[this.recipient?.signerIndex % 100].s10,
+                border: `1px ${this.recipient.roleType === 'WITNESS' ? 'dashed' : 'solid'} ${defaultRolePalette[this.recipient?.signerIndex % 100].s60}`,
+                outline: `${this.recipient.signerIndex === this.activeRecipient ? '4px solid ' + defaultRolePalette[this.recipient?.signerIndex % 100].s40 : 'none'}`,
+                marginTop: '0',
+                cursor: 'pointer',
+            }, onClick: () => {
+                this.changeSigner.emit(this.recipient.signerIndex);
+            }, onMouseEnter: () => {
+                this.setIsHovered(true);
+            }, onMouseLeave: () => {
+                this.setIsHovered(false);
+            } }, h("div", { key: '4e11349918699d1c1a028ea57ad143ee11798acc', class: 'participant-card-inner' }, h("div", { key: '25d5256f08b22e56b63c4dfd2a5614f5fb385669', class: 'participant-card-top-items' }, h("div", { key: 'e1fe583fb47163e13c04f35d19322e52a5eb66b2', class: 'role-label', style: {
+                background: defaultRolePalette[this.recipient?.signerIndex % 100].s20,
+                color: defaultRolePalette[this.recipient?.signerIndex % 100].s90,
+            } }, h("ls-icon", { key: '4d0aca298ea272e3efc7fd0cf4a43472e3549d3d', name: this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature', size: '1rem' }), this.recipient?.roleType || 'SIGNER'), h("ls-icon", { key: 'd0a84cacf3fb75a8a3d339bfbe549f9e5be23876', name: "cursor-click", size: "1rem", customStyle: { color: defaultRolePalette[this.recipient?.signerIndex % 100].s70 }, solid: true, style: { display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? 'block' : 'none' } }), h("div", { key: '789121bc1d7d75fe452c2c67082816a10c27d570', class: "dot", style: { display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && this.validationErrors.filter(v => v?.signerIndex === this.recipient.signerIndex).length > 0 ? 'block' : 'none' } })), h("div", { key: 'fabf3a9a36b49213ebdee5cd409aa6bbcbc26ff6', class: 'participant-card-text' }, h("p", { key: 'ee1ff4dbb6c32a3a1ac1800e1b0354649dd47c77', class: "participant-text-description", style: {
+                color: defaultRolePalette[this.recipient?.signerIndex % 100].s100,
+            } }, this.recipient?.previousRecipientDecides ? 'To Be Decided' : this.recipient?.firstName + ' ' + this.recipient?.lastName), h("p", { key: '63a110705d9ffdbc747c3d3d89f83e8a0ab3fa7f', class: "participant-text-type", style: {
+                color: defaultRolePalette[this.recipient?.signerIndex % 100].s80,
+            } }, this.recipient?.previousRecipientDecides ? 'Details will be decided by previous recipient' : this.recipient.email)), h("div", { key: '364d0be6555c821ec7fc141991debe06808b0af2', class: "fields-box", style: { display: this.recipient.signerIndex === this.activeRecipient ? 'flex' : 'hidden' } }, this.recipient.signerIndex > 0 && this.showTool('signature') && (h("ls-toolbox-field", { key: '2ce8cc8bb0dcc4fd61d69c8d46b7afeb9e97be40', 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.roleType !== 'APPROVER' })), this.recipient.signerIndex === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { key: 'b8a5595c5cc8243c8c2ceff8ca58561212cb3cdf', 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: 'ba7f1f4e8a5fcb6ce9602347d2a83a7c9505d9fa', 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: 'b500358ec8491731768aa20fc7e43899f221fb7e', 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: '324a603ab9c3d5fb4d2376510f41f713cbaccf3b', 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: '742435eb1731203eda073ff2729bb2f4058fb623', 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: '138724929cfa7885b7fa0940e3158d773f201ff2', 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: '1710f3788c60fb66084726e40abec786200189dd', 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: '842aa2b0dd9054311d3fd78ca9ee8037353db1c5', 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: '0db32dd79537c11214972b4c33d7ab42ea339daa', 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: '0582074206874367e60fb53b295165d0c938b3ac', 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: '2120a10a1d49be6f2d20080544323a4d6a3758f3', 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: 'd3f882ef0c1b587037b98eb0455e077d37fec16b', 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: '4625f03e884c54d0a9041a75d37c63013c8f9d9a', 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: '560a0d9cab342fe4e8dae4c7b4df19db491560aa' }), h("ls-tooltip", { key: '07c8b7d76388746cf267cf19f25204f2a6f6eb74', id: "ls-tooltip-master" })));
+    }
+    static get is() { return "ls-recipient-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-recipient-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-recipient-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "recipient": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LSApiRecipient",
+                    "resolved": "{ name: string; email: string; firstName: string; lastName: string; signerIndex?: number; phone?: string; previousRecipientDecides?: boolean; roleType?: \"SIGNER\" | \"APPROVER\" | \"WITNESS\" | \"FORM_FILLER\"; }",
+                    "references": {
+                        "LSApiRecipient": {
+                            "location": "import",
+                            "path": "../../types/LSApiRecipient",
+                            "id": "src/types/LSApiRecipient.ts::LSApiRecipient"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The initial template data, including the link for background PDF. See README and\nexample for correct GraphQL query and data structure.\n{LSApiTemplate}"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "activeRecipient": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-recipient"
+            },
+            "fieldTypeSelected": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IToolboxField",
+                    "resolved": "IToolboxField",
+                    "references": {
+                        "IToolboxField": {
+                            "location": "import",
+                            "path": "../interfaces/IToolboxField",
+                            "id": "src/components/interfaces/IToolboxField.ts::IToolboxField"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\n    label: 'Signature',\n    formElementType: 'signature',\n    elementType: 'signature',\n    validation: 0,\n    defaultHeight: 27,\n    defaultWidth: 120,\n  }"
+            },
+            "template": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LSApiTemplate",
+                    "resolved": "{ id: string; title: string; pageCount: number; fileName: string; link: string; autoArchive: boolean; valid: boolean; locked: boolean; tags: string[]; groupId: string; roles: LSApiRole[]; canOpenSign: boolean; directLinks: []; elementConnection: { templateElements: LSApiElement[]; totalCount: number; }; elements: LSApiElement[]; createdBy: string; created: Date; modified: Date; lastSent: Date; pageDimensionArray: [number, number][]; pageDimensions: string; fixSignatureScale?: boolean; documentRetentionDays: number; }",
+                    "references": {
+                        "LSApiTemplate": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::LSApiTemplate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "validationErrors": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ValidationError[]",
+                    "resolved": "ValidationError[]",
+                    "references": {
+                        "ValidationError": {
+                            "location": "import",
+                            "path": "../../types/ValidationError",
+                            "id": "src/types/ValidationError.ts::ValidationError"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "filtertoolbox": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list.\n{string}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filtertoolbox",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHovered": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeSigner",
+                "name": "changeSigner",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "fieldSelected",
+                "name": "fieldSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IToolboxField",
+                    "resolved": "IToolboxField",
+                    "references": {
+                        "IToolboxField": {
+                            "location": "import",
+                            "path": "../interfaces/IToolboxField",
+                            "id": "src/components/interfaces/IToolboxField.ts::IToolboxField"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "component"; }
+    static get watchers() {
+        return [{
+                "propName": "activeRecipient",
+                "methodName": "handleExpandCollapse"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "fieldTypeSelected",
+                "method": "handleFieldTypeSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=ls-recipient-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ls-recipient-card.js","sourceRoot":"","sources":["../../../src/components/ls-recipient-card/ls-recipient-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC7G,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAW1E,MAAM,OAAO,eAAe;IACf,SAAS,CAAc;IAClC;;;;OAIG;IACK,SAAS,CAAiB;IAC1B,eAAe,CAAS;IACxB,iBAAiB,GAAkB;QACzC,KAAK,EAAE,WAAW;QAClB,eAAe,EAAE,WAAW;QAC5B,WAAW,EAAE,WAAW;QACxB,UAAU,EAAE,CAAC;QACb,aAAa,EAAE,EAAE;QACjB,YAAY,EAAE,GAAG;KAClB,CAAC;IACM,QAAQ,CAAgB;IACvB,SAAS,GAAY,KAAK,CAAC;IAE5B,YAAY,CAAC,KAAc;QACjC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IACO,gBAAgB,GAAsB,EAAE,CAAC;IAEjD;;;OAGG;IACK,aAAa,GAAY,IAAI,CAAC;IAEtC,yCAAyC;IAChC,YAAY,CAAuB;IAE5C,yCAAyC;IAChC,aAAa,CAA8B;IAGpD,uBAAuB,CAAC,KAAK;QAC3B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACnB,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;QAE9E,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAEpB,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YACvB,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,eAAe,KAAK,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC;QAChF,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC;IACxC,CAAC;IAED,QAAQ,CAAC,aAAqB;QAC5B,OAAO,IAAI,CAAC,aAAa,KAAK,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;IAC9F,CAAC;IAEO,OAAO,CAAe;IAG9B,oBAAoB;QAClB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAE1B,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;QAErE,IAAI,QAAQ,EAAE,CAAC;YACb,SAAS;YACT,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC;QAClE,CAAC;aAAM,CAAC;YACN,WAAW;YACX,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;QACxC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;QACrE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IACtF,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QACpI,MAAM,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,KAAK,WAAW,IAAI,CAAC,CAAC,WAAW,KAAK,WAAW,CAAC,CAAC;QACxH,OAAO,CACL,EAAC,IAAI;YACH,4DACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAC9B,KAAK,EAAE,uCAAuC,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EACrH,KAAK,EAAE;oBACL,UAAU,EAAE,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;oBACrE,MAAM,EAAE,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,IAAI,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE;oBACxI,OAAO,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,GAAG,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE;oBACrJ,SAAS,EAAE,GAAG;oBACd,MAAM,EAAE,SAAS;iBAClB,EACD,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;gBACrD,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;oBACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;gBAC1B,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;oBACjB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;gBAC3B,CAAC;gBAED,4DAAK,KAAK,EAAE,wBAAwB;oBAClC,4DAAK,KAAK,EAAE,4BAA4B;wBACtC,4DACE,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE;gCACL,UAAU,EAAE,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;gCACrE,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;6BACjE;4BAED,gEAAS,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI,EAAC,MAAM,GAAG;4BACrJ,IAAI,CAAC,SAAS,EAAE,QAAQ,IAAI,QAAQ,CACjC;wBACN,gEACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,EAAE,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,EACjF,KAAK,QACL,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,GAC5G;wBACF,4DACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,GAC9M,CACE;oBAEN,4DAAK,KAAK,EAAE,uBAAuB;wBACjC,0DACE,KAAK,EAAC,8BAA8B,EACpC,KAAK,EAAE;gCACL,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,IAAI;6BAClE,IAEA,IAAI,CAAC,SAAS,EAAE,wBAAwB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG,IAAI,CAAC,SAAS,EAAE,QAAQ,CACtH;wBACJ,0DACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE;gCACL,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;6BACjE,IAEA,IAAI,CAAC,SAAS,EAAE,wBAAwB,CAAC,CAAC,CAAC,+CAA+C,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAChH,CAeA;oBAEN,4DAAK,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE;wBAChH,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAC/D,yEACE,WAAW,EAAC,WAAW,EACvB,eAAe,EAAC,WAAW,EAC3B,KAAK,EAAC,WAAW,EACjB,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,CAAC,EACb,IAAI,EAAC,WAAW,EAChB,OAAO,EAAC,wDAAwD,EAChE,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAClC,MAAM,EAAE,mBAAmB,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,KAAK,UAAU,GAClF,CACH;wBAEA,IAAI,CAAC,SAAS,CAAC,WAAW,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CACjE,yEACE,WAAW,EAAC,WAAW,EACvB,eAAe,EAAC,WAAW,EAC3B,KAAK,EAAC,WAAW,EACjB,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,IAAI,EAChB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAC,wGAAwG,EAChH,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,GAClC,CACH;wBACA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CACxB,yEACE,WAAW,EAAC,MAAM,EAClB,eAAe,EAAC,MAAM,EACtB,KAAK,EAAC,MAAM,EACZ,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,CAAC,EACb,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,wFAAwF,EAChG,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,GAClC,CACH;wBAEA,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAClE,yEACE,WAAW,EAAC,cAAc,EAC1B,eAAe,EAAC,cAAc,EAC9B,KAAK,EAAC,cAAc,EACpB,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,WAAW,EAChB,OAAO,EAAC,4EAA4E,EACpF,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,GAClC,CACH;wBAEA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CACxB,yEACE,WAAW,EAAC,MAAM,EAClB,eAAe,EAAC,MAAM,EACtB,KAAK,EAAC,MAAM,EACZ,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,EAAE,EAChB,UAAU,EAAE,CAAC,EACb,IAAI,EAAC,UAAU,EACf,OAAO,EAAC,oEAAoE,EAC5E,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,GAClC,CACH;wBACA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CACzB,yEACE,WAAW,EAAC,OAAO,EACnB,eAAe,EAAC,OAAO,EACvB,KAAK,EAAC,OAAO,EACb,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,CAAC,EACb,IAAI,EAAC,WAAW,EAChB,OAAO,EAAC,0FAA0F,EAClG,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,GAClC,CACH;wBAEA,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAC5B,yEACE,WAAW,EAAC,UAAU,EACtB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,UAAU,EAChB,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,IAAI,EAChB,IAAI,EAAC,UAAU,EACf,OAAO,EAAC,4EAA4E,EACpF,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,GAClC,CACH;wBAEA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAC1B,yEACE,WAAW,EAAC,QAAQ,EACpB,eAAe,EAAC,QAAQ,EACxB,KAAK,EAAC,QAAQ,EACd,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,EAAE,EAChB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,6JAA6J,EACrK,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,GAClC,CACH;wBAEA,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAC5B,yEACE,WAAW,EAAC,UAAU,EACtB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,UAAU,EAChB,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,EAAE,EAChB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,UAAU,EACf,OAAO,EAAC,8HAA8H,EACtI,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,GAClC,CACH;wBAEA,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAC5B,yEACE,WAAW,EAAC,UAAU,EACtB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,UAAU,EAChB,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,EAAE,EAChB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,+EAAqE,EAC7E,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,GAClC,CACH;wBAEA,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAC3D,yEACE,WAAW,EAAC,OAAO,EACnB,eAAe,EAAC,OAAO,EACvB,KAAK,EAAC,OAAO,EACb,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,sHAAsH,EAC9H,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,GAClC,CACH;wBACA,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAC3D,yEACE,WAAW,EAAC,OAAO,EACnB,eAAe,EAAC,OAAO,EACvB,KAAK,EAAC,OAAO,EACb,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,sFAAsF,EAC9F,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,GAClC,CACH;wBACA,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAC1D,yEACE,WAAW,EAAC,MAAM,EAClB,eAAe,EAAC,MAAM,EACtB,KAAK,EAAC,MAAM,EACZ,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,yFAAyF,EACjG,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,GAClC,CACH;wBACA,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAC3D,yEACE,WAAW,EAAC,OAAO,EACnB,eAAe,EAAC,OAAO,EACvB,KAAK,EAAC,OAAO,EACb,aAAa,EAAE,GAAG,EAClB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,sEAAsE,EAC9E,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,GAClC,CACH,CACG,CACF,CACF;YACN,8DAAa;YACb,mEAAY,EAAE,EAAC,mBAAmB,GAAG,CAChC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Listen, Element, Watch } 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  showTool(fieldFormType: string): boolean {\n    return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);\n  }\n\n  private cardRef!: HTMLElement;\n\n  @Watch('activeRecipient')\n  handleExpandCollapse() {\n    if (!this.cardRef) return;\n\n    const isActive = this.activeRecipient === this.recipient.signerIndex;\n\n    if (isActive) {\n      // Expand\n      this.cardRef.style.maxHeight = this.cardRef.scrollHeight + 'px';\n    } else {\n      // Collapse\n      this.cardRef.style.maxHeight = '6rem';\n    }\n  }\n\n  componentDidLoad() {\n    const isActive = this.activeRecipient === this.recipient.signerIndex;\n    this.cardRef.style.maxHeight = isActive ? this.cardRef.scrollHeight + 'px' : '6rem';\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          ref={el => (this.cardRef = el)}\n          class={`participant-card top-card full-card ${this.activeRecipient === this.recipient.signerIndex ? 'expanded' : ''}`}\n          style={{\n            background: defaultRolePalette[this.recipient?.signerIndex % 100].s10,\n            border: `1px ${this.recipient.roleType === 'WITNESS' ? 'dashed' : '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: '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'} size='1rem' />\n                {this.recipient?.roleType || 'SIGNER'}\n              </div>\n              <ls-icon\n                name=\"cursor-click\"\n                size=\"1rem\"\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\n                class=\"dot\"\n                style={{ display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && this.validationErrors.filter(v => v?.signerIndex === this.recipient.signerIndex).length > 0 ? 'block' : 'none' }}\n              />\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?.previousRecipientDecides ? 'To Be Decided' : 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?.previousRecipientDecides ? 'Details will be decided by previous recipient' : 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\n            <div class=\"fields-box\" style={{ display: this.recipient.signerIndex === this.activeRecipient ? 'flex' : 'hidden' }}>\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 && this.recipient.roleType !== 'APPROVER'}\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          </div>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-recipient-manager/ls-recipient-manager.css

@@ -0,0 +1,29 @@
+:host {
+  display: block;
+}
+
+* {
+  margin: 0;
+}
+
+.ls-editor-infobox {
+  padding: 0.25rem;
+}
+
+.toolbox-section-title {
+  color: var(--gray-100, #45484d);
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.75rem; /* 155.556% */
+  margin-bottom: 0.375rem;
+}
+
+.toolbox-section-description {
+  color: var(--gray-80, #5e6066);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+  margin-bottom: 0.375rem;
+}

package/dist/collection/components/ls-recipient-manager/ls-recipient-manager.js

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class LsRecipientManager {
+    render() {
+        return (h(Host, { key: '0f12c8ff059ebcbceeb8ff2ee0db8497d67fbfa3' }, h("div", { key: 'eda623d455ff62c8047f4ce467f13bbd23738e89', class: 'ls-editor-infobox' }, h("h2", { key: '956fef19fba1a44292fcbc038ce57af91c7fe166', class: "toolbox-section-title" }, "Recipients & Fields"), h("p", { key: 'cbf75c6e5bd530872302ef4c9916e852bd75a497', class: "toolbox-section-description" }, "Select Recipient to Expand and Drag to place Signature fields where you\u2019d like them to Sign.")), h("slot", { key: '9b4af48532eb0816884f1c6f82cd241da42152c8' })));
+    }
+    static get is() { return "ls-recipient-manager"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-recipient-manager.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-recipient-manager.css"]
+        };
+    }
+}
+//# sourceMappingURL=ls-recipient-manager.js.map

package/dist/collection/components/ls-recipient-manager/ls-recipient-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-recipient-manager.js","sourceRoot":"","sources":["../../../src/components/ls-recipient-manager/ls-recipient-manager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,kBAAkB;IAC7B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,mBAAmB;gBAC7B,2DAAI,KAAK,EAAC,uBAAuB,0BAAyB;gBAC1D,0DAAG,KAAK,EAAC,6BAA6B,wGAAiG,CACnI;YACN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-recipient-manager',\n  styleUrl: 'ls-recipient-manager.css',\n  shadow: true,\n})\nexport class LsRecipientManager {\n  render() {\n    return (\n      <Host>\n        <div class={'ls-editor-infobox'}>\n          <h2 class=\"toolbox-section-title\">Recipients & Fields</h2>\n          <p class=\"toolbox-section-description\">Select Recipient to Expand and Drag to place Signature fields where you’d like them to Sign.</p>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-statusbar/ls-statusbar.css

@@ -0,0 +1,212 @@
+:host {
+  position: fixed;
+  z-index: 1000;
+  right: 1rem;
+  bottom: 1rem;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: end;
+  height: 2.25rem;
+  overflow: visible;
+}
+
+.controls-bar {
+  display: flex;
+  flex-direction: row;
+  background-color: white;
+  border: 1px solid var(--gray-30, #e0e2e5);
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
+  border-radius: 1rem;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.status-bar-section {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.controls-bar > :not(:nth-child(1)) {
+  border-left: 1px solid var(--gray-30, #e0e2e5);
+}
+
+button {
+  border: 0;
+}
+
+button:hover {
+  color: var(--gray-100, #45484d);
+  border-radius: 0.5rem;
+}
+
+button:disabled {
+  color: var(--gray-40, #c1c4c8);
+  cursor: not-allowed;
+}
+
+input[type="range"] {
+  -webkit-appearance: none; /* Remove default styling */
+  width: 100%;
+  height: 0.5rem;
+  background: var(--gray-20, #EDEFF2);
+  border-radius: 0.25rem;
+  outline: none;
+}
+
+/* Chrome, Safari, Edge */
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 0.5rem;
+  height: 0.5rem;
+  background: var(--gray-70, #4a4c51); /* Custom thumb color */
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* Firefox */
+input[type="range"]::-moz-range-thumb {
+  width: 0.5rem;
+  height: 0.5rem;
+  background: var(--gray-70, #4a4c51); /* Custom thumb color */
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* Track color for Firefox */
+input[type="range"]::-moz-range-track {
+  background: var(--gray-20, #EDEFF2);
+  height: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+/* Track color for Chrome, Safari, Edge */
+input[type="range"]::-webkit-slider-runnable-track {
+  background: var(--gray-20, #EDEFF2);
+  height: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+
+
+/* Global Styles */
+
+p {
+  color: var(--gray-80, #6c6e73);
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-sm-line-height);
+}
+
+a {
+  color: var(--primary-60, #4456f6);
+  font-size: var(--text-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-sm-line-height);
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: var(--primary-70, #2134dc);
+}
+
+.button-link,
+.button-link:hover {
+  all: unset;
+}
+
+select {
+  appearance: none;
+  height: 2.25rem;
+}
+
+.input-wrapper {
+  position: relative;
+  width: fit-content;
+}
+
+#selectorIcon {
+  position: absolute;
+  top: 50%;
+  right: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+#selectLeadingIcon {
+  position: absolute;
+  top: 50%;
+  left: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+.has-leading-icon {
+  padding-left: 2.5rem;
+}
+
+button {
+  all: unset;
+  border: 0;
+  appearance: button;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-80, #6c6e73);
+  text-transform: capitalize;
+}
+
+button.tertiaryGrey:hover {
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-group {
+  display: flex;
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-30, #e0e2e5);
+  background: var(--white, #ffffff);
+  overflow: clip;
+}
+
+.button-group button {
+  display: flex;
+  background: transparent;
+  border-radius: unset;
+  padding: 0.25rem 0.75rem;
+  min-width: 2.156rem;
+  min-height: unset;
+  color: var(--gray-80, #6c6e73);
+}
+
+.button-group button:hover {
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-group > :first-child {
+  border-radius: 0.5rem 0 0 0.5rem;
+}
+
+.button-group > :last-child {
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+
+.button-group > :not(:first-child) {
+  border-left: 1px solid var(--gray-30, #e0e2e5);
+}
+