legalesign-document-viewer 0.1.0 → 0.1.2

package/dist/components/p-CnIzN0a9.js

@@ -0,0 +1,49 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
+import { d as defineCustomElement$2 } from './p-py-rQZsT.js';
+import { d as defineCustomElement$1 } from './p-DtHDNV_x.js';
+
+const lsFieldPropertiesAutosignCss = ":host{display:block}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)}";
+
+const LsFieldPropertiesAutosign = /*@__PURE__*/ proxyCustomElement(class LsFieldPropertiesAutosign extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    dataItem;
+    render() {
+        return (h(Host, { key: 'ef859b2117bdedccae56214ddd7b375f8ada8e87' }, h("div", { key: '37cdf936c339386dd2307b4bcb39e6fc52aeecf3', class: "ls-field-properties-section" }, "Self Sign Field"), h("div", { key: 'fc221640e08436c16cdd4515119dc07456245f3d' }, "Label: ", h("input", { key: '54b60ba302a743592c6179a8dd6be9af3446b7d1', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '34595223e6d6bdddb325adaa6f3580a72802e12f', dataItem: this.dataItem }), h("slot", { key: 'f7bc363dc0246a2050514db7438924b4a1f47bfe' })));
+    }
+    static get style() { return lsFieldPropertiesAutosignCss; }
+}, [257, "ls-field-properties-autosign", {
+        "dataItem": [16, "data-item"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-field-properties-autosign", "ls-field-dimensions", "ls-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-field-properties-autosign":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LsFieldPropertiesAutosign);
+            }
+            break;
+        case "ls-field-dimensions":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsFieldPropertiesAutosign as L, defineCustomElement as d };
+//# sourceMappingURL=p-CnIzN0a9.js.map
+
+//# sourceMappingURL=p-CnIzN0a9.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CnIzN0a9.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,61IAA61I;;MCQr3I,yBAAyB,iBAAAA,kBAAA,CAAA,MAAA,yBAAA,SAAAC,CAAA,CAAA;;;;;;AAC5B,IAAA,QAAQ;IAEf,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,6BAA6B,EAAuB,EAAA,iBAAA,CAAA,EAChE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAY,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,EAAA,CAAE,CAAM,EAClE,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAChD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-autosign/ls-field-properties-autosign.css?tag=ls-field-properties-autosign&encapsulation=shadow","src/components/ls-field-properties-autosign/ls-field-properties-autosign.tsx"],"sourcesContent":[":host {\n  display: block;\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\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-autosign',\n  styleUrl: 'ls-field-properties-autosign.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesAutosign {\n  @Prop() dataItem: LSApiElement;\n \n   render() {\n     return (\n       <Host>\n         <div class={\"ls-field-properties-section\"}>Self Sign Field</div>\n         <div>Label: <input value={this.dataItem?.label} width=\"30\"/></div>\n         <ls-field-dimensions dataItem={this.dataItem} />\n         <slot></slot>\n       </Host>\n     );\n   }\n}\n"],"version":3}

package/dist/components/p-CpK4mw5O.js

@@ -0,0 +1,60 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
+import { d as defineCustomElement$1 } from './p-DtHDNV_x.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)}";
+
+const LsFeatureColoumn = /*@__PURE__*/ proxyCustomElement(class LsFeatureColoumn extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.manage = createEvent(this, "manage");
+    }
+    /**
+     * Determines / sets which of the far left 'managers' is active.
+     * {'document' | 'toolbox' | 'participant' }
+     */
+    manager = 'toolbox';
+    // Send an manager change up the DOM
+    manage;
+    render() {
+        return (h(Host, { key: 'aebd8c74fa175f911dacb77740c787c564049e7b' }, h("div", { key: 'cfd4c5438341e029807e26dd7a6e513c16cead1e', class: this.manager === 'document' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                console.log('document');
+                this.manage.emit('document');
+                this.manager = 'document';
+            } }, h("ls-icon", { key: 'cd7dad83c7b45fbbd73a734e6d45b8f74bcad5db', name: "document", size: "24" })), h("div", { key: '86f2370a984220a01aafd8d0b0bcad6bb083586c', class: this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                this.manage.emit('toolbox');
+                this.manager = 'toolbox';
+            } }, h("ls-icon", { key: 'a4ce3440b682ee0890ef5a4111a6f478007aa963', name: "typing-input", size: "24" })), h("div", { key: '30deca23fcadc0e3f8c8b9c2d912842a4e3b5b06', class: this.manager === 'participant' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                this.manage.emit('participant');
+                this.manager = 'participant';
+            } }, h("ls-icon", { key: 'f192ca05928ef54523b9bf36d4627667e6490da2', name: "user-group", size: "24" })), h("slot", { key: '69bf66c9594d5cff7cb117aa309f8b58bbef77c2' })));
+    }
+    static get style() { return lsFeatureColumnCss; }
+}, [257, "ls-feature-column", {
+        "manager": [1025]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-feature-column", "ls-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-feature-column":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LsFeatureColoumn);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsFeatureColoumn as L, defineCustomElement as d };
+//# sourceMappingURL=p-CpK4mw5O.js.map
+
+//# sourceMappingURL=p-CpK4mw5O.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CpK4mw5O.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,oVAAoV;;MCOlW,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;AAC3B;;;AAGG;IACsB,OAAO,GAA2C,SAAS;;AAG3E,IAAA,MAAM;IAEf,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;aAC1B,EAAA,EAED,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;aACzB,EAAA,EAED,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,EAAA,EAED,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,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 } from '@stencil/core';\n\n@Component({\n  tag: 'ls-feature-column',\n  styleUrl: 'ls-feature-column.css',\n  shadow: true,\n})\nexport class LsFeatureColoumn {\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  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        >\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        >\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        >\n          <ls-icon name=\"user-group\" size=\"24\" />\n        </div>\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-Cs6tf1FE.js

@@ -0,0 +1,34 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
+
+const lsToggleCss = ":host{display:block}.switch{position:relative;display:inline-block;width:2.75rem;height:1.5rem}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--gray-20, #EDEFF2);-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:1.25rem;width:1.25rem;left:0.125rem;bottom:0.125rem;background-color:white;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--primary-60, #4456F6)}input:focus+.slider{box-shadow:0 0 1px var(--primary-60, #4456F6);outline:4px solid var(--primary-20, #E3E6FF)}input:checked+.slider:before{-webkit-transform:translateX(1.25rem);-ms-transform:translateX(1.25rem);transform:translateX(1.25rem)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}";
+
+const LsToggle = /*@__PURE__*/ proxyCustomElement(class LsToggle extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: '1a3e104280a39b83b82c0454cebad829a38353a7' }, h("label", { key: '7a9ee630ff623aa25d1364409aa77ddb2b1abec9', class: "switch" }, h("input", { key: '78a3c7e6199561d2b446ee01d4f483f064985c06', type: "checkbox" }), h("span", { key: '0f8f18a6e0dc1621d2d6eb0db18accb1ac3617ce', class: "slider round" })), h("slot", { key: 'cc23067cdab76afb4788700db8076c2a6314fb3b' })));
+    }
+    static get style() { return lsToggleCss; }
+}, [257, "ls-toggle"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-toggle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-toggle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LsToggle);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsToggle as L, defineCustomElement as d };
+//# sourceMappingURL=p-Cs6tf1FE.js.map
+
+//# sourceMappingURL=p-Cs6tf1FE.js.map

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

