@lavalogic/scoria 0.0.1

package/dist/Components/TextInput.svelte

@@ -0,0 +1,407 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import type { FormEventHandler } from 'svelte/elements';
+	import type { PartialIconProps } from './Icon.svelte';
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Icon from './Icon.svelte';
+	import { Colour, ColourSet } from '../scss/colours.js';
+	import Action from './Action.svelte';
+	import { isValidEmailAddress } from '../Helpers/Helpers.svelte.js';
+
+	export interface TextInputProps {
+		value?: string | null;
+
+		type?: 'text' | 'tel' | 'email';
+		optional?: boolean;
+		id?: string;
+		labelTop?: string | undefined;
+		labelRight?: string | undefined;
+		placeholder?: string | undefined;
+		required?: boolean;
+		variant?: InputVariant;
+		selectNone?: boolean;
+		uppercase?: boolean;
+		disabled?: boolean;
+		invalid?: boolean;
+		showErrorColours?: boolean;
+		leftIcon?: PartialIconProps;
+		rightIcon?: PartialIconProps;
+		leftIconDisabled?: boolean;
+		rightIconDisabled?: boolean;
+		onLeftIconClick?: () => void;
+		onRightIconClick?: () => void;
+		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(''),
+		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%;
+  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;
+}
+
+td {
+  --input-border: none;
+}</style>

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

