@lavalogic/scoria 0.0.1

package/dist/Components/Modal.svelte

@@ -0,0 +1,577 @@
+<svelte:options runes />
+
+<script module lang="ts">
+	import { onMount, tick, type Snippet } from 'svelte';
+	import Action from './Action.svelte';
+	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 DataMatrixIcon from './DataMatrixIcon.svelte';
+	import type { ButtonProp } from '../Types/Internal/ButtonProp.js';
+
+	export interface DefaultTimer {
+		time: number;
+		action: 'submit' | 'close';
+	}
+
+	export interface ModalProps {
+		header: string | Snippet;
+		children: Snippet;
+		onclose?: () => void;
+
+		onsubmit?: ((e: SubmitEvent) => void) | undefined;
+		buttons?: ButtonProp[];
+		mandatory?: boolean | undefined;
+		staticHeight?: boolean | undefined;
+		staticWidth?: boolean | undefined;
+		minWidth?: string | undefined;
+		minHeight?: string | undefined;
+		width?: string | undefined;
+		height?: string | undefined;
+		onShowCallback?: () => void;
+		submitRef?: HTMLButtonElement;
+		defaultTimer?: DefaultTimer;
+		isValid?: boolean | undefined;
+		noscroll?: boolean | undefined;
+		headerExtra?: Snippet;
+		explanation?: Snippet;
+		footer?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		header,
+		buttons,
+		mandatory = false,
+		staticHeight = false,
+		staticWidth = false,
+		minWidth,
+		minHeight,
+		width,
+		height,
+		onShowCallback,
+		submitRef = $bindable(),
+		defaultTimer,
+		isValid = true,
+		noscroll = false,
+		onsubmit,
+		headerExtra,
+		explanation,
+		children,
+		footer,
+		onclose
+	}: ModalProps = $props();
+
+	let dialog: HTMLDialogElement;
+	let form: HTMLFormElement;
+	let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
+	let paused = $state(false);
+
+	$effect(() => {
+		if (dialog) {
+			// HACK tick helps with Portal shenanigans. will be removed if a better solution comes up
+			tick().then(() => {
+				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();
+					} 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 typeof header === 'string'}
+				{#if mandatory}
+					<h3 class="modal-heading">{header}</h3>
+				{:else}
+					<div class="title-wrapper">
+						<h3 class="modal-heading">{header}</h3>
+						<div class="close-button">
+							<Action
+								size={Size.DoubleXLarge}
+								onclick={() => dialog.close()}
+								icon={{
+									name: 'cross'
+								}}
+								onkeydown={handleEsc}
+								colourSet={ColourSet.Primary}
+								label="Close Modal"
+							/>
+						</div>
+					</div>
+				{/if}
+			{:else if typeof header === 'function'}
+				{@render header()}
+			{/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: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}
+							<button
+								onkeydown={passthrough}
+								class:margin-left={button.margin === 'left'}
+								class:margin-right={button.margin === 'right'}
+								type={button.type ?? 'button'}
+								onclick={button.callback}>{button.label}</button
+							>
+						</div>
+					{:else}
+						<div class="button-barcode-set">
+							{#if button.barcodeValue}
+								{@const icon = DATAMatrix(button.barcodeValue)}
+								<DataMatrixIcon title={button.label} {icon} />
+							{/if}
+							<button
+								onkeydown={passthrough}
+								disabled={!isValid}
+								class:margin-left={button.margin === 'left'}
+								class:margin-right={button.margin === 'right'}
+								bind:this={submitRef}
+								type={button.type ?? 'submit'}>{button.label}</button
+							>
+						</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;
+}
+dialog .footer {
+  flex-shrink: 0;
+}
+
+dialog {
+  border-radius: 4px;
+}
+
+.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 {
+  display: flex;
+  flex-grow: 1;
+  padding: 0.75rem;
+  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;
+}
+
+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;
+}
+
+dialog {
+  overflow: visible;
+}
+
+form.modal-root {
+  overflow: visible;
+}
+
+.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;
+}
+.title-wrapper .modal-heading {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+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;
+}
+
+:global .modal-header > *:first-child {
+  border-radius: 4px 4px 0 0;
+}
+:global form > *:last-child {
+  border-radius: 0px 0px 4px 4px;
+}</style>

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

@@ -0,0 +1,31 @@
+import { type Snippet } from 'svelte';
+import type { ButtonProp } from '../Types/Internal/ButtonProp.js';
+export interface DefaultTimer {
+    time: number;
+    action: 'submit' | 'close';
+}
+export interface ModalProps {
+    header: string | Snippet;
+    children: Snippet;
+    onclose?: () => void;
+    onsubmit?: ((e: SubmitEvent) => void) | undefined;
+    buttons?: ButtonProp[];
+    mandatory?: boolean | undefined;
+    staticHeight?: boolean | undefined;
+    staticWidth?: boolean | undefined;
+    minWidth?: string | undefined;
+    minHeight?: string | undefined;
+    width?: string | undefined;
+    height?: string | undefined;
+    onShowCallback?: () => void;
+    submitRef?: HTMLButtonElement;
+    defaultTimer?: DefaultTimer;
+    isValid?: boolean | undefined;
+    noscroll?: boolean | undefined;
+    headerExtra?: Snippet;
+    explanation?: Snippet;
+    footer?: Snippet;
+}
+declare const Modal: import("svelte").Component<ModalProps, {}, "submitRef">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;