windmill-components 1.70.0 → 1.75.0

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

@@ -3,21 +3,23 @@ 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));
-}
+// let component = JSON.parse(JSON.stringify({ conf }))
+// $: if (!deepEqual(component, pComponent)) {
+// 	component = JSON.parse(JSON.stringify(pComponent))
+// }
+$: componentWithErrors = Object.values($errorByComponent).map((e) => e.componentId);
+$: hasError = componentWithErrors.includes(component.id);
 </script>
 
 <div
@@ -26,7 +28,16 @@ $: if (pComponent && !deepEqual(pComponent, component)) {
 	class="h-full flex flex-col w-full component"
 >
 	{#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 +54,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,154 +64,368 @@ $: 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}
+				{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}
 			/>
 		{: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 }}
+		out:fade|local={{ duration: 200 }}
 		class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
 	>
 		<Loader2 class="animate-spin" size={16} />

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,125 @@
+<script>import { getContext } from 'svelte';
+import { findGridItemParentId } from '../appUtils';
+const { app, selectedComponent, breakpoint, focusedGrid } = getContext('AppViewerContext');
+const { componentControl } = getContext('AppEditorContext');
+function getSortedGridItemsOfChildren() {
+    if (!$focusedGrid) {
+        return sortGridItems($app.grid, $breakpoint);
+    }
+    if (!$app.subgrids) {
+        return [];
+    }
+    return sortGridItems($app.subgrids[`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`], $breakpoint);
+}
+function getSortedGridItemsOfGrid() {
+    if ($app.grid.find((item) => item.id === $selectedComponent)) {
+        return sortGridItems($app.grid, $breakpoint);
+    }
+    if (!$app.subgrids) {
+        return [];
+    }
+    return sortGridItems(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 = sortGridItems(subgrid, $breakpoint);
+        if (sortedGridItems) {
+            $selectedComponent = sortedGridItems[0].id;
+        }
+        event.preventDefault();
+    }
+}
+function keydown(event) {
+    switch (event.key) {
+        case 'Escape':
+            $selectedComponent = undefined;
+            event.preventDefault();
+            break;
+        case 'ArrowUp': {
+            if (!$selectedComponent)
+                return;
+            let parentId = findGridItemParentId($app, $selectedComponent);
+            if (parentId) {
+                $selectedComponent = parentId;
+            }
+            else {
+                $selectedComponent = undefined;
+                $focusedGrid = undefined;
+            }
+            break;
+        }
+        case 'ArrowDown': {
+            down(event);
+            break;
+        }
+        case 'ArrowRight': {
+            right(event);
+            break;
+        }
+        case 'ArrowLeft': {
+            left(event);
+            break;
+        }
+        default:
+            break;
+    }
+}
+function sortGridItems(gridItems, breakpoint) {
+    return gridItems.sort((a, b) => {
+        const width = breakpoint === 'lg' ? 12 : 3;
+        const aX = a[width].x;
+        const aY = a[width].y;
+        const bX = b[width].x;
+        const bY = b[width].y;
+        if (aY < bY) {
+            return -1;
+        }
+        else if (aY > bY) {
+            return 1;
+        }
+        else {
+            if (aX < bX) {
+                return -1;
+            }
+            else if (aX > bX) {
+                return 1;
+            }
+            else {
+                return 0;
+            }
+        }
+    });
+}
+</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 {};

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

@@ -8,6 +8,7 @@ type BaseComponent<T extends string> = {
 export type TextComponent = BaseComponent<'textcomponent'>;
 export type TextInputComponent = BaseComponent<'textinputcomponent'>;
 export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>;
+export type EmailInputComponent = BaseComponent<'emailinputcomponent'>;
 export type DateInputComponent = BaseComponent<'dateinputcomponent'>;
 export type NumberInputComponent = BaseComponent<'numberinputcomponent'>;
 export type CurrencyComponent = BaseComponent<'currencycomponent'>;
@@ -37,7 +38,9 @@ export type AggridComponent = BaseComponent<'aggridcomponent'>;
 export type DisplayComponent = BaseComponent<'displaycomponent'>;
 export type ImageComponent = BaseComponent<'imagecomponent'>;
 export type InputComponent = BaseComponent<'inputcomponent'>;
-export type SelectComponent = BaseComponent<'selectcomponent'>;
+export type SelectComponent = BaseComponent<'resourceselectcomponent'>;
+export type ResourceSelectComponent = BaseComponent<'selectcomponent'>;
+export type MultiSelectComponent = BaseComponent<'multiselectcomponent'>;
 export type CheckboxComponent = BaseComponent<'checkboxcomponent'>;
 export type RadioComponent = BaseComponent<'radiocomponent'>;
 export type IconComponent = BaseComponent<'iconcomponent'>;
@@ -48,7 +51,16 @@ export type TabsComponent = BaseComponent<'tabscomponent'> & {
     tabs: string[];
 };
 export type ContainerComponent = BaseComponent<'containercomponent'>;
-export type AppComponent = BaseAppComponent & (DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | CurrencyComponent | SliderComponent | RangeComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | SelectComponent | CheckboxComponent | FormComponent | FormButtonComponent | VegaLiteComponent | PlotlyComponent | TabsComponent | ContainerComponent | IconComponent | HorizontalDividerComponent | VerticalDividerComponent | FileInputComponent | ImageComponent | AggridComponent);
+export type DrawerComponent = BaseComponent<'drawercomponent'>;
+export type MapComponent = BaseComponent<'mapcomponent'>;
+export type VerticalSplitPanesComponent = BaseComponent<'verticalsplitpanescomponent'> & {
+    panes: number[];
+};
+export type HorizontalSplitPanesComponent = BaseComponent<'horizontalsplitpanescomponent'> & {
+    panes: number[];
+};
+export type PdfComponent = BaseComponent<'pdfcomponent'>;
+export type AppComponent = BaseAppComponent & (DisplayComponent | TextInputComponent | PasswordInputComponent | EmailInputComponent | DateInputComponent | NumberInputComponent | CurrencyComponent | SliderComponent | RangeComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | SelectComponent | ResourceSelectComponent | MultiSelectComponent | CheckboxComponent | FormComponent | FormButtonComponent | VegaLiteComponent | PlotlyComponent | TabsComponent | ContainerComponent | IconComponent | HorizontalDividerComponent | VerticalDividerComponent | FileInputComponent | ImageComponent | AggridComponent | DrawerComponent | MapComponent | VerticalSplitPanesComponent | HorizontalSplitPanesComponent | PdfComponent);
 export type AppComponentDimensions = `${IntRange<1, typeof NARROW_GRID_COLUMNS>}:${number}-${IntRange<1, typeof WIDE_GRID_COLUMNS>}:${number}`;
 export type AppComponentConfig = {
     name: string;