@softwareone/spi-sv5-library 1.10.5 → 1.11.0

package/dist/Card/Card.svelte

@@ -9,7 +9,7 @@
 	let { children, disablePadding = false }: CardProps = $props();
 </script>
 
-<div class="card" class:padding={!disablePadding}>
+<div class={['card', !disablePadding && 'padding']}>
 	{@render children?.()}
 </div>
 

package/dist/{AttachFile → Controls/AttachFile}/AttachFile.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-	import { Notification } from '../index.js';
 	import type { Attachment } from 'svelte/attachments';
+
+	import type { LabelProps } from '../Label/labelState.svelte.js';
+	import { Label, Notification } from '../../index.js';
 	import FileManager from './FileManager.svelte';
 	import Warnings from './Warnings.svelte';
 
-	interface Props {
+	interface Props extends LabelProps {
 		accept?: string;
 		multiple?: boolean;
 		externalFileValidationMessages?: string[];
@@ -25,20 +27,29 @@
 		fileSizeLimitMB,
 		error,
 		onvalidatefile,
-		onchange
+		onchange,
+		label,
+		id,
+		required,
+		optional,
+		infoTooltip
 	}: Props = $props();
 
 	let validationMessages = $state<string[]>([]);
 
-	const extensionFilesMessage = accept
-		? `Files of the following type are allowed: ${accept.replaceAll(',', ' & ')}.`
-		: 'All file types are allowed.';
+	const extensionFilesMessage = $derived(
+		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 reviewMessages = $derived(
+		[
+			extensionFilesMessage,
+			multiple && 'Duplicate file names are not allowed.',
+			...externalFileValidationMessages
+		].filter(Boolean)
+	);
 
 	const onChangeInputFile = async (selectedFiles: FileList | null) => {
 		if (selectedFiles?.length) {
@@ -138,7 +149,7 @@
 	};
 </script>
 
-<aside class="container">
+<div class="container">
 	<Notification type="info">
 		{#snippet content()}
 			<ul class="message">
@@ -148,13 +159,20 @@
 			</ul>
 		{/snippet}
 	</Notification>
-	<h2 class="title">Upload file</h2>
+	<Label
+		label={label || `Upload ${multiple ? 'files' : 'file'}`}
+		{id}
+		{required}
+		{optional}
+		{infoTooltip}
+	/>
 	<section class="drop-area">
 		<p class="caption">Drag and drop files here</p>
 		<p class="text-small">or</p>
 
 		<input
 			{@attach loadFiles}
+			{id}
 			name="files"
 			type="file"
 			aria-label="Select files to upload"
@@ -177,7 +195,7 @@
 	{#if files?.length}
 		<FileManager {fileSizeLimitMB} {files} {updateFiles} />
 	{/if}
-</aside>
+</div>
 
 <style>
 	.container {
@@ -192,6 +210,10 @@
 		--spacing-md: 20px;
 		--spacing-sm: 10px;
 		--border-radius-md: 5px;
+
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
 		width: 100%;
 	}
 
@@ -199,12 +221,6 @@
 		font-size: 14px;
 		line-height: 20px;
 	}
-	.title {
-		font-size: 16px;
-		line-height: 24px;
-		font-weight: 500;
-		margin-top: 12px;
-	}
 
 	.caption {
 		font-size: 16px;
@@ -233,7 +249,6 @@
 		border: 2px dashed var(--color-border);
 		border-radius: var(--border-radius-md);
 		text-align: center;
-		margin-top: 8px;
 	}
 
 	.drop-area input[type='file'] {

package/dist/{AttachFile → Controls/AttachFile}/AttachFile.svelte.d.ts

@@ -1,4 +1,5 @@
-interface Props {
+import type { LabelProps } from '../Label/labelState.svelte.js';
+interface Props extends LabelProps {
     accept?: string;
     multiple?: boolean;
     externalFileValidationMessages?: string[];

package/dist/{AttachFile → Controls/AttachFile}/Warnings.svelte

@@ -24,7 +24,7 @@
 
 <style>
 	.container {
-		margin-top: 16px;
+		margin-top: 8px;
 		font-size: 12px;
 		line-height: 16px;
 	}

package/dist/Controls/Input/Input.svelte

@@ -1,21 +1,19 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
+	import type { LabelProps } from '../Label/labelState.svelte.js';
 	import Label from '../Label/Label.svelte';
 	import InputIcon from './InputIcon.svelte';
 
 	type InputType = 'text' | 'password' | 'number' | 'date' | 'money';
 
-	interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'> {
-		label?: string;
+	interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelProps {
 		type?: InputType;
 		value?: string | number | null;
-		optional?: boolean;
 		error?: string | string[];
 		description?: string;
 		currency?: string;
 		disableValidationColor?: boolean;
-		infoTooltip?: string;
 	}
 
 	let {

package/dist/Controls/Input/Input.svelte.d.ts

@@ -1,15 +1,13 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
+import type { LabelProps } from '../Label/labelState.svelte.js';
 type InputType = 'text' | 'password' | 'number' | 'date' | 'money';
-interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'> {
-    label?: string;
+interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelProps {
     type?: InputType;
     value?: string | number | null;
-    optional?: boolean;
     error?: string | string[];
     description?: string;
     currency?: string;
     disableValidationColor?: boolean;
-    infoTooltip?: string;
 }
 declare const Input: import("svelte").Component<InputProps, {}, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/Controls/Label/Label.svelte

@@ -1,13 +1,6 @@
 <script lang="ts">
 	import { Tooltip } from '../../index.js';
-
-	interface LabelProps {
-		label?: string;
-		id?: string | null;
-		required?: boolean | null;
-		optional?: boolean;
-		infoTooltip?: string;
-	}
+	import type { LabelProps } from './labelState.svelte.js';
 
 	let { label, id, required, optional, infoTooltip }: LabelProps = $props();
 </script>
@@ -33,6 +26,8 @@
 		display: flex;
 		gap: 8px;
 		font-weight: 500;
+		font-size: 14px;
+		line-height: 20px;
 	}
 
 	.form-label-optional {

package/dist/Controls/Label/Label.svelte.d.ts

@@ -1,10 +1,4 @@
-interface LabelProps {
-    label?: string;
-    id?: string | null;
-    required?: boolean | null;
-    optional?: boolean;
-    infoTooltip?: string;
-}
+import type { LabelProps } from './labelState.svelte.js';
 declare const Label: import("svelte").Component<LabelProps, {}, "">;
 type Label = ReturnType<typeof Label>;
 export default Label;

package/dist/Controls/Label/labelState.svelte.d.ts

@@ -0,0 +1,7 @@
+export interface LabelProps {
+    label?: string;
+    id?: string | null;
+    required?: boolean | null;
+    optional?: boolean;
+    infoTooltip?: string;
+}

package/dist/Controls/Label/labelState.svelte.js

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

package/dist/Controls/Select/Select.svelte

@@ -4,15 +4,12 @@
 	import type { Attachment } from 'svelte/attachments';
 
 	import { Search, type SelectOption } from '../../index.js';
+	import type { LabelProps } from '../Label/labelState.svelte.js';
 	import Label from '../Label/Label.svelte';
 
-	interface SelectProps {
+	interface SelectProps extends LabelProps {
 		options: string[] | SelectOption[];
-		label?: string;
 		placeholder?: string;
-		infoTooltip?: string;
-		required?: boolean;
-		optional?: boolean;
 		searchable?: boolean;
 		hideClearButton?: boolean;
 		multiple?: boolean;

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

@@ -1,12 +1,9 @@
 import { type Snippet } from 'svelte';
 import { type SelectOption } from '../../index.js';
-interface SelectProps {
+import type { LabelProps } from '../Label/labelState.svelte.js';
+interface SelectProps extends LabelProps {
     options: string[] | SelectOption[];
-    label?: string;
     placeholder?: string;
-    infoTooltip?: string;
-    required?: boolean;
-    optional?: boolean;
     searchable?: boolean;
     hideClearButton?: boolean;
     multiple?: boolean;

package/dist/Controls/TextArea/TextArea.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	
+	import type { LabelProps } from '../Label/labelState.svelte.js';
 	import Label from '../Label/Label.svelte';
 
-	interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
-		label?: string;
+	interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'>, LabelProps {
 		value?: string | null;
-		optional?: boolean;
 		error?: string | string[];
 		description?: string;
 		maximumCharactersAllowed?: number;
 		resize?: boolean;
-		infoTooltip?: string;
 		disableValidationColor?: boolean;
 	}
 

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

@@ -1,13 +1,11 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
-interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
-    label?: string;
+import type { LabelProps } from '../Label/labelState.svelte.js';
+interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'>, LabelProps {
     value?: string | null;
-    optional?: boolean;
     error?: string | string[];
     description?: string;
     maximumCharactersAllowed?: number;
     resize?: boolean;
-    infoTooltip?: string;
     disableValidationColor?: boolean;
 }
 declare const TextArea: import("svelte").Component<TextAreaProps, {}, "value">;

package/dist/Controls/Toggle/Toggle.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
 	import Label from '../Label/Label.svelte';
+	import type { LabelProps } from '../Label/labelState.svelte.js';
 
-	interface ToggleProps {
-		id?: string;
+	interface ToggleProps extends Pick<LabelProps, 'id' | 'label' | 'infoTooltip'> {
 		checked?: boolean;
 		disabled?: boolean;
-		label?: string;
-		infoTooltip?: string;
 		vertical?: boolean;
 		onchange?: (event: Event) => void;
 	}
@@ -43,7 +41,7 @@
 			</span>
 		</div>
 	</label>
-	<Label {label} {infoTooltip} />
+	<Label {id} {label} {infoTooltip} />
 </div>
 
 <style>

package/dist/Controls/Toggle/Toggle.svelte.d.ts

@@ -1,9 +1,7 @@
-interface ToggleProps {
-    id?: string;
+import type { LabelProps } from '../Label/labelState.svelte.js';
+interface ToggleProps extends Pick<LabelProps, 'id' | 'label' | 'infoTooltip'> {
     checked?: boolean;
     disabled?: boolean;
-    label?: string;
-    infoTooltip?: string;
     vertical?: boolean;
     onchange?: (event: Event) => void;
 }

package/dist/Table/AdvancedFilter.svelte

@@ -0,0 +1,385 @@
+<script lang="ts" generics="T">
+	import { page } from '$app/state';
+
+	import { Button, Input, Select, type SelectOption } from '../index.js';
+	import type { Column } from './adapter/index.js';
+	import { Operator } from './consts.js';
+	import { type Filter } from './types.js';
+
+	interface Props {
+		columns: Column<T, unknown>[];
+		onfilterschange?: (filters: Filter[]) => void;
+	}
+
+	let { columns, onfilterschange }: Props = $props();
+
+	let isOpen = $state(false);
+	let editingFilters = $state<Filter[]>([]);
+	const operatorOptions: Operator[] = Object.values(Operator);
+
+	const filters = $derived.by<Filter[]>(() => {
+		const filterParams = page.url.searchParams.getAll('filter');
+		return filterParams
+			.filter((param) => param.trim())
+			.map(parseFilterParam)
+			.filter((filter): filter is Filter => filter !== null);
+	});
+
+	const hasActiveFilters = $derived(filters.length > 0);
+	const columnOptions = $derived<SelectOption[]>(
+		columns
+			.filter((column) => !column.columnDef.meta?.hideColumnFilter)
+			.map((column) => ({
+				value: column.id,
+				label: (column.columnDef.header as string) || column.id
+			}))
+	);
+
+	const addFilterRow = () => {
+		editingFilters = [...editingFilters, { column: '', value: '', operator: Operator.And }];
+	};
+
+	const removeFilterRow = (index: number) => {
+		const remainingFilters = editingFilters.filter((_, filterIndex) => filterIndex !== index);
+
+		editingFilters =
+			remainingFilters.length === 1
+				? [{ ...remainingFilters[0], operator: undefined }]
+				: remainingFilters;
+	};
+
+	const applyFilters = () => {
+		const validFilters = getValidFilters();
+		handleFilters(validFilters);
+	};
+
+	const clearAllFilters = () => {
+		editingFilters = [];
+		handleFilters(editingFilters);
+	};
+
+	const handleFilters = (filters: Filter[]) => {
+		onfilterschange?.(filters);
+		isOpen = false;
+	};
+
+	const toggleModal = () => {
+		isOpen = !isOpen;
+		isOpen ? initializeEditingFilters() : clearFilters();
+	};
+
+	const initializeEditingFilters = () => {
+		if (!editingFilters.length) {
+			editingFilters = filters.length
+				? filters.map((filter) => ({ ...filter }))
+				: [{ column: '', value: '', operator: undefined }];
+		}
+	};
+
+	const clearFilters = () => {
+		const validFilters = getValidFilters();
+		if (validFilters.length === 0 && filters.length > 0) {
+			clearAllFilters();
+		}
+	};
+
+	const getValidFilters = () => {
+		return editingFilters.filter((filter) => filter.column && filter.value.trim());
+	};
+
+	const parseFilterParam = (filterValue: string) => {
+		const parts = filterValue.split(':');
+		if (parts.length === 3) return parseSimpleFilter(parts);
+		if (parts.length === 4) return parseOperatorFilter(parts);
+		return null;
+	};
+
+	const parseSimpleFilter = (parts: string[]): Filter | null => {
+		const [column, operator, value] = parts;
+		return isValidFilter(column, operator, value) ? { column, value, operator: undefined } : null;
+	};
+
+	const parseOperatorFilter = (parts: string[]): Filter | null => {
+		const [operator, column, eq, value] = parts;
+		return isValidFilter(column, eq, value) && isValidOperator(operator)
+			? { column, value, operator }
+			: null;
+	};
+
+	const isValidFilter = (column: string, operator: string, value: string) => {
+		return operator === 'eq' && !!column && !!value;
+	};
+
+	const isValidOperator = (operator: string): operator is Operator => {
+		return operatorOptions.includes(operator as Operator);
+	};
+</script>
+
+<div class="filter-container">
+	<button
+		type="button"
+		class={['filter-button', hasActiveFilters && 'filter-button--active']}
+		onclick={toggleModal}
+	>
+		<span class="material-icons">filter_list</span>
+		{#if hasActiveFilters}
+			<strong>{filters.length} {filters.length === 1 ? 'Filter' : 'Filters'}</strong>
+		{:else}
+			<p>Filters</p>
+		{/if}
+	</button>
+
+	{#if isOpen}
+		<button
+			type="button"
+			class="filter-overlay"
+			onclick={toggleModal}
+			aria-label="Close filter modal"
+		></button>
+
+		<div
+			class="filter-modal"
+			role="dialog"
+			tabindex="-1"
+			aria-modal="true"
+			aria-labelledby="filter-dialog-title"
+		>
+			<div class="filter-header">
+				<h2 id="filter-dialog-title" class="filter-title">Filters</h2>
+				<button type="button" onclick={toggleModal} class="filter-close-button" aria-label="Close">
+					<span class="material-icons">close</span>
+				</button>
+			</div>
+
+			<div class="filter-body">
+				{#each editingFilters as filter, index (index)}
+					<div class="filter-row">
+						{#if index > 0}
+							<div class="filter-operator">
+								<Select
+									options={operatorOptions}
+									disableValidationColor
+									bind:value={filter.operator}
+									hideClearButton
+								/>
+							</div>
+						{:else}
+							<div class="filter-operator"></div>
+						{/if}
+
+						<div class="filter-column">
+							<Select
+								options={columnOptions}
+								disableValidationColor
+								bind:value={filter.column}
+								placeholder="Select column"
+								searchable
+							/>
+						</div>
+
+						<div class="filter-value">
+							<Input
+								id="filter-value-{index}"
+								disableValidationColor
+								type="text"
+								bind:value={filter.value}
+								placeholder="Enter value"
+							/>
+						</div>
+
+						<button
+							type="button"
+							onclick={() => removeFilterRow(index)}
+							class="filter-delete-button"
+							aria-label="Remove filter"
+						>
+							<span class="material-icons-outlined">delete</span>
+						</button>
+					</div>
+				{/each}
+
+				<div class="filter-actions">
+					<Button variant="outline-none" type="button" onclick={addFilterRow}>Add condition</Button>
+					{#if editingFilters.length}
+						<Button variant="outline-none" type="button" onclick={clearAllFilters}>
+							Reset filters
+						</Button>
+					{/if}
+				</div>
+			</div>
+
+			{#if editingFilters.length}
+				<div class="filter-footer">
+					<Button
+						onclick={applyFilters}
+						disabled={editingFilters.every((filter) => !filter.column || !filter.value.trim())}
+					>
+						Apply Filters
+					</Button>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.filter-container {
+		--color-primary: #472aff;
+		--color-primary-light: #eaecff;
+		--color-white: #fff;
+		--color-text-primary: #25282d;
+		--color-text-dark: #111827;
+		--color-text-secondary: #6b7280;
+		--color-text-hover: #374151;
+		--color-bg-hover: #f4f6f8;
+		--color-border: #e5e7eb;
+		--spacing-xs: 4px;
+		--spacing-sm: 8px;
+		--spacing-md: 12px;
+		--spacing-lg: 16px;
+		--spacing-xl: 24px;
+		--font-size-sm: 14px;
+		--font-size-md: 18px;
+		--font-size-icon: 20px;
+		--border-radius-sm: 8px;
+		--border-radius-circle: 50%;
+		--button-size: 40px;
+		--delete-button-size: 48px;
+		--modal-width: 640px;
+		--operator-column-width: 80px;
+		--transition-speed: 0.2s;
+
+		position: relative;
+	}
+
+	.filter-button {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-sm);
+		padding: var(--spacing-sm) var(--spacing-lg);
+		border: none;
+		border-radius: var(--border-radius-sm);
+		background: var(--color-white);
+		font-size: var(--font-size-sm);
+		color: var(--color-text-primary);
+		cursor: pointer;
+		transition: background-color var(--transition-speed) ease-in-out;
+	}
+
+	.filter-button:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.filter-button--active {
+		background: var(--color-primary-light);
+		color: var(--color-primary);
+	}
+
+	.filter-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 9;
+		background: transparent;
+		border: none;
+		cursor: default;
+	}
+
+	.filter-modal {
+		position: absolute;
+		top: calc(100% + var(--spacing-sm));
+		right: 0;
+		z-index: 10;
+		width: var(--modal-width);
+		padding: var(--spacing-xl);
+		border: 1px solid var(--color-border);
+		border-radius: var(--border-radius-sm);
+		background: var(--color-white);
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	}
+
+	.filter-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: var(--spacing-xl);
+	}
+
+	.filter-title {
+		font-size: var(--font-size-md);
+		font-weight: 600;
+		color: var(--color-text-dark);
+	}
+
+	.filter-close-button {
+		display: flex;
+		align-items: center;
+		padding: var(--spacing-xs);
+		border: none;
+		background: transparent;
+		color: var(--color-text-secondary);
+		cursor: pointer;
+		transition: color var(--transition-speed) ease-in-out;
+	}
+
+	.filter-close-button:hover {
+		color: var(--color-text-hover);
+	}
+
+	.filter-body {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-lg);
+	}
+
+	.filter-row {
+		display: grid;
+		grid-template-columns: var(--operator-column-width) 1fr 1fr var(--delete-button-size);
+		align-items: end;
+		gap: var(--spacing-md);
+	}
+
+	.filter-operator,
+	.filter-column,
+	.filter-value {
+		display: flex;
+	}
+
+	.filter-delete-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--spacing-sm);
+		border: none;
+		background: transparent;
+		color: var(--color-text-primary);
+		border-radius: var(--border-radius-circle);
+		width: var(--button-size);
+		height: var(--button-size);
+		cursor: pointer;
+		transition: background-color var(--transition-speed) ease-in-out;
+	}
+
+	.filter-delete-button:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.filter-actions {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-top: var(--spacing-sm);
+	}
+
+	.filter-footer {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: var(--spacing-lg);
+	}
+
+	.material-icons,
+	.material-icons-outlined {
+		font-size: var(--font-size-icon);
+	}
+</style>

package/dist/Table/AdvancedFilter.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Column } from './adapter/index.js';
+import { type Filter } from './types.js';
+declare function $$render<T>(): {
+    props: {
+        columns: Column<T, unknown>[];
+        onfilterschange?: (filters: Filter[]) => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AdvancedFilter: $$IsomorphicComponent;
+type AdvancedFilter<T> = InstanceType<typeof AdvancedFilter<T>>;
+export default AdvancedFilter;

package/dist/Table/Header.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" generics="T extends RowData">
+	import { page } from '$app/state';
+
 	import { Search } from '../index.js';
 	import { FlexRender, type HeaderGroup, type RowData } from './adapter/index.js';
 
@@ -7,13 +9,24 @@
 		enableColumnSearch: boolean;
 	}
 
+	let { headerGroups, enableColumnSearch }: Props = $props();
+
 	const getSortIcon: Record<string, string> = {
 		asc: 'arrow_upward',
 		desc: 'arrow_downward',
 		false: 'swap_vert'
 	};
 
-	let { headerGroups, enableColumnSearch }: Props = $props();
+	const isColumnFiltered = (columnId: string): boolean => {
+		const filterParams = page.url.searchParams.getAll('filter');
+		return filterParams.some((filterValue) => {
+			const parts = filterValue.split(':');
+			return (
+				(parts.length === 3 && parts[0] === columnId) ||
+				(parts.length === 4 && parts[1] === columnId)
+			);
+		});
+	};
 </script>
 
 <thead class="container">
@@ -27,9 +40,11 @@
 				{@const hideColumnFilter = header.column.columnDef.meta?.hideColumnFilter}
 				{@const justifyContent = alignColumn ?? 'left'}
 				{@const isSorted = header.column.getIsSorted().toString() !== 'false'}
+				{@const isFiltered = isColumnFiltered(header.column.id)}
+				{@const isActive = isSorted || isFiltered}
 				<th
 					colSpan={header.colSpan}
-					class={['table-header-cell', className, isSorted && 'table-header-cell--sorted']}
+					class={['table-header-cell', className, isActive && 'table-header-cell--active']}
 					style:width={columnWidth}
 					style={columnStyle}
 				>
@@ -61,6 +76,12 @@
 									>
 								</div>
 							{/if}
+
+							{#if isFiltered}
+								<div class="table-header-filtered-icon">
+									<span class="material-icons-outlined">filter_alt</span>
+								</div>
+							{/if}
 						</button>
 
 						{#if enableColumnSearch && !hideColumnFilter}
@@ -82,6 +103,7 @@
 <style>
 	.container {
 		--color-primary: #472aff;
+		--color-primary-light: #eaecff;
 		--color-black: #000000;
 		--color-gray-100: #f3f4f6;
 		--color-gray-200: #e5e7eb;
@@ -112,8 +134,8 @@
 		background: var(--color-gray-100);
 	}
 
-	.table-header-cell--sorted {
-		background: var(--color-gray-200);
+	.table-header-cell--active {
+		background: var(--color-primary-light);
 		color: var(--color-primary);
 	}
 
@@ -158,7 +180,18 @@
 		margin-top: 4px;
 	}
 
-	.table-header-sort-icon .material-icons {
+	.table-header-sort-icon:has(+ .table-header-filtered-icon) {
+		right: 0;
+	}
+
+	.table-header-filtered-icon {
+		position: absolute;
+		right: -13px;
+		margin-top: 4px;
+	}
+
+	.table-header-sort-icon .material-icons,
+	.material-icons-outlined {
 		font-size: var(--font-size-sm);
 	}
 

package/dist/Table/Table.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" generics="T">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
 	import { type Snippet } from 'svelte';
 
 	import { Button, Search } from '../index.js';
@@ -18,6 +20,7 @@
 		type Updater,
 		type VisibilityState
 	} from './adapter/index.js';
+	import AdvancedFilter from './AdvancedFilter.svelte';
 	import Body from './Body.svelte';
 	import ColumnVisibilityDropdown from './ColumnVisibilityDropdown.svelte';
 	import { DEFAULT_MIN_PAGE_LIMIT, DEFAULT_PAGE_LIMIT } from './consts.js';
@@ -27,8 +30,8 @@
 	import Footer from './Footer.svelte';
 	import Header from './Header.svelte';
 	import Skeleton from './Skeleton.svelte';
-	import type { Pagination } from './types.js';
-	import { createCheckedColumn } from './util.js';
+	import { type Filter, type Pagination } from './types.js';
+	import { createCheckedColumn, getPage, getPageLimit } from './util.js';
 
 	interface Props {
 		columns: ColumnDef<T, any>[];
@@ -40,6 +43,7 @@
 		enableGlobalSearch?: boolean;
 		enableColumnSearch?: boolean;
 		enableColumnVisibility?: boolean;
+		enableAdvancedFilter?: boolean;
 		manualPagination?: boolean;
 		pagination?: Pagination;
 		excelSetting?: ExcelSetting;
@@ -59,6 +63,7 @@
 		enableGlobalSearch = true,
 		enableColumnSearch = false,
 		enableColumnVisibility = true,
+		enableAdvancedFilter = false,
 		manualPagination = false,
 		pagination,
 		excelSetting = {
@@ -71,33 +76,6 @@
 		bulkActions
 	}: Props = $props();
 
-	const getInitialColumnVisibility = (): VisibilityState => {
-		const visibility: VisibilityState = {};
-		columns.forEach((column) => {
-			const columnId =
-				column.id ?? ('accessorKey' in column ? String(column.accessorKey) : undefined);
-			if (columnId && column.meta?.isVisible === false) {
-				visibility[columnId] = false;
-			}
-		});
-		return visibility;
-	};
-
-	const getInitialPaginationState = (): PaginationState => {
-		if (!manualPagination) {
-			return {
-				pageIndex: 0,
-				pageSize: minPageSize ? DEFAULT_MIN_PAGE_LIMIT : DEFAULT_PAGE_LIMIT
-			};
-		}
-
-		const pageSize = DEFAULT_PAGE_LIMIT;
-		const pageIndex = 0;
-
-		return { pageIndex, pageSize };
-	};
-
-	const tableManualPagination = manualPagination ? setPaginationTableContext() : undefined;
 	let globalFilter = $state<string>('');
 	let sorting = $state<SortingState>([]);
 	let columnFilters = $state<ColumnFiltersState>([]);
@@ -106,6 +84,8 @@
 	let columnVisibility = $state<VisibilityState>(getInitialColumnVisibility());
 	let paginationState = $state<PaginationState>(getInitialPaginationState());
 	let tableData = $derived(data);
+	const tableManualPagination = manualPagination ? setPaginationTableContext() : undefined;
+	const hasData = $derived(data.length > 0);
 
 	const table = createSvelteTable({
 		get data() {
@@ -172,7 +152,37 @@
 		sortDescFirst: false
 	});
 
-	const changeManualPagination = (updatedPaginationState: PaginationState) => {
+	const hasFilteredRows = $derived(table.getRowModel().rows.length > 0);
+	const selectedRows = $derived(table.getSelectedRowModel().rows);
+
+	function getInitialColumnVisibility(): VisibilityState {
+		const visibility: VisibilityState = {};
+		columns.forEach((column) => {
+			const columnId =
+				column.id ?? ('accessorKey' in column ? String(column.accessorKey) : undefined);
+			if (columnId && column.meta?.isVisible === false) {
+				visibility[columnId] = false;
+			}
+		});
+		return visibility;
+	}
+
+	function getInitialPaginationState(): PaginationState {
+		if (!manualPagination) {
+			return {
+				pageIndex: 0,
+				pageSize: minPageSize ? DEFAULT_MIN_PAGE_LIMIT : DEFAULT_PAGE_LIMIT
+			};
+		}
+
+		const currentPage = getPage(page.url.searchParams);
+		const pageSize = getPageLimit(page.url.searchParams);
+		const pageIndex = Math.max(0, currentPage - 1);
+
+		return { pageIndex, pageSize };
+	}
+
+	function changeManualPagination(updatedPaginationState: PaginationState) {
 		const pageSizeChanged = updatedPaginationState.pageSize !== paginationState.pageSize;
 
 		if (pageSizeChanged) {
@@ -182,11 +192,30 @@
 			const currentPageNumber = updatedPaginationState.pageIndex + 1;
 			onpagechange?.(updatedPaginationState.pageSize, currentPageNumber);
 		}
+	}
+
+	const changeFilters = (filters: Filter[]) => {
+		const searchParams = new URLSearchParams(page.url.searchParams);
+		searchParams.delete('filter');
+
+		filters.forEach((filter) => {
+			const filterValue = buildFilterValue(filter);
+			searchParams.append('filter', filterValue);
+		});
+
+		const url = buildUrl(searchParams);
+		goto(url);
 	};
 
-	const hasData = $derived(data.length > 0);
-	const hasFilteredRows = $derived(table.getRowModel().rows.length > 0);
-	const selectedRows = $derived(table.getSelectedRowModel().rows);
+	const buildFilterValue = (filter: Filter) => {
+		const operator = filter.operator ? `${filter.operator}:` : '';
+		return `${operator}${filter.column}:eq:${filter.value}`;
+	};
+
+	const buildUrl = (searchParams: URLSearchParams) => {
+		const queryString = searchParams.toString();
+		return queryString ? `${page.url.pathname}?${queryString}` : page.url.pathname;
+	};
 
 	$effect(() => {
 		if (manualPagination && pagination) {
@@ -216,8 +245,16 @@
 			]}
 		>
 			{#if enableGlobalSearch}
-				<div class="table-search">
-					<Search bind:value={globalFilter} />
+				<div class="table-search-container">
+					<div class="table-search">
+						<Search bind:value={globalFilter} />
+					</div>
+					{#if enableAdvancedFilter}
+						<AdvancedFilter
+							columns={table.getAllLeafColumns().filter((column) => column.getCanHide())}
+							onfilterschange={changeFilters}
+						/>
+					{/if}
 				</div>
 			{/if}
 
@@ -303,6 +340,12 @@
 		width: var(--search-width);
 	}
 
+	.table-search-container {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-md);
+	}
+
 	.table-actions {
 		display: flex;
 		gap: var(--spacing-md);

package/dist/Table/Table.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type Snippet } from 'svelte';
 import { type ColumnDef } from './adapter/index.js';
 import type { ExcelSetting } from './excel-setting.js';
-import type { Pagination } from './types.js';
+import { type Pagination } from './types.js';
 declare function $$render<T>(): {
     props: {
         columns: ColumnDef<T, any>[];
@@ -13,6 +13,7 @@ declare function $$render<T>(): {
         enableGlobalSearch?: boolean;
         enableColumnSearch?: boolean;
         enableColumnVisibility?: boolean;
+        enableAdvancedFilter?: boolean;
         manualPagination?: boolean;
         pagination?: Pagination;
         excelSetting?: ExcelSetting;

package/dist/Table/consts.d.ts

@@ -2,3 +2,9 @@ export declare const DEFAULT_PAGE = 1;
 export declare const DEFAULT_PAGE_LIMIT = 10;
 export declare const DEFAULT_MIN_PAGE_LIMIT = 5;
 export declare const DEFAULT_ITEMS_PER_PAGE_OPTIONS: number[];
+export declare const Operator: {
+    readonly And: "AND";
+    readonly Or: "OR";
+    readonly Not: "NOT";
+};
+export type Operator = typeof Operator[keyof typeof Operator];

package/dist/Table/consts.js

@@ -2,3 +2,8 @@ export const DEFAULT_PAGE = 1;
 export const DEFAULT_PAGE_LIMIT = 10;
 export const DEFAULT_MIN_PAGE_LIMIT = 5;
 export const DEFAULT_ITEMS_PER_PAGE_OPTIONS = [10, 25, 50, 75, 100];
+export const Operator = {
+    And: 'AND',
+    Or: 'OR',
+    Not: 'NOT'
+};

package/dist/Table/index.d.ts

@@ -4,4 +4,5 @@ export * from './context.js';
 export { ColumnFormat, type ExcelSetting } from './excel-setting.js';
 export * from './excel.js';
 export { default as Table } from './Table.svelte';
-export { createActionsColumn, createStaticTable } from './util.js';
+export * from './types.js';
+export { createActionsColumn, createStaticTable, getPage, getPageLimit } from './util.js';

package/dist/Table/index.js

@@ -4,4 +4,5 @@ export * from './context.js';
 export { ColumnFormat } from './excel-setting.js';
 export * from './excel.js';
 export { default as Table } from './Table.svelte';
-export { createActionsColumn, createStaticTable } from './util.js';
+export * from './types.js';
+export { createActionsColumn, createStaticTable, getPage, getPageLimit } from './util.js';

package/dist/Table/types.js

@@ -1 +1 @@
-export {};
+import { Operator } from "./consts.js";

package/dist/Table/util.d.ts

@@ -3,3 +3,5 @@ import type { Action } from './types.js';
 export declare const createCheckedColumn: <T>() => import("./adapter/index.js").DisplayColumnDef<T, unknown>;
 export declare const createActionsColumn: <T>(getActions: (row: Row<T>) => Action[]) => import("./adapter/index.js").DisplayColumnDef<T, unknown>;
 export declare const createStaticTable: <TData>(columns: ColumnDef<TData, any>[], data: TData[]) => import("./adapter/index.js").Table<TData>;
+export declare const getPageLimit: (urlSearchParams: URLSearchParams) => number;
+export declare const getPage: (urlSearchParams: URLSearchParams) => number;

package/dist/Table/util.js

@@ -1,10 +1,15 @@
 import ActionsColumn from './ActionsColumn.svelte';
 import RowCheckBox from './RowCheckBox.svelte';
 import { createColumnHelper, createTable, getCoreRowModel, renderComponent } from './adapter/index.js';
+import { DEFAULT_ITEMS_PER_PAGE_OPTIONS, DEFAULT_PAGE, DEFAULT_PAGE_LIMIT } from './consts.js';
 export const createCheckedColumn = () => {
     const columnHelper = createColumnHelper();
     return columnHelper.display({
         id: 'checked',
+        enableSorting: false,
+        enableColumnFilter: false,
+        enableGlobalFilter: false,
+        enableHiding: false,
         header: ({ table }) => renderComponent(RowCheckBox, {
             checked: table.getIsAllRowsSelected(),
             indeterminate: table.getIsSomeRowsSelected(),
@@ -17,9 +22,10 @@ export const createCheckedColumn = () => {
             onchange: row.getToggleSelectedHandler()
         }),
         meta: {
-            columnWidth: '40px'
-        },
-        enableSorting: false
+            columnWidth: '40px',
+            excludeFromExport: true,
+            hideColumnFilter: true
+        }
     });
 };
 export const createActionsColumn = (getActions) => {
@@ -54,3 +60,15 @@ export const createStaticTable = (columns, data) => {
         renderFallbackValue: null
     });
 };
+export const getPageLimit = (urlSearchParams) => {
+    const limitParam = urlSearchParams.get('limit');
+    const limit = Number(limitParam);
+    const isLimitValid = !Number.isNaN(limit) && DEFAULT_ITEMS_PER_PAGE_OPTIONS.includes(limit);
+    return isLimitValid ? limit : DEFAULT_PAGE_LIMIT;
+};
+export const getPage = (urlSearchParams) => {
+    const pageParam = urlSearchParams.get('page');
+    const page = Number(pageParam);
+    const isPageValid = pageParam && !Number.isNaN(page) && page > 0;
+    return isPageValid ? page : DEFAULT_PAGE;
+};

package/dist/Tabs/Tabs.svelte

@@ -42,7 +42,7 @@
 	{#each tabs as tab}
 		{#if activeTab === tab.index}
 			<div
-				class="tabs-content"
+				class={['tabs-content', !tab.disablePadding && 'padding']}
 				id="panel-{tab.index}"
 				role="tabpanel"
 				aria-labelledby="tab-{tab.index}"
@@ -115,10 +115,13 @@
 		position: relative;
 		border-radius: 0px 0px 16px 16px;
 		overflow-wrap: break-word;
-		padding: 24px;
 		box-sizing: border-box;
 		min-height: 300px;
 		text-align: left;
 		font-size: 18px;
 	}
+
+	.padding {
+		padding: 24px;
+	}
 </style>

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

@@ -1,12 +1,14 @@
-import type { Component } from 'svelte';
-export type Tab<TProps extends Record<string, any> = Record<string, never>> = BaseTab | TabComponent<TProps>;
+import type { Component, ComponentProps } from 'svelte';
+export type Tab<TComponent extends Component<any> = Component<any>> = BaseTab | TabComponent<TComponent>;
 type BaseTab = {
     index: number;
     label: string;
     hidden?: boolean;
+    disablePadding?: boolean;
 };
-type TabComponent<TProps extends Record<string, any>> = BaseTab & {
-    component: Component<TProps>;
-    props?: TProps;
+type TabComponent<TComponent extends Component<any>> = BaseTab & {
+    component: TComponent;
+    props: ComponentProps<TComponent>;
 };
+export declare const createTab: <TComponent extends Component<any>>(tab: Tab<TComponent>) => Tab<TComponent>;
 export {};

package/dist/Tabs/tabsState.svelte.js

@@ -1 +1,3 @@
-export {};
+export const createTab = (tab) => {
+    return tab;
+};

package/dist/index.d.ts

@@ -33,7 +33,8 @@ import Toaster from './Toast/Toast.svelte';
 import Toggle from './Controls/Toggle/Toggle.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
 import Waffle from './Waffle/Waffle.svelte';
-import AttachFile from './AttachFile/AttachFile.svelte';
+import AttachFile from './Controls/AttachFile/AttachFile.svelte';
+import { createTab } from './Tabs/tabsState.svelte.js';
 import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
 import { ChipType } from './Chips/chipsState.svelte.js';
 import { ColumnType, ImageType } from './HighlightPanel/highlightPanelState.svelte.js';
@@ -53,4 +54,4 @@ import type { Tab } from './Tabs/tabsState.svelte.js';
 import type { Toast } from './Toast/toastState.svelte';
 import type { WaffleItem } from './Waffle/waffleState.svelte.js';
 import type { NotificationProps } from './Notification/notificationState.svelte.js';
-export { Accordion, AttachFile, Avatar, Breadcrumbs, Button, Card, Chips, DeleteConfirmationModal, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Label, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, getSubMenuItemsFromMenu, 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 SubMenuItem, type NotificationProps };
+export { Accordion, AttachFile, Avatar, Breadcrumbs, Button, Card, Chips, DeleteConfirmationModal, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Label, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, getSubMenuItemsFromMenu, createTab, 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 SubMenuItem, type NotificationProps };

package/dist/index.js

@@ -34,7 +34,8 @@ import Toaster from './Toast/Toast.svelte';
 import Toggle from './Controls/Toggle/Toggle.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
 import Waffle from './Waffle/Waffle.svelte';
-import AttachFile from './AttachFile/AttachFile.svelte';
+import AttachFile from './Controls/AttachFile/AttachFile.svelte';
+import { createTab } from './Tabs/tabsState.svelte.js';
 // State, enums, and helpers
 import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
 import { ChipType } from './Chips/chipsState.svelte.js';
@@ -47,6 +48,6 @@ export {
 // Components
 Accordion, AttachFile, Avatar, Breadcrumbs, Button, Card, Chips, DeleteConfirmationModal, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Label, 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, getSubMenuItemsFromMenu, 
+addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, getSubMenuItemsFromMenu, createTab, 
 // Enums
 ChipType, ColumnType, ImageType };

package/package.json

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