npm - legalesign-document-viewer - Versions diffs - 0.1.2 → 0.1.4 - Mend

legalesign-document-viewer 0.1.2 → 0.1.4

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

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

@@ -24,7 +24,7 @@ export class LsIcon {
             console.warn('Icons in src/components/ls-icon/icons.ts should be identical to the enum type in src/types/Icon.ts. Please add all icons to the enum type.');
     }
     render() {
-        return (h("host", { key: '524961e24d0d8496a0a78e69965f3e231ea06c73' }, icons
+        return (h("host", { key: 'e53edb8f22349510399881fb8e76190b03209751' }, icons
             ?.filter((icon) => icon.name === this.name)
             ?.map((icon) => (h("div", { key: icon?.name, class: 'iconContainer', style: {
                 height: `${this.size}px`,
@@ -42,7 +42,7 @@ export class LsIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "Icon",
-                    "resolved": "\"expand\" | \"filter\" | \"map\" | \"document\" | \"code\" | \"link\" | \"menu\" | \"table\" | \"stop\" | \"text\" | \"download\" | \"target\" | \"key\" | \"required\" | \"terminal\" | \"scale\" | \"x\" | \"y\" | \"collection\" | \"translate\" | \"signature\" | \"initials\" | \"search\" | \"template\" | \"dropdown\" | \"pause\" | \"play\" | \"mail\" | \"bell\" | \"home\" | \"briefcase\" | \"shield-check\" | \"shield-exclamation\" | \"cog\" | \"check\" | \"cash\" | \"location-marker\" | \"user\" | \"users\" | \"user-group\" | \"office-building\" | \"pencil-alt\" | \"pencil\" | \"eye\" | \"bookmark\" | \"color-swatch\" | \"inbox\" | \"inbox-in\" | \"archive\" | \"clock\" | \"photograph\" | \"tag\" | \"phone\" | \"phone-incoming\" | \"phone-outgoing\" | \"menu-alt-1\" | \"menu-alt-2\" | \"menu-alt-3\" | \"menu-alt-4\" | \"switch-vertical\" | \"switch-horizontal\" | \"plus\" | \"refresh\" | \"question-mark-circle\" | \"exclamation\" | \"cloud-upload\" | \"cloud-download\" | \"chart-pie\" | \"document-download\" | \"document-add\" | \"document-remove\" | \"calender\" | \"camera\" | \"globe-alt\" | \"duplicate\" | \"share\" | \"heart\" | \"globe\" | \"volume-up\" | \"volume-off\" | \"adjustments\" | \"mail-open\" | \"document-duplicate\" | \"credit-card\" | \"lock-closed\" | \"trending-up\" | \"trending-down\" | \"at-symbol\" | \"trash\" | \"information-circle\" | \"arrow-up\" | \"arrow-right\" | \"arrow-down\" | \"arrow-left\" | \"arrow-circle-right\" | \"arrow-circle-down\" | \"arrow-circle-left\" | \"arrow-circle-up\" | \"sort-ascending\" | \"sort-descending\" | \"x-circle\" | \"check-circle\" | \"exclamation-circle\" | \"plus-circle\" | \"minus-circle\" | \"user-circle\" | \"zoom-in\" | \"zoom-out\" | \"user-add\" | \"dots-horizontal\" | \"dots-vertical\" | \"upload\" | \"view-list\" | \"view-boards\" | \"paper-clip\" | \"emoji-happy\" | \"emoji-sad\" | \"printer\" | \"currency-dollar\" | \"currency-yen\" | \"currency-euro\" | \"currency-pound\" | \"currency-rupee\" | \"chevron-down\" | \"chevron-right\" | \"chevron-up\" | \"chevron-left\" | \"selector\" | \"chat\" | \"receipt-refund\" | \"ticket\" | \"lock-open\" | \"dots-circle-horizontal\" | \"hashtag\" | \"qrcode\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard\" | \"external-link\" | \"sun\" | \"moon\" | \"clipboard-copy\" | \"annotation\" | \"flag\" | \"book-open\" | \"lightning-bolt\" | \"folder\" | \"sparkles\" | \"user-remove\" | \"arrow-narrow-up\" | \"arrow-narrow-right\" | \"arrow-narrow-down\" | \"arrow-narrow-left\" | \"reply\" | \"light-bulb\" | \"chat-alt\" | \"document-report\" | \"logout\" | \"ban\" | \"shopping-cart\" | \"cursor-click\" | \"microphone\" | \"speakerphone\" | \"badge-check\" | \"desktop-computer\" | \"chat-alt-2\" | \"support\" | \"newspaper\" | \"bookmark-alt\" | \"view-grid-add\" | \"library\" | \"star\" | \"chart-square-bar\" | \"eye-off\" | \"chart-bar\" | \"fire\" | \"shopping-bag\" | \"thumb-up\" | \"thumb-down\" | \"hand\" | \"arrows-expand\" | \"view-grid\" | \"puzzle\" | \"folder-download\" | \"folder-add\" | \"folder-remove\" | \"identification\" | \"rss\" | \"scissors\" | \"music-note\" | \"film\" | \"database\" | \"server\" | \"login\" | \"wifi\" | \"backspace\" | \"paper-airplane\" | \"device-mobile\" | \"device-tablet\" | \"chevron-double-right\" | \"chevron-double-down\" | \"chevron-double-left\" | \"chevron-double-up\" | \"finger-print\" | \"cube\" | \"folder-open\" | \"save\" | \"save-as\" | \"document-text\" | \"calculator\" | \"beaker\" | \"gift\" | \"truck\" | \"currency-bangladeshi\" | \"video-camera\" | \"cloud\" | \"cube-transparent\" | \"cake\" | \"phone-missed-call\" | \"plus-sm\" | \"minus-sm\" | \"receipt-tax\" | \"status-online\" | \"status-offline\" | \"presentation-chart-line\" | \"presentation-chart-bar\" | \"fast-forward\" | \"rewind\" | \"chip\" | \"academic-cap\" | \"variable\" | \"document-search\" | \"search-circle\" | \"minus\" | \"arrow-sm-up\" | \"arrow-sm-right\" | \"arrow-sm-down\" | \"arrow-sm-left\" | \"base-circle\" | \"drag-vertical\" | \"menu-alt-5\" | \"text-size\" | \"pin\" | \"keyboard\" | \"move-vertical\" | \"move-horizontal\" | \"rotate-left\" | \"rotate-right\" | \"undo\" | \"redo\" | \"drag-horizontal\" | \"side-panel-close-left\" | \"side-panel-close-right\" | \"side-panel-open-left\" | \"side-panel-open-right\" | \"contacts\" | \"arrow-up-link-out\" | \"device-lock\" | \"auto-date\" | \"revert\" | \"guides\" | \"bulk-send\" | \"field-alignment-left\" | \"field-alignment-centre\" | \"field-alignment-right\" | \"accessibility\" | \"arrows-minimise\" | \"document-info\" | \"document-import-fields\" | \"document-merge-alt2\" | \"document-combine\" | \"field-alignment-top\" | \"field-alignment-middle\" | \"field-alignment-bottom\" | \"box-empty\" | \"box-ticked\" | \"box-crossed\" | \"sort-alphabetically-a-z\" | \"sort-alphabetically-z-a\" | \"linked-document\" | \"document-replace\" | \"field-scale\" | \"field-match-width\" | \"field-match-height\" | \"recipient-link\" | \"recipient-link-broken\" | \"witness-arrow\" | \"branch\" | \"variant\" | \"recipient-details-card\" | \"recipient-details\" | \"field-distribute-vertically\" | \"field-distribute-horizontally\" | \"field-duplicate\" | \"pre-filled-content\" | \"typing-input\" | \"table-split\" | \"add-column-left\" | \"add-column-right\" | \"recipient-links\" | \"list-order\" | \"field-scaling-off\" | \"fit-width\" | \"fit-height\" | \"table-quick-edit\" | \"table-columns\" | \"table-rows\" | \"apply-all-rows\" | \"pagescroll-preview\" | \"page-insert-vertical\" | \"page-insert-horizontal\" | \"circle-quarter\" | \"circle-half\" | \"circle-three-quarter\" | \"time-sort-ascending\" | \"time-sort-descending\" | \"date-sort-ascending\" | \"date-sort-descending\" | \"side-panel-closed\" | \"side-panel-open\" | \"date-sent-sort-ascending\" | \"date-sent-sort-descending\" | \"sort-alphabetically-a-z-alt\" | \"sort-alphabetically-z-a-alt\" | \"template-sent\" | \"template-not-sent\" | \"grid\" | \"linked\" | \"link-broken\" | \"user-assign\" | \"x-letter\" | \"field-selected\" | \"designation\" | \"text-alignment\" | \"field-placement\" | \"typeface\" | \"typesize\" | \"page-layout\" | \"field-special\" | \"link-value\" | \"field-order\" | \"send-arrow\" | \"sent-progress\" | \"circle-filled-quarter\" | \"circle-filled-half\" | \"circle-filled-three-quarter\" | \"document-viewed\" | \"collapse\" | \"logo\"",
+                    "resolved": "\"expand\" | \"filter\" | \"map\" | \"document\" | \"code\" | \"link\" | \"menu\" | \"table\" | \"stop\" | \"text\" | \"download\" | \"target\" | \"key\" | \"required\" | \"terminal\" | \"scale\" | \"x\" | \"y\" | \"collection\" | \"translate\" | \"signature\" | \"initials\" | \"search\" | \"template\" | \"dropdown\" | \"pause\" | \"play\" | \"mail\" | \"auto-sign\" | \"bell\" | \"home\" | \"briefcase\" | \"shield-check\" | \"shield-exclamation\" | \"cog\" | \"check\" | \"cash\" | \"location-marker\" | \"user\" | \"users\" | \"user-group\" | \"office-building\" | \"pencil-alt\" | \"pencil\" | \"eye\" | \"bookmark\" | \"color-swatch\" | \"inbox\" | \"inbox-in\" | \"archive\" | \"clock\" | \"photograph\" | \"tag\" | \"phone\" | \"phone-incoming\" | \"phone-outgoing\" | \"menu-alt-1\" | \"menu-alt-2\" | \"menu-alt-3\" | \"menu-alt-4\" | \"switch-vertical\" | \"switch-horizontal\" | \"plus\" | \"refresh\" | \"question-mark-circle\" | \"exclamation\" | \"cloud-upload\" | \"cloud-download\" | \"chart-pie\" | \"document-download\" | \"document-add\" | \"document-remove\" | \"calender\" | \"camera\" | \"globe-alt\" | \"duplicate\" | \"share\" | \"heart\" | \"globe\" | \"volume-up\" | \"volume-off\" | \"adjustments\" | \"mail-open\" | \"document-duplicate\" | \"credit-card\" | \"lock-closed\" | \"trending-up\" | \"trending-down\" | \"at-symbol\" | \"trash\" | \"information-circle\" | \"arrow-up\" | \"arrow-right\" | \"arrow-down\" | \"arrow-left\" | \"arrow-circle-right\" | \"arrow-circle-down\" | \"arrow-circle-left\" | \"arrow-circle-up\" | \"sort-ascending\" | \"sort-descending\" | \"x-circle\" | \"check-circle\" | \"exclamation-circle\" | \"plus-circle\" | \"minus-circle\" | \"user-circle\" | \"zoom-in\" | \"zoom-out\" | \"user-add\" | \"dots-horizontal\" | \"dots-vertical\" | \"upload\" | \"view-list\" | \"view-boards\" | \"paper-clip\" | \"emoji-happy\" | \"emoji-sad\" | \"printer\" | \"currency-dollar\" | \"currency-yen\" | \"currency-euro\" | \"currency-pound\" | \"currency-rupee\" | \"chevron-down\" | \"chevron-right\" | \"chevron-up\" | \"chevron-left\" | \"selector\" | \"chat\" | \"receipt-refund\" | \"ticket\" | \"lock-open\" | \"dots-circle-horizontal\" | \"hashtag\" | \"qrcode\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard\" | \"external-link\" | \"sun\" | \"moon\" | \"clipboard-copy\" | \"annotation\" | \"flag\" | \"book-open\" | \"lightning-bolt\" | \"folder\" | \"sparkles\" | \"user-remove\" | \"arrow-narrow-up\" | \"arrow-narrow-right\" | \"arrow-narrow-down\" | \"arrow-narrow-left\" | \"reply\" | \"light-bulb\" | \"chat-alt\" | \"document-report\" | \"logout\" | \"ban\" | \"shopping-cart\" | \"cursor-click\" | \"microphone\" | \"speakerphone\" | \"badge-check\" | \"desktop-computer\" | \"chat-alt-2\" | \"support\" | \"newspaper\" | \"bookmark-alt\" | \"view-grid-add\" | \"library\" | \"star\" | \"chart-square-bar\" | \"eye-off\" | \"chart-bar\" | \"fire\" | \"shopping-bag\" | \"thumb-up\" | \"thumb-down\" | \"hand\" | \"arrows-expand\" | \"view-grid\" | \"puzzle\" | \"folder-download\" | \"folder-add\" | \"folder-remove\" | \"identification\" | \"rss\" | \"scissors\" | \"music-note\" | \"film\" | \"database\" | \"server\" | \"login\" | \"wifi\" | \"backspace\" | \"paper-airplane\" | \"device-mobile\" | \"device-tablet\" | \"chevron-double-right\" | \"chevron-double-down\" | \"chevron-double-left\" | \"chevron-double-up\" | \"finger-print\" | \"cube\" | \"folder-open\" | \"save\" | \"save-as\" | \"document-text\" | \"calculator\" | \"beaker\" | \"gift\" | \"truck\" | \"currency-bangladeshi\" | \"video-camera\" | \"cloud\" | \"cube-transparent\" | \"cake\" | \"phone-missed-call\" | \"plus-sm\" | \"minus-sm\" | \"receipt-tax\" | \"status-online\" | \"status-offline\" | \"presentation-chart-line\" | \"presentation-chart-bar\" | \"fast-forward\" | \"rewind\" | \"chip\" | \"academic-cap\" | \"variable\" | \"document-search\" | \"search-circle\" | \"minus\" | \"arrow-sm-up\" | \"arrow-sm-right\" | \"arrow-sm-down\" | \"arrow-sm-left\" | \"base-circle\" | \"drag-vertical\" | \"menu-alt-5\" | \"text-size\" | \"pin\" | \"keyboard\" | \"move-vertical\" | \"move-horizontal\" | \"rotate-left\" | \"rotate-right\" | \"undo\" | \"redo\" | \"drag-horizontal\" | \"side-panel-close-left\" | \"side-panel-close-right\" | \"side-panel-open-left\" | \"side-panel-open-right\" | \"contacts\" | \"arrow-up-link-out\" | \"device-lock\" | \"auto-date\" | \"revert\" | \"guides\" | \"bulk-send\" | \"field-alignment-left\" | \"field-alignment-centre\" | \"field-alignment-right\" | \"accessibility\" | \"arrows-minimise\" | \"document-info\" | \"document-import-fields\" | \"document-merge-alt2\" | \"document-combine\" | \"field-alignment-top\" | \"field-alignment-middle\" | \"field-alignment-bottom\" | \"box-empty\" | \"box-ticked\" | \"box-crossed\" | \"sort-alphabetically-a-z\" | \"sort-alphabetically-z-a\" | \"linked-document\" | \"document-replace\" | \"field-scale\" | \"field-match-width\" | \"field-match-height\" | \"recipient-link\" | \"recipient-link-broken\" | \"witness-arrow\" | \"branch\" | \"variant\" | \"recipient-details-card\" | \"recipient-details\" | \"field-distribute-vertically\" | \"field-distribute-horizontally\" | \"field-duplicate\" | \"pre-filled-content\" | \"typing-input\" | \"table-split\" | \"add-column-left\" | \"add-column-right\" | \"recipient-links\" | \"list-order\" | \"field-scaling-off\" | \"fit-width\" | \"fit-height\" | \"table-quick-edit\" | \"table-columns\" | \"table-rows\" | \"apply-all-rows\" | \"pagescroll-preview\" | \"page-insert-vertical\" | \"page-insert-horizontal\" | \"circle-quarter\" | \"circle-half\" | \"circle-three-quarter\" | \"time-sort-ascending\" | \"time-sort-descending\" | \"date-sort-ascending\" | \"date-sort-descending\" | \"side-panel-closed\" | \"side-panel-open\" | \"date-sent-sort-ascending\" | \"date-sent-sort-descending\" | \"sort-alphabetically-a-z-alt\" | \"sort-alphabetically-z-a-alt\" | \"template-sent\" | \"template-not-sent\" | \"grid\" | \"linked\" | \"link-broken\" | \"user-assign\" | \"x-letter\" | \"field-selected\" | \"designation\" | \"text-alignment\" | \"field-placement\" | \"typeface\" | \"typesize\" | \"page-layout\" | \"field-special\" | \"link-value\" | \"field-order\" | \"send-arrow\" | \"sent-progress\" | \"circle-filled-quarter\" | \"circle-filled-half\" | \"circle-filled-three-quarter\" | \"document-viewed\" | \"collapse\" | \"logo\"",
                     "references": {
                         "Icon": {
                             "location": "import",

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

@@ -18,22 +18,25 @@ export class LsParticipantManager {
     }
     deleteHandler(role) {
         this.update.emit([{ action: 'delete', data: role }]);
+        this.mutate.emit([{ action: 'delete', data: role }]);
     }
     swapHandler(role1, role2) {
         this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);
     }
     createHandler() {
+        const defaultExperience = this.editor._group.experienceConnection.experiences.find(x => x.defaultExperience === true);
         const data = [
             {
                 action: 'create',
                 data: {
                     id: btoa('rol' + crypto.randomUUID()),
-                    name: 'Signer ' + this.template.roles.length,
+                    name: 'Signer ' + (this.template.roles.length + 1),
                     roleType: 'SIGNER',
-                    signerIndex: this.template.roles.length,
+                    signerIndex: this.template.roles.length + 1,
                     ordinal: this.template.roles.length,
                     signerParent: null,
-                    experience: '',
+                    experience: defaultExperience.id,
+                    templateId: this.template.id
                 },
             },
         ];
@@ -44,7 +47,7 @@ export class LsParticipantManager {
         return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        return (h(Host, { key: '5410e94b861138ea9ad1723c11acdbd0035eed21' }, h("div", { key: 'ae5b41faab6087917c8f19e53ab457f1514f7dbb', class: "ls-editor-infobox" }, h("h2", { key: '0499354c9a207d1d395fd05ffaf99f8bc3bfe5ab', class: "toolbox-section-title" }, "Participants"), h("p", { key: 'ce76df4d92e82768ca0d3bfaff94d21bb0ccfc72', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '96c91f99af48fd06041b9cada12092ba6b2d7d06', class: "participant-list" }, this.template?.roles.map((r, index) => {
+        return (h(Host, { key: '4f05b9b42935d385ac4dcf575dff6655a39b625c' }, h("div", { key: '07ec67a5c919dbc1258768dd7db80d21790a8c1e', class: "ls-editor-infobox" }, h("h2", { key: '365f0a1c25e77ffc1b89354b867e7844b53a40fe', class: "toolbox-section-title" }, "Participants"), h("p", { key: 'cc7e0187d20492ea7568bd77ef4c3cb2df8b12ce', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '61045bc3accf319bfd5c84953f6a0066b6bd2114', class: "participant-list" }, this.template && this.template?.roles.map((r, index) => {
             return (h("div", { class: "participant-card", onClick: () => {
                     this.selectedHandler(r);
                 }, style: {
@@ -62,8 +65,9 @@ export class LsParticipantManager {
                     color: `var(--${this.participantColor(r?.signerIndex)}-100)`,
                 } }, r.name || `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index + 1}`), h("p", { class: "participant-text-type", style: {
                     color: `var(--${this.participantColor(r?.signerIndex)}-80)`,
-                } }, r.signerIndex > 100 ? 'Witness' : 'Signer'))));
-        })), h("div", { key: 'a672fcda086d600b58938fdd5ab9c66854d81b7a', class: 'add-participant-button' }, h("button", { key: '7a742d4a99b9129c738edc571fc7c35633fc2371', onClick: () => this.createHandler() }, h("ls-icon", { key: '04d51087a6a8c592ac2e51a0ab3602a9c6d214ba', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: '3185f42a372c38495d011c62c7c35ff1610ae6e1' }, "Add Participant"))), h("slot", { key: 'bf619899ce807ca4743c27795cc118ce19b3dd65' })));
+                    textTransform: 'capitalize'
+                } }, r.roleType))));
+        })), h("div", { key: '295045bfeca2144d556311574fe6c34e74453c40', class: 'add-participant-button' }, h("button", { key: '6a0a02834fd09aff180fffc58983a0eac9fde61d', onClick: () => this.createHandler() }, h("ls-icon", { key: 'd623a2c621f730b96339657d49be661c96d1d9fa', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: 'ce3954251ce0b939dab95f9ea1772da1bb0cf9ea' }, "Add Participant"))), h("slot", { key: '65e160a9fde84fb8a09b14e60c992324bd9a8892' })));
     }
     static get is() { return "ls-participant-manager"; }
     static get encapsulation() { return "shadow"; }

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":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { LSApiRole } from '../../types/LSApiRole';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-participant-manager',\n styleUrl: 'ls-participant-manager.css',\n shadow: true,\n})\nexport class LsParticipantManager {\n /*\n The base template information (as JSON).\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 selectedHandler(_role) {\n //console.log(role, 'participant manager')\n }\n\n deleteHandler(role: LSApiRole) {\n this.update.emit([{ action: 'delete', data: role }]);\n }\n\n swapHandler(role1, role2) {\n this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);\n }\n createHandler() {\n const data: LSMutateEvent[] = [\n {\n action: 'create',\n data: {\n id: btoa('rol' + crypto.randomUUID()),\n name: 'Signer ' + this.template.roles.length,\n roleType: 'SIGNER',\n signerIndex: this.template.roles.length,\n ordinal: this.template.roles.length,\n signerParent: null,\n experience: '',\n },\n },\n ]\n this.update.emit(data);\n this.mutate.emit(data);\n }\n\n participantColor = (index: number) => {\n return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] \|\| defaultRolePalette[0];\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?.roles.map((r, index) => {\n return (\n <div\n class=\"participant-card\"\n onClick={() => {\n this.selectedHandler(r);\n }}\n style={{\n background: `var(--${this.participantColor(r?.signerIndex)}-10)`,\n border: '1px solid ' + `var(--${this.participantColor(r?.signerIndex)}-60)`,\n marginTop: r.signerIndex > 100 && '-0.813rem',\n }}\n onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.innerButton')?.classList.remove('hidden')}\n onMouseLeave={e => (e.currentTarget as HTMLElement).querySelector('.innerButton')?.classList.add('hidden')}\n >\n <div class={'participant-card-top-items'}>\n {' '}\n <div\n class={'role-label'}\n style={{\n background: `var(--${this.participantColor(r?.signerIndex)}-20)`,\n color: `var(--${this.participantColor(r?.signerIndex)}-90)`,\n }}\n >\n <ls-icon name={r?.signerIndex > 100 ? 'eye' : 'signature'} />\n {'Participant ' + (index + 1)}\n </div>\n <div\n class=\"innerButton hidden\"\n onClick={() => {\n this.deleteHandler(r);\n }}\n >\n <ls-icon\n name=\"trash\"\n size=\"18\"\n style={{\n color: `var(--${this.participantColor(r?.signerIndex)}-40)`,\n }}\n />\n </div>\n </div>\n <div class={'participant-card-text'}>\n <p\n class=\"participant-text-description\"\n style={{\n color: `var(--${this.participantColor(r?.signerIndex)}-100)`,\n }}\n >\n {r.name \|\| `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index + 1}`}\n </p>\n <p\n class=\"participant-text-type\"\n style={{\n color: `var(--${this.participantColor(r?.signerIndex)}-80)`,\n }}\n >\n {r.signerIndex > 100 ? 'Witness' : 'Signer'}\n </p>\n </div>\n\n {/ {index !== 0 ? (\n <button\n class=\"innerButton\"\n onClick={() => {\n this.swapHandler(r, this.template.roles[index - 1]);\n }}\n >\n <ls-icon name=\"arrow-up\" size=\"18\" />\n </button>\n ) : (\n <></>\n )}\n {index < this.template.roles.length - 1 ? (\n <button\n class=\"innerButton\"\n onClick={() => {\n this.swapHandler(r, this.template.roles[index + 1]);\n }}\n >\n <ls-icon name=\"arrow-down\" size=\"18\" />\n </button>\n ) : (\n <></>\n )} */}\n </div>\n );\n })}\n </div>\n <div class={'add-participant-button'}>\n <button onClick={() => this.createHandler()}>\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 } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { LSApiRole } from '../../types/LSApiRole';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-participant-manager',\n styleUrl: 'ls-participant-manager.css',\n shadow: true,\n})\nexport class LsParticipantManager {\n /*\n The base template information (as JSON).\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 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 createHandler() {\n const defaultExperience = this.editor._group.experienceConnection.experiences.find(x => x.defaultExperience === true)\n const data: LSMutateEvent[] = [\n {\n action: 'create',\n data: {\n id: btoa('rol' + crypto.randomUUID()),\n name: 'Signer ' +(this.template.roles.length + 1),\n roleType: 'SIGNER',\n signerIndex: this.template.roles.length + 1,\n ordinal: this.template.roles.length,\n signerParent: null,\n experience: defaultExperience.id,\n templateId: this.template.id\n },\n },\n ]\n this.update.emit(data);\n this.mutate.emit(data);\n }\n\n participantColor = (index: number) => {\n return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] \|\| defaultRolePalette[0];\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 && this.template?.roles.map((r, index) => {\n return (\n <div\n class=\"participant-card\"\n onClick={() => {\n this.selectedHandler(r);\n }}\n style={{\n background: `var(--${this.participantColor(r?.signerIndex)}-10)`,\n border: '1px solid ' + `var(--${this.participantColor(r?.signerIndex)}-60)`,\n marginTop: r.signerIndex > 100 && '-0.813rem',\n }}\n onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.innerButton')?.classList.remove('hidden')}\n onMouseLeave={e => (e.currentTarget as HTMLElement).querySelector('.innerButton')?.classList.add('hidden')}\n >\n <div class={'participant-card-top-items'}>\n {' '}\n <div\n class={'role-label'}\n style={{\n background: `var(--${this.participantColor(r?.signerIndex)}-20)`,\n color: `var(--${this.participantColor(r?.signerIndex)}-90)`,\n }}\n >\n <ls-icon name={r?.signerIndex > 100 ? 'eye' : 'signature'} />\n {'Participant ' + (index + 1)}\n </div>\n <div\n class=\"innerButton hidden\"\n onClick={() => {\n this.deleteHandler(r);\n }}\n >\n <ls-icon\n name=\"trash\"\n size=\"18\"\n style={{\n color: `var(--${this.participantColor(r?.signerIndex)}-40)`,\n }}\n />\n </div>\n </div>\n <div class={'participant-card-text'}>\n <p\n class=\"participant-text-description\"\n style={{\n color: `var(--${this.participantColor(r?.signerIndex)}-100)`,\n }}\n >\n {r.name \|\| `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index + 1}`}\n </p>\n <p\n class=\"participant-text-type\"\n style={{\n color: `var(--${this.participantColor(r?.signerIndex)}-80)`,\n textTransform: 'capitalize'\n }}\n >\n {r.roleType}\n </p>\n </div>\n\n {/ {index !== 0 ? (\n <button\n class=\"innerButton\"\n onClick={() => {\n this.swapHandler(r, this.template.roles[index - 1]);\n }}\n >\n <ls-icon name=\"arrow-up\" size=\"18\" />\n </button>\n ) : (\n <></>\n )}\n {index < this.template.roles.length - 1 ? (\n <button\n class=\"innerButton\"\n onClick={() => {\n this.swapHandler(r, this.template.roles[index + 1]);\n }}\n >\n <ls-icon name=\"arrow-down\" size=\"18\" />\n </button>\n ) : (\n <></>\n )} */}\n </div>\n );\n })}\n </div>\n <div class={'add-participant-button'}>\n <button onClick={() => this.createHandler()}>\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.css CHANGED Viewed

@@ -73,7 +73,7 @@
 .dropdown-item.selected,
 .dropdown-item.selected:hover {
-  background: var(--primary-10, #f7f8fa);
+  background: var(--background-selected, #e0e2e5);
 }
 .dropdown-item:hover {
@@ -97,7 +97,7 @@
 }
 .dropdown-item.selected .check-icon {
-  color: var(--primary-50, #5185ff);
+  color: var(--check-icon-selected);
 }
 .role-name {
@@ -117,14 +117,13 @@
 }
 .dropdown-item.selected .role-name {
-  color: var(--blue-100, #0c1457);
+  color: var(--role-name-selected);
 }
 .dropdown-item.selected .role-type {
-  color: var(--blue-80, #2d4dcc);
+  color: var(--role-type-selected);
 }
 /* Global Styles */
 p {
@@ -402,4 +401,3 @@ button.tertiaryGrey:hover {
 .button-group > :not(:first-child) {
   border-left: 1px solid var(--gray-30, #e0e2e5);
 }

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

@@ -6,7 +6,7 @@ export class LsParticipantSelect {
      * The currently selected role.
      * {number}
      */
-    selectedRole = { signerIndex: 0, name: 'Sender' };
+    selectedRole = { signerIndex: 0, name: 'Sender', roleType: 'SENDER' };
     /**
      * The current template roles.
      * {LSApiRole}
@@ -38,21 +38,37 @@ export class LsParticipantSelect {
         console.log('Selected role:', this.selectedRole);
     }
     participantColor = (index) => {
-        return index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        return (h(Host, { key: '1b7bc7262bc1364ec6e50279c276f757f9523726' }, h("div", { key: '15d24c73d27c780f17266ebe4f74bfca60ec6983', class: "dropdown" }, h("div", { key: '060537ade8ff72fe43651ad0e2776bb23a4b9423', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: '76efc33a692b6c23e8872e0e0c7e7bca880fb67c', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bc33d6be1efbcf008326b31fd2471325580d618a', 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: '68ea2320845d45fb37c9fd3e3f4f0ef55d4e7df0', 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: '7607adc2969e74a0e2f5d8b4fdce85664ee99583', 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: '37ca4f877a27f0b8fd3df9a15db7d05724683f61', 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: 'd4b468f4da727d5b5d09320d7fe65e0242b24889', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '70af166b66ac3d494ca7cee79ff02d36593a0a21', class: 'selected-role-label', style: {
+        console.log(this.selectedRole);
+        return (h(Host, { key: '097514e82e870acdeaea5520a07dee58d623e8dd' }, h("div", { key: '520a4fc7e5d787795147eb09c28a69b7c31fd1c6', class: "dropdown" }, h("div", { key: '3319bd3d55f1cc265deebe05d065af83a79631bf', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: '0454343f6b2a6af37933b30d7c50c757f2cc389f', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a8e03eee8c2baa5f3d35faac7c7c32a8ee467a97', 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: '935be72455a27991639c6fa9affdc040a14e220a', 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: 'ff42263315110f6fe02a926d075aebb753dcc9f6', 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: '0d54951d113826d171f3de27b5e0ffeaf11ad69d', 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: '07e310527a339b51a36069832fee0cf891eadf8c', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '2bc97987345d296f8426aa0359b84c65bb675b48', 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: '64747e141a8a7763ada9e193fba7adc946968ae2', size: "18", name: this.selectedRole?.signerIndex === 0 ? 'user' : this.selectedRole?.signerIndex > 100 ? 'eye' : 'signature' }), this.selectedRole.name || `Participant ${this.selectedRole.signerIndex}`), h("button", { key: 'cbc500d7845376d795b711b083d46469bc8ab2cd', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '86b4aebbfbf647cd2dc4d72143bc052cc58acd22', name: "chevron-down" }))), this.isOpen && (h("div", { key: '01e5074c5e9aa4bbe196a7c15bd8bc778320c085', class: "dropdown-list" }, h("div", { key: '4b30c6958d9560b66a0edfdd80417b004dfa409d', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', onClick: () => this.selectRole({ signerIndex: 0, name: '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: '025956c7424ba1a0216cf388bab3aca6935abe43', class: 'role-icon', style: {
+            } }, h("ls-icon", { key: '90318f0f94f60b0e95d0ffc30576c31759df2ff9', 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: '4f53ff5d8f3e14f6f705fc57b5bb3206ea350562', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '326107f673004346ff3232515e1630ee7090f927', name: "chevron-down" }))), this.isOpen && (h("div", { key: 'bc188253d880bf993b585f924defabb0efd66ea7', class: "dropdown-list" }, h("div", { key: 'c3886e83c8514ae2ac2616c23f3583a3cf036ff5', 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: '25c93faa92cdbeed92514b5df9181cc7673135cc', class: 'role-icon', style: {
                 background: `var(--${defaultRolePalette[0]}-40)`,
                 color: `var(--${defaultRolePalette[0]}-80)`,
-            } }, h("ls-icon", { key: '9aafdf1d2dd8a5c3622cc0af0f53d9a299f569ab', name: "user" })), h("div", { key: 'bc5700a571d05023013a9963cd36fa95a8863297', class: 'role-text' }, h("p", { key: '4f174876a2182121322ea21191e47bacd5cec2bc', class: 'role-name' }, 'Sender'), h("p", { key: '57bbc81c50498c2b02af91756dc32520935bb397', class: 'role-type' }, "You")), h("ls-icon", { key: '004867f576a3d946a8f55f78b326a909210cb828', 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', onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
+            } }, h("ls-icon", { key: 'f8285a338ea604f76b1a1dc7e3f716e7c99890fe', name: "user" })), h("div", { key: '2678585faff4e351e0d4ab14b3ad198e2dd7a89c', class: 'role-text' }, h("p", { key: '5e4aaa375421f9a5f7a03c4c937f7f43bf29906b', class: 'role-name', style: {
+                '--role-name-selected': `var(--${defaultRolePalette[0]}-100)`,
+            } }, 'Sender'), h("p", { key: '16bc966af7ea7462505ac34806b98ac94295ee61', class: 'role-type', style: {
+                '--role-type-selected': `var(--${defaultRolePalette[0]}-80)`,
+            } }, "You")), h("ls-icon", { key: '55f4d9f94a4b7dfec072e4a26a239b44f9b4b36f', 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)`,
+            }, 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)`,
                 color: `var(--${this.participantColor(r?.signerIndex)}-90)`,
-            } }, h("ls-icon", { name: r.signerIndex > 100 ? 'eye' : 'signature' })), h("div", { class: 'role-text' }, h("p", { class: 'role-name' }, r.name || `Participant ${r.signerIndex}`), h("p", { class: 'role-type' }, r.signerIndex > 200 ? 'Approver' : r.signerIndex > 100 ? 'Witness' : '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: 'cc39fdec4df56f6005859900cc615f3692ed8763' })));
+            } }, 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: '36d04c99b0eea3e78c11e1cc269b82a35562ab2a' })));
     }
     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 } = { signerIndex: 0, name: '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 }) {\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 > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] \|\| defaultRolePalette[0];\n };\n\n render() {\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?.signerIndex === 0 ? 'user' : this.selectedRole?.signerIndex > 100 ? 'eye' : 'signature'} />\n {this.selectedRole.name \|\| `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 onClick={() => this.selectRole({ signerIndex: 0, name: '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 class={'role-name'}>{'Sender'}</p>\n <p class={'role-type'}>You</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 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.signerIndex > 100 ? 'eye' : 'signature'} />\n </div>\n <div class={'role-text'}>\n <p class={'role-name'}>{r.name \|\| `Participant ${r.signerIndex}`}</p>\n <p class={'role-type'}>{r.signerIndex > 200 ? 'Approver' : r.signerIndex > 100 ? 'Witness' : 'Signer'}</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 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"]}

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

@@ -36,11 +36,11 @@ export class LsStatusbar {
     }
     render() {
         console.log('editor', this.editor);
-        return (h(Host, { key: 'ea525e6f8646c08be30354b2f2d1d36e21c995ba' }, h("div", { key: 'cf4cf005f20ce4bf620fb83b5cf7d02e230feb53', class: "status-bar-section" }, h("button", { key: '9f1921447fdea726f82dffad74ff88920d79f487', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: 'e5d681a4c0bb88dd69b39e931beb15df5d3a8548', name: "zoom-out" })), h("div", { key: '2655a0d7eb16c14bd67a546bbc000b6b42458b98' }, h("input", { key: 'def758649e35599d62bdfd064459f077332bd14e', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '229d1430e6e95636e962bf6b3d6e36c6ae235cb9', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: 'e7447b83ec8771b3284f7d2dfd9041c90fdcdb59', name: "zoom-in" }))), h("div", { key: 'cedaa23937a88d80777f8edce525408b0135d614', class: "status-bar-section" }, h("button", { key: 'f80d6ed2eed2ea8e51e64bb8a364be438ed19dcf', onClick: () => this.fitWidth() }, h("ls-icon", { key: '41558075bd1aa98e5d6318b691f2d6f40d526144', name: "fit-width" })), h("button", { key: '22028567cd63cf80157342f6b8af5039eb880c56', onClick: () => this.fitHeight() }, h("ls-icon", { key: '31dfcbaeb893d14b54798758207dd01c3276d7f0', name: "fit-height" }))), h("div", { key: '51a2d7a31fafd9e4cc408b92a92ceca3c672697d', class: "status-bar-section" }, h("button", { key: 'e7f179826b17caa8674a0f80a0de000ccebfb318', onClick: () => {
+        return (h(Host, { key: '8e9e1e244b4fc8ea111d2f8ae389b226caf204d9' }, h("div", { key: 'cb05827b0b9c57cc038ccb854669a7fa687a8559', class: "status-bar-section" }, h("button", { key: '9626704051c452f0b2aa4160fc0940a269aa0b97', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: '848e4d939f839f5d12ed193e802ee936030929da', name: "zoom-out" })), h("div", { key: 'd95981efcabe65e1101659904df22555245eb31a' }, h("input", { key: '880ca323ccef733bf8557412a7d45a732aa5cb12', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '49754f8b4b8b55a948e1d18ca1eabfc7178f001d', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: '582907c3c513ae45237334fc988ca551a1df24f0', name: "zoom-in" }))), h("div", { key: '5e8ba9b4958d4ba01fea0a5eb6cccdbc645b9385', class: "status-bar-section" }, h("button", { key: '68e06dd284961cf8dec02e16c302dc1fc6a22796', onClick: () => this.fitWidth() }, h("ls-icon", { key: '84a8b7bd659d3d80fc52201f44725bb5670b4905', name: "fit-width" })), h("button", { key: '49f1dd909454a0adbd6e8cb950ba5b1c93e6a99c', onClick: () => this.fitHeight() }, h("ls-icon", { key: 'b41c9c936499852e7eaf45417b2f2f492800731e', name: "fit-height" }))), h("div", { key: 'cb133d10f67ea7eec2fadcd202879fb429026a1c', class: "status-bar-section" }, h("button", { key: 'c65d52ad4801488b5a734047dd6866c467b8b3b4', onClick: () => {
                 this.editor.pagePrev();
-            } }, h("ls-icon", { key: 'f76093367b1ae81db37d0621722703e42407ba84', name: "chevron-left" })), h("p", { key: '72f7ddb0e090c946df6c7e47cdd45f3074f73d68' }, "1 / 2"), h("button", { key: 'f83e36917ed5082ac865aee641c4ced4d39f4ba0', onClick: () => {
+            } }, h("ls-icon", { key: '47661f31d5e771a3e5fa5b33679afe6c4e2c851b', name: "chevron-left" })), h("p", { key: 'b707b96884c61814dc82e331c0bb4d132b093fd3' }, "1 / 2"), h("button", { key: '23c87501b81c71dc9c1ac7f2e861467138a4d71c', onClick: () => {
                 this.editor.pageNext();
-            } }, h("ls-icon", { key: '877c0a545d80a06964a9d1ac34019f0c6361cd6f', name: "chevron-right" }))), h("slot", { key: '7110433cf65751673c3ae4d47257b296086fda1c' })));
+            } }, h("ls-icon", { key: '6f6f802e9237a16f1ac83b094b79918e89f47cd0', name: "chevron-right" }))), h("slot", { key: '555034a1229da45a3ce6e00a814ceedd6e72f4b6' })));
     }
     static get is() { return "ls-statusbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class LsToggle {
     render() {
-        return (h(Host, { key: '1a3e104280a39b83b82c0454cebad829a38353a7' }, h("label", { key: '7a9ee630ff623aa25d1364409aa77ddb2b1abec9', class: "switch" }, h("input", { key: '78a3c7e6199561d2b446ee01d4f483f064985c06', type: "checkbox" }), h("span", { key: '0f8f18a6e0dc1621d2d6eb0db18accb1ac3617ce', class: "slider round" })), h("slot", { key: 'cc23067cdab76afb4788700db8076c2a6314fb3b' })));
+        return (h(Host, { key: '1ce88fcc6e390bb710e27c47b988574afaa9c9f6' }, h("label", { key: '6d76512b1bdd6c116ab62bfaf1b9178d87019b02', class: "switch" }, h("input", { key: 'eadd916c86f9dbe94fe9d22f65f82f6b72ea630a', type: "checkbox" }), h("span", { key: '9237d68fed12e736c01a5889f801a1398883dde4', class: "slider round" })), h("slot", { key: '19eca8c7489cdfb981d4a6093aef3246b9337abd' })));
     }
     static get is() { return "ls-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,7 @@ export class LsToolbar {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: '20d1b50b89d3237b3b49e751d75bd1bd7f54b5f4' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }), h("ls-field-alignment", { dataItem: this.dataItem }), h("ls-field-distribute", { dataItem: this.dataItem }), h("ls-field-size", { dataItem: this.dataItem }))) : (h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (h("ls-field-format", { dataItem: this?.dataItem })) : (h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), h("slot", { key: '347f742c35f16a5d79a29f7b4e867e198f9bb48b' })));
+        return (h(Host, { key: 'c43519161f0c44b7f06b5b4e2a14bd81d83ecfdc' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }))) : (h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (h("ls-field-format", { dataItem: this?.dataItem })) : (h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), h("slot", { key: 'e20ff476ede1359973876658c5e70fd6039b2e3d' })));
     }
     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,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,SAAS;IACpB;;;OAGG;IAIH,QAAQ,CAAiB;IAEzB;;;OAGG;IACK,QAAQ,CAAgB;IAEhC;;;OAGG;IACK,MAAM,CAAmB;IAOjC,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;gBAOlB,uBAAiB,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI~~;gBAC7C~~,~~0BAAoB~~,~~QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;gBAC/C,2BAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;gBAChD,qBAAe,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACtC,~~CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAE,QAAQ,IACjB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAC7C,uBAAiB,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI,CAC9C,CAAC,CAAC,CAAC,CACF,6BAAuB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI,CACjF,CACG,CACP;YACD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } 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 /*\n The selected items information (as JSON).\n * {LSApiElement[]}\n /\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement[];\n\n /\n The base template information (as JSON).\n * {LSApiTemplate}\n /\n @Prop() template: LSApiTemplate;\n\n /\n The base template information (as JSON).\n * {LSDocumentViewer}\n /\n @Prop() 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 {/ <select class=\"ls-participant-select\">\n <option value=\"0\">Sender</option>\n {this.template.roles.map(r => (\n <option value={r.id}>{r.name}</option>\n ))}\n </select> */}\n <ls-field-format dataItem={this?.dataItem} />\n ~~<ls-field-alignment dataItem={this.dataItem} />\n <ls-field-distribute dataItem={this.dataItem} />\n <ls-field-size dataItem={this.dataItem} />\n~~ </div>\n ) : (\n <div class={'rowbox'}>\n {this.dataItem && this.dataItem.length === 1 ? (\n <ls-field-format dataItem={this?.dataItem} />\n ) : (\n <ls-participant-select roles={this.template?.roles} dataItem={this?.dataItem} />\n )}\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,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,SAAS;IACpB;;;OAGG;IAIH,QAAQ,CAAiB;IAEzB;;;OAGG;IACK,QAAQ,CAAgB;IAEhC;;;OAGG;IACK,MAAM,CAAmB;IAOjC,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;gBAOlB,uBAAiB,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI,CACzC,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAE,QAAQ,IACjB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAC7C,uBAAiB,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI,CAC9C,CAAC,CAAC,CAAC,CACF,6BAAuB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI,CACjF,CACG,CACP;YACD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } 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 /*\n The selected items information (as JSON).\n * {LSApiElement[]}\n /\n @Prop({\n mutable: true,\n })\n dataItem: LSApiElement[];\n\n /\n The base template information (as JSON).\n * {LSApiTemplate}\n /\n @Prop() template: LSApiTemplate;\n\n /\n The base template information (as JSON).\n * {LSDocumentViewer}\n /\n @Prop() 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 {/ <select class=\"ls-participant-select\">\n <option value=\"0\">Sender</option>\n {this.template.roles.map(r => (\n <option value={r.id}>{r.name}</option>\n ))}\n </select> */}\n <ls-field-format dataItem={this?.dataItem} />\n </div>\n ) : (\n <div class={'rowbox'}>\n {this.dataItem && this.dataItem.length === 1 ? (\n <ls-field-format dataItem={this?.dataItem} />\n ) : (\n <ls-participant-select roles={this.template?.roles} dataItem={this?.dataItem} />\n )}\n </div>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.css CHANGED Viewed

@@ -15,10 +15,10 @@
   padding: 0.5rem;
   align-items: center;
   border-radius: 0.5rem;
-  border: 1px solid var(--blue-60, #5684f0);
-  background: var(--blue-10, #f0f6ff);
+  border: 1px solid var(--signer-color);
+  background: var(--signer-color-light);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-  color: var(--blue-60, #5684f0);
+  color: var(--signer-color);
 }
 .toolbox-field-label {
@@ -308,4 +308,3 @@ button.tertiaryGrey:hover {
 .button-group > :not(:first-child) {
   border-left: 1px solid var(--gray-30, #e0e2e5);
 }

package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.js CHANGED Viewed

@@ -22,6 +22,10 @@ export class LsToolboxField {
      * The starting width of this control type in pixels.
      */
     defaultWidth;
+    /**
+     * The signer color of the element
+     */
+    color = 'primary';
     handleDragStart(event) {
         // Add the target element's id to the data transfer object
         event.dataTransfer.setData('application/json', JSON.stringify({
@@ -39,7 +43,7 @@ export class LsToolboxField {
         }
     }
     render() {
-        return (h(Host, { key: '3b1c762ec69f8b6c9fca18ba946aa39a45d0ac0a', draggable: "true" }, h("div", { key: '438540d9722e9fe01cef7f54e606493856ad496f', class: "toolbox-field-icon" }, h("ls-icon", { key: 'f7f73ce11d7f1c60a86a6e0d828b0b9b36d858f5', name: this.icon, size: "20" })), h("p", { key: '08fe18e47c355dfc281f8ecfe80760077c357d33', class: "toolbox-field-label" }, this.label), h("ls-icon", { key: 'ea542c61355b66087f052a616b2dc677f9a694d8', name: "drag-vertical", size: "16", color: "#787a80" })));
+        return (h(Host, { key: '28635190b959516d2805743afe73a75899e93188', draggable: "true" }, h("div", { key: 'ebac5f01b6e811b287d3602e11ff9d9b2d2cbf42', class: "toolbox-field-icon", style: { '--signer-color-light': `var(--${this.color}-10)`, '--signer-color': `var(--${this.color}-60)` } }, h("ls-icon", { key: '8c90a428b4996db02725b8c69c347fbd3e7f7f98', name: this.icon, size: "20" })), h("p", { key: '7707d244b00898a9c3efb2ba8d2a64665b737b69', class: "toolbox-field-label" }, this.label), h("ls-icon", { key: '9dc296c2b3da9b561a95fc7cc5cf28f7a85e27c2', name: "drag-vertical", size: "16", color: "#787a80" })));
     }
     static get is() { return "ls-toolbox-field"; }
     static get encapsulation() { return "shadow"; }
@@ -138,7 +142,7 @@ export class LsToolboxField {
                 "mutable": false,
                 "complexType": {
                     "original": "Icon",
-                    "resolved": "\"expand\" | \"filter\" | \"map\" | \"document\" | \"code\" | \"link\" | \"menu\" | \"table\" | \"stop\" | \"text\" | \"download\" | \"target\" | \"key\" | \"required\" | \"terminal\" | \"scale\" | \"x\" | \"y\" | \"collection\" | \"translate\" | \"signature\" | \"initials\" | \"search\" | \"template\" | \"dropdown\" | \"pause\" | \"play\" | \"mail\" | \"bell\" | \"home\" | \"briefcase\" | \"shield-check\" | \"shield-exclamation\" | \"cog\" | \"check\" | \"cash\" | \"location-marker\" | \"user\" | \"users\" | \"user-group\" | \"office-building\" | \"pencil-alt\" | \"pencil\" | \"eye\" | \"bookmark\" | \"color-swatch\" | \"inbox\" | \"inbox-in\" | \"archive\" | \"clock\" | \"photograph\" | \"tag\" | \"phone\" | \"phone-incoming\" | \"phone-outgoing\" | \"menu-alt-1\" | \"menu-alt-2\" | \"menu-alt-3\" | \"menu-alt-4\" | \"switch-vertical\" | \"switch-horizontal\" | \"plus\" | \"refresh\" | \"question-mark-circle\" | \"exclamation\" | \"cloud-upload\" | \"cloud-download\" | \"chart-pie\" | \"document-download\" | \"document-add\" | \"document-remove\" | \"calender\" | \"camera\" | \"globe-alt\" | \"duplicate\" | \"share\" | \"heart\" | \"globe\" | \"volume-up\" | \"volume-off\" | \"adjustments\" | \"mail-open\" | \"document-duplicate\" | \"credit-card\" | \"lock-closed\" | \"trending-up\" | \"trending-down\" | \"at-symbol\" | \"trash\" | \"information-circle\" | \"arrow-up\" | \"arrow-right\" | \"arrow-down\" | \"arrow-left\" | \"arrow-circle-right\" | \"arrow-circle-down\" | \"arrow-circle-left\" | \"arrow-circle-up\" | \"sort-ascending\" | \"sort-descending\" | \"x-circle\" | \"check-circle\" | \"exclamation-circle\" | \"plus-circle\" | \"minus-circle\" | \"user-circle\" | \"zoom-in\" | \"zoom-out\" | \"user-add\" | \"dots-horizontal\" | \"dots-vertical\" | \"upload\" | \"view-list\" | \"view-boards\" | \"paper-clip\" | \"emoji-happy\" | \"emoji-sad\" | \"printer\" | \"currency-dollar\" | \"currency-yen\" | \"currency-euro\" | \"currency-pound\" | \"currency-rupee\" | \"chevron-down\" | \"chevron-right\" | \"chevron-up\" | \"chevron-left\" | \"selector\" | \"chat\" | \"receipt-refund\" | \"ticket\" | \"lock-open\" | \"dots-circle-horizontal\" | \"hashtag\" | \"qrcode\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard\" | \"external-link\" | \"sun\" | \"moon\" | \"clipboard-copy\" | \"annotation\" | \"flag\" | \"book-open\" | \"lightning-bolt\" | \"folder\" | \"sparkles\" | \"user-remove\" | \"arrow-narrow-up\" | \"arrow-narrow-right\" | \"arrow-narrow-down\" | \"arrow-narrow-left\" | \"reply\" | \"light-bulb\" | \"chat-alt\" | \"document-report\" | \"logout\" | \"ban\" | \"shopping-cart\" | \"cursor-click\" | \"microphone\" | \"speakerphone\" | \"badge-check\" | \"desktop-computer\" | \"chat-alt-2\" | \"support\" | \"newspaper\" | \"bookmark-alt\" | \"view-grid-add\" | \"library\" | \"star\" | \"chart-square-bar\" | \"eye-off\" | \"chart-bar\" | \"fire\" | \"shopping-bag\" | \"thumb-up\" | \"thumb-down\" | \"hand\" | \"arrows-expand\" | \"view-grid\" | \"puzzle\" | \"folder-download\" | \"folder-add\" | \"folder-remove\" | \"identification\" | \"rss\" | \"scissors\" | \"music-note\" | \"film\" | \"database\" | \"server\" | \"login\" | \"wifi\" | \"backspace\" | \"paper-airplane\" | \"device-mobile\" | \"device-tablet\" | \"chevron-double-right\" | \"chevron-double-down\" | \"chevron-double-left\" | \"chevron-double-up\" | \"finger-print\" | \"cube\" | \"folder-open\" | \"save\" | \"save-as\" | \"document-text\" | \"calculator\" | \"beaker\" | \"gift\" | \"truck\" | \"currency-bangladeshi\" | \"video-camera\" | \"cloud\" | \"cube-transparent\" | \"cake\" | \"phone-missed-call\" | \"plus-sm\" | \"minus-sm\" | \"receipt-tax\" | \"status-online\" | \"status-offline\" | \"presentation-chart-line\" | \"presentation-chart-bar\" | \"fast-forward\" | \"rewind\" | \"chip\" | \"academic-cap\" | \"variable\" | \"document-search\" | \"search-circle\" | \"minus\" | \"arrow-sm-up\" | \"arrow-sm-right\" | \"arrow-sm-down\" | \"arrow-sm-left\" | \"base-circle\" | \"drag-vertical\" | \"menu-alt-5\" | \"text-size\" | \"pin\" | \"keyboard\" | \"move-vertical\" | \"move-horizontal\" | \"rotate-left\" | \"rotate-right\" | \"undo\" | \"redo\" | \"drag-horizontal\" | \"side-panel-close-left\" | \"side-panel-close-right\" | \"side-panel-open-left\" | \"side-panel-open-right\" | \"contacts\" | \"arrow-up-link-out\" | \"device-lock\" | \"auto-date\" | \"revert\" | \"guides\" | \"bulk-send\" | \"field-alignment-left\" | \"field-alignment-centre\" | \"field-alignment-right\" | \"accessibility\" | \"arrows-minimise\" | \"document-info\" | \"document-import-fields\" | \"document-merge-alt2\" | \"document-combine\" | \"field-alignment-top\" | \"field-alignment-middle\" | \"field-alignment-bottom\" | \"box-empty\" | \"box-ticked\" | \"box-crossed\" | \"sort-alphabetically-a-z\" | \"sort-alphabetically-z-a\" | \"linked-document\" | \"document-replace\" | \"field-scale\" | \"field-match-width\" | \"field-match-height\" | \"recipient-link\" | \"recipient-link-broken\" | \"witness-arrow\" | \"branch\" | \"variant\" | \"recipient-details-card\" | \"recipient-details\" | \"field-distribute-vertically\" | \"field-distribute-horizontally\" | \"field-duplicate\" | \"pre-filled-content\" | \"typing-input\" | \"table-split\" | \"add-column-left\" | \"add-column-right\" | \"recipient-links\" | \"list-order\" | \"field-scaling-off\" | \"fit-width\" | \"fit-height\" | \"table-quick-edit\" | \"table-columns\" | \"table-rows\" | \"apply-all-rows\" | \"pagescroll-preview\" | \"page-insert-vertical\" | \"page-insert-horizontal\" | \"circle-quarter\" | \"circle-half\" | \"circle-three-quarter\" | \"time-sort-ascending\" | \"time-sort-descending\" | \"date-sort-ascending\" | \"date-sort-descending\" | \"side-panel-closed\" | \"side-panel-open\" | \"date-sent-sort-ascending\" | \"date-sent-sort-descending\" | \"sort-alphabetically-a-z-alt\" | \"sort-alphabetically-z-a-alt\" | \"template-sent\" | \"template-not-sent\" | \"grid\" | \"linked\" | \"link-broken\" | \"user-assign\" | \"x-letter\" | \"field-selected\" | \"designation\" | \"text-alignment\" | \"field-placement\" | \"typeface\" | \"typesize\" | \"page-layout\" | \"field-special\" | \"link-value\" | \"field-order\" | \"send-arrow\" | \"sent-progress\" | \"circle-filled-quarter\" | \"circle-filled-half\" | \"circle-filled-three-quarter\" | \"document-viewed\" | \"collapse\" | \"logo\"",
+                    "resolved": "\"expand\" | \"filter\" | \"map\" | \"document\" | \"code\" | \"link\" | \"menu\" | \"table\" | \"stop\" | \"text\" | \"download\" | \"target\" | \"key\" | \"required\" | \"terminal\" | \"scale\" | \"x\" | \"y\" | \"collection\" | \"translate\" | \"signature\" | \"initials\" | \"search\" | \"template\" | \"dropdown\" | \"pause\" | \"play\" | \"mail\" | \"auto-sign\" | \"bell\" | \"home\" | \"briefcase\" | \"shield-check\" | \"shield-exclamation\" | \"cog\" | \"check\" | \"cash\" | \"location-marker\" | \"user\" | \"users\" | \"user-group\" | \"office-building\" | \"pencil-alt\" | \"pencil\" | \"eye\" | \"bookmark\" | \"color-swatch\" | \"inbox\" | \"inbox-in\" | \"archive\" | \"clock\" | \"photograph\" | \"tag\" | \"phone\" | \"phone-incoming\" | \"phone-outgoing\" | \"menu-alt-1\" | \"menu-alt-2\" | \"menu-alt-3\" | \"menu-alt-4\" | \"switch-vertical\" | \"switch-horizontal\" | \"plus\" | \"refresh\" | \"question-mark-circle\" | \"exclamation\" | \"cloud-upload\" | \"cloud-download\" | \"chart-pie\" | \"document-download\" | \"document-add\" | \"document-remove\" | \"calender\" | \"camera\" | \"globe-alt\" | \"duplicate\" | \"share\" | \"heart\" | \"globe\" | \"volume-up\" | \"volume-off\" | \"adjustments\" | \"mail-open\" | \"document-duplicate\" | \"credit-card\" | \"lock-closed\" | \"trending-up\" | \"trending-down\" | \"at-symbol\" | \"trash\" | \"information-circle\" | \"arrow-up\" | \"arrow-right\" | \"arrow-down\" | \"arrow-left\" | \"arrow-circle-right\" | \"arrow-circle-down\" | \"arrow-circle-left\" | \"arrow-circle-up\" | \"sort-ascending\" | \"sort-descending\" | \"x-circle\" | \"check-circle\" | \"exclamation-circle\" | \"plus-circle\" | \"minus-circle\" | \"user-circle\" | \"zoom-in\" | \"zoom-out\" | \"user-add\" | \"dots-horizontal\" | \"dots-vertical\" | \"upload\" | \"view-list\" | \"view-boards\" | \"paper-clip\" | \"emoji-happy\" | \"emoji-sad\" | \"printer\" | \"currency-dollar\" | \"currency-yen\" | \"currency-euro\" | \"currency-pound\" | \"currency-rupee\" | \"chevron-down\" | \"chevron-right\" | \"chevron-up\" | \"chevron-left\" | \"selector\" | \"chat\" | \"receipt-refund\" | \"ticket\" | \"lock-open\" | \"dots-circle-horizontal\" | \"hashtag\" | \"qrcode\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard\" | \"external-link\" | \"sun\" | \"moon\" | \"clipboard-copy\" | \"annotation\" | \"flag\" | \"book-open\" | \"lightning-bolt\" | \"folder\" | \"sparkles\" | \"user-remove\" | \"arrow-narrow-up\" | \"arrow-narrow-right\" | \"arrow-narrow-down\" | \"arrow-narrow-left\" | \"reply\" | \"light-bulb\" | \"chat-alt\" | \"document-report\" | \"logout\" | \"ban\" | \"shopping-cart\" | \"cursor-click\" | \"microphone\" | \"speakerphone\" | \"badge-check\" | \"desktop-computer\" | \"chat-alt-2\" | \"support\" | \"newspaper\" | \"bookmark-alt\" | \"view-grid-add\" | \"library\" | \"star\" | \"chart-square-bar\" | \"eye-off\" | \"chart-bar\" | \"fire\" | \"shopping-bag\" | \"thumb-up\" | \"thumb-down\" | \"hand\" | \"arrows-expand\" | \"view-grid\" | \"puzzle\" | \"folder-download\" | \"folder-add\" | \"folder-remove\" | \"identification\" | \"rss\" | \"scissors\" | \"music-note\" | \"film\" | \"database\" | \"server\" | \"login\" | \"wifi\" | \"backspace\" | \"paper-airplane\" | \"device-mobile\" | \"device-tablet\" | \"chevron-double-right\" | \"chevron-double-down\" | \"chevron-double-left\" | \"chevron-double-up\" | \"finger-print\" | \"cube\" | \"folder-open\" | \"save\" | \"save-as\" | \"document-text\" | \"calculator\" | \"beaker\" | \"gift\" | \"truck\" | \"currency-bangladeshi\" | \"video-camera\" | \"cloud\" | \"cube-transparent\" | \"cake\" | \"phone-missed-call\" | \"plus-sm\" | \"minus-sm\" | \"receipt-tax\" | \"status-online\" | \"status-offline\" | \"presentation-chart-line\" | \"presentation-chart-bar\" | \"fast-forward\" | \"rewind\" | \"chip\" | \"academic-cap\" | \"variable\" | \"document-search\" | \"search-circle\" | \"minus\" | \"arrow-sm-up\" | \"arrow-sm-right\" | \"arrow-sm-down\" | \"arrow-sm-left\" | \"base-circle\" | \"drag-vertical\" | \"menu-alt-5\" | \"text-size\" | \"pin\" | \"keyboard\" | \"move-vertical\" | \"move-horizontal\" | \"rotate-left\" | \"rotate-right\" | \"undo\" | \"redo\" | \"drag-horizontal\" | \"side-panel-close-left\" | \"side-panel-close-right\" | \"side-panel-open-left\" | \"side-panel-open-right\" | \"contacts\" | \"arrow-up-link-out\" | \"device-lock\" | \"auto-date\" | \"revert\" | \"guides\" | \"bulk-send\" | \"field-alignment-left\" | \"field-alignment-centre\" | \"field-alignment-right\" | \"accessibility\" | \"arrows-minimise\" | \"document-info\" | \"document-import-fields\" | \"document-merge-alt2\" | \"document-combine\" | \"field-alignment-top\" | \"field-alignment-middle\" | \"field-alignment-bottom\" | \"box-empty\" | \"box-ticked\" | \"box-crossed\" | \"sort-alphabetically-a-z\" | \"sort-alphabetically-z-a\" | \"linked-document\" | \"document-replace\" | \"field-scale\" | \"field-match-width\" | \"field-match-height\" | \"recipient-link\" | \"recipient-link-broken\" | \"witness-arrow\" | \"branch\" | \"variant\" | \"recipient-details-card\" | \"recipient-details\" | \"field-distribute-vertically\" | \"field-distribute-horizontally\" | \"field-duplicate\" | \"pre-filled-content\" | \"typing-input\" | \"table-split\" | \"add-column-left\" | \"add-column-right\" | \"recipient-links\" | \"list-order\" | \"field-scaling-off\" | \"fit-width\" | \"fit-height\" | \"table-quick-edit\" | \"table-columns\" | \"table-rows\" | \"apply-all-rows\" | \"pagescroll-preview\" | \"page-insert-vertical\" | \"page-insert-horizontal\" | \"circle-quarter\" | \"circle-half\" | \"circle-three-quarter\" | \"time-sort-ascending\" | \"time-sort-descending\" | \"date-sort-ascending\" | \"date-sort-descending\" | \"side-panel-closed\" | \"side-panel-open\" | \"date-sent-sort-ascending\" | \"date-sent-sort-descending\" | \"sort-alphabetically-a-z-alt\" | \"sort-alphabetically-z-a-alt\" | \"template-sent\" | \"template-not-sent\" | \"grid\" | \"linked\" | \"link-broken\" | \"user-assign\" | \"x-letter\" | \"field-selected\" | \"designation\" | \"text-alignment\" | \"field-placement\" | \"typeface\" | \"typesize\" | \"page-layout\" | \"field-special\" | \"link-value\" | \"field-order\" | \"send-arrow\" | \"sent-progress\" | \"circle-filled-quarter\" | \"circle-filled-half\" | \"circle-filled-three-quarter\" | \"document-viewed\" | \"collapse\" | \"logo\"",
                     "references": {
                         "Icon": {
                             "location": "import",
@@ -194,6 +198,26 @@ export class LsToolboxField {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The signer color of the element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'primary'"
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-toolbox-field.js","sourceRoot":"","sources":["../../../src/components/ls-toolbox-field/ls-toolbox-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,cAAc;IACzB;;OAEG;IACK,eAAe,CAAS;IACxB,WAAW,CAAS;IACpB,UAAU,GAAW,CAAC,CAAC;IAE/B;;OAEG;IACK,KAAK,CAAS;IAEtB;;OAEG;IACK,IAAI,CAAO;IAEnB;;OAEG;IACK,aAAa,CAAS;IAC9B;;OAEG;IACK,YAAY,CAAS;~~IAG7B~~,eAAe,CAAC,KAAK;QACnB,0DAA0D;QAC1D,KAAK,CAAC,YAAY,CAAC,OAAO,CACxB,kBAAkB,EAClB,IAAI,CAAC,SAAS,CAAC;YACb,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,YAAY,EAAE,IAAI,CAAC,YAAY;SAChC,CAAC,CACH,CAAC;QACF,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;IACzC,CAAC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC9B,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAC,MAAM;YACpB,4DAAK,KAAK,EAAC,oBAAoB;~~gBAC7B~~,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAClC;YACN,0DAAG,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAK;YAC/C,gEAAS,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAG,CACrD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Host, Listen, Prop, h } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\n\n@Component({\n tag: 'ls-toolbox-field',\n styleUrl: 'ls-toolbox-field.css',\n shadow: true,\n})\nexport class LsToolboxField {\n /*\n The field type of this toolbox item, e.g. 'signature'. Note these should always be lowercase.\n /\n @Prop() formElementType: string;\n @Prop() elementType: string;\n @Prop() validation: number = 0;\n\n /\n The text to display for this field type.\n /\n @Prop() label: string;\n\n /\n The icon to display for this field type.\n /\n @Prop() icon: Icon;\n\n /\n The starting height of this control type in pixels.\n /\n @Prop() defaultHeight: number;\n /\n The starting width of this control type in pixels.\n */\n @Prop() defaultWidth: number;\n\n @Listen('dragstart')\n handleDragStart(event) {\n // Add the target element's id to the data transfer object\n event.dataTransfer.setData(\n 'application/json',\n JSON.stringify({\n formElementType: this.formElementType,\n elementType: this.elementType,\n validation: this.validation,\n defaultHeight: this.defaultHeight,\n defaultWidth: this.defaultWidth,\n }),\n );\n event.dataTransfer.dropEffect = 'copy';\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'ArrowDown') {\n console.log('down arrow pressed');\n }\n }\n\n render() {\n return (\n <Host draggable=\"true\">\n <div class=\"toolbox-field-icon\">\n <ls-icon name={this.icon} size=\"20\" />\n </div>\n <p class=\"toolbox-field-label\">{this.label}</p>\n <ls-icon name=\"drag-vertical\" size=\"16\" color=\"#787a80\" />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-toolbox-field.js","sourceRoot":"","sources":["../../../src/components/ls-toolbox-field/ls-toolbox-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,cAAc;IACzB;;OAEG;IACK,eAAe,CAAS;IACxB,WAAW,CAAS;IACpB,UAAU,GAAW,CAAC,CAAC;IAE/B;;OAEG;IACK,KAAK,CAAS;IAEtB;;OAEG;IACK,IAAI,CAAO;IAEnB;;OAEG;IACK,aAAa,CAAS;IAC9B;;OAEG;IACK,YAAY,CAAS;IAE7B;;OAEG;IACK,KAAK,GAAW,SAAS,CAAC;IAGlC,eAAe,CAAC,KAAK;QACnB,0DAA0D;QAC1D,KAAK,CAAC,YAAY,CAAC,OAAO,CACxB,kBAAkB,EAClB,IAAI,CAAC,SAAS,CAAC;YACb,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,YAAY,EAAE,IAAI,CAAC,YAAY;SAChC,CAAC,CACH,CAAC;QACF,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;IACzC,CAAC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC9B,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAC,MAAM;YACpB,4DAAK,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAE,EAAE,sBAAsB,EAAE,SAAS,IAAI,CAAC,KAAK,MAAM,EAAE,gBAAgB,EAAE,SAAS,IAAI,CAAC,KAAK,MAAM,EAAE;gBACvI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAClC;YACN,0DAAG,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAK;YAC/C,gEAAS,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAG,CACrD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Listen, Prop, h } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\n\n@Component({\n tag: 'ls-toolbox-field',\n styleUrl: 'ls-toolbox-field.css',\n shadow: true,\n})\nexport class LsToolboxField {\n /*\n The field type of this toolbox item, e.g. 'signature'. Note these should always be lowercase.\n /\n @Prop() formElementType: string;\n @Prop() elementType: string;\n @Prop() validation: number = 0;\n\n /\n The text to display for this field type.\n /\n @Prop() label: string;\n\n /\n The icon to display for this field type.\n /\n @Prop() icon: Icon;\n\n /\n The starting height of this control type in pixels.\n /\n @Prop() defaultHeight: number;\n /\n The starting width of this control type in pixels.\n /\n @Prop() defaultWidth: number;\n\n /\n The signer color of the element\n */\n @Prop() color: string = 'primary';\n\n @Listen('dragstart')\n handleDragStart(event) {\n // Add the target element's id to the data transfer object\n event.dataTransfer.setData(\n 'application/json',\n JSON.stringify({\n formElementType: this.formElementType,\n elementType: this.elementType,\n validation: this.validation,\n defaultHeight: this.defaultHeight,\n defaultWidth: this.defaultWidth,\n }),\n );\n event.dataTransfer.dropEffect = 'copy';\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'ArrowDown') {\n console.log('down arrow pressed');\n }\n }\n\n render() {\n return (\n <Host draggable=\"true\">\n <div class=\"toolbox-field-icon\" style={{ '--signer-color-light': `var(--${this.color}-10)`, '--signer-color': `var(--${this.color}-60)` }}>\n <ls-icon name={this.icon} size=\"20\" />\n </div>\n <p class=\"toolbox-field-label\">{this.label}</p>\n <ls-icon name=\"drag-vertical\" size=\"16\" color=\"#787a80\" />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/types/Icon.js CHANGED Viewed

@@ -3,6 +3,7 @@ var IconEnum;
 (function (IconEnum) {
     // Hero Icons
     IconEnum["MailIcon"] = "mail";
+    IconEnum["AutoSign"] = "auto-sign";
     IconEnum["BellIcon"] = "bell";
     IconEnum["HomeIcon"] = "home";
     IconEnum["BriefcaseIcon"] = "briefcase";