@softwareone/spi-sv5-library 1.5.10 → 1.6.1

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/attachFile.svelte.js

@@ -0,0 +1 @@
+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/Menu/MenuState.svelte.js

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

package/dist/Tabs/Tabs.svelte

@@ -1,15 +1,20 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
+
 	import type { Tab } from '../index.js';
 
 	interface TabsProps {
 		tabs: Tab[];
 		activeTab?: number;
+		children?: Snippet;
+		onchange?: (index: number) => void;
 	}
 
-	let { tabs = [], activeTab = 0 }: TabsProps = $props();
+	let { tabs = [], activeTab = 0, children, onchange }: TabsProps = $props();
 
 	const handleClick = (index: number) => (): void => {
 		activeTab = index;
+		onchange?.(index);
 	};
 </script>
 
@@ -42,7 +47,11 @@
 				role="tabpanel"
 				aria-labelledby="tab-{tab.index}"
 			>
-				{@render tab.component?.()}
+				{#if tab.component}
+					{@render tab.component()}
+				{:else}
+					{@render children?.()}
+				{/if}
 			</div>
 		{/if}
 	{/each}

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

@@ -1,7 +1,10 @@
+import type { Snippet } from 'svelte';
 import type { Tab } from '../index.js';
 interface TabsProps {
     tabs: Tab[];
     activeTab?: number;
+    children?: Snippet;
+    onchange?: (index: number) => void;
 }
 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';
@@ -54,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, 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 };
+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';
@@ -46,7 +47,7 @@ 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, getSidebarItemsFromMenu, 
 // Enums

package/package.json

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