npm - legalesign-document-viewer - Versions diffs - 0.2.5 → 0.2.7 - Mend

legalesign-document-viewer 0.2.5 → 0.2.7

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 (88) hide show

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

@@ -38,37 +38,37 @@ export class LsParticipantSelect {
         console.log('Selected role:', this.selectedRole);
     }
     participantColor = (index) => {
-        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+        return defaultRolePalette[index % 100] || defaultRolePalette[0];
     };
     render() {
         console.log(this.selectedRole);
-        return (h(Host, { key: 'ac8313459c9ae066ed40e81bb05e3d14261cffda' }, h("div", { key: '8203fe316fbbb5cd0ebf6396e7572006c64b10c9', class: "dropdown" }, h("div", { key: '365e40765ba17f4d23642b90249eed7d5b9f6081', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: '48ac4df4b56bf90ed8d8a03b01340c1ba414362e', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd5071886581872c9b4c3d360a10ee19d86ca02a6', 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: 'fdee95b45ee528b1c5f561b70ef81a6cc1872d7a', 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: 'ebba43ebbadfa87164184d156f3146a2b8d47b17', 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: 'e5491d46f94c9594e4eb6466442b50233ee8758a', 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: '3d118bf5aceafd26c2e7bb93445a0cb5af79beb5', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: 'a83ea944e4ae65e746266cd4a337c0300328e932', class: 'selected-role-label', style: {
-                background: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-20)`,
-                color: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-90)`,
-            } }, h("ls-icon", { key: 'ca3b2327d2a749dc146fe92bbe510998cbe3e3f7', 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: '53d0a139fae7d8a8eda65d1ca5f499eefca3c864', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '7a7ea57794f3b7d22ab0c308ba91da6eb7b879da', name: "chevron-down" }))), this.isOpen && (h("div", { key: '18e980a31aa8a8a2f5d27a065ec7f6a92550c78b', class: "dropdown-list" }, h("div", { key: '31924def19a1db92cc8f8d5e08bbca8469d66ccc', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
-                '--background-selected': `var(--${defaultRolePalette[0]}-10)`,
-                '--check-icon-selected': `var(--${defaultRolePalette[0]}-50)`,
-            }, 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: 'bfc669a9f81fb9d6c77bb4f7c1bb8d6b5b9034d7', class: 'role-icon', style: {
-                background: `var(--${defaultRolePalette[0]}-40)`,
-                color: `var(--${defaultRolePalette[0]}-80)`,
-            } }, h("ls-icon", { key: 'e2aad499e826cbd6320771df672eb9ff8e7cce06', name: "user" })), h("div", { key: 'c78dc9065fab3b8ff98923542ce232e2cc07e9e8', class: 'role-text' }, h("p", { key: '7ece02f690e2d7c53628f6e3e3726b430f364f02', class: 'role-name', style: {
-                '--role-name-selected': `var(--${defaultRolePalette[0]}-100)`,
-            } }, 'Sender'), h("p", { key: '29ec9f8c6039ad54eb41b34d4be4dc59d561ac7f', class: 'role-type', style: {
-                '--role-type-selected': `var(--${defaultRolePalette[0]}-80)`,
-            } }, "You")), h("ls-icon", { key: 'd1aa6fe64c918563eb94d1079deb90680aef69a9', 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': `var(--${this.participantColor(r?.signerIndex)}-10)`,
-                '--check-icon-selected': `var(--${this.participantColor(r?.signerIndex)}-50)`,
+        return (h(Host, { key: '376dc00f9ed35a608669050a14c3a6ec77222ae1' }, h("div", { key: 'bffe48d89c04e6d38de5a34d721fc62875233b8c', class: "dropdown" }, h("div", { key: '291784e958e45a72305fbdbbd220a3237e829e3b', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: 'c4ae298b8fc164af5b3823952165885ece44a628', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f18b791336b7901257dae3215ed0ef4128928e1d', 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: '6334dacce4604c2b2a8208232e5e3e2dfbeda08d', 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: 'a00c1daded99250cea5638c25fde7449cea1fb3f', 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: '72c04a47d2856141e4d3083864f00c1ce2bc62ce', 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: 'f44c6d982de08655cdd15a03145b3a711d045df6', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: 'd83960f9c8999046c6e3e1137865e1036c651e85', class: 'selected-role-label', style: {
+                background: this.participantColor(this.selectedRole?.signerIndex).s20,
+                color: this.participantColor(this.selectedRole?.signerIndex).s80,
+            } }, h("ls-icon", { key: '733e9f601506e58fecd83f1a5062561ef68efb01', 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: 'c5f307779432fdde633d661b19d213a8e0fbfdc3', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '5da68fd1dade4668364d2e328a6a404a772092eb', name: "chevron-down" }))), this.isOpen && (h("div", { key: '6545db8c8c0094cd863037f2e7c94c87e8a34f5b', class: "dropdown-list" }, h("div", { key: '4b4b466b9d9f553afb2dcbe4d1e1c623be4c3aa3', 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: '9f4035308fc39587e417cf0a1e088a4175c118f9', class: 'role-icon', style: {
+                background: defaultRolePalette[0].s50,
+                color: defaultRolePalette[0].s80,
+            } }, h("ls-icon", { key: '282c618109165a412bf12d6d9eb17216f1136b0d', name: "user" })), h("div", { key: '1e45e9c7405abc4e230a28eb793d984a9a71434b', class: 'role-text' }, h("p", { key: '0971c5ec3fac86c604a27a9b258d1edc75116308', class: 'role-name', style: {
+                '--role-name-selected': defaultRolePalette[0].s80,
+            } }, 'Sender'), h("p", { key: '94047f15d4dd4046343924e7c553eb947c07e363', class: 'role-type', style: {
+                '--role-type-selected': defaultRolePalette[0].s80,
+            } }, "You")), h("ls-icon", { key: 'ec8d3927cd65ac9a2ed789c67f43c2556645cc7f', 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': this.participantColor(r?.signerIndex).s10,
+                '--check-icon-selected': this.participantColor(r?.signerIndex).s50,
             }, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
                 .querySelector('.check-icon')
                 ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle') }, h("div", { class: 'role-icon', style: {
-                background: r.signerIndex > 100 ? `var(--${this.participantColor(r?.signerIndex)}-30)` : `var(--${this.participantColor(r?.signerIndex)}-40)`,
+                background: r.signerIndex > 100 ? this.participantColor(r?.signerIndex).s20 : this.participantColor(r?.signerIndex).s50,
                 color: `var(--${this.participantColor(r?.signerIndex)}-90)`,
             } }, h("ls-icon", { name: r.roleType === 'WITNESS' ? 'eye' : r.roleType === 'APPROVER' ? 'check-circle' : 'signature' })), h("div", { class: 'role-text' }, h("p", { class: 'role-name', style: {
                 '--role-name-selected': `var(--${this.participantColor(r?.signerIndex)}-100)`,
             } }, r.name || r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`), h("p", { class: 'role-type', style: {
                 '--role-type-selected': `var(--${this.participantColor(r?.signerIndex)}-80)`,
-            } }, 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("slot", { key: '7322ac85f9aa04b6e7eff1a57cd2570122274517' })));
+            } }, 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("slot", { key: 'b2f3b76d52dab109697f7edb8d81085c7237128f' })));
     }
     static get is() { return "ls-participant-select"; }
     static get encapsulation() { return "shadow"; }

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 } from '../../types/LSApiRole';\nimport { LSApiElement, LSMutateEvent } 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 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 @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 toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n @Event() roleChange: EventEmitter<number>;\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 console.log('Selected role:', this.selectedRole);\n }\n\n participantColor = (index: number) => {\n return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] \|\| defaultRolePalette[0];\n };\n\n render() {\n console.log(this.selectedRole);\n return (\n <Host>\n {/ <select onChange={(input) => {\n this.alter({ signer: parseInt((input.target as HTMLSelectElement).value) })\n }}>\n <option value=\"0\">Sender</option>\n {this.roles.map(r => <option value={r.signerIndex}>{r.name}</option>)}\n\n </select> */}\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: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-20)`,\n color: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-90)`,\n }}\n >\n <ls-icon size=\"18\" name={this.selectedRole?.roleType === 'SENDER' ? 'user' : this.selectedRole?.roleType === 'APPROVER' ? 'check-circle' : this.selectedRole?.roleType === 'WITNESS' ? 'eye' : 'signature'} />\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': `var(--${defaultRolePalette[0]}-10)`,\n '--check-icon-selected': `var(--${defaultRolePalette[0]}-50)`,\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: `var(--${defaultRolePalette[0]}-40)`,\n color: `var(--${defaultRolePalette[0]}-80)`,\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': `var(--${defaultRolePalette[0]}-100)`,\n }}\n >\n {'Sender'}\n </p>\n <p\n class={'role-type'}\n style={{\n '--role-type-selected': `var(--${defaultRolePalette[0]}-80)`,\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': `var(--${this.participantColor(r?.signerIndex)}-10)`,\n '--check-icon-selected': `var(--${this.participantColor(r?.signerIndex)}-50)`,\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 ? `var(--${this.participantColor(r?.signerIndex)}-30)` : `var(--${this.participantColor(r?.signerIndex)}-40)`,\n color: `var(--${this.participantColor(r?.signerIndex)}-90)`,\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': `var(--${this.participantColor(r?.signerIndex)}-100)`,\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': `var(--${this.participantColor(r?.signerIndex)}-80)`,\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 </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 } from '@stencil/core';\nimport { LSApiRole } from '../../types/LSApiRole';\nimport { LSApiElement, LSMutateEvent } 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 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 @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 toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n @Event() roleChange: EventEmitter<number>;\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 console.log('Selected role:', this.selectedRole);\n }\n\n participantColor = (index: number) => {\n return defaultRolePalette[index % 100] \|\| defaultRolePalette[0];\n };\n\n render() {\n console.log(this.selectedRole);\n return (\n <Host>\n {/ <select onChange={(input) => {\n this.alter({ signer: parseInt((input.target as HTMLSelectElement).value) })\n }}>\n <option value=\"0\">Sender</option>\n {this.roles.map(r => <option value={r.signerIndex}>{r.name}</option>)}\n\n </select> */}\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: this.participantColor(this.selectedRole?.signerIndex).s20,\n color: this.participantColor(this.selectedRole?.signerIndex).s80,\n }}\n >\n <ls-icon size=\"18\" name={this.selectedRole?.roleType === 'SENDER' ? 'user' : this.selectedRole?.roleType === 'APPROVER' ? 'check-circle' : this.selectedRole?.roleType === 'WITNESS' ? 'eye' : 'signature'} />\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': this.participantColor(r?.signerIndex).s10,\n '--check-icon-selected': this.participantColor(r?.signerIndex).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 ? this.participantColor(r?.signerIndex).s20 : this.participantColor(r?.signerIndex).s50,\n color: `var(--${this.participantColor(r?.signerIndex)}-90)`,\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': `var(--${this.participantColor(r?.signerIndex)}-100)`,\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': `var(--${this.participantColor(r?.signerIndex)}-80)`,\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 </div>\n )}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/types/RoleColor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RoleColor.js","sourceRoot":"","sources":["../../src/types/RoleColor.ts"],"names":[],"mappings":"","sourcesContent":["export type RoleColor = {\n ~~primary~~: string\n ~~faded~~: string\n};"]}
1	+ {"version":3,"file":"RoleColor.js","sourceRoot":"","sources":["../../src/types/RoleColor.ts"],"names":[],"mappings":"","sourcesContent":["export type RoleColor = {\n s10: string\n s20: string\n s50: string\n s60: string\n s80: string\n description: string\n};"]}

package/dist/components/ls-document-viewer.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
-import { d as defaultRolePalette } from './p-C00GqV9f.js';
+import { d as defaultRolePalette } from './p-D1OQM-9f.js';
 import { a as alter, o as oob, m as matchData, g as getApiType } from './p-DqJ_uIFZ.js';
 import { d as defineCustomElement$B } from './p-BneR1hef.js';
-import { d as defineCustomElement$A } from './p-DasXNgMG.js';
+import { d as defineCustomElement$A } from './p-ynMP52Os.js';
 import { d as defineCustomElement$z } from './p-C9AqDCzm.js';
 import { d as defineCustomElement$y } from './p-DVz19y7K.js';
 import { d as defineCustomElement$x } from './p-DzmtJl3e.js';
@@ -11,31 +11,31 @@ import { d as defineCustomElement$v } from './p-CttUZd3c.js';
 import { d as defineCustomElement$u } from './p-3LU2FV3W.js';
 import { d as defineCustomElement$t } from './p-DjavAQqZ.js';
 import { d as defineCustomElement$s } from './p-DoywjJAr.js';
-import { d as defineCustomElement$r } from './p-1Ir9-yQU.js';
+import { d as defineCustomElement$r } from './p-DqToFDz3.js';
 import { d as defineCustomElement$q } from './p-CfCokEUT.js';
 import { d as defineCustomElement$p } from './p-Dzn5xAM4.js';
-import { d as defineCustomElement$o } from './p-DCLBmOtj.js';
-import { d as defineCustomElement$n } from './p-ucaurEVy.js';
-import { d as defineCustomElement$m } from './p-EsA1p6L3.js';
-import { d as defineCustomElement$l } from './p-C6YMMVJ1.js';
-import { d as defineCustomElement$k } from './p-DzHh5tyo.js';
-import { d as defineCustomElement$j } from './p-DEE854iZ.js';
-import { d as defineCustomElement$i } from './p-B7VyU7YH.js';
-import { d as defineCustomElement$h } from './p-BSN2cMdj.js';
-import { d as defineCustomElement$g } from './p-rEZh-cMt.js';
+import { d as defineCustomElement$o } from './p-CE67ypMe.js';
+import { d as defineCustomElement$n } from './p-CuxAfM9m.js';
+import { d as defineCustomElement$m } from './p-Bj9FzNSh.js';
+import { d as defineCustomElement$l } from './p-BjBJRt5-.js';
+import { d as defineCustomElement$k } from './p-B6Dqll_2.js';
+import { d as defineCustomElement$j } from './p-BYkgi-J_.js';
+import { d as defineCustomElement$i } from './p-7mvMkVRb.js';
+import { d as defineCustomElement$h } from './p-LFkQIFv6.js';
+import { d as defineCustomElement$g } from './p-D4doNXE5.js';
 import { d as defineCustomElement$f } from './p-Bpzk1RMu.js';
 import { d as defineCustomElement$e } from './p-aOAZ6c8y.js';
 import { d as defineCustomElement$d } from './p-p3xY_X0j.js';
 import { d as defineCustomElement$c } from './p-DY_A9zAm.js';
-import { d as defineCustomElement$b } from './p-Bh-iiZW1.js';
-import { d as defineCustomElement$a } from './p-D4JCAjlc.js';
+import { d as defineCustomElement$b } from './p-BedUS-Pi.js';
+import { d as defineCustomElement$a } from './p-CbUCAzmE.js';
 import { d as defineCustomElement$9 } from './p-BsqbS8f_.js';
 import { d as defineCustomElement$8 } from './p-Bby5tjrS.js';
 import { d as defineCustomElement$7 } from './p-BCpsA9BY.js';
 import { d as defineCustomElement$6 } from './p-JBc2BCIT.js';
 import { d as defineCustomElement$5 } from './p-lTOSc-NN.js';
 import { d as defineCustomElement$4 } from './p-BPkbTOIU.js';
-import { d as defineCustomElement$3 } from './p-D_ZsRxGa.js';
+import { d as defineCustomElement$3 } from './p-DYZGkZmu.js';
 import { d as defineCustomElement$2 } from './p-CtMHOHAp.js';
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -24583,11 +24583,6 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
      * {boolean}
      */
     toolboxFilter = null;
-    /**
-     * Allows you to change the colours used for each role in the template.
-     * {SignerColor[]}
-     */
-    roleColors = defaultRolePalette;
     //
     // --- Event Emitters --- //
     //
@@ -24839,10 +24834,10 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             this.load();
     }
     signerColor = (index) => {
-        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+        return defaultRolePalette[index % 100].s60 || defaultRolePalette[0].s60;
     };
     render() {
-        return (h(Host, { key: 'f0fc2b823aa34e9602080b6f43fa3d6a17644905' }, h(h.Fragment, null, h("div", { key: '9df7db9dd181820cc6c192edc1a93984a8a027a7', class: "page-header" }, h("p", { key: '43e253591b967eff115f0e95f39c42dda5370f65', class: "header-text-1" }, "Template Creation"), h("p", { key: '27a2c45ef973ed2a39a88506dd4a3e36748fa861' }, "/"), h("p", { key: 'a31c7b901fe689d11208fc7dccc76838fbb126d0', class: "header-text-2" }, "Template Name")), h("form", { key: '7bad0edc525c32943bea2a39eca6de3515287263', id: "ls-editor-form" }, this.showtoolbox === true ? (h("div", { class: "leftBox" }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, h("ls-feature-column", { onManage: manager => {
+        return (h(Host, { key: '859d2cc0c98f729ebacb16f36cee16dd28af7c2d' }, h(h.Fragment, null, h("div", { key: '4be8fb9ad4c7d583b474e3b23b1f1006ba1c2d08', class: "page-header" }, h("p", { key: '2cc24d403cc217a4e2f5b2ef109412a6396f2c4a', class: "header-text-1" }, "Template Creation"), h("p", { key: '3cc17aa5ef734022e85ef1e8501c9f1b22a8d5e9' }, "/"), h("p", { key: '5524c9eb62a096563eaad2f09af00c41df806ac7', class: "header-text-2" }, "Template Name")), h("form", { key: '3bc3f5317106ea2c4cabe42a70451906e0f13ac3', id: "ls-editor-form" }, this.showtoolbox === true ? (h("div", { class: "leftBox" }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, h("ls-feature-column", { onManage: manager => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -24855,7 +24850,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             } }), h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Participant Fields"), h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { class: "fields-box" }, this.signer > 0 ? (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", color: this.signerColor(this.signer) })) : (h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", color: this.signerColor(this.signer) })), h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", color: this.signerColor(this.signer) }), h("div", { class: 'expand-fields-row', onClick: () => (this.expandfields = !this.expandfields) }, h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true }), h("p", null, "More Field Types")), this.expandfields && (h("div", { class: "fields-box" }, h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", color: this.signerColor(this.signer) }))))), h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' })), this.showrightpanel && !this.displayTable && (h("div", { class: this.selected && this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, h("div", { class: 'properties-header' }, h("div", { class: 'properties-header-icon' }, h("ls-icon", { name: "pre-filled-content" })), h("h1", { class: 'properties-header-title' }, "Field Properties"), h("button", { class: 'tertiaryGrey', onClick: e => {
                 this.selected = [];
                 e.preventDefault();
-            } }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), h("div", { key: '776dff168c249752f400db7b80e740f3e2684e60', id: "ls-mid-area" }, h("ls-toolbar", { key: '7084a21f22f891d6fb33c1642b6167dbe674268f', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template }), h("div", { key: '8276d3e37a4171b82ab9d5d9913447a23e583d91', class: 'document-frame-wrapper' }, h("div", { key: '746d82daa6ebdd758c12f343d88ee7d8cc6742a6', class: 'spacer' }), h("div", { key: '4f5c297f03666429ad49331c768413b48a5ec397', id: "ls-document-frame" }, h("canvas", { key: 'f3042a35c1f9b9b91973cb87e11019a2488687a3', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), h("ls-editor-table", { key: '9005b00b5e5b56c568a26ee79be8636c8280bb93', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '88ba70e9e18d000cca60eaaa77bf976e0e019fa6', id: "ls-box-selector" }))), h("ls-statusbar", { key: '634e045de512429e15fff2680def5ce870bf2142', editor: this }))))));
+            } }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), h("div", { key: '396f65ae8dfd571d289bfc42816c040828e8fb88', id: "ls-mid-area" }, h("ls-toolbar", { key: '1a621e6b7c8dad1f0a4178f94ba9d069fb129a1d', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template }), h("div", { key: 'eae5daf190f5e3bdd39823a97cec71cfb2a0fea9', class: 'document-frame-wrapper' }, h("div", { key: 'c97bb669bffc774f5b3eb9a3a30d73929c08e3a5', class: 'spacer' }), h("div", { key: 'd0c6f96d9a08ae6c0c792e2dc0ef36ef3a631b77', id: "ls-document-frame" }, h("canvas", { key: 'efcdc3c09c8336e3be0e51afa560b3755519e308', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), h("ls-editor-table", { key: '298a8c1c28d7965e3a622006d2dd8de7005ba7b7', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '844cda3669af25400cc2b41094c3344c5cd60264', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'a170950405cde15290542c96fcdfc0609f81a552', editor: this }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],
@@ -24881,7 +24876,6 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         "readonly": [4],
         "showtableview": [4],
         "toolboxFilter": [1, "toolbox-filter"],
-        "roleColors": [16, "role-colors"],
         "_template": [32],
         "_group": [32],
         "selected": [32],