@lavalogic/scoria 0.0.1

package/dist/Components/NumberInput.svelte

@@ -0,0 +1,407 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { Size } from '../Types/Internal/Size.js';
+	import Icon, { type PartialIconProps } from './Icon.svelte';
+	import type { FormEventHandler } from 'svelte/elements';
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+
+	export interface NumberInputProps {
+		value: number | null;
+
+		optional?: boolean;
+		id?: string | undefined;
+		min?: number | undefined;
+		max?: number | undefined;
+		labelTop?: string | undefined;
+		labelRight?: string | undefined;
+		placeholder?: string | undefined;
+		required?: boolean;
+		variant?: InputVariant;
+		decimal?: boolean;
+		invalid?: boolean;
+		showErrorColours?: boolean;
+		disabled?: boolean | undefined;
+		leftIcon?: PartialIconProps | undefined;
+		rightIcon?: PartialIconProps | undefined;
+		onLeftIconClick?: ((e: MouseEvent) => void) | undefined;
+		onRightIconClick?: ((e: MouseEvent) => void) | undefined;
+		inputRef?: HTMLInputElement | undefined;
+		'data-type'?: string;
+		onblur?: (e: FocusEvent) => void;
+		onfocus?: (e: FocusEvent) => void;
+		onkeydown?: (e: KeyboardEvent) => void;
+		oninput?: FormEventHandler<HTMLInputElement>;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		id,
+		value = $bindable(), // FIXME why is undefined allowed here?
+		min,
+		max,
+		labelTop,
+		labelRight,
+		placeholder,
+		required = false,
+		variant = InputVariant.Default,
+		decimal = false,
+		invalid = false,
+		showErrorColours = true,
+		disabled,
+		optional,
+		leftIcon,
+		rightIcon,
+		onLeftIconClick,
+		onRightIconClick,
+
+		onblur,
+		onfocus,
+		onkeydown,
+		oninput,
+
+		inputRef = $bindable(),
+		'data-type': dataType
+	}: NumberInputProps = $props();
+
+	function numberValidator(node: HTMLInputElement, newValue: number | null) {
+		return {
+			update(newValue: number) {
+				const underMinimum = min != undefined && min > newValue;
+				const overMaximum = max != undefined && max < newValue;
+
+				value = isNaN(newValue) ? 0 : underMinimum ? min! : overMaximum ? max! : newValue;
+			}
+		};
+	}
+
+	let isInvalid = $derived(
+		showErrorColours && ((required && (value == null || value.toString().trim() === '')) || 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}
+		<!-- 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}
+			<input
+				{id}
+				class:invalid={isInvalid}
+				class:for-default={variant === InputVariant.Default}
+				data-type={dataType}
+				use:numberValidator={value}
+				class:left-pad={leftIcon != undefined}
+				class:right-pad={rightIcon != undefined || (labelRight && variant == InputVariant.Modal)}
+				class:for-modal={variant == InputVariant.Modal}
+				type="number"
+				bind:value
+				{onblur}
+				{onfocus}
+				{onkeydown}
+				{oninput}
+				bind:this={inputRef}
+				{placeholder}
+				{required}
+				{disabled}
+				{min}
+				{max}
+				step={decimal ? 0.01 : 1}
+			/>
+			{#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 inset" class:for-modal={variant == InputVariant.Modal}
+					>{labelRight}</span
+				>
+			{/if}
+		</div>
+	</label>
+</div>
+
+<style>input {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  font-size: 0.9375rem;
+  font-weight: 400;
+  padding-top: var(--input-padding-top, 0.65rem);
+  padding-bottom: var(--input-padding-bottom, 0.55rem);
+  padding-left: var(--input-padding-left, 0.75rem);
+  padding-right: var(--input-padding-right, 0.75rem);
+  border: var(--input-border, solid 1px #cbd4da);
+  color: #3a4952;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+  border-radius: var(--input-border-radius, 4px);
+}
+input:disabled {
+  background-color: #f4f7f9;
+}
+input.for-default:focus-visible {
+  outline-offset: -1px;
+  outline-width: 1px;
+}
+input.invalid {
+  border-color: #aa1414;
+  color: #aa1414;
+  background-color: #f9e9e9;
+}
+input.invalid:focus, input.invalid:focus-visible {
+  outline-color: #aa1414 !important;
+}
+
+span {
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+}
+
+span.right-label.inset {
+  user-select: none;
+  font-size: 1rem;
+  font-weight: 500;
+  position: absolute;
+  background-color: #f4f7f9;
+  border-left: solid 1px #cbd4da;
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+  border-radius: 0 4px 4px 0;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  aspect-ratio: 1/1;
+  align-content: center;
+  text-align: center;
+}
+
+span.right-label {
+  color: #46525b;
+  display: inline;
+  flex-basis: 2rem;
+}
+span.right-label.for-modal {
+  align-self: center;
+  margin-top: 1rem;
+}
+
+span.for-default {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.9375rem;
+  user-select: none;
+  padding-left: 0.4rem;
+  padding-right: 0.4rem;
+  padding: 0.1rem 0.4rem;
+  top: -0.6rem;
+  z-index: 2;
+  color: #647d8e;
+  white-space: nowrap;
+}
+span.for-default.invalid {
+  color: #aa1414;
+}
+
+span.border {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.9375rem;
+  user-select: none;
+  padding-left: 0.4rem;
+  padding-right: 0.4rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  z-index: 1;
+  white-space: nowrap;
+  top: 0%;
+  height: 0;
+  color: transparent;
+  border-bottom: solid 1px #ffffff;
+}
+span.border.invalid {
+  border-bottom-color: #f9e9e9;
+}
+
+.select-none {
+  user-select: none;
+}
+
+.left-pad {
+  padding-left: 3rem;
+}
+
+.right-pad {
+  padding-right: 3rem;
+}
+
+.icon-container {
+  position: relative;
+  display: flex;
+  flex-flow: row;
+  width: 100%;
+  height: 100%;
+  gap: 1.5rem;
+}
+.icon-container.for-modal {
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.error {
+  color: #aa1414;
+  margin-left: 0.25rem;
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.right-icon {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  translate: 0 -50%;
+}
+
+label {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.error-wrapper {
+  display: block;
+  height: max(var(--input-height, 3rem));
+  width: var(--input-width, 100%);
+}
+.error-wrapper.for-table {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.error-wrapper.for-modal {
+  flex: unset;
+  position: relative;
+  height: 4.17rem;
+}
+
+label.for-modal {
+  box-sizing: border-box;
+  font-size: 1.5rem;
+  position: relative;
+  display: block;
+  width: 100%;
+}
+label.for-modal span.top-label {
+  color: #647d8e;
+  --colour: #8096a5;
+  font-size: 0.9375rem;
+  z-index: 1;
+  position: absolute;
+  top: 0.45rem;
+  left: 0.75rem;
+}
+label.for-modal span.top-label.invalid {
+  color: #aa1414;
+}
+label.for-modal input {
+  font-size: 2rem;
+  box-sizing: border-box;
+  flex-grow: 1;
+}
+label.for-modal input.uppercase {
+  text-transform: uppercase;
+}
+label.for-modal input:focus {
+  outline-color: #1f81a0;
+}
+label.for-modal input.for-modal {
+  border-radius: 0;
+  height: 100%;
+  resize: none;
+  padding-top: 1.44rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.75rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+label.for-modal input.for-modal.left-pad {
+  padding-left: 3.5rem;
+}
+label.for-modal input.for-modal.right-pad {
+  padding-right: 3.5rem;
+}
+label.for-modal input {
+  height: 3rem;
+}
+
+label.for-table {
+  display: flex;
+  width: 100%;
+}
+label.for-table input {
+  height: unset;
+}
+
+input[type=number] {
+  appearance: textfield;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+}</style>

package/dist/Components/NumberInput.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type PartialIconProps } from './Icon.svelte';
+import type { FormEventHandler } from 'svelte/elements';
+import { InputVariant } from '../Types/Internal/InputVariant.js';
+export interface NumberInputProps {
+    value: number | null;
+    optional?: boolean;
+    id?: string | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    labelTop?: string | undefined;
+    labelRight?: string | undefined;
+    placeholder?: string | undefined;
+    required?: boolean;
+    variant?: InputVariant;
+    decimal?: boolean;
+    invalid?: boolean;
+    showErrorColours?: boolean;
+    disabled?: boolean | undefined;
+    leftIcon?: PartialIconProps | undefined;
+    rightIcon?: PartialIconProps | undefined;
+    onLeftIconClick?: ((e: MouseEvent) => void) | undefined;
+    onRightIconClick?: ((e: MouseEvent) => void) | undefined;
+    inputRef?: HTMLInputElement | undefined;
+    'data-type'?: string;
+    onblur?: (e: FocusEvent) => void;
+    onfocus?: (e: FocusEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    oninput?: FormEventHandler<HTMLInputElement>;
+}
+declare const NumberInput: import("svelte").Component<NumberInputProps, {}, "value" | "inputRef">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;