@lavalogic/scoria 0.38.10 → 0.38.12

package/dist/Components/TextInput.svelte

@@ -1,178 +1,178 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { cssLength, isValidEmailAddress } from '../Helpers/Helpers.svelte.js';
-	import { Colour, ColourSet } from '../scss/colours.js';
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Action from './Action.svelte';
-	import Icon from './Icon.svelte';
-	import type { TextInputProps } from './TextInputProps.js';
-	let {
-		id,
-		value = $bindable(''),
-		labelTop,
-		optional,
-		labelRight,
-		placeholder,
-		required = false,
-		variant = InputVariant.Default,
-		selectNone = false,
-		uppercase = false,
-		disabled = false,
-		invalid = false,
-		showErrorColours = true,
-		rightIconDisabled = false,
-		leftIcon,
-		rightIcon,
-		type,
-		onLeftIconClick,
-		onRightIconClick,
-		inputRef = $bindable(),
-		'data-type': dataType,
-		autocomplete,
-		spellcheck,
-		onblur,
-		onfocus,
-		// No default `onkeydown`. The legacy default was `passthrough`,
-		// a helper that BLURS the target on every alphanumeric key (it is
-		// a barcode-scanner aid intended for buttons - note the
-		// `as HTMLButtonElement` cast inside it). Applied to a text input
-		// it makes the field unusable: each keystroke blurs the input
-		// before the value can update, so users see nothing as they type.
-		// Inputs should accept keystrokes by default; consumers that want
-		// the barcode-blur behaviour explicitly pass
-		// `onkeydown={passthrough}` (preferably renamed to
-		// `blurOnAlphanumeric` in a future patch).
-		onkeydown,
-		oninput,
-	}: TextInputProps = $props();
-
-	const isInvalid = $derived(
-		showErrorColours &&
-			!disabled &&
-			((required &&
-				(!value?.trim() ||
-					(type == 'email' &&
-						value.length >= 3 &&
-						value.includes('@') &&
-						!isValidEmailAddress(value)))) ||
-				invalid)
-	);
-</script>
-
-<div
-	class="error-wrapper"
-	class:for-modal={variant == InputVariant.Modal}
-	class:for-table={variant == InputVariant.Table}
->
-	<label
-		class:for-modal={variant == InputVariant.Modal}
-		class:for-table={variant == InputVariant.Table}
-	>
-		{#if labelTop}
-			<span
-				class="top-label"
-				class:for-default={variant === InputVariant.Default}
-				class:invalid={isInvalid}
-				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-			>
-			{#if variant === InputVariant.Default}
-				<span
-					aria-hidden="true"
-					class="border"
-					class:invalid={isInvalid}
-					>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-				>
-			{/if}
-		{/if}
-		<div
-			class="icon-container"
-			class:for-modal={variant == InputVariant.Modal}
-		>
-			{#if leftIcon}
-				{#if onLeftIconClick}
-					<div class="left-icon">
-						<Action
-							noTabIndex
-							colourSet={ColourSet.Auxiliary}
-							icon={leftIcon}
-							size={Size.Medium}
-							onclick={onLeftIconClick}
-						/>
-					</div>
-				{:else}
-					<Icon
-						name={leftIcon.name}
-						size={leftIcon.size ?? Size.Medium}
-						colour={leftIcon.colour}
-						float
-						left={cssLength('0.75rem')}
-						top={cssLength('50%')}
-						anchorX={cssLength('0')}
-						anchorY={cssLength('-50%')}
-					/>
-				{/if}
-			{/if}
-			<input
-				{id}
-				class:for-default={variant === InputVariant.Default}
-				class:uppercase
-				class:invalid={isInvalid}
-				class:select-none={selectNone}
-				class:left-pad={leftIcon != undefined}
-				class:right-pad={rightIcon != undefined}
-				class:for-modal={variant == InputVariant.Modal}
-				data-type={dataType}
-				type={type ?? 'text'}
-				autocomplete={autocomplete ?? (type === 'email' ? 'email' : 'off')}
-				spellcheck={spellcheck ?? false}
-				aria-invalid={isInvalid || undefined}
-				bind:value
-				{onblur}
-				{onfocus}
-				{onkeydown}
-				{oninput}
-				bind:this={inputRef}
-				{placeholder}
-				{required}
-				{disabled}
-			/>
-			{#if rightIcon}
-				<div class="right-icon">
-					{#if onRightIconClick}
-						<Action
-							noTabIndex
-							colourSet={ColourSet.Auxiliary}
-							disabled={rightIconDisabled}
-							icon={rightIcon}
-							size={Size.Medium}
-							onclick={onRightIconClick}
-						/>
-					{:else}
-						<Icon
-							name={rightIcon.name}
-							size={rightIcon.size ?? Size.Medium}
-							colour={rightIcon.colour ?? Colour['$font-disabled']}
-							float
-							right={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
-							top={cssLength('50%')}
-							anchorX={cssLength('0')}
-							anchorY={cssLength('-50%')}
-						/>
-					{/if}
-				</div>
-			{/if}
-			{#if labelRight}
-				<span
-					class="right-label"
-					class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
-				>
-			{/if}
-		</div>
-	</label>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { cssLength, isValidEmailAddress } from '../Helpers/Helpers.svelte.js';
+	import { Colour, ColourSet } from '../scss/colours.js';
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Action from './Action.svelte';
+	import Icon from './Icon.svelte';
+	import type { TextInputProps } from './TextInputProps.js';
+	let {
+		id,
+		value = $bindable(''),
+		labelTop,
+		optional,
+		labelRight,
+		placeholder,
+		required = false,
+		variant = InputVariant.Default,
+		selectNone = false,
+		uppercase = false,
+		disabled = false,
+		invalid = false,
+		showErrorColours = true,
+		rightIconDisabled = false,
+		leftIcon,
+		rightIcon,
+		type,
+		onLeftIconClick,
+		onRightIconClick,
+		inputRef = $bindable(),
+		'data-type': dataType,
+		autocomplete,
+		spellcheck,
+		onblur,
+		onfocus,
+		// No default `onkeydown`. The legacy default was `passthrough`,
+		// a helper that BLURS the target on every alphanumeric key (it is
+		// a barcode-scanner aid intended for buttons - note the
+		// `as HTMLButtonElement` cast inside it). Applied to a text input
+		// it makes the field unusable: each keystroke blurs the input
+		// before the value can update, so users see nothing as they type.
+		// Inputs should accept keystrokes by default; consumers that want
+		// the barcode-blur behaviour explicitly pass
+		// `onkeydown={passthrough}` (preferably renamed to
+		// `blurOnAlphanumeric` in a future patch).
+		onkeydown,
+		oninput,
+	}: TextInputProps = $props();
+
+	const isInvalid = $derived(
+		showErrorColours &&
+			!disabled &&
+			((required &&
+				(!value?.trim() ||
+					(type == 'email' &&
+						value.length >= 3 &&
+						value.includes('@') &&
+						!isValidEmailAddress(value)))) ||
+				invalid)
+	);
+</script>
+
+<div
+	class="error-wrapper"
+	class:for-modal={variant == InputVariant.Modal}
+	class:for-table={variant == InputVariant.Table}
+>
+	<label
+		class:for-modal={variant == InputVariant.Modal}
+		class:for-table={variant == InputVariant.Table}
+	>
+		{#if labelTop}
+			<span
+				class="top-label"
+				class:for-default={variant === InputVariant.Default}
+				class:invalid={isInvalid}
+				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+			>
+			{#if variant === InputVariant.Default}
+				<span
+					aria-hidden="true"
+					class="border"
+					class:invalid={isInvalid}
+					>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+				>
+			{/if}
+		{/if}
+		<div
+			class="icon-container"
+			class:for-modal={variant == InputVariant.Modal}
+		>
+			{#if leftIcon}
+				{#if onLeftIconClick}
+					<div class="left-icon">
+						<Action
+							noTabIndex
+							colourSet={ColourSet.Auxiliary}
+							icon={leftIcon}
+							size={Size.Medium}
+							onclick={onLeftIconClick}
+						/>
+					</div>
+				{:else}
+					<Icon
+						name={leftIcon.name}
+						size={leftIcon.size ?? Size.Medium}
+						colour={leftIcon.colour}
+						float
+						left={cssLength('0.75rem')}
+						top={cssLength('50%')}
+						anchorX={cssLength('0')}
+						anchorY={cssLength('-50%')}
+					/>
+				{/if}
+			{/if}
+			<input
+				{id}
+				class:for-default={variant === InputVariant.Default}
+				class:uppercase
+				class:invalid={isInvalid}
+				class:select-none={selectNone}
+				class:left-pad={leftIcon != undefined}
+				class:right-pad={rightIcon != undefined}
+				class:for-modal={variant == InputVariant.Modal}
+				data-type={dataType}
+				type={type ?? 'text'}
+				autocomplete={autocomplete ?? (type === 'email' ? 'email' : 'off')}
+				spellcheck={spellcheck ?? false}
+				aria-invalid={isInvalid || undefined}
+				bind:value
+				{onblur}
+				{onfocus}
+				{onkeydown}
+				{oninput}
+				bind:this={inputRef}
+				{placeholder}
+				{required}
+				{disabled}
+			/>
+			{#if rightIcon}
+				<div class="right-icon">
+					{#if onRightIconClick}
+						<Action
+							noTabIndex
+							colourSet={ColourSet.Auxiliary}
+							disabled={rightIconDisabled}
+							icon={rightIcon}
+							size={Size.Medium}
+							onclick={onRightIconClick}
+						/>
+					{:else}
+						<Icon
+							name={rightIcon.name}
+							size={rightIcon.size ?? Size.Medium}
+							colour={rightIcon.colour ?? Colour['$font-disabled']}
+							float
+							right={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
+							top={cssLength('50%')}
+							anchorX={cssLength('0')}
+							anchorY={cssLength('-50%')}
+						/>
+					{/if}
+				</div>
+			{/if}
+			{#if labelRight}
+				<span
+					class="right-label"
+					class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
+				>
+			{/if}
+		</div>
+	</label>
+</div>
+
 <style>input {
   box-sizing: border-box;
   height: 100%;
@@ -406,4 +406,4 @@ label.for-table input {
 
 td {
   --input-border: none;
-}</style>
+}</style>

package/dist/Components/ThreeStateRadio.svelte

@@ -1,133 +1,133 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { Colour, ColourSet } from '../scss/colours.js';
-	import { Ternary } from '../Types/Internal/Ternary.js';
-	import Action from './Action.svelte';
-	import type { ThreeStateRadioProps } from './ThreeStateRadioProps.js';
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable(Ternary.Neutral),
-		label,
-		disabled,
-		isValid,
-		onchange,
-		noDisabled = false,
-		yesDisabled = false,
-		neutralDisabled = false,
-		noLabel,
-		yesLabel,
-		neutralLabel,
-		noIcon,
-		yesIcon,
-		neutralIcon,
-	}: ThreeStateRadioProps = $props();
-
-	function setValue(next: Ternary): void {
-		if (next === value) {
-			return;
-		}
-		value = next;
-		void onchange?.(next);
-	}
-</script>
-
-<div
-	class="text-label"
-	class:invalid={isValid === false}
->
-	{#if label != undefined}
-		<span>{label}</span>
-	{/if}
-
-	<div
-		class="radios"
-		role="radiogroup"
-		aria-label={label}
-	>
-		<label>
-			<Action
-				disabled={disabled || noDisabled}
-				colourSet={value === Ternary.False ? ColourSet.Primary : ColourSet.Auxiliary}
-				icon={{
-					name: 'circle-cross',
-					...noIcon,
-					colour: value === Ternary.False ? undefined : Colour['$ui-blue-5'],
-				}}
-				label={noLabel ?? 'No'}
-				onclick={() => {
-					setValue(Ternary.False);
-				}}
-			/>
-			<input
-				disabled={disabled || noDisabled}
-				type="radio"
-				value="0"
-				checked={value === Ternary.False}
-				aria-label={noLabel ?? 'No'}
-				onchange={() => {
-					setValue(Ternary.False);
-				}}
-			/>
-		</label>
-		<label>
-			<Action
-				disabled={disabled || neutralDisabled}
-				colourSet={value === Ternary.Neutral ? ColourSet.Primary : ColourSet.Auxiliary}
-				icon={{
-					name: 'database',
-					...neutralIcon,
-					colour: value === Ternary.Neutral ? undefined : Colour['$ui-blue-5'],
-				}}
-				label={neutralLabel ?? 'Allow system to decide'}
-				onclick={() => {
-					setValue(Ternary.Neutral);
-				}}
-			/>
-			<input
-				disabled={disabled || neutralDisabled}
-				type="radio"
-				value="-1"
-				checked={value === Ternary.Neutral}
-				aria-label={neutralLabel ?? 'Allow system to decide'}
-				onchange={() => {
-					setValue(Ternary.Neutral);
-				}}
-			/>
-		</label>
-		<label>
-			<Action
-				disabled={disabled || yesDisabled}
-				colourSet={value === Ternary.True ? ColourSet.Primary : ColourSet.Auxiliary}
-				icon={{
-					name: 'circle-tick',
-					...yesIcon,
-					colour: value === Ternary.True ? undefined : Colour['$ui-blue-5'],
-				}}
-				label={yesLabel ?? 'Yes'}
-				onclick={() => {
-					setValue(Ternary.True);
-				}}
-			/>
-			<input
-				disabled={disabled || yesDisabled}
-				type="radio"
-				value="1"
-				checked={value === Ternary.True}
-				aria-label={yesLabel ?? 'Yes'}
-				onchange={() => {
-					setValue(Ternary.True);
-				}}
-			/>
-		</label>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { Colour, ColourSet } from '../scss/colours.js';
+	import { Ternary } from '../Types/Internal/Ternary.js';
+	import Action from './Action.svelte';
+	import type { ThreeStateRadioProps } from './ThreeStateRadioProps.js';
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(Ternary.Neutral),
+		label,
+		disabled,
+		isValid,
+		onchange,
+		noDisabled = false,
+		yesDisabled = false,
+		neutralDisabled = false,
+		noLabel,
+		yesLabel,
+		neutralLabel,
+		noIcon,
+		yesIcon,
+		neutralIcon,
+	}: ThreeStateRadioProps = $props();
+
+	function setValue(next: Ternary): void {
+		if (next === value) {
+			return;
+		}
+		value = next;
+		void onchange?.(next);
+	}
+</script>
+
+<div
+	class="text-label"
+	class:invalid={isValid === false}
+>
+	{#if label != undefined}
+		<span>{label}</span>
+	{/if}
+
+	<div
+		class="radios"
+		role="radiogroup"
+		aria-label={label}
+	>
+		<label>
+			<Action
+				disabled={disabled || noDisabled}
+				colourSet={value === Ternary.False ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'circle-cross',
+					...noIcon,
+					colour: value === Ternary.False ? undefined : Colour['$ui-blue-5'],
+				}}
+				label={noLabel ?? 'No'}
+				onclick={() => {
+					setValue(Ternary.False);
+				}}
+			/>
+			<input
+				disabled={disabled || noDisabled}
+				type="radio"
+				value="0"
+				checked={value === Ternary.False}
+				aria-label={noLabel ?? 'No'}
+				onchange={() => {
+					setValue(Ternary.False);
+				}}
+			/>
+		</label>
+		<label>
+			<Action
+				disabled={disabled || neutralDisabled}
+				colourSet={value === Ternary.Neutral ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'database',
+					...neutralIcon,
+					colour: value === Ternary.Neutral ? undefined : Colour['$ui-blue-5'],
+				}}
+				label={neutralLabel ?? 'Allow system to decide'}
+				onclick={() => {
+					setValue(Ternary.Neutral);
+				}}
+			/>
+			<input
+				disabled={disabled || neutralDisabled}
+				type="radio"
+				value="-1"
+				checked={value === Ternary.Neutral}
+				aria-label={neutralLabel ?? 'Allow system to decide'}
+				onchange={() => {
+					setValue(Ternary.Neutral);
+				}}
+			/>
+		</label>
+		<label>
+			<Action
+				disabled={disabled || yesDisabled}
+				colourSet={value === Ternary.True ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'circle-tick',
+					...yesIcon,
+					colour: value === Ternary.True ? undefined : Colour['$ui-blue-5'],
+				}}
+				label={yesLabel ?? 'Yes'}
+				onclick={() => {
+					setValue(Ternary.True);
+				}}
+			/>
+			<input
+				disabled={disabled || yesDisabled}
+				type="radio"
+				value="1"
+				checked={value === Ternary.True}
+				aria-label={yesLabel ?? 'Yes'}
+				onchange={() => {
+					setValue(Ternary.True);
+				}}
+			/>
+		</label>
+	</div>
+</div>
+
 <style>.text-label {
   box-sizing: border-box;
   height: max(var(--input-height, 3rem), 2rem);
@@ -198,4 +198,4 @@ input {
   clip-path: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
-}</style>
+}</style>