windmill-components 1.473.1 → 1.493.3

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

@@ -1,4 +1,4 @@
-<script>import AppMultiSelect from '../../components/inputs/AppMultiSelect.svelte';
+<script lang="ts">import AppMultiSelect from '../../components/inputs/AppMultiSelect.svelte';
 import AppMultiSelectV2 from '../../components/inputs/AppMultiSelectV2.svelte';
 import AppModal from '../../components/layout/AppModal.svelte';
 import AppSchemaForm from '../../components/buttons/AppSchemaForm.svelte';
@@ -43,6 +43,7 @@ import AppPieChart from '../../components/display/AppPieChart.svelte';
 import AppTable from '../../components/display/table/AppTable.svelte';
 import AppAggridTable from '../../components/display/table/AppAggridTable.svelte';
 import AppText from '../../components/display/AppText.svelte';
+import AppCodeInputComponent from '../../components/inputs/AppCodeInputComponent.svelte';
 import AppButton from '../../components/buttons/AppButton.svelte';
 import AppForm from '../../components/buttons/AppForm.svelte';
 import AppFormButton from '../../components/buttons/AppFormButton.svelte';
@@ -70,6 +71,7 @@ import AppDateSelect from '../../components/inputs/AppDateSelect.svelte';
 import AppDisplayComponentByJobId from '../../components/display/AppRecomputeAll.svelte';
 import AppRecomputeAll from '../../components/display/AppRecomputeAll.svelte';
 import AppUserResource from '../../components/inputs/AppUserResource.svelte';
+import { Button } from '../../../common';
 export let component;
 export let render;
 export let componentContainerHeight;
@@ -78,698 +80,722 @@ export let inlineEditorOpened;
 export let initializing = undefined;
 </script>
 
