npm - legalesign-document-viewer - Versions diffs - 0.2.18 → 0.3.0 - Mend

legalesign-document-viewer 0.2.18 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (206) hide show

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

@@ -40,41 +40,47 @@ export class LsParticipantCard {
             this.opened.emit(this.signer);
         }
     }
+    addParticipant;
     render() {
         const participantFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.signer.signerIndex) || [];
-        return (h(Host, { key: '26cd1235d566363298804b8554857f4572fcf3ad' }, h("div", { key: '5cb4a93633eaf4fec24648b2207ea8ffb401e950', class: "participant-card", style: {
+        const child = this.template.roles.find(r => r.signerParent === this.signer.id);
+        return (h(Host, { key: '050ce0bf860dfebc0f79d45295b6876a8c714c61' }, h("div", { key: '03a6151b022ee20de49836d55362ca7842d91c2b', 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.signerIndex > 100 && '-0.813rem',
+                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: '3ca92742e66d2f9e746fbf0725ea26bbdc4989b9', class: 'participant-card-inner' }, h("div", { key: '456cfae55b1fe15b6b7d4444ed228183ca1f93f1', class: 'participant-card-top-items' }, h("div", { key: '289757cf77b0b57b5cb9d78c1b248a8c469b5268', class: 'role-label', style: {
+            } }, h("div", { key: '4471c63e21cba70ca9c99e08518b58aa27d51ba7', class: 'participant-card-inner' }, h("div", { key: '2880b2ada85743bb5aebb533cf51e837b275329e', class: 'participant-card-top-items' }, h("div", { key: '3d4eb8164d136326349cece0b18f5c53b0f88a49', class: 'role-label', style: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.signer?.signerIndex % 100].s90,
-            } }, h("ls-icon", { key: '78405243676cf11489fe016dce9bc0bd493d1005', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), 'Participant ' + (this.signer?.signerIndex || '')), h("div", { key: '07e6126404d7c07004596827847e8c1e618c881b', class: 'button-set hidden' }, this.index > 0 && (h("div", { key: '456bd5bab69b4f2ed5791f04b4509dc2a80889e1', class: "innerButton", onClick: () => {
+            } }, h("ls-icon", { key: 'dad3b4055bdd45df6f8e5085f459961da09d010f', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), 'Participant ' + (this.signer?.signerIndex || '')), h("div", { key: '07fe8b88998c7121217db858c231dcc1cc1707fe', class: 'button-set hidden' }, this.index > 0 && this.signer.roleType !== 'WITNESS' && (h("div", { key: '830f21fbae631a0e8e42af15a91d67c9547c1c01', 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,
-            } }, h("ls-icon", { key: '21d0074f67040d377e43696253d055a61c522a14', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && (h("div", { key: '8d9edb433c6a0ea64abfa86212bfddec5a82219b', class: "innerButton", onClick: () => {
+            } }, h("ls-icon", { key: '8b09d4c2d21c0da1d1e2b8d259808f17db459cbb', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && this.signer.roleType !== 'WITNESS' && (h("div", { key: '615157461249449a36d2de250682f61476a9f201', 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,
-            } }, h("ls-icon", { key: '5154b792ed0b47da1852be885d1751dc5f090dbd', name: "arrow-down", size: "18" }))), h("div", { key: '625e58c9360e52ad651fac5a81bd6aa05130dabb', class: "innerButton", onClick: () => {
+            } }, h("ls-icon", { key: 'f5272e02633d855779e651e7210f93d345832b88', name: "arrow-down", size: "18" }))), h("div", { key: '83fcb361f4610ca0f08db9d6be84ad3cf3abd5d8', 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: '75cfef0dcfde68c1a652c0884a910ea4d35deafa', name: this.editable ? 'check' : 'pencil-alt', size: "18" })), h("div", { key: 'c90fb747817a8ff3862cd0404e0d2c6507420ea9', class: "innerButton", onClick: () => {
+            } }, h("ls-icon", { key: '9aea4e29845683be3ab72ad4aba8897e2e8f4a2f', name: this.editable ? 'check' : 'pencil-alt', size: "18" })), h("div", { key: '451e0cc218f1f505e64a9783902d8627c4c1a005', 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,
-            } }, h("ls-icon", { key: '3eebec8b8dc84006ceddcfd8e9a4336c4d862276', name: "trash", size: "18" })))), this.editable ? (h("div", { class: 'participant-card-inner' }, 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 }) }, h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer"))), 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 => {
+            } }, h("ls-icon", { key: '5678a46062f0ea120d60e070a86f5b1a75d06662', 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;
-            } }))) : (h("div", { class: 'participant-card-text' }, h("p", { class: "participant-text-description", style: {
+            } }), 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,
@@ -82,7 +88,7 @@ export class LsParticipantCard {
             } }, 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: 'ca83751b9647aa1a1b02198dcb02a9c1cc5fa951' })));
+            } }, 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: 'ba159f7a2d34de4926bb44ce1aca658cd470833d' })));
     }
     static get is() { return "ls-participant-card"; }
     static get encapsulation() { return "shadow"; }
@@ -251,6 +257,27 @@ export class LsParticipantCard {
                         }
                     }
                 }
