windmill-components 1.60.4 → 1.70.0

package/components/apps/editor/settingsPanel/GridTab.svelte

@@ -0,0 +1,73 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import { deleteGridItem } from '../appUtils';
+import PanelSection from './common/PanelSection.svelte';
+export let tabs;
+export let component;
+const { app, staticOutputs, runnableComponents } = getContext('AppEditorContext');
+function addTab() {
+    const numberOfTabs = tabs.length;
+    tabs = [...tabs, `Tab ${numberOfTabs + 1}`];
+    if (!$app.subgrids) {
+        $app.subgrids = {};
+    }
+    $app.subgrids[`${component.id}-${numberOfTabs}`] = [];
+    component.numberOfSubgrids = tabs.length;
+}
+function deleteSubgrid(index) {
+    let subgrid = `${component.id}-${index}`;
+    for (const item of $app.subgrids[subgrid]) {
+        const components = deleteGridItem($app, item.data, subgrid);
+        console.log(components);
+        for (const key in components) {
+            delete $staticOutputs[key];
+            delete $runnableComponents[key];
+        }
+    }
+    $staticOutputs = $staticOutputs;
+    $runnableComponents = $runnableComponents;
+    for (let i = index; i < tabs.length - 1; i++) {
+        $app.subgrids[`${component.id}-${i}`] = $app.subgrids[`${component.id}-${i + 1}`];
+    }
+    tabs.splice(index, 1);
+    tabs = tabs;
+    component.numberOfSubgrids = tabs.length;
+    $app = $app;
+}
+</script>
+
+<PanelSection title={`Tabs ${tabs.length > 0 ? `(${tabs.length})` : ''}`}>
+	{#if tabs.length == 0}
+		<span class="text-xs text-gray-500">No Tabs</span>
+	{/if}
+	<div class="flex gap-2 flex-col mt-2">
+		{#each tabs as value, index (index)}
+			<div class="flex flex-row gap-2 items-center relative">
+				<input type="text" bind:value />
+
+				<div class="absolute top-1 right-1">
+					<Button
+						size="xs"
+						color="light"
+						variant="border"
+						on:click={() => {
+							deleteSubgrid(index)
+						}}
+						iconOnly
+						btnClasses="!text-red-500"
+						startIcon={{ icon: faTrashAlt }}
+					/>
+				</div>
+			</div>
+		{/each}
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faPlus }}
+			on:click={addTab}
+			iconOnly
+		/>
+	</div>
+</PanelSection>

package/components/apps/editor/settingsPanel/GridTab.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        tabs: string[];
+        component: AppComponent;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridTabProps = typeof __propDef.props;
+export type GridTabEvents = typeof __propDef.events;
+export type GridTabSlots = typeof __propDef.slots;
+export default class GridTab extends SvelteComponentTyped<GridTabProps, GridTabEvents, GridTabSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -2,6 +2,7 @@
 import EvalInputEditor from './inputEditor/EvalInputEditor.svelte';
 import RowInputEditor from './inputEditor/RowInputEditor.svelte';
 import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
+import UploadInputEditor from './inputEditor/UploadInputEditor.svelte';
 export let id;
 export let componentInput;
 export let hasRows = false;
@@ -15,6 +16,8 @@ export let hasRows = false;
 	<StaticInputEditor bind:componentInput />
 {:else if componentInput.type === 'eval'}
 	<EvalInputEditor {hasRows} {id} bind:componentInput />