-{#if component.type === 'displaycomponent'}
-	<AppDisplayComponent
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		componentInput={component.componentInput}
-		configuration={component.configuration}
-		{render}
-	/>
-{:else if component.type === 'logcomponent'}
-	<AppLogsComponent />
-{:else if component.type === 'jobidlogcomponent'}
-	<AppJobIdLogComponent
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		configuration={component.configuration}
-		{render}
-	/>
-{:else if component.type === 'flowstatuscomponent'}
-	<AppFlowStatusComponent />
-{:else if component.type === 'jobidflowstatuscomponent'}
-	<AppJobIdFlowStatus
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		configuration={component.configuration}
-		{render}
-	/>
-{:else if component.type === 'barchartcomponent'}
-	<AppBarChart
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		componentInput={component.componentInput}
-		{render}
-	/>
-{:else if component.type === 'timeseriescomponent'}
-	<AppTimeseries
-		id={component.id}
-		customCss={component.customCss}
-		configuration={component.configuration}
-		bind:initializing
-		componentInput={component.componentInput}
-		{render}
-	/>
-{:else if component.type === 'htmlcomponent'}
-	<AppHtml
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		componentInput={component.componentInput}
-		{render}
-	/>
-{:else if component.type === 'customcomponent'}
-	<AppCustomComponent
-		customComponent={component.customComponent}
-		id={component.id}
-		componentInput={component.componentInput}
-		{render}
-	/>
-{:else if component.type === 'mardowncomponent'}
-	<AppMarkdown
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		componentInput={component.componentInput}
-		configuration={component.configuration}
-		{render}
-	/>
-{:else if component.type === 'vegalitecomponent'}
-	<VegaLiteHtml
-		configuration={component.configuration}
-		id={component.id}
-		bind:initializing
-		componentInput={component.componentInput}
-		{render}
-	/>
-{:else if component.type === 'plotlycomponent'}
-	<PlotlyHtml
-		id={component.id}
-		configuration={component.configuration}
-		bind:initializing
-		componentInput={component.componentInput}
-		{render}
-	/>
-{:else if component.type === 'plotlycomponentv2'}
-	<PlotlyHtmlV2
-		id={component.id}
-		configuration={component.configuration}
-		bind:initializing
-		componentInput={component.componentInput}
-		datasets={component.datasets}
-		xData={component.xData}
-		{render}
-	/>
-{:else if component.type === 'scatterchartcomponent'}
-	<AppScatterChart
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		componentInput={component.componentInput}
-		{render}
-	/>
-{:else if component.type === 'piechartcomponent'}
-	<AppPieChart
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		componentInput={component.componentInput}
-		{render}
-	/>
-{:else if component.type === 'agchartscomponent'}
-	<AppAgCharts
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		componentInput={component.componentInput}
-		datasets={component.datasets}
-		xData={component.xData}
-		{render}
-	/>
-{:else if component.type === 'agchartscomponentee'}
-	<AppAgCharts
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		componentInput={component.componentInput}
-		datasets={component.datasets}
-		xData={component.xData}
-		license={component.license}
-		ee={true}
-		{render}
-	/>
-{:else if component.type === 'tablecomponent'}
-	<AppTable
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		componentInput={component.componentInput}
-		actionButtons={component.actionButtons}
-		{render}
-	/>
-{:else if component.type === 'dbexplorercomponent'}
-	<AppDbExplorer
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		actions={component.actions ?? []}
-		bind:initializing
-		{render}
-	/>
-{:else if component.type === 'aggridcomponent'}
-	<AppAggridTable
-		id={component.id}
-		configuration={component.configuration}
-		bind:initializing
-		componentInput={component.componentInput}
-		customCss={component.customCss}
-		actions={component.actions ?? []}
-		actionsOrder={component.actionsOrder ?? undefined}
-		{render}
-	/>
-{:else if component.type === 'aggridcomponentee'}
-	<AppAggridTableEe
-		license={component.license}
-		id={component.id}
-		configuration={component.configuration}
-		bind:initializing
-		componentInput={component.componentInput}
-		customCss={component.customCss}
-		actions={component.actions ?? []}
-		actionsOrder={component.actionsOrder ?? undefined}
-		{render}
-	/>
-{:else if component.type === 'aggridinfinitecomponent'}
-	<AppAggridInfiniteTable
-		id={component.id}
-		configuration={component.configuration}
-		bind:initializing
-		componentInput={component.componentInput}
-		customCss={component.customCss}
-		actions={component.actions ?? []}
-		{render}
-	/>
-{:else if component.type === 'aggridinfinitecomponentee'}
-	<AppAggridInfiniteTableEe
-		license={component.license}
-		id={component.id}
-		configuration={component.configuration}
-		bind:initializing
-		componentInput={component.componentInput}
-		customCss={component.customCss}
-		actions={component.actions ?? []}
-		{render}
-	/>
-{:else if component.type === 'textcomponent'}
-	<AppText
-		id={component.id}
-		verticalAlignment={component.verticalAlignment}
-		horizontalAlignment={component.horizontalAlignment}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		bind:initializing
-		bind:editorMode={inlineEditorOpened}
-		componentInput={component.componentInput}
-		{render}
-	/>
-{:else if component.type === 'buttoncomponent'}
-	<AppButton
-		id={component.id}
-		verticalAlignment={component.verticalAlignment}
-		horizontalAlignment={component.horizontalAlignment}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		componentInput={component.componentInput}
-		recomputeIds={component.recomputeIds}
-		bind:errorHandledByComponent
-		{render}
-	/>
-{:else if component.type === 'downloadcomponent'}
-	<AppDownload
-		id={component.id}
-		verticalAlignment={component.verticalAlignment}
-		horizontalAlignment={component.horizontalAlignment}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'selectcomponent' || component.type === 'resourceselectcomponent'}
-	<AppSelect
-		recomputeIds={component.recomputeIds}
-		id={component.id}
-		verticalAlignment={component.verticalAlignment}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		onSelect={component.onSelect}
-		{render}
-	/>
-{:else if component.type === 'userresourcecomponent'}
-	<AppUserResource
-		id={component.id}
-		verticalAlignment={component.verticalAlignment}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'multiselectcomponent'}
-	<AppMultiSelect
-		id={component.id}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		verticalAlignment={component.verticalAlignment}
-		{render}
-	/>
-{:else if component.type === 'multiselectcomponentv2'}
-	<AppMultiSelectV2
-		id={component.id}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		verticalAlignment={component.verticalAlignment}
-		{render}
-	/>
-{:else if component.type === 'formcomponent'}
-	<AppForm
-		id={component.id}
-		horizontalAlignment={component.horizontalAlignment}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		componentInput={component.componentInput}
-		recomputeIds={component.recomputeIds}
-		bind:errorHandledByComponent
-		{render}
-	/>
-{:else if component.type === 'formbuttoncomponent'}
-	<AppFormButton
-		id={component.id}
-		verticalAlignment={component.verticalAlignment}
-		horizontalAlignment={component.horizontalAlignment}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		componentInput={component.componentInput}
-		recomputeIds={component.recomputeIds}
-		bind:errorHandledByComponent
-		{render}
-	/>
-{:else if component.type === 'checkboxcomponent'}
-	<AppCheckbox
-		id={component.id}
-		verticalAlignment={component.verticalAlignment}
-		horizontalAlignment={component.horizontalAlignment}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		recomputeIds={component.recomputeIds}
-		onToggle={component.onToggle}
-		{render}
-	/>
-{:else if component.type === 'textinputcomponent'}
-	<AppTextInput
-		id={component.id}
-		verticalAlignment={component.verticalAlignment}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'quillcomponent'}
-	<AppQuillEditor id={component.id} configuration={component.configuration} {render} />
-{:else if component.type === 'textareainputcomponent'}
-	<AppTextInput
-		id={component.id}
-		verticalAlignment={component.verticalAlignment}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		inputType="textarea"
-		appCssKey="textareainputcomponent"
-		{render}
-	/>
-{:else if component.type === 'emailinputcomponent'}
-	<AppTextInput
-		verticalAlignment={component.verticalAlignment}
-		configuration={component.configuration}
-		inputType="email"
-		appCssKey="emailinputcomponent"
-		id={component.id}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'passwordinputcomponent'}
-	<AppTextInput
-		verticalAlignment={component.verticalAlignment}
-		configuration={component.configuration}
-		inputType="password"
-		appCssKey="passwordinputcomponent"
-		id={component.id}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'dateinputcomponent'}
-	<AppDateInput
-		verticalAlignment={component.verticalAlignment}
-		configuration={component.configuration}
-		inputType="date"
-		id={component.id}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'timeinputcomponent'}
-	<AppTimeInput
-		verticalAlignment={component.verticalAlignment}
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'datetimeinputcomponent'}
-	<AppDateTimeInput
-		verticalAlignment={component.verticalAlignment}
-		configuration={component.configuration}
-		inputType="date"
-		id={component.id}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'numberinputcomponent'}
-	<AppNumberInput
-		verticalAlignment={component.verticalAlignment}
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'currencycomponent'}
-	<AppCurrencyInput
-		verticalAlignment={component.verticalAlignment}
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'slidercomponent'}
-	<AppSliderInputs
-		verticalAlignment={component.verticalAlignment}
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'dateslidercomponent'}
-	<AppDateSliderInput
-		verticalAlignment={component.verticalAlignment}
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'horizontaldividercomponent'}
-	<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
-		verticalAlignment={component.verticalAlignment}
-		horizontalAlignment={component.horizontalAlignment}
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		position="vertical"
-		{render}
-	/>
-{:else if component.type === 'rangecomponent'}
-	<AppRangeInput
-		verticalAlignment={component.verticalAlignment}
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'tabscomponent' && component.tabs}
-	<AppTabs
-		configuration={component.configuration}
-		id={component.id}
-		tabs={component.tabs}
-		disabledTabs={component.disabledTabs}
-		onTabChange={component.onTabChange}
-		customCss={component.customCss}
-		{componentContainerHeight}
-		{render}
-	/>
-{:else if component.type === 'steppercomponent' && component.tabs}
-	<AppStepper
-		id={component.id}
-		tabs={component.tabs}
-		customCss={component.customCss}
-		{componentContainerHeight}
-		componentInput={component.componentInput}
-		onNext={component.onNext}
-		onPrevious={component.onPrevious}
-		{render}
-	/>
-{:else if component.type === 'conditionalwrapper' && component.conditions}
-	<AppConditionalWrapper
-		id={component.id}
-		conditions={component.conditions}
-		customCss={component.customCss}
-		onTabChange={component.onTabChange}
-		{componentContainerHeight}
-		{render}
-	/>
-{:else if component.type === 'containercomponent'}
-	<AppContainer
-		groupFields={component.groupFields}
-		id={component.id}
-		customCss={component.customCss}
-		{componentContainerHeight}
-		{render}
-	/>
-{:else if component.type === 'listcomponent'}
-	<AppList
-		id={component.id}
-		customCss={component.customCss}
-		configuration={component.configuration}
-		componentInput={component.componentInput}
-		{render}
-		bind:initializing
-	/>
-{:else if component.type === 'verticalsplitpanescomponent'}
-	<AppSplitpanes
-		id={component.id}
-		customCss={component.customCss}
-		panes={component.panes}
-		{componentContainerHeight}
-		{render}
-	/>
-{:else if component.type === 'horizontalsplitpanescomponent'}
-	<AppSplitpanes
-		id={component.id}
-		customCss={component.customCss}
-		panes={component.panes}
-		{componentContainerHeight}
-		horizontal={true}
-		{render}
-	/>
-{:else if component.type === 'iconcomponent'}
-	<AppIcon
-		verticalAlignment={component.verticalAlignment}
-		horizontalAlignment={component.horizontalAlignment}
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'fileinputcomponent'}
-	<AppFileInput
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		onFileChange={component.onFileChange}
-		{render}
-	/>
-{:else if component.type === 's3fileinputcomponent'}
-	<AppS3FileInput
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		onFileChange={component.onFileChange}
-		{render}
-	/>
-{:else if component.type === 'imagecomponent'}
-	<AppImage
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'drawercomponent'}
-	<AppDrawer
-		verticalAlignment={component.verticalAlignment}
-		horizontalAlignment={component.horizontalAlignment}
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		onOpenRecomputeIds={component.onOpenRecomputeIds}
-		onCloseRecomputeIds={component.onCloseRecomputeIds}
-		{render}
-	/>
-{:else if component.type === 'mapcomponent'}
-	<AppMap
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'pdfcomponent'}
-	<AppPdf
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'modalcomponent'}
-	<AppModal
-		verticalAlignment={component.verticalAlignment}
-		horizontalAlignment={component.horizontalAlignment}
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		onOpenRecomputeIds={component.onOpenRecomputeIds}
-		onCloseRecomputeIds={component.onCloseRecomputeIds}
-		{render}
-	/>
-{:else if component.type === 'schemaformcomponent'}
-	<AppSchemaForm
-		id={component.id}
-		componentInput={component.componentInput}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		{initializing}
-		{render}
-	/>
-{:else if component.type === 'selecttabcomponent'}
-	<AppSelectTab
-		id={component.id}
-		verticalAlignment={component.verticalAlignment}
-		horizontalAlignment={component.horizontalAlignment}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'selectstepcomponent'}
-	<AppSelectStep
-		id={component.id}
-		verticalAlignment={component.verticalAlignment}
-		horizontalAlignment={component.horizontalAlignment}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'chartjscomponent'}
-	<AppChartJs
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		componentInput={component.componentInput}
-		{render}
-	/>
-{:else if component.type === 'chartjscomponentv2'}
-	<AppChartJsV2
-		configuration={component.configuration}
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		componentInput={component.componentInput}
-		datasets={component.datasets}
-		xData={component.xData}
-		{render}
-	/>
-{:else if component.type === 'carousellistcomponent'}
-	<AppCarouselList
-		id={component.id}
-		configuration={component.configuration}
-		componentInput={component.componentInput}
-		customCss={component.customCss}
-		{componentContainerHeight}
-		{render}
-		bind:initializing
-	/>
-{:else if component.type === 'accordionlistcomponent'}
-	<AppAccordionList
-		id={component.id}
-		componentInput={component.componentInput}
-		customCss={component.customCss}
-		{componentContainerHeight}
-		{render}
-		bind:initializing
-	/>
-{:else if component.type === 'statcomponent'}
-	<AppStatCard
-		id={component.id}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		{render}
-	/>
-{:else if component.type === 'menucomponent'}
-	<AppMenu
-		id={component.id}
-		verticalAlignment={component.verticalAlignment}
-		horizontalAlignment={component.horizontalAlignment}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		menuItems={component.menuItems}
-		{render}
-	/>
-{:else if component.type === 'decisiontreecomponent' && component.nodes}
-	<AppDecisionTree
-		id={component.id}
-		nodes={component.nodes}
-		customCss={component.customCss}
-		{componentContainerHeight}
-		{render}
-	/>
-{:else if component.type === 'alertcomponent'}
-	<AppAlert
-		id={component.id}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		verticalAlignment={component.verticalAlignment}
-		{render}
-	/>
-{:else if component.type === 'navbarcomponent'}
-	<AppNavbar
-		id={component.id}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		navbarItems={component.navbarItems}
-		{render}
-	/>
-{:else if component.type === 'dateselectcomponent'}
-	<AppDateSelect
-		id={component.id}
-		configuration={component.configuration}
-		customCss={component.customCss}
-		verticalAlignment={component.verticalAlignment}
-		{render}
-	/>
-{:else if component.type === 'jobiddisplaycomponent'}
-	<AppDisplayComponentByJobId
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		configuration={component.configuration}
-		{render}
-	/>
-{:else if component.type === 'recomputeallcomponent'}
-	<AppRecomputeAll
-		id={component.id}
-		customCss={component.customCss}
-		bind:initializing
-		configuration={component.configuration}
-		horizontalAlignment={component.horizontalAlignment}
-		{render}
-	/>
-{/if}
+<svelte:boundary>
+	{#if component.type === 'displaycomponent'}
+		<AppDisplayComponent
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			componentInput={component.componentInput}
+			configuration={component.configuration}
+			{render}
+		/>
+	{:else if component.type === 'logcomponent'}
+		<AppLogsComponent />
+	{:else if component.type === 'jobidlogcomponent'}
+		<AppJobIdLogComponent
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			configuration={component.configuration}
+			{render}
+		/>
+	{:else if component.type === 'flowstatuscomponent'}
+		<AppFlowStatusComponent />
+	{:else if component.type === 'jobidflowstatuscomponent'}
+		<AppJobIdFlowStatus
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			configuration={component.configuration}
+			{render}
+		/>
+	{:else if component.type === 'barchartcomponent'}
+		<AppBarChart
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			componentInput={component.componentInput}
+			{render}
+		/>
+	{:else if component.type === 'timeseriescomponent'}
+		<AppTimeseries
+			id={component.id}
+			customCss={component.customCss}
+			configuration={component.configuration}
+			bind:initializing
+			componentInput={component.componentInput}
+			{render}
+		/>
+	{:else if component.type === 'htmlcomponent'}
+		<AppHtml
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			componentInput={component.componentInput}
+			{render}
+		/>
+	{:else if component.type === 'customcomponent'}
+		<AppCustomComponent
+			customComponent={component.customComponent}
+			id={component.id}
+			componentInput={component.componentInput}
+			{render}
+		/>
+	{:else if component.type === 'mardowncomponent'}
+		<AppMarkdown
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			componentInput={component.componentInput}
+			configuration={component.configuration}
+			{render}
+		/>
+	{:else if component.type === 'vegalitecomponent'}
+		<VegaLiteHtml
+			configuration={component.configuration}
+			id={component.id}
+			bind:initializing
+			componentInput={component.componentInput}
+			{render}
+		/>
+	{:else if component.type === 'plotlycomponent'}
+		<PlotlyHtml
+			id={component.id}
+			configuration={component.configuration}
+			bind:initializing
+			componentInput={component.componentInput}
+			{render}
+		/>
+	{:else if component.type === 'plotlycomponentv2'}
+		<PlotlyHtmlV2
+			id={component.id}
+			configuration={component.configuration}
+			bind:initializing
+			componentInput={component.componentInput}
+			datasets={component.datasets}
+			xData={component.xData}
+			{render}
+		/>
+	{:else if component.type === 'scatterchartcomponent'}
+		<AppScatterChart
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			componentInput={component.componentInput}
+			{render}
+		/>
+	{:else if component.type === 'piechartcomponent'}
+		<AppPieChart
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			componentInput={component.componentInput}
+			{render}
+		/>
+	{:else if component.type === 'agchartscomponent'}
+		<AppAgCharts
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			componentInput={component.componentInput}
+			datasets={component.datasets}
+			xData={component.xData}
+			{render}
+		/>
+	{:else if component.type === 'agchartscomponentee'}
+		<AppAgCharts
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			componentInput={component.componentInput}
+			datasets={component.datasets}
+			xData={component.xData}
+			license={component.license}
+			ee={true}
+			{render}
+		/>
+	{:else if component.type === 'tablecomponent'}
+		<AppTable
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			componentInput={component.componentInput}
+			actionButtons={component.actionButtons}
+			{render}
+		/>
+	{:else if component.type === 'dbexplorercomponent'}
+		<AppDbExplorer
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			actions={component.actions ?? []}
+			bind:initializing
+			{render}
+		/>
+	{:else if component.type === 'aggridcomponent'}
+		<AppAggridTable
+			id={component.id}
+			configuration={component.configuration}
+			bind:initializing
+			componentInput={component.componentInput}
+			customCss={component.customCss}
+			actions={component.actions ?? []}
+			actionsOrder={component.actionsOrder ?? undefined}
+			{render}
+		/>
+	{:else if component.type === 'aggridcomponentee'}
+		<AppAggridTableEe
+			license={component.license}
+			id={component.id}
+			configuration={component.configuration}
+			bind:initializing
+			componentInput={component.componentInput}
+			customCss={component.customCss}
+			actions={component.actions ?? []}
+			actionsOrder={component.actionsOrder ?? undefined}
+			{render}
+		/>
+	{:else if component.type === 'aggridinfinitecomponent'}
+		<AppAggridInfiniteTable
+			id={component.id}
+			configuration={component.configuration}
+			bind:initializing
+			componentInput={component.componentInput}
+			customCss={component.customCss}
+			actions={component.actions ?? []}
+			{render}
+		/>
+	{:else if component.type === 'aggridinfinitecomponentee'}
+		<AppAggridInfiniteTableEe
+			license={component.license}
+			id={component.id}
+			configuration={component.configuration}
+			bind:initializing
+			componentInput={component.componentInput}
+			customCss={component.customCss}
+			actions={component.actions ?? []}
+			{render}
+		/>
+	{:else if component.type === 'textcomponent'}
+		<AppText
+			id={component.id}
+			verticalAlignment={component.verticalAlignment}
+			horizontalAlignment={component.horizontalAlignment}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			bind:initializing
+			bind:editorMode={inlineEditorOpened}
+			componentInput={component.componentInput}
+			{render}
+		/>
+	{:else if component.type === 'codeinputcomponent'}
+		<AppCodeInputComponent id={component.id} configuration={component.configuration} {render} />
+	{:else if component.type === 'buttoncomponent'}
+		<AppButton
+			id={component.id}
+			verticalAlignment={component.verticalAlignment}
+			horizontalAlignment={component.horizontalAlignment}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			componentInput={component.componentInput}
+			recomputeIds={component.recomputeIds}
+			bind:errorHandledByComponent
+			{render}
+		/>
+	{:else if component.type === 'downloadcomponent'}
+		<AppDownload
+			id={component.id}
+			verticalAlignment={component.verticalAlignment}
+			horizontalAlignment={component.horizontalAlignment}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			{render}
+		/>
+	{:else if component.type === 'selectcomponent' || component.type === 'resourceselectcomponent'}
+		<AppSelect
+			recomputeIds={component.recomputeIds}
+			id={component.id}
+			verticalAlignment={component.verticalAlignment}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			onSelect={component.onSelect}
+			{render}
+		/>
+	{:else if component.type === 'userresourcecomponent'}
+		<AppUserResource
+			id={component.id}
+			verticalAlignment={component.verticalAlignment}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			{render}
+		/>
+	{:else if component.type === 'multiselectcomponent'}
+		<AppMultiSelect
+			id={component.id}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			verticalAlignment={component.verticalAlignment}
+			{render}
+		/>
+	{:else if component.type === 'multiselectcomponentv2'}
+		<AppMultiSelectV2
+			id={component.id}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			verticalAlignment={component.verticalAlignment}
+			{render}
+		/>
+	{:else if component.type === 'formcomponent'}
+		<AppForm
+			id={component.id}
+			horizontalAlignment={component.horizontalAlignment}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			componentInput={component.componentInput}
+			recomputeIds={component.recomputeIds}
+			bind:errorHandledByComponent
+			{render}
+		/>
+	{:else if component.type === 'formbuttoncomponent'}
+		<AppFormButton
+			id={component.id}
+			verticalAlignment={component.verticalAlignment}
+			horizontalAlignment={component.horizontalAlignment}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			componentInput={component.componentInput}
+			recomputeIds={component.recomputeIds}
+			bind:errorHandledByComponent
+			{render}
+		/>
+	{:else if component.type === 'checkboxcomponent'}
+		<AppCheckbox
+			id={component.id}
+			verticalAlignment={component.verticalAlignment}
+			horizontalAlignment={component.horizontalAlignment}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			recomputeIds={component.recomputeIds}
+			onToggle={component.onToggle}
+			{render}
+		/>
+	{:else if component.type === 'textinputcomponent'}
+		<AppTextInput
+			id={component.id}
+			verticalAlignment={component.verticalAlignment}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			onChange={component.onChange}
+			{render}
+		/>
+	{:else if component.type === 'quillcomponent'}
+		<AppQuillEditor id={component.id} configuration={component.configuration} {render} />
+	{:else if component.type === 'textareainputcomponent'}
+		<AppTextInput
+			id={component.id}
+			verticalAlignment={component.verticalAlignment}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			inputType="textarea"
+			appCssKey="textareainputcomponent"
+			onChange={component.onChange}
+			{render}
+		/>
+	{:else if component.type === 'emailinputcomponent'}
+		<AppTextInput
+			verticalAlignment={component.verticalAlignment}
+			configuration={component.configuration}
+			inputType="email"
+			appCssKey="emailinputcomponent"
+			id={component.id}
+			customCss={component.customCss}
+			onChange={component.onChange}
+			{render}
+		/>
+	{:else if component.type === 'passwordinputcomponent'}
+		<AppTextInput
+			verticalAlignment={component.verticalAlignment}
+			configuration={component.configuration}
+			inputType="password"
+			appCssKey="passwordinputcomponent"
+			id={component.id}
+			customCss={component.customCss}
+			onChange={component.onChange}
+			{render}
+		/>
+	{:else if component.type === 'dateinputcomponent'}
+		<AppDateInput
+			verticalAlignment={component.verticalAlignment}
+			configuration={component.configuration}
+			inputType="date"
+			id={component.id}
+			customCss={component.customCss}
+			onChange={component.onChange}
+			{render}
+		/>
+	{:else if component.type === 'timeinputcomponent'}
+		<AppTimeInput
+			verticalAlignment={component.verticalAlignment}
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			onChange={component.onChange}
+			{render}
+		/>
+	{:else if component.type === 'datetimeinputcomponent'}
+		<AppDateTimeInput
+			verticalAlignment={component.verticalAlignment}
+			configuration={component.configuration}
+			inputType="date"
+			id={component.id}
+			customCss={component.customCss}
+			onChange={component.onChange}
+			{render}
+		/>
+	{:else if component.type === 'numberinputcomponent'}
+		<AppNumberInput
+			verticalAlignment={component.verticalAlignment}
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			onChange={component.onChange}
+			{render}
+		/>
+	{:else if component.type === 'currencycomponent'}
+		<AppCurrencyInput
+			verticalAlignment={component.verticalAlignment}
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			{render}
+		/>
+	{:else if component.type === 'slidercomponent'}
+		<AppSliderInputs
+			verticalAlignment={component.verticalAlignment}
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			{render}
+		/>
+	{:else if component.type === 'dateslidercomponent'}
+		<AppDateSliderInput
+			verticalAlignment={component.verticalAlignment}
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			{render}
+		/>
+	{:else if component.type === 'horizontaldividercomponent'}
+		<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
+			verticalAlignment={component.verticalAlignment}
+			horizontalAlignment={component.horizontalAlignment}
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			position="vertical"
+			{render}
+		/>
+	{:else if component.type === 'rangecomponent'}
+		<AppRangeInput
+			verticalAlignment={component.verticalAlignment}
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			{render}
+		/>
+	{:else if component.type === 'tabscomponent' && component.tabs}
+		<AppTabs
+			configuration={component.configuration}
+			id={component.id}
+			tabs={component.tabs}
+			disabledTabs={component.disabledTabs}
+			onTabChange={component.onTabChange}
+			customCss={component.customCss}
+			{componentContainerHeight}
+			{render}
+		/>
+	{:else if component.type === 'steppercomponent' && component.tabs}
+		<AppStepper
+			id={component.id}
+			tabs={component.tabs}
+			customCss={component.customCss}
+			{componentContainerHeight}
+			componentInput={component.componentInput}
+			onNext={component.onNext}
+			onPrevious={component.onPrevious}
+			{render}
+		/>
+	{:else if component.type === 'conditionalwrapper' && component.conditions}
+		<AppConditionalWrapper
+			id={component.id}
+			conditions={component.conditions}
+			customCss={component.customCss}
+			onTabChange={component.onTabChange}
+			{componentContainerHeight}
+			{render}
+		/>
+	{:else if component.type === 'containercomponent'}
+		<AppContainer
+			groupFields={component.groupFields}
+			id={component.id}
+			customCss={component.customCss}
+			{componentContainerHeight}
+			{render}
+		/>
+	{:else if component.type === 'listcomponent'}
+		<AppList
+			id={component.id}
+			customCss={component.customCss}
+			configuration={component.configuration}
+			componentInput={component.componentInput}
+			{render}
+			bind:initializing
+		/>
+	{:else if component.type === 'verticalsplitpanescomponent'}
+		<AppSplitpanes
+			id={component.id}
+			customCss={component.customCss}
+			panes={component.panes}
+			{componentContainerHeight}
+			{render}
+		/>
+	{:else if component.type === 'horizontalsplitpanescomponent'}
+		<AppSplitpanes
+			id={component.id}
+			customCss={component.customCss}
+			panes={component.panes}
+			{componentContainerHeight}
+			horizontal={true}
+			{render}
+		/>
+	{:else if component.type === 'iconcomponent'}
+		<AppIcon
+			verticalAlignment={component.verticalAlignment}
+			horizontalAlignment={component.horizontalAlignment}
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			{render}
+		/>
+	{:else if component.type === 'fileinputcomponent'}
+		<AppFileInput
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			onFileChange={component.onFileChange}
+			{render}
+		/>
+	{:else if component.type === 's3fileinputcomponent'}
+		<AppS3FileInput
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			onFileChange={component.onFileChange}
+			{render}
+		/>
+	{:else if component.type === 'imagecomponent'}
+		<AppImage
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			{render}
+		/>
+	{:else if component.type === 'drawercomponent'}
+		<AppDrawer
+			verticalAlignment={component.verticalAlignment}
+			horizontalAlignment={component.horizontalAlignment}
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			onOpenRecomputeIds={component.onOpenRecomputeIds}
+			onCloseRecomputeIds={component.onCloseRecomputeIds}
+			{render}
+		/>
+	{:else if component.type === 'mapcomponent'}
+		<AppMap
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			{render}
+		/>
+	{:else if component.type === 'pdfcomponent'}
+		<AppPdf
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			{render}
+		/>
+	{:else if component.type === 'modalcomponent'}
+		<AppModal
+			verticalAlignment={component.verticalAlignment}
+			horizontalAlignment={component.horizontalAlignment}
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			onOpenRecomputeIds={component.onOpenRecomputeIds}
+			onCloseRecomputeIds={component.onCloseRecomputeIds}
+			{render}
+		/>
+	{:else if component.type === 'schemaformcomponent'}
+		<AppSchemaForm
+			id={component.id}
+			componentInput={component.componentInput}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			{initializing}
+			{render}
+		/>
+	{:else if component.type === 'selecttabcomponent'}
+		<AppSelectTab
+			id={component.id}
+			verticalAlignment={component.verticalAlignment}
+			horizontalAlignment={component.horizontalAlignment}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			{render}
+		/>
+	{:else if component.type === 'selectstepcomponent'}
+		<AppSelectStep
+			id={component.id}
+			verticalAlignment={component.verticalAlignment}
+			horizontalAlignment={component.horizontalAlignment}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			{render}
+		/>
+	{:else if component.type === 'chartjscomponent'}
+		<AppChartJs
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			componentInput={component.componentInput}
+			{render}
+		/>
+	{:else if component.type === 'chartjscomponentv2'}
+		<AppChartJsV2
+			configuration={component.configuration}
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			componentInput={component.componentInput}
+			datasets={component.datasets}
+			xData={component.xData}
+			{render}
+		/>
+	{:else if component.type === 'carousellistcomponent'}
+		<AppCarouselList
+			id={component.id}
+			configuration={component.configuration}
+			componentInput={component.componentInput}
+			customCss={component.customCss}
+			{componentContainerHeight}
+			{render}
+			bind:initializing
+		/>
+	{:else if component.type === 'accordionlistcomponent'}
+		<AppAccordionList
+			id={component.id}
+			componentInput={component.componentInput}
+			customCss={component.customCss}
+			{componentContainerHeight}
+			{render}
+			bind:initializing
+		/>
+	{:else if component.type === 'statcomponent'}
+		<AppStatCard
+			id={component.id}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			{render}
+		/>
+	{:else if component.type === 'menucomponent'}
+		<AppMenu
+			id={component.id}
+			verticalAlignment={component.verticalAlignment}
+			horizontalAlignment={component.horizontalAlignment}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			menuItems={component.menuItems}
+			{render}
+		/>
+	{:else if component.type === 'decisiontreecomponent' && component.nodes}
+		<AppDecisionTree
+			id={component.id}
+			nodes={component.nodes}
+			customCss={component.customCss}
+			{componentContainerHeight}
+			{render}
+		/>
+	{:else if component.type === 'alertcomponent'}
+		<AppAlert
+			id={component.id}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			verticalAlignment={component.verticalAlignment}
+			{render}
+		/>
+	{:else if component.type === 'navbarcomponent'}
+		<AppNavbar
+			id={component.id}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			navbarItems={component.navbarItems}
+			{render}
+		/>
+	{:else if component.type === 'dateselectcomponent'}
+		<AppDateSelect
+			id={component.id}
+			configuration={component.configuration}
+			customCss={component.customCss}
+			verticalAlignment={component.verticalAlignment}
+			{render}
+		/>
+	{:else if component.type === 'jobiddisplaycomponent'}
+		<AppDisplayComponentByJobId
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			configuration={component.configuration}
+			{render}
+		/>
+	{:else if component.type === 'recomputeallcomponent'}
+		<AppRecomputeAll
+			id={component.id}
+			customCss={component.customCss}
+			bind:initializing
+			configuration={component.configuration}
+			horizontalAlignment={component.horizontalAlignment}
+			{render}
+		/>
+	{/if}
+	{#snippet failed(error, reset)}
+		<div class="flex flex-col items-center justify-center h-full bg-red-100 p-10 h-full w-full">
+			<h3 class="text-red-500 text-2xl font-bold">Rendering of component failed</h3>
+			<pre
+				class="text-2xs mt-4 w-full font-mono border border-red-500 rounded-md p-2 bg-surface-secondary text-primary overflow-auto"
+				>{error}</pre
+			>
+			<div class="flex mt-4">
+			<Button wrapperClasses="border rounded !border-gray-400" color="dark" on:click={reset}>reset</Button>
+			</div>
+		</div>
+	{/snippet}
+</svelte:boundary>