@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/Touch/TouchModal.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 { browser } from "$app/environment";
 import { DATAMatrix } from "../../Helpers/Datamatrix.js";
@@ -14,8 +14,8 @@ import { onMount } from "svelte";
 import Action from "../Action.svelte";
 import BaseModal from "../Base/BaseModal.svelte";
 import DataMatrixIcon from "../DataMatrixIcon.svelte";
-</script>
-
+</script>
+
 <script lang="ts">let { header, buttons, mandatory = false, staticHeight = false, staticWidth = false, minWidth = "400px", minHeight = "280px", width, height, onShowCallback, defaultTimer, isValid = true, noscroll = false, onsubmit, headerExtra, explanation, children, footer, onclose, row, wrap, submitRef = $bindable() } = $props();
 let open = $state(true);
 let form = $state();
@@ -83,139 +83,139 @@ const dialogClassNames = $derived([
 	noscroll ? "noscroll" : null
 ].filter((c) => c !== null).join(" "));
 const dialogStyle = $derived(`--timer: ${defaultTimer ? defaultTimer.time.toString() + "ms" : "unset"};` + `--dialog-min-width: ${minWidth};` + `--dialog-min-height: ${minHeight};` + (height != null ? `--dialog-height: ${height};` : "") + (width != null ? `--dialog-width: ${width};` : ""));
