@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/ThreeStateRadio.svelte

@@ -1,14 +1,14 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import { m as i18n } from "../paraglide/messages.js";
 import { Colour, ColourSet } from "../scss/colours.js";
 import { Ternary } from "../Types/Internal/Ternary.js";
 import Action from "./Action.svelte";
-</script>
-
+</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 } = $props();
 function setValue(next) {
 	if (next === value) {
@@ -17,99 +17,99 @@ function setValue(next) {
 	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 class:disabled={disabled || noDisabled}>
-			<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 ?? i18n['scoria.action.no']()}
-				onclick={() => {
-					setValue(Ternary.False);
-				}}
-			/>
-			<input
-				disabled={disabled || noDisabled}
-				type="radio"
-				value="0"
-				checked={value === Ternary.False}
-				aria-label={noLabel ?? i18n['scoria.action.no']()}
-				onchange={() => {
-					setValue(Ternary.False);
-				}}
-			/>
-		</label>
-		<label class:disabled={disabled || neutralDisabled}>
-			<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 ?? i18n['scoria.label.allow_system_decide']()}
-				onclick={() => {
-					setValue(Ternary.Neutral);
-				}}
-			/>
-			<input
-				disabled={disabled || neutralDisabled}
-				type="radio"
-				value="-1"
-				checked={value === Ternary.Neutral}
-				aria-label={neutralLabel ?? i18n['scoria.label.allow_system_decide']()}
-				onchange={() => {
-					setValue(Ternary.Neutral);
-				}}
-			/>
-		</label>
-		<label class:disabled={disabled || yesDisabled}>
-			<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 ?? i18n['scoria.action.yes']()}
-				onclick={() => {
-					setValue(Ternary.True);
-				}}
-			/>
-			<input
-				disabled={disabled || yesDisabled}
-				type="radio"
-				value="1"
-				checked={value === Ternary.True}
-				aria-label={yesLabel ?? i18n['scoria.action.yes']()}
-				onchange={() => {
-					setValue(Ternary.True);
-				}}
-			/>
-		</label>
-	</div>
-</div>
-
+</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 class:disabled={disabled || noDisabled}>
+			<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 ?? i18n['scoria.action.no']()}
+				onclick={() => {
+					setValue(Ternary.False);
+				}}
+			/>
+			<input
+				disabled={disabled || noDisabled}
+				type="radio"
+				value="0"
+				checked={value === Ternary.False}
+				aria-label={noLabel ?? i18n['scoria.action.no']()}
+				onchange={() => {
+					setValue(Ternary.False);
+				}}
+			/>
+		</label>
+		<label class:disabled={disabled || neutralDisabled}>
+			<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 ?? i18n['scoria.label.allow_system_decide']()}
+				onclick={() => {
+					setValue(Ternary.Neutral);
+				}}
+			/>
+			<input
+				disabled={disabled || neutralDisabled}
+				type="radio"
+				value="-1"
+				checked={value === Ternary.Neutral}
+				aria-label={neutralLabel ?? i18n['scoria.label.allow_system_decide']()}
+				onchange={() => {
+					setValue(Ternary.Neutral);
+				}}
+			/>
+		</label>
+		<label class:disabled={disabled || yesDisabled}>
+			<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 ?? i18n['scoria.action.yes']()}
+				onclick={() => {
+					setValue(Ternary.True);
+				}}
+			/>
+			<input
+				disabled={disabled || yesDisabled}
+				type="radio"
+				value="1"
+				checked={value === Ternary.True}
+				aria-label={yesLabel ?? i18n['scoria.action.yes']()}
+				onchange={() => {
+					setValue(Ternary.True);
+				}}
+			/>
+		</label>
+	</div>
+</div>
+
 <style>.text-label {
   box-sizing: border-box;
   height: max(var(--input-height, 3rem), 2rem);
@@ -184,4 +184,4 @@ input {
   clip-path: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
-}</style>
+}</style>

