@lavalogic/scoria 0.11.14 → 0.12.0

package/dist/Components/Touch/EditCard.svelte

@@ -1,24 +1,10 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script lang="ts">
 	import { passthrough } from '../../Helpers/Helpers.svelte.js';
 	import { Size } from '../../Types/Internal/Size.js';
-	import type { Snippet } from 'svelte';
-	import Icon, { type PartialIconProps } from '../Icon.svelte';
-
-	export interface EditCardProps {
-		noborder?: boolean;
-		desktop?: boolean;
-		label?: string;
-		iconName?: PartialIconProps['name'] | null; //TODO type
-		disabled?: boolean;
-		error?: boolean;
-		onclick?: (e: MouseEvent) => void;
-		children?: Snippet;
-	}
-</script>
-
-<script lang="ts">
+	import Icon from '../Icon.svelte';
+	import type { EditCardProps } from './EditCardProps.js';
 	const {
 		noborder,
 		label,

package/dist/Components/Touch/EditCard.svelte.d.ts

@@ -1,15 +1,4 @@
-import type { Snippet } from 'svelte';
-import { type PartialIconProps } from '../Icon.svelte';
-export interface EditCardProps {
-    noborder?: boolean;
-    desktop?: boolean;
-    label?: string;
-    iconName?: PartialIconProps['name'] | null;
-    disabled?: boolean;
-    error?: boolean;
-    onclick?: (e: MouseEvent) => void;
-    children?: Snippet;
-}
+import type { EditCardProps } from './EditCardProps.js';
 declare const EditCard: import("svelte").Component<EditCardProps, {}, "">;
 type EditCard = ReturnType<typeof EditCard>;
 export default EditCard;

package/dist/Components/Touch/EditCardProps.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { PartialIconProps } from '../PartialIconProps.js';
+export interface EditCardProps {
+    noborder?: boolean;
+    desktop?: boolean;
+    label?: string;
+    iconName?: PartialIconProps['name'] | null;
+    disabled?: boolean;
+    error?: boolean;
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+}

package/dist/Components/Touch/EditCardProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Touch/InfoCard.svelte

@@ -1,19 +1,10 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script lang="ts">
 	import { Size } from '../../Types/Internal/Size.js';
-	import type { Snippet } from 'svelte';
-	import Icon, { type PartialIconProps } from '../Icon.svelte';
-
-	export interface InfoCardProps {
-		children: Snippet;
-		noborder?: boolean;
-		label?: string;
-		iconName?: PartialIconProps['name']; //TODO type
-	}
-</script>
+	import Icon from '../Icon.svelte';
+	import type { InfoCardProps } from './InfoCardProps.js';
 
-<script lang="ts">
 	const { noborder, label, iconName, children }: InfoCardProps = $props(); //TODO type
 </script>
 

package/dist/Components/Touch/InfoCard.svelte.d.ts

@@ -1,11 +1,4 @@
-import type { Snippet } from 'svelte';
-import { type PartialIconProps } from '../Icon.svelte';
-export interface InfoCardProps {
-    children: Snippet;
-    noborder?: boolean;
-    label?: string;
-    iconName?: PartialIconProps['name'];
-}
+import type { InfoCardProps } from './InfoCardProps.js';
 declare const InfoCard: import("svelte").Component<InfoCardProps, {}, "">;
 type InfoCard = ReturnType<typeof InfoCard>;
 export default InfoCard;

package/dist/Components/Touch/InfoCardProps.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { PartialIconProps } from '../PartialIconProps.js';
+export interface InfoCardProps {
+    children: Snippet;
+    noborder?: boolean;
+    label?: string;
+    iconName?: PartialIconProps['name'];
+}

package/dist/Components/Touch/InfoCardProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Touch/InfoTextCard.svelte

@@ -1,19 +1,10 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script lang="ts">
 	import { Colour } from '../../scss/colours.js';
 	import { Size } from '../../Types/Internal/Size.js';
-	import type { Snippet } from 'svelte';
-	import Icon, { type PartialIconProps } from '../Icon.svelte';
-
-	export interface InfoTextCardProps {
-		children: Snippet;
-		label?: string;
-		iconName?: PartialIconProps['name'];
-	}
-</script>
-
-<script lang="ts">
+	import Icon from '../Icon.svelte';
+	import type { InfoTextCardProps } from './InfoTextCardProps.js';
 	let { label, iconName, children }: InfoTextCardProps = $props();
 </script>
 

package/dist/Components/Touch/InfoTextCard.svelte.d.ts

@@ -1,10 +1,4 @@
-import type { Snippet } from 'svelte';
-import { type PartialIconProps } from '../Icon.svelte';
-export interface InfoTextCardProps {
-    children: Snippet;
-    label?: string;
-    iconName?: PartialIconProps['name'];
-}
+import type { InfoTextCardProps } from './InfoTextCardProps.js';
 declare const InfoTextCard: import("svelte").Component<InfoTextCardProps, {}, "">;
 type InfoTextCard = ReturnType<typeof InfoTextCard>;
 export default InfoTextCard;

package/dist/Components/Touch/InfoTextCardProps.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+import type { PartialIconProps } from '../PartialIconProps.js';
+export interface InfoTextCardProps {
+    children: Snippet;
+    label?: string;
+    iconName?: PartialIconProps['name'];
+}

package/dist/Components/Touch/InfoTextCardProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Touch/KeyValuePair.d.ts

@@ -0,0 +1,4 @@
+export interface KeyValuePair {
+    key: string;
+    value: string;
+}

package/dist/Components/Touch/KeyValuePair.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Touch/NumberKeyboard.svelte

@@ -1,26 +1,12 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	export interface NumberKeyboardProps {
-		value: number | null;
-
-		label?: string | undefined;
-		labelRight?: string;
-		placeholder?: string | undefined;
-		min?: number | undefined;
-		max?: number | undefined;
-		decimal?: boolean;
-		inputRef?: HTMLInputElement | undefined;
-		coerceValue?: boolean;
-	}
-</script>
-
 <script lang="ts">
-	import { passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
 	import { InputVariant } from '../../Types/Internal/InputVariant.js';
 	import { tick } from 'svelte';
 	import Icon from '../Icon.svelte';
 	import TextInput from '../TextInput.svelte';
+	import type { NumberKeyboardProps } from './NumberKeyboardProps.js';
 
 	let {
 		value = $bindable(null),
@@ -34,7 +20,7 @@
 		coerceValue = true
 	}: NumberKeyboardProps = $props();
 
-	let _value: string = $state(value?.toFixed(decimal ? 2 : 0) ?? '');
+	let _value: string = $derived(value?.toFixed(decimal ? 2 : 0) ?? '');
 
 	const newValue = $derived.by(() => {
 		const v = decimal ? parseFloat(_value) : parseInt(_value);
@@ -44,16 +30,21 @@
 		return v;
 	});
 
-	const underMinimum = $derived(min != undefined && newValue != null && min > newValue);
-	const overMaximum = $derived(max != undefined && newValue != null && max < newValue);
-
 	$effect(() => {
 		{
-			value = coerceValue ? (underMinimum ? min! : overMaximum ? max! : newValue) : newValue;
+			value = coerceValue
+				? min != undefined && newValue != null && min > newValue
+					? min
+					: max != undefined && newValue != null && max < newValue
+						? max
+						: newValue
+				: newValue;
 
-			tick().then(() => {
-				inputRef?.focus();
-			});
+			tick()
+				.then(() => {
+					inputRef?.focus();
+				})
+				.catch(devCatch);
 		}
 	});
 
@@ -123,13 +114,17 @@
 				onkeydown={passthrough}
 				type="button"
 				disabled={value != null && min != null && value <= min}
-				onclick={() => minus()}><Icon name="minus" /></button
+				onclick={() => {
+					minus();
+				}}><Icon name="minus" /></button
 			>
 			<button
 				onkeydown={passthrough}
 				type="button"
 				disabled={value != null && max != null && value >= max}
-				onclick={() => plus()}><Icon name="plus" /></button
+				onclick={() => {
+					plus();
+				}}><Icon name="plus" /></button
 			>
 		</div>
 	</div>
@@ -138,55 +133,73 @@
 			onkeydown={passthrough}
 			type="button"
 			disabled={(value != null && max && (value * 10 || 0) + 1 > max) || false}
-			onclick={() => addDigit('1')}>1</button
+			onclick={() => {
+				addDigit('1');
+			}}>1</button
 		>
 		<button
 			onkeydown={passthrough}
 			type="button"
 			disabled={(value != null && max && (value * 10 || 0) + 2 > max) || false}
-			onclick={() => addDigit('2')}>2</button
+			onclick={() => {
+				addDigit('2');
+			}}>2</button
 		>
 		<button
 			onkeydown={passthrough}
 			type="button"
 			disabled={(value != null && max && (value * 10 || 0) + 3 > max) || false}
-			onclick={() => addDigit('3')}>3</button
+			onclick={() => {
+				addDigit('3');
+			}}>3</button
 		>
 		<button
 			onkeydown={passthrough}
 			type="button"
 			disabled={(value != null && max && (value * 10 || 0) + 4 > max) || false}
-			onclick={() => addDigit('4')}>4</button
+			onclick={() => {
+				addDigit('4');
+			}}>4</button
 		>
 		<button
 			onkeydown={passthrough}
 			type="button"
 			disabled={(value != null && max && (value * 10 || 0) + 5 > max) || false}
-			onclick={() => addDigit('5')}>5</button
+			onclick={() => {
+				addDigit('5');
+			}}>5</button
 		>
 		<button
 			onkeydown={passthrough}
 			type="button"
 			disabled={(value != null && max && (value * 10 || 0) + 6 > max) || false}
-			onclick={() => addDigit('6')}>6</button
+			onclick={() => {
+				addDigit('6');
+			}}>6</button
 		>
 		<button
 			onkeydown={passthrough}
 			type="button"
 			disabled={(value != null && max && (value * 10 || 0) + 7 > max) || false}
-			onclick={() => addDigit('7')}>7</button
+			onclick={() => {
+				addDigit('7');
+			}}>7</button
 		>
 		<button
 			onkeydown={passthrough}
 			type="button"
 			disabled={(value != null && max && (value * 10 || 0) + 8 > max) || false}
-			onclick={() => addDigit('8')}>8</button
+			onclick={() => {
+				addDigit('8');
+			}}>8</button
 		>
 		<button
 			onkeydown={passthrough}
 			type="button"
 			disabled={(value != null && max && (value * 10 || 0) + 9 > max) || false}
-			onclick={() => addDigit('9')}>9</button
+			onclick={() => {
+				addDigit('9');
+			}}>9</button
 		>
 		<button
 			onkeydown={passthrough}
@@ -198,13 +211,17 @@
 			onkeydown={passthrough}
 			type="button"
 			disabled={(value != null && max && (value * 10 || 0) > max) || false}
-			onclick={() => addDigit('0')}>0</button
+			onclick={() => {
+				addDigit('0');
+			}}>0</button
 		>
 		<button
 			onkeydown={passthrough}
 			type="button"
 			disabled={_value.length === 0}
-			onclick={() => backspace()}>⌫</button
+			onclick={() => {
+				backspace();
+			}}>⌫</button
 		>
 	</div>
 </div>

package/dist/Components/Touch/NumberKeyboard.svelte.d.ts

@@ -1,14 +1,4 @@
-export interface NumberKeyboardProps {
-    value: number | null;
-    label?: string | undefined;
-    labelRight?: string;
-    placeholder?: string | undefined;
-    min?: number | undefined;
-    max?: number | undefined;
-    decimal?: boolean;
-    inputRef?: HTMLInputElement | undefined;
-    coerceValue?: boolean;
-}
+import type { NumberKeyboardProps } from './NumberKeyboardProps.js';
 declare const NumberKeyboard: import("svelte").Component<NumberKeyboardProps, {}, "value" | "inputRef">;
 type NumberKeyboard = ReturnType<typeof NumberKeyboard>;
 export default NumberKeyboard;

package/dist/Components/Touch/NumberKeyboardProps.d.ts

@@ -0,0 +1,11 @@
+export interface NumberKeyboardProps {
+    value: number | null;
+    label?: string | undefined;
+    labelRight?: string;
+    placeholder?: string | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    decimal?: boolean;
+    inputRef?: HTMLInputElement | undefined;
+    coerceValue?: boolean;
+}

package/dist/Components/Touch/NumberKeyboardProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Touch/NumberModal.svelte

@@ -1,28 +1,10 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	import type { Snippet } from 'svelte';
-	import NumberKeyboard from './NumberKeyboard.svelte';
+<script lang="ts">
 	import { passthrough } from '../../Helpers/Helpers.svelte.js';
+	import NumberKeyboard from './NumberKeyboard.svelte';
+	import type { NumberModalProps } from './NumberModalProps.js';
 	import TouchModal from './TouchModal.svelte';
-
-	export interface NumberModalProps {
-		header: string;
-		value: number | null;
-		cancelEditing: () => void;
-		confirm: (value: number) => void;
-		isValid?: (value: number) => boolean;
-		label?: string;
-		placeholder?: string;
-		min?: number;
-		max?: number;
-		explanation?: Snippet;
-		decimal?: boolean;
-		coerceValue?: boolean;
-	}
-</script>
-
-<script lang="ts">
 	let {
 		coerceValue = false,
 		header,
@@ -38,18 +20,24 @@
 		explanation
 	}: NumberModalProps = $props();
 
-	let tempValue = $state(value);
+	let tempValue = $derived(value);
 
 	const isAcceptableValue = $derived(tempValue != null && isValid(tempValue));
 </script>
 
 <TouchModal
-	onclose={() => cancelEditing?.()}
+	onclose={() => {
+		cancelEditing();
+	}}
 	{header}
 	mandatory
-	onsubmit={(e) => {
+	onsubmit={(e: SubmitEvent) => {
 		e.preventDefault();
-		confirm(tempValue!);
+		if (tempValue == null) {
+			console.warn(`number modal value was null`);
+			return;
+		}
+		confirm(tempValue);
 	}}
 	{explanation}
 >
@@ -67,7 +55,12 @@
 	{#snippet footer()}
 		<div class="modal-footer">
 			<button onkeydown={passthrough} type="submit" disabled={!isAcceptableValue}>Confirm</button>
-			<button onkeydown={passthrough} type="button" onclick={() => cancelEditing?.()}>Cancel</button
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>Cancel</button
 			>
 		</div>
 	{/snippet}

package/dist/Components/Touch/NumberModal.svelte.d.ts

@@ -1,18 +1,4 @@
-import type { Snippet } from 'svelte';
-export interface NumberModalProps {
-    header: string;
-    value: number | null;
-    cancelEditing: () => void;
-    confirm: (value: number) => void;
-    isValid?: (value: number) => boolean;
-    label?: string;
-    placeholder?: string;
-    min?: number;
-    max?: number;
-    explanation?: Snippet;
-    decimal?: boolean;
-    coerceValue?: boolean;
-}
+import type { NumberModalProps } from './NumberModalProps.js';
 declare const NumberModal: import("svelte").Component<NumberModalProps, {}, "">;
 type NumberModal = ReturnType<typeof NumberModal>;
 export default NumberModal;

package/dist/Components/Touch/NumberModalProps.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export interface NumberModalProps {
+    header: string;
+    value: number | null;
+    cancelEditing: () => void;
+    confirm: (value: number) => void;
+    isValid?: (value: number) => boolean;
+    label?: string;
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    explanation?: Snippet;
+    decimal?: boolean;
+    coerceValue?: boolean;
+}

package/dist/Components/Touch/NumberModalProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Touch/PlusMinusCard.svelte

@@ -20,7 +20,9 @@
 		<Action
 			{disabled}
 			label="decrement"
-			onclick={() => callback(-1)}
+			onclick={() => {
+				callback(-1);
+			}}
 			icon={{
 				name: 'circle-minus',
 				size: Size.DoubleXLarge
@@ -33,7 +35,9 @@
 		<Action
 			{disabled}
 			label="increment"
-			onclick={() => callback(1)}
+			onclick={() => {
+				callback(1);
+			}}
 			icon={{
 				name: 'circle-plus',
 				size: Size.DoubleXLarge

package/dist/Components/Touch/SelectModal.svelte

@@ -1,23 +1,12 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	import { passthrough } from '../../Helpers/Helpers.svelte.js';
-	import type { CallbackButton } from '../../Types/Internal/CallbackButton.js';
+<script lang="ts">
+	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
 	import { InputVariant } from '../../Types/Internal/InputVariant.js';
 	import { onMount, tick } from 'svelte';
 	import TextInput from '../TextInput.svelte';
+	import type { SelectModalProps } from './SelectModalProps.js';
 	import TouchModal from './TouchModal.svelte';
-
-	export interface SelectModalProps {
-		header: string;
-		choices: Array<CallbackButton>;
-		cancelEditing: () => void;
-		searchbar?: boolean;
-		selected?: CallbackButton['label'] | null;
-	}
-</script>
-
-<script lang="ts">
 	const {
 		header,
 		searchbar = false,
@@ -38,26 +27,30 @@
 	);
 
 	onMount(() => {
-		tick().then(() => {
-			if (selected) {
-				selectedRef?.scrollIntoView({ block: 'center', inline: 'center' });
-				if (!searchbar) {
-					selectedRef?.focus();
+		tick()
+			.then(() => {
+				if (selected) {
+					selectedRef?.scrollIntoView({ block: 'center', inline: 'center' });
+					if (!searchbar) {
+						selectedRef?.focus();
+					}
 				}
-			}
-		});
+			})
+			.catch(devCatch);
 	});
 </script>
 
 <TouchModal
-	onclose={() => cancelEditing()}
+	onclose={() => {
+		cancelEditing();
+	}}
 	{header}
 	mandatory
 	staticHeight
-	onsubmit={(e) => {
+	onsubmit={(e: SubmitEvent) => {
 		e.preventDefault();
 		if (searchbar) {
-			filteredChoices[0]?.callback?.();
+			filteredChoices[0]?.callback?.()?.catch(devCatch);
 		}
 	}}
 >
@@ -72,7 +65,7 @@
 						onkeydown={passthrough}
 						bind:this={selectedRef}
 						type="button"
-						onclick={() => choice.callback!()}>{choice.label}</button
+						onclick={() => choice.callback?.()}>{choice.label}</button
 					>
 				{:else}
 					<button onkeydown={passthrough} bind:this={selectedRef} type={choice.type}
@@ -80,7 +73,7 @@
 					>
 				{/if}
 			{:else if choice.callback}
-				<button onkeydown={passthrough} type="button" onclick={() => choice.callback!()}
+				<button onkeydown={passthrough} type="button" onclick={() => choice.callback?.()}
 					>{choice.label}</button
 				>
 			{:else}
@@ -98,7 +91,13 @@
 
 	{#snippet footer()}
 		<div class="cancel-container">
-			<button onkeydown={passthrough} type="button" onclick={() => cancelEditing()}>Cancel</button>
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>Cancel</button
+			>
 		</div>
 	{/snippet}
 </TouchModal>

package/dist/Components/Touch/SelectModal.svelte.d.ts

@@ -1,11 +1,4 @@
-import type { CallbackButton } from '../../Types/Internal/CallbackButton.js';
-export interface SelectModalProps {
-    header: string;
-    choices: Array<CallbackButton>;
-    cancelEditing: () => void;
-    searchbar?: boolean;
-    selected?: CallbackButton['label'] | null;
-}
+import type { SelectModalProps } from './SelectModalProps.js';
 declare const SelectModal: import("svelte").Component<SelectModalProps, {}, "">;
 type SelectModal = ReturnType<typeof SelectModal>;
 export default SelectModal;

package/dist/Components/Touch/SelectModalProps.d.ts

@@ -0,0 +1,8 @@
+import type { CallbackButton } from '../../Types/Internal/CallbackButton.js';
+export interface SelectModalProps {
+    header: string;
+    choices: Array<CallbackButton>;
+    cancelEditing: () => void;
+    searchbar?: boolean;
+    selected?: CallbackButton['label'] | null;
+}

package/dist/Components/Touch/SelectModalProps.js

@@ -0,0 +1 @@
+export {};