@lavalogic/scoria 0.40.32 → 0.40.33

package/dist/Components/Modal.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";
@@ -13,8 +13,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, minHeight, width, height, onShowCallback, submitRef = $bindable(), defaultTimer, isValid = true, noscroll = false, onsubmit, headerExtra, explanation, children, footer, onclose, autofocusSelector } = $props();
 // `open` drives BaseModal's bindable `value`. Default true (the
 // legacy "open immediately on mount" semantic). Flipping it to
@@ -87,125 +87,125 @@ const dialogClassNames = $derived([
 	noscroll ? "noscroll" : null
 ].filter((c) => c !== null).join(" "));
 const dialogStyle = $derived(`--timer: ${defaultTimer ? defaultTimer.time.toString() + "ms" : "unset"};` + (minWidth != null ? `--dialog-min-width: ${minWidth};` : "") + (minHeight != null ? `--dialog-min-height: ${minHeight};` : "") + (height != null ? `--dialog-height: ${height};` : "") + (width != null ? `--dialog-width: ${width};` : ""));
-</script>
-
-<BaseModal
-	bind:value={open}
-	{onclose}
-	{mandatory}
-	{autofocusSelector}
-	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 typeof header === 'string'}
-				{#if mandatory}
-					<h3 class="modal-heading">{header}</h3>
-				{:else}
-					<div class="title-wrapper">
-						<h3 class="modal-heading">{header}</h3>
-						<div class="close-button">
-							<Action
-								size={Size.DoubleXLarge}
-								onclick={requestClose}
-								icon={{
-									name: 'cross',
-								}}
-								onkeydown={handleEsc}
-								colourSet={ColourSet.Primary}
-								label={i18n['scoria.action.close_modal_generic']()}
-							/>
-						</div>
-					</div>
-				{/if}
-			{:else if typeof header === 'function'}
-				{@render header()}
-			{/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: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)}
-					{#if button.callback}
-						<div class="button-barcode-set">
-							{#if barcodeIcons[index]}
-								<DataMatrixIcon
-									title={button.label}
-									icon={{ kind: 'svg', svg: barcodeIcons[index] }}
-								/>
-							{/if}
-							<button
-								onkeydown={passthrough}
-								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
-								onkeydown={passthrough}
-								disabled={!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}
+	{autofocusSelector}
+	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 typeof header === 'string'}
+				{#if mandatory}
+					<h3 class="modal-heading">{header}</h3>
+				{:else}
+					<div class="title-wrapper">
+						<h3 class="modal-heading">{header}</h3>
+						<div class="close-button">
+							<Action
+								size={Size.DoubleXLarge}
+								onclick={requestClose}
+								icon={{
+									name: 'cross',
+								}}
+								onkeydown={handleEsc}
+								colourSet={ColourSet.Primary}
+								label={i18n['scoria.action.close_modal_generic']()}
+							/>
+						</div>
+					</div>
+				{/if}
+			{:else if typeof header === 'function'}
+				{@render header()}
+			{/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: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)}
+					{#if button.callback}
+						<div class="button-barcode-set">
+							{#if barcodeIcons[index]}
+								<DataMatrixIcon
+									title={button.label}
+									icon={{ kind: 'svg', svg: barcodeIcons[index] }}
+								/>
+							{/if}
+							<button
+								onkeydown={passthrough}
+								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
+								onkeydown={passthrough}
+								disabled={!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;
@@ -554,4 +554,4 @@ div.bar-container div.bar-timer.paused {
 }
 :global form > *:last-child {
   border-radius: 0px 0px 4px 4px;
-}</style>
+}</style>

package/dist/Components/MultiSelect.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="V extends object, VP extends ValueProp<V>"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="V extends object, VP extends ValueProp<V>"
 >import { m as i18n } from "../paraglide/messages.js";
 import { autoPluralise, generateWeakId, vowels } from "../Helpers/Helpers.svelte.js";
 import { attachDropdownPortal } from "../Helpers/dropdownPortal.js";
@@ -74,126 +74,126 @@ onMount(() => {
 	};
 });
 const isInvalid = $derived(required && !selectedValues.length || invalid);
-</script>
-
-<div
-	class:invalid={isInvalid}
-	class="select-wrapper"
-	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''}`}
->
-	{#if label}
-		<label for={inputId}>
-			<span>{label}</span>
-			<span class="border">{label}</span>
-		</label>
-	{/if}
-
-	<Svelecte
-		multiple
-		{valueAsObject}
-		{disabled}
-		{inputId}
-		valueField={valueProp}
-		labelField={labelProp}
-		{options}
-		searchable
-		value={selectedValues}
-		onChange={(e: Array<V>) => {
-			// svelecte always emits the full option objects; normalise to the
-			// shape the variant promised: primitives for AsPrimitive,
-			// objects for AsObject. This is what the discriminated
-			// `onchange` typing now guarantees to consumers.
-			if (valueAsObject) {
-				void (onchange as (v: Array<V>) => void | Promise<void>)(e);
-			} else {
-				const primitives = e.map((it) => it[valueProp]);
-				void (onchange as (v: Array<V[VP]>) => void | Promise<void>)(primitives);
-			}
-		}}
-		{name}
-		selectOnTab
-		keepSelectionInList
-		searchProps={{ keepSelectionInList: true }}
-		creatable={false}
-		collapseSelection={collapseSelection ? 'always' : null}
-		deselectMode="toggle"
-		highlightFirstItem={false}
-		placeholder={placeholder ?? fallbackPlaceholder}
-		selection={collapseSelection ? selection : undefined}
-	>
-		{#snippet option(opt)}
-			{@const option = opt as V}
-			<span class="dropdown-item">
-				<div
-					class="toggle-icon"
-					class:yes={selectedKeys.has(option[valueProp])}
-				>
-					<Icon
-						name="tick"
-						size={Size.MediumSmall}
-					/>
-				</div>
-				{option[labelProp]}</span
-			>
-		{/snippet}
-
-		{#snippet collapsedSelection(selectedOptions: Array<object> /*_i18n*/)}
-			{@const count = selectedOptions.length}
-			<span class="selection"
-				>{count ? collapsedText(count) : (placeholder ?? fallbackPlaceholder)}</span
-			>
-		{/snippet}
-
-		{#snippet append()}
-			<div class="icons">
-				<Action
-					{disabled}
-					size={Size.Small}
-					noTabIndex
-					colourSet={ColourSet.Auxiliary}
-					onclick={(e: MouseEvent) => {
-						if (isExpanded) {
-							e.stopPropagation();
-						}
-
-						if (selectedValues.length) {
-							// Empty array satisfies both Array<V> and Array<V[VP]>.
-							void (onchange as (v: Array<V> | Array<V[VP]>) => void | Promise<void>)([]);
-						} else if (valueAsObject) {
-							void (onchange as (v: Array<V>) => void | Promise<void>)(options.concat());
-						} else {
-							const primitives = options.map((it) => it[valueProp]);
-							void (onchange as (v: Array<V[VP]>) => void | Promise<void>)(primitives);
-						}
-					}}
-					icon={{
-						name: selectedValues.length ? 'close-menu-cross' : 'manage-product-group',
-						colour: Colour['$ui-blue-10'],
-					}}
-				/>
-
-				<Action
-					{disabled}
-					size={Size.Small}
-					noTabIndex
-					colourSet={ColourSet.Auxiliary}
-					icon={{
-						name: isExpanded ? 'chevron-up' : 'chevron-down',
-						colour: Colour['$ui-blue-10'],
-					}}
-				/>
-			</div>
-		{/snippet}
-		{#snippet toggleIcon()}
-			<div class="nothing"></div>
-		{/snippet}
-	</Svelecte>
-
-	{#snippet selection(/*_selectedOptions: Array<unknown>*/)}
-		<!-- collapsed selection rendered above -->
-	{/snippet}
-</div>
-
+</script>
+
+<div
+	class:invalid={isInvalid}
+	class="select-wrapper"
+	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''}`}
+>
+	{#if label}
+		<label for={inputId}>
+			<span>{label}</span>
+			<span class="border">{label}</span>
+		</label>
+	{/if}
+
+	<Svelecte
+		multiple
+		{valueAsObject}
+		{disabled}
+		{inputId}
+		valueField={valueProp}
+		labelField={labelProp}
+		{options}
+		searchable
+		value={selectedValues}
+		onChange={(e: Array<V>) => {
+			// svelecte always emits the full option objects; normalise to the
+			// shape the variant promised: primitives for AsPrimitive,
+			// objects for AsObject. This is what the discriminated
+			// `onchange` typing now guarantees to consumers.
+			if (valueAsObject) {
+				void (onchange as (v: Array<V>) => void | Promise<void>)(e);
+			} else {
+				const primitives = e.map((it) => it[valueProp]);
+				void (onchange as (v: Array<V[VP]>) => void | Promise<void>)(primitives);
+			}
+		}}
+		{name}
+		selectOnTab
+		keepSelectionInList
+		searchProps={{ keepSelectionInList: true }}
+		creatable={false}
+		collapseSelection={collapseSelection ? 'always' : null}
+		deselectMode="toggle"
+		highlightFirstItem={false}
+		placeholder={placeholder ?? fallbackPlaceholder}
+		selection={collapseSelection ? selection : undefined}
+	>
+		{#snippet option(opt)}
+			{@const option = opt as V}
+			<span class="dropdown-item">
+				<div
+					class="toggle-icon"
+					class:yes={selectedKeys.has(option[valueProp])}
+				>
+					<Icon
+						name="tick"
+						size={Size.MediumSmall}
+					/>
+				</div>
+				{option[labelProp]}</span
+			>
+		{/snippet}
+
+		{#snippet collapsedSelection(selectedOptions: Array<object> /*_i18n*/)}
+			{@const count = selectedOptions.length}
+			<span class="selection"
+				>{count ? collapsedText(count) : (placeholder ?? fallbackPlaceholder)}</span
+			>
+		{/snippet}
+
+		{#snippet append()}
+			<div class="icons">
+				<Action
+					{disabled}
+					size={Size.Small}
+					noTabIndex
+					colourSet={ColourSet.Auxiliary}
+					onclick={(e: MouseEvent) => {
+						if (isExpanded) {
+							e.stopPropagation();
+						}
+
+						if (selectedValues.length) {
+							// Empty array satisfies both Array<V> and Array<V[VP]>.
+							void (onchange as (v: Array<V> | Array<V[VP]>) => void | Promise<void>)([]);
+						} else if (valueAsObject) {
+							void (onchange as (v: Array<V>) => void | Promise<void>)(options.concat());
+						} else {
+							const primitives = options.map((it) => it[valueProp]);
+							void (onchange as (v: Array<V[VP]>) => void | Promise<void>)(primitives);
+						}
+					}}
+					icon={{
+						name: selectedValues.length ? 'close-menu-cross' : 'manage-product-group',
+						colour: Colour['$ui-blue-10'],
+					}}
+				/>
+
+				<Action
+					{disabled}
+					size={Size.Small}
+					noTabIndex
+					colourSet={ColourSet.Auxiliary}
+					icon={{
+						name: isExpanded ? 'chevron-up' : 'chevron-down',
+						colour: Colour['$ui-blue-10'],
+					}}
+				/>
+			</div>
+		{/snippet}
+		{#snippet toggleIcon()}
+			<div class="nothing"></div>
+		{/snippet}
+	</Svelecte>
+
+	{#snippet selection(/*_selectedOptions: Array<unknown>*/)}
+		<!-- collapsed selection rendered above -->
+	{/snippet}
+</div>
+
 <style>.select-wrapper {
   min-width: var(--input-min-width, 12rem);
   width: var(--input-width, 100%);
@@ -368,4 +368,4 @@ div.icons {
 }
 :global(.dropdown-item) .toggle-icon.yes {
   opacity: 1;
-}</style>
+}</style>