@lavalogic/scoria 0.33.0 → 0.35.0

package/dist/Components/Contexts/Toast.svelte

@@ -1,63 +1,63 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { ColourSet } from '../../scss/colours.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import { Validity } from '../../Types/Internal/Validity.js';
-	import { slide } from 'svelte/transition';
-	import Action from '../Action.svelte';
-	import Icon from '../Icon.svelte';
-	import type { ToastProps } from './ToastProps.js';
-</script>
-
-<script lang="ts">
-	let { toast, copy }: ToastProps = $props();
-</script>
-
-<output
-	role={toast.result == Validity.Invalid ? 'alert' : 'status'}
-	aria-live={toast.result == Validity.Invalid ? 'assertive' : 'polite'}
-	class:info={toast.result == Validity.Info}
-	class:success={toast.result == Validity.Valid}
-	class:warning={toast.result == Validity.Warning}
-	class:error={toast.result == Validity.Invalid}
-	transition:slide={{ axis: 'x', duration: 500 }}
->
-	<div>
-		<div class="noshrink">
-			{#if toast.copyable != false && navigator.clipboard}
-				<Action
-					onclick={copy}
-					icon={{ name: 'copy' }}
-					size={Size.MediumLarge}
-					colourSet={ColourSet.Auxiliary}
-				/>
-			{:else}
-				<Icon
-					name="info"
-					size={Size.MediumLarge}
-				/>
-			{/if}
-		</div>
-		<span>{toast.message}</span>
-		{#if toast.closeable}
-			<div class="noshrink">
-				<Action
-					size={Size.MediumLarge}
-					icon={{ name: 'cross' }}
-					onclick={() => {
-						toast.close?.();
-					}}
-					colourSet={ColourSet.Auxiliary}
-				/>
-			</div>
-		{/if}
-	</div>
-</output>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { ColourSet } from '../../scss/colours.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import { Validity } from '../../Types/Internal/Validity.js';
+	import { slide } from 'svelte/transition';
+	import Action from '../Action.svelte';
+	import Icon from '../Icon.svelte';
+	import type { ToastProps } from './ToastProps.js';
+</script>
+
+<script lang="ts">
+	let { toast, copy }: ToastProps = $props();
+</script>
+
+<output
+	role={toast.result == Validity.Invalid ? 'alert' : 'status'}
+	aria-live={toast.result == Validity.Invalid ? 'assertive' : 'polite'}
+	class:info={toast.result == Validity.Info}
+	class:success={toast.result == Validity.Valid}
+	class:warning={toast.result == Validity.Warning}
+	class:error={toast.result == Validity.Invalid}
+	transition:slide={{ axis: 'x', duration: 500 }}
+>
+	<div>
+		<div class="noshrink">
+			{#if toast.copyable != false && navigator.clipboard}
+				<Action
+					onclick={copy}
+					icon={{ name: 'copy' }}
+					size={Size.MediumLarge}
+					colourSet={ColourSet.Auxiliary}
+				/>
+			{:else}
+				<Icon
+					name="info"
+					size={Size.MediumLarge}
+				/>
+			{/if}
+		</div>
+		<span>{toast.message}</span>
+		{#if toast.closeable}
+			<div class="noshrink">
+				<Action
+					size={Size.MediumLarge}
+					icon={{ name: 'cross' }}
+					onclick={() => {
+						toast.close?.();
+					}}
+					colourSet={ColourSet.Auxiliary}
+				/>
+			</div>
+		{/if}
+	</div>
+</output>
+
 <style>output {
   font-weight: 700;
   font-size: 1.125rem;
@@ -89,4 +89,4 @@ output span {
   text-wrap: nowrap;
   word-break: keep-all;
   overflow: hidden;
-}</style>
+}</style>

package/dist/Components/Contexts/ToastContainer.svelte

@@ -1,48 +1,48 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { ToastContext } from '../../Contexts/ToastContext.svelte.js';
-	import { devCatch } from '../../Helpers/Helpers.svelte.js';
-	import { Validity } from '../../Types/Internal/Validity.js';
-	import { getContext } from 'svelte';
-	import Toast from './Toast.svelte';
-
-	const toastContext = getContext<ToastContext>(ToastContext.identifier);
-
-	function copyDataToClipboard(text: string) {
-		//clipboard doesn't exist in http connections. This may be redundant now but you never know
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-		if (!navigator.clipboard) {
-			toastContext.toast({
-				result: Validity.Invalid,
-				message: 'Cannot Copy in an Insecure Connection',
-				copyable: false
-			});
-			return;
-		}
-
-		// copy plain value
-
-		navigator.clipboard.writeText(text).catch(devCatch);
-		toastContext.toast({
-			result: Validity.Info,
-			message: 'Message copied to clipboard',
-			copyable: false
-		});
-	}
-</script>
-
-<section>
-	{#each toastContext.toasts as toast (toast)}
-		<Toast
-			{toast}
-			copy={() => {
-				copyDataToClipboard(toast.getVerbose?.() ?? toast.message);
-			}}
-		/>
-	{/each}
-</section>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { ToastContext } from '../../Contexts/ToastContext.svelte.js';
+	import { devCatch } from '../../Helpers/Helpers.svelte.js';
+	import { Validity } from '../../Types/Internal/Validity.js';
+	import { getContext } from 'svelte';
+	import Toast from './Toast.svelte';
+
+	const toastContext = getContext<ToastContext>(ToastContext.identifier);
+
+	function copyDataToClipboard(text: string) {
+		//clipboard doesn't exist in http connections. This may be redundant now but you never know
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		if (!navigator.clipboard) {
+			toastContext.toast({
+				result: Validity.Invalid,
+				message: 'Cannot Copy in an Insecure Connection',
+				copyable: false
+			});
+			return;
+		}
+
+		// copy plain value
+
+		navigator.clipboard.writeText(text).catch(devCatch);
+		toastContext.toast({
+			result: Validity.Info,
+			message: 'Message copied to clipboard',
+			copyable: false
+		});
+	}
+</script>
+
+<section>
+	{#each toastContext.toasts as toast (toast)}
+		<Toast
+			{toast}
+			copy={() => {
+				copyDataToClipboard(toast.getVerbose?.() ?? toast.message);
+			}}
+		/>
+	{/each}
+</section>
+
 <style>section {
   user-select: none;
   gap: 0.5rem;
@@ -54,4 +54,4 @@
   justify-content: flex-end;
   align-items: flex-end;
   z-index: 9999;
-}</style>
+}</style>

package/dist/Components/Contexts/Tooltip.svelte

@@ -1,28 +1,28 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { TooltipContext } from '../../Contexts/TooltipContext.svelte.js';
-	import { Side } from '../../Types/Internal/Side.js';
-	import { getContext } from 'svelte';
-	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
-</script>
-
-{#if tooltipContext.isShowingTooltip}
-	<div
-		role="tooltip"
-		style="--y: {tooltipContext.y}px; --x: {tooltipContext.x}px;"
-		class="tooltip-wrapper"
-		class:top-arrow={tooltipContext.anchor === Side.Top}
-		class:bottom-arrow={tooltipContext.anchor === Side.Bottom}
-		class:left-arrow={tooltipContext.anchor === Side.Left}
-		class:right-arrow={tooltipContext.anchor === Side.Right}
-	>
-		<div class="tooltip">
-			{tooltipContext.text}
-		</div>
-	</div>
-{/if}
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { TooltipContext } from '../../Contexts/TooltipContext.svelte.js';
+	import { Side } from '../../Types/Internal/Side.js';
+	import { getContext } from 'svelte';
+	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
+</script>
+
+{#if tooltipContext.isShowingTooltip}
+	<div
+		role="tooltip"
+		style="--y: {tooltipContext.y}px; --x: {tooltipContext.x}px;"
+		class="tooltip-wrapper"
+		class:top-arrow={tooltipContext.anchor === Side.Top}
+		class:bottom-arrow={tooltipContext.anchor === Side.Bottom}
+		class:left-arrow={tooltipContext.anchor === Side.Left}
+		class:right-arrow={tooltipContext.anchor === Side.Right}
+	>
+		<div class="tooltip">
+			{tooltipContext.text}
+		</div>
+	</div>
+{/if}
+
 <style>.tooltip-wrapper {
   position: fixed;
   z-index: 9999;
@@ -110,4 +110,4 @@
   transform: rotate(45deg);
   background-color: black;
   border: solid 2px #dae0e5;
-}</style>
+}</style>

package/dist/Components/DataMatrixIcon.svelte

@@ -1,43 +1,43 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { passthrough } from '../Helpers/Helpers.svelte.js';
-	import type { DataMatrixIconProps } from './DataMatrixIconProps.js';
-
-	const { icon, interactive = false, title, oncontextmenu }: DataMatrixIconProps = $props();
-
-	let svgContainer = $state<HTMLDivElement | null>(null);
-
-	$effect(() => {
-		if (svgContainer != null) {
-			// eslint-disable-next-line svelte/no-dom-manipulating
-			svgContainer.innerHTML = '';
-			icon.setAttribute('width', '64');
-			icon.setAttribute('height', '64');
-			// eslint-disable-next-line svelte/no-dom-manipulating
-			svgContainer.appendChild(icon);
-		}
-	});
-</script>
-
-{#if interactive}
-	<button
-		aria-label="Edit Barcode Value"
-		onkeydown={passthrough}
-		title="Right click to edit barcode value for the {title} command"
-		oncontextmenu={(e) => {
-			if (oncontextmenu) {
-				e.preventDefault();
-				oncontextmenu(e);
-			}
-		}}
-	>
-		<div class="fit" bind:this={svgContainer}></div>
-	</button>
-{:else}
-	<div class="fit" bind:this={svgContainer}></div>
-{/if}
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import type { DataMatrixIconProps } from './DataMatrixIconProps.js';
+
+	const { icon, interactive = false, title, oncontextmenu }: DataMatrixIconProps = $props();
+
+	let svgContainer = $state<HTMLDivElement | null>(null);
+
+	$effect(() => {
+		if (svgContainer != null) {
+			// eslint-disable-next-line svelte/no-dom-manipulating
+			svgContainer.innerHTML = '';
+			icon.setAttribute('width', '64');
+			icon.setAttribute('height', '64');
+			// eslint-disable-next-line svelte/no-dom-manipulating
+			svgContainer.appendChild(icon);
+		}
+	});
+</script>
+
+{#if interactive}
+	<button
+		aria-label="Edit Barcode Value"
+		onkeydown={passthrough}
+		title="Right click to edit barcode value for the {title} command"
+		oncontextmenu={(e) => {
+			if (oncontextmenu) {
+				e.preventDefault();
+				oncontextmenu(e);
+			}
+		}}
+	>
+		<div class="fit" bind:this={svgContainer}></div>
+	</button>
+{:else}
+	<div class="fit" bind:this={svgContainer}></div>
+{/if}
+
 <style>button {
   display: contents;
   cursor: pointer;
@@ -47,4 +47,4 @@ div.fit {
   background-color: #ffffff;
   display: flex;
   padding: 8px;
-}</style>
+}</style>

package/dist/Components/DateInput.svelte

@@ -1,111 +1,111 @@
-<svelte:options runes />
-
-<script lang="ts" module>
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import type { InputDate } from '../Types/Internal/Misc.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import type { DateInputProps } from './DateInputProps.js';
-	import Icon from './Icon.svelte';
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable('' as InputDate),
-		label,
-		placeholder,
-		required = false,
-		optional,
-		variant = InputVariant.Default,
-		min,
-		max,
-		type = 'date',
-		disabled,
-		leftIcon,
-		rightIcon,
-		inputRef,
-		invalid,
-		onblur,
-		onfocus
-	}: DateInputProps = $props();
-
-	let isInvalid = $derived((required && !value?.trim()) || invalid);
-</script>
-
-<div
-	class="error-wrapper"
-	class:for-modal={variant == InputVariant.Modal}
-	class:for-table={variant == InputVariant.Table}
->
-	<label class:for-modal={variant == InputVariant.Modal}>
-		{#if label}
-			<span
-				class="top-label"
-				class:for-default={variant === InputVariant.Default}
-				class:invalid={isInvalid}
-				>{label}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-			>
-			{#if variant === InputVariant.Default}
-				<span class="border" class:invalid={isInvalid}
-					>{label}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-				>
-			{/if}
-		{/if}
-		<div class="icon-container">
-			{#if leftIcon}
-				<Icon
-					name={leftIcon.name}
-					size={leftIcon.size ?? Size.Medium}
-					float
-					left="0.75rem"
-					top="50%"
-					anchorX="0"
-					anchorY="-50%"
-				/>
-			{/if}
-			<input
-				step={type === 'datetime-local' ? 1 : 'any'}
-				class:invalid={isInvalid}
-				class:left-pad={leftIcon != undefined}
-				class:right-pad={rightIcon != undefined}
-				{type}
-				bind:value
-				{onblur}
-				{onfocus}
-				ondblclick={() => inputRef?.showPicker()}
-				onauxclick={(e) => {
-					e.preventDefault();
-					inputRef?.showPicker();
-				}}
-				bind:this={inputRef}
-				{min}
-				{max}
-				{placeholder}
-				{required}
-				{disabled}
-				onkeydown={(e) => {
-					if (e.key === 'Enter') {
-						e.preventDefault();
-						(
-							(e.target as HTMLElement | undefined)?.closest('form') as HTMLFormElement | undefined
-						)?.requestSubmit();
-					}
-				}}
-			/>
-			{#if rightIcon}
-				<Icon
-					name={rightIcon.name}
-					size={rightIcon.size ?? Size.Medium}
-					float
-					right="0.5rem"
-					top="50%"
-					anchorX="0"
-					anchorY="-50%"
-				/>
-			{/if}
-		</div>
-	</label>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import type { InputDate } from '../Types/Internal/Misc.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import type { DateInputProps } from './DateInputProps.js';
+	import Icon from './Icon.svelte';
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable('' as InputDate),
+		label,
+		placeholder,
+		required = false,
+		optional,
+		variant = InputVariant.Default,
+		min,
+		max,
+		type = 'date',
+		disabled,
+		leftIcon,
+		rightIcon,
+		inputRef,
+		invalid,
+		onblur,
+		onfocus
+	}: DateInputProps = $props();
+
+	let isInvalid = $derived((required && !value?.trim()) || invalid);
+</script>
+
+<div
+	class="error-wrapper"
+	class:for-modal={variant == InputVariant.Modal}
+	class:for-table={variant == InputVariant.Table}
+>
+	<label class:for-modal={variant == InputVariant.Modal}>
+		{#if label}
+			<span
+				class="top-label"
+				class:for-default={variant === InputVariant.Default}
+				class:invalid={isInvalid}
+				>{label}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+			>
+			{#if variant === InputVariant.Default}
+				<span class="border" class:invalid={isInvalid}
+					>{label}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+				>
+			{/if}
+		{/if}
+		<div class="icon-container">
+			{#if leftIcon}
+				<Icon
+					name={leftIcon.name}
+					size={leftIcon.size ?? Size.Medium}
+					float
+					left="0.75rem"
+					top="50%"
+					anchorX="0"
+					anchorY="-50%"
+				/>
+			{/if}
+			<input
+				step={type === 'datetime-local' ? 1 : 'any'}
+				class:invalid={isInvalid}
+				class:left-pad={leftIcon != undefined}
+				class:right-pad={rightIcon != undefined}
+				{type}
+				bind:value
+				{onblur}
+				{onfocus}
+				ondblclick={() => inputRef?.showPicker()}
+				onauxclick={(e) => {
+					e.preventDefault();
+					inputRef?.showPicker();
+				}}
+				bind:this={inputRef}
+				{min}
+				{max}
+				{placeholder}
+				{required}
+				{disabled}
+				onkeydown={(e) => {
+					if (e.key === 'Enter') {
+						e.preventDefault();
+						(
+							(e.target as HTMLElement | undefined)?.closest('form') as HTMLFormElement | undefined
+						)?.requestSubmit();
+					}
+				}}
+			/>
+			{#if rightIcon}
+				<Icon
+					name={rightIcon.name}
+					size={rightIcon.size ?? Size.Medium}
+					float
+					right="0.5rem"
+					top="50%"
+					anchorX="0"
+					anchorY="-50%"
+				/>
+			{/if}
+		</div>
+	</label>
+</div>
+
 <style>input {
   box-sizing: border-box;
   height: 100%;
@@ -335,4 +335,4 @@ label.for-table {
 }
 label.for-table input {
   height: unset;
-}</style>
+}</style>