@softwareone/spi-sv5-library 0.1.3 → 1.1.0

package/dist/Menu/Sidebar.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import type { MenuItem } from './SidebarState.svelte';
+	import MenuItemSidebar from './MenuItem.svelte';
+
+	interface sidebarProps {
+		categoryTitle: string;
+		menuItems: MenuItem[];
+	}
+
+	let { sidebarItems }: { sidebarItems: sidebarProps[] } = $props();
+	let isCollapsed: boolean = $state(false);
+	let selectedItem: MenuItem | null = $state(null);
+
+	const toggleSidebar = () => {
+		isCollapsed = !isCollapsed;
+	};
+</script>
+
+<aside
+	class={['side-menu', isCollapsed ? 'collapsed' : 'expanded']}
+	transition:fade|global={{ delay: 50, duration: 200 }}
+>
+	<section class="menu-content">
+		<header class="header">
+			<section class="menu-header">
+				<div class="menu-title" class:hidden={isCollapsed}>
+					<div class="menu">
+						<h2 class="menu-span">Menu</h2>
+					</div>
+				</div>
+				<div class="category-items">
+					<button class="button" onclick={toggleSidebar}>
+						<span class="material-icons-outlined icon-span">
+							{isCollapsed ? 'menu' : 'menu_open'}
+						</span>
+					</button>
+				</div>
+			</section>
+		</header>
+
+		<section class="content">
+			{#if sidebarItems.length > 0}
+				{#each sidebarItems as element}
+					<section class="category-content">
+						<h2 class="category-span" class:hidden={isCollapsed}>{element.categoryTitle}</h2>
+						<menu class="category-items-details">
+							{#if element.menuItems}
+								{#each element.menuItems as menuItem}
+									<MenuItemSidebar
+										item={menuItem}
+										{isCollapsed}
+										activeItem={selectedItem?.text === menuItem.text}
+										onClick={() => (selectedItem = menuItem)}
+									/>
+								{/each}
+							{/if}
+						</menu>
+					</section>
+				{/each}
+			{/if}
+		</section>
+	</section>
+</aside>
+
+<style>
+	.side-menu {
+		display: inline-flex;
+		transition: width 0.3s ease;
+	}
+
+	.menu-content {
+		width: 100%;
+		height: 100%;
+		padding: 16px;
+		background: white;
+		border-right: 1px #e0e5e8 solid;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: center;
+		gap: 32px;
+		display: flex;
+	}
+
+	.header {
+		align-self: stretch;
+		flex-direction: column;
+		gap: 16px;
+		display: flex;
+	}
+
+	.menu-header {
+		padding-bottom: 8px;
+		border-bottom: 1px #e0e5e8 solid;
+		gap: 10px;
+		display: inline-flex;
+	}
+
+	.menu-title {
+		flex: 1 1 0;
+		padding-top: 8px;
+		padding-bottom: 8px;
+		display: flex;
+	}
+
+	.menu {
+		justify-content: center;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.menu-span {
+		color: black;
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 20px;
+		word-wrap: break-word;
+	}
+
+	.category-items {
+		padding: 8px;
+		gap: 8px;
+		display: flex;
+	}
+
+	.content {
+		flex-direction: column;
+		gap: 24px;
+		display: flex;
+	}
+
+	.category-content {
+		flex-direction: column;
+		gap: 8px;
+		display: flex;
+	}
+
+	.category-span {
+		color: #6b7180;
+		font-size: 12px;
+		font-weight: 400;
+		word-wrap: break-word;
+	}
+
+	.category-items-details {
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: flex-start;
+	}
+
+	button:focus-visible {
+		box-shadow: 0 0 0 2px #472aff;
+		background-color: #eaecff;
+		outline: none;
+	}
+
+	.icon-span {
+		color: #25282d;
+		font-size: 20px;
+		font-weight: 400;
+		line-height: 20px;
+		word-wrap: break-word;
+	}
+
+	.expanded {
+		width: 220px;
+	}
+
+	.collapsed {
+		width: 68px;
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	.collapsed .header {
+		align-items: center;
+	}
+
+	.collapsed .menu-content {
+		padding: 8px;
+	}
+	.collapsed .content {
+		padding: 8px;
+	}
+	.collapsed .menu-header {
+		align-items: center;
+	}
+
+	.collapsed .menu-header {
+		justify-content: flex-start;
+		align-items: center;
+		padding: 8px;
+	}
+
+	.button {
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		border-radius: 50%;
+		width: 36px;
+		height: 36px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: background-color 0.2s ease;
+	}
+
+	.button:hover {
+		background-color: #f4f6f8;
+	}
+
+	@media (max-width: 768px) {
+		.side-menu {
+			width: 68px;
+		}
+
+		.header {
+			align-items: center;
+		}
+
+		.menu-title,
+		.category-span {
+			display: none;
+		}
+	}
+</style>

package/dist/Menu/Sidebar.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { MenuItem } from './SidebarState.svelte';
+interface sidebarProps {
+    categoryTitle: string;
+    menuItems: MenuItem[];
+}
+type $$ComponentProps = {
+    sidebarItems: sidebarProps[];
+};
+declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/Menu/SidebarState.svelte.d.ts

@@ -0,0 +1,6 @@
+export interface MenuItem {
+    icon?: string;
+    text: string;
+    url: string;
+    children?: MenuItem[];
+}

package/dist/Menu/SidebarState.svelte.js

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

package/dist/Modal/Modal.svelte

@@ -1,46 +1,98 @@
 <script lang="ts">
+	import { scale } from 'svelte/transition';
+
 	import ModalContent from './ModalContent.svelte';
 	import ModalFooter from './ModalFooter.svelte';
 	import ModalHeader from './ModalHeader.svelte';
-
-	interface ModalProps {
-		headerTitle?: string;
-		contentTitle?: string;
-		contentMessage?: string;
-		contentCodeMessage?: string;
-		cancelButton?: () => void;
-		okButton?: () => void;
-	}
+	import type { ModalProps } from './modalState.svelte.js';
 
 	let {
-		headerTitle,
-		contentTitle,
-		contentMessage,
-		contentCodeMessage,
-		cancelButton,
-		okButton
+		showModal = $bindable(false),
+		title,
+		width = 'md',
+		errorIcon,
+		onclose = () => {},
+		children,
+		footer
 	}: ModalProps = $props();
+
+	let dialog = $state<HTMLDialogElement>();
+
+	$effect(() => {
+		showModal ? dialog?.showModal() : dialog?.close();
+	});
+
+	const onHandleClose = () => {
+		showModal = false;
+		onclose();
+	};
 </script>
 
-<div class="modal">
-	<ModalHeader {headerTitle} />
-	<ModalContent {contentTitle} {contentMessage} {contentCodeMessage} />
-	<ModalFooter {cancelButton} {okButton} />
-</div>
+<dialog
+	bind:this={dialog}
+	onclose={onHandleClose}
+	class="modal {width}"
+	transition:scale={{
+		duration: 150,
+		start: 0.95
+	}}
+>
+	<ModalHeader {title} {errorIcon} onclose={onHandleClose} />
+	<ModalContent content={children} />
+	<ModalFooter {footer} onclose={onHandleClose} />
+</dialog>
 
 <style>
-	.modal {
-		display: inline-flex;
-		min-width: 500px;
-		min-height: 250px;
-		flex-direction: column;
-		align-items: flex-start;
-		border-radius: var(--Card-radius, 16px);
-		background: var(--brand-white, #fff);
-		/* shadow/card-hover */
+	dialog {
+		align-self: center;
+		border-radius: 16px;
+		background-color: #ffffff;
+		border: none;
+		margin: auto;
 		box-shadow:
 			0px 1px 10px 0px rgba(51, 56, 64, 0.12),
 			0px 2px 4px -1px rgba(51, 56, 64, 0.2),
 			0px 4px 5px 0px rgba(51, 56, 64, 0.14);
 	}
+
+	dialog:focus-visible {
+		outline: none;
+	}
+
+	dialog::backdrop {
+		background: #e0e5e880;
+	}
+
+	dialog::-webkit-scrollbar {
+		width: 10px;
+	}
+
+	dialog::-webkit-scrollbar-thumb {
+		background: #888;
+		border-radius: 10px;
+	}
+
+	dialog::-webkit-scrollbar-thumb:hover {
+		background: #555;
+	}
+
+	.modal {
+		width: var(--modal-width);
+	}
+
+	.modal.md {
+		--modal-width: 600px;
+	}
+
+	.modal.lg {
+		--modal-width: 800px;
+	}
+
+	.modal.xl {
+		--modal-width: 1000px;
+	}
+
+	:global(html:has(dialog.modal[open])) {
+		overflow: hidden;
+	}
 </style>

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

@@ -1,11 +1,4 @@
-interface ModalProps {
-    headerTitle?: string;
-    contentTitle?: string;
-    contentMessage?: string;
-    contentCodeMessage?: string;
-    cancelButton?: () => void;
-    okButton?: () => void;
-}
-declare const Modal: import("svelte").Component<ModalProps, {}, "">;
+import type { ModalProps } from './modalState.svelte.js';
+declare const Modal: import("svelte").Component<ModalProps, {}, "showModal">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/Modal/ModalContent.svelte

@@ -1,106 +1,26 @@
 <script lang="ts">
-	import { Copy, Check } from 'lucide-svelte'
+	import type { Snippet } from 'svelte';
 
 	interface ModalContentProps {
-		contentTitle?: string;
-		contentMessage?: string;
-		contentCodeMessage?: string;
+		content?: Snippet;
 	}
 
-	let { contentTitle, contentMessage, contentCodeMessage }: ModalContentProps = $props();
-
-	let copyCodeContent = $state(contentCodeMessage);
-	let copyCodeState = $state(false);
-
-	function copyCode() {
-		navigator.clipboard.writeText(copyCodeContent);
-		copyCodeState = true;
-	}
-
-	contentTitle = contentTitle || 'Error title';
-	contentMessage =
-		contentMessage ||
-		'The text displayed here serves as a placeholder for the error modal content.';
-	contentCodeMessage =
-		contentCodeMessage ||
-		`Placeholder error code:# Handle specific error: invalid value error_message = f"Error: Invalid value - {ve}" return {'error': error_message, 'error_code': 400}`;
+	let { content }: ModalContentProps = $props();
 </script>
 
 <div class="modal-content">
-	<div class="modal-content-title">{contentTitle}</div>
-	<div class="modal-content-message">{contentMessage}</div>
-	<div class="modal-content-code-content">
-		<div class="modal-content-code-content-message">
-			{contentCodeMessage}
-		</div>
-			{#if copyCodeState === false}
-				<button class="modal-content-code-content-vector" aria-label="copy" onclick={copyCode}>
-					<Copy size="20"/>
-				</button>
-			{:else}
-				<Check size="20" color="#472aff" />
-			{/if}
-	</div>
+	{@render content?.()}
 </div>
 
 <style>
 	.modal-content {
 		display: flex;
-		padding: var(--Card-padding, 24px);
+		padding: 24px;
 		flex-direction: column;
 		align-items: flex-start;
-		gap: var(--spacing-3, 24px);
-		align-self: stretch;
-		background: var(--brand-white, #fff);
-		border-top: 1px solid var(--gray-3, #aeb1b9);
-	}
-	.modal-content-title {
-		align-self: stretch;
-		color: var(--brand-type, #000);
-		/* bold/2 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 600; /* changed from 700 to 600 since we use Haas Grotesk Display Pro */
-		line-height: 20px; /* 142.857% */
-	}
-	.modal-content-message {
+		gap: 24px;
 		align-self: stretch;
-		color: var(--brand-type, #000);
-		/* regular/2 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-	}
-	.modal-content-code-content {
-		display: flex;
-		padding: 13px 14px 13px 28px;
-		align-items: flex-start;
-		gap: 20px;
-		border-radius: 4px;
-		background: var(--gray-1, #f4f6f8);
-	}
-	.modal-content-code-content-message {
-		width: 368px;
-		color: var(--gray-4, #6b7180);
-
-		/* regular/1 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: normal;
-	}
-	.modal-content-code-content-vector {
-		width: 17px;
-		height: 20px;
-		fill: #000;
-		border: none;
-		background: transparent;
-	}
-	.modal-content-code-content-vector:hover {
-		cursor: pointer;
+		background: #fff;
+		border-top: 1px solid #aeb1b9;
 	}
 </style>

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

@@ -1,7 +1,6 @@
+import type { Snippet } from 'svelte';
 interface ModalContentProps {
-    contentTitle?: string;
-    contentMessage?: string;
-    contentCodeMessage?: string;
+    content?: Snippet;
 }
 declare const ModalContent: import("svelte").Component<ModalContentProps, {}, "">;
 type ModalContent = ReturnType<typeof ModalContent>;

package/dist/Modal/ModalFooter.svelte

@@ -1,76 +1,31 @@
 <script lang="ts">
+	import Button from '../Button/Button.svelte';
+	import type { ModalFooterProps } from './modalState.svelte.js';
 
-	interface ModalFooterProps {
-		cancelButton?: () => void;
-		okButton?: () => void;
-	}
-	
-	let { cancelButton, okButton }: ModalFooterProps = $props();
-
-	cancelButton =
-		cancelButton ||
-		function () {
-			console.log('cancelButton');
-		};
-	okButton =
-		okButton ||
-		function () {
-			console.log('okButton');
-		};
+	let { footer, onclose }: ModalFooterProps & { onclose: VoidFunction } = $props();
 </script>
 
-<div class="modal-footer">
-	<button class="modal-footer-text-button" onclick={cancelButton}>Cancel</button>
-	<button class="modal-footer-primary-button" onclick={okButton}>Ok</button>
-</div>
+{#if footer}
+	<footer class="modal-footer">
+		<Button variant="outline-none" onclick={onclose}>Cancel</Button>
+		<div class="button-section">
+			{@render footer()}
+		</div>
+	</footer>
+{/if}
 
 <style>
-	.modal-footer {
-		display: flex;
-		padding: var(--Card-padding, 24px);
-		justify-content: space-between;
-		align-items: flex-start;
-		align-self: stretch;
-		border-radius: 0px 0px var(--Card-radius, 16px) var(--Card-radius, 16px);
-		border-top: 1px solid var(--gray-3, #aeb1b9);
-		background: var(--brand-white, #fff);
-	}
-	.modal-footer-text-button {
-		display: inline-flex;
-		padding: 8px;
-		align-items: flex-start;
-		gap: 8px;
-		border-radius: 8px;
-		border: none;
-		background: var(--brand-white, #fff);
-		color: var(--brand-primary, #472aff);
-		/* regular/2 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-	}
-	.modal-footer-text-button:hover {
-		cursor: pointer;
-	}
-	.modal-footer-primary-button {
+	.modal-footer,
+	.button-section {
 		display: flex;
-		padding: 8px 16px;
-		align-items: flex-start;
-		gap: 8px;
-		border-radius: 8px;
-		border: none;
-		background: var(--brand-primary, #472aff);
-		color: var(--brand-primary, #fff);
-		/* regular/2 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
+		gap: 16px;
 	}
-	.modal-footer-primary-button:hover {
-		cursor: pointer;
+	.modal-footer {
+		width: 100%;
+		padding: 24px;
+		justify-content: space-between;
+		border-radius: 0px 0px 16px 16px;
+		border-top: 1px solid #aeb1b9;
+		background: #fff;
 	}
 </style>

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

@@ -1,7 +1,7 @@
-interface ModalFooterProps {
-    cancelButton?: () => void;
-    okButton?: () => void;
-}
-declare const ModalFooter: import("svelte").Component<ModalFooterProps, {}, "">;
+import type { ModalFooterProps } from './modalState.svelte.js';
+type $$ComponentProps = ModalFooterProps & {
+    onclose: VoidFunction;
+};
+declare const ModalFooter: import("svelte").Component<$$ComponentProps, {}, "">;
 type ModalFooter = ReturnType<typeof ModalFooter>;
 export default ModalFooter;