+            }, {
+                "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"; }

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

	@@ -1 +1 @@
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 } from '@stencil/core';\nimport { LSApiRole } from '../../types/LSApiRole';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\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 render() {\n const participantFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.signer.signerIndex) \|\| [];\n\n return (\n <Host>\n <div\n class=\"participant-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.signerIndex > 100 && '-0.813rem',\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 {'Participant ' + (this.signer?.signerIndex \|\| '')}\n </div>\n <div class={'button-set hidden'}>\n {this.index > 0 && (\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 >\n <ls-icon name=\"arrow-up\" size=\"18\" />\n </div>\n )}\n {this.signer.signerIndex !== this.template.roles.length && (\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 >\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\" />\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 >\n <ls-icon name=\"trash\" size=\"18\" />\n </div>\n </div>\n </div>\n {this.editable ? (\n <div class={'participant-card-inner'}>\n <ls-input-wrapper select leadingIcon={this.signer?.roleType === 'APPROVER' ? 'check-circle' : 'signature'}>\n <select name=\"roleType\" id=\"role-type\" class={'has-leading-icon'} onChange={e => this.alter({ roleType: (e.target as HTMLSelectElement).value })}>\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 <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 </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 </Host>\n );\n }\n}\n"]}
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 } 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';\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 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 {'Participant ' + (this.signer?.signerIndex \|\| '')}\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 >\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 >\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\" />\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 >\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 </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ls-participant-manager/ls-participant-manager.js CHANGED Viewed

