windmill-components 1.82.8 → 1.82.10

package/components/apps/editor/component/Component.svelte

@@ -1,6 +1,8 @@
 <script>import { getContext } from 'svelte';
+import { Loader2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import ComponentHeader from '../ComponentHeader.svelte';
+import { ccomponents, components } from './components';
 import { AppBarChart, AppDisplayComponent, AppTable, AppText, AppButton, AppPieChart, AppSelect, AppCheckbox, AppTextInput, AppNumberInput, AppDateInput, AppForm, AppScatterChart, AppTimeseries, AppHtml, AppSliderInputs, AppFormButton, VegaLiteHtml, PlotlyHtml, AppRangeInput, AppTabs, AppIcon, AppCurrencyInput, AppDivider, AppFileInput, AppImage, AppContainer, AppAggridTable, AppDrawer, AppMap, AppSplitpanes, AppPdf } from '../../components';
 import AppMultiSelect from '../../components/inputs/AppMultiSelect.svelte';
 export let component;
@@ -9,9 +11,8 @@ export let locked = false;
 export let render;
 const { mode, app, errorByComponent, hoverStore } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
-const movingcomponents = editorContext?.movingcomponents;
-$: ismoving =
-    movingcomponents != undefined && $mode == 'dnd' && $movingcomponents?.includes(component.id);
+const movingcomponent = editorContext?.movingcomponent;
+$: ismoving = movingcomponent != undefined && $mode == 'dnd' && $movingcomponent === component.id;
 let initializing = undefined;
 let componentContainerHeight = 0;
 $: componentWithErrors = Object.values($errorByComponent).map((e) => e.componentId);
@@ -49,7 +50,7 @@ $: hasError = componentWithErrors.includes(component.id);
 			<button
 				class="border p-0.5 text-xs"
 				on:click={() => {
-					$movingcomponents = undefined
+					$movingcomponent = undefined
 				}}>Cancel move</button
 			>
 		</div>
@@ -59,6 +60,7 @@ $: hasError = componentWithErrors.includes(component.id);
 			'h-full bg-white/40 outline-1',
 			$hoverStore === component.id && $mode !== 'preview' ? 'outline outline-blue-600' : '',
 			selected && $mode !== 'preview' ? 'outline outline-indigo-600' : '',
+			ccomponents[component.type].softWrap || hasError ? '' : 'overflow-auto',
 			$mode != 'preview' ? 'cursor-pointer' : '',
 			'relative z-auto',
 			$app.css?.['app']?.['component']?.class,
@@ -112,7 +114,6 @@ $: hasError = componentWithErrors.includes(component.id);
 		{:else if component.type === 'plotlycomponent'}
 			<PlotlyHtml
 				id={component.id}
-				configuration={component.configuration}
 				bind:initializing
 				componentInput={component.componentInput}
 				{render}

package/components/apps/editor/component/Component.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from './components';
+import { type AppComponent } from './components';
 declare const __propDef: {
     props: {
         component: AppComponent;

package/components/apps/editor/component/ComponentNavigation.svelte

@@ -4,9 +4,9 @@ import { push } from '../../../../history';
 import { sendUserToast } from '../../../../utils';
 import { gridColumns } from '../../gridUtils';
 const { app, selectedComponent, worldStore, focusedGrid, componentControl } = getContext('AppViewerContext');
-const { history, movingcomponents } = getContext('AppEditorContext');
-let tempGridItems = undefined;
-let copiedGridItems = undefined;
+const { history, movingcomponent } = getContext('AppEditorContext');
+let tempGridItem = undefined;
+let copiedGridItem = undefined;
 function getSortedGridItemsOfChildren() {
     if (!$focusedGrid) {
         return $app.grid;
@@ -17,48 +17,48 @@ function getSortedGridItemsOfChildren() {
     return $app.subgrids[`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`] ?? [];
 }
 function getGridItems() {
-    if ($app.grid.find((item) => item.id === $selectedComponent?.[0])) {
+    if ($app.grid.find((item) => item.id === $selectedComponent)) {
         return $app.grid;
     }
     if (!$app.subgrids) {
         return [];
     }
-    return (Object.values($app.subgrids ?? {}).find((grid) => grid.find((item) => item.id === $selectedComponent?.[0])) ?? []);
+    return (Object.values($app.subgrids ?? {}).find((grid) => grid.find((item) => item.id === $selectedComponent)) ?? []);
 }
 function left(event) {
-    if (!$componentControl[$selectedComponent?.[0] ?? '']?.left?.()) {
+    if (!$componentControl[$selectedComponent]?.left?.()) {
         const sortedGridItems = getGridItems();
-        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent?.[0] ?? '');
+        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent);
         if (currentIndex !== -1 && currentIndex > 0) {
             const left = sortedGridItems[currentIndex - 1];
             if (left.data.type === 'tablecomponent' && left.data.actionButtons.length >= 1) {
-                $selectedComponent = [left.data.actionButtons[left.data.actionButtons.length - 1].id];
+                $selectedComponent = left.data.actionButtons[left.data.actionButtons.length - 1].id;
             }
             else {
-                $selectedComponent = [left.id];
+                $selectedComponent = left.id;
             }
         }
     }
     event.preventDefault();
 }
 function right(event) {
-    let r = $componentControl[$selectedComponent?.[0] ?? '']?.right?.();
+    let r = $componentControl[$selectedComponent]?.right?.();
     if (typeof r === 'string') {
-        $selectedComponent = [r];
+        $selectedComponent = r;
         r = $componentControl[r]?.right?.(true);
     }
     if (!r) {
         const sortedGridItems = getGridItems();
-        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent?.[0] ?? '');
+        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent);
         if (currentIndex !== -1 && currentIndex < sortedGridItems.length - 1) {
-            $selectedComponent = [sortedGridItems[currentIndex + 1].id];
+            $selectedComponent = sortedGridItems[currentIndex + 1].id;
         }
     }
     event.preventDefault();
 }
 function down(event) {
     if (!$focusedGrid) {
-        $selectedComponent = [getSortedGridItemsOfChildren()[0]?.id];
+        $selectedComponent = getSortedGridItemsOfChildren()[0]?.id;
         event.preventDefault();
     }
     else if ($app.subgrids) {
@@ -68,7 +68,7 @@ function down(event) {
             return;
         }
         if (subgrid) {
-            $selectedComponent = [subgrid[0].id];
+            $selectedComponent = subgrid[0].id;
         }
         event.preventDefault();
     }
@@ -81,9 +81,9 @@ function handleEscape(event) {
 function handleArrowUp(event) {
     if (!$selectedComponent)
         return;
-    let parentId = findGridItemParentGrid($app, $selectedComponent?.[0])?.split('-')[0];
+    let parentId = findGridItemParentGrid($app, $selectedComponent)?.split('-')[0];
     if (parentId) {
-        $selectedComponent = [parentId];
+        $selectedComponent = parentId;
     }
     else {
         $selectedComponent = undefined;
@@ -94,58 +94,49 @@ function handleCopy(event) {
     if (!$selectedComponent) {
         return;
     }
-    tempGridItems = undefined;
-    copiedGridItems = $selectedComponent
-        .map((x) => findGridItem($app, x))
-        .filter((x) => x != undefined);
+    tempGridItem = undefined;
+    copiedGridItem = findGridItem($app, $selectedComponent);
 }
 function handleCut(event) {
     if (!$selectedComponent) {
         return;
     }
-    $movingcomponents = JSON.parse(JSON.stringify($selectedComponent));
+    $movingcomponent = $selectedComponent;
     push(history, $app);
-    let gridItems = $selectedComponent
-        .map((x) => findGridItem($app, x))
-        .filter((x) => x != undefined);
-    copiedGridItems = gridItems;
-    if (!gridItems) {
+    const gridItem = findGridItem($app, $selectedComponent);
+    copiedGridItem = gridItem;
+    if (!gridItem) {
         return;
     }
     // Store the grid item in a temp variable so we can paste it later
-    tempGridItems = gridItems;
+    tempGridItem = gridItem;
 }
 function handlePaste(event) {
     push(history, $app);
-    $movingcomponents = undefined;
-    if (tempGridItems != undefined) {
-        for (let tempGridItem of tempGridItems) {
-            if ($focusedGrid &&
-                getAllSubgridsAndComponentIds($app, tempGridItem.data)[0].includes(`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`)) {
-                sendUserToast('Cannot paste a component into itself', true);
-                return;
-            }
-            let parentGrid = findGridItemParentGrid($app, tempGridItem.id);
-            if (parentGrid) {
-                $app.subgrids &&
-                    ($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter((item) => item.id !== tempGridItem?.id));
-            }
-            else {
-                $app.grid = $app.grid.filter((item) => item.id !== tempGridItem?.id);
-            }
-            const gridItem = tempGridItem;
-            insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), tempGridItem.id);
+    $movingcomponent = undefined;
+    if (tempGridItem != undefined) {
+        if ($focusedGrid &&
+            getAllSubgridsAndComponentIds($app, tempGridItem.data)[0].includes(`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`)) {
+            sendUserToast('Cannot paste a component into itself', true);
+            return;
+        }
+        let parentGrid = findGridItemParentGrid($app, tempGridItem.id);
+        if (parentGrid) {
+            $app.subgrids &&
+                ($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter((item) => item.id !== tempGridItem?.id));
         }
-        copiedGridItems = tempGridItems;
-        $selectedComponent = tempGridItems.map((x) => x.id);
-        tempGridItems = undefined;
-    }
-    else if (copiedGridItems) {
-        let nitems = [];
-        for (let copiedGridItem of copiedGridItems) {
-            nitems.push(insertNewGridItem($app, (id) => ({ ...copiedGridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, copiedGridItem[column]]))));
+        else {
+            $app.grid = $app.grid.filter((item) => item.id !== tempGridItem?.id);
         }
-        $selectedComponent = nitems.map((x) => x);
+        const gridItem = tempGridItem;
+        insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), tempGridItem.id);
+        copiedGridItem = tempGridItem;
+        $selectedComponent = tempGridItem.id;
+        tempGridItem = undefined;
+    }
+    else if (copiedGridItem) {
+        const gridItem = copiedGridItem;
+        $selectedComponent = insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])));
     }
     $worldStore = $worldStore;
     $app = $app;

package/components/apps/editor/component/components.d.ts

@@ -76,6 +76,7 @@ export type AppComponentConfig<T extends TypedComponent['type']> = {
      *
      * *For example when the component has a popup like `Select`*
      */
+    softWrap?: boolean;
     initialData: InitialAppComponent;
     customCss: ComponentCustomCSS<T>;
 };
@@ -105,6 +106,7 @@ export declare const components: {
         readonly name: "Rich Result";
         readonly icon: typeof Monitor;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: false;
         readonly customCss: {
             readonly header: {
                 readonly class: "";
@@ -130,6 +132,7 @@ export declare const components: {
         readonly name: "Container";
         readonly icon: typeof BoxSelect;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly container: {
                 readonly class: "";
@@ -146,6 +149,7 @@ export declare const components: {
         readonly name: "Text";
         readonly icon: typeof Type;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly text: {
                 readonly class: "";
@@ -188,6 +192,7 @@ export declare const components: {
         readonly name: "Button";
         readonly icon: typeof Inspect;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly button: {
                 readonly style: "";
@@ -580,6 +585,7 @@ export declare const components: {
         readonly name: "HTML";
         readonly icon: typeof Code2;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: false;
         readonly customCss: {
             readonly container: {
                 readonly class: "";
@@ -599,6 +605,7 @@ export declare const components: {
         readonly name: "Vega Lite";
         readonly icon: typeof PieChart;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: false;
         readonly customCss: {};
         readonly initialData: {
             readonly componentInput: {
@@ -648,6 +655,7 @@ export declare const components: {
         readonly name: "Plotly";
         readonly icon: typeof PieChart;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: false;
         readonly customCss: {};
         readonly initialData: {
             readonly componentInput: {
@@ -665,15 +673,7 @@ export declare const components: {
                     };
                 };
             };
-            readonly configuration: {
-                readonly layout: {
-                    readonly type: "static";
-                    readonly fieldType: "object";
-                    readonly value: {};
-                    readonly tooltip: "Layout options for the plot. See https://plotly.com/javascript/reference/layout/ for more information";
-                    readonly onlyStatic: true;
-                };
-            };
+            readonly configuration: {};
         };
     };
     readonly timeseriescomponent: {
@@ -810,6 +810,7 @@ export declare const components: {
         readonly name: "Toggle";
         readonly icon: typeof ToggleLeft;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly text: {
                 readonly class: "";
@@ -838,6 +839,7 @@ export declare const components: {
         readonly name: "Text Input";
         readonly icon: typeof TextCursorInput;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly input: {
                 readonly class: "";
@@ -866,6 +868,7 @@ export declare const components: {
         readonly name: "Select";
         readonly icon: typeof List;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly input: {
                 readonly style: "";
@@ -901,6 +904,7 @@ export declare const components: {
         readonly name: "Multi Select";
         readonly icon: typeof List;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly input: {
                 readonly style: "";
@@ -924,6 +928,7 @@ export declare const components: {
         readonly name: "Resource Select";
         readonly icon: typeof List;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly input: {
                 readonly style: "";
@@ -947,6 +952,7 @@ export declare const components: {
         readonly name: "Number";
         readonly icon: typeof Binary;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly input: {
                 readonly class: "";
@@ -991,6 +997,7 @@ export declare const components: {
         readonly name: "Currency";
         readonly icon: typeof DollarSign;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly input: {
                 readonly class: "";
@@ -1034,6 +1041,7 @@ export declare const components: {
         readonly name: "Slider";
         readonly icon: typeof SlidersHorizontal;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly bar: {
                 readonly style: "";
@@ -1083,6 +1091,7 @@ export declare const components: {
         readonly name: "Range";
         readonly icon: typeof SlidersHorizontal;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly handles: {
                 readonly style: "";
@@ -1136,6 +1145,7 @@ export declare const components: {
         readonly name: "Password";
         readonly icon: typeof Lock;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly input: {
                 readonly class: "";
@@ -1159,6 +1169,7 @@ export declare const components: {
         readonly name: "Email Input";
         readonly icon: typeof AtSignIcon;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly input: {
                 readonly class: "";
@@ -1187,6 +1198,7 @@ export declare const components: {
         readonly name: "Date";
         readonly icon: typeof Calendar;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly input: {
                 readonly class: "";
@@ -1219,6 +1231,7 @@ export declare const components: {
         readonly name: "Tabs";
         readonly icon: typeof ListOrdered;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly tabRow: {
                 readonly class: "";
@@ -1256,6 +1269,7 @@ export declare const components: {
         readonly name: "Icon";
         readonly icon: typeof Smile;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly container: {
                 readonly class: "";
@@ -1440,6 +1454,7 @@ export declare const components: {
         readonly name: "Drawer";
         readonly icon: typeof SidebarClose;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly container: {
                 readonly class: "";
@@ -1527,6 +1542,7 @@ export declare const components: {
         readonly name: "Vertical Split Panes";
         readonly icon: typeof FlipHorizontal;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly container: {
                 readonly class: "";
@@ -1544,6 +1560,7 @@ export declare const components: {
         readonly name: "Horizontal Split Panes";
         readonly icon: typeof FlipVertical;
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-6:${number}` | `2:${number}-5:${number}` | `2:${number}-4:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-6:${number}` | `1:${number}-5:${number}` | `1:${number}-4:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-6:${number}` | `3:${number}-5:${number}` | `3:${number}-4:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly softWrap: true;
         readonly customCss: {
             readonly container: {
                 readonly class: "";