@lavalogic/scoria 0.25.2 → 0.27.0

package/dist/Components/PageHeading.svelte

@@ -0,0 +1,79 @@
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import type { Snippet } from 'svelte';
+
+	export interface PageHeadingProps {
+		children: Snippet;
+		subtitle?: Snippet | undefined;
+		extras?: Snippet | undefined;
+	}
+</script>
+
+<script lang="ts">
+	let { children, subtitle, extras }: PageHeadingProps = $props();
+</script>
+
+<div class="outer">
+	<div class="column">
+		<h1>{@render children()}</h1>
+		<div class="one-line">
+			{#if subtitle}
+				{@render subtitle()}
+			{/if}
+		</div>
+	</div>
+	{#if extras}
+		<div class="buttons">
+			{@render extras()}
+		</div>
+	{/if}
+</div>
+
+<style>.outer {
+  padding: 1.5rem;
+  display: flex;
+  flex-flow: row nowrap;
+  width: 100%;
+  background-color: #ffffff;
+  border-bottom: solid 1px #cbd4da;
+}
+.outer .buttons {
+  display: flex;
+  flex-flow: row-reverse nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  flex-grow: 1;
+  justify-content: flex-start;
+}
+.outer .column {
+  flex-grow: 2;
+  display: flex;
+  flex-flow: column nowrap;
+  background-color: #ffffff;
+}
+.outer .column h1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  color: #455661;
+  font-weight: 600;
+  font-size: 1.4rem;
+}
+.outer .column .one-line {
+  display: inline-flex;
+  flex-flow: row;
+  gap: 1rem;
+}
+.outer .column .one-line span {
+  display: inline-flex;
+  flex-flow: row;
+  align-items: center;
+  gap: 0.1875rem;
+  fill: #647d8e;
+  color: #647d8e;
+  font-size: 0.875rem;
+}</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+export interface PageHeadingProps {
+    children: Snippet;
+    subtitle?: Snippet | undefined;
+    extras?: Snippet | undefined;
+}
+declare const PageHeading: import("svelte").Component<PageHeadingProps, {}, "">;
+type PageHeading = ReturnType<typeof PageHeading>;
+export default PageHeading;

package/dist/Components/StepButton.svelte

@@ -0,0 +1,160 @@
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="Args"
+>
+	import { TooltipContext } from '../Contexts/TooltipContext.svelte.js';
+
+	import { Delay } from '../Delay/Delay.js';
+	import { devCatch } from '../Helpers/Helpers.svelte.js';
+	import { Colour } from '../scss/colours.js';
+	import { Side } from '../Types/Internal/Side.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import { getContext } from 'svelte';
+	import Icon from './Icon.svelte';
+	import type { StepButtonProps } from './StepButtonProps.js';
+
+	let { option, selected, index }: StepButtonProps<Args> = $props();
+
+	let disabled = $state(true);
+	let visible = $state(true);
+	let isValid = $state(true);
+
+	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
+
+	$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
+	{disabled}
+	onclick={() => {
+		option.onclick();
+	}}
+	type="button"
+	class="tab"
+	class:invalid={!isValid}
+	class:hidden={!visible}
+	onmouseenter={(e) => {
+		if (option.label) {
+			const rect = (e.target as HTMLButtonElement).getBoundingClientRect();
+			tooltipContext.showTooltip({
+				text: option.label,
+				arrow: Side.Top,
+				delay: Delay.Default,
+				rect,
+			});
+		}
+	}}
+	onmouseleave={() => {
+		if (option.label) {
+			tooltipContext.hideTooltip(option.label);
+		}
+	}}
+>
+	<div
+		class="bordered"
+		class:invalid={!isValid}
+	>
+		{#if option.iconLeft}
+			<Icon
+				{...option.iconLeft}
+				colour={Colour['$brand-primary']}
+			/>
+		{/if}
+		{index + 1}
+		{#if !isValid}
+			<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>button.tab.hidden {
+  display: none !important;
+}
+
+.tab {
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 600;
+  aspect-ratio: 1;
+  background-color: transparent;
+  border: solid 1px #cbd4da;
+  border-radius: 50%;
+  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:not([disabled]) {
+  color: #3a4952;
+}
+.tab:not([disabled]):hover, .tab:not([disabled]).selected:hover {
+  background-color: #f4f7f9;
+}
+.tab .bordered {
+  white-space: nowrap;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.tab .bordered.invalid {
+  color: #aa1414;
+  background-color: #f9e9e9;
+}
+.tab.selected {
+  color: #259fc7;
+  border-color: #259fc7;
+}
+.tab.selected.invalid {
+  color: #aa1414;
+  border-color: #aa1414;
+  background-color: #f9e9e9;
+}</style>

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

@@ -0,0 +1,25 @@
+import type { StepButtonProps } from './StepButtonProps.js';
+declare function $$render<Args>(): {
+    props: StepButtonProps<Args>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Args> {
+    props(): ReturnType<typeof $$render<Args>>['props'];
+    events(): ReturnType<typeof $$render<Args>>['events'];
+    slots(): ReturnType<typeof $$render<Args>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Args>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Args>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Args>['props']>, ReturnType<__sveltets_Render<Args>['events']>, ReturnType<__sveltets_Render<Args>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Args>['bindings']>;
+    } & ReturnType<__sveltets_Render<Args>['exports']>;
+    <Args>(internal: unknown, props: ReturnType<__sveltets_Render<Args>['props']> & {}): ReturnType<__sveltets_Render<Args>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const StepButton: $$IsomorphicComponent;
+type StepButton<Args> = InstanceType<typeof StepButton<Args>>;
+export default StepButton;

package/dist/Components/StepButtonProps.d.ts

@@ -0,0 +1,4 @@
+import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
+export interface StepButtonProps<Args> extends TabGroupButtonProps<Args> {
+    index: number;
+}

package/dist/Components/StepButtonProps.js

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

package/dist/Components/StepForm.svelte

@@ -0,0 +1,188 @@
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="CommonDenominator"
+>
+	import { ColourSet } from '../scss/colours.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import { onMount, untrack } from 'svelte';
+	import Button from './Button.svelte';
+	import StepButton from './StepButton.svelte';
+	import type { StepFormProps } from './StepFormProps.js';
+
+	let { name, steps, currentStep }: StepFormProps<CommonDenominator> = $props();
+
+	onMount(() => {
+		if (name) {
+			const tabName = sessionStorage.getItem(`${name}-active-tab`);
+			if (tabName) {
+				steps.find((it) => it.label === tabName)?.onclick();
+			}
+		}
+	});
+
+	const indexOfCurrent = $derived(currentStep ? steps.indexOf(currentStep) : -1);
+
+	const previous = $derived.by(() => {
+		for (let i = indexOfCurrent - 1; i > -1; i--) {
+			const next = steps.at(i);
+
+			if (next == null || !next.disabled || next.visible != false) {
+				return next ?? null;
+			}
+		}
+		return null;
+	});
+
+	const next = $derived.by(() => {
+		for (let i = indexOfCurrent + 1; i < steps.length; i++) {
+			const next = steps.at(i);
+
+			if (next == null || !next.disabled || next.visible != false) {
+				return next ?? null;
+			}
+		}
+		return null;
+	});
+
+	$effect(() => {
+		if (name && currentStep) {
+			untrack(() => {
+				sessionStorage.setItem(`${name}-active-tab`, currentStep.label);
+			});
+		}
+	});
+</script>
+
+<div class="wrapper noscroll">
+	<div class="tabs">
+		{#each steps as option, index (index)}
+			<StepButton
+				{option}
+				{index}
+				selected={currentStep?.label === option.label}
+			/>
+		{/each}
+		<div class="divider"></div>
+
+		<div class="steps">
+			<Button
+				size={Size.Small}
+				fullWidth
+				disabled={!previous}
+				onclick={() => {
+					previous?.onclick();
+				}}
+				colourSet={ColourSet.Secondary}>Previous</Button
+			>
+			<Button
+				size={Size.Small}
+				fullWidth
+				onclick={() => {
+					next?.onclick();
+				}}
+				disabled={!next}
+				colourSet={ColourSet.Primary}>Next</Button
+			>
+		</div>
+	</div>
+
+	<div class="content noscroll">
+		{#if currentStep}
+			{@render currentStep.content(currentStep.args)}
+		{:else}
+			<div class="wrapper bg">
+				<span class="red">No Step Selected</span>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>.bg {
+  padding: 1.5rem;
+  background-color: #f9e9e9;
+  color: #c31818;
+}
+
+.divider {
+  flex-grow: 1;
+}
+
+.steps {
+  display: flex;
+  flex-flow: row nowrap;
+  width: 252px;
+  padding: 4px;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.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: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  flex-basis: 64px;
+  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.875rem;
+  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/StepForm.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { StepFormProps } from './StepFormProps.js';
+declare function $$render<CommonDenominator>(): {
+    props: StepFormProps<CommonDenominator>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<CommonDenominator> {
+    props(): ReturnType<typeof $$render<CommonDenominator>>['props'];
+    events(): ReturnType<typeof $$render<CommonDenominator>>['events'];
+    slots(): ReturnType<typeof $$render<CommonDenominator>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <CommonDenominator>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<CommonDenominator>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<CommonDenominator>['props']>, ReturnType<__sveltets_Render<CommonDenominator>['events']>, ReturnType<__sveltets_Render<CommonDenominator>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<CommonDenominator>['bindings']>;
+    } & ReturnType<__sveltets_Render<CommonDenominator>['exports']>;
+    <CommonDenominator>(internal: unknown, props: ReturnType<__sveltets_Render<CommonDenominator>['props']> & {}): ReturnType<__sveltets_Render<CommonDenominator>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const StepForm: $$IsomorphicComponent;
+type StepForm<CommonDenominator> = InstanceType<typeof StepForm<CommonDenominator>>;
+export default StepForm;

package/dist/Components/StepFormProps.d.ts

@@ -0,0 +1,6 @@
+import type { TabOption } from '../Types/Internal/TabOption.js';
+export interface StepFormProps<CommonDenominator> {
+    name?: string;
+    steps: Array<TabOption<CommonDenominator>>;
+    currentStep: TabOption<CommonDenominator> | undefined;
+}

package/dist/Components/StepFormProps.js

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

package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.js

@@ -1,4 +1,4 @@
-import { asyncSleep } from '../../../Helpers/Helpers.svelte.js';
+import { asyncSleep, generateShortUUID, getAccessorSortingFn, } from '../../../Helpers/Helpers.svelte.js';
 import { Colour } from '../../../scss/colours.js';
 import { ExampleSelectEnum } from '../../../Types/Examples/ExampleSelectEnum.js';
 import { Validity } from '../../../Types/Internal/Validity.js';
@@ -55,6 +55,16 @@ export function generateExampleItemColumnDefs(modal) {
         isEnabled: () => true,
         isValid,
     }));
+    const uuidByIndex = new Map();
+    const statusAccessorFn = async (item) => {
+        const foundByIndex = uuidByIndex.get(item.id);
+        if (foundByIndex) {
+            return foundByIndex;
+        }
+        const newlyMade = generateShortUUID();
+        uuidByIndex.set(item.id, newlyMade);
+        return newlyMade;
+    };
     let defs = $state([
         expandDef,
         new ValidityDef({
@@ -64,6 +74,26 @@ export function generateExampleItemColumnDefs(modal) {
             isValid,
             modal,
         }),
+        new DisplayDef({
+            id: 'orderLineStatus',
+            header: 'Order Line Status',
+            allowSorting: true,
+            debug: true,
+            accessorFn: statusAccessorFn,
+            filterValueType: 'Select',
+            getOptions: async () => {
+                void uuidByIndex.size;
+                const mapped = [
+                    { label: 'Pending', value: 'Pending' },
+                    ...[...uuidByIndex.values()].map((it) => {
+                        return { label: it, value: it };
+                    }),
+                ];
+                return mapped;
+            },
+            getSortingFn: (desc) => getAccessorSortingFn(statusAccessorFn, desc),
+            allowFiltering: true,
+        }),
         new DisplayDef({
             header: 'ID',
             id: 'id',

package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.d.ts

@@ -4,7 +4,6 @@ import { AccessorDef, type AccessorDefProps } from './AccessorDef.svelte.js';
 export interface SelectDefProps<T extends object, in FilterValueType, out SelectValueType> extends AccessorDefProps<T, FilterValueType, SelectValueType> {
     getOptions: () => Array<SelectOption<SelectValueType>> | Promise<Array<SelectOption<SelectValueType>>>;
     getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
-    sortingFn?: (a: T, b: T) => 1 | -1 | 0;
     getSpecificOptions?: (item: T, index: number) => Array<SelectOption<SelectValueType>> | Promise<Array<SelectOption<SelectValueType>>>;
     optional?: boolean;
     clearable?: boolean;
@@ -15,7 +14,6 @@ export declare class SelectDef<T extends object, in FilterValueType, out SelectV
     private _filterFn;
     get filterFn(): FilterFn<T, FilterValueType> | undefined;
     set filterFn(v: FilterFn<T, FilterValueType> | undefined);
-    readonly sortingFn?: (a: T, b: T) => 1 | -1 | 0;
     readonly optional: boolean;
     readonly clearable: boolean;
     readonly getSpecificOptions?: (item: T, index: number) => Array<SelectOption<SelectValueType>> | Promise<Array<SelectOption<SelectValueType>>>;

package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.js

@@ -5,7 +5,6 @@ export class SelectDef extends AccessorDef {
         super(props);
         this.getSpecificOptions = $derived(props.getSpecificOptions); //done in the base class now
         // this.getOptions = $derived(props.getOptions); // done in the base class now
-        this.sortingFn = $derived(props.sortingFn);
         this.optional = $derived(props.optional ?? false);
         this.clearable = $derived(props.clearable ?? true);
         // this.getDisplayValue = $derived(props.getDisplayValue); //done in the base class now
@@ -19,7 +18,6 @@ export class SelectDef extends AccessorDef {
     set filterFn(v) {
         this._filterFn = v;
     }
-    sortingFn;
     optional;
     clearable;
     getSpecificOptions;

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts

@@ -21,6 +21,7 @@ export interface ColumnDefProps<T extends object, in FilterFnType, out OptionsTy
     resizable?: boolean;
     isValid?: ValidationFn<T>;
     filterFn?: FilterFn<T, FilterFnType>;
+    getSortingFn?: (desc: boolean) => (a: T, b: T) => 1 | -1 | 0;
     filterValueType?: FilterValueType;
     getOptions?: () => Array<SelectOption<OptionsType>> | Promise<Array<SelectOption<OptionsType>>>;
     accessorFn?: AccessorFn<T>;
@@ -57,6 +58,7 @@ export declare abstract class ColumnDef<T extends object, in FilterFnType = neve
     set filterValueType(v: FilterValueType | undefined);
     readonly getDisplayValue: ((item: T, index: number) => string | null | Promise<string | null>) | undefined;
     toJSON(): ColumnJSONRepresentation;
+    readonly getSortingFn: ((desc: boolean) => (a: T, b: T) => 1 | -1 | 0) | undefined;
     readonly isEditable: (item: T, index: number) => boolean | Promise<boolean>;
     readonly resizable: boolean;
     readonly header: string | Snippet;

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js

@@ -16,6 +16,7 @@ export class ColumnDef {
         this._filterValueType = $derived(props.filterValueType);
         this.getDisplayValue = $derived(props.getDisplayValue);
         this.debug = $derived(props.debug ?? false);
+        this.getSortingFn = $derived(props.getSortingFn);
         this.getOptions = $derived(props.getOptions);
     }
     id;
@@ -84,6 +85,7 @@ export class ColumnDef {
             filterValueType: this.filterValueType,
         };
     }
+    getSortingFn;
     isEditable;
     resizable;
     header;

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -725,6 +725,9 @@ export class TableContext {
         if (!def) {
             return undefined;
         }
+        if (def.getSortingFn != undefined) {
+            return def.getSortingFn(desc);
+        }
         if (def instanceof DisplayDef ||
             def instanceof TextInputDef ||
             def instanceof NumberInputDef ||
@@ -735,7 +738,7 @@ export class TableContext {
             return checkboxSortingFn(id, desc);
         }
         if (def instanceof SelectDef) {
-            return def.sortingFn ?? comparableSortingFn(id, desc);
+            return comparableSortingFn(id, desc);
         }
         if (def instanceof ProgressBarDef) {
             return progressSortingFn(id, desc);

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

@@ -64,3 +64,4 @@ export interface ICreateTableArgs<T extends object, RowIdType extends Primitive>
     selectionExtractor: (item: T) => RowIdType | Promise<RowIdType>;
 }
 export declare function createLocalTable<T extends object, RowIdType extends Primitive>(args: ICreateTableArgs<T, RowIdType>): TableContext<T, RowIdType>;
+export declare function getAccessorSortingFn<T, V>(accessorFn: (item: T) => V, desc: boolean): (a: T, b: T) => 1 | 0 | -1;

package/dist/Helpers/Helpers.svelte.js

@@ -421,3 +421,40 @@ export function createLocalTable(args) {
         getUserId: args.getUserId,
     });
 }
+export function getAccessorSortingFn(accessorFn, desc) {
+    return desc
+        ? (_a, _b) => {
+            const a = accessorFn(_a);
+            const b = accessorFn(_b);
+            if (a == undefined && b != undefined) {
+                return 1;
+            }
+            if (b == undefined && a != undefined) {
+                return -1;
+            }
+            if (a < b) {
+                return 1;
+            }
+            if (a > b) {
+                return -1;
+            }
+            return 0;
+        }
+        : (_a, _b) => {
+            const a = accessorFn(_a);
+            const b = accessorFn(_b);
+            if (a == undefined && b != undefined) {
+                return 1;
+            }
+            if (b == undefined && a != undefined) {
+                return -1;
+            }
+            if (a < b) {
+                return -1;
+            }
+            if (a > b) {
+                return 1;
+            }
+            return 0;
+        };
+}

package/dist/index.d.ts

@@ -132,7 +132,7 @@ 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, 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, 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 { AttributeOperation } from './Types/Internal/AttributeOperation.js';
 export { type BigRadioOption } from './Types/Internal/BigRadioOption.js';

package/dist/index.js

@@ -132,7 +132,7 @@ 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, 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, 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 { AttributeOperation } from './Types/Internal/AttributeOperation.js';
 export {} from './Types/Internal/BigRadioOption.js';

package/dist/scss/_mixins.scss

@@ -2594,20 +2594,25 @@
 				flex-flow: row;
 				// align-items: flex-start;
 				gap: 1rem;
-				span {
-					display: inline-flex;
-					flex-flow: row;
-					align-items: center;
-					gap: 0.1875rem;
-					fill: colours.$font-secondary;
-					color: colours.$font-secondary;
-					font-size: #{sizing.$text-small-small-medium};
-				}
+
+				@include heading-subtitle;
 			}
 		}
 	}
 }
 
+@mixin heading-subtitle {
+	span {
+		display: inline-flex;
+		flex-flow: row;
+		align-items: center;
+		gap: 0.1875rem;
+		fill: colours.$font-secondary;
+		color: colours.$font-secondary;
+		font-size: #{sizing.$text-small-small-medium};
+	}
+}
+
 @mixin attributes-modal-inner {
 	.flex {
 		display: flex;

package/package.json

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