{#if diffStatus && typeof diffStatus === 'object' && diffStatus.diff !== 'same'}

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

{description}

{/if}

{#if inputCat == 'number'} {#if extra['min'] != undefined && extra['max'] != undefined} {:else if extra['seconds'] !== undefined} {:else if extra?.currency} {:else}

{ ignoreValueUndefined = true }} class={valid ? '' : 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'} placeholder={placeholder ?? defaultValue ?? ''} bind:value min={extra['min']} max={extra['max']} />

{/if} {:else if inputCat == 'boolean'}

{ e?.stopPropagation() }} {disabled} class={valid ? '' : 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'} bind:checked={value} /> {#if type == 'boolean' && value == undefined} Not set {/if}

{:else if inputCat == 'list' && !isListJson}

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

{ dispatch('focus') }} />

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

{ dispatch('focus') }} />

{:else}

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

{#if itemsType?.type == 'number'} {:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'} fileChanged(x, (val) => (value[i] = val))} multiple={false} /> {:else if itemsType?.type == 'object' && itemsType?.resourceType === undefined && itemsType?.properties === undefined} {#await import('$lib/components/JsonEditor.svelte')} {:then Module} {/await} {:else if Array.isArray(itemsType?.enum)} { dispatch('focus') }} on:blur={(e) => { dispatch('blur') }} {defaultValue} {valid} {disabled} {autofocus} bind:value={v} enum_={itemsType?.enum ?? []} enumLabels={extra['enumLabels']} /> {:else if itemsType?.type == 'resource' && itemsType?.resourceType && resourceTypes?.includes(itemsType.resourceType)} {:else if itemsType?.type == 'resource'} {#await import('$lib/components/JsonEditor.svelte')} {:then Module} { dispatch('focus') }} on:blur={(e) => { dispatch('blur') }} code={JSON.stringify(v, null, 2)} bind:value={v} /> {/await} {:else if itemsType?.type === 'object' && itemsType?.properties}

{:else} {/if}

{/if} {/each} {#if value.length > itemsLimit} {/if} {/if} {/key}

{/if}

{ // Once the user has changed the input type, we should not change it back automatically if (!hasIsListJsonChanged) { hasIsListJsonChanged = true } evalValueToRaw() isListJson = !isListJson }} checked={isListJson} textClass="text-secondary" size="xs" options={{ right: 'json' }} />

{:else if inputCat == 'dynselect'} {:else if inputCat == 'resource-object' && resourceTypes == undefined} Loading resource types... {:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format.split('-').length > 1 && resourceTypes.includes(format.substring('resource-'.length))))} { defaultValue = null }} {showSchemaExplorer} /> {:else if inputCat == 'resource-object' && format.split('-').length > 1 && format .replace('resource-', '') .replace('_', '') .toLowerCase() == 's3object'}

