windmill-components 1.70.0 → 1.77.0

package/components/apps/editor/component/Component.svelte

@@ -3,30 +3,37 @@ import { fade } from 'svelte/transition';
 import { Loader2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import ComponentHeader from '../ComponentHeader.svelte';
-import { deepEqual } from 'fast-equals';
-import { AppBarChart, AppDisplayComponent, AppTable, AppText, AppButton, AppPieChart, AppSelect, AppCheckbox, AppTextInput, AppNumberInput, AppDateInput, AppForm, AppScatterChart, AppTimeseries, AppHtml, AppSliderInputs, AppFormButton, VegaLiteHtml, PlotlyHtml, AppRangeInput, AppTabs, AppIcon, AppCurrencyInput, AppDivider, AppFileInput, AppImage, AppContainer } from '../../components';
-import AppAggridTable from '../../components/display/table/AppAggridTable.svelte';
-export let pComponent;
+import { AppBarChart, AppDisplayComponent, AppTable, AppText, AppButton, AppPieChart, AppSelect, AppCheckbox, AppTextInput, AppNumberInput, AppDateInput, AppForm, AppScatterChart, AppTimeseries, AppHtml, AppSliderInputs, AppFormButton, VegaLiteHtml, PlotlyHtml, AppRangeInput, AppTabs, AppIcon, AppCurrencyInput, AppDivider, AppFileInput, AppImage, AppContainer, AppAggridTable, AppDrawer, AppMap, AppSplitpanes, AppPdf } from '../../components';
+import AppMultiSelect from '../../components/inputs/AppMultiSelect.svelte';
+export let component;
 export let selected;
 export let locked = false;
 export let pointerdown = false;
-const { staticOutputs, mode, connectingInput, app } = getContext('AppEditorContext');
+export let render;
+const { staticOutputs, mode, connectingInput, app, errorByComponent } = getContext('AppViewerContext');
 let hover = false;
 let initializing = undefined;
 let componentContainerHeight = 0;
-let component = JSON.parse(JSON.stringify(pComponent));
-$: if (pComponent && !deepEqual(pComponent, component)) {
-    component = JSON.parse(JSON.stringify(pComponent));
-}
+$: componentWithErrors = Object.values($errorByComponent).map((e) => e.componentId);
+$: hasError = componentWithErrors.includes(component.id);
 </script>
 
 <div
 	on:pointerenter={() => (hover = true)}
 	on:pointerleave={() => (hover = false)}
-	class="h-full flex flex-col w-full component"
+	class="h-full flex flex-col w-full component {initializing ? 'overflow-hidden h-0' : ''}"
 >
 	{#if $mode !== 'preview'}
-		<ComponentHeader {hover} {pointerdown} {component} {selected} on:delete on:lock {locked} />
+		<ComponentHeader
+			{hover}
+			{pointerdown}
+			{component}
+			{selected}
+			on:delete
+			on:lock
+			on:expand
+			{locked}
+		/>
 	{/if}
 
 	<div
@@ -43,7 +50,7 @@ $: if (pComponent && !deepEqual(pComponent, component)) {
 			selected && $mode !== 'preview' ? 'border border-blue-500' : '',
 			!selected && $mode !== 'preview' && !component.card ? 'border-gray-100' : '',
 			$mode !== 'preview' && !$connectingInput.opened ? 'hover:border-blue-500' : '',
-			component.softWrap ? '' : 'overflow-auto',
+			component.softWrap || hasError ? '' : 'overflow-auto',
 			$mode != 'preview' ? 'cursor-pointer' : '',
 			'relative z-auto',
 			$app.css?.['app']?.['component']?.class
@@ -53,156 +60,369 @@ $: if (pComponent && !deepEqual(pComponent, component)) {
 	>
 		{#if component.type === 'displaycomponent'}
 			<AppDisplayComponent
-				{...component}
+				id={component.id}
+				customCss={component.customCss}
 				bind:initializing
-				bind:componentInput={component.componentInput}
+				componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
 			/>
 		{:else if component.type === 'barchartcomponent'}
 			<AppBarChart
-				{...component}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
 				bind:initializing
-				bind:componentInput={component.componentInput}
+				componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
 			/>
 		{:else if component.type === 'timeseriescomponent'}
 			<AppTimeseries
-				{...component}
+				id={component.id}
+				customCss={component.customCss}
+				configuration={component.configuration}
 				bind:initializing
-				bind:componentInput={component.componentInput}
+				componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
 			/>
 		{:else if component.type === 'htmlcomponent'}
 			<AppHtml
-				{...component}
+				id={component.id}
+				customCss={component.customCss}
 				bind:initializing
-				bind:componentInput={component.componentInput}
+				componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
 			/>
 		{:else if component.type === 'vegalitecomponent'}
 			<VegaLiteHtml
-				{...component}
+				configuration={component.configuration}
+				id={component.id}
 				bind:initializing
-				bind:componentInput={component.componentInput}
+				componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
 			/>
 		{:else if component.type === 'plotlycomponent'}
 			<PlotlyHtml
-				{...component}
+				id={component.id}
 				bind:initializing
-				bind:componentInput={component.componentInput}
+				componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
 			/>
 		{:else if component.type === 'scatterchartcomponent'}
 			<AppScatterChart
-				{...component}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
 				bind:initializing
-				bind:componentInput={component.componentInput}
+				componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
 			/>
 		{:else if component.type === 'piechartcomponent'}
 			<AppPieChart
-				{...component}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
 				bind:initializing
 				bind:staticOutputs={$staticOutputs[component.id]}
-				bind:componentInput={component.componentInput}
+				componentInput={component.componentInput}
+				{render}
 			/>
 		{:else if component.type === 'tablecomponent'}
 			<AppTable
-				{...component}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
 				bind:initializing
 				bind:staticOutputs={$staticOutputs[component.id]}
-				bind:componentInput={component.componentInput}
+				componentInput={component.componentInput}
 				bind:actionButtons={component.actionButtons}
+				{render}
 			/>
 		{:else if component.type === 'aggridcomponent'}
 			<AppAggridTable
-				{...component}
+				id={component.id}
+				configuration={component.configuration}
 				bind:initializing
 				bind:staticOutputs={$staticOutputs[component.id]}
-				bind:componentInput={component.componentInput}
+				componentInput={component.componentInput}
+				{render}
 			/>
 		{:else if component.type === 'textcomponent'}
 			<AppText
-				{...component}
+				id={component.id}
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				customCss={component.customCss}
 				bind:initializing
-				bind:componentInput={component.componentInput}
+				componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
 			/>
 		{:else if component.type === 'buttoncomponent'}
 			<AppButton
-				{...component}
-				bind:componentInput={component.componentInput}
+				id={component.id}
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				recomputeIds={component.recomputeIds}
+				bind:initializing
+				{render}
+			/>
+		{:else if component.type === 'selectcomponent' || component.type === 'resourceselectcomponent'}
+			<AppSelect
+				id={component.id}
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'multiselectcomponent'}
+			<AppMultiSelect
+				id={component.id}
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
 			/>
-		{:else if component.type === 'selectcomponent'}
-			<AppSelect {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{:else if component.type === 'formcomponent'}
 			<AppForm
-				{...component}
-				bind:componentInput={component.componentInput}
+				id={component.id}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				recomputeIds={component.recomputeIds}
+				{render}
 			/>
 		{:else if component.type === 'formbuttoncomponent'}
 			<AppFormButton
-				{...component}
-				bind:componentInput={component.componentInput}
+				id={component.id}
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				recomputeIds={component.recomputeIds}
+				{render}
 			/>
 		{:else if component.type === 'checkboxcomponent'}
-			<AppCheckbox {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+			<AppCheckbox
+				id={component.id}
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
 		{:else if component.type === 'textinputcomponent'}
-			<AppTextInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+			<AppTextInput
+				id={component.id}
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'emailinputcomponent'}
+			<AppTextInput
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				inputType="email"
+				appCssKey="emailinputcomponent"
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
 		{:else if component.type === 'passwordinputcomponent'}
 			<AppTextInput
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
 				inputType="password"
-				{...component}
+				appCssKey="passwordinputcomponent"
+				id={component.id}
+				customCss={component.customCss}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
 			/>
 		{:else if component.type === 'dateinputcomponent'}
 			<AppDateInput
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
 				inputType="date"
-				{...component}
+				id={component.id}
+				customCss={component.customCss}
 				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
 			/>
 		{:else if component.type === 'numberinputcomponent'}
-			<AppNumberInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+			<AppNumberInput
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
 		{:else if component.type === 'currencycomponent'}
-			<AppCurrencyInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+			<AppCurrencyInput
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
 		{:else if component.type === 'slidercomponent'}
-			<AppSliderInputs {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+			<AppSliderInputs
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
 		{:else if component.type === 'horizontaldividercomponent'}
-			<AppDivider {...component} position="horizontal" />
+			<AppDivider
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				position="horizontal"
+				{render}
+			/>
 		{:else if component.type === 'verticaldividercomponent'}
-			<AppDivider {...component} position="vertical" />
+			<AppDivider
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				position="vertical"
+				{render}
+			/>
 		{:else if component.type === 'rangecomponent'}
-			<AppRangeInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+			<AppRangeInput
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
 		{:else if component.type === 'tabscomponent'}
 			<AppTabs
-				{...component}
+				configuration={component.configuration}
+				id={component.id}
+				tabs={component.tabs}
+				customCss={component.customCss}
 				bind:staticOutputs={$staticOutputs[component.id]}
 				{componentContainerHeight}
+				{render}
+				bind:initializing
 			/>
 		{:else if component.type === 'containercomponent'}
 			<AppContainer
-				{...component}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
 				bind:staticOutputs={$staticOutputs[component.id]}
 				{componentContainerHeight}
+				{render}
+			/>
+		{:else if component.type === 'verticalsplitpanescomponent'}
+			<AppSplitpanes
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				panes={component.panes}
+				{componentContainerHeight}
+				{render}
+			/>
+		{:else if component.type === 'horizontalsplitpanescomponent'}
+			<AppSplitpanes
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				panes={component.panes}
+				{componentContainerHeight}
+				horizontal={true}
+				{render}
 			/>
 		{:else if component.type === 'iconcomponent'}
-			<AppIcon {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+			<AppIcon
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
 		{:else if component.type === 'fileinputcomponent'}
-			<AppFileInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+			<AppFileInput
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
 		{:else if component.type === 'imagecomponent'}
-			<AppImage {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+			<AppImage
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'drawercomponent'}
+			<AppDrawer
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				{render}
+			/>
+		{:else if component.type === 'mapcomponent'}
+			<AppMap
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'pdfcomponent'}
+			<AppPdf
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
 		{/if}
 	</div>
 </div>
 {#if initializing}
-	<div
-		out:fade={{ duration: 200 }}
-		class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
-	>
+	<div class="absolute inset-0 center-center flex-col bg-white text-gray-600 border">
 		<Loader2 class="animate-spin" size={16} />
 		<span class="text-xs mt-1">Loading</span>
 	</div>

package/components/apps/editor/component/Component.svelte.d.ts

@@ -2,14 +2,16 @@ import { SvelteComponentTyped } from "svelte";
 import type { AppComponent } from './components';
 declare const __propDef: {
     props: {
-        pComponent: AppComponent;
+        component: AppComponent;
         selected: boolean;
         locked?: boolean | undefined;
         pointerdown?: boolean | undefined;
+        render: boolean;
     };
     events: {
         delete: CustomEvent<any>;
         lock: CustomEvent<any>;
+        expand: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/apps/editor/component/ComponentNavigation.svelte

@@ -0,0 +1,170 @@
+<script>import { getContext } from 'svelte';
+import { findGridItem, findGridItemParentGrid, getAllSubgridsAndComponentIds, insertNewGridItem, sortGridItemsPosition } from '../appUtils';
+import { push } from '../../../../history';
+import { sendUserToast } from '../../../../utils';
+const { app, selectedComponent, breakpoint, focusedGrid, componentControl } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
+let tempGridItem = undefined;
+let copiedGridItem = undefined;
+function getSortedGridItemsOfChildren() {
+    if (!$focusedGrid) {
+        return sortGridItemsPosition($app.grid, $breakpoint);
+    }
+    if (!$app.subgrids) {
+        return [];
+    }
+    return sortGridItemsPosition($app.subgrids[`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`], $breakpoint);
+}
+function getSortedGridItemsOfGrid() {
+    if ($app.grid.find((item) => item.id === $selectedComponent)) {
+        return sortGridItemsPosition($app.grid, $breakpoint);
+    }
+    if (!$app.subgrids) {
+        return [];
+    }
+    return sortGridItemsPosition(Object.values($app.subgrids ?? {}).find((grid) => grid.find((item) => item.id === $selectedComponent)) ?? [], $breakpoint);
+}
+function left(event) {
+    if (!$componentControl[$selectedComponent]?.left?.()) {
+        const sortedGridItems = getSortedGridItemsOfGrid();
+        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent);
+        if (currentIndex !== -1 && currentIndex > 0) {
+            $selectedComponent = sortedGridItems[currentIndex - 1].id;
+        }
+    }
+    event.preventDefault();
+}
+function right(event) {
+    let r = $componentControl[$selectedComponent]?.right?.();
+    if (!r) {
+        const sortedGridItems = getSortedGridItemsOfGrid();
+        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent);
+        if (currentIndex !== -1 && currentIndex < sortedGridItems.length - 1) {
+            $selectedComponent = sortedGridItems[currentIndex + 1].id;
+        }
+    }
+    event.preventDefault();
+}
+function down(event) {
+    if (!$focusedGrid) {
+        $selectedComponent = getSortedGridItemsOfChildren()[0]?.id;
+        event.preventDefault();
+    }
+    else if ($app.subgrids) {
+        const index = $focusedGrid?.subGridIndex ?? 0;
+        const subgrid = $app.subgrids[`${$selectedComponent}-${index}`];
+        if (!subgrid || subgrid.length === 0) {
+            return;
+        }
+        const sortedGridItems = sortGridItemsPosition(subgrid, $breakpoint);
+        if (sortedGridItems) {
+            $selectedComponent = sortedGridItems[0].id;
+        }
+        event.preventDefault();
+    }
+}
+function handleEscape(event) {
+    $selectedComponent = undefined;
+    $focusedGrid = undefined;
+    event.preventDefault();
+}
+function handleArrowUp(event) {
+    if (!$selectedComponent)
+        return;
+    let parentId = findGridItemParentGrid($app, $selectedComponent)?.split('-')[0];
+    if (parentId) {
+        $selectedComponent = parentId;
+    }
+    else {
+        $selectedComponent = undefined;
+        $focusedGrid = undefined;
+    }
+}
+function handleCopy(event) {
+    if (!$selectedComponent) {
+        return;
+    }
+    tempGridItem = undefined;
+    copiedGridItem = findGridItem($app, $selectedComponent);
+}
+function handleCut(event) {
+    if (!$selectedComponent) {
+        return;
+    }
+    push(history, $app);
+    const gridItem = findGridItem($app, $selectedComponent);
+    copiedGridItem = gridItem;
+    if (!gridItem) {
+        return;
+    }
+    // Store the grid item in a temp variable so we can paste it later
+    tempGridItem = gridItem;
+}
+function handlePaste(event) {
+    push(history, $app);
+    if (tempGridItem) {
+        if ($focusedGrid &&
+            getAllSubgridsAndComponentIds($app, tempGridItem.data)[0].includes(`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`)) {
+            sendUserToast('Cannot paste a component into itself', true);
+            return;
+        }
+        let parentGrid = findGridItemParentGrid($app, tempGridItem.data.id);
+        const grid = parentGrid ? $app.subgrids[parentGrid] : $app.grid;
+        let idx = grid.findIndex((item) => {
+            return item.id == tempGridItem.data.id;
+        });
+        if (idx > -1) {
+            grid.splice(idx, 1);
+        }
+        insertNewGridItem($app, tempGridItem.data, $focusedGrid, true);
+        copiedGridItem = tempGridItem;
+        tempGridItem = undefined;
+    }
+    else if (copiedGridItem) {
+        insertNewGridItem($app, copiedGridItem.data, $focusedGrid, false);
+    }
+    $app = $app;
+}
+function keydown(event) {
+    switch (event.key) {
+        case 'Escape':
+            handleEscape(event);
+            break;
+        case 'ArrowUp': {
+            handleArrowUp(event);
+            break;
+        }
+        case 'ArrowDown': {
+            down(event);
+            break;
+        }
+        case 'ArrowRight': {
+            right(event);
+            break;
+        }
+        case 'ArrowLeft': {
+            left(event);
+            break;
+        }
+        case 'c':
+            if (event.ctrlKey || event.metaKey) {
+                handleCopy(event);
+            }
+            break;
+        case 'v':
+            if (event.ctrlKey || event.metaKey) {
+                handlePaste(event);
+            }
+            break;
+        case 'x':
+            if (event.ctrlKey || event.metaKey) {
+                handleCut(event);
+            }
+            break;
+        default:
+            break;
+    }
+}
+</script>
+
+<svelte:window on:keydown={keydown} />

package/components/apps/editor/component/ComponentNavigation.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 ComponentNavigationProps = typeof __propDef.props;
+export type ComponentNavigationEvents = typeof __propDef.events;
+export type ComponentNavigationSlots = typeof __propDef.slots;
+export default class ComponentNavigation extends SvelteComponentTyped<ComponentNavigationProps, ComponentNavigationEvents, ComponentNavigationSlots> {
+}
+export {};