legalesign-document-viewer 0.4.5 → 0.4.7

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

@@ -41,11 +41,11 @@ export class LsStatusbar {
         this.zoom = this.editor.zoom;
     }
     render() {
-        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: () => {
+        return (h(Host, { key: '46fecc601a9be83398f28ec84e6ecb9bf2c16e0e' }, h("div", { key: '5345a3d6aac3f9b354862b25de8cc85ce9578df9', class: 'controls-bar' }, h("div", { key: 'bb82d80870d6f2baf7619543d0983eab419b0524', class: 'status-bar-section' }, h("button", { key: '05dcb584b66d5d75bfaf70cac8e8dbde2e2ba470', onClick: () => this.setZoom(this.editor.zoom * 0.8), id: "zoom-out-btn", "data-tooltip": "Zoom Out" }, h("ls-icon", { key: '716d529fdadc97a6c22ccaca00cfff4d431fac59', name: "zoom-out" })), h("div", { key: '91818ea3ee0507f3ab9fa495bf293ae0eee786a6' }, h("input", { key: '5aff9830a5bfca3ebb16603c00c6a700c569bce6', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: 'fc4b71f200d4511bfe41d83317d018c274bc2fb6', onClick: () => this.setZoom(this.editor.zoom / 0.8), id: "zoom-in-btn", "data-tooltip": "Zoom In" }, h("ls-icon", { key: '39e9ffc385771f125bd4bb6b58f36539a13df4b7', name: "zoom-in" }))), h("div", { key: '5800487257cc880357ee0612b18dabda6822fbea', class: 'status-bar-section' }, h("button", { key: '59970cab2136a048905085511f0fa51916647bec', onClick: () => this.fitWidth(), id: "fit-width-btn", "data-tooltip": "Fit Width" }, h("ls-icon", { key: 'a2c4a318305844767a9ca0b77462571403107873', name: "fit-width" })), h("button", { key: 'c334fdc56bc8763aa4315ee03e48e92d982ab642', onClick: () => this.fitHeight(), id: "fit-height-btn", "data-tooltip": "Fit Height" }, h("ls-icon", { key: 'a0fbb611fe0f24d80a1f3bb89f155b2c8f19f28b', name: "fit-height" }))), h("div", { key: '3fe48ab8468f8a6097c565838098e070c710403d', class: 'status-bar-section', style: this.pageCount === 1 && { display: 'none' } }, h("button", { key: 'ca10f745fb58d161707c0d4dce2faf6f08044453', 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: 'dd2ab81e6e396d15ab81fa57c1e735d280d82187', name: "chevron-left" })), h("p", { key: '71ed24b7a28e658b4cc720d68e4620863faad6af' }, this.page, " / ", this.pageCount), h("button", { key: 'b269f1e426e2d634f36f1ed5f9973c3746f348b7', onClick: () => {
+            }, disabled: this.page === 1, id: "prev-page-btn", "data-tooltip": this.page === 1 ? 'No Previous Page' : 'Previous Page' }, h("ls-icon", { key: '5c6777f1cee8f830325222de33cc32207f3de894', name: "chevron-left" })), h("p", { key: '227ee3abd98c67eda27cf655963f8cd9306d43cc' }, this.page, " / ", this.pageCount), h("button", { key: 'a2952dfe6cc84e3f32be5d30cd8d4a39642cf3fc', 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: '67dbd0226554e8949269f5ea2fee6e2c27a4b00d', name: "chevron-right" })))), h("ls-helper-bar", { key: 'ff17344706cf40558f45130687b070472637554b' }), h("ls-tooltip", { key: '078348754bcc8028fe9235e5cd94e874ec662271', id: "ls-tooltip-master" }), h("slot", { key: 'bfce8acdf82b8ff626240911fdfb80798114763e' })));
+            }, disabled: this.page === this.pageCount, id: "next-page-btn", "data-tooltip": this.page === this.pageCount ? 'No Next Page' : 'Next Page' }, h("ls-icon", { key: '1575be772f45f09714a4a13677e13960a5440a50', name: "chevron-right" })))), h("ls-helper-bar", { key: 'a0b00711c34985754bb58935c14b9f864c9e51fa' }), h("ls-tooltip", { key: '334b5a12fda32672fb03400bc4da9bb6117ef88c', id: "ls-tooltip-master" }), h("slot", { key: '0d2469ab58fb78120e4d11672b5764c954f6538d' })));
     }
     static get is() { return "ls-statusbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-title-input/ls-title-input.css

@@ -0,0 +1,320 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:host {
+  display: block;
+}
+
+.template-title {
+  border-radius: 0.5rem;
+  padding: 0 0.25rem;
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  cursor: pointer;
+
+}
+
+.template-title:hover {
+  background: var(--gray-10, #f7f8fa);
+}
+
+
+.editButton {
+  margin: 0px;
+  padding: 0px;
+  max-height: 1.25rem !important;
+  max-width: 1.25rem !important;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--gray-70);
+}
+
+.editButton:hover {
+  color: var(--gray-80);
+}
+
+/* Global Styles */
+
+p {
+  color: var(--gray-80, #6c6e73);
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-sm-line-height);
+}
+
+a {
+  color: var(--primary-60, #4456f6);
+  font-size: var(--text-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-sm-line-height);
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: var(--primary-70, #2134dc);
+}
+
+.button-link,
+.button-link:hover {
+  all: unset;
+}
+
+select {
+  appearance: none;
+  height: 2.25rem;
+}
+
+.input-wrapper {
+  position: relative;
+  width: fit-content;
+}
+
+#selectorIcon {
+  position: absolute;
+  top: 50%;
+  right: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+#selectLeadingIcon {
+  position: absolute;
+  top: 50%;
+  left: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+.has-leading-icon {
+  padding-left: 2.5rem;
+}
+
+input,
+select,
+textarea {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  border-radius: 0.5rem;
+  color: var(--gray-100, #45484d);
+  font-weight: 400;
+}
+
+input::placeholder,
+select::placeholder,
+textarea::placeholder {
+  color: var(--gray-60, #afb0b2);
+}
+
+input:hover,
+select:hover,
+textarea:hover {
+  border-color: var(--gray-50, #c8c9cc);
+  background-color: var(--white, #fff);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);
+  border-color: var(--primary-60, #4456f6);
+  background-color: var(--white, #fff);
+}
+
+input:active,
+select:active,
+textarea:active {
+  border-color: var(--primary-50, #5185ff);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  background-color: var(--gray-10, #f7f8fa);
+}
+
+input[type='checkbox'] {
+  appearance: none;
+  position: relative;
+  height: 1rem;
+  width: 1rem;
+  padding: 0.25rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid #d1d5db;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+input[type='checkbox']:checked,
+input[type='checkbox'].indeterminate {
+  background-color: var(--primary-60, #4456f6);
+  border: none;
+}
+
+input[type='checkbox']:checked::after {
+  content: '';
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);
+  width: 0.5rem;
+  height: 0.25rem;
+  border-bottom: 0.125rem solid white;
+  border-right: 0.125rem solid white;
+}
+
+input[type='checkbox'].indeterminate::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.5rem;
+  height: 0.125rem;
+  background-color: white;
+}
+
+input[type='checkbox']:checked:hover,
+input[type='checkbox'].indeterminate:hover {
+  background-color: var(--primary-70, #2134dc);
+  border: none;
+}
+
+input[type='checkbox']:hover {
+  border: 1px solid #9ca3af;
+}
+
+input[type='checkbox']:focus,
+input[type='checkbox']:active {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);
+  background-color: #f0f4f8;
+}
+
+input[type='checkbox']:disabled {
+  background-color: #f3f4f6;
+  outline: none;
+  cursor: not-allowed;
+}
+
+input[type='checkbox']:disabled:checked {
+  background-color: #e5e7eb;
+  border: none;
+  outline: none;
+  cursor: not-allowed;
+}
+
+.checkbox-container {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.checkbox-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.form-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.loading-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  color: var(--primary-60, #0c7cba);
+}
+
+button {
+  border: 0;
+  appearance: button;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg);
+  background-color: var(--primary-60, #4456f6);
+  color: white;
+  text-transform: capitalize;
+  min-height: 2.25rem;
+  min-width: 2.25rem;
+}
+
+button.tertiaryGrey {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background-color: white;
+  color: var(--gray-80, #787a80);
+}
+
+button.tertiaryGrey:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-group {
+  display: flex;
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-30, #e0e2e5);
+  background: var(--white, #ffffff);
+  overflow: clip;
+}
+
+.button-group button {
+  display: flex;
+  background: transparent;
+  border-radius: unset;
+  padding: 0.25rem 0.75rem;
+  min-width: 2.156rem;
+  min-height: unset;
+  color: var(--gray-80, #6c6e73);
+}
+
+.button-group button:hover {
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-group > :first-child {
+  border-radius: 0.5rem 0 0 0.5rem;
+}
+
+.button-group > :last-child {
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+
+.button-group > :not(:first-child) {
+  border-left: 1px solid var(--gray-30, #e0e2e5);
+}
+

package/dist/collection/components/ls-title-input/ls-title-input.js

@@ -0,0 +1,130 @@
+import { Host, h } from "@stencil/core";
+export class LsTitleInput {
+    component;
+    template;
+    editTitle = false;
+    mutate;
+    update;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    // NOTE this alter is debounced to account for typing
+    alter(diff) {
+        this.debounce(diff, 500);
+    }
+    titletimer;
+    debounce(diff, delay) {
+        if (this.titletimer)
+            clearTimeout(this.titletimer);
+        this.titletimer = setTimeout(() => {
+            this.template = { ...this.template, ...diff };
+            const diffs = [{ action: 'update', data: this.template }];
+            this.update.emit(diffs);
+            this.mutate.emit(diffs);
+        }, delay);
+    }
+    render() {
+        return (h(Host, { key: '48cae0d9c9d29f199cdabb4ab274bdfaef0891d1' }, this.editTitle ? (h("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("input", { value: this.template?.title, style: { height: '1.25rem', padding: '0 0.25rem', width: 'fit-content' }, onInput: e => {
+                e.preventDefault();
+                this.alter({ title: e.target.value });
+            }, onKeyUp: e => {
+                if (e.key === 'Enter' || e.keyCode === 13)
+                    this.editTitle = false;
+            } }), h("ls-icon", { name: "check", size: "1rem", class: 'editButton', onClick: () => {
+                this.editTitle = false;
+            } }))) : (h("div", { class: "template-title", onClick: () => {
+                this.editTitle = !this.editTitle;
+            } }, h("p", null, this.template?.title)))));
+    }
+    static get is() { return "ls-title-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-title-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-title-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "template": {
+                "type": "unknown",
+                "attribute": "template",
+                "mutable": true,
+                "complexType": {
+                    "original": "LSApiTemplate",
+                    "resolved": "{ id: string; title: string; pageCount: number; fileName: string; link: string; autoArchive: boolean; valid: boolean; locked: boolean; tags: string[]; groupId: string; roles: LSApiRole[]; canOpenSign: boolean; directLinks: []; elementConnection: { templateElements: LSApiElement[]; totalCount: number; }; elements: LSApiElement[]; createdBy: string; created: Date; modified: Date; lastSent: Date; pageDimensionArray: [number, number][]; pageDimensions: string; fixSignatureScale?: boolean; documentRetentionDays: number; }",
+                    "references": {
+                        "LSApiTemplate": {
+                            "location": "import",
+                            "path": "../../types/LSApiTemplate",
+                            "id": "src/types/LSApiTemplate.ts::LSApiTemplate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "editTitle": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mutate",
+                "name": "mutate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSMutateEvent[]",
+                    "resolved": "LSMutateEvent[]",
+                    "references": {
+                        "LSMutateEvent": {
+                            "location": "import",
+                            "path": "../../types/LSMutateEvent",
+                            "id": "src/types/LSMutateEvent.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "update",
+                "name": "update",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSMutateEvent[]",
+                    "resolved": "LSMutateEvent[]",
+                    "references": {
+                        "LSMutateEvent": {
+                            "location": "import",
+                            "path": "../../types/LSMutateEvent",
+                            "id": "src/types/LSMutateEvent.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "component"; }
+}
+//# sourceMappingURL=ls-title-input.js.map

package/dist/collection/components/ls-title-input/ls-title-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-title-input.js","sourceRoot":"","sources":["../../../src/components/ls-title-input/ls-title-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAS9F,MAAM,OAAO,YAAY;IACZ,SAAS,CAAc;IACM,QAAQ,CAAgB;IAEvD,SAAS,GAAY,KAAK,CAAC;IAOpC,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IAEtC,0CAA0C;IAC1C,6CAA6C;IAC7C,qDAAqD;IACrD,KAAK,CAAC,IAAY;QAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAC3B,CAAC;IAEO,UAAU,CAAC;IAEnB,QAAQ,CAAC,IAAI,EAAE,KAAK;QAClB,IAAI,IAAI,CAAC,UAAU;YAAE,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAEnD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,GAAG,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,EAAE,CAAC;YAC9C,MAAM,KAAK,GAAoB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC3E,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE;YAClE,aACE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,EAAE,EACxE,OAAO,EAAE,CAAC,CAAC,EAAE;oBACX,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,CAAC;gBAC9D,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE;oBACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE;wBAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACpE,CAAC,GACD;YACF,eACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACzB,CAAC,GACD,CACE,CACP,CAAC,CAAC,CAAC,CACF,WACE,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;YACnC,CAAC;YAED,aAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAK,CACzB,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n  tag: 'ls-title-input',\n  styleUrl: 'ls-title-input.css',\n  shadow: true,\n})\nexport class LsTitleInput {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true, reflect: true }) template: LSApiTemplate;\n\n  @State() editTitle: boolean = false;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object) {\n    this.debounce(diff, 500);\n  }\n\n  private titletimer;\n\n  debounce(diff, delay) {\n    if (this.titletimer) clearTimeout(this.titletimer);\n\n    this.titletimer = setTimeout(() => {\n      this.template = { ...this.template, ...diff };\n      const diffs: LSMutateEvent[] = [{ action: 'update', data: this.template }];\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n\n  render() {\n    return (\n      <Host>\n        {this.editTitle ? (\n          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n            <input\n              value={this.template?.title}\n              style={{ height: '1.25rem', padding: '0 0.25rem', width: 'fit-content' }}\n              onInput={e => {\n                e.preventDefault();\n                this.alter({ title: (e.target as HTMLInputElement).value });\n              }}\n              onKeyUp={e => {\n                if (e.key === 'Enter' || e.keyCode === 13) this.editTitle = false;\n              }}\n            />\n            <ls-icon\n              name=\"check\"\n              size=\"1rem\"\n              class='editButton'\n              onClick={() => {\n                this.editTitle = false;\n              }}\n            />\n          </div>\n        ) : (\n          <div\n            class=\"template-title\"\n            onClick={() => {\n              this.editTitle = !this.editTitle;\n            }}\n          >\n            <p>{this.template?.title}</p>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -71,7 +71,7 @@ input:checked + .slider {
 
 input:focus + .slider {
   box-shadow: 0 0 1px var(--primary-60, #4456f6);
-  outline: 4px solid var(--primary-20, #e3e6ff);
+  outline: 0.25rem solid var(--primary-20, #e3e6ff);
 }
 
 input:checked + .slider:before {
@@ -82,7 +82,7 @@ input:checked + .slider:before {
 
 /* Rounded sliders */
 .slider.round, .indeterminate.round {
-  border-radius: 34px;
+  border-radius: 2.125rem;
 }
 
 .slider.round:before {

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

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

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

@@ -50,7 +50,7 @@ a:hover {
 
 select {
   appearance: none;
-  height: 36px;
+  height: 2.25rem;
 }
 
 .input-wrapper {

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

@@ -35,7 +35,7 @@ export class LsToolbar {
         this.update.emit(diffs);
     }
     render() {
-        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' })));
+        return (h(Host, { key: 'bafb88d0050349a95e68e5c2424c6ef4cb60dd31' }, (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: '4cf0e3dd34be8dfff87525ebe0c87d106d49335d', id: "ls-tooltip-master" }), h("slot", { key: '2eaa4c5de2ed24e5405a4e85821b59e934b77db4' })));
     }
     static get is() { return "ls-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,7 +81,7 @@ a:hover {
 
 select {
   appearance: none;
-  height: 36px;
+  height: 2.25rem;
 }
 
 .input-wrapper {

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

@@ -69,7 +69,7 @@ export class LsToolboxField {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: 'b8ba3bf139801233d2d81b5648d1a638505e0972', draggable: "true" }, h("div", { key: '9f6f1f44479fa2157daf47a3504b689d9e420b7b', class: 'ls-toolbox-field', style: this.isSelected && {
+        return (h(Host, { key: '8db0540fc65597dfc99a9a560cfde441d55d219f', draggable: "true" }, h("div", { key: '110d6153b0b171447c0cef8ee67a9ff624a7fe1b', 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,
@@ -84,9 +84,9 @@ export class LsToolboxField {
                     defaultWidth: this.defaultWidth,
                     fixedAspect: this.fixedAspect,
                 });
-            } }, h("div", { key: '30345c85a9b6b6a721813bb4f013087b4a8cabba', 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: '765ea21ea33d53efd63ba1b79a1f573cf86d51e8', name: this.icon, size: "20" })), h("p", { key: '233dc63ee920abb8402e44b0ba9c5398034bb5bb', class: "toolbox-field-label", style: this.isSelected && {
+            } }, h("div", { key: '111f63ac4327ccda47ac6db32ca48ec9e2f9161d', 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: '440c1ca0974d682d0b8b1de16b80c955688ea25f', name: this.icon, size: "1.25rem" })), h("p", { key: 'fcf6090878b314f5af0626168af946dda3809a89', class: "toolbox-field-label", style: this.isSelected && {
                 color: defaultRolePalette[this.signer % 100].s80,
-            } }, this.label), this.redDot && (h("div", { key: '9f4c19c86d0a4dad73e0d3f9b4607e845065ed0c', class: 'warning-box' }, h("ls-icon", { key: 'd304104665589be58cfe07c425d3e27251019279', name: "exclamation-circle", size: "18", solid: true }))), h("ls-icon", { key: '69daa9ade2b006ee3d7e15cd92ce607c21fb7a43', name: "drag-vertical", size: "16", color: "#787a80" })), h("ls-tooltip", { key: '6068cd2f85ee3baf054b20d7b5738d7421894f25', id: "ls-tooltip-master", tooltipText: "Something" })));
+            } }, this.label), this.redDot && (h("div", { key: '9d4834774b6bd44982f3a4b8e9a43695c119afbd', class: 'warning-box', "data-tooltip": `${this.label} Field Required`, "data-tooltip-placement": "left" }, h("ls-icon", { key: 'a2c311cdffd65861e0629f9fca541b4276131337', name: "exclamation-circle", size: "1.125rem", solid: true }))), h("ls-icon", { key: '0b598a9a37ecd85c8dea68ccd03917bc4321f065', name: "drag-vertical", size: "1rem", color: "#787a80" })), h("ls-tooltip", { key: '7546842ee7d03ee8a532403dfcb457c9f405b1de', id: "ls-tooltip-master", tooltipText: "Something" })));
     }
     static get is() { return "ls-toolbox-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -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;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;QAEnB,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QACnC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC;QAC5B,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC7B,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,GAAE,IAAI,CAAC;QAC/C,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,GAAE,IAAI,CAAC;QAC7C,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,wBAAwB,CAAC;QACxD,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,cAAc,kBAAkB,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;QAChF,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC;QACxC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAElC,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;QAElD,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\n    var canvas = document.createElement('div');\n    canvas.style.position = 'absolute';\n    canvas.style.left = '-100%';\n    canvas.style.zIndex = '-100';\n    canvas.style.height = this.defaultHeight +'px';\n    canvas.style.width = this.defaultWidth +'px';\n    canvas.style.backgroundColor = 'rgba(255, 255, 255, 1)';\n    canvas.style.border = `1px dashed ${defaultRolePalette[this.signer % 100].s60}`;\n    canvas.innerHTML = this.formElementType;\n    document.body.appendChild(canvas); \n\n    event.dataTransfer.setDragImage(canvas, -50, -20);\n\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"]}
+{"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, 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\n    var canvas = document.createElement('div');\n    canvas.style.position = 'absolute';\n    canvas.style.left = '-100%';\n    canvas.style.zIndex = '-100';\n    canvas.style.height = this.defaultHeight +'px';\n    canvas.style.width = this.defaultWidth +'px';\n    canvas.style.backgroundColor = 'rgba(255, 255, 255, 1)';\n    canvas.style.border = `1px dashed ${defaultRolePalette[this.signer % 100].s60}`;\n    canvas.innerHTML = this.formElementType;\n    document.body.appendChild(canvas); \n\n    event.dataTransfer.setDragImage(canvas, -50, -20);\n\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=\"1.25rem\" />\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'} data-tooltip={`${this.label} Field Required`} data-tooltip-placement=\"left\">\n              <ls-icon name=\"exclamation-circle\" size=\"1.125rem\" solid />\n            </div>\n          )}\n          <ls-icon name=\"drag-vertical\" size=\"1rem\" 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

@@ -51,7 +51,7 @@ export class LsTooltip {
         innerTooltip.classList.add('hidden');
     }
     render() {
-        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' })));
+        return (h("div", { key: '0e5642c211c164f0f6d9e8221be4d668eedc3b74', id: "ls-tooltip-inner", class: "tooltip hidden", role: "tooltip" }, h("div", { key: '2354cb2b4689c02d9dc4573b1a41b043f2da59e8', id: "arrow" }), this.tooltipTitle && h("p", { key: '1d1c7a8a5c3cf388ef202a77ab4b242129572276', class: "tooltip-title" }, this.tooltipTitle), this.tooltipText, h("slot", { key: 'e8cb721e79f022387958f5b5357db677477a996a' })));
     }
     static get is() { return "ls-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@
 
 .valid-label {
   display: flex;
-  padding: 2px 0.5rem;
+  padding: 0.125rem 0.5rem;
   justify-content: center;
   align-items: center;
   gap: 0.25rem;
@@ -130,7 +130,7 @@
 
 .role-label {
   display: flex;
-  padding: 2px 3px;
+  padding: 0.125rem 0.1875rem;
   justify-content: center;
   align-items: center;
   border-radius: 0.25rem;