legalesign-document-viewer 0.4.9 → 0.5.0

package/dist/components/{p-6l08SdGl.js → p-DFVuN2lH.js}

@@ -1,15 +1,17 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-BnGihP6t.js';
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BhZ5Udbm.js';
 import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
-import { d as defineCustomElement$3 } from './p-95nSEls8.js';
-import { d as defineCustomElement$2 } from './p-DMtkP3At.js';
-import { d as defineCustomElement$1 } from './p-CwVY532N.js';
+import { d as defineCustomElement$3 } from './p-D95fiMAP.js';
+import { d as defineCustomElement$2 } from './p-CvKjrahQ.js';
+import { d as defineCustomElement$1 } from './p-DoQc-O0l.js';
 
-const lsHelperBarCss = ".controls-bar{display:flex;flex-direction:column;background-color:white;border:1px solid var(--gray-30, #e0e2e5);box-shadow:0px 4px 16px rgba(0, 0, 0, 0.1);border-radius:1rem;gap:0.75rem;padding:0.5rem}button{all:unset;border:0;color:var(--gray-80, #6c6e73)}button:hover{color:var(--gray-100, #45484d);border-radius:0.5rem}button:disabled{color:var(--gray-40, #c1c4c8);cursor:not-allowed}.divider{height:1px;background-color:var(--gray-30, #e0e2e5);width:100%;margin:-0.25rem 0}";
+const lsHelperBarCss = () => `.controls-bar{display:flex;flex-direction:column;background-color:white;border:1px solid var(--gray-30, #e0e2e5);box-shadow:0px 4px 16px rgba(0, 0, 0, 0.1);border-radius:1rem;gap:0.75rem;padding:0.5rem}button{all:unset;border:0;color:var(--gray-80, #6c6e73)}button:hover{color:var(--gray-100, #45484d);border-radius:0.5rem}button:disabled{color:var(--gray-40, #c1c4c8);cursor:not-allowed}.divider{height:1px;background-color:var(--gray-30, #e0e2e5);width:100%;margin:-0.25rem 0}`;
 
 const LsHelperBar = /*@__PURE__*/ proxyCustomElement(class LsHelperBar extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     get component() { return this; }
@@ -25,8 +27,8 @@ const LsHelperBar = /*@__PURE__*/ proxyCustomElement(class LsHelperBar extends H
                 }
             } }, h("ls-keyboard-shortcuts", { key: 'dce4fffb30a3ed7115ee0816434552996794ad3a', referenceElement: this.shortcutsBtn }), h("ls-icon", { key: '04e31a96e6593b2fc73854619bbc80ef20fc4d26', name: "keyboard" })), h("button", { key: 'e0ff256398468065fb76fe273c1a4089af598dbf', style: !this.expanded ? { display: 'none' } : { display: 'block' }, "data-pendo": "launch-new-edit-tour" }, h("ls-icon", { key: '5ce37cfa92b2525a8d344fed6b8835930db1aeb0', name: "map", "data-tooltip": "Take a Guided Tour", "data-tooltip-placement": "left" })), h("button", { key: 'ab1cc9441815b58fc92d1688bf540a6ad9ea9349', style: !this.expanded ? { display: 'none' } : { display: 'block' }, onClick: () => window.open('https://legalesign.com/articles/', '_blank') }, h("ls-icon", { key: 'fdb1d13e35ff66d03c77bd15858910c4773b5105', name: "book-open", "data-tooltip": "View Documentation \u2197", "data-tooltip-placement": "left" })), h("div", { key: 'cfc76e9434590eb0c06055d89b219479e4b0fa8b', class: "divider", style: !this.expanded ? { display: 'none' } : { display: 'block' } }), h("button", { key: '430c37f8e0f4206a76f006c3f72c60c5e2b8a2dc' }, h("ls-icon", { key: 'c3e6c2bac0ec08c2cec5c0c5237cdb7b2ec740ef', name: "question-mark-circle" }))), h("slot", { key: '38c98e7e91042d1cddb4217e8f61c44d32f65a7a' }), h("ls-tooltip", { key: '8ddaf7d60cd84a206efb4c71240db45772bc8d70', id: "ls-tooltip-master" })));
     }
