windmill-components 1.78.0 → 1.79.0

package/components/apps/components/buttons/AppButton.svelte

@@ -7,6 +7,7 @@ import { loadIcon } from '../icon';
 import { twMerge } from 'tailwind-merge';
 import { goto } from '$app/navigation';
 import { initOutput } from '../../editor/appUtils';
+import { configurationKeys } from '../../editor/component';
 export let id;
 export let componentInput;
 export let configuration;
@@ -19,39 +20,44 @@ export let preclickAction = undefined;
 export let customCss = undefined;
 export let render;
 export let initializing = true;
-const { worldStore, app } = getContext('AppViewerContext');
-let labelValue;
-let color;
-let size;
+export let controls = undefined;
+const { worldStore, app, componentControl } = getContext('AppViewerContext');
+if (controls) {
+    $componentControl[id] = controls;
+}
 let runnableComponent;
-let disabled = undefined;
-let fillContainer = undefined;
-let gotoUrl = undefined;
-let gotoNewTab = undefined;
+// let labelValue: string
+// let color: ButtonType.Color
+// let size: ButtonType.Size
+// let disabled: boolean | undefined = undefined
+// let fillContainer: boolean | undefined = undefined
+// let gotoUrl: string | undefined = undefined
+// let gotoNewTab: boolean | undefined = undefined
 let isLoading = false;
 let ownClick = false;
-let triggerOnAppLoad = false;
-let beforeIcon = undefined;
-let afterIcon = undefined;
+// let beforeIcon: undefined | string = undefined
+// let afterIcon: undefined | string = undefined
+let resolvedConfig = {};
+$: initializing = resolvedConfig?.label == undefined;
 let beforeIconComponent;
 let afterIconComponent;
