@lavalogic/scoria 0.0.1

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

@@ -0,0 +1,22 @@
+export interface TextModalProps {
+    header: string;
+    cancelEditing: () => void;
+    confirm: (value: string) => void;
+    width?: string;
+    minWidth?: string;
+    staticWidth?: boolean;
+    minHeight?: string;
+    height?: string;
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    uppercase?: boolean;
+    inputRef?: HTMLInputElement | undefined;
+    isValid?: boolean | ((value: string) => boolean | Promise<boolean>);
+    mandatory?: boolean;
+    explanation?: Snippet;
+}
+import { type Snippet } from 'svelte';
+declare const TextModal: import("svelte").Component<TextModalProps, {}, "value" | "inputRef">;
+type TextModal = ReturnType<typeof TextModal>;
+export default TextModal;

package/dist/Components/Touch/TouchCard.svelte

@@ -0,0 +1,169 @@
+<script lang="ts" module>
+	import { Colour } from '../../scss/colours.js';
+	import type { Snippet } from 'svelte';
+	import Action from '../Action.svelte';
+
+	export interface TouchCardProps {
+		children: Snippet;
+		additionalButtons?: Snippet;
+		highlighted?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	let { children, additionalButtons, highlighted = $bindable(false) }: TouchCardProps = $props();
+</script>
+
+<div class="card" class:highlighted>
+	<div class="float-right">
+		{#if additionalButtons}
+			{@render additionalButtons()}
+		{/if}
+		<Action
+			icon={{
+				name: 'star-banner',
+				colour: highlighted ? Colour['$brand-primary'] : Colour['$ui-blue-4']
+			}}
+			backgroundColour={Colour['$transparent-0']}
+			label="Highlight Card"
+			onclick={() => {
+				highlighted = !highlighted;
+			}}
+		/>
+	</div>
+	{@render children()}
+</div>
+
+<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;
+}
+
+.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;
+  position: relative;
+  border: none;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
+  padding: 1rem;
+  gap: 0.5rem;
+  justify-content: space-between;
+}
+.card .float-right {
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin: 0.75rem;
+}
+.card {
+  border: solid 3px #cbd4da;
+  border-color: transparent;
+}
+.card.highlighted {
+  border-radius: 4px;
+  background-color: #edfaff;
+  border-color: #259fc7;
+  color: #259fc7;
+}
+.card.row {
+  flex-flow: row wrap;
+}
+.card .float.right {
+  position: absolute;
+  top: 0.375rem;
+  right: 0.375rem;
+}
+.card .left {
+  flex-grow: 1;
+  justify-content: flex-start;
+}
+.card .left,
+.card .right {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.375rem;
+}
+.card .row {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+.card h3 {
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.25rem;
+}
+.card .value {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+.card .value.large {
+  font-size: 1.75rem;
+}
+.card .value.xxlarge {
+  font-size: 3rem;
+}
+.card .title {
+  font-weight: 400;
+  font-size: 1rem;
+}
+.card .row {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.5rem;
+}
+.card .row.warning {
+  padding: 0.375rem 0.5rem;
+  margin-left: 0;
+  width: fit-content;
+}</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+export interface TouchCardProps {
+    children: Snippet;
+    additionalButtons?: Snippet;
+    highlighted?: boolean;
+}
+declare const TouchCard: import("svelte").Component<TouchCardProps, {}, "highlighted">;
+type TouchCard = ReturnType<typeof TouchCard>;
+export default TouchCard;

package/dist/Components/Touch/TouchModal.svelte

@@ -0,0 +1,516 @@
+<!-- eslint-disable prefer-const  -->
+<svelte:options runes />
+
+<script module lang="ts">
+	import { DATAMatrix } from '../../Helpers/Datamatrix.js';
+	import { passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { ColourSet } from '../../scss/colours.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import { type Snippet, onMount } from 'svelte';
+	import Action from '../Action.svelte';
+	import DataMatrixIcon from '../DataMatrixIcon.svelte';
+	import type { ButtonProp } from '../../Types/Internal/ButtonProp.js';
+
+	export interface DefaultTimer {
+		time: number;
+		action: 'submit' | 'close';
+		callback?: () => void;
+	}
+
+	export interface TouchModalProps {
+		header: string;
+		children: Snippet;
+		onclose?: () => void;
+
+		row?: boolean;
+		wrap?: boolean;
+		onsubmit?: (e: SubmitEvent) => void;
+		buttons?: ButtonProp[];
+		mandatory?: boolean;
+		staticHeight?: boolean;
+		staticWidth?: boolean;
+		minWidth?: string;
+		minHeight?: string;
+		width?: string;
+		height?: string;
+		onShowCallback?: () => void;
+		submitRef?: HTMLButtonElement | undefined;
+		defaultTimer?: DefaultTimer;
+		isValid?: boolean;
+		noscroll?: boolean;
+		headerExtra?: Snippet;
+		explanation?: Snippet | undefined;
+		footer?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		header,
+		buttons,
+		mandatory = false,
+		staticHeight = false,
+		staticWidth = false,
+		minWidth = '400px',
+		minHeight = '280px',
+		width,
+		height,
+		onShowCallback,
+		defaultTimer,
+		isValid = true,
+		noscroll = false,
+		onsubmit,
+		headerExtra,
+		explanation,
+		children,
+		footer,
+		onclose,
+		row,
+		wrap,
+		submitRef = $bindable()
+	}: TouchModalProps = $props();
+
+	let dialog: HTMLDialogElement;
+	let form: HTMLFormElement;
+	let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
+	let paused = $state(false);
+
+	$effect(() => {
+		if (dialog) {
+			dialog.showModal();
+			onShowCallback?.();
+		}
+	});
+
+	let isActive = false;
+
+	onMount(() => {
+		setTimeout(() => {
+			isActive = true;
+		}, 200);
+
+		if (defaultTimer) {
+			timeout = setTimeout(() => {
+				if (dialog && dialog.open) {
+					if (defaultTimer!.action === 'submit') {
+						form?.requestSubmit();
+						defaultTimer!.callback?.();
+					} else {
+						dialog?.close();
+					}
+				}
+			}, defaultTimer.time);
+		}
+
+		return clearTimer;
+	});
+
+	function clearTimer() {
+		if (timeout != undefined) {
+			paused = true;
+			clearTimeout(timeout);
+		}
+	}
+
+	function handleEsc(e: KeyboardEvent) {
+		// e.stopPropagation();
+
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			if (!mandatory) {
+				dialog.close();
+			}
+		}
+	}
+</script>
+
+<dialog
+	style="--timer: {defaultTimer && defaultTimer?.time + 'ms'}; {minWidth &&
+		`--dialog-min-width: ${minWidth};`} {minHeight &&
+		`--dialog-min-height: ${minHeight};`} {height && `--dialog-height: ${height};`} {width &&
+		`--dialog-width: ${width};`}"
+	class:static-height={staticHeight}
+	class:static-width={staticWidth}
+	class:noscroll
+	bind:this={dialog}
+	{onclose}
+	onkeydown={handleEsc}
+	onclick={(e) => {
+		if (e.target === dialog) {
+			if (!mandatory) dialog.close();
+		}
+		clearTimer();
+	}}
+>
+	<form
+		method="dialog"
+		bind:this={form}
+		onsubmit={(e) => {
+			e.preventDefault();
+			if (isActive) {
+				onsubmit?.(e);
+			}
+		}}
+		class="modal-root"
+	>
+		<div class="modal-header">
+			{#if mandatory}
+				<div class="title-wrapper">
+					<h3 class="modal-heading">{header}</h3>
+				</div>
+			{:else}
+				<div class="title-wrapper">
+					<h3 class="modal-heading padded">{header}</h3>
+					<div class="close-button">
+						<Action
+							size={Size.Large}
+							onclick={() => dialog.close()}
+							icon={{
+								name: 'cross',
+								size: Size.DoubleXLarge
+							}}
+							onkeydown={handleEsc}
+							colourSet={ColourSet.Primary}
+							label="Close Modal"
+						/>
+					</div>
+				</div>
+			{/if}
+
+			{#if headerExtra}
+				{@render headerExtra?.()}
+			{/if}
+		</div>
+
+		{#if defaultTimer}
+			<!-- class:paused -->
+			<div class="bar-container">
+				<div class:paused class="bar-timer"></div>
+			</div>
+		{/if}
+
+		<div class="modal-main" class:row class:wrap class:noscroll>
+			{#if explanation}
+				{@render explanation()}
+			{/if}
+			{@render children()}
+		</div>
+
+		{#if footer}
+			{@render footer()}
+		{:else if buttons?.length}
+			<div class="modal-footer">
+				{#each buttons as button (button)}
+					{#if button.callback}
+						<div class="button-barcode-set">
+							{#if button.barcodeValue}
+								{@const icon = DATAMatrix(button.barcodeValue)}
+								<DataMatrixIcon title={button.label} {icon} />
+							{/if}
+							{#await button.isValid}
+								<button
+									onkeydown={passthrough}
+									disabled
+									class:margin-left={button.margin === 'left'}
+									class:margin-right={button.margin === 'right'}
+									type={button.type ?? 'button'}
+									onclick={button.callback}>{button.label}</button
+								>
+							{:then buttonIsValid}
+								<button
+									class:call-to-action={button.colourSet === ColourSet.CallToAction}
+									class:primary={button.colourSet === ColourSet.Primary}
+									class:secondary-colour={button.colourSet === ColourSet.Secondary}
+									class:warning={button.colourSet === ColourSet.Warning}
+									class:error={button.colourSet === ColourSet.Error}
+									class:info={button.colourSet === ColourSet.Info}
+									onkeydown={passthrough}
+									disabled={buttonIsValid === false}
+									class:margin-left={button.margin === 'left'}
+									class:margin-right={button.margin === 'right'}
+									type={button.type ?? 'button'}
+									onclick={button.callback}>{button.label}</button
+								>
+							{/await}
+						</div>
+					{:else}
+						<div class="button-barcode-set">
+							{#if button.barcodeValue}
+								{@const icon = DATAMatrix(button.barcodeValue)}
+								<DataMatrixIcon title={button.label} {icon} />
+							{/if}
+							{#await button.isValid}
+								<button
+									onkeydown={passthrough}
+									disabled
+									class:margin-left={button.margin === 'left'}
+									class:margin-right={button.margin === 'right'}
+									bind:this={submitRef}
+									type={button.type ?? 'submit'}>{button.label}await</button
+								>
+							{:then buttonIsValid}
+								<button
+									class:call-to-action={button.colourSet === ColourSet.CallToAction}
+									class:primary={button.colourSet === ColourSet.Primary}
+									class:secondary-colour={button.colourSet === ColourSet.Secondary}
+									class:warning={button.colourSet === ColourSet.Warning}
+									class:error={button.colourSet === ColourSet.Error}
+									class:info={button.colourSet === ColourSet.Info}
+									onkeydown={passthrough}
+									disabled={buttonIsValid === false || !isValid}
+									class:margin-left={button.margin === 'left'}
+									class:margin-right={button.margin === 'right'}
+									bind:this={submitRef}
+									type={button.type ?? 'submit'}>{button.label}</button
+								>
+							{/await}
+						</div>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+	</form>
+</dialog>
+
+<style>dialog {
+  overflow: clip;
+  background-color: #e9ecf1;
+  max-height: 95%;
+  min-height: var(--dialog-min-height);
+  min-width: var(--dialog-min-width);
+  width: var(--dialog-width, max-content);
+  height: var(--dialog-height, max-content);
+  border-radius: 0.1875rem;
+  border: none;
+  padding: 0;
+}
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(1px);
+}
+dialog.static-height {
+  height: 95%;
+}
+dialog.static-width {
+  width: min(95%, 1728px);
+}
+dialog[open] {
+  animation: zoom 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  display: flex;
+}
+@keyframes zoom {
+  from {
+    transform: scale(0.98);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+dialog .modal-header {
+  flex-shrink: 0;
+}
+dialog .modal-main {
+  align-content: center;
+  flex-shrink: 1;
+  overflow: auto;
+}
+dialog .modal-main.noscroll {
+  overflow: visible;
+}
+
+.modal-root {
+  overflow: visible;
+  flex-grow: 1;
+  max-height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: column;
+  flex: 1;
+  overflow: auto;
+}
+
+.modal-header {
+  position: relative;
+}
+
+.modal-heading {
+  user-select: none;
+  background-color: #259fc7;
+  color: #ffffff;
+  margin: 0;
+  padding: 1.5rem;
+  text-align: center;
+  font-size: 1.5rem;
+}
+
+.modal-main {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 0.75rem;
+  font-size: 1.33rem;
+  background-color: #f4f7f9;
+}
+.modal-main.noscroll {
+  overflow: visible;
+}
+
+.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:not([disabled]).primary {
+  color: #ffffff;
+  background-color: var(--background-colour, #259fc7);
+  border-color: var(--border-colour, #259fc7);
+}
+button:not([disabled]).primary:focus, button:not([disabled]).primary:focus-visible {
+  outline-color: #259fc7;
+}
+button:not([disabled]).primary:hover {
+  background-color: var(--hover-background-colour, #1f81a0);
+}
+button {
+  padding: 1.5rem;
+  font-size: 1.5rem;
+  display: block;
+  border-width: 2px;
+  border-radius: 4px;
+}
+
+.modal-main {
+  display: flex;
+  flex-flow: column nowrap;
+}
+.modal-main.row {
+  flex-flow: row nowrap;
+}
+.modal-main.row.wrap {
+  flex-flow: row wrap;
+}
+
+.noscroll {
+  overflow: visible;
+}
+
+div.button-barcode-set {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 1.5rem;
+}
+
+.close-button {
+  margin: 0.25rem;
+}
+
+.modal-heading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title-wrapper {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  height: 4.25rem;
+}
+.title-wrapper .modal-heading {
+  width: 100%;
+}
+.title-wrapper .modal-heading.padded {
+  padding-right: 4.5rem;
+}
+.title-wrapper .close-button {
+  position: absolute;
+}
+
+button[type=submit]:not([disabled]) {
+  background-color: #259fc7;
+  color: #ffffff;
+  fill: #ffffff;
+  border-color: #259fc7;
+  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;
+}
+button[type=submit]:not([disabled]):hover {
+  background-color: #1f81a0;
+  border-color: #1f81a0;
+}
+button[type=submit]:not([disabled]):focus, button[type=submit]:not([disabled]):focus-visible {
+  outline: solid 1px #1f81a0;
+  outline-color: #3a4952 !important;
+}
+button[type=submit]:not([disabled]):focus {
+  outline-offset: -2px;
+}
+
+div.bar-container {
+  position: relative;
+  background-color: #f4f7f9;
+  width: 100%;
+  margin-top: 1px;
+  height: 1rem;
+  overflow: hidden;
+}
+@keyframes timer {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+div.bar-container div.bar-timer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 1rem;
+  background-color: #259fc7;
+  animation: timer linear var(--timer);
+}
+div.bar-container div.bar-timer.paused {
+  animation-play-state: paused;
+  opacity: 0%;
+  transition: opacity 300ms 0s ease-out;
+}</style>