windmill-components 1.89.1 → 1.103.1

package/package/components/apps/editor/ComponentHeader.svelte

@@ -5,6 +5,7 @@ import Popover from '../../Popover.svelte';
 import { Alert, Button } from '../../common';
 import { twMerge } from 'tailwind-merge';
 import { getErrorFromLatestResult } from './appUtils';
+import TabsDebug from './TabsDebug.svelte';
 export let component;
 export let selected;
 export let locked = false;
@@ -12,6 +13,7 @@ export let hover = false;
 export let shouldHideActions = false;
 export let hasInlineEditor = false;
 export let inlineEditorOpened = false;
+export let errorHandledByComponent = false;
 const dispatch = createEventDispatcher();
 const { errorByComponent, openDebugRun, jobs, connectingInput } = getContext('AppViewerContext');
 $: error = getErrorFromLatestResult(component.id, $errorByComponent, $jobs);
@@ -59,6 +61,12 @@ function openDebugRuns() {
 				{/if}
 			</button>
 		{/if}
+		{#if component.type === 'conditionalwrapper'}
+			<TabsDebug id={component.id} tabs={component.conditions ?? []} isConditionalDebugMode />
+		{/if}
+		{#if component.type === 'tabscomponent' && component.configuration.tabsKind.type === 'static' && component.configuration.tabsKind.value === 'invisibleOnView'}
+			<TabsDebug id={component.id} tabs={component.tabs ?? []} />
+		{/if}
 		<button
 			title="Expand"
 			class={classNames(
@@ -85,21 +93,22 @@ function openDebugRuns() {
 				<Anchor aria-label="Lock position" size={14} />
 			{/if}
 		</button>
-		<span
+		<div
 			draggable="false"
 			title="Move"
 			on:mousedown|stopPropagation|capture
 			class={classNames(
 				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-move rounded-sm',
-				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800',
+				'flex items-center justify-center'
 			)}
 		>
 			<Move size={14} />
-		</span>
+		</div>
 	</div>
 {/if}
 
-{#if error}
+{#if error && !errorHandledByComponent}
 	{@const json = JSON.parse(JSON.stringify(error))}
 	<span
 		title="Error"

package/package/components/apps/editor/ComponentHeader.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         shouldHideActions?: boolean | undefined;
         hasInlineEditor?: boolean | undefined;
         inlineEditorOpened?: boolean | undefined;
+        errorHandledByComponent?: boolean | undefined;
     };
     events: {
         mousedown: MouseEvent;

package/package/components/apps/editor/GridEditor.svelte

@@ -10,6 +10,9 @@ import Grid from '../svelte-grid/Grid.svelte';
 import { deepEqual } from 'fast-equals';
 import ComponentWrapper from './component/ComponentWrapper.svelte';
 import { classNames } from '../../../utils';
+import Toggle from '../../Toggle.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import { BG_PREFIX } from '../utils';
 export let policy;
 const { selectedComponent, app, mode, connectingInput, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
 const { history } = getContext('AppEditorContext');
@@ -33,13 +36,17 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
 		{#if !$connectingInput.opened}
 			<RecomputeAllComponents />
 		{/if}
-		<div class="flex text-2xs text-gray-600 gap-1 items-center">
-			<div class="py-2 pr-2 text-gray-600 flex gap-2 items-center">
+		<div class="flex text-2xs text-gray-600 gap-8 items-center">
+			<div class="py-2 pr-2 text-gray-600 flex gap-1 items-center">
 				Hide bar on view
-				<input class="windmillapp" type="checkbox" bind:checked={$app.norefreshbar} />
+				<Toggle size="xs" bind:checked={$app.norefreshbar} />
 			</div>
 			<div>
-				{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
+				{policy.on_behalf_of ? `Author ${policy.on_behalf_of_email}` : ''}
+				<Tooltip
+					>The scripts will be run on behalf of the author and a tight policy ensure security about
+					the possible inputs of the runnables.</Tooltip
+				>
 			</div>
 		</div>
 	</div>
@@ -103,16 +110,9 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
 </div>
 
 {#if $app.hiddenInlineScripts}
-	{#each $app.hiddenInlineScripts as script, index}
-		{#if script}
-			<HiddenComponent
-				id={`bg_${index}`}
-				inlineScript={script.inlineScript}
-				name={script.name}
-				fields={script.fields}
-				recomputeOnInputChanged={script.recomputeOnInputChanged ?? true}
-				recomputableByRefreshButton={script.autoRefresh ?? false}
-			/>
+	{#each $app.hiddenInlineScripts as runnable, index}
+		{#if runnable}
+			<HiddenComponent id={BG_PREFIX + index} {runnable} />
 		{/if}
 	{/each}
 {/if}

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

@@ -1,16 +1,15 @@
-<script>import Toggle from '../../Toggle.svelte';
-import Tooltip from '../../Tooltip.svelte';
-import { getContext } from 'svelte';
-import { allItems } from '../utils';
+<script>import { getContext } from 'svelte';
+import { BG_PREFIX, allItems } from '../utils';
 import { findGridItem } from './appUtils';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
 import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
 import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
-import BackgroundScriptTriggerList from './settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte';
+import BackgroundScriptSettings from './settingsPanel/script/BackgroundScriptSettings.svelte';
+import Recompute from './settingsPanel/Recompute.svelte';
 const { selectedComponent, app, stateId } = getContext('AppViewerContext');
 $: hiddenInlineScript = $app?.hiddenInlineScripts
     ?.map((x, i) => ({ script: x, index: i }))
-    .find(({ script, index }) => $selectedComponent?.includes(`bg_${index}`));
+    .find(({ script, index }) => $selectedComponent?.includes(BG_PREFIX + index));
 $: componentSettings = findComponentSettings($app, $selectedComponent?.[0]);
 $: tableActionSettings = findTableActionSettings($app, $selectedComponent?.[0]);
 function findTableActionSettings(app, id) {
@@ -74,39 +73,16 @@ function findComponentSettings(app, id) {
 		/>
 	{/key}
 {:else if hiddenInlineScript}
-	<div class="min-h-full flex flex-col divide-y">
-		<PanelSection title={`Configuration`}>
-			<div class="flex items-center">
-				<Toggle
-					bind:checked={hiddenInlineScript.script.autoRefresh}
-					options={{ right: 'Run on start and app refresh' }}
-				/>
-				<Tooltip>
-					You may want to disable this so that the background script is only triggered by changes to
-					other values or triggered by another computation on a button (See 'Recompute Others')
-				</Tooltip>
-			</div>
-		</PanelSection>
+	{@const id = BG_PREFIX + hiddenInlineScript.index}
+	<BackgroundScriptSettings bind:runnable={hiddenInlineScript.script} {id} />
 
-		<div class="p-2">
-			{#if hiddenInlineScript.script.inlineScript}
-				<BackgroundScriptTriggerList
-					fields={hiddenInlineScript.script.fields}
-					autoRefresh={hiddenInlineScript.script.autoRefresh}
-					id={`bg_${hiddenInlineScript.index}`}
-					bind:recomputeOnInputChanged={hiddenInlineScript.script.recomputeOnInputChanged}
-					bind:doNotRecomputeOnInputChanged={hiddenInlineScript.script.doNotRecomputeOnInputChanged}
-					bind:inlineScript={hiddenInlineScript.script.inlineScript}
-				/>
-			{:else}
-				<span class="text-gray-600 text-xs">No script defined</span>
-			{/if}
-		</div>
+	<div class="mb-8">
 		{#if Object.keys(hiddenInlineScript.script.fields).length > 0}
 			<PanelSection title={`Inputs`}>
 				{#key $stateId}
 					<InputsSpecsEditor
-						id={`bg_${hiddenInlineScript.index}`}
+						displayType
+						{id}
 						shouldCapitalize={false}
 						bind:inputSpecs={hiddenInlineScript.script.fields}
 						userInputEnabled={false}
@@ -114,6 +90,7 @@ function findComponentSettings(app, id) {
 				{/key}
 			</PanelSection>
 		{/if}
-		<div class="grow shrink" />
 	</div>
+	<Recompute bind:recomputeIds={hiddenInlineScript.script.recomputeIds} ownId={id} />
+	<div class="grow shrink" />
 {/if}

package/package/components/apps/editor/SubGridEditor.svelte

@@ -55,7 +55,7 @@ let container = undefined;
 			classes ?? '',
 			noPadding ? 'px-0' : 'px-2'
 		)}
-		style="height: {containerHeight}px; {style ?? ''}"
+		style="{containerHeight ? `height: ${containerHeight}px;` : ''} {style ?? ''}"
 	>
 		{#if $mode !== 'preview'}
 			<div class={highlight ? 'border-gray-400  border border-dashed min-h-full' : ''}>

package/package/components/apps/editor/TabsDebug.svelte

@@ -0,0 +1,62 @@
+<script>import ButtonDropdown from '../../common/button/ButtonDropdown.svelte';
+import { classNames } from '../../../utils';
+import { MenuItem } from '@rgossiaux/svelte-headlessui';
+import { createEventDispatcher, getContext } from 'svelte';
+export let tabs = [];
+export let id;
+export let isConditionalDebugMode = false;
+const { componentControl } = getContext('AppViewerContext');
+let isManuallySelected = false;
+const dispatch = createEventDispatcher();
+</script>
+
+<button
+	title={isConditionalDebugMode ? 'Debug conditions' : 'Debug tabs'}
+	class={classNames(
+		'text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
+		isManuallySelected
+			? 'bg-red-100 text-red-600 border-red-500 hover:bg-red-200 hover:text-red-800'
+			: 'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+	)}
+	on:click={() => dispatch('triggerInlineEditor')}
+	on:pointerdown|stopPropagation
+>
+	<ButtonDropdown hasPadding={false}>
+		<svelte:fragment slot="items">
+			{#each tabs ?? [] as { }, index}
+				<MenuItem
+					on:click={() => {
+						$componentControl?.[id]?.setTab?.(index)
+						isManuallySelected = true
+					}}
+				>
+					<div
+						class={classNames(
+							'!text-gray-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+						)}
+					>
+						{#if index === tabs.length - 1}
+							{isConditionalDebugMode ? `Debug default condition` : `Debug tab ${index + 1}`}
+						{:else}
+							{`Debug ${isConditionalDebugMode ? 'condition' : 'tab'} ${index + 1}`}
+						{/if}
+					</div>
+				</MenuItem>
+			{/each}
+			<MenuItem
+				on:click={() => {
+					$componentControl?.[id]?.setTab?.(-1)
+					isManuallySelected = false
+				}}
+			>
+				<div
+					class={classNames(
+						'!text-red-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+					)}
+				>
+					{`Reset debug mode`}
+				</div>
+			</MenuItem>
+		</svelte:fragment>
+	</ButtonDropdown>
+</button>

package/package/components/apps/editor/TabsDebug.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        tabs?: any[] | undefined;
+        id: string;
+        isConditionalDebugMode?: boolean | undefined;
+    };
+    events: {
+        pointerdown: PointerEvent;
+        triggerInlineEditor: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TabsDebugProps = typeof __propDef.props;
+export type TabsDebugEvents = typeof __propDef.events;
+export type TabsDebugSlots = typeof __propDef.slots;
+export default class TabsDebug extends SvelteComponentTyped<TabsDebugProps, TabsDebugEvents, TabsDebugSlots> {
+}
+export {};

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

@@ -1,5 +1,5 @@
 import type { App, BaseAppComponent, ConnectingInput, EditorBreakpoint, FocusedGrid, GridItem } from '../types';
-import { components, type AppComponent, type BaseComponent } from './component';
+import { components, type AppComponent, type BaseComponent, type InitialAppComponent } from './component';
 import type { Output, World } from '../rx';
 import type { FilledItem } from '../svelte-grid/types';
 import type { EvalAppInput, StaticAppInput } from '../inputType';
@@ -13,7 +13,7 @@ export declare function getNextGridItemId(app: App): string;
 export declare function getAllRecomputeIdsForComponent(app: App, id: string | undefined): string[];
 export declare function createNewGridItem(grid: GridItem[], id: string, data: AppComponent, columns?: Record<number, any>): GridItem;
 export declare function getGridItems(app: App, focusedGrid: FocusedGrid | undefined): GridItem[];
-export declare function appComponentFromType<T extends keyof typeof components>(type: T): (id: string) => BaseAppComponent & BaseComponent<T>;
+export declare function appComponentFromType<T extends keyof typeof components>(type: T, overrideConfiguration?: Partial<InitialAppComponent['configuration']>): (id: string) => BaseAppComponent & BaseComponent<T>;
 export declare function insertNewGridItem(app: App, builddata: (id: string) => AppComponent, focusedGrid: FocusedGrid | undefined, columns?: Record<string, any>, keepId?: string): string;
 export declare function getAllSubgridsAndComponentIds(app: App, component: AppComponent): [string[], string[]];
 export declare function deleteGridItem(app: App, component: AppComponent, parent: string | undefined, shouldKeepSubGrid: boolean): string[];

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

@@ -3,7 +3,8 @@ import { gridColumns } from '../gridUtils';
 import { allItems } from '../utils';
 import gridHelp from '../svelte-grid/utils/helper';
 import { get } from 'svelte/store';
-import { sendUserToast } from '../../../utils';
+import { deepMergeWithPriority } from '../../../utils';
+import { sendUserToast } from '../../../toast';
 import { getNextId } from '../../flows/idUtils';
 export function dfs(grid, id, subgrids) {
     for (const item of grid) {
@@ -26,14 +27,8 @@ export function dfs(grid, id, subgrids) {
     return undefined;
 }
 export function selectId(e, id, selectedComponent, app) {
-    // this ensure handleClickOutside are triggered
-    let event = new MouseEvent('click', {
-        view: window,
-        bubbles: true,
-        cancelable: true,
-        relatedTarget: e.target
-    });
-    window.dispatchEvent(event);
+    ;
+    document?.activeElement?.blur();
     if (e.shiftKey) {
         selectedComponent.update((old) => {
             if (old && old?.[0]) {
@@ -174,33 +169,35 @@ function cleanseValue(key, value) {
         return [key, { type: value.type, expr: value.expr }];
     }
 }
-export function appComponentFromType(type) {
+export function appComponentFromType(type, overrideConfiguration) {
     return (id) => {
         const init = JSON.parse(JSON.stringify(ccomponents[type].initialData));
+        const configuration = Object.fromEntries(Object.entries(init.configuration).map(([key, value]) => {
+            if (value.type != 'oneOf') {
+                return cleanseValue(key, value);
+            }
+            else {
+                return [
+                    key,
+                    {
+                        type: value.type,
+                        selected: value.selected,
+                        configuration: Object.fromEntries(Object.entries(value.configuration).map(([key, val]) => [
+                            key,
+                            Object.fromEntries(Object.entries(val).map(([key, val]) => cleanseValue(key, val)))
+                        ]))
+                    }
+                ];
+            }
+        }));
         return {
             type,
             //TODO remove tooltip and onlyStatic from there
-            configuration: Object.fromEntries(Object.entries(init.configuration).map(([key, value]) => {
-                if (value.type != 'oneOf') {
-                    return cleanseValue(key, value);
-                }
-                else {
-                    return [
-                        key,
-                        {
-                            type: value.type,
-                            selected: value.selected,
-                            configuration: Object.fromEntries(Object.entries(value.configuration).map(([key, val]) => [
-                                key,
-                                Object.fromEntries(Object.entries(val).map(([key, val]) => cleanseValue(key, val)))
-                            ]))
-                        }
-                    ];
-                }
-            })),
+            configuration: deepMergeWithPriority(configuration, overrideConfiguration ?? {}),
             componentInput: init.componentInput,
             panes: init.panes,
             tabs: init.tabs,
+            conditions: init.conditions,
             customCss: {},
             recomputeIds: init.recomputeIds ? [] : undefined,
             actionButtons: init.actionButtons ? [] : undefined,
@@ -419,6 +416,9 @@ export function sortGridItemsPosition(gridItems, width) {
 }
 export function connectInput(connectingInput, componentId, path) {
     if (connectingInput) {
+        if (connectingInput.onConnect) {
+            connectingInput.onConnect({ componentId, path });
+        }
         connectingInput = {
             opened: false,
             input: {
@@ -428,7 +428,8 @@ export function connectInput(connectingInput, componentId, path) {
                 },
                 type: 'connected'
             },
-            hoveredComponent: undefined
+            hoveredComponent: undefined,
+            onConnect: undefined
         };
     }
     return connectingInput;

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

@@ -3,6 +3,16 @@ import { twMerge } from 'tailwind-merge';
 import ComponentHeader from '../ComponentHeader.svelte';
 import { AppBarChart, AppDisplayComponent, AppTable, AppText, AppButton, AppPieChart, AppSelect, AppCheckbox, AppTextInput, AppNumberInput, AppDateInput, AppForm, AppScatterChart, AppTimeseries, AppHtml, AppSliderInputs, AppFormButton, VegaLiteHtml, PlotlyHtml, AppRangeInput, AppTabs, AppIcon, AppCurrencyInput, AppDivider, AppFileInput, AppImage, AppContainer, AppAggridTable, AppDrawer, AppMap, AppSplitpanes, AppPdf } from '../../components';
 import AppMultiSelect from '../../components/inputs/AppMultiSelect.svelte';
+import AppModal from '../../components/layout/AppModal.svelte';
+import AppSchemaForm from '../../components/buttons/AppSchemaForm.svelte';
+import AppStepper from '../../components/layout/AppStepper.svelte';
+import AppSelectTab from '../../components/inputs/AppSelectTab.svelte';
+import AppConditionalWrapper from '../../components/layout/AppConditionalWrapper.svelte';
+import AppSelectStep from '../../components/inputs/AppSelectStep.svelte';
+import AppDownload from '../../components/display/AppDownload.svelte';
+import AppLogsComponent from '../../components/display/AppLogsComponent.svelte';
+import AppFlowStatusComponent from '../../components/display/AppFlowStatusComponent.svelte';
+import AppChartJs from '../../components/display/AppChartJs.svelte';
 export let component;
 export let selected;
 export let locked = false;
@@ -13,6 +23,7 @@ const movingcomponents = editorContext?.movingcomponents;
 $: ismoving =
     movingcomponents != undefined && $mode == 'dnd' && $movingcomponents?.includes(component.id);
 let initializing = undefined;
+let errorHandledByComponent = false;
 let componentContainerHeight = 0;
 let inlineEditorOpened = false;
 </script>
@@ -47,6 +58,7 @@ let inlineEditorOpened = false;
 			on:triggerInlineEditor={() => {
 				inlineEditorOpened = !inlineEditorOpened
 			}}
+			{errorHandledByComponent}
 		/>
 	{/if}
 
@@ -87,6 +99,22 @@ let inlineEditorOpened = false;
 				componentInput={component.componentInput}
 				{render}
 			/>
+		{:else if component.type === 'logcomponent'}
+			<AppLogsComponent
+				id={component.id}
+				customCss={component.customCss}
+				bind:initializing
+				componentInput={component.componentInput}
+				{render}
+			/>
+		{:else if component.type === 'flowstatuscomponent'}
+			<AppFlowStatusComponent
+				id={component.id}
+				customCss={component.customCss}
+				bind:initializing
+				componentInput={component.componentInput}
+				{render}
+			/>
 		{:else if component.type === 'barchartcomponent'}
 			<AppBarChart
 				configuration={component.configuration}
@@ -186,14 +214,23 @@ let inlineEditorOpened = false;
 				customCss={component.customCss}
 				componentInput={component.componentInput}
 				recomputeIds={component.recomputeIds}
-				bind:initializing
+				bind:errorHandledByComponent
+				{render}
+			/>
+		{:else if component.type === 'downloadcomponent'}
+			<AppDownload
+				id={component.id}
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				customCss={component.customCss}
 				{render}
 			/>
 		{:else if component.type === 'selectcomponent' || component.type === 'resourceselectcomponent'}
 			<AppSelect
+				recomputeIds={component.recomputeIds}
 				id={component.id}
 				verticalAlignment={component.verticalAlignment}
-				horizontalAlignment={component.horizontalAlignment}
 				configuration={component.configuration}
 				customCss={component.customCss}
 				{render}
@@ -201,8 +238,6 @@ let inlineEditorOpened = false;
 		{:else if component.type === 'multiselectcomponent'}
 			<AppMultiSelect
 				id={component.id}
-				verticalAlignment={component.verticalAlignment}
-				horizontalAlignment={component.horizontalAlignment}
 				configuration={component.configuration}
 				customCss={component.customCss}
 				{render}
@@ -215,6 +250,7 @@ let inlineEditorOpened = false;
 				customCss={component.customCss}
 				componentInput={component.componentInput}
 				recomputeIds={component.recomputeIds}
+				bind:errorHandledByComponent
 				{render}
 			/>
 		{:else if component.type === 'formbuttoncomponent'}
@@ -226,6 +262,7 @@ let inlineEditorOpened = false;
 				customCss={component.customCss}
 				componentInput={component.componentInput}
 				recomputeIds={component.recomputeIds}
+				bind:errorHandledByComponent
 				{render}
 			/>
 		{:else if component.type === 'checkboxcomponent'}
@@ -235,6 +272,7 @@ let inlineEditorOpened = false;
 				horizontalAlignment={component.horizontalAlignment}
 				configuration={component.configuration}
 				customCss={component.customCss}
+				recomputeIds={component.recomputeIds}
 				{render}
 			/>
 		{:else if component.type === 'textinputcomponent'}
@@ -306,7 +344,6 @@ let inlineEditorOpened = false;
 				configuration={component.configuration}
 				id={component.id}
 				customCss={component.customCss}
-				bind:initializing
 				{render}
 			/>
 		{:else if component.type === 'horizontaldividercomponent'}
@@ -336,13 +373,30 @@ let inlineEditorOpened = false;
 				id={component.id}
 				customCss={component.customCss}
 				{render}
-				bind:initializing
 			/>
 		{:else if component.type === 'tabscomponent' && component.tabs}
 			<AppTabs
 				configuration={component.configuration}
 				id={component.id}
 				tabs={component.tabs}
+				disabledTabs={component.disabledTabs}
+				customCss={component.customCss}
+				{componentContainerHeight}
+				{render}
+			/>
+		{:else if component.type === 'steppercomponent' && component.tabs}
+			<AppStepper
+				id={component.id}
+				tabs={component.tabs}
+				customCss={component.customCss}
+				{componentContainerHeight}
+				componentInput={component.componentInput}
+				{render}
+			/>
+		{:else if component.type === 'conditionalwrapper' && component.conditions}
+			<AppConditionalWrapper
+				id={component.id}
+				conditions={component.conditions}
 				customCss={component.customCss}
 				{componentContainerHeight}
 				{render}
@@ -417,6 +471,50 @@ let inlineEditorOpened = false;
 				customCss={component.customCss}
 				{render}
 			/>
+		{:else if component.type === 'modalcomponent'}
+			<AppModal
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				{render}
+			/>
+		{:else if component.type === 'schemaformcomponent'}
+			<AppSchemaForm
+				id={component.id}
+				componentInput={component.componentInput}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				{initializing}
+				{render}
+			/>
+		{:else if component.type === 'selecttabcomponent'}
+			<AppSelectTab
+				id={component.id}
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				{render}
+			/>
+		{:else if component.type === 'selectstepcomponent'}
+			<AppSelectStep
+				id={component.id}
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				{render}
+			/>
+		{:else if component.type === 'chartjscomponent'}
+			<AppChartJs
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:initializing
+				componentInput={component.componentInput}
+				{render}
+			/>
 		{/if}
 	</div>
 </div>

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

@@ -1,7 +1,7 @@
 <script>import { getContext } from 'svelte';
 import { findGridItem, findGridItemParentGrid, getAllSubgridsAndComponentIds, insertNewGridItem } from '../appUtils';
 import { push } from '../../../../history';
-import { sendUserToast } from '../../../../utils';
+import { sendUserToast } from '../../../../toast';
 import { gridColumns } from '../../gridUtils';
 const { app, selectedComponent, focusedGrid, componentControl } = getContext('AppViewerContext');
 const { history, movingcomponents } = getContext('AppEditorContext');
@@ -143,12 +143,27 @@ function handlePaste(event) {
     else if (copiedGridItems) {
         let nitems = [];
         for (let copiedGridItem of copiedGridItems) {
-            nitems.push(insertNewGridItem($app, (id) => ({ ...copiedGridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, copiedGridItem[column]]))));
+            let newItem = copyComponent(copiedGridItem, $focusedGrid);
+            newItem && nitems.push(newItem);
         }
         $selectedComponent = nitems.map((x) => x);
     }
     $app = $app;
 }
+function copyComponent(item, parentGrid, doNotVisit) {
+    if (item.id === doNotVisit) {
+        return;
+    }
+    const newItem = insertNewGridItem($app, (id) => ({ ...item.data, id }), parentGrid, Object.fromEntries(gridColumns.map((column) => [column, item[column]])));
+    if ($app.subgrids && item.data.numberOfSubgrids) {
+        for (let i = 0; i < item.data.numberOfSubgrids; i++) {
+            $app.subgrids[`${item.id}-${i}`].forEach((subgridItem) => {
+                copyComponent(subgridItem, { parentComponentId: newItem, subGridIndex: i }, doNotVisit ?? newItem);
+            });
+        }
+    }
+    return newItem;
+}
 function keydown(event) {
     // Ignore keydown events if the user is typing in monaco
     let classes = event.target?.['className'];

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

@@ -55,9 +55,11 @@ function onPointerDown(e) {
 		}
 	}}
 	on:pointerdown={onPointerDown}
-	on:click|capture={(event) => preventInteraction(event, type === 'tabscomponent')}
+	on:click|capture={(event) =>
+		preventInteraction(event, type === 'tabscomponent' || type === 'steppercomponent')}
 	on:drag|capture={preventInteraction}
-	on:pointerup|capture={(event) => preventInteraction(event, type === 'tabscomponent')}
+	on:pointerup|capture={(event) =>
+		preventInteraction(event, type === 'tabscomponent' || type === 'steppercomponent')}
 >
 	<slot />
 </div>