@lavalogic/scoria 0.0.1

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

@@ -0,0 +1,34 @@
+import { type Snippet } from '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;
+}
+declare const TouchModal: import("svelte").Component<TouchModalProps, {}, "submitRef">;
+type TouchModal = ReturnType<typeof TouchModal>;
+export default TouchModal;

package/dist/Components/Touch/UtilityButton.svelte

@@ -0,0 +1,192 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import { browser } from '$app/environment';
+	import { passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { ColourSet } from '../../scss/colours.js';
+	import { Side } from '../../Types/Internal/Side.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import DataMatrixIcon from '../DataMatrixIcon.svelte';
+	import Icon, { type PartialIconProps } from '../Icon.svelte';
+	export interface UtilityButtonProps {
+		icon?: PartialIconProps | SVGSVGElement | null;
+
+		type?: 'button' | 'submit' | 'reset' | null;
+		colourSet?: ColourSet;
+		side?: Side;
+		size?: Size;
+		notifications?: string;
+		ref?: HTMLButtonElement | undefined;
+		disabled?: boolean;
+		onEditBarcode?: () => void;
+		onclick?: ((e: MouseEvent) => void) | undefined;
+		onfocus?: ((e: FocusEvent) => void) | undefined;
+		onblur?: ((e: FocusEvent) => void) | undefined;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		type = 'button',
+		colourSet = ColourSet.Secondary,
+		icon,
+		side = Side.Top,
+		size: explicitSize,
+		notifications,
+		ref = $bindable(),
+		disabled = false,
+		onEditBarcode,
+		onclick,
+		onfocus,
+		onblur,
+		children
+	}: UtilityButtonProps = $props();
+
+	const size = $derived(
+		(explicitSize ?? icon instanceof SVGSVGElement)
+			? Size.DoubleXLarge
+			: (icon?.size ?? Size.DoubleXLarge)
+	);
+
+	let slotSpan: HTMLSpanElement | undefined = $state();
+</script>
+
+<button
+	{type}
+	class:call-to-action={colourSet === ColourSet.Primary || colourSet === ColourSet.CallToAction}
+	disabled={disabled === true ? true : undefined}
+	class:left={side == Side.Left}
+	class:right={side == Side.Right}
+	class:top={side == Side.Top}
+	class:bottom={side == Side.Bottom}
+	bind:this={ref}
+	{onclick}
+	{onfocus}
+	{onblur}
+	oncontextmenu={(e) => {
+		if (onEditBarcode) {
+			e.preventDefault();
+			onEditBarcode();
+		}
+	}}
+	onkeydown={passthrough}
+>
+	{#if browser && icon}
+		<div
+			class="expand"
+			class:left={side == Side.Left}
+			class:right={side == Side.Right}
+			class:top={side == Side.Top}
+			class:bottom={side == Side.Bottom}
+		>
+			{#if icon instanceof SVGSVGElement}
+				<DataMatrixIcon title={slotSpan?.textContent ?? '{unknown}'} {icon} />
+			{:else}
+				{#if notifications}
+					<span class="notification">{notifications}</span>
+				{/if}
+
+				<Icon {...icon} {size} />
+			{/if}
+		</div>
+	{/if}
+	<span class="utility-label">
+		{#if notifications && icon instanceof SVGSVGElement}
+			<span class="notification-on-text">{notifications}</span>
+		{/if}<span bind:this={slotSpan}
+			>{#if children}{@render children()}{/if}</span
+		>
+	</span>
+</button>
+
+<style>button {
+  background-color: #f4f7f9;
+  box-sizing: border-box;
+  border: none;
+  height: 100%;
+  width: 10rem;
+  fill: #3a4952;
+  color: #3a4952;
+  flex-flow: column;
+  justify-content: flex-end;
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+  position: relative;
+  font-size: 1.12rem;
+  font-weight: 600;
+}
+button.left, button.right {
+  flex-flow: row nowrap;
+  width: unset;
+}
+button.left span, button.right span {
+  margin: auto 0.5rem;
+}
+button .expand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 2;
+}
+button .expand.right {
+  order: 1;
+}
+button:not([disabled]) {
+  cursor: pointer;
+  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;
+  background-color: #ffffff;
+}
+button:not([disabled]):hover {
+  background-color: #259fc7;
+  fill: #ffffff;
+  color: #ffffff;
+}
+button:not([disabled]) span.notification {
+  position: absolute;
+  top: 1.5rem;
+  right: 2.5rem;
+  background-color: #259fc7;
+  color: #ffffff;
+  width: 1.5rem;
+  height: 1.5rem;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 50%;
+  line-height: 1.5rem;
+  font-size: 0.82rem;
+}
+button:not([disabled]) span.utility-label span.notification-on-text {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  background-color: #259fc7;
+  color: #ffffff;
+  width: 24px;
+  height: 24px;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 50%;
+  line-height: 24px;
+  font-size: 0.82rem;
+}
+button:not([disabled]).call-to-action: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:not([disabled]).call-to-action:not([disabled]):hover {
+  background-color: #1f81a0;
+  border-color: #1f81a0;
+}
+button:not([disabled]).call-to-action:not([disabled]):focus, button:not([disabled]).call-to-action:not([disabled]):focus-visible {
+  outline: solid 1px #1f81a0;
+  outline-color: #3a4952 !important;
+}
+button:not([disabled]).call-to-action:not([disabled]):focus {
+  outline-offset: -2px;
+}</style>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import { ColourSet } from '../../scss/colours.js';
+import { Side } from '../../Types/Internal/Side.js';
+import { Size } from '../../Types/Internal/Size.js';
+import { type PartialIconProps } from '../Icon.svelte';
+export interface UtilityButtonProps {
+    icon?: PartialIconProps | SVGSVGElement | null;
+    type?: 'button' | 'submit' | 'reset' | null;
+    colourSet?: ColourSet;
+    side?: Side;
+    size?: Size;
+    notifications?: string;
+    ref?: HTMLButtonElement | undefined;
+    disabled?: boolean;
+    onEditBarcode?: () => void;
+    onclick?: ((e: MouseEvent) => void) | undefined;
+    onfocus?: ((e: FocusEvent) => void) | undefined;
+    onblur?: ((e: FocusEvent) => void) | undefined;
+    children?: Snippet;
+}
+declare const UtilityButton: import("svelte").Component<UtilityButtonProps, {}, "ref">;
+type UtilityButton = ReturnType<typeof UtilityButton>;
+export default UtilityButton;

package/dist/Components/VerticalTabGroup.svelte

@@ -0,0 +1,129 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import type { TabOption } from '../Types/Internal/TabOption.js';
+	import { onMount, untrack } from 'svelte';
+	import VerticalTabGroupButton from './VerticalTabGroupButton.svelte';
+
+	export interface VerticalTabGroupProps {
+		name?: string;
+		tabs: Array<TabOption<any>>;
+		selected?: TabOption<any> | undefined;
+		style?: string;
+		noscroll?: boolean;
+		noTabMessage?: string;
+	}
+</script>
+
+<script lang="ts">
+	let { name, tabs, selected, style, noscroll, noTabMessage }: VerticalTabGroupProps = $props();
+
+	onMount(() => {
+		if (name) {
+			const tabName = sessionStorage.getItem(`${name}-active-tab`);
+			if (tabName) {
+				tabs.find((it) => it.label === tabName)?.onclick();
+			}
+		}
+	});
+
+	$effect(() => {
+		if (name && selected) {
+			untrack(() => {
+				sessionStorage.setItem(`${name}-active-tab`, selected.label);
+			});
+		}
+	});
+</script>
+
+<div class="wrapper" class:noscroll {style}>
+	<div class="tabs">
+		{#each tabs as option (option)}
+			<VerticalTabGroupButton {option} selected={selected?.label === option.label} />
+		{/each}
+	</div>
+
+	<div class="content" class:noscroll>
+		{#if selected}
+			{@render selected.content(selected.args)}
+		{:else}
+			<div class="wrapper bg">
+				<span class="red">{noTabMessage ?? 'No Tab Selected'}</span>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>.bg {
+  padding: 1.5rem;
+  background-color: #f9e9e9;
+  color: #c31818;
+}
+
+.wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1;
+  overflow: auto;
+}
+.wrapper.noscroll {
+  overflow: visible;
+}
+.wrapper .tabs {
+  border-radius: 0 4px 0 0;
+  display: flex;
+  flex-flow: row nowrap;
+  overflow-x: auto;
+  max-width: 100%;
+  gap: 0.5rem;
+  padding-top: 0.25rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  flex-basis: 52px;
+  flex-shrink: 0;
+  background-color: #ffffff;
+  border-bottom: solid 1px #cbd4da;
+  border-top: solid 2px transparent;
+}
+.wrapper .tabs .tab {
+  color: #3a4952;
+  cursor: pointer;
+  font-size: 0.9375rem;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+}
+.wrapper .tabs .tab .bordered {
+  border-radius: 4px;
+  padding: 0.25rem 0.75rem;
+  margin-bottom: 0.25rem;
+  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;
+  white-space: nowrap;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+.wrapper .tabs .tab .bordered.invalid {
+  color: #aa1414;
+  background-color: #f9e9e9;
+}
+.wrapper .tabs .tab.selected {
+  border-bottom-color: #259fc7;
+}
+.wrapper .tabs .tab.selected.invalid {
+  border-bottom-color: #aa1414;
+}
+.wrapper .tabs .tab:hover .bordered, .wrapper .tabs .tab.selected:hover .bordered {
+  background-color: #f4f7f9;
+}
+.wrapper .content {
+  background-color: #f4f7f9;
+  flex-grow: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  overflow: auto;
+}
+.wrapper .content.noscroll {
+  overflow: visible;
+}</style>

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

@@ -0,0 +1,12 @@
+import type { TabOption } from '../Types/Internal/TabOption.js';
+export interface VerticalTabGroupProps {
+    name?: string;
+    tabs: Array<TabOption<any>>;
+    selected?: TabOption<any> | undefined;
+    style?: string;
+    noscroll?: boolean;
+    noTabMessage?: string;
+}
+declare const VerticalTabGroup: import("svelte").Component<VerticalTabGroupProps, {}, "">;
+type VerticalTabGroup = ReturnType<typeof VerticalTabGroup>;
+export default VerticalTabGroup;

package/dist/Components/VerticalTabGroupButton.svelte

@@ -0,0 +1,108 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface VerticalTabGroupButtonProps {
+		option: TabOption<any>;
+		selected: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import Icon from './Icon.svelte';
+	import type { TabOption } from '../Types/Internal/TabOption.js';
+	import { Colour } from '../scss/colours.js';
+	import { Size } from '../Types/Internal/Size.js';
+
+	let { option, selected }: VerticalTabGroupButtonProps = $props();
+
+	let disabled = $state(true);
+	let isValid = $state(true);
+
+	$effect(() => {
+		if (typeof option.isValid === 'boolean') {
+			isValid = option.isValid;
+		} else {
+			option.isValid?.then((v) => {
+				isValid = v;
+			});
+		}
+	});
+	$effect(() => {
+		if (typeof option.disabled === 'boolean') {
+			disabled = option.disabled;
+		} else if (option.disabled == undefined) {
+			disabled = false;
+		} else {
+			option.disabled?.then((v) => {
+				disabled = v;
+			});
+		}
+	});
+</script>
+
+<button
+	class:selected
+	{disabled}
+	onclick={() => {
+		option.onclick();
+	}}
+	type="button"
+	class="tab"
+	class:invalid={isValid === false}
+>
+	<div class="bordered" class:invalid={isValid === false}>
+		{#if option.iconLeft}
+			<Icon {...option.iconLeft} colour={Colour['$brand-primary']} />
+		{/if}
+		{option.label}
+		{#if isValid === false}
+			<Icon name="error" colour={Colour['$error-border']} size={Size.Small} />
+		{:else if option.iconRight}
+			<Icon colour={Colour['$brand-primary']} size={Size.Small} {...option.iconRight} />
+		{/if}
+	</div>
+</button>
+
+<style>.tab {
+  cursor: pointer;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  border-bottom: solid 2px transparent;
+  border-top: solid 2px transparent;
+}
+.tab .bordered {
+  background-color: #e9ecf1;
+}
+.tab:not([disabled]) {
+  color: #3a4952;
+}
+.tab:not([disabled]) .bordered {
+  background-color: transparent;
+}
+.tab:not([disabled]):hover .bordered, .tab:not([disabled]).selected:hover .bordered {
+  background-color: #f4f7f9;
+}
+.tab .bordered {
+  border-radius: 4px;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.25rem;
+  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;
+  white-space: nowrap;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+.tab .bordered.invalid {
+  color: #aa1414;
+  background-color: #f9e9e9;
+}
+.tab.selected {
+  border-bottom-color: #259fc7;
+}
+.tab.selected.invalid {
+  border-bottom-color: #aa1414;
+}</style>

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

@@ -0,0 +1,8 @@
+export interface VerticalTabGroupButtonProps {
+    option: TabOption<any>;
+    selected: boolean;
+}
+import type { TabOption } from '../Types/Internal/TabOption.js';
+declare const VerticalTabGroupButton: import("svelte").Component<VerticalTabGroupButtonProps, {}, "">;
+type VerticalTabGroupButton = ReturnType<typeof VerticalTabGroupButton>;
+export default VerticalTabGroupButton;

package/dist/Contexts/AlertContext.svelte.d.ts

@@ -0,0 +1,46 @@
+export declare class AlertContext {
+    static readonly identifier: unique symbol;
+    private _header;
+    get header(): string;
+    set header(v: string);
+    private _body;
+    get body(): string;
+    set body(v: string);
+    private _footer;
+    get footer(): string | null;
+    set footer(v: string | null);
+    private _yesLabel;
+    get yesLabel(): string;
+    set yesLabel(v: string);
+    private _noLabel;
+    get noLabel(): string | null;
+    set noLabel(v: string | null);
+    private _otherLabel;
+    get otherLabel(): string | null;
+    set otherLabel(v: string | null);
+    private _showModal;
+    get showModal(): boolean;
+    set showModal(v: boolean);
+    private _onYes;
+    onYes: () => void;
+    private _onNo;
+    onNo: () => void;
+    private _onOther;
+    onOther: () => void;
+    private resetState;
+    alert: (body: string, props?: IAlertProps) => void;
+    prompt: (body: string, props: IPromptProps) => void;
+}
+export interface IAlertProps {
+    header?: string;
+    footer?: string;
+    onYes?: () => void;
+    yesLabel?: string;
+}
+export interface IPromptProps extends IAlertProps {
+    onYes: () => void;
+    onNo?: () => void;
+    onOther?: () => void;
+    noLabel?: string;
+    otherLabel?: string;
+}

package/dist/Contexts/AlertContext.svelte.js

@@ -0,0 +1,118 @@
+export class AlertContext {
+    static identifier = Symbol();
+    _header = $state('Confirmation');
+    get header() {
+        return this._header;
+    }
+    set header(v) {
+        this._header = v;
+    }
+    _body = $state('');
+    get body() {
+        return this._body;
+    }
+    set body(v) {
+        this._body = v;
+    }
+    _footer = $state(null);
+    get footer() {
+        return this._footer;
+    }
+    set footer(v) {
+        this._footer = v;
+    }
+    _yesLabel = $state('Yes');
+    get yesLabel() {
+        return this._yesLabel;
+    }
+    set yesLabel(v) {
+        this._yesLabel = v;
+    }
+    _noLabel = $state(null);
+    get noLabel() {
+        return this._noLabel;
+    }
+    set noLabel(v) {
+        this._noLabel = v;
+    }
+    _otherLabel = $state(null);
+    get otherLabel() {
+        return this._otherLabel;
+    }
+    set otherLabel(v) {
+        this._otherLabel = v;
+    }
+    _showModal = $state(false);
+    get showModal() {
+        return this._showModal;
+    }
+    set showModal(v) {
+        this._showModal = v;
+    }
+    _onYes = undefined;
+    onYes = () => {
+        this.showModal = false;
+        this._onYes?.();
+    };
+    _onNo = undefined;
+    onNo = () => {
+        this.showModal = false;
+        this._onNo?.();
+    };
+    _onOther = undefined;
+    onOther = () => {
+        this.showModal = false;
+        this._onOther?.();
+    };
+    resetState = () => {
+        this._body = '';
+        this._header = 'Confirmation';
+        this._footer = null;
+        this._yesLabel = 'Yes';
+        this._noLabel = null;
+        this._otherLabel = null;
+        this._onYes = undefined;
+        this._onNo = undefined;
+        this._onOther = undefined;
+    };
+    alert = (body, props) => {
+        // debugger;
+        this.resetState();
+        this._body = body;
+        if (props) {
+            if (props.header) {
+                this._header = props.header;
+            }
+            if (props.footer) {
+                this._footer = props.footer;
+            }
+            this._yesLabel = props.yesLabel || 'Okay';
+            this._onYes = props.onYes;
+        }
+        else {
+            this._yesLabel = 'Okay';
+        }
+        this.showModal = true;
+    };
+    prompt = (body, props) => {
+        this.resetState();
+        this._body = body;
+        if (props.header) {
+            this._header = props.header;
+        }
+        if (props.footer) {
+            this._footer = props.footer;
+        }
+        if (props.yesLabel) {
+            this._yesLabel = props.yesLabel;
+        }
+        this._noLabel = props.noLabel || 'No';
+        if (props.otherLabel) {
+            this._otherLabel = props.otherLabel;
+        }
+        this._onYes = props.onYes;
+        this._onNo = props.onNo;
+        this._onOther = props.onOther;
+        this.showModal = true;
+    };
+}

package/dist/Contexts/ContextMenuContext.svelte.d.ts

@@ -0,0 +1,22 @@
+export declare class ContextMenuContext {
+    static readonly identifier: unique symbol;
+    private _x;
+    get x(): number;
+    set x(v: number);
+    private _y;
+    get y(): number;
+    set y(v: number);
+    private _items;
+    get items(): IContextMenuOption[];
+    set items(v: IContextMenuOption[]);
+    private _showMenu;
+    get showMenu(): boolean;
+    set showMenu(v: boolean);
+    readonly openContextMenu: (e: MouseEvent, options: IContextMenuOption[]) => Promise<void>;
+    closeMenu: () => void;
+}
+export interface IContextMenuOption {
+    callback: () => void;
+    text: string;
+    disabled?: boolean;
+}