@lavalogic/scoria 0.37.44 → 0.37.46

package/dist/Components/AlertModal.svelte

@@ -1,185 +1,197 @@
-<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]',
-	} 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 does
-	// not exist during SvelteKit's server-render pass. The module loads
-	// in both environments; we gate the encoding on the `browser` flag so
-	// the server gets empty strings (the modal is hidden during SSR
-	// anyway) and the client gets the real SVGs after hydration.
-	const yesIcon = browser ? DATAMatrix(AlertShortcuts.yes) : '';
-	const noIcon = browser ? DATAMatrix(AlertShortcuts.no) : '';
-	const otherIcon = browser ? DATAMatrix(AlertShortcuts.other) : '';
-</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();
-		}
-	});
-
-	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) 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;
-				}
-			}
-		});
-	});
-</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">
-				<DataMatrixIcon
-					title={alertContext.yesLabel}
-					icon={{ kind: 'svg', svg: yesIcon }}
-				/>
-				<button
-					type="submit"
-					onkeydown={passthrough}
-					onclick={alertContext.onYes}>{alertContext.yesLabel}</button
-				>
-			</div>
-
-			{#if alertContext.otherLabel}
-				<div class="button-barcode-set">
-					<DataMatrixIcon
-						title={alertContext.otherLabel}
-						icon={{ kind: 'svg', svg: otherIcon }}
-					/>
-					<button
-						type="button"
-						onkeydown={passthrough}
-						onclick={alertContext.onOther}>{alertContext.otherLabel}</button
-					>
-				</div>
-			{/if}
-
-			{#if alertContext.noLabel}
-				<div class="button-barcode-set">
-					<DataMatrixIcon
-						title={alertContext.noLabel}
-						icon={{ kind: 'svg', svg: noIcon }}
-					/>
-					<button
-						type="button"
-						onkeydown={passthrough}
-						onclick={alertContext.onNo}>{alertContext.noLabel}</button
-					>
-				</div>
-			{/if}
-		</div>
-	</div>
-</dialog>
-
+<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();
+		}
+	});
+
+	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) 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;
+				}
+			}
+		});
+	});
+</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;
@@ -450,4 +462,4 @@ div.button-barcode-set {
   display: flex;
   flex-flow: row nowrap;
   gap: 1.5rem;
-}</style>
+}</style>