@softwareone/spi-sv5-library 0.1.3 → 1.1.0

package/dist/Modal/ModalHeader.svelte

@@ -1,49 +1,65 @@
 <script lang="ts">
-    import { OctagonAlert } from 'lucide-svelte';
+	import type { ModalHeaderProps } from './modalState.svelte.js';
 
-	interface ModalHeaderProps {
-		headerTitle?: string;
-	}
-
-    let { headerTitle }: ModalHeaderProps = $props();
-
-	headerTitle = headerTitle || 'Modal title';
-	
+	let {
+		title = '',
+		errorIcon = false,
+		onclose
+	}: ModalHeaderProps & { onclose: VoidFunction } = $props();
 </script>
 
-<div class="modal-header">
-    <div class="modal-header-icon">
-        <OctagonAlert size="32"/>
-    </div>
-	<div class="modal-header-title">{headerTitle}</div>
-</div>
+<header class="modal-header">
+	<div class="modal-header-title">
+		{#if errorIcon}
+			<span class="icon error material-icons-outlined">report</span>
+		{/if}
+		<h2>{title}</h2>
+	</div>
+	<button type="button" class="close-button material-icons-outlined" onclick={onclose}>close</button
+	>
+</header>
 
 <style>
-	.modal-header {
+	.modal-header,
+	.modal-header-title {
 		display: flex;
-		padding: var(--Card-padding, 24px);
-		align-items: center;
-		gap: var(--spacing-2, 16px);
+		justify-content: space-between;
+		gap: 16px;
+	}
+	.modal-header {
+		padding: 24px;
 		align-self: stretch;
-		border-radius: var(--Card-radius, 16px) var(--Card-radius, 16px) 0px 0px;
-		background: var(--brand-white, #fff);
 	}
-	.modal-header-icon {
-		color: var(--brand-danger, #dc182c);
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+
+	.modal-header-title > .icon {
+		color: var(--color-icon);
 		font-size: 32px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: normal;
 	}
+
 	.modal-header-title {
-		flex: 1 0 0;
-		color: var(--brand-type, #000);
-		/* medium/4 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+		align-items: center;
+	}
+
+	.modal-header-title h2 {
 		font-size: 18px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 26px; /* 144.444% */
+		font-weight: 600;
+	}
+
+	.modal-header > .close-button {
+		background: none;
+		border: none;
+	}
+
+	.modal-header > .close-button:hover {
+		cursor: pointer;
+		color: #434952;
+	}
+
+	.modal-header > .close-button:focus {
+		outline: none;
+	}
+
+	.icon.error {
+		--color-icon: #dc182c;
 	}
 </style>

package/dist/Modal/ModalHeader.svelte.d.ts

@@ -1,6 +1,7 @@
-interface ModalHeaderProps {
-    headerTitle?: string;
-}
-declare const ModalHeader: import("svelte").Component<ModalHeaderProps, {}, "">;
+import type { ModalHeaderProps } from './modalState.svelte.js';
+type $$ComponentProps = ModalHeaderProps & {
+    onclose: VoidFunction;
+};
+declare const ModalHeader: import("svelte").Component<$$ComponentProps, {}, "">;
 type ModalHeader = ReturnType<typeof ModalHeader>;
 export default ModalHeader;

package/dist/Modal/modalState.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export interface ModalProps extends ModalHeaderProps, ModalFooterProps {
+    showModal?: boolean;
+    width?: WidthModal;
+    children?: Snippet;
+    onclose?: VoidFunction;
+}
+export interface ModalHeaderProps {
+    title?: string;
+    errorIcon?: boolean;
+}
+export interface ModalFooterProps {
+    footer?: Snippet;
+}
+export type WidthModal = 'md' | 'lg' | 'xl';

package/dist/Modal/modalState.svelte.js

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