@@ -0,0 +1 @@
+{"file":"p-Cs6tf1FE.js","mappings":";;AAAA,MAAM,WAAW,GAAG,k0BAAk0B;;MCOz0B,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;IACnB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACnB,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAI,CAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,cAAc,EAAA,CAAQ,CAC5B,EACR,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toggle/ls-toggle.css?tag=ls-toggle&encapsulation=shadow","src/components/ls-toggle/ls-toggle.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n/* The switch - the box around the slider */\n.switch {\n  position: relative;\n  display: inline-block;\n  width: 2.75rem;\n  height: 1.5rem;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--gray-20, #EDEFF2);\n  -webkit-transition: .4s;\n  transition: .4s;\n}\n\n.slider:before {\n  position: absolute;\n  content: \"\";\n  height: 1.25rem;\n  width: 1.25rem;\n  left: 0.125rem;\n  bottom: 0.125rem;\n  background-color: white;\n  -webkit-transition: .4s;\n  transition: .4s;\n}\n\ninput:checked + .slider {\n  background-color: var(--primary-60, #4456F6);\n}\n\ninput:focus + .slider {\n  box-shadow: 0 0 1px var(--primary-60, #4456F6);\n  outline: 4px solid var(--primary-20, #E3E6FF);\n}\n\ninput:checked + .slider:before {\n  -webkit-transform: translateX(1.25rem);\n  -ms-transform: translateX(1.25rem);\n  transform: translateX(1.25rem);\n}\n\n/* Rounded sliders */\n.slider.round {\n  border-radius: 34px;\n}\n\n.slider.round:before {\n  border-radius: 50%;\n}\n\n\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-toggle',\n  styleUrl: 'ls-toggle.css',\n  shadow: true,\n})\nexport class LsToggle {\n  render() {\n    return (\n      <Host>\n        <label class=\"switch\">\n          <input type=\"checkbox\"  />\n          <span class=\"slider round\"></span>\n        </label>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-Ct78kJaE.js

@@ -0,0 +1,49 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
+import { d as defineCustomElement$2 } from './p-py-rQZsT.js';
+import { d as defineCustomElement$1 } from './p-DtHDNV_x.js';
+
+const lsFieldPropertiesMultipleCss = ":host{display:block}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)}";
+
+const LsFieldPropertiesMultiple = /*@__PURE__*/ proxyCustomElement(class LsFieldPropertiesMultiple extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    dataItem;
+    render() {
+        return (h(Host, { key: '9b5ad0338d0d3df1e65abdde7c06e7660ee9fe61' }, h("div", { key: 'f01035a01df3dfa1b9126ea18f07a4fe1caf2a87' }, this.dataItem.length, " items"), h("ls-field-dimensions", { key: '19fd136913c7537efeb1f1f0c41940b972e2f1b4', dataItem: this.dataItem }), h("slot", { key: 'a573e2c199b6ab963e57785c89c6328f4b088d9f' })));
+    }
+    static get style() { return lsFieldPropertiesMultipleCss; }
+}, [257, "ls-field-properties-multiple", {
+        "dataItem": [16, "data-item"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-field-properties-multiple", "ls-field-dimensions", "ls-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-field-properties-multiple":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LsFieldPropertiesMultiple);
+            }
+            break;
+        case "ls-field-dimensions":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsFieldPropertiesMultiple as L, defineCustomElement as d };
+//# sourceMappingURL=p-Ct78kJaE.js.map
+
+//# sourceMappingURL=p-Ct78kJaE.js.map

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

@@ -0,0 +1 @@
+{"file":"p-Ct78kJaE.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,61IAA61I;;MCQr3I,yBAAyB,iBAAAA,kBAAA,CAAA,MAAA,yBAAA,SAAAC,CAAA,CAAA;;;;;;AAC5B,IAAA,QAAQ;IAEhB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAM,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAa,QAAA,CAAA,EACvC,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAEhD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-multiple/ls-field-properties-multiple.css?tag=ls-field-properties-multiple&encapsulation=shadow","src/components/ls-field-properties-multiple/ls-field-properties-multiple.tsx"],"sourcesContent":[":host {\n  display: block;\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 '../../components';\n\n@Component({\n  tag: 'ls-field-properties-multiple',\n  styleUrl: 'ls-field-properties-multiple.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesMultiple {\n  @Prop() dataItem: LSApiElement[];\n\n  render() {\n    return (\n      <Host>\n        <div>{this.dataItem.length} items</div>\n        <ls-field-dimensions dataItem={this.dataItem} />\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-D1o9mMCC.js

@@ -0,0 +1,105 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
+import { d as defineCustomElement$6 } from './p-pHw5Xziq.js';
+import { d as defineCustomElement$5 } from './p-CgRZ91kw.js';
+import { d as defineCustomElement$4 } from './p-BlTHDG0s.js';
+import { d as defineCustomElement$3 } from './p-BI9SKPKN.js';
+import { d as defineCustomElement$2 } from './p-DtHDNV_x.js';
+import { d as defineCustomElement$1 } from './p-CF583nkL.js';
+
+const lsToolbarCss = ":host{position:relative;display:flex;width:100%;align-items:center;justify-content:center}.rowbox{position:absolute;top:1rem;display:flex;padding:0.5rem;justify-content:center;align-items:center;gap:0.5rem;width:fit-content;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #fff);margin-bottom:1rem;z-index:200}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)}";
+
+const LsToolbar = /*@__PURE__*/ proxyCustomElement(class LsToolbar extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.mutate = createEvent(this, "mutate");
+        this.update = createEvent(this, "update");
+    }
+    /**
+     * The selected items information (as JSON).
+     * {LSApiElement[]}
+     */
+    dataItem;
+    /**
+     * The base template information (as JSON).
+     * {LSApiTemplate}
+     */
+    template;
+    /**
+     * The base template information (as JSON).
+     * {LSDocumentViewer}
+     */
+    editor;
+    mutate;
+    update;
+    // @Element() component: HTMLElement;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        console.log(diff);
+        const diffs = this.dataItem.map(c => {
+            return { action: 'update', data: { ...c, ...diff } };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+        this.update.emit(diffs);
+    }
+    render() {
+        return (h(Host, { key: '20d1b50b89d3237b3b49e751d75bd1bd7f54b5f4' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }), h("ls-field-alignment", { dataItem: this.dataItem }), h("ls-field-distribute", { dataItem: this.dataItem }), h("ls-field-size", { dataItem: this.dataItem }))) : (h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (h("ls-field-format", { dataItem: this?.dataItem })) : (h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), h("slot", { key: '347f742c35f16a5d79a29f7b4e867e198f9bb48b' })));
+    }
+    static get style() { return lsToolbarCss; }
+}, [257, "ls-toolbar", {
+        "dataItem": [1040, "data-item"],
+        "template": [16],
+        "editor": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-toolbar", "ls-field-alignment", "ls-field-distribute", "ls-field-format", "ls-field-size", "ls-icon", "ls-participant-select"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-toolbar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LsToolbar);
+            }
+            break;
+        case "ls-field-alignment":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ls-field-distribute":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ls-field-format":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-field-size":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-participant-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsToolbar as L, defineCustomElement as d };
+//# sourceMappingURL=p-D1o9mMCC.js.map
+
+//# sourceMappingURL=p-D1o9mMCC.js.map

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

@@ -0,0 +1 @@
+{"file":"p-D1o9mMCC.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,kqJAAkqJ;;MCQ1qJ,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;;;AACpB;;;AAGG;AAIH,IAAA,QAAQ;AAER;;;AAGG;AACK,IAAA,QAAQ;AAEhB;;;AAGG;AACK,IAAA,MAAM;AAOd,IAAA,MAAM;AAON,IAAA,MAAM;;;;AAKN,IAAA,KAAK,CAAC,IAAY,EAAA;AAChB,QAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;QAEjB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAG;AACnD,YAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE;AACtE,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAoB,CAAC;AACtD,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGzB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IACxC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,QAAQ,EAAA,EAOlB,CAAA,CAAA,iBAAA,EAAA,EAAiB,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAI,CAAA,EAC7C,CAAA,CAAA,oBAAA,EAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC/C,CAAA,CAAA,qBAAA,EAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAChD,CAAA,CAAA,eAAA,EAAA,EAAe,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CACtC,KAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,QAAQ,EACjB,EAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,IAC1C,CAAiB,CAAA,iBAAA,EAAA,EAAA,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAI,CAAA,KAE7C,CAAuB,CAAA,uBAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAI,CAAA,CACjF,CACG,CACP,EACD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toolbar/ls-toolbar.css?tag=ls-toolbar&encapsulation=shadow","src/components/ls-toolbar/ls-toolbar.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n}\n\n.rowbox {\n  position: absolute;\n  top: 1rem;\n  display: flex;\n  padding: 0.5rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.5rem;\n  width: fit-content;\n  border-radius: 1rem;\n  border: 1px solid var(--gray-20, #edeff2);\n  background: var(--white, #fff);\n  margin-bottom: 1rem;\n  z-index: 200;\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, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSApiTemplate, LsDocumentViewer, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-toolbar',\n  styleUrl: 'ls-toolbar.css',\n  shadow: true,\n})\nexport class LsToolbar {\n  /**\n   * The selected items information (as JSON).\n   * {LSApiElement[]}\n   */\n  @Prop({\n    mutable: true,\n  })\n  dataItem: LSApiElement[];\n\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() template: LSApiTemplate;\n\n  /**\n   * The base template information (as JSON).\n   * {LSDocumentViewer}\n   */\n  @Prop() editor: LsDocumentViewer;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n  // @Element() component: HTMLElement;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n    console.log(diff);\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n    this.update.emit(diffs);\n  }\n  \n  render() {\n    return (\n      <Host>\n        {this.dataItem && this.dataItem.length > 1 ? (\n          <div class={'rowbox'}>\n            {/* <select class=\"ls-participant-select\">\n              <option value=\"0\">Sender</option>\n              {this.template.roles.map(r => (\n                <option value={r.id}>{r.name}</option>\n              ))}\n            </select> */}\n            <ls-field-format dataItem={this?.dataItem} />\n            <ls-field-alignment dataItem={this.dataItem} />\n            <ls-field-distribute dataItem={this.dataItem} />\n            <ls-field-size dataItem={this.dataItem} />\n          </div>\n        ) : (\n          <div class={'rowbox'}>\n            {this.dataItem && this.dataItem.length === 1 ? (\n              <ls-field-format dataItem={this?.dataItem} />\n            ) : (\n              <ls-participant-select roles={this.template?.roles} dataItem={this?.dataItem} />\n            )}\n          </div>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-D2smwTu5.js

@@ -0,0 +1,82 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
+import { d as debounce } from './p-CjicL5jA.js';
+import { d as defineCustomElement$1 } from './p-DtHDNV_x.js';
+
+const lsStatusbarCss = ":host{position:fixed;z-index:1000;right:1rem;bottom:1rem;display:flex;flex-direction:row;background-color:white;border:1px solid var(--gray-30, #e0e2e5);box-shadow:0px 4px 16px rgba(0, 0, 0, 0.1);border-radius:1rem}*{margin:0;padding:0;box-sizing:border-box}.status-bar-section{display:flex;flex-direction:row;align-items:center;gap:0.75rem;padding:0.5rem 0.75rem}:host>:not(:nth-child(2)){border-left:1px solid var(--gray-30, #e0e2e5)}button{border:0}button:hover{color:var(--gray-100, #45484d);border-radius:0.5rem}input[type=\"range\"]{-webkit-appearance:none;width:100%;height:8px;background:var(--gray-20, #EDEFF2);border-radius:5px;outline:none}input[type=\"range\"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:8px;height:8px;background:var(--gray-70, #4a4c51);border-radius:50%;cursor:pointer}input[type=\"range\"]::-moz-range-thumb{width:8px;height:8%;background:var(--gray-70, #4a4c51);border:none;border-radius:50%;cursor:pointer}input[type=\"range\"]::-moz-range-track{background:var(--gray-20, #EDEFF2);height:8px;border-radius:5px}input[type=\"range\"]::-webkit-slider-runnable-track{background:var(--gray-20, #EDEFF2);height:8px;border-radius:5px}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}button{all:unset;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-80, #6c6e73);text-transform:capitalize}button.tertiaryGrey:hover{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)}";
+
+const LsStatusbar = /*@__PURE__*/ proxyCustomElement(class LsStatusbar extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    get component() { return this; }
+    /**
+     * The zoom or scale level 100 === 100%.
+     * {number}
+     */
+    zoom;
+    /**
+     * The parent editor control.
+     * {LsDocumentViewer}
+     */
+    editor;
+    setZoom(value) {
+        this.editor.setZoom(value);
+        this.zoom = value;
+    }
+    handleZoomInput() {
+        const zoomInput = this.component.shadowRoot.getElementById('zoomRange');
+        console.log(zoomInput.value);
+        debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);
+    }
+    fitWidth() {
+        const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');
+        const scale = frame.clientWidth / this.editor.pageDimensions[0].width;
+        this.setZoom(Math.round(scale * 1e2) / 1e2);
+    }
+    fitHeight() {
+        const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');
+        const scale = frame.clientHeight / this.editor.pageDimensions[0].height;
+        this.setZoom(Math.round(scale * 1e2) / 1e2);
+    }
+    componentDidLoad() {
+        this.zoom = this.editor.zoom;
+    }
+    render() {
+        console.log('editor', this.editor);
+        return (h(Host, { key: 'ea525e6f8646c08be30354b2f2d1d36e21c995ba' }, h("div", { key: 'cf4cf005f20ce4bf620fb83b5cf7d02e230feb53', class: "status-bar-section" }, h("button", { key: '9f1921447fdea726f82dffad74ff88920d79f487', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: 'e5d681a4c0bb88dd69b39e931beb15df5d3a8548', name: "zoom-out" })), h("div", { key: '2655a0d7eb16c14bd67a546bbc000b6b42458b98' }, h("input", { key: 'def758649e35599d62bdfd064459f077332bd14e', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '229d1430e6e95636e962bf6b3d6e36c6ae235cb9', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: 'e7447b83ec8771b3284f7d2dfd9041c90fdcdb59', name: "zoom-in" }))), h("div", { key: 'cedaa23937a88d80777f8edce525408b0135d614', class: "status-bar-section" }, h("button", { key: 'f80d6ed2eed2ea8e51e64bb8a364be438ed19dcf', onClick: () => this.fitWidth() }, h("ls-icon", { key: '41558075bd1aa98e5d6318b691f2d6f40d526144', name: "fit-width" })), h("button", { key: '22028567cd63cf80157342f6b8af5039eb880c56', onClick: () => this.fitHeight() }, h("ls-icon", { key: '31dfcbaeb893d14b54798758207dd01c3276d7f0', name: "fit-height" }))), h("div", { key: '51a2d7a31fafd9e4cc408b92a92ceca3c672697d', class: "status-bar-section" }, h("button", { key: 'e7f179826b17caa8674a0f80a0de000ccebfb318', onClick: () => {
+                this.editor.pagePrev();
+            } }, h("ls-icon", { key: 'f76093367b1ae81db37d0621722703e42407ba84', name: "chevron-left" })), h("p", { key: '72f7ddb0e090c946df6c7e47cdd45f3074f73d68' }, "1 / 2"), h("button", { key: 'f83e36917ed5082ac865aee641c4ced4d39f4ba0', onClick: () => {
+                this.editor.pageNext();
+            } }, h("ls-icon", { key: '877c0a545d80a06964a9d1ac34019f0c6361cd6f', name: "chevron-right" }))), h("slot", { key: '7110433cf65751673c3ae4d47257b296086fda1c' })));
+    }
+    static get style() { return lsStatusbarCss; }
+}, [257, "ls-statusbar", {
+        "zoom": [1026],
+        "editor": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-statusbar", "ls-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-statusbar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LsStatusbar);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsStatusbar as L, defineCustomElement as d };
+//# sourceMappingURL=p-D2smwTu5.js.map
+
+//# sourceMappingURL=p-D2smwTu5.js.map

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

@@ -0,0 +1 @@
+{"file":"p-D2smwTu5.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-statusbar/ls-statusbar.css?tag=ls-statusbar&encapsulation=shadow","src/components/ls-statusbar/ls-statusbar.tsx"],"sourcesContent":[":host {\n  position: fixed;\n  z-index: 1000;\n  right: 1rem;\n  bottom: 1rem;\n  display: flex;\n  flex-direction: row;\n  background-color: white;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);\n  border-radius: 1rem;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n.status-bar-section {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.5rem 0.75rem;\n}\n\n:host > :not(:nth-child(2)) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n\nbutton {\n  border: 0;\n}\n\nbutton:hover {\n  color: var(--gray-100, #45484d);\n  border-radius: 0.5rem;\n}\n\ninput[type=\"range\"] {\n  -webkit-appearance: none; /* Remove default styling */\n  width: 100%;\n  height: 8px;\n  background: var(--gray-20, #EDEFF2);\n  border-radius: 5px;\n  outline: none;\n}\n\n/* Chrome, Safari, Edge */\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 8px;\n  height: 8px;\n  background: var(--gray-70, #4a4c51); /* Custom thumb color */\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n/* Firefox */\ninput[type=\"range\"]::-moz-range-thumb {\n  width: 8px;\n  height: 8%;\n  background: var(--gray-70, #4a4c51); /* Custom thumb color */\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n/* Track color for Firefox */\ninput[type=\"range\"]::-moz-range-track {\n  background: var(--gray-20, #EDEFF2);\n  height: 8px;\n  border-radius: 5px;\n}\n\n/* Track color for Chrome, Safari, Edge */\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  background: var(--gray-20, #EDEFF2);\n  height: 8px;\n  border-radius: 5px;\n}\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\nbutton {\n  all: unset;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--gray-80, #6c6e73);\n  text-transform: capitalize;\n}\n\nbutton.tertiaryGrey:hover {\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, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { debounce } from '../ls-document-viewer/editorUtils';\n\n@Component({\n  tag: 'ls-statusbar',\n  styleUrl: 'ls-statusbar.css',\n  shadow: true,\n})\nexport class LsStatusbar {\n  @Element() component: HTMLElement;\n  /**\n   * The zoom or scale level 100 === 100%.\n   * {number}\n   */\n  @Prop({ mutable: true }) zoom: number;\n\n  /**\n   * The parent editor control.\n   * {LsDocumentViewer}\n   */\n  @Prop() editor: LsDocumentViewer;\n\n  setZoom(value: number) {\n    this.editor.setZoom(value);\n    this.zoom = value;\n  }\n\n  handleZoomInput() {\n    const zoomInput = this.component.shadowRoot.getElementById('zoomRange') as HTMLInputElement;\n    console.log(zoomInput.value);\n    debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);\n  }\n\n  fitWidth() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');\n    const scale: number = frame.clientWidth / this.editor.pageDimensions[0].width;\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  fitHeight() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');\n    const scale: number = frame.clientHeight / this.editor.pageDimensions[0].height;\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  componentDidLoad() {\n    this.zoom = this.editor.zoom;\n  }\n\n  \n\n  render() {\n    console.log('editor',this.editor);\n    return (\n      <Host>\n        {/* <button onClick={() => this.editor.displayTable = true}><ls-icon name=\"table\" /></button>\n        <button onClick={() => this.editor.displayTable = false}><ls-icon name=\"template\" /></button> */}\n        <div class={\"status-bar-section\"}>\n\n        <button onClick={() => this.setZoom(this.editor.zoom * 0.8)}>\n          <ls-icon name=\"zoom-out\" />\n        </button>\n        <div>\n          <input type=\"range\" min=\"1\" max=\"300\" value={this.zoom * 100} class=\"slider\" id=\"zoomRange\" onInput={() => this.handleZoomInput()} />\n        </div>\n        <button onClick={() => this.setZoom(this.editor.zoom / 0.8)}>\n          <ls-icon name=\"zoom-in\" />\n        </button>\n        </div>\n         <div class={\"status-bar-section\"}>\n        <button onClick={() => this.fitWidth()}>\n          <ls-icon name=\"fit-width\" />\n        </button>\n        <button onClick={() => this.fitHeight()}>\n          <ls-icon name=\"fit-height\" />\n        </button>\n        </div>\n         <div class={\"status-bar-section\"}>\n        <button\n          onClick={() => {\n            this.editor.pagePrev();\n          }}\n        >\n          <ls-icon name=\"chevron-left\" />\n        </button>\n        <p>1 / 2</p>\n        <button\n          onClick={() => {\n            this.editor.pageNext();\n          }}\n        >\n          <ls-icon name=\"chevron-right\" />\n        </button>\n        </div>\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}