windmill-components 1.78.0 → 1.82.0

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

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BaseAppComponent } from '../../types';
+import type { RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
-        inputSpecs: BaseAppComponent['configuration'];
+        inputSpecs: RichConfigurations;
+        inputSpecsConfiguration?: RichConfigurations | undefined;
         userInputEnabled?: boolean | undefined;
         shouldCapitalize?: boolean | undefined;
         rowColumns?: boolean | undefined;

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

@@ -0,0 +1,52 @@
+<script>import Tooltip from '../../../Tooltip.svelte';
+import InputsSpecEditor from './InputsSpecEditor.svelte';
+export let key;
+export let oneOf;
+export let inputSpecsConfiguration;
+export let labels;
+export let shouldCapitalize;
+export let id;
+export let resourceOnly;
+export let rowColumns;
+export let tooltip;
+$: if (oneOf.configuration[oneOf.selected] == undefined) {
+    oneOf.configuration[oneOf.selected] = {};
+}
+</script>
+
+<div class="p-2 border">
+	<h4 class="mb-2">{key}&nbsp;<Tooltip>{tooltip}</Tooltip></h4>
+	<select
+		class="w-full border border-gray-300 rounded-md p-2"
+		value={oneOf.selected}
+		on:change={(e) => {
+			oneOf = { ...oneOf, selected: e?.target?.['value'] }
+		}}
+	>
+		{#each Object.keys(inputSpecsConfiguration ?? {}) as choice}
+			<option value={choice}>{labels?.[choice] ?? choice}</option>
+		{/each}
+	</select>
+	<div class="mb-4" />
+	<div class="flex flex-col gap-4">
+		{#each Object.keys(inputSpecsConfiguration?.[oneOf.selected] ?? {}) as nestedKey}
+			{@const config = inputSpecsConfiguration?.[oneOf.selected]?.[nestedKey]}
+			{#if config && oneOf.configuration[oneOf.selected]}
+				<InputsSpecEditor
+					key={nestedKey}
+					bind:componentInput={oneOf.configuration[oneOf.selected][nestedKey]}
+					{id}
+					userInputEnabled={false}
+					{shouldCapitalize}
+					{resourceOnly}
+					hasRows={rowColumns}
+					fieldType={config?.['fieldType']}
+					subFieldType={config?.['subFieldType']}
+					format={config?.['format']}
+					selectOptions={config?.['selectOptions']}
+					placeholder={config?.['placeholder']}
+				/>
+			{/if}
+		{/each}
+	</div>
+</div>

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

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichConfiguration } from '../../types';
+declare const __propDef: {
+    props: {
+        key: string;
+        oneOf: {
+            selected: string;
+            configuration: RichConfiguration;
+        } | any;
+        inputSpecsConfiguration: RichConfiguration | any;
+        labels: Record<string, string> | undefined;
+        shouldCapitalize: boolean;
+        id: string;
+        resourceOnly: boolean;
+        rowColumns: boolean;
+        tooltip: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type OneOfInputSpecsEditorProps = typeof __propDef.props;
+export type OneOfInputSpecsEditorEvents = typeof __propDef.events;
+export type OneOfInputSpecsEditorSlots = typeof __propDef.slots;
+export default class OneOfInputSpecsEditor extends SvelteComponentTyped<OneOfInputSpecsEditorProps, OneOfInputSpecsEditorEvents, OneOfInputSpecsEditorSlots> {
+}
+export {};

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

@@ -1,17 +1,15 @@
 <script>import Button from '../../../common/button/Button.svelte';
+import Toggle from '../../../Toggle.svelte';
 import Tooltip from '../../../Tooltip.svelte';
 import { faClose, faEdit } from '@fortawesome/free-solid-svg-icons';
+import { includes } from 'lodash';
 import { getContext } from 'svelte';
 import { clearResultAppInput } from '../../utils';
-import InlineScriptEditorDrawer from '../inlineScriptsPanel/InlineScriptEditorDrawer.svelte';
+import ComponentTriggerList from './triggerLists/ComponentTriggerList.svelte';
 const { app } = getContext('AppViewerContext');
+const { selectedComponentInEditor } = getContext('AppEditorContext');
 export let appInput;
-let inlineScriptEditorDrawer;
-function edit() {
-    if (appInput.runnable?.type === 'runnableByName') {
-        inlineScriptEditorDrawer?.openDrawer();
-    }
-}
+export let appComponent;
 function detach() {
     if (appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript) {
         $app.unusedInlineScripts.push({
@@ -27,13 +25,7 @@ function clear() {
 }
 </script>
 
-{#if appInput.runnable && appInput.runnable.type === 'runnableByName' && appInput.runnable.inlineScript}
-	<InlineScriptEditorDrawer
-		bind:this={inlineScriptEditorDrawer}
-		bind:inlineScript={appInput.runnable.inlineScript}
-	/>
-{/if}
-<div class="flex flex-col xl:flex-row justify-between w-full flex-wrap items-center gap-1">
+<div class="flex justify-between w-full items-center gap-1">
 	<span class="text-xs font-semibold truncate">
 		{#if appInput.runnable?.type === 'runnableByName'}
 			{appInput.runnable.name}
@@ -41,13 +33,10 @@ function clear() {
 			{appInput.runnable.path}
 		{/if}
 	</span>
-	<div class="flex gap-1 flex-wrap justify-center">
+	<div class="flex gap-1  justify-center">
 		{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
-			<Button size="xs" color="light" variant="border" startIcon={{ icon: faEdit }} on:click={edit}>
-				Edit
-			</Button>
 			<Button size="xs" color="light" variant="border" on:click={detach}>
-				Detach
+				Detach&nbsp;
 				<Tooltip>
 					Detaching an inline script keep it for later to be reused by another component
 				</Tooltip>
@@ -58,14 +47,73 @@ function clear() {
 		</Button>
 	</div>
 </div>
+<div>
+	<div class="w-full"><div class="mx-auto w-0">&downarrow;</div></div>
+	<div class="flex gap-1 justify-between items-center">
+		<span class="text-xs font-semibold truncate">
+			Transformer &nbsp;<Tooltip
+				>A transformer is an optional frontend script that is executed right after the component's
+				script whose purpose is to do lightweight transformation in the browser. It takes the
+				previous computation's result as `result`</Tooltip
+			></span
+		>
+		<div class="flex gap-1">
+			{#if !appInput.transformer}
+				<div>
+					<Button
+						variant="border"
+						color="light"
+						size="xs"
+						on:click={() => {
+							appInput.transformer = {
+								language: 'frontend',
+								content: 'return result'
+							}
+							$selectedComponentInEditor = appComponent.id + '_transformer'
+						}}>Add Transformer</Button
+					>
+				</div>
+			{:else}
+				<Button
+					size="xs"
+					color="red"
+					variant="border"
+					startIcon={{ icon: faClose }}
+					on:click={() => {
+						appInput.transformer = undefined
+					}}
+				>
+					Clear
+				</Button>
+			{/if}
+		</div></div
+	>
+</div>
+
+{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
+	{#if !['buttoncomponent', 'formbuttoncomponent', 'formcomponent'].includes(appComponent.type)}
+		<div class="flex items-center">
+			<Toggle
+				size="xs"
+				color="red"
+				bind:checked={appInput.doNotRecomputeOnInputChanged}
+				options={{ right: 'do NOT recompute on input changes' }}
+			/>
+			<Tooltip>If not toggled, whenever an input is changed, the script will be re-run.</Tooltip>
+		</div>
+	{/if}
+
+	<div>
+		<ComponentTriggerList
+			bind:runnable={appInput.runnable}
+			{appComponent}
+			fields={appInput.fields}
+			doNotRecomputeOnInputChanged={appInput.doNotRecomputeOnInputChanged}
+		/>
+	</div>
+{/if}
 {#if appInput.runnable?.type === 'runnableByName' && !appInput.runnable.inlineScript}
 	<span class="text-xs text-gray-500">
 		Please configure the language in the inline script panel
 	</span>
 {/if}
-{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript?.language === 'frontend'}
-	<span class="text-xs text-gray-500">
-		If the component is a display component. The script will be recomputed upon any changes to any
-		output or to the state.
-	</span>
-{/if}

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

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ResultAppInput } from '../../inputType';
+import type { AppComponent } from '../component';
 declare const __propDef: {
     props: {
         appInput: ResultAppInput;
+        appComponent: AppComponent;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,15 +1,17 @@
 <script>import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 export let value;
 export let componentInput;
+export let subFieldType;
 let fakeComponentInput = {
     ...componentInput,
-    value,
-    // We don't support array of arrays
-    // @ts-ignore
-    fieldType: componentInput.subFieldType
+    value
 };
 // Bubble up changes to the real componentInput
 $: fakeComponentInput && (value = fakeComponentInput.value);
 </script>
 
-<StaticInputEditor bind:componentInput={fakeComponentInput} />
+<StaticInputEditor
+	noVariablePicker
+	fieldType={subFieldType}
+	bind:componentInput={fakeComponentInput}
+/>

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

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { StaticAppInput } from '../../inputType';
+import type { InputType, StaticInput } from '../../inputType';
 declare const __propDef: {
     props: {
         value: any;
-        componentInput: StaticAppInput;
+        componentInput: StaticInput<any>;
+        subFieldType: InputType | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
+import type { RichConfiguration } from '../../types';
 declare const __propDef: {
     props: {
-        componentInput: AppInput | undefined;
+        componentInput: RichConfiguration | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -5,82 +5,27 @@ import { classNames } from '../../../../utils';
 import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
+import { appComponentFromType, clearErrorByComponentId, clearJobsByComponentId } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';
 import TableActionLabel from './TableActionLabel.svelte';
 export let components;
 export let id;
-const { selectedComponent } = getContext('AppViewerContext');
+const { selectedComponent, app, errorByComponent, jobs } = getContext('AppViewerContext');
 function addComponent() {
     const actionId = getNextId(components.map((x) => x.id.split('_')[1]));
     const newComponent = {
-        id: `${id}_${actionId}`,
-        type: 'buttoncomponent',
-        configuration: {
-            label: {
-                type: 'static',
-                value: 'Action',
-                fieldType: 'text'
-            },
-            color: {
-                fieldType: 'select',
-                type: 'static',
-                value: 'dark',
-                optionValuesKey: 'buttonColorOptions'
-            },
-            size: {
-                fieldType: 'select',
-                type: 'static',
-                value: 'xs',
-                optionValuesKey: 'buttonSizeOptions'
-            },
-            disabled: {
-                fieldType: 'boolean',
-                type: 'eval',
-                expr: 'false',
-                tooltip: "Disabled based on a predicate.  Use `row` to access the current row's data"
-            },
-            goto: {
-                tooltip: 'Go to an url on success if not empty',
-                fieldType: 'text',
-                type: 'static',
-                value: ''
-            },
-            gotoNewTab: {
-                tooltip: 'Go to create a new tab',
-                fieldType: 'boolean',
-                type: 'static',
-                value: true
-            },
-            beforeIcon: {
-                type: 'static',
-                value: undefined,
-                fieldType: 'icon-select',
-                onlyStatic: true
-            },
-            afterIcon: {
-                type: 'static',
-                value: undefined,
-                fieldType: 'icon-select',
-                onlyStatic: true
-            }
-        },
-        componentInput: {
-            type: 'runnable',
-            fieldType: 'any',
-            fields: {},
-            runnable: undefined,
-            value: undefined
-        },
-        recomputeIds: undefined,
-        customCss: {
-            button: { style: '', class: '' }
-        }
+        ...appComponentFromType('buttoncomponent')(`${id}_${actionId}`),
+        recomputeIds: []
     };
     components = [...components, newComponent];
+    $app = $app;
 }
 function deleteComponent(cid) {
     components = components.filter((x) => x.id !== cid);
+    $errorByComponent = clearErrorByComponentId(cid, $errorByComponent);
+    $jobs = clearJobsByComponentId(cid, $jobs);
     $selectedComponent = id;
+    $app = $app;
 }
 </script>
 

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

@@ -1,7 +1,6 @@
 <script>import { classNames } from '../../../../../utils';
 import Tooltip from '../../../../Tooltip.svelte';
 export let title;
-export let smallPadding = false;
 export let noPadding = false;
 export let titlePadding = '';
 export let tooltip = '';
@@ -11,7 +10,7 @@ export let tooltip = '';
 	class={classNames(
 		$$props.class,
 		'flex flex-col h-full gap-2 items-start',
-		noPadding ? '' : smallPadding ? 'p-2' : 'p-4'
+		noPadding ? '' : 'p-3'
 	)}
 >
 	<div class="flex justify-between flex-wrap items-center w-full gap-1">

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

@@ -3,7 +3,6 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         title: string;
-        smallPadding?: boolean | undefined;
         noPadding?: boolean | undefined;
         titlePadding?: string | undefined;
         tooltip?: string | undefined;

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

@@ -1,10 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput, StaticInput } from '../../../inputType';
+import type { StaticInput } from '../../../inputType';
 declare const __propDef: {
     props: {
-        componentInput: StaticInput<string> & Extract<AppInput, {
-            fieldType: 'color';
-        }>;
+        componentInput: StaticInput<string>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,7 +2,7 @@
 import { faArrowRight, faClose } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 export let componentInput;
-const { connectingInput, app } = getContext('AppViewerContext');
+const { connectingInput, app, worldStore } = getContext('AppViewerContext');
 function applyConnection() {
     if (!$connectingInput.opened &&
         $connectingInput.input !== undefined &&
@@ -14,6 +14,8 @@ function applyConnection() {
             hoveredComponent: undefined
         };
     }
+    $app = $app;
+    $worldStore = $worldStore;
 }
 $: $connectingInput && applyConnection();
 </script>

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

@@ -1,10 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput, StaticInput } from '../../../inputType';
+import type { StaticInput } from '../../../inputType';
 declare const __propDef: {
     props: {
-        componentInput: StaticInput<string> & Extract<AppInput, {
-            fieldType: 'icon-select';
-        }>;
+        componentInput: StaticInput<string>;
     };
     events: {
         keydown: KeyboardEvent;

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

@@ -3,11 +3,11 @@ import RunnableSelector from '../mainInput/RunnableSelector.svelte';
 import SelectedRunnable from '../SelectedRunnable.svelte';
 export let appInput;
 export let defaultUserInput = false;
-$: isRunnableSelected = isScriptByPathDefined(appInput) || isScriptByNameDefined(appInput);
+export let appComponent;
 </script>
 
-{#if isRunnableSelected}
-	<SelectedRunnable bind:appInput />
-{:else}
-	<RunnableSelector {defaultUserInput} bind:appInput />
+{#if isScriptByPathDefined(appInput) || isScriptByNameDefined(appInput)}
+	<SelectedRunnable {appComponent} bind:appInput />
+{:else if appInput !== undefined}
+	<RunnableSelector id={appComponent.id} {defaultUserInput} bind:appInput />
 {/if}

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

@@ -1,9 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ResultAppInput } from '../../../inputType';
+import type { AppComponent } from '../../component';
 declare const __propDef: {
     props: {
         appInput: ResultAppInput;
         defaultUserInput?: boolean | undefined;
+        appComponent: AppComponent;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,5 +1,4 @@
 <script>import Toggle from '../../../../Toggle.svelte';
-import { staticValues } from '../../componentsPanel/componentStaticValues';
 import ArrayStaticInputEditor from '../ArrayStaticInputEditor.svelte';
 import ResourcePicker from '../../../../ResourcePicker.svelte';
 import JsonEditor from './JsonEditor.svelte';
@@ -8,32 +7,47 @@ import IconSelectInput from './IconSelectInput.svelte';
 import ColorInput from './ColorInput.svelte';
 import { Icon } from 'svelte-awesome';
 import { faDollarSign } from '@fortawesome/free-solid-svg-icons';
+import TabSelectInput from './TabSelectInput.svelte';
 export let componentInput;
+export let fieldType = undefined;
+export let subFieldType = undefined;
+export let selectOptions = undefined;
+export let placeholder = undefined;
+export let format = undefined;
+export let noVariablePicker = false;
 const { onchange } = getContext('AppViewerContext');
 const { pickVariableCallback } = getContext('AppEditorContext');
 $: componentInput && onchange?.();
 </script>
 
 {#if componentInput?.type === 'static'}
-	{#if componentInput.fieldType === 'number'}
+	{#if fieldType === 'number'}
 		<input on:keydown|stopPropagation type="number" bind:value={componentInput.value} />
-	{:else if componentInput.fieldType === 'textarea'}
+	{:else if fieldType === 'textarea'}
 		<textarea on:keydown|stopPropagation bind:value={componentInput.value} />
-	{:else if componentInput.fieldType === 'date'}
+	{:else if fieldType === 'date'}
 		<input on:keydown|stopPropagation type="date" bind:value={componentInput.value} />
-	{:else if componentInput.fieldType === 'boolean'}
+	{:else if fieldType === 'boolean'}
 		<Toggle bind:checked={componentInput.value} />
-	{:else if componentInput.fieldType === 'select'}
+	{:else if fieldType === 'select' && selectOptions}
 		<select on:keydown|stopPropagation on:keydown|stopPropagation bind:value={componentInput.value}>
-			{#each staticValues[componentInput.optionValuesKey] || [] as option}
-				<option value={option}>
-					{option}
-				</option>
+			{#each selectOptions ?? [] as option}
+				{#if typeof option == 'string'}
+					<option value={option}>
+						{option}
+					</option>
+				{:else}
+					<option value={option.value}>
+						{option.label}
+					</option>
+				{/if}
 			{/each}
 		</select>
-	{:else if componentInput.fieldType === 'icon-select'}
+	{:else if fieldType === 'icon-select'}
 		<IconSelectInput bind:componentInput />
-	{:else if componentInput.fieldType === 'labeledresource'}
+	{:else if fieldType === 'tab-select'}
+		<TabSelectInput bind:componentInput />
+	{:else if fieldType === 'labeledresource'}
 		{#if componentInput?.value && typeof componentInput?.value == 'object' && 'label' in componentInput?.value}
 			<div class="flex flex-col gap-1 w-full">
 				<input
@@ -46,9 +60,12 @@ $: componentInput && onchange?.();
 					initialValue={componentInput.value?.['value']?.split('$res:')[1] || ''}
 					on:change={(e) => {
 						let path = e.detail
-
-						if (componentInput && path) {
-							componentInput.value['value'] = `$res:${path}`
+						if (componentInput) {
+							if (path) {
+								componentInput.value['value'] = `$res:${path}`
+							} else {
+								componentInput.value['value'] = undefined
+							}
 						}
 					}}
 				/>
@@ -56,21 +73,24 @@ $: componentInput && onchange?.();
 		{:else}
 			Inconsistent labeled resource object
 		{/if}
-	{:else if componentInput.fieldType === 'color'}
+	{:else if fieldType === 'color'}
 		<ColorInput bind:componentInput />
-	{:else if componentInput.fieldType === 'object'}
-		{#if componentInput?.format?.startsWith('resource-')}
+	{:else if fieldType === 'object'}
+		{#if format?.startsWith('resource-')}
 			<ResourcePicker
 				initialValue={componentInput.value?.split('$res:')[1] || ''}
 				on:change={(e) => {
 					let path = e.detail
-
-					if (componentInput && path) {
-						componentInput.value = `$res:${path}`
+					if (componentInput) {
+						if (path) {
+							componentInput.value = `$res:${path}`
+						} else {
+							componentInput.value = undefined
+						}
 					}
 				}}
-				resourceType={componentInput.format.split('-').length > 1
-					? componentInput.format.substring('resource-'.length)
+				resourceType={format.split('-').length > 1
+					? format.substring('resource-'.length)
 					: undefined}
 			/>
 		{:else}
@@ -81,28 +101,30 @@ $: componentInput && onchange?.();
 				/>
 			</div>
 		{/if}
-	{:else if componentInput.fieldType === 'array'}
-		<ArrayStaticInputEditor bind:componentInput on:deleteArrayItem />
+	{:else if fieldType === 'array'}
+		<ArrayStaticInputEditor {subFieldType} bind:componentInput on:deleteArrayItem />
 	{:else}
 		<div class="flex gap-1">
 			<input
 				on:keydown|stopPropagation
 				type="text"
-				placeholder="Static value"
+				placeholder={placeholder ?? 'Static value'}
 				bind:value={componentInput.value}
 			/>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<div
-				class="min-w-min min-h-[34px] items-center leading-4 px-3 text-gray-600 cursor-pointer border border-gray-700 rounded center-center"
-				on:click={() => {
-					$pickVariableCallback = (variable) => {
-						if (componentInput) {
-							componentInput.value = `$var:${variable}`
+			{#if !noVariablePicker}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div
+					class="min-w-min min-h-[34px] items-center leading-4 px-3 text-gray-600 cursor-pointer border border-gray-700 rounded center-center"
+					on:click={() => {
+						$pickVariableCallback = (variable) => {
+							if (componentInput) {
+								componentInput.value = `$var:${variable}`
+							}
 						}
-					}
-				}}
-				><Icon data={faDollarSign} />
-			</div>
+					}}
+					><Icon data={faDollarSign} />
+				</div>
+			{/if}
 		</div>
 	{/if}
 {/if}

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

@@ -1,8 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type { StaticAppInput } from '../../../inputType';
+import type { InputType, StaticInput, StaticOptions } from '../../../inputType';
 declare const __propDef: {
     props: {
-        componentInput: StaticAppInput | undefined;
+        componentInput: StaticInput<any> | undefined;
+        fieldType?: InputType | undefined;
+        subFieldType?: InputType | undefined;
+        selectOptions?: StaticOptions['selectOptions'] | undefined;
+        placeholder?: string | undefined;
+        format?: string | undefined;
+        noVariablePicker?: boolean | undefined;
     };
     events: {
         keydown: KeyboardEvent;