@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/AlertModal.svelte

@@ -1,197 +1,178 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { browser } from '$app/environment';
-	import { DATAMatrix } from '../Helpers/Datamatrix.js';
-	import type { DataMatrixSvg } from './DataMatrixIconProps.js';
-
-	// Frozen const map of scanner shortcut codes recognised by AlertModal.
-	// Using `Object.values` to drive comparisons keeps the strings off the
-	// hot path and gives us a single place to register new codes.
-	const AlertShortcuts = Object.freeze({
-		yes: '[YES]',
-		no: '[NO]',
-		other: '[OTHER]',
-	} as const);
-	type AlertShortcut = (typeof AlertShortcuts)[keyof typeof AlertShortcuts];
-
-	// Barcode icons are encoded once at module load (rather than per
-	// component instance) so opening multiple alerts is cheap.
-	//
-	// `DATAMatrix` calls `document.createElement` internally, which is not
-	// available during SvelteKit's server-render pass. We gate on `browser`
-	// and use `undefined` during SSR; the modal is hidden during SSR
-	// anyway, and each render site below guards with `{#if … }`.
-	const yesIcon: DataMatrixSvg | undefined = browser
-		? DATAMatrix(AlertShortcuts.yes)
-		: undefined;
-	const noIcon: DataMatrixSvg | undefined = browser
-		? DATAMatrix(AlertShortcuts.no)
-		: undefined;
-	const otherIcon: DataMatrixSvg | undefined = browser
-		? DATAMatrix(AlertShortcuts.other)
-		: undefined;
-</script>
-
-<script lang="ts">
-	import { AlertContext } from '../Contexts/AlertContext.svelte.js';
-	import { ToastContext } from '../Contexts/ToastContext.svelte.js';
-	import { UntypedInputContext } from '../Contexts/UntypedInputContext.svelte.js';
-	import { passthrough } from '../Helpers/Helpers.svelte.js';
-	import { dev } from '$app/environment';
-	import { getContext, onMount } from 'svelte';
-	import DataMatrixIcon from './DataMatrixIcon.svelte';
-	import ModalExplanation from './Touch/ModalExplanation.svelte';
-
-	let dialog: HTMLDialogElement | undefined = $state();
-
-	const alertContext = getContext<AlertContext>(AlertContext.identifier);
-	const untypedInputContext = getContext<UntypedInputContext>(UntypedInputContext.identifier);
-	const toastContext = getContext<ToastContext>(ToastContext.identifier);
-
-	$effect(() => {
-		if (!dialog) {
-			return;
-		}
-		if (alertContext.showModal && !dialog.open) {
-			dialog.showModal();
-		} else if (!alertContext.showModal && dialog.open) {
-			dialog.close();
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>import { browser } from "$app/environment";
+import { DATAMatrix } from "../Helpers/Datamatrix.js";
+// Frozen const map of scanner shortcut codes recognised by AlertModal.
+// Using `Object.values` to drive comparisons keeps the strings off the
+// hot path and gives us a single place to register new codes.
+const AlertShortcuts = Object.freeze({
+	yes: "[YES]",
+	no: "[NO]",
+	other: "[OTHER]"
+});
+// Barcode icons are encoded once at module load (rather than per
+// component instance) so opening multiple alerts is cheap.
+//
+// `DATAMatrix` calls `document.createElement` internally, which is not
+// available during SvelteKit's server-render pass. We gate on `browser`
+// and use `undefined` during SSR; the modal is hidden during SSR
+// anyway, and each render site below guards with `{#if … }`.
+const yesIcon = browser ? DATAMatrix(AlertShortcuts.yes) : undefined;
+const noIcon = browser ? DATAMatrix(AlertShortcuts.no) : undefined;
+const otherIcon = browser ? DATAMatrix(AlertShortcuts.other) : undefined;
+</script>
+
+<script lang="ts">import { AlertContext } from "../Contexts/AlertContext.svelte.js";
+import { ToastContext } from "../Contexts/ToastContext.svelte.js";
+import { UntypedInputContext } from "../Contexts/UntypedInputContext.svelte.js";
+import { passthrough } from "../Helpers/Helpers.svelte.js";
+import { dev } from "$app/environment";
+import { getContext, onMount } from "svelte";
+import DataMatrixIcon from "./DataMatrixIcon.svelte";
+import ModalExplanation from "./Touch/ModalExplanation.svelte";
+let dialog = $state();
+const alertContext = getContext(AlertContext.identifier);
+const untypedInputContext = getContext(UntypedInputContext.identifier);
+const toastContext = getContext(ToastContext.identifier);
+$effect(() => {
+	if (!dialog) {
+		return;
+	}
+	if (alertContext.showModal && !dialog.open) {
+		dialog.showModal();
+	} else if (!alertContext.showModal && dialog.open) {
+		dialog.close();
+	}
+});
+onMount(() => {
+	return untypedInputContext.registerListener((value) => {
+		// Only react when this AlertModal is the active dialog. This keeps
+		// stray scanner reads from being interpreted as a confirmation when
+		// the alert is not on-screen.
+		if (!alertContext.showModal) {
+			return false;
 		}
-	});
-
-	onMount(() => {
-		return untypedInputContext.registerListener((value) => {
-			// Only react when this AlertModal is the active dialog. This keeps
-			// stray scanner reads from being interpreted as a confirmation when
-			// the alert is not on-screen.
-			if (!alertContext.showModal) {
-				return false;
+		const matched = Object.values(AlertShortcuts).find((code) => code === value);
+		switch (matched) {
+			case AlertShortcuts.yes: {
+				alertContext.onYes();
+				return true;
 			}
-
-			const matched = (Object.values(AlertShortcuts) as ReadonlyArray<AlertShortcut>).find(
-				(code) => code === value
-			);
-			switch (matched) {
-				case AlertShortcuts.yes: {
-					alertContext.onYes();
-					return true;
-				}
-				case AlertShortcuts.no: {
-					alertContext.onNo();
-					return true;
-				}
-				case AlertShortcuts.other: {
-					alertContext.onOther();
-					return true;
-				}
-				default: {
-					if (dev) {
-						console.warn(`Uncaught command \`${value}\``);
-					}
-					toastContext.toast(`Unrecognised input: ${value}`);
-					return false;
-				}
+			case AlertShortcuts.no: {
+				alertContext.onNo();
+				return true;
 			}
-		});
-	});
-</script>
-
-<dialog
-	bind:this={dialog}
-	aria-modal="true"
-	aria-labelledby="alert-modal-heading"
-	aria-describedby="alert-modal-body"
-	onclose={() => {
-		// Only auto-fire `onNo` if a "No" action was actually configured.
-		// Closing an alert (with no `noLabel`) should resolve cleanly without
-		// pretending the user rejected it.
-		if (alertContext.noLabel != null) {
-			alertContext.onNo();
-		} else {
-			alertContext.onYes();
-		}
-	}}
-	onclick={(e) => {
-		if (e.target === dialog) {
-			if (!alertContext.mandatory) {
-				dialog.close();
+			case AlertShortcuts.other: {
+				alertContext.onOther();
+				return true;
+			}
+			default: {
+				if (dev) {
+					console.warn(`Uncaught command \`${value}\``);
+				}
+				toastContext.toast(`Unrecognised input: ${value}`);
+				return false;
 			}
 		}
-	}}
->
-	<div class="modal-root">
-		<h3
-			id="alert-modal-heading"
-			class="modal-heading"
-		>
-			{alertContext.header}
-		</h3>
-
-		<div
-			id="alert-modal-body"
-			class="modal-main pre-line"
-		>
-			<ModalExplanation>{alertContext.body}</ModalExplanation>
-		</div>
-
-		{#if alertContext.footer}
-			<span>{alertContext.footer}</span>
-		{/if}
-
-		<div class="modal-footer actions">
-			<div class="button-barcode-set">
-				{#if yesIcon}
-					<DataMatrixIcon
-						title={alertContext.yesLabel}
-						icon={{ kind: 'svg', svg: yesIcon }}
-					/>
-				{/if}
-				<button
-					type="submit"
-					onkeydown={passthrough}
-					onclick={alertContext.onYes}>{alertContext.yesLabel}</button
-				>
-			</div>
-
-			{#if alertContext.otherLabel}
-				<div class="button-barcode-set">
-					{#if otherIcon}
-						<DataMatrixIcon
-							title={alertContext.otherLabel}
-							icon={{ kind: 'svg', svg: otherIcon }}
-						/>
-					{/if}
-					<button
-						type="button"
-						onkeydown={passthrough}
-						onclick={alertContext.onOther}>{alertContext.otherLabel}</button
-					>
-				</div>
-			{/if}
-
-			{#if alertContext.noLabel}
-				<div class="button-barcode-set">
-					{#if noIcon}
-						<DataMatrixIcon
-							title={alertContext.noLabel}
-							icon={{ kind: 'svg', svg: noIcon }}
-						/>
-					{/if}
-					<button
-						type="button"
-						onkeydown={passthrough}
-						onclick={alertContext.onNo}>{alertContext.noLabel}</button
-					>
-				</div>
-			{/if}
-		</div>
-	</div>
-</dialog>
-
+	});
+});
+</script>
+
+<dialog
+	bind:this={dialog}
+	aria-modal="true"
+	aria-labelledby="alert-modal-heading"
+	aria-describedby="alert-modal-body"
+	onclose={() => {
+		// Only auto-fire `onNo` if a "No" action was actually configured.
+		// Closing an alert (with no `noLabel`) should resolve cleanly without
+		// pretending the user rejected it.
+		if (alertContext.noLabel != null) {
+			alertContext.onNo();
+		} else {
+			alertContext.onYes();
+		}
+	}}
+	onclick={(e) => {
+		if (e.target === dialog) {
+			if (!alertContext.mandatory) {
+				dialog.close();
+			}
+		}
+	}}
+>
+	<div class="modal-root">
+		<h3
+			id="alert-modal-heading"
+			class="modal-heading"
+		>
+			{alertContext.header}
+		</h3>
+
+		<div
+			id="alert-modal-body"
+			class="modal-main pre-line"
+		>
+			<ModalExplanation>{alertContext.body}</ModalExplanation>
+		</div>
+
+		{#if alertContext.footer}
+			<span>{alertContext.footer}</span>
+		{/if}
+
+		<div class="modal-footer actions">
+			<div class="button-barcode-set">
+				{#if yesIcon}
+					<DataMatrixIcon
+						title={alertContext.yesLabel}
+						icon={{ kind: 'svg', svg: yesIcon }}
+					/>
+				{/if}
+				<button
+					type="submit"
+					onkeydown={passthrough}
+					onclick={alertContext.onYes}>{alertContext.yesLabel}</button
+				>
+			</div>
+
+			{#if alertContext.otherLabel}
+				<div class="button-barcode-set">
+					{#if otherIcon}
+						<DataMatrixIcon
+							title={alertContext.otherLabel}
+							icon={{ kind: 'svg', svg: otherIcon }}
+						/>
+					{/if}
+					<button
+						type="button"
+						onkeydown={passthrough}
+						onclick={alertContext.onOther}>{alertContext.otherLabel}</button
+					>
+				</div>
+			{/if}
+
+			{#if alertContext.noLabel}
+				<div class="button-barcode-set">
+					{#if noIcon}
+						<DataMatrixIcon
+							title={alertContext.noLabel}
+							icon={{ kind: 'svg', svg: noIcon }}
+						/>
+					{/if}
+					<button
+						type="button"
+						onkeydown={passthrough}
+						onclick={alertContext.onNo}>{alertContext.noLabel}</button
+					>
+				</div>
+			{/if}
+		</div>
+	</div>
+</dialog>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -468,4 +449,4 @@ div.button-barcode-set {
   display: flex;
   flex-flow: row nowrap;
   gap: 1.5rem;
-}</style>
+}</style>