@@ -0,0 +1,34 @@
+import type { FormEventHandler } from 'svelte/elements';
+import type { PartialIconProps } from './Icon.svelte';
+import { InputVariant } from '../Types/Internal/InputVariant.js';
+export interface TextInputProps {
+    value?: string | null;
+    type?: 'text' | 'tel' | 'email';
+    optional?: boolean;
+    id?: string;
+    labelTop?: string | undefined;
+    labelRight?: string | undefined;
+    placeholder?: string | undefined;
+    required?: boolean;
+    variant?: InputVariant;
+    selectNone?: boolean;
+    uppercase?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    showErrorColours?: boolean;
+    leftIcon?: PartialIconProps;
+    rightIcon?: PartialIconProps;
+    leftIconDisabled?: boolean;
+    rightIconDisabled?: boolean;
+    onLeftIconClick?: () => void;
+    onRightIconClick?: () => void;
+    inputRef?: HTMLInputElement | undefined;
+    'data-type'?: string;
+    onblur?: (e: FocusEvent) => void;
+    onfocus?: (e: FocusEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    oninput?: FormEventHandler<HTMLInputElement>;
+}
+declare const TextInput: import("svelte").Component<TextInputProps, {}, "value" | "inputRef">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;

package/dist/Components/ThreeStateRadio.svelte

@@ -0,0 +1,202 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import type { ChangeEventHandler } from 'svelte/elements';
+	import Action from './Action.svelte';
+	import { untrack } from 'svelte';
+	import { generateShortUUID } from '../Helpers/Helpers.svelte.js';
+	import { Colour, ColourSet } from '../scss/colours.js';
+	import { Ternary } from '../Types/Internal/Ternary.js';
+	export interface ThreeStateRadioProps {
+		label: string;
+		value: Ternary;
+		onchange?: ChangeEventHandler<HTMLInputElement>;
+		id?: string;
+		disabled?: boolean;
+		isValid?: boolean;
+		noDisabled?: boolean;
+		yesDisabled?: boolean;
+		neutralDisabled?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(),
+		id = generateShortUUID(),
+		label,
+		disabled,
+		isValid,
+		onchange,
+		noDisabled = false,
+		yesDisabled = false,
+		neutralDisabled = false
+	}: ThreeStateRadioProps = $props();
+
+	let ref: HTMLInputElement | undefined = $state();
+
+	let textValue = $state('');
+
+	$effect(() => {
+		void value;
+		untrack(() => {
+			if (value === Ternary.False && textValue !== '0') {
+				textValue = '0';
+			} else if (value === Ternary.Neutral && textValue !== '-1') {
+				textValue = '-1';
+			} else if (value === Ternary.True && textValue !== '1') {
+				textValue = '1';
+			}
+		});
+	});
+
+	$effect(() => {
+		void textValue;
+		untrack(() => {
+			if (textValue === '0' && value !== Ternary.False) {
+				value = Ternary.False;
+			} else if (textValue === '-1' && value !== Ternary.Neutral) {
+				value = Ternary.Neutral;
+			} else if (textValue === '1' && value !== Ternary.True) {
+				value = Ternary.True;
+			}
+		});
+	});
+</script>
+
+<div class="text-label" class:invalid={isValid === false}>
+	<span>{label}</span>
+
+	<div class="radios">
+		<label>
+			<Action
+				disabled={disabled || noDisabled}
+				colourSet={value === Ternary.False ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'circle-cross',
+					colour: value === Ternary.False ? undefined : Colour['$ui-blue-5']
+				}}
+				label="No"
+				onclick={() => {
+					textValue = '0';
+				}}
+			/>
+			<input disabled={disabled || noDisabled} type="radio" bind:group={textValue} value="0" />
+		</label>
+		<label>
+			<Action
+				disabled={disabled || neutralDisabled}
+				colourSet={value === Ternary.Neutral ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'database',
+					colour: value === Ternary.Neutral ? undefined : Colour['$ui-blue-5']
+				}}
+				label="Allow system to decide"
+				onclick={() => {
+					textValue = '-1';
+				}}
+			/>
+			<input
+				disabled={disabled || neutralDisabled}
+				type="radio"
+				bind:group={textValue}
+				value="-1"
+			/>
+		</label>
+		<label>
+			<Action
+				disabled={disabled || yesDisabled}
+				colourSet={value === Ternary.True ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'circle-tick',
+					colour: value === Ternary.True ? undefined : Colour['$ui-blue-5']
+				}}
+				label="Yes"
+				onclick={() => {
+					textValue = '1';
+				}}
+			/>
+			<input disabled={disabled || yesDisabled} type="radio" bind:group={textValue} value="1" />
+		</label>
+	</div>
+</div>
+
+<style>.text-label {
+  height: max(var(--input-height, 3rem), 2rem);
+  width: var(--input-width, 100%);
+  color: #3a4952;
+  border: none;
+  font: inherit;
+  outline: inherit;
+  display: flex;
+  position: relative;
+  flex-flow: row nowrap;
+  background-color: white;
+  border: solid 1px #cbd4da;
+  font-size: 1rem;
+  align-items: center;
+  border-radius: 4px;
+  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;
+}
+.text-label .radios {
+  display: flex;
+  flex-flow: row nowrap;
+  height: 100%;
+  align-items: center;
+}
+.text-label .radios > label {
+  cursor: pointer;
+  display: flex;
+  flex-flow: row nowrap;
+  height: 100%;
+  align-items: center;
+  --border-radius: 3px;
+  padding: 0.375rem;
+  padding-left: 0.375rem;
+  border-left: solid 1px #cbd4da;
+}
+.text-label .radios > label:not(:first-child) {
+  border-left: solid 2px #cbd4da;
+  border-left-style: dotted;
+}
+.text-label.invalid {
+  background-color: #f9e9e9;
+  border-color: #aa1414;
+  color: #aa1414;
+}
+.text-label.invalid:focus-within {
+  outline: solid 1px #aa1414;
+}
+.text-label span {
+  flex-grow: 1;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  text-align: start;
+}
+.text-label:disabled {
+  color: #647d8e;
+  background-color: #f4f7f9;
+  cursor: default;
+}
+.text-label:disabled .switch {
+  background-color: #f4f7f9;
+}
+.text-label:disabled .switch .switch-inner.on {
+  background-color: #647d8e;
+}
+.text-label:disabled .switch .switch-inner:not(.on) {
+  border-color: #647d8e;
+}
+.text-label:not([disabled]):hover .switch-inner.on {
+  background-color: #1f81a0;
+}
+.text-label:not([disabled]):hover .switch-inner:not(.on) {
+  border-color: #3a4952;
+}
+.text-label:not([disabled]):hover .track:not(.on) {
+  background-color: #3a4952;
+}
+
+input {
+  display: none;
+}</style>

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

@@ -0,0 +1,16 @@
+import type { ChangeEventHandler } from 'svelte/elements';
+import { Ternary } from '../Types/Internal/Ternary.js';
+export interface ThreeStateRadioProps {
+    label: string;
+    value: Ternary;
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+    id?: string;
+    disabled?: boolean;
+    isValid?: boolean;
+    noDisabled?: boolean;
+    yesDisabled?: boolean;
+    neutralDisabled?: boolean;
+}
+declare const ThreeStateRadio: import("svelte").Component<ThreeStateRadioProps, {}, "value">;
+type ThreeStateRadio = ReturnType<typeof ThreeStateRadio>;
+export default ThreeStateRadio;