@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/TextArea.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { m as i18n } from "../paraglide/messages.js";
 import { cssLength } from "../Helpers/Helpers.svelte.js";
 import { InputVariant } from "../Types/Internal/InputVariant.js";
@@ -7,95 +7,95 @@ import { Size } from "../Types/Internal/Size.js";
 import Icon from "./Icon.svelte";
 let { value = $bindable(""), labelTop, labelRight, placeholder, maxWidth = false, required = false, variant = InputVariant.Default, selectNone = false, noresize = false, uppercase = false, disabled, invalid = false, showErrorColours = true, optional = false, leftIcon, rightIcon, onLeftIconClick, onRightIconClick, rows = 4, textAreaRef = $bindable(), autocomplete, spellcheck, onblur, onfocus, onkeydown, oninput } = $props();
 const isInvalid = $derived(showErrorColours && (required && value.trim() === "" || invalid));
-</script>
-
-<label
-	class:for-modal={variant === InputVariant.Modal}
-	class:max-width={maxWidth}
->
-	{#if labelTop && variant !== InputVariant.Modal}
-		<span
-			class="top-label"
-			class:for-default={variant === InputVariant.Default}
-			class:invalid={isInvalid}
-			>{labelTop}{#if optional}<i>&nbsp;- {i18n['scoria.label.optional']()}</i>{/if}</span
-		>
-		{#if variant === InputVariant.Default}
-			<span
-				aria-hidden="true"
-				class="border"
-				class:invalid={isInvalid}
-				>{labelTop}{#if optional}<i>&nbsp;- {i18n['scoria.label.optional']()}</i>{/if}</span
-			>
-		{/if}
-	{/if}
-	<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={cssLength('0.75rem')}
-				top={cssLength('50%')}
-				anchorX={cssLength('0')}
-				anchorY={cssLength('-50%')}
-				clickable={!!onLeftIconClick}
-				onclick={onLeftIconClick}
-			/>
-		{/if}
-		<!-- See the note on `dir` in TextInput.svelte — auto only while there is a value. -->
-		<textarea
-			class:noresize
-			class:uppercase
-			class:invalid={isInvalid}
-			class:select-none={selectNone}
-			class:left-pad={leftIcon != undefined}
-			class:right-pad={rightIcon != undefined}
-			class:for-default={variant === InputVariant.Default}
-			class:for-modal={variant == InputVariant.Modal}
-			class:max-width={maxWidth}
-			autocomplete={autocomplete ?? 'off'}
-			spellcheck={spellcheck ?? true}
-			dir={value ? 'auto' : null}
-			aria-invalid={isInvalid || undefined}
-			bind:value
-			{onblur}
-			{onfocus}
-			{onkeydown}
-			{oninput}
-			{rows}
-			bind:this={textAreaRef}
-			{placeholder}
-			{required}
-			{disabled}
-		></textarea>
-		{#if rightIcon}
-			<Icon
-				name={rightIcon.name}
-				size={rightIcon.size ?? Size.Medium}
-				colour={rightIcon.colour}
-				float
-				right={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
-				top={cssLength('50%')}
-				anchorX={cssLength('0')}
-				anchorY={cssLength('-50%')}
-				clickable={!!onRightIconClick}
-				onclick={onRightIconClick}
-			/>
-		{/if}
-		{#if labelRight}
-			<span
-				class="right-label"
-				class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
-			>
-		{/if}
-	</div>
-</label>
-
+</script>
+
+<label
+	class:for-modal={variant === InputVariant.Modal}
+	class:max-width={maxWidth}
+>
+	{#if labelTop && variant !== InputVariant.Modal}
+		<span
+			class="top-label"
+			class:for-default={variant === InputVariant.Default}
+			class:invalid={isInvalid}
+			>{labelTop}{#if optional}<i>&nbsp;- {i18n['scoria.label.optional']()}</i>{/if}</span
+		>
+		{#if variant === InputVariant.Default}
+			<span
+				aria-hidden="true"
+				class="border"
+				class:invalid={isInvalid}
+				>{labelTop}{#if optional}<i>&nbsp;- {i18n['scoria.label.optional']()}</i>{/if}</span
+			>
+		{/if}
+	{/if}
+	<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={cssLength('0.75rem')}
+				top={cssLength('50%')}
+				anchorX={cssLength('0')}
+				anchorY={cssLength('-50%')}
+				clickable={!!onLeftIconClick}
+				onclick={onLeftIconClick}
+			/>
+		{/if}
+		<!-- See the note on `dir` in TextInput.svelte — auto only while there is a value. -->
+		<textarea
+			class:noresize
+			class:uppercase
+			class:invalid={isInvalid}
+			class:select-none={selectNone}
+			class:left-pad={leftIcon != undefined}
+			class:right-pad={rightIcon != undefined}
+			class:for-default={variant === InputVariant.Default}
+			class:for-modal={variant == InputVariant.Modal}
+			class:max-width={maxWidth}
+			autocomplete={autocomplete ?? 'off'}
+			spellcheck={spellcheck ?? true}
+			dir={value ? 'auto' : null}
+			aria-invalid={isInvalid || undefined}
+			bind:value
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			{oninput}
+			{rows}
+			bind:this={textAreaRef}
+			{placeholder}
+			{required}
+			{disabled}
+		></textarea>
+		{#if rightIcon}
+			<Icon
+				name={rightIcon.name}
+				size={rightIcon.size ?? Size.Medium}
+				colour={rightIcon.colour}
+				float
+				right={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
+				top={cssLength('50%')}
+				anchorX={cssLength('0')}
+				anchorY={cssLength('-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%;
@@ -308,4 +308,4 @@ span.border.invalid {
 .textarea-error-wrapper.for-modal {
   position: relative;
   height: 100%;
-}</style>
+}</style>

package/dist/Components/TextInput.svelte

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { m as i18n } from "../paraglide/messages.js";
 import { cssLength, isValidEmailAddress } from "../Helpers/Helpers.svelte.js";
 import { Colour, ColourSet } from "../scss/colours.js";
@@ -9,131 +9,131 @@ import Action from "./Action.svelte";
 import Icon from "./Icon.svelte";
 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, leftIcon, rightIcon, type, onLeftIconClick, onRightIconClick, inputRef = $bindable(), "data-type": dataType, autocomplete, spellcheck, onblur, onfocus, onkeydown, oninput } = $props();
 const isInvalid = $derived(showErrorColours && !disabled && (required && (!value?.trim() || type == "email" && value.length >= 3 && value.includes("@") && !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;- {i18n['scoria.label.optional']()}</i>{/if}</span
-			>
-			{#if variant === InputVariant.Default}
-				<span
-					aria-hidden="true"
-					class="border"
-					class:invalid={isInvalid}
-					>{labelTop}{#if optional}<i>&nbsp;- {i18n['scoria.label.optional']()}</i>{/if}</span
-				>
-			{/if}
-		{/if}
-		<div
-			class="icon-container"
-			class:for-modal={variant == InputVariant.Modal}
-		>
-			{#if leftIcon}
-				{#if onLeftIconClick}
-					<div class="left-icon">
-						<Action
-							noTabIndex
-							colourSet={ColourSet.Auxiliary}
-							icon={leftIcon}
-							size={Size.Medium}
-							onclick={onLeftIconClick}
-						/>
-					</div>
-				{:else}
-					<Icon
-						name={leftIcon.name}
-						size={leftIcon.size ?? Size.Medium}
-						colour={leftIcon.colour}
-						float
-						left={cssLength('0.75rem')}
-						top={cssLength('50%')}
-						anchorX={cssLength('0')}
-						anchorY={cssLength('-50%')}
-					/>
-				{/if}
-			{/if}
-			<!--
-				`dir="auto"` lets the field follow what is actually typed: the caret
-				sits at the RTL edge under an RTL locale, then flips to LTR the moment
-				the first strong Latin character lands.
-
-				It is applied only while there IS a value. HTML resolves `dir="auto"`
-				on an EMPTY form control to `ltr` rather than to the inherited
-				direction, so applying it unconditionally would park the caret — and
-				a translated placeholder — on the wrong edge of every empty field.
-			-->
-			<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'}
-				dir={value ? 'auto' : null}
-				autocomplete={autocomplete ?? (type === 'email' ? 'email' : 'off')}
-				spellcheck={spellcheck ?? false}
-				aria-invalid={isInvalid || undefined}
-				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={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
-							top={cssLength('50%')}
-							anchorX={cssLength('0')}
-							anchorY={cssLength('-50%')}
-						/>
-					{/if}
-				</div>
-			{/if}
-			{#if labelRight}
-				<span
-					class="right-label"
-					class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
-				>
-			{/if}
-		</div>
-	</label>
-</div>
-
+</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;- {i18n['scoria.label.optional']()}</i>{/if}</span
+			>
+			{#if variant === InputVariant.Default}
+				<span
+					aria-hidden="true"
+					class="border"
+					class:invalid={isInvalid}
+					>{labelTop}{#if optional}<i>&nbsp;- {i18n['scoria.label.optional']()}</i>{/if}</span
+				>
+			{/if}
+		{/if}
+		<div
+			class="icon-container"
+			class:for-modal={variant == InputVariant.Modal}
+		>
+			{#if leftIcon}
+				{#if onLeftIconClick}
+					<div class="left-icon">
+						<Action
+							noTabIndex
+							colourSet={ColourSet.Auxiliary}
+							icon={leftIcon}
+							size={Size.Medium}
+							onclick={onLeftIconClick}
+						/>
+					</div>
+				{:else}
+					<Icon
+						name={leftIcon.name}
+						size={leftIcon.size ?? Size.Medium}
+						colour={leftIcon.colour}
+						float
+						left={cssLength('0.75rem')}
+						top={cssLength('50%')}
+						anchorX={cssLength('0')}
+						anchorY={cssLength('-50%')}
+					/>
+				{/if}
+			{/if}
+			<!--
+				`dir="auto"` lets the field follow what is actually typed: the caret
+				sits at the RTL edge under an RTL locale, then flips to LTR the moment
+				the first strong Latin character lands.
+
+				It is applied only while there IS a value. HTML resolves `dir="auto"`
+				on an EMPTY form control to `ltr` rather than to the inherited
+				direction, so applying it unconditionally would park the caret — and
+				a translated placeholder — on the wrong edge of every empty field.
+			-->
+			<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'}
+				dir={value ? 'auto' : null}
+				autocomplete={autocomplete ?? (type === 'email' ? 'email' : 'off')}
+				spellcheck={spellcheck ?? false}
+				aria-invalid={isInvalid || undefined}
+				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={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
+							top={cssLength('50%')}
+							anchorX={cssLength('0')}
+							anchorY={cssLength('-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%;
@@ -365,4 +365,4 @@ label.for-table input {
 
 td {
   --input-border: none;
-}</style>
+}</style>