@softwareone/spi-sv5-library 0.1.2 → 1.0.0

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

@@ -1,11 +1,16 @@
+import { type MenuItem } from '../index.js';
 interface HeaderProps {
     title?: string;
     homeUrl?: string;
-    menuButton?: () => void;
+    disableMenuButton?: boolean;
+    hideAccount?: boolean;
+    hideHelp?: boolean;
+    hideNotification?: boolean;
     accountName?: string;
     userName?: string;
     profileUrl?: string;
-    loader?: boolean;
+    hideLoader?: boolean;
+    menuItems: MenuItem[];
 }
 declare const Header: import("svelte").Component<HeaderProps, {}, "">;
 type Header = ReturnType<typeof Header>;

package/dist/Header/HeaderAccount.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { Avatar } from '../index.js';
+
 	interface HeaderAccountProps {
 		accountName?: string;
 		userName?: string;
@@ -8,27 +10,11 @@
 
 	accountName = accountName || 'SoftwareOne';
 	userName = userName || 'John Doe';
-
-	let avatarName = $state(
-		userName
-			.split(' ')
-			.map((word) => word[0])
-			.join('')
-	);
 </script>
 
 <div class="account-container">
 	<div class="account-avatar">
-		<svg class="min-w-[40px] min-h-[40px]" width="40" height="40" viewBox="0 0 40 40"
-			><circle cx="20" cy="20" r="20" fill="#25282D"></circle><text
-				x="20"
-				y="25"
-				text-anchor="middle"
-				font-size="14"
-				font-weight="normal"
-				fill="#FFFFFF">{avatarName}</text
-			></svg
-		>
+		<Avatar text={userName} />
 	</div>
 	<div class="account">
 		<div class="account-name">{accountName}</div>
@@ -42,7 +28,6 @@
 	.account-container {
 		display: flex;
 		max-width: 300px;
-		/* padding: 8px 24px; */
 		align-items: center;
 		gap: 16px;
 		border-radius: 8px;
@@ -52,10 +37,8 @@
 		display: flex;
 		width: 48px;
 		height: 48px;
-		/* padding: 15px 0px 15.194px 0px; */
 		justify-content: center;
 		align-items: center;
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
 	}
 	.account {
 		display: flex;
@@ -70,15 +53,12 @@
 		width: auto;
 		max-width: auto;
 		overflow: hidden;
-		color: var(--brand-type, #000);
+		color: #000;
 		text-overflow: ellipsis;
-
-		/* medium/2 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 500;
-		line-height: 20px; /* 142.857% */
+		line-height: 20px;
 	}
 	.account-more {
 		display: flex;
@@ -93,11 +73,8 @@
 		-webkit-line-clamp: 1;
 		line-clamp: 1;
 		overflow: hidden;
-		color: var(--gray-4, #6b7180);
+		color: #6b7180;
 		text-overflow: ellipsis;
-
-		/* regular/1 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 400;

package/dist/HighlightPanel/HighlightPanel.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	import { Avatar, Chips, ColumnType, ImageType, type HighlightPanelColumn } from '../index.js';
+
+	interface HighlightPanelProps {
+		columns: HighlightPanelColumn[];
+		buttonSection?: Snippet;
+		distributionType?: 'flex' | 'flex-column' | 'grid';
+	}
+
+	let { columns, distributionType = 'flex', buttonSection }: HighlightPanelProps = $props();
+</script>
+
+<div class="highlight-panel">
+	<section class="panel-section-{distributionType}">
+		{#each columns as column}
+			<div class="panel-element">
+				{#if column.type === ColumnType.Text}
+					<h2>{column.label}</h2>
+					<p>{column.value}</p>
+					<p class="text-description">{column.description ?? ''}</p>
+				{/if}
+
+				{#if column.type === ColumnType.Status}
+					<h2>{column.label}</h2>
+					<Chips text={column.value} type={column.chipType} />
+				{/if}
+
+				{#if column.type === ColumnType.Link}
+					<h2>{column.label}</h2>
+					<a rel="noreferrer" class="link" target="_blank" href={column.url}>
+						{column.value}
+					</a>
+				{/if}
+
+				{#if column.type === ColumnType.Image}
+					{@const { content, iconType } = column}
+					<h2>{column.label}</h2>
+					{#if iconType === ImageType.Default}
+						<img src={content} alt="icon" />
+					{:else if iconType === ImageType.Avatar}
+						<Avatar text={content} />
+					{:else if iconType === ImageType.Material}
+						<span class="material-icons">{content}</span>
+					{/if}
+					<p class="text-description">{column.description ?? ''}</p>
+				{/if}
+			</div>
+		{/each}
+	</section>
+
+	{#if buttonSection}
+		<section class="buttons-section">
+			{@render buttonSection()}
+		</section>
+	{/if}
+</div>
+
+<style>
+	h2,
+	p,
+	a {
+		font-size: 14px;
+		line-height: 20px;
+	}
+
+	.text-description {
+		color: #6b7180;
+	}
+
+	.link {
+		color: #472aff;
+	}
+
+	.link:hover {
+		text-decoration-line: underline;
+	}
+
+	.highlight-panel {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		gap: 48px;
+	}
+
+	.panel-section-flex {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 48px;
+	}
+
+	.panel-section-flex-column {
+		display: flex;
+		flex-direction: column;
+		gap: 48px;
+	}
+
+	.panel-section-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(50px, auto));
+		grid-gap: 48px;
+	}
+
+	.buttons-section {
+		display: flex;
+		gap: 12px;
+		align-items: flex-start;
+	}
+
+	.panel-element h2 {
+		margin-bottom: 8px;
+	}
+
+	.panel-element img {
+		width: 40px;
+		height: 40px;
+		border-radius: 9999px;
+	}
+
+	@media screen and (max-width: 700px) {
+		.buttons-section {
+			flex-direction: column;
+		}
+	}
+</style>

package/dist/HighlightPanel/HighlightPanel.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import { type HighlightPanelColumn } from '../index.js';
+interface HighlightPanelProps {
+    columns: HighlightPanelColumn[];
+    buttonSection?: Snippet;
+    distributionType?: 'flex' | 'flex-column' | 'grid';
+}
+declare const HighlightPanel: import("svelte").Component<HighlightPanelProps, {}, "">;
+type HighlightPanel = ReturnType<typeof HighlightPanel>;
+export default HighlightPanel;

package/dist/HighlightPanel/highlightPanelState.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { ChipType } from '../index.js';
+export declare enum ImageType {
+    Default = "image",
+    Avatar = "avatar",
+    Material = "material"
+}
+export declare enum ColumnType {
+    Text = "text",
+    Link = "link",
+    Image = "image",
+    Status = "status"
+}
+type BaseColumn = {
+    label: string;
+    value: string;
+    description?: string;
+};
+type Text = BaseColumn & {
+    type: ColumnType.Text;
+};
+type Link = BaseColumn & {
+    type: ColumnType.Link;
+    url: string;
+};
+type Icon = BaseColumn & {
+    type: ColumnType.Image;
+    iconType: ImageType;
+    content: string;
+};
+type Status = BaseColumn & {
+    type: ColumnType.Status;
+    chipType: ChipType;
+};
+export type HighlightPanelColumn = Text | Link | Icon | Status;
+export {};

package/dist/HighlightPanel/highlightPanelState.svelte.js

@@ -0,0 +1,13 @@
+export var ImageType;
+(function (ImageType) {
+    ImageType["Default"] = "image";
+    ImageType["Avatar"] = "avatar";
+    ImageType["Material"] = "material";
+})(ImageType || (ImageType = {}));
+export var ColumnType;
+(function (ColumnType) {
+    ColumnType["Text"] = "text";
+    ColumnType["Link"] = "link";
+    ColumnType["Image"] = "image";
+    ColumnType["Status"] = "status";
+})(ColumnType || (ColumnType = {}));

package/dist/Menu/Menu.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+
+	import type { MenuItem } from './SidebarState.svelte';
+	import MainMenuItem from './MenuItem.svelte';
+
+	interface MenuProps {
+		disableMenuButton?: boolean;
+		menuItems: MenuItem[];
+	}
+
+	let showMenu: boolean = $state(false);
+	let isMainMenu: boolean = $state(true);
+	let activeItem: string = $state('');
+
+	const { disableMenuButton = false, menuItems }: MenuProps = $props();
+
+	$effect(() => {
+		if (showMenu) {
+			setActiveMenuItem();
+		}
+	});
+
+	const setActiveMenuItem = () => {
+		activeItem = menuItems.find((menuItem: MenuItem) => isActiveMenuItem(menuItem.url))?.text || '';
+	};
+
+	const isActiveMenuItem = (url: string) => {
+		const firstSegmentUrl = page.url.pathname.split('/')[1];
+		return existRoute(`/${firstSegmentUrl}`, url);
+	};
+
+	const existRoute = (url: string, pathname: string) => {
+		const regex = new RegExp(`${url}(?![\\w-])`);
+		return regex.test(pathname);
+	};
+
+	const onClickMenuItem = (menuItem: MenuItem) => {
+		onHandleMenu();
+		goto(String(menuItem.url));
+	};
+
+	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>
+
+{#if showMenu}
+	<button
+		class="menu-principal"
+		onclick={onHandleMenu}
+		onkeypress={onHandleMenu}
+		aria-label="menu principal"
+	></button>
+
+	<nav class="menu-nav">
+		<menu class="menu-list">
+			{#each menuItems as menuItem}
+				<MainMenuItem
+					item={menuItem}
+					isCollapsed={false}
+					activeItem={activeItem === menuItem.text}
+					{isMainMenu}
+					onClick={onClickMenuItem}
+				/>
+			{/each}
+		</menu>
+	</nav>
+{/if}
+
+<style>
+	.menu-button {
+		border-radius: 0.375rem;
+		background: white;
+		z-index: 40;
+		cursor: pointer;
+		border: none;
+		width: 40px;
+		height: 40px;
+	}
+
+	.icon-span {
+		color: #25282d;
+		font-size: 24px;
+		font-weight: 400;
+		line-height: 20px;
+		word-wrap: break-word;
+	}
+
+	.menu-button:hover {
+		background-color: #f3f4f6;
+	}
+
+	.menu-principal {
+		position: fixed;
+		inset: 0;
+		background-color: rgba(243, 244, 246, 0.5);
+		cursor: pointer;
+		z-index: 30;
+		border: none;
+	}
+
+	.menu-nav {
+		position: absolute;
+		top: 80px;
+		left: 24px;
+		bottom: 24px;
+		display: flex;
+		border: 1px solid #f3f4f6;
+		border-bottom-left-radius: 10px;
+		border-bottom-right-radius: 10px;
+		background-color: white;
+		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+		min-height: calc(100vh - 80px - 55px);
+		z-index: 40;
+		width: auto;
+	}
+
+	.menu-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		padding: 0.7rem;
+		width: 150px;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	.disabled-menu {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	@media (min-width: 768px) {
+		.menu-list {
+			min-width: 220px;
+		}
+	}
+
+	@media (min-width: 100px) and (max-width: 767px) {
+		.menu-list {
+			width: auto;
+			min-width: none;
+		}
+	}
+</style>

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

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

package/dist/Menu/MenuItem.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { Tooltip } from '../index.js';
+	import type { MenuItem } from './SidebarState.svelte';
+
+	interface MenuItemProps {
+		item: MenuItem;
+		isCollapsed: boolean;
+		onClick?: (item: MenuItem) => void;
+		activeItem: boolean;
+		isMainMenu?: boolean;
+	}
+
+	let { item, isCollapsed = false, onClick, activeItem, isMainMenu }: MenuItemProps = $props();
+</script>
+
+<li>
+	<Tooltip content={isCollapsed ? item.text : ''} position="right">
+		<button
+			type="button"
+			class={[
+				'item',
+				isCollapsed ? 'collapsed' : 'expanded',
+				activeItem && `active-${isCollapsed ? 'collapsed' : 'expanded'}`,
+				isMainMenu && 'main-menu'
+			]}
+			onclick={() => onClick?.(item)}
+		>
+			<span class="material-icons-outlined icon-span">{item.icon}</span>
+			<h2 class="item-name-span" class:hidden={isCollapsed}>{item.text}</h2>
+		</button>
+	</Tooltip>
+</li>
+
+<style>
+	.item {
+		height: 36px;
+		padding: 8px;
+		border-radius: 8px;
+		justify-content: flex-start;
+		align-items: center;
+		gap: 8px;
+		display: inline-flex;
+		background: none;
+		border: none;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+	}
+
+	.item-name {
+		height: 20px;
+		justify-content: center;
+		display: flex;
+		flex-direction: column;
+	}
+	.item-name-span {
+		color: black;
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 20px;
+		word-wrap: break-word;
+	}
+
+	.icon {
+		text-align: center;
+	}
+
+	.icon-span {
+		padding: 8px;
+		color: black;
+		font-size: 20px;
+		font-weight: 400;
+		line-height: 20px;
+		word-wrap: break-word;
+		border-radius: 50%;
+		transition: background-color 0.2s ease;
+	}
+
+	.expanded {
+		width: 188px;
+	}
+	.expanded:hover:not(.active-expanded) {
+		background-color: #f4f6f8;
+	}
+
+	.active-expanded {
+		background-color: #eaecff;
+		color: #472aff;
+		cursor: default;
+	}
+
+	.collapsed {
+		width: 68px;
+		justify-content: center;
+		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;
+	}
+
+	.active-expanded .icon-span,
+	.active-collapsed .icon-span,
+	.active-expanded .item-name-span,
+	.active-collapsed .item-name-span {
+		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;
+		box-shadow: none;
+		background-color: transparent;
+	}
+	.item.collapsed:focus-visible .icon-span,
+	.item.expanded:focus-visible {
+		box-shadow: 0 0 0 2px #472aff;
+		background-color: #eaecff;
+		outline: none;
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	@media (max-width: 768px) {
+		.item-name,
+		.item-name-span {
+			display: none;
+		}
+		.item {
+			width: 100%;
+			justify-content: center;
+		}
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { MenuItem } from './SidebarState.svelte';
+interface MenuItemProps {
+    item: MenuItem;
+    isCollapsed: boolean;
+    onClick?: (item: MenuItem) => void;
+    activeItem: boolean;
+    isMainMenu?: boolean;
+}
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;