@softwareone/spi-sv5-library 1.0.0 → 1.1.0

package/dist/Header/HeaderLogo.svelte.d.ts

@@ -1,5 +1,18 @@
+export default HeaderLogo;
+type HeaderLogo = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const HeaderLogo: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -11,8 +24,3 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const HeaderLogo: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type HeaderLogo = InstanceType<typeof HeaderLogo>;
-export default HeaderLogo;

package/dist/Menu/Menu.svelte

@@ -2,8 +2,8 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 
-	import type { MenuItem } from './SidebarState.svelte';
 	import MainMenuItem from './MenuItem.svelte';
+	import type { MenuItem } from './SidebarState.svelte';
 
 	interface MenuProps {
 		disableMenuButton?: boolean;
@@ -38,7 +38,7 @@
 
 	const onClickMenuItem = (menuItem: MenuItem) => {
 		onHandleMenu();
-		goto(String(menuItem.url));
+		goto(menuItem.url);
 	};
 
 	const onHandleMenu = () => {
@@ -82,7 +82,10 @@
 
 <style>
 	.menu-button {
-		border-radius: 0.375rem;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: 50%;
 		background: white;
 		z-index: 40;
 		cursor: pointer;
@@ -91,16 +94,13 @@
 		height: 40px;
 	}
 
-	.icon-span {
-		color: #25282d;
-		font-size: 24px;
-		font-weight: 400;
-		line-height: 20px;
-		word-wrap: break-word;
+	.menu-button:hover {
+		background: #e0e5e8;
 	}
 
-	.menu-button:hover {
-		background-color: #f3f4f6;
+	.icon-span {
+		font-size: 32px;
+		color: #6b7180;
 	}
 
 	.menu-principal {

package/dist/Menu/MenuItem.svelte

@@ -46,13 +46,8 @@
 		transition: background-color 0.2s ease;
 	}
 
-	.item-name {
-		height: 20px;
-		justify-content: center;
-		display: flex;
-		flex-direction: column;
-	}
 	.item-name-span {
+		text-align: left;
 		color: black;
 		font-size: 14px;
 		font-weight: 400;
@@ -60,10 +55,6 @@
 		word-wrap: break-word;
 	}
 
-	.icon {
-		text-align: center;
-	}
-
 	.icon-span {
 		padding: 8px;
 		color: black;
@@ -78,6 +69,7 @@
 	.expanded {
 		width: 188px;
 	}
+
 	.expanded:hover:not(.active-expanded) {
 		background-color: #f4f6f8;
 	}
@@ -94,13 +86,16 @@
 		position: relative;
 		width: 100%;
 	}
+
 	.collapsed .icon-span:hover {
 		background-color: #f4f6f8;
 	}
+
 	.active-collapsed .icon-span {
 		background-color: #eaecff;
 		color: #472aff;
 	}
+
 	.active-collapsed .icon-span:hover {
 		background-color: #eaecff;
 		cursor: default;
@@ -129,6 +124,7 @@
 		box-shadow: none;
 		background-color: transparent;
 	}
+
 	.item.collapsed:focus-visible .icon-span,
 	.item.expanded:focus-visible {
 		box-shadow: 0 0 0 2px #472aff;
@@ -141,10 +137,10 @@
 	}
 
 	@media (max-width: 768px) {
-		.item-name,
 		.item-name-span {
 			display: none;
 		}
+
 		.item {
 			width: 100%;
 			justify-content: center;

package/dist/Modal/Modal.svelte

@@ -1,45 +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;
+	dialog {
+		align-self: center;
 		border-radius: 16px;
-		background: #fff;
+		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,46 +1,15 @@
 <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>
@@ -54,46 +23,4 @@
 		background: #fff;
 		border-top: 1px solid #aeb1b9;
 	}
-	.modal-content-title {
-		align-self: stretch;
-		color: #000;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 20px;
-	}
-	.modal-content-message {
-		align-self: stretch;
-		color: #000;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px;
-	}
-	.modal-content-code-content {
-		display: flex;
-		padding: 13px 14px 13px 28px;
-		align-items: flex-start;
-		gap: 20px;
-		border-radius: 4px;
-		background: #f4f6f8;
-	}
-	.modal-content-code-content-message {
-		width: 368px;
-		color: #6b7180;
-		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;
-	}
 </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,72 +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 {
+	.modal-footer,
+	.button-section {
 		display: flex;
+		gap: 16px;
+	}
+	.modal-footer {
+		width: 100%;
 		padding: 24px;
 		justify-content: space-between;
-		align-items: flex-start;
-		align-self: stretch;
 		border-radius: 0px 0px 16px 16px;
 		border-top: 1px solid #aeb1b9;
 		background: #fff;
 	}
-	.modal-footer-text-button {
-		display: inline-flex;
-		padding: 8px;
-		align-items: flex-start;
-		gap: 8px;
-		border-radius: 8px;
-		border: none;
-		background: #fff;
-		color: #472aff;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px;
-	}
-	.modal-footer-text-button:hover {
-		cursor: pointer;
-	}
-	.modal-footer-primary-button {
-		display: flex;
-		padding: 8px 16px;
-		align-items: flex-start;
-		gap: 8px;
-		border-radius: 8px;
-		border: none;
-		background: #472aff;
-		color: #fff;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px;
-	}
-	.modal-footer-primary-button:hover {
-		cursor: pointer;
-	}
 </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;

package/dist/Modal/ModalHeader.svelte

@@ -1,47 +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: 24px;
-		align-items: center;
+		justify-content: space-between;
 		gap: 16px;
+	}
+	.modal-header {
+		padding: 24px;
 		align-self: stretch;
-		border-radius: 16px 16px 0px 0px;
-		background: #fff;
 	}
-	.modal-header-icon {
-		color: #dc182c;
+
+	.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: #000;
-		/* medium/4 */
+		align-items: center;
+	}
+
+	.modal-header-title h2 {
 		font-size: 18px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 26px;
+		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 {};