@softwareone/spi-sv5-library 1.5.9 → 1.6.0

package/dist/Form/AttachFile/AttachFileForm.svelte

@@ -0,0 +1,294 @@
+<script lang="ts">
+	import { z } from 'zod';
+
+	import { Form, Notification } from '../../index.js';
+	import { getFormContext } from '../FormController/context.js';
+	import type { FileValidationCallback } from './attachFile.svelte.js';
+	import { getFileValidationContext } from './fileContext.js';
+	import FileManager from './FileManager.svelte';
+	import Warnings from './Warnings.svelte';
+
+	type Schema = z.infer<typeof schema>;
+
+	interface AttachFileFormProps {
+		extraData?: Record<string, string | number>;
+		action: string;
+		schema: z.ZodObject;
+		accept?: string;
+		multiple?: boolean;
+		externalFileValidationMessages?: string[];
+		incomingFileNames?: string[];
+		files?: FileList;
+		onsuccess: (data?: Record<string, unknown>) => void;
+		onfailure?: (status: number | undefined, error: unknown) => void;
+		ongetattachments?: (files: FileList) => void;
+	}
+
+	let {
+		extraData,
+		action,
+		accept,
+		multiple,
+		externalFileValidationMessages = [],
+		incomingFileNames = [],
+		files,
+		schema,
+		onsuccess,
+		onfailure,
+		ongetattachments
+	}: AttachFileFormProps = $props();
+
+	const { form, errors } = getFormContext<Schema>();
+
+	const validateFile: FileValidationCallback | undefined = getFileValidationContext();
+
+	let htmlInputFiles = $state<HTMLInputElement>();
+	let validationMessages = $state<string[]>([]);
+
+	const extensionFilesMessage = accept
+		? `Files of the following type are allowed: ${accept.replaceAll(',', ' & ')}.`
+		: 'All file types are allowed.';
+
+	const reviewMessages = [
+		extensionFilesMessage,
+		'Duplicate file names are not allowed.',
+		...externalFileValidationMessages
+	];
+
+	const mappedFiles = $derived(
+		files ? Array.from(files).map((file) => ({ name: file.name, size: file.size })) : []
+	);
+
+	$effect(() => {
+		if (files && htmlInputFiles) {
+			htmlInputFiles.files = files;
+			$form.files = mappedFiles;
+		}
+	});
+
+	const onChangeInputFile = async (selectedFiles: FileList | null) => {
+		if (selectedFiles?.length) {
+			validationMessages = [];
+			let newFileList = new DataTransfer();
+
+			const list: File[] = Array.from(selectedFiles);
+
+			if (files?.length && multiple) {
+				const oldFileList: File[] = Array.from(files);
+				for (const file of oldFileList) {
+					newFileList.items.add(file);
+				}
+			}
+
+			for (const file of list) {
+				const isEnabled = await isEnabledToUpload(file);
+				if (isEnabled) {
+					newFileList.items.add(file);
+				}
+			}
+
+			files = newFileList.files;
+			ongetattachments?.(files);
+		}
+	};
+
+	const isEnabledToUpload = async (file: File): Promise<boolean> => {
+		const fileName = file.name;
+
+		if (!isFileExtensionAllowed(fileName)) {
+			validationMessages.push(`${fileName} - File extension is not allowed.`);
+			return false;
+		}
+
+		if (isSelectedFileAlreadyExists(fileName)) {
+			validationMessages.push(`${fileName} - File has already been preselected.`);
+			return false;
+		}
+
+		if (isSelectedFileAlreadyExistsOnIncomingFiles(fileName)) {
+			validationMessages.push(`${fileName} - File has already been uploaded.`);
+			return false;
+		}
+
+		if (validateFile) {
+			const message = await validateFile(file);
+			if (message) {
+				validationMessages.push(`${fileName} - ${message}`);
+				return false;
+			}
+		}
+
+		return true;
+	};
+
+	const isFileExtensionAllowed = (file: string): boolean => {
+		if (!accept) return true;
+
+		const acceptedExts = accept
+			.split(',')
+			.map((x) => x.trim().toLowerCase())
+			.filter((x) => x.startsWith('.'));
+
+		const fileExts = file
+			.toLowerCase()
+			.split('.')
+			.slice(1)
+			.map((extension) => `.${extension}`);
+
+		return fileExts.some((extension) => acceptedExts.includes(extension));
+	};
+
+	const isSelectedFileAlreadyExists = (fileName: string): boolean => {
+		if (!files) return false;
+		return Array.from(files).some((file) => file.name === fileName);
+	};
+
+	const isSelectedFileAlreadyExistsOnIncomingFiles = (fileName: string): boolean => {
+		if (incomingFileNames.length === 0) return false;
+		return incomingFileNames.includes(fileName);
+	};
+
+	const updateFiles = (list: File[]) => {
+		let newFileList = new DataTransfer();
+		list.forEach((file) => {
+			newFileList.items.add(file);
+		});
+		files = newFileList.files;
+		ongetattachments?.(files);
+	};
+</script>
+
+<aside class="container">
+	<section class="notification">
+		<Notification title="" type="info" disableBorder>
+			{#snippet content()}
+				<ul class="message">
+					{#each reviewMessages as message}
+						<li>{message}</li>
+					{/each}
+				</ul>
+			{/snippet}
+		</Notification>
+	</section>
+	<Form {action} initialData={{ files }} {schema} {extraData} {onsuccess} {onfailure}>
+		{#snippet children()}
+			<h2 class="title">Upload file</h2>
+			<section class="drop-area">
+				<p class="caption">Drag and drop files here</p>
+				<p class="text-small">or</p>
+
+				<input
+					name="files"
+					type="file"
+					aria-label="Select files to upload"
+					{accept}
+					{multiple}
+					bind:this={htmlInputFiles}
+					onchange={({ currentTarget }) => onChangeInputFile(currentTarget.files)}
+				/>
+				<div class="file-select">
+					<span>Select file</span>
+				</div>
+			</section>
+			{#if $errors.files}
+				<p class="text-error">{$errors.files[0]}</p>
+			{/if}
+			{#if validationMessages?.length}
+				<Warnings {validationMessages} />
+			{/if}
+			{#if files?.length}
+				<FileManager {files} {updateFiles} />
+			{/if}
+		{/snippet}
+	</Form>
+</aside>
+
+<style>
+	.container {
+		--color-red: #b30825;
+		--color-gray-outer: #434952;
+		--color-gray-auro: #6b7180;
+		--color-gray: #e0e5e8;
+		--color-magentablue: #472aff;
+		--color-border: #cccccc;
+		--color-bg-select: #e0e7ff;
+		--color-text-select: var(--color-magentablue);
+		--spacing-md: 20px;
+		--spacing-sm: 10px;
+		--border-radius-md: 5px;
+		width: 100%;
+	}
+
+	.notification {
+		display: flex;
+		border-width: 1px;
+		border-radius: 8px;
+		border-style: solid;
+		border-color: var(--color-gray);
+		padding: 8px;
+		margin-bottom: 16px;
+	}
+
+	.message {
+		font-size: 14px;
+		line-height: 20px;
+	}
+	.title {
+		font-size: 16px;
+		line-height: 24px;
+		font-weight: 500;
+	}
+
+	.caption {
+		font-size: 16px;
+		line-height: 24px;
+		color: var(--color-gray-outer);
+	}
+
+	.text-small {
+		font-size: 14px;
+		line-height: 20px;
+		color: var(--color-gray-auro);
+		margin-top: 4px;
+		margin-bottom: 8px;
+	}
+
+	.text-error {
+		color: var(--color-red);
+		margin: 4px;
+		font-size: 12px;
+		line-height: 16px;
+	}
+
+	.drop-area {
+		position: relative;
+		padding: var(--spacing-md);
+		border: 2px dashed var(--color-border);
+		border-radius: var(--border-radius-md);
+		text-align: center;
+		margin-top: 8px;
+	}
+
+	.drop-area input[type='file'] {
+		position: absolute;
+		opacity: 0;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		cursor: pointer;
+	}
+
+	.file-select {
+		display: inline-block;
+		background: var(--color-bg-select);
+		color: var(--color-text-select);
+		padding: var(--spacing-sm) var(--spacing-md);
+		border-radius: var(--border-radius-md);
+	}
+
+	.drop-area input[type='file']::before {
+		position: absolute;
+		content: '';
+		inset: 0;
+	}
+</style>

package/dist/Form/AttachFile/AttachFileForm.svelte.d.ts

@@ -0,0 +1,17 @@
+import { z } from 'zod';
+interface AttachFileFormProps {
+    extraData?: Record<string, string | number>;
+    action: string;
+    schema: z.ZodObject;
+    accept?: string;
+    multiple?: boolean;
+    externalFileValidationMessages?: string[];
+    incomingFileNames?: string[];
+    files?: FileList;
+    onsuccess: (data?: Record<string, unknown>) => void;
+    onfailure?: (status: number | undefined, error: unknown) => void;
+    ongetattachments?: (files: FileList) => void;
+}
+declare const AttachFileForm: import("svelte").Component<AttachFileFormProps, {}, "">;
+type AttachFileForm = ReturnType<typeof AttachFileForm>;
+export default AttachFileForm;

package/dist/Form/AttachFile/FileManager.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { limitInMegabytes, mbInBytes } from './helper.js';
+
+	interface FileProps {
+		files: FileList;
+		updateFiles: (list: File[]) => void;
+	}
+
+	let { files, updateFiles }: FileProps = $props();
+
+	let totalSize = $derived(files ? Array.from(files).reduce((sum, file) => sum + file.size, 0) : 0);
+
+	const removeFile = (index: number) => {
+		let fileList: File[] = Array.from(files);
+		fileList.splice(index, 1);
+		updateFiles(fileList);
+	};
+</script>
+
+<section>
+	<p class="header-file">
+		{(totalSize / mbInBytes).toFixed(2)} from {limitInMegabytes} MB
+	</p>
+
+	<ul class="container">
+		{#if files?.length}
+			{#each Array.from(files) as file, index}
+				<li class="list-detail">
+					<span class="material-icons-outlined">description</span>
+
+					<span class="item-detail">
+						<h3 class="file-name">{file.name}</h3>
+						<p class="file-size">
+							{(file.size / mbInBytes).toFixed(2)} MB
+						</p>
+					</span>
+
+					<button
+						type="button"
+						onclick={() => removeFile(index)}
+						class="button-icon"
+						aria-label="Remove file"
+					>
+						<span class="material-icons-outlined icon-size">close</span>
+					</button>
+				</li>
+			{/each}
+		{/if}
+	</ul>
+</section>
+
+<style>
+	.header-file {
+		margin-top: 4px;
+		color: var(--color-gray-auro);
+		text-align: right;
+	}
+
+	.container {
+		margin-top: 8px;
+		height: auto;
+		max-height: 208px;
+		overflow-x: hidden;
+		overflow-y: visible;
+	}
+
+	.list-detail {
+		--color-white-anti: #f5f7f9;
+		display: flex;
+		justify-content: space-between;
+		background-color: var(--color-gray-light, var(--color-white-anti));
+		border-radius: 8px;
+		gap: 8px;
+		padding: 8px;
+		margin-bottom: 8px;
+	}
+
+	.item-detail {
+		width: 100%;
+		padding-left: 8px;
+		padding-right: 8px;
+	}
+
+	.file-name {
+		font-size: 12px;
+		line-height: 16px;
+		font-weight: 500;
+		word-break: break-all;
+	}
+
+	.file-size {
+		font-size: 12px;
+		line-height: 16px;
+		color: var(--color-gray-auro);
+	}
+
+	.button-icon {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		font-size: 14px;
+		line-height: 20px;
+		border: none;
+		background-color: transparent;
+		cursor: pointer;
+	}
+
+	.material-icons-outlined {
+		font-size: 40px;
+	}
+
+	.icon-size {
+		font-size: 15px;
+	}
+</style>

package/dist/Form/AttachFile/FileManager.svelte.d.ts

@@ -0,0 +1,7 @@
+interface FileProps {
+    files: FileList;
+    updateFiles: (list: File[]) => void;
+}
+declare const FileManager: import("svelte").Component<FileProps, {}, "">;
+type FileManager = ReturnType<typeof FileManager>;
+export default FileManager;

package/dist/Form/AttachFile/Warnings.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	interface WarningProps {
+		validationMessages: string[];
+	}
+	let { validationMessages }: WarningProps = $props();
+</script>
+
+<details class="container">
+	<summary class="header-summary" aria-label="Warnings">
+		<span class="material-icons-outlined">warning</span>
+		<span>Warnings</span>
+	</summary>
+
+	<section class="detail-section">
+		<ul class="list-inside">
+			{#each validationMessages as message}
+				<li class="item">
+					{message}
+				</li>
+			{/each}
+		</ul>
+	</section>
+</details>
+
+<style>
+	.container {
+		margin-top: 16px;
+		font-size: 12px;
+		line-height: 16px;
+	}
+
+	.header-summary {
+		display: flex;
+		font-weight: 600;
+		gap: 4px;
+		--color: #e67e00;
+		color: var(--color);
+		cursor: pointer;
+		padding: 4px;
+		border-width: 1px;
+		border-radius: 4px;
+		border-style: solid;
+		width: max-content;
+	}
+	.detail-section {
+		margin-top: 4px;
+		margin-left: 8px;
+	}
+
+	.list-inside {
+		list-style-position: inside;
+		padding-left: 16px;
+	}
+
+	.item {
+		white-space: pre-line;
+		overflow-wrap: break-word;
+		list-style-type: disc;
+	}
+
+	.material-icons-outlined {
+		font-size: 15px;
+	}
+</style>

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

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

package/dist/Form/AttachFile/attachFile.svelte.d.ts

@@ -0,0 +1,7 @@
+export type AttachFileFormConfig = AttachedFile;
+interface AttachedFile {
+    name: string;
+    size: number;
+}
+export type FileValidationCallback = (file: File) => Promise<string | null>;
+export {};

package/dist/Form/AttachFile/fileContext.d.ts

@@ -0,0 +1,3 @@
+import type { FileValidationCallback } from './attachFile.svelte.js';
+export declare const setFileValidationContext: (validateFile: FileValidationCallback) => void;
+export declare const getFileValidationContext: () => FileValidationCallback | undefined;

package/dist/Form/AttachFile/fileContext.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const fileContextKey = Symbol('fileContext');
+export const setFileValidationContext = (validateFile) => {
+    setContext(fileContextKey, validateFile);
+};
+export const getFileValidationContext = () => {
+    return getContext(fileContextKey);
+};

package/dist/Form/AttachFile/helper.d.ts

@@ -0,0 +1,7 @@
+export declare const limitInMegabytes = 100;
+export declare const mbInBytes = 1048576;
+export declare const limitInBytes: number;
+export declare const AttachFileMessages: {
+    FilesRequired: string;
+    SizeLimit: string;
+};

package/dist/Form/AttachFile/helper.js

@@ -0,0 +1,7 @@
+export const limitInMegabytes = 100;
+export const mbInBytes = 1048576;
+export const limitInBytes = limitInMegabytes * mbInBytes;
+export const AttachFileMessages = {
+    FilesRequired: 'You must select at least one file',
+    SizeLimit: `The selected files should not exceed ${limitInMegabytes} Megabytes`
+};

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.startsWith(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/Tabs/Tabs.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
+
 	import type { Tab } from '../index.js';
 
 	interface TabsProps {
 		tabs: Tab[];
 		activeTab?: number;
+		children?: Snippet;
 	}
 
-	let { tabs = [], activeTab = 0 }: TabsProps = $props();
+	let { tabs = [], activeTab = 0, children }: TabsProps = $props();
 
 	const handleClick = (index: number) => (): void => {
 		activeTab = index;
@@ -36,14 +39,18 @@
 
 	{#each tabs as tab}
 		{#if activeTab === tab.index}
-			<div
-				class="tabs-content"
-				id="panel-{tab.index}"
-				role="tabpanel"
-				aria-labelledby="tab-{tab.index}"
-			>
-				{@render tab.component?.()}
-			</div>
+			{#if tab.component}
+				<div
+					class="tabs-content"
+					id="panel-{tab.index}"
+					role="tabpanel"
+					aria-labelledby="tab-{tab.index}"
+				>
+					{@render tab.component()}
+				</div>
+			{:else}
+				{@render children?.()}
+			{/if}
 		{/if}
 	{/each}
 </div>

package/dist/Tabs/Tabs.svelte.d.ts

@@ -1,7 +1,9 @@
+import type { Snippet } from 'svelte';
 import type { Tab } from '../index.js';
 interface TabsProps {
     tabs: Tab[];
     activeTab?: number;
+    children?: Snippet;
 }
 declare const Tabs: import("svelte").Component<TabsProps, {}, "">;
 type Tabs = ReturnType<typeof Tabs>;

package/dist/index.d.ts

@@ -32,6 +32,7 @@ import Toaster from './Toast/Toast.svelte';
 import Toggle from './Form/Toggle/Toggle.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
 import Waffle from './Waffle/Waffle.svelte';
+import AttachFile from './Form/AttachFile/AttachFileForm.svelte';
 import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
 import { ChipType } from './Chips/chipsState.svelte.js';
 import { ColumnType, ImageType } from './HighlightPanel/highlightPanelState.svelte.js';
@@ -41,11 +42,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 +55,6 @@ 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 };
+import type { AttachFileFormConfig, FileValidationCallback } from './Form/AttachFile/attachFile.svelte.js';
+import type { NotificationProps } from './Notification/notificationState.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, AttachFile, 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, type AttachFileFormConfig, type FileValidationCallback, type NotificationProps };

package/dist/index.js

@@ -33,6 +33,7 @@ import Toaster from './Toast/Toast.svelte';
 import Toggle from './Form/Toggle/Toggle.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
 import Waffle from './Waffle/Waffle.svelte';
+import AttachFile from './Form/AttachFile/AttachFileForm.svelte';
 // State, enums, and helpers
 import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
 import { ChipType } from './Chips/chipsState.svelte.js';
@@ -43,10 +44,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, 
+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, AttachFile, 
 // 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.9",
+	"version": "1.6.0",
 	"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[];
-}