npm - legalesign-document-viewer - Versions diffs - 0.3.9 → 0.4.1 - Mend

legalesign-document-viewer 0.3.9 → 0.4.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 (284) hide show

package/dist/collection/components/ls-recipient-card/ls-recipient-card.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ls-recipient-card.js","sourceRoot":"","sources":["../../../src/components/ls-recipient-card/ls-recipient-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { LSApiRecipient } from '../../types/LSApiRecipient';\nimport { LSApiTemplate } from '../../components';\nimport { ValidationError } from '../../types/ValidationError';\n\n@Component({\n tag: 'ls-recipient-card',\n styleUrl: 'ls-recipient-card.css',\n shadow: true,\n})\nexport class LsRecipientCard {\n /**\n * The initial template data, including the link for background PDF. See README and\n * example for correct GraphQL query and data structure.\n * {LSApiTemplate}\n */\n @Prop() recipient: LSApiRecipient;\n @Prop() activeRecipient: number;\n @Prop() template: LSApiTemplate;\n @State() isHovered: boolean = false;\n\n private setIsHovered(value: boolean) {\n this.isHovered = value;\n }\n @Prop() validationErrors: ValidationError[] = [];\n \n /**\n * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list.\n * {string}\n */\n @Prop() filtertoolbox?: string = null;\n\n // Send an internal event to be processed\n @Event() changeSigner: EventEmitter<number>;\n\n showTool(fieldFormType: string): boolean {\n return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);\n }\n\n render() {\n const recipientFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.recipient.signerIndex) || [];\n const recipientSignatures = recipientFields.filter(f => f.elementType === 'signature' || f.elementType === 'auto sign');\n return (\n <Host>\n <div\n class={'participant-card top-card full-card'}\n style={{\n background: defaultRolePalette[this.recipient?.signerIndex % 100].s10,\n border: `1px solid ${defaultRolePalette[this.recipient?.signerIndex % 100].s60}`,\n outline: `${this.recipient.signerIndex === this.activeRecipient ? '4px solid ' + defaultRolePalette[this.recipient?.signerIndex % 100].s40 : 'none'}`,\n marginTop: this.recipient.roleType === 'WITNESS' ? '-0.813rem' : '0',\n cursor: 'pointer',\n }}\n onClick={() => {\n this.changeSigner.emit(this.recipient.signerIndex);\n }}\n onMouseEnter={() => {\n this.setIsHovered(true);\n }}\n onMouseLeave={() => {\n this.setIsHovered(false);\n }}\n >\n <div class={'participant-card-inner'}>\n <div class={'participant-card-top-items'}>\n <div\n class={'role-label'}\n style={{\n background: defaultRolePalette[this.recipient?.signerIndex % 100].s20,\n color: defaultRolePalette[this.recipient?.signerIndex % 100].s90,\n }}\n >\n <ls-icon name={this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature'} />\n {String(this.recipient?.signerIndex).padStart(2, '0')}\n </div>\n <ls-icon\n name=\"cursor-click\"\n size=\"16\"\n customStyle={{ color: defaultRolePalette[this.recipient?.signerIndex % 100].s70 }}\n solid\n style={{ display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? 'block' : 'none' }}\n />\n <div class=\"dot\" style={{ display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && recipientSignatures.length === 0 ? 'block' : 'none' }} />\n </div>\n\n <div class={'participant-card-text'}>\n <p\n class=\"participant-text-description\"\n style={{\n color: defaultRolePalette[this.recipient?.signerIndex % 100].s100,\n }}\n >\n {this.recipient?.firstname + ' ' + this.recipient?.lastname}\n </p>\n <p\n class=\"participant-text-type\"\n style={{\n color: defaultRolePalette[this.recipient?.signerIndex % 100].s80,\n }}\n >\n {this.recipient.email}\n </p>\n {/* {this.recipient?.roleType !== 'APPROVER' && (\n <div\n class={'role-label fields'}\n style={{\n background:\n recipientFields.length === 0 ? defaultRolePalette[this.recipient?.signerIndex % 100].s60 : defaultRolePalette[this.recipient?.signerIndex % 100].s20,\n color: recipientFields.length === 0 ? 'white' : defaultRolePalette[this.recipient?.signerIndex % 100].s90,\n // display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? '' : 'none',\n }}\n >\n {recipientSignatures.length === 0 && <ls-icon name=\"exclamation-circle\" size=\"16\" style={{ marginRight: '0.125rem' }} />}\n {recipientSignatures.length === 0 ? 'Signature Required' : `${recipientFields.length} ${recipientFields.length === 1 ? 'Field' : 'Fields'}`}\n </div>\n )} */}\n </div>\n {this.recipient.signerIndex === this.activeRecipient && (\n <div class=\"fields-box\">\n {this.recipient.signerIndex > 0 && this.showTool('signature') && (\n <ls-toolbox-field\n elementType=\"signature\"\n formElementType=\"signature\"\n label=\"Signature\"\n defaultHeight={27}\n defaultWidth={120}\n validation={0}\n icon=\"signature\"\n tooltip=\"Use this field to collect Signatures from Participants\"\n signer={this.recipient.signerIndex}\n redDot={recipientSignatures.length === 0}\n />\n )}\n\n {this.recipient.signerIndex === 0 && this.showTool('auto sign') && (\n <ls-toolbox-field\n elementType=\"auto sign\"\n formElementType=\"auto sign\"\n label=\"Auto Sign\"\n defaultHeight={27}\n defaultWidth={120}\n validation={3000}\n icon=\"auto-sign\"\n tooltip=\"Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.showTool('text') && (\n <ls-toolbox-field\n elementType=\"text\"\n formElementType=\"text\"\n label=\"Text\"\n defaultHeight={27}\n defaultWidth={100}\n validation={0}\n icon=\"text\"\n tooltip=\"A field for collecting any plain text values such as: names, addresses or descriptions\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.recipient.signerIndex > 0 && this.showTool('signing date') && (\n <ls-toolbox-field\n elementType=\"signing date\"\n formElementType=\"signing date\"\n label=\"Signing Date\"\n defaultHeight={27}\n defaultWidth={120}\n validation={30}\n icon=\"auto-date\"\n tooltip=\"Automatically inserts the date upon completion by the assigned Participant\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('date') && (\n <ls-toolbox-field\n elementType=\"date\"\n formElementType=\"date\"\n label=\"Date\"\n defaultHeight={27}\n defaultWidth={80}\n validation={2}\n icon=\"calender\"\n tooltip=\"A field for collecting dates with built-in date formatting options\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.showTool('email') && (\n <ls-toolbox-field\n elementType=\"email\"\n formElementType=\"email\"\n label=\"Email\"\n defaultHeight={27}\n defaultWidth={120}\n validation={1}\n icon=\"at-symbol\"\n tooltip=\"A Field to only accept entries formatted as an email address (e.g., example@example.com)\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('initials') && (\n <ls-toolbox-field\n elementType=\"initials\"\n formElementType=\"initials\"\n label=\"Initials\"\n defaultHeight={27}\n defaultWidth={120}\n validation={2000}\n icon=\"initials\"\n tooltip=\"Use this field anywhere Participants are required to Initial your document\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('number') && (\n <ls-toolbox-field\n elementType=\"number\"\n formElementType=\"number\"\n label=\"Number\"\n defaultHeight={27}\n defaultWidth={80}\n validation={50}\n icon=\"hashtag\"\n tooltip=\"A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('dropdown') && (\n <ls-toolbox-field\n elementType=\"dropdown\"\n formElementType=\"dropdown\"\n label=\"Dropdown\"\n defaultHeight={27}\n defaultWidth={80}\n validation={20}\n icon=\"dropdown\"\n tooltip=\"Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.showTool('checkbox') && (\n <ls-toolbox-field\n elementType=\"checkbox\"\n formElementType=\"checkbox\"\n label=\"Checkbox\"\n defaultHeight={27}\n defaultWidth={27}\n validation={25}\n icon=\"check\"\n tooltip=\"Places a checkbox on your document. Handy for T&Cs or ✔/✗ sections\"\n signer={this.recipient.signerIndex}\n />\n )}\n\n {this.recipient.signerIndex > 0 && this.showTool('regex') && (\n <ls-toolbox-field\n elementType=\"regex\"\n formElementType=\"regex\"\n label=\"Regex\"\n defaultHeight={27}\n defaultWidth={120}\n validation={93}\n icon=\"code\"\n tooltip=\"Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.recipient.signerIndex > 0 && this.showTool('image') && (\n <ls-toolbox-field\n elementType=\"image\"\n formElementType=\"image\"\n label=\"Image\"\n defaultHeight={27}\n defaultWidth={120}\n validation={90}\n icon=\"photograph\"\n tooltip=\"Use when you need Participants to upload their own images during the signing process\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.recipient.signerIndex > 0 && this.showTool('file') && (\n <ls-toolbox-field\n elementType=\"file\"\n formElementType=\"file\"\n label=\"File\"\n defaultHeight={27}\n defaultWidth={120}\n validation={74}\n icon=\"upload\"\n tooltip=\"Use when you need Participants to upload their own documents during the signing process\"\n signer={this.recipient.signerIndex}\n />\n )}\n {this.recipient.signerIndex > 0 && this.showTool('drawn') && (\n <ls-toolbox-field\n elementType=\"drawn\"\n formElementType=\"drawn\"\n label=\"Drawn\"\n defaultHeight={120}\n defaultWidth={120}\n validation={90}\n icon=\"pencil\"\n tooltip=\"Allow users to draw on the document using their mouse or touchscreen\"\n signer={this.recipient.signerIndex}\n />\n )}\n </div>\n )}\n </div>\n </div>\n <slot></slot>\n <ls-tooltip id=\"ls-tooltip-master\" />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ls-recipient-manager/ls-recipient-manager.css ADDED Viewed

@@ -0,0 +1,29 @@
+:host {
+  display: block;
+}
+* {
+  margin: 0;
+}
+.ls-editor-infobox {
+  padding: 4px;
+}
+.toolbox-section-title {
+  color: var(--gray-100, #45484d);
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.75rem; /* 155.556% */
+  margin-bottom: 0.375rem;
+}
+.toolbox-section-description {
+  color: var(--gray-80, #5e6066);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+  margin-bottom: 0.375rem;
+}

package/dist/collection/components/ls-recipient-manager/ls-recipient-manager.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class LsRecipientManager {
+    render() {
+        return (h(Host, { key: '604b85fa859702a79805cc08ea93c8f031c8cbc8' }, h("div", { key: '872912c871ed6049b922eed7ddaa44081156273c', class: 'ls-editor-infobox' }, h("h2", { key: '582fadefcbc7d5dea25c7c5a401810c1c1938920', class: "toolbox-section-title" }, "Recipients & Fields"), h("p", { key: '92f473e57e87f242e9b449207c394c95de0b2981', class: "toolbox-section-description" }, "Select Recipient to Expand and Drag to place Signature fields where you\u2019d like them to Sign.")), h("slot", { key: '0a1aad9a8922e280cae8827b4f4692ab8bd00631' })));
+    }
+    static get is() { return "ls-recipient-manager"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-recipient-manager.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-recipient-manager.css"]
+        };
+    }
+}
+//# sourceMappingURL=ls-recipient-manager.js.map

package/dist/collection/components/ls-recipient-manager/ls-recipient-manager.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ls-recipient-manager.js","sourceRoot":"","sources":["../../../src/components/ls-recipient-manager/ls-recipient-manager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,kBAAkB;IAC7B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,mBAAmB;gBAC7B,2DAAI,KAAK,EAAC,uBAAuB,0BAAyB;gBAC1D,0DAAG,KAAK,EAAC,6BAA6B,wGAAiG,CACnI;YACN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'ls-recipient-manager',\n styleUrl: 'ls-recipient-manager.css',\n shadow: true,\n})\nexport class LsRecipientManager {\n render() {\n return (\n <Host>\n <div class={'ls-editor-infobox'}>\n <h2 class=\"toolbox-section-title\">Recipients & Fields</h2>\n <p class=\"toolbox-section-description\">Select Recipient to Expand and Drag to place Signature fields where you’d like them to Sign.</p>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

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

@@ -41,11 +41,11 @@ export class LsStatusbar {
         this.zoom = this.editor.zoom;
     }
     render() {
-        return (h(Host, { key: 'a3413cb06b3cceae5c3f6cbf7510b36df11be08b' }, h("div", { key: '2080874e647cdd5176c08515cb47fdb627df2fa7', class: 'controls-bar' }, h("div", { key: 'd24f96ad05ffa81ce2382515e74a9646a44af167', class: 'status-bar-section' }, h("button", { key: 'a69fb52da13860dbc71031912429a4d1ec80ec77', onClick: () => this.setZoom(this.editor.zoom * 0.8), id: "zoom-out-btn", "data-tooltip": "Zoom Out" }, h("ls-icon", { key: 'b4b780496d3276eda5fe955f3967b253d3578c5f', name: "zoom-out" })), h("div", { key: '4474da081ef1392bedb06912ab6918a67b56634c' }, h("input", { key: '8b687c12ec6093de6fcbedd5aaad99284ce1000d', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: 'c27bd37791d03620813eb99501f78abe7c21042e', onClick: () => this.setZoom(this.editor.zoom / 0.8), id: "zoom-in-btn", "data-tooltip": "Zoom In" }, h("ls-icon", { key: 'c3b2536558d5be6883eaa6e3128859c59c2dd7a4', name: "zoom-in" }))), h("div", { key: 'dcf6965889dfee6de089bcef07d8bbfdc7fdb696', class: 'status-bar-section' }, h("button", { key: '0cef2ae9723fc3e94e3729f14a9c3f85cd0829f9', onClick: () => this.fitWidth(), id: "fit-width-btn", "data-tooltip": "Fit Width" }, h("ls-icon", { key: '79e98d4c23b6dde54640b280fca072f400569ee5', name: "fit-width" })), h("button", { key: '988ba267324e6bdda5acefa68d0160feb3b8a445', onClick: () => this.fitHeight(), id: "fit-height-btn", "data-tooltip": "Fit Height" }, h("ls-icon", { key: '42e4bf53ec012c60064b0746437bb30fc15304e4', name: "fit-height" }))), h("div", { key: 'f3555bafde96138701b2350552e4af5dd3124d41', class: 'status-bar-section', style: this.pageCount === 1 && { display: 'none' } }, h("button", { key: 'a01700b9df5bd91b1abe87a8dcb83e656ef04012', onClick: () => {
+        return (h(Host, { key: 'bbbd561cba31e40a09c283bf232b5b395cd4178c' }, h("div", { key: 'ddf0d788d5e6068c62807e83e812a6bb6adb29e2', class: 'controls-bar' }, h("div", { key: '08545f9583f78c56ebd761970e6cdfd7bad0dc0b', class: 'status-bar-section' }, h("button", { key: 'e83d60e2c0ee71c868f071fe792d1d906f1c63e6', onClick: () => this.setZoom(this.editor.zoom * 0.8), id: "zoom-out-btn", "data-tooltip": "Zoom Out" }, h("ls-icon", { key: '61c300a3e477b82b292d36f63d1b06221b6d2a37', name: "zoom-out" })), h("div", { key: '6b3a82b61ca0ce5ec7d7e680d1a43a8541cc17a9' }, h("input", { key: '43cd659d9adef20f141f565686068b8459ff0f8f', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '32586380edc3abe2122902734fb89354cc0e0bfe', onClick: () => this.setZoom(this.editor.zoom / 0.8), id: "zoom-in-btn", "data-tooltip": "Zoom In" }, h("ls-icon", { key: 'ed091da86328acb22a1c6b01a22ee48cec3ee5d5', name: "zoom-in" }))), h("div", { key: 'f08fd5019a555a2dfadaa8f27e28e9fd6b69d014', class: 'status-bar-section' }, h("button", { key: 'f75ce10faabaa04dab1710e6a3483cf9fa556342', onClick: () => this.fitWidth(), id: "fit-width-btn", "data-tooltip": "Fit Width" }, h("ls-icon", { key: 'af7152ee80c058f6510c95948cf498a32aee7cf7', name: "fit-width" })), h("button", { key: '16195f3e84ef1586cf80c869386696f36bb30c00', onClick: () => this.fitHeight(), id: "fit-height-btn", "data-tooltip": "Fit Height" }, h("ls-icon", { key: '63304fa8248641ab42c2303aa75d2cf96f156fd1', name: "fit-height" }))), h("div", { key: '7c77014710a43ad70fae53b7fb1cb642e1181f32', class: 'status-bar-section', style: this.pageCount === 1 && { display: 'none' } }, h("button", { key: '5c2c4f1794d7ffc9b3f91841063f1587525d18a0', onClick: () => {
                 this.editor.pagePrev();
-            }, disabled: this.page === 1, id: "prev-page-btn", "data-tooltip": this.page === 1 ? 'No Previous Page' : 'Previous Page' }, h("ls-icon", { key: 'fd73d5ea11e1b286423180d07d568bdd34031af7', name: "chevron-left" })), h("p", { key: 'b6cefe15ae481583e7c78e0994977020833488c7' }, this.page, " / ", this.pageCount), h("button", { key: '356ab22694462e749b6d5a7f83c8da4137407cdf', onClick: () => {
+            }, disabled: this.page === 1, id: "prev-page-btn", "data-tooltip": this.page === 1 ? 'No Previous Page' : 'Previous Page' }, h("ls-icon", { key: 'dd2ab81e6e396d15ab81fa57c1e735d280d82187', name: "chevron-left" })), h("p", { key: '71ed24b7a28e658b4cc720d68e4620863faad6af' }, this.page, " / ", this.pageCount), h("button", { key: 'b269f1e426e2d634f36f1ed5f9973c3746f348b7', onClick: () => {
                 this.editor.pageNext();
-            }, disabled: this.page === this.pageCount, id: "next-page-btn", "data-tooltip": this.page === this.pageCount ? 'No Next Page' : 'Next Page' }, h("ls-icon", { key: '64fbc17303dc704a01799fac2d4390b6682f7a3c', name: "chevron-right" })))), h("ls-helper-bar", { key: '537705932941d8831b293030d24b36a3eb476281' }), h("ls-tooltip", { key: '4f81d338a5beb87613ffb44d72620b727be69f74', id: "ls-tooltip-master" }), h("slot", { key: 'cc0b0a89a44a8abf93e1fe71a48d068ca363e9f3' })));
+            }, disabled: this.page === this.pageCount, id: "next-page-btn", "data-tooltip": this.page === this.pageCount ? 'No Next Page' : 'Next Page' }, h("ls-icon", { key: '67dbd0226554e8949269f5ea2fee6e2c27a4b00d', name: "chevron-right" })))), h("ls-helper-bar", { key: 'ff17344706cf40558f45130687b070472637554b' }), h("ls-tooltip", { key: '078348754bcc8028fe9235e5cd94e874ec662271', id: "ls-tooltip-master" }), h("slot", { key: 'bfce8acdf82b8ff626240911fdfb80798114763e' })));
     }
     static get is() { return "ls-statusbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,9 +7,9 @@ export class LsToggle {
         this.valueChange.emit(value);
     }
     render() {
-        return (h(Host, { key: 'ed5c0cf6938343a75778033d857ed75d1dd71a16' }, h("label", { key: 'c61d2548ff81739a02d32e4f6ca726d0d7a2ba8d', class: "switch" }, h("input", { key: 'c1bb11a118c0eb16f3aa7ff9857e9326031066b5', type: "checkbox", checked: this.checked, onChange: (e) => {
+        return (h(Host, { key: 'fbf2cb5cfb1bb41f675e90896dbc926ab157055d' }, h("label", { key: '4f4985a1b4dd88f25d61fc6e538db3738d1874d0', class: "switch" }, h("input", { key: 'caf428c5fd51e9abf14125f93174bc81df369318', type: "checkbox", checked: this.checked, onChange: (e) => {
                 this.changeHandler(e.target.checked);
-            } }), h("span", { key: '42ca0de480283f08abcbf5107b4f4c96fa778224', class: `${this.indeterminate ? 'indeterminate' : 'slider'} round` })), h("slot", { key: '42962f9a09a41198c49673de78a4f80213b1347a' })));
+            } }), h("span", { key: '4bfc89a2797da96fe51b62454724f2e303b3c1b8', class: `${this.indeterminate ? 'indeterminate' : 'slider'} round` })), h("slot", { key: 'e2756a1575f39a08a0d69b53a9c82fc12f7a1a76' })));
     }
     static get is() { return "ls-toggle"; }
     static get originalStyleUrls() {

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

@@ -35,7 +35,7 @@ export class LsToolbar {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: 'ee27c52d8ca9657be6664c031d4858595d4a8b95' }, 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("ls-tooltip", { key: '5d56e476a7d63e337af9e080ab9b886c603ccf54', id: "ls-tooltip-master" }), h("slot", { key: 'f35bcec2285a41a9dfa2682d29cc93f4677f268d' })));
+        return (h(Host, { key: '1c31170e7cc6e6d9e1d7c87af3d17589b96acf7d' }, (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("ls-tooltip", { key: '6bbbb2a2dfde92f12d6c8ccafdfc1f45043b3f4f', id: "ls-tooltip-master" }), h("slot", { key: '3c5e486849e245166aa90139511c348e6d0d24c5' })));
     }
     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;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;gBAClB,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,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI;gBACxI,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,CAAC,CAAC,CAAC,OAAO,EAAE,GAAI,CACjK,CACP;YACD,mEAAY,EAAE,EAAC,mBAAmB,GAAG;YACrC,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 <ls-tooltip id=\"ls-tooltip-master\" />\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;YACD,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAC9C,WAAK,KAAK,EAAE,QAAQ;gBAClB,uBAAiB,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI,CACzC,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAE,QAAQ;gBAClB,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,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAI;gBACxI,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,CAAC,CAAC,CAAC,OAAO,EAAE,GAAI,CACjK,CACP;YACD,mEAAY,EAAE,EAAC,mBAAmB,GAAG;YACrC,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 <ls-tooltip id=\"ls-tooltip-master\" />\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

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

@@ -16,6 +16,17 @@
   border: 1px solid var(--gray-30, #e0e2e5);
 }
+.warning-box {
+  display: flex;
+  padding: 0.38rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.625rem;
+  border: 1px solid var(--red-40, #fca39a);
+  background: var(--red-10, #fff1f0);
+  color: var(--red-60, #f04438);
+}
 .toolbox-field-icon {

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

@@ -10,6 +10,7 @@ export class LsToolboxField {
     elementType;
     validation = 0;
     fixedAspect = null;
+    redDot = false;
     /**
      * The text to display for this field type.
      */
@@ -57,7 +58,7 @@ export class LsToolboxField {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: 'fba14ad5e4ac3dbc7b109807a21636aff23d117e', draggable: "true" }, h("div", { key: '0dee0945d544848b66256ba46324fce227065c27', class: 'ls-toolbox-field', style: this.isSelected && {
+        return (h(Host, { key: '23a50f46d363a41bc0f0a42a7892d5ffb1099fcf', draggable: "true" }, h("div", { key: '9afa09051e7c34a40a07c3c1394c3b581d53f5b0', 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,
@@ -72,9 +73,9 @@ export class LsToolboxField {
                     defaultWidth: this.defaultWidth,
                     fixedAspect: this.fixedAspect,
                 });
-            } }, h("div", { key: 'f995e705edd2b09bb53580058e46543bea38f554', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }, "data-tooltip": this.tooltip, "data-tooltip-placement": "right" }, h("ls-icon", { key: '2687a84899f0256dc802083024d0bf6ecc5cd4ad', name: this.icon, size: "20" })), h("p", { key: '546098d3d209711844fb9fa4badabe0e1987c79f', class: "toolbox-field-label", style: this.isSelected && {
+            } }, h("div", { key: 'bfedf0d04f2806183d1c1d8957ecfe717eac8660', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }, "data-tooltip": this.tooltip, "data-tooltip-placement": "right" }, h("ls-icon", { key: '47ffa6ad7b778d4add640e2f43d8209c8412b1b8', name: this.icon, size: "20" })), h("p", { key: '9df555ea8f8e2f5db2805835eec7695207878264', class: "toolbox-field-label", style: this.isSelected && {
                 color: defaultRolePalette[this.signer % 100].s80,
-            } }, this.label), h("ls-icon", { key: '7430f5c493de58b7d1759b8d6552157607df37c2', name: "drag-vertical", size: "16", color: "#787a80" })), h("ls-tooltip", { key: '01834e414237376158ffc9c67fee6b61f279bf29', id: "ls-tooltip-master", tooltipText: 'Something' })));
+            } }, this.label), this.redDot && (h("div", { key: '9330738644de92f4fb4ced713dd276ab0b6bf154', class: 'warning-box' }, h("ls-icon", { key: '90fdcff3ce9dafe226798b1a0269e00f0bd29684', name: "exclamation-circle", size: "18", solid: true }))), h("ls-icon", { key: '625c450c17234d6efd14c706e03b73d8bab8f8f5', name: "drag-vertical", size: "16", color: "#787a80" })), h("ls-tooltip", { key: '77db2859250fd4aaebdd9d46e2e3aaf93afa4354', id: "ls-tooltip-master", tooltipText: "Something" })));
     }
     static get is() { return "ls-toolbox-field"; }
     static get encapsulation() { return "shadow"; }
@@ -168,6 +169,26 @@ export class LsToolboxField {
                 "reflect": false,
                 "defaultValue": "null"
             },
+            "redDot": {
+                "type": "boolean",
+                "attribute": "red-dot",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "label": {
                 "type": "string",
                 "attribute": "label",
@@ -323,7 +344,7 @@ export class LsToolboxField {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{\n    label: string\n    elementType: string\n    defaultHeight: number\n    defaultWidth: number\n    formElementType: string\n    validation: number\n    fixedAspect: number | null\n  }",
+                    "original": "{\n    label: string;\n    elementType: string;\n    defaultHeight: number;\n    defaultWidth: number;\n    formElementType: string;\n    validation: number;\n    fixedAspect: number | null;\n  }",
                     "resolved": "{ label: string; elementType: string; defaultHeight: number; defaultWidth: number; formElementType: string; validation: number; fixedAspect: number; }",
                     "references": {}
                 }

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,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAE/F,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;~~AAQxD~~,MAAM,OAAO,cAAc;IACd,SAAS,CAAc;IAClC;;OAEG;IACK,eAAe,CAAS;IACxB,WAAW,CAAS;IACpB,UAAU,GAAW,CAAC,CAAC;IACvB,WAAW,GAAkB,IAAI,CAAC;~~IAG1C~~;;OAEG;IACK,KAAK,CAAS;IAEtB;;OAEG;IACK,IAAI,CAAO;IACnB;;OAEG;IACK,OAAO,CAAS;IAExB;;OAEG;IACK,aAAa,CAAS;IAC9B;;OAEG;IACK,YAAY,CAAS;IAE7B;;OAEG;IACK,MAAM,GAAW,CAAC,CAAC;IAEF,UAAU,GAAY,KAAK,CAAC;IAOrD,iBAAiB,CAQd;IAGH,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;YAC/B,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,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,gBAAgB;QACd,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC/C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAC,MAAM;YACpB,4DACE,KAAK,EAAE,kBAAkB,EACzB,KAAK,EACH,IAAI,CAAC,UAAU,IAAI;oBACjB,UAAU,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG;oBACrD,MAAM,EAAE,aAAa,kBAAkB,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE;oBAChE,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG;oBAChD,SAAS,EAAE,yEAAyE;iBACrF,EAEH,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;wBAC1B,KAAK,EAAE,IAAI,CAAC,KAAK;wBACjB,eAAe,EAAE,IAAI,CAAC,eAAe;wBACrC,WAAW,EAAE,IAAI,CAAC,WAAW;wBAC7B,UAAU,EAAE,IAAI,CAAC,UAAU;wBAC3B,aAAa,EAAE,IAAI,CAAC,aAAa;wBACjC,YAAY,EAAE,IAAI,CAAC,YAAY;wBAC/B,WAAW,EAAE,IAAI,CAAC,WAAW;qBAC9B,CAAC,CAAC;gBACL,CAAC;gBAED,4DACE,KAAK,EAAC,oBAAoB,EAC1B,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,kBAC3H,IAAI,CAAC,OAAO,4BACH,OAAO;oBAE9B,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAClC;gBACN,0DACE,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EACH,IAAI,CAAC,UAAU,IAAI;wBACjB,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG;qBACjD,IAGF,IAAI,CAAC,KAAK,CACT;~~gBACJ~~,gEAAS,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAG,CACtD;YACN,mEAAY,EAAE,EAAC,mBAAmB,EAAC,WAAW,EAAC,WAAW,GAAG,CACxD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, Host, Listen, Prop, Element, h, EventEmitter } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n\n@Component({\n tag: 'ls-toolbox-field',\n styleUrl: 'ls-toolbox-field.css',\n shadow: true,\n})\nexport class LsToolboxField {\n @Element() component: HTMLElement;\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 @Prop() fixedAspect: number \| null = null;\n \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 The tooltip hint to describe to the field type\n /\n @Prop() tooltip: string;\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 fieldTypeSelected: EventEmitter<{\n label: string\n elementType: string\n defaultHeight: number\n defaultWidth: number\n formElementType: string\n validation: number\n fixedAspect: number \| null\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 fixedAspect: this.fixedAspect,\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 componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\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={() => {\n this.fieldTypeSelected.emit({\n label: this.label,\n formElementType: this.formElementType,\n elementType: this.elementType,\n validation: this.validation,\n defaultHeight: this.defaultHeight,\n defaultWidth: this.defaultWidth,\n fixedAspect: this.fixedAspect,\n });\n }}\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 data-tooltip={this.tooltip}\n data-tooltip-placement=\"right\"\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 <ls-tooltip id=\"ls-tooltip-master\" tooltipText='Something' />\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,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAE/F,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAOxD,MAAM,OAAO,cAAc;IACd,SAAS,CAAc;IAClC;;OAEG;IACK,eAAe,CAAS;IACxB,WAAW,CAAS;IACpB,UAAU,GAAW,CAAC,CAAC;IACvB,WAAW,GAAkB,IAAI,CAAC;IAClC,MAAM,GAAY,KAAK,CAAC;IAEhC;;OAEG;IACK,KAAK,CAAS;IAEtB;;OAEG;IACK,IAAI,CAAO;IACnB;;OAEG;IACK,OAAO,CAAS;IAExB;;OAEG;IACK,aAAa,CAAS;IAC9B;;OAEG;IACK,YAAY,CAAS;IAE7B;;OAEG;IACK,MAAM,GAAW,CAAC,CAAC;IAEF,UAAU,GAAY,KAAK,CAAC;IAOrD,iBAAiB,CAQd;IAGH,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;YAC/B,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,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,gBAAgB;QACd,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC/C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAC,MAAM;YACpB,4DACE,KAAK,EAAE,kBAAkB,EACzB,KAAK,EACH,IAAI,CAAC,UAAU,IAAI;oBACjB,UAAU,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG;oBACrD,MAAM,EAAE,aAAa,kBAAkB,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE;oBAChE,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG;oBAChD,SAAS,EAAE,yEAAyE;iBACrF,EAEH,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;wBAC1B,KAAK,EAAE,IAAI,CAAC,KAAK;wBACjB,eAAe,EAAE,IAAI,CAAC,eAAe;wBACrC,WAAW,EAAE,IAAI,CAAC,WAAW;wBAC7B,UAAU,EAAE,IAAI,CAAC,UAAU;wBAC3B,aAAa,EAAE,IAAI,CAAC,aAAa;wBACjC,YAAY,EAAE,IAAI,CAAC,YAAY;wBAC/B,WAAW,EAAE,IAAI,CAAC,WAAW;qBAC9B,CAAC,CAAC;gBACL,CAAC;gBAED,4DACE,KAAK,EAAC,oBAAoB,EAC1B,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,kBAC3H,IAAI,CAAC,OAAO,4BACH,OAAO;oBAE9B,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAClC;gBACN,0DACE,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EACH,IAAI,CAAC,UAAU,IAAI;wBACjB,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG;qBACjD,IAGF,IAAI,CAAC,KAAK,CACT;gBACH,IAAI,CAAC,MAAM,IAAI,CACd,4DAAK,KAAK,EAAE,aAAa;oBACvB,gEAAS,IAAI,EAAC,oBAAoB,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,SAAG,CACjD,CACP;gBACD,gEAAS,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAG,CACtD;YACN,mEAAY,EAAE,EAAC,mBAAmB,EAAC,WAAW,EAAC,WAAW,GAAG,CACxD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, Host, Listen, Prop, Element, h, EventEmitter } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n tag: 'ls-toolbox-field',\n styleUrl: 'ls-toolbox-field.css',\n shadow: true,\n})\nexport class LsToolboxField {\n @Element() component: HTMLElement;\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 @Prop() fixedAspect: number \| null = null;\n @Prop() redDot: boolean = false;\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 The tooltip hint to describe to the field type\n /\n @Prop() tooltip: string;\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 fieldTypeSelected: EventEmitter<{\n label: string;\n elementType: string;\n defaultHeight: number;\n defaultWidth: number;\n formElementType: string;\n validation: number;\n fixedAspect: number \| null;\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 fixedAspect: this.fixedAspect,\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 componentDidLoad() {\n attachAllTooltips(this.component.shadowRoot);\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={() => {\n this.fieldTypeSelected.emit({\n label: this.label,\n formElementType: this.formElementType,\n elementType: this.elementType,\n validation: this.validation,\n defaultHeight: this.defaultHeight,\n defaultWidth: this.defaultWidth,\n fixedAspect: this.fixedAspect,\n });\n }}\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 data-tooltip={this.tooltip}\n data-tooltip-placement=\"right\"\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 {this.redDot && (\n <div class={'warning-box'}>\n <ls-icon name=\"exclamation-circle\" size=\"18\" solid />\n </div>\n )}\n <ls-icon name=\"drag-vertical\" size=\"16\" color=\"#787a80\" />\n </div>\n <ls-tooltip id=\"ls-tooltip-master\" tooltipText=\"Something\" />\n </Host>\n );\n }\n}\n"]}

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

@@ -51,7 +51,7 @@ export class LsTooltip {
         innerTooltip.classList.add('hidden');
     }
     render() {
-        return (h("div", { key: '127d6459d0353cfadb29fffd9b68eab3962d59c0', id: "ls-tooltip-inner", class: "tooltip hidden", role: "tooltip" }, h("div", { key: '347d0beb31c2a238ab18cc514bd64663a0f08787', id: "arrow" }), this.tooltipTitle && h("p", { key: 'dc214278f66826c46d6144939263ce4fdb7f7436', class: "tooltip-title" }, this.tooltipTitle), this.tooltipText, h("slot", { key: '6a47cab909c4d11182a8d6362826572a3798181e' })));
+        return (h("div", { key: '8c98202b7ccd92d698b4eb67af9bc2c42efbddd2', id: "ls-tooltip-inner", class: "tooltip hidden", role: "tooltip" }, h("div", { key: '708044e1a3afd7d41f4d8a28329a5f6a398bece3', id: "arrow" }), this.tooltipTitle && h("p", { key: '0ca6a01f2f4038d992ef3b866d89ccb6b1058c0d', class: "tooltip-title" }, this.tooltipTitle), this.tooltipText, h("slot", { key: 'ae9c4b1c0bb769b106f4ffd92e0ecd1bb3f312e1' })));
     }
     static get is() { return "ls-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-validation-manager/ls-validation-manager.css ADDED Viewed

@@ -0,0 +1,159 @@
+:host {
+  display: block;
+}
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+.toolbox-section-description {
+  color: var(--gray-80, #5e6066);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+}
+.validation-section-title {
+  color: var(--gray-100, #45484d);
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.75rem; /* 155.556% */
+}
+.valid-label {
+  display: flex;
+  padding: 2px 0.5rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+  width: fit-content;
+}
+.valid {
+  background-color: var(--green-30, #9df5d4);
+  color: var(--green-100, #125241);
+}
+.invalid {
+  background: var(--yellow-20, #fff3c2);
+  color: var(--yellow-90, #8a3f0e);
+}
+.field-counter {
+  display: flex;
+  padding: 0.125rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 1rem;
+  font-size: 0.625rem;
+  line-height: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  color: var(--yellow-20, #fff3c2);
+  background: #e17100;
+  min-width: 1rem;
+}
+.field-dropdown {
+  position: absolute;
+  top: 2rem;
+  right: 0;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 20rem;
+  padding: 1rem;
+  border-radius: 1rem;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  max-height: 20rem;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 1000;
+}
+.required-field {
+  position: relative;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.75rem;
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  background: var(--field-background);
+  color: var(--field-text-color);
+  border: 1px solid var(--field-border-color);
+  transition: all 0.1s ease-in-out;
+}
+.required-field:hover {
+  background: var(--field-background-hover);
+  color: var(--field-text-color-hover);
+  border: 1px solid var(--field-border-color-hover);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+.required-field-items-left {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+}
+.required-field-items-left p {
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 0.875rem; /* 142.857% */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dot {
+  height: 0.5rem;
+  width: 0.5rem;
+  border-radius: 50%;
+}
+.role-label {
+  display: flex;
+  padding: 2px 3px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem; /* 133.333% */
+  text-transform: capitalize;
+}
+.dropdown-header h2 {
+  color: var(--gray-100, #45484d);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+  margin-bottom: 0.125rem;
+}
+.dropdown-header p {
+  color: var(--gray-80, #6c6e73);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem; /* 133.333% */
+}

package/dist/collection/components/ls-validation-manager/ls-validation-manager.js ADDED Viewed

@@ -0,0 +1,64 @@
+import { Host, h } from "@stencil/core";
+import { defaultRolePalette } from "../ls-document-viewer/defaultPalette";
+export class LsValidationManager {
+    /**
+     * The template information (as JSON).
+     * {LSApiTemplate}
+     */
+    validationErrors;
+    render() {
+        return (h(Host, { key: '8b8b7cfb5fceede70f7a532f234f0bc556310c6a' }, h("div", { key: 'f977ebe55dc5c9616c84984a242c7c41b1faa73b' }, h("div", { key: 'da56b7493926aa1fe64703c0b7c7f57d74a98c92' }, h("div", { key: 'a540095a4ed270b7c8700f877a59b48c4bc70a88', class: 'validation-section-title' }, "Action Required"), h("p", { key: 'ceaf86bbfe36d10af07e20861576bcb8d31a89e8', class: "toolbox-section-description" }, "This document needs fields added or corrected before it can be sent.")), this.validationErrors && this.validationErrors.map((field, idx) => {
+            const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
+            const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];
+            return (h("div", { key: idx, class: 'required-field', style: {
+                    '--field-background': pallette.s10,
+                    '--field-border-color': pallette.s10,
+                    '--field-background-hover': pallette.s20,
+                    '--field-text-color': pallette.s70,
+                    '--field-text-color-hover': pallette.s80,
+                    '--field-border-color-hover': pallette.s60,
+                } }, h("div", { class: 'required-field-items-left' }, h("div", { class: 'dot', style: { background: pallette.s60 } }), field?.role && (h("div", { class: 'required-field-items-left' }, h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`))), field?.element && (h(h.Fragment, null, h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: field.element.signer }), h("p", { style: { color: pallette.s80 } }, field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.description))))));
+        })), h("slot", { key: '222f3e696f8674507ca5b2f57bc0931013ba1b69' })));
+    }
+    static get is() { return "ls-validation-manager"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-validation-manager.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-validation-manager.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "validationErrors": {
+                "type": "unknown",
+                "attribute": "validation-errors",
+                "mutable": false,
+                "complexType": {
+                    "original": "ValidationError[]",
+                    "resolved": "ValidationError[]",
+                    "references": {
+                        "ValidationError": {
+                            "location": "import",
+                            "path": "../../types/ValidationError",
+                            "id": "src/types/ValidationError.ts::ValidationError"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The template information (as JSON).\n{LSApiTemplate}"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=ls-validation-manager.js.map

package/dist/collection/components/ls-validation-manager/ls-validation-manager.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ls-validation-manager.js","sourceRoot":"","sources":["../../../src/components/ls-validation-manager/ls-validation-manager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { ValidationError } from '../../types/ValidationError';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n tag: 'ls-validation-manager',\n styleUrl: 'ls-validation-manager.css',\n shadow: true,\n})\n\nexport class LsValidationManager {\n\n /**\n * The template information (as JSON).\n * {LSApiTemplate}\n */\n @Prop() validationErrors: ValidationError[];\n\n render() {\n return (\n <Host>\n <div>\n <div>\n <div class={'validation-section-title'}>Action Required</div>\n <p class=\"toolbox-section-description\">\n This document needs fields added or corrected before it can be sent.\n </p>\n </div>\n {this.validationErrors && this.validationErrors.map((field, idx) => {\n const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n return (\n <div\n key={idx}\n class={'required-field'}\n style={{\n '--field-background': pallette.s10,\n '--field-border-color': pallette.s10,\n '--field-background-hover': pallette.s20,\n '--field-text-color': pallette.s70,\n '--field-text-color-hover': pallette.s80,\n '--field-border-color-hover': pallette.s60,\n }}\n >\n <div class={'required-field-items-left'}>\n <div class={'dot'} style={{ background: pallette.s60 }} />\n {field?.role && (\n <div class={'required-field-items-left'}>\n <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n {field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`}\n </div>\n </div>\n )}\n {field?.element && (\n <>\n <ls-toolbox-field\n elementType=\"signature\"\n formElementType=\"signature\"\n label=\"Signature\"\n defaultHeight={27}\n defaultWidth={120}\n validation={0}\n icon=\"signature\"\n tooltip=\"Use this field to collect Signatures from Participants\"\n signer={field.element.signer}\n />\n\n <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n {field.description}\n </div>\n </>\n )}\n </div>\n </div>\n );\n })}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}