@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/Touch/SelectModal.svelte

@@ -1,129 +1,114 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
-	import { InputVariant } from '../../Types/Internal/InputVariant.js';
-	import { onMount, tick } from 'svelte';
-	import TextInput from '../TextInput.svelte';
-	import type { SelectModalProps } from './SelectModalProps.js';
-	import TouchModal from './TouchModal.svelte';
-
-	const {
-		header,
-		searchbar = false,
-		choices,
-		cancelEditing,
-		selected,
-	}: SelectModalProps = $props();
-
-	let selectedRef: HTMLButtonElement | undefined = $state();
-	let searchValue = $state('');
-
-	// Cache the search needle's upper-case form so we do not re-upper-case
-	// the same string on every keystroke per choice. Per-label upper-casing
-	// is unavoidable but the needle is constant across the filter pass.
-	const searchNeedle = $derived(searchValue.toLocaleUpperCase());
-	const filteredChoices = $derived(
-		searchbar
-			? choices.filter((it) => it.label.toLocaleUpperCase().includes(searchNeedle))
-			: choices
-	);
-
-	onMount(() => {
-		tick()
-			.then(() => {
-				if (selected) {
-					selectedRef?.scrollIntoView({ block: 'center', inline: 'center' });
-					if (!searchbar) {
-						selectedRef?.focus();
-					}
-				}
-			})
-			.catch(devCatch);
-	});
-</script>
-
-<TouchModal
-	onclose={() => {
-		cancelEditing();
-	}}
-	{header}
-	mandatory
-	staticHeight
-	onsubmit={(e: SubmitEvent) => {
-		e.preventDefault();
-		if (searchbar) {
-			filteredChoices[0]?.callback?.()?.catch(devCatch);
+<svelte:options runes />
+
+<script lang="ts">import { devCatch, passthrough } from "../../Helpers/Helpers.svelte.js";
+import { InputVariant } from "../../Types/Internal/InputVariant.js";
+import { onMount, tick } from "svelte";
+import TextInput from "../TextInput.svelte";
+import TouchModal from "./TouchModal.svelte";
+const { header, searchbar = false, choices, cancelEditing, selected } = $props();
+let selectedRef = $state();
+let searchValue = $state("");
+// Cache the search needle's upper-case form so we do not re-upper-case
+// the same string on every keystroke per choice. Per-label upper-casing
+// is unavoidable but the needle is constant across the filter pass.
+const searchNeedle = $derived(searchValue.toLocaleUpperCase());
+const filteredChoices = $derived(searchbar ? choices.filter((it) => it.label.toLocaleUpperCase().includes(searchNeedle)) : choices);
+onMount(() => {
+	tick().then(() => {
+		if (selected) {
+			selectedRef?.scrollIntoView({
+				block: "center",
+				inline: "center"
+			});
+			if (!searchbar) {
+				selectedRef?.focus();
+			}
 		}
-	}}
->
-	<div
-		class="select-container"
-		class:with-top-padding={!searchbar}
-	>
-		{#if filteredChoices.length === 0}
-			<span>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="Search"
-					bind:value={searchValue}
-					variant={InputVariant.Modal}
-				/>
-			</div>
-		{/if}
-	{/snippet}
-
-	{#snippet footer()}
-		<div class="cancel-container">
-			<button
-				onkeydown={passthrough}
-				type="button"
-				onclick={() => {
-					cancelEditing();
-				}}>Cancel</button
-			>
-		</div>
-	{/snippet}
-</TouchModal>
-
+	}).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>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="Search"
+					bind:value={searchValue}
+					variant={InputVariant.Modal}
+				/>
+			</div>
+		{/if}
+	{/snippet}
+
+	{#snippet footer()}
+		<div class="cancel-container">
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>Cancel</button
+			>
+		</div>
+	{/snippet}
+</TouchModal>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -375,4 +360,4 @@ button {
 
 button {
   align-items: center;
-}</style>
+}</style>

package/dist/Components/Touch/SummaryCard.svelte

@@ -1,95 +1,82 @@
-<svelte:options runes />
-
-<script
-	module
-	lang="ts"
->
-	import { passthrough } from '../../Helpers/Helpers.svelte.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import Icon from '../Icon.svelte';
-	import type { SummaryCardProps } from './SummaryCardProps.js';
-
-	// CSS handles the dot-leader rendering via a flex pseudo element. We no
-	// longer interpolate a 108-character literal of dots into the markup.
-</script>
-
-<script lang="ts">
-	const {
-		bubbles,
-		desktop = false,
-		heading,
-		icon,
-		keyValues,
-		editable = false,
-		error = false,
-		onclick,
-	}: SummaryCardProps = $props();
-</script>
-
-{#snippet _heading()}
-	{#if desktop}
-		<span
-			class="desktop-heading"
-			class:invalid={error}>{heading}</span
-		>
-		<span
-			class="desktop-heading-border"
-			class:invalid={error}>{heading}</span
-		>
-	{:else}
-		{#if bubbles}
-			{#each bubbles as bubble (bubble)}
-				<div class="card-detail">{bubble}</div>
-			{/each}
-		{/if}
-
-		<div class="card-row heading">
-			<h3>{heading}</h3>
-			{#if editable}
-				<Icon
-					name="edit"
-					size={Size.DoubleXLarge}
-				/>
-			{/if}
-		</div>
-	{/if}
-{/snippet}
-
-<button
-	class:desktop
-	onkeydown={passthrough}
-	{onclick}
-	class="summary-card"
-	class:error
-	aria-label={onclick ? heading : undefined}
-	type="button"
->
-	<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-	{@render _heading()}
-	<div class="columns">
-		<div class="left">
-			{#each keyValues as { key, value } (key)}
-				<div class="card-row detail">
-					<span class="key">{key}</span>
-					<span
-						class="leader"
-						aria-hidden="true"
-					></span>
-					<span class="value">{value}</span>
-				</div>
-			{/each}
-		</div>
-		{#if icon}
-			<div class="right">
-				<Icon
-					name={icon}
-					size={Size.Medium}
-				/>
-			</div>
-		{/if}
-	</div>
-</button>
-
+<svelte:options runes />
+
+<script
+	module
+	lang="ts"
+>import { passthrough } from "../../Helpers/Helpers.svelte.js";
+import { Size } from "../../Types/Internal/Size.js";
+import Icon from "../Icon.svelte";
+// CSS handles the dot-leader rendering via a flex pseudo element. We no
+// longer interpolate a 108-character literal of dots into the markup.
+</script>
+
+<script lang="ts">const { bubbles, desktop = false, heading, icon, keyValues, editable = false, error = false, onclick } = $props();
+</script>
+
+{#snippet _heading()}
+	{#if desktop}
+		<span
+			class="desktop-heading"
+			class:invalid={error}>{heading}</span
+		>
+		<span
+			class="desktop-heading-border"
+			class:invalid={error}>{heading}</span
+		>
+	{:else}
+		{#if bubbles}
+			{#each bubbles as bubble (bubble)}
+				<div class="card-detail">{bubble}</div>
+			{/each}
+		{/if}
+
+		<div class="card-row heading">
+			<h3>{heading}</h3>
+			{#if editable}
+				<Icon
+					name="edit"
+					size={Size.DoubleXLarge}
+				/>
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
+<button
+	class:desktop
+	onkeydown={passthrough}
+	{onclick}
+	class="summary-card"
+	class:error
+	aria-label={onclick ? heading : undefined}
+	type="button"
+>
+	<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+	{@render _heading()}
+	<div class="columns">
+		<div class="left">
+			{#each keyValues as { key, value } (key)}
+				<div class="card-row detail">
+					<span class="key">{key}</span>
+					<span
+						class="leader"
+						aria-hidden="true"
+					></span>
+					<span class="value">{value}</span>
+				</div>
+			{/each}
+		</div>
+		{#if icon}
+			<div class="right">
+				<Icon
+					name={icon}
+					size={Size.Medium}
+				/>
+			</div>
+		{/if}
+	</div>
+</button>
+
 <style>ul {
   list-style: none;
   display: flex;
@@ -370,4 +357,4 @@ button.summary-card h3 {
   border-bottom: 1px dotted #647d8e;
   margin: 0 0.375rem;
   transform: translateY(-0.25em);
-}</style>
+}</style>

package/dist/Components/Touch/TextAreaModal.svelte

@@ -1,97 +1,75 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
-	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
-	import { Colour } from '../../scss/colours.js';
-	import { InputVariant } from '../../Types/Internal/InputVariant.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import { onMount, tick } from 'svelte';
-	import TextArea from '../TextArea.svelte';
-	import type { TextAreaModalProps } from './TextAreaModalProps.js';
-	import TouchModal from './TouchModal.svelte';
-
-	let {
-		header,
-		value = $bindable(''),
-		label,
-		placeholder,
-		cancelEditing,
-		confirm,
-		uppercase = false,
-		textAreaRef = $bindable(),
-		isValid: _isValid = true,
-		explanation,
-	}: TextAreaModalProps = $props();
-
-	onMount(() => {
-		tick()
-			.then(() => {
-				textAreaRef?.select();
-			})
-			.catch(devCatch);
-	});
-
-	async function resetValue() {
-		value = '';
-		await tick();
+<svelte:options runes />
+
+<script lang="ts">import { useAsyncFlag } from "../../Helpers/AsyncFlag.svelte.js";
+import { devCatch, passthrough } from "../../Helpers/Helpers.svelte.js";
+import { Colour } from "../../scss/colours.js";
+import { InputVariant } from "../../Types/Internal/InputVariant.js";
+import { Size } from "../../Types/Internal/Size.js";
+import { onMount, tick } from "svelte";
+import TextArea from "../TextArea.svelte";
+import TouchModal from "./TouchModal.svelte";
+let { header, value = $bindable(""), label, placeholder, cancelEditing, confirm, uppercase = false, textAreaRef = $bindable(), isValid: _isValid = true, explanation } = $props();
+onMount(() => {
+	tick().then(() => {
 		textAreaRef?.select();
-	}
-
-	const isValid = useAsyncFlag(
-		() => (typeof _isValid === 'function' ? _isValid(value) : _isValid),
-		true
-	);
-</script>
-
-<TouchModal
-	onclose={() => {
-		cancelEditing();
-	}}
-	{header}
-	mandatory
-	minHeight="400px"
-	minWidth="600px"
-	onsubmit={(e: SubmitEvent) => {
-		e.preventDefault();
-		confirm(value);
-	}}
-	{explanation}
->
-	<TextArea
-		{uppercase}
-		labelTop={label}
-		{placeholder}
-		bind:value
-		variant={InputVariant.Modal}
-		bind:textAreaRef
-		invalid={!isValid.value}
-		rightIcon={{
-			name: 'cross',
-			size: Size.Large,
-			colour: Colour['$font-primary'],
-		}}
-		onRightIconClick={resetValue}
-	/>
-
-	{#snippet footer()}
-		<div class="modal-footer">
-			<button
-				onkeydown={passthrough}
-				type="submit"
-				disabled={!isValid.value}>Confirm</button
-			>
-			<button
-				onkeydown={passthrough}
-				type="button"
-				onclick={() => {
-					cancelEditing();
-				}}>Cancel</button
-			>
-		</div>
-	{/snippet}
-</TouchModal>
-
+	}).catch(devCatch);
+});
+async function resetValue() {
+	value = "";
+	await tick();
+	textAreaRef?.select();
+}
+const isValid = useAsyncFlag(() => typeof _isValid === "function" ? _isValid(value) : _isValid, true);
+</script>
+
+<TouchModal
+	onclose={() => {
+		cancelEditing();
+	}}
+	{header}
+	mandatory
+	minHeight="400px"
+	minWidth="600px"
+	onsubmit={(e: SubmitEvent) => {
+		e.preventDefault();
+		confirm(value);
+	}}
+	{explanation}
+>
+	<TextArea
+		{uppercase}
+		labelTop={label}
+		{placeholder}
+		bind:value
+		variant={InputVariant.Modal}
+		bind:textAreaRef
+		invalid={!isValid.value}
+		rightIcon={{
+			name: 'cross',
+			size: Size.Large,
+			colour: Colour['$font-primary'],
+		}}
+		onRightIconClick={resetValue}
+	/>
+
+	{#snippet footer()}
+		<div class="modal-footer">
+			<button
+				onkeydown={passthrough}
+				type="submit"
+				disabled={!isValid.value}>Confirm</button
+			>
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>Cancel</button
+			>
+		</div>
+	{/snippet}
+</TouchModal>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -339,4 +317,4 @@ button {
   display: block;
   border-width: 2px;
   border-radius: 4px;
-}</style>
+}</style>