-    static get style() { return lsHelperBarCss; }
-}, [257, "ls-helper-bar", {
+    static get style() { return lsHelperBarCss(); }
+}, [769, "ls-helper-bar", {
         "expanded": [1028],
         "shortcutsBtn": [32]
     }]);
@@ -37,22 +39,22 @@ function defineCustomElement() {
     const components = ["ls-helper-bar", "ls-icon", "ls-keyboard-shortcuts", "ls-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-helper-bar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsHelperBar);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsHelperBar);
             }
             break;
         case "ls-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "ls-keyboard-shortcuts":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;
         case "ls-tooltip":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$1();
             }
             break;
@@ -61,6 +63,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsHelperBar as L, defineCustomElement as d };
-//# sourceMappingURL=p-6l08SdGl.js.map
+//# sourceMappingURL=p-DFVuN2lH.js.map
 
-//# sourceMappingURL=p-6l08SdGl.js.map
+//# sourceMappingURL=p-DFVuN2lH.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DFVuN2lH.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-helper-bar/ls-helper-bar.css?tag=ls-helper-bar&encapsulation=shadow","src/components/ls-helper-bar/ls-helper-bar.tsx"],"sourcesContent":[".controls-bar {\n  display: flex;\n  flex-direction: column;\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  gap: 0.75rem;\n  padding: 0.5rem;\n}\n\nbutton {\n  all: unset;\n  border: 0;\n  color: var(--gray-80, #6c6e73);\n}\n\nbutton:hover {\n  color: var(--gray-100, #45484d);\n  border-radius: 0.5rem;\n}\n\nbutton:disabled {\n  color: var(--gray-40, #c1c4c8);\n  cursor: not-allowed;\n}\n\n.divider {\n  height: 1px;\n  background-color: var(--gray-30, #e0e2e5);\n  width: 100%;\n  margin: -0.25rem 0;\n}","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-helper-bar',\n  styleUrl: 'ls-helper-bar.css',\n  shadow: true,\n})\nexport class LsHelperBar {\n  @Element() component: HTMLElement;\n  @Prop({mutable: true}) expanded: boolean = false;\n  @State() shortcutsBtn: HTMLElement;\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'controls-bar'} onMouseEnter={() => (this.expanded = true)} onMouseLeave={() => (this.expanded = false)}>\n          <button\n            style={!this.expanded ? { display: 'none' } : { display: 'block' }}\n            id=\"keyboard-btn\"\n            ref={el => {\n              if (el) {\n                this.shortcutsBtn = el;\n              }\n            }}\n          >\n            <ls-keyboard-shortcuts referenceElement={this.shortcutsBtn} />\n            <ls-icon name=\"keyboard\" />\n          </button>\n          <button style={!this.expanded ? { display: 'none' } : { display: 'block' }} data-pendo=\"launch-new-edit-tour\">\n            <ls-icon name=\"map\" data-tooltip=\"Take a Guided Tour\" data-tooltip-placement=\"left\" />\n          </button>\n          <button style={!this.expanded ? { display: 'none' } : { display: 'block' }} onClick={() => window.open('https://legalesign.com/articles/', '_blank')}>\n            <ls-icon name=\"book-open\" data-tooltip=\"View Documentation ↗\" data-tooltip-placement=\"left\" />\n          </button>\n          <div class=\"divider\" style={!this.expanded ? { display: 'none' } : { display: 'block' }} />\n          <button>\n            <ls-icon name=\"question-mark-circle\" />\n          </button>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DGiUKXDO.js

