@softwareone/spi-sv5-library 1.13.0 → 1.14.1

package/README.md

@@ -17,7 +17,6 @@ Import the components you need into your Svelte application:
 ```javascript
 import {
 	Avatar,
-	Breadcrumbs,
 	Button,
 	Card,
 	Chips,
@@ -45,7 +44,6 @@ Import the types you need into your Svelte application:
 
 ```javascript
 import {
-	type BreadcrumbsNameMap,
 	type HighlightPanelColumn,
 	type MenuItem,
 	type ModalProps,
@@ -58,7 +56,6 @@ import {
 # List of components
 
 - Avatar
-- Breadcrumbs
 - Button
 - Card
 - Chips
@@ -84,8 +81,6 @@ import {
 
 # List of types per component
 
-- Breadcrumbs
-    - BreadcrumbsNameMap
 - Chips
     - ChipType
 - HighlightPanel

package/dist/Accordion/Accordion.svelte

@@ -1,19 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
-	interface AccordionProps {
+	interface Props {
 		title: string;
 		disableBorder?: boolean;
 		isOpen?: boolean;
 		children: Snippet;
 	}
 
-	let {
-		title,
-		disableBorder = false,
-		isOpen = $bindable(false),
-		children
-	}: AccordionProps = $props();
+	let { title, disableBorder = false, isOpen = $bindable(false), children }: Props = $props();
 
 	const toggleAccordion = () => {
 		isOpen = !isOpen;

package/dist/Accordion/Accordion.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
-interface AccordionProps {
+interface Props {
     title: string;
     disableBorder?: boolean;
     isOpen?: boolean;
     children: Snippet;
 }
-declare const Accordion: import("svelte").Component<AccordionProps, {}, "isOpen">;
+declare const Accordion: import("svelte").Component<Props, {}, "isOpen">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/dist/Announcement/Announcement.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 
-	import type { AnnouncementItem } from './AnnouncementState.svelte.js';
+	import type { AnnouncementItem } from './types.js';
 
 	interface Props {
 		announcementItems?: AnnouncementItem[];

package/dist/Announcement/Announcement.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { AnnouncementItem } from './AnnouncementState.svelte.js';
+import type { AnnouncementItem } from './types.js';
 interface Props {
     announcementItems?: AnnouncementItem[];
     showAnnouncement: boolean;

package/dist/Avatar/Avatar.svelte

@@ -2,7 +2,7 @@
 	type BackgroundColor = '#472AFF' | '#25282D';
 	type TextColor = '#333840' | '#FFFFFF';
 
-	interface AvatarProps {
+	interface Props {
 		text: string;
 		backgroundColor?: BackgroundColor;
 		textColor?: TextColor;
@@ -14,7 +14,7 @@
 		backgroundColor = '#25282D',
 		textColor = '#FFFFFF',
 		keepOrder = false
-	}: AvatarProps = $props();
+	}: Props = $props();
 
 	const avatarSrc = (text: string): string => {
 		const defaultValue = 'SO';

package/dist/Avatar/Avatar.svelte.d.ts

@@ -1,11 +1,11 @@
 type BackgroundColor = '#472AFF' | '#25282D';
 type TextColor = '#333840' | '#FFFFFF';
-interface AvatarProps {
+interface Props {
     text: string;
     backgroundColor?: BackgroundColor;
     textColor?: TextColor;
     keepOrder?: boolean;
 }
-declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+declare const Avatar: import("svelte").Component<Props, {}, "">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/Button/Button.svelte

@@ -6,7 +6,7 @@
 	type Variant = 'primary' | 'secondary' | 'outline' | 'outline-none';
 	type VariantColor = 'primary' | 'danger';
 
-	interface ButtonProps extends HTMLButtonAttributes {
+	interface Props extends HTMLButtonAttributes {
 		variant?: Variant;
 		variantColor?: VariantColor;
 		loading?: boolean;
@@ -20,7 +20,7 @@
 		disabled = false,
 		children,
 		...props
-	}: ButtonProps = $props();
+	}: Props = $props();
 
 	const clearButtonFocus: Attachment<HTMLButtonElement> = (element: HTMLButtonElement) => {
 		if (loading) element.blur();

package/dist/Button/Button.svelte.d.ts

@@ -2,12 +2,12 @@ import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 type Variant = 'primary' | 'secondary' | 'outline' | 'outline-none';
 type VariantColor = 'primary' | 'danger';
-interface ButtonProps extends HTMLButtonAttributes {
+interface Props extends HTMLButtonAttributes {
     variant?: Variant;
     variantColor?: VariantColor;
     loading?: boolean;
     children: Snippet;
 }
-declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/Card/Card.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
-	interface CardProps {
+	interface Props {
 		children?: Snippet;
 		disablePadding?: boolean;
 	}
 
-	let { children, disablePadding = false }: CardProps = $props();
+	let { children, disablePadding = false }: Props = $props();
 </script>
 
 <div class={['card', !disablePadding && 'padding']}>

package/dist/Card/Card.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
-interface CardProps {
+interface Props {
     children?: Snippet;
     disablePadding?: boolean;
 }
-declare const Card: import("svelte").Component<CardProps, {}, "">;
+declare const Card: import("svelte").Component<Props, {}, "">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/Chips/Chips.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { ChipType } from './chipsState.svelte.js';
+	import { ChipType } from './enums.js';
 
-	interface ChipsProps {
+	interface Props {
 		type?: ChipType;
 		text?: string;
 	}
 
-	let { type = ChipType.Info, text = type.charAt(0).toUpperCase() + type.slice(1) }: ChipsProps =
+	let { type = ChipType.Info, text = type.charAt(0).toUpperCase() + type.slice(1) }: Props =
 		$props();
 </script>
 

package/dist/Chips/Chips.svelte.d.ts

@@ -1,8 +1,8 @@
-import { ChipType } from './chipsState.svelte.js';
-interface ChipsProps {
+import { ChipType } from './enums.js';
+interface Props {
     type?: ChipType;
     text?: string;
 }
-declare const Chips: import("svelte").Component<ChipsProps, {}, "">;
+declare const Chips: import("svelte").Component<Props, {}, "">;
 type Chips = ReturnType<typeof Chips>;
 export default Chips;

package/dist/Confirmation/Confirmation.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Button, Modal, Spinner, addToast } from '../index.js';
+
+	interface Props {
+		title: string;
+		confirmationText: string;
+		confirmButtonText?: string;
+		showModal?: boolean;
+		onconfirm: () => Promise<string | void> | string | void;
+		onclose?: VoidFunction;
+	}
+
+	let {
+		title,
+		confirmationText,
+		confirmButtonText = 'Proceed',
+		showModal = $bindable(false),
+		onconfirm,
+		onclose
+	}: Props = $props();
+
+	let isLoading = $state(false);
+
+	const handleConfirm = async () => {
+		isLoading = true;
+
+		const error = await onconfirm();
+		if (error === undefined) {
+			showModal = false;
+		} else {
+			addToast({ message: error, type: 'danger' });
+		}
+
+		isLoading = false;
+	};
+</script>
+
+<Modal {title} bind:showModal {onclose}>
+	<Spinner show={isLoading} />
+	<p>{confirmationText}</p>
+	{#snippet footer()}
+		<Button type="button" onclick={handleConfirm}>{confirmButtonText}</Button>
+	{/snippet}
+</Modal>

package/dist/Confirmation/Confirmation.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    title: string;
+    confirmationText: string;
+    confirmButtonText?: string;
+    showModal?: boolean;
+    onconfirm: () => Promise<string | void> | string | void;
+    onclose?: VoidFunction;
+}
+declare const Confirmation: import("svelte").Component<Props, {}, "showModal">;
+type Confirmation = ReturnType<typeof Confirmation>;
+export default Confirmation;

package/dist/Controls/AttachFile/AttachFile.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Attachment } from 'svelte/attachments';
 
-	import type { LabelProps } from '../Label/labelState.svelte.js';
+	import type { LabelProps } from '../Label/types.js';
 	import { Label, Notification } from '../../index.js';
 	import FileManager from './FileManager.svelte';
 	import Warnings from './Warnings.svelte';

package/dist/Controls/AttachFile/AttachFile.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { LabelProps } from '../Label/labelState.svelte.js';
+import type { LabelProps } from '../Label/types.js';
 interface Props extends LabelProps {
     accept?: string;
     multiple?: boolean;

package/dist/Controls/AttachFile/Warnings.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	interface WarningProps {
+	interface Props {
 		validationMessages: string[];
 	}
-	let { validationMessages }: WarningProps = $props();
+	let { validationMessages }: Props = $props();
 </script>
 
 <details class="container">

package/dist/Controls/AttachFile/Warnings.svelte.d.ts

@@ -1,6 +1,6 @@
-interface WarningProps {
+interface Props {
     validationMessages: string[];
 }
-declare const Warnings: import("svelte").Component<WarningProps, {}, "">;
+declare const Warnings: import("svelte").Component<Props, {}, "">;
 type Warnings = ReturnType<typeof Warnings>;
 export default Warnings;

package/dist/Controls/Input/Input.svelte

@@ -2,12 +2,12 @@
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	import Label from '../Label/Label.svelte';
-	import type { LabelProps } from '../Label/labelState.svelte.js';
+	import type { LabelProps } from '../Label/types.js';
 	import InputIcon from './InputIcon.svelte';
 
 	type InputType = 'text' | 'password' | 'number' | 'date' | 'money';
 
-	interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelProps {
+	interface Props extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelProps {
 		type?: InputType;
 		value?: string | number | null;
 		error?: string | string[];
@@ -31,7 +31,7 @@
 		disableValidationColor = false,
 		infoTooltip,
 		...props
-	}: InputProps = $props();
+	}: Props = $props();
 
 	let isPasswordVisible = $state(false);
 

package/dist/Controls/Input/Input.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { LabelProps } from '../Label/labelState.svelte.js';
+import type { LabelProps } from '../Label/types.js';
 type InputType = 'text' | 'password' | 'number' | 'date' | 'money';
-interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelProps {
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelProps {
     type?: InputType;
     value?: string | number | null;
     error?: string | string[];
@@ -9,6 +9,6 @@ interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelP
     currency?: string;
     disableValidationColor?: boolean;
 }
-declare const Input: import("svelte").Component<InputProps, {}, "value">;
+declare const Input: import("svelte").Component<Props, {}, "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/Controls/Label/Label.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Tooltip } from '../../index.js';
-	import type { LabelProps } from './labelState.svelte.js';
+	import type { LabelProps } from './types.js';
 
 	let { label, id, required, optional, infoTooltip }: LabelProps = $props();
 </script>

package/dist/Controls/Label/Label.svelte.d.ts

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

package/dist/Controls/RadioGroup/RadioGroup.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import Label from '../Label/Label.svelte';
-	import type { LabelProps } from '../Label/labelState.svelte.js';
-	import type { OptionValueType, RadioOption } from './radioGroupState.svelte.js';
+	import type { LabelProps } from '../Label/types.js';
+	import type { OptionValueType, RadioOption } from './types.js';
 
-	interface RadioGroupProps extends LabelProps {
+	interface Props extends LabelProps {
 		options: string[] | RadioOption[];
 		name: string;
 		value?: OptionValueType;
@@ -25,7 +25,7 @@
 		row = false,
 		description,
 		onchange
-	}: RadioGroupProps = $props();
+	}: Props = $props();
 
 	const isStringArray = (items: string[] | RadioOption[]): items is string[] =>
 		typeof items[0] === 'string';

package/dist/Controls/RadioGroup/RadioGroup.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { LabelProps } from '../Label/labelState.svelte.js';
-import type { OptionValueType, RadioOption } from './radioGroupState.svelte.js';
-interface RadioGroupProps extends LabelProps {
+import type { LabelProps } from '../Label/types.js';
+import type { OptionValueType, RadioOption } from './types.js';
+interface Props extends LabelProps {
     options: string[] | RadioOption[];
     name: string;
     value?: OptionValueType;
@@ -9,6 +9,6 @@ interface RadioGroupProps extends LabelProps {
     description?: string;
     onchange?: (value: OptionValueType) => void;
 }
-declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "value">;
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;

package/dist/Controls/Select/Select.svelte

@@ -5,9 +5,9 @@
 
 	import { Search, type SelectOption } from '../../index.js';
 	import Label from '../Label/Label.svelte';
-	import type { LabelProps } from '../Label/labelState.svelte.js';
+	import type { LabelProps } from '../Label/types.js';
 
-	interface SelectProps extends LabelProps {
+	interface Props extends LabelProps {
 		options: string[] | SelectOption[];
 		placeholder?: string;
 		searchable?: boolean;
@@ -49,7 +49,7 @@
 		customOption,
 		onclear,
 		onchange
-	}: SelectProps = $props();
+	}: Props = $props();
 
 	let searchText = $state('');
 	let showListOptions = $state(false);
@@ -107,6 +107,11 @@
 			: originalOptions.filter((option) => option.label.toLowerCase().includes(text));
 	});
 
+	const focusInput: Attachment<HTMLElement> = () => {
+		const searchElement = document.getElementById('search-options') as HTMLInputElement;
+		searchElement.focus();
+	};
+
 	const activeOptionScroll: Action<HTMLElement, boolean> = (node, isActive) => {
 		$effect(() => {
 			if (isActive) {
@@ -196,7 +201,11 @@
 
 	const onClearSearch = () => (searchText = '');
 
-	const onFocusDropdownContainer = () => dropdownContainer && dropdownContainer.focus();
+	const onFocusDropdownContainer = (event: Event) => {
+		event.stopPropagation();
+		showListOptions = true;
+		dropdownContainer.focus();
+	};
 
 	const onToggleListOptions = () => (showListOptions = !showListOptions);
 
@@ -275,12 +284,15 @@
 				{@attach autoDirection}
 			>
 				{#if searchable && !noOptionsAvailable}
-					<Search
-						placeholder="Search"
-						bind:value={searchText}
-						onclear={onClearSearch}
-						autocomplete="off"
-					/>
+					<div {@attach focusInput}>
+						<Search
+							id="search-options"
+							placeholder="Search"
+							bind:value={searchText}
+							onclear={onClearSearch}
+							autocomplete="off"
+						/>
+					</div>
 				{/if}
 
 				{#if noOptionsAvailable || !filteredOptions.length}

package/dist/Controls/Select/Select.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type Snippet } from 'svelte';
 import { type SelectOption } from '../../index.js';
-import type { LabelProps } from '../Label/labelState.svelte.js';
-interface SelectProps extends LabelProps {
+import type { LabelProps } from '../Label/types.js';
+interface Props extends LabelProps {
     options: string[] | SelectOption[];
     placeholder?: string;
     searchable?: boolean;
@@ -20,6 +20,6 @@ interface SelectProps extends LabelProps {
     onclear?: () => void;
     onchange?: (option: SelectOption) => void;
 }
-declare const Select: import("svelte").Component<SelectProps, {}, "value">;
+declare const Select: import("svelte").Component<Props, {}, "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/Controls/TextArea/TextArea.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 
-	import type { LabelProps } from '../Label/labelState.svelte.js';
 	import Label from '../Label/Label.svelte';
+	import type { LabelProps } from '../Label/types.js';
 
-	interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'>, LabelProps {
+	interface Props extends Omit<HTMLTextareaAttributes, 'value'>, LabelProps {
 		value?: string | null;
 		error?: string | string[];
 		description?: string;
@@ -26,7 +26,7 @@
 		infoTooltip,
 		disableValidationColor = false,
 		...props
-	}: TextAreaProps = $props();
+	}: Props = $props();
 
 	const componentId = $props.id();
 	const textareaId = id || componentId;

package/dist/Controls/TextArea/TextArea.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
-import type { LabelProps } from '../Label/labelState.svelte.js';
-interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'>, LabelProps {
+import type { LabelProps } from '../Label/types.js';
+interface Props extends Omit<HTMLTextareaAttributes, 'value'>, LabelProps {
     value?: string | null;
     error?: string | string[];
     description?: string;
@@ -8,6 +8,6 @@ interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'>, LabelProp
     resize?: boolean;
     disableValidationColor?: boolean;
 }
-declare const TextArea: import("svelte").Component<TextAreaProps, {}, "value">;
+declare const TextArea: import("svelte").Component<Props, {}, "value">;
 type TextArea = ReturnType<typeof TextArea>;
 export default TextArea;

package/dist/Controls/Toggle/Toggle.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import Label from '../Label/Label.svelte';
-	import type { LabelProps } from '../Label/labelState.svelte.js';
+	import type { LabelProps } from '../Label/types.js';
 
-	interface ToggleProps extends Pick<LabelProps, 'id' | 'label' | 'infoTooltip'> {
+	interface Props extends Pick<LabelProps, 'id' | 'label' | 'infoTooltip'> {
 		checked?: boolean;
 		disabled?: boolean;
 		vertical?: boolean;
@@ -17,7 +17,7 @@
 		infoTooltip,
 		vertical,
 		onchange
-	}: ToggleProps = $props();
+	}: Props = $props();
 </script>
 
 <div class="container" class:vertical>

package/dist/Controls/Toggle/Toggle.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { LabelProps } from '../Label/labelState.svelte.js';
-interface ToggleProps extends Pick<LabelProps, 'id' | 'label' | 'infoTooltip'> {
+import type { LabelProps } from '../Label/types.js';
+interface Props extends Pick<LabelProps, 'id' | 'label' | 'infoTooltip'> {
     checked?: boolean;
     disabled?: boolean;
     vertical?: boolean;
     onchange?: (event: Event) => void;
 }
-declare const Toggle: import("svelte").Component<ToggleProps, {}, "checked">;
+declare const Toggle: import("svelte").Component<Props, {}, "checked">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/DeleteConfirmation/DeleteConfirmation.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
 	import { Button, Input, Modal, Spinner, addToast } from '../index.js';
 
-	interface DeleteConfirmationProps {
+	interface Props {
 		confirmationName?: string;
 		enableDoubleConfirmation?: boolean;
 		showModal?: boolean;
-		ondelete: () => Promise<boolean> | boolean;
+		ondelete: () => Promise<string | void> | string | void;
 		onclose?: VoidFunction;
-		ondeleteSuccess?: () => Promise<void> | void;
 	}
 
 	let {
@@ -15,9 +14,8 @@
 		enableDoubleConfirmation = false,
 		showModal = $bindable(false),
 		ondelete,
-		onclose,
-		ondeleteSuccess
-	}: DeleteConfirmationProps = $props();
+		onclose
+	}: Props = $props();
 
 	let confirmationText = $derived(
 		`Are you sure you want to delete ${confirmationName || 'this item'}?`
@@ -29,13 +27,11 @@
 	const handleDelete = async () => {
 		isLoading = true;
 
-		const isSuccessful = await ondelete();
-
-		if (isSuccessful) {
-			await ondeleteSuccess?.();
+		const error = await ondelete();
+		if (error === undefined) {
 			showModal = false;
 		} else {
-			addToast({ message: 'There was an unexpected error.', type: 'danger' });
+			addToast({ message: error, type: 'danger' });
 		}
 
 		isLoading = false;

package/dist/DeleteConfirmation/DeleteConfirmation.svelte.d.ts

@@ -1,11 +1,10 @@
-interface DeleteConfirmationProps {
+interface Props {
     confirmationName?: string;
     enableDoubleConfirmation?: boolean;
     showModal?: boolean;
-    ondelete: () => Promise<boolean> | boolean;
+    ondelete: () => Promise<string | void> | string | void;
     onclose?: VoidFunction;
-    ondeleteSuccess?: () => Promise<void> | void;
 }
-declare const DeleteConfirmation: import("svelte").Component<DeleteConfirmationProps, {}, "showModal">;
+declare const DeleteConfirmation: import("svelte").Component<Props, {}, "showModal">;
 type DeleteConfirmation = ReturnType<typeof DeleteConfirmation>;
 export default DeleteConfirmation;

package/dist/ErrorPage/ErrorPage.svelte

@@ -5,12 +5,12 @@
 	import FeedbackIcon from '../assets/icons/feedback.svg';
 	import { Button } from '../index.js';
 
-	interface ErrorPageProps {
+	interface Props {
 		status: number;
 		title?: string;
 	}
 
-	let { status, title }: ErrorPageProps = $props();
+	let { status, title }: Props = $props();
 
 	const errorTitle: Record<number, string> = {
 		[404]: 'Page not found',