windmill-components 1.86.0 → 1.89.0

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

@@ -1,292 +0,0 @@
-<script>import Button from '../../../common/button/Button.svelte';
-import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
-import { getContext } from 'svelte';
-import PanelSection from './common/PanelSection.svelte';
-import InputsSpecsEditor from './InputsSpecsEditor.svelte';
-import TableActions from './TableActions.svelte';
-import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
-import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
-import Badge from '../../../common/badge/Badge.svelte';
-import { capitalize, classNames, getModifierKey, isMac } from '../../../../utils';
-import { buildExtraLib, fieldTypeToTsType } from '../../utils';
-import Recompute from './Recompute.svelte';
-import Tooltip from '../../../Tooltip.svelte';
-import ComponentInputTypeEditor from './ComponentInputTypeEditor.svelte';
-import AlignmentEditor from './AlignmentEditor.svelte';
-import RunnableInputEditor from './inputEditor/RunnableInputEditor.svelte';
-import TemplateEditor from '../../../TemplateEditor.svelte';
-import { ccomponents } from '../component';
-import CssProperty from '../componentsPanel/CssProperty.svelte';
-import GridTab from './GridTab.svelte';
-import { clearErrorByComponentId, clearJobsByComponentId, deleteGridItem } from '../appUtils';
-import GridPane from './GridPane.svelte';
-import { slide } from 'svelte/transition';
-import { push } from '../../../../history';
-import Kbd from '../../../common/kbd/Kbd.svelte';
-import { secondaryMenu } from './secondaryMenu';
-import StylePanel from './StylePanel.svelte';
-import { Delete } from 'lucide-svelte';
-export let componentSettings = undefined;
-export let rowColumns = false;
-export let onDelete = undefined;
-export let noGrid = false;
-export let duplicateMoveAllowed = true;
-let editor = undefined;
-const { app, runnableComponents, selectedComponent, worldStore, focusedGrid, stateId, state, errorByComponent, jobs } = getContext('AppViewerContext');
-const { history, ontextfocus, movingcomponents } = getContext('AppEditorContext');
-$: editor && ($ontextfocus = () => editor?.focus());
-function removeGridElement() {
-    push(history, $app);
-    if (componentSettings?.item.id) {
-        $errorByComponent = clearErrorByComponentId(componentSettings?.item.id, $errorByComponent);
-        $jobs = clearJobsByComponentId(componentSettings?.item.id, $jobs);
-        if ($movingcomponents?.includes(componentSettings?.item.id)) {
-            $movingcomponents = $movingcomponents.filter((id) => id !== componentSettings?.item.id);
-        }
-    }
-    $selectedComponent = undefined;
-    $focusedGrid = undefined;
-    if (componentSettings?.item && !noGrid) {
-        let ids = deleteGridItem($app, componentSettings?.item.data, componentSettings?.parent, false);
-        for (const key of ids) {
-            delete $runnableComponents[key];
-        }
-    }
-    if (componentSettings?.item?.data?.id) {
-        delete $runnableComponents[componentSettings?.item?.data?.id];
-    }
-    $app = $app;
-    $runnableComponents = $runnableComponents;
-    onDelete?.();
-}
-let viewCssOptions = false;
-$: extraLib =
-    componentSettings?.item?.data?.componentInput?.type === 'template' && $worldStore
-        ? buildExtraLib($worldStore?.outputsById ?? {}, componentSettings?.item?.data?.id, false, $state, false)
-        : undefined;
-function keydown(event) {
-    const { key, metaKey } = event;
-    if (key === 'Delete' || (key === 'Backspace' && metaKey)) {
-        removeGridElement();
-        event.stopPropagation();
-    }
-}
-const initialConfiguration = componentSettings?.item?.data?.type
-    ? ccomponents[componentSettings.item.data.type].initialData.configuration
-    : {};
-const componentInput = componentSettings?.item?.data?.type
-    ? ccomponents[componentSettings?.item?.data?.type].initialData.componentInput
-    : undefined;
-$: componentSettings?.item?.data && ($app = $app);
-</script>
-
-<svelte:window on:keydown={keydown} />
-
-{#if componentSettings?.item?.data}
-	{@const component = componentSettings.item.data}
-	<div class="flex min-h-full flex-col min-w-[150px] w-full divide-y">
-		{#if component.componentInput}
-			<PanelSection title="Data Source">
-				<svelte:fragment slot="action">
-					<span
-						class={classNames(
-							'text-white px-2 text-2xs py-0.5 font-bold rounded-sm w-fit',
-							'bg-indigo-500'
-						)}
-					>
-						{`${component.id}`}
-					</span>
-					{#if component.componentInput.fieldType !== 'any'}
-						<Badge color="blue">
-							{component.componentInput.fieldType === 'array' &&
-							component.componentInput.subFieldType
-								? `${capitalize(fieldTypeToTsType(component.componentInput.subFieldType))}[]`
-								: capitalize(fieldTypeToTsType(component.componentInput.fieldType))}
-						</Badge>
-					{/if}
-				</svelte:fragment>
-
-				{#if componentSettings.item.data.componentInput}
-					<ComponentInputTypeEditor
-						bind:componentInput={componentSettings.item.data.componentInput}
-					/>
-
-					<div class="flex flex-col w-full gap-2 my-2">
-						{#if componentSettings.item.data.componentInput.type === 'static'}
-							<StaticInputEditor
-								fieldType={componentInput?.fieldType}
-								subFieldType={componentInput?.subFieldType}
-								format={componentInput?.format}
-								bind:componentInput={componentSettings.item.data.componentInput}
-								noVariablePicker
-							/>
-						{:else if componentSettings.item.data.componentInput.type === 'template' && componentSettings.item.data.componentInput !== undefined}
-							<div class="py-1 min-h-[28px] rounded border border-1 border-gray-500">
-								<TemplateEditor
-									bind:this={editor}
-									fontSize={12}
-									bind:code={componentSettings.item.data.componentInput.eval}
-									{extraLib}
-								/>
-							</div>
-						{:else if componentSettings.item.data.componentInput.type === 'connected' && component.componentInput !== undefined}
-							<ConnectedInputEditor
-								bind:componentInput={componentSettings.item.data.componentInput}
-							/>
-						{:else if componentSettings.item.data.componentInput?.type === 'runnable' && component.componentInput !== undefined}
-							<RunnableInputEditor
-								appComponent={component}
-								bind:appInput={componentSettings.item.data.componentInput}
-								defaultUserInput={component.type == 'formcomponent' ||
-									component.type == 'formbuttoncomponent'}
-							/>
-						{/if}
-					</div>
-				{/if}
-				{#key $stateId}
-					{#if componentSettings.item.data.componentInput?.type === 'runnable'}
-						{#if Object.keys(componentSettings.item.data.componentInput.fields ?? {}).length > 0}
-							<div class="border w-full">
-								<PanelSection
-									title={`Runnable Inputs (${
-										Object.keys(componentSettings.item.data.componentInput.fields ?? {}).length
-									})`}
-								>
-									<svelte:fragment slot="action">
-										<Tooltip>
-											The runnable inputs of a button component are not settable by the user. They
-											must be defined statically or connected.
-										</Tooltip>
-									</svelte:fragment>
-
-									<InputsSpecsEditor
-										id={component.id}
-										shouldCapitalize={false}
-										bind:inputSpecs={componentSettings.item.data.componentInput.fields}
-										userInputEnabled={component.type === 'formcomponent' ||
-											component.type === 'formbuttoncomponent'}
-										{rowColumns}
-									/>
-								</PanelSection>
-							</div>
-						{/if}
-					{/if}
-				{/key}
-			</PanelSection>
-		{/if}
-		{#if Object.values(initialConfiguration).length > 0}
-			<PanelSection title={`Configuration (${Object.values(initialConfiguration).length})`}>
-				<InputsSpecsEditor
-					{rowColumns}
-					id={component.id}
-					inputSpecsConfiguration={initialConfiguration}
-					bind:inputSpecs={componentSettings.item.data.configuration}
-					userInputEnabled={false}
-				/>
-			</PanelSection>
-		{:else}
-			<div class="h-full w-full text-sm text-gray-500 text-center py-8 px-2"
-				>{ccomponents[component.type].name} has no configuration</div
-			>
-		{/if}
-
-		{#if componentSettings.item.data.type === 'tabscomponent'}
-			<GridTab bind:tabs={componentSettings.item.data.tabs} {component} />
-		{:else if componentSettings.item.data.type === 'verticalsplitpanescomponent' || componentSettings.item.data.type === 'horizontalsplitpanescomponent'}
-			<GridPane bind:panes={componentSettings.item.data.panes} {component} />
-		{:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)}
-			<TableActions id={component.id} bind:components={componentSettings.item.data.actionButtons} />
-		{/if}
-
-		<AlignmentEditor bind:component={componentSettings.item.data} />
-		{#if componentSettings.item.data.type === 'buttoncomponent' || componentSettings.item.data.type === 'formcomponent' || componentSettings.item.data.type === 'formbuttoncomponent'}
-			<Recompute
-				bind:recomputeIds={componentSettings.item.data.recomputeIds}
-				ownId={component.id}
-			/>
-		{/if}
-
-		<div class="grow shrink" />
-
-		{#if Object.keys(ccomponents[component.type].customCss ?? {}).length > 0}
-			<PanelSection title="Styling">
-				<div slot="action" class="flex justify-end flex-wrap gap-1">
-					<Button
-						color="light"
-						size="xs"
-						variant="border"
-						on:click={() => (viewCssOptions = !viewCssOptions)}
-					>
-						{viewCssOptions ? 'Hide' : 'Show'}
-					</Button>
-					<Button
-						color="light"
-						size="xs"
-						variant="border"
-						endIcon={{ icon: faChevronRight }}
-						on:click={() => secondaryMenu.open(StylePanel, { component })}
-					>
-						Rich Editor
-					</Button>
-				</div>
-				{#if viewCssOptions}
-					<div transition:slide|local class="w-full">
-						{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
-							{#if componentSettings.item.data?.customCss != undefined}
-								<div class="w-full mb-2">
-									<CssProperty
-										forceStyle={ccomponents[component.type].customCss[name].style != undefined}
-										forceClass={ccomponents[component.type].customCss[name].class != undefined}
-										{name}
-										bind:value={componentSettings.item.data.customCss[name]}
-									/>
-								</div>
-							{/if}
-						{/each}
-					</div>
-				{/if}
-			</PanelSection>
-		{/if}
-
-		{#if duplicateMoveAllowed}
-			<PanelSection title="Copy/Move">
-				<div slot="action">
-					<Button size="xs" color="red" variant="border" on:click={removeGridElement}>
-						Delete&nbsp;&nbsp;
-						{#if isMac()}
-							<Kbd kbdClass="center-center">
-								<span class="text-lg leading-none">⌘</span>
-								<span class="px-0.5">+</span>
-								<Delete size={16} />
-							</Kbd>
-						{:else}
-							<Kbd>Del</Kbd>
-						{/if}
-					</Button>
-				</div>
-				<div class="flex flex-col gap-1">
-					<div>
-						<span class="text-gray-600 text-xs mr-2"> Copy:</span>
-						<Kbd>{getModifierKey()}</Kbd>+<Kbd>C</Kbd>,
-						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
-					</div>
-					<div>
-						<span class="text-gray-600 text-xs mr-2">Move: </span>
-						<Kbd>{getModifierKey()}</Kbd>+<Kbd>X</Kbd>,
-						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
-					</div>
-					<div>
-						<span class="text-gray-600 text-xs mr-2">Navigate:</span>
-						<Kbd>&leftarrow;</Kbd>
-						<Kbd>&uparrow;</Kbd><Kbd>&rightarrow;</Kbd>
-						<Kbd>ESC</Kbd>
-					</div>
-					<div>
-						<span class="text-gray-600 text-xs mr-2">Add to selection:</span>
-						<Kbd>&DoubleUpArrow;</Kbd>+<Kbd>click</Kbd>
-					</div>
-				</div>
-			</PanelSection>
-		{/if}
-	</div>
-{/if}

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

@@ -1,140 +0,0 @@
-<script>import { Badge, ToggleButton, ToggleButtonGroup } from '../../../common';
-import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
-import { faArrowRight, faPen, faUpload, faUser } from '@fortawesome/free-solid-svg-icons';
-import { fieldTypeToTsType } from '../../utils';
-import Tooltip from '../../../Tooltip.svelte';
-import Popover from '../../../Popover.svelte';
-import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
-import EvalInputEditor from './inputEditor/EvalInputEditor.svelte';
-import RowInputEditor from './inputEditor/RowInputEditor.svelte';
-import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
-import UploadInputEditor from './inputEditor/UploadInputEditor.svelte';
-import { getContext } from 'svelte';
-export let id;
-export let componentInput;
-export let key;
-export let hasRows = false;
-export let userInputEnabled = false;
-export let shouldCapitalize = true;
-export let resourceOnly = false;
-export let tooltip = undefined;
-export let onlyStatic = false;
-export let fieldType;
-export let subFieldType;
-export let format;
-export let selectOptions;
-export let fileUpload = undefined;
-export let placeholder;
-const { connectingInput } = getContext('AppViewerContext');
-$: if (componentInput == undefined) {
-    //@ts-ignore
-    componentInput = {
-        type: 'static',
-        value: undefined
-    };
-}
-</script>
-
-{#if !(resourceOnly && (fieldType !== 'object' || !format?.startsWith('resource-')))}
-	<div class="flex flex-col gap-1">
-		<div class="flex justify-between items-end gap-1">
-			<span class="text-sm font-semibold truncate">
-				{shouldCapitalize ? capitalize(addWhitespaceBeforeCapitals(key)) : key}
-				{#if tooltip}
-					<Tooltip>
-						{tooltip}
-					</Tooltip>
-				{/if}
-			</span>
-
-			<div class="flex gap-x-2 gap-y-1 flex-wrap justify-end items-center">
-				<Badge color="blue">
-					{fieldType === 'array' && subFieldType
-						? `${capitalize(fieldTypeToTsType(subFieldType))}[]`
-						: capitalize(fieldTypeToTsType(fieldType))}
-				</Badge>
-
-				{#if !onlyStatic && componentInput?.type && componentInput.type != 'eval'}
-					<ToggleButtonGroup
-						bind:selected={componentInput.type}
-						on:selected={(e) => {
-							if (e.detail == 'connected' && !componentInput['connection']) {
-								$connectingInput = {
-									opened: true,
-									input: undefined,
-									hoveredComponent: undefined
-								}
-							}
-						}}
-					>
-						<Popover placement="bottom" notClickable disapperTimoout={0}>
-							<ToggleButton
-								position="left"
-								value="static"
-								startIcon={{ icon: faPen }}
-								size="xs"
-								iconOnly
-							/>
-							<svelte:fragment slot="text">Static</svelte:fragment>
-						</Popover>
-						{#if userInputEnabled && !format?.startsWith('resource-')}
-							<Popover placement="bottom" notClickable disapperTimoout={0}>
-								<ToggleButton
-									position="center"
-									value="user"
-									startIcon={{ icon: faUser }}
-									size="xs"
-									iconOnly
-								/>
-								<svelte:fragment slot="text">User Input</svelte:fragment>
-							</Popover>
-						{/if}
-						{#if fileUpload}
-							<Popover placement="bottom" notClickable disapperTimoout={0}>
-								<ToggleButton
-									position="center"
-									value="upload"
-									startIcon={{ icon: faUpload }}
-									size="xs"
-									iconOnly
-								/>
-								<svelte:fragment slot="text">Upload</svelte:fragment>
-							</Popover>
-						{/if}
-						<Popover placement="bottom" notClickable disapperTimoout={0}>
-							<ToggleButton
-								position="right"
-								value="connected"
-								startIcon={{ icon: faArrowRight }}
-								size="xs"
-								iconOnly
-							/>
-							<svelte:fragment slot="text">Connect</svelte:fragment>
-						</Popover>
-					</ToggleButtonGroup>
-				{/if}
-			</div>
-		</div>
-
-		{#if componentInput?.type === 'connected'}
-			<ConnectedInputEditor bind:componentInput />
-		{:else if componentInput?.type === 'row'}
-			<RowInputEditor bind:componentInput />
-		{:else if componentInput?.type === 'static'}
-			<StaticInputEditor
-				{fieldType}
-				{subFieldType}
-				{selectOptions}
-				{format}
-				{placeholder}
-				bind:componentInput
-			/>
-		{:else if componentInput?.type === 'eval'}
-			<EvalInputEditor {hasRows} {id} bind:componentInput />
-		{:else if componentInput?.type === 'upload'}
-			<UploadInputEditor bind:componentInput />
-		{:else if componentInput?.type === 'user'}
-			<span class="text-2xs italic text-gray-600">Field's value is set by the user</span>
-		{/if}
-	</div>
-{/if}

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

@@ -1,35 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { RichConfiguration } from '../../types';
-import type { InputType } from '../../inputType';
-declare const __propDef: {
-    props: {
-        id: string;
-        componentInput: RichConfiguration;
-        key: string;
-        hasRows?: boolean | undefined;
-        userInputEnabled?: boolean | undefined;
-        shouldCapitalize?: boolean | undefined;
-        resourceOnly?: boolean | undefined;
-        tooltip?: string | undefined;
-        onlyStatic?: boolean | undefined;
-        fieldType: InputType;
-        subFieldType: InputType | undefined;
-        format: string | undefined;
-        selectOptions: string[] | undefined;
-        fileUpload?: {
-            accept: string;
-            convertTo: string;
-        } | undefined;
-        placeholder: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputsSpecEditorProps = typeof __propDef.props;
-export type InputsSpecEditorEvents = typeof __propDef.events;
-export type InputsSpecEditorSlots = typeof __propDef.slots;
-export default class InputsSpecEditor extends SvelteComponentTyped<InputsSpecEditorProps, InputsSpecEditorEvents, InputsSpecEditorSlots> {
-}
-export {};

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

@@ -1,52 +0,0 @@
-<script>import InputsSpecEditor from './InputsSpecEditor.svelte';
-import OneOfInputSpecsEditor from './OneOfInputSpecsEditor.svelte';
-export let id;
-export let inputSpecs;
-export let inputSpecsConfiguration = inputSpecs;
-export let userInputEnabled = false;
-export let shouldCapitalize = true;
-export let rowColumns = false;
-export let resourceOnly = false;
-</script>
-
-{#if inputSpecs}
-	<div class="w-full flex flex-col gap-4">
-		{#each Object.keys(inputSpecsConfiguration) as k}
-			{#if inputSpecsConfiguration[k]?.type == 'oneOf'}
-				<OneOfInputSpecsEditor
-					key={k}
-					bind:oneOf={inputSpecs[k]}
-					{id}
-					{shouldCapitalize}
-					{resourceOnly}
-					{rowColumns}
-					inputSpecsConfiguration={inputSpecsConfiguration?.[k]?.['configuration']}
-					labels={inputSpecsConfiguration?.[k]?.['labels']}
-					tooltip={inputSpecsConfiguration?.[k]?.['tooltip']}
-				/>
-			{:else}
-				{@const meta = inputSpecsConfiguration?.[k]}
-				<!-- {JSON.stringify(meta)} -->
-				<InputsSpecEditor
-					key={k}
-					bind:componentInput={inputSpecs[k]}
-					{id}
-					{userInputEnabled}
-					{shouldCapitalize}
-					{resourceOnly}
-					hasRows={rowColumns}
-					fieldType={meta?.['fieldType']}
-					subFieldType={meta?.['subFieldType']}
-					format={meta?.['format']}
-					selectOptions={meta?.['selectOptions']}
-					tooltip={meta?.['tooltip']}
-					onlyStatic={meta?.['onlyStatic']}
-					fileUpload={meta?.['fileUpload']}
-					placeholder={meta?.['placeholder']}
-				/>
-			{/if}
-		{/each}
-	</div>
-{:else}
-	<div class="text-gray-500 text-sm">No inputs</div>
-{/if}

package/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte

@@ -1,71 +0,0 @@
-<script>import { Badge, Button } from '../../../../common';
-import { faArrowRight, faClose } from '@fortawesome/free-solid-svg-icons';
-import { getContext } from 'svelte';
-export let componentInput;
-const { connectingInput, app, worldStore } = getContext('AppViewerContext');
-function applyConnection() {
-    if (!$connectingInput.opened &&
-        $connectingInput.input !== undefined &&
-        !componentInput.connection) {
-        componentInput.connection = $connectingInput.input.connection;
-        $connectingInput = {
-            opened: false,
-            input: undefined,
-            hoveredComponent: undefined
-        };
-        $app = $app;
-        $worldStore = $worldStore;
-    }
-}
-$: $connectingInput && applyConnection();
-</script>
-
-{#if componentInput.connection}
-	<div class="flex justify-between w-full gap-1">
-		<span class="text-xs">Status</span>
-		<Badge color="green">Connected</Badge>
-	</div>
-	<div class="flex justify-between w-full">
-		<span class="text-xs">Component</span>
-		<Badge color="indigo">{componentInput.connection.componentId}</Badge>
-	</div>
-	<div class="flex justify-between w-full">
-		<span class="text-xs">Path</span>
-		<Badge color="indigo">{componentInput.connection.path}</Badge>
-	</div>
-	<Button
-		size="xs"
-		startIcon={{ icon: faClose }}
-		color="red"
-		variant="border"
-		on:click={() => {
-			if (componentInput.type === 'connected') {
-				componentInput.connection = undefined
-			}
-			$app = $app
-		}}
-	>
-		Disconnect
-	</Button>
-{:else}
-	<div class="flex justify-between w-full gap-1">
-		<span class="text-xs">Status</span>
-		<Badge color="yellow">Not connected</Badge>
-	</div>
-	<Button
-		size="xs"
-		endIcon={{ icon: faArrowRight }}
-		color="blue"
-		on:click={() => {
-			if (componentInput.type === 'connected') {
-				$connectingInput = {
-					opened: true,
-					input: undefined,
-					hoveredComponent: undefined
-				}
-			}
-		}}
-	>
-		Connect
-	</Button>
-{/if}

package/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte

@@ -1,21 +0,0 @@
-<script>import { FileInput } from '../../../../common';
-export let componentInput;
-</script>
-
-<FileInput
-	accept={componentInput?.fileUpload?.accept}
-	multiple={componentInput?.fileUpload?.multiple}
-	convertTo={componentInput?.fileUpload?.convertTo}
-	iconSize={24}
-	class="text-sm py-4"
-	on:change={({ detail }) => {
-		if (componentInput) {
-			componentInput.value = componentInput?.fileUpload?.multiple ? detail : detail?.[0]
-		}
-	}}
->
-	<svelte:fragment slot="selected-title">
-		<!-- Removing the title when there is a selected file -->
-		<span />
-	</svelte:fragment>
-</FileInput>

package/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte.d.ts

@@ -1,17 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { UploadAppInput } from '../../../inputType';
-declare const __propDef: {
-    props: {
-        componentInput: UploadAppInput | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type UploadInputEditorProps = typeof __propDef.props;
-export type UploadInputEditorEvents = typeof __propDef.events;
-export type UploadInputEditorSlots = typeof __propDef.slots;
-export default class UploadInputEditor extends SvelteComponentTyped<UploadInputEditorProps, UploadInputEditorEvents, UploadInputEditorSlots> {
-}
-export {};