@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/Touch/InfoTextCard.svelte

@@ -1,28 +1,28 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { Colour } from "../../scss/colours.js";
 import { Size } from "../../Types/Internal/Size.js";
 import Icon from "../Icon.svelte";
 let { label, iconName, children } = $props();
-</script>
-
-<div
-	class="card"
-	class:pad-vertical={!label}
->
-	{#if iconName}
-		<div class="icon">
-			<Icon
-				name={iconName}
-				size={Size.Large}
-				colour={Colour['$brand-primary']}
-			/>
-		</div>
-	{/if}
-
-	<span class="value">{@render children()}</span>
-</div>
-
+</script>
+
+<div
+	class="card"
+	class:pad-vertical={!label}
+>
+	{#if iconName}
+		<div class="icon">
+			<Icon
+				name={iconName}
+				size={Size.Large}
+				colour={Colour['$brand-primary']}
+			/>
+		</div>
+	{/if}
+
+	<span class="value">{@render children()}</span>
+</div>
+
 <style>.card {
   color: #3a4952;
   fill: #3a4952;
@@ -48,4 +48,4 @@ let { label, iconName, children } = $props();
 .card .value {
   padding: 0 0.25rem;
   color: #3a4952;
-}</style>
+}</style>

package/dist/Components/Touch/ModalExplanation.svelte

@@ -1,17 +1,17 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">let { width, children, nowrap } = $props();
 export {};
-</script>
-
-<p
-	class:nowrap
-	style:--width={width}
-	style:--padding="0"
->
-	{@render children()}
-</p>
-
+</script>
+
+<p
+	class:nowrap
+	style:--width={width}
+	style:--padding="0"
+>
+	{@render children()}
+</p>
+
 <style>p {
   padding: var(--padding);
   color: #3a4952;
@@ -19,4 +19,4 @@ export {};
 }
 p.nowrap {
   white-space: pre-line;
-}</style>
+}</style>

package/dist/Components/Touch/NumberKeyboard.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	module
-	lang="ts"
+<svelte:options runes />
+
+<script
+	module
+	lang="ts"
 >import { m as i18n } from "../../paraglide/messages.js";
 import { devCatch, passthrough } from "../../Helpers/Helpers.svelte.js";
 import { InputVariant } from "../../Types/Internal/InputVariant.js";
@@ -20,8 +20,8 @@ const DIGITS = Object.freeze([
 	8,
 	9
 ]);
-</script>
-
+</script>
+
 <script lang="ts">let { value = $bindable(null), label, labelRight, placeholder, min, max, decimal = false, inputRef = $bindable(), coerceValue = false } = $props();
 let _value = $derived(value != null && value % 1 == 0 ? value.toString() : getDecimalValue());
 function getDecimalPlaces(value) {
@@ -113,79 +113,79 @@ function onDigitClick(e) {
 		addDigit(digit);
 	}
 }
-</script>
-
-<div class="number-input-wrapper">
-	<div class="left-side">
-		<div class="value-container">
-			<!-- textInput is the only available option when you try to add a decimal point programmatically -->
-			<TextInput
-				labelTop={label}
-				{placeholder}
-				{labelRight}
-				bind:inputRef
-				bind:value={_value}
-				variant={InputVariant.Modal}
-				required
-				invalid={lessThanMin || moreThanMax}
-			/>
-			{#if max != undefined}
-				<TextInput
-					value={`${max}`}
-					labelTop={i18n['scoria.label.maximum']()}
-					selectNone
-					disabled
-					variant={InputVariant.Modal}
-				/>
-			{/if}
-		</div>
-		<div class="plus-minus">
-			<button
-				onkeydown={passthrough}
-				type="button"
-				disabled={value != null && min != null && value <= min}
-				onclick={minus}><Icon name="minus" /></button
-			>
-			<button
-				onkeydown={passthrough}
-				type="button"
-				disabled={value != null && max != null && value >= max}
-				onclick={plus}><Icon name="plus" /></button
-			>
-		</div>
-	</div>
-	<div class="number-grid">
-		{#each DIGITS as digit (digit)}
-			<button
-				onkeydown={passthrough}
-				type="button"
-				data-digit={digit}
-				disabled={digitDisabled[digit]}
-				onclick={onDigitClick}>{digit}</button
-			>
-		{/each}
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={!decimal || (value != null && value % 1 !== 0) || _value.endsWith('.')}
-			onclick={addDecimal}>.</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			data-digit="0"
-			disabled={digitDisabled[0]}
-			onclick={onDigitClick}>0</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={_value.length === 0}
-			onclick={backspace}>⌫</button
-		>
-	</div>
-</div>
-
+</script>
+
+<div class="number-input-wrapper">
+	<div class="left-side">
+		<div class="value-container">
+			<!-- textInput is the only available option when you try to add a decimal point programmatically -->
+			<TextInput
+				labelTop={label}
+				{placeholder}
+				{labelRight}
+				bind:inputRef
+				bind:value={_value}
+				variant={InputVariant.Modal}
+				required
+				invalid={lessThanMin || moreThanMax}
+			/>
+			{#if max != undefined}
+				<TextInput
+					value={`${max}`}
+					labelTop={i18n['scoria.label.maximum']()}
+					selectNone
+					disabled
+					variant={InputVariant.Modal}
+				/>
+			{/if}
+		</div>
+		<div class="plus-minus">
+			<button
+				onkeydown={passthrough}
+				type="button"
+				disabled={value != null && min != null && value <= min}
+				onclick={minus}><Icon name="minus" /></button
+			>
+			<button
+				onkeydown={passthrough}
+				type="button"
+				disabled={value != null && max != null && value >= max}
+				onclick={plus}><Icon name="plus" /></button
+			>
+		</div>
+	</div>
+	<div class="number-grid">
+		{#each DIGITS as digit (digit)}
+			<button
+				onkeydown={passthrough}
+				type="button"
+				data-digit={digit}
+				disabled={digitDisabled[digit]}
+				onclick={onDigitClick}>{digit}</button
+			>
+		{/each}
+		<button
+			onkeydown={passthrough}
+			type="button"
+			disabled={!decimal || (value != null && value % 1 !== 0) || _value.endsWith('.')}
+			onclick={addDecimal}>.</button
+		>
+		<button
+			onkeydown={passthrough}
+			type="button"
+			data-digit="0"
+			disabled={digitDisabled[0]}
+			onclick={onDigitClick}>0</button
+		>
+		<button
+			onkeydown={passthrough}
+			type="button"
+			disabled={_value.length === 0}
+			onclick={backspace}>⌫</button
+		>
+	</div>
+</div>
+
 <style>button {
   color: #3a4952;
   fill: #3a4952;
@@ -273,4 +273,4 @@ button {
 }
 .number-input-wrapper .number-grid {
   flex-grow: 2;
-}</style>
+}</style>

package/dist/Components/Touch/NumberModal.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { m as i18n } from "../../paraglide/messages.js";
 import { useAsyncFlag } from "../../Helpers/AsyncFlag.svelte.js";
 import { passthrough } from "../../Helpers/Helpers.svelte.js";
@@ -11,52 +11,52 @@ let { coerceValue = false, header, value, label, placeholder, min, max, cancelEd
 // fed back to `NumberKeyboard`.
 let tempValue = $derived(value);
 const isAcceptableValue = useAsyncFlag(() => tempValue == null ? false : isValid?.(tempValue) ?? true, false);
-</script>
-
-<TouchModal
-	onclose={() => {
-		cancelEditing();
-	}}
-	{header}
-	mandatory
-	onsubmit={(e: SubmitEvent) => {
-		e.preventDefault();
-		if (tempValue == null) {
-			return;
-		}
-		confirm(tempValue);
-	}}
-	{explanation}
->
-	<div class="number-input-wrapper">
-		<NumberKeyboard
-			{coerceValue}
-			{min}
-			{max}
-			{label}
-			{placeholder}
-			bind:value={tempValue}
-			{decimal}
-		/>
-	</div>
-	{#snippet footer()}
-		<div class="modal-footer">
-			<button
-				onkeydown={passthrough}
-				type="submit"
-				disabled={!isAcceptableValue.value}>{i18n['scoria.action.confirm']()}</button
-			>
-			<button
-				onkeydown={passthrough}
-				type="button"
-				onclick={() => {
-					cancelEditing();
-				}}>{i18n['scoria.action.cancel']()}</button
-			>
-		</div>
-	{/snippet}
-</TouchModal>
-
+</script>
+
+<TouchModal
+	onclose={() => {
+		cancelEditing();
+	}}
+	{header}
+	mandatory
+	onsubmit={(e: SubmitEvent) => {
+		e.preventDefault();
+		if (tempValue == null) {
+			return;
+		}
+		confirm(tempValue);
+	}}
+	{explanation}
+>
+	<div class="number-input-wrapper">
+		<NumberKeyboard
+			{coerceValue}
+			{min}
+			{max}
+			{label}
+			{placeholder}
+			bind:value={tempValue}
+			{decimal}
+		/>
+	</div>
+	{#snippet footer()}
+		<div class="modal-footer">
+			<button
+				onkeydown={passthrough}
+				type="submit"
+				disabled={!isAcceptableValue.value}>{i18n['scoria.action.confirm']()}</button
+			>
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>{i18n['scoria.action.cancel']()}</button
+			>
+		</div>
+	{/snippet}
+</TouchModal>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -323,4 +323,4 @@ button {
 }
 .modal-footer button[type=submit]:not([disabled]):focus {
   outline-offset: -2px;
-}</style>
+}</style>

package/dist/Components/Touch/PlusMinusCard.svelte

@@ -1,46 +1,46 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { m as i18n } from "../../paraglide/messages.js";
 import { Size } from "../../Types/Internal/Size.js";
 import Action from "../Action.svelte";
 let { callback, disabled = false, children } = $props();
-</script>
-
-<div
-	class="card pad-right"
-	class:disabled
->
-	<div class="icon-left">
-		<Action
-			{disabled}
-			label={i18n['scoria.action.decrement']()}
-			onclick={() => {
-				callback(-1);
-			}}
-			icon={{
-				name: 'circle-minus',
-				size: Size.DoubleXLarge,
-			}}
-			size={Size.DoubleXLarge}
-		/>
-	</div>
-	<span class="value">{@render children()}</span>
-	<div class="icon-right">
-		<Action
-			{disabled}
-			label={i18n['scoria.action.increment']()}
-			onclick={() => {
-				callback(1);
-			}}
-			icon={{
-				name: 'circle-plus',
-				size: Size.DoubleXLarge,
-			}}
-			size={Size.DoubleXLarge}
-		/>
-	</div>
-</div>
-
+</script>
+
+<div
+	class="card pad-right"
+	class:disabled
+>
+	<div class="icon-left">
+		<Action
+			{disabled}
+			label={i18n['scoria.action.decrement']()}
+			onclick={() => {
+				callback(-1);
+			}}
+			icon={{
+				name: 'circle-minus',
+				size: Size.DoubleXLarge,
+			}}
+			size={Size.DoubleXLarge}
+		/>
+	</div>
+	<span class="value">{@render children()}</span>
+	<div class="icon-right">
+		<Action
+			{disabled}
+			label={i18n['scoria.action.increment']()}
+			onclick={() => {
+				callback(1);
+			}}
+			icon={{
+				name: 'circle-plus',
+				size: Size.DoubleXLarge,
+			}}
+			size={Size.DoubleXLarge}
+		/>
+	</div>
+</div>
+
 <style>.card {
   color: #3a4952;
   fill: #3a4952;
@@ -89,4 +89,4 @@ let { callback, disabled = false, children } = $props();
 .card.disabled {
   background-color: #f4f7f9;
   color: #8096a5;
-}</style>
+}</style>

package/dist/Components/Touch/SelectModal.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { m as i18n } from "../../paraglide/messages.js";
 import { devCatch, passthrough } from "../../Helpers/Helpers.svelte.js";
 import { InputVariant } from "../../Types/Internal/InputVariant.js";
@@ -27,89 +27,89 @@ onMount(() => {
 		}
 	}).catch(devCatch);
 });
-</script>
-
-<TouchModal
-	onclose={() => {
-		cancelEditing();
-	}}
-	{header}
-	mandatory
-	staticHeight
-	onsubmit={(e: SubmitEvent) => {
-		e.preventDefault();
-		if (searchbar) {
-			filteredChoices[0]?.callback?.()?.catch(devCatch);
-		}
-	}}
->
-	<div
-		class="select-container"
-		class:with-top-padding={!searchbar}
-	>
-		{#if filteredChoices.length === 0}
-			<span>{i18n['scoria.text.no_results']()}</span>
-		{/if}
-		<!-- Keyed by index, not `choice.label`: labels are not guaranteed
-		     unique (e.g. a courier can expose two services with the same
-		     name), and a duplicate `{#each}` key throws `each_key_duplicate`.
-		     The buttons hold no per-item state, so index keying is safe. -->
-		{#each filteredChoices as choice, index (index)}
-			{#if selected === choice.label}
-				{#if choice.callback}
-					<button
-						onkeydown={passthrough}
-						bind:this={selectedRef}
-						type="button"
-						onclick={() => choice.callback?.()}>{choice.label}</button
-					>
-				{:else}
-					<button
-						onkeydown={passthrough}
-						bind:this={selectedRef}
-						type={choice.type}>{choice.label}</button
-					>
-				{/if}
-			{:else if choice.callback}
-				<button
-					onkeydown={passthrough}
-					type="button"
-					onclick={() => choice.callback?.()}>{choice.label}</button
-				>
-			{:else}
-				<button
-					onkeydown={passthrough}
-					type={choice.type}>{choice.label}</button
-				>
-			{/if}
-		{/each}
-	</div>
-
-	{#snippet headerExtra()}
-		{#if searchbar}
-			<div class="header-extra visible">
-				<TextInput
-					labelTop={i18n['scoria.label.search']()}
-					bind:value={searchValue}
-					variant={InputVariant.Modal}
-				/>
-			</div>
-		{/if}
-	{/snippet}
-
-	{#snippet footer()}
-		<div class="cancel-container">
-			<button
-				onkeydown={passthrough}
-				type="button"
-				onclick={() => {
-					cancelEditing();
-				}}>{i18n['scoria.action.cancel']()}</button
-			>
-		</div>
-	{/snippet}
-</TouchModal>
-
+</script>
+
+<TouchModal
+	onclose={() => {
+		cancelEditing();
+	}}
+	{header}
+	mandatory
+	staticHeight
+	onsubmit={(e: SubmitEvent) => {
+		e.preventDefault();
+		if (searchbar) {
+			filteredChoices[0]?.callback?.()?.catch(devCatch);
+		}
+	}}
+>
+	<div
+		class="select-container"
+		class:with-top-padding={!searchbar}
+	>
+		{#if filteredChoices.length === 0}
+			<span>{i18n['scoria.text.no_results']()}</span>
+		{/if}
+		<!-- Keyed by index, not `choice.label`: labels are not guaranteed
+		     unique (e.g. a courier can expose two services with the same
+		     name), and a duplicate `{#each}` key throws `each_key_duplicate`.
+		     The buttons hold no per-item state, so index keying is safe. -->
+		{#each filteredChoices as choice, index (index)}
+			{#if selected === choice.label}
+				{#if choice.callback}
+					<button
+						onkeydown={passthrough}
+						bind:this={selectedRef}
+						type="button"
+						onclick={() => choice.callback?.()}>{choice.label}</button
+					>
+				{:else}
+					<button
+						onkeydown={passthrough}
+						bind:this={selectedRef}
+						type={choice.type}>{choice.label}</button
+					>
+				{/if}
+			{:else if choice.callback}
+				<button
+					onkeydown={passthrough}
+					type="button"
+					onclick={() => choice.callback?.()}>{choice.label}</button
+				>
+			{:else}
+				<button
+					onkeydown={passthrough}
+					type={choice.type}>{choice.label}</button
+				>
+			{/if}
+		{/each}
+	</div>
+
+	{#snippet headerExtra()}
+		{#if searchbar}
+			<div class="header-extra visible">
+				<TextInput
+					labelTop={i18n['scoria.label.search']()}
+					bind:value={searchValue}
+					variant={InputVariant.Modal}
+				/>
+			</div>
+		{/if}
+	{/snippet}
+
+	{#snippet footer()}
+		<div class="cancel-container">
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>{i18n['scoria.action.cancel']()}</button
+			>
+		</div>
+	{/snippet}
+</TouchModal>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -361,4 +361,4 @@ button {
 
 button {
   align-items: center;
-}</style>
+}</style>