{#if displayHeader} {/if} {#if description}

{description}

{/if}

{#if inputCat == 'number'} {#if extra['min'] != undefined && extra['max'] != undefined}

{extra['min']}

{extra['max']} {value}

{:else if extra?.currency} {:else} { dispatch('focus') }} type="number" class={twMerge( valid && error == '' ? '' : 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30' )} placeholder={defaultValue ?? ''} bind:value min={extra['min']} max={extra['max']} /> {/if} {:else if inputCat == 'boolean'} { e?.stopPropagation() }} class={valid && error == '' ? '' : 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'} bind:checked={value} /> {#if type == 'boolean' && value == undefined} Not set {/if} {:else if inputCat == 'list'}

{#if Array.isArray(itemsType?.multiselect) && Array.isArray(value)}

{:else if Array.isArray(itemsType?.enum) && Array.isArray(value)}

{:else}

{#if Array.isArray(value)} {#each value ?? [] as v, i}

{#if itemsType?.type == 'number'} {:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'} fileChanged(x, (val) => (value[i] = val))} multiple={false} /> {:else if Array.isArray(itemsType?.enum)} {:else} {/if}

{/each} {:else} List is not an array {/if}

{(value ?? []).length} item{(value ?? []).length != 1 ? 's' : ''} {/if}

{:else if inputCat == 'resource-object'} {:else if inputCat == 'object'} {#if properties && Object.keys(properties).length > 0}

{:else}

{
							dispatch('focus')
						}}
						use:autosize
						style="max-height: {maxHeight}"
						class="col-span-10 {valid && error == ''
							? ''
							: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}"
						placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
						bind:value={rawValue}
					/>
				{/if}
			{:else if inputCat == 'enum'}
				<select
					on:focus={(e) => {
						dispatch('focus')
					}}
					class="px-6"
					bind:value
				>
					{#each enum_ ?? [] as e}
						<option>{e}</option>
					{/each}
				</select>
			{:else if inputCat == 'date'}
				<DateTimeInput bind:value />
			{:else if inputCat == 'base64'}
				<div class="flex flex-col my-6 w-full">
					<input
						type="file"
						on:change={(x) => fileChanged(x, (val) => (value = val))}
						multiple={false}
					/>
					{#if value?.length}
						<div class="text-2xs text-tertiary mt-1">File length: {value.length} base64 chars</div>
					{/if}
				</div>
			{:else if inputCat == 'resource-string'}
				<div class="flex flex-row gap-x-1 w-full">
					<LightweightResourcePicker
						bind:value
						resourceType={format.split('-').length > 1
							? format.substring('resource-'.length)
							: undefined}
					/>
				</div>
			{:else if inputCat == 'email'}
				<input
					on:focus
					type="email"
					class={valid
						? ''
						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'}
					placeholder={defaultValue ?? ''}
					bind:value
				/>
			{:else if inputCat == 'currency'}
				<input
					type="number"
					class={valid
						? ''
						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'}
					placeholder={defaultValue ?? ''}
					bind:value
				/>
			{:else if inputCat == 'string'}
				<div class="flex flex-col w-full">
					<div class="flex flex-row w-full items-center justify-between">
						<textarea
							rows="1"
							bind:this={el}
							on:focus={(e) => {
								dispatch('focus')
							}}
							use:autosize
							type="text"
							class="col-span-10 {valid && error == ''
								? ''
								: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}"
							placeholder={defaultValue ?? ''}
							bind:value
							on:pointerdown|stopPropagation={(e) => {
								dispatch('inputClicked', e)
							}}
						/>
					</div>
				</div>
			{/if}
			<slot name="actions" />
		</div>
		{#if error && error != ''}
			<div class="text-right text-xs text-red-600 dark:text-red-400">
				{#if error === ''}
					 
				{:else}
					{error}
				{/if}
			</div>
		{/if}
	</div>
</div>

/* Firefox */
	input[type='number'] {
		-moz-appearance: textfield !important;
	}
</style>