@lavalogic/scoria 0.0.1

package/dist/Components/Touch/BoolCard.svelte

@@ -0,0 +1,180 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { Colour } from '../../scss/colours.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import type { Snippet } from 'svelte';
+	import Icon, { type IconProps } from '../Icon.svelte';
+
+	export interface BoolCardProps {
+		value?: boolean;
+		disabled?: boolean | undefined;
+		onclick?: (e: MouseEvent) => void;
+		children?: Snippet;
+		nowidth?: boolean;
+		size?: Size;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(false),
+		disabled,
+		onclick,
+		children,
+		nowidth,
+		size = Size.Medium
+	}: BoolCardProps = $props();
+
+	const iconName = $derived(value === true ? 'circle-tick' : ('circle' as IconProps['name']));
+</script>
+
+<button
+	class:small={size == Size.Small}
+	onkeydown={passthrough}
+	disabled={disabled || undefined}
+	class:nowidth
+	type="button"
+	class="card"
+	class:ticked={value}
+	{onclick}
+>
+	{#if children}
+		<span class="value" class:small={size == Size.Small}>{@render children()}</span>{/if}<Icon
+		name={iconName}
+		size={Size.DoubleXLarge}
+		colour={value ? Colour['$ui-white'] : undefined}
+	/>
+</button>
+
+<style>button.card {
+  color: #3a4952;
+  fill: #3a4952;
+  padding: var(--padding-size, 0.76rem);
+  border-radius: var(--border-radius, 0);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  border: solid 1px #cbd4da;
+  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;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  align-items: stretch;
+  cursor: pointer;
+}
+button.card:disabled {
+  background-color: var(--background-colour, #e9ecf1);
+  color: #8096a5;
+  --colour: #8096a5;
+  cursor: default;
+}
+button.card:not([disabled]):hover {
+  background-color: var(--hover-background-colour, rgba(0, 0, 0, 0.1));
+  --background-colour: var(--hover-background-colour, colours.$transparent-10) !important;
+}
+button.card:not([disabled]):focus, button.card:not([disabled]):focus-visible {
+  outline: solid 1px #1f81a0;
+}
+button.card:not([disabled]).ticked, button.card:not([disabled]).primary {
+  color: #ffffff;
+  background-color: var(--background-colour, #259fc7);
+  border-color: var(--border-colour, #259fc7);
+}
+button.card:not([disabled]).ticked:focus, button.card:not([disabled]).ticked:focus-visible, button.card:not([disabled]).primary:focus, button.card:not([disabled]).primary:focus-visible {
+  outline-color: #259fc7;
+}
+button.card:not([disabled]).ticked:hover, button.card:not([disabled]).primary:hover {
+  background-color: var(--hover-background-colour, #1f81a0);
+}
+button.card * {
+  user-select: none;
+}
+button.card {
+  border-radius: unset;
+  min-height: 68px;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  text-align: start;
+  display: flex;
+  flex-flow: row nowrap;
+}
+button.card .left {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: space-between;
+  flex-grow: 1;
+  overflow: hidden;
+}
+button.card .right {
+  display: flex;
+  align-items: center;
+}
+button.card .row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  flex-grow: 1;
+}
+button.card.pad-right {
+  padding-right: 4rem;
+}
+button.card .card-label {
+  color: #647d8e;
+  --colour: #8096a5;
+  font-size: 0.9375rem;
+}
+button.card .value {
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+button.card.error {
+  background-color: #f9e9e9;
+  border-color: #aa1414;
+  color: #aa1414;
+  --colour: #aa1414;
+}
+button.card.error .card-label {
+  color: #aa1414;
+}
+button.card {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 1.5rem;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  text-align: start;
+  background-color: #ffffff;
+}
+button.card.nowidth {
+  width: unset;
+}
+button.card.small {
+  min-height: unset;
+}
+button.card .value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: stretch;
+  flex-grow: 1;
+  font-size: 1.25rem;
+  font-weight: 600;
+  padding: 0.375rem;
+}
+button.card .value.small {
+  font-size: 1.16rem;
+  font-weight: 600;
+  padding: 0;
+}</style>

package/dist/Components/Touch/BoolCard.svelte.d.ts

@@ -0,0 +1,13 @@
+import { Size } from '../../Types/Internal/Size.js';
+import type { Snippet } from 'svelte';
+export interface BoolCardProps {
+    value?: boolean;
+    disabled?: boolean | undefined;
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+    nowidth?: boolean;
+    size?: Size;
+}
+declare const BoolCard: import("svelte").Component<BoolCardProps, {}, "value">;
+type BoolCard = ReturnType<typeof BoolCard>;
+export default BoolCard;

package/dist/Components/Touch/DateModal.svelte

@@ -0,0 +1,256 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { tick, type Snippet } from 'svelte';
+	import { dev } from '$app/environment';
+	import TouchModal from './TouchModal.svelte';
+	import { passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { 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 DatePicker from '../DatePicker.svelte';
+	import TextInput from '../TextInput.svelte';
+
+	export interface DateModalProps {
+		header: string;
+		value?: Date | null;
+		cancelEditing: () => void;
+		confirm: (value: Date, overrideValue?: Date) => void;
+		namedMonths?: boolean;
+		validate?: (value: Date | undefined) => boolean;
+		showScanner?: boolean;
+		scanValue?: string;
+		overrideScanValue?: string;
+		confirmScannedValue?: (value: string, overrideValue?: string) => void;
+		inclusive?: boolean;
+		explanation?: Snippet;
+		allowOverride?: boolean;
+		showTime?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		header,
+		value,
+		cancelEditing,
+		confirm,
+		namedMonths = false,
+		validate,
+		showScanner = false,
+		scanValue = $bindable(''),
+		overrideScanValue = $bindable(''),
+		confirmScannedValue,
+		inclusive = false,
+		explanation,
+		allowOverride = false,
+		showTime = false
+	}: DateModalProps = $props();
+
+	let valueSnapshot = $state(value);
+	let tempValue = $state(value ?? new Date());
+	let overrideValue = $state(new Date());
+	let isBeingEdited = $state(false);
+	let inputRef: HTMLInputElement | undefined = $state();
+	let overrideInputRef: HTMLInputElement | undefined = $state();
+	const isValid = $derived(validate?.(tempValue) ?? true);
+
+	export function resetIsBeingEdited() {
+		isBeingEdited = false;
+	}
+
+	$effect(() => {
+		if (value && value !== valueSnapshot) {
+			valueSnapshot = value;
+			tempValue = value;
+			isBeingEdited = false;
+		}
+	});
+
+	$effect(() => {
+		void isBeingEdited;
+		void allowOverride;
+		tick().then(() => {
+			if (isBeingEdited) {
+				overrideInputRef?.focus();
+			} else {
+				inputRef?.focus();
+			}
+		});
+	});
+
+	function onsubmit(e?: SubmitEvent) {
+		e?.preventDefault();
+
+		if (isValid) {
+			if (inclusive) {
+				tempValue.setHours(23, 59, 59);
+				console.log(tempValue);
+			}
+
+			confirm(tempValue, allowOverride && isBeingEdited ? overrideValue : undefined);
+		}
+
+		scanValue = '';
+	}
+
+	function submitOnEnter(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			e.stopPropagation();
+
+			if (!scanValue || (isBeingEdited && !overrideScanValue)) {
+				if (
+					allowOverride &&
+					isBeingEdited &&
+					!overrideScanValue &&
+					document.activeElement != inputRef
+				) {
+					overrideInputRef?.focus();
+				} else {
+					inputRef?.focus();
+				}
+
+				return;
+			}
+
+			confirmScannedValue?.(
+				scanValue,
+				allowOverride && isBeingEdited ? overrideScanValue : undefined
+			);
+			scanValue = '';
+		}
+	}
+</script>
+
+<!-- mandatory -->
+
+<TouchModal
+	onclose={() => {
+		cancelEditing();
+	}}
+	{header}
+	{onsubmit}
+	{explanation}
+>
+	{#if showScanner}
+		<div class="inputs">
+			{#if allowOverride}
+				{@render overrideButton()}
+			{/if}
+			{#if isBeingEdited}
+				<TextInput
+					bind:inputRef={overrideInputRef}
+					bind:value={overrideScanValue}
+					variant={InputVariant.Modal}
+					labelTop="Scan Barcode to Override"
+					onkeydown={submitOnEnter}
+				/>
+			{/if}
+			<TextInput
+				bind:inputRef
+				bind:value={scanValue}
+				variant={InputVariant.Modal}
+				labelTop="Scan Barcode"
+				onkeydown={submitOnEnter}
+			/>
+		</div>
+	{:else if allowOverride}
+		{@render overrideButton()}
+	{/if}
+
+	<div class="inputs">
+		{#if allowOverride && isBeingEdited}
+			<DatePicker {showTime} {onsubmit} {namedMonths} bind:date={overrideValue} />
+		{/if}
+		<DatePicker {showTime} {onsubmit} {namedMonths} bind:date={tempValue} />
+	</div>
+
+	{#snippet footer()}
+		<div class="modal-footer">
+			<button onkeydown={passthrough} type="submit" disabled={!isValid}>Confirm</button>
+			<button onkeydown={passthrough} type="button" onclick={() => cancelEditing()}>Cancel</button>
+		</div>
+	{/snippet}
+</TouchModal>
+
+{#snippet overrideButton()}
+	<div>
+		<Action
+			icon={{ name: 'edit' }}
+			size={Size.DoubleXLarge}
+			colourSet={isBeingEdited ? ColourSet.Primary : ColourSet.Secondary}
+			onclick={() => {
+				if (!allowOverride) {
+					if (dev) {
+						// eslint-disable-next-line no-debugger
+						debugger;
+					}
+					return;
+				}
+				isBeingEdited = !isBeingEdited;
+			}}
+		/>
+	</div>
+{/snippet}
+
+<style>.modal-footer {
+  bottom: 0;
+  border-top: solid 1px #cbd4da;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row-reverse wrap;
+  justify-content: space-between;
+  padding: 1.5rem;
+  gap: 2rem;
+}
+.modal-footer button {
+  padding: 1rem 2rem;
+  border-width: 2px;
+}
+
+button {
+  color: #3a4952;
+  fill: #3a4952;
+  padding: var(--padding-size, 0.76rem);
+  border-radius: var(--border-radius, 0);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  border: solid 1px #cbd4da;
+  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;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  align-items: stretch;
+  cursor: pointer;
+}
+button:disabled {
+  background-color: var(--background-colour, #e9ecf1);
+  color: #8096a5;
+  --colour: #8096a5;
+  cursor: default;
+}
+button:not([disabled]):hover {
+  background-color: var(--hover-background-colour, rgba(0, 0, 0, 0.1));
+  --background-colour: var(--hover-background-colour, colours.$transparent-10) !important;
+}
+button:not([disabled]):focus, button:not([disabled]):focus-visible {
+  outline: solid 1px #1f81a0;
+}
+button {
+  padding: 1.5rem;
+  font-size: 1.5rem;
+  display: block;
+  border-width: 2px;
+  border-radius: 4px;
+}
+
+div.inputs {
+  margin-bottom: 1rem;
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 1.5rem;
+  justify-content: space-around;
+}</style>

package/dist/Components/Touch/DateModal.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type Snippet } from 'svelte';
+export interface DateModalProps {
+    header: string;
+    value?: Date | null;
+    cancelEditing: () => void;
+    confirm: (value: Date, overrideValue?: Date) => void;
+    namedMonths?: boolean;
+    validate?: (value: Date | undefined) => boolean;
+    showScanner?: boolean;
+    scanValue?: string;
+    overrideScanValue?: string;
+    confirmScannedValue?: (value: string, overrideValue?: string) => void;
+    inclusive?: boolean;
+    explanation?: Snippet;
+    allowOverride?: boolean;
+    showTime?: boolean;
+}
+declare const DateModal: import("svelte").Component<DateModalProps, {
+    resetIsBeingEdited: () => void;
+}, "scanValue" | "overrideScanValue">;
+type DateModal = ReturnType<typeof DateModal>;
+export default DateModal;

package/dist/Components/Touch/EditCard.svelte

@@ -0,0 +1,223 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import type { Snippet } from 'svelte';
+	import Icon, { type PartialIconProps } from '../Icon.svelte';
+
+	export interface EditCardProps {
+		noborder?: boolean;
+		desktop?: boolean;
+		label?: string;
+		iconName?: PartialIconProps['name'] | null; //TODO type
+		disabled?: boolean;
+		error?: boolean;
+		onclick?: (e: MouseEvent) => void;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	const {
+		noborder,
+		label,
+		desktop = false,
+		iconName = 'edit',
+		disabled = false,
+		error = false,
+		onclick,
+		children
+	}: EditCardProps = $props();
+</script>
+
+<button
+	type="button"
+	class="card"
+	class:desktop
+	class:error
+	class:noborder
+	{disabled}
+	{onclick}
+	onkeydown={passthrough}
+>
+	<div class="left">
+		{#if label}
+			<div class="row">
+				<span class="card-label label">{label}</span>
+				{#if desktop}
+					<span class="card-label border">{label}</span>
+				{/if}
+			</div>
+		{/if}
+		<div class="row" class:labelless={!label}>
+			{#if children}
+				<span class="value">{@render children()}</span>
+			{/if}
+		</div>
+	</div>
+	<div class="right">
+		{#if iconName}
+			<Icon name={iconName} size={desktop ? Size.Medium : Size.XLarge} />
+		{/if}
+	</div>
+</button>
+
+<style>.card {
+  color: #3a4952;
+  fill: #3a4952;
+  padding: var(--padding-size, 0.76rem);
+  border-radius: var(--border-radius, 0);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  border: solid 1px #cbd4da;
+  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;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  align-items: stretch;
+  cursor: pointer;
+}
+.card:disabled {
+  background-color: var(--background-colour, #e9ecf1);
+  color: #8096a5;
+  --colour: #8096a5;
+  cursor: default;
+}
+.card:not([disabled]):hover {
+  background-color: var(--hover-background-colour, rgba(0, 0, 0, 0.1));
+  --background-colour: var(--hover-background-colour, colours.$transparent-10) !important;
+}
+.card:not([disabled]):focus, .card:not([disabled]):focus-visible {
+  outline: solid 1px #1f81a0;
+}
+.card:not([disabled]).ticked, .card:not([disabled]).primary {
+  color: #ffffff;
+  background-color: var(--background-colour, #259fc7);
+  border-color: var(--border-colour, #259fc7);
+}
+.card:not([disabled]).ticked:focus, .card:not([disabled]).ticked:focus-visible, .card:not([disabled]).primary:focus, .card:not([disabled]).primary:focus-visible {
+  outline-color: #259fc7;
+}
+.card:not([disabled]).ticked:hover, .card:not([disabled]).primary:hover {
+  background-color: var(--hover-background-colour, #1f81a0);
+}
+.card * {
+  user-select: none;
+}
+.card {
+  border-radius: unset;
+  min-height: 68px;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  text-align: start;
+  display: flex;
+  flex-flow: row nowrap;
+}
+.card .left {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: space-between;
+  flex-grow: 1;
+  overflow: hidden;
+}
+.card .right {
+  display: flex;
+  align-items: center;
+}
+.card .row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  flex-grow: 1;
+}
+.card.pad-right {
+  padding-right: 4rem;
+}
+.card .card-label {
+  color: #647d8e;
+  --colour: #8096a5;
+  font-size: 0.9375rem;
+}
+.card .value {
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+.card.error {
+  background-color: #f9e9e9;
+  border-color: #aa1414;
+  color: #aa1414;
+  --colour: #aa1414;
+}
+.card.error .card-label {
+  color: #aa1414;
+}
+.card.noborder {
+  border: none;
+}
+.card.desktop {
+  min-height: unset;
+  padding-top: 0;
+  padding-bottom: 0;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  height: max(var(--input-height, 3rem), 2rem);
+  width: var(--input-width, 100%);
+  border-radius: 4px;
+  outline-offset: -1px;
+}
+.card.desktop .value {
+  margin-top: 0;
+  font-weight: 400;
+  font-size: 0.9rem;
+}
+.card.desktop .card-label.label {
+  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;
+}
+.card.desktop .card-label.label.invalid {
+  color: #aa1414;
+}
+.card.desktop .card-label.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;
+}
+.card.desktop .card-label.border.invalid {
+  border-bottom-color: #f9e9e9;
+}
+.card.desktop .card-label.border {
+  top: -1px;
+}
+.card .labelless {
+  padding: 0.75rem;
+}</style>

package/dist/Components/Touch/EditCard.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import { type PartialIconProps } from '../Icon.svelte';
+export interface EditCardProps {
+    noborder?: boolean;
+    desktop?: boolean;
+    label?: string;
+    iconName?: PartialIconProps['name'] | null;
+    disabled?: boolean;
+    error?: boolean;
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+}
+declare const EditCard: import("svelte").Component<EditCardProps, {}, "">;
+type EditCard = ReturnType<typeof EditCard>;
+export default EditCard;