@lavalogic/scoria 0.29.0 → 0.31.0

package/dist/Components/DesktopModal.svelte

@@ -25,7 +25,7 @@
 		minWidth,
 		minHeight,
 		width,
-		height
+		height,
 	}: DesktopModalProps = $props();
 </script>
 
@@ -96,7 +96,10 @@
 	</div>
 
 	{#if isLoading}
-		<LoadingOverlay absolute message={loadingMessage} />
+		<LoadingOverlay
+			absolute
+			message={loadingMessage}
+		/>
 	{/if}
 </Modal>
 

package/dist/Components/HorizontalTabGroup.svelte

@@ -4,8 +4,11 @@
 	lang="ts"
 	generics="CommonDenominator"
 >
+	import { ellipses } from '../Helpers/Helpers.svelte.js';
+	import { Colour } from '../scss/colours.js';
 	import HorizontalTabGroupButton from './HorizontalTabGroupButton.svelte';
 	import type { HorizontalTabGroupProps } from './HorizontalTabGroupProps.js';
+	import TextInput from './TextInput.svelte';
 	let {
 		// name: _name, //FIXME why is this not implemented?
 		tabComponent,
@@ -13,7 +16,24 @@
 		selected,
 		noRadius = false,
 		grow = false,
+		filterable = false,
+		filterFn,
 	}: HorizontalTabGroupProps<CommonDenominator> = $props();
+
+	// svelte-ignore state_referenced_locally
+	let filteredTabs = $state(tabs);
+
+	$effect(() => {
+		const term = searchValue;
+		const id = setTimeout(() => {
+			filteredTabs = filterFn ? tabs.filter((t) => filterFn(t, term)) : tabs;
+		}, 300);
+		return () => {
+			clearTimeout(id);
+		};
+	});
+
+	let searchValue = $state('');
 </script>
 
 <div
@@ -22,14 +42,24 @@
 	class:grow
 >
 	<div class="tabs">
+		{#if filterable}
+			<div class="searchbar">
+				<TextInput
+					bind:value={searchValue}
+					placeholder="Search any keyword to find matches{ellipses}"
+					rightIcon={{ name: 'search-1', colour: Colour['$ui-blue-4'] }}
+				/>
+			</div>
+		{/if}
 		{#if tabComponent}
-			{#each tabs as option (option)}
+			{#each filteredTabs as option (option)}
 				{@render tabComponent(option, selected === option)}
 			{/each}
 		{:else}
-			{#each tabs as option (option)}
+			{#each filteredTabs as option (option)}
 				<HorizontalTabGroupButton
 					{option}
+					noRadius={noRadius || filterable}
 					selected={selected === option}
 				/>
 			{/each}
@@ -43,7 +73,15 @@
 	</div>
 </div>
 
-<style>.wrapper {
+<style>.searchbar {
+  display: flex;
+  width: 100%;
+  padding: 0.5rem;
+  background-color: #ffffff;
+  min-width: 330px;
+}
+
+.wrapper {
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
   border-radius: 4px;
   display: flex;
@@ -65,6 +103,8 @@
   border-radius: 4px 0 0 4px;
   display: flex;
   flex-flow: column nowrap;
+  padding-top: 1px;
+  gap: 1px;
   min-width: 10rem;
   background-color: #e9ecf1;
   border-right: solid 1px #cbd4da;

package/dist/Components/HorizontalTabGroupButton.svelte

@@ -6,13 +6,11 @@
 >
 	import { devCatch } from '../Helpers/Helpers.svelte.js';
 	import { Colour } from '../scss/colours.js';
-
 	import { Size } from '../Types/Internal/Size.js';
-
 	import Icon from './Icon.svelte';
 	import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
 
-	let { option, selected }: TabGroupButtonProps<Args> = $props();
+	let { option, selected, noRadius = false }: TabGroupButtonProps<Args> = $props();
 
 	let disabled = $state(true);
 	let visible = $state(true);
@@ -68,13 +66,15 @@
 	class:invalid={!isValid}
 	{disabled}
 	class:hidden={!visible}
+	class:no-radius={noRadius}
 >
-	<Icon
+	<div class="selected-marker"></div>
+	<!-- <Icon
 		name="nothing"
 		colour={Colour['$brand-primary']}
 		size={Size.Small}
 		{...option.iconLeft}
-	/>
+	/> -->
 
 	{option.label}
 	{#if !isValid}
@@ -83,13 +83,13 @@
 			colour={Colour['$error-border']}
 			size={Size.Small}
 		/>
-	{:else}
+		<!-- {:else}
 		<Icon
 			name="nothing"
 			colour={Colour['$brand-primary']}
 			size={Size.Small}
 			{...option.iconRight}
-		/>
+		/> -->
 	{/if}
 </button>
 
@@ -102,27 +102,52 @@
   cursor: pointer;
   font-size: 1rem;
   font-weight: 500;
-  padding: 0.75rem;
-  background-color: transparent;
+  padding: 1rem;
+  background-color: #ffffff;
   border: none;
-  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;
   text-align: start;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   width: 100%;
-  justify-content: space-between;
   gap: 0.5rem;
+  position: relative;
+  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;
 }
-.tab:first-child {
-  border-radius: 4px 0 0 0;
+.tab .selected-marker {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  opacity: 0;
+  background-color: #259fc7;
+  width: 0.3333333333rem;
+  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, opacity ease-out 0.15s 0s;
 }
 .tab.selected {
-  background-color: white;
+  color: #259fc7;
+}
+.tab.selected .selected-marker {
+  opacity: 1;
+}
+.tab:hover, .tab.selected:hover {
+  color: #49b8dc;
+  background-color: #f4f7f9;
+}
+.tab:hover .selected-marker, .tab.selected:hover .selected-marker {
+  opacity: 1;
+  background-color: #49b8dc;
+}
+.tab:not(.no-radius):first-child {
+  border-radius: 4px 0 0 0;
 }
 .tab:hover, .tab.selected:hover, .tab.invalid:hover {
   background-color: #f4f7f9;
 }
+.tab.invalid .selected-marker {
+  background-color: #aa1414 !important;
+}
 .tab.invalid {
-  color: #aa1414;
+  color: #aa1414 !important;
 }</style>

package/dist/Components/HorizontalTabGroupProps.d.ts

@@ -1,10 +1,22 @@
 import type { TabOption } from '../Types/Internal/TabOption.js';
 import type { Snippet } from 'svelte';
-export interface HorizontalTabGroupProps<CommonDenominator> {
+export type HorizontalTabGroupProps<CommonDenominator> = HorizontalTabGroupPropsWithSearch<CommonDenominator> | HorizontalTabGroupPropsWithoutSearch<CommonDenominator>;
+interface HorizontalTabGroupPropsBase<CommonDenominator> {
     name?: string;
     tabComponent?: Snippet<[TabOption<CommonDenominator>, boolean]>;
     noRadius?: boolean;
     grow?: boolean;
     tabs: Array<TabOption<CommonDenominator>>;
     selected: TabOption<CommonDenominator> | undefined;
+    filterable?: boolean;
+    filterFn?: (item: TabOption<CommonDenominator>, filterValue: string) => boolean;
 }
+export interface HorizontalTabGroupPropsWithoutSearch<CommonDenominator> extends HorizontalTabGroupPropsBase<CommonDenominator> {
+    filterable?: false;
+    filterFn?: never;
+}
+export interface HorizontalTabGroupPropsWithSearch<CommonDenominator> extends HorizontalTabGroupPropsBase<CommonDenominator> {
+    filterable: true;
+    filterFn: (item: TabOption<CommonDenominator>, filterValue: string) => boolean;
+}
+export {};

package/dist/Components/Nav/CallbackButtonWithIcon.d.ts

@@ -0,0 +1,23 @@
+import type { Pathname } from '$app/types';
+import type { IconProps } from '../IconProps.js';
+export type CallbackButtonWithIcon = CallbackButtonWithPath | CallbackButtonWithCallback;
+export interface NavButtonPartial {
+    iconName?: IconProps['name'];
+    label: string;
+    hoverLabel?: string;
+    subtitle?: string;
+    visible?: boolean | Promise<boolean>;
+}
+export type NavButton = NavButtonPartial & ({
+    path: Pathname;
+} | {
+    callback: () => void;
+});
+export interface CallbackButtonWithPath extends NavButtonPartial {
+    path: Pathname;
+    callback?: never;
+}
+export interface CallbackButtonWithCallback extends NavButtonPartial {
+    path?: never;
+    callback: () => void;
+}

package/dist/Components/Nav/CallbackButtonWithIcon.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Nav/Dimensions.d.ts

@@ -0,0 +1,4 @@
+export declare const Dimensions: {
+    readonly smallPanelWidth: 3;
+    readonly fullPanelWidth: 15;
+};

package/dist/Components/Nav/Dimensions.js

@@ -0,0 +1,5 @@
+export const Dimensions = {
+    smallPanelWidth: 3,
+    fullPanelWidth: 15,
+};
+Object.freeze(Dimensions);

package/dist/Components/Nav/Nav.svelte

@@ -0,0 +1,217 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
+	import type { NavProps } from './NavProps.js';
+	import ServicesNav from './ServicesNav.svelte';
+
+	const { userName, extras, userDialog, serviceTabs, selectedServiceTab }: NavProps = $props();
+
+	const userIcon = $derived.by(() => {
+		const names = userName.split(' ');
+
+		const initials = names.map((it) => it.charAt(0)).slice(0, 2);
+		return initials;
+	});
+
+	const singleLetter = $derived(userIcon.length === 1);
+	const hasLetters = $derived(userIcon.length > 0);
+
+	let showServicesDialog = $state(false);
+	let showUserDialog = $state(false);
+</script>
+
+<nav class="main-navigation">
+	<span class="nav-link hoverable"> FloWMS </span>
+	<!-- HACK swap above for below when a decent landing page has been added -->
+	<!-- <a
+		href={resolve(Locations.Home)}
+		class="nav-link hoverable"
+	>
+		FloWMS
+	</a> -->
+
+	<div class="nav-link">
+		<button
+			onclick={() => {
+				showServicesDialog = !showServicesDialog;
+			}}
+		>
+			<div class="delimited">
+				<Icon
+					name="block-menu"
+					size={Size.Medium}
+				/>
+				<span>Services</span>
+			</div>
+		</button>
+
+		{#if showServicesDialog}
+			<ServicesNav
+				onclose={() => {
+					showServicesDialog = false;
+				}}
+				{serviceTabs}
+				{selectedServiceTab}
+			/>
+		{/if}
+	</div>
+
+	<div class="nav-search-container">
+		<!-- <TextInput
+			bind:value={searchParam}
+			placeholder="Search for anything"
+			leftIcon={{ name: 'search-1' }}
+		/> -->
+	</div>
+	{#if extras}
+		<div class="nav-link spaced selects">
+			{@render extras()}
+		</div>
+	{/if}
+
+	<div>
+		<button
+			onclick={() => {
+				showUserDialog = !showUserDialog;
+			}}
+		>
+			<span class="nav-link padded">
+				<span
+					class="user-icon"
+					class:visible={hasLetters}
+					class:single-letter={singleLetter}>{userIcon}</span
+				>
+				<span class="user-name">{userName}</span>
+			</span>
+		</button>
+		{#if showUserDialog}
+			{@render userDialog(() => {
+				showUserDialog = false;
+			})}
+		{/if}
+	</div>
+</nav>
+
+<style>div.overlay {
+  position: fixed;
+  top: calc(3.25rem + var(--env-border-height, 0));
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 98;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+a.nav-link {
+  color: unset;
+}
+
+div.user {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  position: fixed;
+  border-radius: 4px;
+  background-color: #ffffff;
+  padding: 0.75rem;
+  top: calc(3.25rem + var(--env-border-height, 0));
+  right: 0.5rem;
+  z-index: 99;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
+}
+
+nav {
+  position: relative;
+  grid-column-start: side-menu;
+  grid-column-end: end;
+  grid-row-start: nav-start;
+  grid-row-end: nav-end;
+  background-color: #ffffff;
+  display: flex;
+  flex-flow: row;
+  align-content: center;
+  justify-content: space-between;
+  border-bottom: solid 1px #cbd4da;
+}
+nav button {
+  background-color: #ffffff;
+  border: none;
+  height: 100%;
+  width: 100%;
+}
+nav button:hover {
+  background-color: rgba(47, 151, 186, 0.1);
+  cursor: pointer;
+}
+
+.spaced {
+  gap: 1rem;
+}
+
+.user-icon {
+  background-color: #dae0e5;
+  padding: 0.5rem;
+  border-radius: 17px;
+  opacity: 0;
+  font-weight: 600;
+}
+.user-icon.visible {
+  opacity: 1;
+}
+.user-icon.single-letter {
+  padding: 0.3rem 0.6rem;
+  border-radius: 14px;
+}
+
+.main-navigation > *:nth-child(even) {
+  position: relative;
+}
+.main-navigation > *:nth-child(even)::before {
+  content: "";
+  height: 1.5rem;
+  border-left: solid 1px #e8e8e8;
+  border-radius: 10px;
+  left: 0;
+  position: absolute;
+}
+.main-navigation > *:nth-child(even)::after {
+  content: "";
+  height: 1.5rem;
+  border-right: solid 1px #e8e8e8;
+  border-radius: 10px;
+  position: absolute;
+  right: 0;
+}
+.main-navigation > *:nth-child(even).selects {
+  padding-left: 1px;
+  padding-right: 1px;
+  width: 32rem;
+  --sv-border: none;
+  --input-width: calc(50% - 0.5rem);
+}
+
+.nav-link {
+  display: flex;
+  justify-content: center;
+  flex-flow: row;
+  align-items: center;
+  /* flex-grow: 1; */
+  min-width: 7.5rem;
+  transition: background-color 200ms ease 0s;
+}
+.nav-link.padded {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  gap: 1rem;
+}
+
+div.delimited {
+  padding: 0 0.5rem;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}</style>

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

@@ -0,0 +1,4 @@
+import type { NavProps } from './NavProps.js';
+declare const Nav: import("svelte").Component<NavProps, {}, "">;
+type Nav = ReturnType<typeof Nav>;
+export default Nav;

package/dist/Components/Nav/NavProps.d.ts

@@ -0,0 +1,9 @@
+import type { TabOption } from '../../Types/Internal/TabOption.js';
+import type { Snippet } from 'svelte';
+export interface NavProps {
+    userName: string;
+    userDialog: Snippet<[closeUserDialog: () => void]>;
+    serviceTabs: Array<TabOption<unknown>>;
+    selectedServiceTab: TabOption<unknown> | undefined;
+    extras?: Snippet;
+}

package/dist/Components/Nav/NavProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Nav/NavServiceMenuList.svelte

@@ -0,0 +1,57 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { Colour } from '../../scss/colours.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
+	import type { NavServiceMenuListProps } from './NavServiceMenuListProps.js';
+	import ServiceMenuItem from './ServiceMenuItem.svelte';
+
+	const { title, items, icon }: NavServiceMenuListProps = $props();
+</script>
+
+<div class="wrapper">
+	<h3>
+		<div class="icon">
+			{#if icon}
+				<Icon
+					size={Size.Large}
+					colour={Colour['$font-primary']}
+					{...icon}
+				/>
+			{/if}
+		</div>
+		{title}
+	</h3>
+
+	<div class="items">
+		{#each items as { item } (item.label)}
+			<ServiceMenuItem {item} />
+		{/each}
+	</div>
+</div>
+
+<style>h3 {
+  font-size: 1.5rem;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  color: #3a4952;
+}
+h3 .icon {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  width: 3.4rem;
+}
+
+.wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+}
+.wrapper .items {
+  flex-shrink: 1;
+  overflow: auto;
+}</style>

package/dist/Components/Nav/NavServiceMenuList.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavServiceMenuListProps } from './NavServiceMenuListProps.js';
+declare const NavServiceMenuList: import("svelte").Component<NavServiceMenuListProps, {}, "">;
+type NavServiceMenuList = ReturnType<typeof NavServiceMenuList>;
+export default NavServiceMenuList;

package/dist/Components/Nav/NavServiceMenuListProps.d.ts

@@ -0,0 +1,7 @@
+import type { IconProps } from '../IconProps.js';
+import type { SideMenuItemProps } from './SideMenuItemProps.js';
+export interface NavServiceMenuListProps {
+    items: Array<SideMenuItemProps>;
+    title: string;
+    icon?: IconProps;
+}

package/dist/Components/Nav/NavServiceMenuListProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Nav/NavTab.svelte

@@ -0,0 +1,123 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { devCatch } from '../../Helpers/Helpers.svelte.js';
+	import { Colour } from '../../scss/colours.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
+	import type { NavTabProps } from './NavTabProps.js';
+
+	let { option, selected }: NavTabProps = $props();
+
+	let disabled = $state(true);
+	let visible = $state(true);
+	let isValid = $state(true);
+
+	$effect(() => {
+		if (typeof option.isValid === 'boolean') {
+			isValid = option.isValid;
+		} else {
+			option.isValid
+				?.then((v) => {
+					isValid = v;
+				})
+				.catch(devCatch);
+		}
+	});
+	$effect(() => {
+		if (typeof option.disabled === 'boolean') {
+			disabled = option.disabled;
+		} else if (option.disabled == undefined) {
+			disabled = false;
+		} else {
+			option.disabled
+				.then((v) => {
+					disabled = v;
+				})
+				.catch(devCatch);
+		}
+	});
+
+	$effect(() => {
+		if (typeof option.visible === 'boolean') {
+			visible = option.visible;
+		} else if (option.visible == undefined) {
+			visible = true;
+		} else {
+			option.visible
+				.then((v) => {
+					visible = v;
+				})
+				.catch(devCatch);
+		}
+	});
+</script>
+
+<button
+	class:selected
+	onclick={() => {
+		option.onclick();
+	}}
+	type="button"
+	class="tab"
+	{disabled}
+	class:invalid={!isValid}
+	class:hidden={!visible}
+>
+	<Icon
+		name="nothing"
+		colour={Colour['$brand-primary']}
+		size={Size.MediumLarge}
+		{...option.iconLeft}
+	/>
+
+	{option.label}
+	{#if option.isValid === false}
+		<Icon
+			name="error"
+			colour={Colour['$error-border']}
+			size={Size.MediumLarge}
+		/>
+	{:else}
+		<Icon
+			name="nothing"
+			colour={Colour['$brand-primary']}
+			size={Size.MediumLarge}
+			{...option.iconRight}
+		/>
+	{/if}
+</button>
+
+<style>button.tab.hidden {
+  display: none !important;
+}
+
+.tab {
+  color: #3a4952;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 1.5rem;
+  background-color: transparent;
+  border: none;
+  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;
+  text-align: start;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  width: 100%;
+  justify-content: start;
+  gap: 0.5rem;
+}
+.tab:first-child {
+  border-radius: 4px 0 0 0;
+}
+.tab.selected {
+  color: #259fc7;
+}
+.tab:hover, .tab.selected:hover, .tab.invalid:hover {
+  background-color: #f4f7f9;
+}
+.tab.invalid {
+  color: #aa1414;
+}</style>

package/dist/Components/Nav/NavTab.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavTabProps } from './NavTabProps.js';
+declare const NavTab: import("svelte").Component<NavTabProps, {}, "">;
+type NavTab = ReturnType<typeof NavTab>;
+export default NavTab;

package/dist/Components/Nav/NavTabProps.d.ts

@@ -0,0 +1,5 @@
+import type { TabOption } from '../../Types/Internal/TabOption.js';
+export interface NavTabProps {
+    option: TabOption<unknown>;
+    selected: boolean;
+}

package/dist/Components/Nav/NavTabProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Nav/ServiceMenuItem.svelte

@@ -0,0 +1,156 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { dev } from '$app/environment';
+	import { resolve } from '$app/paths';
+	import { page } from '$app/state';
+	import { devCatch } from '../../Helpers/Helpers.svelte.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
+	import { Dimensions } from './Dimensions.js';
+	import type { SideMenuItemProps } from './SideMenuItemProps.js';
+
+	const { item, selected: maybeSelected }: SideMenuItemProps = $props();
+
+	const selected = $derived(maybeSelected ?? (item.path ? page.url.pathname == item.path : false));
+
+	let visible = $state(true);
+
+	$effect(() => {
+		if (typeof item.visible === 'boolean') {
+			visible = item.visible;
+		} else if (item.visible == undefined) {
+			visible = true;
+		} else {
+			item.visible
+				.then((v) => {
+					visible = v;
+				})
+				.catch(devCatch);
+		}
+	});
+</script>
+
+{#if item.callback}
+	<button
+		onclick={() => {
+			item.callback();
+		}}
+		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
+		class:selected
+		class:hidden={!visible}
+	>
+		<!-- <div class="selected-marker"></div> -->
+		<div class="icon-wrapper">
+			{#if item.iconName}
+				<Icon
+					name={item.iconName}
+					size={Size.Medium}
+					label={item.label}
+				/>
+			{/if}
+		</div>
+		<div class="spacer"></div>
+		<div class="text">
+			<div class="label">{item.label}</div>
+			{#if item.subtitle}
+				<div class="subtitle">{item.subtitle}</div>
+			{/if}
+		</div></button
+	>
+{:else if item.path}
+	<!-- FIXME why is this type cast required? -->
+	<a
+		href={resolve(item.path as '/')}
+		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
+		class:selected
+		class:hidden={!visible}
+	>
+		<!-- <div class="selected-marker"></div> -->
+		<div class="icon-wrapper">
+			{#if item.iconName}
+				<Icon
+					name={item.iconName}
+					size={Size.Medium}
+					label={item.label}
+				/>
+			{/if}
+		</div>
+		<div class="spacer"></div>
+		<div class="text">
+			<div class="label">{item.label}</div>
+			{#if item.subtitle}
+				<div class="subtitle">{item.subtitle}</div>
+			{/if}
+		</div></a
+	>
+{:else if dev}
+	Error: Callback had neither callback nor path
+{/if}
+
+<style>button.hidden,
+a.hidden {
+  display: none !important;
+}
+
+button,
+a {
+  font-size: 1rem;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.8rem 0;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  color: #455661;
+  fill: #455661;
+  box-sizing: border-box;
+}
+button div,
+a div {
+  user-select: none;
+}
+button .text,
+a .text {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+}
+button .text .label,
+a .text .label {
+  font-weight: 500;
+}
+button .subtitle,
+a .subtitle {
+  font-size: 0.875rem;
+  color: #9da9b1;
+}
+button,
+a {
+  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 .icon-wrapper,
+a .icon-wrapper {
+  width: var(--iconWidth);
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+button.selected, button:hover,
+a.selected,
+a:hover {
+  color: #259fc7;
+}
+button:hover,
+a:hover {
+  background-color: #f4f7f9;
+}
+button .spacer,
+a .spacer {
+  width: 0.5rem;
+}</style>

package/dist/Components/Nav/ServiceMenuItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SideMenuItemProps } from './SideMenuItemProps.js';
+declare const ServiceMenuItem: import("svelte").Component<SideMenuItemProps, {}, "">;
+type ServiceMenuItem = ReturnType<typeof ServiceMenuItem>;
+export default ServiceMenuItem;

package/dist/Components/Nav/ServicesNav.svelte

@@ -0,0 +1,92 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import type { TabOption } from '../../Types/Internal/TabOption.js';
+	import HorizontalTabGroup from '../HorizontalTabGroup.svelte';
+	import NavTab from './NavTab.svelte';
+	import type { ServicesNavProps } from './ServicesNavProps.js';
+
+	const { onclose, serviceTabs, selectedServiceTab }: ServicesNavProps = $props();
+
+	let servicesDialogRef: HTMLDivElement | undefined = $state.raw();
+</script>
+
+<div
+	bind:this={servicesDialogRef}
+	role="dialog"
+	tabindex="0"
+	class="overlay"
+	onclick={(e) => {
+		e.stopPropagation();
+		if (servicesDialogRef === e.target) {
+			onclose();
+		}
+	}}
+	onkeydown={(e) => {
+		if (e.key === 'Escape') {
+			onclose();
+		}
+	}}
+>
+	<div
+		role="navigation"
+		class="services"
+	>
+		<HorizontalTabGroup
+			name="nav-services"
+			tabs={serviceTabs}
+			selected={selectedServiceTab}
+			tabComponent={navTab}
+			noRadius
+			grow
+		/>
+	</div>
+</div>
+
+{#snippet navTab(option: TabOption<unknown>, selected: boolean)}
+	<NavTab
+		{option}
+		{selected}
+	/>
+{/snippet}
+
+<style>div.overlay {
+  position: fixed;
+  top: calc(3.25rem + var(--env-border-height, 0));
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 98;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+div.services {
+  position: fixed;
+  border-radius: 4px;
+  background-color: #ffffff;
+  top: calc(3.25rem + var(--env-border-height, 0));
+  left: 7.5rem;
+  z-index: 99;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
+  padding: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  justify-content: stretch;
+  height: min(710px, 80%);
+  width: 800px;
+}
+
+div.wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  width: 600px;
+  gap: 1.5rem;
+  --input-width: 100%;
+}
+div.wrapper .row {
+  width: 100%;
+  gap: 1.5rem;
+  display: flex;
+  flex-flow: row nowrap;
+}</style>

package/dist/Components/Nav/ServicesNav.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ServicesNavProps } from './ServicesNavProps.js';
+declare const ServicesNav: import("svelte").Component<ServicesNavProps, {}, "">;
+type ServicesNav = ReturnType<typeof ServicesNav>;
+export default ServicesNav;

package/dist/Components/Nav/ServicesNavProps.d.ts

@@ -0,0 +1,6 @@
+import type { TabOption } from '../../Types/Internal/TabOption.js';
+export interface ServicesNavProps {
+    onclose: () => void;
+    serviceTabs: Array<TabOption<unknown>>;
+    selectedServiceTab: TabOption<unknown> | undefined;
+}

package/dist/Components/Nav/ServicesNavProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Nav/SideMenuItemProps.d.ts

@@ -0,0 +1,7 @@
+import type { CallbackButtonWithIcon } from './CallbackButtonWithIcon.js';
+import type { SideMenuItemVariant } from './SideMenuItemVariant.js';
+export interface SideMenuItemProps {
+    item: CallbackButtonWithIcon;
+    selected?: boolean;
+    variant?: SideMenuItemVariant;
+}

package/dist/Components/Nav/SideMenuItemProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Nav/SideMenuItemVariant.d.ts

@@ -0,0 +1,5 @@
+export declare const SideMenuItemVariant: {
+    readonly Nav: "Nav";
+    readonly Tab: "Tab";
+};
+export type SideMenuItemVariant = (typeof SideMenuItemVariant)[keyof typeof SideMenuItemVariant];

package/dist/Components/Nav/SideMenuItemVariant.js

@@ -0,0 +1,5 @@
+export const SideMenuItemVariant = {
+    Nav: 'Nav',
+    Tab: 'Tab',
+};
+Object.freeze(SideMenuItemVariant);

package/dist/Components/TabGroupButtonProps.d.ts

@@ -2,4 +2,5 @@ import type { TabOption } from '../Types/Internal/TabOption.js';
 export interface TabGroupButtonProps<Args> {
     option: TabOption<Args>;
     selected: boolean;
+    noRadius?: boolean;
 }

package/dist/Helpers/Helpers.svelte.d.ts

@@ -54,6 +54,7 @@ export declare function hasQuery<FilterValueType>(customFilter: CustomFilter<Fil
 export declare function isDateTuple(value: unknown): value is [Date | null, Date | null];
 export declare function isNumericArray(value: unknown): value is Array<number | null>;
 export declare function isValidityTuple(v: Validity | ValidityWrapper | undefined): v is ValidityWrapper;
+export declare const ellipses = "\u2026";
 export declare const loadingText = "loading\u2026";
 export declare function isKeyOf<T extends object>(key: string, obj: T): key is string & keyof T;
 export interface ICreateTableArgs<T extends object, RowIdType extends Primitive> {

package/dist/Helpers/Helpers.svelte.js

@@ -410,6 +410,7 @@ export function isNumericArray(value) {
 export function isValidityTuple(v) {
     return v != null && typeof v == 'object';
 }
+export const ellipses = '…';
 export const loadingText = 'loading…';
 export function isKeyOf(key, obj) {
     return key in obj;

package/dist/index.d.ts

@@ -58,6 +58,18 @@ export type { MultiSelectCommonProps } from './Components/MultiSelectCommonProps
 export type { MultiSelectProps } from './Components/MultiSelectProps.js';
 export type { MultiSelectPropsAsObject } from './Components/MultiSelectPropsAsObject.js';
 export type { MultiSelectPropsAsPrimitive } from './Components/MultiSelectPropsAsPrimitive.js';
+export { type CallbackButtonWithCallback, type CallbackButtonWithIcon, type CallbackButtonWithPath, type NavButton, type NavButtonPartial, } from './Components/Nav/CallbackButtonWithIcon.js';
+export { Dimensions } from './Components/Nav/Dimensions.js';
+export { default as Nav } from './Components/Nav/Nav.svelte';
+export { type NavProps } from './Components/Nav/NavProps.js';
+export { default as NavServiceMenuList } from './Components/Nav/NavServiceMenuList.svelte';
+export { type NavServiceMenuListProps } from './Components/Nav/NavServiceMenuListProps.js';
+export { default as NavTab } from './Components/Nav/NavTab.svelte';
+export { default as ServiceMenuItem } from './Components/Nav/ServiceMenuItem.svelte';
+export { default as ServicesNav } from './Components/Nav/ServicesNav.svelte';
+export { type ServicesNavProps } from './Components/Nav/ServicesNavProps.js';
+export { type SideMenuItemProps } from './Components/Nav/SideMenuItemProps.js';
+export { SideMenuItemVariant } from './Components/Nav/SideMenuItemVariant.js';
 export { default as NumberInput } from './Components/NumberInput.svelte';
 export type { NumberInputProps } from './Components/NumberInputProps.js';
 export { type PartialIconProps } from './Components/PartialIconProps.js';
@@ -211,11 +223,10 @@ export { TooltipContext } from './Contexts/TooltipContext.svelte.js';
 export { UntypedInputContext } from './Contexts/UntypedInputContext.svelte.js';
 export { Delay } from './Delay/Delay.js';
 export { DATAMatrix } from './Helpers/Datamatrix.js';
-export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, createLocalTable, devCatch, generateShortUUID, generateUUID, getAccessorSortingFn, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, vowels, type ICreateTableArgs, } from './Helpers/Helpers.svelte.js';
+export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, createLocalTable, devCatch, ellipses, generateShortUUID, generateUUID, getAccessorSortingFn, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, vowels, type ICreateTableArgs, } from './Helpers/Helpers.svelte.js';
 export { type INamed } from './Helpers/INamed.js';
 export { Colour, ColourSet } from './scss/colours.js';
 export { Sizing } from './scss/sizing.js';
-export { AttributeOperation } from './Types/Internal/AttributeOperation.js';
 export { type BigRadioOption } from './Types/Internal/BigRadioOption.js';
 export { type ButtonProp } from './Types/Internal/ButtonProp.js';
 export { type CallbackButton } from './Types/Internal/CallbackButton.js';

package/dist/index.js

@@ -38,6 +38,18 @@ export { default as LoadingModal } from './Components/LoadingModal.svelte';
 export { default as LoadingOverlay } from './Components/LoadingOverlay.svelte';
 export { default as Modal } from './Components/Modal.svelte';
 export { default as MultiSelect } from './Components/MultiSelect.svelte';
+export {} from './Components/Nav/CallbackButtonWithIcon.js';
+export { Dimensions } from './Components/Nav/Dimensions.js';
+export { default as Nav } from './Components/Nav/Nav.svelte';
+export {} from './Components/Nav/NavProps.js';
+export { default as NavServiceMenuList } from './Components/Nav/NavServiceMenuList.svelte';
+export {} from './Components/Nav/NavServiceMenuListProps.js';
+export { default as NavTab } from './Components/Nav/NavTab.svelte';
+export { default as ServiceMenuItem } from './Components/Nav/ServiceMenuItem.svelte';
+export { default as ServicesNav } from './Components/Nav/ServicesNav.svelte';
+export {} from './Components/Nav/ServicesNavProps.js';
+export {} from './Components/Nav/SideMenuItemProps.js';
+export { SideMenuItemVariant } from './Components/Nav/SideMenuItemVariant.js';
 export { default as NumberInput } from './Components/NumberInput.svelte';
 export {} from './Components/PartialIconProps.js';
 export { default as PasswordInput } from './Components/PasswordInput.svelte';
@@ -154,11 +166,10 @@ export { TooltipContext } from './Contexts/TooltipContext.svelte.js';
 export { UntypedInputContext } from './Contexts/UntypedInputContext.svelte.js';
 export { Delay } from './Delay/Delay.js';
 export { DATAMatrix } from './Helpers/Datamatrix.js';
-export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, createLocalTable, devCatch, generateShortUUID, generateUUID, getAccessorSortingFn, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, vowels, } from './Helpers/Helpers.svelte.js';
+export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, createLocalTable, devCatch, ellipses, generateShortUUID, generateUUID, getAccessorSortingFn, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, vowels, } from './Helpers/Helpers.svelte.js';
 export {} from './Helpers/INamed.js';
 export { Colour, ColourSet } from './scss/colours.js';
 export { Sizing } from './scss/sizing.js';
-export { AttributeOperation } from './Types/Internal/AttributeOperation.js';
 export {} from './Types/Internal/BigRadioOption.js';
 export {} from './Types/Internal/ButtonProp.js';
 export {} from './Types/Internal/CallbackButton.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "publishConfig": {
     "access": "restricted"
   },

package/dist/Types/Internal/AttributeOperation.d.ts

@@ -1,31 +0,0 @@
-export declare const AttributeOperation: {
-    readonly Preadvice: "Preadvice";
-    readonly RequiredAtPreadvice: "Preadvice";
-    readonly Order: "Order";
-    readonly RequiredAtOrder: "Order";
-    readonly Despatch: "Despatch";
-    readonly RequiredAtDespatch: "RequiredAtDespatch";
-    readonly ValidateAtDespatch: "ValidateAtDespatch";
-    readonly Kit: "Kit";
-    readonly RequiredAtKit: "RequiredAtKit";
-    readonly ValidateAtKit: "ValidateAtKit";
-    readonly Pack: "Pack";
-    readonly RequiredAtPack: "RequiredAtPack";
-    readonly ValidateAtPack: "ValidateAtPack";
-    readonly Pick: "Pick";
-    readonly RequiredAtPick: "RequiredAtPick";
-    readonly ValidateAtPick: "ValidateAtPick";
-    readonly Receipt: "Receipt";
-    readonly RequiredAtReceipt: "RequiredAtReceipt";
-    readonly ValidateAtReceipt: "ValidateAtReceipt";
-    readonly ReceiptReturn: "ReceiptReturn";
-    readonly RequiredAtReceiptReturn: "RequiredAtReceiptReturn";
-    readonly ValidateAtReceiptReturn: "ValidateAtReceiptReturn";
-    readonly Sort: "Sort";
-    readonly RequiredAtSort: "RequiredAtSort";
-    readonly ValidateAtSort: "ValidateAtSort";
-    readonly StockTake: "StockTake";
-    readonly RequiredAtStockTake: "RequiredAtStockTake";
-    readonly ValidateAtStockTake: "ValidateAtStockTake";
-};
-export type AttributeOperation = (typeof AttributeOperation)[keyof typeof AttributeOperation];

package/dist/Types/Internal/AttributeOperation.js

@@ -1,31 +0,0 @@
-export const AttributeOperation = {
-    Preadvice: 'Preadvice',
-    RequiredAtPreadvice: 'Preadvice', //functionally identical
-    Order: 'Order',
-    RequiredAtOrder: 'Order', // functionally identical
-    Despatch: 'Despatch',
-    RequiredAtDespatch: 'RequiredAtDespatch',
-    ValidateAtDespatch: 'ValidateAtDespatch',
-    Kit: 'Kit',
-    RequiredAtKit: 'RequiredAtKit',
-    ValidateAtKit: 'ValidateAtKit',
-    Pack: 'Pack',
-    RequiredAtPack: 'RequiredAtPack',
-    ValidateAtPack: 'ValidateAtPack',
-    Pick: 'Pick',
-    RequiredAtPick: 'RequiredAtPick',
-    ValidateAtPick: 'ValidateAtPick',
-    Receipt: 'Receipt',
-    RequiredAtReceipt: 'RequiredAtReceipt',
-    ValidateAtReceipt: 'ValidateAtReceipt',
-    ReceiptReturn: 'ReceiptReturn',
-    RequiredAtReceiptReturn: 'RequiredAtReceiptReturn',
-    ValidateAtReceiptReturn: 'ValidateAtReceiptReturn',
-    Sort: 'Sort',
-    RequiredAtSort: 'RequiredAtSort',
-    ValidateAtSort: 'ValidateAtSort',
-    StockTake: 'StockTake',
-    RequiredAtStockTake: 'RequiredAtStockTake',
-    ValidateAtStockTake: 'ValidateAtStockTake'
-};
-Object.freeze(AttributeOperation);