@softwareone/spi-sv5-library 1.6.0 → 1.7.0

package/dist/DeleteConfirmation/DeleteConfirmation.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { Button, Input, Modal, Spinner, addToast } from '../index.js';
+
+	interface DeleteConfirmationProps {
+		confirmationName?: string;
+		enableDoubleConfirmation?: boolean;
+		showModal?: boolean;
+		ondelete: () => Promise<boolean> | boolean;
+		onclose?: VoidFunction;
+		ondeleteSuccess?: VoidFunction;
+	}
+
+	let {
+		confirmationName = '',
+		enableDoubleConfirmation = false,
+		showModal = $bindable(false),
+		ondelete,
+		onclose,
+		ondeleteSuccess
+	}: DeleteConfirmationProps = $props();
+
+	let confirmationText = $derived(
+		`Are you sure you want to delete ${confirmationName || 'this item'}?`
+	);
+	let value = $state('');
+	let isLoading = $state(false);
+	let enableButton = $derived(!enableDoubleConfirmation || confirmationName === value);
+
+	const handleDelete = async () => {
+		isLoading = true;
+		const isSuccessful = await ondelete();
+		isLoading = false;
+
+		if (isSuccessful) {
+			showModal = false;
+			ondeleteSuccess?.();
+		} else {
+			addToast({ message: 'There was an unexpected error.', type: 'danger' });
+		}
+	};
+</script>
+
+<Modal title="Delete confirmation" bind:showModal {onclose}>
+	<Spinner show={isLoading} />
+	<div class="content">
+		<p>{confirmationText}</p>
+		{#if enableDoubleConfirmation}
+			<p>
+				To confirm, type "<strong>{confirmationName}</strong>" in the box below
+			</p>
+			<Input
+				type="text"
+				bind:value
+				disableValidationColor
+				onpaste={(event) => event.preventDefault()}
+				placeholder="Type confirmation name"
+			/>
+		{/if}
+	</div>
+
+	{#snippet footer()}
+		<Button variant="primary" variantColor="danger" disabled={!enableButton} onclick={handleDelete}>
+			Delete
+		</Button>
+	{/snippet}
+</Modal>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	p {
+		margin: 0;
+		user-select: none;
+	}
+</style>

package/dist/DeleteConfirmation/DeleteConfirmation.svelte.d.ts

@@ -0,0 +1,11 @@
+interface DeleteConfirmationProps {
+    confirmationName?: string;
+    enableDoubleConfirmation?: boolean;
+    showModal?: boolean;
+    ondelete: () => Promise<boolean> | boolean;
+    onclose?: VoidFunction;
+    ondeleteSuccess?: VoidFunction;
+}
+declare const DeleteConfirmation: import("svelte").Component<DeleteConfirmationProps, {}, "showModal">;
+type DeleteConfirmation = ReturnType<typeof DeleteConfirmation>;
+export default DeleteConfirmation;

package/dist/Modal/Modal.svelte

@@ -12,7 +12,7 @@
 		width = 'xs',
 		errorIcon,
 		hideHeader,
-		onclose = () => {},
+		onclose,
 		children,
 		footer,
 		disablePadding
@@ -20,7 +20,7 @@
 
 	const onHandleClose = () => {
 		showModal = false;
-		onclose();
+		onclose?.();
 	};
 </script>
 

package/dist/Tabs/Tabs.svelte

@@ -7,12 +7,14 @@
 		tabs: Tab[];
 		activeTab?: number;
 		children?: Snippet;
+		onchange?: (index: number) => void;
 	}
 
-	let { tabs = [], activeTab = 0, children }: TabsProps = $props();
+	let { tabs = [], activeTab = 0, children, onchange }: TabsProps = $props();
 
 	const handleClick = (index: number) => (): void => {
 		activeTab = index;
+		onchange?.(index);
 	};
 </script>
 
@@ -39,18 +41,18 @@
 
 	{#each tabs as tab}
 		{#if activeTab === tab.index}
-			{#if tab.component}
-				<div
-					class="tabs-content"
-					id="panel-{tab.index}"
-					role="tabpanel"
-					aria-labelledby="tab-{tab.index}"
-				>
+			<div
+				class="tabs-content"
+				id="panel-{tab.index}"
+				role="tabpanel"
+				aria-labelledby="tab-{tab.index}"
+			>
+				{#if tab.component}
 					{@render tab.component()}
-				</div>
-			{:else}
-				{@render children?.()}
-			{/if}
+				{:else}
+					{@render children?.()}
+				{/if}
+			</div>
 		{/if}
 	{/each}
 </div>

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

@@ -4,6 +4,7 @@ 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/Toast/Toast.svelte

@@ -25,7 +25,7 @@
 {#if toastNotifications.toasts.length > 0}
 	<div class="toast-container" in:fly={transitionConfig} out:fly={transitionConfig}>
 		{#each toastNotifications.toasts as toast}
-			<div class="toast {toast.width ?? 'sm'}" in:fly={transitionConfig} out:fly={transitionConfig}>
+			<div class="toast" in:fly={transitionConfig} out:fly={transitionConfig}>
 				<span class="status-indicator {toast.type}"></span>
 				<div class="toast-content-container">
 					<div class="toast-content">
@@ -61,8 +61,10 @@
 	}
 
 	.toast {
-		width: var(--toast-width);
-		height: var(--toast-height);
+		min-width: 400px;
+		max-width: 600px;
+		width: fit-content;
+		min-height: 52px;
 		display: inline-flex;
 		padding: 8px;
 		gap: 16px;
@@ -75,31 +77,17 @@
 			0px 1px 16px 0px rgba(51, 56, 64, 0.1);
 	}
 
-	.toast.sm {
-		--toast-width: 400px;
-		--toast-height: 52px;
-		--toast-flex-direction: row;
-		--toast-gap: 8px;
-		--toast-close-button-align: center;
-	}
-
-	.toast.md {
-		--toast-width: 600px;
-		--toast-height: 88px;
-		--toast-flex-direction: column;
-		--toast-gap: 4px;
-		--toast-close-button-align: flex-start;
-	}
-
 	.toast-content {
 		display: flex;
 		justify-content: space-between;
-		flex-direction: var(--toast-flex-direction);
-		gap: var(--toast-gap);
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 8px;
 		padding: 8px 0px;
 		font-size: 14px;
 		font-weight: 400;
 		line-height: 20px;
+		align-items: center;
 	}
 
 	.toast-content-container {
@@ -111,7 +99,7 @@
 
 	.status-indicator {
 		width: 8px;
-		height: calc(var(--toast-height) - 20px);
+		align-self: stretch;
 		flex-shrink: 0;
 		border-radius: 4px;
 		background-color: var(--toast-bg);
@@ -147,7 +135,7 @@
 
 	.toast-close-container {
 		display: flex;
-		align-items: var(--toast-close-button-align);
+		align-items: center;
 	}
 
 	.toast-close-button {

package/dist/Toast/toastState.svelte.d.ts

@@ -1,9 +1,7 @@
 type ToastType = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
-type ToastWidth = 'sm' | 'md';
 export interface Toast {
     type: ToastType;
     message: string;
-    width?: ToastWidth;
     link?: string;
 }
 interface ToastState extends Toast {

package/dist/Toast/toastState.svelte.js

@@ -1,3 +1,4 @@
+import { untrack } from 'svelte';
 const toastState = $state({
     toasts: [],
     duration: 5000
@@ -9,9 +10,11 @@ export const getToast = (duration) => {
     return toastState;
 };
 export const addToast = (toast) => {
-    const newToast = { ...toast, id: crypto.randomUUID() };
-    toastState.toasts.push(newToast);
-    scheduleToastRemoval(newToast.id);
+    untrack(() => {
+        const newToast = { ...toast, id: crypto.randomUUID() };
+        toastState.toasts.push(newToast);
+        scheduleToastRemoval(newToast.id);
+    });
 };
 const scheduleToastRemoval = (id) => {
     setTimeout(() => {

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
 import Button from './Button/Button.svelte';
 import Card from './Card/Card.svelte';
 import Chips from './Chips/Chips.svelte';
+import DeleteConfirmationModal from './DeleteConfirmation/DeleteConfirmation.svelte';
 import ErrorPage from './ErrorPage/ErrorPage.svelte';
 import Footer from './Footer/Footer.svelte';
 import Form from './Form/FormController/Form.svelte';
@@ -57,4 +58,4 @@ import type { Toast } from './Toast/toastState.svelte';
 import type { WaffleItem } from './Waffle/waffleState.svelte.js';
 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 };
+export { Accordion, Avatar, Breadcrumbs, Button, Card, Chips, DeleteConfirmationModal, 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

@@ -5,6 +5,7 @@ import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
 import Button from './Button/Button.svelte';
 import Card from './Card/Card.svelte';
 import Chips from './Chips/Chips.svelte';
+import DeleteConfirmationModal from './DeleteConfirmation/DeleteConfirmation.svelte';
 import ErrorPage from './ErrorPage/ErrorPage.svelte';
 import Footer from './Footer/Footer.svelte';
 import Form from './Form/FormController/Form.svelte';
@@ -47,7 +48,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, AttachFile, 
+Accordion, Avatar, Breadcrumbs, Button, Card, Chips, DeleteConfirmationModal, 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.6.0",
+	"version": "1.7.0",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",