legalesign-document-viewer 0.3.4 → 0.3.6

package/dist/components/{p-ji6hTzlP.js → p-DO4zTNa2.js}

@@ -1,15 +1,17 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-BvHSBTD8.js';
-import { d as defineCustomElement$b } from './p-CktqjOO6.js';
-import { d as defineCustomElement$a } from './p-Bxutt9rC.js';
-import { d as defineCustomElement$9 } from './p-B3lY01RV.js';
-import { d as defineCustomElement$8 } from './p-C6NnNmx5.js';
-import { d as defineCustomElement$7 } from './p-CzySwvIU.js';
-import { d as defineCustomElement$6 } from './p-vV0A8m2N.js';
-import { d as defineCustomElement$5 } from './p-Co6xLkEu.js';
-import { d as defineCustomElement$4 } from './p-DM3pnD5z.js';
-import { d as defineCustomElement$3 } from './p-iwXLSFLX.js';
-import { d as defineCustomElement$2 } from './p-BLUUNyDx.js';
-import { d as defineCustomElement$1 } from './p-BArjC51C.js';
+import { d as defineCustomElement$d } from './p-DZm_unSc.js';
+import { d as defineCustomElement$c } from './p-D_bOpI93.js';
+import { d as defineCustomElement$b } from './p-Ccn3ZZcu.js';
+import { d as defineCustomElement$a } from './p-Jxy3zvjl.js';
+import { d as defineCustomElement$9 } from './p-CesULiVv.js';
+import { d as defineCustomElement$8 } from './p-Pb_M5CHe.js';
+import { d as defineCustomElement$7 } from './p-ByytASxI.js';
+import { d as defineCustomElement$6 } from './p-D8-qPGsJ.js';
+import { d as defineCustomElement$5 } from './p-DdA-gazu.js';
+import { d as defineCustomElement$4 } from './p-ChsJHskx.js';
+import { d as defineCustomElement$3 } from './p-DmpTMpIK.js';
+import { d as defineCustomElement$2 } from './p-DYigxUng.js';
+import { d as defineCustomElement$1 } from './p-CZoubBus.js';
 
 const lsFieldPropertiesFileCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}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:36px;width:100%}.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{display:flex;gap:0.5rem;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;font-weight:500;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.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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)}";
 
@@ -21,7 +23,7 @@ const LsFieldPropertiesFile = /*@__PURE__*/ proxyCustomElement(class LsFieldProp
     }
     dataItem;
     render() {
-        return (h(Host, { key: 'bee6d5d0d1f6520b1784585b0ea4517faabdda70' }, h("ls-field-properties-container", { key: 'a37773f2fc761aac6ad779a83f833d7b268949c4', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: '68bc9c76ab775a782330f02da0534b4b76f842f5', class: 'field-set', slot: "content" }, h("ls-field-content", { key: '223ce26cb3a8afcbe12d356a346f682a07c4cbae', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '829a97eb8b576280cf9a8ce2d8497c51e293244b', dataItem: this.dataItem })), h("div", { key: '2ec54dd64c0303fd63cdeb9f9eb4263ac39e8fbe', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: '111fd6c0372890cbce36e2dc22a991c8decc95d0', dataItem: this.dataItem })), h("div", { key: '425689aebfda1c89de75fe9471db3937053a2a1b', class: 'field-set', slot: "placement" }, h("ls-field-placement", { key: '7bedf59453fb4083dfa2e1b1976fb139600d1325', dataItem: this.dataItem }))), h("ls-field-footer", { key: 'bf6a97a46730aa15abd404a5b11737ece8acbfab', dataItem: this.dataItem })));
+        return (h(Host, { key: '1e3a7c0045f2e72b052c5f9a54341dafcd3a3149' }, h("ls-field-properties-container", { key: 'dcb007bdba4c3f75596e87438ecd7d842aaa6565', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: 'b600839ccc215e04e4c3a953a351e1f3e158e1b8', class: 'field-set', slot: "content" }, h("ls-field-content", { key: 'e99eb57a3b3b7b754a06b2d258de95518b11b199', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '0597111d92912664e115c1db378230d3094077ba', dataItem: this.dataItem })), h("div", { key: '192c1a6b79edd8b236c6f2d14053f28081e420f4', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: '0e9652e0dc2680404ffbe1340f58619d8dca1817', dataItem: this.dataItem })), h("div", { key: '284f7d5aab3cd171834cf9defd3fb719cfefe59b', class: 'field-set', slot: "placement" }, h("ls-field-placement", { key: 'c2eff6b89658b46d0fd75084a0eb5021635b745c', dataItem: this.dataItem }))), h("ls-field-footer", { key: '5a7c665c97189fbaa313f9e55c8d8123e0f4176e', dataItem: this.dataItem })));
     }
     static get style() { return lsFieldPropertiesFileCss; }
 }, [257, "ls-field-properties-file", {
@@ -31,64 +33,74 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ls-field-properties-file", "ls-field-content", "ls-field-dimensions", "ls-field-footer", "ls-field-placement", "ls-field-properties-advanced", "ls-field-properties-container", "ls-field-type-display", "ls-icon", "ls-input-wrapper", "ls-props-section", "ls-toggle"];
+    const components = ["ls-field-properties-file", "ls-editor-field", "ls-field-content", "ls-field-dimensions", "ls-field-footer", "ls-field-placement", "ls-field-properties-advanced", "ls-field-properties-container", "ls-field-type-display", "ls-icon", "ls-input-wrapper", "ls-props-section", "ls-toggle", "ls-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-field-properties-file":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, LsFieldPropertiesFile);
             }
             break;
+        case "ls-editor-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
         case "ls-field-content":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "ls-field-dimensions":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "ls-field-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "ls-field-placement":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "ls-field-properties-advanced":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "ls-field-properties-container":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "ls-field-type-display":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "ls-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "ls-input-wrapper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "ls-props-section":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "ls-toggle":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }
@@ -98,6 +110,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldPropertiesFile as L, defineCustomElement as d };
-//# sourceMappingURL=p-ji6hTzlP.js.map
+//# sourceMappingURL=p-DO4zTNa2.js.map
 