@@ -27,17 +27,35 @@ export class LsParticipantManager {
     handleOpened(event) {
         const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');
         participants.forEach(element => {
-            if (element.signer.id !== event.detail.id)
-                element.editable = false;
+            const isTarget = element.signer?.id === event.detail.id;
+            element.editable = isTarget;
+            if (isTarget) {
+                element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+    }
+    handleOpenNewWitness(event) {
+        const { parent } = event.detail;
+        const observer = new MutationObserver(() => {
+            const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');
+            participants.forEach(element => {
+                const isTarget = element.signer?.signerParent === parent;
+                element.editable = isTarget;
+                if (isTarget) {
+                    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            });
+            observer.disconnect();
         });
+        observer.observe(this.element.shadowRoot, { childList: true, subtree: true });
     }
     render() {
-        return (h(Host, { key: '9217c153c317e197897058a5881a781b16a58004' }, h("div", { key: '2dd289b3bb90e953eb1c9b722c35d3e20ef17b34', class: "ls-editor-infobox" }, h("h2", { key: '67d42783d2b9a8a3161f03c3d517da02eb9ce8b3', class: "toolbox-section-title" }, "Participants"), h("p", { key: '2f9cbd596e502a592cedb990855cda5da352a10a', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '6936cb07b173bff2a653753aa165366590ce1923', class: "participant-list" }, this.template &&
+        return (h(Host, { key: '969b4cc1f4e86d87035c5c84365dea9607c85fff' }, h("div", { key: 'a50e3c6131d31f523a458c0a1729181eea1ce007', class: "ls-editor-infobox" }, h("h2", { key: '5e4b848099eb0d3a79b4fa172111288d7b07e278', class: "toolbox-section-title" }, "Participants"), h("p", { key: 'fa9267c09a4c443832f76bb88f8c74d69c9838e3', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '97aceae65cb31344ad3a724daf7f64c469fd6741', class: "participant-list" }, this.template &&
             this.template?.roles.map((r, index) => {
-                return h("ls-participant-card", { signer: r, index: index, template: this.template, onOpened: (event) => {
+                return (h("ls-participant-card", { signer: r, index: index, template: this.template, onOpened: event => {
                         this.handleOpened.bind(this)(event);
-                    } });
-            })), h("div", { key: 'c57020f2d560dc9241b8cfc38611564b8bf68eb0', class: 'add-participant-button' }, h("button", { key: 'd9e352162f8b3e2b2278c392137888ef85cc46a1', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, h("ls-icon", { key: '31db90682efdb8b93fcab8d77d1e62385b9e5f36', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: 'df6d9f9fd4b8b8330acd2d04c44e36b07fa4aed3' }, "Add Participant"))), h("slot", { key: 'e12c849be729bddd04e79b77c182e26ed5a2563b' })));
+                    }, onAddParticipant: event => this.handleOpenNewWitness(event) }));
+            })), h("div", { key: '1067a4fbd87d7bcbce1a99d4aeb9a04bacfeea36', class: 'add-participant-button' }, h("button", { key: 'f0529ee33de114f8d7b5a222d27440686cf9eb0b', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, h("ls-icon", { key: 'fab11a0945db10cfde4c537d26e84cfa410cd8a9', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: '384ec2ea99caff3321d3d5d70105e6a07c2466fe' }, "Add Participant"))), h("slot", { key: 'd0689801afd208555d353f1472e64968c5934647' })));
     }
     static get is() { return "ls-participant-manager"; }
     static get encapsulation() { return "shadow"; }
@@ -157,7 +175,7 @@ export class LsParticipantManager {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{type: LSApiRoleType, parent?: string | null}",
+                    "original": "{ type: LSApiRoleType; parent?: string | null }",
                     "resolved": "{ type: LSApiRoleType; parent?: string; }",
                     "references": {
                         "LSApiRoleType": {

package/dist/collection/components/ls-participant-manager/ls-participant-manager.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-participant-manager.js","sourceRoot":"","sources":["../../../src/components/ls-participant-manager/ls-participant-manager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAWvF,MAAM,OAAO,oBAAoB;IACpB,OAAO,CAAc;IAChC;;;OAGG;IACK,MAAM,CAAmB;IAEjC;;;OAGG;IACK,QAAQ,CAAgB;IAOhC,MAAM,CAAgC;IAOtC,MAAM,CAAgC;~~IAKnC~~,cAAc,~~CAA8D~~;~~IAG/E~~,eAAe,CAAC,KAAK;QACnB,0CAA0C;IAC5C,CAAC;IAED,aAAa,CAAC,IAAe;QAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACrD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACvD,CAAC;IAED,WAAW,CAAC,KAAK,EAAE,KAAK;QACtB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IACpE,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;QAErF,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC7B,~~IAAI~~,OAAO,CAAC,MAAM,~~CAAC~~,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE;~~gBAAE~~,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC;~~QACtE~~,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,2DAAI,KAAK,EAAC,uBAAuB,mBAAkB;gBACnD,0DAAG,KAAK,EAAC,6BAA6B,wFAAiF,CACnH;YACN,4DAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,QAAQ;gBACZ,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;oBACpC,OAAO,~~2BAAqB~~,MAAM,EAAE,CAAC,~~EAAE~~,KAAK,EAAE,KAAK,~~EAAE~~,QAAQ,EAAE,IAAI,CAAC,QAAQ,~~EAAE~~,QAAQ,EAAE,~~CAAC,~~KAAK,~~EAAE~~,EAAE;~~4BAChG~~,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,~~CAAA~~;~~wBACrC~~,CAAC,~~GAAI~~,CAAC;~~gBACR~~,CAAC,CAAC,CACA;YACN,4DAAK,KAAK,EAAE,wBAAwB;gBAClC,+DAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,~~EAAC~~,IAAI,EAAE,QAAQ,~~EAAC~~,CAAC;~~oBAC/D~~,gEAAS,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,2BAA2B,GAAG;oBACvE,8EAAsB,CACf,CACL;YACN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { LSApiRole, LSApiRoleType } from '../../types/LSApiRole';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n tag: 'ls-participant-manager',\n styleUrl: 'ls-participant-manager.css',\n shadow: true,\n})\nexport class LsParticipantManager {\n @Element() element: HTMLElement;\n /*\n The base editor.\n * {LSDocumentViewer}\n /\n @Prop() editor: LsDocumentViewer;\n\n /\n The base template information (as JSON).\n * {LSApiTemplate}\n */\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 composed: true,\n }) addParticipant: EventEmitter<{type: LSApiRoleType, parent?: string \| null}>;\n\n\n selectedHandler(_role) {\n //console.log(role, 'participant manager')\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 }\n\n handleOpened(event) {\n const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');\n\n participants.forEach(element => {\n if (element.signer.id ~~!==~~ event.detail.id) element.editable = ~~false~~;\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"ls-editor-infobox\">\n <h2 class=\"toolbox-section-title\">Participants</h2>\n <p class=\"toolbox-section-description\">Select and Click to place Signature fields where you’d like on the Document.</p>\n </div>\n <div class=\"participant-list\">\n {this.template &&\n this.template?.roles.map((r, index) => {\n return <ls-participant-card signer={r} index={index} template={this.template} onOpened={(event) => {\n this.handleOpened.bind(this)(event)\n }} ~~/>;\~~n })}\n </div>\n <div class={'add-participant-button'}>\n <button onClick={() => this.addParticipant.emit({type: 'SIGNER'})}>\n <ls-icon name=\"user-add\" size=\"20\" color=\"var(--gray-100, #45484D);\" />\n <p>Add Participant</p>\n </button>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-participant-manager.js","sourceRoot":"","sources":["../../../src/components/ls-participant-manager/ls-participant-manager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { LSApiRole, LSApiRoleType } from '../../types/LSApiRole';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n tag: 'ls-participant-manager',\n styleUrl: 'ls-participant-manager.css',\n shadow: true,\n})\nexport class LsParticipantManager {\n @Element() element: HTMLElement;\n /*\n The base editor.\n * {LSDocumentViewer}\n /\n @Prop() editor: LsDocumentViewer;\n\n /\n The base template information (as JSON).\n * {LSApiTemplate}\n */\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 composed: true,\n })\n addParticipant: EventEmitter<{ type: LSApiRoleType; parent?: string \| null }>;\n\n selectedHandler(_role) {\n //console.log(role, 'participant manager')\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 }\n\n handleOpened(event) {\n const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');\n\n participants.forEach(element => {\n const isTarget = element.signer?.id === event.detail.id;\n element.editable = isTarget;\n\n if (isTarget) {\n element.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n });\n }\n\n handleOpenNewWitness(event: CustomEvent<{ type: LSApiRoleType; parent?: string \| null }>) {\n const { parent } = event.detail;\n const observer = new MutationObserver(() => {\n const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');\n\n participants.forEach(element => {\n const isTarget = element.signer?.signerParent === parent;\n element.editable = isTarget;\n\n if (isTarget) {\n element.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n });\n\n observer.disconnect();\n });\n observer.observe(this.element.shadowRoot, { childList: true, subtree: true });\n }\n\n\n render() {\n return (\n <Host>\n <div class=\"ls-editor-infobox\">\n <h2 class=\"toolbox-section-title\">Participants</h2>\n <p class=\"toolbox-section-description\">Select and Click to place Signature fields where you’d like on the Document.</p>\n </div>\n <div class=\"participant-list\">\n {this.template &&\n this.template?.roles.map((r, index) => {\n return (\n <ls-participant-card\n signer={r}\n index={index}\n template={this.template}\n onOpened={event => {\n this.handleOpened.bind(this)(event);\n }}\n onAddParticipant={event => this.handleOpenNewWitness(event)}\n />\n );\n })}\n </div>\n <div class={'add-participant-button'}>\n <button onClick={() => this.addParticipant.emit({ type: 'SIGNER' })}>\n <ls-icon name=\"user-add\" size=\"20\" color=\"var(--gray-100, #45484D);\" />\n <p>Add Participant</p>\n </button>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ls-participant-select/ls-participant-select.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
 export class LsParticipantSelect {
-    dataItem;
     /**
    * The id of the currently selected role.
    * {string}
@@ -11,7 +10,23 @@ export class LsParticipantSelect {
      * The currently selected role.
      * {number}
      */
-    selectedRole = { signerIndex: 0, name: 'Sender', roleType: 'SENDER' };
+    selectedRole = { signerIndex: 0, name: 'Sender', roleType: 'SENDER', default: true };
+    handleRoleLoad() {
+        if (this.selectedRole.default) {
+            if (this.roles.length > 0) {
+                const initialRole = this.roles.find(r => r.signerIndex === 1);
+                if (initialRole) {
+                    this.selectedRole = { ...initialRole, default: false };
+                }
+            }
+        }
+        else {
+            const updatedRole = this.roles.find(r => r.signerIndex === this.selectedRole.signerIndex);
+            if (updatedRole) {
+                this.selectedRole = { ...updatedRole, default: false };
+            }
+        }
+    }
     /**
      * The current template roles.
      * {LSApiRole}
@@ -24,7 +39,7 @@ export class LsParticipantSelect {
     roleChange;
     addParticipant;
     selectRole(role) {
-        this.selectedRole = role;
+        this.selectedRole = { ...role, default: false };
         this.isOpen = false;
         this.roleChange.emit(role.signerIndex);
     }
@@ -32,27 +47,27 @@ export class LsParticipantSelect {
         this.addParticipant.emit({ type: 'SIGNER' });
     }
     render() {
-        return (h(Host, { key: '05ce04a14cfb2ad7b758aedc5b65369a0ab0b193' }, h("div", { key: '01913be9946c4cbd20be9eb0183ccbbfcbd8ca61', class: "dropdown" }, h("div", { key: 'f59100f64738d20ad385de862295edf49a91655a', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: 'c8dca2bf3967cd21445da0d957049a0976cda9a2', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'fcfacdc95436203bf4d9234531c7f7fb7a7a764a', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), h("path", { key: 'a82eed99f51aa2d161d6b4901c0ee26f582aa895', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), h("path", { key: 'f37b804b8ce9c29ee833813b17dbbfd0c7d070d0', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), h("path", { key: 'f3a2b18f7340021728a1cc563eb35d27ac17990a', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { key: 'dc6496244da861eff55d628ed9d240c0f507f22b', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '51c552f5e563479b81c26baf7b41b17c06d0f551', class: 'selected-role-label', style: {
+        return (h(Host, { key: 'f053e6c27cba0319ca92871a534070d753961aac' }, h("div", { key: 'b037b74c477b5f7ad338bc707a1f08bdfb131535', class: "dropdown" }, h("div", { key: 'c97336eab86a36d45b9ddef78a6df0e8babada63', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: 'fa69fa36ad9b6e6ae4adfca7017a4457068365d1', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '860b63abd43343f27b9fd8d597a152bf7e34dc93', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), h("path", { key: '7eeff168b2553f4e79be6d4a8d1bad31282ec5ac', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), h("path", { key: '10216191c461f85e93f97c40d0a9f818cafe6f19', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), h("path", { key: 'c2677a36fe8ffc04141dd8e565916d425b23120f', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { key: '977b8593c1eba8a9cafc93f3c548596df4f14383', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '7a9decad70156db7451571a813d98ac29bb55969', class: 'selected-role-label', style: {
                 background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,
-            } }, h("ls-icon", { key: 'bd7ad751ebf8f1da889fc43fc65c77b309673c30', size: "18", name: this.selectedRole?.roleType === 'SENDER'
+            } }, h("ls-icon", { key: '1bceddc0d5bdcdc9a4550e6871c6f23b130e13a4', size: "18", name: this.selectedRole?.roleType === 'SENDER'
                 ? 'user'
                 : this.selectedRole?.roleType === 'APPROVER'
                     ? 'check-circle'
                     : this.selectedRole?.roleType === 'WITNESS'
                         ? 'eye'
                         : 'signature' }), this.selectedRole.name ||
-            (this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: 'fc7751e7aa67036b170dffffa6f1205bb079da4d', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: 'd4a9c60a0a9d309c779d926547beab66dd258ec5', name: "chevron-down" }))), this.isOpen && (h("div", { key: '9afdac4d0239217a9145b87e86ce82fe4baeacfb', class: "dropdown-list" }, h("div", { key: '6e6c690b9b73369da2b920d601bd03ae2d4e2c62', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
+            (this.selectedRole.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: 'deac6e0ce1405949e279df80396664520ea0a446', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '39bb00d902adf511c3122dd8b4a158cfea84dc02', name: "chevron-down" }))), this.isOpen && (h("div", { key: '4e1c77622d07e09ad73e8607f2fb7012ab170599', class: "dropdown-list" }, h("div", { key: '6333a4f6d8a87b41054b0e0bacefe836093cd64f', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
                 '--background-selected': defaultRolePalette[0].s10,
                 '--check-icon-selected': defaultRolePalette[0].s50,
-            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, h("div", { key: '7eafd31f64a1cc1578f79e46eed06fe3c6f19089', class: 'role-icon', style: {
+            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, h("div", { key: '0172efaa68fd05cc5c8833833f4f44af92d505bc', class: 'role-icon', style: {
                 background: defaultRolePalette[0].s50,
                 color: defaultRolePalette[0].s80,
-            } }, h("ls-icon", { key: '7a6b5e21dd76b8bf75d8932b049bcdb3b86a4e12', name: "user" })), h("div", { key: 'dbc8abbdf4b2ded694637aa54e6124ca5496d3f7', class: 'role-text' }, h("p", { key: 'fd3b749275de606c1807f728de49ea12e5fb4964', class: 'role-name', style: {
+            } }, h("ls-icon", { key: '5dc564e507733c2732ab79c3a8437eb275c6aefe', name: "user" })), h("div", { key: '9d1a26aa3fceb79612afe66929b9b04fa6c46b66', class: 'role-text' }, h("p", { key: 'e89116bb21fb1fa9c00acac2173688629fe2d637', class: 'role-name', style: {
                 '--role-name-selected': defaultRolePalette[0].s80,
-            } }, 'Sender'), h("p", { key: '673247e9d41fc4ba38fd7ca8a49f7cd7d6a037c6', class: 'role-type', style: {
+            } }, 'Sender'), h("p", { key: '00bb513c28a580faab973e74779c77b6e123aa6d', class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[0].s80,
-            } }, "You")), h("ls-icon", { key: 'efab79f4b3d39fe14fd8c91420d0717e4159337a', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
+            } }, "You")), h("ls-icon", { key: '9c375a9cffbc93e6566f496a379f910d7d82ad2e', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
                 '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,
                 '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,
             }, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
@@ -64,10 +79,10 @@ export class LsParticipantSelect {
                 '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,
             } }, r.name || (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)), h("p", { class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,
-            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), h("button", { key: 'fb09ef1b14adc8f9b4ac2f09cfeadb09158691c7', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
+            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), h("button", { key: '876d0510b3522b4de6c81a04950e0cbe6d56a7ef', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
                 '--background-selected': defaultRolePalette[1].s10,
                 '--check-icon-selected': defaultRolePalette[1].s50,
-            } }, h("div", { key: '33b7d90c55ad488e95a83526e4c501a72ad9c0f6', class: 'add-participant-icon' }, h("ls-icon", { key: '32ae47b14d9c5047dc10478a09a8725be7d08f14', name: "user-add" })), h("div", { key: '2d206c0f2d7e562098dddb4efbb21bcb537fe402', class: 'role-text' }, h("p", { key: 'ae5d9123112652e4af9912b309da2e6eb6705995', class: 'role-name' }, "Add Participant"), h("p", { key: 'dcbd38153b8fc2666790df3af0229438b94f9cf0', class: 'role-type' }, "Add a new Signer")), h("ls-icon", { key: '65fed105324c1dca3c7b0983e6a81db8eb18e4a5', class: 'plus-icon', name: "plus" }))))), h("slot", { key: 'd18f3b14f6ae9b47f186451c2390acb600a7d476' })));
+            } }, h("div", { key: '18e18d420039303a144a9a40ae73307421e6ddf0', class: 'add-participant-icon' }, h("ls-icon", { key: 'f6fa96cc87ee795b827067035b2887dd5af67b71', name: "user-add" })), h("div", { key: 'd17693f290f0aba4d16e3d7c92e9d899e18bfd2b', class: 'role-text' }, h("p", { key: '6cbd301f3414c84d1dc14e4afa764c920d180b66', class: 'role-name' }, "Add Participant"), h("p", { key: '93ff716ae9b2bbdb976f3bb674963c686e8b236d', class: 'role-type' }, "Add a new Signer")), h("ls-icon", { key: 'b6c771b3e0773de88ab729a2e8d09c9051b09d5f', class: 'plus-icon', name: "plus" }))))), h("slot", { key: 'cd90a24546b04b907c6e82980827fb133ea9b37a' })));
     }
     static get is() { return "ls-participant-select"; }
     static get encapsulation() { return "shadow"; }
@@ -83,30 +98,6 @@ export class LsParticipantSelect {
     }
     static get properties() {
         return {
-            "dataItem": {
-                "type": "unknown",
-                "attribute": "data-item",
-                "mutable": true,
-                "complexType": {
-                    "original": "LSApiElement[]",
-                    "resolved": "LSApiElement[]",
-                    "references": {
-                        "LSApiElement": {
-                            "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::LSApiElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
             "selected": {
                 "type": "string",
                 "attribute": "selected",
@@ -198,5 +189,11 @@ export class LsParticipantSelect {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "roles",
+                "methodName": "handleRoleLoad"
+            }];
+    }
 }
 //# sourceMappingURL=ls-participant-select.js.map

package/dist/collection/components/ls-participant-select/ls-participant-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-participant-select.js","sourceRoot":"","sources":["../../../src/components/ls-participant-select/ls-participant-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\nimport { LSApiRole, LSApiRoleType } from '../../types/LSApiRole';\nimport { LSApiElement } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-participant-select',\n styleUrl: 'ls-participant-select.css',\n shadow: true,\n})\nexport class LsParticipantSelect {\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement[];\n\n /*\n The id of the currently selected role.\n * {string}\n /\n @Prop({ mutable: true}) selected: string;\n \n /\n The currently selected role.\n * {number}\n /\n @State() selectedRole: { signerIndex: number; name: string; roleType?: string } = { signerIndex: 0, name: 'Sender', roleType: 'SENDER' };\n\n /\n The current template roles.\n * {LSApiRole}\n */\n @Prop() roles?: LSApiRole[] = [];\n\n @State() isOpen: boolean = false;\n\n\n toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n @Event() roleChange: EventEmitter<number>;\n\n @Event({\n bubbles: true,\n composed: true,\n }) addParticipant: EventEmitter<{type: LSApiRoleType, parent?: string \| null}>;\n\n\n selectRole(role: { signerIndex: number; name: string; roleType?: string }) {\n this.selectedRole = role;\n this.isOpen = false;\n this.roleChange.emit(role.signerIndex);\n }\n\n createHandler() {\n this.addParticipant.emit({type: 'SIGNER'});\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown\">\n <div class=\"dropdown-header\" onClick={this.toggleDropdown}>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z\" fill=\"#78A3FA\" stroke=\"#F7F8FA\" />\n <path\n d=\"M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z\"\n fill=\"#46DBAA\"\n stroke=\"#F7F8FA\"\n />\n <path\n d=\"M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z\"\n fill=\"#FAD232\"\n stroke=\"#F7F8FA\"\n />\n <path\n d=\"M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75\"\n stroke=\"#939599\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <p class={'placing-fields-text'}>Placing Fields for</p>\n <div\n class={'selected-role-label'}\n style={{\n background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,\n color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,\n }}\n >\n <ls-icon\n size=\"18\"\n name={\n this.selectedRole?.roleType === 'SENDER'\n ? 'user'\n : this.selectedRole?.roleType === 'APPROVER'\n ? 'check-circle'\n : this.selectedRole?.roleType === 'WITNESS'\n ? 'eye'\n : 'signature'\n }\n />\n {this.selectedRole.name \|\|\n (this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)}\n </div>\n <button class={'tertiaryGrey expand-button'} aria-haspopup=\"listbox\" aria-expanded={this.isOpen}>\n <ls-icon name=\"chevron-down\"></ls-icon>\n </button>\n </div>\n {this.isOpen && (\n <div class=\"dropdown-list\">\n <div\n class={this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item'}\n style={{\n '--background-selected': defaultRolePalette[0].s10,\n '--check-icon-selected': defaultRolePalette[0].s50,\n }}\n onClick={() => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' })}\n onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n onMouseLeave={e =>\n (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle')\n }\n >\n <div\n class={'role-icon'}\n style={{\n background: defaultRolePalette[0].s50,\n color: defaultRolePalette[0].s80,\n }}\n >\n <ls-icon name=\"user\" />\n </div>\n <div class={'role-text'}>\n <p\n class={'role-name'}\n style={{\n '--role-name-selected': defaultRolePalette[0].s80,\n }}\n >\n {'Sender'}\n </p>\n <p\n class={'role-type'}\n style={{\n '--role-type-selected': defaultRolePalette[0].s80,\n }}\n >\n You\n </p>\n </div>\n\n <ls-icon class={'check-icon'} name={this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle'} solid={this.selectedRole?.signerIndex === 0} />\n </div>\n {this.roles.map(r => (\n <div\n class={r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item'}\n style={{\n '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,\n '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,\n }}\n onClick={() => this.selectRole(r)}\n onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n onMouseLeave={e =>\n (e.currentTarget as HTMLElement)\n .querySelector('.check-icon')\n ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle')\n }\n >\n <div\n class={'role-icon'}\n style={{\n background: r.signerIndex > 100 ? defaultRolePalette[r?.signerIndex % 100].s30 : defaultRolePalette[r?.signerIndex % 100].s40,\n color: defaultRolePalette[r?.signerIndex % 100].s90,\n }}\n >\n <ls-icon name={r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature'} />\n </div>\n <div class={'role-text'}>\n <p\n class={'role-name'}\n style={{\n '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,\n }}\n >\n {r.name \|\| (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)}\n </p>\n <p\n class={'role-type'}\n style={{\n '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,\n }}\n >\n {r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer'}\n </p>\n </div>\n <ls-icon\n class={'check-icon'}\n name={r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle'}\n solid={r.signerIndex === this.selectedRole?.signerIndex}\n />\n </div>\n ))}\n <button\n onClick={() => this.createHandler()}\n class={'add-participant-row'}\n style={{\n '--background-selected': defaultRolePalette[1].s10,\n '--check-icon-selected': defaultRolePalette[1].s50,\n }}\n >\n <div\n class={'add-participant-icon'}\n >\n <ls-icon name=\"user-add\" />\n </div>\n <div class={'role-text'}>\n <p class={'role-name'}>Add Participant</p>\n <p class={'role-type'}>Add a new Signer</p>\n </div>\n <ls-icon class={'plus-icon'} name=\"plus\" />\n </button>\n </div>\n )}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-participant-select.js","sourceRoot":"","sources":["../../../src/components/ls-participant-select/ls-participant-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\nimport { LSApiRole, LSApiRoleType } from '../../types/LSApiRole';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-participant-select',\n styleUrl: 'ls-participant-select.css',\n shadow: true,\n})\nexport class LsParticipantSelect {\n /*\n The id of the currently selected role.\n * {string}\n /\n @Prop({ mutable: true}) selected: string;\n \n /\n The currently selected role.\n * {number}\n /\n @State() selectedRole: { signerIndex: number; name: string; roleType?: string; default: boolean } = { signerIndex: 0, name: 'Sender', roleType: 'SENDER', default: true };\n\n @Watch('roles')\n handleRoleLoad() {\n if(this.selectedRole.default) {\n if(this.roles.length > 0) {\n const initialRole = this.roles.find(r => r.signerIndex === 1);\n if(initialRole) {\n this.selectedRole = { ...initialRole, default: false };\n }\n }\n } else {\n const updatedRole = this.roles.find(r => r.signerIndex === this.selectedRole.signerIndex);\n if(updatedRole) {\n this.selectedRole = { ...updatedRole, default: false };\n }\n }\n }\n /\n The current template roles.\n * {LSApiRole}\n */\n @Prop() roles?: LSApiRole[] = [];\n\n @State() isOpen: boolean = false;\n\n\n toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n @Event() roleChange: EventEmitter<number>;\n\n @Event({\n bubbles: true,\n composed: true,\n }) addParticipant: EventEmitter<{type: LSApiRoleType, parent?: string \| null}>;\n\n\n selectRole(role: { signerIndex: number; name: string; roleType?: string }) {\n this.selectedRole = { ...role, default: false };\n this.isOpen = false;\n this.roleChange.emit(role.signerIndex);\n }\n\n createHandler() {\n this.addParticipant.emit({type: 'SIGNER'});\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown\">\n <div class=\"dropdown-header\" onClick={this.toggleDropdown}>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z\" fill=\"#78A3FA\" stroke=\"#F7F8FA\" />\n <path\n d=\"M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z\"\n fill=\"#46DBAA\"\n stroke=\"#F7F8FA\"\n />\n <path\n d=\"M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z\"\n fill=\"#FAD232\"\n stroke=\"#F7F8FA\"\n />\n <path\n d=\"M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75\"\n stroke=\"#939599\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <p class={'placing-fields-text'}>Placing Fields for</p>\n <div\n class={'selected-role-label'}\n style={{\n background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,\n color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,\n }}\n >\n <ls-icon\n size=\"18\"\n name={\n this.selectedRole?.roleType === 'SENDER'\n ? 'user'\n : this.selectedRole?.roleType === 'APPROVER'\n ? 'check-circle'\n : this.selectedRole?.roleType === 'WITNESS'\n ? 'eye'\n : 'signature'\n }\n />\n {this.selectedRole.name \|\|\n (this.selectedRole.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)}\n </div>\n <button class={'tertiaryGrey expand-button'} aria-haspopup=\"listbox\" aria-expanded={this.isOpen}>\n <ls-icon name=\"chevron-down\"></ls-icon>\n </button>\n </div>\n {this.isOpen && (\n <div class=\"dropdown-list\">\n <div\n class={this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item'}\n style={{\n '--background-selected': defaultRolePalette[0].s10,\n '--check-icon-selected': defaultRolePalette[0].s50,\n }}\n onClick={() => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' })}\n onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n onMouseLeave={e =>\n (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle')\n }\n >\n <div\n class={'role-icon'}\n style={{\n background: defaultRolePalette[0].s50,\n color: defaultRolePalette[0].s80,\n }}\n >\n <ls-icon name=\"user\" />\n </div>\n <div class={'role-text'}>\n <p\n class={'role-name'}\n style={{\n '--role-name-selected': defaultRolePalette[0].s80,\n }}\n >\n {'Sender'}\n </p>\n <p\n class={'role-type'}\n style={{\n '--role-type-selected': defaultRolePalette[0].s80,\n }}\n >\n You\n </p>\n </div>\n\n <ls-icon class={'check-icon'} name={this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle'} solid={this.selectedRole?.signerIndex === 0} />\n </div>\n {this.roles.map(r => (\n <div\n class={r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item'}\n style={{\n '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,\n '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,\n }}\n onClick={() => this.selectRole(r)}\n onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.check-icon')?.setAttribute('name', 'check-circle')}\n onMouseLeave={e =>\n (e.currentTarget as HTMLElement)\n .querySelector('.check-icon')\n ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle')\n }\n >\n <div\n class={'role-icon'}\n style={{\n background: r.signerIndex > 100 ? defaultRolePalette[r?.signerIndex % 100].s30 : defaultRolePalette[r?.signerIndex % 100].s40,\n color: defaultRolePalette[r?.signerIndex % 100].s90,\n }}\n >\n <ls-icon name={r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature'} />\n </div>\n <div class={'role-text'}>\n <p\n class={'role-name'}\n style={{\n '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,\n }}\n >\n {r.name \|\| (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)}\n </p>\n <p\n class={'role-type'}\n style={{\n '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,\n }}\n >\n {r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer'}\n </p>\n </div>\n <ls-icon\n class={'check-icon'}\n name={r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle'}\n solid={r.signerIndex === this.selectedRole?.signerIndex}\n />\n </div>\n ))}\n <button\n onClick={() => this.createHandler()}\n class={'add-participant-row'}\n style={{\n '--background-selected': defaultRolePalette[1].s10,\n '--check-icon-selected': defaultRolePalette[1].s50,\n }}\n >\n <div\n class={'add-participant-icon'}\n >\n <ls-icon name=\"user-add\" />\n </div>\n <div class={'role-text'}>\n <p class={'role-name'}>Add Participant</p>\n <p class={'role-type'}>Add a new Signer</p>\n </div>\n <ls-icon class={'plus-icon'} name=\"plus\" />\n </button>\n </div>\n )}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ls-toolbar/ls-toolbar.css CHANGED Viewed

@@ -7,13 +7,14 @@
   width: 100%;
   align-items: center;
   justify-content: center;
-  padding: 0.5rem;
+  padding: 0.375rem;
   gap: 0.5rem;
   width: fit-content;
   border-radius: 1rem;
   border: 1px solid var(--gray-20, #edeff2);
   background: var(--white, #fff);
   z-index: 1000;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }

package/dist/collection/components/ls-toolbar/ls-toolbar.js CHANGED Viewed

@@ -36,7 +36,7 @@ export class LsToolbar {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: '930227762fac4d6c8ff5053cf6f844d9e4b5366a' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }))) : (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem, style: { visibility: this.dataItem && this.dataItem.length === 1 ? 'visible' : 'hidden' } }), h("ls-participant-select", { id: "ls-participant-select", roles: this.template?.roles, dataItem: this?.dataItem, style: { display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' } }))), h("slot", { key: 'c22f9e9921ca69912896777e704636e323ffdb36' })));
+        return (h(Host, { key: '930227762fac4d6c8ff5053cf6f844d9e4b5366a' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }))) : (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem, style: { visibility: this.dataItem && this.dataItem.length === 1 ? 'visible' : 'hidden' } }), h("ls-participant-select", { id: "ls-participant-select", roles: this.template?.roles, style: { display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' } }))), h("slot", { key: '4d23f1bc7e9abe32194bd1628084ab47624ad7c5' })));
     }
     static get is() { return "ls-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-toolbar/ls-toolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-toolbar.js","sourceRoot":"","sources":["../../../src/components/ls-toolbar/ls-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAQvF,MAAM,OAAO,SAAS;IACT,SAAS,CAAc;IAElC;;;OAGG;IAIH,QAAQ,CAAiB;IAGzB;;;KAGC;IACO,SAAS,CAAS;IAE1B;;;OAGG;IACK,QAAQ,CAAgB;IAEhC;;;OAGG;IAGA,MAAM,CAAmB;IAO5B,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IACtC,qCAAqC;IAErC,0CAA0C;IAC1C,6CAA6C;IAC7C,KAAK,CAAC,IAAY;QAChB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAElB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACnD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE,CAAC;QACvE,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC3C,WAAK,KAAK,EAAE,QAAQ;gBAClB,uBAAiB,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI,CACzC,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAE,QAAQ;gBAChB,uBAAiB,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA,CAAC,CAAC,QAAQ,EAAC,GAAG;gBACrI,6BAAuB,EAAE,EAAC,uBAAuB,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,~~QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAG,~~KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAA,CAAC,CAAC,OAAO,EAAC,GAAG,~~CAC3L~~,CACP;YACD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSApiTemplate, LsDocumentViewer, LSMutateEvent } from '../../components';\n\n@Component({\n tag: 'ls-toolbar',\n styleUrl: 'ls-toolbar.css',\n shadow: true,\n})\nexport class LsToolbar {\n @Element() component: HTMLElement;\n\n /*\n The selected items information (as JSON).\n * {LSApiElement[]}\n /\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement[];\n\n\n /\n The group and experience information.\n * {object}\n /\n @Prop() groupInfo: object;\n\n /\n The base template information (as JSON).\n * {LSApiTemplate}\n /\n @Prop() template: LSApiTemplate;\n\n /\n The main editor.\n * {LSDocumentViewer}\n */\n @Prop({\n mutable: true,\n }) editor: LsDocumentViewer;\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 // @Element() component: HTMLElement;\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n render() {\n return (\n <Host>\n {this.dataItem && this.dataItem.length > 1 ? (\n <div class={'rowbox'}>\n <ls-field-format dataItem={this?.dataItem} />\n </div>\n ) : (\n <div class={'rowbox'}>\n <ls-field-format dataItem={this?.dataItem} style={{ visibility: this.dataItem && this.dataItem.length === 1 ? 'visible': 'hidden'}}/>\n <ls-participant-select id=\"ls-participant-select\" roles={this.template?.roles} ~~dataItem={this?.dataItem}~~ style={{ display: this.dataItem && this.dataItem.length === 1 ? 'none': 'block'}}/>\n </div>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-toolbar.js","sourceRoot":"","sources":["../../../src/components/ls-toolbar/ls-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAQvF,MAAM,OAAO,SAAS;IACT,SAAS,CAAc;IAElC;;;OAGG;IAIH,QAAQ,CAAiB;IAGzB;;;KAGC;IACO,SAAS,CAAS;IAE1B;;;OAGG;IACK,QAAQ,CAAgB;IAEhC;;;OAGG;IAGA,MAAM,CAAmB;IAO5B,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IACtC,qCAAqC;IAErC,0CAA0C;IAC1C,6CAA6C;IAC7C,KAAK,CAAC,IAAY;QAChB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAElB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACnD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE,CAAC;QACvE,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC3C,WAAK,KAAK,EAAE,QAAQ;gBAClB,uBAAiB,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI,CACzC,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAE,QAAQ;gBAChB,uBAAiB,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA,CAAC,CAAC,QAAQ,EAAC,GAAG;gBACrI,6BAAuB,EAAE,EAAC,uBAAuB,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAA,CAAC,CAAC,OAAO,EAAC,GAAG,CAChK,CACP;YACD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSApiTemplate, LsDocumentViewer, LSMutateEvent } from '../../components';\n\n@Component({\n tag: 'ls-toolbar',\n styleUrl: 'ls-toolbar.css',\n shadow: true,\n})\nexport class LsToolbar {\n @Element() component: HTMLElement;\n\n /*\n The selected items information (as JSON).\n * {LSApiElement[]}\n /\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement[];\n\n\n /\n The group and experience information.\n * {object}\n /\n @Prop() groupInfo: object;\n\n /\n The base template information (as JSON).\n * {LSApiTemplate}\n /\n @Prop() template: LSApiTemplate;\n\n /\n The main editor.\n * {LSDocumentViewer}\n */\n @Prop({\n mutable: true,\n }) editor: LsDocumentViewer;\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 // @Element() component: HTMLElement;\n\n // Send one or more mutations up the chain\n // The source of the chain fires the mutation\n alter(diff: object) {\n console.log(diff);\n\n const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n });\n\n this.dataItem = diffs.map(d => d.data as LSApiElement);\n this.mutate.emit(diffs);\n this.update.emit(diffs);\n }\n\n render() {\n return (\n <Host>\n {this.dataItem && this.dataItem.length > 1 ? (\n <div class={'rowbox'}>\n <ls-field-format dataItem={this?.dataItem} />\n </div>\n ) : (\n <div class={'rowbox'}>\n <ls-field-format dataItem={this?.dataItem} style={{ visibility: this.dataItem && this.dataItem.length === 1 ? 'visible': 'hidden'}}/>\n <ls-participant-select id=\"ls-participant-select\" roles={this.template?.roles} style={{ display: this.dataItem && this.dataItem.length === 1 ? 'none': 'block'}}/>\n </div>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"]}