windmill/frontend/src/lib/components/apps/editor/component/ComponentInner.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'
	import AppStepper from '../../components/layout/AppStepper.svelte'
	import AppSelectTab from '../../components/inputs/AppSelectTab.svelte'
	import AppConditionalWrapper from '../../components/layout/AppConditionalWrapper.svelte'
	import AppSelectStep from '../../components/inputs/AppSelectStep.svelte'
	import AppDownload from '../../components/display/AppDownload.svelte'
	import AppLogsComponent from '../../components/display/AppLogsComponent.svelte'
	import AppFlowStatusComponent from '../../components/display/AppFlowStatusComponent.svelte'
	import AppChartJs from '../../components/display/AppChartJs.svelte'
	import AppChartJsV2 from '../../components/display/AppChartJsV2.svelte'
	import AppQuillEditor from '../../components/inputs/AppQuillEditor.svelte'
	import AppList from '../../components/layout/AppList.svelte'
	import AppJobIdLogComponent from '../../components/display/AppJobIdLogComponent.svelte'
	import AppJobIdFlowStatus from '../../components/display/AppJobIdFlowStatus.svelte'
	import AppCarouselList from '../../components/display/AppCarouselList.svelte'
	import AppAccordionList from '../../components/display/AppAccordionList.svelte'
	import AppAggridTableEe from '../../components/display/table/AppAggridTableEe.svelte'
	import AppCustomComponent from '../../components/display/AppCustomComponent.svelte'
	import AppStatCard from '../../components/display/AppStatCard.svelte'
	import AppMenu from '../../components/display/AppMenu.svelte'
	import AppDecisionTree from '../../components/layout/AppDecisionTree.svelte'
	import AppAgCharts from '../../components/display/charts/AppAgCharts.svelte'
	import AppDbExplorer from '../../components/display/dbtable/AppDbExplorer.svelte'
	import AppS3FileInput from '../../components/inputs/AppS3FileInput.svelte'
	import AppAlert from '../../components/display/AppAlert.svelte'
	import AppDateSliderInput from '../../components/inputs/AppDateSliderInput.svelte'
	import AppTimeInput from '../../components/inputs/AppTimeInput.svelte'
	import AppDateTimeInput from '../../components/inputs/AppDateTimeInput.svelte'
	import AppAggridInfiniteTable from '../../components/display/table/AppAggridInfiniteTable.svelte'
	import AppAggridInfiniteTableEe from '../../components/display/table/AppAggridInfiniteTableEe.svelte'
	import AppDisplayComponent from '../../components/display/AppDisplayComponent.svelte'
	import AppTimeseries from '../../components/display/AppTimeseries.svelte'
	import AppHtml from '../../components/display/AppHtml.svelte'
	import AppMarkdown from '../../components/display/AppMarkdown.svelte'
	import VegaLiteHtml from '../../components/display/VegaLiteHtml.svelte'
	import PlotlyHtml from '../../components/display/PlotlyHtml.svelte'
	import PlotlyHtmlV2 from '../../components/display/PlotlyHtmlV2.svelte'
	import AppScatterChart from '../../components/display/AppScatterChart.svelte'
	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'
	import AppCheckbox from '../../components/inputs/AppCheckbox.svelte'
	import AppTextInput from '../../components/inputs/AppTextInput.svelte'
	import AppDateInput from '../../components/inputs/AppDateInput.svelte'
	import AppSelect from '../../components/inputs/AppSelect.svelte'
	import AppBarChart from '../../components/display/AppBarChart.svelte'
	import AppDivider from '../../components/layout/AppDivider.svelte'
	import AppRangeInput from '../../components/inputs/AppRangeInput.svelte'
	import AppTabs from '../../components/layout/AppTabs.svelte'
	import AppContainer from '../../components/layout/AppContainer.svelte'
	import AppSplitpanes from '../../components/layout/AppSplitpanes.svelte'
	import AppIcon from '../../components/display/AppIcon.svelte'
	import AppFileInput from '../../components/inputs/AppFileInput.svelte'
	import AppImage from '../../components/display/AppImage.svelte'
	import AppDrawer from '../../components/layout/AppDrawer.svelte'
	import AppMap from '../../components/display/AppMap.svelte'
	import AppPdf from '../../components/display/AppPdf.svelte'
	import AppCurrencyInput from '../../components/inputs/currency/AppCurrencyInput.svelte'
	import AppSliderInputs from '../../components/inputs/AppSliderInputs.svelte'
	import AppNumberInput from '../../components/inputs/AppNumberInput.svelte'
	import AppNavbar from '../../components/display/AppNavbar.svelte'
	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 type { AppComponent } from './components'

	export let component: AppComponent
	export let render: boolean
	export let componentContainerHeight: number
	export let errorHandledByComponent: boolean
	export let inlineEditorOpened: boolean
	export let initializing: boolean | undefined = 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 === '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}