@lavalogic/scoria 0.40.31 → 0.40.33

package/dist/Components/SingleSelect.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 { devCatch, generateWeakId, vowels } from "../Helpers/Helpers.svelte.js";
 import { attachDropdownPortal } from "../Helpers/dropdownPortal.js";
@@ -86,122 +86,122 @@ onMount(() => {
 function isObject(value) {
 	return value !== null && typeof value === "object";
 }
-</script>
-
-<div
-	class="select-wrapper"
-	class:no-border={borderless}
-	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''} --dropdown-bottom: calc(${dropdownBottom}px + 1px); --sv-min-height: ${minHeight ?? '2rem'};`}
-	class:invalid={isInvalid}
-	class:force-upwards={forceUpwards}
-	bind:this={wrapperRef}
->
-	{#if label}
-		<label for={inputId}>
-			<span
-				>{label}{#if !required}&nbsp;- <i>{i18n['scoria.label.optional']()}</i>{/if}</span
-			>
-			<span class="border"
-				>{label}{#if !required}&nbsp;- <i>{i18n['scoria.label.optional']()}</i>{/if}</span
-			>
-		</label>
-	{/if}
-
-	<Svelecte
-		{createFilter}
-		{disabled}
-		{name}
-		onFocus={(target: HTMLInputElement) => {
-			forceShowDropdown(target);
-			onfocus?.(target);
-		}}
-		bind:this={ref}
-		{valueAsObject}
-		{inputId}
-		{required}
-		valueField={valueProp}
-		labelField={labelProp}
-		virtualList={false}
-		{options}
-		{creatable}
-		searchProps={{ keepSelectionInList: true }}
-		{onCreateOption}
-		placeholder={placeholder ?? fallbackPlaceholder}
-		{lazyDropdown}
-		value={// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		currentValue as Array<any>}
-		onChange={(newValue: V | null) => {
-			// svelecte always emits the full option object regardless of
-			// `valueAsObject`. Map to the shape the discriminated variant
-			// promised: primitive for AsPrimitive, object for AsObject.
-			if (valueAsObject) {
-				void (onchange as (v: V | null) => void | Promise<void>)(newValue);
-			} else {
-				const primitive = newValue == null ? null : newValue[valueProp];
-				// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-				void (onchange as (v: V[VP] | null) => void | Promise<void>)(primitive);
-			}
-		}}
-		{searchable}
-		selectOnTab
-		keepSelectionInList
-		deselectMode={clearable ? 'toggle' : 'none'}
-	>
-		{#snippet option(opt)}<span class="dropdown-item"> {(opt as V)[labelProp]}</span>{/snippet}
-
-		{#snippet append()}
-			<div class="icons">
-				{#if clearable && currentValue}
-					<Action
-						noTabIndex
-						onclick={(e: MouseEvent) => {
-							if (isExpanded) {
-								e.stopPropagation();
-							}
-
-							void onchange(null);
-						}}
-						{disabled}
-						colourSet={ColourSet.Auxiliary}
-						size={Size.Small}
-						icon={{
-							name: 'close-menu-cross',
-							colour: Colour['$ui-blue-10'],
-						}}
-					/>
-				{/if}
-
-				<Action
-					noTabIndex
-					colourSet={ColourSet.Auxiliary}
-					size={Size.Small}
-					{disabled}
-					icon={{
-						name: isExpanded ? 'chevron-up' : 'chevron-down',
-						colour: Colour['$ui-blue-10'],
-					}}
-				/>
-			</div>
-		{/snippet}
-		{#snippet toggleIcon()}
-			<div class="nothing"></div>
-		{/snippet}
-
-		{#snippet selection(/*_selectedOptions: Array<any>*/)}
-			<span
-				class="selection"
-				class:invalid={isInvalid}
-			>
-				{#if isObject(selectedValue)}
-					{selectedValue[labelProp]}
-				{:else}
-					{options.find((it) => it[valueProp] === selectedValue)?.[labelProp]}
-				{/if}
-			</span>
-		{/snippet}
-	</Svelecte>
-</div>
-
+</script>
+
+<div
+	class="select-wrapper"
+	class:no-border={borderless}
+	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''} --dropdown-bottom: calc(${dropdownBottom}px + 1px); --sv-min-height: ${minHeight ?? '2rem'};`}
+	class:invalid={isInvalid}
+	class:force-upwards={forceUpwards}
+	bind:this={wrapperRef}
+>
+	{#if label}
+		<label for={inputId}>
+			<span
+				>{label}{#if !required}&nbsp;- <i>{i18n['scoria.label.optional']()}</i>{/if}</span
+			>
+			<span class="border"
+				>{label}{#if !required}&nbsp;- <i>{i18n['scoria.label.optional']()}</i>{/if}</span
+			>
+		</label>
+	{/if}
+
+	<Svelecte
+		{createFilter}
+		{disabled}
+		{name}
+		onFocus={(target: HTMLInputElement) => {
+			forceShowDropdown(target);
+			onfocus?.(target);
+		}}
+		bind:this={ref}
+		{valueAsObject}
+		{inputId}
+		{required}
+		valueField={valueProp}
+		labelField={labelProp}
+		virtualList={false}
+		{options}
+		{creatable}
+		searchProps={{ keepSelectionInList: true }}
+		{onCreateOption}
+		placeholder={placeholder ?? fallbackPlaceholder}
+		{lazyDropdown}
+		value={// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		currentValue as Array<any>}
+		onChange={(newValue: V | null) => {
+			// svelecte always emits the full option object regardless of
+			// `valueAsObject`. Map to the shape the discriminated variant
+			// promised: primitive for AsPrimitive, object for AsObject.
+			if (valueAsObject) {
+				void (onchange as (v: V | null) => void | Promise<void>)(newValue);
+			} else {
+				const primitive = newValue == null ? null : newValue[valueProp];
+				// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+				void (onchange as (v: V[VP] | null) => void | Promise<void>)(primitive);
+			}
+		}}
+		{searchable}
+		selectOnTab
+		keepSelectionInList
+		deselectMode={clearable ? 'toggle' : 'none'}
+	>
+		{#snippet option(opt)}<span class="dropdown-item"> {(opt as V)[labelProp]}</span>{/snippet}
+
+		{#snippet append()}
+			<div class="icons">
+				{#if clearable && currentValue}
+					<Action
+						noTabIndex
+						onclick={(e: MouseEvent) => {
+							if (isExpanded) {
+								e.stopPropagation();
+							}
+
+							void onchange(null);
+						}}
+						{disabled}
+						colourSet={ColourSet.Auxiliary}
+						size={Size.Small}
+						icon={{
+							name: 'close-menu-cross',
+							colour: Colour['$ui-blue-10'],
+						}}
+					/>
+				{/if}
+
+				<Action
+					noTabIndex
+					colourSet={ColourSet.Auxiliary}
+					size={Size.Small}
+					{disabled}
+					icon={{
+						name: isExpanded ? 'chevron-up' : 'chevron-down',
+						colour: Colour['$ui-blue-10'],
+					}}
+				/>
+			</div>
+		{/snippet}
+		{#snippet toggleIcon()}
+			<div class="nothing"></div>
+		{/snippet}
+
+		{#snippet selection(/*_selectedOptions: Array<any>*/)}
+			<span
+				class="selection"
+				class:invalid={isInvalid}
+			>
+				{#if isObject(selectedValue)}
+					{selectedValue[labelProp]}
+				{:else}
+					{options.find((it) => it[valueProp] === selectedValue)?.[labelProp]}
+				{/if}
+			</span>
+		{/snippet}
+	</Svelecte>
+</div>
+
 <style>.select-wrapper {
   min-width: var(--input-min-width, 12rem);
   width: var(--input-width, 100%);
@@ -376,4 +376,4 @@ div.icons {
 }
 :global(.dropdown-item) .toggle-icon.yes {
   opacity: 1;
-}</style>
+}</style>

package/dist/Components/StepButton.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 { useTooltip } from "../Helpers/useTooltip.svelte.js";
 import { Colour } from "../scss/colours.js";
@@ -20,48 +20,48 @@ const tt = useTooltip({
 	text: () => option.label,
 	arrow: () => Side.Top
 });
-</script>
-
-<button
-	class:selected
-	disabled={disabled.value}
-	onclick={() => {
-		option.onclick();
-	}}
-	type="button"
-	class="tab"
-	class:invalid={!isValid.value}
-	class:hidden={!visible.value}
-	onmouseenter={tt.onmouseenter}
-	onmouseleave={tt.onmouseleave}
->
-	<div
-		class="bordered"
-		class:invalid={!isValid.value}
-	>
-		{#if option.iconLeft}
-			<Icon
-				{...option.iconLeft}
-				colour={Colour['$brand-primary']}
-			/>
-		{/if}
-		{index + 1}
-		{#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}
+	onmouseenter={tt.onmouseenter}
+	onmouseleave={tt.onmouseleave}
+>
+	<div
+		class="bordered"
+		class:invalid={!isValid.value}
+	>
+		{#if option.iconLeft}
+			<Icon
+				{...option.iconLeft}
+				colour={Colour['$brand-primary']}
+			/>
+		{/if}
+		{index + 1}
+		{#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;
 }
@@ -102,4 +102,4 @@ const tt = useTooltip({
   color: #aa1414;
   border-color: #aa1414;
   background-color: #f9e9e9;
-}</style>
+}</style>

package/dist/Components/StepForm.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="CommonDenominator"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="CommonDenominator"
 >import { readJSON } from "../Helpers/Storage.js";
 import { ColourSet } from "../scss/colours.js";
 import { Size } from "../Types/Internal/Size.js";
@@ -66,58 +66,58 @@ $effect(() => {
 		});
 	}
 });
-</script>
-
-<div
-	class:noscroll
-	class="wrapper"
->
-	<div class="tabs">
-		{#each steps as option, index (option.label)}
-			<StepButton
-				{option}
-				{index}
-				selected={currentStep?.label === option.label}
-			/>
-		{/each}
-		<div class="divider"></div>
-
-		<div class="steps">
-			<Button
-				size={Size.Small}
-				fullWidth
-				disabled={!previous}
-				onclick={() => {
-					previous?.onclick();
-				}}
-				colourSet={ColourSet.Secondary}>{i18n['scoria.action.previous']()}</Button
-			>
-			<Button
-				size={Size.Small}
-				fullWidth
-				onclick={() => {
-					next?.onclick();
-				}}
-				disabled={!next}
-				colourSet={ColourSet.Primary}>{i18n['scoria.action.next']()}</Button
-			>
-		</div>
-	</div>
-
-	<div
-		class:noscroll
-		class="content"
-	>
-		{#if currentStep}
-			{@render currentStep.content(currentStep.args)}
-		{:else}
-			<div class="wrapper bg">
-				<span class="red">{noStepMessage}</span>
-			</div>
-		{/if}
-	</div>
-</div>
-
+</script>
+
+<div
+	class:noscroll
+	class="wrapper"
+>
+	<div class="tabs">
+		{#each steps as option, index (option.label)}
+			<StepButton
+				{option}
+				{index}
+				selected={currentStep?.label === option.label}
+			/>
+		{/each}
+		<div class="divider"></div>
+
+		<div class="steps">
+			<Button
+				size={Size.Small}
+				fullWidth
+				disabled={!previous}
+				onclick={() => {
+					previous?.onclick();
+				}}
+				colourSet={ColourSet.Secondary}>{i18n['scoria.action.previous']()}</Button
+			>
+			<Button
+				size={Size.Small}
+				fullWidth
+				onclick={() => {
+					next?.onclick();
+				}}
+				disabled={!next}
+				colourSet={ColourSet.Primary}>{i18n['scoria.action.next']()}</Button
+			>
+		</div>
+	</div>
+
+	<div
+		class:noscroll
+		class="content"
+	>
+		{#if currentStep}
+			{@render currentStep.content(currentStep.args)}
+		{:else}
+			<div class="wrapper bg">
+				<span class="red">{noStepMessage}</span>
+			</div>
+		{/if}
+	</div>
+</div>
+
 <style>.bg {
   padding: 1.5rem;
   background-color: #f9e9e9;
@@ -173,4 +173,4 @@ $effect(() => {
 }
 .wrapper .content.noscroll {
   overflow: visible;
-}</style>
+}</style>

package/dist/Components/Switch.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { generateWeakId } from "../Helpers/Helpers.svelte.js";
 let { value = $bindable(false), id = generateWeakId(), label, disabled, isValid, onchange } = $props();
 let mirror = $state();
@@ -14,46 +14,46 @@ const toggle = () => {
 		mirror.dispatchEvent(new Event("change", { bubbles: true }));
 	}
 };
-</script>
-
-<div class="switch-wrapper">
-	<button
-		{id}
-		class="text-label"
-		class:invalid={isValid === false}
-		type="button"
-		role="switch"
-		aria-checked={value}
-		aria-label={label}
-		onclick={toggle}
-		{disabled}
-	>
-		<span>{label}</span>
-
-		<div class="switch">
-			<div
-				class="switch-inner"
-				class:on={value}
-			>
-				<div
-					class="track"
-					class:on={value}
-				></div>
-			</div>
-		</div>
-	</button>
-
-	<input
-		name={id}
-		{onchange}
-		type="checkbox"
-		tabindex="-1"
-		aria-hidden="true"
-		checked={value}
-		bind:this={mirror}
-	/>
-</div>
-
+</script>
+
+<div class="switch-wrapper">
+	<button
+		{id}
+		class="text-label"
+		class:invalid={isValid === false}
+		type="button"
+		role="switch"
+		aria-checked={value}
+		aria-label={label}
+		onclick={toggle}
+		{disabled}
+	>
+		<span>{label}</span>
+
+		<div class="switch">
+			<div
+				class="switch-inner"
+				class:on={value}
+			>
+				<div
+					class="track"
+					class:on={value}
+				></div>
+			</div>
+		</div>
+	</button>
+
+	<input
+		name={id}
+		{onchange}
+		type="checkbox"
+		tabindex="-1"
+		aria-hidden="true"
+		checked={value}
+		bind:this={mirror}
+	/>
+</div>
+
 <style>.switch-wrapper {
   display: contents;
 }
@@ -162,4 +162,4 @@ const toggle = () => {
 
 input {
   display: none;
-}</style>
+}</style>