@softwareone/spi-sv5-library 1.8.8 → 1.8.10

package/dist/Form/Select/Select.svelte

@@ -53,7 +53,6 @@
 	}: SelectProps = $props();
 
 	let searchText = $state('');
-	let showInTopPosition = $state(false);
 	let showListOptions = $state(false);
 
 	let dropdown: HTMLElement;
@@ -117,42 +116,51 @@
 
 	const autoDirection: Attachment<HTMLElement> = (element: HTMLElement) => {
 		const BOTTOM_SPACING_OFFSET = 300;
-		const DROPDOWN_GAP = 8;
+		const DROPDOWN_GAP = 16;
 
 		const updatePosition = () => {
 			const rect = dropdown.getBoundingClientRect();
 			const viewportHeight = window.innerHeight;
 
-			showInTopPosition = rect.bottom + BOTTOM_SPACING_OFFSET > viewportHeight;
+			const showInTopPosition = rect.bottom + BOTTOM_SPACING_OFFSET > viewportHeight;
 
-			if (positionStrategy === 'fixed') {
-				setDropdownStyles(element, rect);
+			if (positionStrategy === 'absolute') {
+				element.classList.toggle('upwards', showInTopPosition);
+			} else {
+				setDropdownStyles(element, rect, showInTopPosition);
 			}
 		};
 
-		const setDropdownStyles = (element: HTMLElement, rect: DOMRect) => {
+		const setDropdownStyles = (element: HTMLElement, rect: DOMRect, showInTopPosition: boolean) => {
 			element.style.setProperty('--dropdown-width', `${rect.width}px`);
 			element.style.setProperty('--dropdown-left', `${rect.left}px`);
 
 			const topPosition = showInTopPosition
 				? rect.top - element.offsetHeight - DROPDOWN_GAP
-				: rect.bottom + DROPDOWN_GAP;
+				: rect.bottom;
 
 			element.style.setProperty('--dropdown-top', `${topPosition}px`);
 		};
 
-		$effect(() => {
-			if (showListOptions) {
-				updatePosition();
-				window.addEventListener('scroll', updatePosition, true);
-				window.addEventListener('resize', updatePosition);
+		const resizeObserver = new ResizeObserver(updatePosition);
+
+		if (showListOptions) {
+			updatePosition();
+			window.addEventListener('scroll', updatePosition, true);
+			window.addEventListener('resize', updatePosition);
+			if (positionStrategy === 'fixed') {
+				resizeObserver.observe(element);
+				resizeObserver.observe(dropdown);
 			}
+		}
 
-			return () => {
-				window.removeEventListener('scroll', updatePosition, true);
-				window.removeEventListener('resize', updatePosition);
-			};
-		});
+		return () => {
+			window.removeEventListener('scroll', updatePosition, true);
+			window.removeEventListener('resize', updatePosition);
+			if (positionStrategy === 'fixed') {
+				resizeObserver.disconnect();
+			}
+		};
 	};
 
 	const canBeVisible = (option: SelectOption): boolean =>
@@ -256,7 +264,7 @@
 			<section
 				class={[
 					'dropdown-list',
-					positionStrategy === 'absolute' && showInTopPosition && 'upwards',
+					positionStrategy === 'absolute' && 'upwards',
 					positionStrategy === 'fixed' && 'position-fixed'
 				]}
 				{@attach autoDirection}

package/dist/Form/TextArea/TextArea.svelte

@@ -11,6 +11,7 @@
 		maximumCharactersAllowed?: number;
 		resize?: boolean;
 		infoTooltip?: string;
+		disableValidationColor?: boolean;
 	}
 
 	let {
@@ -24,6 +25,7 @@
 		resize = false,
 		id,
 		infoTooltip,
+		disableValidationColor = false,
 		...props
 	}: TextAreaProps = $props();
 
@@ -42,7 +44,12 @@
 <div class="form-container">
 	<Label {label} {id} {optional} {required} {infoTooltip} />
 
-	<div class={['form-textarea-wrapper', isInvalid && 'error', isValid && 'success']}>
+	<div
+		class={[
+			'form-textarea-wrapper',
+			!disableValidationColor && [isInvalid && 'error', isValid && 'success']
+		]}
+	>
 		<textarea
 			{...props}
 			id={textareaId}

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

@@ -8,6 +8,7 @@ interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
     maximumCharactersAllowed?: number;
     resize?: boolean;
     infoTooltip?: string;
+    disableValidationColor?: boolean;
 }
 declare const TextArea: import("svelte").Component<TextAreaProps, {}, "value">;
 type TextArea = ReturnType<typeof TextArea>;

package/dist/Modal/ModalContent.svelte

@@ -15,6 +15,7 @@
 
 <style>
 	.modal-content {
+		width: 100%;
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;

package/dist/ProgressWizard/context.d.ts

@@ -1,4 +1,9 @@
 import { type Writable } from 'svelte/store';
 import type { ProgressWizardStep } from './progressWizardState.svelte.js';
-export declare const setProgressWizardStepsContext: (steps: ProgressWizardStep[]) => Writable<ProgressWizardStep[]>;
+export declare const setProgressWizardStepsContext: (steps: ProgressWizardStep[]) => Writable<{
+    title: string;
+    description?: string;
+    isValid: boolean;
+    disabled: boolean;
+}[]>;
 export declare const getProgressWizardContext: () => Writable<ProgressWizardStep[]>;

package/dist/ProgressWizard/context.js

@@ -2,7 +2,7 @@ import { getContext, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 const stepsKey = Symbol('steps');
 export const setProgressWizardStepsContext = (steps) => {
-    const stepsContext = writable(steps);
+    const stepsContext = writable(steps.map(step => ({ ...step })));
     setContext(stepsKey, stepsContext);
     return stepsContext;
 };

package/package.json

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