-//# sourceMappingURL=p-ji6hTzlP.js.map
+//# sourceMappingURL=p-DO4zTNa2.js.map

package/dist/components/p-DO4zTNa2.js.map

@@ -0,0 +1 @@
+{"file":"p-DO4zTNa2.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,ktJAAktJ;;MCQtuJ,qBAAqB,iBAAAA,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;;;;;;AACxB,IAAA,QAAQ;IAEhB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,SAAS,EAAA,EACrC,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,YAAY,EAAA,EACxC,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC3C,CACwB,EAChC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-file/ls-field-properties-file.css?tag=ls-field-properties-file&encapsulation=shadow","src/components/ls-field-properties-file/ls-field-properties-file.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n* {\n  margin: 0;\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n  width: 100%;\n}\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  display: flex;\n  gap: 0.5rem;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  font-weight: 500;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background-color: white;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-file',\n  styleUrl: 'ls-field-properties-file.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesFile {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n          <div class={'field-set'} slot=\"content\">\n            <ls-field-content dataItem={this.dataItem} />\n            <ls-field-properties-advanced dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"dimensions\">\n            <ls-field-dimensions dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"placement\">\n            <ls-field-placement dataItem={this.dataItem} />\n          </div>\n        </ls-field-properties-container>\n        <ls-field-footer dataItem={this.dataItem} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CdGtJRZm.js → p-DPHDQvBy.js}

@@ -31,7 +31,7 @@ const LsEditorTable = /*@__PURE__*/ proxyCustomElement(class LsEditorTable exten
         });
     }
     render() {
-        return (h(Host, { key: '5843064d233783ed3c491d399c415d281ed35e11' }, h("table", { key: '8a6d6d1dc717876eb4401f76f8dc280b957fdeb7', id: "ls-editor-table" }), h("slot", { key: '334d466e08ed2490fa88ef774912b469fde0a287' })));
+        return (h(Host, { key: '126032b55f6bb30ab2dd1b164e6f85ed4b29062d' }, h("table", { key: '03f13566a1c1ec6b0c214ce9bfeb13825d8f4be1', id: "ls-editor-table" }), h("slot", { key: 'e33ba6a318a2a6569dbb8659bffa542e9a71bcd1' })));
     }
     static get style() { return lsEditorTableCss; }
 }, [257, "ls-editor-table", {
@@ -53,6 +53,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsEditorTable as L, defineCustomElement as d };
-//# sourceMappingURL=p-CdGtJRZm.js.map
+//# sourceMappingURL=p-DPHDQvBy.js.map
 
-//# sourceMappingURL=p-CdGtJRZm.js.map
+//# sourceMappingURL=p-DPHDQvBy.js.map

package/dist/components/{p-CdGtJRZm.js.map → p-DPHDQvBy.js.map}

@@ -1 +1 @@
-{"file":"p-CdGtJRZm.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,mJAAmJ;;MCQ/J,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;AAExB;;;AAGA;AACQ,IAAA,MAAM;IAEd,gBAAgB,GAAA;AACd,QAAA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,iBAAiB,CAAsB;QAChG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;YAE5F,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAC5C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAC/C,UAAU,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE;AACrC,YAAA,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC;YAE/B,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAClD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK;AAC3C,YAAA,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC;YAElC,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAClD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK;AAC3C,YAAA,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC;AAElC,YAAA,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;AAChC,SAAC,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,iBAAiB,EACnB,CAAA,EACR,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-editor-table/ls-editor-table.css?tag=ls-editor-table&encapsulation=shadow","src/components/ls-editor-table/ls-editor-table.tsx"],"sourcesContent":[":host {\n  display: block;\n  z-index: 100;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n}\n\ntable {\n  background-color: azure;\n  border: 1px solid black\n}\n\ntd {\n  border: 1px solid black\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\n\n@Component({\n  tag: 'ls-editor-table',\n  styleUrl: 'ls-editor-table.css',\n  shadow: true,\n})\nexport class LsEditorTable {\n  @Element() component: HTMLElement;\n  /**\n* The parent editor control.\n* {LsDocumentViewer}\n*/\n  @Prop() editor: LsDocumentViewer;\n\n  componentDidLoad() {\n    var dataTable = this.component.shadowRoot.getElementById('ls-editor-table') as HTMLCanvasElement;\n    Array.from(this.editor.component.shadowRoot.querySelectorAll('ls-editor-field')).forEach(fx => {\n\n      const rowNode = document.createElement('tr');\n      const idCellNode = document.createElement('td');\n      idCellNode.innerText = fx.dataItem.id\n      rowNode.appendChild(idCellNode);\n\n      const valueCellNode = document.createElement('td');\n      valueCellNode.innerText = fx.dataItem.value\n      rowNode.appendChild(valueCellNode);\n\n      const labelCellNode = document.createElement('td');\n      labelCellNode.innerText = fx.dataItem.label\n      rowNode.appendChild(labelCellNode);\n\n      dataTable.appendChild(rowNode)\n    })\n  }\n\n  render() {\n    return (\n      <Host>\n        <table id=\"ls-editor-table\">\n        </table>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DPHDQvBy.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,mJAAmJ;;MCQ/J,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;AAExB;;;AAGA;AACQ,IAAA,MAAM;IAEd,gBAAgB,GAAA;AACd,QAAA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,iBAAiB,CAAsB;QAChG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;YAE5F,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAC5C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAC/C,UAAU,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE;AACrC,YAAA,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC;YAE/B,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAClD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK;AAC3C,YAAA,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC;YAElC,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAClD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK;AAC3C,YAAA,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC;AAElC,YAAA,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;AAChC,SAAC,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,iBAAiB,EACnB,CAAA,EACR,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-editor-table/ls-editor-table.css?tag=ls-editor-table&encapsulation=shadow","src/components/ls-editor-table/ls-editor-table.tsx"],"sourcesContent":[":host {\n  display: block;\n  z-index: 100;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n}\n\ntable {\n  background-color: azure;\n  border: 1px solid black\n}\n\ntd {\n  border: 1px solid black\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\n\n@Component({\n  tag: 'ls-editor-table',\n  styleUrl: 'ls-editor-table.css',\n  shadow: true,\n})\nexport class LsEditorTable {\n  @Element() component: HTMLElement;\n  /**\n* The parent editor control.\n* {LsDocumentViewer}\n*/\n  @Prop() editor: LsDocumentViewer;\n\n  componentDidLoad() {\n    var dataTable = this.component.shadowRoot.getElementById('ls-editor-table') as HTMLCanvasElement;\n    Array.from(this.editor.component.shadowRoot.querySelectorAll('ls-editor-field')).forEach(fx => {\n\n      const rowNode = document.createElement('tr');\n      const idCellNode = document.createElement('td');\n      idCellNode.innerText = fx.dataItem.id\n      rowNode.appendChild(idCellNode);\n\n      const valueCellNode = document.createElement('td');\n      valueCellNode.innerText = fx.dataItem.value\n      rowNode.appendChild(valueCellNode);\n\n      const labelCellNode = document.createElement('td');\n      labelCellNode.innerText = fx.dataItem.label\n      rowNode.appendChild(labelCellNode);\n\n      dataTable.appendChild(rowNode)\n    })\n  }\n\n  render() {\n    return (\n      <Host>\n        <table id=\"ls-editor-table\">\n        </table>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BXKYpxgM.js → p-DRlasxvX.js}

@@ -1,5 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BvHSBTD8.js';
-import { d as defineCustomElement$1 } from './p-DM3pnD5z.js';
+import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
+import { d as defineCustomElement$2 } from './p-DdA-gazu.js';
+import { d as defineCustomElement$1 } from './p-CZoubBus.js';
 
 const lsFeatureColumnCss = ":host{display:flex;flex-direction:column;gap:0.5rem}.activeIcon,.defaultIcon{padding:0.75rem;border-radius:0.75rem;color:var(--gray-80, #787A80)}.defaultIcon:hover{background-color:var(--primary-10, #EFF4FF);color:var(--primary-100, #0C1457);cursor:pointer}.activeIcon{background-color:var(--primary-60, #4456F6);color:var(--white, #fff)}";
 
@@ -10,6 +12,7 @@ const LsFeatureColoumn = /*@__PURE__*/ proxyCustomElement(class LsFeatureColoumn
         this.__attachShadow();
         this.manage = createEvent(this, "manage");
     }
+    get component() { return this; }
     /**
      * Determines / sets which of the far left 'managers' is active.
      * {'document' | 'toolbox' | 'participant' }
@@ -17,18 +20,21 @@ const LsFeatureColoumn = /*@__PURE__*/ proxyCustomElement(class LsFeatureColoumn
     manager = 'toolbox';
     // Send an manager change up the DOM
     manage;
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
     render() {
-        return (h(Host, { key: 'c153ff8227ffe959671bd72b62eef1be0d6ea0a5' }, h("div", { key: 'febf78c0ccc42e2511b52419955e28017b6d617c', class: this.manager === 'document' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+        return (h(Host, { key: 'f8397442545d0e798a66f31035311cae3bf41c9d' }, h("div", { key: '4db303dd905925d47d2dd28170a56cd8e7f8c2d4', class: this.manager === 'document' ? 'activeIcon' : 'defaultIcon', onClick: () => {
                 console.log('document');
                 this.manage.emit('document');
                 this.manager = 'document';
-            } }, h("ls-icon", { key: '027568b936d809b03eecc895fcfab24cd65e7fa3', name: "document", size: "24" })), h("div", { key: '3fe1542a7c2053dcca881682eb29859f4bf7a914', class: this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+            }, "data-tooltip-title": "Template Details", "data-tooltip": "View and edit Template properties", "data-tooltip-placement": "right" }, h("ls-icon", { key: 'b5043c55eddec92dca33ef147c11df9bd48fd6fe', name: "document", size: "24" })), h("div", { key: 'e02c5613c1dbd96b7ddb968972a522abec80fbf3', class: this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon', onClick: () => {
                 this.manage.emit('toolbox');
                 this.manager = 'toolbox';
-            } }, h("ls-icon", { key: '2656bb9ebbcec8dbf2a5519e9f80ceb734413828', name: "typing-input", size: "24" })), h("div", { key: '46abc8a29b3488273d669089602ed902752b1145', class: this.manager === 'participant' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+            }, "data-tooltip-title": "Field Types", "data-tooltip": "Select and place Form Field Elements", "data-tooltip-placement": "right" }, h("ls-icon", { key: '9ff52bec37456480b5741ea3bbedf0d56881b0e7', name: "typing-input", size: "24" })), h("div", { key: '364765ec9efe822ddc67f6e75df5b10d195f9f01', class: this.manager === 'participant' ? 'activeIcon' : 'defaultIcon', onClick: () => {
                 this.manage.emit('participant');
                 this.manager = 'participant';
-            } }, h("ls-icon", { key: '173f5cc9556a37f7502fb7c02e1644659dd65b16', name: "user-group", size: "24" })), h("slot", { key: '856f4c459eb86ae32eb564c5024f64231f9cc8a1' })));
+            }, "data-tooltip-title": "Participants", "data-tooltip": "Manage Signers, Witnesses and Approvers", "data-tooltip-placement": "right" }, h("ls-icon", { key: 'f8e16dc093e911319df9e4970469ab76abbe7c78', name: "user-group", size: "24" })), h("slot", { key: '3caabbffd188f76168904ffe2d08445f4a009389' }), h("ls-tooltip", { key: '5a645c4907a67e0fb3d82705d751b4dd82953505', id: "ls-tooltip-master" })));
     }
     static get style() { return lsFeatureColumnCss; }
 }, [257, "ls-feature-column", {
@@ -38,7 +44,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ls-feature-column", "ls-icon"];
+    const components = ["ls-feature-column", "ls-icon", "ls-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-feature-column":
             if (!customElements.get(tagName)) {
@@ -46,6 +52,11 @@ function defineCustomElement() {
             }
             break;
         case "ls-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }
@@ -55,6 +66,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFeatureColoumn as L, defineCustomElement as d };
-//# sourceMappingURL=p-BXKYpxgM.js.map
+//# sourceMappingURL=p-DRlasxvX.js.map
 
-//# sourceMappingURL=p-BXKYpxgM.js.map
+//# sourceMappingURL=p-DRlasxvX.js.map

package/dist/components/p-DRlasxvX.js.map

@@ -0,0 +1 @@
+{"file":"p-DRlasxvX.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,oVAAoV;;MCQlW,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;;AAE3B;;;AAGG;IACsB,OAAO,GAA2C,SAAS;;AAG3E,IAAA,MAAM;IAEf,gBAAgB,GAAA;AACd,QAAA,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU,GAAG,YAAY,GAAG,aAAa,EACjE,OAAO,EAAE,MAAK;AACZ,gBAAA,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;AACvB,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;AAC5B,gBAAA,IAAI,CAAC,OAAO,GAAG,UAAU;AAC3B,aAAC,EACkB,oBAAA,EAAA,kBAAkB,EACxB,cAAA,EAAA,mCAAmC,4BACzB,OAAO,EAAA,EAE9B,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,GAAG,CACjC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG,aAAa,EAChE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3B,gBAAA,IAAI,CAAC,OAAO,GAAG,SAAS;AAC1B,aAAC,EACkB,oBAAA,EAAA,aAAa,EACnB,cAAA,EAAA,sCAAsC,4BAC5B,OAAO,EAAA,EAE9B,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa,GAAG,YAAY,GAAG,aAAa,EACpE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;AAC/B,gBAAA,IAAI,CAAC,OAAO,GAAG,aAAa;AAC9B,aAAC,EACkB,oBAAA,EAAA,cAAc,EACpB,cAAA,EAAA,yCAAyC,4BAC/B,OAAO,EAAA,EAE9B,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,CACnC,EAEN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,EAAE,EAAC,mBAAmB,EAAG,CAAA,CAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-feature-column/ls-feature-column.css?tag=ls-feature-column&encapsulation=shadow","src/components/ls-feature-column/ls-feature-column.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n}\n\n.activeIcon, .defaultIcon {\n  padding: 0.75rem;\n  border-radius: 0.75rem;\n  color: var(--gray-80, #787A80);\n}\n\n.defaultIcon:hover {\n  background-color: var(--primary-10, #EFF4FF);\n  color: var(--primary-100, #0C1457);\n  cursor: pointer;\n}\n\n.activeIcon {\n  background-color: var(--primary-60, #4456F6);\n  color: var(--white, #fff);\n}","import { Component, Host, Prop, h, EventEmitter, Event, Element } from '@stencil/core';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-feature-column',\n  styleUrl: 'ls-feature-column.css',\n  shadow: true,\n})\nexport class LsFeatureColoumn {\n  @Element() component: HTMLElement;\n  /**\n   * Determines / sets which of the far left 'managers' is active.\n   * {'document' | 'toolbox' | 'participant' }\n   */\n  @Prop({ mutable: true }) manager: 'document' | 'toolbox' | 'participant' = 'toolbox';\n\n  // Send an manager change up the DOM\n  @Event() manage: EventEmitter<'document' | 'toolbox' | 'participant'>;\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.manager === 'document' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            console.log('document');\n            this.manage.emit('document');\n            this.manager = 'document';\n          }}\n          data-tooltip-title=\"Template Details\"\n          data-tooltip=\"View and edit Template properties\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"document\" size=\"24\" />\n        </div>\n        <div\n          class={this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('toolbox');\n            this.manager = 'toolbox';\n          }}\n          data-tooltip-title=\"Field Types\"\n          data-tooltip=\"Select and place Form Field Elements\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"typing-input\" size=\"24\" />\n        </div>\n        <div\n          class={this.manager === 'participant' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('participant');\n            this.manager = 'participant';\n          }}\n          data-tooltip-title=\"Participants\"\n          data-tooltip=\"Manage Signers, Witnesses and Approvers\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"user-group\" size=\"24\" />\n        </div>\n\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-hUeqWmAs.js → p-DSWW2hzE.js}

@@ -1,28 +1,30 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-BvHSBTD8.js';
-import { d as defineCustomElement$o } from './p-DxGzQ3Lc.js';
-import { d as defineCustomElement$n } from './p-CktqjOO6.js';
-import { d as defineCustomElement$m } from './p-Bxutt9rC.js';
-import { d as defineCustomElement$l } from './p-BOKGHQS9.js';
-import { d as defineCustomElement$k } from './p-B3lY01RV.js';
-import { d as defineCustomElement$j } from './p-C6NnNmx5.js';
-import { d as defineCustomElement$i } from './p-CzySwvIU.js';
-import { d as defineCustomElement$h } from './p-14owczyX.js';
-import { d as defineCustomElement$g } from './p-vV0A8m2N.js';
-import { d as defineCustomElement$f } from './p-JFkSKN19.js';
-import { d as defineCustomElement$e } from './p-DDWmD8TQ.js';
-import { d as defineCustomElement$d } from './p-ji6hTzlP.js';
-import { d as defineCustomElement$c } from './p-bNVYQ-ag.js';
-import { d as defineCustomElement$b } from './p-CvqT5MA7.js';
-import { d as defineCustomElement$a } from './p-1wdCYLqw.js';
-import { d as defineCustomElement$9 } from './p-B0uVP8it.js';
-import { d as defineCustomElement$8 } from './p-C0t7MuwE.js';
-import { d as defineCustomElement$7 } from './p-BBuk6A32.js';
-import { d as defineCustomElement$6 } from './p-6LFAGg6D.js';
-import { d as defineCustomElement$5 } from './p-Co6xLkEu.js';
-import { d as defineCustomElement$4 } from './p-DM3pnD5z.js';
-import { d as defineCustomElement$3 } from './p-iwXLSFLX.js';
-import { d as defineCustomElement$2 } from './p-BLUUNyDx.js';
-import { d as defineCustomElement$1 } from './p-BArjC51C.js';
+import { d as defineCustomElement$q } from './p-DZm_unSc.js';
+import { d as defineCustomElement$p } from './p-C3Yf2XxL.js';
+import { d as defineCustomElement$o } from './p-D_bOpI93.js';
+import { d as defineCustomElement$n } from './p-Ccn3ZZcu.js';
+import { d as defineCustomElement$m } from './p-BfYQbwHx.js';
+import { d as defineCustomElement$l } from './p-Jxy3zvjl.js';
+import { d as defineCustomElement$k } from './p-CesULiVv.js';
+import { d as defineCustomElement$j } from './p-Pb_M5CHe.js';
+import { d as defineCustomElement$i } from './p-sXbu_0hu.js';
+import { d as defineCustomElement$h } from './p-ByytASxI.js';
+import { d as defineCustomElement$g } from './p-Z79iUN1m.js';
+import { d as defineCustomElement$f } from './p-BnXLoyl5.js';
+import { d as defineCustomElement$e } from './p-DO4zTNa2.js';
+import { d as defineCustomElement$d } from './p-hM61nVV6.js';
+import { d as defineCustomElement$c } from './p-yqhOKUzi.js';
+import { d as defineCustomElement$b } from './p-D7BMvkxF.js';
+import { d as defineCustomElement$a } from './p-Ymh-2OnV.js';
+import { d as defineCustomElement$9 } from './p-B6WHuozd.js';
+import { d as defineCustomElement$8 } from './p-CHTd656b.js';
+import { d as defineCustomElement$7 } from './p-CIaA9Qz9.js';
+import { d as defineCustomElement$6 } from './p-D8-qPGsJ.js';
+import { d as defineCustomElement$5 } from './p-DdA-gazu.js';
+import { d as defineCustomElement$4 } from './p-ChsJHskx.js';
+import { d as defineCustomElement$3 } from './p-DmpTMpIK.js';
+import { d as defineCustomElement$2 } from './p-DYigxUng.js';
+import { d as defineCustomElement$1 } from './p-CZoubBus.js';
 
 const lsFieldPropertiesCss = ":host{display:block;width:100%;padding:1rem}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:36px}.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)}";
 
@@ -70,7 +72,7 @@ const LsFieldProperties = /*@__PURE__*/ proxyCustomElement(class LsFieldProperti
         event.stopPropagation();
     };
     render() {
-        return (h(Host, { key: '1e03ad4e124276ccfa66cea66dce135720ae6f53', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.renderFields(), h("slot", { key: 'af5b649c1263811b7e6ccd7780d102eab5cb57f8' })));
+        return (h(Host, { key: 'fc84bd7b1057b272a963043bc7e3072d35be6c19', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.renderFields(), h("slot", { key: 'bbaa6abf627bcdbd72cb4505b6d6abc9f7c3e2ef' })));
     }
     static get style() { return lsFieldPropertiesCss; }
 }, [257, "ls-field-properties", {
@@ -80,129 +82,139 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ls-field-properties", "ls-field-alignment", "ls-field-content", "ls-field-dimensions", "ls-field-distribute", "ls-field-footer", "ls-field-placement", "ls-field-properties-advanced", "ls-field-properties-autosign", "ls-field-properties-container", "ls-field-properties-date", "ls-field-properties-email", "ls-field-properties-file", "ls-field-properties-general", "ls-field-properties-image", "ls-field-properties-multiple", "ls-field-properties-number", "ls-field-properties-signature", "ls-field-properties-text", "ls-field-size", "ls-field-type-display", "ls-icon", "ls-input-wrapper", "ls-props-section", "ls-toggle"];
+    const components = ["ls-field-properties", "ls-editor-field", "ls-field-alignment", "ls-field-content", "ls-field-dimensions", "ls-field-distribute", "ls-field-footer", "ls-field-placement", "ls-field-properties-advanced", "ls-field-properties-autosign", "ls-field-properties-container", "ls-field-properties-date", "ls-field-properties-email", "ls-field-properties-file", "ls-field-properties-general", "ls-field-properties-image", "ls-field-properties-multiple", "ls-field-properties-number", "ls-field-properties-signature", "ls-field-properties-text", "ls-field-size", "ls-field-type-display", "ls-icon", "ls-input-wrapper", "ls-props-section", "ls-toggle", "ls-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-field-properties":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, LsFieldProperties);
             }
             break;
+        case "ls-editor-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$q();
+            }
+            break;
         case "ls-field-alignment":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "ls-field-content":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "ls-field-dimensions":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "ls-field-distribute":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "ls-field-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "ls-field-placement":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "ls-field-properties-advanced":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "ls-field-properties-autosign":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "ls-field-properties-container":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "ls-field-properties-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "ls-field-properties-email":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "ls-field-properties-file":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "ls-field-properties-general":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "ls-field-properties-image":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "ls-field-properties-multiple":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "ls-field-properties-number":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "ls-field-properties-signature":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "ls-field-properties-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "ls-field-size":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "ls-field-type-display":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "ls-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "ls-input-wrapper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "ls-props-section":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "ls-toggle":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }
@@ -212,6 +224,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldProperties as L, defineCustomElement as d };
-//# sourceMappingURL=p-hUeqWmAs.js.map
+//# sourceMappingURL=p-DSWW2hzE.js.map
 
-//# sourceMappingURL=p-hUeqWmAs.js.map
+//# sourceMappingURL=p-DSWW2hzE.js.map

package/dist/components/p-DSWW2hzE.js.map

@@ -0,0 +1 @@
+{"file":"p-DSWW2hzE.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,q3IAAq3I;;MCQr4I,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;AACpB,IAAA,QAAQ;IAEhB,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,KAAK,CAAC,EAAE;YAChD,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe;AACtC,gBAAA,KAAK,WAAW;AACd,oBAAA,OAAO,CAAA,CAAA,+BAAA,EAAA,EAA+B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACtE,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,CAAA,CAAA,0BAAA,EAAA,EAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACjE,gBAAA,KAAK,UAAU;AACb,oBAAA,OAAO,CAAA,CAAA,0BAAA,EAAA,EAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACjE,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,CAAA,CAAA,0BAAA,EAAA,EAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACjE,gBAAA,KAAK,QAAQ;AACX,oBAAA,OAAO,CAAA,CAAA,4BAAA,EAAA,EAA4B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACnE,gBAAA,KAAK,UAAU;AACb,oBAAA,OAAO,CAAA,CAAA,8BAAA,EAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACrE,gBAAA,KAAK,OAAO;AACV,oBAAA,OAAO,CAAA,CAAA,2BAAA,EAAA,EAA2B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AAClE,gBAAA,KAAK,OAAO;AACV,oBAAA,OAAO,CAAA,CAAA,2BAAA,EAAA,EAA2B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AAClE,gBAAA,KAAK,MAAM;AACT,oBAAA,OAAO,CAAA,CAAA,0BAAA,EAAA,EAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACjE,gBAAA,KAAK,UAAU;AACb,oBAAA,OAAO,CAAA,CAAA,0BAAA,EAAA,EAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;AACjE,gBAAA;AACE,oBAAA,OAAO,CAAA,CAAA,6BAAA,EAAA,EAA6B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAA,CAAI;;;aAGjE,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC;AACnD,YAAA,OAAO,oCAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;;AAI5D,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;QAC/C,KAAK,CAAC,eAAe,EAAE;AACzB,KAAC;AAEO,IAAA,WAAW,GAAG,CAAC,KAAoB,KAAI;QAC7C,KAAK,CAAC,eAAe,EAAE;AACzB,KAAC;IAED,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAC3D,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE,EACrC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties/ls-field-properties.css?tag=ls-field-properties&encapsulation=shadow","src/components/ls-field-properties/ls-field-properties.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  padding: 1rem;\n}\n\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n}\n\n.input-wrapper {\n  position: relative;\n  width: fit-content;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\n\n@Component({\n  tag: 'ls-field-properties',\n  styleUrl: 'ls-field-properties.css',\n  shadow: true,\n})\nexport class LsFieldProperties {\n  @Prop() dataItem: LSApiElement[];\n\n  renderFields() {\n    if (this.dataItem && this.dataItem?.length === 1) {\n      switch (this.dataItem[0].formElementType) {\n        case 'signature':\n          return <ls-field-properties-signature dataItem={this.dataItem[0]} />\n        case 'date':\n          return <ls-field-properties-date dataItem={this.dataItem[0]} />\n        case 'autodate':\n          return <ls-field-properties-date dataItem={this.dataItem[0]} />\n        case 'text':\n          return <ls-field-properties-text dataItem={this.dataItem[0]} />\n        case 'number':\n          return <ls-field-properties-number dataItem={this.dataItem[0]} />\n        case 'autosign':\n          return <ls-field-properties-autosign dataItem={this.dataItem[0]} />\n        case 'email':\n          return <ls-field-properties-email dataItem={this.dataItem[0]} />\n        case 'image':\n          return <ls-field-properties-image dataItem={this.dataItem[0]} />\n        case 'file':\n          return <ls-field-properties-file dataItem={this.dataItem[0]} />\n        case 'dropdown':\n          return <ls-field-properties-file dataItem={this.dataItem[0]} />\n        default:\n          return <ls-field-properties-general dataItem={this.dataItem[0]} />\n\n      }\n    } else if (this.dataItem && this.dataItem?.length > 1)\n      return <ls-field-properties-multiple dataItem={this.dataItem} />\n\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  }\n\n  private handleKeyUp = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  }\n\n  render() {\n    return (\n      <Host onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp}>\n        {this.dataItem && this.renderFields()}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}