package/dist/Components/Touch/BoolCard.svelte

@@ -1,35 +1,35 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { passthrough } from "../../Helpers/Helpers.svelte.js";
 import { Colour } from "../../scss/colours.js";
 import { Size } from "../../Types/Internal/Size.js";
 import Icon from "../Icon.svelte";
 let { value = $bindable(false), disabled, onclick, children, nowidth, size = Size.Medium } = $props();
 const iconName = $derived(value ? "circle-tick" : "circle");
-</script>
-
-<button
-	class:small={size == Size.Small}
-	onkeydown={passthrough}
-	disabled={disabled || undefined}
-	aria-pressed={value}
-	class:nowidth
-	type="button"
-	class="card"
-	class:ticked={value}
-	{onclick}
->
-	{#if children}
-		<span
-			class="value"
-			class:small={size == Size.Small}>{@render children()}</span
-		>{/if}<Icon
-		name={iconName}
-		size={Size.DoubleXLarge}
-		colour={value ? Colour['$ui-white'] : undefined}
-	/>
-</button>
-
+</script>
+
+<button
+	class:small={size == Size.Small}
+	onkeydown={passthrough}
+	disabled={disabled || undefined}
+	aria-pressed={value}
+	class:nowidth
+	type="button"
+	class="card"
+	class:ticked={value}
+	{onclick}
+>
+	{#if children}
+		<span
+			class="value"
+			class:small={size == Size.Small}>{@render children()}</span
+		>{/if}<Icon
+		name={iconName}
+		size={Size.DoubleXLarge}
+		colour={value ? Colour['$ui-white'] : undefined}
+	/>
+</button>
+
 <style>button.card {
   color: #3a4952;
   fill: #3a4952;
@@ -159,4 +159,4 @@ button.card .value.small {
   font-size: 1.1875rem;
   font-weight: 600;
   padding: 0;
-}</style>
+}</style>

package/dist/Components/Touch/DateModal.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import { devCatch, passthrough } from "../../Helpers/Helpers.svelte.js";
 import { ColourSet } from "../../scss/colours.js";
 import { InputVariant } from "../../Types/Internal/InputVariant.js";
@@ -13,8 +13,8 @@ import Action from "../Action.svelte";
 import DatePicker from "../DatePicker.svelte";
 import TextInput from "../TextInput.svelte";
 import TouchModal from "./TouchModal.svelte";
-</script>
-
+</script>
+
 <script lang="ts">let { header, value, cancelEditing, confirm, namedMonths = false, validate, showScanner = false, scanValue = $bindable(""), overrideScanValue = $bindable(""), confirmScannedValue, inclusive = false, explanation, allowOverride = false, showTime = false } = $props();
 // Snapshot the incoming `value` into mutable working state. Reset via
 // the effect below when the parent hands us a new `value` reference;
@@ -77,96 +77,96 @@ function submitOnEnter(e) {
 		scanValue = "";
 	}
 }
-</script>
-
-<TouchModal
-	onclose={() => {
-		cancelEditing();
-	}}
-	{header}
-	{onsubmit}
-	{explanation}
->
-	{#if showScanner}
-		<div class="inputs">
-			{#if allowOverride}
-				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-				{@render overrideButton()}
-			{/if}
-			{#if isBeingEdited}
-				<TextInput
-					bind:inputRef={overrideInputRef}
-					bind:value={overrideScanValue}
-					variant={InputVariant.Modal}
-					labelTop={i18n['scoria.label.scan_barcode_override']()}
-					onkeydown={submitOnEnter}
-				/>
-			{/if}
-			<TextInput
-				bind:inputRef
-				bind:value={scanValue}
-				variant={InputVariant.Modal}
-				labelTop={i18n['scoria.label.scan_barcode']()}
-				onkeydown={submitOnEnter}
-			/>
-		</div>
-	{:else if allowOverride}
-		<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-		{@render overrideButton()}
-	{/if}
-
-	<div class="inputs">
-		{#if allowOverride && isBeingEdited}
-			<DatePicker
-				{showTime}
-				{onsubmit}
-				{namedMonths}
-				bind:date={overrideValue}
-			/>
-		{/if}
-		<DatePicker
-			{showTime}
-			{onsubmit}
-			{namedMonths}
-			bind:date={tempValue}
-		/>
-	</div>
-
-	{#snippet footer()}
-		<div class="modal-footer">
-			<button
-				onkeydown={passthrough}
-				type="submit"
-				disabled={!isValid}>{i18n['scoria.action.confirm']()}</button
-			>
-			<button
-				onkeydown={passthrough}
-				type="button"
-				onclick={() => {
-					cancelEditing();
-				}}>{i18n['scoria.action.cancel']()}</button
-			>
-		</div>
-	{/snippet}
-</TouchModal>
-
-{#snippet overrideButton()}
-	<div>
-		<Action
-			icon={{ name: 'edit' }}
-			size={Size.DoubleXLarge}
-			colourSet={isBeingEdited ? ColourSet.Primary : ColourSet.Secondary}
-			label={isBeingEdited ? 'Cancel override' : 'Override date'}
-			onclick={() => {
-				if (!allowOverride) {
-					return;
-				}
-				isBeingEdited = !isBeingEdited;
-			}}
-		/>
-	</div>
-{/snippet}
-
+</script>
+
+<TouchModal
+	onclose={() => {
+		cancelEditing();
+	}}
+	{header}
+	{onsubmit}
+	{explanation}
+>
+	{#if showScanner}
+		<div class="inputs">
+			{#if allowOverride}
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render overrideButton()}
+			{/if}
+			{#if isBeingEdited}
+				<TextInput
+					bind:inputRef={overrideInputRef}
+					bind:value={overrideScanValue}
+					variant={InputVariant.Modal}
+					labelTop={i18n['scoria.label.scan_barcode_override']()}
+					onkeydown={submitOnEnter}
+				/>
+			{/if}
+			<TextInput
+				bind:inputRef
+				bind:value={scanValue}
+				variant={InputVariant.Modal}
+				labelTop={i18n['scoria.label.scan_barcode']()}
+				onkeydown={submitOnEnter}
+			/>
+		</div>
+	{:else if allowOverride}
+		<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+		{@render overrideButton()}
+	{/if}
+
+	<div class="inputs">
+		{#if allowOverride && isBeingEdited}
+			<DatePicker
+				{showTime}
+				{onsubmit}
+				{namedMonths}
+				bind:date={overrideValue}
+			/>
+		{/if}
+		<DatePicker
+			{showTime}
+			{onsubmit}
+			{namedMonths}
+			bind:date={tempValue}
+		/>
+	</div>
+
+	{#snippet footer()}
+		<div class="modal-footer">
+			<button
+				onkeydown={passthrough}
+				type="submit"
+				disabled={!isValid}>{i18n['scoria.action.confirm']()}</button
+			>
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>{i18n['scoria.action.cancel']()}</button
+			>
+		</div>
+	{/snippet}
+</TouchModal>
+
+{#snippet overrideButton()}
+	<div>
+		<Action
+			icon={{ name: 'edit' }}
+			size={Size.DoubleXLarge}
+			colourSet={isBeingEdited ? ColourSet.Primary : ColourSet.Secondary}
+			label={isBeingEdited ? 'Cancel override' : 'Override date'}
+			onclick={() => {
+				if (!allowOverride) {
+					return;
+				}
+				isBeingEdited = !isBeingEdited;
+			}}
+		/>
+	</div>
+{/snippet}
+
 <style>.modal-footer {
   bottom: 0;
   border-top: solid 1px #cbd4da;
@@ -225,4 +225,4 @@ div.inputs {
   flex-flow: row nowrap;
   gap: 1.5rem;
   justify-content: space-around;
-}</style>
+}</style>

package/dist/Components/Touch/EditCard.svelte

@@ -1,50 +1,50 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { passthrough } from "../../Helpers/Helpers.svelte.js";
 import { Size } from "../../Types/Internal/Size.js";
 import Icon from "../Icon.svelte";
 const { noborder, label, desktop = false, iconName = "edit", disabled = false, error = false, onclick, children } = $props();
-</script>
-
-<button
-	type="button"
-	class="card"
-	class:desktop
-	class:error
-	class:noborder
-	{disabled}
-	aria-disabled={disabled}
-	{onclick}
-	onkeydown={passthrough}
->
-	<div class="left">
-		{#if label}
-			<div class="row">
-				<span class="card-label label">{label}</span>
-				{#if desktop}
-					<span class="card-label border">{label}</span>
-				{/if}
-			</div>
-		{/if}
-		<div
-			class="row"
-			class:labelless={!label}
-		>
-			{#if children}
-				<span class="value">{@render children()}</span>
-			{/if}
-		</div>
-	</div>
-	<div class="right">
-		{#if iconName}
-			<Icon
-				name={iconName}
-				size={desktop ? Size.Medium : Size.XLarge}
-			/>
-		{/if}
-	</div>
-</button>
-
+</script>
+
+<button
+	type="button"
+	class="card"
+	class:desktop
+	class:error
+	class:noborder
+	{disabled}
+	aria-disabled={disabled}
+	{onclick}
+	onkeydown={passthrough}
+>
+	<div class="left">
+		{#if label}
+			<div class="row">
+				<span class="card-label label">{label}</span>
+				{#if desktop}
+					<span class="card-label border">{label}</span>
+				{/if}
+			</div>
+		{/if}
+		<div
+			class="row"
+			class:labelless={!label}
+		>
+			{#if children}
+				<span class="value">{@render children()}</span>
+			{/if}
+		</div>
+	</div>
+	<div class="right">
+		{#if iconName}
+			<Icon
+				name={iconName}
+				size={desktop ? Size.Medium : Size.XLarge}
+			/>
+		{/if}
+	</div>
+</button>
+
 <style>.card {
   color: #3a4952;
   fill: #3a4952;
@@ -202,4 +202,4 @@ const { noborder, label, desktop = false, iconName = "edit", disabled = false, e
 }
 .card .labelless {
   padding: 0.75rem;
-}</style>
+}</style>

package/dist/Components/Touch/InfoCard.svelte

@@ -1,30 +1,30 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { Size } from "../../Types/Internal/Size.js";
 import Icon from "../Icon.svelte";
 const { noborder, label, iconName, children } = $props();
-</script>
-
-<div
-	class="card"
-	class:pad-vertical={!label}
-	class:noborder
->
-	{#if label}
-		<span class="card-label">{label}</span>
-	{/if}
-
-	<span class="value">{@render children()}</span>
-	{#if iconName}
-		<div class="icon">
-			<Icon
-				name={iconName}
-				size={Size.Large}
-			/>
-		</div>
-	{/if}
-</div>
-
+</script>
+
+<div
+	class="card"
+	class:pad-vertical={!label}
+	class:noborder
+>
+	{#if label}
+		<span class="card-label">{label}</span>
+	{/if}
+
+	<span class="value">{@render children()}</span>
+	{#if iconName}
+		<div class="icon">
+			<Icon
+				name={iconName}
+				size={Size.Large}
+			/>
+		</div>
+	{/if}
+</div>
+
 <style>.card {
   color: #3a4952;
   fill: #3a4952;
@@ -74,4 +74,4 @@ const { noborder, label, iconName, children } = $props();
   align-items: center;
   position: absolute;
   right: 0.75rem;
-}</style>
+}</style>