windmill-components 1.82.4 → 1.82.5

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

@@ -12,7 +12,6 @@ type ClickableComponent = {
 };
 export type TextComponent = BaseComponent<'textcomponent'>;
 export type TextInputComponent = BaseComponent<'textinputcomponent'>;
-export type TextareaInputComponent = BaseComponent<'textareainputcomponent'>;
 export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>;
 export type EmailInputComponent = BaseComponent<'emailinputcomponent'>;
 export type DateInputComponent = BaseComponent<'dateinputcomponent'>;
@@ -60,7 +59,7 @@ export type HorizontalSplitPanesComponent = BaseComponent<'horizontalsplitpanesc
     panes: number[];
 };
 export type PdfComponent = BaseComponent<'pdfcomponent'>;
-export type TypedComponent = DisplayComponent | TextInputComponent | TextareaInputComponent | PasswordInputComponent | EmailInputComponent | DateInputComponent | NumberInputComponent | CurrencyComponent | SliderComponent | RangeComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | SelectComponent | ResourceSelectComponent | MultiSelectComponent | CheckboxComponent | FormComponent | FormButtonComponent | VegaLiteComponent | PlotlyComponent | TabsComponent | ContainerComponent | IconComponent | HorizontalDividerComponent | VerticalDividerComponent | FileInputComponent | ImageComponent | AggridComponent | DrawerComponent | MapComponent | VerticalSplitPanesComponent | HorizontalSplitPanesComponent | PdfComponent;
+export type TypedComponent = DisplayComponent | TextInputComponent | PasswordInputComponent | EmailInputComponent | DateInputComponent | NumberInputComponent | CurrencyComponent | SliderComponent | RangeComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | SelectComponent | ResourceSelectComponent | MultiSelectComponent | CheckboxComponent | FormComponent | FormButtonComponent | VegaLiteComponent | PlotlyComponent | TabsComponent | ContainerComponent | IconComponent | HorizontalDividerComponent | VerticalDividerComponent | FileInputComponent | ImageComponent | AggridComponent | DrawerComponent | MapComponent | VerticalSplitPanesComponent | HorizontalSplitPanesComponent | PdfComponent;
 export type AppComponent = BaseAppComponent & TypedComponent;
 export type AppComponentDimensions = `${IntRange<1, typeof NARROW_GRID_COLUMNS>}:${number}-${IntRange<1, typeof WIDE_GRID_COLUMNS>}:${number}`;
 export declare function getRecommendedDimensionsByComponent(componentType: AppComponent['type'], column: number): Size;
@@ -77,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>;
 };
@@ -106,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: "";
@@ -131,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: "";
@@ -147,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: "";
@@ -189,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: "";
@@ -581,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: "";
@@ -600,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: {
@@ -649,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: {
@@ -666,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: {
@@ -770,13 +769,6 @@ export declare const components: {
                     readonly selectOptions: string[];
                     readonly value: "Disabled";
                 };
-                readonly manualPagination: {
-                    readonly fieldType: "boolean";
-                    readonly type: "static";
-                    readonly onlyStatic: true;
-                    readonly value: false;
-                    readonly tooltip: "Pagination would not be handled by the component but by the script itself. Connect to the pagination output";
-                };
             };
             readonly componentInput: StaticAppInput;
             readonly actionButtons: true;
@@ -818,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: "";
@@ -846,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: "";
@@ -870,37 +864,11 @@ export declare const components: {
             };
         };
     };
