@softwareone/spi-sv5-library 1.5.8 → 1.5.10

package/dist/Avatar/Avatar.svelte

@@ -6,15 +6,29 @@
 		text: string;
 		backgroundColor?: BackgroundColor;
 		textColor?: TextColor;
+		keepOrder?: boolean;
 	}
 
-	let { text, backgroundColor = '#25282D', textColor = '#FFFFFF' }: AvatarProps = $props();
+	let {
+		text,
+		backgroundColor = '#25282D',
+		textColor = '#FFFFFF',
+		keepOrder = false
+	}: AvatarProps = $props();
 
-	const avatarSrc = (name: string): string => {
+	const avatarSrc = (text: string): string => {
 		const defaultValue = 'SO';
-		if (!name) return defaultValue;
-		const [lastName, firstName] = name.split(' ');
-		return `${firstName[0]}${lastName[0]}`.toUpperCase();
+		const trimmedText = text.trim();
+
+		if (!trimmedText) return defaultValue;
+
+		const [first, second] = trimmedText.split(/\s+/);
+
+		if (!second) return first[0].toUpperCase();
+
+		const initials = keepOrder ? `${first[0]}${second[0]}` : `${second[0]}${first[0]}`;
+
+		return initials.toUpperCase();
 	};
 </script>
 

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

@@ -4,6 +4,7 @@ interface AvatarProps {
     text: string;
     backgroundColor?: BackgroundColor;
     textColor?: TextColor;
+    keepOrder?: boolean;
 }
 declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
 type Avatar = ReturnType<typeof Avatar>;

package/dist/Header/Header.svelte

@@ -72,7 +72,13 @@
 			<Waffle items={waffleItems} bind:showWaffle />
 		{/if}
 		{#if menuItems}
-			<button type="button" class="header-button" onclick={toggleMenu} aria-label="menu button">
+			<button
+				type="button"
+				class={[showMenu && 'active', 'header-button']}
+				onclick={toggleMenu}
+				aria-label="menu button"
+				aria-expanded={showMenu}
+			>
 				<span class="material-icons icon-span menu-icon">menu</span>
 			</button>
 			<Menu {menuItems} bind:showMenu />

package/dist/HighlightPanel/HighlightPanel.svelte

@@ -44,7 +44,7 @@
 						{#if iconType === ImageType.Default}
 							<img src={content} alt="icon" />
 						{:else if iconType === ImageType.Avatar}
-							<Avatar text={content} />
+							<Avatar text={content} keepOrder={column.keepOrder} />
 						{:else if iconType === ImageType.Material}
 							<span class="material-icons">{content}</span>
 						{/if}

package/dist/HighlightPanel/highlightPanelState.svelte.d.ts

@@ -22,12 +22,22 @@ type Link = BaseColumn & {
     type: ColumnType.Link;
     url: string;
 };
-type Icon = BaseColumn & {
+type BaseIcon = BaseColumn & {
     type: ColumnType.Image;
-    iconType: ImageType;
     content: string;
     alignTextRight?: boolean;
 };
+type AvatarIcon = BaseIcon & {
+    iconType: ImageType.Avatar;
+    keepOrder?: boolean;
+};
+type ImageIcon = BaseIcon & {
+    iconType: ImageType.Default;
+};
+type MaterialIcon = BaseIcon & {
+    iconType: ImageType.Material;
+};
+type Icon = AvatarIcon | ImageIcon | MaterialIcon;
 type Status = BaseColumn & {
     type: ColumnType.Status;
     chipType: ChipType;

package/dist/Home/Home.svelte

@@ -16,7 +16,7 @@
 <section class="home-container grid">
 	{#each homeItems as homeItem}
 		<a href={homeItem.url} class="home-item">
-			<img src={homeItem.icon} alt={homeItem.text} />
+			<img src={homeItem.homeIcon} alt={homeItem.text} />
 			<div>
 				<h2>{homeItem.text}</h2>
 				<p>{homeItem.detail}</p>

package/dist/Menu/Menu.svelte

@@ -3,7 +3,7 @@
 	import { fade } from 'svelte/transition';
 
 	import MainMenuItem from './MenuItem.svelte';
-	import type { MenuItem } from './SidebarState.svelte';
+	import type { MenuItem } from './MenuState.svelte.js';
 
 	interface MenuProps {
 		menuItems: MenuItem[];

package/dist/Menu/Menu.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { MenuItem } from './SidebarState.svelte';
+import type { MenuItem } from './MenuState.svelte.js';
 interface MenuProps {
     menuItems: MenuItem[];
     showMenu: boolean;

package/dist/Menu/MenuItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Tooltip } from '../index.js';
-	import type { MenuItem } from './SidebarState.svelte';
+	import type { MenuItem } from './MenuState.svelte.js';
 
 	interface MenuItemProps {
 		item: MenuItem;
@@ -23,6 +23,7 @@
 			]}
 			onclick={() => onClick?.(item)}
 		>
+			
 			<span class="material-icons-outlined icon-span">{item.icon}</span>
 			<h2 class="item-name-span" class:hidden={isCollapsed}>{item.text}</h2>
 		</a>
@@ -88,12 +89,13 @@
 		background-color: #f4f6f8;
 	}
 
-	.active-collapsed .icon-span {
+	.active-collapsed {
 		background-color: #eaecff;
+		border-radius: 50%;
 		color: #472aff;
 	}
 
-	.active-collapsed .icon-span:hover {
+	.active-collapsed:hover {
 		background-color: #eaecff;
 		cursor: default;
 	}

package/dist/Menu/MenuItem.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { MenuItem } from './SidebarState.svelte';
+import type { MenuItem } from './MenuState.svelte.js';
 interface MenuItemProps {
     item: MenuItem;
     isCollapsed: boolean;

package/dist/Menu/MenuState.svelte.d.ts

@@ -0,0 +1,22 @@
+type BaseMenu = {
+    text: string;
+    url: string;
+};
+export type MenuItem = BaseMenu & {
+    icon?: string;
+};
+export type HomeItem = BaseMenu & {
+    homeIcon?: string;
+    detail?: string;
+};
+export type MainMenu = HomeItem & {
+    icon?: string;
+    roles?: string[];
+    children?: SidebarItem[];
+};
+export interface SidebarItem {
+    category: string;
+    menuItems: MenuItem[];
+}
+export declare const getSidebarItemsFromMenu: (items: MainMenu[], url: string, excludedRoutes?: string[]) => SidebarItem[];
+export {};

package/dist/Menu/MenuState.svelte.js

@@ -0,0 +1,7 @@
+export const getSidebarItemsFromMenu = (items, url, excludedRoutes) => {
+    if (excludedRoutes?.includes(url))
+        return [];
+    const matchedPath = /^\/[^/]+/.exec(url);
+    const urlValue = matchedPath?.[0] ?? '';
+    return items.find((menu) => menu.url === urlValue)?.children ?? [];
+};

package/dist/Menu/Sidebar.svelte

@@ -1,52 +1,62 @@
 <script lang="ts">
+	import { page } from '$app/state';
 	import { fade } from 'svelte/transition';
-	import type { MenuItem } from './SidebarState.svelte';
+
 	import MenuItemSidebar from './MenuItem.svelte';
+	import type { MenuItem, SidebarItem } from './MenuState.svelte.js';
 
-	interface sidebarProps {
-		categoryTitle: string;
-		menuItems: MenuItem[];
+	interface Props {
+		sidebarItems: SidebarItem[];
 	}
 
-	let { sidebarItems }: { sidebarItems: sidebarProps[] } = $props();
-	let isCollapsed: boolean = $state(false);
-	let selectedItem: MenuItem | null = $state(null);
+	let { sidebarItems = [] }: Props = $props();
+
+	let hasItems: boolean = $derived(!!sidebarItems.length);
+	let isCollapsed: boolean = $state(true);
+	let selectedItem: MenuItem | undefined = $derived(
+		sidebarItems
+			.flatMap((item) => item.menuItems)
+			.find(
+				(menuItem) =>
+					page.url.pathname === menuItem.url || page.url.pathname.startsWith(menuItem.url + '/')
+			)
+	);
 
 	const toggleSidebar = () => {
 		isCollapsed = !isCollapsed;
 	};
 </script>
 
-<aside
-	class={['side-menu', isCollapsed ? 'collapsed' : 'expanded']}
-	transition:fade|global={{ delay: 50, duration: 200 }}
->
-	<section class="menu-content">
-		<header class="header">
-			<section class="menu-header">
-				<div class="menu-title" class:hidden={isCollapsed}>
-					<div class="menu">
-						<h2 class="menu-span">Menu</h2>
+{#if hasItems}
+	<aside
+		class={['side-menu', isCollapsed ? 'collapsed' : 'expanded']}
+		transition:fade|global={{ delay: 50, duration: 200 }}
+	>
+		<section class="menu-content">
+			<header class="header">
+				<section class="menu-header">
+					<div class="menu-title" class:hidden={isCollapsed}>
+						<div class="menu">
+							<h2 class="menu-span">Menu</h2>
+						</div>
 					</div>
-				</div>
-				<div class="category-items">
-					<button class="button" onclick={toggleSidebar}>
-						<span class="material-icons-outlined icon-span">
-							{isCollapsed ? 'menu' : 'menu_open'}
-						</span>
-					</button>
-				</div>
-			</section>
-		</header>
+					<div class="category-items">
+						<button class="button" onclick={toggleSidebar}>
+							<span class="material-icons-outlined icon-span">
+								{isCollapsed ? 'menu' : 'menu_open'}
+							</span>
+						</button>
+					</div>
+				</section>
+			</header>
 
-		<section class="content">
-			{#if sidebarItems.length > 0}
-				{#each sidebarItems as element}
+			<section class="content">
+				{#each sidebarItems as item}
 					<section class="category-content">
-						<h2 class="category-span" class:hidden={isCollapsed}>{element.categoryTitle}</h2>
+						<h2 class="category-span" class:hidden={isCollapsed}>{item.category}</h2>
 						<menu class="category-items-details">
-							{#if element.menuItems}
-								{#each element.menuItems as menuItem}
+							{#if item.menuItems}
+								{#each item.menuItems as menuItem}
 									<MenuItemSidebar
 										item={menuItem}
 										{isCollapsed}
@@ -58,10 +68,10 @@
 						</menu>
 					</section>
 				{/each}
-			{/if}
+			</section>
 		</section>
-	</section>
-</aside>
+	</aside>
+{/if}
 
 <style>
 	.side-menu {

package/dist/Menu/Sidebar.svelte.d.ts

@@ -1,11 +1,7 @@
-import type { MenuItem } from './SidebarState.svelte';
-interface sidebarProps {
-    categoryTitle: string;
-    menuItems: MenuItem[];
+import type { SidebarItem } from './MenuState.svelte.js';
+interface Props {
+    sidebarItems: SidebarItem[];
 }
-type $$ComponentProps = {
-    sidebarItems: sidebarProps[];
-};
-declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
 type Sidebar = ReturnType<typeof Sidebar>;
 export default Sidebar;

package/dist/index.d.ts

@@ -41,11 +41,12 @@ import { addToast } from './Toast/toastState.svelte';
 import { setFormContext, getFormContext } from './Form/FormController/context.js';
 import { validateSchema } from './Form/FormController/helper.js';
 import { createZodString } from './Form/FormController/zod-validations.js';
+import { getSidebarItemsFromMenu } from './Menu/MenuState.svelte';
 import type { BreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
 import type { FormError, FormContext } from './Form/FormController/types.js';
 import type { HighlightPanelColumn } from './HighlightPanel/highlightPanelState.svelte.js';
-import type { HomeItem } from './Home/homeState.svelte.js';
-import type { MenuItem } from './Menu/SidebarState.svelte';
+import type { HomeItem } from './Menu/MenuState.svelte.js';
+import type { MainMenu, MenuItem, SidebarItem } from './Menu/MenuState.svelte.js';
 import type { ModalProps } from './Modal/modalState.svelte.js';
 import type { ProgressWizardStep } from './ProgressWizard/progressWizardState.svelte.js';
 import type { SwitcherOption } from './Switcher/switcherState.svelte.js';
@@ -53,4 +54,4 @@ import type { SelectOption } from './Form/Select/selectState.svelte.js';
 import type { Tab } from './Tabs/tabsState.svelte.js';
 import type { Toast } from './Toast/toastState.svelte';
 import type { WaffleItem } from './Waffle/waffleState.svelte.js';
-export { Accordion, Avatar, Breadcrumbs, Button, Card, Chips, ErrorPage, Footer, Form, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, setFormContext, getFormContext, validateSchema, createZodString, ChipType, ColumnType, ImageType, type BreadcrumbsNameMap, type HighlightPanelColumn, type HomeItem, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type SwitcherOption, type Tab, type Toast, type WaffleItem, type FormError, type FormContext };
+export { Accordion, Avatar, Breadcrumbs, Button, Card, Chips, ErrorPage, Footer, Form, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, setFormContext, getFormContext, validateSchema, createZodString, getSidebarItemsFromMenu, ChipType, ColumnType, ImageType, type BreadcrumbsNameMap, type HighlightPanelColumn, type HomeItem, type MainMenu, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type SwitcherOption, type Tab, type Toast, type WaffleItem, type FormError, type FormContext, type SidebarItem };

package/dist/index.js

@@ -43,10 +43,11 @@ import { addToast } from './Toast/toastState.svelte';
 import { setFormContext, getFormContext } from './Form/FormController/context.js';
 import { validateSchema } from './Form/FormController/helper.js';
 import { createZodString } from './Form/FormController/zod-validations.js';
+import { getSidebarItemsFromMenu } from './Menu/MenuState.svelte';
 export { 
 // Components
 Accordion, Avatar, Breadcrumbs, Button, Card, Chips, ErrorPage, Footer, Form, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, 
 // Functions and helpers
-addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, setFormContext, getFormContext, validateSchema, createZodString, 
+addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, setFormContext, getFormContext, validateSchema, createZodString, getSidebarItemsFromMenu, 
 // Enums
 ChipType, ColumnType, ImageType };

package/package.json

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

package/dist/Home/homeState.svelte.d.ts

@@ -1,4 +0,0 @@
-import { type MenuItem } from '../index.js';
-export type HomeItem = Omit<MenuItem, 'children'> & {
-    detail?: string;
-};

package/dist/Home/homeState.svelte.js

@@ -1 +0,0 @@
-import {} from '../index.js';

package/dist/Menu/SidebarState.svelte.d.ts

@@ -1,6 +0,0 @@
-export interface MenuItem {
-    icon?: string;
-    text: string;
-    url: string;
-    children?: MenuItem[];
-}

package/dist/Menu/SidebarState.svelte.js

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