@lavalogic/scoria 0.40.0 → 0.40.2

package/dist/Components/DataMatrixIcon.svelte

@@ -1,114 +1,114 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { passthrough } from '../Helpers/Helpers.svelte.js';
-	import type { DataMatrixIconProps } from './DataMatrixIconProps.js';
-	import Icon from './Icon.svelte';
-
-	const {
-		icon,
-		interactive = false,
-		title,
-		oncontextmenu,
-		ariaLabel = 'Edit Barcode Value',
-	}: DataMatrixIconProps = $props();
-
-	let svgContainer = $state<HTMLDivElement | null>(null);
-
-	// Track the last SVG we mounted so the effect only re-runs when the
-	// underlying SVG identity changes. Repeated parent renders that hand
-	// back the same node should NOT force a DOM replacement; each replace
-	// forces layout, which becomes expensive with many barcodes on a screen.
-	let lastSvg: SVGSVGElement | undefined = undefined;
-
-	/**
-	 * Defensively sanitise the SVG before mounting it.
-	 *
-	 * SECURITY: although the prop is branded `DataMatrixSvg` to discourage
-	 * arbitrary callers, the brand is type-only. As defence in depth we
-	 * strip `<script>` nodes plus any `on*` / `href` / `xlink:href`
-	 * attributes from the cloned tree before it enters the document. This
-	 * neutralises stored-XSS sinks (`<script>`, `<image href="javascript:...">`,
-	 * inline event handlers) without depending on caller discipline.
-	 */
-	function sanitiseSvg(node: SVGSVGElement): void {
-		node.querySelectorAll('script').forEach((s) => {
-			s.remove();
-		});
-		node.querySelectorAll('*').forEach((el) => {
-			for (const attr of [...el.attributes]) {
-				const lower = attr.name.toLowerCase();
-				if (lower.startsWith('on') || lower === 'href' || lower === 'xlink:href') {
-					el.removeAttribute(attr.name);
-				}
-			}
-		});
-	}
-
-	$effect(() => {
-		if (icon.kind !== 'svg') {
-			// icon-props branch renders an <Icon> below; nothing for the
-			// SVG mount effect to do, and we clear the stale mount so a
-			// later toggle back to kind: 'svg' re-mounts correctly.
-			if (svgContainer != null && lastSvg !== undefined) {
-				// Mirror of the mount path below; `replaceChildren()` is the
-				// cheapest way to detach the previously cloned SVG.
-				// eslint-disable-next-line svelte/no-dom-manipulating
-				svgContainer.replaceChildren();
-				lastSvg = undefined;
-			}
-			return;
-		}
-		const source = icon.svg;
-		if (svgContainer != null && source !== lastSvg) {
-			// Clone so we never mutate the consumer-supplied node. If the
-			// same SVG is rendered into multiple DataMatrixIcon instances or
-			// reused elsewhere the original keeps its original attributes.
-			const local = source.cloneNode(true) as SVGSVGElement;
-			sanitiseSvg(local);
-			local.setAttribute('width', '64');
-			local.setAttribute('height', '64');
-			// `replaceChildren` is cheaper than `innerHTML = ''` + `appendChild`:
-			// it skips the HTML parse step and only touches the child list.
-			// eslint-disable-next-line svelte/no-dom-manipulating
-			svgContainer.replaceChildren(local);
-			lastSvg = source;
-		}
-	});
-</script>
-
-{#if interactive}
-	<button
-		aria-label={ariaLabel}
-		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}
-		>
-			{#if icon.kind === 'icon-props'}
-				<Icon {...icon.iconProps} />
-			{/if}
-		</div>
-	</button>
-{:else}
-	<div
-		class="fit"
-		bind:this={svgContainer}
-	>
-		{#if icon.kind === 'icon-props'}
-			<Icon {...icon.iconProps} />
-		{/if}
-	</div>
-{/if}
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import type { DataMatrixIconProps } from './DataMatrixIconProps.js';
+	import Icon from './Icon.svelte';
+
+	const {
+		icon,
+		interactive = false,
+		title,
+		oncontextmenu,
+		ariaLabel = 'Edit Barcode Value',
+	}: DataMatrixIconProps = $props();
+
+	let svgContainer = $state<HTMLDivElement | null>(null);
+
+	// Track the last SVG we mounted so the effect only re-runs when the
+	// underlying SVG identity changes. Repeated parent renders that hand
+	// back the same node should NOT force a DOM replacement; each replace
+	// forces layout, which becomes expensive with many barcodes on a screen.
+	let lastSvg: SVGSVGElement | undefined = undefined;
+
+	/**
+	 * Defensively sanitise the SVG before mounting it.
+	 *
+	 * SECURITY: although the prop is branded `DataMatrixSvg` to discourage
+	 * arbitrary callers, the brand is type-only. As defence in depth we
+	 * strip `<script>` nodes plus any `on*` / `href` / `xlink:href`
+	 * attributes from the cloned tree before it enters the document. This
+	 * neutralises stored-XSS sinks (`<script>`, `<image href="javascript:...">`,
+	 * inline event handlers) without depending on caller discipline.
+	 */
+	function sanitiseSvg(node: SVGSVGElement): void {
+		node.querySelectorAll('script').forEach((s) => {
+			s.remove();
+		});
+		node.querySelectorAll('*').forEach((el) => {
+			for (const attr of [...el.attributes]) {
+				const lower = attr.name.toLowerCase();
+				if (lower.startsWith('on') || lower === 'href' || lower === 'xlink:href') {
+					el.removeAttribute(attr.name);
+				}
+			}
+		});
+	}
+
+	$effect(() => {
+		if (icon.kind !== 'svg') {
+			// icon-props branch renders an <Icon> below; nothing for the
+			// SVG mount effect to do, and we clear the stale mount so a
+			// later toggle back to kind: 'svg' re-mounts correctly.
+			if (svgContainer != null && lastSvg !== undefined) {
+				// Mirror of the mount path below; `replaceChildren()` is the
+				// cheapest way to detach the previously cloned SVG.
+				// eslint-disable-next-line svelte/no-dom-manipulating
+				svgContainer.replaceChildren();
+				lastSvg = undefined;
+			}
+			return;
+		}
+		const source = icon.svg;
+		if (svgContainer != null && source !== lastSvg) {
+			// Clone so we never mutate the consumer-supplied node. If the
+			// same SVG is rendered into multiple DataMatrixIcon instances or
+			// reused elsewhere the original keeps its original attributes.
+			const local = source.cloneNode(true) as SVGSVGElement;
+			sanitiseSvg(local);
+			local.setAttribute('width', '64');
+			local.setAttribute('height', '64');
+			// `replaceChildren` is cheaper than `innerHTML = ''` + `appendChild`:
+			// it skips the HTML parse step and only touches the child list.
+			// eslint-disable-next-line svelte/no-dom-manipulating
+			svgContainer.replaceChildren(local);
+			lastSvg = source;
+		}
+	});
+</script>
+
+{#if interactive}
+	<button
+		aria-label={ariaLabel}
+		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}
+		>
+			{#if icon.kind === 'icon-props'}
+				<Icon {...icon.iconProps} />
+			{/if}
+		</div>
+	</button>
+{:else}
+	<div
+		class="fit"
+		bind:this={svgContainer}
+	>
+		{#if icon.kind === 'icon-props'}
+			<Icon {...icon.iconProps} />
+		{/if}
+	</div>
+{/if}
+
 <style>button {
   display: contents;
   cursor: pointer;
@@ -118,4 +118,4 @@ div.fit {
   background-color: #ffffff;
   display: flex;
   padding: 0.5rem;
-}</style>
+}</style>

package/dist/Components/DateInput.svelte

@@ -1,150 +1,150 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { cssLength, passthrough } from '../Helpers/Helpers.svelte.js';
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import type { DateInputProps } from './DateInputProps.js';
-	import Icon from './Icon.svelte';
-
-	function openPicker(ref: HTMLInputElement | undefined): void {
-		ref?.showPicker();
-	}
-
-	function submitAncestorForm(e: KeyboardEvent): void {
-		if (e.key !== 'Enter') {
-			return;
-		}
-		e.preventDefault();
-		const target = e.target as HTMLElement | undefined;
-		const form = target?.closest('form') as HTMLFormElement | undefined;
-		form?.requestSubmit();
-	}
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable(''),
-		label,
-		placeholder,
-		required = false,
-		optional,
-		variant = InputVariant.Default,
-		min,
-		max,
-		type,
-		disabled,
-		leftIcon,
-		rightIcon,
-		inputRef = $bindable(),
-		invalid,
-		onblur,
-		onfocus,
-		onchange,
-	}: DateInputProps = $props();
-
-	// Null-safe: a fresh `<DateInput>` with no value passes `value=null`
-	// through the prop. The old `value.trim()` crashed with "Cannot read
-	// properties of null (reading 'trim')" the moment a required, empty
-	// DateInput rendered inside e.g. the Order Details collapsible card.
-	const isInvalid = $derived((required && !value?.trim()) || invalid);
-
-	function onkeydown(e: KeyboardEvent): void {
-		if (e.key === 'Enter') {
-			submitAncestorForm(e);
-			return;
-		}
-		passthrough(e);
-	}
-
-	function ondblclick(): void {
-		openPicker(inputRef);
-	}
-
-	function onauxclick(e: MouseEvent): void {
-		e.preventDefault();
-		openPicker(inputRef);
-	}
-
-	function handleChange(e: Event): void {
-		const next = (e.target as HTMLInputElement).value;
-		void onchange?.(next === '' ? null : (next as never));
-	}
-</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
-					aria-hidden="true"
-					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={cssLength('0.75rem')}
-					top={cssLength('50%')}
-					anchorX={cssLength('0')}
-					anchorY={cssLength('-50%')}
-				/>
-			{/if}
-			<input
-				step={type === 'datetime-local' ? 1 : 'any'}
-				class:invalid={isInvalid}
-				class:left-pad={leftIcon != undefined}
-				class:right-pad={rightIcon != undefined}
-				aria-invalid={isInvalid || undefined}
-				{type}
-				bind:value
-				{onblur}
-				{onfocus}
-				{ondblclick}
-				{onauxclick}
-				bind:this={inputRef}
-				{min}
-				{max}
-				{placeholder}
-				{required}
-				{disabled}
-				{onkeydown}
-				onchange={handleChange}
-			/>
-			{#if rightIcon}
-				<Icon
-					name={rightIcon.name}
-					size={rightIcon.size ?? Size.Medium}
-					float
-					right={cssLength('0.5rem')}
-					top={cssLength('50%')}
-					anchorX={cssLength('0')}
-					anchorY={cssLength('-50%')}
-				/>
-			{/if}
-		</div>
-	</label>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { cssLength, passthrough } from '../Helpers/Helpers.svelte.js';
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import type { DateInputProps } from './DateInputProps.js';
+	import Icon from './Icon.svelte';
+
+	function openPicker(ref: HTMLInputElement | undefined): void {
+		ref?.showPicker();
+	}
+
+	function submitAncestorForm(e: KeyboardEvent): void {
+		if (e.key !== 'Enter') {
+			return;
+		}
+		e.preventDefault();
+		const target = e.target as HTMLElement | undefined;
+		const form = target?.closest('form') as HTMLFormElement | undefined;
+		form?.requestSubmit();
+	}
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(''),
+		label,
+		placeholder,
+		required = false,
+		optional,
+		variant = InputVariant.Default,
+		min,
+		max,
+		type,
+		disabled,
+		leftIcon,
+		rightIcon,
+		inputRef = $bindable(),
+		invalid,
+		onblur,
+		onfocus,
+		onchange,
+	}: DateInputProps = $props();
+
+	// Null-safe: a fresh `<DateInput>` with no value passes `value=null`
+	// through the prop. The old `value.trim()` crashed with "Cannot read
+	// properties of null (reading 'trim')" the moment a required, empty
+	// DateInput rendered inside e.g. the Order Details collapsible card.
+	const isInvalid = $derived((required && !value?.trim()) || invalid);
+
+	function onkeydown(e: KeyboardEvent): void {
+		if (e.key === 'Enter') {
+			submitAncestorForm(e);
+			return;
+		}
+		passthrough(e);
+	}
+
+	function ondblclick(): void {
+		openPicker(inputRef);
+	}
+
+	function onauxclick(e: MouseEvent): void {
+		e.preventDefault();
+		openPicker(inputRef);
+	}
+
+	function handleChange(e: Event): void {
+		const next = (e.target as HTMLInputElement).value;
+		void onchange?.(next === '' ? null : (next as never));
+	}
+</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
+					aria-hidden="true"
+					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={cssLength('0.75rem')}
+					top={cssLength('50%')}
+					anchorX={cssLength('0')}
+					anchorY={cssLength('-50%')}
+				/>
+			{/if}
+			<input
+				step={type === 'datetime-local' ? 1 : 'any'}
+				class:invalid={isInvalid}
+				class:left-pad={leftIcon != undefined}
+				class:right-pad={rightIcon != undefined}
+				aria-invalid={isInvalid || undefined}
+				{type}
+				bind:value
+				{onblur}
+				{onfocus}
+				{ondblclick}
+				{onauxclick}
+				bind:this={inputRef}
+				{min}
+				{max}
+				{placeholder}
+				{required}
+				{disabled}
+				{onkeydown}
+				onchange={handleChange}
+			/>
+			{#if rightIcon}
+				<Icon
+					name={rightIcon.name}
+					size={rightIcon.size ?? Size.Medium}
+					float
+					right={cssLength('0.5rem')}
+					top={cssLength('50%')}
+					anchorX={cssLength('0')}
+					anchorY={cssLength('-50%')}
+				/>
+			{/if}
+		</div>
+	</label>
+</div>
+
 <style>input {
   box-sizing: border-box;
   height: 100%;
@@ -374,4 +374,4 @@ label.for-table {
 }
 label.for-table input {
   height: unset;
-}</style>
+}</style>