@softwareone/spi-sv5-library 1.7.3 → 1.7.5

package/dist/Footer/Footer.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	interface FooterProps {
 		homeUrl?: string;
+		logoUrl?: string;
 	}
-	let { homeUrl = '/' }: FooterProps = $props();
+	let { homeUrl = '/', logoUrl = '/softwareone-logo-white.svg' }: FooterProps = $props();
 </script>
 
 <footer class="footer-section">
 	<a href={homeUrl} title="Home">
-		<img alt="SoftwareOne logo" class="logo-image" src="/softwareone-logo-white.svg" />
+		<img alt="SoftwareOne logo" class="logo-image" src={logoUrl} />
 	</a>
 	<ul class="links">
 		<li>

package/dist/Footer/Footer.svelte.d.ts

@@ -1,5 +1,6 @@
 interface FooterProps {
     homeUrl?: string;
+    logoUrl?: string;
 }
 declare const Footer: import("svelte").Component<FooterProps, {}, "">;
 type Footer = ReturnType<typeof Footer>;

package/dist/Form/Select/Select.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { type Snippet } from 'svelte';
 	import type { Action } from 'svelte/action';
+	import type { Attachment } from 'svelte/attachments';
 
 	import { Search, type SelectOption } from '../../index.js';
 	import Label from '../Label.svelte';
@@ -20,6 +21,7 @@
 		disableValidationColor?: boolean;
 		value?: string | string[] | null;
 		error?: string | string[];
+		positionStrategy?: 'absolute' | 'fixed';
 		customSelection?: Snippet<[option: SelectOption]>;
 		customOption?: Snippet<[option: SelectOption]>;
 		onclear?: () => void;
@@ -41,6 +43,7 @@
 		disableValidationColor = false,
 		value = $bindable(),
 		error,
+		positionStrategy = 'absolute',
 		customSelection,
 		customOption,
 		onclear,
@@ -110,13 +113,43 @@
 		});
 	};
 
-	const autoDirection: Action = () => {
-		$effect(() => {
+	const autoDirection: Attachment<HTMLElement> = (element: HTMLElement) => {
+		const BOTTOM_SPACING_OFFSET = 300;
+		const DROPDOWN_GAP = 8;
+
+		const updatePosition = () => {
 			const rect = dropdown.getBoundingClientRect();
 			const viewportHeight = window.innerHeight;
-			const footer = 300;
 
-			showInTopPosition = rect.bottom + footer > viewportHeight;
+			showInTopPosition = rect.bottom + BOTTOM_SPACING_OFFSET > viewportHeight;
+
+			if (positionStrategy === 'fixed') {
+				setDropdownStyles(element, rect);
+			}
+		};
+
+		const setDropdownStyles = (element: HTMLElement, rect: DOMRect) => {
+			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;
+
+			element.style.setProperty('--dropdown-top', `${topPosition}px`);
+		};
+
+		$effect(() => {
+			if (showListOptions) {
+				updatePosition();
+				window.addEventListener('scroll', updatePosition, true);
+				window.addEventListener('resize', updatePosition);
+			}
+
+			return () => {
+				window.removeEventListener('scroll', updatePosition, true);
+				window.removeEventListener('resize', updatePosition);
+			};
 		});
 	};
 
@@ -213,7 +246,14 @@
 		</section>
 
 		{#if showListOptions}
-			<section class="dropdown-list" class:upwards={showInTopPosition} use:autoDirection>
+			<section
+				class={[
+					'dropdown-list',
+					positionStrategy === 'absolute' && showInTopPosition && 'upwards',
+					positionStrategy === 'fixed' && 'position-fixed'
+				]}
+				{@attach autoDirection}
+			>
 				{#if searchable && !noOptionsAvailable}
 					<Search
 						placeholder="Search"
@@ -437,6 +477,13 @@
 		margin-bottom: 8px;
 	}
 
+	.dropdown > .dropdown-list.position-fixed {
+		position: fixed;
+		width: var(--dropdown-width);
+		left: var(--dropdown-left);
+		top: var(--dropdown-top);
+	}
+
 	.dropdown > .dropdown-list > .dropdown-list-options-container {
 		display: flex;
 		flex-direction: column;

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

@@ -15,6 +15,7 @@ interface SelectProps {
     disableValidationColor?: boolean;
     value?: string | string[] | null;
     error?: string | string[];
+    positionStrategy?: 'absolute' | 'fixed';
     customSelection?: Snippet<[option: SelectOption]>;
     customOption?: Snippet<[option: SelectOption]>;
     onclear?: () => void;

package/dist/Home/Home.svelte

@@ -58,7 +58,7 @@
 
 	.home-container > .home-item {
 		display: flex;
-		max-height: 150px;
+		max-height: 190px;
 		max-width: 770px;
 		gap: 16px;
 		padding: 12px;

package/dist/Menu/Menu.svelte

@@ -19,7 +19,8 @@
 	};
 
 	const isActiveMenuItem = (url: string) => {
-		const firstSegmentUrl = page.url.pathname.split('/')[1];
+		const pathname = page.url.pathname.replace(/^\/v\d+\//, '/');
+		const firstSegmentUrl = pathname.split('/')[1];
 		return existRoute(`/${firstSegmentUrl}`, url);
 	};
 
@@ -28,7 +29,6 @@
 		return regex.test(pathname);
 	};
 
-
 	const onHandleMenu = () => {
 		showMenu = !showMenu;
 	};

package/dist/Menu/MenuState.svelte.js

@@ -1,7 +1,12 @@
 export const getSubMenuItemsFromMenu = (items, url, excludedRoutes) => {
-    if (excludedRoutes?.includes(url))
+    const cleanUrl = url.replace(/^\/v\d+\//, '/');
+    if (excludedRoutes?.includes(cleanUrl))
         return [];
-    const matchedPath = /^\/[^/]+/.exec(url);
+    const matchedPath = /^\/[^/]+/.exec(cleanUrl);
     const urlValue = matchedPath?.[0] ?? '';
-    return items.find((menu) => menu.url.startsWith(urlValue))?.children ?? [];
+    const matchedMenu = items.find((menu) => {
+        const regex = new RegExp(`${urlValue}(?![\\w-])`);
+        return regex.test(menu.url);
+    });
+    return matchedMenu?.children ?? [];
 };

package/package.json

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