windmill-components 1.55.0 → 1.55.2

package/components/apps/components/form/AppForm.svelte

@@ -9,7 +9,6 @@ export let configuration;
 export let recomputeIds = undefined;
 export let extraQueryParams = {};
 export let horizontalAlignment = undefined;
-export let verticalAlignment = undefined;
 export const staticOutputs = ['loading', 'result'];
 const { runnableComponents } = getContext('AppEditorContext');
 let labelValue = 'Default label';
@@ -18,9 +17,9 @@ let size;
 let runnableComponent;
 </script>
 
-<InputValue input={configuration.label} bind:value={labelValue} />
-<InputValue input={configuration.color} bind:value={color} />
-<InputValue input={configuration.size} bind:value={size} />
+<InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.color} bind:value={color} />
+<InputValue {id} input={configuration.size} bind:value={size} />
 
 <RunnableWrapper
 	bind:runnableComponent
@@ -30,7 +29,7 @@ let runnableComponent;
 	autoRefresh={false}
 	forceSchemaDisplay={true}
 >
-	<AlignWrapper {horizontalAlignment} {verticalAlignment} disableVerticalAlignment={true}>
+	<AlignWrapper {horizontalAlignment}>
 		<Button
 			on:click={() => {
 				runnableComponent?.runComponent()

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

@@ -8,7 +8,6 @@ declare const __propDef: {
         recomputeIds?: string[] | undefined;
         extraQueryParams?: Record<string, any> | undefined;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/helpers/AlignWrapper.svelte

@@ -1,7 +1,6 @@
 <script>import { classNames } from '../../../../utils';
-export let horizontalAlignment;
-export let verticalAlignment;
-export let disableVerticalAlignment = false;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
 function tailwindHorizontalAlignment(horizontalAlignment) {
     switch (horizontalAlignment) {
         case 'left':
@@ -22,7 +21,7 @@ function tailwindVerticalAlignment(verticalAlignment) {
             return 'items-end';
     }
 }
-$: classes = classNames('flex w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), disableVerticalAlignment ? '' : 'h-full');
+$: classes = classNames('flex w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '');
 </script>
 
 <div class={classes}>

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

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        horizontalAlignment: 'left' | 'center' | 'right' | undefined;
-        verticalAlignment: 'top' | 'center' | 'bottom' | undefined;
-        disableVerticalAlignment?: boolean | undefined;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,24 +1,73 @@
-<script>import { getContext } from 'svelte';
+<script>import { isCodeInjection } from '../../../flows/utils';
+import { getContext } from 'svelte';
 import { accessPropertyByPath } from '../../utils';
 export let input;
 export let value;
+export let id = undefined;
 const { worldStore } = getContext('AppEditorContext');
+$: state = $worldStore?.state;
 $: input && $worldStore && handleConnection();
+$: input && $state && input.type == 'template' && setValue();
 function handleConnection() {
     if (input.type === 'connected') {
-        $worldStore?.connect(input, onValueChange);
+        $worldStore?.connect(input, onValueChange, value);
     }
-    else if (input.type === 'static') {
+    else if (input.type === 'static' || input.type == 'template') {
         setValue();
     }
     else {
         value = undefined;
     }
 }
+function computeGlobalContext() {
+    Object.prototype.toString = function () {
+        return JSON.stringify(this);
+    };
+    return Object.fromEntries(Object.entries($worldStore?.outputsById ?? {})
+        .filter(([k, _]) => k != id)
+        .map(([key, value]) => {
+        return [
+            key,
+            Object.fromEntries(Object.entries(value ?? {}).map((x) => [x[0], x[1].peak()]))
+        ];
+    }));
+}
 function setValue() {
-    if (input.type === 'static') {
+    console.log(computeGlobalContext());
+    if (input.type === 'template' && isCodeInjection(input.eval)) {
+        try {
+            value = eval_like('`' + input.eval + '`', computeGlobalContext());
+        }
+        catch (e) {
+            value = e.message;
+        }
+    }
+    else if (input.type === 'static') {
         value = input.value;
     }
+    else if (input.type === 'template') {
+        value = input.eval;
+    }
+}
+function create_context_function_template(eval_string, context) {
+    return `
+  return function (context) {
+    "use strict";
+    ${Object.keys(context).length > 0
+        ? `let ${Object.keys(context).map((key) => ` ${key} = context['${key}']`)};`
+        : ``}
+    return ${eval_string};
+  }                                                                                                                   
+  `;
+}
+function make_context_evaluator(eval_string, context) {
+    let template = create_context_function_template(eval_string, context);
+    let functor = Function(template);
+    return functor();
+}
+function eval_like(text, context = {}) {
+    let evaluator = make_context_evaluator(text, context);
+    return evaluator(context);
 }
 function onValueChange(newValue) {
     if (input.type === 'connected' && newValue !== undefined && newValue !== null) {
@@ -27,7 +76,7 @@ function onValueChange(newValue) {
             // No connection
             return;
         }
-        const { componentId, path } = connection;
+        const { path } = connection;
         const hasSubPath = ['.', '['].some((x) => path.includes(x));
         if (hasSubPath) {
             // Must remove top level property from path

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

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         input: AppInput;
         value: string | number | boolean | Record<string | number, any> | undefined;
+        id?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/NonRunnableComponent.svelte

@@ -15,6 +15,7 @@ $: result !== undefined && setOutput();
 </script>
 
 {#if componentInput.type !== 'runnable'}
-	<InputValue input={componentInput} bind:value={result} />
+	<InputValue {id} input={componentInput} bind:value={result} />
 {/if}
+
 <slot />

package/components/apps/components/helpers/RefreshButton.svelte

@@ -0,0 +1,20 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { faRefresh } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+export let componentId;
+const { runnableComponents } = getContext('AppEditorContext');
+let loading = false;
+async function refresh() {
+    loading = true;
+    await $runnableComponents[componentId]?.();
+    loading = false;
+}
+</script>
+
+<Button
+	iconOnly
+	startIcon={{ icon: faRefresh, classes: loading ? 'animate-spin' : '' }}
+	color="dark"
+	size="xs"
+	on:click={refresh}
+/>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        componentId: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RefreshButtonProps = typeof __propDef.props;
+export type RefreshButtonEvents = typeof __propDef.events;
+export type RefreshButtonSlots = typeof __propDef.slots;
+export default class RefreshButton extends SvelteComponentTyped<RefreshButtonProps, RefreshButtonEvents, RefreshButtonSlots> {
+}
+export {};

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

@@ -1,11 +1,9 @@
 <script>import { page } from '$app/stores';
 import Alert from '../../../common/alert/Alert.svelte';
-import Button from '../../../common/button/Button.svelte';
 import SchemaForm from '../../../SchemaForm.svelte';
 import TestJobLoader from '../../../TestJobLoader.svelte';
 import { AppService } from '../../../../gen';
 import { workspaceStore } from '../../../../stores';
-import { faRefresh } from '@fortawesome/free-solid-svg-icons';
 import { getContext, onMount } from 'svelte';
 import { loadSchema, schemaToInputsSpec } from '../../utils';
 import InputValue from './InputValue.svelte';
@@ -17,7 +15,7 @@ export let extraQueryParams = {};
 export let autoRefresh = true;
 export let result = undefined;
 export let forceSchemaDisplay = false;
-const { app, worldStore, runnableComponents } = getContext('AppEditorContext');
+const { worldStore, runnableComponents } = getContext('AppEditorContext');
 onMount(() => {
     $runnableComponents[id] = async () => {
         await executeComponent();
@@ -28,7 +26,7 @@ let args = {};
 let schema = undefined;
 let testIsLoading = false;
 let runnableInputValues = {};
-$: mergedArgs = { ...args, ...extraQueryParams, ...runnableInputValues };
+$: mergedArgs = { ...extraQueryParams, ...runnableInputValues, ...args };
 function setStaticInputsToArgs() {
     Object.entries(inputs ?? {}).forEach(([key, value]) => {
         if (value.type === 'static') {
@@ -39,8 +37,11 @@ function setStaticInputsToArgs() {
 }
 $: inputs && setStaticInputsToArgs();
 function argMergedArgsValid(mergedArgs, testJobLoader) {
-    if (Object.keys(inputs ?? {}).filter((k) => inputs[k].type !== 'user').length !==
-        Object.keys(runnableInputValues).length) {
+    if (!inputs) {
+        return false;
+    }
+    if (Object.keys(inputs).length !==
+        Object.keys(mergedArgs).length - Object.keys(extraQueryParams).length) {
         return false;
     }
     const areAllArgsValid = Object.values(mergedArgs).every((arg) => arg !== undefined && arg !== null);
@@ -64,9 +65,11 @@ $: if ($workspaceStore && runnable?.type === 'runnableByPath' && !schema) {
     loadSchemaFromTriggerable($workspaceStore, path, runType);
 }
 else if (runnable?.type === 'runnableByName' && !schema) {
-    const { inlineScriptName } = runnable;
+    const { inlineScript } = runnable;
     // Inline scripts directly provide the schema
-    schema = $app.inlineScripts[inlineScriptName].schema;
+    if (inlineScript) {
+        schema = inlineScript.schema;
+    }
 }
 // When the schema is loaded, we need to update the inputs spec
 // in order to render the inputs the component panel
@@ -116,12 +119,14 @@ async function executeComponent() {
             force_viewer_static_fields: {}
         };
         if (runnable?.type === 'runnableByName') {
-            const { inlineScriptName } = runnable;
-            requestBody['raw_code'] = {
-                content: $app.inlineScripts[inlineScriptName].content,
-                language: $app.inlineScripts[inlineScriptName].language,
-                path: $app.inlineScripts[inlineScriptName].path
-            };
+            const { inlineScript } = runnable;
+            if (inlineScript) {
+                requestBody['raw_code'] = {
+                    content: inlineScript.content,
+                    language: inlineScript.language,
+                    path: inlineScript.path
+                };
+            }
         }
         else if (runnable?.type === 'runnableByPath') {
             const { path, runType } = runnable;
@@ -140,7 +145,7 @@ export async function runComponent() {
 </script>
 
 {#each Object.keys(inputs ?? {}) as key}
-	<InputValue input={inputs[key]} bind:value={runnableInputValues[key]} />
+	<InputValue {id} input={inputs[key]} bind:value={runnableInputValues[key]} />
 {/each}
 
 <TestJobLoader
@@ -156,33 +161,24 @@ export async function runComponent() {
 	bind:this={testJobLoader}
 />
 
-{#if schemaStripped !== undefined && (autoRefresh || forceSchemaDisplay)}
-	<SchemaForm schema={schemaStripped} bind:args {isValid} {disabledArgs} shouldHideNoInputs />
-{/if}
+<div class="h-full flex flex-col">
+	{#if schemaStripped !== undefined && (autoRefresh || forceSchemaDisplay)}
+		<SchemaForm schema={schemaStripped} bind:args {isValid} {disabledArgs} shouldHideNoInputs />
+	{/if}
 
-{#if !runnable}
-	<Alert type="warning" size="xs" class="mt-2" title="Missing runnable">
-		Please select a runnable
-	</Alert>
-{:else if autoRefresh === true}
-	{#if isValid}
-		<div class="flex flex-row-reverse">
-			<Button
-				size="xs"
-				color="light"
-				variant="border"
-				on:click={() => executeComponent()}
-				disabled={!isValid}
-				startIcon={{ icon: faRefresh, classes: testIsLoading ? 'animate-spin' : '' }}
-				iconOnly
-			/>
-		</div>
-		<slot />
-	{:else}
-		<Alert type="warning" size="xs" class="mt-2" title="Missing inputs">
-			Please fill in all the inputs
+	{#if !runnable && autoRefresh}
+		<Alert type="warning" size="xs" class="mt-2" title="Missing runnable">
+			Please select a runnable
 		</Alert>
+	{:else if autoRefresh === true}
+		{#if isValid}
+			<slot />
+		{:else}
+			<Alert type="warning" size="xs" class="mt-2" title="Missing inputs">
+				Please fill in all the inputs
+			</Alert>
+		{/if}
+	{:else}
+		<slot />
 	{/if}
-{:else}
-	<slot />
-{/if}
+</div>

package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -1,18 +1,21 @@
-<script>import NonRunnableComponent from './NonRunnableComponent.svelte';
+<script>import { isScriptByNameDefined, isScriptByPathDefined } from '../../utils';
+import NonRunnableComponent from './NonRunnableComponent.svelte';
 import RunnableComponent from './RunnableComponent.svelte';
 export let componentInput;
 export let id;
 export let result = undefined;
-// Optional props
 export let extraQueryParams = {};
 export let autoRefresh = true;
 export let runnableComponent = undefined;
 export let forceSchemaDisplay = false;
+function isRunnableDefined() {
+    return isScriptByNameDefined(componentInput) || isScriptByPathDefined(componentInput);
+}
 </script>
 
 {#if componentInput === undefined}
 	<slot />
-{:else if componentInput.type === 'runnable' && componentInput.runnable}
+{:else if componentInput.type === 'runnable' && isRunnableDefined()}
 	<RunnableComponent
 		bind:this={runnableComponent}
 		bind:inputs={componentInput.fields}

package/components/apps/components/numberInputs/AppNumberInput.svelte

@@ -1,8 +1,9 @@
 <script>import { getContext } from 'svelte';
-import DebouncedInput from '../helpers/DebouncedInput.svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
+export let verticalAlignment = undefined;
 export const staticOutputs = ['result'];
 const { worldStore } = getContext('AppEditorContext');
 let value;
@@ -18,19 +19,15 @@ $: if (value || !value) {
 }
 </script>
 
-<InputValue input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.label} bind:value={labelValue} />
 
-<!-- svelte-ignore a11y-label-has-associated-control -->
-<label>
-	<div>
-		{labelValue}
-	</div>
-	<DebouncedInput
-		bind:value={value}
-		debounceDelay={300}
+<AlignWrapper {verticalAlignment}>
+	<input
+		bind:value
 		type="number"
 		inputmode="numeric"
 		pattern="\d*"
 		placeholder="Type..."
+		class="h-full"
 	/>
-</label>
+</AlignWrapper>

package/components/apps/components/numberInputs/AppNumberInput.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/selectInputs/AppCheckbox.svelte

@@ -15,7 +15,7 @@ let value = false;
 $: outputs = $worldStore?.outputsById[id];
 </script>
 
-<InputValue input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.label} bind:value={labelValue} />
 
 <AlignWrapper {horizontalAlignment} {verticalAlignment}>
 	<Toggle

package/components/apps/components/selectInputs/AppSelect.svelte

@@ -0,0 +1,26 @@
+<script>import { getContext } from 'svelte';
+import Select from 'svelte-select';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export const staticOutputs = ['loading', 'result'];
+export let id;
+export let configuration;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+const { worldStore } = getContext('AppEditorContext');
+let label;
+let items;
+let itemKey;
+$: outputs = $worldStore?.outputsById[id];
+function onChange({ detail }) {
+    outputs?.result.set(detail?.[itemKey] || undefined);
+}
+</script>
+
+<InputValue {id} input={configuration.label} bind:value={label} />
+<InputValue {id} input={configuration.items} bind:value={items} />
+<InputValue {id} input={configuration.itemKey} bind:value={itemKey} />
+
+<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+	<Select on:clear={onChange} on:change={onChange} {items} placeholder="Select an item" />
+</AlignWrapper>

package/components/apps/components/selectInputs/AppSelect.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        staticOutputs?: string[] | undefined;
+        id: string;
+        configuration: Record<string, AppInput>;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppSelectProps = typeof __propDef.props;
+export type AppSelectEvents = typeof __propDef.events;
+export type AppSelectSlots = typeof __propDef.slots;
+export default class AppSelect extends SvelteComponentTyped<AppSelectProps, AppSelectEvents, AppSelectSlots> {
+    get staticOutputs(): string[];
+}
+export {};

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

@@ -0,0 +1,159 @@
+<script>import { getContext } from 'svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import { writable } from 'svelte/store';
+import { createSvelteTable, flexRender } from '@tanstack/svelte-table';
+import AppButton from '../buttons/AppButton.svelte';
+import { classNames, isObject } from '../../../../utils';
+import DebouncedInput from '../helpers/DebouncedInput.svelte';
+import AppTableFooter from './AppTableFooter.svelte';
+import RefreshButton from '../helpers/RefreshButton.svelte';
+import { tableOptions } from './tableOptions';
+import Alert from '../../../common/alert/Alert.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export let actionButtons;
+export const staticOutputs = ['selectedRow', 'loading', 'result'];
+$: result = [];
+let search = 'Disabled';
+let searchValue = '';
+let pagination = undefined;
+let page = 1;
+const options = writable({
+    data: [],
+    columns: [],
+    ...tableOptions
+});
+let table = createSvelteTable(options);
+const { worldStore, staticOutputs: staticOutputsStore } = getContext('AppEditorContext');
+let selectedRowIndex = -1;
+function toggleRow(row, rowIndex) {
+    if (selectedRowIndex === rowIndex) {
+        selectedRowIndex = -1;
+        outputs.selectedRow.set(null);
+    }
+    else {
+        selectedRowIndex = rowIndex;
+        outputs?.selectedRow.set(row.original);
+    }
+}
+function setOptions(filteredResult) {
+    if (!Array.isArray(result)) {
+        return;
+    }
+    const headers = Array.from(new Set(result.flatMap((row) => Object.keys(row))));
+    $options = {
+        data: filteredResult,
+        columns: headers.map((header) => {
+            return {
+                accessorKey: header,
+                cell: (info) => info.getValue()
+            };
+        }),
+        ...tableOptions
+    };
+}
+function searchInResult(result, searchValue) {
+    if (searchValue === '') {
+        return result;
+    }
+    return result.filter((row) => Object.values(row).some((value) => value.toString().includes(searchValue)));
+}
+let filteredResult = [];
+$: filteredResult && setOptions(filteredResult);
+$: extraQueryParams = search === 'Backend' ? { search: searchValue, page } : { page, search: '' };
+$: search === 'Frontend' && (filteredResult = searchInResult(result, searchValue));
+$: (search === 'Backend' || search === 'Disabled') && (filteredResult = result);
+$: outputs = $worldStore?.outputsById[id];
+function rerender() {
+    table = createSvelteTable(options);
+}
+$: result && rerender();
+</script>
+
+<InputValue {id} input={configuration.search} bind:value={search} />
+<InputValue {id} input={configuration.pagination} bind:value={pagination} />
+
+<RunnableWrapper bind:componentInput {id} bind:result {extraQueryParams}>
+	{#if Array.isArray(result) && result.every(isObject)}
+		<div class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full">
+			<div class="py-2 px-4">
+				<div class="flex justify-between items-center">
+					<RefreshButton componentId={id} />
+					{#if search !== 'Disabled'}
+						<div>
+							<DebouncedInput placeholder="Search..." bind:value={searchValue} />
+						</div>
+					{/if}
+				</div>
+			</div>
+			<div class="overflow-auto flex-1 w-full">
+				<table class="divide-y divide-gray-300 w-full border-b border-b-gray-200">
+					<thead class="bg-gray-50 text-left">
+						{#each $table.getHeaderGroups() as headerGroup}
+							<tr class="divide-x">
+								{#each headerGroup.headers as header}
+									<th class="px-4 py-4 text-sm font-semibold">
+										{#if !header.isPlaceholder}
+											<svelte:component
+												this={flexRender(header.column.columnDef.header, header.getContext())}
+											/>
+										{/if}
+									</th>
+								{/each}
+								{#if actionButtons.length > 0}
+									<th class="px-4 py-4 text-sm font-semibold">Actions</th>
+								{/if}
+							</tr>
+						{/each}
+					</thead>
+					<tbody class="divide-y divide-gray-200 bg-white ">
+						{#each $table.getRowModel().rows as row, rowIndex (row.id)}
+							<tr
+								class={classNames(
+									selectedRowIndex === rowIndex
+										? 'bg-blue-100 hover:bg-blue-200'
+										: 'hover:bg-blue-50',
+									'divide-x',
+									'border-b w-full',
+									selectedRowIndex === rowIndex
+										? 'divide-blue-200 hover:divide-blue-300'
+										: 'divide-gray-200'
+								)}
+								on:click={() => toggleRow(row, rowIndex)}
+							>
+								{#each row.getVisibleCells() as cell, index (index)}
+									<td class="p-4 whitespace-nowrap text-xs text-gray-900">
+										<svelte:component
+											this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+										/>
+									</td>
+								{/each}
+
+								{#if actionButtons.length > 0}
+									<td class="flex flex-row gap-2 p-4">
+										{#each actionButtons as props, actionIndex (actionIndex)}
+											<AppButton
+												{...props}
+												extraQueryParams={{ row }}
+												bind:componentInput={props.componentInput}
+												bind:staticOutputs={$staticOutputsStore[props.id]}
+											/>
+										{/each}
+									</td>
+								{/if}
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+
+			<AppTableFooter paginationEnabled={pagination} {result} {table} />
+		</div>
+	{:else}
+		<Alert title="Parsing issues" type="error" size="xs">
+			The result should be an array of objects
+		</Alert>
+	{/if}
+</RunnableWrapper>