-$: beforeIcon && handleBeforeIcon();
-$: afterIcon && handleAfterIcon();
+$: resolvedConfig.beforeIcon && handleBeforeIcon();
+$: resolvedConfig.afterIcon && handleAfterIcon();
 async function handleBeforeIcon() {
-    if (beforeIcon) {
-        beforeIconComponent = await loadIcon(beforeIcon);
+    if (resolvedConfig.beforeIcon) {
+        beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon);
     }
 }
 async function handleAfterIcon() {
-    if (afterIcon) {
-        afterIconComponent = await loadIcon(afterIcon);
+    if (resolvedConfig.afterIcon) {
+        afterIconComponent = await loadIcon(resolvedConfig.afterIcon);
     }
 }
 let outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
-$: triggerOnAppLoad && runnableComponent?.runComponent();
+$: resolvedConfig.triggerOnAppLoad && runnableComponent?.runComponent();
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
@@ -77,12 +83,12 @@ async function handleClick(event) {
     }
     ownClick = true;
     if (!runnableComponent) {
-        if (gotoUrl) {
-            if (gotoNewTab) {
-                window.open(gotoUrl, '_blank');
+        if (resolvedConfig.gotoUrl) {
+            if (resolvedConfig.gotoNewTab) {
+                window.open(resolvedConfig.gotoUrl, '_blank');
             }
             else {
-                goto(gotoUrl);
+                goto(resolvedConfig.gotoUrl);
             }
         }
     }
@@ -92,28 +98,9 @@ async function handleClick(event) {
 }
 </script>
 
-<InputValue
-	on:done={() => initializing && (initializing = false)}
-	{id}
-	input={configuration.label}
-	bind:value={labelValue}
-/>
-<InputValue {id} input={configuration.goto} bind:value={gotoUrl} />
-<InputValue {id} input={configuration.color} bind:value={color} />
-<InputValue {id} input={configuration.size} bind:value={size} />
-<InputValue {id} input={configuration.beforeIcon} bind:value={beforeIcon} />
-<InputValue {id} input={configuration.afterIcon} bind:value={afterIcon} />
-<InputValue {id} input={configuration.triggerOnAppLoad} bind:value={triggerOnAppLoad} />
-
-<InputValue
-	{id}
-	input={configuration.disabled}
-	extraContext={extraQueryParams}
-	bind:value={disabled}
-	bind:error={errors.disabled}
-/>
-<InputValue {id} input={configuration.fillContainer} bind:value={fillContainer} />
-<InputValue {id} input={configuration.gotoNewTab} bind:value={gotoNewTab} />
+{#each configurationKeys['buttoncomponent'] as key (key)}
+	<InputValue {key} {id} input={configuration[key]} bind:value={resolvedConfig[key]} />
+{/each}
 
 <RunnableWrapper
 	{recomputeIds}
@@ -122,8 +109,8 @@ async function handleClick(event) {
 	{id}
 	{extraQueryParams}
 	autoRefresh={false}
-	goto={gotoUrl}
-	{gotoNewTab}
+	goto={resolvedConfig.gotoUrl}
+	gotoNewTab={resolvedConfig.gotoNewTab}
 	{render}
 >
 	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
@@ -134,25 +121,25 @@ async function handleClick(event) {
 			btnClasses={twMerge(
 				$app.css?.['buttoncomponent']?.['button']?.class,
 				customCss?.button.class,
-				fillContainer ? 'w-full h-full' : ''
+				resolvedConfig.fillContainer ? 'w-full h-full' : ''
 			)}
 			style={[$app.css?.['buttoncomponent']?.['button']?.style, customCss?.button.style].join(';')}
-			{disabled}
+			disabled={resolvedConfig.disabled}
 			on:pointerdown={(e) => {
 				e?.stopPropagation()
 				window.dispatchEvent(new Event('pointerup'))
 			}}
 			on:click={handleClick}
-			{size}
-			{color}
+			size={resolvedConfig.size}
+			color={resolvedConfig.color}
 			{loading}
 		>
 			<span class="truncate inline-flex gap-2 items-center">
-				{#if beforeIcon && beforeIconComponent}
+				{#if resolvedConfig.beforeIcon && beforeIconComponent}
 					<svelte:component this={beforeIconComponent} size={14} />
 				{/if}
-				<div>{labelValue}</div>
-				{#if afterIcon && afterIconComponent}
+				<div>{resolvedConfig.label}</div>
+				{#if resolvedConfig.afterIcon && afterIconComponent}
 					<svelte:component this={afterIconComponent} size={14} />
 				{/if}
 			</span>

package/components/apps/components/buttons/AppButton.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         recomputeIds?: string[] | undefined;
         extraQueryParams?: Record<string, any> | undefined;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
@@ -15,6 +15,10 @@ declare const __propDef: {
         customCss?: ComponentCustomCSS<'button'> | undefined;
         render: boolean;
         initializing?: boolean | undefined;
+        controls?: {
+            left: () => boolean;
+            right: () => boolean | string;
+        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/buttons/AppForm.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         recomputeIds?: string[] | undefined;
         extraQueryParams?: Record<string, any> | undefined;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;

package/components/apps/components/buttons/AppFormButton.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         recomputeIds?: string[] | undefined;
         extraQueryParams?: Record<string, any> | undefined;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;

package/components/apps/components/display/AppBarChart.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'container'> | undefined;
         render: boolean;

package/components/apps/components/display/AppIcon.svelte.d.ts

@@ -1,12 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         customCss?: ComponentCustomCSS<'container' | 'icon'> | undefined;
         render: boolean;
     };

package/components/apps/components/display/AppImage.svelte.d.ts

@@ -1,10 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         customCss?: ComponentCustomCSS<'image'> | undefined;
         render: boolean;
     };

package/components/apps/components/display/AppMap.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext, onMount } from 'svelte';
+<script>import { getContext } from 'svelte';
 import { concatCustomCss } from '../../utils';
 import { InputValue } from '../helpers';
 import { twMerge } from 'tailwind-merge';
@@ -97,7 +97,7 @@ function updateMarkers() {
     }
     createMarkerLayers()?.forEach((l) => map.addLayer(l));
 }
-onMount(() => {
+$: if (!map && mapElement) {
     useGeographic();
     map = new Map({
         target: mapElement,
@@ -116,7 +116,7 @@ onMount(() => {
         })
     });
     updateRegionOutput();
-});
+}
 $: css = concatCustomCss($app.css?.mapcomponent, customCss);
 function updateRegionOutput() {
     if (map) {

package/components/apps/components/display/AppMap.svelte.d.ts

@@ -1,10 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         customCss?: ComponentCustomCSS<'map'> | undefined;
         render: boolean;
     };

package/components/apps/components/display/AppPdf.svelte.d.ts

@@ -1,11 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 import 'pdfjs-dist/build/pdf.worker.entry';
-import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         customCss?: ComponentCustomCSS<'container'> | undefined;
         render: boolean;
     };

package/components/apps/components/display/AppPieChart.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'container'> | undefined;
         render: boolean;

package/components/apps/components/display/AppScatterChart.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'container'> | undefined;
         render: boolean;

package/components/apps/components/display/AppText.svelte.d.ts

@@ -1,13 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'text'> | undefined;
         render: boolean;

package/components/apps/components/display/AppTimeseries.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 import 'chartjs-adapter-date-fns';
 import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'container'> | undefined;
         render: boolean;

package/components/apps/components/display/VegaLiteHtml.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         initializing?: boolean | undefined;
         render: boolean;
     };

package/components/apps/components/display/table/AppAggridTable.svelte.d.ts

@@ -1,12 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
+import type { RichConfigurations } from '../../../types';
 import type { AppInput } from '../../../inputType';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         initializing?: boolean | undefined;
         render: boolean;
     };

package/components/apps/components/display/table/AppTable.svelte

@@ -33,7 +33,7 @@ const options = writable({
     columns: []
 });
 let table = createSvelteTable(options);
-const { app, worldStore } = getContext('AppViewerContext');
+const { app, worldStore, componentControl, selectedComponent } = getContext('AppViewerContext');
 let selectedRowIndex = -1;
 function toggleRow(row, rowIndex, force = false) {
     if (selectedRowIndex !== rowIndex || force) {
@@ -105,6 +105,19 @@ function rerender() {
 }
 $: result && rerender();
 $: css = concatCustomCss($app.css?.tablecomponent, customCss);
+$componentControl[id] = {
+    right: (skipActions) => {
+        if (skipActions) {
+            return false;
+        }
+        const hasActions = actionButtons.length >= 1;
+        if (hasActions) {
+            $selectedComponent = actionButtons[0].id;
+            return true;
+        }
+        return false;
+    }
+};
 </script>
 
 <InputValue {id} input={configuration.search} bind:value={search} />
@@ -187,6 +200,7 @@ $: css = concatCustomCss($app.css?.tablecomponent, customCss);
 										{#if context}
 											{@const component = renderCell(cell.column.columnDef.cell, context)}
 											<td
+												on:keydown={() => toggleRow(row, rowIndex)}
 												on:click={() => toggleRow(row, rowIndex)}
 												class="p-4 whitespace-pre-wrap truncate text-xs text-gray-900"
 											>
@@ -206,31 +220,69 @@ $: css = concatCustomCss($app.css?.tablecomponent, customCss);
 										on:keypress={() => toggleRow(row, rowIndex)}
 										on:click={() => toggleRow(row, rowIndex)}
 									>
-										<div class="center-center h-full w-full flex-wrap gap-1">
+										<div class="center-center h-full w-full flex-wrap gap-1 ">
 											{#each actionButtons as actionButton, actionIndex (actionIndex)}
-												{#if rowIndex == 0}
-													<AppButton
-														{render}
-														noWFull
-														{...actionButton}
-														preclickAction={async () => {
-															toggleRow(row, rowIndex)
-														}}
-														extraQueryParams={{ row: row.original }}
-														bind:componentInput={actionButton.componentInput}
-													/>
-												{:else}
-													<AppButton
-														{render}
-														noWFull
-														{...actionButton}
-														preclickAction={async () => {
-															toggleRow(row, rowIndex)
-														}}
-														extraQueryParams={{ row: row.original }}
-														bind:componentInput={actionButton.componentInput}
-													/>
-												{/if}
+												<div
+													class={actionButton.id === $selectedComponent
+														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
+														: ''}
+												>
+													{#if actionButton.id === $selectedComponent}
+														<span
+															title={`Id: ${actionButton.id}`}
+															class={classNames(
+																'px-2 text-2xs font-bold w-fit absolute shadow -top-5 -left-[2px] border z-50 rounded-sm',
+																'bg-indigo-500/90 border-indigo-600 text-white'
+															)}
+														>
+															{actionButton.id}
+														</span>
+													{/if}
+													{#if rowIndex == 0}
+														<AppButton
+															{render}
+															noWFull
+															{...actionButton}
+															preclickAction={async () => {
+																toggleRow(row, rowIndex)
+															}}
+															extraQueryParams={{ row: row.original }}
+															bind:componentInput={actionButton.componentInput}
+															controls={{
+																left: () => {
+																	if (actionIndex === 0) {
+																		$selectedComponent = id
+																		return true
+																	} else if (actionIndex > 0) {
+																		$selectedComponent = actionButtons[actionIndex - 1].id
+																		return true
+																	}
+																	return false
+																},
+																right: () => {
+																	if (actionIndex === actionButtons.length - 1) {
+																		return id
+																	} else if (actionIndex < actionButtons.length - 1) {
+																		$selectedComponent = actionButtons[actionIndex + 1].id
+																		return true
+																	}
+																	return false
+																}
+															}}
+														/>
+													{:else}
+														<AppButton
+															{render}
+															noWFull
+															{...actionButton}
+															preclickAction={async () => {
+																toggleRow(row, rowIndex)
+															}}
+															extraQueryParams={{ row: row.original }}
+															bind:componentInput={actionButton.componentInput}
+														/>
+													{/if}
+												</div>
 											{/each}
 										</div>
 									</td>

package/components/apps/components/display/table/AppTable.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BaseAppComponent, ComponentCustomCSS } from '../../../types';
+import type { BaseAppComponent, ComponentCustomCSS, RichConfigurations } from '../../../types';
 import type { AppInput } from '../../../inputType';
 import type { ButtonComponent } from '../../../editor/component';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         actionButtons: (BaseAppComponent & ButtonComponent)[];
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'container' | 'tableHeader' | 'tableBody' | 'tableFooter'> | undefined;

package/components/apps/components/helpers/InputValue.svelte

@@ -8,12 +8,15 @@ export let value;
 export let id = undefined;
 export let error = '';
 export let extraContext = {};
+export let key = '';
+$: console.log(value);
 const { componentControl } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 if (input == undefined) {
     dispatch('done');
 }
 let lastInput = input ? JSON.parse(JSON.stringify(input)) : undefined;
+$: console.log(input);
 $: if (input && !deepEqual(input, lastInput)) {
     lastInput = JSON.parse(JSON.stringify(input));
     // Needed because of file uploads
@@ -46,8 +49,9 @@ $: lastInput &&
     $state &&
     debounce(async () => (value = await evalExpr(lastInput)));
 async function handleConnection() {
+    console.log('handleConnection', lastInput);
     if (lastInput.type === 'connected') {
-        $worldStore?.connect(lastInput, onValueChange, id);
+        $worldStore?.connect(lastInput, onValueChange, `${id}-${key}`);
     }
     else if (lastInput.type === 'static' || lastInput.type == 'template') {
         value = await getValue(lastInput);

package/components/apps/components/helpers/InputValue.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { RichConfiguration } from '../../types';
 declare const __propDef: {
     props: {
-        input: AppInput | undefined;
+        input: AppInput | RichConfiguration;
         value: string | number | boolean | Record<string | number, any> | undefined;
         id?: string | undefined;
         error?: string | undefined;
         extraContext?: Record<string, any> | undefined;
+        key?: string | undefined;
     };
     events: {
         done: CustomEvent<any>;

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -70,10 +70,6 @@ $: if (JSON.stringify(currentStaticValues) != JSON.stringify(lazyStaticValues))
 }
 $: fields && (lazyStaticValues = computeStaticValues());
 $: (runnableInputValues || extraQueryParams || args) && testJobLoader && refreshIfAutoRefresh();
-$: runnable?.type == 'runnableByName' &&
-    runnable.inlineScript?.language == 'frontend' &&
-    ($stateId || $state) &&
-    refreshIfAutoRefresh();
 function refreshIfAutoRefresh() {
     if (autoRefresh) {
         setDebouncedExecute();
@@ -208,12 +204,24 @@ function setResult(res) {
 $: result?.error && recordError(result.error);
 </script>
 
-{#each Object.entries(fields ?? {}) as [key, v]}
+{#each Object.entries(fields ?? {}) as [key, v] (key)}
 	{#if v.type != 'static' && v.type != 'user'}
-		<InputValue {id} input={fields[key]} bind:value={runnableInputValues[key]} />
+		<InputValue {key} {id} input={fields[key]} bind:value={runnableInputValues[key]} />
 	{/if}
 {/each}
 
+{#if runnable?.type == 'runnableByName' && runnable.inlineScript?.language == 'frontend'}
+	{#each runnable.inlineScript.refreshOn ?? [] as { id: tid, key } (`${tid}-${key}`)}
+		{@const fkey = `${tid}-${key}`}
+		<InputValue
+			{id}
+			key={fkey}
+			input={{ type: 'connected', connection: { componentId: tid, path: key }, fieldType: 'any' }}
+			bind:value={runnableInputValues[fkey]}
+		/>
+	{/each}
+{/if}
+
 <TestJobLoader
 	workspaceOverride={workspace}
 	on:done={(e) => {