@@ -0,0 +1,231 @@
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BhZ5Udbm.js';
+import { d as defineCustomElement$q } from './p-DsR1ud4V.js';
+import { d as defineCustomElement$p } from './p-YcP4tU0u.js';
+import { d as defineCustomElement$o } from './p-aA8RuwY_.js';
+import { d as defineCustomElement$n } from './p-DYQekJvr.js';
+import { d as defineCustomElement$m } from './p-BxPfWmRj.js';
+import { d as defineCustomElement$l } from './p-CGQK3l8F.js';
+import { d as defineCustomElement$k } from './p-KMRQyALr.js';
+import { d as defineCustomElement$j } from './p-C9CUft6J.js';
+import { d as defineCustomElement$i } from './p-iIvOyhST.js';
+import { d as defineCustomElement$h } from './p-BQZBAjo_.js';
+import { d as defineCustomElement$g } from './p-C6TaBByt.js';
+import { d as defineCustomElement$f } from './p-Czz58vGf.js';
+import { d as defineCustomElement$e } from './p-DMZN9Rei.js';
+import { d as defineCustomElement$d } from './p-HpepQ3-E.js';
+import { d as defineCustomElement$c } from './p-C_uR3x8J.js';
+import { d as defineCustomElement$b } from './p-DskHTNiF.js';
+import { d as defineCustomElement$a } from './p-CDgBo5Zz.js';
+import { d as defineCustomElement$9 } from './p-w39shV-b.js';
+import { d as defineCustomElement$8 } from './p-CDGosSW8.js';
+import { d as defineCustomElement$7 } from './p-DoAxt8ZN.js';
+import { d as defineCustomElement$6 } from './p-Bi1Fu2dm.js';
+import { d as defineCustomElement$5 } from './p-D95fiMAP.js';
+import { d as defineCustomElement$4 } from './p-Du60SSaA.js';
+import { d as defineCustomElement$3 } from './p-CJSY3-Q3.js';
+import { d as defineCustomElement$2 } from './p-DKaEsQyk.js';
+import { d as defineCustomElement$1 } from './p-DoQc-O0l.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:2.25rem}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
+
+const LsFieldProperties = /*@__PURE__*/ proxyCustomElement(class LsFieldProperties extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    dataItem;
+    renderFields() {
+        if (this.dataItem && this.dataItem?.length === 1) {
+            switch (this.dataItem[0].formElementType) {
+                case 'signature':
+                    return h("ls-field-properties-signature", { dataItem: this.dataItem[0] });
+                case 'date':
+                    return h("ls-field-properties-date", { dataItem: this.dataItem[0] });
+                case 'autodate':
+                    return h("ls-field-properties-date", { dataItem: this.dataItem[0] });
+                case 'text':
+                    return h("ls-field-properties-text", { dataItem: this.dataItem[0] });
+                case 'number':
+                    return h("ls-field-properties-number", { dataItem: this.dataItem[0] });
+                case 'autosign':
+                    return h("ls-field-properties-autosign", { dataItem: this.dataItem[0] });
+                case 'email':
+                    return h("ls-field-properties-email", { dataItem: this.dataItem[0] });
+                case 'image':
+                    return h("ls-field-properties-image", { dataItem: this.dataItem[0] });
+                case 'file':
+                    return h("ls-field-properties-file", { dataItem: this.dataItem[0] });
+                case 'dropdown':
+                    return h("ls-field-properties-file", { dataItem: this.dataItem[0] });
+                default:
+                    return h("ls-field-properties-general", { dataItem: this.dataItem[0] });
+            }
+        }
+        else if (this.dataItem && this.dataItem?.length > 1)
+            return h("ls-field-properties-multiple", { dataItem: this.dataItem });
+    }
+    handleKeyDown = (event) => {
+        event.stopPropagation();
+    };
+    handleKeyUp = (event) => {
+        event.stopPropagation();
+    };
+    render() {
+        return (h(Host, { key: 'bab499f31527d5413652945bbf7723c5dab79405', onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, this.dataItem && this.renderFields(), h("slot", { key: '1b7a65e7ba35b960519ed1c102c4ffb0306a2b5d' })));
+    }
+    static get style() { return lsFieldPropertiesCss(); }
+}, [769, "ls-field-properties", {
+        "dataItem": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    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(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsFieldProperties);
+            }
+            break;
+        case "ls-editor-field":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$q();
+            }
+            break;
+        case "ls-field-alignment":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$p();
+            }
+            break;
+        case "ls-field-content":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$o();
+            }
+            break;
+        case "ls-field-dimensions":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$n();
+            }
+            break;
+        case "ls-field-distribute":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$m();
+            }
+            break;
+        case "ls-field-footer":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$l();
+            }
+            break;
+        case "ls-field-placement":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$k();
+            }
+            break;
+        case "ls-field-properties-advanced":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$j();
+            }
+            break;
+        case "ls-field-properties-autosign":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$i();
+            }
+            break;
+        case "ls-field-properties-container":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$h();
+            }
+            break;
+        case "ls-field-properties-date":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$g();
+            }
+            break;
+        case "ls-field-properties-email":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$f();
+            }
+            break;
+        case "ls-field-properties-file":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$e();
+            }
+            break;
+        case "ls-field-properties-general":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$d();
+            }
+            break;
+        case "ls-field-properties-image":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$c();
+            }
+            break;
+        case "ls-field-properties-multiple":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ls-field-properties-number":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$a();
+            }
+            break;
+        case "ls-field-properties-signature":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ls-field-properties-text":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ls-field-size":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ls-field-type-display":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ls-input-wrapper":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-props-section":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-toggle":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsFieldProperties as L, defineCustomElement as d };
+//# sourceMappingURL=p-DGiUKXDO.js.map
+
+//# sourceMappingURL=p-DGiUKXDO.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DGiUKXDO.js","mappings":"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","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: 2.25rem;\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}

