@lavalogic/scoria 0.33.0 → 0.35.0

package/dist/Components/Test/TestContextConsumer.svelte

@@ -1,13 +1,13 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { TestContext } from '../../Contexts/TestContext.svelte.js';
-	import { getContext } from 'svelte';
-
-	const testContext = getContext<TestContext>(TestContext.identifier);
-</script>
-
-<h1>counter 1: {testContext.value1.value}</h1>
-<p>Ref wrapper 1 is incremented every time you click the button</p>
-<h2>counter 2: {testContext.value2.value}</h2>
-<p>ref wrapper 2 adds ref wrapper 1's value every time ref wrapper 1's value is divisible by 3</p>
+<svelte:options runes />
+
+<script lang="ts">
+	import { TestContext } from '../../Contexts/TestContext.svelte.js';
+	import { getContext } from 'svelte';
+
+	const testContext = getContext<TestContext>(TestContext.identifier);
+</script>
+
+<h1>counter 1: {testContext.value1.value}</h1>
+<p>Ref wrapper 1 is incremented every time you click the button</p>
+<h2>counter 2: {testContext.value2.value}</h2>
+<p>ref wrapper 2 adds ref wrapper 1's value every time ref wrapper 1's value is divisible by 3</p>

package/dist/Components/TextArea.svelte

