windmill-components 1.82.2 → 1.82.4

package/common.d.ts

@@ -1,4 +1,4 @@
-import type { Script } from "./gen";
+import type { Script } from './gen';
 export type OwnerKind = 'group' | 'user' | 'folder';
 export type ActionKind = 'Create' | 'Update' | 'Delete' | 'Execute';
 export type SupportedLanguage = Script.language;
@@ -11,7 +11,7 @@ export interface SchemaProperty {
     contentEncoding?: 'base64' | 'binary';
     format?: string;
     items?: {
-        type?: 'string' | 'number' | 'bytes';
+        type?: 'string' | 'number' | 'bytes' | 'object';
         contentEncoding?: 'base64';
     };
     properties?: {

package/components/ArgInput.svelte

@@ -15,6 +15,9 @@ import Toggle from './Toggle.svelte';
 import Password from './Password.svelte';
 import NumberTypeNarrowing from './NumberTypeNarrowing.svelte';
 import Range from './Range.svelte';
+import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
+import { fade } from 'svelte/transition';
+import { X } from 'lucide-svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -68,7 +71,7 @@ $: {
 }
 export function evalValueToRaw() {
     if (value) {
-        rawValue = JSON.stringify(value, null, 4);
+        rawValue = JSON.stringify(value, null, 2);
     }
 }
 function fileChanged(e, cb) {
@@ -136,12 +139,13 @@ $: {
     }
 }
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
+let redraw = 0;
 </script>
 
 <div class="flex flex-col w-full min-w-[250px]">
 	<div>
 		{#if displayHeader}
-			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
+			<FieldHeader {label} {required} {type} {contentEncoding} {format} />
 		{/if}
 		{#if editableSchema}
 			<div class="p-2 my-1 text-xs border-solid border border-gray-400">
@@ -164,7 +168,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								use:autosize
 								rows="1"
 								bind:value={description}
-								on:keydown|stopPropagation 
+								on:keydown|stopPropagation
 								placeholder="Field description"
 							/>
 							{#if type == 'string' && format != 'date-time'}
@@ -177,6 +181,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								<select bind:value={itemsType}>
 									<option value={undefined}>No specific item type</option>
 									<option value={{ type: 'string' }}> Items are strings</option>
+									<option value={{ type: 'object' }}> Items are objects (JSON)</option>
 									<option value={{ type: 'number' }}>Items are numbers</option>
 									<option value={{ type: 'string', contentEncoding: 'base64' }}
 										>Items are bytes</option
@@ -211,7 +216,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<input
 						{autofocus}
 						on:focus={(e) => {
-							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						{disabled}
@@ -223,14 +227,12 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						bind:value
 						min={extra['min']}
 						max={extra['max']}
-						on:input={() => dispatch('input', { value, isRaw: true })}
 					/>
 				{/if}
 			{:else if inputCat == 'boolean'}
 				<Toggle
 					on:pointerdown={(e) => {
 						e?.stopPropagation()
-						window.dispatchEvent(new Event('pointerup'))
 					}}
 					{disabled}
 					class={valid
@@ -242,44 +244,46 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<span>&nbsp; Not set</span>
 				{/if}
 			{:else if inputCat == 'list'}
-				<div>
-					<div>
-						{#each value ?? [] as v, i}
-							<div class="flex flex-row max-w-md mt-1">
-								{#if itemsType?.type == 'number'}
-									<input autofocus={autofocus && i == 0} type="number" bind:value={v} />
-								{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
-									<input
-										autofocus={autofocus && i == 0}
-										type="file"
-										class="my-6"
-										on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
-										multiple={false}
-									/>
-								{:else}
-									<input autofocus={autofocus && i == 0} type="text" bind:value={v} />
-								{/if}
-								<Button
-									variant="border"
-									color="red"
-									size="sm"
-									btnClasses="mx-6"
-									on:click={() => {
-										value = value.filter((el) => el != v)
-										if (value.length == 0) {
-											value = []
-										}
-									}}
-								>
-									<Icon data={faMinus} />
-								</Button>
-							</div>
-						{/each}
+				<div class="w-full">
+					<div class="w-full">
+						{#key redraw}
+							{#if Array.isArray(value)}
+								{#each value ?? [] as v, i}
+									<div class="flex max-w-md mt-1 w-full items-center">
+										{#if itemsType?.type == 'number'}
+											<input type="number" bind:value={v} />
+										{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
+											<input
+												type="file"
+												class="my-6"
+												on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
+												multiple={false}
+											/>
+										{:else if itemsType?.type == 'object'}
+											<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
+										{:else}
+											<input type="text" bind:value={v} />
+										{/if}
+										<button
+											transition:fade|local={{ duration: 100 }}
+											class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200"
+											aria-label="Clear"
+											on:click={() => {
+												value.splice(i, 1)
+												redraw += 1
+											}}
+										>
+											<X size={14} />
+										</button>
+									</div>
+								{/each}
+							{/if}
+						{/key}
 					</div>
 					<Button
 						variant="border"
-						color="blue"
-						size="sm"
+						color="dark"
+						size="xs"
 						btnClasses="mt-1"
 						on:click={() => {
 							if (value == undefined || !Array.isArray(value)) {
@@ -291,9 +295,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						<Icon data={faPlus} class="mr-2" />
 						Add item
 					</Button>
-					<span class="ml-2">
-						{(value ?? []).length} item{(value ?? []).length > 1 ? 's' : ''}
-					</span>
 				</div>
 			{:else if inputCat == 'resource-object'}
 				<ObjectResourceInput {format} bind:value />
@@ -306,32 +307,21 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							bind:args={value}
 						/>
 					</div>
+				{:else if disabled}
+					<textarea disabled />
 				{:else}
-					<textarea
-						bind:this={el}
+					<JsonEditor
+						bind:editor
 						on:focus={(e) => {
-							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
-						{autofocus}
-						{disabled}
-						use:autosize
-						on:keydown|stopPropagation 
-						style="max-height: {maxHeight}"
-						on:input={() => {
-							dispatch('input', { rawValue: value, isRaw: false })
-						}}
-						class="col-span-10 {valid
-							? ''
-							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
-						placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
-						bind:value={rawValue}
+						code={rawValue}
+						bind:value
 					/>
 				{/if}
 			{:else if inputCat == 'enum'}
 				<select
 					on:focus={(e) => {
-						window.dispatchEvent(new Event('pointerup'))
 						dispatch('focus')
 					}}
 					{disabled}
@@ -348,16 +338,11 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				<div class="border my-1 mb-4 w-full border-gray-400">
 					<SimpleEditor
 						on:focus={(e) => {
-							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
-						on:blur={() => dispatch('blur')}
 						bind:this={editor}
 						lang={inputCat}
 						bind:code={value}
-						on:change={async () => {
-							dispatch('input', { rawValue: value, isRaw: false })
-						}}
 						autoHeight
 					/>
 				</div>
@@ -387,12 +372,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								rows="1"
 								bind:this={el}
 								on:focus={(e) => {
-									window.dispatchEvent(new Event('pointerup'))
 									dispatch('focus')
 								}}
-								on:blur={() => dispatch('blur')}
 								use:autosize
-								on:keydown|stopPropagation 
+								on:keydown|stopPropagation
 								type="text"
 								{disabled}
 								class="col-span-10 {valid
@@ -400,9 +383,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 									: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
 								placeholder={defaultValue ?? ''}
 								bind:value
-								on:input={() => {
-									dispatch('input', { rawValue: value, isRaw: false })
-								}}
 							/>
 							{#if itemPicker}
 								<div class="ml-1 relative">

package/components/ArgInput.svelte.d.ts

@@ -20,7 +20,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         editableSchema?: boolean | undefined;
         itemsType?: {
-            type?: "string" | "number" | "bytes" | undefined;
+            type?: "string" | "number" | "object" | "bytes" | undefined;
             contentEncoding?: "base64" | undefined;
         } | undefined;
         displayHeader?: boolean | undefined;
@@ -42,8 +42,6 @@ declare const __propDef: {
     events: {
         keydown: KeyboardEvent;
         focus: CustomEvent<any>;
-        input: CustomEvent<any>;
-        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/DisplayResult.svelte

@@ -75,23 +75,6 @@ let payload = '';
 let jsonViewer;
 </script>
 
-<Portal>
-	<Drawer bind:this={jsonViewer} size="900px">
-		<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
-			<svelte:fragment slot="actions">
-				<Button
-					on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
-					color="light"
-					size="xs"
-				>
-					<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
-				</Button>
-			</svelte:fragment>
-			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
-		</DrawerContent>
-	</Drawer>
-</Portal>
-
 <div class="inline-highlight">
 	{#if result != undefined}
 		{#if resultKind && resultKind != 'json'}
@@ -237,3 +220,20 @@ let jsonViewer;
 		<div class="text-gray-500 text-sm">No result: {JSON.stringify(result)}</div>
 	{/if}
 </div>
+
+<Portal>
+	<Drawer bind:this={jsonViewer} size="900px">
+		<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
+			<svelte:fragment slot="actions">
+				<Button
+					on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
+					color="light"
+					size="xs"
+				>
+					<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+				</Button>
+			</svelte:fragment>
+			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+		</DrawerContent>
+	</Drawer>
+</Portal>

package/components/Editor.svelte

@@ -394,9 +394,6 @@ async function loadMonaco() {
             reloadWebsocket();
         }
     });
-    editor.onDidBlurEditorText(() => {
-        dispatch('blur');
-    });
     reloadWebsocket();
     return () => {
         try {

package/components/Editor.svelte.d.ts

@@ -30,7 +30,6 @@ declare const __propDef: {
     events: {
         change: CustomEvent<any>;
         focus: CustomEvent<any>;
-        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/FieldHeader.svelte

@@ -4,7 +4,6 @@ export let format = '';
 export let contentEncoding = '';
 export let type = undefined;
 export let required = false;
-export let itemsType = undefined;
 </script>
 
 <div class="inline-flex flex-row items-center truncated">

package/components/FieldHeader.svelte.d.ts

@@ -6,10 +6,6 @@ declare const __propDef: {
         contentEncoding?: string | undefined;
         type?: string | undefined;
         required?: boolean | undefined;
-        itemsType?: {
-            type?: "string" | "number" | "bytes" | undefined;
-            contentEncoding?: "base64" | undefined;
-        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowBuilder.svelte

@@ -114,6 +114,7 @@ async function saveFlow(leave) {
         goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`);
     }
     else if (initialPath !== $flowStore.path) {
+        initialPath = $flowStore.path;
         goto(`/flows/edit/${$flowStore.path}?workspace_id=${$workspaceStore}`);
     }
 }
@@ -175,6 +176,11 @@ $: selectedId && select(selectedId);
 $: initialPath && $workspaceStore && loadSchedule();
 loadHubScripts();
 function onKeyDown(event) {
+    let classes = event.target?.['className'];
+    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        return;
+    }
     switch (event.key) {
         case 'Z':
             if (event.ctrlKey) {

package/components/FlowStatusViewer.svelte

@@ -18,6 +18,7 @@ import SimpleEditor from './SimpleEditor.svelte';
 import { Loader2 } from 'lucide-svelte';
 const dispatch = createEventDispatcher();
 export let jobId;
+export let workspaceId = undefined;
 export let flowState = undefined;
 export let flowJobIds = undefined;
 export let job = undefined;
@@ -73,7 +74,7 @@ function updateInnerModules() {
         else if (mod.type === FlowStatusModule.type.WAITING_FOR_EXECUTOR &&
             localFlowModuleStates[mod.id ?? '']?.scheduled_for == undefined) {
             JobService.getJob({
-                workspace: $workspaceStore ?? '',
+                workspace: workspaceId ?? $workspaceStore ?? '',
                 id: mod.job ?? ''
             }).then((job) => {
                 localFlowModuleStates[mod.id ?? ''] = {
@@ -92,7 +93,7 @@ async function loadJobInProgress() {
     if (jobId != '00000000-0000-0000-0000-000000000000') {
         try {
             const newJob = await JobService.getJob({
-                workspace: $workspaceStore ?? '',
+                workspace: workspaceId ?? $workspaceStore ?? '',
                 id: jobId ?? ''
             });
             if (JSON.stringify(newJob) !== JSON.stringify(job)) {
@@ -124,7 +125,7 @@ onDestroy(() => {
     timeout && clearTimeout(timeout);
 });
 async function loadOwner(path) {
-    is_owner = await isOwner(path, $userStore, $workspaceStore);
+    is_owner = await isOwner(path, $userStore, workspaceId ?? $workspaceStore);
 }
 let selected = 'graph';
 let payload = '"a test payload in json"';
@@ -170,7 +171,7 @@ function isSuccess(arg) {
 											variant="border"
 											on:click={async () =>
 												await JobService.resumeSuspendedFlowAsOwner({
-													workspace: $workspaceStore ?? '',
+													workspace: workspaceId ?? $workspaceStore ?? '',
 													id: job?.id ?? '',
 													requestBody: JSON.parse(payload)
 												})}
@@ -268,6 +269,7 @@ function isSuccess(arg) {
 					</Button>
 					<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
 						<svelte:self
+							{workspaceId}
 							bind:suspend_status
 							bind:retry_status
 							bind:flowState
@@ -342,6 +344,7 @@ function isSuccess(arg) {
 						<li class="w-full border border-gray-600 p-6 space-y-2 bg-blue-50/50">
 							{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
 								<svelte:self
+									{workspaceId}
 									bind:suspend_status
 									bind:retry_status
 									bind:flowState

package/components/FlowStatusViewer.svelte.d.ts

@@ -5,6 +5,7 @@ import { type GraphModuleState } from './graph';
 declare const __propDef: {
     props: {
         jobId: string;
+        workspaceId?: string | undefined;
         flowState?: FlowState | undefined;
         flowJobIds?: {
             moduleId: string;

package/components/FlowViewer.svelte

@@ -52,7 +52,6 @@ function toAny(x) {
 									type={toAny(v)?.type}
 									contentEncoding={toAny(v)?.contentEncoding}
 									format={toAny(v)?.format}
-									itemsType={toAny(v)?.itemsType}
 								/><span class="ml-4 mt-2 text-xs"
 									>{toAny(v)?.default != undefined
 										? 'default: ' + JSON.stringify(toAny(v)?.default)

package/components/InputTransformForm.svelte

@@ -104,7 +104,6 @@ $: schema.properties[argName].default && setDefaultCode();
 				contentEncoding={schema.properties[argName].contentEncoding}
 				required={schema.required.includes(argName)}
 				type={schema.properties[argName].type}
-				itemsType={schema.properties[argName].items}
 			/>
 
 			{#if isStaticTemplate(inputCat)}

package/components/LightweightArgInput.svelte

@@ -122,7 +122,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 <div class="flex flex-col w-full min-w-[250px]">
 	<div>
 		{#if displayHeader}
-			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
+			<FieldHeader {label} {required} {type} {contentEncoding} {format} />
 		{/if}
 
 		{#if description}
@@ -145,7 +145,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				{:else}
 					<input
 						on:focus={(e) => {
-							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						type="number"
@@ -156,14 +155,12 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						bind:value
 						min={extra['min']}
 						max={extra['max']}
-						on:input={() => dispatch('input', { value, isRaw: true })}
 					/>
 				{/if}
 			{:else if inputCat == 'boolean'}
 				<Toggle
 					on:pointerdown={(e) => {
 						e?.stopPropagation()
-						window.dispatchEvent(new Event('pointerup'))
 					}}
 					class={valid
 						? ''
@@ -240,14 +237,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<textarea
 						bind:this={el}
 						on:focus={(e) => {
-							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						use:autosize
 						style="max-height: {maxHeight}"
-						on:input={() => {
-							dispatch('input', { rawValue: value, isRaw: false })
-						}}
 						class="col-span-10 {valid
 							? ''
 							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
@@ -258,7 +251,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{:else if inputCat == 'enum'}
 				<select
 					on:focus={(e) => {
-						window.dispatchEvent(new Event('pointerup'))
 						dispatch('focus')
 					}}
 					class="px-6"
@@ -291,10 +283,8 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							rows="1"
 							bind:this={el}
 							on:focus={(e) => {
-								window.dispatchEvent(new Event('pointerup'))
 								dispatch('focus')
 							}}
-							on:blur={() => dispatch('blur')}
 							use:autosize
 							type="text"
 							class="col-span-10 {valid
@@ -302,9 +292,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
 							placeholder={defaultValue ?? ''}
 							bind:value
-							on:input={() => {
-								dispatch('input', { rawValue: value, isRaw: false })
-							}}
 						/>
 					</div>
 				</div>

package/components/LightweightArgInput.svelte.d.ts

@@ -15,7 +15,7 @@ declare const __propDef: {
         maxRows?: number | undefined;
         enum_?: string[] | undefined;
         itemsType?: {
-            type?: "string" | "number" | "bytes" | undefined;
+            type?: "string" | "number" | "object" | "bytes" | undefined;
             contentEncoding?: "base64" | undefined;
         } | undefined;
         displayHeader?: boolean | undefined;
@@ -28,8 +28,6 @@ declare const __propDef: {
     };
     events: {
         focus: CustomEvent<any>;
-        input: CustomEvent<any>;
-        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/SimpleEditor.svelte

@@ -146,7 +146,6 @@ async function loadMonaco() {
     });
     editor.onDidBlurEditorText(() => {
         code = getCode();
-        dispatch('blur');
     });
     if (lang == 'javascript') {
         const stdLib = { content: libStdContent, filePath: 'es5.d.ts' };

package/components/SimpleEditor.svelte.d.ts

@@ -21,7 +21,6 @@ declare const __propDef: {
     events: {
         change: CustomEvent<any>;
         focus: CustomEvent<any>;
-        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/TemplateEditor.svelte

@@ -495,7 +495,6 @@ async function loadMonaco() {
     });
     editor.onDidBlurEditorText(() => {
         code = getCode();
-        dispatch('blur');
     });
 }
 export function focus() {

package/components/Toggle.svelte

@@ -32,7 +32,7 @@ const dispatch = createEventDispatcher();
 			</span>
 		{/if}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div class="relative" on:pointerdown on:click|stopPropagation>
+		<div class="relative" on:click|stopPropagation>
 			<input
 				on:focus
 				on:click

package/components/Toggle.svelte.d.ts

@@ -14,7 +14,6 @@ declare const __propDef: {
         size?: "xs" | "sm" | undefined;
     };
     events: {
-        pointerdown: PointerEvent;
         click: MouseEvent;
         focus: FocusEvent;
         change: CustomEvent<any>;

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

@@ -32,8 +32,6 @@ if (controls) {
     $componentControl[id] = controls;
 }
 let runnableComponent;
-let isLoading = false;
-let ownClick = false;
 let beforeIconComponent;
 let afterIconComponent;
 $: resolvedConfig.beforeIcon && handleBeforeIcon();
@@ -49,19 +47,6 @@ async function handleAfterIcon() {
     }
 }
 $: resolvedConfig?.triggerOnAppLoad && runnableComponent?.runComponent();
-$: if (outputs?.loading != undefined) {
-    outputs.loading.set(false, true);
-}
-$: outputs?.loading.subscribe({
-    id: 'loading-' + id,
-    next: (value) => {
-        isLoading = value;
-        if (ownClick && !value) {
-            ownClick = false;
-        }
-    }
-});
-$: loading = isLoading && ownClick;
 let errors = {};
 $: errorsMessage = Object.values(errors)
     .filter((x) => x != '')
@@ -70,11 +55,10 @@ let runnableWrapper;
 async function handleClick(event) {
     event?.stopPropagation();
     event?.preventDefault();
-    $selectedComponent = id;
+    $selectedComponent = [id];
     if (preclickAction) {
         await preclickAction();
     }
-    ownClick = true;
     if (!runnableComponent) {
         runnableWrapper.onSuccess();
     }
@@ -82,6 +66,7 @@ async function handleClick(event) {
         await runnableComponent?.runComponent();
     }
 }
+let loading = false;
 </script>
 
 {#each Object.keys(components['buttoncomponent'].initialData.configuration) as key (key)}
@@ -100,6 +85,7 @@ async function handleClick(event) {
 	bind:this={runnableWrapper}
 	{recomputeIds}
 	bind:runnableComponent
+	bind:loading
 	{componentInput}
 	doOnSuccess={resolvedConfig.onSuccess}
 	{id}