package/dist/components/p-DKaEsQyk.js

@@ -0,0 +1,47 @@
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BhZ5Udbm.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:0.4s;transition:0.4s}.indeterminate{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--primary-60, #4456f6);-webkit-transition:0.4s;transition:0.4s}.slider:before{position:absolute;content:'';height:1.25rem;width:1.25rem;left:0.125rem;bottom:0.125rem;background-color:white;-webkit-transition:0.4s;transition:0.4s}.indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.75rem;height:0.125rem;background-color:white}input:checked+.slider{background-color:var(--primary-60, #4456f6)}input:focus+.slider{box-shadow:0 0 1px var(--primary-60, #4456f6);outline:0.25rem 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,.indeterminate.round{border-radius:2.125rem}.slider.round:before{border-radius:50%}`;
+
+const LsToggle = /*@__PURE__*/ proxyCustomElement(class LsToggle extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.valueChange = createEvent(this, "valueChange", 7);
+    }
+    checked;
+    indeterminate;
+    valueChange;
+    changeHandler(value) {
+        this.valueChange.emit(value);
+    }
+    render() {
+        return (h(Host, { key: 'b68a8b803d7d8240af7d2212538c5384852df26b' }, h("label", { key: 'cd1f4b5207a2e552e696545931bf227101b8202d', class: "switch" }, h("input", { key: 'f3818c37f499b9f0f869b44468a3a474386dc1d9', type: "checkbox", checked: this.checked, onChange: (e) => {
+                this.changeHandler(e.target.checked);
+            } }), h("span", { key: 'b76ecf262824722aee395600c1babf4e61d889a0', class: `${this.indeterminate ? 'indeterminate' : 'slider'} round` })), h("slot", { key: '1c86f0e514f1b6f593502a3ab99f48d49bf9ad4c' })));
+    }
+    static get style() { return lsToggleCss(); }
+}, [772, "ls-toggle", {
+        "checked": [1028],
+        "indeterminate": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-toggle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-toggle":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsToggle);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsToggle as L, defineCustomElement as d };
+//# sourceMappingURL=p-DKaEsQyk.js.map
+
+//# sourceMappingURL=p-DKaEsQyk.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DKaEsQyk.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,0pCAA0pC,CAAC;;MCOzqC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;;;AACM,IAAA,OAAO;AACxB,IAAA,aAAa;AACL,IAAA,WAAW;AAE3B,IAAA,aAAa,CAAC,KAAc,EAAA;AAC1B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG9B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACnB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAG,QAAQ,EAAE,CAAC,CAAC,KAAI;gBAC7D,IAAI,CAAC,aAAa,CAAE,CAAC,CAAC,MAAc,CAAC,OAAO,CAAC;AAC7C,aAAC,EACE,CAAA,EACL,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,QAAQ,CAAA,MAAA,CAAQ,GAAS,CAC1E,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","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: 0.4s;\n  transition: 0.4s;\n}\n\n.indeterminate {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--primary-60, #4456f6);\n  -webkit-transition: 0.4s;\n  transition: 0.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: 0.4s;\n  transition: 0.4s;\n}\n\n.indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.75rem;\n  height: 0.125rem;\n  background-color: white;\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: 0.25rem 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, .indeterminate.round {\n  border-radius: 2.125rem;\n}\n\n.slider.round:before {\n  border-radius: 50%;\n}\n","import { Component, Host, Prop, h, Event as StencilEvent, EventEmitter  } from '@stencil/core';\n\n@Component({\n  tag: 'ls-toggle',\n  styleUrl: 'ls-toggle.css',\n  shadow: false,\n})\nexport class LsToggle {\n  @Prop({ mutable: true }) checked: boolean;\n  @Prop() indeterminate: boolean;\n  @StencilEvent() valueChange: EventEmitter<boolean>;\n\n  changeHandler(value: boolean) {\n    this.valueChange.emit(value);\n  }\n\n  render() {\n    return (\n      <Host>\n        <label class=\"switch\">\n          <input type=\"checkbox\" checked={this.checked}  onChange={(e) => {\n            this.changeHandler((e.target as any).checked)\n            }\n            }/>\n          <span class={`${this.indeterminate ? 'indeterminate' : 'slider'} round`}></span>\n        </label>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DMZN9Rei.js

@@ -0,0 +1,117 @@
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BhZ5Udbm.js';
+import { d as defineCustomElement$d } from './p-DsR1ud4V.js';
+import { d as defineCustomElement$c } from './p-aA8RuwY_.js';
+import { d as defineCustomElement$b } from './p-DYQekJvr.js';
+import { d as defineCustomElement$a } from './p-CGQK3l8F.js';
+import { d as defineCustomElement$9 } from './p-KMRQyALr.js';
+import { d as defineCustomElement$8 } from './p-C9CUft6J.js';
+import { d as defineCustomElement$7 } from './p-BQZBAjo_.js';
+import { d as defineCustomElement$6 } from './p-Bi1Fu2dm.js';
+import { d as defineCustomElement$5 } from './p-D95fiMAP.js';
+import { d as defineCustomElement$4 } from './p-Du60SSaA.js';
+import { d as defineCustomElement$3 } from './p-CJSY3-Q3.js';
+import { d as defineCustomElement$2 } from './p-DKaEsQyk.js';
+import { d as defineCustomElement$1 } from './p-DoQc-O0l.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:2.25rem;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)}`;
+
+const LsFieldPropertiesFile = /*@__PURE__*/ proxyCustomElement(class LsFieldPropertiesFile extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    dataItem;
+    render() {
+        return (h(Host, { key: '88b1194eadd620a301e5163f28e6ed7abb95d851' }, h("ls-field-properties-container", { key: '537f4627d4e12eefd996eb0e08792f6cdff51f9b', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: '0e126a53c285c2849b112a152c71b65f97346029', class: 'field-set', slot: "content" }, h("ls-field-content", { key: '424e82d675b7582d7e133f172c55620ecd1d3b85', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '3705e79f0a68db4861abe9ad73e2ea75cdc238cc', dataItem: this.dataItem })), h("div", { key: '5facf5a8593c86aa027c3ec8f575852156359d2e', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: 'b1c4404b2181e2bf859f62dd4f2195125b4e1ff5', dataItem: this.dataItem })), h("div", { key: '7920be7e29f48f890441711040b2d7cd37109e4f', class: 'field-set', slot: "placement" }, h("ls-field-placement", { key: '61cac1518a8c20da611f7c9c9cb1799a1d21097d', dataItem: this.dataItem }))), h("ls-field-footer", { key: '079d83b3d9b867a3436454f7828eef28b2eddfcf', dataItem: this.dataItem })));
+    }
+    static get style() { return lsFieldPropertiesFileCss(); }
+}, [769, "ls-field-properties-file", {
+        "dataItem": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    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(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsFieldPropertiesFile);
+            }
+            break;
+        case "ls-editor-field":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$d();
+            }
+            break;
+        case "ls-field-content":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$c();
+            }
+            break;
+        case "ls-field-dimensions":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ls-field-footer":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$a();
+            }
+            break;
+        case "ls-field-placement":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ls-field-properties-advanced":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ls-field-properties-container":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ls-field-type-display":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ls-input-wrapper":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-props-section":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-toggle":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsFieldPropertiesFile as L, defineCustomElement as d };
+//# sourceMappingURL=p-DMZN9Rei.js.map
+
+//# sourceMappingURL=p-DMZN9Rei.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DMZN9Rei.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,MAAM,CAAC,mtJAAmtJ,CAAC;;MCQ/uJ,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: 2.25rem;\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}