legalesign-document-viewer 0.3.9 → 0.4.0

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

@@ -0,0 +1,449 @@
+:host {
+  display: block;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.participant-card {
+  display: flex;
+  padding: 0.75rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  align-self: stretch;
+}
+
+.dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  background: var(--red-50, #ff706b);
+  border-radius: 50%;
+  margin-right: 0.25rem;
+}
+
+.top-card {
+  border-radius: 1rem 1rem 0 0;
+}
+
+.full-card {
+  border-radius: 1.5rem;
+}
+
+.bottom-card {
+  border-radius: 0 0 1rem 1rem;
+}
+
+.participant-card-inner {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.hidden {
+  visibility: hidden;
+  display: none;
+}
+
+.form-button-set {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.role-label {
+  display: flex;
+  padding: 0.125rem 0.5rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+}
+
+.fields-box {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.role-label.fields {
+  border-radius: 1rem;
+  margin-top: 0.5rem;
+}
+
+.innerButton {
+  margin: 0px;
+  padding: 0px;
+  max-height: 1.25rem !important;
+  max-width: 1.25rem !important;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--default-button-colour);
+}
+
+.innerButton:hover {
+  color: var(--hover-button-colour);
+}
+
+.participant-card-top-items {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.button-set {
+  display: flex;
+  gap: 0.125rem;
+}
+
+.participant-text-description {
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+}
+
+.participant-text-type {
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.25rem; /* 142.857% */
+}
+
+.titleButton {
+  width: 100%;
+  text-align: left;
+  background-color: transparent;
+  border: none;
+}
+
+/* Global Styles */
+
+.full-width {
+  width: 100%;
+}
+
+.participant-card-text {
+  padding: 0 0.125rem 0.125rem 0.125rem;
+}
+
+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: 36px;
+  width: 100%;
+}
+
+.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;
+}
+
+input,
+select,
+textarea {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  border-radius: 0.5rem;
+  color: var(--gray-100, #45484d);
+  font-weight: 400;
+}
+
+input::placeholder,
+select::placeholder,
+textarea::placeholder {
+  color: var(--gray-60, #afb0b2);
+}
+
+input:hover:not(:disabled),
+select:hover:not(:disabled),
+textarea:hover:not(:disabled) {
+  border-color: var(--gray-50, #c8c9cc);
+  background-color: var(--white, #fff);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);
+  border-color: var(--primary-60, #4456f6);
+  background-color: var(--white, #fff);
+}
+
+input:active,
+select:active,
+textarea:active {
+  border-color: var(--primary-50, #5185ff);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  background-color: var(--gray-10, #f7f8fa);
+}
+
+input[type='checkbox'] {
+  appearance: none;
+  position: relative;
+  height: 1rem;
+  width: 1rem;
+  padding: 0.25rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid #d1d5db;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+input[type='checkbox']:checked,
+input[type='checkbox'].indeterminate {
+  background-color: var(--primary-60, #4456f6);
+  border: none;
+}
+
+input[type='checkbox']:checked::after {
+  content: '';
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);
+  width: 0.5rem;
+  height: 0.25rem;
+  border-bottom: 0.125rem solid white;
+  border-right: 0.125rem solid white;
+}
+
+input[type='checkbox'].indeterminate::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.5rem;
+  height: 0.125rem;
+  background-color: white;
+}
+
+input[type='checkbox']:checked:hover,
+input[type='checkbox'].indeterminate:hover {
+  background-color: var(--primary-70, #2134dc);
+  border: none;
+}
+
+input[type='checkbox']:hover {
+  border: 1px solid #9ca3af;
+}
+
+input[type='checkbox']:focus,
+input[type='checkbox']:active {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);
+  background-color: #f0f4f8;
+}
+
+input[type='checkbox']:disabled {
+  background-color: #f3f4f6;
+  outline: none;
+  cursor: not-allowed;
+}
+
+input[type='checkbox']:disabled:checked {
+  background-color: #e5e7eb;
+  border: none;
+  outline: none;
+  cursor: not-allowed;
+}
+
+.checkbox-container {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.checkbox-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.form-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.loading-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  color: var(--primary-60, #0c7cba);
+}
+
+button {
+  border: 0;
+  appearance: button;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg);
+  background-color: var(--primary-60, #4456f6);
+  color: white;
+  text-transform: capitalize;
+  min-height: 2.25rem;
+  min-width: 2.25rem;
+}
+
+button.tertiaryGrey {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background-color: white;
+  color: var(--gray-80, #787a80);
+}
+
+button.tertiaryGrey:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-10, #f7f8fa);
+}
+
+button.tertiary {
+  border: 1px solid var(--primary-60, #4456f6);
+  background: transparent;
+  color: var(--primary-70, #2134dc);
+}
+
+button.tertiary:hover {
+  border: 1px solid var(--primary-70, #2134dc);
+  border: 1px solid var(--primary-80, #0c34b8);
+}
+
+button.destructive {
+  border: 1px solid var(--red-60, #f04438);
+  background: transparent;
+  color: var(--red-60);
+}
+
+button.destructive:hover {
+  border: 1px solid var(--red-70, #d92d20);
+  background: var(--red-10, #fff1f0);
+  background-color: var(--red-10, #fff1f0);
+}
+
+button.secondary {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--white, #fff);
+  color: var(--gray-90, #5e6066);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+button.secondary:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  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);
+}

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

@@ -0,0 +1,203 @@
+import { Host, h } from "@stencil/core";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
+export class LsRecipientCard {
+    /**
+     * The initial template data, including the link for background PDF. See README and
+     * example for correct GraphQL query and data structure.
+     * {LSApiTemplate}
+     */
+    recipient;
+    activeRecipient;
+    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;
+    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: {
+                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'}`,
+                marginTop: this.recipient.roleType === 'WITNESS' ? '-0.813rem' : '0',
+                cursor: 'pointer',
+            }, onClick: () => {
+                this.changeSigner.emit(this.recipient.signerIndex);
+            }, onMouseEnter: () => {
+                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: {
+                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: {
+                color: defaultRolePalette[this.recipient?.signerIndex % 100].s100,
+            } }, this.recipient?.firstname + ' ' + this.recipient?.lastname), h("p", { key: '3514b5b0159ad4f2dcb4eac61316168557841ee8', 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" })));
+    }
+    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",
+                "attribute": "recipient",
+                "mutable": false,
+                "complexType": {
+                    "original": "LSApiRecipient",
+                    "resolved": "{ name: string; email: string; firstname: string; lastname: string; signerIndex?: number; 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",
+                "attribute": "active-recipient",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "template": {
+                "type": "unknown",
+                "attribute": "template",
+                "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",
+                "attribute": "validation-errors",
+                "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",
+                "attribute": "filtertoolbox",
+                "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,
+                "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": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=ls-recipient-card.js.map