windmill-components 1.60.4 → 1.75.0

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

@@ -0,0 +1,73 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import { deleteGridItem } from '../appUtils';
+import PanelSection from './common/PanelSection.svelte';
+export let tabs;
+export let component;
+const { app, staticOutputs, runnableComponents, focusedGrid } = getContext('AppViewerContext');
+function addTab() {
+    const numberOfTabs = tabs.length;
+    tabs = [...tabs, `Tab ${numberOfTabs + 1}`];
+    if (!$app.subgrids) {
+        $app.subgrids = {};
+    }
+    $app.subgrids[`${component.id}-${numberOfTabs}`] = [];
+    component.numberOfSubgrids = tabs.length;
+}
+function deleteSubgrid(index) {
+    let subgrid = `${component.id}-${index}`;
+    for (const item of $app.subgrids[subgrid]) {
+        const components = deleteGridItem($app, item.data, subgrid, false);
+        console.log(components);
+        for (const key in components) {
+            delete $staticOutputs[key];
+            delete $runnableComponents[key];
+        }
+    }
+    $staticOutputs = $staticOutputs;
+    $runnableComponents = $runnableComponents;
+    for (let i = index; i < tabs.length - 1; i++) {
+        $app.subgrids[`${component.id}-${i}`] = $app.subgrids[`${component.id}-${i + 1}`];
+    }
+    tabs.splice(index, 1);
+    tabs = tabs;
+    component.numberOfSubgrids = tabs.length;
+    $app = $app;
+}
+</script>
+
+<PanelSection title={`Tabs ${tabs.length > 0 ? `(${tabs.length})` : ''}`}>
+	{#if tabs.length == 0}
+		<span class="text-xs text-gray-500">No Tabs</span>
+	{/if}
+	<div class="w-full flex gap-2 flex-col mt-2">
+		{#each tabs as value, index (index)}
+			<div class="w-full flex flex-row gap-2 items-center relative">
+				<input on:keydown|stopPropagation type="text" bind:value />
+
+				<div class="absolute top-1 right-1">
+					<Button
+						size="xs"
+						color="light"
+						variant="border"
+						on:click={() => {
+							deleteSubgrid(index)
+						}}
+						iconOnly
+						btnClasses="!text-red-500"
+						startIcon={{ icon: faTrashAlt }}
+					/>
+				</div>
+			</div>
+		{/each}
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faPlus }}
+			on:click={addTab}
+			iconOnly
+		/>
+	</div>
+</PanelSection>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        tabs: string[];
+        component: AppComponent;
+    };
+    events: {
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridTabProps = typeof __propDef.props;
+export type GridTabEvents = typeof __propDef.events;
+export type GridTabSlots = typeof __propDef.slots;
+export default class GridTab extends SvelteComponentTyped<GridTabProps, GridTabEvents, GridTabSlots> {
+}
+export {};

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

@@ -1,7 +1,9 @@
-<script>import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
+<script>import VariableEditor from '../../../VariableEditor.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';
 export let id;
 export let componentInput;
 export let hasRows = false;
@@ -15,6 +17,8 @@ export let hasRows = false;
 	<StaticInputEditor 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-6f00">Field's value is set by the user</span>
 {/if}

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

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ConnectedAppInput, EvalAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
+import type { ConnectedAppInput, EvalAppInput, RowAppInput, StaticAppInput, UploadAppInput, UserAppInput } from '../../inputType';
 declare const __propDef: {
     props: {
         id: string;
-        componentInput: StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput;
+        componentInput: StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput | UploadAppInput;
         hasRows?: boolean | undefined;
     };
     events: {

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

@@ -1,6 +1,6 @@
 <script>import { Badge, ToggleButton, ToggleButtonGroup } from '../../../common';
 import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
-import { faArrowRight, faPen, faTableCells, faUser } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faPen, faUpload, faUser } from '@fortawesome/free-solid-svg-icons';
 import { fieldTypeToTsType } from '../../utils';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
 import { getContext } from 'svelte';
@@ -11,104 +11,119 @@ export let inputSpecs;
 export let userInputEnabled = true;
 export let shouldCapitalize = true;
 export let rowColumns = false;
-const { connectingInput } = getContext('AppEditorContext');
+export let resourceOnly = false;
+const { connectingInput } = getContext('AppViewerContext');
 </script>
 
 {#if inputSpecs}
 	<div class="w-full flex flex-col gap-4">
 		{#each Object.keys(inputSpecs) as inputSpecKey (inputSpecKey)}
 			{@const input = inputSpecs[inputSpecKey]}
-			<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(inputSpecKey))
-							: inputSpecKey}
-						{#if input.tooltip}
-							<Tooltip>
-								{input.tooltip}
-							</Tooltip>
-						{/if}
-					</span>
+			{#if !(resourceOnly && (input.fieldType !== 'object' || !input.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(inputSpecKey))
+								: inputSpecKey}
+							{#if input.tooltip}
+								<Tooltip>
+									{input.tooltip}
+								</Tooltip>
+							{/if}
+						</span>
 
-					<div class="flex gap-x-2 gap-y-1 flex-wrap justify-end items-center">
-						<Badge color="blue">
-							{input.fieldType === 'array' && input.subFieldType
-								? `${capitalize(fieldTypeToTsType(input.subFieldType))}[]`
-								: capitalize(fieldTypeToTsType(input.fieldType))}
-						</Badge>
+						<div class="flex gap-x-2 gap-y-1 flex-wrap justify-end items-center">
+							<Badge color="blue">
+								{input.fieldType === 'array' && input.subFieldType
+									? `${capitalize(fieldTypeToTsType(input.subFieldType))}[]`
+									: capitalize(fieldTypeToTsType(input.fieldType))}
+							</Badge>
 
-						{#if !inputSpecs[inputSpecKey].onlyStatic && inputSpecs[inputSpecKey].type != 'eval'}
-							<ToggleButtonGroup
-								bind:selected={inputSpecs[inputSpecKey].type}
-								on:selected={(e) => {
-									if (e.detail == 'connected' && !inputSpecs[inputSpecKey]['connection']) {
-										$connectingInput = {
-											opened: true,
-											input: undefined,
-											hoveredComponent: undefined
+							{#if !inputSpecs[inputSpecKey].onlyStatic && inputSpecs[inputSpecKey].type != 'eval'}
+								<ToggleButtonGroup
+									bind:selected={inputSpecs[inputSpecKey].type}
+									on:selected={(e) => {
+										if (e.detail == 'connected' && !inputSpecs[inputSpecKey]['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 rowColumns}
+									}}
+								>
 									<Popover placement="bottom" notClickable disapperTimoout={0}>
 										<ToggleButton
-											position="center"
-											value="row"
-											startIcon={{ icon: faTableCells }}
+											position="left"
+											value="static"
+											startIcon={{ icon: faPen }}
 											size="xs"
-										>
-											<Tooltip scale={0.6} placement="top-end" wrapperClass="center-center">
-												Use the column name to have the value of the cell be passed to the action
-											</Tooltip>
-										</ToggleButton>
-										<svelte:fragment slot="text">Column</svelte:fragment>
+											iconOnly
+										/>
+										<svelte:fragment slot="text">Static</svelte:fragment>
 									</Popover>
-								{/if}
-								{#if userInputEnabled && !input.format?.startsWith('resource-')}
+									<!-- {#if rowColumns}
+										<Popover placement="bottom" notClickable disapperTimoout={0}>
+											<ToggleButton
+												position="center"
+												value="row"
+												startIcon={{ icon: faTableCells }}
+												size="xs"
+											>
+												<Tooltip scale={0.6} placement="top-end" wrapperClass="center-center">
+													Use the column name to have the value of the cell be passed to the action
+												</Tooltip>
+											</ToggleButton>
+											<svelte:fragment slot="text">Column</svelte:fragment>
+										</Popover>
+									{/if} -->
+									{#if userInputEnabled && !input.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' in inputSpecs[inputSpecKey]}
+										<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="center"
-											value="user"
-											startIcon={{ icon: faUser }}
+											position="right"
+											value="connected"
+											startIcon={{ icon: faArrowRight }}
 											size="xs"
 											iconOnly
 										/>
-										<svelte:fragment slot="text">User Input</svelte:fragment>
+										<svelte:fragment slot="text">Connect</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}
+								</ToggleButtonGroup>
+							{/if}
+						</div>
 					</div>
-				</div>
 
-				<InputsSpecEditor
-					hasRows={rowColumns}
-					{id}
-					bind:componentInput={inputSpecs[inputSpecKey]}
-				/>
-			</div>
+					<InputsSpecEditor
+						hasRows={rowColumns}
+						{id}
+						bind:componentInput={inputSpecs[inputSpecKey]}
+					/>
+				</div>
+			{/if}
 		{/each}
 	</div>
 {:else}

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         userInputEnabled?: boolean | undefined;
         shouldCapitalize?: boolean | undefined;
         rowColumns?: boolean | undefined;
+        resourceOnly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,92 @@
+<script>import { Button } from '../../../common';
+import { dirtyStore } from '../../../common/confirmationModal/dirtyStore';
+import { push } from '../../../../history';
+import { faCopy } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import { createNewGridItem, deleteGridItem, findGridItem, getAllSubgridsAndComponentIds, insertNewGridItem } from '../appUtils';
+export let component;
+export let parent;
+let selectedOption;
+const { app } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
+function listAllSubGrids(app) {
+    return app.subgrids ? Object.keys(app.subgrids) : [];
+}
+function findAndDelete(id) {
+    const node = findGridItem($app, id);
+    if (!node) {
+        return;
+    }
+    const data = JSON.parse(JSON.stringify(node.data));
+    const shouldKeepSubGrid = data.numberOfSubgrids ? data.numberOfSubgrids >= 1 : false;
+    $dirtyStore = true;
+    deleteGridItem($app, data, parent, shouldKeepSubGrid);
+    return data;
+}
+function insertComponentInSubGrid(data, targetId, targetSubGridIndex) {
+    push(history, $app);
+    const focusedGrid = {
+        parentComponentId: targetId,
+        subGridIndex: targetSubGridIndex
+    };
+    insertNewGridItem($app, data, focusedGrid, true);
+    $app.grid = [...$app.grid];
+}
+function insertComponentInMainGrid(data) {
+    const newComponent = createNewGridItem($app.grid, data.id, data);
+    $app.grid = [...$app.grid, newComponent];
+}
+function onMove(component) {
+    push(history, $app);
+    const data = findAndDelete(component.id);
+    if (!data) {
+        return;
+    }
+    if (selectedOption !== 'main-grid') {
+        const [targetId, targetSubGridIndex] = selectedOption.split('-');
+        insertComponentInSubGrid(data, targetId, parseInt(targetSubGridIndex));
+    }
+    else {
+        insertComponentInMainGrid(data);
+    }
+}
+const defaultOption = {
+    label: 'Main grid',
+    value: 'main-grid',
+    disabled: parent === undefined
+};
+$: [subgrids] = component ? getAllSubgridsAndComponentIds($app, component) : [[], []];
+$: availableGrids = listAllSubGrids($app);
+$: options = availableGrids
+    ? [
+        defaultOption,
+        ...availableGrids?.map((grid) => ({
+            label: grid,
+            value: grid,
+            disabled: grid === parent || subgrids.includes(grid)
+        }))
+    ]
+    : [defaultOption];
+</script>
+
+{#if component && !options.every((option) => option.disabled)}
+	<select bind:value={selectedOption} class="w-full">
+		{#each options as option}
+			<option value={option.value} disabled={option.disabled}>{option.label}</option>
+		{/each}
+	</select>
+	<Button
+		size="xs"
+		color="dark"
+		startIcon={{ icon: faCopy }}
+		on:click={() => {
+			if (component) {
+				onMove(component)
+			}
+		}}
+	>
+		Move component: {component.id}
+	</Button>
+{:else}
+	<p class="text-gray-500 text-sm">No grids available</p>
+{/if}

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        component: AppComponent | undefined;
+        parent: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MoveToOtherGridProps = typeof __propDef.props;
+export type MoveToOtherGridEvents = typeof __propDef.events;
+export type MoveToOtherGridSlots = typeof __propDef.slots;
+export default class MoveToOtherGrid extends SvelteComponentTyped<MoveToOtherGridProps, MoveToOtherGridEvents, MoveToOtherGridSlots> {
+}
+export {};

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

@@ -3,7 +3,7 @@ import { getContext } from 'svelte';
 import PanelSection from './common/PanelSection.svelte';
 export let recomputeIds = undefined;
 export let ownId;
-const { runnableComponents } = getContext('AppEditorContext');
+const { runnableComponents } = getContext('AppViewerContext');
 function onChange(event, id) {
     if (event.currentTarget.checked) {
         recomputeIds = [...(recomputeIds ?? []), id];
@@ -14,7 +14,10 @@ function onChange(event, id) {
 }
 </script>
 
-<PanelSection title="Recompute others" tooltip="Select components to recompute after running this script">
+<PanelSection
+	title="Recompute others"
+	tooltip="Select components to recompute after running this script"
+>
 	{#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0}
 		<table class="divide-y divide-gray-300 border w-full">
 			<thead class="bg-gray-50">

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

@@ -4,7 +4,7 @@ import { faClose, faEdit } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { clearResultAppInput } from '../../utils';
 import InlineScriptEditorDrawer from '../inlineScriptsPanel/InlineScriptEditorDrawer.svelte';
-const { app } = getContext('AppEditorContext');
+const { app } = getContext('AppViewerContext');
 export let appInput;
 let inlineScriptEditorDrawer;
 function edit() {

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

@@ -9,7 +9,7 @@ import PanelSection from './common/PanelSection.svelte';
 import TableActionLabel from './TableActionLabel.svelte';
 export let components;
 export let id;
-const { selectedComponent, staticOutputs } = getContext('AppEditorContext');
+const { selectedComponent, staticOutputs } = getContext('AppViewerContext');
 function addComponent() {
     const actionId = getNextId(components.map((x) => x.id.split('_')[1]));
     const newComponent = {
@@ -37,6 +37,30 @@ function addComponent() {
                 fieldType: 'boolean',
                 type: 'eval',
                 expr: 'false'
+            },
+            goto: {
+                tooltip: 'Go to an url on success if not empty',
+                fieldType: 'text',
+                type: 'static',
+                value: ''
+            },
+            gotoNewTab: {
+                tooltip: 'Go to create a new tab',
+                fieldType: 'boolean',
+                type: 'static',
+                value: true
+            },
+            beforeIcon: {
+                type: 'static',
+                value: undefined,
+                fieldType: 'icon-select',
+                onlyStatic: true
+            },
+            afterIcon: {
+                type: 'static',
+                value: undefined,
+                fieldType: 'icon-select',
+                onlyStatic: true
             }
         },
         componentInput: {
@@ -47,6 +71,9 @@ function addComponent() {
             value: undefined
         },
         recomputeIds: undefined,
+        customCss: {
+            button: { style: '', class: '' }
+        },
         card: false
     };
     components = [...components, newComponent];
@@ -86,17 +113,28 @@ function deleteComponent(cid) {
 			}}
 			on:keypress
 		>
+			<Badge color="dark-indigo">
+				{component.id}
+			</Badge>
+
+			<div>
+				<TableActionLabel componentInput={component.configuration.label} />
+			</div>
 			<div>
 				<Button variant="border" color="red" on:click={() => deleteComponent(component.id)}>
 					<Icon class="h-3" data={faTrashAlt} />
 				</Button>
 			</div>
-			<div>
-				<TableActionLabel componentInput={component.configuration.label} />
-			</div>
-			<Badge color="dark-indigo">
-				{component.id}
-			</Badge>
 		</div>
 	{/each}
+	<div class="w-full">
+		<Button
+			btnClasses="w-full"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faPlus }}
+			on:click={addComponent}
+			iconOnly
+		/>
+	</div>
 </PanelSection>

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

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ButtonComponent, BaseAppComponent } from '../../types';
+import type { BaseAppComponent } from '../../types';
+import type { ButtonComponent } from '../component';
 declare const __propDef: {
     props: {
         components: (BaseAppComponent & ButtonComponent)[];

package/components/apps/editor/settingsPanel/common/PanelSection.svelte

@@ -14,11 +14,13 @@ export let tooltip = '';
 		noPadding ? '' : smallPadding ? 'p-2' : 'p-4'
 	)}
 >
-	<div class="flex justify-between items-center w-full gap-1">
-		<div class="text-sm font-extrabold {titlePadding}">
-			{title}
+	<div class="flex justify-between flex-wrap items-center w-full gap-1">
+		<div class="text-sm inline-flex items-center font-extrabold {titlePadding} gap-1">
+			<span class="truncate">
+				{title}
+			</span>
 			{#if tooltip}
-				<Tooltip>
+				<Tooltip light>
 					{tooltip}
 				</Tooltip>
 			{/if}

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

@@ -0,0 +1,48 @@
+<script>import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
+export let componentInput;
+let isOpen = false;
+</script>
+
+<div class="color-picker-input">
+	<input
+		type="text"
+		readonly
+		value={componentInput.value}
+		on:focus|preventDefault|stopPropagation={() => (isOpen = true)}
+	/>
+	<ColorPicker
+		bind:isOpen
+		bind:hex={componentInput.value}
+		label={componentInput.value}
+		canChangeMode={false}
+		components={ChromeVariant}
+		toRight
+		--focus-color="#e0e7ff"
+	/>
+</div>
+
+<style global>
+	:global(.color-picker-input) :global(span) > :global(label.svelte-rogbpz) {
+		display: none;
+	}
+
+	:global(.color-picker-input) :global(span) > :global(div.wrapper) {
+		box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.25) !important;
+		border-style: none !important;
+		border-radius: 0.375rem !important;
+	}
+
+	:global(.color-picker-input) :global(.slider-wrapper) {
+		overflow: visible !important;
+	}
+
+	:global(.color-picker-input) :global(.slider-indicator) {
+		width: 14px !important;
+		height: 14px !important;
+		border-radius: 7px !important;
+		margin-top: 0 !important;
+		background-color: #fafafa !important;
+		border: 1px solid #2e2e2eaf !important;
+		top: -2px !important;
+		box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.5) !important;
+	}</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput, StaticInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: StaticInput<string> & Extract<AppInput, {
+            fieldType: 'color';
+        }>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColorInputProps = typeof __propDef.props;
+export type ColorInputEvents = typeof __propDef.events;
+export type ColorInputSlots = typeof __propDef.slots;
+export default class ColorInput extends SvelteComponentTyped<ColorInputProps, ColorInputEvents, ColorInputSlots> {
+}
+export {};