windmill-components 1.352.9 → 1.362.0

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

@@ -1,4 +1,4 @@
-<script>import { createEventDispatcher, getContext } from 'svelte';
+<script>import { createEventDispatcher, getContext, onMount } from 'svelte';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import AppButton from '../../buttons/AppButton.svelte';
@@ -21,6 +21,16 @@ export let wrapActions = undefined;
 export let selectRow;
 const dispatch = createEventDispatcher();
 const { selectedComponent, hoverStore, mode, connectingInput } = getContext('AppViewerContext');
+let rowDiv = undefined;
+onMount(() => {
+    // apply w-full to the the parent of the parent of the rowDiv
+    if (rowDiv) {
+        const parent = rowDiv.parentElement?.parentElement?.parentElement;
+        if (parent) {
+            parent.classList.add('w-full');
+        }
+    }
+});
 </script>
 
 <RowWrapper value={row} index={rowIndex} {onSet} {onRemove}>
@@ -29,6 +39,7 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 			'flex flex-row justify-center items-center gap-4 h-full px-4 py-1 w-full',
 			wrapActions ? 'flex-wrap' : ''
 		)}
+		bind:this={rowDiv}
 	>
 		{#each actions as action, actionIndex}
 			<!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -47,13 +58,20 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 				}}
 				on:pointerdown|stopPropagation={(e) => {
 					selectRow()
-					$selectedComponent = [action.id]
+
+					if (!$connectingInput.opened) {
+						$selectedComponent = [action.id]
+					}
 				}}
 				class={twMerge(
 					($selectedComponent?.includes(action.id) || $hoverStore === action.id) &&
 						$mode !== 'preview'
-						? 'outline outline-indigo-500 outline-1 outline-offset-1 relative z-50'
-						: 'relative'
+						? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
+						: 'relative',
+					$hoverStore === action.id && $selectedComponent?.[0] !== action.id
+						? 'outline-blue-500'
+						: '',
+					'w-full cursor-pointer'
 				)}
 			>
 				{#if $mode !== 'preview'}
@@ -64,6 +82,9 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 						class={twMerge(
 							'px-2 text-2xs font-bold absolute shadow  -top-2 -left-4 border z-50 rounded-sm w-8 !h-5 flex justify-center items-center',
 							'bg-indigo-500/90 border-indigo-600 text-white',
+							$hoverStore === action.id && $selectedComponent?.[0] !== action.id
+								? 'bg-blue-500/90 border-blue-600'
+								: '',
 							$selectedComponent?.includes(action.id) || $hoverStore === action.id
 								? 'opacity-100'
 								: 'opacity-0'
@@ -92,8 +113,16 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 								</svelte:fragment>
 								<ComponentOutputViewer
 									suffix="table"
-									on:select={({ detail }) =>
-										connectOutput(connectingInput, 'buttoncomponent', action.id, detail)}
+									on:select={({ detail }) => {
+										const tableId = action.id.split('_')[0]
+
+										connectOutput(
+											connectingInput,
+											action.type,
+											tableId,
+											`inputs.${action.id}[${rowIndex}].${detail}`
+										)
+									}}
 									componentId={action.id}
 								/>
 							</Popup>
@@ -162,25 +191,23 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 							{controls}
 						/>
 					{:else if action.type == 'selectcomponent'}
-						<div class="w-40">
-							<AppSelect
-								noDefault
-								noInitialize
-								extraKey={'idx' + rowIndex}
-								{render}
-								--font-size="10px"
-								id={action.id}
-								customCss={action.customCss}
-								configuration={action.configuration}
-								recomputeIds={action.recomputeIds}
-								onSelect={action.onSelect}
-								preclickAction={async () => {
-									dispatch('toggleRow')
-									selectRow()
-								}}
-								{controls}
-							/>
-						</div>
+						<AppSelect
+							noDefault
+							noInitialize
+							extraKey={'idx' + rowIndex}
+							{render}
+							--font-size="10px"
+							id={action.id}
+							customCss={action.customCss}
+							configuration={action.configuration}
+							recomputeIds={action.recomputeIds}
+							onSelect={action.onSelect}
+							preclickAction={async () => {
+								dispatch('toggleRow')
+								selectRow()
+							}}
+							{controls}
+						/>
 					{/if}
 				{:else if action.type == 'buttoncomponent'}
 					<AppButton
@@ -218,24 +245,22 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 						}}
 					/>
 				{:else if action.type == 'selectcomponent'}
-					<div class="w-40">
-						<AppSelect
-							noDefault
-							noInitialize
-							extraKey={'idx' + rowIndex}
-							{render}
-							--font-size="10px"
-							id={action.id}
-							customCss={action.customCss}
-							configuration={action.configuration}
-							recomputeIds={action.recomputeIds}
-							onSelect={action.onSelect}
-							preclickAction={async () => {
-								dispatch('toggleRow')
-								selectRow()
-							}}
-						/>
-					</div>
+					<AppSelect
+						noDefault
+						noInitialize
+						extraKey={'idx' + rowIndex}
+						{render}
+						--font-size="10px"
+						id={action.id}
+						customCss={action.customCss}
+						configuration={action.configuration}
+						recomputeIds={action.recomputeIds}
+						onSelect={action.onSelect}
+						preclickAction={async () => {
+							dispatch('toggleRow')
+							selectRow()
+						}}
+					/>
 				{/if}
 			</div>
 		{/each}

package/package/components/apps/components/inputs/AppDateSelect.svelte

@@ -0,0 +1,284 @@
+<script>import { getContext } from 'svelte';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { initCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import { parseISO, format as formatDateFns } from 'date-fns';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import Select from '../../svelte-select/lib/Select.svelte';
+import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults';
+import DarkModeObserver from '../../../DarkModeObserver.svelte';
+import { twMerge } from 'tailwind-merge';
+import { enUS, fr, de, pt, ja } from 'date-fns/locale';
+export let id;
+export let configuration;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, componentControl } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['dateselectcomponent'].initialData.configuration, configuration);
+let value = undefined;
+$componentControl[id] = {
+    setValue(nvalue) {
+        value = nvalue;
+    }
+};
+let outputs = initOutput($worldStore, id, {
+    day: undefined,
+    month: undefined,
+    year: undefined
+});
+$: !value && handleDefault(resolvedConfig.defaultValue);
+function getLocale(locale = 'en-US') {
+    const localeMapping = {
+        'en-US': enUS,
+        'en-GB': enUS,
+        'en-IE': enUS,
+        'de-DE': de,
+        'fr-FR': fr,
+        'br-FR': fr,
+        'ja-JP': ja,
+        'pt-TL': pt,
+        'fr-CA': fr,
+        'en-CA': enUS
+    };
+    return localeMapping[resolvedConfig?.locale] || enUS;
+}
+function handleDefault(defaultValue) {
+    value = defaultValue;
+    if (value) {
+        const date = parseISO(value);
+        const locale = getLocale(resolvedConfig.locale);
+        selectedDay = String(date.getDate());
+        selectedMonth = formatDateFns(date, 'MMMM', { locale });
+        selectedYear = String(date.getFullYear());
+        if (resolvedConfig?.enableDay) {
+            outputs.day.set(Number(selectedDay));
+        }
+        if (resolvedConfig?.enableMonth) {
+            outputs.month.set(date.getMonth() + 1);
+        }
+        if (resolvedConfig?.enableYear) {
+            outputs.year.set(Number(selectedYear));
+        }
+    }
+}
+let css = initCss($app.css?.dateinputcomponent, customCss);
+let darkMode = false;
+let selectedDay = undefined;
+let selectedMonth = undefined;
+let selectedYear = undefined;
+$: monthItems = computeMonthItems(resolvedConfig?.locale);
+function updateOutputs(enableDay, enableMonth, enableYear) {
+    if (enableDay) {
+        outputs.day.set(Number(selectedDay));
+    }
+    else {
+        outputs.day.set(undefined);
+    }
+    if (enableMonth) {
+        const monthIndex = monthItems.findIndex((item) => item.label === selectedMonth);
+        outputs.month.set(monthIndex + 1);
+    }
+    else {
+        outputs.month.set(undefined);
+    }
+    if (enableYear) {
+        outputs.year.set(Number(selectedYear));
+    }
+    else {
+        outputs.year.set(undefined);
+    }
+}
+$: updateOutputs(resolvedConfig.enableDay, resolvedConfig.enableMonth, resolvedConfig.enableYear);
+function computeMonthItems(locale = 'en-US') {
+    return [
+        {
+            label: formatDateFns(new Date(2000, 0, 1), 'MMMM', { locale: getLocale(locale) }),
+            value: 'January'
+        },
+        {
+            label: formatDateFns(new Date(2000, 1, 1), 'MMMM', { locale: getLocale(locale) }),
+            value: 'February'
+        },
+        {
+            label: formatDateFns(new Date(2000, 2, 1), 'MMMM', { locale: getLocale(locale) }),
+            value: 'March'
+        },
+        {
+            label: formatDateFns(new Date(2000, 3, 1), 'MMMM', { locale: getLocale(locale) }),
+            value: 'April'
+        },
+        {
+            label: formatDateFns(new Date(2000, 4, 1), 'MMMM', { locale: getLocale(locale) }),
+            value: 'May'
+        },
+        {
+            label: formatDateFns(new Date(2000, 5, 1), 'MMMM', { locale: getLocale(locale) }),
+            value: 'June'
+        },
+        {
+            label: formatDateFns(new Date(2000, 6, 1), 'MMMM', { locale: getLocale(locale) }),
+            value: 'July'
+        },
+        {
+            label: formatDateFns(new Date(2000, 7, 1), 'MMMM', { locale: getLocale(locale) }),
+            value: 'August'
+        },
+        {
+            label: formatDateFns(new Date(2000, 8, 1), 'MMMM', { locale: getLocale(locale) }),
+            value: 'September'
+        },
+        {
+            label: formatDateFns(new Date(2000, 9, 1), 'MMMM', { locale: getLocale(locale) }),
+            value: 'October'
+        },
+        {
+            label: formatDateFns(new Date(2000, 10, 1), 'MMMM', { locale: getLocale(locale) }),
+            value: 'November'
+        },
+        {
+            label: formatDateFns(new Date(2000, 11, 1), 'MMMM', { locale: getLocale(locale) }),
+            value: 'December'
+        }
+    ];
+}
+function computeDayPerMonth(selectedMonth, selectedYear) {
+    if (!selectedMonth || !selectedYear) {
+        return 31;
+    }
+    const monthIndex = [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December'
+    ].indexOf(selectedMonth) + 1;
+    const daysInMonth = new Date(Number(selectedYear), monthIndex, 0).getDate();
+    return daysInMonth;
+}
+</script>
+
+{#each Object.keys(components['dateselectcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.dateselectcomponent}
+	/>
+{/each}
+
+<DarkModeObserver bind:darkMode />
+
+<InitializeComponent {id} />
+
+<AlignWrapper {render} {verticalAlignment}>
+	<div
+		class={twMerge(
+			'w-full',
+			resolvedConfig?.orientation === 'horizontal'
+				? 'flex flex-row gap-2  '
+				: 'flex  gap-2 flex-col',
+			css?.container?.class
+		)}
+		style={css?.container?.style}
+	>
+		{#if resolvedConfig?.enableDay}
+			<div
+				class={twMerge('grow', resolvedConfig?.orientation === 'horizontal' ? 'w-1/4' : 'w-full')}
+			>
+				<Select
+					portal={false}
+					value={selectedDay}
+					on:change={(e) => {
+						selectedDay = e.detail.value
+						outputs.day.set(Number(selectedDay))
+					}}
+					on:clear={() => {
+						selectedDay = ''
+						outputs.day.set(undefined)
+					}}
+					items={Array.from({ length: computeDayPerMonth(selectedMonth, selectedYear) }, (_, i) => {
+						return { label: String(i + 1), value: String(i + 1) }
+					})}
+					class={twMerge('text-clip min-w-0', css?.input?.class, 'wm-date-select')}
+					containerStyles={(darkMode
+						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+						: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
+					inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+					placeholder="Pick a day"
+				/>
+			</div>
+		{/if}
+		{#if resolvedConfig?.enableMonth}
+			<div
+				class={twMerge('grow', resolvedConfig?.orientation === 'horizontal' ? 'w-1/2' : 'w-full')}
+			>
+				<Select
+					portal={false}
+					value={selectedMonth}
+					on:change={(e) => {
+						selectedMonth = e.detail.value
+						outputs.month.set(monthItems.findIndex((item) => item.value === selectedMonth) + 1)
+					}}
+					on:clear={() => {
+						selectedMonth = ''
+						outputs.month.set(undefined)
+					}}
+					items={monthItems}
+					placeholder="Pick a month"
+					class={twMerge('text-clip min-w-0', css?.input?.class, 'wm-date-select')}
+					containerStyles={(darkMode
+						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+						: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
+					clearable
+				/>
+			</div>
+		{/if}
+		{#if resolvedConfig?.enableYear}
+			<div
+				class={twMerge('grow', resolvedConfig?.orientation === 'horizontal' ? 'w-1/4' : 'w-full')}
+			>
+				<Select
+					portal={false}
+					value={selectedYear}
+					on:change={(e) => {
+						selectedYear = e.detail.value
+						outputs.year.set(Number(selectedYear))
+					}}
+					on:clear={() => {
+						selectedYear = ''
+						outputs.year.set(undefined)
+					}}
+					items={Array.from({ length: 201 }, (_, i) => `${1900 + i}`)}
+					placeholder="Pick a year"
+					inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+					class={twMerge('text-clip min-w-0', css?.input?.class, 'wm-date-select')}
+					containerStyles={(darkMode
+						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+						: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
+					clearable
+				/>
+			</div>
+		{/if}
+	</div>
+</AlignWrapper>

package/package/components/apps/components/inputs/AppDateSelect.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        customCss?: ComponentCustomCSS<'dateselectcomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppDateSelectProps = typeof __propDef.props;
+export type AppDateSelectEvents = typeof __propDef.events;
+export type AppDateSelectSlots = typeof __propDef.slots;
+export default class AppDateSelect extends SvelteComponent<AppDateSelectProps, AppDateSelectEvents, AppDateSelectSlots> {
+}
+export {};

package/package/components/apps/components/inputs/AppDateTimeInput.svelte

@@ -108,6 +108,7 @@ let css = initCss($app.css?.datetimeinputcomponent, customCss);
 					e.stopPropagation()
 					$selectedComponent = [id]
 				}}
+				inputClass={twMerge('windmillapp w-full py-1.5 px-2 text-sm', 'app-editor-input')}
 				minDate={resolvedConfig.minDateTime
 					? formatDate(resolvedConfig.minDateTime, 'yyyy-MM-dd')
 					: undefined}
@@ -115,6 +116,7 @@ let css = initCss($app.css?.datetimeinputcomponent, customCss);
 					? formatDate(resolvedConfig.maxDateTime, 'yyyy-MM-dd')
 					: undefined}
 				on:focus={() => ($selectedComponent = [id])}
+				disabled={resolvedConfig.disabled}
 			/>
 		{/if}
 	</div>

package/package/components/apps/components/inputs/AppFileInput.svelte

@@ -1,28 +1,26 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { FileInput } from '../../../common';
-import { initOutput } from '../../editor/appUtils';
+import { initConfig, initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
-import InputValue from '../helpers/InputValue.svelte';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
 export let id;
 export let configuration;
 export let customCss = undefined;
 export let render;
 export let onFileChange = undefined;
+export let extraKey = undefined;
 const { app, worldStore, componentControl, mode, runnableComponents } = getContext('AppViewerContext');
-let acceptedFileTypes = undefined;
-let allowMultiple = undefined;
-let text = undefined;
-let includeMimeType = undefined;
-let submittedFileText = undefined;
 let outputs = initOutput($worldStore, id, {
     result: []
 });
+let resolvedConfig = initConfig(components['fileinputcomponent'].initialData.configuration, configuration);
 // Receives Base64 encoded strings from the input component
 async function handleChange(files) {
-    if (includeMimeType === false) {
+    if (resolvedConfig?.includeMimeType === false) {
         files = files?.map((file) => {
             const [_, data] = file.data.split('base64,');
             return { name: file.name, data };
@@ -58,21 +56,15 @@ $: outputs.result && files === undefined && $mode === 'dnd' && preFillFiles();
 	/>
 {/each}
 
-<InputValue
-	key="accepted"
-	{id}
-	input={configuration.acceptedFileTypes}
-	bind:value={acceptedFileTypes}
-/>
-<InputValue key="multiple" {id} input={configuration.allowMultiple} bind:value={allowMultiple} />
-<InputValue key="text" {id} input={configuration.text} bind:value={text} />
-<InputValue key="mime" {id} input={configuration.includeMimeType} bind:value={includeMimeType} />
-<InputValue
-	key="submittedFileText"
-	{id}
-	input={configuration.submittedFileText}
-	bind:value={submittedFileText}
-/>
+{#each Object.keys(components['fileinputcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{extraKey}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <InitializeComponent {id} />
 
@@ -80,8 +72,10 @@ $: outputs.result && files === undefined && $mode === 'dnd' && preFillFiles();
 	<div class="w-full h-full">
 		<FileInput
 			bind:this={fileInput}
-			accept={acceptedFileTypes?.length ? acceptedFileTypes?.join(', ') : undefined}
-			multiple={allowMultiple}
+			accept={resolvedConfig?.acceptedFileTypes?.length
+				? resolvedConfig?.acceptedFileTypes?.join(', ')
+				: undefined}
+			multiple={resolvedConfig?.allowMultiple}
 			convertTo="base64"
 			returnFileNames
 			on:change={({ detail }) => {
@@ -89,10 +83,11 @@ $: outputs.result && files === undefined && $mode === 'dnd' && preFillFiles();
 			}}
 			class={twMerge('w-full h-full', css?.container?.class, 'wm-file-input')}
 			style={css?.container?.style}
-			submittedText={submittedFileText}
+			submittedText={resolvedConfig?.submittedFileText}
+			disabled={resolvedConfig.disabled}
 			bind:files
 		>
-			{text}
+			{resolvedConfig?.text}
 		</FileInput>
 	</div>
 {/if}

package/package/components/apps/components/inputs/AppFileInput.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         customCss?: ComponentCustomCSS<'fileinputcomponent'> | undefined;
         render: boolean;
         onFileChange?: string[] | undefined;
+        extraKey?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/inputs/AppTextInput.svelte

@@ -43,7 +43,7 @@ function handleDefault(defaultValue) {
     value = defaultValue;
 }
 let css = initCss($app.css?.[appCssKey], customCss);
-$: classInput = twMerge('windmillapp w-full py-1.5 px-2 text-sm', 'app-editor-input', css?.input?.class ?? '', resolvedConfig.disabled ? 'placeholder:text-gray-400 dark:placeholder:text-gray-600' : '', 'wm-input', 'wm-text-input');
+$: classInput = twMerge('windmillapp w-full py-1.5 px-2 text-sm', 'app-editor-input', css?.input?.class ?? '', 'wm-input', 'wm-text-input');
 let beforeIconComponent;
 let afterIconComponent;
 $: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();

package/package/components/apps/components/layout/AppDecisionTree.svelte

@@ -40,45 +40,47 @@ $: if (!nodes.map((n) => n.id).includes(currentNodeId)) {
 $: lastNodeId = nodes?.find((node) => node.next.length === 0)?.id;
 $: isNextDisabled = resolvedNext?.[currentNodeId] === false;
 const history = [];
+function updateCurrentNode(node, index) {
+    currentNodeId = node.next[index].id;
+    history.push(node.id);
+    selectedConditionIndex = index + 1;
+    $focusedGrid = {
+        parentComponentId: id,
+        subGridIndex: nodes.findIndex((node) => node.id == currentNodeId)
+    };
+}
 function next() {
     const resolvedNodeConditions = resolvedConditions[currentNodeId];
-    let found = false;
-    resolvedNodeConditions.forEach((condition, index) => {
-        if (found)
+    const node = nodes.find((node) => node.id == currentNodeId);
+    if (!node) {
+        return;
+    }
+    for (let index = 0; index < resolvedNodeConditions.length; index++) {
+        const condition = resolvedNodeConditions[index];
+        if (condition && resolvedNext[node.id] !== false) {
+            updateCurrentNode(node, index);
             return;
-        const node = nodes.find((node) => node.id == currentNodeId);
-        if (condition && node && resolvedNext[node.id] !== false) {
-            found = true;
-            currentNodeId = node.next[index].id;
-            history.push(node.id);
-            selectedConditionIndex = index + 1;
-            $focusedGrid = {
-                parentComponentId: id,
-                subGridIndex: nodes.findIndex((node) => node.id == currentNodeId)
-            };
         }
-    });
+    }
+}
+function updateFocusedGrid(nodeId) {
+    currentNodeId = nodeId;
+    selectedConditionIndex = nodes.findIndex((node) => node.id == currentNodeId);
+    $focusedGrid = {
+        parentComponentId: id,
+        subGridIndex: selectedConditionIndex
+    };
 }
 function prev() {
-    const previsouNodeId = history.pop();
-    if (previsouNodeId) {
-        currentNodeId = previsouNodeId;
-        selectedConditionIndex = nodes.findIndex((next) => next.id == currentNodeId);
-        $focusedGrid = {
-            parentComponentId: id,
-            subGridIndex: selectedConditionIndex
-        };
+    const previousNodeId = history.pop();
+    if (previousNodeId) {
+        updateFocusedGrid(previousNodeId);
     }
     else {
-        // if no history, go to first node
+        // if no history, go to the first node
         const node = getFirstNode(nodes);
         if (node) {
-            currentNodeId = node.id;
-            selectedConditionIndex = nodes.findIndex((next) => next.id == currentNodeId);
-            $focusedGrid = {
-                parentComponentId: id,
-                subGridIndex: selectedConditionIndex
-            };
+            updateFocusedGrid(node.id);
         }
     }
 }
@@ -167,7 +169,7 @@ $: nodes && $debuggingComponents && updateDebuggingComponents();
 				<SubGridEditor
 					visible={render && node.id === currentNodeId}
 					{id}
-					class={twMerge(css?.container?.class, 'wm-conditional-tabs')}
+					class={twMerge(css?.container?.class, 'wm-decision-tree')}
 					style={css?.container?.style}
 					subGridId={`${id}-${i}`}
 					containerHeight={componentContainerHeight - 40}