windmill-components 1.305.7 → 1.306.9

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

@@ -12,6 +12,7 @@ export let configuration;
 export let initializing = undefined;
 export let render;
 export let customCss = undefined;
+export let actions = [];
 let loaded = false;
 async function load() {
     await import('ag-grid-enterprise');
@@ -23,7 +24,15 @@ load();
 </script>
 
 {#if loaded}
-	<AppAggridTable {id} {componentInput} {configuration} {initializing} {render} {customCss} />
+	<AppAggridTable
+		{id}
+		{componentInput}
+		{configuration}
+		{initializing}
+		{render}
+		{customCss}
+		{actions}
+	/>
 {:else}
 	<Loader2 class="animate-spin" />
 {/if}

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

@@ -3,6 +3,7 @@ import type { AppInput } from '../../../inputType';
 import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
+import type { TableAction } from '../../../editor/component';
 declare const __propDef: {
     props: {
         id: string;
@@ -12,6 +13,7 @@ declare const __propDef: {
         initializing?: boolean | undefined;
         render: boolean;
         customCss?: ComponentCustomCSS<'aggridcomponent'> | undefined;
+        actions?: TableAction[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -569,7 +569,6 @@ function updateCellValue(rowIndex, columnIndex, newCellValue) {
 																<AppSelect
 																	noDefault
 																	noInitialize
-																	--font-size="10px"
 																	extraKey={'idx' + rowIndex}
 																	{render}
 																	id={actionButton.id}

package/package/components/apps/components/inputs/AppCheckbox.svelte

@@ -107,6 +107,7 @@ let css = initCss($app.css?.checkboxcomponent, customCss);
 		textStyle={css?.text?.style ?? ''}
 		on:change={(e) => {
 			preclickAction?.()
+
 			value = e.detail
 			if (recomputeIds) {
 				recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()))

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -112,6 +112,10 @@ async function computeTriggerables() {
         if (c.type === 'tablecomponent') {
             r.push(...c.actionButtons.map((x) => ({ input: x.componentInput, id: x.id })));
         }
+        if ((c.type === 'aggridcomponent' || c.type === 'aggridcomponentee') &&
+            Array.isArray(c.actions)) {
+            r.push(...c.actions.map((x) => ({ input: x.componentInput, id: x.id })));
+        }
         if (c.type === 'menucomponent') {
             r.push(...c.menuItems.map((x) => ({ input: x.componentInput, id: x.id })));
         }

package/package/components/apps/editor/AppInputs.svelte

@@ -25,6 +25,17 @@ let resourceOnly = true;
 					{/each}
 				</div>
 			</div>
+		{:else if gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee'}
+			<div>
+				<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
+				<div class="ml-4 mt-4">
+					{#if Array.isArray(gridItem.data.actions)}
+						{#each gridItem.data.actions as actionButton (actionButton.id)}
+							<AppComponentInput bind:component={actionButton.data} {resourceOnly} />
+						{/each}
+					{/if}
+				</div>
+			</div>
 		{:else}
 			<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
 		{/if}

package/package/components/apps/editor/SettingsPanel.svelte

@@ -26,6 +26,14 @@ function findTableActionSettings(app, id) {
                 }
             }
         }
+        else if (x?.data?.type === 'aggridcomponent' || x?.data?.type === 'aggridcomponentee') {
+            if (x?.data?.actions) {
+                const tableAction = x.data.actions.find((x) => x.id === id);
+                if (tableAction) {
+                    return { item: { data: tableAction, id: tableAction.id }, parent: x.data.id };
+                }
+            }
+        }
     })
         .find((x) => x);
 }
@@ -71,6 +79,15 @@ const dispatch = createEventDispatcher();
 							(x) => x.id !== tableActionSettings?.item.id
 						)
 					}
+
+					if (
+						(parent.data.type === 'aggridcomponent' || parent.data.type === 'aggridcomponentee') &&
+						Array.isArray(parent.data.actions)
+					) {
+						parent.data.actions = parent.data.actions.filter(
+							(x) => x.id !== tableActionSettings?.item.id
+						)
+					}
 				}
 			}}
 		/>

package/package/components/apps/editor/appUtils.js

@@ -41,6 +41,10 @@ export function dfs(grid, id, subgrids) {
         else if (item.data.type == 'menucomponent' && item.data.menuItems.find((x) => id == x.id)) {
             return [item.id, id];
         }
+        else if ((item.data.type == 'aggridcomponent' || item.data.type == 'aggridcomponentee') &&
+            item.data.actions?.find((x) => id == x.id)) {
+            return [item.id, id];
+        }
         else {
             for (let i = 0; i < (item.data.numberOfSubgrids ?? 0); i++) {
                 const res = dfs(subgrids[`${item.id}-${i}`], id, subgrids);
@@ -120,6 +124,10 @@ export function allsubIds(app, parentId) {
             if (item.data.type === 'tablecomponent') {
                 subIds.push(...item.data.actionButtons?.map((x) => x.id));
             }
+            if (item.data.type === 'aggridcomponent' ||
+                (item.data.type === 'aggridcomponentee' && Array.isArray(item.data.actions))) {
+                subIds.push(...item.data.actions?.map((x) => x.id));
+            }
             if (item.data.type === 'menucomponent') {
                 subIds.push(...item.data.menuItems?.map((x) => x.id));
             }
@@ -136,6 +144,10 @@ export function getNextGridItemId(app) {
         if (x.data.type === 'tablecomponent') {
             return [x.id, ...x.data.actionButtons.map((x) => x.id)];
         }
+        else if ((x.data.type === 'aggridcomponent' || x.data.type === 'aggridcomponentee') &&
+            Array.isArray(x.data.actions)) {
+            return [x.id, ...x.data.actions.map((x) => x.id)];
+        }
         else if (x.data.type === 'menucomponent') {
             return [x.id, ...x.data.menuItems.map((x) => x.id)];
         }
@@ -248,6 +260,7 @@ export function appComponentFromType(type, overrideConfiguration, extra) {
             customCss: ccomponents[type].customCss,
             recomputeIds: init.recomputeIds ? [] : undefined,
             actionButtons: init.actionButtons ? [] : undefined,
+            actions: [],
             menuItems: init.menuItems ? [] : undefined,
             numberOfSubgrids: init.numberOfSubgrids,
             horizontalAlignment: init.horizontalAlignment,
@@ -312,6 +325,16 @@ export function copyComponent(app, item, parentGrid, subgrids, alreadyVisited) {
                 })) ?? []
             };
         }
+        else if (item.data.type === 'aggridcomponent' || item.data.type === 'aggridcomponentee') {
+            return {
+                ...item.data,
+                id,
+                actionButtons: (item.data.actions ?? []).map((x) => ({
+                    ...x,
+                    id: x.id.replace(`${item.id}_`, `${id}_`)
+                })) ?? []
+            };
+        }
         else if (item.data.type === 'menucomponent') {
             return {
                 ...item.data,
@@ -339,6 +362,9 @@ export function getAllSubgridsAndComponentIds(app, component) {
     if (component.type === 'tablecomponent') {
         components.push(...component.actionButtons?.map((x) => x.id));
     }
+    if (component.type === 'aggridcomponent' || component.type === 'aggridcomponentee') {
+        components.push(...(component.actions?.map((x) => x.id) ?? []));
+    }
     if (component.type === 'menucomponent') {
         components.push(...component.menuItems?.map((x) => x.id));
     }
@@ -365,6 +391,10 @@ export function getAllGridItems(app) {
         if (x?.data?.type === 'tablecomponent') {
             return [x, ...x?.data?.actionButtons?.map((x) => ({ data: x, id: x.id }))];
         }
+        else if ((x?.data?.type === 'aggridcomponent' || x?.data?.type === 'aggridcomponentee') &&
+            Array.isArray(x?.data?.actions)) {
+            return [x, ...x?.data?.actions?.map((x) => ({ data: x, id: x.id }))];
+        }
         else if (x?.data?.type === 'menucomponent') {
             return [x, ...x?.data?.menuItems?.map((x) => ({ data: x, id: x.id }))];
         }

package/package/components/apps/editor/component/Component.svelte

@@ -306,6 +306,7 @@ function mouseOut() {
 				bind:initializing
 				componentInput={component.componentInput}
 				customCss={component.customCss}
+				actions={component.actions ?? []}
 				{render}
 			/>
 		{:else if component.type === 'aggridcomponentee'}
@@ -316,6 +317,7 @@ function mouseOut() {
 				bind:initializing
 				componentInput={component.componentInput}
 				customCss={component.customCss}
+				actions={component.actions ?? []}
 				{render}
 			/>
 		{:else if component.type === 'textcomponent'}

package/package/components/apps/editor/component/ComponentCallbacks.svelte

@@ -35,6 +35,10 @@ export function left(event) {
             if (left.data.type === 'tablecomponent' && left.data.actionButtons.length >= 1) {
                 $selectedComponent = [left.data.actionButtons[left.data.actionButtons.length - 1].id];
             }
+            else if ((left.data.type === 'aggridcomponent' || left.data.type === 'aggridcomponentee') && Array.isArray(left.data.actions) &&
+                left.data.actions.length >= 1) {
+                $selectedComponent = [left.data.actions[left.data.actions.length - 1].id];
+            }
             else {
                 $selectedComponent = [left.id];
             }

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

@@ -64,12 +64,16 @@ export type AgChartsComponentEe = BaseComponent<'agchartscomponentee'> & {
     datasets: RichConfiguration | undefined;
 };
 export type ScatterChartComponent = BaseComponent<'scatterchartcomponent'>;
+export type TableAction = BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent) & GridItem;
 export type TableComponent = BaseComponent<'tablecomponent'> & {
-    actionButtons: (BaseAppComponent & ButtonComponent & GridItem)[];
+    actionButtons: TableAction[];
+};
+export type AggridComponent = BaseComponent<'aggridcomponent'> & {
+    actions: TableAction[];
 };
-export type AggridComponent = BaseComponent<'aggridcomponent'>;
 export type AggridComponentEe = BaseComponent<'aggridcomponentee'> & {
     license: string;
+    actions: TableAction[];
 };
 export type DisplayComponent = BaseComponent<'displaycomponent'>;
 export type LogComponent = BaseComponent<'logcomponent'>;
@@ -181,6 +185,7 @@ export interface InitialAppComponent extends Partial<Aligned> {
     numberOfSubgrids?: number;
     recomputeIds?: boolean;
     actionButtons?: boolean;
+    actions?: boolean;
     menuItems?: boolean;
     tabs?: string[];
     panes?: number[];
@@ -1863,6 +1868,12 @@ export declare const components: {
                     readonly selectOptions: readonly ["normal", "compact", "comfortable"];
                     readonly tooltip: "Change the row height";
                 };
+                readonly wrapActions: {
+                    readonly type: "static";
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                    readonly tooltip: "When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.";
+                };
             };
             readonly componentInput: StaticAppInput;
         };
@@ -1930,6 +1941,12 @@ export declare const components: {
                     readonly selectOptions: readonly ["normal", "compact", "comfortable"];
                     readonly tooltip: "Change the row height";
                 };
+                readonly wrapActions: {
+                    readonly type: "static";
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                    readonly tooltip: "When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.";
+                };
             };
             readonly componentInput: StaticAppInput;
         };
@@ -3072,6 +3089,12 @@ export declare const components: {
                     readonly value: 3;
                 };
                 readonly markers: StaticAppInput;
+                readonly lock: {
+                    readonly fieldType: "boolean";
+                    readonly type: "static";
+                    readonly value: false;
+                    readonly tooltip: "Lock the map to prevent user interaction";
+                };
             };
         };
     };

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

@@ -313,6 +313,12 @@ const aggridcomponentconst = {
                 value: 'normal',
                 selectOptions: ['normal', 'compact', 'comfortable'],
                 tooltip: 'Change the row height'
+            },
+            wrapActions: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: false,
+                tooltip: 'When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.'
             }
         },
         componentInput: {
@@ -2409,6 +2415,12 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                             title: 'London'
                         }
                     ]
+                },
+                lock: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false,
+                    tooltip: 'Lock the map to prevent user interaction'
                 }
             }
         }

