@softwareone/spi-sv5-library 1.3.1 → 1.4.0

package/dist/Menu/Menu.svelte

@@ -6,21 +6,13 @@
 	import type { MenuItem } from './SidebarState.svelte';
 
 	interface MenuProps {
-		disableMenuButton?: boolean;
 		menuItems: MenuItem[];
+		showMenu: boolean;
 	}
 
-	let showMenu: boolean = $state(false);
-	let isMainMenu: boolean = $state(true);
-	let activeItem: string = $state('');
+	let { menuItems, showMenu }: MenuProps = $props();
 
-	const { disableMenuButton = false, menuItems }: MenuProps = $props();
-
-	$effect(() => {
-		if (showMenu) {
-			setActiveMenuItem();
-		}
-	});
+	let activeItem = $state('');
 
 	const setActiveMenuItem = () => {
 		activeItem = menuItems.find((menuItem: MenuItem) => isActiveMenuItem(menuItem.url))?.text || '';
@@ -44,18 +36,13 @@
 	const onHandleMenu = () => {
 		showMenu = !showMenu;
 	};
-</script>
 
-<button
-	type="button"
-	class="menu-button"
-	class:disabled-menu={disableMenuButton}
-	onclick={onHandleMenu}
-	disabled={disableMenuButton}
-	aria-label="menu button"
->
-	<span class="material-icons icon-span">menu</span>
-</button>
+	$effect(() => {
+		if (showMenu) {
+			setActiveMenuItem();
+		}
+	});
+</script>
 
 {#if showMenu}
 	<button
@@ -72,7 +59,6 @@
 					item={menuItem}
 					isCollapsed={false}
 					activeItem={activeItem === menuItem.text}
-					{isMainMenu}
 					onClick={onClickMenuItem}
 				/>
 			{/each}
@@ -81,28 +67,6 @@
 {/if}
 
 <style>
-	.menu-button {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		border-radius: 50%;
-		background: white;
-		z-index: 40;
-		cursor: pointer;
-		border: none;
-		width: 40px;
-		height: 40px;
-	}
-
-	.menu-button:hover {
-		background: #e0e5e8;
-	}
-
-	.icon-span {
-		font-size: 32px;
-		color: #6b7180;
-	}
-
 	.menu-principal {
 		position: fixed;
 		inset: 0;
@@ -138,11 +102,6 @@
 		overflow-x: hidden;
 	}
 
-	.disabled-menu {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
-
 	@media (min-width: 768px) {
 		.menu-list {
 			min-width: 220px;

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

@@ -1,7 +1,7 @@
 import type { MenuItem } from './SidebarState.svelte';
 interface MenuProps {
-    disableMenuButton?: boolean;
     menuItems: MenuItem[];
+    showMenu: boolean;
 }
 declare const Menu: import("svelte").Component<MenuProps, {}, "">;
 type Menu = ReturnType<typeof Menu>;

package/dist/Menu/MenuItem.svelte

@@ -7,10 +7,9 @@
 		isCollapsed: boolean;
 		onClick?: (item: MenuItem) => void;
 		activeItem: boolean;
-		isMainMenu?: boolean;
 	}
 
-	let { item, isCollapsed = false, onClick, activeItem, isMainMenu }: MenuItemProps = $props();
+	let { item, isCollapsed = false, onClick, activeItem }: MenuItemProps = $props();
 </script>
 
 <li>
@@ -20,8 +19,7 @@
 			class={[
 				'item',
 				isCollapsed ? 'collapsed' : 'expanded',
-				activeItem && `active-${isCollapsed ? 'collapsed' : 'expanded'}`,
-				isMainMenu && 'main-menu'
+				activeItem && `active-${isCollapsed ? 'collapsed' : 'expanded'}`
 			]}
 			onclick={() => onClick?.(item)}
 		>
@@ -108,16 +106,6 @@
 		color: #472aff;
 	}
 
-	.main-menu.expanded:hover:not(.active-expanded),
-	.main-menu.collapsed:hover:not(.active-collapsed) {
-		background-color: #eaecff;
-	}
-
-	.main-menu:hover .item-name-span,
-	.main-menu:hover .icon-span {
-		color: #472aff;
-	}
-
 	.item.collapsed:focus,
 	.item.collapsed:focus-visible {
 		outline: none;

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

@@ -4,7 +4,6 @@ interface MenuItemProps {
     isCollapsed: boolean;
     onClick?: (item: MenuItem) => void;
     activeItem: boolean;
-    isMainMenu?: boolean;
 }
 declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "">;
 type MenuItem = ReturnType<typeof MenuItem>;

package/dist/Modal/Modal.svelte

@@ -11,9 +11,11 @@
 		title,
 		width = 'xs',
 		errorIcon,
+		hideHeader,
 		onclose = () => {},
 		children,
-		footer
+		footer,
+		disablePadding
 	}: ModalProps = $props();
 
 	const onHandleClose = () => {
@@ -22,34 +24,37 @@
 	};
 </script>
 
-<div class="modal-container">
-	<div
-		onclose={onHandleClose}
-		class="modal {width}"
-		transition:scale={{
-			duration: 150,
-			start: 0.95
-		}}
-	>
-		<ModalHeader {title} {errorIcon} onclose={onHandleClose} />
-		<ModalContent content={children} />
-		<ModalFooter {footer} onclose={onHandleClose} />
+<div class="modal-backdrop">
+	<div class="modal-container {width}">
+		<div
+			onclose={onHandleClose}
+			class="modal"
+			transition:scale={{
+				duration: 150,
+				start: 0.95
+			}}
+		>
+			<ModalHeader {title} {errorIcon} {hideHeader} onclose={onHandleClose} />
+			<ModalContent content={children} {disablePadding} />
+			<ModalFooter {footer} onclose={onHandleClose} />
+		</div>
 	</div>
 </div>
 
 <style>
-	.modal-container {
+	.modal-backdrop {
 		display: flex;
 		position: fixed;
 		top: 0;
 		left: 0;
 		z-index: 1000;
+		justify-content: center;
 		width: 100%;
 		height: 100%;
 		background-color: #e0e5e880;
 	}
 
-	.modal {
+	.modal-container {
 		width: var(--modal-width);
 		max-height: 90%;
 		border-radius: 16px;
@@ -62,36 +67,40 @@
 			0px 4px 5px 0px rgba(51, 56, 64, 0.14);
 	}
 
-	.modal.xs {
+	.modal {
+		position: relative;
+	}
+
+	.modal-container.xs {
 		--modal-width: 500px;
 	}
 
-	.modal.md {
+	.modal-container.md {
 		--modal-width: 600px;
 	}
 
-	.modal.lg {
+	.modal-container.lg {
 		--modal-width: 800px;
 	}
 
-	.modal.xl {
+	.modal-container.xl {
 		--modal-width: 1000px;
 	}
 
-	.modal::-webkit-scrollbar {
+	.modal-container::-webkit-scrollbar {
 		width: 10px;
 	}
 
-	.modal::-webkit-scrollbar-thumb {
+	.modal-container::-webkit-scrollbar-thumb {
 		background: #888;
 		border-radius: 10px;
 	}
 
-	.modal::-webkit-scrollbar-thumb:hover {
+	.modal-container::-webkit-scrollbar-thumb:hover {
 		background: #555;
 	}
 
-	:global(html:has(.modal-container)) {
+	:global(html:has(.modal-backdrop)) {
 		overflow: hidden;
 	}
 </style>

package/dist/Modal/ModalContent.svelte

@@ -3,24 +3,27 @@
 
 	interface ModalContentProps {
 		content?: Snippet;
+		disablePadding?: boolean;
 	}
 
-	let { content }: ModalContentProps = $props();
+	let { content, disablePadding = false }: ModalContentProps = $props();
 </script>
 
-<div class="modal-content">
+<div class="modal-content" class:padding={!disablePadding}>
 	{@render content?.()}
 </div>
 
 <style>
 	.modal-content {
 		display: flex;
-		padding: 24px;
 		flex-direction: column;
 		align-items: flex-start;
 		gap: 24px;
 		align-self: stretch;
 		background: #fff;
-		border-top: 1px solid #aeb1b9;
+	}
+
+	.padding {
+		padding: 24px;
 	}
 </style>

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

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

package/dist/Modal/ModalHeader.svelte

@@ -4,20 +4,23 @@
 	let {
 		title = '',
 		errorIcon = false,
+		hideHeader = false,
 		onclose
 	}: ModalHeaderProps & { onclose: VoidFunction } = $props();
 </script>
 
-<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>
+{#if !hideHeader}
+	<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>
+{/if}
 
 <style>
 	.modal-header,
@@ -29,6 +32,7 @@
 	.modal-header {
 		padding: 24px;
 		align-self: stretch;
+		border-bottom: 1px solid #aeb1b9;
 	}
 
 	.modal-header-title > .icon {

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

@@ -4,10 +4,12 @@ export interface ModalProps extends ModalHeaderProps, ModalFooterProps {
     width?: WidthModal;
     children?: Snippet;
     onclose?: VoidFunction;
+    disablePadding?: boolean;
 }
 export interface ModalHeaderProps {
     title?: string;
     errorIcon?: boolean;
+    hideHeader?: boolean;
 }
 export interface ModalFooterProps {
     footer?: Snippet;

package/dist/Processing/Processing.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import Modal from '../Modal/Modal.svelte';
+	import type { ProcessingProps } from './processingState.svelte.js';
+
+	let {
+		title = 'Processing your request',
+		text = '',
+		show = $bindable(true),
+		asModal = false
+	}: ProcessingProps = $props();
+</script>
+
+{#snippet processingContent()}
+	<div class="processing-header">
+		<span class="material-icons-outlined processing-icon">autorenew</span>
+		<div class="processing-content">
+			<h2 class="processing-title">{title}</h2>
+			{#if text}
+				<p class="processing-text">{text}</p>
+			{/if}
+		</div>
+	</div>
+{/snippet}
+
+{#if show}
+	{#if asModal}
+		<Modal bind:showModal={show} width="xs" hideHeader>
+			<div class="modal-processing-content">
+				{@render processingContent()}
+			</div>
+		</Modal>
+	{:else}
+		{@render processingContent()}
+	{/if}
+{/if}
+
+<style>
+	.processing-header {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		gap: 24px;
+	}
+
+	.processing-content {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.processing-title {
+		font-size: 18px;
+		font-weight: 700;
+	}
+
+	.processing-text {
+		font-size: 16px;
+		white-space: pre-line;
+		line-height: 1.5;
+	}
+
+	.processing-icon {
+		background: linear-gradient(256deg, #00c9cd -2.41%, #472aff 31.72%, #392d9c 65.86%, #000 100%);
+		background-clip: text;
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		font-size: 32px;
+		animation: rotate 2s linear infinite;
+	}
+
+	@keyframes rotate {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.modal-processing-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		min-height: 200px;
+		width: 100%;
+	}
+</style>

package/dist/Processing/Processing.svelte.d.ts

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

package/dist/Processing/processingState.svelte.d.ts

@@ -0,0 +1,6 @@
+export interface ProcessingProps {
+    title?: string;
+    text?: string;
+    show?: boolean;
+    asModal?: boolean;
+}

package/dist/Processing/processingState.svelte.js

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

package/dist/ProgressWizard/ProgressWizard.svelte

@@ -152,7 +152,6 @@
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		height: 100vh;
 	}
 
 	.progress-wizard-container {

package/dist/Spinner/Spinner.svelte

@@ -41,6 +41,7 @@
 		top: 0;
 		left: 0;
 		background-color: rgba(255, 255, 255, 0.8);
+		z-index: 99;
 	}
 
 	.spinner {

package/dist/Switcher/Switcher.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { type SwitcherOption } from '../index.js';
+
+	interface SwitcherProps {
+		options: string[] | SwitcherOption[];
+		value?: string | null;
+	}
+
+	let { options, value = $bindable() }: SwitcherProps = $props();
+
+	const isStringArray = (items: string[] | SwitcherOption[]): items is string[] =>
+		typeof items[0] === 'string';
+
+	const originalOptions = $derived<SwitcherOption[]>(
+		isStringArray(options) ? options.map((option) => ({ label: option, value: option })) : options
+	);
+</script>
+
+<div class="switcher-container">
+	{#each originalOptions as option}
+		<button
+			type="button"
+			class={['switcher-option', option.value === value && 'active']}
+			onclick={() => (value = option.value)}
+		>
+			{option.label}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.switcher-container {
+		--primary-color: #472aff;
+		--white: #fff;
+		--info-1: #eaecff;
+		--gray-1: #f4f6f8;
+		--gray-3: #aeb1b9;
+		--gray-4: #6b7180;
+
+		display: flex;
+		flex-wrap: wrap;
+		width: fit-content;
+		padding: 4px;
+		gap: 12px;
+		border: 1px solid var(--gray-3);
+		border-radius: 8px;
+	}
+
+	.switcher-container > .switcher-option {
+		cursor: pointer;
+		border: none;
+		padding: 4px 20px;
+		font-size: 14px;
+		color: var(--gray-4);
+		font-weight: 500;
+		border-radius: 8px;
+		background: none;
+	}
+
+	.switcher-container > .switcher-option:hover {
+		background: var(--gray-1);
+	}
+
+	.switcher-container > .switcher-option:focus-visible {
+		box-shadow: 0px 0px 0px 3px #959bff;
+		outline: none;
+	}
+
+	.switcher-container > .switcher-option.active {
+		color: var(--white);
+		background: var(--primary-color);
+		transition: background 0.2s ease-in-out;
+	}
+
+	.switcher-container > .switcher-option.active:hover {
+		background: #3520bf;
+	}
+</style>

package/dist/Switcher/Switcher.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type SwitcherOption } from '../index.js';
+interface SwitcherProps {
+    options: string[] | SwitcherOption[];
+    value?: string | null;
+}
+declare const Switcher: import("svelte").Component<SwitcherProps, {}, "value">;
+type Switcher = ReturnType<typeof Switcher>;
+export default Switcher;

package/dist/Switcher/switcherState.svelte.d.ts

@@ -0,0 +1,4 @@
+export interface SwitcherOption {
+    value: string;
+    label: string;
+}

package/dist/Switcher/switcherState.svelte.js

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

package/dist/Waffle/Waffle.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import type { WaffleItem } from './waffleState.svelte.js';
+	import WaffleItems from './WaffleItems.svelte';
+
+	interface Props {
+		items?: WaffleItem[];
+		showWaffle?: boolean;
+	}
+
+	let { items = [], showWaffle = false }: Props = $props();
+
+	const handleTileClick = (item: WaffleItem) => {
+		onHandleWaffle();
+		window.open(item.url, '_blank', 'noopener,noreferrer');
+	};
+
+	const onHandleWaffle = () => {
+		showWaffle = !showWaffle;
+	};
+</script>
+
+{#if showWaffle}
+	<div
+		class="waffle-backdrop"
+		onclick={onHandleWaffle}
+		onkeydown={onHandleWaffle}
+		transition:fade={{ duration: 200 }}
+		role="button"
+		tabindex="0"
+		aria-label="Close waffle menu"
+	></div>
+
+	<aside
+		class="waffle-dropdown"
+		transition:fade={{ duration: 250 }}
+		role="dialog"
+		aria-labelledby="waffle-title"
+		aria-modal="true"
+	>
+		<h2 class="waffle-title">SoftwareOne Cloud</h2>
+
+		<div class="waffle-content">
+			<ul class="waffle-grid" role="list">
+				{#each items as item (item.title)}
+					<li role="listitem">
+						<WaffleItems {...item} onclickwaffleitems={() => handleTileClick(item)} />
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</aside>
+{/if}
+
+<style>
+	.waffle-backdrop {
+		position: fixed;
+		inset: 0;
+		background: rgba(243, 244, 246, 0.5);
+		cursor: pointer;
+		z-index: 30;
+	}
+
+	.waffle-dropdown {
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		border-radius: 8px;
+		background: #fff;
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		top: 80px;
+		left: 0;
+		z-index: 40;
+		width: 600px;
+	}
+
+	.waffle-content {
+		padding: 20px 24px 24px 24px;
+	}
+
+	.waffle-title {
+		padding: 24px 24px 0 24px;
+		font-size: 14px;
+		font-weight: 600;
+		text-align: center;
+	}
+
+	.waffle-grid {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 16px;
+	}
+</style>

package/dist/Waffle/Waffle.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { WaffleItem } from './waffleState.svelte.js';
+interface Props {
+    items?: WaffleItem[];
+    showWaffle?: boolean;
+}
+declare const Waffle: import("svelte").Component<Props, {}, "">;
+type Waffle = ReturnType<typeof Waffle>;
+export default Waffle;