@lavalogic/scoria 0.39.2 → 0.40.0

package/dist/Components/Touch/TextAreaModal.svelte

@@ -1,97 +1,97 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { useAsyncFlag } from '../../Helpers/AsyncFlag.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 } from 'svelte';
-	import TextArea from '../TextArea.svelte';
-	import type { TextAreaModalProps } from './TextAreaModalProps.js';
-	import TouchModal from './TouchModal.svelte';
-
-	let {
-		header,
-		value = $bindable(''),
-		label,
-		placeholder,
-		cancelEditing,
-		confirm,
-		uppercase = false,
-		textAreaRef = $bindable(),
-		isValid: _isValid = true,
-		explanation,
-	}: TextAreaModalProps = $props();
-
-	onMount(() => {
-		tick()
-			.then(() => {
-				textAreaRef?.select();
-			})
-			.catch(devCatch);
-	});
-
-	async function resetValue() {
-		value = '';
-		await tick();
-		textAreaRef?.select();
-	}
-
-	const isValid = useAsyncFlag(
-		() => (typeof _isValid === 'function' ? _isValid(value) : _isValid),
-		true
-	);
-</script>
-
-<TouchModal
-	onclose={() => {
-		cancelEditing();
-	}}
-	{header}
-	mandatory
-	minHeight="400px"
-	minWidth="600px"
-	onsubmit={(e: SubmitEvent) => {
-		e.preventDefault();
-		confirm(value);
-	}}
-	{explanation}
->
-	<TextArea
-		{uppercase}
-		labelTop={label}
-		{placeholder}
-		bind:value
-		variant={InputVariant.Modal}
-		bind:textAreaRef
-		invalid={!isValid.value}
-		rightIcon={{
-			name: 'cross',
-			size: Size.Large,
-			colour: Colour['$font-primary'],
-		}}
-		onRightIconClick={resetValue}
-	/>
-
-	{#snippet footer()}
-		<div class="modal-footer">
-			<button
-				onkeydown={passthrough}
-				type="submit"
-				disabled={!isValid.value}>Confirm</button
-			>
-			<button
-				onkeydown={passthrough}
-				type="button"
-				onclick={() => {
-					cancelEditing();
-				}}>Cancel</button
-			>
-		</div>
-	{/snippet}
-</TouchModal>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { useAsyncFlag } from '../../Helpers/AsyncFlag.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 } from 'svelte';
+	import TextArea from '../TextArea.svelte';
+	import type { TextAreaModalProps } from './TextAreaModalProps.js';
+	import TouchModal from './TouchModal.svelte';
+
+	let {
+		header,
+		value = $bindable(''),
+		label,
+		placeholder,
+		cancelEditing,
+		confirm,
+		uppercase = false,
+		textAreaRef = $bindable(),
+		isValid: _isValid = true,
+		explanation,
+	}: TextAreaModalProps = $props();
+
+	onMount(() => {
+		tick()
+			.then(() => {
+				textAreaRef?.select();
+			})
+			.catch(devCatch);
+	});
+
+	async function resetValue() {
+		value = '';
+		await tick();
+		textAreaRef?.select();
+	}
+
+	const isValid = useAsyncFlag(
+		() => (typeof _isValid === 'function' ? _isValid(value) : _isValid),
+		true
+	);
+</script>
+
+<TouchModal
+	onclose={() => {
+		cancelEditing();
+	}}
+	{header}
+	mandatory
+	minHeight="400px"
+	minWidth="600px"
+	onsubmit={(e: SubmitEvent) => {
+		e.preventDefault();
+		confirm(value);
+	}}
+	{explanation}
+>
+	<TextArea
+		{uppercase}
+		labelTop={label}
+		{placeholder}
+		bind:value
+		variant={InputVariant.Modal}
+		bind:textAreaRef
+		invalid={!isValid.value}
+		rightIcon={{
+			name: 'cross',
+			size: Size.Large,
+			colour: Colour['$font-primary'],
+		}}
+		onRightIconClick={resetValue}
+	/>
+
+	{#snippet footer()}
+		<div class="modal-footer">
+			<button
+				onkeydown={passthrough}
+				type="submit"
+				disabled={!isValid.value}>Confirm</button
+			>
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>Cancel</button
+			>
+		</div>
+	{/snippet}
+</TouchModal>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -339,4 +339,4 @@ button {
   display: block;
   border-width: 2px;
   border-radius: 4px;
-}</style>
+}</style>

package/dist/Components/Touch/TextModal.svelte

@@ -1,108 +1,108 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { useAsyncFlag } from '../../Helpers/AsyncFlag.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 } from 'svelte';
-	import TextInput from '../TextInput.svelte';
-	import type { TextModalProps } from './TextModalProps.js';
-	import TouchModal from './TouchModal.svelte';
-
-	let {
-		header,
-		value = $bindable(''),
-		label,
-		placeholder,
-		cancelEditing,
-		confirm,
-		uppercase = false,
-		inputRef = $bindable(),
-		isValid: _isValid = true,
-		mandatory = true,
-		explanation,
-		width,
-		minWidth,
-		staticWidth,
-		minHeight,
-		height,
-	}: TextModalProps = $props();
-
-	onMount(() => {
-		tick()
-			.then(() => {
-				inputRef?.select();
-			})
-			.catch(devCatch);
-	});
-
-	async function resetValue() {
-		// Cleared back to empty: callers wanting reset-to-original semantics
-		// should re-pass the original value via the bound prop.
-		value = '';
-		await tick();
-		inputRef?.select();
-	}
-
-	const isValid = useAsyncFlag(
-		() => (typeof _isValid === 'function' ? _isValid(value) : _isValid),
-		true
-	);
-</script>
-
-<TouchModal
-	onclose={() => {
-		cancelEditing();
-	}}
-	{header}
-	{mandatory}
-	{width}
-	{minWidth}
-	{staticWidth}
-	{minHeight}
-	{height}
-	onsubmit={(e: SubmitEvent) => {
-		e.preventDefault();
-		confirm(value);
-	}}
-	{explanation}
->
-	<TextInput
-		{uppercase}
-		labelTop={label}
-		{placeholder}
-		variant={InputVariant.Modal}
-		bind:inputRef
-		bind:value
-		showErrorColours
-		invalid={!isValid.value}
-		rightIcon={{
-			name: 'cross',
-			size: Size.Large,
-			colour: Colour['$font-primary'],
-		}}
-		onRightIconClick={resetValue}
-	/>
-	{#snippet footer()}
-		<div class="modal-footer">
-			<button
-				onkeydown={passthrough}
-				type="submit"
-				disabled={!isValid.value}>Confirm</button
-			>
-			<button
-				onkeydown={passthrough}
-				type="button"
-				onclick={() => {
-					cancelEditing();
-				}}>Cancel</button
-			>
-		</div>
-	{/snippet}
-</TouchModal>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { useAsyncFlag } from '../../Helpers/AsyncFlag.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 } from 'svelte';
+	import TextInput from '../TextInput.svelte';
+	import type { TextModalProps } from './TextModalProps.js';
+	import TouchModal from './TouchModal.svelte';
+
+	let {
+		header,
+		value = $bindable(''),
+		label,
+		placeholder,
+		cancelEditing,
+		confirm,
+		uppercase = false,
+		inputRef = $bindable(),
+		isValid: _isValid = true,
+		mandatory = true,
+		explanation,
+		width,
+		minWidth,
+		staticWidth,
+		minHeight,
+		height,
+	}: TextModalProps = $props();
+
+	onMount(() => {
+		tick()
+			.then(() => {
+				inputRef?.select();
+			})
+			.catch(devCatch);
+	});
+
+	async function resetValue() {
+		// Cleared back to empty: callers wanting reset-to-original semantics
+		// should re-pass the original value via the bound prop.
+		value = '';
+		await tick();
+		inputRef?.select();
+	}
+
+	const isValid = useAsyncFlag(
+		() => (typeof _isValid === 'function' ? _isValid(value) : _isValid),
+		true
+	);
+</script>
+
+<TouchModal
+	onclose={() => {
+		cancelEditing();
+	}}
+	{header}
+	{mandatory}
+	{width}
+	{minWidth}
+	{staticWidth}
+	{minHeight}
+	{height}
+	onsubmit={(e: SubmitEvent) => {
+		e.preventDefault();
+		confirm(value);
+	}}
+	{explanation}
+>
+	<TextInput
+		{uppercase}
+		labelTop={label}
+		{placeholder}
+		variant={InputVariant.Modal}
+		bind:inputRef
+		bind:value
+		showErrorColours
+		invalid={!isValid.value}
+		rightIcon={{
+			name: 'cross',
+			size: Size.Large,
+			colour: Colour['$font-primary'],
+		}}
+		onRightIconClick={resetValue}
+	/>
+	{#snippet footer()}
+		<div class="modal-footer">
+			<button
+				onkeydown={passthrough}
+				type="submit"
+				disabled={!isValid.value}>Confirm</button
+			>
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>Cancel</button
+			>
+		</div>
+	{/snippet}
+</TouchModal>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -350,4 +350,4 @@ button {
   display: block;
   border-width: 2px;
   border-radius: 4px;
-}</style>
+}</style>

package/dist/Components/Touch/TouchCard.svelte

@@ -1,35 +1,35 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { Colour } from '../../scss/colours.js';
-	import Action from '../Action.svelte';
-	import type { TouchCardProps } from './TouchCardProps.js';
-	let { children, additionalButtons, highlighted = $bindable(false) }: TouchCardProps = $props();
-</script>
-
-<div
-	class="card"
-	class:highlighted
->
-	<div class="float-right">
-		{#if additionalButtons}
-			{@render additionalButtons()}
-		{/if}
-		<Action
-			icon={{
-				name: 'star-banner',
-				colour: highlighted ? Colour['$brand-primary'] : Colour['$ui-blue-4'],
-			}}
-			backgroundColour={Colour['$transparent-0']}
-			label="Highlight Card"
-			onclick={() => {
-				highlighted = !highlighted;
-			}}
-		/>
-	</div>
-	{@render children()}
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { Colour } from '../../scss/colours.js';
+	import Action from '../Action.svelte';
+	import type { TouchCardProps } from './TouchCardProps.js';
+	let { children, additionalButtons, highlighted = $bindable(false) }: TouchCardProps = $props();
+</script>
+
+<div
+	class="card"
+	class:highlighted
+>
+	<div class="float-right">
+		{#if additionalButtons}
+			{@render additionalButtons()}
+		{/if}
+		<Action
+			icon={{
+				name: 'star-banner',
+				colour: highlighted ? Colour['$brand-primary'] : Colour['$ui-blue-4'],
+			}}
+			backgroundColour={Colour['$transparent-0']}
+			label="Highlight Card"
+			onclick={() => {
+				highlighted = !highlighted;
+			}}
+		/>
+	</div>
+	{@render children()}
+</div>
+
 <style>.card {
   color: #3a4952;
   fill: #3a4952;
@@ -119,4 +119,4 @@
   padding: 0.375rem 0.5rem;
   margin-left: 0;
   width: fit-content;
-}</style>
+}</style>