@lavalogic/scoria 0.39.2 → 0.40.0

package/dist/Components/DateInput.svelte

@@ -1,150 +1,150 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { cssLength, passthrough } from '../Helpers/Helpers.svelte.js';
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import type { DateInputProps } from './DateInputProps.js';
-	import Icon from './Icon.svelte';
-
-	function openPicker(ref: HTMLInputElement | undefined): void {
-		ref?.showPicker();
-	}
-
-	function submitAncestorForm(e: KeyboardEvent): void {
-		if (e.key !== 'Enter') {
-			return;
-		}
-		e.preventDefault();
-		const target = e.target as HTMLElement | undefined;
-		const form = target?.closest('form') as HTMLFormElement | undefined;
-		form?.requestSubmit();
-	}
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable(''),
-		label,
-		placeholder,
-		required = false,
-		optional,
-		variant = InputVariant.Default,
-		min,
-		max,
-		type,
-		disabled,
-		leftIcon,
-		rightIcon,
-		inputRef = $bindable(),
-		invalid,
-		onblur,
-		onfocus,
-		onchange,
-	}: DateInputProps = $props();
-
-	// Null-safe: a fresh `<DateInput>` with no value passes `value=null`
-	// through the prop. The old `value.trim()` crashed with "Cannot read
-	// properties of null (reading 'trim')" the moment a required, empty
-	// DateInput rendered inside e.g. the Order Details collapsible card.
-	const isInvalid = $derived((required && !value?.trim()) || invalid);
-
-	function onkeydown(e: KeyboardEvent): void {
-		if (e.key === 'Enter') {
-			submitAncestorForm(e);
-			return;
-		}
-		passthrough(e);
-	}
-
-	function ondblclick(): void {
-		openPicker(inputRef);
-	}
-
-	function onauxclick(e: MouseEvent): void {
-		e.preventDefault();
-		openPicker(inputRef);
-	}
-
-	function handleChange(e: Event): void {
-		const next = (e.target as HTMLInputElement).value;
-		void onchange?.(next === '' ? null : (next as never));
-	}
-</script>
-
-<div
-	class="error-wrapper"
-	class:for-modal={variant == InputVariant.Modal}
-	class:for-table={variant == InputVariant.Table}
->
-	<label class:for-modal={variant == InputVariant.Modal}>
-		{#if label}
-			<span
-				class="top-label"
-				class:for-default={variant === InputVariant.Default}
-				class:invalid={isInvalid}
-				>{label}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-			>
-			{#if variant === InputVariant.Default}
-				<span
-					aria-hidden="true"
-					class="border"
-					class:invalid={isInvalid}
-					>{label}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-				>
-			{/if}
-		{/if}
-		<div class="icon-container">
-			{#if leftIcon}
-				<Icon
-					name={leftIcon.name}
-					size={leftIcon.size ?? Size.Medium}
-					float
-					left={cssLength('0.75rem')}
-					top={cssLength('50%')}
-					anchorX={cssLength('0')}
-					anchorY={cssLength('-50%')}
-				/>
-			{/if}
-			<input
-				step={type === 'datetime-local' ? 1 : 'any'}
-				class:invalid={isInvalid}
-				class:left-pad={leftIcon != undefined}
-				class:right-pad={rightIcon != undefined}
-				aria-invalid={isInvalid || undefined}
-				{type}
-				bind:value
-				{onblur}
-				{onfocus}
-				{ondblclick}
-				{onauxclick}
-				bind:this={inputRef}
-				{min}
-				{max}
-				{placeholder}
-				{required}
-				{disabled}
-				{onkeydown}
-				onchange={handleChange}
-			/>
-			{#if rightIcon}
-				<Icon
-					name={rightIcon.name}
-					size={rightIcon.size ?? Size.Medium}
-					float
-					right={cssLength('0.5rem')}
-					top={cssLength('50%')}
-					anchorX={cssLength('0')}
-					anchorY={cssLength('-50%')}
-				/>
-			{/if}
-		</div>
-	</label>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { cssLength, passthrough } from '../Helpers/Helpers.svelte.js';
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import type { DateInputProps } from './DateInputProps.js';
+	import Icon from './Icon.svelte';
+
+	function openPicker(ref: HTMLInputElement | undefined): void {
+		ref?.showPicker();
+	}
+
+	function submitAncestorForm(e: KeyboardEvent): void {
+		if (e.key !== 'Enter') {
+			return;
+		}
+		e.preventDefault();
+		const target = e.target as HTMLElement | undefined;
+		const form = target?.closest('form') as HTMLFormElement | undefined;
+		form?.requestSubmit();
+	}
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(''),
+		label,
+		placeholder,
+		required = false,
+		optional,
+		variant = InputVariant.Default,
+		min,
+		max,
+		type,
+		disabled,
+		leftIcon,
+		rightIcon,
+		inputRef = $bindable(),
+		invalid,
+		onblur,
+		onfocus,
+		onchange,
+	}: DateInputProps = $props();
+
+	// Null-safe: a fresh `<DateInput>` with no value passes `value=null`
+	// through the prop. The old `value.trim()` crashed with "Cannot read
+	// properties of null (reading 'trim')" the moment a required, empty
+	// DateInput rendered inside e.g. the Order Details collapsible card.
+	const isInvalid = $derived((required && !value?.trim()) || invalid);
+
+	function onkeydown(e: KeyboardEvent): void {
+		if (e.key === 'Enter') {
+			submitAncestorForm(e);
+			return;
+		}
+		passthrough(e);
+	}
+
+	function ondblclick(): void {
+		openPicker(inputRef);
+	}
+
+	function onauxclick(e: MouseEvent): void {
+		e.preventDefault();
+		openPicker(inputRef);
+	}
+
+	function handleChange(e: Event): void {
+		const next = (e.target as HTMLInputElement).value;
+		void onchange?.(next === '' ? null : (next as never));
+	}
+</script>
+
+<div
+	class="error-wrapper"
+	class:for-modal={variant == InputVariant.Modal}
+	class:for-table={variant == InputVariant.Table}
+>
+	<label class:for-modal={variant == InputVariant.Modal}>
+		{#if label}
+			<span
+				class="top-label"
+				class:for-default={variant === InputVariant.Default}
+				class:invalid={isInvalid}
+				>{label}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+			>
+			{#if variant === InputVariant.Default}
+				<span
+					aria-hidden="true"
+					class="border"
+					class:invalid={isInvalid}
+					>{label}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+				>
+			{/if}
+		{/if}
+		<div class="icon-container">
+			{#if leftIcon}
+				<Icon
+					name={leftIcon.name}
+					size={leftIcon.size ?? Size.Medium}
+					float
+					left={cssLength('0.75rem')}
+					top={cssLength('50%')}
+					anchorX={cssLength('0')}
+					anchorY={cssLength('-50%')}
+				/>
+			{/if}
+			<input
+				step={type === 'datetime-local' ? 1 : 'any'}
+				class:invalid={isInvalid}
+				class:left-pad={leftIcon != undefined}
+				class:right-pad={rightIcon != undefined}
+				aria-invalid={isInvalid || undefined}
+				{type}
+				bind:value
+				{onblur}
+				{onfocus}
+				{ondblclick}
+				{onauxclick}
+				bind:this={inputRef}
+				{min}
+				{max}
+				{placeholder}
+				{required}
+				{disabled}
+				{onkeydown}
+				onchange={handleChange}
+			/>
+			{#if rightIcon}
+				<Icon
+					name={rightIcon.name}
+					size={rightIcon.size ?? Size.Medium}
+					float
+					right={cssLength('0.5rem')}
+					top={cssLength('50%')}
+					anchorX={cssLength('0')}
+					anchorY={cssLength('-50%')}
+				/>
+			{/if}
+		</div>
+	</label>
+</div>
+
 <style>input {
   box-sizing: border-box;
   height: 100%;
@@ -374,4 +374,4 @@ label.for-table {
 }
 label.for-table input {
   height: unset;
-}</style>
+}</style>