npm - legalesign-document-viewer - Versions diffs - 0.2.19 → 0.3.1 - Mend

legalesign-document-viewer 0.2.19 → 0.3.1

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

package/dist/collection/components/ls-page-loader/ls-page-loader.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ls-page-loader.js","sourceRoot":"","sources":["../../../src/components/ls-page-loader/ls-page-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,YAAY;IACvB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,mBAAmB;gBAC7B,4DAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,EAAC,mBAAmB,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW;oBACzF,0DAAG,EAAE,EAAC,iBAAiB;wBACrB,0DAAG,EAAE,EAAC,MAAM;4BACV,6DACE,KAAK,EAAC,0BAA0B,EAChC,CAAC,EAAC,qdAAqd,EACvd,IAAI,EAAC,cAAc,GACnB;4BACF,6DACE,KAAK,EAAC,2BAA2B,EACjC,CAAC,EAAC,ilBAAilB,EACnlB,IAAI,EAAC,cAAc,GACnB;4BACF,6DACE,KAAK,EAAC,yBAAyB,EAC/B,CAAC,EAAC,udAAud,EACzd,IAAI,EAAC,cAAc,GACnB,CACA,CACF,CACA;gBAEN,gEACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqEJ,CACS,CACJ;YACN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'ls-page-loader',\n styleUrl: 'ls-page-loader.css',\n shadow: true,\n})\nexport class LsPageLoader {\n render() {\n return (\n <Host>\n <div class={'loading-animation'}>\n <svg class=\"block w-full h-full\" fill=\"none\" preserveAspectRatio=\"none\" viewBox=\"0 0 20 20\">\n <g id=\"Icon/solid/logo\">\n <g id=\"Icon\">\n <path\n class=\"classic-sequential-front\"\n d=\"M9.11077 0.940012C8.98702 0.868406 8.83446 0.868297 8.71061 0.939725C8.58675 1.01115 8.51044 1.14326 8.51044 1.28623V2.34625C8.51044 2.48927 8.5868 2.62141 8.71071 2.69282L14.6321 6.10546C14.818 6.21257 14.9325 6.41078 14.9325 6.6253V13.4621C14.9325 13.6044 15.0081 13.7359 15.131 13.8076L16.0285 14.3311C16.1522 14.4033 16.305 14.4038 16.4292 14.3325C16.5534 14.2611 16.63 14.1288 16.63 13.9856V5.52152C16.63 5.37876 16.5539 5.24681 16.4303 5.17531L9.11077 0.940012Z\"\n fill=\"currentColor\"\n />\n <path\n class=\"classic-sequential-middle\"\n d=\"M6.35621 2.52413C6.23246 2.45251 6.07989 2.45239 5.95603 2.52381C5.83217 2.59524 5.75585 2.72735 5.75585 2.87033V3.94156C5.75585 4.08504 5.83269 4.21752 5.95722 4.28876L8.20838 5.57659C8.39518 5.68345 8.51044 5.88218 8.51044 6.09739V9.75268C8.51044 9.89534 8.58642 10.0272 8.70984 10.0987L11.8717 11.9316C12.0569 12.0389 12.1708 12.2367 12.1708 12.4507V16.1015C12.1708 16.2434 12.2461 16.3747 12.3685 16.4465L13.2784 16.9801C13.4021 17.0526 13.5552 17.0534 13.6796 16.9821C13.804 16.9108 13.8808 16.7784 13.8808 16.635V7.10976C13.8808 6.96701 13.8047 6.83507 13.6811 6.76356L6.35621 2.52413Z\"\n fill=\"currentColor\"\n />\n <path\n class=\"classic-sequential-back\"\n d=\"M3.60419 4.12505C3.48039 4.05421 3.32824 4.05465 3.20486 4.1262C3.08147 4.19776 3.00552 4.3296 3.00552 4.47223V15.0385C3.00552 15.1812 3.08151 15.3131 3.20494 15.3846L10.5339 19.6323C10.6576 19.704 10.8102 19.7042 10.9341 19.6328C11.0581 19.5614 11.1344 19.4293 11.1344 19.2862V12.9374C11.1344 12.795 11.0587 12.6634 10.9357 12.5917L7.78047 10.7551C7.59587 10.6476 7.48232 10.4501 7.48232 10.2365V6.57621C7.48232 6.43276 7.40549 6.30029 7.28098 6.22904L3.60419 4.12505Z\"\n fill=\"currentColor\"\n />\n </g>\n </g>\n </svg>\n\n <style>\n {`\n @keyframes classic-sequential-back {\n 0% { opacity: 0; transform: scale(0.3); }\n 2% { opacity: 0.3; transform: scale(0.5); }\n 4% { opacity: 0.6; transform: scale(0.7); }\n 6% { opacity: 0.8; transform: scale(0.85); }\n 8% { opacity: 1; transform: scale(1); }\n 22% { opacity: 1; transform: scale(1); }\n 55% { opacity: 1; transform: scale(1); }\n 64% { opacity: 1; transform: scale(1); }\n 65% { opacity: 0.9; transform: scale(0.95); }\n 66.2% { opacity: 0.75; transform: scale(0.88); }\n 67.2% { opacity: 0.6; transform: scale(0.8); }\n 68% { opacity: 0.4; transform: scale(0.7); }\n 68.8% { opacity: 0.25; transform: scale(0.6); }\n 69.5% { opacity: 0.1; transform: scale(0.45); }\n 70% { opacity: 0.05; transform: scale(0.35); }\n 71% { opacity: 0; transform: scale(0.3); }\n 100% { opacity: 0; transform: scale(0.3); }\n }\n\n @keyframes classic-sequential-middle {\n 0%, 16% { opacity: 0; transform: scale(0.3); }\n 18% { opacity: 0.3; transform: scale(0.5); }\n 20% { opacity: 0.6; transform: scale(0.7); }\n 22% { opacity: 0.8; transform: scale(0.85); }\n 24% { opacity: 1; transform: scale(1); }\n 36%, 65%, 70% { opacity: 1; transform: scale(1); }\n 71% { opacity: 0.9; transform: scale(0.95); }\n 72.2% { opacity: 0.75; transform: scale(0.88); }\n 73.2% { opacity: 0.6; transform: scale(0.8); }\n 74% { opacity: 0.4; transform: scale(0.7); }\n 74.8% { opacity: 0.25; transform: scale(0.6); }\n 75.5% { opacity: 0.1; transform: scale(0.45); }\n 76% { opacity: 0.05; transform: scale(0.35); }\n 77%, 100% { opacity: 0; transform: scale(0.3); }\n }\n\n @keyframes classic-sequential-front {\n 0%, 32% { opacity: 0; transform: scale(0.3); }\n 34% { opacity: 0.3; transform: scale(0.5); }\n 36% { opacity: 0.6; transform: scale(0.7); }\n 38% { opacity: 0.8; transform: scale(0.85); }\n 40% { opacity: 1; transform: scale(1); }\n 60%, 76% { opacity: 1; transform: scale(1); }\n 77% { opacity: 0.9; transform: scale(0.95); }\n 78.2% { opacity: 0.75; transform: scale(0.88); }\n 79.2% { opacity: 0.6; transform: scale(0.8); }\n 80% { opacity: 0.4; transform: scale(0.7); }\n 80.8% { opacity: 0.25; transform: scale(0.6); }\n 81.5% { opacity: 0.1; transform: scale(0.45); }\n 82% { opacity: 0.05; transform: scale(0.35); }\n 83%, 100% { opacity: 0; transform: scale(0.3); }\n }\n\n .classic-sequential-back {\n animation: classic-sequential-back 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;\n transform-origin: center;\n }\n\n .classic-sequential-middle {\n animation: classic-sequential-middle 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;\n transform-origin: center;\n }\n\n .classic-sequential-front {\n animation: classic-sequential-front 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;\n transform-origin: center;\n }\n `}\n </style>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

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

@@ -44,36 +44,36 @@ export class LsParticipantCard {
     render() {
         const participantFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.signer.signerIndex) || [];
         const child = this.template.roles.find(r => r.signerParent === this.signer.id);
-        return (h(Host, { key: '050ce0bf860dfebc0f79d45295b6876a8c714c61' }, h("div", { key: '03a6151b022ee20de49836d55362ca7842d91c2b', class: 'participant-card' + (child ? ' top-card' : this.signer?.signerParent ? ' bottom-card' : ' full-card'), style: {
+        return (h(Host, { key: 'e948d8be468f8e81b0ea752b8c37aef7e83d5227' }, h("div", { key: '445aea342b4e4397bc4e6eb8c20e171bd853d59f', class: 'participant-card' + (child ? ' top-card' : this.signer?.signerParent ? ' bottom-card' : ' full-card'), style: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s10,
                 border: `1px solid ${defaultRolePalette[this.signer?.signerIndex % 100].s60}`,
                 marginTop: this.signer.roleType === 'WITNESS' ? '-0.813rem' : '0',
             }, onMouseEnter: e => e.currentTarget.querySelector('.button-set')?.classList.remove('hidden'), onMouseLeave: e => e.currentTarget.querySelector('.button-set')?.classList.add('hidden'), onDblClick: () => {
                 this.editable = true;
-            } }, h("div", { key: '4471c63e21cba70ca9c99e08518b58aa27d51ba7', class: 'participant-card-inner' }, h("div", { key: '2880b2ada85743bb5aebb533cf51e837b275329e', class: 'participant-card-top-items' }, h("div", { key: '3d4eb8164d136326349cece0b18f5c53b0f88a49', class: 'role-label', style: {
+            } }, h("div", { key: 'b9e87febf6217ffb40c228e67dccc59a4e0a79ea', class: 'participant-card-inner' }, h("div", { key: '930e5dd57d2dba41214d4ae86b4520aec572e92a', class: 'participant-card-top-items' }, h("div", { key: '5cea99ed2038b51441e34c3be9510f7163b27e56', class: 'role-label', style: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.signer?.signerIndex % 100].s90,
-            } }, h("ls-icon", { key: 'dad3b4055bdd45df6f8e5085f459961da09d010f', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), 'Participant ' + (this.signer?.signerIndex || '')), h("div", { key: '07fe8b88998c7121217db858c231dcc1cc1707fe', class: 'button-set hidden' }, this.index > 0 && this.signer.roleType !== 'WITNESS' && (h("div", { key: '830f21fbae631a0e8e42af15a91d67c9547c1c01', class: "innerButton", onClick: () => {
+            } }, h("ls-icon", { key: 'b8bb19361e0cef64eae9bebf01a0fe73ade6be99', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), 'Participant ' + (this.signer?.signerIndex || '')), h("div", { key: '14bb3077badecdd639ca9221db8ff8135072f008', class: 'button-set hidden' }, this.index > 0 && this.signer.roleType !== 'WITNESS' && (h("div", { key: 'eaf07f2aca39b4666ee36ed50023b198cc6695a9', class: "innerButton", onClick: () => {
                 this.swapHandler(this.signer, this.template.roles[this.index - 1]);
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            } }, h("ls-icon", { key: '8b09d4c2d21c0da1d1e2b8d259808f17db459cbb', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && this.signer.roleType !== 'WITNESS' && (h("div", { key: '615157461249449a36d2de250682f61476a9f201', class: "innerButton", onClick: () => {
+            } }, h("ls-icon", { key: '48f6736e9f88b03b71dc0836141f2dce10c592da', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && this.signer.roleType !== 'WITNESS' && (h("div", { key: 'f1df1663aba7445c3998a10388054c38202a45d7', class: "innerButton", onClick: () => {
                 this.swapHandler(this.signer, this.template.roles[this.index + 1]);
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            } }, h("ls-icon", { key: 'f5272e02633d855779e651e7210f93d345832b88', name: "arrow-down", size: "18" }))), h("div", { key: '83fcb361f4610ca0f08db9d6be84ad3cf3abd5d8', class: "innerButton", onClick: () => {
+            } }, h("ls-icon", { key: '21f3302957048e5c218f04e6da680a5be3ac55ba', name: "arrow-down", size: "18" }))), h("div", { key: '4b59e37058412bbd8d04deb4418fb3f764dbf360', class: "innerButton", onClick: () => {
                 this.editable = !this.editable;
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            } }, h("ls-icon", { key: '9aea4e29845683be3ab72ad4aba8897e2e8f4a2f', name: this.editable ? 'check' : 'pencil-alt', size: "18" })), h("div", { key: '451e0cc218f1f505e64a9783902d8627c4c1a005', class: "innerButton", onClick: () => {
+            } }, h("ls-icon", { key: 'ab068a9b7832b9387a006230231970dd425ae739', name: this.editable ? 'check' : 'pencil-alt', size: "18" })), h("div", { key: 'acede95c9e80168f22b08e24602ade0b1fe1fdb7', class: "innerButton", onClick: () => {
                 this.deleteHandler(this.signer);
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            } }, h("ls-icon", { key: '5678a46062f0ea120d60e070a86f5b1a75d06662', name: "trash", size: "18" })))), this.editable ? (h("div", { class: 'participant-card-inner' }, this.signer?.roleType !== 'WITNESS' ? (h("ls-input-wrapper", { select: true, leadingIcon: this.signer?.roleType === 'APPROVER' ? 'check-circle' : 'signature' }, h("select", { name: "roleType", id: "role-type", class: 'has-leading-icon', onChange: e => this.alter({ roleType: e.target.value }), disabled: child ? true : false }, h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer")))) : (h("ls-input-wrapper", { leadingIcon: "eye" }, h("input", { name: "roleType", id: "role-type", class: 'has-leading-icon', disabled: true, value: "Witness" }))), h("input", { type: "text", id: "participant-description", name: "participantDescription", placeholder: "Description, eg. Tenant 1, Agent", defaultValue: this.signer.name, onInput: e => this.alter({ name: e.target.value }), onKeyUp: e => {
+            } }, h("ls-icon", { key: 'd72ebe8b0544eee194842f91f5d449d20ed1da56', name: "trash", size: "18" })))), this.editable ? (h("div", { class: 'participant-card-inner' }, this.signer?.roleType !== 'WITNESS' ? (h("ls-input-wrapper", { select: true, leadingIcon: this.signer?.roleType === 'APPROVER' ? 'check-circle' : 'signature' }, h("select", { name: "roleType", id: "role-type", class: 'has-leading-icon', onChange: e => this.alter({ roleType: e.target.value }), disabled: child ? true : false }, h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer")))) : (h("ls-input-wrapper", { leadingIcon: "eye" }, h("input", { name: "roleType", id: "role-type", class: 'has-leading-icon', disabled: true, value: "Witness" }))), h("input", { type: "text", id: "participant-description", name: "participantDescription", placeholder: "Description, eg. Tenant 1, Agent", defaultValue: this.signer.name, onInput: e => this.alter({ name: e.target.value }), onKeyUp: e => {
                 if (e.key === 'Enter' || e.keyCode === 13)
                     this.editable = false;
             } }), this.signer?.roleType === 'SIGNER' && !child ? (h("button", { class: 'tertiary', onClick: () => this.addParticipant.emit({ type: 'WITNESS', parent: this.signer.id }) }, h("ls-icon", { name: "plus", style: { marginRight: '0.25rem' } }), "Add Witness")) : this.signer?.roleType === 'SIGNER' && child ? (h("button", { class: 'destructive', onClick: () => {
@@ -88,7 +88,7 @@ export class LsParticipantCard {
             } }, this.signer.roleType.toLowerCase()), this.signer?.roleType !== 'APPROVER' && (h("div", { class: 'role-label fields', style: {
                 background: participantFields.length === 0 ? defaultRolePalette[this.signer?.signerIndex % 100].s60 : defaultRolePalette[this.signer?.signerIndex % 100].s20,
                 color: participantFields.length === 0 ? 'white' : defaultRolePalette[this.signer?.signerIndex % 100].s90,
-            } }, participantFields.length === 0 && h("ls-icon", { name: "exclamation-circle", size: "16", style: { marginRight: '0.125rem' } }), participantFields.length === 0 ? 'Signature Required' : `${participantFields.length} ${participantFields.length === 1 ? 'Field' : 'Fields'}`)))))), h("slot", { key: 'ba159f7a2d34de4926bb44ce1aca658cd470833d' })));
+            } }, participantFields.length === 0 && h("ls-icon", { name: "exclamation-circle", size: "16", style: { marginRight: '0.125rem' } }), participantFields.length === 0 ? 'Signature Required' : `${participantFields.length} ${participantFields.length === 1 ? 'Field' : 'Fields'}`)))))), h("slot", { key: '8059f6c9ce00424f838f1c073ec9b3bf62d1f25d' })));
     }
     static get is() { return "ls-participant-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,12 +50,12 @@ export class LsParticipantManager {
         observer.observe(this.element.shadowRoot, { childList: true, subtree: true });
     }
     render() {
-        return (h(Host, { key: '969b4cc1f4e86d87035c5c84365dea9607c85fff' }, h("div", { key: 'a50e3c6131d31f523a458c0a1729181eea1ce007', class: "ls-editor-infobox" }, h("h2", { key: '5e4b848099eb0d3a79b4fa172111288d7b07e278', class: "toolbox-section-title" }, "Participants"), h("p", { key: 'fa9267c09a4c443832f76bb88f8c74d69c9838e3', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '97aceae65cb31344ad3a724daf7f64c469fd6741', class: "participant-list" }, this.template &&
+        return (h(Host, { key: 'edef40a6b345a99b45e4088fd44e463fa769ae8d' }, h("div", { key: '211294eba6699885106d694deb2337eb51b785f8', class: "ls-editor-infobox" }, h("h2", { key: '68a39092393693765bcbc497a457014cbd307580', class: "toolbox-section-title" }, "Participants"), h("p", { key: '29453b8e8fce7eb39f4f34a0d876fe8dd72f6af4', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: 'ad9925bc37488c8f4a1cef7d3fdb59d21e92e926', class: "participant-list" }, this.template &&
             this.template?.roles.map((r, index) => {
                 return (h("ls-participant-card", { signer: r, index: index, template: this.template, onOpened: event => {
                         this.handleOpened.bind(this)(event);
                     }, onAddParticipant: event => this.handleOpenNewWitness(event) }));
-            })), h("div", { key: '1067a4fbd87d7bcbce1a99d4aeb9a04bacfeea36', class: 'add-participant-button' }, h("button", { key: 'f0529ee33de114f8d7b5a222d27440686cf9eb0b', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, h("ls-icon", { key: 'fab11a0945db10cfde4c537d26e84cfa410cd8a9', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: '384ec2ea99caff3321d3d5d70105e6a07c2466fe' }, "Add Participant"))), h("slot", { key: 'd0689801afd208555d353f1472e64968c5934647' })));
+            })), h("div", { key: '3a474009f7ba0168da4af3e5807d228a36fe7fa3', class: 'add-participant-button' }, h("button", { key: '405528eb5bf2c30acca22254a8a2cef81f3cb673', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, h("ls-icon", { key: '58aa3bf54a5b49c1fffeca956fa42e8fe6712364', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: '71bcf3329ee400624f4d6dc2577e04c4a33860b0' }, "Add Participant"))), h("slot", { key: 'b2894e4a772329741ff796bf0a39e1333cfa567b' })));
     }
     static get is() { return "ls-participant-manager"; }
     static get encapsulation() { return "shadow"; }

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

@@ -47,27 +47,27 @@ export class LsParticipantSelect {
         this.addParticipant.emit({ type: 'SIGNER' });
     }
     render() {
-        return (h(Host, { key: 'f053e6c27cba0319ca92871a534070d753961aac' }, h("div", { key: 'b037b74c477b5f7ad338bc707a1f08bdfb131535', class: "dropdown" }, h("div", { key: 'c97336eab86a36d45b9ddef78a6df0e8babada63', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: 'fa69fa36ad9b6e6ae4adfca7017a4457068365d1', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '860b63abd43343f27b9fd8d597a152bf7e34dc93', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), h("path", { key: '7eeff168b2553f4e79be6d4a8d1bad31282ec5ac', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), h("path", { key: '10216191c461f85e93f97c40d0a9f818cafe6f19', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), h("path", { key: 'c2677a36fe8ffc04141dd8e565916d425b23120f', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { key: '977b8593c1eba8a9cafc93f3c548596df4f14383', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '7a9decad70156db7451571a813d98ac29bb55969', class: 'selected-role-label', style: {
+        return (h(Host, { key: '09e119f89d40ae2f0c697ea6721a76a5d6e1e131' }, h("div", { key: 'b9b09c3702d6571572040780cff601ac6d4746c6', class: "dropdown" }, h("div", { key: 'e73286da66a604ebcd2aa3923730b0304726abd9', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: 'c7d43f1e1153ee47c7512863497a93ddd9cbe013', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e7020a015d4ba9df000578c37f296f7638c7d700', 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: '077b0ea3f1672163c0037f7ae6203ce8431ba71f', 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: '5595e1cd44919f359aada27b6d3d1b0ce4653610', 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: '98b25a1bb30fc8e1c7e70b72936b7a3cbca7af33', 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: 'eae872f3ba394aadf53092194169c75997e9d53b', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '15f4384297e0e1789a15eb61db66898782a86dbc', class: 'selected-role-label', style: {
                 background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,
-            } }, h("ls-icon", { key: '1bceddc0d5bdcdc9a4550e6871c6f23b130e13a4', size: "18", name: this.selectedRole?.roleType === 'SENDER'
+            } }, h("ls-icon", { key: '2cd944cb7f0ca493970032faefd7f3750d580837', 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.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: 'deac6e0ce1405949e279df80396664520ea0a446', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '39bb00d902adf511c3122dd8b4a158cfea84dc02', name: "chevron-down" }))), this.isOpen && (h("div", { key: '4e1c77622d07e09ad73e8607f2fb7012ab170599', class: "dropdown-list" }, h("div", { key: '6333a4f6d8a87b41054b0e0bacefe836093cd64f', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
+            (this.selectedRole.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: 'f339ed045bb0c6af9d2bff3304f7cf4b50721788', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '960f7998fa7d3144c3e33381e843a0cd03ea7ffe', name: "chevron-down" }))), this.isOpen && (h("div", { key: 'b6229b4379b54c37af8089f43f647b724e426e23', class: "dropdown-list" }, h("div", { key: 'd8804bf89d2ffc11fc5ab00acf7eb1cef22c2171', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
                 '--background-selected': defaultRolePalette[0].s10,
                 '--check-icon-selected': defaultRolePalette[0].s50,
-            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, h("div", { key: '0172efaa68fd05cc5c8833833f4f44af92d505bc', class: 'role-icon', style: {
+            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, h("div", { key: '367089f2590b8227a069bcb3d76cf72d22fe2344', class: 'role-icon', style: {
                 background: defaultRolePalette[0].s50,
                 color: defaultRolePalette[0].s80,
-            } }, h("ls-icon", { key: '5dc564e507733c2732ab79c3a8437eb275c6aefe', name: "user" })), h("div", { key: '9d1a26aa3fceb79612afe66929b9b04fa6c46b66', class: 'role-text' }, h("p", { key: 'e89116bb21fb1fa9c00acac2173688629fe2d637', class: 'role-name', style: {
+            } }, h("ls-icon", { key: 'c331ed982fc98742e132d77203edf13347f67ea2', name: "user" })), h("div", { key: '8f9c45b3ce947d3384a45070b776ee455fb21d0d', class: 'role-text' }, h("p", { key: '6f3a1a221e88bbed1d6d529879f271cb6141637c', class: 'role-name', style: {
                 '--role-name-selected': defaultRolePalette[0].s80,
-            } }, 'Sender'), h("p", { key: '00bb513c28a580faab973e74779c77b6e123aa6d', class: 'role-type', style: {
+            } }, 'Sender'), h("p", { key: '11d54a7e2c98fdc647ed46ffd2ea10635b7f65b9', class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[0].s80,
-            } }, "You")), h("ls-icon", { key: '9c375a9cffbc93e6566f496a379f910d7d82ad2e', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
+            } }, "You")), h("ls-icon", { key: 'fa0d74d068b082ccd9baa728c144d27da31aa54e', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
                 '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,
                 '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,
             }, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
@@ -79,10 +79,10 @@ export class LsParticipantSelect {
                 '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,
             } }, r.name || (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)), h("p", { class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,
-            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), h("button", { key: '876d0510b3522b4de6c81a04950e0cbe6d56a7ef', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
+            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), h("button", { key: '9ce97692f5946edce1bf20876aba6a257aa75aa3', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
                 '--background-selected': defaultRolePalette[1].s10,
                 '--check-icon-selected': defaultRolePalette[1].s50,
-            } }, h("div", { key: '18e18d420039303a144a9a40ae73307421e6ddf0', class: 'add-participant-icon' }, h("ls-icon", { key: 'f6fa96cc87ee795b827067035b2887dd5af67b71', name: "user-add" })), h("div", { key: 'd17693f290f0aba4d16e3d7c92e9d899e18bfd2b', class: 'role-text' }, h("p", { key: '6cbd301f3414c84d1dc14e4afa764c920d180b66', class: 'role-name' }, "Add Participant"), h("p", { key: '93ff716ae9b2bbdb976f3bb674963c686e8b236d', class: 'role-type' }, "Add a new Signer")), h("ls-icon", { key: 'b6c771b3e0773de88ab729a2e8d09c9051b09d5f', class: 'plus-icon', name: "plus" }))))), h("slot", { key: 'cd90a24546b04b907c6e82980827fb133ea9b37a' })));
+            } }, h("div", { key: '6986fb8bd1d4978aec4369a549eb4eb6e2300c5c', class: 'add-participant-icon' }, h("ls-icon", { key: 'f0fdeccc4489d510ddcfcb39c54e674287d9396b', name: "user-add" })), h("div", { key: 'c3a16b3fccbd5bd4e3d1e30eaf392023ed1382b0', class: 'role-text' }, h("p", { key: 'f663b8c5885f095fde20e204301d0c692f84bb12', class: 'role-name' }, "Add Participant"), h("p", { key: 'db7fadcf03020994b10f5b709f74e9b780e73b60', class: 'role-type' }, "Add a new Signer")), h("ls-icon", { key: 'd9baf06a920f373d651e09dcc4468b50648d742d', class: 'plus-icon', name: "plus" }))))), h("slot", { key: '185c090b40670cd0ce1b9ddda3b82d20e08aae92' })));
     }
     static get is() { return "ls-participant-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-props-section/ls-props-section.js CHANGED Viewed

@@ -4,7 +4,7 @@ export class LsPropsSection {
     sectionDescription;
     row = false;
     render() {
-        return (h(Host, { key: 'bef8c364809ca1fe0f137d4fd66ac66de3275d1d' }, h("div", { key: 'd0c8b400401a26e228aa7696ab4a78f5d1febaae', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, h("div", { key: '3683032dad4fd51bf1150f6c3fc82b274757dc44', class: 'ls-field-properties-section-text' }, h("p", { key: 'e3af41b678439b5e6a165d81c18668ab8aae7579', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && h("p", { key: '4e8ddddc08e4155cdbccd2225b3135e2f583344a', class: 'ls-field-properties-section-description' }, this.sectionDescription)), h("slot", { key: '430f6ee17ee17e5049caffbd5646693623bb8341' }))));
+        return (h(Host, { key: '9043f4212d573cb7cae6024f0288d3589cab16ca' }, h("div", { key: '73ad46475e8a1b84f775cf50ef38d96856c845ad', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, h("div", { key: 'a259ac2223024e3b68e24956ac050afd1ed8ad6a', class: 'ls-field-properties-section-text' }, h("p", { key: 'c649eeccdd07ed13d7761a7390737a7f1b27f476', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && h("p", { key: '668ec0fbf1c9b036bbaf71469862872da1858c5e', class: 'ls-field-properties-section-description' }, this.sectionDescription)), h("slot", { key: '7537449cd511e7fa223c06f96b983ce69a9f6cf8' }))));
     }
     static get is() { return "ls-props-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,11 +34,11 @@ export class LsStatusbar {
         this.zoom = this.editor.zoom;
     }
     render() {
-        return (h(Host, { key: '55097643549b7cbe604e9bee3849b9766f080126' }, h("div", { key: '9b133335d222606b1097e8da02314bf0b0b6a1ae', class: "status-bar-section" }, h("button", { key: '0827867b7959437e246b906d43809a44654f2f86', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: '00c7626a1734ca3e033449465e67dcc31eaa0529', name: "zoom-out" })), h("div", { key: '3855d5a719e2da9d7cdb7ced6d8738bcbf6eb820' }, h("input", { key: '8314f667a74775625d0b64a7d6002ca8f06e64b1', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '911190a0e364786561c0858331bdb453fb6ec75e', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: '08d488109b61fd13977645a66abbd96332989f5b', name: "zoom-in" }))), h("div", { key: '6f014eb039ae5e72df5371337fb0133d4042b9fc', class: "status-bar-section" }, h("button", { key: 'bf93ddda1fb8206c31df64705d72c49dc6807274', onClick: () => this.fitWidth() }, h("ls-icon", { key: 'bcc5998901ba5875de5dc2f33fd8001f0c64cdd9', name: "fit-width" })), h("button", { key: '66d72546495cdcee8afa2d1ba85d7dc9100e2184', onClick: () => this.fitHeight() }, h("ls-icon", { key: '872ac2174c60d828c58f0d45f0aa15bf0a5a74ce', name: "fit-height" }))), h("div", { key: '78222891e89515a221be4d3e517bac94b7c213a8', class: "status-bar-section" }, h("button", { key: 'dca255d5540c8752fbd424909bb5595484bc84ca', onClick: () => {
+        return (h(Host, { key: '5175633d8514ec641b81d161dfbafeaeb90e3dbd' }, h("div", { key: '6ee5ab35d555e4685d3434538238b53169db8d34', class: 'status-bar-section' }, h("button", { key: '678f92a156d291e903a897af50f219b5e161ef41', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: 'b8e122bb9aaec0688312b0e6c1c6daf35d46d59e', name: "zoom-out" })), h("div", { key: 'bef53222c3b56c3bb532eeda88eae41400bd1599' }, h("input", { key: '4edd5b23b7bddca49a33399bf8820e2ec89b6243', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: 'f1762721abfc2888d83575e755a39091042a43b1', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: 'c71fcecc620fd255f872f5a7b0252414ac7eaac1', name: "zoom-in" }))), h("div", { key: '188426f1b5a7201fcdaf7ee83727b5e8f4435713', class: 'status-bar-section' }, h("button", { key: '9dd5cd5327d5ab8031233a2b33ec957e0184850c', onClick: () => this.fitWidth() }, h("ls-icon", { key: 'b8bd58c1ac2b2a7d760516a01ea2677997ba1b22', name: "fit-width" })), h("button", { key: '69c3a81d15b2f56922d730c164097616ca2cf7d3', onClick: () => this.fitHeight() }, h("ls-icon", { key: 'ae3ce4a1ae0c5d90080733a4b24bad4e1b1cdd14', name: "fit-height" }))), this.editor?._template?.pageCount > 1 && (h("div", { key: '0dfb2b2be045929e185d67670aa2a48c9007757b', class: 'status-bar-section' }, h("button", { key: 'db482d9a60eee5772e49dbe83273246c1a2acadb', onClick: () => {
                 this.editor.pagePrev();
-            } }, h("ls-icon", { key: '6a5a348512d4746727bbb9a1bb3b25f3c7ac84e9', name: "chevron-left" })), h("p", { key: '8c78f2ae00d855c0cdb19ffbfbe1bcdabf2cf65d' }, this.editor?.pageNum, " / ", this.editor?._template?.pageCount), h("button", { key: 'b91bb6fec66a25071d847b85dd5723960e433094', onClick: () => {
+            } }, h("ls-icon", { key: '7759f954bddc55e06dd870560295abd7d82c62bc', name: "chevron-left" })), h("p", { key: 'cc5b3bd1faa52b15865754da73ee107c4dc2a613' }, this.editor?.pageNum, " / ", this.editor?._template?.pageCount), h("button", { key: 'd45ab960fb57260719584388a2dffedf883f62b2', onClick: () => {
                 this.editor.pageNext();
-            } }, h("ls-icon", { key: 'd73352bf128f6d2911b98bd9340a8963018e7fd6', name: "chevron-right" }))), h("slot", { key: '1829b9f4ce5f420972c64b9f63a59c1aa48c70b2' })));
+            } }, h("ls-icon", { key: 'f23a3ee83510ee41165b720459915a97af0c6061', name: "chevron-right" })))), h("slot", { key: '75f3d128912a26f76fa0c1b043668259a3d028f4' })));
     }
     static get is() { return "ls-statusbar"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-statusbar.js","sourceRoot":"","sources":["../../../src/components/ls-statusbar/ls-statusbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAO7D,MAAM,OAAO,WAAW;IACX,SAAS,CAAc;IAClC;;;OAGG;IACsB,IAAI,CAAS;IAEtC;;;OAGG;IACK,MAAM,CAAmB;IAEjC,OAAO,CAAC,KAAa;QACnB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED,eAAe;QACb,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,WAAW,CAAqB,CAAC;QAE5F,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;IAC/D,CAAC;IAED,QAAQ;QACN,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;QACnF,MAAM,KAAK,GAAW,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAC9E,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IAC9C,CAAC;IAED,SAAS;QACP,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;QACnF,MAAM,KAAK,GAAW,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;QAChF,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IAC9C,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;IAC/B,CAAC;~~IAID~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YAGH,4DAAK,KAAK,EAAE,oBAAoB;~~gBAEhC~~,+DAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,GAAG,CAAC;oBACzD,gEAAS,IAAI,EAAC,UAAU,GAAG,CACpB;gBACT;oBACE,8DAAO,IAAI,EAAC,OAAO,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,GAAI,CACjI;gBACN,+DAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,GAAG,CAAC;oBACzD,gEAAS,IAAI,EAAC,SAAS,GAAG,CACnB,~~CACH~~;~~YACL~~,4DAAK,KAAK,EAAE,oBAAoB;~~gBACjC~~,+DAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;oBACpC,gEAAS,IAAI,EAAC,WAAW,GAAG,CACrB;gBACT,+DAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;oBACrC,gEAAS,IAAI,EAAC,YAAY,GAAG,CACtB,~~CACH~~;YACL,4DAAK,KAAK,EAAE,oBAAoB;~~gBACjC~~,+DACE,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;oBACzB,CAAC;oBAED,gEAAS,IAAI,EAAC,cAAc,GAAG,CACxB;gBACT;~~oBAAI~~,IAAI,CAAC,MAAM,EAAE,OAAO;;oBAAK,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,~~CAAK~~;~~gBACnE~~,+DACE,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;oBACzB,CAAC;oBAED,gEAAS,IAAI,EAAC,eAAe,GAAG,CACzB,~~CACH~~;~~YAEN~~,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { debounce } from '../ls-document-viewer/editorUtils';\n\n@Component({\n tag: 'ls-statusbar',\n styleUrl: 'ls-statusbar.css',\n shadow: true,\n})\nexport class LsStatusbar {\n @Element() component: HTMLElement;\n /*\n The zoom or scale level 100 === 100%.\n * {number}\n /\n @Prop({ mutable: true }) zoom: number;\n\n /\n The parent editor control.\n * {LsDocumentViewer}\n /\n @Prop() editor: LsDocumentViewer;\n\n setZoom(value: number) {\n this.editor.setZoom(value);\n this.zoom = value;\n }\n\n handleZoomInput() {\n const zoomInput = this.component.shadowRoot.getElementById('zoomRange') as HTMLInputElement;\n \n debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);\n }\n\n fitWidth() {\n const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');\n const scale: number = frame.clientWidth / this.editor.pageDimensions[0].width;\n this.setZoom(Math.round(scale 1e2) / 1e2);\n }\n\n fitHeight() {\n const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');\n const scale: number = frame.clientHeight / this.editor.pageDimensions[0].height;\n this.setZoom(Math.round(scale * 1e2) / 1e2);\n }\n\n componentDidLoad() {\n this.zoom = this.editor.zoom;\n }\n\n ~~\n\n~~ render() {\n return (\n <Host>\n {/* <button onClick={() => this.editor.displayTable = true}><ls-icon name=\"table\" /></button>\n <button onClick={() => this.editor.displayTable = false}><ls-icon name=\"template\" /></button> /}\n <div class={\"status-bar-section\"}>\n\n <button onClick={() => this.setZoom(this.editor.zoom 0.8)}>\n <ls-icon name=\"zoom-out\" />\n </button>\n <div>\n <input type=\"range\" min=\"1\" max=\"300\" value={this.zoom * 100} class=\"slider\" id=\"zoomRange\" onInput={() => this.handleZoomInput()} />\n </div>\n <button onClick={() => this.setZoom(this.editor.zoom / 0.8)}>\n <ls-icon name=\"zoom-in\" />\n </button>\n </div>\n <div class={\"status-bar-section\"}>\n <button onClick={() => this.fitWidth()}>\n <ls-icon name=\"fit-width\" />\n </button>\n <button onClick={() => this.fitHeight()}>\n <ls-icon name=\"fit-height\" />\n </button>\n </div>\n <div class={\"status-bar-section\"}>\n <button\n onClick={() => {\n this.editor.pagePrev();\n }}\n >\n <ls-icon name=\"chevron-left\" />\n </button>\n <p>{this.editor?.pageNum} / {this.editor?._template?.pageCount}</p>\n <button\n onClick={() => {\n this.editor.pageNext();\n }}\n >\n <ls-icon name=\"chevron-right\" />\n </button>\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-statusbar.js","sourceRoot":"","sources":["../../../src/components/ls-statusbar/ls-statusbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { debounce } from '../ls-document-viewer/editorUtils';\n\n@Component({\n tag: 'ls-statusbar',\n styleUrl: 'ls-statusbar.css',\n shadow: true,\n})\nexport class LsStatusbar {\n @Element() component: HTMLElement;\n /*\n The zoom or scale level 100 === 100%.\n * {number}\n /\n @Prop({ mutable: true }) zoom: number;\n\n /\n The parent editor control.\n * {LsDocumentViewer}\n /\n @Prop() editor: LsDocumentViewer;\n\n setZoom(value: number) {\n this.editor.setZoom(value);\n this.zoom = value;\n }\n\n handleZoomInput() {\n const zoomInput = this.component.shadowRoot.getElementById('zoomRange') as HTMLInputElement;\n\n debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);\n }\n\n fitWidth() {\n const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');\n const scale: number = frame.clientWidth / this.editor.pageDimensions[0].width;\n this.setZoom(Math.round(scale 1e2) / 1e2);\n }\n\n fitHeight() {\n const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');\n const scale: number = frame.clientHeight / this.editor.pageDimensions[0].height;\n this.setZoom(Math.round(scale * 1e2) / 1e2);\n }\n\n componentDidLoad() {\n this.zoom = this.editor.zoom;\n }\n\n render() {\n return (\n <Host>\n {/* <button onClick={() => this.editor.displayTable = true}><ls-icon name=\"table\" /></button>\n <button onClick={() => this.editor.displayTable = false}><ls-icon name=\"template\" /></button> /}\n <div class={'status-bar-section'}>\n <button onClick={() => this.setZoom(this.editor.zoom 0.8)}>\n <ls-icon name=\"zoom-out\" />\n </button>\n <div>\n <input type=\"range\" min=\"1\" max=\"300\" value={this.zoom * 100} class=\"slider\" id=\"zoomRange\" onInput={() => this.handleZoomInput()} />\n </div>\n <button onClick={() => this.setZoom(this.editor.zoom / 0.8)}>\n <ls-icon name=\"zoom-in\" />\n </button>\n </div>\n <div class={'status-bar-section'}>\n <button onClick={() => this.fitWidth()}>\n <ls-icon name=\"fit-width\" />\n </button>\n <button onClick={() => this.fitHeight()}>\n <ls-icon name=\"fit-height\" />\n </button>\n </div>\n {this.editor?._template?.pageCount > 1 && (\n <div class={'status-bar-section'}>\n <button\n onClick={() => {\n this.editor.pagePrev();\n }}\n >\n <ls-icon name=\"chevron-left\" />\n </button>\n <p>\n {this.editor?.pageNum} / {this.editor?._template?.pageCount}\n </p>\n <button\n onClick={() => {\n this.editor.pageNext();\n }}\n >\n <ls-icon name=\"chevron-right\" />\n </button>\n </div>\n )}\n\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

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

@@ -25,30 +25,53 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--gray-20, #EDEFF2);
-  -webkit-transition: .4s;
-  transition: .4s;
+  background-color: var(--gray-20, #edeff2);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+.indeterminate {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--primary-60, #4456f6);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 .slider:before {
   position: absolute;
-  content: "";
+  content: '';
   height: 1.25rem;
   width: 1.25rem;
   left: 0.125rem;
   bottom: 0.125rem;
   background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+.indeterminate::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.75rem;
+  height: 0.125rem;
+  background-color: white;
 }
 input:checked + .slider {
-  background-color: var(--primary-60, #4456F6);
+  background-color: var(--primary-60, #4456f6);
 }
 input:focus + .slider {
-  box-shadow: 0 0 1px var(--primary-60, #4456F6);
-  outline: 4px solid var(--primary-20, #E3E6FF);
+  box-shadow: 0 0 1px var(--primary-60, #4456f6);
+  outline: 4px solid var(--primary-20, #e3e6ff);
 }
 input:checked + .slider:before {
@@ -58,12 +81,10 @@ input:checked + .slider:before {
 }
 /* Rounded sliders */
-.slider.round {
+.slider.round, .indeterminate.round {
   border-radius: 34px;
 }
 .slider.round:before {
   border-radius: 50%;
 }

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

@@ -1,14 +1,15 @@
 import { Host, h } from "@stencil/core";
 export class LsToggle {
     checked;
+    indeterminate;
     valueChange;
     changeHandler(value) {
         this.valueChange.emit(value);
     }
     render() {
-        return (h(Host, { key: 'fff128eeef303b0a5482220dc6d9c3d0ac0ae400' }, h("label", { key: 'd5297141d7c7279f07d72d939e5924b8841bce82', class: "switch" }, h("input", { key: '0ee4b85550bac696e7e4273fbe31165445897a06', type: "checkbox", checked: this.checked, onChange: (e) => {
+        return (h(Host, { key: '9a4d61443f92bf65fddf05407f91a01285ccf19f' }, h("label", { key: 'c2bbd322dfdb1e82a99139a412ea1bbed311c92b', class: "switch" }, h("input", { key: 'ffbbda8820f8d42dc316ec873e1d2f1063bceedc', type: "checkbox", checked: this.checked, onChange: (e) => {
                 this.changeHandler(e.target.checked);
-            } }), h("span", { key: 'fe5e6f17345ba5057d2df8a9c245d28b7c79e328', class: "slider round" })), h("slot", { key: '9c3d8ceb80fbf7d4c0efff45d671866b42476f21' })));
+            } }), h("span", { key: 'c5952ebb13c18765abb406ec0916eb26d3db51a2', class: `${this.indeterminate ? 'indeterminate' : 'slider'} round` })), h("slot", { key: 'cae29b87763a90bd1b2b3f029fff63223aa4020f' })));
     }
     static get is() { return "ls-toggle"; }
     static get originalStyleUrls() {
@@ -41,6 +42,25 @@ export class LsToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "attribute": "indeterminate",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ls-toggle.js","sourceRoot":"","sources":["../../../src/components/ls-toggle/ls-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,YAAY,EAAiB,MAAM,eAAe,CAAC;AAO/F,MAAM,OAAO,QAAQ;IACM,OAAO,CAAU;~~IAC1B~~,WAAW,CAAwB;IAEnD,aAAa,CAAC,KAAc;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAC,QAAQ;gBACnB,8DAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAG,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBAC7D,IAAI,CAAC,aAAa,CAAE,CAAC,CAAC,MAAc,CAAC,OAAO,CAAC,CAAA;oBAC7C,CAAC,GACE;gBACL,6DAAM,KAAK,~~EAAC~~,~~cAAc~~,~~GAAQ~~,~~CAC5B~~;YACR,8DAAa,CACR,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Host, Prop, h, Event as StencilEvent, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ls-toggle',\n styleUrl: 'ls-toggle.css',\n shadow: false,\n})\nexport class LsToggle {\n @Prop({ mutable: true }) checked: boolean;\n @StencilEvent() valueChange: EventEmitter<boolean>;\n\n changeHandler(value: boolean) {\n this.valueChange.emit(value);\n }\n\n render() {\n return (\n <Host>\n <label class=\"switch\">\n <input type=\"checkbox\" checked={this.checked} onChange={(e) => {\n this.changeHandler((e.target as any).checked)\n }\n }/>\n <span class~~=\"~~slider round\"></span>\n </label>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ls-toggle.js","sourceRoot":"","sources":["../../../src/components/ls-toggle/ls-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,YAAY,EAAiB,MAAM,eAAe,CAAC;AAO/F,MAAM,OAAO,QAAQ;IACM,OAAO,CAAU;IAClC,aAAa,CAAU;IACf,WAAW,CAAwB;IAEnD,aAAa,CAAC,KAAc;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAC,QAAQ;gBACnB,8DAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAG,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBAC7D,IAAI,CAAC,aAAa,CAAE,CAAC,CAAC,MAAc,CAAC,OAAO,CAAC,CAAA;oBAC7C,CAAC,GACE;gBACL,6DAAM,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,QAAQ,GAAS,CAC1E;YACR,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event as StencilEvent, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ls-toggle',\n styleUrl: 'ls-toggle.css',\n shadow: false,\n})\nexport class LsToggle {\n @Prop({ mutable: true }) checked: boolean;\n @Prop() indeterminate: boolean;\n @StencilEvent() valueChange: EventEmitter<boolean>;\n\n changeHandler(value: boolean) {\n this.valueChange.emit(value);\n }\n\n render() {\n return (\n <Host>\n <label class=\"switch\">\n <input type=\"checkbox\" checked={this.checked} onChange={(e) => {\n this.changeHandler((e.target as any).checked)\n }\n }/>\n <span class={`${this.indeterminate ? 'indeterminate' : 'slider'} round`}></span>\n </label>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

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

@@ -27,7 +27,6 @@ export class LsToolbar {
     // Send one or more mutations up the chain
     // The source of the chain fires the mutation
     alter(diff) {
-        console.log(diff);
         const diffs = this.dataItem.map(c => {
             return { action: 'update', data: { ...c, ...diff } };
         });
@@ -36,7 +35,7 @@ export class LsToolbar {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: '930227762fac4d6c8ff5053cf6f844d9e4b5366a' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }))) : (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem, style: { visibility: this.dataItem && this.dataItem.length === 1 ? 'visible' : 'hidden' } }), h("ls-participant-select", { id: "ls-participant-select", roles: this.template?.roles, style: { display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' } }))), h("slot", { key: '4d23f1bc7e9abe32194bd1628084ab47624ad7c5' })));
+        return (h(Host, { key: '4a3a8c5f0ae97dae39e77134409ceeb585cc8ed2' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }))) : (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem, style: { visibility: this.dataItem && this.dataItem.length === 1 ? 'visible' : 'hidden' } }), h("ls-participant-select", { id: "ls-participant-select", roles: this.template?.roles, style: { display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' } }))), h("slot", { key: 'acaf72f6d91de81ca677fbf60f7ec769cb6b1bef' })));
     }
     static get is() { return "ls-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -1,4 +1,4 @@
-:host {
+.ls-toolbox-field {
   display: flex;
   padding: 0.5rem;
   align-items: center;
@@ -6,10 +6,18 @@
   gap: 0.875rem;
   border-radius: 1rem;
   border: 1px solid var(--gray-20, #edeff2);
-  background: var(--white, #fff);
+  background: white;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 }
+.ls-toolbox-field:hover {
+  background: var(--gray-10, #f7f8fa);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--gray-30, #e0e2e5);
+}
 .toolbox-field-icon {
   display: flex;
   padding: 0.5rem;

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

@@ -27,6 +27,14 @@ export class LsToolboxField {
      * The signer color of the element
      */
     signer = 0;
+    isSelected = false;
+    selected;
+    modeHandler(_isSelected) {
+        // When opened fire an event to let the parent handle closing other controls
+        if (_isSelected) {
+            this.selected.emit(this.formElementType);
+        }
+    }
     handleDragStart(event) {
         // Add the target element's id to the data transfer object
         event.dataTransfer.setData('application/json', JSON.stringify({
@@ -44,7 +52,14 @@ export class LsToolboxField {
         }
     }
     render() {
-        return (h(Host, { key: 'fb137a5eaeb10b88f8d0eb43feef6d2ef8505973', draggable: "true" }, h("div", { key: '9c92bec6e9abb2b57697eef17b52d43d24461784', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 } }, h("ls-icon", { key: '6febc0b55187a9b51ac094f49f72266c90acd433', name: this.icon, size: "20" })), h("p", { key: '2533c0ad8ac9e815847b1bad4798451f6b19118a', class: "toolbox-field-label" }, this.label), h("ls-icon", { key: 'bee17f0bedbbd904e634064bd37825fd96c75bc5', name: "drag-vertical", size: "16", color: "#787a80" })));
+        return (h(Host, { key: '46c05581e53608ba17ccf3c50edb3e8097028b55', draggable: "true" }, h("div", { key: '5f79fae515d92d0d13473cd487a0b9085f8bb093', class: 'ls-toolbox-field', style: this.isSelected && {
+                background: defaultRolePalette[this.signer % 100].s10,
+                border: `1px solid ${defaultRolePalette[this.signer % 100].s60}`,
+                color: defaultRolePalette[this.signer % 100].s80,
+                boxShadow: `0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);`,
+            }, onClick: () => (this.isSelected = !this.isSelected) }, h("div", { key: '7b8a2967e8e3406760944cf663edc152e4a7c12c', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 } }, h("ls-icon", { key: 'e0ec95278d08e643544297d3f5aa26b66c3f9223', name: this.icon, size: "20" })), h("p", { key: 'e5be2362129ffd4e44eba9a5530c6a9d3693561f', class: "toolbox-field-label", style: this.isSelected && {
+                color: defaultRolePalette[this.signer % 100].s80,
+            } }, this.label), h("ls-icon", { key: '287b53ec216fe60b87c6b2f69ccc3e81795d011f', name: "drag-vertical", size: "16", color: "#787a80" }))));
     }
     static get is() { return "ls-toolbox-field"; }
     static get encapsulation() { return "shadow"; }
@@ -219,9 +234,53 @@ export class LsToolboxField {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "0"
+            },
+            "isSelected": {
+                "type": "boolean",
+                "attribute": "is-selected",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "selected",
+                "name": "selected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "isSelected",
+                "methodName": "modeHandler"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "dragstart",

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;~~AAEjE~~,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;~~AAO1E~~,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,MAAM,GAAW,CAAC,CAAC;~~IAG3B~~,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,kBAAkB,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE;~~gBACvK~~,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';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\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() signer: number = 0;\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': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }}>\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":"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","sourcesContent":["import { Component, Event, Host, Listen, Prop, Watch, h } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { EventEmitter } from 'stream';\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() signer: number = 0;\n\n @Prop({ mutable: true }) isSelected: boolean = false;\n\n @Event({\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n selected: EventEmitter;\n\n @Watch('isSelected')\n modeHandler(_isSelected) {\n // When opened fire an event to let the parent handle closing other controls\n if (_isSelected) {\n this.selected.emit(this.formElementType);\n }\n }\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\n class={'ls-toolbox-field'}\n style={\n this.isSelected && {\n background: defaultRolePalette[this.signer % 100].s10,\n border: `1px solid ${defaultRolePalette[this.signer % 100].s60}`,\n color: defaultRolePalette[this.signer % 100].s80,\n boxShadow: `0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);`,\n }\n }\n onClick={() => (this.isSelected = !this.isSelected)}\n >\n <div\n class=\"toolbox-field-icon\"\n style={{ '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }}\n >\n <ls-icon name={this.icon} size=\"20\" />\n </div>\n <p\n class=\"toolbox-field-label\"\n style={\n this.isSelected && {\n color: defaultRolePalette[this.signer % 100].s80,\n }\n }\n >\n {this.label}\n </p>\n <ls-icon name=\"drag-vertical\" size=\"16\" color=\"#787a80\" />\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ls-tooltip/ls-tooltip.css ADDED Viewed

@@ -0,0 +1,9 @@
+.tooltip {
+  position: absolute;
+  background: black;
+  color: white;
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  z-index: 1000;
+}