-</script>
-
-<BaseModal
-	bind:value={open}
-	{onclose}
-	{mandatory}
-	dialogClass={dialogClassNames}
-	{dialogStyle}
->
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<form
-		method="dialog"
-		bind:this={form}
-		onsubmit={(e) => {
-			e.preventDefault();
-			clearTimer();
-			if (isActive) {
-				onsubmit?.(e);
-			}
-		}}
-		onclick={clearTimer}
-		class="modal-root"
-	>
-		<div class="modal-header">
-			{#if mandatory}
-				<div class="title-wrapper">
-					<h3 class="modal-heading">{header}</h3>
-				</div>
-			{:else}
-				<div class="title-wrapper">
-					<h3 class="modal-heading padded">{header}</h3>
-					<div class="close-button">
-						<Action
-							size={Size.Large}
-							onclick={requestClose}
-							icon={{
-								name: 'cross',
-								size: Size.DoubleXLarge,
-							}}
-							onkeydown={handleEsc}
-							colourSet={ColourSet.Primary}
-							label={i18n['scoria.action.close_modal_generic']()}
-						/>
-					</div>
-				</div>
-			{/if}
-
-			{#if headerExtra}
-				{@render headerExtra()}
-			{/if}
-		</div>
-
-		{#if defaultTimer}
-			<div class="bar-container">
-				<div
-					class:paused
-					class="bar-timer"
-				></div>
-			</div>
-		{/if}
-
-		<div
-			class="modal-main"
-			class:row
-			class:wrap
-			class:noscroll
-		>
-			{#if explanation}
-				{@render explanation()}
-			{/if}
-			{@render children()}
-		</div>
-
-		{#if footer}
-			{@render footer()}
-		{:else if buttons?.length}
-			<div class="modal-footer">
-				{#each buttons as button, index (button.label)}
-					{@const buttonIsValid = buttonValidities.value[index] ?? true}
-					{#if button.callback}
-						<div class="button-barcode-set">
-							{#if barcodeIcons[index]}
-								<DataMatrixIcon
-									title={button.label}
-									icon={{ kind: 'svg', svg: barcodeIcons[index] }}
-								/>
-							{/if}
-							<button
-								class:call-to-action={button.colourSet === ColourSet.CallToAction}
-								class:primary={button.colourSet === ColourSet.Primary}
-								class:secondary-colour={button.colourSet === ColourSet.Secondary}
-								class:warning={button.colourSet === ColourSet.Warning}
-								class:error={button.colourSet === ColourSet.Error}
-								class:info={button.colourSet === ColourSet.Info}
-								onkeydown={passthrough}
-								disabled={!buttonIsValid}
-								class:margin-inline-start={button.margin === 'left'}
-								class:margin-inline-end={button.margin === 'right'}
-								type={button.type ?? 'button'}
-								onclick={button.callback}>{button.label}</button
-							>
-						</div>
-					{:else}
-						<div class="button-barcode-set">
-							{#if barcodeIcons[index]}
-								<DataMatrixIcon
-									title={button.label}
-									icon={{ kind: 'svg', svg: barcodeIcons[index] }}
-								/>
-							{/if}
-							<button
-								class:call-to-action={button.colourSet === ColourSet.CallToAction}
-								class:primary={button.colourSet === ColourSet.Primary}
-								class:secondary-colour={button.colourSet === ColourSet.Secondary}
-								class:warning={button.colourSet === ColourSet.Warning}
-								class:error={button.colourSet === ColourSet.Error}
-								class:info={button.colourSet === ColourSet.Info}
-								onkeydown={passthrough}
-								disabled={!buttonIsValid || !isValid}
-								class:margin-inline-start={button.margin === 'left'}
-								class:margin-inline-end={button.margin === 'right'}
-								bind:this={submitRef}
-								type={button.type ?? 'submit'}>{button.label}</button
-							>
-						</div>
-					{/if}
-				{/each}
-			</div>
-		{/if}
-	</form>
-</BaseModal>
-
+</script>
+
+<BaseModal
+	bind:value={open}
+	{onclose}
+	{mandatory}
+	dialogClass={dialogClassNames}
+	{dialogStyle}
+>
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<form
+		method="dialog"
+		bind:this={form}
+		onsubmit={(e) => {
+			e.preventDefault();
+			clearTimer();
+			if (isActive) {
+				onsubmit?.(e);
+			}
+		}}
+		onclick={clearTimer}
+		class="modal-root"
+	>
+		<div class="modal-header">
+			{#if mandatory}
+				<div class="title-wrapper">
+					<h3 class="modal-heading">{header}</h3>
+				</div>
+			{:else}
+				<div class="title-wrapper">
+					<h3 class="modal-heading padded">{header}</h3>
+					<div class="close-button">
+						<Action
+							size={Size.Large}
+							onclick={requestClose}
+							icon={{
+								name: 'cross',
+								size: Size.DoubleXLarge,
+							}}
+							onkeydown={handleEsc}
+							colourSet={ColourSet.Primary}
+							label={i18n['scoria.action.close_modal_generic']()}
+						/>
+					</div>
+				</div>
+			{/if}
+
+			{#if headerExtra}
+				{@render headerExtra()}
+			{/if}
+		</div>
+
+		{#if defaultTimer}
+			<div class="bar-container">
+				<div
+					class:paused
+					class="bar-timer"
+				></div>
+			</div>
+		{/if}
+
+		<div
+			class="modal-main"
+			class:row
+			class:wrap
+			class:noscroll
+		>
+			{#if explanation}
+				{@render explanation()}
+			{/if}
+			{@render children()}
+		</div>
+
+		{#if footer}
+			{@render footer()}
+		{:else if buttons?.length}
+			<div class="modal-footer">
+				{#each buttons as button, index (button.label)}
+					{@const buttonIsValid = buttonValidities.value[index] ?? true}
+					{#if button.callback}
+						<div class="button-barcode-set">
+							{#if barcodeIcons[index]}
+								<DataMatrixIcon
+									title={button.label}
+									icon={{ kind: 'svg', svg: barcodeIcons[index] }}
+								/>
+							{/if}
+							<button
+								class:call-to-action={button.colourSet === ColourSet.CallToAction}
+								class:primary={button.colourSet === ColourSet.Primary}
+								class:secondary-colour={button.colourSet === ColourSet.Secondary}
+								class:warning={button.colourSet === ColourSet.Warning}
+								class:error={button.colourSet === ColourSet.Error}
+								class:info={button.colourSet === ColourSet.Info}
+								onkeydown={passthrough}
+								disabled={!buttonIsValid}
+								class:margin-inline-start={button.margin === 'left'}
+								class:margin-inline-end={button.margin === 'right'}
+								type={button.type ?? 'button'}
+								onclick={button.callback}>{button.label}</button
+							>
+						</div>
+					{:else}
+						<div class="button-barcode-set">
+							{#if barcodeIcons[index]}
+								<DataMatrixIcon
+									title={button.label}
+									icon={{ kind: 'svg', svg: barcodeIcons[index] }}
+								/>
+							{/if}
+							<button
+								class:call-to-action={button.colourSet === ColourSet.CallToAction}
+								class:primary={button.colourSet === ColourSet.Primary}
+								class:secondary-colour={button.colourSet === ColourSet.Secondary}
+								class:warning={button.colourSet === ColourSet.Warning}
+								class:error={button.colourSet === ColourSet.Error}
+								class:info={button.colourSet === ColourSet.Info}
+								onkeydown={passthrough}
+								disabled={!buttonIsValid || !isValid}
+								class:margin-inline-start={button.margin === 'left'}
+								class:margin-inline-end={button.margin === 'right'}
+								bind:this={submitRef}
+								type={button.type ?? 'submit'}>{button.label}</button
+							>
+						</div>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+	</form>
+</BaseModal>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -463,4 +463,4 @@ div.bar-container div.bar-timer.paused {
   animation-play-state: paused;
   opacity: 0%;
   transition: opacity 300ms 0s ease-out;
-}</style>
+}</style>

package/dist/Components/Touch/UtilityButton.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { passthrough } from "../../Helpers/Helpers.svelte.js";
 import { ColourSet } from "../../scss/colours.js";
 import { Side } from "../../Types/Internal/Side.js";
@@ -25,66 +25,66 @@ const size = $derived.by(() => {
 	return icon?.size ?? Size.DoubleXLarge;
 });
 let slotSpan = $state();
-</script>
-
-<button
-	{type}
-	class:call-to-action={colourSet === ColourSet.Primary || colourSet === ColourSet.CallToAction}
-	{disabled}
-	class:left={side == Side.Left}
-	class:right={side == Side.Right}
-	class:top={side == Side.Top}
-	class:bottom={side == Side.Bottom}
-	bind:this={ref}
-	aria-label={label}
-	{onclick}
-	{onfocus}
-	{onblur}
-	oncontextmenu={(e) => {
-		if (onEditBarcode) {
-			e.preventDefault();
-			onEditBarcode();
-		}
-	}}
-	onkeydown={passthrough}
->
-	{#if isMounted && icon}
-		<div
-			class="expand"
-			class:left={side == Side.Left}
-			class:right={side == Side.Right}
-			class:top={side == Side.Top}
-			class:bottom={side == Side.Bottom}
-		>
-			{#if icon instanceof SVGSVGElement}
-				<!-- SECURITY: UtilityButton accepts a generic SVGSVGElement here for backwards
-				     compatibility. The cast to DataMatrixSvg trusts the caller; DataMatrixIcon
-				     additionally sanitises the cloned subtree before mounting. -->
-				<DataMatrixIcon
-					title={slotSpan?.textContent ?? '{unknown}'}
-					icon={{ kind: 'svg', svg: icon as DataMatrixSvg }}
-				/>
-			{:else}
-				{#if notifications}
-					<span class="notification">{notifications}</span>
-				{/if}
-
-				<Icon
-					{...icon}
-					{size}
-				/>
-			{/if}
-		</div>
-	{/if}
-	<span class="utility-label">
-		{#if notifications && icon instanceof SVGSVGElement}
-			<span class="notification-on-text">{notifications}</span>
-		{/if}<span bind:this={slotSpan}
-			>{#if children}{@render children()}{/if}</span
-		>
-	</span>
-</button>
-
+</script>
+
+<button
+	{type}
+	class:call-to-action={colourSet === ColourSet.Primary || colourSet === ColourSet.CallToAction}
+	{disabled}
+	class:left={side == Side.Left}
+	class:right={side == Side.Right}
+	class:top={side == Side.Top}
+	class:bottom={side == Side.Bottom}
+	bind:this={ref}
+	aria-label={label}
+	{onclick}
+	{onfocus}
+	{onblur}
+	oncontextmenu={(e) => {
+		if (onEditBarcode) {
+			e.preventDefault();
+			onEditBarcode();
+		}
+	}}
+	onkeydown={passthrough}
+>
+	{#if isMounted && icon}
+		<div
+			class="expand"
+			class:left={side == Side.Left}
+			class:right={side == Side.Right}
+			class:top={side == Side.Top}
+			class:bottom={side == Side.Bottom}
+		>
+			{#if icon instanceof SVGSVGElement}
+				<!-- SECURITY: UtilityButton accepts a generic SVGSVGElement here for backwards
+				     compatibility. The cast to DataMatrixSvg trusts the caller; DataMatrixIcon
+				     additionally sanitises the cloned subtree before mounting. -->
+				<DataMatrixIcon
+					title={slotSpan?.textContent ?? '{unknown}'}
+					icon={{ kind: 'svg', svg: icon as DataMatrixSvg }}
+				/>
+			{:else}
+				{#if notifications}
+					<span class="notification">{notifications}</span>
+				{/if}
+
+				<Icon
+					{...icon}
+					{size}
+				/>
+			{/if}
+		</div>
+	{/if}
+	<span class="utility-label">
+		{#if notifications && icon instanceof SVGSVGElement}
+			<span class="notification-on-text">{notifications}</span>
+		{/if}<span bind:this={slotSpan}
+			>{#if children}{@render children()}{/if}</span
+		>
+	</span>
+</button>
+
 <style>button {
   background-color: #f4f7f9;
   box-sizing: border-box;
@@ -173,4 +173,4 @@ button:not([disabled]).call-to-action:not([disabled]):focus, button:not([disable
 }
 button:not([disabled]).call-to-action:not([disabled]):focus {
   outline-offset: -2px;
-}</style>
+}</style>

package/dist/Components/VerticalTabGroup.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="CommonDenominator"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="CommonDenominator"
 >import { m as i18n } from "../paraglide/messages.js";
 import { readJSON } from "../Helpers/Storage.js";
 import { onMount, untrack } from "svelte";
@@ -27,38 +27,38 @@ $effect(() => {
 		});
 	}
 });
-</script>
-
-<div
-	class="wrapper"
-	class:noscroll
-	class:dense
-	{style}
->
-	<div class="tabs">
-		{#each tabs as option (option.label)}
-			<VerticalTabGroupButton
-				{option}
-				selected={selected?.label === option.label}
-			/>
-		{/each}
-	</div>
-
-	<div
-		class="content"
-		class:noscroll
-		class:dense
-	>
-		{#if selected}
-			{@render selected.content(selected.args)}
-		{:else}
-			<div class="wrapper bg">
-				<span class="red">{noTabMessage ?? i18n['scoria.text.no_tab_selected']()}</span>
-			</div>
-		{/if}
-	</div>
-</div>
-
+</script>
+
+<div
+	class="wrapper"
+	class:noscroll
+	class:dense
+	{style}
+>
+	<div class="tabs">
+		{#each tabs as option (option.label)}
+			<VerticalTabGroupButton
+				{option}
+				selected={selected?.label === option.label}
+			/>
+		{/each}
+	</div>
+
+	<div
+		class="content"
+		class:noscroll
+		class:dense
+	>
+		{#if selected}
+			{@render selected.content(selected.args)}
+		{:else}
+			<div class="wrapper bg">
+				<span class="red">{noTabMessage ?? i18n['scoria.text.no_tab_selected']()}</span>
+			</div>
+		{/if}
+	</div>
+</div>
+
 <style>.bg {
   padding: 1.5rem;
   background-color: #f9e9e9;
@@ -107,4 +107,4 @@ $effect(() => {
 .wrapper .content.dense {
   flex-grow: 0;
   overflow: visible;
-}</style>
+}</style>

package/dist/Components/VerticalTabGroupButton.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="Args"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="Args"
 >import { useAsyncFlag } from "../Helpers/AsyncFlag.svelte.js";
 import { Colour } from "../scss/colours.js";
 import { Size } from "../Types/Internal/Size.js";
@@ -11,46 +11,46 @@ const { option, selected } = $props();
 const isValid = useAsyncFlag(() => option.isValid, true);
 const disabled = useAsyncFlag(() => option.disabled, false);
 const visible = useAsyncFlag(() => option.visible, true);
-</script>
-
-<button
-	class:selected
-	disabled={disabled.value}
-	onclick={() => {
-		option.onclick();
-	}}
-	type="button"
-	class="tab"
-	class:invalid={!isValid.value}
-	class:hidden={!visible.value}
->
-	<div
-		class="bordered"
-		class:invalid={!isValid.value}
-	>
-		{#if option.iconLeft}
-			<Icon
-				{...option.iconLeft}
-				colour={Colour['$brand-primary']}
-			/>
-		{/if}
-		{option.label}
-		{#if !isValid.value}
-			<Icon
-				name="error"
-				colour={Colour['$error-border']}
-				size={Size.Small}
-			/>
-		{:else if option.iconRight}
-			<Icon
-				colour={Colour['$brand-primary']}
-				size={Size.Small}
-				{...option.iconRight}
-			/>
-		{/if}
-	</div>
-</button>
-
+</script>
+
+<button
+	class:selected
+	disabled={disabled.value}
+	onclick={() => {
+		option.onclick();
+	}}
+	type="button"
+	class="tab"
+	class:invalid={!isValid.value}
+	class:hidden={!visible.value}
+>
+	<div
+		class="bordered"
+		class:invalid={!isValid.value}
+	>
+		{#if option.iconLeft}
+			<Icon
+				{...option.iconLeft}
+				colour={Colour['$brand-primary']}
+			/>
+		{/if}
+		{option.label}
+		{#if !isValid.value}
+			<Icon
+				name="error"
+				colour={Colour['$error-border']}
+				size={Size.Small}
+			/>
+		{:else if option.iconRight}
+			<Icon
+				colour={Colour['$brand-primary']}
+				size={Size.Small}
+				{...option.iconRight}
+			/>
+		{/if}
+	</div>
+</button>
+
 <style>button.tab.hidden {
   display: none !important;
 }
@@ -97,4 +97,4 @@ const visible = useAsyncFlag(() => option.visible, true);
 }
 .tab.selected.invalid {
   border-bottom-color: #aa1414;
-}</style>
+}</style>

package/dist/Helpers/Datamatrix.d.ts

@@ -1,19 +1,19 @@
-import type { DataMatrixSvg } from '../Components/DataMatrixIconProps.js';
-
-export interface IDatamatrixOptions {
-	msg: string;
-	dim?: number;
-	rct?: number;
-	pad?: number;
-	pal?: [string, string];
-	vrb?: number;
-}
-
-/**
- * Build a DATAMatrix barcode SVG. The returned element is branded as
- * {@link DataMatrixSvg} so it can be passed directly to
- * `DataMatrixIcon` without further casting. The underlying JS
- * implementation produces a vanilla `SVGSVGElement`; the brand is a
- * compile-time discipline only.
- */
-export declare function DATAMatrix(value: IDatamatrixOptions | string): DataMatrixSvg;
+import type { DataMatrixSvg } from '../Components/DataMatrixIconProps.js';
+
+export interface IDatamatrixOptions {
+	msg: string;
+	dim?: number;
+	rct?: number;
+	pad?: number;
+	pal?: [string, string];
+	vrb?: number;
+}
+
+/**
+ * Build a DATAMatrix barcode SVG. The returned element is branded as
+ * {@link DataMatrixSvg} so it can be passed directly to
+ * `DataMatrixIcon` without further casting. The underlying JS
+ * implementation produces a vanilla `SVGSVGElement`; the brand is a
+ * compile-time discipline only.
+ */
+export declare function DATAMatrix(value: IDatamatrixOptions | string): DataMatrixSvg;