windmill-components 1.86.0 → 1.89.0

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

@@ -0,0 +1,43 @@
+<script>import ObjectViewer from '../../../propertyPicker/ObjectViewer.svelte';
+import { getContext } from 'svelte';
+import { recursivelyFilterKeyInJSON as recursivelyFilterInJSON } from '../appUtils';
+export let componentId;
+export let hasContent = false;
+const { worldStore, connectingInput } = getContext('AppViewerContext');
+const { search, hasResult } = getContext('ContextPanel');
+let object = {};
+function subscribeToAllOutputs(observableOutputs) {
+    if (observableOutputs) {
+        Object.entries(observableOutputs).forEach(([k, output]) => {
+            object[k] = undefined;
+            output?.subscribe({
+                id: 'alloutputs' + componentId + '-' + k,
+                next: (value) => {
+                    if (!hasContent) {
+                        hasContent = true;
+                    }
+                    object[k] = value;
+                }
+            });
+        });
+    }
+}
+$: subscribeToAllOutputs($worldStore?.outputsById?.[componentId]);
+$: filtered = recursivelyFilterInJSON(object, $search, componentId);
+$: $hasResult[componentId] = Object.keys(filtered).length > 0;
+</script>
+
+{#if object != undefined && Object.keys(object).length > 0}
+	{#if $hasResult[componentId] || $search == ''}
+		<ObjectViewer
+			json={filtered}
+			on:select
+			topBrackets={false}
+			pureViewer={!$connectingInput.opened}
+		/>
+	{:else if $search.length > 0}
+		<div class="text-xs pl-2 text-gray-600">No results</div>
+	{:else}
+		<div class="text-xs pl-2 text-gray-600">No outputs</div>
+	{/if}
+{/if}

package/package/components/apps/editor/contextPanel/ComponentOutputViewer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        componentId: string;
+        hasContent?: boolean | undefined;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentOutputViewerProps = typeof __propDef.props;
+export type ComponentOutputViewerEvents = typeof __propDef.events;
+export type ComponentOutputViewerSlots = typeof __propDef.slots;
+export default class ComponentOutputViewer extends SvelteComponentTyped<ComponentOutputViewerProps, ComponentOutputViewerEvents, ComponentOutputViewerSlots> {
+}
+export {};

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

@@ -0,0 +1,84 @@
+<script>import { classNames } from '../../../../utils';
+import { X } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import { connectInput } from '../appUtils';
+import PanelSection from '../settingsPanel/common/PanelSection.svelte';
+import ComponentOutput from './ComponentOutput.svelte';
+import ComponentOutputViewer from './ComponentOutputViewer.svelte';
+import BackgroundScriptsOutput from './components/BackgroundScriptsOutput.svelte';
+import OutputHeader from './components/OutputHeader.svelte';
+const { connectingInput, app } = getContext('AppViewerContext');
+const { search } = getContext('ContextPanel');
+let hasState = false;
+</script>
+
+<PanelSection noPadding titlePadding="px-2 pt-2" title="Outputs">
+	<div
+		class={classNames(
+			'bg-white w-full h-full z-30',
+			$connectingInput.opened ? 'border-blue-500 border-t-2 border-r-2 bg-blue-50/50 z-50' : ''
+		)}
+	>
+		<div class="min-w-[150px]">
+			<div class="sticky z-10 top-0 left-0 w-full bg-white p-1.5">
+				<div class="relative w-full">
+					<input
+						bind:value={$search}
+						class="!border-gray-200 !rounded-md !text-xs !pr-6"
+						placeholder="Search outputs..."
+					/>
+					{#if $search !== ''}
+						<button
+							class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-500 bg-gray-300 transition-all rounded-full p-0.5"
+							on:click|stopPropagation|preventDefault={() => ($search = '')}
+						>
+							<X size="10" color="white" />
+						</button>
+					{/if}
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-4">
+				<div>
+					<span class="text-xs font-semibold text-gray-800 p-2">State & Context</span>
+
+					<OutputHeader selectable={false} id={'ctx'} name={'App Context'} first color="blue">
+						<ComponentOutputViewer
+							componentId={'ctx'}
+							on:select={({ detail }) => {
+								$connectingInput = connectInput($connectingInput, 'ctx', detail)
+							}}
+						/>
+					</OutputHeader>
+
+					<OutputHeader
+						selectable={false}
+						id={'state'}
+						name={'State'}
+						color="blue"
+						disabled={!hasState}
+					>
+						<ComponentOutputViewer
+							bind:hasContent={hasState}
+							componentId={'state'}
+							on:select={({ detail }) => {
+								$connectingInput = connectInput($connectingInput, 'state', detail)
+							}}
+						/>
+					</OutputHeader>
+				</div>
+
+				<div>
+					<span class="text-xs font-semibold text-gray-800 p-2">Components</span>
+					{#each $app.grid as gridItem, index (gridItem.id)}
+						<ComponentOutput {gridItem} first={index === 0} />
+					{/each}
+				</div>
+				<div>
+					<span class="text-xs font-semibold text-gray-800 p-2">Background scripts</span>
+					<BackgroundScriptsOutput />
+				</div>
+			</div>
+		</div>
+	</div>
+</PanelSection>

package/package/components/apps/editor/contextPanel/ContextPanel.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContextPanelProps = typeof __propDef.props;
+export type ContextPanelEvents = typeof __propDef.events;
+export type ContextPanelSlots = typeof __propDef.slots;
+export default class ContextPanel extends SvelteComponentTyped<ContextPanelProps, ContextPanelEvents, ContextPanelSlots> {
+}
+export {};

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

@@ -0,0 +1,66 @@
+<script>import { classNames } from '../../../../utils';
+import { getContext } from 'svelte';
+import { slide } from 'svelte/transition';
+import { connectInput } from '../appUtils';
+import ComponentOutput from './ComponentOutput.svelte';
+export let name = undefined;
+export let parentId;
+export let expanded = false;
+export let subGrids;
+const { app, connectingInput, worldStore } = getContext('AppViewerContext');
+let selected = 0;
+$: outputs = $worldStore?.outputsById[parentId];
+$: subgridItems = subGrids.map((k) => ({
+    k,
+    items: $app.subgrids?.[k] ?? []
+}));
+$: if (outputs?.selectedTabIndex) {
+    outputs.selectedTabIndex.subscribe({
+        id: 'subgridoutput-' + parentId,
+        next: (value) => {
+            selected = value;
+        }
+    });
+}
+</script>
+
+{#each subgridItems as { k, items }, index (k)}
+	<div class="ml-2 my-2">
+		{#if subGrids.length > 1}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<div
+				class={classNames(
+					'px-1 py-0.5 flex justify-between items-center font-semibold text-xs border-l border-y w-full cursor-pointer',
+					selected === index ? 'bg-gray-200' : 'bg-gray-50'
+				)}
+				on:click={() => {
+					selected = index
+				}}
+			>
+				<div class="text-xs">
+					{name ? name : 'Should implement name'}
+					{index + 1}
+				</div>
+			</div>
+		{/if}
+
+		{#if selected === index || name !== 'Tabs'}
+			<div transition:slide|local class="border-l">
+				{#if items.length > 0}
+					{#each items as subGridItem, index (subGridItem.id)}
+						<ComponentOutput
+							gridItem={subGridItem}
+							first={index === 0}
+							{expanded}
+							on:select={({ detail }) => {
+								$connectingInput = connectInput($connectingInput, subGridItem.id, detail)
+							}}
+						/>
+					{/each}
+				{:else}
+					<div class="text-xs text-gray-500 border-y border-l p-1">No components</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/each}

package/package/components/apps/editor/contextPanel/SubGridOutput.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name?: string | undefined;
+        parentId: string;
+        expanded?: boolean | undefined;
+        subGrids: string[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SubGridOutputProps = typeof __propDef.props;
+export type SubGridOutputEvents = typeof __propDef.events;
+export type SubGridOutputSlots = typeof __propDef.slots;
+export default class SubGridOutput extends SvelteComponentTyped<SubGridOutputProps, SubGridOutputEvents, SubGridOutputSlots> {
+}
+export {};

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

@@ -0,0 +1,18 @@
+<script>import { getContext } from 'svelte';
+import { connectInput } from '../../appUtils';
+import ComponentOutputViewer from '../ComponentOutputViewer.svelte';
+import OutputHeader from './OutputHeader.svelte';
+const { connectingInput } = getContext('AppViewerContext');
+export let id;
+export let name;
+export let first = false;
+</script>
+
+<OutputHeader renamable={false} selectable={true} {id} {name} color="blue" {first}>
+	<ComponentOutputViewer
+		componentId={id}
+		on:select={({ detail }) => {
+			$connectingInput = connectInput($connectingInput, id, detail)
+		}}
+	/>
+</OutputHeader>

package/package/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        name: string;
+        first?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BackgroundScriptOutputProps = typeof __propDef.props;
+export type BackgroundScriptOutputEvents = typeof __propDef.events;
+export type BackgroundScriptOutputSlots = typeof __propDef.slots;
+export default class BackgroundScriptOutput extends SvelteComponentTyped<BackgroundScriptOutputProps, BackgroundScriptOutputEvents, BackgroundScriptOutputSlots> {
+}
+export {};

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

@@ -0,0 +1,8 @@
+<script>import { getContext } from 'svelte';
+import BackgroundScriptOutput from './BackgroundScriptOutput.svelte';
+const { app } = getContext('AppViewerContext');
+</script>
+
+{#each $app.hiddenInlineScripts as action, index}
+	<BackgroundScriptOutput id={`bg_${index}`} name={action.name} first={index === 0} />
+{/each}

package/package/components/apps/editor/contextPanel/components/BackgroundScriptsOutput.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BackgroundScriptsOutputProps = typeof __propDef.props;
+export type BackgroundScriptsOutputEvents = typeof __propDef.events;
+export type BackgroundScriptsOutputSlots = typeof __propDef.slots;
+export default class BackgroundScriptsOutput extends SvelteComponentTyped<BackgroundScriptsOutputProps, BackgroundScriptsOutputEvents, BackgroundScriptsOutputSlots> {
+}
+export {};

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

@@ -0,0 +1,90 @@
+<script>import { allItems } from '../../../utils';
+import { forbiddenIds } from '../../../../flows/idUtils';
+import { ArrowRight, Pencil } from 'lucide-svelte';
+import { createEventDispatcher, getContext } from 'svelte';
+import { fade, slide } from 'svelte/transition';
+import { Button, Popup } from '../../../../common';
+const { app, selectedComponent } = getContext('AppViewerContext');
+export let id;
+const dispatch = createEventDispatcher();
+const regex = /^[a-zA-Z0-9]{1,}$/;
+let value = id;
+let button;
+let input;
+let error = '';
+$: if (!regex.test(value)) {
+    error = 'The ID must include only letters and numbers';
+}
+else if (forbiddenIds.includes(value)) {
+    error = 'This ID is reserved';
+}
+else if (allItems($app.grid, $app.subgrids).some((item) => item.id === value && item.id !== id)) {
+    error = 'This ID is already in use';
+}
+else {
+    id = value;
+    error = '';
+}
+function save() {
+    if (error != '') {
+        return;
+    }
+    dispatch('change', id);
+    input.blur();
+}
+</script>
+
+<button
+	on:click|stopPropagation={() => {
+		$selectedComponent = [id]
+	}}
+	bind:this={button}
+	title="Edit ID"
+	class="flex items-center px-1 rounded-sm bg-gray-100 hover:text-black text-gray-600"
+	aria-label="Open component ID editor"
+>
+	<Pencil size={14} />
+</button>
+<Popup
+	ref={button}
+	options={{ placement: 'top-start' }}
+	transition={fade}
+	wrapperClasses="!z-[1002]"
+	outerClasses="rounded shadow-xl bg-white border p-3"
+	on:close={() => (value = id)}
+>
+	<label class="block text-gray-900">
+		<div class="pb-1 text-sm text-gray-600">Component ID</div>
+		<div class="flex w-full">
+			<input
+				type="text"
+				bind:value
+				class="!w-auto grow"
+				bind:this={input}
+				on:click|stopPropagation={() => {}}
+				on:keypress={({ key }) => {
+					if (key === 'Enter') save()
+				}}
+			/>
+			<Button
+				size="xs"
+				color="blue"
+				buttonType="button"
+				btnClasses="!p-1 !w-[34px] !ml-1"
+				aria-label="Save ID"
+				disabled={error != ''}
+				on:click={save}
+			>
+				<ArrowRight size={18} />
+			</Button>
+		</div>
+		{#if error != ''}
+			<div
+				transition:slide|local={{ duration: 100 }}
+				class="w-full text-sm text-red-600 whitespace-pre-wrap pt-1"
+			>
+				{error}
+			</div>
+		{/if}
+	</label>
+</Popup>

package/package/components/apps/editor/contextPanel/components/IdEditor.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IdEditorProps = typeof __propDef.props;
+export type IdEditorEvents = typeof __propDef.events;
+export type IdEditorSlots = typeof __propDef.slots;
+export default class IdEditor extends SvelteComponentTyped<IdEditorProps, IdEditorEvents, IdEditorSlots> {
+}
+export {};

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

@@ -0,0 +1,211 @@
+<script>import { allItems } from '../../../utils';
+import { classNames } from '../../../../../utils';
+import { ChevronDown, ChevronUp, Pointer } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import { allsubIds, findGridItem } from '../../appUtils';
+import IdEditor from './IdEditor.svelte';
+export let id;
+export let name;
+export let first = false;
+export let nested = false;
+export let color = 'indigo';
+export let selectable = true;
+export let renamable = true;
+export let disabled = false;
+const { manuallyOpened, search, hasResult } = getContext('ContextPanel');
+const { selectedComponent, app, hoverStore, allIdsInPath, connectingInput } = getContext('AppViewerContext');
+$: subids = $search != '' ? allsubIds($app, id) : [];
+$: inSearch =
+    $search != '' &&
+        ($hasResult[id] ||
+            Object.entries($hasResult).some(([key, value]) => value && subids.includes(key)));
+$: open = $allIdsInPath.includes(id) || $manuallyOpened[id] || inSearch;
+const hoverColor = {
+    blue: 'hover:bg-blue-100 hover:text-blue-500',
+    indigo: 'hover:bg-indigo-100 hover:text-indigo-500'
+};
+const openBackground = {
+    blue: 'bg-blue-50',
+    indigo: 'bg-indigo-50'
+};
+const manuallyOpenColor = {
+    blue: 'text-gray-900 bg-gray-300 rounded-sm',
+    indigo: 'text-gray-900 bg-gray-300 rounded-sm'
+};
+const idClass = {
+    blue: 'bg-blue-500 text-white',
+    indigo: 'bg-indigo-500 text-white'
+};
+function renameId(newId) {
+    const item = findGridItem($app, id);
+    if (!item) {
+        return;
+    }
+    item.data.id = newId;
+    item.id = newId;
+    const oldSubgrids = Object.keys($app.subgrids ?? {}).filter((subgrid) => subgrid.startsWith(id + '-'));
+    oldSubgrids.forEach((subgrid) => {
+        if ($app.subgrids) {
+            $app.subgrids[subgrid.replace(id, newId)] = $app.subgrids[subgrid];
+            delete $app.subgrids[subgrid];
+        }
+    });
+    function propagateRename(from, to) {
+        allItems($app.grid, $app.subgrids).forEach((item) => {
+            renameComponent(from, to, item.data);
+        });
+        $app.hiddenInlineScripts.forEach((x) => {
+            console.log('process', x.name, id);
+            processRunnable(from, to, {
+                name: x.name,
+                inlineScript: x.inlineScript,
+                type: 'runnableByName'
+            });
+        });
+    }
+    propagateRename(id, newId);
+    if (item?.data.type == 'tablecomponent') {
+        for (let c of item.data.actionButtons) {
+            let old = c.id;
+            c.id = c.id.replace(id + '_', newId + '_');
+            propagateRename(old, c.id);
+        }
+    }
+    $app = $app;
+    $selectedComponent = [newId];
+}
+function renameComponent(from, to, data) {
+    if (data.type == 'tablecomponent') {
+        for (let c of data.actionButtons) {
+            renameComponent(from, to, c);
+        }
+    }
+    let componentInput = data.componentInput;
+    if (componentInput?.type == 'connected') {
+        if (componentInput.connection?.componentId === from) {
+            componentInput.connection.componentId = to;
+        }
+    }
+    else if (componentInput?.type == 'runnable') {
+        processRunnable(from, to, componentInput.runnable);
+    }
+    Object.values(data.configuration ?? {}).forEach((config) => {
+        if (config.type === 'connected') {
+            if (config.connection?.componentId === from) {
+                config.connection.componentId = to;
+            }
+        }
+        else if (config.type == 'oneOf') {
+            Object.values(config.configuration ?? {}).forEach((choices) => {
+                Object.values(choices).forEach((c) => {
+                    if (c.type === 'connected') {
+                        if (c.connection?.componentId === id) {
+                            c.connection.componentId = to;
+                        }
+                    }
+                });
+            });
+        }
+    });
+}
+function processRunnable(from, to, runnable) {
+    if (runnable?.type === 'runnableByName' &&
+        runnable?.inlineScript?.refreshOn?.find((x) => x.id === from)) {
+        runnable.inlineScript.refreshOn = runnable.inlineScript.refreshOn.map((x) => {
+            if (x.id === from) {
+                return {
+                    id: to,
+                    key: x.key
+                };
+            }
+            return x;
+        });
+    }
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class={$search == '' || inSearch ? '' : 'invisible h-0 overflow-hidden'}>
+	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+	<div
+		on:mouseenter|stopPropagation={() => {
+			if (id !== $hoverStore) {
+				$hoverStore = id
+			}
+		}}
+		on:mouseleave|stopPropagation={() => {
+			if ($hoverStore !== undefined) {
+				$hoverStore = undefined
+			}
+		}}
+		class={classNames(
+			'flex items-center justify-between p-1 cursor-pointer gap-1 truncate',
+			hoverColor[color],
+			$selectedComponent?.includes(id)
+				? openBackground[color]
+				: $connectingInput.hoveredComponent === id
+				? 'bg-orange-300 '
+				: 'bg-white',
+			first ? 'border-t' : '',
+			nested ? 'border-l' : '',
+			'transition-all'
+		)}
+		on:click={() => {
+			if (!disabled) {
+				$manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true
+			}
+		}}
+	>
+		<div class="flex">
+			<button
+				disabled={!(selectable && !$selectedComponent?.includes(id)) || $connectingInput?.opened}
+				title="Select component"
+				on:click|stopPropagation={() => ($selectedComponent = [id])}
+				class="flex items-center ml-0.5 rounded-sm bg-gray-100 hover:text-black text-gray-600"
+			>
+				<div
+					class={classNames(
+						'text-2xs  font-bold px-2 py-0.5 rounded-sm',
+						$selectedComponent?.includes(id) ? idClass[color] : ''
+					)}
+				>
+					{id}
+				</div>
+				{#if selectable && !$selectedComponent?.includes(id)}
+					<div class="px-1">
+						<Pointer size={14} />
+					</div>
+				{/if}
+			</button>
+			{#if selectable && renamable && ($selectedComponent?.includes(id) || $hoverStore === id)}
+				<IdEditor
+					{id}
+					on:selected={() => ($selectedComponent = [id])}
+					on:change={({ detail }) => renameId(detail)}
+				/>
+			{/if}
+		</div>
+		<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
+			{name}
+			<div class={classNames('bg-gray-200 rounded-sm')}>
+				{#if !open}
+					<ChevronDown size={14} color="gray" />
+				{:else if $manuallyOpened[id]}
+					<ChevronUp size={14} class={manuallyOpenColor[color]} strokeWidth={4} />
+				{:else}
+					<ChevronUp size={14} color="gray" />
+				{/if}
+			</div>
+		</div>
+	</div>
+	<div
+		class="border-b {open ? 'h-full' : 'h-0 overflow-hidden'} {$connectingInput.hoveredComponent ===
+			id && !$selectedComponent?.includes(id)
+			? '  bg-orange-100/40'
+			: ''}"
+	>
+		<div class={classNames(nested ? 'border-l ml-2' : '', open ? 'border-t' : '')}>
+			<slot />
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        name: string;
+        first?: boolean | undefined;
+        nested?: boolean | undefined;
+        color?: "blue" | "indigo" | undefined;
+        selectable?: boolean | undefined;
+        renamable?: boolean | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type OutputHeaderProps = typeof __propDef.props;
+export type OutputHeaderEvents = typeof __propDef.events;
+export type OutputHeaderSlots = typeof __propDef.slots;
+export default class OutputHeader extends SvelteComponentTyped<OutputHeaderProps, OutputHeaderEvents, OutputHeaderSlots> {
+}
+export {};

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

@@ -0,0 +1,17 @@
+<script>import { getContext } from 'svelte';
+import { connectInput } from '../../appUtils';
+import ComponentOutputViewer from '../ComponentOutputViewer.svelte';
+import OutputHeader from './OutputHeader.svelte';
+const { connectingInput } = getContext('AppViewerContext');
+export let id;
+export let first = false;
+</script>
+
+<OutputHeader renamable={false} {id} name={'Table action'} {first}>
+	<ComponentOutputViewer
+		componentId={id}
+		on:select={({ detail }) => {
+			$connectingInput = connectInput($connectingInput, id, detail)
+		}}
+	/>
+</OutputHeader>