+{:else if componentInput.type === 'upload'}
+	<UploadInputEditor bind:componentInput />
 {:else if componentInput.type === 'user'}
 	<span class="text-2xs italic text-gray-6f00">Field's value is set by the user</span>
 {/if}

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ConnectedAppInput, EvalAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
+import type { ConnectedAppInput, EvalAppInput, RowAppInput, StaticAppInput, UploadAppInput, UserAppInput } from '../../inputType';
 declare const __propDef: {
     props: {
         id: string;
-        componentInput: StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput;
+        componentInput: StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput | UploadAppInput;
         hasRows?: boolean | undefined;
     };
     events: {

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -1,6 +1,6 @@
 <script>import { Badge, ToggleButton, ToggleButtonGroup } from '../../../common';
 import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
-import { faArrowRight, faPen, faTableCells, faUser } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faPen, faUpload, faUser } from '@fortawesome/free-solid-svg-icons';
 import { fieldTypeToTsType } from '../../utils';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
 import { getContext } from 'svelte';
@@ -11,6 +11,7 @@ export let inputSpecs;
 export let userInputEnabled = true;
 export let shouldCapitalize = true;
 export let rowColumns = false;
+export let resourceOnly = false;
 const { connectingInput } = getContext('AppEditorContext');
 </script>
 
@@ -18,97 +19,111 @@ const { connectingInput } = getContext('AppEditorContext');
 	<div class="w-full flex flex-col gap-4">
 		{#each Object.keys(inputSpecs) as inputSpecKey (inputSpecKey)}
 			{@const input = inputSpecs[inputSpecKey]}
-			<div class="flex flex-col gap-1">
-				<div class="flex justify-between items-end gap-1">
-					<span class="text-sm font-semibold truncate">
-						{shouldCapitalize
-							? capitalize(addWhitespaceBeforeCapitals(inputSpecKey))
-							: inputSpecKey}
-						{#if input.tooltip}
-							<Tooltip>
-								{input.tooltip}
-							</Tooltip>
-						{/if}
-					</span>
+			{#if !(resourceOnly && (input.fieldType !== 'object' || !input.format?.startsWith('resource-')))}
+				<div class="flex flex-col gap-1">
+					<div class="flex justify-between items-end gap-1">
+						<span class="text-sm font-semibold truncate">
+							{shouldCapitalize
+								? capitalize(addWhitespaceBeforeCapitals(inputSpecKey))
+								: inputSpecKey}
+							{#if input.tooltip}
+								<Tooltip>
+									{input.tooltip}
+								</Tooltip>
+							{/if}
+						</span>
 
-					<div class="flex gap-x-2 gap-y-1 flex-wrap justify-end items-center">
-						<Badge color="blue">
-							{input.fieldType === 'array' && input.subFieldType
-								? `${capitalize(fieldTypeToTsType(input.subFieldType))}[]`
-								: capitalize(fieldTypeToTsType(input.fieldType))}
-						</Badge>
+						<div class="flex gap-x-2 gap-y-1 flex-wrap justify-end items-center">
+							<Badge color="blue">
+								{input.fieldType === 'array' && input.subFieldType
+									? `${capitalize(fieldTypeToTsType(input.subFieldType))}[]`
+									: capitalize(fieldTypeToTsType(input.fieldType))}
+							</Badge>
 
-						{#if !inputSpecs[inputSpecKey].onlyStatic && inputSpecs[inputSpecKey].type != 'eval'}
-							<ToggleButtonGroup
-								bind:selected={inputSpecs[inputSpecKey].type}
-								on:selected={(e) => {
-									if (e.detail == 'connected' && !inputSpecs[inputSpecKey]['connection']) {
-										$connectingInput = {
-											opened: true,
-											input: undefined,
-											hoveredComponent: undefined
+							{#if !inputSpecs[inputSpecKey].onlyStatic && inputSpecs[inputSpecKey].type != 'eval'}
+								<ToggleButtonGroup
+									bind:selected={inputSpecs[inputSpecKey].type}
+									on:selected={(e) => {
+										if (e.detail == 'connected' && !inputSpecs[inputSpecKey]['connection']) {
+											$connectingInput = {
+												opened: true,
+												input: undefined,
+												hoveredComponent: undefined
+											}
 										}
-									}
-								}}
-							>
-								<Popover placement="bottom" notClickable disapperTimoout={0}>
-									<ToggleButton
-										position="left"
-										value="static"
-										startIcon={{ icon: faPen }}
-										size="xs"
-										iconOnly
-									/>
-									<svelte:fragment slot="text">Static</svelte:fragment>
-								</Popover>
-								{#if rowColumns}
+									}}
+								>
 									<Popover placement="bottom" notClickable disapperTimoout={0}>
 										<ToggleButton
-											position="center"
-											value="row"
-											startIcon={{ icon: faTableCells }}
+											position="left"
+											value="static"
+											startIcon={{ icon: faPen }}
 											size="xs"
-										>
-											<Tooltip scale={0.6} placement="top-end" wrapperClass="center-center">
-												Use the column name to have the value of the cell be passed to the action
-											</Tooltip>
-										</ToggleButton>
-										<svelte:fragment slot="text">Column</svelte:fragment>
+											iconOnly
+										/>
+										<svelte:fragment slot="text">Static</svelte:fragment>
 									</Popover>
-								{/if}
-								{#if userInputEnabled && !input.format?.startsWith('resource-')}
+									<!-- {#if rowColumns}
+										<Popover placement="bottom" notClickable disapperTimoout={0}>
+											<ToggleButton
+												position="center"
+												value="row"
+												startIcon={{ icon: faTableCells }}
+												size="xs"
+											>
+												<Tooltip scale={0.6} placement="top-end" wrapperClass="center-center">
+													Use the column name to have the value of the cell be passed to the action
+												</Tooltip>
+											</ToggleButton>
+											<svelte:fragment slot="text">Column</svelte:fragment>
+										</Popover>
+									{/if} -->
+									{#if userInputEnabled && !input.format?.startsWith('resource-')}
+										<Popover placement="bottom" notClickable disapperTimoout={0}>
+											<ToggleButton
+												position="center"
+												value="user"
+												startIcon={{ icon: faUser }}
+												size="xs"
+												iconOnly
+											/>
+											<svelte:fragment slot="text">User Input</svelte:fragment>
+										</Popover>
+									{/if}
+									{#if 'fileUpload' in inputSpecs[inputSpecKey]}
+										<Popover placement="bottom" notClickable disapperTimoout={0}>
+											<ToggleButton
+												position="center"
+												value="upload"
+												startIcon={{ icon: faUpload }}
+												size="xs"
+												iconOnly
+											/>
+											<svelte:fragment slot="text">Upload</svelte:fragment>
+										</Popover>
+									{/if}
 									<Popover placement="bottom" notClickable disapperTimoout={0}>
 										<ToggleButton
-											position="center"
-											value="user"
-											startIcon={{ icon: faUser }}
+											position="right"
+											value="connected"
+											startIcon={{ icon: faArrowRight }}
 											size="xs"
 											iconOnly
 										/>
-										<svelte:fragment slot="text">User Input</svelte:fragment>
+										<svelte:fragment slot="text">Connect</svelte:fragment>
 									</Popover>
-								{/if}
-								<Popover placement="bottom" notClickable disapperTimoout={0}>
-									<ToggleButton
-										position="right"
-										value="connected"
-										startIcon={{ icon: faArrowRight }}
-										size="xs"
-										iconOnly
-									/>
-									<svelte:fragment slot="text">Connect</svelte:fragment>
-								</Popover>
-							</ToggleButtonGroup>
-						{/if}
+								</ToggleButtonGroup>
+							{/if}
+						</div>
 					</div>
-				</div>
 
-				<InputsSpecEditor
-					hasRows={rowColumns}
-					{id}
-					bind:componentInput={inputSpecs[inputSpecKey]}
-				/>
-			</div>
+					<InputsSpecEditor
+						hasRows={rowColumns}
+						{id}
+						bind:componentInput={inputSpecs[inputSpecKey]}
+					/>
+				</div>
+			{/if}
 		{/each}
 	</div>
 {:else}

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         userInputEnabled?: boolean | undefined;
         shouldCapitalize?: boolean | undefined;
         rowColumns?: boolean | undefined;
+        resourceOnly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte

@@ -0,0 +1,85 @@
+<script>import { Button } from '../../../common';
+import { dirtyStore } from '../../../common/confirmationModal/dirtyStore';
+import { faCopy } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import { createNewGridItem, deleteGridItem, findGridItem, insertNewGridItem } from '../appUtils';
+export let component;
+export let parent;
+let selectedOption;
+const { app } = getContext('AppEditorContext');
+function listAllSubGrids(app) {
+    return app.subgrids ? Object.keys(app.subgrids) : [];
+}
+function findAndDelete(id) {
+    const node = findGridItem($app, id);
+    if (!node) {
+        return;
+    }
+    const data = JSON.parse(JSON.stringify(node.data));
+    $dirtyStore = true;
+    deleteGridItem($app, data, parent);
+    return data;
+}
+function insertComponentInSubGrid(data, targetId, targetSubGridIndex) {
+    insertNewGridItem($app, data, {
+        parentComponentId: targetId,
+        subGridIndex: targetSubGridIndex
+    }, true);
+    $app.grid = [...$app.grid];
+}
+function insertComponentInMainGrid(data) {
+    const newComponent = createNewGridItem($app.grid, data.id, data);
+    $app.grid = [...$app.grid, newComponent];
+}
+function onMove(component) {
+    const data = findAndDelete(component.id);
+    if (!data) {
+        return;
+    }
+    if (selectedOption !== 'main-grid') {
+        const [targetId, targetSubGridIndex] = selectedOption.split('-');
+        insertComponentInSubGrid(data, targetId, parseInt(targetSubGridIndex));
+    }
+    else {
+        insertComponentInMainGrid(data);
+    }
+}
+const defaultOption = {
+    label: 'Main grid',
+    value: 'main-grid',
+    disabled: parent === undefined
+};
+$: availableGrids = listAllSubGrids($app);
+$: options = availableGrids
+    ? [
+        defaultOption,
+        ...availableGrids?.map((grid) => ({
+            label: grid,
+            value: grid,
+            disabled: grid === parent || (component && grid.startsWith(component.id))
+        }))
+    ]
+    : [defaultOption];
+</script>
+
+{#if component && !options.every((option) => option.disabled)}
+	<select bind:value={selectedOption} class="w-full">
+		{#each options as option}
+			<option value={option.value} disabled={option.disabled}>{option.label}</option>
+		{/each}
+	</select>
+	<Button
+		size="xs"
+		color="dark"
+		startIcon={{ icon: faCopy }}
+		on:click={() => {
+			if (component) {
+				onMove(component)
+			}
+		}}
+	>
+		Move component: {component.id}
+	</Button>
+{:else}
+	<p class="text-gray-500 text-sm">No grids available</p>
+{/if}

package/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        component: AppComponent | undefined;
+        parent: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MoveToOtherGridProps = typeof __propDef.props;
+export type MoveToOtherGridEvents = typeof __propDef.events;
+export type MoveToOtherGridSlots = typeof __propDef.slots;
+export default class MoveToOtherGrid extends SvelteComponentTyped<MoveToOtherGridProps, MoveToOtherGridEvents, MoveToOtherGridSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/Recompute.svelte

@@ -14,7 +14,10 @@ function onChange(event, id) {
 }
 </script>
 
-<PanelSection title="Recompute others" tooltip="Select components to recompute after running this script">
+<PanelSection
+	title="Recompute others"
+	tooltip="Select components to recompute after running this script"
+>
 	{#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0}
 		<table class="divide-y divide-gray-300 border w-full">
 			<thead class="bg-gray-50">

package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -86,17 +86,28 @@ function deleteComponent(cid) {
 			}}
 			on:keypress
 		>
+			<Badge color="dark-indigo">
+				{component.id}
+			</Badge>
+
+			<div>
+				<TableActionLabel componentInput={component.configuration.label} />
+			</div>
 			<div>
 				<Button variant="border" color="red" on:click={() => deleteComponent(component.id)}>
 					<Icon class="h-3" data={faTrashAlt} />
 				</Button>
 			</div>
-			<div>
-				<TableActionLabel componentInput={component.configuration.label} />
-			</div>
-			<Badge color="dark-indigo">
-				{component.id}
-			</Badge>
 		</div>
 	{/each}
+	<div class="w-full">
+		<Button
+			btnClasses="w-full"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faPlus }}
+			on:click={addComponent}
+			iconOnly
+		/>
+	</div>
 </PanelSection>

package/components/apps/editor/settingsPanel/TableActions.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ButtonComponent, BaseAppComponent } from '../../types';
+import type { BaseAppComponent } from '../../types';
+import type { ButtonComponent } from '../component';
 declare const __propDef: {
     props: {
         components: (BaseAppComponent & ButtonComponent)[];

package/components/apps/editor/settingsPanel/common/PanelSection.svelte

@@ -14,9 +14,11 @@ export let tooltip = '';
 		noPadding ? '' : smallPadding ? 'p-2' : 'p-4'
 	)}
 >
-	<div class="flex justify-between items-center w-full gap-1">
-		<div class="text-sm font-extrabold {titlePadding}">
-			{title}
+	<div class="flex justify-between flex-wrap items-center w-full gap-1">
+		<div class="text-sm inline-flex items-center font-extrabold {titlePadding}">
+			<span class="truncate">
+				{title}
+			</span>
 			{#if tooltip}
 				<Tooltip>
 					{tooltip}

package/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte

@@ -0,0 +1,83 @@
+<script>import { Loader2 } from 'lucide-svelte';
+import { Popup } from '../../../../common';
+export let componentInput;
+let anchor;
+let loading = false;
+let items;
+let filteredItems;
+let search = '';
+$: if (search) {
+    filteredItems = items.filter((item) => {
+        return item.label.toLowerCase().includes(search.toLowerCase());
+    });
+}
+else {
+    filteredItems = items;
+}
+async function getData() {
+    if (items)
+        return;
+    loading = true;
+    const data = await import('lucide-svelte/dist/svelte/icons');
+    filteredItems = items = Object.entries(data)
+        .filter(([key]) => !(key.endsWith('Icon') || key.startsWith('Lucide')))
+        .map(([key, icon]) => ({ label: key, icon }));
+    loading = false;
+}
+function formatName(name) {
+    // Inserts space before capital letters and numbers
+    return (name
+        ?.replace(/([A-Z])/g, ' $1')
+        .trim()
+        .replace(/([a-z])(\d)/i, '$1 $2') || '');
+}
+function select(label) {
+    componentInput.value = label;
+    if (document.activeElement?.blur) {
+        ;
+        document.activeElement.blur();
+    }
+}
+</script>
+
+<input readonly value={formatName(componentInput.value)} bind:this={anchor} on:focus={getData} />
+{#if anchor}
+	<Popup ref={anchor} options={{ placement: 'bottom' }} let:close>
+		<div class="max-w-xs shadow-[0_10px_40px_-5px_rgba(0,0,0,0.25)] bg-white rounded-md p-2">
+			{#if loading}
+				<div class="center-center p-2">
+					<Loader2 class="animate-spin" size={18} />
+				</div>
+			{:else if filteredItems}
+				<input bind:value={search} type="text" placeholder="Search" class="col-span-4 mb-2" />
+				<div class="grid gap-1 grid-cols-4 max-h-[300px] overflow-auto">
+					{#each filteredItems as { label, icon }}
+						{@const formatedLabel = formatName(label)}
+						<button
+							type="button"
+							title={formatedLabel}
+							on:click={() => {
+								select(label)
+								close()
+							}}
+							class="w-full center-center flex-col font-normal p-1 
+								hover:bg-gray-100 focus:bg-gray-100 rounded duration-200 
+								{label === componentInput.value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
+						>
+							<svelte:component this={icon} size={22} />
+							<span class="inline-block w-full text-[10px] ellipsize pt-0.5">
+								{formatedLabel}
+							</span>
+						</button>
+					{:else}
+						<div class="col-span-4 text-center text-gray-700 text-sm p-2">
+							No icons match your search
+						</div>
+					{/each}
+				</div>
+			{:else}
+				<div class="text-center text-sm text-gray-600 p-2"> Couldn't load options </div>
+			{/if}
+		</div>
+	</Popup>
+{/if}

package/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput, StaticInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: StaticInput<string> & Extract<AppInput, {
+            fieldType: 'icon-select';
+        }>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconSelectInputProps = typeof __propDef.props;
+export type IconSelectInputEvents = typeof __propDef.events;
+export type IconSelectInputSlots = typeof __propDef.slots;
+export default class IconSelectInput extends SvelteComponentTyped<IconSelectInputProps, IconSelectInputEvents, IconSelectInputSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -4,6 +4,7 @@ import ArrayStaticInputEditor from '../ArrayStaticInputEditor.svelte';
 import ResourcePicker from '../../../../ResourcePicker.svelte';
 import JsonEditor from './JsonEditor.svelte';
 import { getContext } from 'svelte';
+import IconSelectInput from './IconSelectInput.svelte';
 export let componentInput;
 const { onchange } = getContext('AppEditorContext');
 $: componentInput && onchange?.();
@@ -14,6 +15,8 @@ $: componentInput && onchange?.();
 		<input type="number" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'textarea'}
 		<textarea bind:value={componentInput.value} />
+	{:else if componentInput.fieldType === 'date'}
+		<input type="date" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'boolean'}
 		<Toggle bind:checked={componentInput.value} />
 	{:else if componentInput.fieldType === 'select'}
@@ -24,6 +27,8 @@ $: componentInput && onchange?.();
 				</option>
 			{/each}
 		</select>
+	{:else if componentInput.fieldType === 'icon-select'}
+		<IconSelectInput bind:componentInput />
 	{:else if componentInput.fieldType === 'object'}
 		{#if componentInput?.format?.startsWith('resource-')}
 			<ResourcePicker
@@ -48,7 +53,7 @@ $: componentInput && onchange?.();
 			</div>
 		{/if}
 	{:else if componentInput.fieldType === 'array'}
-		<ArrayStaticInputEditor bind:componentInput />
+		<ArrayStaticInputEditor bind:componentInput on:deleteArrayItem />
 	{:else}
 		<input type="text" placeholder="Static value" bind:value={componentInput.value} />
 	{/if}

package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         componentInput: StaticAppInput | undefined;
     };
     events: {
+        deleteArrayItem: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};