legalesign-document-viewer 0.3.5 → 0.3.7

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

@@ -0,0 +1,307 @@
+import { Host, h } from "@stencil/core";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
+import { attachAllTooltips } from "../../utils/tooltip";
+export class LsParticipantCard {
+    component;
+    signer;
+    index;
+    editable = false;
+    template;
+    mutate;
+    update;
+    opened;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    // NOTE this alter is debounced to account for typing
+    alter(diff) {
+        this.signer = { ...this.signer, ...diff };
+        this.debounce(this.signer, 500);
+    }
+    labeltimer;
+    debounce(data, delay) {
+        if (this.labeltimer)
+            clearTimeout(this.labeltimer);
+        this.labeltimer = setTimeout(() => {
+            const diffs = [{ action: 'update', data }];
+            this.mutate.emit(diffs);
+            this.update.emit(diffs);
+        }, delay);
+    }
+    deleteHandler(role) {
+        this.update.emit([{ action: 'delete', data: role }]);
+        this.mutate.emit([{ action: 'delete', data: role }]);
+    }
+    swapHandler(role1, role2) {
+        this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);
+        this.mutate.emit([{ action: 'swap', data: role1, data2: role2 }]);
+    }
+    modeHandler(_editable) {
+        // When opened fire an event to let the parent handle closing other controls
+        if (_editable) {
+            this.opened.emit(this.signer);
+        }
+    }
+    addParticipant;
+    swapUpBtn;
+    swapDownBtn;
+    editBtn;
+    deleteParticipantBtn;
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
+    render() {
+        const participantFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.signer.signerIndex) || [];
+        const child = this.template.roles.find(r => r.signerParent === this.signer.id);
+        return (h(Host, { key: '7be2ff598b3e60a3d072e40da7c39c52c07e449e' }, h("div", { key: 'd03c9aa9a6ead89701c9870bac3c42d6977a713c', class: 'participant-card' + (child ? ' top-card' : this.signer?.signerParent ? ' bottom-card' : ' full-card'), style: {
+                background: defaultRolePalette[this.signer?.signerIndex % 100].s10,
+                border: `1px solid ${defaultRolePalette[this.signer?.signerIndex % 100].s60}`,
+                marginTop: this.signer.roleType === 'WITNESS' ? '-0.813rem' : '0',
+            }, onMouseEnter: e => e.currentTarget.querySelector('.button-set')?.classList.remove('hidden'), onMouseLeave: e => e.currentTarget.querySelector('.button-set')?.classList.add('hidden'), onDblClick: () => {
+                this.editable = true;
+            } }, h("div", { key: 'ea0a03563f1d86b145a51e11795ddde34b670f64', class: 'participant-card-inner' }, h("div", { key: '82c3fe1a1b2d75cfd5cfe6333d10dbe05fa10010', class: 'participant-card-top-items' }, h("div", { key: '12afefeaa21a11c3dda573e8f1745a1d0a04a626', class: 'role-label', style: {
+                background: defaultRolePalette[this.signer?.signerIndex % 100].s20,
+                color: defaultRolePalette[this.signer?.signerIndex % 100].s90,
+            } }, h("ls-icon", { key: 'f6eb56427515fb0b765fb5b37973c4071ea673f8', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), (this.signer?.ordinal || '')), h("div", { key: '6041782cd1151582b6c174abb9c654b89ea948c3', class: 'button-set hidden' }, this.index > 0 && this.signer.roleType !== 'WITNESS' && (h("div", { key: 'efe16bc05c67250fcd45c9d865cc87cf742a2068', class: "innerButton", onClick: () => {
+                this.swapHandler(this.signer, this.template.roles[this.index - 1]);
+            }, style: {
+                '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
+                '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
+            }, "data-tooltip": "Move Up" }, h("ls-icon", { key: '39e1b89d241c9a0613c4fe7bf0fe2361c8bed8cc', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && this.signer.roleType !== 'WITNESS' && (h("div", { key: '36306b25b7f13cd257d1a9651f0b48908c77517b', class: "innerButton", onClick: () => {
+                this.swapHandler(this.signer, this.template.roles[this.index + 1]);
+            }, style: {
+                '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
+                '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
+            }, "data-tooltip": "Move Down" }, h("ls-icon", { key: 'dcf83775c8a2a749d1204600d23c3f567b070a18', name: "arrow-down", size: "18" }))), h("div", { key: '9de6b2fb141b5e44e8eea4dd05099e195a316f96', class: "innerButton", onClick: () => {
+                this.editable = !this.editable;
+            }, style: {
+                '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
+                '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
+            } }, h("ls-icon", { key: '0dc354be993624e864da75848fa6abcbd76e9576', name: this.editable ? 'check' : 'pencil-alt', size: "18", "data-tooltip": this.editable ? "Save Changes" : "Edit Participant" })), h("div", { key: '08621361b877ad894667354e69bc33045361d0f3', class: "innerButton", onClick: () => {
+                this.deleteHandler(this.signer);
+            }, style: {
+                '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
+                '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
+            }, "data-tooltip": "Delete Participant", "data-tooltip-placement": "top-end" }, h("ls-icon", { key: 'd53b15254f710215cb9574f6ae7744b6cf12995b', name: "trash", size: "18" })))), this.editable ? (h("div", { class: 'participant-card-inner' }, this.signer?.roleType !== 'WITNESS' ? (h("ls-input-wrapper", { select: true, leadingIcon: this.signer?.roleType === 'APPROVER' ? 'check-circle' : 'signature' }, h("select", { name: "roleType", id: "role-type", class: 'has-leading-icon', onChange: e => this.alter({ roleType: e.target.value }), disabled: child ? true : false }, h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer")))) : (h("ls-input-wrapper", { leadingIcon: "eye" }, h("input", { name: "roleType", id: "role-type", class: 'has-leading-icon', disabled: true, value: "Witness" }))), h("input", { type: "text", id: "participant-description", name: "participantDescription", placeholder: "Description, eg. Tenant 1, Agent", defaultValue: this.signer.name, onInput: e => this.alter({ name: e.target.value }), onKeyUp: e => {
+                if (e.key === 'Enter' || e.keyCode === 13)
+                    this.editable = false;
+            } }), this.signer?.roleType === 'SIGNER' && !child ? (h("button", { class: 'tertiary', onClick: () => this.addParticipant.emit({ type: 'WITNESS', parent: this.signer.id }) }, h("ls-icon", { name: "plus", style: { marginRight: '0.25rem' } }), "Add Witness")) : this.signer?.roleType === 'SIGNER' && child ? (h("button", { class: 'destructive', onClick: () => {
+                this.deleteHandler(child);
+            } }, h("ls-icon", { name: "minus-sm", style: { marginRight: '0.25rem' } }), "Remove Witness")) : this.signer?.roleType === 'WITNESS' ? (h("button", { class: 'destructive', onClick: () => {
+                this.deleteHandler(this.signer);
+            } }, h("ls-icon", { name: "minus-sm", style: { marginRight: '0.25rem' } }), "Remove Witness")) : null)) : (h("div", { class: 'participant-card-text' }, h("p", { class: "participant-text-description", style: {
+                color: defaultRolePalette[this.signer?.signerIndex % 100].s100,
+            } }, this.signer.name || `${this.signer.signerIndex > 100 ? 'Witness' : 'Signer'} ${this.signer.signerIndex + 1}`), h("p", { class: "participant-text-type", style: {
+                color: defaultRolePalette[this.signer?.signerIndex % 100].s80,
+                textTransform: 'capitalize',
+            } }, this.signer.roleType.toLowerCase()), this.signer?.roleType !== 'APPROVER' && (h("div", { class: 'role-label fields', style: {
+                background: participantFields.length === 0 ? defaultRolePalette[this.signer?.signerIndex % 100].s60 : defaultRolePalette[this.signer?.signerIndex % 100].s20,
+                color: participantFields.length === 0 ? 'white' : defaultRolePalette[this.signer?.signerIndex % 100].s90,
+            } }, participantFields.length === 0 && h("ls-icon", { name: "exclamation-circle", size: "16", style: { marginRight: '0.125rem' } }), participantFields.length === 0 ? 'Signature Required' : `${participantFields.length} ${participantFields.length === 1 ? 'Field' : 'Fields'}`)))))), h("slot", { key: 'ca97bf78d7100ca748b273730d59bdd04a649527' }), h("ls-tooltip", { key: 'b3c7e4e89f3bbc0f89960622e2665b3c2edfb58c', id: "ls-tooltip-master" })));
+    }
+    static get is() { return "ls-participant-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-participant-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-participant-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "signer": {
+                "type": "unknown",
+                "attribute": "signer",
+                "mutable": false,
+                "complexType": {
+                    "original": "LSApiRole",
+                    "resolved": "{ children?: LSApiRole[]; id: string; name: string; roleType: LSApiRoleType; signerIndex: number; ordinal: number; signerParent?: string; experience: string; templateId?: string; }",
+                    "references": {
+                        "LSApiRole": {
+                            "location": "import",
+                            "path": "../../types/LSApiRole",
+                            "id": "src/types/LSApiRole.ts::LSApiRole"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "index": {
+                "type": "number",
+                "attribute": "index",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "editable": {
+                "type": "boolean",
+                "attribute": "editable",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "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": "../../types/LSApiTemplate",
+                            "id": "src/types/LSApiTemplate.ts::LSApiTemplate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "swapUpBtn": {},
+            "swapDownBtn": {},
+            "editBtn": {},
+            "deleteParticipantBtn": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mutate",
+                "name": "mutate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSMutateEvent[]",
+                    "resolved": "LSMutateEvent[]",
+                    "references": {
+                        "LSMutateEvent": {
+                            "location": "import",
+                            "path": "../../types/LSMutateEvent",
+                            "id": "src/types/LSMutateEvent.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "update",
+                "name": "update",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSMutateEvent[]",
+                    "resolved": "LSMutateEvent[]",
+                    "references": {
+                        "LSMutateEvent": {
+                            "location": "import",
+                            "path": "../../types/LSMutateEvent",
+                            "id": "src/types/LSMutateEvent.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "opened",
+                "name": "opened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSApiRole",
+                    "resolved": "{ children?: LSApiRole[]; id: string; name: string; roleType: LSApiRoleType; signerIndex: number; ordinal: number; signerParent?: string; experience: string; templateId?: string; }",
+                    "references": {
+                        "LSApiRole": {
+                            "location": "import",
+                            "path": "../../types/LSApiRole",
+                            "id": "src/types/LSApiRole.ts::LSApiRole"
+                        }
+                    }
+                }
+            }, {
+                "method": "addParticipant",
+                "name": "addParticipant",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ type: LSApiRoleType; parent?: string | null }",
+                    "resolved": "{ type: LSApiRoleType; parent?: string; }",
+                    "references": {
+                        "LSApiRoleType": {
+                            "location": "import",
+                            "path": "../../types/LSApiRole",
+                            "id": "src/types/LSApiRole.ts::LSApiRoleType"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "component"; }
+    static get watchers() {
+        return [{
+                "propName": "editable",
+                "methodName": "modeHandler"
+            }];
+    }
+}
+//# sourceMappingURL=ls-participant-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ls-participant-card.js","sourceRoot":"","sources":["../../../src/components/ls-participant-card/ls-participant-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Watch, Element, State } from '@stencil/core';\nimport { LSApiRole, LSApiRoleType } from '../../types/LSApiRole';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-participant-card',\n  styleUrl: 'ls-participant-card.css',\n  shadow: true,\n})\nexport class LsParticipantCard {\n  @Element() component: HTMLElement;\n  @Prop() signer: LSApiRole;\n  @Prop() index: number;\n  @Prop({ mutable: true }) editable: boolean = false;\n  @Prop() template: LSApiTemplate;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  opened: EventEmitter<LSApiRole>;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object) {\n    this.signer = { ...this.signer, ...diff };\n    this.debounce(this.signer, 500);\n  }\n\n  private labeltimer;\n\n  debounce(data, delay) {\n    if (this.labeltimer) clearTimeout(this.labeltimer);\n\n    this.labeltimer = setTimeout(() => {\n      const diffs: LSMutateEvent[] = [{ action: 'update', data }];\n      this.mutate.emit(diffs);\n      this.update.emit(diffs);\n    }, delay);\n  }\n\n  deleteHandler(role: LSApiRole) {\n    this.update.emit([{ action: 'delete', data: role }]);\n    this.mutate.emit([{ action: 'delete', data: role }]);\n  }\n\n  swapHandler(role1, role2) {\n    this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);\n    this.mutate.emit([{ action: 'swap', data: role1, data2: role2 }]);\n  }\n\n  @Watch('editable')\n  modeHandler(_editable) {\n    // When opened fire an event to let the parent handle closing other controls\n    if (_editable) {\n      this.opened.emit(this.signer);\n    }\n  }\n\n  @Event({\n    bubbles: true,\n    composed: true,\n  })\n  addParticipant: EventEmitter<{ type: LSApiRoleType; parent?: string | null }>;\n\n  @State() swapUpBtn: HTMLElement;\n  @State() swapDownBtn: HTMLElement;\n  @State() editBtn: HTMLElement;\n  @State() deleteParticipantBtn: HTMLElement;\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    const participantFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.signer.signerIndex) || [];\n    const child = this.template.roles.find(r => r.signerParent === this.signer.id);\n\n    return (\n      <Host>\n        <div\n          class={'participant-card' + (child ? ' top-card' : this.signer?.signerParent ? ' bottom-card' : ' full-card')}\n          style={{\n            background: defaultRolePalette[this.signer?.signerIndex % 100].s10,\n            border: `1px solid ${defaultRolePalette[this.signer?.signerIndex % 100].s60}`,\n            marginTop: this.signer.roleType === 'WITNESS' ? '-0.813rem' : '0',\n          }}\n          onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.button-set')?.classList.remove('hidden')}\n          onMouseLeave={e => (e.currentTarget as HTMLElement).querySelector('.button-set')?.classList.add('hidden')}\n          onDblClick={() => {\n            this.editable = true;\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.signer?.signerIndex % 100].s20,\n                  color: defaultRolePalette[this.signer?.signerIndex % 100].s90,\n                }}\n              >\n                <ls-icon name={this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye'} />\n                {(this.signer?.ordinal || '')}\n              </div>\n              <div class={'button-set hidden'}>\n                {this.index > 0 && this.signer.roleType !== 'WITNESS' && (\n                  <div\n                    class=\"innerButton\"\n                    onClick={() => {\n                      this.swapHandler(this.signer, this.template.roles[this.index - 1]);\n                    }}\n                    style={{\n                      '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,\n                      '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,\n                    }}\n                    data-tooltip=\"Move Up\"\n                  >\n                    <ls-icon name=\"arrow-up\" size=\"18\" />\n                  </div>\n                )}\n                {this.signer.signerIndex !== this.template.roles.length && this.signer.roleType !== 'WITNESS' && (\n                  <div\n                    class=\"innerButton\"\n                    onClick={() => {\n                      this.swapHandler(this.signer, this.template.roles[this.index + 1]);\n                    }}\n                    style={{\n                      '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,\n                      '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,\n                    }}\n                    data-tooltip=\"Move Down\"\n                  >\n                    <ls-icon name=\"arrow-down\" size=\"18\" />\n                  </div>\n                )}\n                <div\n                  class=\"innerButton\"\n                  onClick={() => {\n                    this.editable = !this.editable;\n                  }}\n                  style={{\n                    '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,\n                    '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,\n                  }}\n                >\n                  <ls-icon name={this.editable ? 'check' : 'pencil-alt'} size=\"18\" data-tooltip={this.editable ? \"Save Changes\" : \"Edit Participant\"} />\n            \n                </div>\n                <div\n                  class=\"innerButton\"\n                  onClick={() => {\n                    this.deleteHandler(this.signer);\n                  }}\n                  style={{\n                    '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,\n                    '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,\n                  }}\n                  data-tooltip=\"Delete Participant\"\n                  data-tooltip-placement=\"top-end\"\n                >\n                  <ls-icon name=\"trash\" size=\"18\" />\n                </div>\n              </div>\n            </div>\n            {this.editable ? (\n              <div class={'participant-card-inner'}>\n                {this.signer?.roleType !== 'WITNESS' ? (\n                  <ls-input-wrapper select leadingIcon={this.signer?.roleType === 'APPROVER' ? 'check-circle' : 'signature'}>\n                    <select\n                      name=\"roleType\"\n                      id=\"role-type\"\n                      class={'has-leading-icon'}\n                      onChange={e => this.alter({ roleType: (e.target as HTMLSelectElement).value })}\n                      disabled={child ? true : false}\n                    >\n                      <option value=\"APPROVER\" selected={this.signer?.roleType === 'APPROVER'}>\n                        Approver\n                      </option>\n                      <option value=\"SIGNER\" selected={this.signer?.roleType === 'SIGNER'}>\n                        Signer\n                      </option>\n                    </select>\n                  </ls-input-wrapper>\n                ) : (\n                  <ls-input-wrapper leadingIcon=\"eye\">\n                    <input name=\"roleType\" id=\"role-type\" class={'has-leading-icon'} disabled value=\"Witness\" />\n                  </ls-input-wrapper>\n                )}\n                <input\n                  type=\"text\"\n                  id=\"participant-description\"\n                  name=\"participantDescription\"\n                  placeholder=\"Description, eg. Tenant 1, Agent\"\n                  defaultValue={this.signer.name}\n                  onInput={e => this.alter({ name: (e.target as HTMLInputElement).value })}\n                  onKeyUp={e => {\n                    if (e.key === 'Enter' || e.keyCode === 13) this.editable = false;\n                  }}\n                />\n                {this.signer?.roleType === 'SIGNER' && !child ? (\n                  <button class={'tertiary'} onClick={() => this.addParticipant.emit({ type: 'WITNESS', parent: this.signer.id })}>\n                    <ls-icon name=\"plus\" style={{ marginRight: '0.25rem' }} />\n                    Add Witness\n                  </button>\n                ) : this.signer?.roleType === 'SIGNER' && child ? (\n                  <button\n                    class={'destructive'}\n                    onClick={() => {\n                      this.deleteHandler(child);\n                    }}\n                  >\n                    <ls-icon name=\"minus-sm\" style={{ marginRight: '0.25rem' }} />\n                    Remove Witness\n                  </button>\n                ) : this.signer?.roleType === 'WITNESS' ? (\n                  <button\n                    class={'destructive'}\n                    onClick={() => {\n                      this.deleteHandler(this.signer);\n                    }}\n                  >\n                    <ls-icon name=\"minus-sm\" style={{ marginRight: '0.25rem' }} />\n                    Remove Witness\n                  </button>\n                ) : null}\n              </div>\n            ) : (\n              <div class={'participant-card-text'}>\n                <p\n                  class=\"participant-text-description\"\n                  style={{\n                    color: defaultRolePalette[this.signer?.signerIndex % 100].s100,\n                  }}\n                >\n                  {this.signer.name || `${this.signer.signerIndex > 100 ? 'Witness' : 'Signer'} ${this.signer.signerIndex + 1}`}\n                </p>\n                <p\n                  class=\"participant-text-type\"\n                  style={{\n                    color: defaultRolePalette[this.signer?.signerIndex % 100].s80,\n                    textTransform: 'capitalize',\n                  }}\n                >\n                  {this.signer.roleType.toLowerCase()}\n                </p>\n                {this.signer?.roleType !== 'APPROVER' && (\n                  <div\n                    class={'role-label fields'}\n                    style={{\n                      background: participantFields.length === 0 ? defaultRolePalette[this.signer?.signerIndex % 100].s60 : defaultRolePalette[this.signer?.signerIndex % 100].s20,\n                      color: participantFields.length === 0 ? 'white' : defaultRolePalette[this.signer?.signerIndex % 100].s90,\n                    }}\n                  >\n                    {participantFields.length === 0 && <ls-icon name=\"exclamation-circle\" size=\"16\" style={{ marginRight: '0.125rem' }} />}\n                    {participantFields.length === 0 ? 'Signature Required' : `${participantFields.length} ${participantFields.length === 1 ? 'Field' : 'Fields'}`}\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}