@softwareone/spi-sv5-library 1.3.0 → 1.3.1

package/dist/Form/Select/Select.svelte

@@ -9,70 +9,86 @@
 		options: string[] | SelectOption[];
 		label?: string;
 		placeholder?: string;
+		infoTooltip?: string;
 		required?: boolean;
 		optional?: boolean;
 		searchable?: boolean;
-		clearable?: boolean;
+		hideClearButton?: boolean;
 		multiple?: boolean;
-		closeAfterSelect?: boolean;
-		readonly?: boolean;
+		keepOpen?: boolean;
+		disabled?: boolean;
 		disableValidationColor?: boolean;
 		value?: string | string[] | null;
 		error?: string | string[];
 		customSelection?: Snippet<[option: SelectOption]>;
 		customOption?: Snippet<[option: SelectOption]>;
-		infoTooltip?: string;
+		onclear?: () => void;
+		onchange?: (option: SelectOption) => void;
 	}
 
 	let {
 		options,
 		label,
-		placeholder,
+		placeholder = 'Please select',
+		infoTooltip,
 		required = false,
 		optional = false,
 		searchable = false,
-		clearable = false,
+		hideClearButton = false,
 		multiple = false,
-		closeAfterSelect = false,
-		readonly = false,
+		keepOpen = false,
+		disabled = false,
 		disableValidationColor = false,
 		value = $bindable(),
 		error,
 		customSelection,
 		customOption,
-		infoTooltip
+		onclear,
+		onchange
 	}: SelectProps = $props();
 
+	let searchText = $state('');
+	let showInTopPosition = $state(false);
+	let showListOptions = $state(false);
+	let selectedOptions = $state<SelectOption[]>([]);
+	let selectedOption = $state<SelectOption | undefined>();
+
 	let dropdownElement: HTMLElement;
 
 	const isStringArray = (items: string[] | SelectOption[]): items is string[] =>
 		typeof items[0] === 'string';
 
-	const originalOptions: SelectOption[] = isStringArray(options)
-		? options.map((value) => ({ label: value, value }))
-		: options;
+	const filterOptions = (): SelectOption[] => {
+		const text = searchText.toLowerCase();
 
-	let searchText = $state('');
-	let showInTopPosition = $state(false);
-	let showListOptions = $state(false);
-	let filteredOptions = $state(originalOptions);
-	let selectedOptions = $state<SelectOption[]>([]);
-	let selectedOption = $state<SelectOption | undefined>();
+		return text
+			? originalOptions.filter((option) => option.label.toLowerCase().includes(text))
+			: originalOptions;
+	};
+
+	const checkNoOptionsAvailable = (): boolean => {
+		if (!options.length) return true;
+		return multiple && originalOptions.every((option) => valueSet.has(option.value));
+	};
 
-	const isInvalid: boolean = $derived(!!error && !disableValidationColor);
-	const isValid: boolean = $derived(!isInvalid && (!!value || optional) && !disableValidationColor);
-	const noOptionsAvailable: boolean = $derived(
-		options.length === 0 || (multiple && selectedOptions?.length === options.length)
+	const originalOptions = $derived<SelectOption[]>(
+		isStringArray(options) ? options.map((value) => ({ label: value, value })) : options
 	);
+	const valueSet = $derived<Set<string>>(new Set(value));
+	const isInvalid = $derived<boolean>(!!error && !disableValidationColor);
+	const isValid = $derived<boolean>(!isInvalid && (!!value || optional) && !disableValidationColor);
+	const filteredOptions = $derived<SelectOption[]>(filterOptions());
+	const noOptionsAvailable = $derived<boolean>(checkNoOptionsAvailable());
 
 	const generateSelectOption = (value: string): SelectOption => ({ label: value, value });
+
 	const generateMultiselectValue = (option: SelectOption): string => option.value;
 
 	const canBeVisible = (option: SelectOption): boolean =>
 		!selectedOptions.some((selectedOption) => selectedOption.value === option.value);
 
-	const onCloseAfterSelect = () => {
-		if (closeAfterSelect && showListOptions) {
+	const closeAfterSelect = () => {
+		if (!keepOpen && showListOptions) {
 			showListOptions = false;
 		}
 	};
@@ -85,7 +101,9 @@
 			selectedOption = option;
 			value = option.value;
 		}
-		onCloseAfterSelect();
+
+		closeAfterSelect();
+		onchange?.(option);
 	};
 
 	const onClearAll = () => {
@@ -97,7 +115,7 @@
 			value = '';
 		}
 
-		onCloseAfterSelect();
+		onclear?.();
 	};
 
 	const onRemoveSelectedOption = (index: number) => {
@@ -107,16 +125,8 @@
 		value = selectedOptions.map(generateMultiselectValue);
 	};
 
