@lavalogic/scoria 0.34.0 → 0.35.0

package/dist/Components/Action.svelte

@@ -1,140 +1,140 @@
-<svelte:options runes />
-
-<script module lang="ts">
-	import { TooltipContext } from '../Contexts/TooltipContext.svelte.js';
-	import { Delay } from '../Delay/Delay.js';
-	import { passthrough } from '../Helpers/Helpers.svelte.js';
-	import { Shape } from '../Types/Internal/Shape.js';
-	import { Side } from '../Types/Internal/Side.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import { ColourSet } from '../scss/colours.js';
-	import { getContext } from 'svelte';
-	import type { ActionProps } from './ActionProps.js';
-	import Icon from './Icon.svelte';
-
-	const paddings: Record<Shape, Record<Size, number>> = {
-		[Shape.Rectangle]: {
-			[Size.Tiny]: 0.125,
-			[Size.Small]: 0.1875,
-			[Size.MediumSmall]: 0.3125,
-			[Size.Medium]: 0.375,
-			[Size.MediumLarge]: 0.5,
-			[Size.Large]: 0.625,
-			[Size.XLarge]: 0.6875,
-			[Size.DoubleXLarge]: 0.8125,
-			[Size.TripleXLarge]: 0.875,
-			[Size.FillWidth]: -1,
-			[Size.FillHeight]: -1
-		},
-		[Shape.Circle]: {
-			[Size.Tiny]: 0.1875,
-			[Size.Small]: 0.5,
-			[Size.MediumSmall]: 0.875,
-			[Size.Medium]: 1.0625,
-			[Size.MediumLarge]: 1.375,
-			[Size.Large]: 1.75,
-			[Size.XLarge]: 1.9375,
-			[Size.DoubleXLarge]: 2.25,
-			[Size.TripleXLarge]: 2.4375,
-			[Size.FillWidth]: -1,
-			[Size.FillHeight]: -1
-		}
-	};
-</script>
-
-<script lang="ts">
-	const {
-		icon,
-		id,
-		border = false,
-		shape = Shape.Rectangle,
-		label,
-		colourSet = ColourSet.Secondary,
-		size = Size.Medium,
-		paddingSize,
-		type = 'button',
-		noTabIndex = false,
-		disabled,
-		backgroundColour,
-		hoverBackgroundColour,
-		'data-type': dataType,
-		onfocus,
-		onblur,
-		onclick,
-		onkeydown: onkeydownProp,
-		style = '',
-		side
-	}: ActionProps = $props();
-
-	const iconSize: Size = $derived(icon.size ?? size);
-
-	const pad: string = $derived.by(() => {
-		const padSize = paddingSize ?? size;
-		return padSize === Size.FillWidth ? '' : `${paddings[shape][padSize]}rem`;
-	});
-
-	function onkeydown(e: KeyboardEvent) {
-		passthrough(e);
-
-		if (document.activeElement === e.target) {
-			onkeydownProp?.(e);
-		}
-	}
-
-	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
-	// const toastContext = getContext<ToastContext>(ToastContext.identifier);
-</script>
-
-<button
-	{id}
-	onmouseenter={(e) => {
-		if (label) {
-			// TODO test currentTarget here
-			const rect = (e.target as HTMLButtonElement).getBoundingClientRect();
-			tooltipContext.showTooltip({
-				text: label,
-				arrow: side ?? Side.Left,
-				delay: Delay.Default,
-				rect
-			});
-		}
-	}}
-	onmouseleave={() => {
-		if (label) {
-			tooltipContext.hideTooltip(label);
-		}
-	}}
-	tabindex={noTabIndex ? -1 : undefined}
-	data-type={dataType}
-	style="{pad ? `--pad: ${pad};` : ''} {backgroundColour
-		? `--background-colour: ${backgroundColour};`
-		: ``} {hoverBackgroundColour
-		? `--hover-background-colour: ${hoverBackgroundColour};`
-		: ``}{style}"
-	class:border
-	class:circular={shape === Shape.Circle}
-	class:primary={colourSet === ColourSet.Primary}
-	class:secondary={colourSet === ColourSet.Secondary}
-	class:auxiliary={colourSet === ColourSet.Auxiliary}
-	class:info={colourSet === ColourSet.Info}
-	class:error={colourSet === ColourSet.Error}
-	class:fill-width={size === Size.FillWidth}
-	class:fill-height={size === Size.FillHeight}
-	{type}
-	{disabled}
-	{onfocus}
-	{onblur}
-	{onkeydown}
-	onclick={(e) => {
-		// toastContext.toast("clicked action")
-		if (label) {
-			tooltipContext.hideTooltip(label);
-		}
-		onclick?.(e);
-	}}
-	aria-label={label}><Icon {...icon} size={iconSize} /></button
->
-
+<svelte:options runes />
+
+<script module lang="ts">
+	import { TooltipContext } from '../Contexts/TooltipContext.svelte.js';
+	import { Delay } from '../Delay/Delay.js';
+	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import { Shape } from '../Types/Internal/Shape.js';
+	import { Side } from '../Types/Internal/Side.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import { ColourSet } from '../scss/colours.js';
+	import { getContext } from 'svelte';
+	import type { ActionProps } from './ActionProps.js';
+	import Icon from './Icon.svelte';
+
+	const paddings: Record<Shape, Record<Size, number>> = {
+		[Shape.Rectangle]: {
+			[Size.Tiny]: 0.125,
+			[Size.Small]: 0.1875,
+			[Size.MediumSmall]: 0.3125,
+			[Size.Medium]: 0.375,
+			[Size.MediumLarge]: 0.5,
+			[Size.Large]: 0.625,
+			[Size.XLarge]: 0.6875,
+			[Size.DoubleXLarge]: 0.8125,
+			[Size.TripleXLarge]: 0.875,
+			[Size.FillWidth]: -1,
+			[Size.FillHeight]: -1
+		},
+		[Shape.Circle]: {
+			[Size.Tiny]: 0.1875,
+			[Size.Small]: 0.5,
+			[Size.MediumSmall]: 0.875,
+			[Size.Medium]: 1.0625,
+			[Size.MediumLarge]: 1.375,
+			[Size.Large]: 1.75,
+			[Size.XLarge]: 1.9375,
+			[Size.DoubleXLarge]: 2.25,
+			[Size.TripleXLarge]: 2.4375,
+			[Size.FillWidth]: -1,
+			[Size.FillHeight]: -1
+		}
+	};
+</script>
+
+<script lang="ts">
+	const {
+		icon,
+		id,
+		border = false,
+		shape = Shape.Rectangle,
+		label,
+		colourSet = ColourSet.Secondary,
+		size = Size.Medium,
+		paddingSize,
+		type = 'button',
+		noTabIndex = false,
+		disabled,
+		backgroundColour,
+		hoverBackgroundColour,
+		'data-type': dataType,
+		onfocus,
+		onblur,
+		onclick,
+		onkeydown: onkeydownProp,
+		style = '',
+		side
+	}: ActionProps = $props();
+
+	const iconSize: Size = $derived(icon.size ?? size);
+
+	const pad: string = $derived.by(() => {
+		const padSize = paddingSize ?? size;
+		return padSize === Size.FillWidth ? '' : `${paddings[shape][padSize]}rem`;
+	});
+
+	function onkeydown(e: KeyboardEvent) {
+		passthrough(e);
+
+		if (document.activeElement === e.target) {
+			onkeydownProp?.(e);
+		}
+	}
+
+	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
+	// const toastContext = getContext<ToastContext>(ToastContext.identifier);
+</script>
+
+<button
+	{id}
+	onmouseenter={(e) => {
+		if (label) {
+			// TODO test currentTarget here
+			const rect = (e.target as HTMLButtonElement).getBoundingClientRect();
+			tooltipContext.showTooltip({
+				text: label,
+				arrow: side ?? Side.Left,
+				delay: Delay.Default,
+				rect
+			});
+		}
+	}}
+	onmouseleave={() => {
+		if (label) {
+			tooltipContext.hideTooltip(label);
+		}
+	}}
+	tabindex={noTabIndex ? -1 : undefined}
+	data-type={dataType}
+	style="{pad ? `--pad: ${pad};` : ''} {backgroundColour
+		? `--background-colour: ${backgroundColour};`
+		: ``} {hoverBackgroundColour
+		? `--hover-background-colour: ${hoverBackgroundColour};`
+		: ``}{style}"
+	class:border
+	class:circular={shape === Shape.Circle}
+	class:primary={colourSet === ColourSet.Primary}
+	class:secondary={colourSet === ColourSet.Secondary}
+	class:auxiliary={colourSet === ColourSet.Auxiliary}
+	class:info={colourSet === ColourSet.Info}
+	class:error={colourSet === ColourSet.Error}
+	class:fill-width={size === Size.FillWidth}
+	class:fill-height={size === Size.FillHeight}
+	{type}
+	{disabled}
+	{onfocus}
+	{onblur}
+	{onkeydown}
+	onclick={(e) => {
+		// toastContext.toast("clicked action")
+		if (label) {
+			tooltipContext.hideTooltip(label);
+		}
+		onclick?.(e);
+	}}
+	aria-label={label}><Icon {...icon} size={iconSize} /></button
+>
+
 <style>button {
   color: #3a4952;
   fill: #3a4952;
@@ -230,4 +230,4 @@ button.circular {
 button {
   padding: var(--pad);
   cursor: pointer;
-}</style>
+}</style>

package/dist/Components/AlertModal.svelte

@@ -1,127 +1,127 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { AlertContext } from '../Contexts/AlertContext.svelte.js';
-	import { UntypedInputContext } from '../Contexts/UntypedInputContext.svelte.js';
-	import { DATAMatrix } from '../Helpers/Datamatrix.js';
-	import { passthrough } from '../Helpers/Helpers.svelte.js';
-	import { getContext, onMount } from 'svelte';
-	import DataMatrixIcon from './DataMatrixIcon.svelte';
-	import ModalExplanation from './Touch/ModalExplanation.svelte';
-
-	let dialog: HTMLDialogElement | undefined;
-
-	const alertContext = getContext<AlertContext>(AlertContext.identifier);
-
-	$effect(() => {
-		if (dialog) {
-			if (alertContext.showModal) {
-				dialog.showModal();
-			} else {
-				dialog.close();
-			}
-		}
-	});
-
-	const yesIcon = DATAMatrix('[YES]');
-
-	const { registerListener } = getContext<UntypedInputContext>(UntypedInputContext.identifier);
-	onMount(() =>
-		registerListener((value) => {
-			switch (value) {
-				case '[YES]': {
-					alertContext.onYes();
-					break;
-				}
-				case '[NO]': {
-					alertContext.onNo();
-					break;
-				}
-				case '[OTHER]': {
-					alertContext.onOther();
-					break;
-				}
-				default: {
-					console.warn(`Uncaught command \`${value}\``);
-				}
-			}
-
-			return true;
-		})
-	);
-</script>
-
-<!-- onclose={() => (alertContext.showModal = false)} -->
-<dialog
-	bind:this={dialog}
-	onclose={() => {
-		alertContext.onNo();
-	}}
-	onclick={(e) => {
-		if (e.target === dialog) {
-			if (!alertContext.mandatory) {
-				dialog.close();
-			}
-		}
-	}}
->
-	<div class="modal-root">
-		<h3 class="modal-heading">{alertContext.header}</h3>
-
-		<!-- <div class="modal-main pre-line">{$body}</div> -->
-		<div class="modal-main pre-line"><ModalExplanation>{alertContext.body}</ModalExplanation></div>
-
-		{#if alertContext.footer}
-			<!-- TODO either remove this part and make buttons the "footer", or allow consumer to pass an element -->
-			<span>{alertContext.footer}</span>
-		{/if}
-
-		<div class="modal-footer actions">
-			<div class="button-barcode-set">
-				<DataMatrixIcon
-					title="Yes"
-					icon={yesIcon}
-				/>
-				<button
-					type="submit"
-					onkeydown={passthrough}
-					onclick={alertContext.onYes}>{alertContext.yesLabel}</button
-				>
-			</div>
-
-			{#if alertContext.otherLabel}
-				{@const otherIcon = DATAMatrix('[OTHER]')}
-				<div class="button-barcode-set">
-					<DataMatrixIcon
-						title="Other"
-						icon={otherIcon}
-					/>
-					<button
-						type="button"
-						onkeydown={passthrough}
-						onclick={alertContext.onOther}>{alertContext.otherLabel}</button
-					>
-				</div>
-			{/if}
-
-			{#if alertContext.noLabel}
-				{@const noIcon = DATAMatrix('[NO]')}
-				<div class="button-barcode-set">
-					<DataMatrixIcon
-						title="No"
-						icon={noIcon}
-					/>
-					<button
-						type="button"
-						onkeydown={passthrough}
-						onclick={alertContext.onNo}>{alertContext.noLabel}</button
-					>
-				</div>
-			{/if}
-		</div>
-	</div>
-</dialog>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { AlertContext } from '../Contexts/AlertContext.svelte.js';
+	import { UntypedInputContext } from '../Contexts/UntypedInputContext.svelte.js';
+	import { DATAMatrix } from '../Helpers/Datamatrix.js';
+	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import { getContext, onMount } from 'svelte';
+	import DataMatrixIcon from './DataMatrixIcon.svelte';
+	import ModalExplanation from './Touch/ModalExplanation.svelte';
+
+	let dialog: HTMLDialogElement | undefined;
+
+	const alertContext = getContext<AlertContext>(AlertContext.identifier);
+
+	$effect(() => {
+		if (dialog) {
+			if (alertContext.showModal) {
+				dialog.showModal();
+			} else {
+				dialog.close();
+			}
+		}
+	});
+
+	const yesIcon = DATAMatrix('[YES]');
+
+	const { registerListener } = getContext<UntypedInputContext>(UntypedInputContext.identifier);
+	onMount(() =>
+		registerListener((value) => {
+			switch (value) {
+				case '[YES]': {
+					alertContext.onYes();
+					break;
+				}
+				case '[NO]': {
+					alertContext.onNo();
+					break;
+				}
+				case '[OTHER]': {
+					alertContext.onOther();
+					break;
+				}
+				default: {
+					console.warn(`Uncaught command \`${value}\``);
+				}
+			}
+
+			return true;
+		})
+	);
+</script>
+
+<!-- onclose={() => (alertContext.showModal = false)} -->
+<dialog
+	bind:this={dialog}
+	onclose={() => {
+		alertContext.onNo();
+	}}
+	onclick={(e) => {
+		if (e.target === dialog) {
+			if (!alertContext.mandatory) {
+				dialog.close();
+			}
+		}
+	}}
+>
+	<div class="modal-root">
+		<h3 class="modal-heading">{alertContext.header}</h3>
+
+		<!-- <div class="modal-main pre-line">{$body}</div> -->
+		<div class="modal-main pre-line"><ModalExplanation>{alertContext.body}</ModalExplanation></div>
+
+		{#if alertContext.footer}
+			<!-- TODO either remove this part and make buttons the "footer", or allow consumer to pass an element -->
+			<span>{alertContext.footer}</span>
+		{/if}
+
+		<div class="modal-footer actions">
+			<div class="button-barcode-set">
+				<DataMatrixIcon
+					title="Yes"
+					icon={yesIcon}
+				/>
+				<button
+					type="submit"
+					onkeydown={passthrough}
+					onclick={alertContext.onYes}>{alertContext.yesLabel}</button
+				>
+			</div>
+
+			{#if alertContext.otherLabel}
+				{@const otherIcon = DATAMatrix('[OTHER]')}
+				<div class="button-barcode-set">
+					<DataMatrixIcon
+						title="Other"
+						icon={otherIcon}
+					/>
+					<button
+						type="button"
+						onkeydown={passthrough}
+						onclick={alertContext.onOther}>{alertContext.otherLabel}</button
+					>
+				</div>
+			{/if}
+
+			{#if alertContext.noLabel}
+				{@const noIcon = DATAMatrix('[NO]')}
+				<div class="button-barcode-set">
+					<DataMatrixIcon
+						title="No"
+						icon={noIcon}
+					/>
+					<button
+						type="button"
+						onkeydown={passthrough}
+						onclick={alertContext.onNo}>{alertContext.noLabel}</button
+					>
+				</div>
+			{/if}
+		</div>
+	</div>
+</dialog>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -392,4 +392,4 @@ div.button-barcode-set {
   display: flex;
   flex-flow: row nowrap;
   gap: 1.5rem;
-}</style>
+}</style>

package/dist/Components/Base/ContextWrapper.svelte

@@ -1,50 +1,50 @@
-<!-- 
-	@component
- 	Sets Contexts expected to exist for internal functionalities:
-	Context Menu, Tooltip, Toast, Untyped Input.
-
-	It is meant to be used in a +page.svelte or a +layout.svelte as early as required.
-
-	### Usage
-	```svelte
-	<ContextWrapper>
-		{@render children()}
-	</ChontextWrapper>
-	```
--->
-<script lang="ts">
-	import { AlertContext } from '../../Contexts/AlertContext.svelte.js';
-	import { ContextMenuContext } from '../../Contexts/ContextMenuContext.svelte.js';
-	import { ToastContext } from '../../Contexts/ToastContext.svelte.js';
-	import { TooltipContext } from '../../Contexts/TooltipContext.svelte.js';
-	import { UntypedInputContext } from '../../Contexts/UntypedInputContext.svelte.js';
-	import { setContext } from 'svelte';
-	import AlertModal from '../AlertModal.svelte';
-	import ContextMenu from '../Contexts/ContextMenu.svelte';
-	import ToastContainer from '../Contexts/ToastContainer.svelte';
-	import Tooltip from '../Contexts/Tooltip.svelte';
-	import type { ContextWrapperProps } from './ContextWrapperProps.js';
-
-	const { children, debug = false }: ContextWrapperProps = $props();
-
-	setContext(ContextMenuContext.identifier, new ContextMenuContext());
-	setContext(TooltipContext.identifier, new TooltipContext());
-	setContext(ToastContext.identifier, new ToastContext());
-	const alertContext = new AlertContext();
-	setContext(AlertContext.identifier, alertContext);
-
-	// NOTE known limitation. Not expected to mutate after instantiation
-	// svelte-ignore state_referenced_locally
-	const untypedListenerContext = new UntypedInputContext(debug);
-	setContext(UntypedInputContext.identifier, untypedListenerContext);
-</script>
-
-<ContextMenu />
-<Tooltip />
-<ToastContainer />
-{#if alertContext.showModal}
-	<AlertModal />
-{/if}
-<svelte:window onkeydown={untypedListenerContext.handleGlobalKeydown} />
-{@render children()}
-<!-- -->
+<!-- 
+	@component
+ 	Sets Contexts expected to exist for internal functionalities:
+	Context Menu, Tooltip, Toast, Untyped Input.
+
+	It is meant to be used in a +page.svelte or a +layout.svelte as early as required.
+
+	### Usage
+	```svelte
+	<ContextWrapper>
+		{@render children()}
+	</ChontextWrapper>
+	```
+-->
+<script lang="ts">
+	import { AlertContext } from '../../Contexts/AlertContext.svelte.js';
+	import { ContextMenuContext } from '../../Contexts/ContextMenuContext.svelte.js';
+	import { ToastContext } from '../../Contexts/ToastContext.svelte.js';
+	import { TooltipContext } from '../../Contexts/TooltipContext.svelte.js';
+	import { UntypedInputContext } from '../../Contexts/UntypedInputContext.svelte.js';
+	import { setContext } from 'svelte';
+	import AlertModal from '../AlertModal.svelte';
+	import ContextMenu from '../Contexts/ContextMenu.svelte';
+	import ToastContainer from '../Contexts/ToastContainer.svelte';
+	import Tooltip from '../Contexts/Tooltip.svelte';
+	import type { ContextWrapperProps } from './ContextWrapperProps.js';
+
+	const { children, debug = false }: ContextWrapperProps = $props();
+
+	setContext(ContextMenuContext.identifier, new ContextMenuContext());
+	setContext(TooltipContext.identifier, new TooltipContext());
+	setContext(ToastContext.identifier, new ToastContext());
+	const alertContext = new AlertContext();
+	setContext(AlertContext.identifier, alertContext);
+
+	// NOTE known limitation. Not expected to mutate after instantiation
+	// svelte-ignore state_referenced_locally
+	const untypedListenerContext = new UntypedInputContext(debug);
+	setContext(UntypedInputContext.identifier, untypedListenerContext);
+</script>
+
+<ContextMenu />
+<Tooltip />
+<ToastContainer />
+{#if alertContext.showModal}
+	<AlertModal />
+{/if}
+<svelte:window onkeydown={untypedListenerContext.handleGlobalKeydown} />
+{@render children()}
+<!-- -->