fix input value initialization

frontend/src/lib/components/apps/components/display/AppBarChart.svelte

@@ -13,12 +13,13 @@
 	} from 'chart.js'
 	import { getContext } from 'svelte'
 	import { Bar, Line } from 'svelte-chartjs'
-	import { initOutput } from '../../editor/appUtils'
+	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { concatCustomCss } from '../../utils'
-	import InputValue from '../helpers/InputValue.svelte'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
+	import { components } from '../../editor/component'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 	export let id: string
 	export let componentInput: AppInput | undefined
 	export let configuration: RichConfigurations
@@ -28,6 +29,11 @@
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
+	let resolvedConfig = initConfig(
+		components['barchartcomponent'].initialData.configuration,
+		configuration
+	)
+
 	let outputs = initOutput($worldStore, id, {
 		result: undefined,
 		loading: false
@@ -45,8 +51,6 @@
 	)
 
 	let result: { data: number[]; labels?: string[] } | undefined = undefined
-	let theme: string = 'theme1'
-	let lineChart = false
 
 	$: backgroundColor = {
 		theme1: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
@@ -54,7 +58,7 @@
 		theme2: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'],
 		// red theme
 		theme3: ['#e74a3b', '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e']
-	}[theme]
+	}[resolvedConfig.theme ?? 'theme1']
 
 	const lineOptions: ChartOptions<'line'> = {
 		responsive: true,
@@ -104,13 +108,19 @@
 	$: css = concatCustomCss($app.css?.barchartcomponent, customCss)
 </script>
 
-<InputValue {id} input={configuration.theme} bind:value={theme} />
-<InputValue {id} input={configuration.line} bind:value={lineChart} />
+{#each Object.keys(components['barchartcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
-			{#if lineChart}
+			{#if resolvedConfig.line}
 				<Line {data} options={lineOptions} />
 			{:else}
 				<Bar {data} options={barOptions} />

frontend/src/lib/components/apps/components/display/AppIcon.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
-	import { initOutput } from '../../editor/appUtils'
+	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { concatCustomCss } from '../../utils'
-	import { AlignWrapper, InputValue } from '../helpers'
+	import { AlignWrapper } from '../helpers'
 	import { loadIcon } from '../icon'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
+	import { components } from '../../editor/component'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 
 	export let id: string
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = 'left'
@@ -16,16 +18,16 @@
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
+	let resolvedConfig = initConfig(
+		components['iconcomponent'].initialData.configuration,
+		configuration
+	)
 	//used so that we can count number of outputs setup for first refresh
 	initOutput($worldStore, id, {})
 
-	let icon: string | undefined = undefined
-	let size: number
-	let color: string
-	let strokeWidth: number
 	let iconComponent: any
 
-	$: handleIcon(icon)
+	$: handleIcon(resolvedConfig.icon)
 
 	async function handleIcon(i?: string) {
 		iconComponent = i ? await loadIcon(i) : undefined
@@ -34,11 +36,14 @@
 	$: css = concatCustomCss($app.css?.iconcomponent, customCss)
 </script>
 
-<InputValue {id} input={configuration.icon} bind:value={icon} />
-<InputValue {id} input={configuration.size} bind:value={size} />
-<InputValue {id} input={configuration.color} bind:value={color} />
-<InputValue {id} input={configuration.strokeWidth} bind:value={strokeWidth} />
-
+{#each Object.keys(components['iconcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 <InitializeComponent {id} />
 
 <AlignWrapper
@@ -48,12 +53,12 @@
 	class={css?.container?.class ?? ''}
 	style={css?.container?.style ?? ''}
 >
-	{#if icon && iconComponent}
+	{#if resolvedConfig.icon && iconComponent}
 		<svelte:component
 			this={iconComponent}
-			size={size || 24}
-			color={color || 'currentColor'}
-			strokeWidth={strokeWidth || 2}
+			size={resolvedConfig.size || 24}
+			color={resolvedConfig.color || 'currentColor'}
+			strokeWidth={resolvedConfig.strokeWidth || 2}
 			class={css?.icon?.class ?? ''}
 			style={css?.icon?.style ?? ''}
 		/>

frontend/src/lib/components/apps/components/display/AppMap.svelte

@@ -196,10 +196,10 @@
 	}
 </script>
 
-<InputValue {id} input={configuration.longitude} bind:value={longitude} />
-<InputValue {id} input={configuration.latitude} bind:value={latitude} />
-<InputValue {id} input={configuration.zoom} bind:value={zoom} />
-<InputValue {id} input={configuration.markers} bind:value={markers} />
+<InputValue key="longitude" {id} input={configuration.longitude} bind:value={longitude} />
+<InputValue key="latitude" {id} input={configuration.latitude} bind:value={latitude} />
+<InputValue key="zoom" {id} input={configuration.zoom} bind:value={zoom} />
+<InputValue key="markers" {id} input={configuration.markers} bind:value={markers} />
 
 <InitializeComponent {id} />
 

frontend/src/lib/components/apps/components/display/AppPdf.svelte

@@ -190,8 +190,8 @@
 	$: css = concatCustomCss($app.css?.pdfcomponent, customCss)
 </script>
 
-<InputValue {id} input={configuration.source} bind:value={source} />
-<InputValue {id} input={configuration.zoom} bind:value={zoom} />
+<InputValue key="source" {id} input={configuration.source} bind:value={source} />
+<InputValue key="zoom" {id} input={configuration.zoom} bind:value={zoom} />
 
 <InitializeComponent {id} />
 

frontend/src/lib/components/apps/components/display/AppPieChart.svelte

@@ -75,8 +75,8 @@
 	$: css = concatCustomCss($app.css?.piechartcomponent, customCss)
 </script>
 
-<InputValue {id} input={configuration.theme} bind:value={theme} />
-<InputValue {id} input={configuration.doughnutStyle} bind:value={doughnut} />
+<InputValue key="theme" {id} input={configuration.theme} bind:value={theme} />
+<InputValue key="doughnut" {id} input={configuration.doughnutStyle} bind:value={doughnut} />
 
 <RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>

frontend/src/lib/components/apps/components/display/AppScatterChart.svelte

@@ -81,8 +81,8 @@
 	$: css = concatCustomCss($app.css?.scatterchartcomponent, customCss)
 </script>
 
-<InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
-<InputValue {id} input={configuration.pannable} bind:value={pannable} />
+<InputValue key="zoomable" {id} input={configuration.zoomable} bind:value={zoomable} />
+<InputValue key="pannable" {id} input={configuration.pannable} bind:value={pannable} />
 
 <RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>

frontend/src/lib/components/apps/components/display/AppTimeseries.svelte

@@ -95,9 +95,14 @@
 	$: css = concatCustomCss($app.css?.timeseriescomponent, customCss)
 </script>
 
-<InputValue {id} input={configuration.logarithmicScale} bind:value={logarithmicScale} />
-<InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
-<InputValue {id} input={configuration.pannable} bind:value={pannable} />
+<InputValue
+	key="logarithmicScale"
+	{id}
+	input={configuration.logarithmicScale}
+	bind:value={logarithmicScale}
+/>
+<InputValue key="zoomable" {id} input={configuration.zoomable} bind:value={zoomable} />
+<InputValue key="pannable" {id} input={configuration.pannable} bind:value={pannable} />
 
 <RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>

frontend/src/lib/components/apps/components/display/VegaLiteHtml.svelte

@@ -57,7 +57,7 @@
 		)
 </script>
 
-<InputValue {id} input={configuration.canvas} bind:value={canvas} />
+<InputValue key={'canvas'} {id} input={configuration.canvas} bind:value={canvas} />
 
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
 	<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>

frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte

@@ -29,7 +29,7 @@
 <InitializeComponent {id} />
 
 {#if componentInput.type !== 'runnable'}
-	<InputValue {id} input={componentInput} bind:value={result} />
+	<InputValue key="nonrunnable" {id} input={componentInput} bind:value={result} />
 {/if}
 
 {#if render}

frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte

@@ -462,7 +462,7 @@
 	{#if v.type != 'static' && v.type != 'user'}
 		<InputValue
 			bind:this={inputValues[key]}
-			key={key + extraKey + (iterContext ? $iterContext?.index : '')}
+			key={key + extraKey}
 			{id}
 			input={fields[key]}
 			bind:value={runnableInputValues[key]}
@@ -472,7 +472,7 @@
 
 {#if runnable?.type == 'runnableByName' && runnable.inlineScript?.language == 'frontend'}
 	{#each runnable.inlineScript.refreshOn ?? [] as { id: tid, key } (`${tid}-${key}`)}
-		{@const fkey = `${tid}-${key}${extraKey}${iterContext ? $iterContext?.index : ''}}`}
+		{@const fkey = `${tid}-${key}${extraKey}`}
 		<InputValue
 			{id}
 			key={fkey}

frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { getContext } from 'svelte'
-	import { initOutput } from '../../editor/appUtils'
+	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type {
 		AppViewerContext,
 		ComponentCustomCSS,
@@ -12,7 +12,8 @@
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
-	import { InputValue } from '../helpers'
+	import { components } from '../../editor/component'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -34,11 +35,12 @@
 	const rowContext = getContext<ListContext>('RowWrapperContext')
 	const rowInputs: ListInputs | undefined = getContext<ListInputs>('RowInputs')
 
-	let value: boolean = false
+	let resolvedConfig = initConfig(
+		components['checkboxcomponent'].initialData.configuration,
+		configuration
+	)
 
-	let defaultValue: boolean | undefined = undefined
-	let label: string = ''
-	let disabled: boolean = false
+	let value: boolean = resolvedConfig.defaultValue ?? false
 
 	$componentControl[id] = {
 		setValue(nvalue: boolean) {
@@ -71,33 +73,39 @@
 	}
 
 	function handleDefault() {
-		value = defaultValue ?? false
+		value = resolvedConfig.defaultValue ?? false
 		handleInput()
 	}
 
 	$: value != undefined && handleInput()
 
-	$: defaultValue != undefined && handleDefault()
+	$: resolvedConfig.defaultValue != undefined && handleDefault()
 
 	$: css = concatCustomCss($app.css?.checkboxcomponent, customCss)
 </script>
 
-<InputValue {id} key={extraKey} input={configuration.label} bind:value={label} />
-<InputValue {id} key={extraKey} input={configuration.defaultValue} bind:value={defaultValue} />
-<InputValue {id} key={extraKey} input={configuration.disabled} bind:value={disabled} />
+{#each Object.keys(components['checkboxcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		{extraKey}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <InitializeComponent {id} />
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<Toggle
 		size="sm"
 		bind:checked={value}
-		options={{ right: label }}
+		options={{ right: resolvedConfig.label }}
 		textClass={css?.text?.class ?? ''}
 		textStyle={css?.text?.style ?? ''}
 		on:change={(e) => {
 			preclickAction?.()
 			value = e.detail
 		}}
-		{disabled}
+		disabled={resolvedConfig.disabled}
 	/>
 </AlignWrapper>

frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
-	import { initOutput } from '../../editor/appUtils'
+	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
-	import InputValue from '../helpers/InputValue.svelte'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 	import { parseISO, format as formatDateFns } from 'date-fns'
+	import { components } from '../../editor/component'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -18,11 +19,11 @@
 
 	const { app, worldStore, selectedComponent, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
-	let labelValue: string = 'Title'
-	let minValue: string = ''
-	let maxValue: string = ''
-	let defaultValue: string | undefined = undefined
-	let format: string | undefined = undefined
+
+	let resolvedConfig = initConfig(
+		components['dateinputcomponent'].initialData.configuration,
+		configuration
+	)
 
 	let value: string | undefined = undefined
 
@@ -36,7 +37,7 @@
 		result: undefined as string | undefined
 	})
 
-	$: handleDefault(defaultValue)
+	$: handleDefault(resolvedConfig.defaultValue)
 
 	function formatDate(dateString: string, formatString: string = 'dd.MM.yyyy') {
 		if (formatString === '') {
@@ -51,7 +52,7 @@
 		}
 	}
 
-	$: value && outputs?.result.set(formatDate(value, format))
+	$: value && outputs?.result.set(formatDate(value, resolvedConfig.outputFormat))
 
 	function handleDefault(defaultValue: string | undefined) {
 		value = defaultValue
@@ -59,11 +60,14 @@
 	$: css = concatCustomCss($app.css?.dateinputcomponent, customCss)
 </script>
 
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
-<InputValue {id} input={configuration.minDate} bind:value={minValue} />
-<InputValue {id} input={configuration.maxDate} bind:value={maxValue} />
-<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
-<InputValue {id} input={configuration.outputFormat} bind:value={format} />
+{#each Object.keys(components['dateinputcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <InitializeComponent {id} />
 
@@ -74,8 +78,8 @@
 			on:pointerdown|stopPropagation
 			type="date"
 			bind:value
-			min={minValue}
-			max={maxValue}
+			min={resolvedConfig.minDate}
+			max={resolvedConfig.maxDate}
 			placeholder="Type..."
 			class={twMerge(css?.input?.class ?? '')}
 			style={css?.input?.style ?? ''}

frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte

@@ -39,10 +39,15 @@
 	$: css = concatCustomCss($app.css?.fileinputcomponent, customCss)
 </script>
 
-<InputValue {id} input={configuration.acceptedFileTypes} bind:value={acceptedFileTypes} />
-<InputValue {id} input={configuration.allowMultiple} bind:value={allowMultiple} />
-<InputValue {id} input={configuration.text} bind:value={text} />
-<InputValue {id} input={configuration.includeMimeType} bind:value={includeMimeType} />
+<InputValue
+	key="accepted"
+	{id}
+	input={configuration.acceptedFileTypes}
+	bind:value={acceptedFileTypes}
+/>
+<InputValue key="multiple" {id} input={configuration.allowMultiple} bind:value={allowMultiple} />
+<InputValue key="text" {id} input={configuration.text} bind:value={text} />
+<InputValue key="mime" {id} input={configuration.includeMimeType} bind:value={includeMimeType} />
 
 <InitializeComponent {id} />
 

frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
-	import { initOutput } from '../../editor/appUtils'
+	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type {
 		AppViewerContext,
 		ComponentCustomCSS,
@@ -11,8 +11,9 @@
 	} from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
-	import InputValue from '../helpers/InputValue.svelte'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
+	import { components } from '../../editor/component'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -25,25 +26,24 @@
 	const iterContext = getContext<ListContext>('ListWrapperContext')
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
-	let defaultValue: number | undefined = undefined
-	let placeholder: string | undefined = undefined
-	let value: number | undefined = undefined
+	let resolvedConfig = initConfig(
+		components['numberinputcomponent'].initialData.configuration,
+		configuration
+	)
+
+	let value: number | undefined = resolvedConfig.defaultValue
 
 	$componentControl[id] = {
-		setValue(nvalue: number) {
+		setValue(nvalue: number | undefined) {
 			value = nvalue
 		}
 	}
 
-	let min: number | undefined = undefined
-	let max: number | undefined = undefined
-	let step = 1
-
 	let outputs = initOutput($worldStore, id, {
 		result: undefined as number | undefined
 	})
 
-	$: handleDefault(defaultValue)
+	$: handleDefault(resolvedConfig.defaultValue)
 
 	$: {
 		outputs?.result.set(value)
@@ -59,11 +59,14 @@
 	$: css = concatCustomCss($app.css?.numberinputcomponent, customCss)
 </script>
 
-<InputValue {id} input={configuration.step} bind:value={step} />
-<InputValue {id} input={configuration.min} bind:value={min} />
-<InputValue {id} input={configuration.max} bind:value={max} />
-<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
-<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+{#each Object.keys(components['numberinputcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <InitializeComponent {id} />
 
@@ -77,12 +80,12 @@
 		)}
 		style={css?.input?.style ?? ''}
 		bind:value
-		{min}
-		{max}
-		{step}
+		min={resolvedConfig.min}
+		max={resolvedConfig.max}
+		step={resolvedConfig.step}
 		type="number"
 		inputmode="numeric"
 		pattern="\d*"
-		{placeholder}
+		placeholder={resolvedConfig.placeholder}
 	/>
 </AlignWrapper>

frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte

@@ -83,8 +83,8 @@
 	}
 </script>
 
-<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
-<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputValue key="placeholder" {id} input={configuration.placeholder} bind:value={placeholder} />
+<InputValue key="value" {id} input={configuration.defaultValue} bind:value={defaultValue} />
 
 <InitializeComponent {id} />
 {#if render}

frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte

@@ -32,9 +32,11 @@
 	)
 
 	let values: [number, number] = [0, 1]
-	$: (resolvedConfig.defaultLow || resolvedConfig.defaultHigh) && handleMin()
 
-	function handleMin() {
+	$: (resolvedConfig.defaultLow != undefined || resolvedConfig.defaultHigh != undefined) &&
+		handleDefault()
+
+	function handleDefault() {
 		values = [resolvedConfig?.defaultLow ?? 0, resolvedConfig?.defaultHigh ?? 1]
 	}
 

frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte

@@ -9,11 +9,12 @@
 		RichConfigurations
 	} from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
-	import InputValue from '../helpers/InputValue.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { concatCustomCss } from '../../utils'
-	import { initOutput } from '../../editor/appUtils'
+	import { initConfig, initOutput } from '../../editor/appUtils'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
+	import { components } from '../../editor/component'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -26,9 +27,19 @@
 
 	const { app, worldStore, selectedComponent, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
-	let min = 0
-	let max = 42
-	let step = 1
+
+	let resolvedConfig = initConfig(
+		components['slidercomponent'].initialData.configuration,
+		configuration
+	)
+
+	let values: [number] = [resolvedConfig.defaultValue ?? 0]
+
+	$: resolvedConfig.defaultValue != undefined && handleDefault()
+
+	function handleDefault() {
+		values = [resolvedConfig?.defaultValue ?? 0]
+	}
 
 	let slider: HTMLElement
 
@@ -36,11 +47,9 @@
 		result: (0 as number) || null
 	})
 
-	let values: [number] = [outputs?.result.peak() ?? 0]
-
 	$componentControl[id] = {
 		setValue(nvalue: number) {
-			values[0] = nvalue
+			values = [nvalue]
 		}
 	}
 
@@ -74,7 +83,7 @@
 	const spanClass =
 		'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5'
 	function computeWidth() {
-		let maxValue = max + step
+		let maxValue = resolvedConfig.max ?? 0 + (resolvedConfig.step ?? 0)
 
 		if (typeof document !== 'undefined') {
 			const span = document.createElement('span')
@@ -89,24 +98,28 @@
 		}
 	}
 
-	$: if (max && step && render) {
+	$: if (resolvedConfig.max != undefined && resolvedConfig.step && render) {
 		computeWidth()
 	}
 
 	let vertical = false
 </script>
 
-<InputValue {id} input={configuration.step} bind:value={step} />
-<InputValue {id} input={configuration.min} bind:value={min} />
-<InputValue {id} input={configuration.max} bind:value={max} />
-<InputValue {id} input={configuration.vertical} bind:value={vertical} />
-<InputValue {id} input={configuration.defaultValue} bind:value={values[0]} />
+{#each Object.keys(components['slidercomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
 <InitializeComponent {id} />
 
 <AlignWrapper {render} hFull {verticalAlignment}>
 	<div class="flex {vertical ? 'flex-col' : ''} items-center w-full h-full gap-1 px-1">
 		<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
-			{vertical ? +max : +min}
+			{vertical ? +(resolvedConfig?.max ?? 0) : +(resolvedConfig?.min ?? 0)}
 		</span>
 		<div
 			class="grow"
@@ -114,10 +127,17 @@
 				''}"
 			on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
 		>
-			<RangeSlider {vertical} bind:slider bind:values {step} min={+min} max={+max} />
+			<RangeSlider
+				{vertical}
+				bind:slider
+				bind:values
+				step={resolvedConfig.step}
+				min={+(resolvedConfig?.min ?? 0)}
+				max={+(resolvedConfig?.max ?? 0)}
+			/>
 		</div>
 		<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
-			{vertical ? +min : +max}
+			{vertical ? +(resolvedConfig?.min ?? 0) : +(resolvedConfig?.max ?? 1)}
 		</span>
 		<span class="mx-2">
 			<span

frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
-	import { initOutput, selectId } from '../../editor/appUtils'
+	import { initConfig, initOutput, selectId } from '../../editor/appUtils'
 	import type {
 		AppViewerContext,
 		ComponentCustomCSS,
@@ -11,8 +11,9 @@
 	} from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
-	import InputValue from '../helpers/InputValue.svelte'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
+	import { components } from '../../editor/component'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -29,12 +30,15 @@
 	const { app, worldStore, selectedComponent, connectingInput, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 
+	let resolvedConfig = initConfig(
+		components['textinputcomponent'].initialData.configuration,
+		configuration
+	)
+
 	const iterContext = getContext<ListContext>('ListWrapperContext')
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
-	let placeholder: string | undefined = undefined
-	let defaultValue: string | undefined = undefined
-	let value: string | undefined = undefined
+	let value: string | undefined = resolvedConfig.defaultValue
 
 	let outputs = initOutput($worldStore, id, {
 		result: ''
@@ -46,7 +50,7 @@
 		}
 	}
 
-	$: handleDefault(defaultValue)
+	$: handleDefault(resolvedConfig.defaultValue)
 
 	$: {
 		let val = value ?? ''
@@ -63,9 +67,14 @@
 	$: css = concatCustomCss($app.css?.[appCssKey], customCss)
 </script>
 
-<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
-<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
-
+{#each Object.keys(components['textinputcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 <InitializeComponent {id} />
 {#if render}
 	{#if inputType === 'textarea'}
@@ -79,7 +88,7 @@
 				!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
 			on:keydown|stopPropagation
 			bind:value
-			{placeholder}
+			placeholder={resolvedConfig.placeholder}
 		/>
 	{:else}
 		<AlignWrapper {render} {verticalAlignment}>
@@ -95,7 +104,7 @@
 					on:keydown|stopPropagation
 					type="password"
 					bind:value
-					{placeholder}
+					placeholder={resolvedConfig.placeholder}
 				/>
 			{:else if inputType === 'text'}
 				<input
@@ -109,7 +118,7 @@
 					on:keydown|stopPropagation
 					type="text"
 					bind:value
-					{placeholder}
+					placeholder={resolvedConfig.placeholder}
 				/>
 			{:else if inputType === 'email'}
 				<input
@@ -123,7 +132,7 @@
 					on:keydown|stopPropagation
 					type="email"
 					bind:value
-					{placeholder}
+					placeholder={resolvedConfig.placeholder}
 				/>
 			{/if}
 		</AlignWrapper>

frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { initOutput } from '$lib/components/apps/editor/appUtils'
+	import { initConfig, initOutput } from '$lib/components/apps/editor/appUtils'
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import type {
@@ -11,9 +11,10 @@
 	} from '../../../types'
 	import { concatCustomCss } from '../../../utils'
 	import AlignWrapper from '../../helpers/AlignWrapper.svelte'
-	import InputValue from '../../helpers/InputValue.svelte'
 	import CurrencyInput from './CurrencyInput.svelte'
 	import InitializeComponent from '../../helpers/InitializeComponent.svelte'
+	import ResolveConfig from '../../helpers/ResolveConfig.svelte'
+	import { components } from '$lib/components/apps/editor/component'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -30,12 +31,12 @@
 		result: null as number | null
 	})
 
-	let defaultValue: number | undefined = undefined
+	let resolvedConfig = initConfig(
+		components['currencycomponent'].initialData.configuration,
+		configuration
+	)
 
-	let isNegativeAllowed: boolean | undefined = undefined
-	let currency: string | undefined = undefined
-	let locale: string | undefined = undefined
-	let value: number | undefined = undefined
+	let value: number | undefined = resolvedConfig.defaultValue
 
 	$componentControl[id] = {
 		setValue(nvalue: number) {
@@ -50,29 +51,33 @@
 		}
 	}
 
-	function handleDefault() {
-		value = defaultValue
+	function handleDefault(dflt: number | undefined) {
+		value = dflt
 		handleInput()
 	}
 
 	$: value != undefined && handleInput()
 
-	$: defaultValue != undefined && handleDefault()
+	$: handleDefault(resolvedConfig.defaultValue)
 
 	$: css = concatCustomCss($app.css?.currencycomponent, customCss)
 </script>
 
-<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
-<InputValue {id} input={configuration.isNegativeAllowed} bind:value={isNegativeAllowed} />
-<InputValue {id} input={configuration.currency} bind:value={currency} />
-<InputValue {id} input={configuration.locale} bind:value={locale} />
+{#each Object.keys(components['currencycomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <InitializeComponent {id} />
 
 <AlignWrapper {render} {verticalAlignment}>
-	{#key isNegativeAllowed}
-		{#key locale}
-			{#key currency}
+	{#key resolvedConfig.isNegativeAllowed}
+		{#key resolvedConfig.locale}
+			{#key resolvedConfig.currency}
 				<div class="w-full" on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}>
 					<CurrencyInput
 						inputClasses={{
@@ -82,9 +87,9 @@
 						}}
 						style={css?.input?.style}
 						bind:value
-						{currency}
-						{locale}
-						{isNegativeAllowed}
+						currency={resolvedConfig.currency}
+						locale={resolvedConfig.locale}
+						isNegativeAllowed={resolvedConfig.isNegativeAllowed}
 					/>
 				</div>
 			{/key}

frontend/src/lib/components/apps/components/layout/AppConditionalWrapper.svelte

@@ -66,7 +66,7 @@
 </script>
 
 {#each conditions ?? [] as condition, index}
-	<InputValue {id} input={condition} bind:value={resolvedConditions[index]} />
+	<InputValue key="conditions" {id} input={condition} bind:value={resolvedConditions[index]} />
 {/each}
 
 <InitializeComponent {id} />

frontend/src/lib/components/apps/components/layout/AppDivider.svelte

@@ -46,8 +46,8 @@
 	}
 </script>
 
-<InputValue {id} input={configuration.size} bind:value={size} />
-<InputValue {id} input={configuration.color} bind:value={color} />
+<InputValue key="size" {id} input={configuration.size} bind:value={size} />
+<InputValue key="color" {id} input={configuration.color} bind:value={color} />
 <InitializeComponent {id} />
 
 <AlignWrapper

frontend/src/lib/components/apps/components/layout/AppTabs.svelte

@@ -86,12 +86,12 @@
 	let resolvedDisabledTabs: boolean[] = []
 </script>
 
-<InputValue {id} input={configuration.tabsKind} bind:value={resolvedConfig.tabsKind} />
+<InputValue key="kind" {id} input={configuration.tabsKind} bind:value={resolvedConfig.tabsKind} />
 
 <InitializeComponent {id} />
 
 {#each disabledTabs ?? [] as disableTab, index}
-	<InputValue {id} input={disableTab} bind:value={resolvedDisabledTabs[index]} />
+	<InputValue key="disable" {id} input={disableTab} bind:value={resolvedDisabledTabs[index]} />
 {/each}
 
 <div class={resolvedConfig.tabsKind == 'sidebar' ? 'flex gap-4 w-full' : 'w-full'}>

frontend/src/lib/components/apps/editor/component/components.ts

@@ -335,7 +335,7 @@ const onSuccessClick = {
 				fieldType: 'text',
 				type: 'static',
 				value: '',
-				placeholder: 'Hello there',
+				placeholder: 'Hello there'
 			}
 		},
 		openModal: {
@@ -343,7 +343,7 @@ const onSuccessClick = {
 				tooltip: 'The id of the modal to open',
 				fieldType: 'text',
 				type: 'static',
-				value: '',
+				value: ''
 			}
 		},
 		closeModal: {
@@ -351,7 +351,7 @@ const onSuccessClick = {
 				tooltip: 'The id of the modal to close',
 				fieldType: 'text',
 				type: 'static',
-				value: '',
+				value: ''
 			}
 		}
 	}
@@ -1896,7 +1896,9 @@ This is a paragraph.
 				outputFormat: {
 					type: 'static',
 					value: undefined,
-					fieldType: 'text'
+					fieldType: 'text',
+					tooltip: 'See date-fns format for more information',
+					documentationLink: 'https://date-fns.org/v1.29.0/docs/format'
 				}
 			}
 		}

frontend/src/lib/components/apps/editor/settingsPanel/TableActionLabel.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-	import InputValue from '../../components/helpers/InputValue.svelte'
-	import type { RichConfiguration } from '../../types'
-
-	export let componentInput: RichConfiguration | undefined
-	let label: string = ''
-</script>
-
-{#if componentInput !== undefined}
-	<InputValue input={componentInput} bind:value={label} />
-{/if}
-
-{label}