@softwareone/spi-sv5-library 1.1.0 → 1.2.0

package/dist/ProgressPage/ProgressPage.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { Button } from '../index.js';
+
+	type ProgressPageProps = {
+		iconName: string;
+		title: string;
+		description?: string;
+		documentationUrl?: string;
+		onclick?: VoidFunction;
+		buttonText?: string;
+	};
+
+	let {
+		iconName,
+		title,
+		description = '',
+		documentationUrl = '',
+		onclick,
+		buttonText = 'Save'
+	}: ProgressPageProps = $props();
+</script>
+
+<article class="progress-page">
+	<span class="material-icons-outlined progress-icon">{iconName}</span>
+	<div class="progress-content">
+		<p class="progress-title">{title}</p>
+		{#if description}
+			<p class="progress-description">{description}</p>
+		{/if}
+		{#if documentationUrl}
+			<p class="progress-documentation">
+				To see more details check
+				<a rel="noreferrer" class="progress-link" href={documentationUrl} target="_blank">
+					our documentation.
+				</a>
+			</p>
+		{/if}
+	</div>
+
+	{#if onclick}
+		<Button {onclick}>{buttonText}</Button>
+	{/if}
+</article>
+
+<style>
+	.progress-page {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 24px;
+		max-width: 350px;
+		gap: 24px;
+	}
+
+	.progress-icon {
+		color: #472aff;
+		font-size: 32px;
+	}
+
+	.progress-content {
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+		gap: 8px;
+	}
+
+	.progress-title {
+		font-size: 18px;
+		font-weight: 700;
+		color: #000;
+		line-height: 1.4;
+	}
+
+	.progress-description,
+	.progress-documentation {
+		font-size: 14px;
+		color: #000;
+		line-height: 1.4;
+	}
+
+	.progress-link {
+		color: #472aff;
+		text-decoration: none;
+	}
+
+	.progress-link:hover {
+		text-decoration: underline;
+	}
+
+	.progress-link:focus {
+		outline: 2px solid #472aff;
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+</style>

package/dist/ProgressPage/ProgressPage.svelte.d.ts

@@ -0,0 +1,11 @@
+type ProgressPageProps = {
+    iconName: string;
+    title: string;
+    description?: string;
+    documentationUrl?: string;
+    onclick?: VoidFunction;
+    buttonText?: string;
+};
+declare const ProgressPage: import("svelte").Component<ProgressPageProps, {}, "">;
+type ProgressPage = ReturnType<typeof ProgressPage>;
+export default ProgressPage;

package/dist/ProgressWizard/ProgressWizard.svelte

@@ -42,9 +42,7 @@
 
 	const stepToStart = (): number => {
 		if (readonly && allStepsDisabled) return -1;
-
 		if (readonly && !allStepsDisabled) return steps.length;
-
 		return firstActiveStep;
 	};
 
@@ -96,6 +94,7 @@
 						<span class="line"></span>
 					</div>
 					<button
+						type="button"
 						class="details"
 						disabled={disabled || readonly}
 						onclick={() => (currentStep = stepIndex)}

package/dist/Search/Search.svelte

@@ -18,14 +18,15 @@
 
 	const hasValue = $derived(!!value);
 
-	const handleClear = () => {
+	const handleClear = (event: Event) => {
+		event.stopPropagation();
 		value = '';
 		onclear?.();
 	};
 
 	const handleKeydown = (event: KeyboardEvent) => {
 		if (event.key === 'Escape' && hasValue) {
-			handleClear();
+			handleClear(event);
 			event.preventDefault();
 		}
 	};
@@ -67,12 +68,17 @@
 		border-radius: 8px;
 		border: 1px solid #6b7180;
 		background: #fff;
-		transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+		transition:
+			border-color 0.2s ease-in-out,
+			box-shadow 0.2s ease-in-out;
 	}
 
 	.search-wrapper:hover:not(:has(.search-input:disabled)),
 	.search-wrapper:focus-within {
 		border-color: #472aff;
+	}
+
+	.search-wrapper:focus-within {
 		box-shadow: 0 0 0 3px rgba(149, 155, 255, 0.3);
 	}
 
@@ -119,7 +125,9 @@
 		padding: 4px;
 		cursor: pointer;
 		border-radius: 4px;
-		transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+		transition:
+			color 0.2s ease-in-out,
+			background-color 0.2s ease-in-out;
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -128,7 +136,6 @@
 	.clear-button:hover,
 	.clear-button:focus {
 		color: #000;
-		background-color: #f3f4f6;
 		outline: none;
 	}
 

package/dist/Spinner/Spinner.svelte

@@ -1,54 +1,43 @@
 <script lang="ts">
 	interface SpinnerProps {
-		size?: 'small' | 'medium' | 'large';
+		show: boolean;
+		size?: 'sm' | 'md' | 'lg';
 	}
 
-	let { size }: SpinnerProps = $props();
+	let { show = $bindable(false), size = 'lg' }: SpinnerProps = $props();
 
-	size = size || 'large';
-
-	const sizes = {
-		small: {
-			pxsize: '16px',
-			svg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-  <path d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM4.2005 8C4.2005 10.0984 5.90159 11.7995 8 11.7995C10.0984 11.7995 11.7995 10.0984 11.7995 8C11.7995 5.90159 10.0984 4.2005 8 4.2005C5.90159 4.2005 4.2005 5.90159 4.2005 8Z" fill="#E0E5E8"/>
-  <path d="M8 13.8998C8 15.0597 8.95609 16.027 10.0763 15.7259C11.4189 15.365 12.6567 14.657 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.6567 1.34297 11.4189 0.634982 10.0763 0.274108C8.95609 -0.0269669 8 0.940313 8 2.10025C8 3.26019 9.00775 4.15735 9.99495 4.76635C10.244 4.91998 10.4764 5.10307 10.6867 5.31335C11.3992 6.02589 11.7995 6.99231 11.7995 8C11.7995 9.00769 11.3992 9.97411 10.6867 10.6867C10.4764 10.8969 10.244 11.08 9.99495 11.2336C9.00775 11.8427 8 12.7398 8 13.8998Z" fill="#472AFF"/>
-</svg>`
-		},
-		medium: {
-			pxsize: '33px',
-			svg: `<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
-  <path d="M33 16.5C33 25.6127 25.6127 33 16.5 33C7.3873 33 0 25.6127 0 16.5C0 7.3873 7.3873 0 16.5 0C25.6127 0 33 7.3873 33 16.5ZM3.4924 16.5C3.4924 23.6839 9.3161 29.5076 16.5 29.5076C23.6839 29.5076 29.5076 23.6839 29.5076 16.5C29.5076 9.3161 23.6839 3.4924 16.5 3.4924C9.3161 3.4924 3.4924 9.3161 3.4924 16.5Z" fill="#E0E5E8"/>
-  <path d="M16.5 31.2538C16.5 32.2182 17.2841 33.0096 18.2431 32.9077C21.9784 32.511 25.4865 30.848 28.1673 28.1673C31.2616 25.0729 33 20.8761 33 16.5C33 12.1239 31.2616 7.92709 28.1673 4.83274C25.4865 2.15202 21.9784 0.488977 18.2431 0.0922724C17.2841 -0.00957781 16.5 0.781801 16.5 1.7462C16.5 2.7106 17.2853 3.48033 18.2411 3.6094C21.048 3.98847 23.6725 5.27693 25.6978 7.30224C28.1372 9.74164 29.5076 13.0502 29.5076 16.5C29.5076 19.9498 28.1372 23.2584 25.6978 25.6978C23.6725 27.7231 21.048 29.0115 18.2411 29.3906C17.2853 29.5197 16.5 30.2894 16.5 31.2538Z" fill="#472AFF"/>
-</svg>`
-		},
-		large: {
-			pxsize: '40px',
-			svg: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
-  <path d="M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM6.27298 20C6.27298 27.5812 12.4188 33.727 20 33.727C27.5812 33.727 33.727 27.5812 33.727 20C33.727 12.4188 27.5812 6.27298 20 6.27298C12.4188 6.27298 6.27298 12.4188 6.27298 20Z" fill="#E0E5E8"/>
-  <path d="M20 3.13649C20 1.40425 21.4128 -0.0251732 23.1238 0.245376C27.2709 0.901143 31.1358 2.85154 34.1421 5.85786C37.8929 9.60859 40 14.6957 40 20C40 25.3043 37.8929 30.3914 34.1421 34.1421C31.1358 37.1485 27.2709 39.0989 23.1238 39.7546C21.4128 40.0252 20 38.5957 20 36.8635C20 35.1313 21.4222 33.7627 23.1094 33.3703C25.5876 32.7939 27.8783 31.5346 29.7065 29.7065C32.2808 27.1322 33.727 23.6406 33.727 20C33.727 16.3594 32.2808 12.8678 29.7065 10.2935C27.8783 8.46537 25.5876 7.20612 23.1094 6.62973C21.4222 6.23731 20 4.86873 20 3.13649Z" fill="#472AFF"/>
-</svg>`
-		}
+	const pixelSizes: Record<string, number> = {
+		sm: 16,
+		md: 33,
+		lg: 40
 	};
-
-	let pxsize = $state(sizes[size].pxsize);
-	let svg = $state(sizes[size].svg);
 </script>
 
+{#if show}
 <div class="spinner-container">
-	<div class="spinner" style="width: {pxsize}; height: {pxsize};">
-		{@html svg}
+	<div class="spinner" style="width: {pixelSizes[size]}px; height: {pixelSizes[size]}px;">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
+			<path
+				d="M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM6.27298 20C6.27298 27.5812 12.4188 33.727 20 33.727C27.5812 33.727 33.727 27.5812 33.727 20C33.727 12.4188 27.5812 6.27298 20 6.27298C12.4188 6.27298 6.27298 12.4188 6.27298 20Z"
+				fill="#E0E5E8"
+			/>
+			<path
+				d="M20 3.13649C20 1.40425 21.4128 -0.0251732 23.1238 0.245376C27.2709 0.901143 31.1358 2.85154 34.1421 5.85786C37.8929 9.60859 40 14.6957 40 20C40 25.3043 37.8929 30.3914 34.1421 34.1421C31.1358 37.1485 27.2709 39.0989 23.1238 39.7546C21.4128 40.0252 20 38.5957 20 36.8635C20 35.1313 21.4222 33.7627 23.1094 33.3703C25.5876 32.7939 27.8783 31.5346 29.7065 29.7065C32.2808 27.1322 33.727 23.6406 33.727 20C33.727 16.3594 32.2808 12.8678 29.7065 10.2935C27.8783 8.46537 25.5876 7.20612 23.1094 6.62973C21.4222 6.23731 20 4.86873 20 3.13649Z"
+				fill="#472AFF"
+			/>
+		</svg>
 	</div>
 </div>
+{/if}
 
 <style>
 	.spinner-container {
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		width: 100vw;
-		height: 100vh;
-		position: fixed;
+		width: 100%;
+		height: 100%;
+		position: absolute;
 		top: 0;
 		left: 0;
 		background-color: rgba(255, 255, 255, 0.8);

package/dist/Spinner/Spinner.svelte.d.ts

@@ -1,6 +1,7 @@
 interface SpinnerProps {
-    size?: 'small' | 'medium' | 'large';
+    show: boolean;
+    size?: 'sm' | 'md' | 'lg';
 }
-declare const Spinner: import("svelte").Component<SpinnerProps, {}, "">;
+declare const Spinner: import("svelte").Component<SpinnerProps, {}, "show">;
 type Spinner = ReturnType<typeof Spinner>;
 export default Spinner;

package/dist/Toast/Toast.svelte

@@ -97,9 +97,7 @@
 		flex-direction: var(--toast-flex-direction);
 		gap: var(--toast-gap);
 		padding: 8px 0px;
-		color: #000;
 		font-size: 14px;
-		font-style: normal;
 		font-weight: 400;
 		line-height: 20px;
 	}
@@ -123,9 +121,6 @@
 		display: flex;
 		align-items: center;
 		color: #2b1999;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
 	}
 
 	.toast-content-link:hover {

package/dist/Tooltip/Tooltip.svelte

@@ -46,8 +46,6 @@
 	tabindex="0"
 	onmouseenter={toggleTooltip}
 	onmouseleave={toggleTooltip}
-	onfocus={toggleTooltip}
-	onblur={toggleTooltip}
 >
 	{@render children()}
 

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import Accordion from './Accordion/Accordion.svelte';
 import Avatar from './Avatar/Avatar.svelte';
 import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
 import { addBreadcrumbsNameMap, type BreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
@@ -8,6 +9,8 @@ import { ChipType } from './Chips/chipsState.svelte.js';
 import ErrorPage from './ErrorPage/ErrorPage.svelte';
 import Footer from './Footer/Footer.svelte';
 import Input from './Form/Input/Input.svelte';
+import Select from './Form/Select/Select.svelte';
+import type { SelectOption } from './Form/Select/selectState.svelte.js';
 import TextArea from './Form/TextArea/TextArea.svelte';
 import Toggle from './Form/Toggle/Toggle.svelte';
 import Header from './Header/Header.svelte';
@@ -21,6 +24,8 @@ import Sidebar from './Menu/Sidebar.svelte';
 import type { MenuItem } from './Menu/SidebarState.svelte';
 import Modal from './Modal/Modal.svelte';
 import type { ModalProps } from './Modal/modalState.svelte.js';
+import Notification from './Notification/Notification.svelte';
+import ProgressPage from './ProgressPage/ProgressPage.svelte';
 import ProgressWizard from './ProgressWizard/ProgressWizard.svelte';
 import type { ProgressWizardStep } from './ProgressWizard/progressWizardState.svelte.js';
 import Search from './Search/Search.svelte';
@@ -30,4 +35,4 @@ import type { Tab } from './Tabs/tabsState.svelte.js';
 import Toaster from './Toast/Toast.svelte';
 import { addToast, type Toast } from './Toast/toastState.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
-export { addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, Modal, ProgressWizard, Search, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip, type BreadcrumbsNameMap, type HighlightPanelColumn, type MenuItem, type ModalProps, type ProgressWizardStep, type Tab, type Toast };
+export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip, type BreadcrumbsNameMap, type HighlightPanelColumn, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type Tab, type Toast };

package/dist/index.js

@@ -1,3 +1,4 @@
+import Accordion from './Accordion/Accordion.svelte';
 import Avatar from './Avatar/Avatar.svelte';
 import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
 import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
@@ -8,6 +9,7 @@ import { ChipType } from './Chips/chipsState.svelte.js';
 import ErrorPage from './ErrorPage/ErrorPage.svelte';
 import Footer from './Footer/Footer.svelte';
 import Input from './Form/Input/Input.svelte';
+import Select from './Form/Select/Select.svelte';
 import TextArea from './Form/TextArea/TextArea.svelte';
 import Toggle from './Form/Toggle/Toggle.svelte';
 import Header from './Header/Header.svelte';
@@ -19,6 +21,8 @@ import { ColumnType, ImageType } from './HighlightPanel/highlightPanelState.svel
 import Menu from './Menu/Menu.svelte';
 import Sidebar from './Menu/Sidebar.svelte';
 import Modal from './Modal/Modal.svelte';
+import Notification from './Notification/Notification.svelte';
+import ProgressPage from './ProgressPage/ProgressPage.svelte';
 import ProgressWizard from './ProgressWizard/ProgressWizard.svelte';
 import Search from './Search/Search.svelte';
 import Spinner from './Spinner/Spinner.svelte';
@@ -26,4 +30,4 @@ import Tabs from './Tabs/Tabs.svelte';
 import Toaster from './Toast/Toast.svelte';
 import { addToast } from './Toast/toastState.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
-export { addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, Modal, ProgressWizard, Search, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip };
+export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip };

package/package.json

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