{#if s3FileUploadRawMode} {#await import('$lib/components/JsonEditor.svelte')} {:then Module} { dispatch('focus') }} on:blur={(e) => { dispatch('blur') }} code={JSON.stringify(value ?? defaultValue ?? { s3: '' }, null, 2)} bind:value /> {/await} {:else} { value = { s3: evt.detail?.path ?? '', filename: evt.detail?.filename ?? '' } }} on:deletion={(evt) => { value = { s3: '' } }} defaultValue={defaultValue?.s3} /> {/if}

{:else if inputCat == 'object' || inputCat == 'resource-object' || isListJson} {#if oneOf && oneOf.length >= 2}

{#if oneOf && oneOf.length >= 2} { value = { label: oneOfSelected } redraw += 1 }} > {#each oneOf as obj} {/each} {#if oneOfSelected} {@const objIdx = oneOf.findIndex((o) => o.title === oneOfSelected)} {@const obj = oneOf[objIdx]} {#if obj && obj.properties && Object.keys(obj.properties).length > 0} {#key redraw}

{#if orderEditable} { if (oneOf && oneOf[objIdx]) { const keys = e.detail oneOf[objIdx].order = keys } }} on:change={() => { dispatch('nestedChange') }} on:nestedChange {shouldDispatchChanges} /> {:else} { dispatch('nestedChange') }} on:nestedChange /> {/if}

{/key} {:else if disabled}

{:else}
								{#await import('$lib/components/JsonEditor.svelte')}
									<Loader2 class="animate-spin" />
								{:then Module}
									<Module.default
										bind:editor
										on:focus={(e) => {
											dispatch('focus')
										}}
										on:blur={(e) => {
											dispatch('blur')
										}}
										code={rawValue}
										bind:value
									/>
								{/await}
							{/if}
						{/if}
					{:else if disabled}
						<textarea disabled />
					{:else}
						{#await import('$lib/components/JsonEditor.svelte')}
							<Loader2 class="animate-spin" />
						{:then Module}
							<Module.default
								bind:editor
								on:focus={(e) => {
									dispatch('focus')
								}}
								on:blur={(e) => {
									dispatch('blur')
								}}
								code={rawValue}
								bind:value
							/>
						{/await}
					{/if}
				</div>
			{:else if properties && Object.keys(properties).length > 0 && inputCat !== 'list'}
				<div class={hideNested ? 'hidden' : 'py-4 pr-2 pl-6 border rounded-md w-full'}>
					{#if orderEditable}
						<SchemaFormDnd
							{nestedClasses}
							{onlyMaskPassword}
							{disablePortal}
							{disabled}
							schema={{
								properties,
								$schema: '',
								required: nestedRequired ?? [],
								type: 'object',
								order
							}}
							bind:args={value}
							dndType={`nested-${title}`}
							on:reorder={(e) => {
								const keys = e.detail
								order = keys
							}}
							on:change={() => {
								dispatch('nestedChange')
							}}
							diff={diffStatus && typeof diffStatus.diff === 'object' ? diffStatus.diff : {}}
							on:acceptChange={(e) => {
								dispatch('acceptChange', e.detail)
							}}
							on:rejectChange={(e) => {
								dispatch('rejectChange', e.detail)
							}}
							on:nestedChange
							nestedParent={{ label, nestedParent }}
							{shouldDispatchChanges}
						/>
					{:else}
						<SchemaForm
							{nestedClasses}
							{onlyMaskPassword}
							{disablePortal}
							{disabled}
							schema={{
								properties,
								order,
								$schema: '',
								required: nestedRequired ?? [],
								type: 'object'
							}}
							bind:args={value}
							diff={diffStatus && typeof diffStatus.diff === 'object' ? diffStatus.diff : {}}
							nestedParent={{ label, nestedParent }}
							on:acceptChange={(e) => {
								dispatch('acceptChange', e.detail)
							}}
							on:rejectChange={(e) => {
								dispatch('rejectChange', e.detail)
							}}
							on:change={() => {
								dispatch('nestedChange')
							}}
							on:nestedChange
							{shouldDispatchChanges}
						/>
					{/if}
				</div>
			{:else if disabled}
				<textarea disabled />
			{:else}
				{#await import('$lib/components/JsonEditor.svelte')}
					<Loader2 class="animate-spin" />
				{:then Module}
					<Module.default
						bind:editor
						on:focus={(e) => {
							dispatch('focus')
						}}
						on:blur={(e) => {
							dispatch('blur')
						}}
						code={rawValue}
						bind:value
					/>
				{/await}
			{/if}
			{#if inputCat == 'list'}
				<div class="block">
					<Toggle
						on:change={(e) => {
							isListJson = !isListJson
						}}
						checked={isListJson}
						textClass="text-secondary"
						size="xs"
						options={{ right: 'json' }}
					/>
				</div>
			{/if}
		{:else if inputCat == 'enum'}
			<div class="flex flex-row w-full gap-1">
				<ArgEnum
					{required}
					create={extra['disableCreate'] != true}
					{defaultValue}
					{valid}
					{disabled}
					bind:value
					{enum_}
					{autofocus}
					on:focus={() => {
						dispatch('focus')
					}}
					on:blur={(e) => {
						dispatch('blur')
					}}
					enumLabels={extra['enumLabels']}
				/>
			</div>
		{:else if inputCat == 'date'}
			{#if format === 'date'}
				<DateInput {autofocus} bind:value dateFormat={extra?.['dateFormat']} />
			{:else}
				<DateTimeInput useDropdown {autofocus} bind:value />
			{/if}
		{:else if inputCat == 'sql' || inputCat == 'yaml'}
			<div class="border my-1 mb-4 w-full border-primary">
				{#await import('$lib/components/SimpleEditor.svelte')}
					<Loader2 class="animate-spin" />
				{:then Module}
					<Module.default
						on:focus={(e) => {
							dispatch('focus')
						}}
						on:blur={(e) => {
							dispatch('blur')
						}}
						bind:this={editor}
						lang={inputCat}
						bind:code={value}
						autoHeight
					/>
				{/await}
			</div>
		{:else if inputCat == 'base64'}
			<div class="flex flex-col my-6 w-full">
				<input
					{autofocus}
					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 ({(value.length / 1024 / 1024).toFixed(
							2
						)}MB)</div
					>
				{/if}
			</div>
		{:else if inputCat == 'resource-string'}
			<ResourcePicker
				selectFirst={noDefaultOnSelectFirst}
				{disablePortal}
				bind:value
				initialValue={defaultValue}
				resourceType={format && format.split('-').length > 1
					? format.substring('resource-'.length)
					: undefined}
				{showSchemaExplorer}
			/>
		{:else if inputCat == 'email'}
			<input
				{autofocus}
				on:focus
				on:blur
				{disabled}
				type="email"
				class={valid
					? ''
					: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'}
				placeholder={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 relative">
					{#if password || extra?.['password'] == true}
						{#if onlyMaskPassword}
							{#if value && typeof value == 'string' && value?.startsWith('$var:')}
								<input type="text" bind:value />
							{:else}
								<Password
									{disabled}
									bind:password={value}
									placeholder={placeholder ?? defaultValue ?? ''}
								/>
							{/if}
						{:else}
							<PasswordArgInput {disabled} bind:value />
						{/if}
					{:else}
						{#key extra?.['minRows']}
							<textarea
								{autofocus}
								rows={extra?.['minRows'] ? extra['minRows']?.toString() : '1'}
								bind:this={el}
								on:focus={(e) => {
									dispatch('focus')
								}}
								on:blur={(e) => {
									dispatch('blur')
								}}
								use:autosize
								on:keydown={onKeyDown}
								{disabled}
								class={twMerge(
									'w-full',
									valid
										? ''
										: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'
								)}
								placeholder={placeholder ?? defaultValue ?? ''}
								bind:value
							/>
						{/key}
						{#if !disabled && itemPicker && extra?.['disableVariablePicker'] != true}
							
							<button
								class="absolute right-1 top-1 py-1 min-w-min !px-2 items-center text-gray-800 bg-surface-secondary border rounded center-center hover:bg-gray-300 transition-all cursor-pointer"
								on:click={() => {
									pickForField = label
									itemPicker?.openDrawer?.()
								}}
								title="Insert a Variable"
							>
								<DollarSign class="!text-tertiary" size={14} />
							</button>
						{/if}
					{/if}
				</div>
				{#if variableEditor}
					<div class="text-sm text-tertiary">
						{#if value && typeof value == 'string' && value?.startsWith('$var:')}
							Linked to variable <button
								class="text-blue-500 underline"
								on:click={() => variableEditor?.editVariable?.(value.slice(5))}
								>{value.slice(5)}</button
							>
						{/if}
					</div>
				{/if}
			</div>
		{/if}
		<slot name="actions" />
	</div>

{#if !compact || (error && error != '')}
		<div class="text-right text-xs text-red-600 dark:text-red-400">
			{#if disabled || error === ''}
				 
			{:else}
				{error}
			{/if}
		</div>
	{:else if !noMargin}
		<div class="mb-2" />
	{/if}
</div>

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