@dativa-lv/lx-builders 2.2.3 → 2.2.6

package/README.md

@@ -34,7 +34,7 @@ Check out our [🌐 Form Builder Demo](https://lx-ui.dev/resources/forms/bu
 ## Render with
 - <a href="/docs/ViewBuilder.md">ℹ️&nbsp;LxViewBuilder</a>
 - <a href="/docs/FormBuilder.md">ℹ️&nbsp;LxFormBuilder</a>
-- ℹ️&nbsp;LxFilterBuilder
+- <a href="/docs/FilterBuilder.md">ℹ️&nbsp;LxFilterBuilder</a>
 
 ## Get
 

package/dist/src/components/FilterBuilder.vue.d.ts

@@ -3,7 +3,7 @@ import { OnCleanup } from '@vue/reactivity';
 declare const _default: DefineComponent<{}, {
     validateModel: typeof validateModel;
     clearValidations: typeof clearValidations;
-    $emit: (event: "filter" | "update:modelValue" | "rowActionClick" | "resetFilters" | "fastFilterClick" | "update:expanded", ...args: any[]) => void;
+    $emit: (event: "filter" | "update:modelValue" | "rowActionClick" | "emit" | "resetFilters" | "fastFilterClick" | "update:expanded", ...args: any[]) => void;
     $props: {
         readonly [x: string]: any;
     };

package/dist/src/components/constructor/PropRendererItem.vue.d.ts

@@ -146,6 +146,7 @@ declare const _default: DefineComponent<{}, {
             nameAttribute: string;
             selectionKind: string;
             stickyToolbar: boolean;
+            selectableAttribute: string;
             hasSelecting: boolean;
             toolbarActionDefinitions: unknown[];
             columnCount: number;
@@ -174,6 +175,7 @@ declare const _default: DefineComponent<{}, {
                 readonly nameAttribute?: string;
                 readonly selectionKind?: string;
                 readonly stickyToolbar?: boolean;
+                readonly selectableAttribute?: string;
                 readonly hasSelecting?: boolean;
                 readonly toolbarActionDefinitions?: unknown[];
                 readonly columnCount?: number;
@@ -212,7 +214,7 @@ declare const _default: DefineComponent<{}, {
         $forceUpdate: () => void;
         $nextTick: nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
-    } & Readonly<{}> & Omit<Readonly<{}>, "$props" | "$emit" | "modelValue" | "readOnly" | "columnCount" | "kind" | "requiredMode" | "canAddItems" | "texts" | "id" | "actionDefinitions" | "uppercase" | "labelId" | "clearModel" | "idAttribute" | "nameAttribute" | "selectionKind" | "stickyToolbar" | "hasSelecting" | "toolbarActionDefinitions" | "expandable" | "defaultExpanded" | "expandedAttribute" | "invalidAttribute" | "selectedValues" | "descriptionAttribute" | "iconAttribute" | "hideRemoveAttribute" | "removeEnableByAttribute" | "removeVisibleByAttribute"> & ShallowUnwrapRef<{
+    } & Readonly<{}> & Omit<Readonly<{}>, "$props" | "$emit" | "modelValue" | "readOnly" | "columnCount" | "kind" | "requiredMode" | "canAddItems" | "texts" | "id" | "actionDefinitions" | "uppercase" | "labelId" | "clearModel" | "idAttribute" | "nameAttribute" | "selectionKind" | "stickyToolbar" | "selectableAttribute" | "hasSelecting" | "toolbarActionDefinitions" | "expandable" | "defaultExpanded" | "expandedAttribute" | "invalidAttribute" | "selectedValues" | "descriptionAttribute" | "iconAttribute" | "hideRemoveAttribute" | "removeEnableByAttribute" | "removeVisibleByAttribute"> & ShallowUnwrapRef<{
         clearModel: () => any[];
         $emit: (event: "update:modelValue" | "actionClick" | "toolbarActionClick" | "update:selectedValues", ...args: any[]) => void;
         texts: Record<string, any>;
@@ -225,6 +227,7 @@ declare const _default: DefineComponent<{}, {
         nameAttribute: string;
         selectionKind: string;
         stickyToolbar: boolean;
+        selectableAttribute: string;
         hasSelecting: boolean;
         toolbarActionDefinitions: unknown[];
         columnCount: number;
@@ -253,6 +256,7 @@ declare const _default: DefineComponent<{}, {
             readonly nameAttribute?: string;
             readonly selectionKind?: string;
             readonly stickyToolbar?: boolean;
+            readonly selectableAttribute?: string;
             readonly hasSelecting?: boolean;
             readonly toolbarActionDefinitions?: unknown[];
             readonly columnCount?: number;
@@ -418,6 +422,7 @@ declare const _default: DefineComponent<{}, {
             nameAttribute: string;
             selectionKind: string;
             stickyToolbar: boolean;
+            selectableAttribute: string;
             hasSelecting: boolean;
             toolbarActionDefinitions: unknown[];
             columnCount: number;
@@ -446,6 +451,7 @@ declare const _default: DefineComponent<{}, {
                 readonly nameAttribute?: string;
                 readonly selectionKind?: string;
                 readonly stickyToolbar?: boolean;
+                readonly selectableAttribute?: string;
                 readonly hasSelecting?: boolean;
                 readonly toolbarActionDefinitions?: unknown[];
                 readonly columnCount?: number;
@@ -484,7 +490,7 @@ declare const _default: DefineComponent<{}, {
         $forceUpdate: () => void;
         $nextTick: nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
-    } & Readonly<{}> & Omit<Readonly<{}>, "$props" | "$emit" | "modelValue" | "readOnly" | "columnCount" | "kind" | "requiredMode" | "canAddItems" | "texts" | "id" | "actionDefinitions" | "uppercase" | "labelId" | "clearModel" | "idAttribute" | "nameAttribute" | "selectionKind" | "stickyToolbar" | "hasSelecting" | "toolbarActionDefinitions" | "expandable" | "defaultExpanded" | "expandedAttribute" | "invalidAttribute" | "selectedValues" | "descriptionAttribute" | "iconAttribute" | "hideRemoveAttribute" | "removeEnableByAttribute" | "removeVisibleByAttribute"> & ShallowUnwrapRef<{
+    } & Readonly<{}> & Omit<Readonly<{}>, "$props" | "$emit" | "modelValue" | "readOnly" | "columnCount" | "kind" | "requiredMode" | "canAddItems" | "texts" | "id" | "actionDefinitions" | "uppercase" | "labelId" | "clearModel" | "idAttribute" | "nameAttribute" | "selectionKind" | "stickyToolbar" | "selectableAttribute" | "hasSelecting" | "toolbarActionDefinitions" | "expandable" | "defaultExpanded" | "expandedAttribute" | "invalidAttribute" | "selectedValues" | "descriptionAttribute" | "iconAttribute" | "hideRemoveAttribute" | "removeEnableByAttribute" | "removeVisibleByAttribute"> & ShallowUnwrapRef<{
         clearModel: () => any[];
         $emit: (event: "update:modelValue" | "actionClick" | "toolbarActionClick" | "update:selectedValues", ...args: any[]) => void;
         texts: Record<string, any>;
@@ -497,6 +503,7 @@ declare const _default: DefineComponent<{}, {
         nameAttribute: string;
         selectionKind: string;
         stickyToolbar: boolean;
+        selectableAttribute: string;
         hasSelecting: boolean;
         toolbarActionDefinitions: unknown[];
         columnCount: number;
@@ -525,6 +532,7 @@ declare const _default: DefineComponent<{}, {
             readonly nameAttribute?: string;
             readonly selectionKind?: string;
             readonly stickyToolbar?: boolean;
+            readonly selectableAttribute?: string;
             readonly hasSelecting?: boolean;
             readonly toolbarActionDefinitions?: unknown[];
             readonly columnCount?: number;
@@ -690,6 +698,7 @@ declare const _default: DefineComponent<{}, {
             nameAttribute: string;
             selectionKind: string;
             stickyToolbar: boolean;
+            selectableAttribute: string;
             hasSelecting: boolean;
             toolbarActionDefinitions: unknown[];
             columnCount: number;
@@ -718,6 +727,7 @@ declare const _default: DefineComponent<{}, {
                 readonly nameAttribute?: string;
                 readonly selectionKind?: string;
                 readonly stickyToolbar?: boolean;
+                readonly selectableAttribute?: string;
                 readonly hasSelecting?: boolean;
                 readonly toolbarActionDefinitions?: unknown[];
                 readonly columnCount?: number;
@@ -756,7 +766,7 @@ declare const _default: DefineComponent<{}, {
         $forceUpdate: () => void;
         $nextTick: nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
-    } & Readonly<{}> & Omit<Readonly<{}>, "$props" | "$emit" | "modelValue" | "readOnly" | "columnCount" | "kind" | "requiredMode" | "canAddItems" | "texts" | "id" | "actionDefinitions" | "uppercase" | "labelId" | "clearModel" | "idAttribute" | "nameAttribute" | "selectionKind" | "stickyToolbar" | "hasSelecting" | "toolbarActionDefinitions" | "expandable" | "defaultExpanded" | "expandedAttribute" | "invalidAttribute" | "selectedValues" | "descriptionAttribute" | "iconAttribute" | "hideRemoveAttribute" | "removeEnableByAttribute" | "removeVisibleByAttribute"> & ShallowUnwrapRef<{
+    } & Readonly<{}> & Omit<Readonly<{}>, "$props" | "$emit" | "modelValue" | "readOnly" | "columnCount" | "kind" | "requiredMode" | "canAddItems" | "texts" | "id" | "actionDefinitions" | "uppercase" | "labelId" | "clearModel" | "idAttribute" | "nameAttribute" | "selectionKind" | "stickyToolbar" | "selectableAttribute" | "hasSelecting" | "toolbarActionDefinitions" | "expandable" | "defaultExpanded" | "expandedAttribute" | "invalidAttribute" | "selectedValues" | "descriptionAttribute" | "iconAttribute" | "hideRemoveAttribute" | "removeEnableByAttribute" | "removeVisibleByAttribute"> & ShallowUnwrapRef<{
         clearModel: () => any[];
         $emit: (event: "update:modelValue" | "actionClick" | "toolbarActionClick" | "update:selectedValues", ...args: any[]) => void;
         texts: Record<string, any>;
@@ -769,6 +779,7 @@ declare const _default: DefineComponent<{}, {
         nameAttribute: string;
         selectionKind: string;
         stickyToolbar: boolean;
+        selectableAttribute: string;
         hasSelecting: boolean;
         toolbarActionDefinitions: unknown[];
         columnCount: number;
@@ -797,6 +808,7 @@ declare const _default: DefineComponent<{}, {
             readonly nameAttribute?: string;
             readonly selectionKind?: string;
             readonly stickyToolbar?: boolean;
+            readonly selectableAttribute?: string;
             readonly hasSelecting?: boolean;
             readonly toolbarActionDefinitions?: unknown[];
             readonly columnCount?: number;
@@ -831,5 +843,103 @@ declare const _default: DefineComponent<{}, {
             }): any;
         };
     };
+    textsModal: {
+        $: ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            modalRef: HTMLDivElement;
+            modalHeader: HTMLElement;
+            modalContent: HTMLElement;
+            modalFooter: HTMLElement;
+            nativeModal: HTMLDialogElement;
+        };
+        $slots: Readonly<{
+            [name: string]: Slot<any>;
+        }>;
+        $root: ComponentPublicInstance | null;
+        $parent: ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: ComponentOptionsBase<Readonly<{}>, {
+            open: () => void;
+            close: (source?: any) => void;
+            $emit: (event: "close" | "actionClick", ...args: any[]) => void;
+            label: string;
+            texts: Record<string, any>;
+            id: string;
+            size: string;
+            kind: string;
+            actionDefinitions: unknown[];
+            disableClosing: boolean;
+            escEnabled: boolean;
+            buttonSecondaryIsCancel: boolean;
+            $props: {
+                readonly label?: string;
+                readonly texts?: Record<string, any>;
+                readonly id?: string;
+                readonly size?: string;
+                readonly kind?: string;
+                readonly actionDefinitions?: unknown[];
+                readonly disableClosing?: boolean;
+                readonly escEnabled?: boolean;
+                readonly buttonSecondaryIsCancel?: boolean;
+            };
+        }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+            renderTriggered?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<{}>, "close" | "$props" | "$emit" | "kind" | "texts" | "id" | "actionDefinitions" | "label" | "open" | "size" | "disableClosing" | "escEnabled" | "buttonSecondaryIsCancel"> & ShallowUnwrapRef<{
+        open: () => void;
+        close: (source?: any) => void;
+        $emit: (event: "close" | "actionClick", ...args: any[]) => void;
+        label: string;
+        texts: Record<string, any>;
+        id: string;
+        size: string;
+        kind: string;
+        actionDefinitions: unknown[];
+        disableClosing: boolean;
+        escEnabled: boolean;
+        buttonSecondaryIsCancel: boolean;
+        $props: {
+            readonly label?: string;
+            readonly texts?: Record<string, any>;
+            readonly id?: string;
+            readonly size?: string;
+            readonly kind?: string;
+            readonly actionDefinitions?: unknown[];
+            readonly disableClosing?: boolean;
+            readonly escEnabled?: boolean;
+            readonly buttonSecondaryIsCancel?: boolean;
+        };
+    }> & {} & ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+            default?(_: {}): any;
+        };
+    };
 }, any>;
 export default _default;

package/dist/styles/lx-builders.css

@@ -0,0 +1 @@
+

package/dist/styles/lx-constructor.css

@@ -1 +1 @@
-.lx-panel>.panel-side{background-color:var(--color-region);width:var(--aside-size)}.lx-panel>.panel-side .config-header{height:var(--row-size);background-color:var(--color-layout-background);padding:0 .5rem}.lx-panel>.panel-side .config-header>.lx-context-container .popper-wrapper{width:100%}.lx-panel>.panel-side .config-header .header-wrapper{height:var(--row-size);width:100%;display:flex;align-items:center;justify-content:space-between;gap:.25rem}.lx-panel>.panel-side .config-header .header-wrapper>p{color:var(--color-nav-foreground);font-weight:var(--font-weight-bold)}.lx-panel>.panel-side .config-header .header-wrapper>svg{height:1.5rem;fill:var(--color-nav-foreground)}.lx-panel>.panel-side .config-header .lx-dropdown-toggler .header-wrapper:has(p){cursor:pointer}.lx-panel>.panel-side .panel-main>.button-group{display:grid;grid-template-columns:1fr 1fr;border:var(--border-width-1) solid var(--color-chrome);border-right:none}.lx-panel>.panel-side .settings-wrapper{padding:var(--space-0750);display:flex;flex-direction:column;gap:var(--space-0750)}.lx-panel>.panel-side .panel-main>.button-group>.lx-button{--color-button-secondary-background: var(--color-region-2);--color-button-secondary-text: var(--color-data);--color-button-secondary-icon: var(--color-data);--button-secondary-border: var(--border-width-2) solid transparent}.lx-panel>.panel-side .button-group>.lx-button:first-child:after{position:absolute;content:" ";height:2rem;right:0;border-right:var(--border-width-1) solid var(--color-chrome);opacity:1;transition:opacity .1s ease-out;z-index:1}.lx-panel>.panel-side .button-group>.lx-button:first-child:hover:not(.lx-disabled):after{opacity:0}.lx-panel{position:fixed;top:calc(var(--nav-row-size) + 10vh);z-index:1000;right:0;display:flex;flex-direction:row-reverse}#constructor-overlay{position:absolute;top:0;left:0;width:100%;height:100dvh;z-index:100;pointer-events:none}.highlight{position:absolute;box-sizing:border-box;border:var(--border-width-2) solid var(--color-blue);background:transparent;z-index:100;pointer-events:none;transition:left .1s ease-out,top .1s ease-out}.highlight .highlight-toolbar{position:absolute;top:-1.5rem;left:-.125rem;display:flex;background:var(--color-blue);pointer-events:all;height:1.5rem}.highlight .highlight-toolbar>span{padding-inline:var(--space-0250);color:#fff}.highlight .highlight-toolbar .lx-button{--button-ghost-icon-only-height: 1.5rem;--button-ghost-icon-only-width: 1.5rem;--button-ghost-icon-only-min-width: 1.5rem;--color-button-ghost-icon: white;--color-button-ghost-icon-focus: white;--button-ghost-icon-size: 1.25rem}.lx:not(.lx-theme-contrast) .lx-panel .panel-side{--region-border-transparent: var(--border-width-1) solid var(--color-chrome)}.lx.lx-no-transparency .lx-panel .panel-side{--shadow-dropdown: inset 0 0 0 var(--border-width-1) var(--color-chrome)}.lx-panel .panel-side{box-shadow:var(--shadow-dropdown)}.lx-panel .panel-main{max-height:70vh;max-width:var(--aside-size);overflow-y:overlay}.lx-panel .panel-main .lx-form-grid .lx-main.lx-compact-sections>.lx-form-section{padding-left:calc(var(--gap-form) / 4);padding-right:calc(var(--gap-form) / 4)}.no-component-wrapper{padding:var(--space-0250)}.no-component-wrapper>.lx-empty-state-wrapper{width:100%}.panel-main .lx-form-grid>.lx-main .lx-row{max-width:calc(var(--aside-size) - 2rem)}.code-display>.code{white-space:pre;font-family:var(--font-family-mono);padding:var(--space-2000);grid-column:1 / 3;overflow:auto;background-color:var(--color-region-2);margin:0}.import-switcher{padding-bottom:var(--space-1000)}.highlight .highlight-toolbar-remove{right:-.125rem;left:unset}.custom-auto-complete-item-with-icon{display:grid;grid-template-columns:auto 1fr;column-gap:.5rem;width:100%;height:1.5rem;align-items:center}.custom-auto-complete-item-with-icon p.lx-data{font-weight:400;min-height:0;align-self:center;padding:0;margin:0}.custom-auto-complete-item-with-icon svg{width:1.5rem;height:1.5rem}.component-add-text{margin-bottom:var(--space-1000)}.lx-panel>.panel-side .config-header.has-selected-element{background-color:var(--color-blue);cursor:pointer}.lx-panel>.panel-side .config-header.has-selected-element:hover{background-color:var(--color-interactive-hover-background)}.lx-panel>.button-side>.lx-button{--color-button-secondary-background: var(--color-nav-background);--color-button-secondary-background-hover: var(--color-interactive-hover-background);--color-button-active-mode-background: var(--color-nav-item-background-selected);--color-button-secondary-icon: var(--color-nav-foreground);--color-button-active-mode-icon: var(--color-nav-item-icon-selected);--button-secondary-border: var(--button-secondary-border-width) solid transparent}.lx-panel>.panel-side .prop-search{border-left:var(--border-width-1) solid var(--color-chrome)}.lx-panel>.panel-side .config-header.has-selected-element .header-wrapper p{color:var(--color-focus-foreground)}.lx-panel>.panel-side .config-header.has-selected-element .header-wrapper svg{fill:var(--color-focus-foreground)}
+.lx-panel>.panel-side{background-color:var(--color-region);width:var(--aside-size)}.lx-panel>.panel-side .config-header{height:var(--row-size);background-color:var(--color-layout-background);padding:0 .5rem}.lx-panel>.panel-side .config-header>.lx-context-container .popper-wrapper{width:100%}.lx-panel>.panel-side .config-header .header-wrapper{height:var(--row-size);justify-content:space-between;align-items:center;gap:.25rem;width:100%;display:flex}.lx-panel>.panel-side .config-header .header-wrapper>p{color:var(--color-nav-foreground);font-weight:var(--font-weight-bold)}.lx-panel>.panel-side .config-header .header-wrapper>svg{height:1.5rem;fill:var(--color-nav-foreground)}.lx-panel>.panel-side .config-header .lx-dropdown-toggler .header-wrapper:has(p){cursor:pointer}.lx-panel>.panel-side .panel-main>.button-group{border:var(--border-width-1) solid var(--color-chrome);border-right:none;grid-template-columns:1fr 1fr;display:grid}.lx-panel>.panel-side .settings-wrapper{padding:var(--space-0750);gap:var(--space-0750);flex-direction:column;display:flex}.lx-panel>.panel-side .panel-main>.button-group>.lx-button{--color-button-secondary-background:var(--color-region-2);--color-button-secondary-text:var(--color-data);--color-button-secondary-icon:var(--color-data);--button-secondary-border:var(--border-width-2) solid transparent}.lx-panel>.panel-side .button-group>.lx-button:first-child:after{content:" ";border-right:var(--border-width-1) solid var(--color-chrome);opacity:1;z-index:1;height:2rem;transition:opacity .1s ease-out;position:absolute;right:0}.lx-panel>.panel-side .button-group>.lx-button:first-child:hover:not(.lx-disabled):after{opacity:0}.lx-panel{top:calc(var(--nav-row-size) + 10vh);z-index:1000;flex-direction:row-reverse;display:flex;position:fixed;right:0}#constructor-overlay{z-index:100;pointer-events:none;width:100%;height:100dvh;position:absolute;top:0;left:0}.highlight{box-sizing:border-box;border:var(--border-width-2) solid var(--color-blue);z-index:100;pointer-events:none;background:0 0;transition:left .1s ease-out,top .1s ease-out;position:absolute}.highlight .highlight-toolbar{background:var(--color-blue);pointer-events:all;height:1.5rem;display:flex;position:absolute;top:-1.5rem;left:-.125rem}.highlight .highlight-toolbar>span{padding-inline:var(--space-0250);color:#fff}.highlight .highlight-toolbar .lx-button{--button-ghost-icon-only-height:1.5rem;--button-ghost-icon-only-width:1.5rem;--button-ghost-icon-only-min-width:1.5rem;--color-button-ghost-icon:white;--color-button-ghost-icon-focus:white;--button-ghost-icon-size:1.25rem}.lx:not(.lx-theme-contrast) .lx-panel .panel-side{--region-border-transparent:var(--border-width-1) solid var(--color-chrome)}.lx.lx-no-transparency .lx-panel .panel-side{--shadow-dropdown:inset 0 0 0 var(--border-width-1) var(--color-chrome)}.lx-panel .panel-side{box-shadow:var(--shadow-dropdown)}.lx-panel .panel-main{max-height:70vh;max-width:var(--aside-size);overflow-y:overlay}.lx-panel .panel-main .lx-form-grid .lx-main.lx-compact-sections>.lx-form-section{padding-left:calc(var(--gap-form) / 4);padding-right:calc(var(--gap-form) / 4)}.no-component-wrapper{padding:var(--space-0250)}.no-component-wrapper>.lx-empty-state-wrapper{width:100%}.panel-main .lx-form-grid>.lx-main .lx-row{max-width:calc(var(--aside-size) - 2rem)}.code-display>.code{white-space:pre;font-family:var(--font-family-mono);padding:var(--space-2000);background-color:var(--color-region-2);grid-column:1/3;margin:0;overflow:auto}.import-switcher{padding-bottom:var(--space-1000)}.highlight .highlight-toolbar-remove{right:-.125rem;left:unset}.custom-auto-complete-item-with-icon{grid-template-columns:auto 1fr;align-items:center;column-gap:.5rem;width:100%;height:1.5rem;display:grid}.custom-auto-complete-item-with-icon p.lx-data{align-self:center;min-height:0;margin:0;padding:0;font-weight:400}.custom-auto-complete-item-with-icon svg{width:1.5rem;height:1.5rem}.component-add-text{margin-bottom:var(--space-1000)}.lx-panel>.panel-side .config-header.has-selected-element{background-color:var(--color-blue);cursor:pointer}.lx-panel>.panel-side .config-header.has-selected-element:hover{background-color:var(--color-interactive-hover-background)}.lx-panel>.button-side>.lx-button{--color-button-secondary-background:var(--color-nav-background);--color-button-secondary-background-hover:var(--color-interactive-hover-background);--color-button-active-mode-background:var(--color-nav-item-background-selected);--color-button-secondary-icon:var(--color-nav-foreground);--color-button-active-mode-icon:var(--color-nav-item-icon-selected);--button-secondary-border:var(--button-secondary-border-width) solid transparent}.lx-panel>.panel-side .prop-search{border-left:var(--border-width-1) solid var(--color-chrome)}.lx-panel>.panel-side .config-header.has-selected-element .header-wrapper p{color:var(--color-focus-foreground)}.lx-panel>.panel-side .config-header.has-selected-element .header-wrapper svg{fill:var(--color-focus-foreground)}