@softwareone/spi-sv5-library 1.15.4 → 1.16.0

package/dist/components/progress-wizard/ProgressWizard.svelte

@@ -1,28 +1,51 @@
 <script lang="ts">
 	import { untrack, type Snippet } from 'svelte';
 
-	import { Button, ErrorPage, type ProgressWizardStep } from '../../index.js';
+	import { type ProgressWizardStep } from '../../index.js';
+	import { setWizardContext } from './context.js';
+	import ProgressWizardHorizontal from './ProgressWizardHorizontal.svelte';
+	import ProgressWizardVertical from './ProgressWizardVertical.svelte';
 
-	interface Props {
+	interface BaseProps {
 		steps: ProgressWizardStep[];
 		currentStep: number;
 		readonly?: boolean;
 		initialStep?: number;
 		content: Snippet;
+	}
+
+	interface HorizontalProps extends BaseProps {
+		orientation: 'horizontal';
+		additionalButtons?: never;
+		oncancel?: never;
+	}
+
+	interface VerticalProps extends BaseProps {
+		orientation?: 'vertical';
 		additionalButtons: Snippet<[lastActiveStep: number]>;
 		oncancel: VoidFunction;
 	}
 
+	type Props = VerticalProps | HorizontalProps;
+
 	let {
 		steps,
-		readonly = false,
 		currentStep = $bindable(0),
+		readonly = false,
 		initialStep,
 		content,
-		additionalButtons,
-		oncancel
+		...props
 	}: Props = $props();
 
+	setWizardContext({
+		getSteps: () => steps,
+		getReadonly: () => readonly,
+		getCurrentStep: () => currentStep,
+		setCurrentStep: (step: number) => {
+			currentStep = step;
+		}
+	});
+
 	const allStepsDisabled = $derived<boolean>(steps.every((step) => step.disabled));
 	const firstActiveStep = $derived<number>(steps.findIndex((step) => !step.disabled) + 1);
 	const lastActiveStep = $derived<number>(steps.findLastIndex((step) => !step.disabled) + 1);
@@ -63,86 +86,27 @@
 </script>
 
 <div class="progress-wizard">
-	<section class="progress-wizard-container">
-		<ol class={['progress-wizard-steps', readonly ? 'readonly' : 'editing-mode']}>
-			{#each steps as step, index (index)}
-				{@const stepIndex = index + 1}
-				{@const isActive = stepIndex === currentStep}
-				{@const isPreviousStep = currentStep > stepIndex}
-				{@const isValid = isPreviousStep && step.isValid}
-				{@const isInvalid = isPreviousStep && !step.isValid}
-				{@const disabled = step.disabled}
-
-				{@const circleContent = (): string => {
-					if (isActive) return stepIndex.toString();
-					if (readonly || disabled) return 'ー';
-					if (isValid) return '✔';
-					if (isInvalid) return '✖';
-					return stepIndex.toString();
-				}}
-
-				<li
-					class={[
-						'progress-wizard-step',
-						isActive && 'active',
-						!readonly && [
-							isPreviousStep && 'previous',
-							isValid && 'valid',
-							isInvalid && 'invalid',
-							disabled && 'disabled'
-						]
-					]}
-				>
-					<div class="time-line">
-						<span class="circle spi-text-semibold-1">
-							{circleContent()}
-						</span>
-						<span class="line"></span>
-					</div>
-					<button
-						type="button"
-						class="details"
-						disabled={disabled || readonly}
-						onclick={() => (currentStep = stepIndex)}
-					>
-						<h2 class="spi-text-semibold-3">{step.title}</h2>
-						{#if step.description}
-							<p class="spi-text-regular-1">{step.description}</p>
-						{/if}
-					</button>
-				</li>
-			{/each}
-		</ol>
-		<article class="progress-wizard-content">
-			{#if allStepsDisabled}
-				<ErrorPage status={403} title="All steps disabled" />
-			{:else}
-				{@render content()}
-			{/if}
-		</article>
-	</section>
-	<section class="progress-wizard-footer">
-		<Button type="button" variant="outline-none" onclick={oncancel}>Cancel</Button>
-
-		<div class="actions">
-			{#if !allStepsDisabled}
-				{#if !readonly}
-					<Button
-						type="button"
-						variant="secondary"
-						disabled={currentStep === firstActiveStep}
-						onclick={onclickBack}>Back</Button
-					>
-
-					{#if currentStep < lastActiveStep}
-						<Button type="button" variant="primary" onclick={onclickNext}>Next</Button>
-					{/if}
-				{/if}
-
-				{@render additionalButtons(lastActiveStep)}
-			{/if}
-		</div>
-	</section>
+	{#if props.orientation === 'horizontal'}
+		<ProgressWizardHorizontal
+			{allStepsDisabled}
+			{firstActiveStep}
+			{lastActiveStep}
+			onclickback={onclickBack}
+			onclicknext={onclickNext}
+			{content}
+		/>
+	{:else}
+		<ProgressWizardVertical
+			{allStepsDisabled}
+			{firstActiveStep}
+			{lastActiveStep}
+			additionalButtons={props.additionalButtons}
+			oncancel={props.oncancel}
+			onclickback={onclickBack}
+			onclicknext={onclickNext}
+			{content}
+		/>
+	{/if}
 </div>
 
 <style>
@@ -156,188 +120,4 @@
 		flex-direction: column;
 		width: 100%;
 	}
-
-	.progress-wizard-container {
-		display: flex;
-		flex: 1;
-	}
-
-	.progress-wizard-steps {
-		display: flex;
-		flex-direction: column;
-		width: fit-content;
-		max-width: 250px;
-		border-right: var(--border-wizard);
-	}
-
-	.progress-wizard-step {
-		display: grid;
-		grid-template-columns: auto 1fr;
-		max-height: 70px;
-		padding: var(--spi-size-4) var(--spi-size-6);
-		gap: var(--spi-size-2);
-		align-items: center;
-		border: none;
-	}
-
-	.time-line {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-
-	.circle {
-		display: flex;
-		width: var(--circle-size);
-		height: var(--circle-size);
-		align-items: center;
-		justify-content: center;
-		border-radius: 50%;
-		background: var(--spi-color-primary-lighter);
-		color: var(--spi-color-primary-base);
-	}
-
-	.line {
-		position: absolute;
-		top: var(--circle-size);
-		width: 1px;
-		height: 50px;
-		background: var(--spi-color-border-default);
-		transition: background var(--spi-duration-slower) var(--spi-ease-default);
-	}
-
-	.progress-wizard-step:last-child .time-line .line {
-		display: none;
-	}
-
-	.details {
-		padding: var(--spi-size-1) var(--spi-size-2);
-		text-align: left;
-		border: none;
-		border-radius: var(--spi-rounded-lg);
-		background: transparent;
-		cursor: pointer;
-
-		h2 {
-			color: var(--spi-color-text-primary);
-		}
-
-		p {
-			word-break: keep-all;
-			color: var(--spi-color-text-muted);
-		}
-	}
-
-	.details:hover {
-		background: var(--spi-color-surface-subtle);
-	}
-
-	.details:focus-visible:not(:disabled) {
-		background: var(--spi-color-surface-subtle);
-		box-shadow: 0 0 0 var(--spi-border-2) var(--spi-color-focus-ring);
-		outline: none;
-	}
-
-	.progress-wizard-content {
-		flex: 1;
-		padding: var(--spi-size-6);
-	}
-
-	.progress-wizard-footer {
-		display: flex;
-		padding: var(--spi-size-6);
-		border-top: var(--border-wizard);
-
-		.actions {
-			display: flex;
-			gap: var(--spi-size-3);
-			margin-left: auto;
-		}
-	}
-
-	.progress-wizard-step.active {
-		.time-line .circle {
-			border: var(--border-circle);
-		}
-
-		.details {
-			box-shadow: none;
-			background: transparent;
-
-			h2,
-			p {
-				color: var(--spi-color-primary-base);
-			}
-		}
-	}
-
-	.progress-wizard-steps:is(.readonly) {
-		.progress-wizard-step:not(.active) {
-			.line {
-				background: var(--spi-color-border-default);
-			}
-
-			.circle {
-				border: var(--border-readonly);
-				background: var(--spi-color-disabled-bg);
-				color: var(--spi-color-text-muted);
-			}
-
-			.details {
-				h2 {
-					color: var(--spi-color-text-muted);
-				}
-				p {
-					color: var(--spi-color-text-disabled);
-				}
-			}
-
-			.details:hover {
-				background: transparent;
-				cursor: not-allowed;
-			}
-		}
-	}
-
-	.progress-wizard-steps:is(.editing-mode) {
-		.progress-wizard-step.previous .time-line .line {
-			background: var(--spi-color-primary-base);
-		}
-
-		.progress-wizard-step.previous.valid .time-line .circle {
-			color: var(--spi-color-text-inverse);
-			background: var(--spi-color-primary-base);
-			border: var(--border-circle);
-		}
-
-		.progress-wizard-step.previous.invalid .time-line .circle {
-			color: var(--spi-color-text-danger);
-			background: var(--spi-color-danger-lighter);
-			border: var(--spi-border-2) solid var(--spi-color-border-danger);
-		}
-
-		.progress-wizard-step:is(.disabled, .previous.disabled) {
-			.details {
-				h2 {
-					color: var(--spi-color-text-muted);
-				}
-				p {
-					color: var(--spi-color-text-disabled);
-				}
-			}
-			.details:hover {
-				background: transparent;
-				cursor: not-allowed;
-			}
-
-			.time-line {
-				.circle {
-					color: var(--spi-color-text-muted);
-					background: var(--spi-color-disabled-bg);
-					border: var(--border-readonly);
-				}
-			}
-		}
-	}
 </style>

package/dist/components/progress-wizard/ProgressWizard.svelte.d.ts

@@ -1,14 +1,23 @@
 import { type Snippet } from 'svelte';
 import { type ProgressWizardStep } from '../../index.js';
-interface Props {
+interface BaseProps {
     steps: ProgressWizardStep[];
     currentStep: number;
     readonly?: boolean;
     initialStep?: number;
     content: Snippet;
+}
+interface HorizontalProps extends BaseProps {
+    orientation: 'horizontal';
+    additionalButtons?: never;
+    oncancel?: never;
+}
+interface VerticalProps extends BaseProps {
+    orientation?: 'vertical';
     additionalButtons: Snippet<[lastActiveStep: number]>;
     oncancel: VoidFunction;
 }
+type Props = VerticalProps | HorizontalProps;
 declare const ProgressWizard: import("svelte").Component<Props, {}, "currentStep">;
 type ProgressWizard = ReturnType<typeof ProgressWizard>;
 export default ProgressWizard;

package/dist/components/progress-wizard/ProgressWizardHorizontal.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { Button, Card, ErrorPage } from '../../index.js';
+	import { getWizardContext } from './context.js';
+	import ProgressWizardStep from './ProgressWizardStep.svelte';
+	import type { BaseProgressWizardProps } from './types.js';
+
+	let {
+		allStepsDisabled,
+		firstActiveStep,
+		lastActiveStep,
+		onclickback,
+		onclicknext,
+		content
+	}: BaseProgressWizardProps = $props();
+
+	const wizard = getWizardContext();
+
+	const readonly = $derived<boolean>(wizard.readonly);
+	const currentStep = $derived<number>(wizard.currentStep);
+</script>
+
+<section class="progress-wizard-container">
+	<Card>
+		{#if !allStepsDisabled}
+			{#if !readonly}
+				<Button
+					type="button"
+					variant="outline"
+					disabled={currentStep === firstActiveStep}
+					onclick={onclickback}>Back</Button
+				>
+			{/if}
+		{/if}
+
+		<ProgressWizardStep />
+
+		{#if !allStepsDisabled}
+			{#if !readonly}
+				{#if currentStep < lastActiveStep}
+					<Button type="button" variant="outline" onclick={onclicknext}>Next</Button>
+				{/if}
+			{/if}
+		{/if}
+	</Card>
+	<Card>
+		{#if allStepsDisabled}
+			<ErrorPage status={403} title="All steps disabled" />
+		{:else}
+			{@render content()}
+		{/if}
+	</Card>
+</section>
+
+<style>
+	.progress-wizard-container {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spi-size-4);
+	}
+
+	.progress-wizard-container > :global(.card):first-child {
+		display: flex;
+		align-items: center;
+		gap: var(--spi-size-8);
+	}
+</style>

package/dist/components/progress-wizard/ProgressWizardHorizontal.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BaseProgressWizardProps } from './types.js';
+declare const ProgressWizardHorizontal: import("svelte").Component<BaseProgressWizardProps, {}, "">;
+type ProgressWizardHorizontal = ReturnType<typeof ProgressWizardHorizontal>;
+export default ProgressWizardHorizontal;

package/dist/components/progress-wizard/ProgressWizardStep.svelte

@@ -0,0 +1,251 @@
+<script lang="ts">
+	import { getWizardContext } from './context.js';
+	import type { ProgressWizardStep } from './types.js';
+
+	interface Props {
+		isVertical?: boolean;
+	}
+
+	let { isVertical = false }: Props = $props();
+
+	const wizard = getWizardContext();
+
+	const readonly = $derived<boolean>(wizard.readonly);
+	const steps = $derived<ProgressWizardStep[]>(wizard.steps);
+	const currentStep = $derived<number>(wizard.currentStep);
+</script>
+
+<ol
+	class={[
+		'progress-wizard-steps',
+		isVertical ? 'vertical' : 'horizontal',
+		readonly ? 'readonly' : 'editing-mode'
+	]}
+>
+	{#each steps as step, index (index)}
+		{@const stepIndex = index + 1}
+		{@const isActive = stepIndex === currentStep}
+		{@const isPreviousStep = currentStep > stepIndex}
+		{@const isValid = isPreviousStep && step.isValid}
+		{@const isInvalid = isPreviousStep && !step.isValid}
+		{@const disabled = step.disabled}
+
+		{@const circleContent = (): string => {
+			if (isActive) return stepIndex.toString();
+			if (readonly || disabled) return 'ー';
+			if (isValid) return '✔';
+			if (isInvalid) return '✖';
+			return stepIndex.toString();
+		}}
+
+		<li
+			class={[
+				'progress-wizard-step',
+				isVertical && 'vertical',
+				isActive && 'active',
+				!readonly && [
+					isPreviousStep && 'previous',
+					isValid && 'valid',
+					isInvalid && 'invalid',
+					disabled && 'disabled'
+				]
+			]}
+		>
+			<div class="time-line">
+				<span class="circle spi-text-semibold-1">
+					{circleContent()}
+				</span>
+				{#if isVertical}
+					<span class="line"></span>
+				{/if}
+			</div>
+			<button
+				type="button"
+				class="details"
+				disabled={disabled || readonly}
+				onclick={() => wizard.setCurrentStep(stepIndex)}
+			>
+				<h2 class="spi-text-semibold-3">{step.title}</h2>
+				{#if step.description}
+					<p class="spi-text-regular-1">{step.description}</p>
+				{/if}
+			</button>
+		</li>
+	{/each}
+</ol>
+
+<style>
+	.progress-wizard-steps {
+		display: flex;
+	}
+
+	.progress-wizard-steps.vertical {
+		flex-direction: column;
+		width: fit-content;
+		max-width: 250px;
+		border-right: var(--border-wizard);
+	}
+
+	.progress-wizard-steps.horizontal {
+		flex-direction: row;
+		width: 100%;
+		gap: var(--spi-size-8);
+	}
+
+	.progress-wizard-step {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		max-height: 70px;
+		gap: var(--spi-size-2);
+		align-items: center;
+		border: none;
+	}
+
+	.progress-wizard-step.vertical {
+		padding: var(--spi-size-4) var(--spi-size-6);
+	}
+
+	.time-line {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.circle {
+		display: flex;
+		width: var(--circle-size);
+		height: var(--circle-size);
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		background: var(--spi-color-primary-lighter);
+		color: var(--spi-color-primary-base);
+	}
+
+	.line {
+		position: absolute;
+		top: var(--circle-size);
+		width: 1px;
+		height: 50px;
+		background: var(--spi-color-border-default);
+		transition: background var(--spi-duration-slower) var(--spi-ease-default);
+	}
+
+	.progress-wizard-step:last-child .time-line .line {
+		display: none;
+	}
+
+	.details {
+		padding: var(--spi-size-1) var(--spi-size-2);
+		text-align: left;
+		border: none;
+		border-radius: var(--spi-rounded-lg);
+		background: transparent;
+		cursor: pointer;
+
+		h2 {
+			color: var(--spi-color-text-primary);
+		}
+
+		p {
+			word-break: keep-all;
+			color: var(--spi-color-text-muted);
+		}
+	}
+
+	.details:hover {
+		background: var(--spi-color-surface-subtle);
+	}
+
+	.details:focus-visible:not(:disabled) {
+		background: var(--spi-color-surface-subtle);
+		box-shadow: 0 0 0 var(--spi-border-2) var(--spi-color-focus-ring);
+		outline: none;
+	}
+
+	.progress-wizard-step.active {
+		.time-line .circle {
+			border: var(--border-circle);
+		}
+
+		.details {
+			box-shadow: none;
+			background: transparent;
+
+			h2,
+			p {
+				color: var(--spi-color-primary-base);
+			}
+		}
+	}
+
+	.progress-wizard-steps:is(.readonly) {
+		.progress-wizard-step:not(.active) {
+			.line {
+				background: var(--spi-color-border-default);
+			}
+
+			.circle {
+				border: var(--border-readonly);
+				background: var(--spi-color-disabled-bg);
+				color: var(--spi-color-text-muted);
+			}
+
+			.details {
+				h2 {
+					color: var(--spi-color-text-muted);
+				}
+				p {
+					color: var(--spi-color-text-disabled);
+				}
+			}
+
+			.details:hover {
+				background: transparent;
+				cursor: not-allowed;
+			}
+		}
+	}
+
+	.progress-wizard-steps:is(.editing-mode) {
+		.progress-wizard-step.previous .time-line .line {
+			background: var(--spi-color-primary-base);
+		}
+
+		.progress-wizard-step.previous.valid .time-line .circle {
+			color: var(--spi-color-text-inverse);
+			background: var(--spi-color-primary-base);
+			border: var(--border-circle);
+		}
+
+		.progress-wizard-step.previous.invalid .time-line .circle {
+			color: var(--spi-color-text-danger);
+			background: var(--spi-color-danger-lighter);
+			border: var(--spi-border-2) solid var(--spi-color-border-danger);
+		}
+
+		.progress-wizard-step:is(.disabled, .previous.disabled) {
+			.details {
+				h2 {
+					color: var(--spi-color-text-muted);
+				}
+				p {
+					color: var(--spi-color-text-disabled);
+				}
+			}
+			.details:hover {
+				background: transparent;
+				cursor: not-allowed;
+			}
+
+			.time-line {
+				.circle {
+					color: var(--spi-color-text-muted);
+					background: var(--spi-color-disabled-bg);
+					border: var(--border-readonly);
+				}
+			}
+		}
+	}
+</style>

package/dist/components/progress-wizard/ProgressWizardStep.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ProgressWizardStep } from './types.js';
+interface Props {
+    isVertical?: boolean;
+}
+declare const ProgressWizardStep: import("svelte").Component<Props, {}, "">;
+type ProgressWizardStep = ReturnType<typeof ProgressWizardStep>;
+export default ProgressWizardStep;

package/dist/components/progress-wizard/ProgressWizardVertical.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+
+	import { Button, ErrorPage } from '../../index.js';
+	import { getWizardContext } from './context.js';
+	import ProgressWizardStep from './ProgressWizardStep.svelte';
+	import type { BaseProgressWizardProps } from './types.js';
+
+	interface Props extends BaseProgressWizardProps {
+		additionalButtons: Snippet<[lastActiveStep: number]>;
+		oncancel: VoidFunction;
+	}
+
+	let {
+		allStepsDisabled,
+		firstActiveStep,
+		lastActiveStep,
+		additionalButtons,
+		oncancel,
+		onclickback,
+		onclicknext,
+		content
+	}: Props = $props();
+
+	const wizard = getWizardContext();
+
+	const readonly = $derived<boolean>(wizard.readonly);
+	const currentStep = $derived<number>(wizard.currentStep);
+</script>
+
+<section class="progress-wizard-container">
+	<ProgressWizardStep isVertical />
+
+	<article class="progress-wizard-content">
+		{#if allStepsDisabled}
+			<ErrorPage status={403} title="All steps disabled" />
+		{:else}
+			{@render content()}
+		{/if}
+	</article>
+</section>
+
+<section class="progress-wizard-footer">
+	<Button type="button" variant="outline-none" onclick={oncancel}>Cancel</Button>
+
+	<div class="actions">
+		{#if !allStepsDisabled}
+			{#if !readonly}
+				<Button
+					type="button"
+					variant="secondary"
+					disabled={currentStep === firstActiveStep}
+					onclick={onclickback}>Back</Button
+				>
+
+				{#if currentStep < lastActiveStep}
+					<Button type="button" variant="primary" onclick={onclicknext}>Next</Button>
+				{/if}
+			{/if}
+
+			{@render additionalButtons(lastActiveStep)}
+		{/if}
+	</div>
+</section>
+
+<style>
+	.progress-wizard-container {
+		display: flex;
+		flex: 1;
+	}
+
+	.progress-wizard-content {
+		flex: 1;
+		padding: var(--spi-size-6);
+	}
+
+	.progress-wizard-footer {
+		display: flex;
+		padding: var(--spi-size-6);
+		border-top: var(--border-wizard);
+
+		.actions {
+			display: flex;
+			gap: var(--spi-size-3);
+			margin-left: auto;
+		}
+	}
+</style>

package/dist/components/progress-wizard/ProgressWizardVertical.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from 'svelte';
+import type { BaseProgressWizardProps } from './types.js';
+interface Props extends BaseProgressWizardProps {
+    additionalButtons: Snippet<[lastActiveStep: number]>;
+    oncancel: VoidFunction;
+}
+declare const ProgressWizardVertical: import("svelte").Component<Props, {}, "">;
+type ProgressWizardVertical = ReturnType<typeof ProgressWizardVertical>;
+export default ProgressWizardVertical;

package/dist/components/progress-wizard/context.d.ts

@@ -1,5 +1,5 @@
 import { type Writable } from 'svelte/store';
-import type { ProgressWizardStep } from './types.js';
+import type { ProgressWizardContext, ProgressWizardContextAccessors, ProgressWizardStep } from './types.js';
 export declare const setProgressWizardStepsContext: (steps: ProgressWizardStep[]) => Writable<{
     title: string;
     description?: string;
@@ -7,3 +7,5 @@ export declare const setProgressWizardStepsContext: (steps: ProgressWizardStep[]
     disabled: boolean;
 }[]>;
 export declare const getProgressWizardContext: () => Writable<ProgressWizardStep[]>;
+export declare const setWizardContext: (accessors: ProgressWizardContextAccessors) => ProgressWizardContext;
+export declare const getWizardContext: () => ProgressWizardContext;

package/dist/components/progress-wizard/context.js

@@ -1,6 +1,7 @@
 import { getContext, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 const stepsKey = Symbol('steps');
+const WIZARD_CONTEXT_KEY = Symbol('progressWizard');
 export const setProgressWizardStepsContext = (steps) => {
     const stepsContext = writable(steps.map((step) => ({ ...step })));
     setContext(stepsKey, stepsContext);
@@ -9,3 +10,16 @@ export const setProgressWizardStepsContext = (steps) => {
 export const getProgressWizardContext = () => {
     return getContext(stepsKey);
 };
+export const setWizardContext = (accessors) => setContext(WIZARD_CONTEXT_KEY, {
+    get currentStep() {
+        return accessors.getCurrentStep();
+    },
+    get readonly() {
+        return accessors.getReadonly();
+    },
+    get steps() {
+        return accessors.getSteps();
+    },
+    setCurrentStep: accessors.setCurrentStep
+});
+export const getWizardContext = () => getContext(WIZARD_CONTEXT_KEY);

package/dist/components/progress-wizard/types.d.ts

@@ -1,6 +1,27 @@
+import type { Snippet } from 'svelte';
+export interface BaseProgressWizardProps {
+    allStepsDisabled: boolean;
+    firstActiveStep: number;
+    lastActiveStep: number;
+    onclickback: VoidFunction;
+    onclicknext: VoidFunction;
+    content: Snippet;
+}
 export type ProgressWizardStep = {
     title: string;
     description?: string;
     isValid: boolean;
     disabled: boolean;
 };
+export type ProgressWizardContext = {
+    steps: ProgressWizardStep[];
+    readonly: boolean;
+    currentStep: number;
+    setCurrentStep: (step: number) => void;
+};
+export type ProgressWizardContextAccessors = {
+    getSteps: () => ProgressWizardStep[];
+    getReadonly: () => boolean;
+    getCurrentStep: () => number;
+    setCurrentStep: (step: number) => void;
+};

package/dist/components/table/Body.svelte

@@ -5,9 +5,10 @@
 	interface Props {
 		bodyRows: Row<T>[];
 		enableChecked?: boolean;
+		disabledRows: T[];
 	}
 
-	let { bodyRows, enableChecked = false }: Props = $props();
+	let { bodyRows, enableChecked = false, disabledRows }: Props = $props();
 
 	const CLICKABLE_TAGS = ['td', 'span', 'p'];
 
@@ -18,6 +19,8 @@
 			row.toggleSelected();
 		}
 	};
+
+	const isDisabledRow = (row: T) => disabledRows.includes(row);
 </script>
 
 <tbody class="table-body">
@@ -27,9 +30,12 @@
 			class={[
 				'table-row',
 				row.getIsSelected() && 'table-row--selected',
-				enableChecked && 'table-row--clickable'
+				enableChecked && 'table-row--clickable',
+				isDisabledRow(row.original) && 'cursor-not-allowed'
 			]}
-			onclick={enableChecked ? (event) => handleRowClick(row, event.target) : undefined}
+			onclick={enableChecked && !isDisabledRow(row.original)
+				? (event) => handleRowClick(row, event.target)
+				: undefined}
 		>
 			{#each row.getVisibleCells() as cell (cell.id)}
 				{@const alignColumn = cell.column.columnDef.meta?.alignColumn}
@@ -98,4 +104,8 @@
 	.table-cell--right {
 		text-align: right;
 	}
+
+	.cursor-not-allowed {
+		cursor: not-allowed;
+	}
 </style>

package/dist/components/table/Body.svelte.d.ts

@@ -3,6 +3,7 @@ declare function $$render<T>(): {
     props: {
         bodyRows: Row<T>[];
         enableChecked?: boolean;
+        disabledRows: T[];
     };
     exports: {};
     bindings: "";

package/dist/components/table/Table.svelte

@@ -43,12 +43,11 @@
 		isValidPageSize
 	} from './utils.js';
 
-	interface Props {
+	interface BaseProps<T> {
 		columns: ColumnDef<T, any>[];
 		isLoading?: boolean;
 		data?: T[];
 		minPageSize?: boolean;
-		enableChecked?: boolean;
 		keepVisibleBulkActions?: boolean;
 		enableExportExcel?: boolean;
 		enableGlobalSearch?: boolean;
@@ -68,12 +67,34 @@
 		onprevpage?: (pageSize: number, pageNumber: number) => void;
 	}
 
+	interface TableWithCheckbox<T> extends BaseProps<T> {
+		enableChecked: true;
+		preselectedRows?: T[];
+		disabledRows?: T[];
+		onselectionchange?: (selectedRows: T[]) => void;
+		onclearselection?: (clearSelection: VoidFunction) => void;
+	}
+
+	interface TableWithoutCheckbox<T> extends BaseProps<T> {
+		enableChecked?: false;
+		preselectedRows?: never;
+		disabledRows?: never;
+		onselectionchange?: never;
+		onclearselection?: never;
+	}
+
+	type Props<T> = TableWithCheckbox<T> | TableWithoutCheckbox<T>;
+
 	let {
 		columns = [],
 		isLoading = false,
 		data = [],
 		minPageSize = false,
 		enableChecked = false,
+		preselectedRows = [],
+		disabledRows = [],
+		onselectionchange,
+		onclearselection,
 		keepVisibleBulkActions = false,
 		enableExportExcel = false,
 		enableGlobalSearch = true,
@@ -94,26 +115,41 @@
 		onprevpage,
 		header,
 		bulkActions
-	}: Props = $props();
+	}: Props<T> = $props();
+
+	const tableManualPagination = serverSide ? setPaginationTableContext() : undefined;
 
 	let globalFilter = $state<string>('');
 	let sorting = $state<SortingState>([]);
 	let columnFilters = $state<ColumnFiltersState>([]);
-	let rowSelection = $state<RowSelectionState>({});
 	let expanded = $state<ExpandedState>({});
 	let columnVisibility = $state<VisibilityState>(getInitialColumnVisibility());
 	let paginationState = $state<PaginationState>(getInitialPaginationState());
+	let rowSelection = $state<RowSelectionState>();
+
 	let tableData = $derived(data);
-	const tableManualPagination = serverSide ? setPaginationTableContext() : undefined;
 	const hasData = $derived(data.length > 0);
 
+	const selectedRowIds = $derived.by<RowSelectionState>(() => {
+		if (rowSelection !== undefined) return rowSelection;
+		if (!enableChecked || !preselectedRows?.length) return {};
+
+		const selectedRowIds: RowSelectionState = {};
+
+		table.getRowModel().rows.forEach((row) => {
+			if (preselectedRows.includes(row.original)) selectedRowIds[row.id] = true;
+		});
+
+		return selectedRowIds;
+	});
+
 	const tableColumns = $derived.by(() => {
 		if (!enableChecked) return columns;
 
 		const checkedColumnExists = columns.some((column) => column.id === 'checked');
 		if (checkedColumnExists) return columns;
 
-		const checkedColumn = createCheckedColumn<T>();
+		const checkedColumn = createCheckedColumn<T>(disabledRows);
 		return [checkedColumn, ...columns];
 	});
 
@@ -135,7 +171,7 @@
 				return columnFilters;
 			},
 			get rowSelection() {
-				return rowSelection;
+				return selectedRowIds;
 			},
 			get globalFilter() {
 				return globalFilter;
@@ -157,7 +193,7 @@
 			columnVisibility = updater instanceof Function ? updater(columnVisibility) : updater;
 		},
 		onRowSelectionChange: (updater: Updater<RowSelectionState>) => {
-			rowSelection = updater instanceof Function ? updater(rowSelection) : updater;
+			rowSelection = updater instanceof Function ? updater(selectedRowIds) : updater;
 		},
 		onColumnFiltersChange: (updater: Updater<ColumnFiltersState>) => {
 			columnFilters = updater instanceof Function ? updater(columnFilters) : updater;
@@ -264,6 +300,16 @@
 			$tableManualPagination = { ...pagination };
 		}
 	});
+
+	$effect(() => {
+		if (!enableChecked) return;
+		onselectionchange?.(selectedRows.map((row) => row.original));
+	});
+
+	$effect(() => {
+		if (!enableChecked) return;
+		onclearselection?.(clearSelection);
+	});
 </script>
 
 <section class="table-container">
@@ -334,7 +380,7 @@
 			<table class="table-main">
 				<Header headerGroups={table.getHeaderGroups()} {enableColumnSearch} />
 				{#if hasData}
-					<Body bodyRows={table.getRowModel().rows} {enableChecked} />
+					<Body bodyRows={table.getRowModel().rows} {enableChecked} {disabledRows} />
 				{/if}
 			</table>
 		</article>

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

@@ -2,31 +2,46 @@ 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';
+interface BaseProps<T> {
+    columns: ColumnDef<T, any>[];
+    isLoading?: boolean;
+    data?: T[];
+    minPageSize?: boolean;
+    keepVisibleBulkActions?: boolean;
+    enableExportExcel?: boolean;
+    enableGlobalSearch?: boolean;
+    enableColumnSearch?: boolean;
+    enableColumnVisibility?: boolean;
+    enableAdvancedFilter?: boolean;
+    serverSide?: boolean;
+    pagination?: Pagination;
+    initialPage?: number;
+    initialPageSize?: number;
+    excelSetting?: ExcelSetting;
+    header?: Snippet;
+    bulkActions?: Snippet<[selectedRows: T[], clearSelection: VoidFunction]>;
+    onpagechange?: (pageSize: number, pageNumber: number) => void;
+    onpagesizechange?: (pageSize: number) => void;
+    onnextpage?: (pageSize: number, pageNumber: number) => void;
+    onprevpage?: (pageSize: number, pageNumber: number) => void;
+}
+interface TableWithCheckbox<T> extends BaseProps<T> {
+    enableChecked: true;
+    preselectedRows?: T[];
+    disabledRows?: T[];
+    onselectionchange?: (selectedRows: T[]) => void;
+    onclearselection?: (clearSelection: VoidFunction) => void;
+}
+interface TableWithoutCheckbox<T> extends BaseProps<T> {
+    enableChecked?: false;
+    preselectedRows?: never;
+    disabledRows?: never;
+    onselectionchange?: never;
+    onclearselection?: never;
+}
+type Props<T> = TableWithCheckbox<T> | TableWithoutCheckbox<T>;
 declare function $$render<T extends object>(): {
-    props: {
-        columns: ColumnDef<T, any>[];
-        isLoading?: boolean;
-        data?: T[];
-        minPageSize?: boolean;
-        enableChecked?: boolean;
-        keepVisibleBulkActions?: boolean;
-        enableExportExcel?: boolean;
-        enableGlobalSearch?: boolean;
-        enableColumnSearch?: boolean;
-        enableColumnVisibility?: boolean;
-        enableAdvancedFilter?: boolean;
-        serverSide?: boolean;
-        pagination?: Pagination;
-        initialPage?: number;
-        initialPageSize?: number;
-        excelSetting?: ExcelSetting;
-        header?: Snippet;
-        bulkActions?: Snippet<[selectedRows: T[], clearSelection: VoidFunction]>;
-        onpagechange?: (pageSize: number, pageNumber: number) => void;
-        onpagesizechange?: (pageSize: number) => void;
-        onnextpage?: (pageSize: number, pageNumber: number) => void;
-        onprevpage?: (pageSize: number, pageNumber: number) => void;
-    };
+    props: Props<T>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/components/table/utils.d.ts

@@ -1,6 +1,6 @@
 import { type ColumnDef, type Row } from './adapter/index.js';
 import type { Action, CursorPagination, Filter, PagePagination, Pagination } from './types.js';
-export declare const createCheckedColumn: <T>() => import("./adapter/index.js").DisplayColumnDef<T, unknown>;
+export declare const createCheckedColumn: <T>(disabledRows: 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 isValidPage: (value: number | undefined) => value is number;

package/dist/components/table/utils.js

@@ -2,7 +2,7 @@ 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, Operation, Operator } from './consts.js';
-export const createCheckedColumn = () => {
+export const createCheckedColumn = (disabledRows) => {
     const columnHelper = createColumnHelper();
     return columnHelper.display({
         id: 'checked',
@@ -12,12 +12,13 @@ export const createCheckedColumn = () => {
         enableHiding: false,
         header: ({ table }) => renderComponent(RowCheckBox, {
             checked: table.getIsAllRowsSelected(),
+            disabled: disabledRows.length > 0,
             indeterminate: table.getIsSomeRowsSelected(),
             onchange: table.getToggleAllRowsSelectedHandler()
         }),
         cell: ({ row }) => renderComponent(RowCheckBox, {
             checked: row.getIsSelected(),
-            disabled: !row.getCanSelect(),
+            disabled: disabledRows.includes(row.original),
             indeterminate: row.getIsSomeSelected(),
             onchange: row.getToggleSelectedHandler()
         }),

package/dist/utils/url.js

@@ -1,15 +1,17 @@
 import { base } from '$app/paths';
 import { page } from '$app/state';
+const normalizePathname = (path) => path.replace(/^\/v\d+\//, '/');
 export const getNormalizedPathname = () => {
     const pathname = page.url.pathname;
     const withoutBase = base && pathname.startsWith(base) ? pathname.slice(base.length) : pathname;
-    return withoutBase.replace(/^\/v\d+\//, '/');
+    return normalizePathname(withoutBase);
 };
 export const getFirstPathSegment = (pathname) => {
     const matchedPath = /^\/[^/]+/.exec(pathname);
     return matchedPath?.[0] ?? '/';
 };
 export const existRoute = (url, pathname) => {
-    const regex = new RegExp(`${url}(?![\\w-])`);
-    return regex.test(pathname);
+    const normalizedPathname = normalizePathname(pathname);
+    const regex = new RegExp(`^${url}(?![\\w-])`);
+    return regex.test(normalizedPathname);
 };

package/package.json

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