windmill-components 1.448.50 → 1.472.2

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

@@ -0,0 +1,775 @@
+<script>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 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';
+export let component;
+export let render;
+export let componentContainerHeight;
+export let errorHandledByComponent;
+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}