-	const onInputSearch = () => {
-		const text = searchText.toLowerCase();
-
-		filteredOptions = text
-			? originalOptions.filter((option) => option.label.toLowerCase().includes(text))
-			: originalOptions;
-	};
-
 	const onClearSearch = () => {
-		filteredOptions = originalOptions;
+		searchText = '';
 	};
 
 	const onHandleClickOutside = (event: MouseEvent) => {
@@ -162,7 +172,7 @@
 	{/if}
 
 	<div
-		class={['dropdown', readonly ? 'readonly' : [isInvalid && 'invalid', isValid && 'valid']]}
+		class={['dropdown', disabled ? 'disabled' : [isInvalid && 'invalid', isValid && 'valid']]}
 		bind:this={dropdownElement}
 	>
 		<section
@@ -193,24 +203,25 @@
 				{/if}
 			</div>
 
-			{#if clearable && (selectedOption || selectedOptions.length)}
+			{#if !hideClearButton && (selectedOption || selectedOptions.length)}
 				{@render removeButton(onClearAll)}
 			{/if}
 		</section>
 
 		{#if showListOptions}
 			<section class="dropdown-list" class:upwards={showInTopPosition} use:autoDirection>
-				{#if noOptionsAvailable}
+				{#if searchable && !noOptionsAvailable}
+					<Search
+						placeholder="Search"
+						bind:value={searchText}
+						onclear={onClearSearch}
+						autocomplete="off"
+					/>
+				{/if}
+
+				{#if noOptionsAvailable || !filteredOptions.length}
 					<p class="dropdown-list-no-options-message">No options</p>
 				{:else}
-					{#if searchable}
-						<Search
-							placeholder="Search"
-							bind:value={searchText}
-							oninput={onInputSearch}
-							onclear={onClearSearch}
-						/>
-					{/if}
 					<ul class="dropdown-list-options-container">
 						{#each filteredOptions as filteredOption}
 							{@const isVisible = multiple ? canBeVisible(filteredOption) : true}
@@ -290,7 +301,7 @@
 		--gray-2: #e0e5e8;
 		--gray-3: #aeb1b9;
 		--gray-4: #6b7180;
-		--border: 1px solid var(--gray-3);
+		--border: 1px solid var(--gray-4);
 
 		display: flex;
 		flex-direction: column;
@@ -314,7 +325,7 @@
 			box-shadow 0.2s ease-in-out;
 	}
 
-	.dropdown.readonly {
+	.dropdown.disabled {
 		cursor: not-allowed;
 
 		> .dropdown-container {
@@ -323,11 +334,11 @@
 		}
 	}
 
-	.dropdown:not(.readonly, .invalid, .valid):hover {
+	.dropdown:not(.disabled, .invalid, .valid):hover {
 		border: 1px solid var(--primary-color);
 	}
 
-	.dropdown:not(.readonly, .invalid, .valid):focus-within {
+	.dropdown:not(.disabled, .invalid, .valid):focus-within {
 		border: 1px solid var(--primary-color);
 		box-shadow: 0 0 0 3px rgba(149, 155, 255, 0.3);
 	}

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

@@ -4,19 +4,21 @@ interface SelectProps {
     options: string[] | SelectOption[];
     label?: string;
     placeholder?: string;
+    infoTooltip?: string;
     required?: boolean;
     optional?: boolean;
     searchable?: boolean;
-    clearable?: boolean;
+    hideClearButton?: boolean;
     multiple?: boolean;
-    closeAfterSelect?: boolean;
-    readonly?: boolean;
+    keepOpen?: boolean;
+    disabled?: boolean;
     disableValidationColor?: boolean;
     value?: string | string[] | null;
     error?: string | string[];
     customSelection?: Snippet<[option: SelectOption]>;
     customOption?: Snippet<[option: SelectOption]>;
-    infoTooltip?: string;
+    onclear?: () => void;
+    onchange?: (option: SelectOption) => void;
 }
 declare const Select: import("svelte").Component<SelectProps, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/ProgressWizard/ProgressWizard.svelte

@@ -7,9 +7,8 @@
 		steps: ProgressWizardStep[];
 		readonly?: boolean;
 		currentStep: number;
-		lastActiveStep: number;
 		content: Snippet;
-		additionalButtons: Snippet;
+		additionalButtons: Snippet<[lastActiveStep: number]>;
 		oncancel: VoidFunction;
 	}
 
@@ -17,7 +16,6 @@
 		steps,
 		readonly = false,
 		currentStep = $bindable(0),
-		lastActiveStep = $bindable(0),
 		content,
 		additionalButtons,
 		oncancel
@@ -25,6 +23,7 @@
 
 	const allStepsDisabled: boolean = steps.every((step) => step.disabled);
 	const firstActiveStep: number = steps.findIndex((step) => !step.disabled) + 1;
+	const lastActiveStep: number = steps.findLastIndex((step) => !step.disabled) + 1;
 
 	const onclickNext = () => {
 		const nextStepIndex = steps.slice(currentStep).findIndex((step) => !step.disabled);
@@ -47,7 +46,6 @@
 	};
 
 	currentStep = stepToStart();
-	lastActiveStep = steps.findLastIndex((step) => !step.disabled) + 1;
 
 	$effect(() => {
 		if (!readonly) {
@@ -132,7 +130,7 @@
 					{/if}
 				{/if}
 
-				{@render additionalButtons()}
+				{@render additionalButtons(lastActiveStep)}
 			{/if}
 		</div>
 	</section>

package/dist/ProgressWizard/ProgressWizard.svelte.d.ts

@@ -4,11 +4,10 @@ interface ProgressWizardProps {
     steps: ProgressWizardStep[];
     readonly?: boolean;
     currentStep: number;
-    lastActiveStep: number;
     content: Snippet;
-    additionalButtons: Snippet;
+    additionalButtons: Snippet<[lastActiveStep: number]>;
     oncancel: VoidFunction;
 }
-declare const ProgressWizard: import("svelte").Component<ProgressWizardProps, {}, "currentStep" | "lastActiveStep">;
+declare const ProgressWizard: import("svelte").Component<ProgressWizardProps, {}, "currentStep">;
 type ProgressWizard = ReturnType<typeof ProgressWizard>;
 export default ProgressWizard;

package/dist/ProgressWizard/context.d.ts

@@ -0,0 +1,4 @@
+import { type Writable } from 'svelte/store';
+import type { ProgressWizardStep } from './progressWizardState.svelte.js';
+export declare const setProgressWizardStepsContext: (steps: ProgressWizardStep[]) => Writable<ProgressWizardStep[]>;
+export declare const getProgressWizardContext: () => Writable<ProgressWizardStep[]>;

package/dist/ProgressWizard/context.js

@@ -0,0 +1,11 @@
+import { getContext, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+const stepsKey = Symbol('steps');
+export const setProgressWizardStepsContext = (steps) => {
+    const stepsContext = writable(steps);
+    setContext(stepsKey, stepsContext);
+    return stepsContext;
+};
+export const getProgressWizardContext = () => {
+    return getContext(stepsKey);
+};

package/dist/ProgressWizard/progressWizardState.svelte.d.ts

@@ -4,3 +4,4 @@ export type ProgressWizardStep = {
     isValid: boolean;
     disabled: boolean;
 };
+export declare const setStepValidity: (steps: ProgressWizardStep[], title: string, isValid: boolean) => void;

package/dist/ProgressWizard/progressWizardState.svelte.js

@@ -1 +1,6 @@
-export {};
+export const setStepValidity = (steps, title, isValid) => {
+    const index = steps.findIndex((step) => step.title === title);
+    if (index !== -1) {
+        steps[index].isValid = isValid;
+    }
+};

package/dist/index.d.ts

@@ -28,8 +28,9 @@ import Modal from './Modal/Modal.svelte';
 import type { ModalProps } from './Modal/modalState.svelte.js';
 import Notification from './Notification/Notification.svelte';
 import ProgressPage from './ProgressPage/ProgressPage.svelte';
+import { setProgressWizardStepsContext, getProgressWizardContext } from './ProgressWizard/context.js';
 import ProgressWizard from './ProgressWizard/ProgressWizard.svelte';
-import type { ProgressWizardStep } from './ProgressWizard/progressWizardState.svelte.js';
+import { setStepValidity, type ProgressWizardStep } from './ProgressWizard/progressWizardState.svelte.js';
 import Search from './Search/Search.svelte';
 import Spinner from './Spinner/Spinner.svelte';
 import Tabs from './Tabs/Tabs.svelte';
@@ -37,4 +38,4 @@ import type { Tab } from './Tabs/tabsState.svelte.js';
 import Toaster from './Toast/Toast.svelte';
 import { addToast, type Toast } from './Toast/toastState.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
-export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip, type BreadcrumbsNameMap, type HighlightPanelColumn, type HomeItem, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type Tab, type Toast };
+export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, getProgressWizardContext, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, setStepValidity, setProgressWizardStepsContext, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip, type BreadcrumbsNameMap, type HighlightPanelColumn, type HomeItem, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type Tab, type Toast };

package/dist/index.js

@@ -24,11 +24,13 @@ import Sidebar from './Menu/Sidebar.svelte';
 import Modal from './Modal/Modal.svelte';
 import Notification from './Notification/Notification.svelte';
 import ProgressPage from './ProgressPage/ProgressPage.svelte';
+import { setProgressWizardStepsContext, getProgressWizardContext } from './ProgressWizard/context.js';
 import ProgressWizard from './ProgressWizard/ProgressWizard.svelte';
+import { setStepValidity } from './ProgressWizard/progressWizardState.svelte.js';
 import Search from './Search/Search.svelte';
 import Spinner from './Spinner/Spinner.svelte';
 import Tabs from './Tabs/Tabs.svelte';
 import Toaster from './Toast/Toast.svelte';
 import { addToast } from './Toast/toastState.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
-export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip };
+export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, getProgressWizardContext, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, setStepValidity, setProgressWizardStepsContext, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.3.0",
+	"version": "1.3.1",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",