package/package/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -67,6 +67,13 @@ function renameId(newId) {
             propagateRename(old, c.id);
         }
     }
+    if (item?.data.type == 'aggridcomponent' || item?.data.type == 'aggridcomponentee') {
+        for (let c of item.data.actions ?? []) {
+            let old = c.id;
+            c.id = c.id.replace(id + '_', newId + '_');
+            propagateRename(old, c.id);
+        }
+    }
     if (item?.data.type === 'menucomponent') {
         for (let c of item.data.menuItems) {
             let old = c.id;
@@ -84,6 +91,12 @@ function renameComponent(from, to, data) {
             renameComponent(from, to, c);
         }
     }
+    if ((data.type == 'aggridcomponent' || data.type == 'aggridcomponentee') &&
+        Array.isArray(data.actions)) {
+        for (let c of data.actions) {
+            renameComponent(from, to, c);
+        }
+    }
     if (data.type === 'menucomponent') {
         for (let c of data.menuItems) {
             renameComponent(from, to, c);

package/package/components/apps/editor/contextPanel/components/TableActionsOutput.svelte

@@ -10,4 +10,11 @@ export let gridItem;
 			{/each}
 		</div>
 	{/if}
+	{#if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee') && gridItem.data.actions?.length > 0}
+		<div class="ml-2 border-l">
+			{#each gridItem.data.actions as action, index}
+				<Output id={action.id} first={index === 0} label="Table action" />
+			{/each}
+		</div>
+	{/if}
 </div>

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte

@@ -30,6 +30,20 @@ export let gridItem;
 	{/each}
 {/if}
 
+{#if (gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee') && Array.isArray(gridItem.data.actions)}
+	{#each gridItem.data.actions as actionButton, index (index)}
+		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
+			<InlineScriptEditorPanel
+				on:createScriptFromInlineScript
+				componentType={actionButton.type}
+				id={actionButton.id}
+				transformer={$selectedComponentInEditor?.endsWith('_transformer')}
+				bind:componentInput={actionButton.componentInput}
+			/>
+		{/if}
+	{/each}
+{/if}
+
 {#if gridItem?.data?.type === 'menucomponent'}
 	{#each gridItem.data.menuItems as actionButton, index (index)}
 		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}

package/package/components/apps/editor/inlineScriptsPanel/utils.js

@@ -46,6 +46,14 @@ function processGridItemRunnable(gridItem, list) {
                 processRunnable(actionButton.componentInput.runnable, actionButton.componentInput.transformer, actionButton.id, list);
             });
         }
+        if (component.type === 'aggridcomponent' || component.type === 'aggridcomponentee') {
+            component.actions?.forEach((actionButton) => {
+                if (actionButton.componentInput?.type !== 'runnable') {
+                    return;
+                }
+                processRunnable(actionButton.componentInput.runnable, actionButton.componentInput.transformer, actionButton.id, list);
+            });
+        }
         if (component.type === 'menucomponent') {
             component.menuItems?.forEach((menuItem) => {
                 if (menuItem.componentInput?.type !== 'runnable') {

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

@@ -294,6 +294,7 @@ function isMac() {
 			/>
 		{:else if componentSettings.item.data.type === 'aggridcomponentee'}
 			<GridAgGridLicenseKey bind:license={componentSettings.item.data.license} />
+			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
 		{:else if componentSettings.item.data.type === 'agchartscomponentee'}
 			<GridAgChartsLicenseKe bind:license={componentSettings.item.data.license} />
 		{:else if componentSettings.item.data.type === 'steppercomponent'}
@@ -323,6 +324,8 @@ function isMac() {
 				bind:panes={componentSettings.item.data.panes}
 				bind:component={componentSettings.item.data}
 			/>
+		{:else if componentSettings.item.data.type === 'aggridcomponent'}
+			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
 		{:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)}
 			<TableActions id={component.id} bind:components={componentSettings.item.data.actionButtons} />
 		{:else if componentSettings.item.data.type === 'menucomponent' && Array.isArray(componentSettings.item.data.menuItems)}

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

@@ -2,14 +2,23 @@
 import Button from '../../../common/button/Button.svelte';
 import { getNextId } from '../../../flows/idUtils';
 import { classNames } from '../../../../utils';
-import { getContext } from 'svelte';
+import { getContext, onMount } from 'svelte';
 import { appComponentFromType } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';
 import { Inspect, List, ToggleRightIcon, Trash } from 'lucide-svelte';
 export let components;
+// Migration code:
+onMount(() => {
+    if (components === undefined) {
+        components = [];
+    }
+});
 export let id;
 const { selectedComponent, app, errorByComponent } = getContext('AppViewerContext');
 function addComponent(typ) {
+    if (!components) {
+        return;
+    }
     const actionId = getNextId(components.map((x) => x.id.split('_')[1]));
     const newComponent = {
         ...appComponentFromType(typ)(`${id}_${actionId}`),
@@ -19,6 +28,9 @@ function addComponent(typ) {
     $app = $app;
 }
 function deleteComponent(cid) {
+    if (!components) {
+        return;
+    }
     components = components.filter((x) => x.id !== cid);
     delete $errorByComponent[cid];
     $selectedComponent = [id];
@@ -26,77 +38,79 @@ function deleteComponent(cid) {
 }
 </script>
 
-<PanelSection title={`Table Actions`}>
-	{#if components.length == 0}
-		<span class="text-xs text-tertiary">No action buttons</span>
-	{/if}
-	{#each components as component}
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div
-			class={classNames(
-				'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
-				'bg-surface hover:bg-surface-hover focus:border-primary text-secondary',
-				$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
-			)}
-			on:click={() => {
-				$selectedComponent = [component.id]
-			}}
-			on:keypress
-		>
-			<Badge color="dark-indigo">
-				{component.id}
-			</Badge>
+{#if components}
+	<PanelSection title={`Table Actions`}>
+		{#if components.length == 0}
+			<span class="text-xs text-tertiary">No action buttons</span>
+		{/if}
+		{#each components as component}
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				class={classNames(
+					'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
+					'bg-surface hover:bg-surface-hover focus:border-primary text-secondary',
+					$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
+				)}
+				on:click={() => {
+					$selectedComponent = [component.id]
+				}}
+				on:keypress
+			>
+				<Badge color="dark-indigo">
+					{component.id}
+				</Badge>
 
-			<div>
-				{#if component.type == 'buttoncomponent'}
-					Button
-				{:else if component.type == 'selectcomponent'}
-					Select
-				{:else if component.type == 'checkboxcomponent'}
-					Toggle
-				{/if}
-			</div>
-			<div>
-				<Button
-					variant="border"
-					color="red"
-					on:click={() => deleteComponent(component.id)}
-					startIcon={{ icon: Trash }}
-					iconOnly
-				/>
+				<div>
+					{#if component.type == 'buttoncomponent'}
+						Button
+					{:else if component.type == 'selectcomponent'}
+						Select
+					{:else if component.type == 'checkboxcomponent'}
+						Toggle
+					{/if}
+				</div>
+				<div>
+					<Button
+						variant="border"
+						color="red"
+						on:click={() => deleteComponent(component.id)}
+						startIcon={{ icon: Trash }}
+						iconOnly
+					/>
+				</div>
 			</div>
+		{/each}
+		<div class="w-full flex gap-2">
+			<Button
+				btnClasses="gap-1 flex items-center text-sm text-tertiary"
+				wrapperClasses="w-full"
+				color="light"
+				variant="border"
+				on:click={() => addComponent('buttoncomponent')}
+				title="Add Button"
+			>
+				+ <Inspect size={14} />
+			</Button>
+			<Button
+				btnClasses="gap-1 flex items-center text-sm text-tertiary"
+				wrapperClasses="w-full"
+				color="light"
+				variant="border"
+				on:click={() => addComponent('checkboxcomponent')}
+				title="Add Toggle"
+			>
+				+ <ToggleRightIcon size={14} />
+			</Button>
+			<Button
+				btnClasses="gap-1 flex items-center text-sm text-tertiary"
+				wrapperClasses="w-full"
+				color="light"
+				variant="border"
+				on:click={() => addComponent('selectcomponent')}
+				title="Add Select"
+			>
+				+ <List size={14} />
+			</Button>
 		</div>
-	{/each}
-	<div class="w-full flex gap-2">
-		<Button
-			btnClasses="gap-1 flex items-center text-sm text-tertiary"
-			wrapperClasses="w-full"
-			color="light"
-			variant="border"
-			on:click={() => addComponent('buttoncomponent')}
-			title="Add Button"
-		>
-			+ <Inspect size={14} />
-		</Button>
-		<Button
-			btnClasses="gap-1 flex items-center text-sm text-tertiary"
-			wrapperClasses="w-full"
-			color="light"
-			variant="border"
-			on:click={() => addComponent('checkboxcomponent')}
-			title="Add Toggle"
-		>
-			+ <ToggleRightIcon size={14} />
-		</Button>
-		<Button
-			btnClasses="gap-1 flex items-center text-sm text-tertiary"
-			wrapperClasses="w-full"
-			color="light"
-			variant="border"
-			on:click={() => addComponent('selectcomponent')}
-			title="Add Select"
-		>
-			+ <List size={14} />
-		</Button>
-	</div>
-</PanelSection>
+	</PanelSection>
+{/if}

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

@@ -3,7 +3,7 @@ import type { BaseAppComponent } from '../../types';
 import type { ButtonComponent, CheckboxComponent, SelectComponent } from '../component';
 declare const __propDef: {
     props: {
-        components: (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[];
+        components: (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[] | undefined;
         id: string;
     };
     events: {

package/package/components/apps/utils.js

@@ -235,6 +235,15 @@ export function getAllScriptNames(app) {
                 }
             });
         }
+        if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee') {
+            gridItem.data.actions?.forEach((actionButton) => {
+                if (actionButton.componentInput?.type === 'runnable') {
+                    if (actionButton.componentInput.runnable?.type === 'runnableByName') {
+                        acc.push(actionButton.componentInput.runnable.name);
+                    }
+                }
+            });
+        }
         if (gridItem.data.type === 'menucomponent') {
             gridItem.data.menuItems.forEach((menuItem) => {
                 if (menuItem.componentInput?.type === 'runnable') {

package/package/components/common/fileInput/FileInput.svelte

@@ -64,6 +64,20 @@ async function convertFile(file) {
         }
     });
 }
+function handleDragOver(event) {
+    event.preventDefault();
+    if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'copy';
+    }
+}
+function handleDrop(event) {
+    event.preventDefault();
+    if (event.dataTransfer) {
+        if (event.dataTransfer.files && event.dataTransfer.files.length) {
+            onChange(event.dataTransfer.files);
+        }
+    }
+}
 function removeFile(index) {
     if (!files)
         return;
@@ -99,6 +113,8 @@ export function clearFiles() {
 		duration-200 rounded-lg p-1`,
 		c
 	)}
+	on:dragover={handleDragOver}
+	on:drop={handleDrop}
 	{style}
 >
 	{#if !hideIcon && !files}