@lavalogic/scoria 0.35.0 → 0.36.0

package/dist/Components/Touch/TouchModal.svelte

@@ -1,261 +1,261 @@
-<!-- eslint-disable prefer-const  -->
-<svelte:options runes />
-
-<script 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 { onMount } from 'svelte';
-	import Action from '../Action.svelte';
-	import DataMatrixIcon from '../DataMatrixIcon.svelte';
-	import type { TouchModalProps } from './TouchModalProps.js';
-
-	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 | undefined;
-	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.toString() + '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>
-
+<!-- eslint-disable prefer-const  -->
+<svelte:options runes />
+
+<script 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 { onMount } from 'svelte';
+	import Action from '../Action.svelte';
+	import DataMatrixIcon from '../DataMatrixIcon.svelte';
+	import type { TouchModalProps } from './TouchModalProps.js';
+
+	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 | undefined;
+	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.toString() + '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;
@@ -497,4 +497,4 @@ div.bar-container div.bar-timer.paused {
   animation-play-state: paused;
   opacity: 0%;
   transition: opacity 300ms 0s ease-out;
-}</style>
+}</style>