@lavalogic/scoria 0.11.14 → 0.12.0

package/dist/Components/Touch/SummaryCard.svelte

@@ -1,28 +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 { IconProps } from '../Icon.svelte';
 	import Icon from '../Icon.svelte';
-
-	export interface KeyValuePair {
-		key: string;
-		value: string;
-	}
-	export interface SummaryCardProps {
-		bubbles?: string[];
-		desktop?: boolean;
-		icon?: IconProps['name'];
-		heading: string;
-		keyValues: KeyValuePair[];
-		editable?: boolean;
-		error?: boolean;
-		onclick?: (e: MouseEvent) => void;
-	}
-</script>
-
-<script lang="ts">
+	import type { SummaryCardProps } from './SummaryCardProps.js';
 	const {
 		bubbles,
 		desktop = false,
@@ -58,6 +40,7 @@
 {/snippet}
 
 <button class:desktop onkeydown={passthrough} {onclick} class="summary-card" class:error>
+	<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
 	{@render _heading()}
 	<div class="columns">
 		<div class="left">

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

@@ -1,18 +1,4 @@
-import type { IconProps } from '../Icon.svelte';
-export interface KeyValuePair {
-    key: string;
-    value: string;
-}
-export interface SummaryCardProps {
-    bubbles?: string[];
-    desktop?: boolean;
-    icon?: IconProps['name'];
-    heading: string;
-    keyValues: KeyValuePair[];
-    editable?: boolean;
-    error?: boolean;
-    onclick?: (e: MouseEvent) => void;
-}
+import type { SummaryCardProps } from './SummaryCardProps.js';
 declare const SummaryCard: import("svelte").Component<SummaryCardProps, {}, "">;
 type SummaryCard = ReturnType<typeof SummaryCard>;
 export default SummaryCard;

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

@@ -0,0 +1,12 @@
+import type { KeyValuePair } from '../../index.js';
+import type { IconProps } from '../IconProps.js';
+export interface SummaryCardProps {
+    bubbles?: Array<string>;
+    desktop?: boolean;
+    icon?: IconProps['name'];
+    heading: string;
+    keyValues: Array<KeyValuePair>;
+    editable?: boolean;
+    error?: boolean;
+    onclick?: (e: MouseEvent) => void;
+}

package/dist/Components/Touch/SummaryCardProps.js

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

package/dist/Components/Touch/TextAreaModal.svelte

@@ -1,28 +1,15 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	import { passthrough } from '../../Helpers/Helpers.svelte.js';
+<script lang="ts">
+	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
 	import { Colour } from '../../scss/colours.js';
 	import { InputVariant } from '../../Types/Internal/InputVariant.js';
 	import { Size } from '../../Types/Internal/Size.js';
-	import { type Snippet, onMount, tick } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import TextArea from '../TextArea.svelte';
+	import type { TextAreaModalProps } from './TextAreaModalProps.js';
 	import TouchModal from './TouchModal.svelte';
 
-	export interface TextAreaModalProps {
-		header: string;
-		value?: string;
-		label?: string;
-		placeholder?: string;
-		cancelEditing: () => void;
-		confirm: (value: string) => void;
-		uppercase?: boolean;
-		textAreaRef?: HTMLTextAreaElement;
-		explanation?: Snippet;
-	}
-</script>
-
-<script lang="ts">
 	let {
 		header,
 		value = $bindable(''),
@@ -39,9 +26,11 @@
 
 	onMount(() => {
 		tempValue = value;
-		tick().then(() => {
-			textAreaRef?.select();
-		});
+		tick()
+			.then(() => {
+				textAreaRef?.select();
+			})
+			.catch(devCatch);
 	});
 
 	async function resetValue() {
@@ -52,12 +41,14 @@
 </script>
 
 <TouchModal
-	onclose={() => cancelEditing()}
+	onclose={() => {
+		cancelEditing();
+	}}
 	{header}
 	mandatory
 	minHeight="400px"
 	minWidth="600px"
-	onsubmit={(e) => {
+	onsubmit={(e: SubmitEvent) => {
 		e.preventDefault();
 		confirm(tempValue);
 	}}
@@ -81,7 +72,13 @@
 	{#snippet footer()}
 		<div class="modal-footer">
 			<button onkeydown={passthrough} type="submit">Confirm</button>
-			<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/TextAreaModal.svelte.d.ts

@@ -1,15 +1,4 @@
-import { type Snippet } from 'svelte';
-export interface TextAreaModalProps {
-    header: string;
-    value?: string;
-    label?: string;
-    placeholder?: string;
-    cancelEditing: () => void;
-    confirm: (value: string) => void;
-    uppercase?: boolean;
-    textAreaRef?: HTMLTextAreaElement;
-    explanation?: Snippet;
-}
+import type { TextAreaModalProps } from './TextAreaModalProps.js';
 declare const TextAreaModal: import("svelte").Component<TextAreaModalProps, {}, "value" | "textAreaRef">;
 type TextAreaModal = ReturnType<typeof TextAreaModal>;
 export default TextAreaModal;

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+export interface TextAreaModalProps {
+    header: string;
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    cancelEditing: () => void;
+    confirm: (value: string) => void;
+    uppercase?: boolean;
+    textAreaRef?: HTMLTextAreaElement;
+    explanation?: Snippet;
+}

package/dist/Components/Touch/TextAreaModalProps.js

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

package/dist/Components/Touch/TextModal.svelte

@@ -1,34 +1,13 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	export interface TextModalProps {
-		header: string;
-		cancelEditing: () => void;
-		confirm: (value: string) => void;
-
-		width?: string;
-		minWidth?: string;
-		staticWidth?: boolean;
-		minHeight?: string;
-		height?: string;
-		value?: string;
-		label?: string;
-		placeholder?: string;
-		uppercase?: boolean;
-		inputRef?: HTMLInputElement | undefined;
-		isValid?: boolean | ((value: string) => boolean | Promise<boolean>);
-		mandatory?: boolean;
-		explanation?: Snippet;
-	}
-</script>
-
 <script lang="ts">
-	import { passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
 	import { Colour } from '../../scss/colours.js';
 	import { InputVariant } from '../../Types/Internal/InputVariant.js';
 	import { Size } from '../../Types/Internal/Size.js';
-	import { onMount, tick, type Snippet } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import TextInput from '../TextInput.svelte';
+	import type { TextModalProps } from './TextModalProps.js';
 	import TouchModal from './TouchModal.svelte';
 
 	let {
@@ -53,9 +32,11 @@
 	// let tempValue = '';
 
 	onMount(() => {
-		tick().then(() => {
-			inputRef?.select();
-		});
+		tick()
+			.then(() => {
+				inputRef?.select();
+			})
+			.catch(devCatch);
 	});
 
 	async function resetValue() {
@@ -78,9 +59,11 @@
 				if (typeof result == 'boolean') {
 					isValid = result;
 				} else {
-					result.then((it) => {
-						isValid = it;
-					});
+					result
+						.then((it) => {
+							isValid = it;
+						})
+						.catch(devCatch);
 				}
 			} else {
 				isValid = _isValid;
@@ -90,7 +73,9 @@
 </script>
 
 <TouchModal
-	onclose={() => cancelEditing()}
+	onclose={() => {
+		cancelEditing();
+	}}
 	{header}
 	{mandatory}
 	{width}
@@ -98,7 +83,7 @@
 	{staticWidth}
 	{minHeight}
 	{height}
-	onsubmit={(e) => {
+	onsubmit={(e: SubmitEvent) => {
 		e.preventDefault();
 		confirm(value);
 	}}
@@ -124,7 +109,13 @@
 	{#snippet footer()}
 		<div class="modal-footer">
 			<button onkeydown={passthrough} type="submit" disabled={!isValid}>Confirm</button>
-			<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/TextModal.svelte.d.ts

@@ -1,22 +1,4 @@
-export interface TextModalProps {
-    header: string;
-    cancelEditing: () => void;
-    confirm: (value: string) => void;
-    width?: string;
-    minWidth?: string;
-    staticWidth?: boolean;
-    minHeight?: string;
-    height?: string;
-    value?: string;
-    label?: string;
-    placeholder?: string;
-    uppercase?: boolean;
-    inputRef?: HTMLInputElement | undefined;
-    isValid?: boolean | ((value: string) => boolean | Promise<boolean>);
-    mandatory?: boolean;
-    explanation?: Snippet;
-}
-import { type Snippet } from 'svelte';
+import type { TextModalProps } from './TextModalProps.js';
 declare const TextModal: import("svelte").Component<TextModalProps, {}, "value" | "inputRef">;
 type TextModal = ReturnType<typeof TextModal>;
 export default TextModal;

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+export interface TextModalProps {
+    header: string;
+    cancelEditing: () => void;
+    confirm: (value: string) => void;
+    width?: string;
+    minWidth?: string;
+    staticWidth?: boolean;
+    minHeight?: string;
+    height?: string;
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    uppercase?: boolean;
+    inputRef?: HTMLInputElement | undefined;
+    isValid?: boolean | ((value: string) => boolean | Promise<boolean>);
+    mandatory?: boolean;
+    explanation?: Snippet;
+}

package/dist/Components/Touch/TextModalProps.js

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

package/dist/Components/Touch/TouchCard.svelte

@@ -1,16 +1,7 @@
-<script lang="ts" module>
+<script lang="ts">
 	import { Colour } from '../../scss/colours.js';
-	import type { Snippet } from 'svelte';
 	import Action from '../Action.svelte';
-
-	export interface TouchCardProps {
-		children: Snippet;
-		additionalButtons?: Snippet;
-		highlighted?: boolean;
-	}
-</script>
-
-<script lang="ts">
+	import type { TouchCardProps } from './TouchCardProps.js';
 	let { children, additionalButtons, highlighted = $bindable(false) }: TouchCardProps = $props();
 </script>
 

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

@@ -1,9 +1,4 @@
-import type { Snippet } from 'svelte';
-export interface TouchCardProps {
-    children: Snippet;
-    additionalButtons?: Snippet;
-    highlighted?: boolean;
-}
+import type { TouchCardProps } from './TouchCardProps.js';
 declare const TouchCard: import("svelte").Component<TouchCardProps, {}, "highlighted">;
 type TouchCard = ReturnType<typeof TouchCard>;
 export default TouchCard;

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

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+export interface TouchCardProps {
+    children: Snippet;
+    additionalButtons?: Snippet;
+    highlighted?: boolean;
+}

package/dist/Components/Touch/TouchCardProps.js

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

package/dist/Components/Touch/TouchModal.svelte

@@ -1,50 +1,16 @@
 <!-- eslint-disable prefer-const  -->
 <svelte:options runes />
 
-<script module lang="ts">
+<script lang="ts">
 	import { DATAMatrix } from '../../Helpers/Datamatrix.js';
 	import { passthrough } from '../../Helpers/Helpers.svelte.js';
 	import { ColourSet } from '../../scss/colours.js';
 	import { Size } from '../../Types/Internal/Size.js';
-	import { type Snippet, onMount } from 'svelte';
+	import { onMount } from 'svelte';
 	import Action from '../Action.svelte';
 	import DataMatrixIcon from '../DataMatrixIcon.svelte';
-	import type { ButtonProp } from '../../Types/Internal/ButtonProp.js';
-
-	export interface DefaultTimer {
-		time: number;
-		action: 'submit' | 'close';
-		callback?: () => void;
-	}
+	import type { TouchModalProps } from './TouchModalProps.js';
 
-	export interface TouchModalProps {
-		header: string;
-		children: Snippet;
-		onclose?: () => void;
-
-		row?: boolean;
-		wrap?: boolean;
-		onsubmit?: (e: SubmitEvent) => void;
-		buttons?: ButtonProp[];
-		mandatory?: boolean;
-		staticHeight?: boolean;
-		staticWidth?: boolean;
-		minWidth?: string;
-		minHeight?: string;
-		width?: string;
-		height?: string;
-		onShowCallback?: () => void;
-		submitRef?: HTMLButtonElement | undefined;
-		defaultTimer?: DefaultTimer;
-		isValid?: boolean;
-		noscroll?: boolean;
-		headerExtra?: Snippet;
-		explanation?: Snippet | undefined;
-		footer?: Snippet;
-	}
-</script>
-
-<script lang="ts">
 	let {
 		header,
 		buttons,
@@ -70,7 +36,7 @@
 		submitRef = $bindable()
 	}: TouchModalProps = $props();
 
-	let dialog: HTMLDialogElement;
+	let dialog: HTMLDialogElement | undefined;
 	let form: HTMLFormElement;
 	let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
 	let paused = $state(false);
@@ -92,11 +58,11 @@
 		if (defaultTimer) {
 			timeout = setTimeout(() => {
 				if (dialog && dialog.open) {
-					if (defaultTimer!.action === 'submit') {
-						form?.requestSubmit();
-						defaultTimer!.callback?.();
+					if (defaultTimer.action === 'submit') {
+						form.requestSubmit();
+						defaultTimer.callback?.();
 					} else {
-						dialog?.close();
+						dialog.close();
 					}
 				}
 			}, defaultTimer.time);
@@ -118,14 +84,14 @@
 		if (e.key === 'Escape') {
 			e.preventDefault();
 			if (!mandatory) {
-				dialog.close();
+				dialog?.close();
 			}
 		}
 	}
 </script>
 
 <dialog
-	style="--timer: {defaultTimer && defaultTimer?.time + 'ms'}; {minWidth &&
+	style="--timer: {defaultTimer && defaultTimer.time.toString() + 'ms'}; {minWidth &&
 		`--dialog-min-width: ${minWidth};`} {minHeight &&
 		`--dialog-min-height: ${minHeight};`} {height && `--dialog-height: ${height};`} {width &&
 		`--dialog-width: ${width};`}"
@@ -164,7 +130,9 @@
 					<div class="close-button">
 						<Action
 							size={Size.Large}
-							onclick={() => dialog.close()}
+							onclick={() => {
+								dialog?.close();
+							}}
 							icon={{
 								name: 'cross',
 								size: Size.DoubleXLarge
@@ -178,7 +146,7 @@
 			{/if}
 
 			{#if headerExtra}
-				{@render headerExtra?.()}
+				{@render headerExtra()}
 			{/if}
 		</div>
 

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

@@ -1,34 +1,4 @@
-import { type Snippet } from 'svelte';
-import type { ButtonProp } from '../../Types/Internal/ButtonProp.js';
-export interface DefaultTimer {
-    time: number;
-    action: 'submit' | 'close';
-    callback?: () => void;
-}
-export interface TouchModalProps {
-    header: string;
-    children: Snippet;
-    onclose?: () => void;
-    row?: boolean;
-    wrap?: boolean;
-    onsubmit?: (e: SubmitEvent) => void;
-    buttons?: ButtonProp[];
-    mandatory?: boolean;
-    staticHeight?: boolean;
-    staticWidth?: boolean;
-    minWidth?: string;
-    minHeight?: string;
-    width?: string;
-    height?: string;
-    onShowCallback?: () => void;
-    submitRef?: HTMLButtonElement | undefined;
-    defaultTimer?: DefaultTimer;
-    isValid?: boolean;
-    noscroll?: boolean;
-    headerExtra?: Snippet;
-    explanation?: Snippet | undefined;
-    footer?: Snippet;
-}
+import type { TouchModalProps } from './TouchModalProps.js';
 declare const TouchModal: import("svelte").Component<TouchModalProps, {}, "submitRef">;
 type TouchModal = ReturnType<typeof TouchModal>;
 export default TouchModal;

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

@@ -0,0 +1,27 @@
+import type { ButtonProp } from '../../Types/Internal/ButtonProp.js';
+import type { Snippet } from 'svelte';
+import type { DefaultTimer } from './DefaultTimer.js';
+export interface TouchModalProps {
+    header: string;
+    children: Snippet;
+    onclose?: () => void;
+    row?: boolean;
+    wrap?: boolean;
+    onsubmit?: (e: SubmitEvent) => void;
+    buttons?: Array<ButtonProp>;
+    mandatory?: boolean;
+    staticHeight?: boolean;
+    staticWidth?: boolean;
+    minWidth?: string;
+    minHeight?: string;
+    width?: string;
+    height?: string;
+    onShowCallback?: () => void;
+    submitRef?: HTMLButtonElement | undefined;
+    defaultTimer?: DefaultTimer;
+    isValid?: boolean;
+    noscroll?: boolean;
+    headerExtra?: Snippet;
+    explanation?: Snippet | undefined;
+    footer?: Snippet;
+}

package/dist/Components/Touch/TouchModalProps.js

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

package/dist/Components/Touch/UtilityButton.svelte

@@ -1,32 +1,14 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	import { onMount, type Snippet } from 'svelte';
+<script lang="ts">
 	import { passthrough } from '../../Helpers/Helpers.svelte.js';
 	import { ColourSet } from '../../scss/colours.js';
 	import { Side } from '../../Types/Internal/Side.js';
 	import { Size } from '../../Types/Internal/Size.js';
+	import { onMount } from 'svelte';
 	import DataMatrixIcon from '../DataMatrixIcon.svelte';
-	import Icon, { type PartialIconProps } from '../Icon.svelte';
-	export interface UtilityButtonProps {
-		icon?: PartialIconProps | SVGSVGElement | null;
-
-		type?: 'button' | 'submit' | 'reset' | null;
-		colourSet?: ColourSet;
-		side?: Side;
-		size?: Size;
-		notifications?: string;
-		ref?: HTMLButtonElement | undefined;
-		disabled?: boolean;
-		onEditBarcode?: () => void;
-		onclick?: ((e: MouseEvent) => void) | undefined;
-		onfocus?: ((e: FocusEvent) => void) | undefined;
-		onblur?: ((e: FocusEvent) => void) | undefined;
-		children?: Snippet;
-	}
-</script>
-
-<script lang="ts">
+	import Icon from '../Icon.svelte';
+	import type { UtilityButtonProps } from './UtilityButtonProps.js';
 	let {
 		type = 'button',
 		colourSet = ColourSet.Secondary,
@@ -61,7 +43,7 @@
 <button
 	{type}
 	class:call-to-action={colourSet === ColourSet.Primary || colourSet === ColourSet.CallToAction}
-	disabled={disabled === true ? true : undefined}
+	disabled={disabled ? true : undefined}
 	class:left={side == Side.Left}
 	class:right={side == Side.Right}
 	class:top={side == Side.Top}

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

@@ -1,23 +1,4 @@
-import { type Snippet } from 'svelte';
-import { ColourSet } from '../../scss/colours.js';
-import { Side } from '../../Types/Internal/Side.js';
-import { Size } from '../../Types/Internal/Size.js';
-import { type PartialIconProps } from '../Icon.svelte';
-export interface UtilityButtonProps {
-    icon?: PartialIconProps | SVGSVGElement | null;
-    type?: 'button' | 'submit' | 'reset' | null;
-    colourSet?: ColourSet;
-    side?: Side;
-    size?: Size;
-    notifications?: string;
-    ref?: HTMLButtonElement | undefined;
-    disabled?: boolean;
-    onEditBarcode?: () => void;
-    onclick?: ((e: MouseEvent) => void) | undefined;
-    onfocus?: ((e: FocusEvent) => void) | undefined;
-    onblur?: ((e: FocusEvent) => void) | undefined;
-    children?: Snippet;
-}
+import type { UtilityButtonProps } from './UtilityButtonProps.js';
 declare const UtilityButton: import("svelte").Component<UtilityButtonProps, {}, "ref">;
 type UtilityButton = ReturnType<typeof UtilityButton>;
 export default UtilityButton;

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

@@ -0,0 +1,20 @@
+import type { ColourSet } from '../../scss/colours.js';
+import type { Side } from '../../Types/Internal/Side.js';
+import type { Size } from '../../Types/Internal/Size.js';
+import type { Snippet } from 'svelte';
+import type { PartialIconProps } from '../PartialIconProps.js';
+export interface UtilityButtonProps {
+    icon?: PartialIconProps | SVGSVGElement | null;
+    type?: 'button' | 'submit' | 'reset' | null;
+    colourSet?: ColourSet;
+    side?: Side;
+    size?: Size;
+    notifications?: string;
+    ref?: HTMLButtonElement | undefined;
+    disabled?: boolean;
+    onEditBarcode?: () => void;
+    onclick?: ((e: MouseEvent) => void) | undefined;
+    onfocus?: ((e: FocusEvent) => void) | undefined;
+    onblur?: ((e: FocusEvent) => void) | undefined;
+    children?: Snippet;
+}

package/dist/Components/Touch/UtilityButtonProps.js

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