-    readonly textareainputcomponent: {
-        readonly name: "Textarea";
-        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 customCss: {
-            readonly input: {
-                readonly class: "";
-                readonly style: "";
-            };
-        };
-        readonly initialData: {
-            readonly componentInput: undefined;
-            readonly configuration: {
-                readonly placeholder: {
-                    readonly type: "static";
-                    readonly value: "Type...";
-                    readonly fieldType: "text";
-                    readonly onlyStatic: true;
-                };
-                readonly defaultValue: {
-                    readonly type: "static";
-                    readonly value: undefined;
-                    readonly fieldType: "text";
-                };
-            };
-        };
-    };
     readonly selectcomponent: {
         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: "";
@@ -936,12 +904,14 @@ 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: "";
             };
         };
         readonly initialData: {
+            readonly verticalAlignment: "center";
             readonly componentInput: undefined;
             readonly configuration: {
                 readonly items: StaticAppInput;
@@ -958,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: "";
@@ -981,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: "";
@@ -1025,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: "";
@@ -1068,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: "";
@@ -1117,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: "";
@@ -1170,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: "";
@@ -1193,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: "";
@@ -1221,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: "";
@@ -1253,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: "";
@@ -1290,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: "";
@@ -1474,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: "";
@@ -1561,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: "";
@@ -1578,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: "";

package/components/apps/editor/component/components.js

@@ -81,6 +81,7 @@ export const components = {
         name: 'Rich Result',
         icon: Monitor,
         dims: '2:8-6:8',
+        softWrap: false,
         customCss: {
             header: { class: '', style: '' },
             container: { class: '', style: '' }
@@ -98,6 +99,7 @@ export const components = {
         name: 'Container',
         icon: BoxSelect,
         dims: '2:8-6:8',
+        softWrap: true,
         customCss: {
             container: { class: '', style: '' }
         },
@@ -111,6 +113,7 @@ export const components = {
         name: 'Text',
         icon: Type,
         dims: '1:1-3:1',
+        softWrap: true,
         customCss: {
             text: { class: '', style: '' }
         },
@@ -150,6 +153,7 @@ export const components = {
         name: 'Button',
         icon: Inspect,
         dims: '1:1-2:1',
+        softWrap: true,
         customCss: {
             button: { style: '', class: '' }
         },
@@ -367,6 +371,7 @@ export const components = {
         name: 'HTML',
         icon: Code2,
         dims: '1:2-1:2',
+        softWrap: false,
         customCss: {
             container: { class: '', style: '' }
         },
@@ -388,6 +393,7 @@ Hello \${ctx.username}
         name: 'Vega Lite',
         icon: PieChart,
         dims: '2:8-6:8',
+        softWrap: false,
         customCss: {},
         initialData: {
             componentInput: {
@@ -424,6 +430,7 @@ Hello \${ctx.username}
         name: 'Plotly',
         icon: PieChart,
         dims: '2:8-6:8',
+        softWrap: false,
         customCss: {},
         initialData: {
             componentInput: {
@@ -441,15 +448,7 @@ Hello \${ctx.username}
                     }
                 }
             },
-            configuration: {
-                layout: {
-                    type: 'static',
-                    fieldType: 'object',
-                    value: {},
-                    tooltip: 'Layout options for the plot. See https://plotly.com/javascript/reference/layout/ for more information',
-                    onlyStatic: true
-                }
-            }
+            configuration: {}
         }
     },
     timeseriescomponent: {
@@ -592,13 +591,6 @@ Hello \${ctx.username}
                     onlyStatic: true,
                     selectOptions: selectOptions.tableSearchOptions,
                     value: 'Disabled'
-                },
-                manualPagination: {
-                    fieldType: 'boolean',
-                    type: 'static',
-                    onlyStatic: true,
-                    value: false,
-                    tooltip: 'Pagination would not be handled by the component but by the script itself. Connect to the pagination output'
                 }
             },
             componentInput: {
@@ -678,6 +670,7 @@ Hello \${ctx.username}
         name: 'Toggle',
         icon: ToggleLeft,
         dims: '1:1-2:1',
+        softWrap: true,
         customCss: {
             text: { class: '', style: '' }
         },
@@ -702,6 +695,7 @@ Hello \${ctx.username}
         name: 'Text Input',
         icon: TextCursorInput,
         dims: '2:1-2:1',
+        softWrap: true,
         customCss: {
             input: { class: '', style: '' }
         },
@@ -723,34 +717,11 @@ Hello \${ctx.username}
             }
         }
     },
-    textareainputcomponent: {
-        name: 'Textarea',
-        icon: TextCursorInput,
-        dims: '2:1-2:1',
-        customCss: {
-            input: { class: '', style: '' }
-        },
-        initialData: {
-            componentInput: undefined,
-            configuration: {
-                placeholder: {
-                    type: 'static',
-                    value: 'Type...',
-                    fieldType: 'text',
-                    onlyStatic: true
-                },
-                defaultValue: {
-                    type: 'static',
-                    value: undefined,
-                    fieldType: 'text'
-                }
-            }
-        }
-    },
     selectcomponent: {
         name: 'Select',
         icon: List,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { style: '' }
         },
@@ -761,7 +732,7 @@ Hello \${ctx.username}
                 items: {
                     type: 'static',
                     fieldType: 'array',
-                    subFieldType: 'labeledselect',
+                    subFieldType: 'object',
                     value: [
                         { value: 'foo', label: 'Foo' },
                         { value: 'bar', label: 'Bar' }
@@ -792,10 +763,12 @@ Hello \${ctx.username}
         name: 'Multi Select',
         icon: List,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { style: '' }
         },
         initialData: {
+            verticalAlignment: 'center',
             componentInput: undefined,
             configuration: {
                 items: {
@@ -817,6 +790,7 @@ Hello \${ctx.username}
         name: 'Resource Select',
         icon: List,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { style: '' }
         },
@@ -843,6 +817,7 @@ Hello \${ctx.username}
         name: 'Number',
         icon: Binary,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { class: '', style: '' }
         },
@@ -884,6 +859,7 @@ Hello \${ctx.username}
         name: 'Currency',
         icon: DollarSign,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { class: '', style: '' }
         },
@@ -924,6 +900,7 @@ Hello \${ctx.username}
         name: 'Slider',
         icon: SlidersHorizontal,
         dims: '3:1-4:1',
+        softWrap: true,
         customCss: {
             bar: { style: '' },
             handle: { style: '' },
@@ -963,6 +940,7 @@ Hello \${ctx.username}
         name: 'Range',
         icon: SlidersHorizontal,
         dims: '3:2-4:2',
+        softWrap: true,
         customCss: {
             handles: { style: '' },
             bar: { style: '' },
@@ -1006,6 +984,7 @@ Hello \${ctx.username}
         name: 'Password',
         icon: Lock,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { class: '', style: '' }
         },
@@ -1026,6 +1005,7 @@ Hello \${ctx.username}
         name: 'Email Input',
         icon: AtSignIcon,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { class: '', style: '' }
         },
@@ -1051,6 +1031,7 @@ Hello \${ctx.username}
         name: 'Date',
         icon: Calendar,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { class: '', style: '' }
         },
@@ -1080,6 +1061,7 @@ Hello \${ctx.username}
         name: 'Tabs',
         icon: ListOrdered,
         dims: '2:8-6:8',
+        softWrap: true,
         customCss: {
             tabRow: { class: '', style: '' },
             allTabs: { class: '', style: '' },
@@ -1105,6 +1087,7 @@ Hello \${ctx.username}
         name: 'Icon',
         icon: Smile,
         dims: '1:3-1:2',
+        softWrap: true,
         customCss: {
             container: { class: '', style: '' },
             icon: { class: '', style: '' }
@@ -1265,6 +1248,7 @@ Hello \${ctx.username}
         name: 'Drawer',
         icon: SidebarClose,
         dims: '1:1-2:1',
+        softWrap: true,
         customCss: {
             container: { class: '', style: '' }
         },
@@ -1370,6 +1354,7 @@ Hello \${ctx.username}
         name: 'Vertical Split Panes',
         icon: FlipHorizontal,
         dims: '2:8-6:8',
+        softWrap: true,
         customCss: {
             container: { class: '', style: '' }
         },
@@ -1384,6 +1369,7 @@ Hello \${ctx.username}
         name: 'Horizontal Split Panes',
         icon: FlipVertical,
         dims: '2:8-6:8',
+        softWrap: true,
         customCss: {
             container: { class: '', style: '' }
         },

package/components/apps/editor/component/sets.js

@@ -18,7 +18,6 @@ const inputs = {
     title: 'Inputs',
     components: [
         'textinputcomponent',
-        'textareainputcomponent',
         'passwordinputcomponent',
         'emailinputcomponent',
         'numberinputcomponent',
@@ -30,7 +29,7 @@ const inputs = {
         'checkboxcomponent',
         'selectcomponent',
         'resourceselectcomponent',
-        'multiselectcomponent'
+        'multiselectcomponent',
     ]
 };
 const display = {

package/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -13,7 +13,7 @@ function addComponent(appComponentType) {
     push(history, $app);
     $dirtyStore = true;
     const id = insertNewGridItem($app, appComponentFromType(appComponentType), $focusedGrid);
-    $selectedComponent = [id];
+    $selectedComponent = id;
     $app = $app;
     $worldStore = $worldStore;
 }