@lavalogic/scoria 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/Components/Action.svelte

@@ -0,0 +1,258 @@
+<svelte:options runes />
+
+<script module lang="ts">
+	import { Size } from '../Types/Internal/Size.js';
+	import { ColourSet } from '../scss/colours.js';
+	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import { Shape } from '../Types/Internal/Shape.js';
+	import { TooltipContext } from '../Contexts/TooltipContext.svelte.js';
+	import { getContext } from 'svelte';
+	import { Side } from '../Types/Internal/Side.js';
+	import { Delay } from '../Delay/Delay.js';
+	import type { PartialIconProps } from './Icon.svelte';
+	import Icon from './Icon.svelte';
+
+	const paddings: Record<Shape, Record<Size, number>> = {
+		[Shape.Rectangle]: {
+			[Size.Tiny]: 0.125,
+			[Size.Small]: 0.1875,
+			[Size.MediumSmall]: 0.3125,
+			[Size.Medium]: 0.375,
+			[Size.MediumLarge]: 0.5,
+			[Size.Large]: 0.625,
+			[Size.XLarge]: 0.6875,
+			[Size.DoubleXLarge]: 0.8125,
+			[Size.TripleXLarge]: 0.875,
+			[Size.FillWidth]: -1,
+			[Size.FillHeight]: -1
+		},
+		[Shape.Circle]: {
+			[Size.Tiny]: 0.1875,
+			[Size.Small]: 0.5,
+			[Size.MediumSmall]: 0.875,
+			[Size.Medium]: 1.0625,
+			[Size.MediumLarge]: 1.375,
+			[Size.Large]: 1.75,
+			[Size.XLarge]: 1.9375,
+			[Size.DoubleXLarge]: 2.25,
+			[Size.TripleXLarge]: 2.4375,
+			[Size.FillWidth]: -1,
+			[Size.FillHeight]: -1
+		}
+	};
+
+	export interface ActionProps {
+		icon: PartialIconProps;
+
+		id?: string;
+		colourSet?: ColourSet;
+		size?: Size;
+		shape?: Shape;
+		border?: boolean;
+		paddingSize?: Size;
+		type?: 'button' | 'submit';
+		disabled?: boolean;
+		noTabIndex?: boolean;
+		backgroundColour?: string;
+		hoverBackgroundColour?: string;
+		label?: string;
+		['data-type']?: string;
+		style?: string;
+		side?: Side;
+
+		onfocus?: (e: FocusEvent) => void;
+		onblur?: (e: FocusEvent) => void;
+		onclick?: (e: MouseEvent) => void;
+		onkeydown?: (e: KeyboardEvent) => void;
+	}
+</script>
+
+<script lang="ts">
+	const {
+		icon,
+		id,
+		border = false,
+		shape = Shape.Rectangle,
+		label,
+		colourSet = ColourSet.Secondary,
+		size = Size.Medium,
+		paddingSize,
+		type = 'button',
+		noTabIndex = false,
+		disabled,
+		backgroundColour,
+		hoverBackgroundColour,
+		'data-type': dataType,
+		onfocus,
+		onblur,
+		onclick,
+		onkeydown: onkeydownProp,
+		style = '',
+		side
+	}: ActionProps = $props();
+
+	const iconSize: Size = $derived(icon?.size ?? size);
+
+	const pad: string = $derived.by(() => {
+		const padSize = paddingSize ?? size;
+		return padSize === Size.FillWidth ? '' : `${paddings[shape][padSize]}rem`;
+	});
+
+	function onkeydown(e: KeyboardEvent) {
+		passthrough(e);
+
+		if (document.activeElement === e.target) {
+			onkeydownProp?.(e);
+		}
+	}
+
+	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
+	// const toastContext = getContext<ToastContext>(ToastContext.identifier);
+</script>
+
+<button
+	{id}
+	onmouseenter={(e) => {
+		if (label) {
+			// TODO test currentTarget here
+			const rect = (e.target as HTMLButtonElement).getBoundingClientRect();
+			tooltipContext.showTooltip({
+				text: label,
+				arrow: side ?? Side.Left,
+				delay: Delay.Default,
+				rect
+			});
+		}
+	}}
+	onmouseleave={() => {
+		if (label) {
+			tooltipContext.hideTooltip(label);
+		}
+	}}
+	tabindex={noTabIndex ? -1 : undefined}
+	data-type={dataType}
+	style="{pad ? `--pad: ${pad};` : ''} {backgroundColour
+		? `--background-colour: ${backgroundColour};`
+		: ``} {hoverBackgroundColour
+		? `--hover-background-colour: ${hoverBackgroundColour};`
+		: ``}{style}"
+	class:border
+	class:circular={shape === Shape.Circle}
+	class:primary={colourSet === ColourSet.Primary}
+	class:secondary={colourSet === ColourSet.Secondary}
+	class:auxiliary={colourSet === ColourSet.Auxiliary}
+	class:info={colourSet === ColourSet.Info}
+	class:error={colourSet === ColourSet.Error}
+	class:fill-width={size === Size.FillWidth}
+	class:fill-height={size === Size.FillHeight}
+	{type}
+	{disabled}
+	{onfocus}
+	{onblur}
+	{onkeydown}
+	onclick={(e) => {
+		// toastContext.toast("clicked action")
+		if (label) {
+			tooltipContext.hideTooltip(label);
+		}
+		onclick?.(e);
+	}}
+	aria-label={label}><Icon {...icon} size={iconSize} /></button
+>
+
+<style>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]).ticked, button:not([disabled]).primary {
+  color: #ffffff;
+  background-color: var(--background-colour, #259fc7);
+  border-color: var(--border-colour, #259fc7);
+}
+button:not([disabled]).ticked:focus, button:not([disabled]).ticked:focus-visible, button:not([disabled]).primary:focus, button:not([disabled]).primary:focus-visible {
+  outline-color: #259fc7;
+}
+button:not([disabled]).ticked:hover, button:not([disabled]).primary:hover {
+  background-color: var(--hover-background-colour, #1f81a0);
+}
+button * {
+  user-select: none;
+}
+button {
+  position: relative;
+  justify-content: center;
+  background-color: var(--background-colour, #ffffff);
+}
+button :global > * {
+  --background-colour: transparent;
+}
+button[disabled] {
+  pointer-events: none;
+}
+button.fill-width, button.fill-height {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+button.max-height {
+  height: 100%;
+}
+button.max-width {
+  width: 100%;
+}
+button:focus, button:focus-visible, button:focus-within {
+  outline: none !important;
+}
+button.auxiliary {
+  background-color: var(--background-colour, transparent);
+}
+button.primary {
+  --colour: #ffffff;
+}
+button.info {
+  --colour: #c0c8ce;
+}
+button.error {
+  --colour: #aa1414;
+  --background-colour: #f9e9e9;
+}
+button.secondary {
+  --colour: #1f81a0;
+}
+button:not(.border) {
+  border: none;
+}
+button.circular {
+  border-radius: 50%;
+  padding: var(--pad, 0.52rem);
+}
+button {
+  padding: var(--pad);
+  cursor: pointer;
+}</style>

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

@@ -0,0 +1,30 @@
+import { Size } from '../Types/Internal/Size.js';
+import { ColourSet } from '../scss/colours.js';
+import { Shape } from '../Types/Internal/Shape.js';
+import { Side } from '../Types/Internal/Side.js';
+import type { PartialIconProps } from './Icon.svelte';
+export interface ActionProps {
+    icon: PartialIconProps;
+    id?: string;
+    colourSet?: ColourSet;
+    size?: Size;
+    shape?: Shape;
+    border?: boolean;
+    paddingSize?: Size;
+    type?: 'button' | 'submit';
+    disabled?: boolean;
+    noTabIndex?: boolean;
+    backgroundColour?: string;
+    hoverBackgroundColour?: string;
+    label?: string;
+    ['data-type']?: string;
+    style?: string;
+    side?: Side;
+    onfocus?: (e: FocusEvent) => void;
+    onblur?: (e: FocusEvent) => void;
+    onclick?: (e: MouseEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+}
+declare const Action: import("svelte").Component<ActionProps, {}, "">;
+type Action = ReturnType<typeof Action>;
+export default Action;

package/dist/Components/AlertModal.svelte

@@ -0,0 +1,373 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { AlertContext } from '../Contexts/AlertContext.svelte.js';
+	import { UntypedInputContext } from '../Contexts/UntypedInputContext.svelte.js';
+	import { getContext, onMount } from 'svelte';
+	import ModalExplanation from './Touch/ModalExplanation.svelte';
+	import DataMatrixIcon from './DataMatrixIcon.svelte';
+	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import { DATAMatrix } from '../Helpers/Datamatrix.js';
+
+	let dialog: HTMLDialogElement;
+
+	const alertContext = getContext<AlertContext>(AlertContext.identifier);
+
+	$effect(() => {
+		if (dialog) {
+			if (alertContext.showModal) {
+				dialog.showModal();
+			} else {
+				dialog.close();
+			}
+		}
+	});
+
+	const yesIcon = DATAMatrix('[YES]');
+
+	const { registerListener } = getContext<UntypedInputContext>(UntypedInputContext.identifier);
+	onMount(() =>
+		registerListener((value) => {
+			switch (value) {
+				case '[YES]': {
+					alertContext.onYes();
+					break;
+				}
+				case '[NO]': {
+					alertContext.onNo();
+					break;
+				}
+				case '[OTHER]': {
+					alertContext.onOther();
+					break;
+				}
+			}
+
+			return true;
+		})
+	);
+</script>
+
+<!-- onclose={() => (alertContext.showModal = false)} -->
+<dialog
+	bind:this={dialog}
+	onclose={() => alertContext.onNo()}
+	onclick={(e) => {
+		if (e.target === dialog) {
+			alertContext.onNo();
+		}
+	}}
+>
+	<div class="modal-root">
+		<h3 class="modal-heading">{alertContext.header}</h3>
+
+		<!-- <div class="modal-main pre-line">{$body}</div> -->
+		<div class="modal-main pre-line"><ModalExplanation>{alertContext.body}</ModalExplanation></div>
+
+		{#if alertContext.footer}
+			<!-- TODO either remove this part and make buttons the "footer", or allow consumer to pass an element -->
+			<span>{alertContext.footer}</span>
+		{/if}
+
+		<div class="modal-footer actions">
+			<div class="button-barcode-set">
+				<DataMatrixIcon title="Yes" icon={yesIcon} />
+				<button type="submit" onkeydown={passthrough} onclick={alertContext.onYes}
+					>{alertContext.yesLabel}</button
+				>
+			</div>
+
+			{#if alertContext.otherLabel}
+				{@const otherIcon = DATAMatrix('[OTHER]')}
+				<div class="button-barcode-set">
+					<DataMatrixIcon title="Other" icon={otherIcon} />
+					<button type="button" onkeydown={passthrough} onclick={alertContext.onOther}
+						>{alertContext.otherLabel}</button
+					>
+				</div>
+			{/if}
+
+			{#if alertContext.noLabel}
+				{@const noIcon = DATAMatrix('[NO]')}
+				<div class="button-barcode-set">
+					<DataMatrixIcon title="No" icon={noIcon} />
+					<button type="button" onkeydown={passthrough} onclick={alertContext.onNo}
+						>{alertContext.noLabel}</button
+					>
+				</div>
+			{/if}
+		</div>
+	</div>
+</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;
+}
+dialog .footer {
+  flex-shrink: 0;
+}
+
+.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;
+}
+
+.actions {
+  display: flex;
+  flex-flow: row-reverse nowrap;
+  gap: 2.5rem;
+}
+
+.input-container {
+  padding: 1.5rem;
+  padding-bottom: 1.5rem;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  gap: 1.5rem;
+}
+.input-container .country-margin {
+  width: 100%;
+  margin-top: 1rem;
+}
+
+.button-container {
+  padding: 3rem;
+}
+
+.card-container,
+.button-container {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 1.5rem;
+}
+
+span {
+  text-align: center;
+  font-size: 1.33rem;
+  color: #3a4952;
+}
+
+.card-container {
+  padding: 0 1rem;
+  height: 100%;
+  align-content: baseline;
+}
+.card-container.with-top-padding {
+  padding: 1.5rem;
+}
+
+.actions button {
+  border-width: 2px;
+  border-radius: 4px;
+  padding: 1rem 2rem;
+  align-items: center;
+}
+
+.header-extra,
+.cancel-container {
+  padding: 0.75rem;
+  background-color: #e9ecf1;
+}
+
+.header-extra {
+  border-bottom: solid 1px #cbd4da;
+  display: none;
+}
+.header-extra.visible {
+  display: block;
+}
+
+.select-container,
+.cancel-container {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1.5rem;
+}
+
+.cancel-container {
+  border-top: solid 1px #cbd4da;
+  bottom: 0;
+  z-index: 1;
+}
+
+span {
+  text-align: center;
+  font-size: 1.33rem;
+  color: #3a4952;
+}
+
+.select-container {
+  box-sizing: border-box;
+  padding: 1rem 2.5rem;
+  align-content: baseline;
+  flex-grow: 1;
+}
+
+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]).ticked, button:not([disabled]).primary {
+  color: #ffffff;
+  background-color: var(--background-colour, #259fc7);
+  border-color: var(--border-colour, #259fc7);
+}
+button:not([disabled]).ticked:focus, button:not([disabled]).ticked:focus-visible, button:not([disabled]).primary:focus, button:not([disabled]).primary:focus-visible {
+  outline-color: #259fc7;
+}
+button:not([disabled]).ticked:hover, button:not([disabled]).primary:hover {
+  background-color: var(--hover-background-colour, #1f81a0);
+}
+button * {
+  user-select: none;
+}
+button {
+  padding: 1.5rem;
+  font-size: 1.5rem;
+  display: block;
+  border-width: 2px;
+  border-radius: 4px;
+}
+
+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.pre-line {
+  white-space: pre-line;
+}
+
+div.button-barcode-set {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 1.5rem;
+}</style>

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

@@ -0,0 +1,3 @@
+declare const AlertModal: import("svelte").Component<Record<string, never>, {}, "">;
+type AlertModal = ReturnType<typeof AlertModal>;
+export default AlertModal;