legalesign-document-viewer 0.9.21 → 0.9.22

package/dist/components/p-DgBJsVwe.js

@@ -0,0 +1,117 @@
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h } from './p-DffaAVW4.js';
+import { d as defineCustomElement$4 } from './p-DN9dmmkk.js';
+import { d as defineCustomElement$3 } from './p-BT5rCW3w.js';
+import { d as defineCustomElement$2 } from './p-D60hGCYW.js';
+import { d as defineCustomElement$1 } from './p-DZP-fvPJ.js';
+
+const lsToolbarCss = () => `.ls-dv-toolbar{position:absolute;top:1rem;left:50%;transform:translateX(-50%);display:flex;width:100%;align-items:center;justify-content:center;padding:0.375rem;gap:0.5rem;width:fit-content;border-radius:1.125rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #ffffff);z-index:1000;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.ls-dv-invisible{display:none}p{color:var(--gray-80, #6f7176);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)}.ls-dv-button-link,.ls-dv-button-link:hover{all:unset}select{appearance:none;height:2.25rem}.ls-dv-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, #6f7176)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}.ls-dv-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.625rem;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, #ffffff)}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, #ffffff)}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].ls-dv-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].ls-dv-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].ls-dv-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}.ls-dv-checkbox-container{display:flex;gap:0.5rem;width:100%}.ls-dv-checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.ls-dv-form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.ls-dv-loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #4456f6)}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.ls-dv-tertiary-grey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #6f7176)}button.ls-dv-tertiary-grey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.ls-dv-button-group{display:flex;border-radius:0.625rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.ls-dv-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, #6f7176)}.ls-dv-button-group button:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group>:first-child{border-radius:0.625rem 0 0 0.625rem}.ls-dv-button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.ls-dv-button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
+
+const LsToolbar = /*@__PURE__*/ proxyCustomElement(class LsToolbar extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.mutate = createEvent(this, "mutate", 7);
+        this.update = createEvent(this, "update", 7);
+    }
+    get component() { return this; }
+    /**
+     * The selected items information (as JSON).
+     * {LSApiElement[]}
+     */
+    dataItem;
+    /**
+     * The group and experience information.
+     * {object}
+     */
+    groupInfo;
+    /**
+     * The base template information (as JSON).
+     * {LSApiTemplate}
+     */
+    template;
+    /**
+     * The main editor.
+     * {LSDocumentViewer}
+     */
+    editor;
+    mode;
+    signer;
+    mutate;
+    update;
+    // @Element() component: HTMLElement;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        const diffs = this.dataItem.map(c => {
+            return { action: 'update', data: { ...c, ...diff } };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    componentDidLoad() {
+        ['mousedown', 'mouseup', 'mousemove', 'mouseenter', 'mouseleave', 'mouseover', 'mouseout', 'click', 'dblclick', 'contextmenu'].forEach(eventType => {
+            this.component.addEventListener(eventType, e => {
+                e.stopPropagation();
+            });
+        });
+    }
+    renderEditor() {
+        return (h("div", { class: "ls-dv-toolbar" }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: "rowbox" }, h("ls-field-format", { dataItem: this.dataItem }))) : (h("div", { class: "rowbox" }, h("ls-field-format", { dataItem: this.dataItem }), h("ls-participant-select", { id: "ls-participant-select", roles: this.template?.roles, signer: this.signer, style: { display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' } }), h("ls-tooltip", { tooltipId: "ls-dv-tooltip" }))), h("slot", null)));
+    }
+    renderCompose() {
+        return (h("div", { class: this.dataItem && this.dataItem.length > 0 ? 'ls-dv-toolbar' : '' }, h("div", { class: "rowbox" }, h("ls-field-format", { dataItem: this.dataItem }), h("ls-tooltip", { tooltipId: "ls-dv-tooltip" })), h("slot", null)));
+    }
+    render() {
+        return this.mode === 'editor' ? this.renderEditor() : this.mode === 'compose' ? this.renderCompose() : null;
+    }
+    static get style() { return lsToolbarCss(); }
+}, [769, "ls-toolbar", {
+        "dataItem": [1040],
+        "groupInfo": [16],
+        "template": [16],
+        "editor": [1040],
+        "mode": [1],
+        "signer": [2]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-toolbar", "ls-field-format", "ls-icon", "ls-participant-select", "ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-toolbar":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsToolbar);
+            }
+            break;
+        case "ls-field-format":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-participant-select":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsToolbar as L, defineCustomElement as d };
+//# sourceMappingURL=p-DgBJsVwe.js.map
+
+//# sourceMappingURL=p-DgBJsVwe.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DgBJsVwe.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,q1JAAq1J,CAAC;;MCQr2J,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;AAGpB;;;AAGG;AAIH,IAAA,QAAQ;AAER;;;AAGG;AACK,IAAA,SAAS;AAEjB;;;AAGG;AACK,IAAA,QAAQ;AAEhB;;;AAGG;AAIH,IAAA,MAAM;AAEE,IAAA,IAAI;AAEJ,IAAA,MAAM;AAOd,IAAA,MAAM;AAON,IAAA,MAAM;;;;AAMN,IAAA,KAAK,CAAC,IAAY,EAAA;QAChB,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;;IAGzB,gBAAgB,GAAA;QACd,CAAC,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC,OAAO,CAAC,SAAS,IAAG;YACjJ,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,IAAG;gBAC7C,CAAC,CAAC,eAAe,EAAE;AACrB,aAAC,CAAC;AACJ,SAAC,CAAC;;IAGI,YAAY,GAAA;AAClB,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACvB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IACxC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,iBAAA,EAAA,EAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACxC,KAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,iBAAA,EAAA,EAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC5C,CAAA,CAAA,uBAAA,EAAA,EACE,EAAE,EAAC,uBAAuB,EAC1B,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,EAAE,EAClF,CAAA,EACF,CAAA,CAAA,YAAA,EAAA,EAAY,SAAS,EAAC,eAAe,EAAA,CAAG,CACpC,CACP,EAED,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACT;;IAIF,aAAa,GAAA;AACnB,QAAA,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,GAAG,EAAE,EAAA,EAC1E,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,iBAAA,EAAA,EAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC5C,CAAA,CAAA,YAAA,EAAA,EAAY,SAAS,EAAC,eAAe,EAAA,CAAG,CACpC,EAEN,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACT;;IAIV,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toolbar/ls-toolbar.scss?tag=ls-toolbar&encapsulation=shadow","src/components/ls-toolbar/ls-toolbar.tsx"],"sourcesContent":[".ls-dv-toolbar {\n  position: absolute;\n  top: 1rem;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: 0.375rem;\n  gap: 0.5rem;\n  width: fit-content;\n  border-radius: 1.125rem;\n  border: 1px solid $gray-20;\n  background: $white;\n  z-index: 1000;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n.ls-dv-invisible {\n  display: none;\n}\n\n\n/* Global Styles */\n\np {\n  color: $gray-80;\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: $primary-60;\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: $primary-70;\n}\n\n.ls-dv-button-link,\n.ls-dv-button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 2.25rem;\n}\n\n.ls-dv-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: $gray-80;\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: $gray-80;\n}\n\n.ls-dv-has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid $gray-40;\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.625rem;\n  color: $gray-100;\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: $gray-60;\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: $gray-50;\n  background-color: $white;\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem $primary-40;\n  border-color: $primary-60;\n  background-color: $white;\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: $primary-50;\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: $gray-10;\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'].ls-dv-indeterminate {\n  background-color: $primary-60;\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'].ls-dv-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'].ls-dv-indeterminate:hover {\n  background-color: $primary-70;\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 $primary-20;\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.ls-dv-checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.ls-dv-checkbox-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.ls-dv-form-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.ls-dv-form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.ls-dv-loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: $primary-60;\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: $primary-60;\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.ls-dv-tertiary-grey {\n  border: 1px solid $gray-40;\n  background-color: white;\n  color: $gray-80;\n}\n\nbutton.ls-dv-tertiary-grey:hover {\n  border: 1px solid $gray-50;\n  background: $gray-10;\n}\n\n.ls-dv-button-group {\n  display: flex;\n  border-radius: 0.625rem;\n  border: 1px solid $gray-30;\n  background: $white;\n  overflow: clip;\n}\n\n.ls-dv-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: $gray-80;\n}\n\n.ls-dv-button-group button:hover {\n  background: $gray-10;\n}\n\n.ls-dv-button-group > :first-child {\n  border-radius: 0.625rem 0 0 0.625rem;\n}\n\n.ls-dv-button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.ls-dv-button-group > :not(:first-child) {\n  border-left: 1px solid $gray-30;\n}\n\n","import { Component, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSApiTemplate, LsDocumentViewer, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-toolbar',\n  styleUrl: 'ls-toolbar.scss',\n  shadow: true,\n})\nexport class LsToolbar {\n  @Element() component: HTMLElement;\n\n  /**\n   * The selected items information (as JSON).\n   * {LSApiElement[]}\n   */\n  @Prop({\n    mutable: true,\n  })\n  dataItem: LSApiElement[];\n\n  /**\n   * The group and experience information.\n   * {object}\n   */\n  @Prop() groupInfo: object;\n\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() template: LSApiTemplate;\n\n  /**\n   * The main editor.\n   * {LSDocumentViewer}\n   */\n  @Prop({\n    mutable: true,\n  })\n  editor: LsDocumentViewer;\n\n  @Prop() mode: string;\n\n  @Prop() signer: number;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  // @Element() component: HTMLElement;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n    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  }\n\n  componentDidLoad() {\n    ['mousedown', 'mouseup', 'mousemove', 'mouseenter', 'mouseleave', 'mouseover', 'mouseout', 'click', 'dblclick', 'contextmenu'].forEach(eventType => {\n      this.component.addEventListener(eventType, e => {\n        e.stopPropagation();\n      });\n    });\n  }\n\n  private renderEditor() {\n    return (\n      <div class=\"ls-dv-toolbar\">\n        {this.dataItem && this.dataItem.length > 1 ? (\n          <div class=\"rowbox\">\n            <ls-field-format dataItem={this.dataItem} />\n          </div>\n        ) : (\n          <div class=\"rowbox\">\n            <ls-field-format dataItem={this.dataItem} />\n            <ls-participant-select\n              id=\"ls-participant-select\"\n              roles={this.template?.roles}\n              signer={this.signer}\n              style={{ display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' }}\n            />\n            <ls-tooltip tooltipId=\"ls-dv-tooltip\" />\n          </div>\n        )}\n        \n        <slot></slot>\n      </div>\n    );\n  }\n\n  private renderCompose() {\n    return (\n      <div class={this.dataItem && this.dataItem.length > 0 ? 'ls-dv-toolbar' : ''}>\n        <div class=\"rowbox\">\n          <ls-field-format dataItem={this.dataItem} />\n          <ls-tooltip tooltipId=\"ls-dv-tooltip\" />\n        </div>\n\n        <slot></slot>\n      </div>\n    );\n  }\n\n  render() {\n    return this.mode === 'editor' ? this.renderEditor() : this.mode === 'compose' ? this.renderCompose() : null;\n  }\n}\n"],"version":3}

package/dist/components/{p-BEoo68ix.js → p-DgdZURoz.js}

@@ -1,17 +1,17 @@
-import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BrykT5-C.js';
-import { d as defineCustomElement$d } from './p-DckVC3o2.js';
-import { d as defineCustomElement$c } from './p-DJ7bx7B5.js';
-import { d as defineCustomElement$b } from './p-DAP3L70b.js';
-import { d as defineCustomElement$a } from './p-C4Fkc5Wm.js';
-import { d as defineCustomElement$9 } from './p-DGgN9Tk0.js';
-import { d as defineCustomElement$8 } from './p-CgczqobT.js';
-import { d as defineCustomElement$7 } from './p-d3FQEed-.js';
-import { d as defineCustomElement$6 } from './p-DFvqOenH.js';
-import { d as defineCustomElement$5 } from './p-CSPLGKKp.js';
-import { d as defineCustomElement$4 } from './p-cJzdZ_Zw.js';
-import { d as defineCustomElement$3 } from './p-OLQsckjQ.js';
-import { d as defineCustomElement$2 } from './p-CWgG6RtI.js';
-import { d as defineCustomElement$1 } from './p-dHMolk9H.js';
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-DffaAVW4.js';
+import { d as defineCustomElement$d } from './p-3C_ngKa0.js';
+import { d as defineCustomElement$c } from './p-CuOa6zQ5.js';
+import { d as defineCustomElement$b } from './p-BH-y0Rpv.js';
+import { d as defineCustomElement$a } from './p-wxu8bkXk.js';
+import { d as defineCustomElement$9 } from './p-CkKXB6ey.js';
+import { d as defineCustomElement$8 } from './p-DVMW45bm.js';
+import { d as defineCustomElement$7 } from './p-DowYrMjW.js';
+import { d as defineCustomElement$6 } from './p-D5pMAqGE.js';
+import { d as defineCustomElement$5 } from './p-BT5rCW3w.js';
+import { d as defineCustomElement$4 } from './p-CKZG8VvW.js';
+import { d as defineCustomElement$3 } from './p-Cq8ahbie.js';
+import { d as defineCustomElement$2 } from './p-Dj0hj7yh.js';
+import { d as defineCustomElement$1 } from './p-DZP-fvPJ.js';
 
 const lsFieldPropertiesGeneralCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.ls-dv-field-set{display:flex;flex-direction:column;gap:1rem;width:100%}p{color:var(--gray-80, #6f7176);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)}.ls-dv-button-link,.ls-dv-button-link:hover{all:unset}select{appearance:none;height:2.25rem;width:100%}.ls-dv-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.625rem;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, #ffffff)}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, #ffffff)}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].ls-dv-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].ls-dv-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].ls-dv-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}.ls-dv-checkbox-container{display:flex;gap:0.5rem;width:100%}.ls-dv-checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.ls-dv-form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.ls-dv-loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #4456f6)}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.ls-dv-tertiary-grey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #6f7176)}button.ls-dv-tertiary-grey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #ffffff);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.ls-dv-secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.ls-dv-destructive{border:1px solid var(--red-60, #f64a44);background-color:white;color:var(--red-60, #f64a44)}button.ls-dv-destructive:hover{border:1px solid var(--red-70, #dc2721);background:var(--red-10, #fff0f0)}.ls-dv-button-group{display:flex;border-radius:0.625rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.ls-dv-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, #6f7176)}.ls-dv-button-group button:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group>:first-child{border-radius:0.625rem 0 0 0.625rem}.ls-dv-button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.ls-dv-button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
 
@@ -25,7 +25,7 @@ const LsFieldPropertiesGeneral = /*@__PURE__*/ proxyCustomElement(class LsFieldP
     }
     dataItem;
     render() {
-        return (h(Host, { key: 'd27212993ef85dda9dc51ca11f40a9a5a5a406b0' }, h("ls-field-properties-container", { key: 'd7a1f57ea3f83360e0c22fda9d80096ca5941135', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: '846eedecd500f90777becfd1a78f203481e9e61b', class: 'ls-dv-field-set', slot: "content" }, h("ls-field-content", { key: 'b58ec0a04b11bcff6f6c7aca8cd241ac4da69cee', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '6aad9fc18258f5fc1538980111355f9a85dc0c50', dataItem: this.dataItem })), h("div", { key: '7d6aa16c9da058f6a76145138146835d30321db8', class: 'ls-dv-field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: '7616df53521b4e4b86856da7dadbba8796ae56a7', dataItem: this.dataItem })), h("div", { key: '0c52ca8fd0357b8455abf7943dc64e52bba34821', class: 'ls-dv-field-set', slot: "placement" }, h("ls-field-placement", { key: '682e23ab5d64bc004776a75d835c93e768a75a66', dataItem: this.dataItem }))), h("ls-field-footer", { key: '855c58fafd58949b4c73926dab771873616e31f7', dataItem: this.dataItem })));
+        return (h(Host, { key: '400d40d588ac30d4341a7170e5d1d38f7d4d021b' }, h("ls-field-properties-container", { key: 'a6cc70e6ac60af9abed7cbdf9d1d3be2d8410e4c', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: 'e101fad55ecab33ff35ae5fcf6e556c6a928dc7a', class: 'ls-dv-field-set', slot: "content" }, h("ls-field-content", { key: '85923c2d99fd371b3e997f7444db931c1c5902fc', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '9b06efaf9d8efeb20671332690b88eb394516128', dataItem: this.dataItem })), h("div", { key: '1481f44b74b4141ef827724e1ec7dbb5c87b12d0', class: 'ls-dv-field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: 'be3c484f6aefc715ddf846e04c68b9c373d663a9', dataItem: this.dataItem })), h("div", { key: 'bc3998d85643b17c873f36c622de039dac4ca685', class: 'ls-dv-field-set', slot: "placement" }, h("ls-field-placement", { key: 'f055c895abcf308e8db9c7df5f931c25a308aa85', dataItem: this.dataItem }))), h("ls-field-footer", { key: '5d8830dc73e068fe6285540d8d1004898b39d6af', dataItem: this.dataItem })));
     }
     static get style() { return lsFieldPropertiesGeneralCss(); }
 }, [769, "ls-field-properties-general", {
@@ -112,6 +112,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldPropertiesGeneral as L, defineCustomElement as d };
-//# sourceMappingURL=p-BEoo68ix.js.map
+//# sourceMappingURL=p-DgdZURoz.js.map
 
-//# sourceMappingURL=p-BEoo68ix.js.map
+//# sourceMappingURL=p-DgdZURoz.js.map

package/dist/components/{p-BEoo68ix.js.map → p-DgdZURoz.js.map}

@@ -1 +1 @@
-{"file":"p-BEoo68ix.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,2BAA2B,GAAG,MAAM,CAAC,u2JAAu2J,CAAC;;MCQt4J,wBAAwB,iBAAAA,kBAAA,CAAA,MAAA,wBAAA,SAAAC,CAAA,CAAA;;;;;;;;AAC3B,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,iBAAiB,EAAE,IAAI,EAAC,SAAS,EAAA,EAC3C,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,iBAAiB,EAAE,IAAI,EAAC,YAAY,EAAA,EAC9C,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,iBAAiB,EAAE,IAAI,EAAC,WAAW,EAAA,EAC7C,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-general/ls-field-properties-general.scss?tag=ls-field-properties-general&encapsulation=shadow","src/components/ls-field-properties-general/ls-field-properties-general.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.ls-dv-field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n/* Global Styles */\n\np {\n  color: $gray-80;\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: $primary-60;\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: $primary-70;\n}\n\n.ls-dv-button-link,\n.ls-dv-button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 2.25rem;\n  width: 100%;\n}\n.ls-dv-has-leading-icon {\n  padding-left: 2.5rem;\n}\n\n\ninput,\nselect,\ntextarea {\n  border: 1px solid $gray-40;\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.625rem;\n  color: $gray-100;\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: $gray-60;\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: $gray-50;\n  background-color: $white;\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem $primary-40;\n  border-color: $primary-60;\n  background-color: $white;\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: $primary-50;\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: $gray-10;\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'].ls-dv-indeterminate {\n  background-color: $primary-60;\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'].ls-dv-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'].ls-dv-indeterminate:hover {\n  background-color: $primary-70;\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 $primary-20;\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.ls-dv-checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.ls-dv-checkbox-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.ls-dv-form-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.ls-dv-form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.ls-dv-loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: $primary-60;\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: $primary-60;\n  color: white;\n  font-weight: 500;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.ls-dv-tertiary-grey {\n  border: 1px solid $gray-40;\n  background-color: white;\n  color: $gray-80;\n}\n\nbutton.ls-dv-tertiary-grey:hover {\n  border: 1px solid $gray-50;\n  background: $gray-10;\n}\n\nbutton.ls-dv-secondary {\n  border: 1px solid $gray-50;\n  background: $white;\n  color: $gray-90;\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.ls-dv-secondary:hover {\n  border: 1px solid $gray-50;\n  background: $gray-10;\n}\n\nbutton.ls-dv-destructive {\n  border: 1px solid $red-60;\n  background-color: white;\n  color: $red-60;\n}\n\nbutton.ls-dv-destructive:hover {\n  border: 1px solid $red-70;\n  background: $red-10;\n}\n\n\n\n.ls-dv-button-group {\n  display: flex;\n  border-radius: 0.625rem;\n  border: 1px solid $gray-30;\n  background: $white;\n  overflow: clip;\n}\n\n.ls-dv-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: $gray-80;\n}\n\n.ls-dv-button-group button:hover {\n  background: $gray-10;\n}\n\n.ls-dv-button-group > :first-child {\n  border-radius: 0.625rem 0 0 0.625rem;\n}\n\n.ls-dv-button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.ls-dv-button-group > :not(:first-child) {\n  border-left: 1px solid $gray-30;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-general',\n  styleUrl: 'ls-field-properties-general.scss',\n  shadow: true,\n})\nexport class LsFieldPropertiesGeneral {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n          <div class={'ls-dv-field-set'} slot=\"content\">\n            <ls-field-content dataItem={this.dataItem} />\n            <ls-field-properties-advanced dataItem={this.dataItem} />\n          </div>\n          <div class={'ls-dv-field-set'} slot=\"dimensions\">\n            <ls-field-dimensions dataItem={this.dataItem} />\n          </div>\n          <div class={'ls-dv-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}
+{"file":"p-DgdZURoz.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,2BAA2B,GAAG,MAAM,CAAC,u2JAAu2J,CAAC;;MCQt4J,wBAAwB,iBAAAA,kBAAA,CAAA,MAAA,wBAAA,SAAAC,CAAA,CAAA;;;;;;;;AAC3B,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,iBAAiB,EAAE,IAAI,EAAC,SAAS,EAAA,EAC3C,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,iBAAiB,EAAE,IAAI,EAAC,YAAY,EAAA,EAC9C,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,iBAAiB,EAAE,IAAI,EAAC,WAAW,EAAA,EAC7C,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-general/ls-field-properties-general.scss?tag=ls-field-properties-general&encapsulation=shadow","src/components/ls-field-properties-general/ls-field-properties-general.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.ls-dv-field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n/* Global Styles */\n\np {\n  color: $gray-80;\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: $primary-60;\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: $primary-70;\n}\n\n.ls-dv-button-link,\n.ls-dv-button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 2.25rem;\n  width: 100%;\n}\n.ls-dv-has-leading-icon {\n  padding-left: 2.5rem;\n}\n\n\ninput,\nselect,\ntextarea {\n  border: 1px solid $gray-40;\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.625rem;\n  color: $gray-100;\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: $gray-60;\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: $gray-50;\n  background-color: $white;\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem $primary-40;\n  border-color: $primary-60;\n  background-color: $white;\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: $primary-50;\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: $gray-10;\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'].ls-dv-indeterminate {\n  background-color: $primary-60;\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'].ls-dv-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'].ls-dv-indeterminate:hover {\n  background-color: $primary-70;\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 $primary-20;\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.ls-dv-checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.ls-dv-checkbox-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.ls-dv-form-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.ls-dv-form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.ls-dv-loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: $primary-60;\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: $primary-60;\n  color: white;\n  font-weight: 500;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.ls-dv-tertiary-grey {\n  border: 1px solid $gray-40;\n  background-color: white;\n  color: $gray-80;\n}\n\nbutton.ls-dv-tertiary-grey:hover {\n  border: 1px solid $gray-50;\n  background: $gray-10;\n}\n\nbutton.ls-dv-secondary {\n  border: 1px solid $gray-50;\n  background: $white;\n  color: $gray-90;\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.ls-dv-secondary:hover {\n  border: 1px solid $gray-50;\n  background: $gray-10;\n}\n\nbutton.ls-dv-destructive {\n  border: 1px solid $red-60;\n  background-color: white;\n  color: $red-60;\n}\n\nbutton.ls-dv-destructive:hover {\n  border: 1px solid $red-70;\n  background: $red-10;\n}\n\n\n\n.ls-dv-button-group {\n  display: flex;\n  border-radius: 0.625rem;\n  border: 1px solid $gray-30;\n  background: $white;\n  overflow: clip;\n}\n\n.ls-dv-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: $gray-80;\n}\n\n.ls-dv-button-group button:hover {\n  background: $gray-10;\n}\n\n.ls-dv-button-group > :first-child {\n  border-radius: 0.625rem 0 0 0.625rem;\n}\n\n.ls-dv-button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.ls-dv-button-group > :not(:first-child) {\n  border-left: 1px solid $gray-30;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-general',\n  styleUrl: 'ls-field-properties-general.scss',\n  shadow: true,\n})\nexport class LsFieldPropertiesGeneral {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n          <div class={'ls-dv-field-set'} slot=\"content\">\n            <ls-field-content dataItem={this.dataItem} />\n            <ls-field-properties-advanced dataItem={this.dataItem} />\n          </div>\n          <div class={'ls-dv-field-set'} slot=\"dimensions\">\n            <ls-field-dimensions dataItem={this.dataItem} />\n          </div>\n          <div class={'ls-dv-field-set'} slot=\"placement\">\n            <ls-field-placement dataItem={this.dataItem} />\n          </div>\n        </ls-field-properties-container>\n        <ls-field-footer dataItem={this.dataItem} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CWgG6RtI.js → p-Dj0hj7yh.js}

@@ -1,4 +1,4 @@
-import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BrykT5-C.js';
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-DffaAVW4.js';
 
 const lsToggleCss = () => `:host{display:block}.ls-dv-switch{position:relative;display:inline-block;width:2.75rem;height:1.5rem}.ls-dv-switch input{opacity:0;width:0;height:0}.ls-dv-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}.ls-dv-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}.ls-dv-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}.ls-dv-indeterminate::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.75rem;height:0.125rem;background-color:white}input:checked+.ls-dv-slider{background-color:var(--primary-60, #4456f6)}input:focus+.ls-dv-slider{box-shadow:0 0 1px var(--primary-60, #4456f6);outline:0.25rem solid var(--primary-20, #c7ddff)}input:checked+.ls-dv-slider:before{-webkit-transform:translateX(1.25rem);-ms-transform:translateX(1.25rem);transform:translateX(1.25rem)}.ls-dv-slider.ls-dv-round,.ls-dv-indeterminate.ls-dv-round{border-radius:2.125rem}.ls-dv-slider.ls-dv-round:before{border-radius:50%}`;
 
@@ -17,9 +17,9 @@ const LsToggle = /*@__PURE__*/ proxyCustomElement(class LsToggle extends H {
         this.valueChange.emit(value);
     }
     render() {
-        return (h(Host, { key: '7c6e43de9b269574234d86e63ee565ed1dec639b' }, h("label", { key: 'd0bc005da5d85ae41f76296ef75b0b77fea63539', class: "ls-dv-switch" }, h("input", { key: 'e1babc771abbfce644208a7de5536d6b437eb88a', type: "checkbox", checked: this.checked, onChange: (e) => {
+        return (h(Host, { key: '6045adde2f52f375a9e0bc129b93e62bbe27c6bc' }, h("label", { key: 'f1be10d183b474b9e332a4773f3446029a2307a2', class: "ls-dv-switch" }, h("input", { key: '5a1c656ca6688d2312bd77babba7806c2946d3dc', type: "checkbox", checked: this.checked, onChange: (e) => {
                 this.changeHandler(e.target.checked);
-            } }), h("span", { key: 'caa87d93064826d2e2e553230277011e2a988cc1', class: `${this.indeterminate ? 'ls-dv-indeterminate' : 'ls-dv-slider'} ls-dv-round` })), h("slot", { key: 'd102cb6ea6b99a5ecf3994f8f221e8d8fa10d0e8' })));
+            } }), h("span", { key: '0bea6ade8e050194540c3d5d15a403582b1dd47e', class: `${this.indeterminate ? 'ls-dv-indeterminate' : 'ls-dv-slider'} ls-dv-round` })), h("slot", { key: 'f139321d94f5c442b62dedd767ede1556c8cbea1' })));
     }
     static get style() { return lsToggleCss(); }
 }, [772, "ls-toggle", {
@@ -42,6 +42,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsToggle as L, defineCustomElement as d };
-//# sourceMappingURL=p-CWgG6RtI.js.map
+//# sourceMappingURL=p-Dj0hj7yh.js.map
 
-//# sourceMappingURL=p-CWgG6RtI.js.map
+//# sourceMappingURL=p-Dj0hj7yh.js.map

package/dist/components/{p-CWgG6RtI.js.map → p-Dj0hj7yh.js.map}

@@ -1 +1 @@
-{"file":"p-CWgG6RtI.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,ovCAAovC,CAAC;;MCOnwC,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,cAAc,EAAA,EACzB,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,qBAAqB,GAAG,cAAc,CAAA,YAAA,CAAc,GAAS,CAC5F,EACR,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toggle/ls-toggle.scss?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.ls-dv-switch {\n  position: relative;\n  display: inline-block;\n  width: 2.75rem;\n  height: 1.5rem;\n}\n\n/* Hide default HTML checkbox */\n.ls-dv-switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.ls-dv-slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: $gray-20;\n  -webkit-transition: 0.4s;\n  transition: 0.4s;\n}\n\n.ls-dv-indeterminate {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: $primary-60;\n  -webkit-transition: 0.4s;\n  transition: 0.4s;\n}\n\n.ls-dv-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.ls-dv-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 + .ls-dv-slider {\n  background-color: $primary-60;\n}\n\ninput:focus + .ls-dv-slider {\n  box-shadow: 0 0 1px $primary-60;\n  outline: 0.25rem solid $primary-20;\n}\n\ninput:checked + .ls-dv-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.ls-dv-slider.ls-dv-round, .ls-dv-indeterminate.ls-dv-round {\n  border-radius: 2.125rem;\n}\n\n.ls-dv-slider.ls-dv-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.scss',\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=\"ls-dv-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 ? 'ls-dv-indeterminate' : 'ls-dv-slider'} ls-dv-round`}></span>\n        </label>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Dj0hj7yh.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,ovCAAovC,CAAC;;MCOnwC,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,cAAc,EAAA,EACzB,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,qBAAqB,GAAG,cAAc,CAAA,YAAA,CAAc,GAAS,CAC5F,EACR,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toggle/ls-toggle.scss?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.ls-dv-switch {\n  position: relative;\n  display: inline-block;\n  width: 2.75rem;\n  height: 1.5rem;\n}\n\n/* Hide default HTML checkbox */\n.ls-dv-switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.ls-dv-slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: $gray-20;\n  -webkit-transition: 0.4s;\n  transition: 0.4s;\n}\n\n.ls-dv-indeterminate {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: $primary-60;\n  -webkit-transition: 0.4s;\n  transition: 0.4s;\n}\n\n.ls-dv-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.ls-dv-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 + .ls-dv-slider {\n  background-color: $primary-60;\n}\n\ninput:focus + .ls-dv-slider {\n  box-shadow: 0 0 1px $primary-60;\n  outline: 0.25rem solid $primary-20;\n}\n\ninput:checked + .ls-dv-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.ls-dv-slider.ls-dv-round, .ls-dv-indeterminate.ls-dv-round {\n  border-radius: 2.125rem;\n}\n\n.ls-dv-slider.ls-dv-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.scss',\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=\"ls-dv-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 ? 'ls-dv-indeterminate' : 'ls-dv-slider'} ls-dv-round`}></span>\n        </label>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-d3FQEed-.js → p-DowYrMjW.js}

@@ -1,5 +1,5 @@
-import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BrykT5-C.js';
-import { d as dvI18n } from './p-Dx1cMyvL.js';
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-DffaAVW4.js';
+import { d as dvI18n } from './p-BtjCijn4.js';
 
 const lsFieldPropertiesContainerCss = () => `*{margin:0;box-sizing:border-box}:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:calc(100% - 7.25rem);position:relative}.ls-dv-tabs-container{display:grid;width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-dv-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6f7176);text-transform:capitalize}.ls-dv-tab.ls-dv-active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-dv-tab:not(.ls-dv-active):hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #edeff2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.ls-dv-scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:100%}`;
 
@@ -20,7 +20,7 @@ const LsFieldPropertiesContainer = /*@__PURE__*/ proxyCustomElement(class LsFiel
         }
     }
     render() {
-        return (h(Host, { key: '9c36b5da13bea523df82df8b09653072f18731de' }, this.tabs.length > 1 && (h("div", { key: '8280f589050d81cf7983537e23176f637c38b9a2', class: 'ls-dv-tabs-container', style: { gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` } }, this.tabs.map(tab => (h("button", { class: tab === this.selectedTab ? 'ls-dv-tab ls-dv-active' : 'ls-dv-tab', onClick: () => (this.selectedTab = tab) }, dvI18n.t(`tabs.${tab}`, { defaultValue: tab })))))), h("div", { key: '54d443298a0169f23c3a5c798d75fbf05836b46e', class: 'ls-dv-scrolling-container' }, h("slot", { key: 'ae5194c400ed5d7e47024b9d33618193ea410ea9', name: this.selectedTab }))));
+        return (h(Host, { key: 'b1fd1ab25e56d0f6b009012bd03c8e16f0ca7e54' }, this.tabs.length > 1 && (h("div", { key: '6c2ae62c5b3ee2d46e25b37c5d6c945874737a66', class: 'ls-dv-tabs-container', style: { gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` } }, this.tabs.map(tab => (h("button", { class: tab === this.selectedTab ? 'ls-dv-tab ls-dv-active' : 'ls-dv-tab', onClick: () => (this.selectedTab = tab) }, dvI18n.t(`tabs.${tab}`, { defaultValue: tab })))))), h("div", { key: '60a78fab9be2656cbcd0a842c84a0471c9f68dbd', class: 'ls-dv-scrolling-container' }, h("slot", { key: '8f59435c282ddf990a499745aa013d68acb0f604', name: this.selectedTab }))));
     }
     static get style() { return lsFieldPropertiesContainerCss(); }
 }, [769, "ls-field-properties-container", {
@@ -44,6 +44,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldPropertiesContainer as L, defineCustomElement as d };
-//# sourceMappingURL=p-d3FQEed-.js.map
+//# sourceMappingURL=p-DowYrMjW.js.map
 
-//# sourceMappingURL=p-d3FQEed-.js.map
+//# sourceMappingURL=p-DowYrMjW.js.map

package/dist/components/{p-d3FQEed-.js.map → p-DowYrMjW.js.map}

@@ -1 +1 @@
-{"file":"p-d3FQEed-.js","mappings":";;;AAAA,MAAM,6BAA6B,GAAG,MAAM,CAAC,g+BAAg+B,CAAC;;MCSjgC,0BAA0B,iBAAAA,kBAAA,CAAA,MAAA,0BAAA,SAAAC,CAAA,CAAA;;;;;;;;AAC7B,IAAA,QAAQ;IACR,IAAI,GAAa,EAAE;AACY,IAAA,WAAW;IAElD,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE;;;IAIzC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,KACnB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAC,MAAM,CAAQ,MAAA,CAAA,EAAE,EACnG,EAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAChB,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC,WAAW,GAAG,wBAAwB,GAAG,WAAW,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,IACtH,MAAM,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAA,CAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CACxC,CACV,CAAC,CACE,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,2BAA2B,EAAA,EACrC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,WAAW,EAAS,CAAA,CACjC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-container/ls-field-properties-container.scss?tag=ls-field-properties-container&encapsulation=shadow","src/components/ls-field-properties-container/ls-field-properties-container.tsx"],"sourcesContent":["* {\n  margin: 0;\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: calc(100% - 7.25rem);\n  position: relative;\n}\n\n.ls-dv-tabs-container {\n  display: grid;\n  width: 100%;\n  gap: 0.125rem;\n  padding: 0.125rem;\n  border: 1px solid $gray-30;\n  border-radius: 0.75rem;\n  background: $white;\n}\n\n.ls-dv-tab {\n  all: unset;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  padding: 0.5rem;\n  border-radius: 0.625rem;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  color: $gray-80;\n  text-transform: capitalize;\n}\n\n.ls-dv-tab.ls-dv-active {\n  background: $primary-10;\n  color: $primary-60;\n}\n\n.ls-dv-tab:not(.ls-dv-active):hover {\n  background: $gray-10;\n}\n\n.ls-dv-button-footer {\n  display: flex;\n  padding-top: 1rem;\n  border-top: 1px solid $gray-20;\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  margin-top: auto;\n}\n\n.ls-dv-scrolling-container {\n  overflow-y: auto;\n  padding: 0 1rem;\n  margin: 0 -1rem;\n  height: 100%;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { dvI18n } from '../../i18n/i18n';\n\n@Component({\n  tag: 'ls-field-properties-container',\n  styleUrl: 'ls-field-properties-container.scss',\n  shadow: true,\n})\nexport class LsFieldPropertiesContainer {\n  @Prop() dataItem: LSApiElement;\n  @Prop() tabs: string[] = [];\n  @Prop({ mutable: true, reflect: true}) selectedTab: string;\n\n  componentWillLoad() {\n    if (!this.selectedTab) {\n      this.selectedTab = this.tabs[0] || '';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.length > 1 && (\n          <div class={'ls-dv-tabs-container'} style={{ gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` }}>\n            {this.tabs.map(tab => (\n              <button class={tab === this.selectedTab ? 'ls-dv-tab ls-dv-active' : 'ls-dv-tab'} onClick={() => (this.selectedTab = tab)}>\n                {dvI18n.t(`tabs.${tab}`, { defaultValue: tab })}\n              </button>\n            ))}\n          </div>\n        )}\n        <div class={'ls-dv-scrolling-container'}>\n          <slot name={this.selectedTab}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DowYrMjW.js","mappings":";;;AAAA,MAAM,6BAA6B,GAAG,MAAM,CAAC,g+BAAg+B,CAAC;;MCSjgC,0BAA0B,iBAAAA,kBAAA,CAAA,MAAA,0BAAA,SAAAC,CAAA,CAAA;;;;;;;;AAC7B,IAAA,QAAQ;IACR,IAAI,GAAa,EAAE;AACY,IAAA,WAAW;IAElD,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE;;;IAIzC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,KACnB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAC,MAAM,CAAQ,MAAA,CAAA,EAAE,EACnG,EAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAChB,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC,WAAW,GAAG,wBAAwB,GAAG,WAAW,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,IACtH,MAAM,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAA,CAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CACxC,CACV,CAAC,CACE,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,2BAA2B,EAAA,EACrC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,WAAW,EAAS,CAAA,CACjC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-container/ls-field-properties-container.scss?tag=ls-field-properties-container&encapsulation=shadow","src/components/ls-field-properties-container/ls-field-properties-container.tsx"],"sourcesContent":["* {\n  margin: 0;\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: calc(100% - 7.25rem);\n  position: relative;\n}\n\n.ls-dv-tabs-container {\n  display: grid;\n  width: 100%;\n  gap: 0.125rem;\n  padding: 0.125rem;\n  border: 1px solid $gray-30;\n  border-radius: 0.75rem;\n  background: $white;\n}\n\n.ls-dv-tab {\n  all: unset;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  padding: 0.5rem;\n  border-radius: 0.625rem;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  color: $gray-80;\n  text-transform: capitalize;\n}\n\n.ls-dv-tab.ls-dv-active {\n  background: $primary-10;\n  color: $primary-60;\n}\n\n.ls-dv-tab:not(.ls-dv-active):hover {\n  background: $gray-10;\n}\n\n.ls-dv-button-footer {\n  display: flex;\n  padding-top: 1rem;\n  border-top: 1px solid $gray-20;\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  margin-top: auto;\n}\n\n.ls-dv-scrolling-container {\n  overflow-y: auto;\n  padding: 0 1rem;\n  margin: 0 -1rem;\n  height: 100%;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { dvI18n } from '../../i18n/i18n';\n\n@Component({\n  tag: 'ls-field-properties-container',\n  styleUrl: 'ls-field-properties-container.scss',\n  shadow: true,\n})\nexport class LsFieldPropertiesContainer {\n  @Prop() dataItem: LSApiElement;\n  @Prop() tabs: string[] = [];\n  @Prop({ mutable: true, reflect: true}) selectedTab: string;\n\n  componentWillLoad() {\n    if (!this.selectedTab) {\n      this.selectedTab = this.tabs[0] || '';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.length > 1 && (\n          <div class={'ls-dv-tabs-container'} style={{ gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` }}>\n            {this.tabs.map(tab => (\n              <button class={tab === this.selectedTab ? 'ls-dv-tab ls-dv-active' : 'ls-dv-tab'} onClick={() => (this.selectedTab = tab)}>\n                {dvI18n.t(`tabs.${tab}`, { defaultValue: tab })}\n              </button>\n            ))}\n          </div>\n        )}\n        <div class={'ls-dv-scrolling-container'}>\n          <slot name={this.selectedTab}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BYjOvCbn.js → p-DrEcfY_J.js}

@@ -1,6 +1,6 @@
-import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h } from './p-BrykT5-C.js';
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h } from './p-DffaAVW4.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$1 } from './p-CSPLGKKp.js';
+import { d as defineCustomElement$1 } from './p-BT5rCW3w.js';
 
 const lsTextareaInputCss = () => `* {
   box-sizing: border-box;
@@ -284,6 +284,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsTextareaInput as L, defineCustomElement as d };
-//# sourceMappingURL=p-BYjOvCbn.js.map
+//# sourceMappingURL=p-DrEcfY_J.js.map
 
-//# sourceMappingURL=p-BYjOvCbn.js.map
+//# sourceMappingURL=p-DrEcfY_J.js.map