@@ -1,110 +1,110 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Icon from './Icon.svelte';
-	import type { TextAreaProps } from './TextAreaProps.js';
-
-	let {
-		value = $bindable(''),
-		labelTop,
-		labelRight,
-		placeholder,
-		maxWidth = false,
-		required = false,
-		variant = InputVariant.Default,
-		selectNone = false,
-		noresize = false,
-		uppercase = false,
-		disabled,
-		invalid = false,
-		showErrorColours = false,
-		optional = false,
-		leftIcon,
-		rightIcon,
-		onLeftIconClick,
-		onRightIconClick,
-		rows = 4,
-
-		textAreaRef = $bindable(),
-		onblur,
-		onfocus
-	}: TextAreaProps = $props();
-
-	let isInvalid = $derived(showErrorColours && ((required && value.trim() === '') || invalid));
-</script>
-
-<label class:for-modal={variant === InputVariant.Modal} class:max-width={maxWidth}>
-	<!-- HACK removed label for modals for now because I couldn't think of a decent style that doesn't interfere with scrolling -->
-	{#if labelTop && variant !== InputVariant.Modal}
-		<!-- <span class="top-label" class:invalid={isInvalid}>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span> -->
-		<span
-			class="top-label"
-			class:for-default={variant === InputVariant.Default}
-			class:invalid={isInvalid}
-			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-		>
-		{#if variant === InputVariant.Default}
-			<span class="border" class:invalid={isInvalid}
-				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-			>
-		{/if}
-	{/if}
-	<!-- style="--background-colour: {leftIcon?.backgroundColour ?? rightIcon?.backgroundColour};" -->
-	<div class="icon-container" class:for-modal={variant == InputVariant.Modal}>
-		{#if leftIcon}
-			<Icon
-				name={leftIcon.name}
-				size={leftIcon.size ?? Size.Medium}
-				colour={leftIcon.colour}
-				float
-				left="0.75rem"
-				top="50%"
-				anchorX="0"
-				anchorY="-50%"
-				clickable={!!onLeftIconClick}
-				onclick={onLeftIconClick}
-			/>
-		{/if}
-		<textarea
-			class:noresize
-			class:uppercase
-			class:invalid={isInvalid}
-			class:select-none={selectNone}
-			class:left-pad={leftIcon != undefined}
-			class:right-pad={rightIcon != undefined}
-			class:for-modal={variant == InputVariant.Modal}
-			class:max-width={maxWidth}
-			bind:value
-			{onblur}
-			{onfocus}
-			{rows}
-			bind:this={textAreaRef}
-			{placeholder}
-			{required}
-			{disabled}
-		></textarea>
-		{#if rightIcon}
-			<Icon
-				name={rightIcon.name}
-				size={rightIcon.size ?? Size.Medium}
-				colour={rightIcon.colour}
-				float
-				right={variant == InputVariant.Modal ? '1rem' : '0.5rem'}
-				top="50%"
-				anchorX="0"
-				anchorY="-50%"
-				clickable={!!onRightIconClick}
-				onclick={onRightIconClick}
-			/>
-		{/if}
-		{#if labelRight}
-			<span class="right-label" class:for-modal={variant == InputVariant.Modal}>{labelRight}</span>
-		{/if}
-	</div>
-</label>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Icon from './Icon.svelte';
+	import type { TextAreaProps } from './TextAreaProps.js';
+
+	let {
+		value = $bindable(''),
+		labelTop,
+		labelRight,
+		placeholder,
+		maxWidth = false,
+		required = false,
+		variant = InputVariant.Default,
+		selectNone = false,
+		noresize = false,
+		uppercase = false,
+		disabled,
+		invalid = false,
+		showErrorColours = false,
+		optional = false,
+		leftIcon,
+		rightIcon,
+		onLeftIconClick,
+		onRightIconClick,
+		rows = 4,
+
+		textAreaRef = $bindable(),
+		onblur,
+		onfocus
+	}: TextAreaProps = $props();
+
+	let isInvalid = $derived(showErrorColours && ((required && value.trim() === '') || invalid));
+</script>
+
+<label class:for-modal={variant === InputVariant.Modal} class:max-width={maxWidth}>
+	<!-- HACK removed label for modals for now because I couldn't think of a decent style that doesn't interfere with scrolling -->
+	{#if labelTop && variant !== InputVariant.Modal}
+		<!-- <span class="top-label" class:invalid={isInvalid}>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span> -->
+		<span
+			class="top-label"
+			class:for-default={variant === InputVariant.Default}
+			class:invalid={isInvalid}
+			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+		>
+		{#if variant === InputVariant.Default}
+			<span class="border" class:invalid={isInvalid}
+				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+			>
+		{/if}
+	{/if}
+	<!-- style="--background-colour: {leftIcon?.backgroundColour ?? rightIcon?.backgroundColour};" -->
+	<div class="icon-container" class:for-modal={variant == InputVariant.Modal}>
+		{#if leftIcon}
+			<Icon
+				name={leftIcon.name}
+				size={leftIcon.size ?? Size.Medium}
+				colour={leftIcon.colour}
+				float
+				left="0.75rem"
+				top="50%"
+				anchorX="0"
+				anchorY="-50%"
+				clickable={!!onLeftIconClick}
+				onclick={onLeftIconClick}
+			/>
+		{/if}
+		<textarea
+			class:noresize
+			class:uppercase
+			class:invalid={isInvalid}
+			class:select-none={selectNone}
+			class:left-pad={leftIcon != undefined}
+			class:right-pad={rightIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			class:max-width={maxWidth}
+			bind:value
+			{onblur}
+			{onfocus}
+			{rows}
+			bind:this={textAreaRef}
+			{placeholder}
+			{required}
+			{disabled}
+		></textarea>
+		{#if rightIcon}
+			<Icon
+				name={rightIcon.name}
+				size={rightIcon.size ?? Size.Medium}
+				colour={rightIcon.colour}
+				float
+				right={variant == InputVariant.Modal ? '1rem' : '0.5rem'}
+				top="50%"
+				anchorX="0"
+				anchorY="-50%"
+				clickable={!!onRightIconClick}
+				onclick={onRightIconClick}
+			/>
+		{/if}
+		{#if labelRight}
+			<span class="right-label" class:for-modal={variant == InputVariant.Modal}>{labelRight}</span>
+		{/if}
+	</div>
+</label>
+
 <style>textarea {
   box-sizing: border-box;
   height: 100%;
@@ -318,4 +318,4 @@ span.border.invalid {
 .textarea-error-wrapper.for-modal {
   position: relative;
   height: 100%;
-}</style>
+}</style>

package/dist/Components/TextInput.svelte

@@ -1,149 +1,149 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { isValidEmailAddress } from '../Helpers/Helpers.svelte.js';
-	import { Colour, ColourSet } from '../scss/colours.js';
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Action from './Action.svelte';
-	import Icon from './Icon.svelte';
-	import type { TextInputProps } from './TextInputProps.js';
-	let {
-		id,
-		value = $bindable(''),
-		labelTop,
-		optional,
-		labelRight,
-		placeholder,
-		required = false,
-		variant = InputVariant.Default,
-		selectNone = false,
-		uppercase = false,
-		disabled = false,
-		invalid = false,
-		showErrorColours = true,
-		rightIconDisabled = false,
-		// leftIconDisabled = false,
-		leftIcon,
-		rightIcon,
-		type,
-		onLeftIconClick,
-		onRightIconClick,
-		inputRef = $bindable(),
-		'data-type': dataType,
-		onblur,
-		onfocus,
-		onkeydown,
-		oninput,
-	}: TextInputProps = $props();
-
-	let isInvalid = $derived(
-		showErrorColours &&
-			!disabled &&
-			((required && (!value?.trim() || (type == 'email' && !isValidEmailAddress(value)))) ||
-				invalid)
-	);
-</script>
-
-<div
-	class="error-wrapper"
-	class:for-modal={variant == InputVariant.Modal}
-	class:for-table={variant == InputVariant.Table}
->
-	<label
-		class:for-modal={variant == InputVariant.Modal}
-		class:for-table={variant == InputVariant.Table}
-	>
-		{#if labelTop}
-			<span
-				class="top-label"
-				class:for-default={variant === InputVariant.Default}
-				class:invalid={isInvalid}
-				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-			>
-			{#if variant === InputVariant.Default}
-				<span
-					class="border"
-					class:invalid={isInvalid}
-					>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-				>
-			{/if}
-		{/if}
-		<div
-			class="icon-container"
-			class:for-modal={variant == InputVariant.Modal}
-		>
-			{#if leftIcon}
-				<!-- TODO make this identical to right icon -->
-				<Icon
-					name={leftIcon.name}
-					size={leftIcon.size ?? Size.Medium}
-					colour={leftIcon.colour}
-					float
-					left="0.75rem"
-					top="50%"
-					anchorX="0"
-					anchorY="-50%"
-					clickable={!!onLeftIconClick}
-					onclick={() => onLeftIconClick?.()}
-				/>
-			{/if}
-			<input
-				{id}
-				class:for-default={variant === InputVariant.Default}
-				class:uppercase
-				class:invalid={isInvalid}
-				class:select-none={selectNone}
-				class:left-pad={leftIcon != undefined}
-				class:right-pad={rightIcon != undefined}
-				class:for-modal={variant == InputVariant.Modal}
-				data-type={dataType}
-				type={type ?? 'text'}
-				bind:value
-				{onblur}
-				{onfocus}
-				{onkeydown}
-				{oninput}
-				bind:this={inputRef}
-				{placeholder}
-				{required}
-				{disabled}
-			/>
-			{#if rightIcon}
-				<div class="right-icon">
-					{#if onRightIconClick}
-						<Action
-							noTabIndex
-							colourSet={ColourSet.Auxiliary}
-							disabled={rightIconDisabled}
-							icon={rightIcon}
-							size={Size.Medium}
-							onclick={onRightIconClick}
-						/>
-					{:else}
-						<Icon
-							name={rightIcon.name}
-							size={rightIcon.size ?? Size.Medium}
-							colour={rightIcon.colour ?? Colour['$font-disabled']}
-							float
-							right={variant == InputVariant.Modal ? '1rem' : '0.5rem'}
-							top="50%"
-							anchorX="0"
-							anchorY="-50%"
-						/>
-					{/if}
-				</div>
-			{/if}
-			{#if labelRight}
-				<span
-					class="right-label"
-					class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
-				>
-			{/if}
-		</div>
-	</label>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { isValidEmailAddress } from '../Helpers/Helpers.svelte.js';
+	import { Colour, ColourSet } from '../scss/colours.js';
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Action from './Action.svelte';
+	import Icon from './Icon.svelte';
+	import type { TextInputProps } from './TextInputProps.js';
+	let {
+		id,
+		value = $bindable(''),
+		labelTop,
+		optional,
+		labelRight,
+		placeholder,
+		required = false,
+		variant = InputVariant.Default,
+		selectNone = false,
+		uppercase = false,
+		disabled = false,
+		invalid = false,
+		showErrorColours = true,
+		rightIconDisabled = false,
+		// leftIconDisabled = false,
+		leftIcon,
+		rightIcon,
+		type,
+		onLeftIconClick,
+		onRightIconClick,
+		inputRef = $bindable(),
+		'data-type': dataType,
+		onblur,
+		onfocus,
+		onkeydown,
+		oninput,
+	}: TextInputProps = $props();
+
+	let isInvalid = $derived(
+		showErrorColours &&
+			!disabled &&
+			((required && (!value?.trim() || (type == 'email' && !isValidEmailAddress(value)))) ||
+				invalid)
+	);
+</script>
+
+<div
+	class="error-wrapper"
+	class:for-modal={variant == InputVariant.Modal}
+	class:for-table={variant == InputVariant.Table}
+>
+	<label
+		class:for-modal={variant == InputVariant.Modal}
+		class:for-table={variant == InputVariant.Table}
+	>
+		{#if labelTop}
+			<span
+				class="top-label"
+				class:for-default={variant === InputVariant.Default}
+				class:invalid={isInvalid}
+				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+			>
+			{#if variant === InputVariant.Default}
+				<span
+					class="border"
+					class:invalid={isInvalid}
+					>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+				>
+			{/if}
+		{/if}
+		<div
+			class="icon-container"
+			class:for-modal={variant == InputVariant.Modal}
+		>
+			{#if leftIcon}
+				<!-- TODO make this identical to right icon -->
+				<Icon
+					name={leftIcon.name}
+					size={leftIcon.size ?? Size.Medium}
+					colour={leftIcon.colour}
+					float
+					left="0.75rem"
+					top="50%"
+					anchorX="0"
+					anchorY="-50%"
+					clickable={!!onLeftIconClick}
+					onclick={() => onLeftIconClick?.()}
+				/>
+			{/if}
+			<input
+				{id}
+				class:for-default={variant === InputVariant.Default}
+				class:uppercase
+				class:invalid={isInvalid}
+				class:select-none={selectNone}
+				class:left-pad={leftIcon != undefined}
+				class:right-pad={rightIcon != undefined}
+				class:for-modal={variant == InputVariant.Modal}
+				data-type={dataType}
+				type={type ?? 'text'}
+				bind:value
+				{onblur}
+				{onfocus}
+				{onkeydown}
+				{oninput}
+				bind:this={inputRef}
+				{placeholder}
+				{required}
+				{disabled}
+			/>
+			{#if rightIcon}
+				<div class="right-icon">
+					{#if onRightIconClick}
+						<Action
+							noTabIndex
+							colourSet={ColourSet.Auxiliary}
+							disabled={rightIconDisabled}
+							icon={rightIcon}
+							size={Size.Medium}
+							onclick={onRightIconClick}
+						/>
+					{:else}
+						<Icon
+							name={rightIcon.name}
+							size={rightIcon.size ?? Size.Medium}
+							colour={rightIcon.colour ?? Colour['$font-disabled']}
+							float
+							right={variant == InputVariant.Modal ? '1rem' : '0.5rem'}
+							top="50%"
+							anchorX="0"
+							anchorY="-50%"
+						/>
+					{/if}
+				</div>
+			{/if}
+			{#if labelRight}
+				<span
+					class="right-label"
+					class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
+				>
+			{/if}
+		</div>
+	</label>
+</div>
+
 <style>input {
   box-sizing: border-box;
   height: 100%;
@@ -377,4 +377,4 @@ label.for-table input {
 
 td {
   --input-border: none;
-}</style>
+}</style>