@softwareone/spi-sv5-library 1.1.0 → 1.3.0

package/dist/Form/Select/Select.svelte

@@ -0,0 +1,459 @@
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import type { Action } from 'svelte/action';
+
+	import { Search, type SelectOption } from '../../index.js';
+	import Label from '../Label.svelte';
+
+	interface SelectProps {
+		options: string[] | SelectOption[];
+		label?: string;
+		placeholder?: string;
+		required?: boolean;
+		optional?: boolean;
+		searchable?: boolean;
+		clearable?: boolean;
+		multiple?: boolean;
+		closeAfterSelect?: boolean;
+		readonly?: boolean;
+		disableValidationColor?: boolean;
+		value?: string | string[] | null;
+		error?: string | string[];
+		customSelection?: Snippet<[option: SelectOption]>;
+		customOption?: Snippet<[option: SelectOption]>;
+		infoTooltip?: string;
+	}
+
+	let {
+		options,
+		label,
+		placeholder,
+		required = false,
+		optional = false,
+		searchable = false,
+		clearable = false,
+		multiple = false,
+		closeAfterSelect = false,
+		readonly = false,
+		disableValidationColor = false,
+		value = $bindable(),
+		error,
+		customSelection,
+		customOption,
+		infoTooltip
+	}: SelectProps = $props();
+
+	let dropdownElement: HTMLElement;
+
+	const isStringArray = (items: string[] | SelectOption[]): items is string[] =>
+		typeof items[0] === 'string';
+
+	const originalOptions: SelectOption[] = isStringArray(options)
+		? options.map((value) => ({ label: value, value }))
+		: options;
+
+	let searchText = $state('');
+	let showInTopPosition = $state(false);
+	let showListOptions = $state(false);
+	let filteredOptions = $state(originalOptions);
+	let selectedOptions = $state<SelectOption[]>([]);
+	let selectedOption = $state<SelectOption | undefined>();
+
+	const isInvalid: boolean = $derived(!!error && !disableValidationColor);
+	const isValid: boolean = $derived(!isInvalid && (!!value || optional) && !disableValidationColor);
+	const noOptionsAvailable: boolean = $derived(
+		options.length === 0 || (multiple && selectedOptions?.length === options.length)
+	);
+
+	const generateSelectOption = (value: string): SelectOption => ({ label: value, value });
+	const generateMultiselectValue = (option: SelectOption): string => option.value;
+
+	const canBeVisible = (option: SelectOption): boolean =>
+		!selectedOptions.some((selectedOption) => selectedOption.value === option.value);
+
+	const onCloseAfterSelect = () => {
+		if (closeAfterSelect && showListOptions) {
+			showListOptions = false;
+		}
+	};
+
+	const onSelectOption = (option: SelectOption) => {
+		if (multiple) {
+			selectedOptions = [...selectedOptions, option];
+			value = selectedOptions.map(generateMultiselectValue);
+		} else {
+			selectedOption = option;
+			value = option.value;
+		}
+		onCloseAfterSelect();
+	};
+
+	const onClearAll = () => {
+		if (multiple) {
+			selectedOptions = [];
+			value = [];
+		} else {
+			selectedOption = undefined;
+			value = '';
+		}
+
+		onCloseAfterSelect();
+	};
+
+	const onRemoveSelectedOption = (index: number) => {
+		const newSelectedOptions = [...selectedOptions];
+		newSelectedOptions.splice(index, 1);
+		selectedOptions = newSelectedOptions;
+		value = selectedOptions.map(generateMultiselectValue);
+	};
+
+	const onInputSearch = () => {
+		const text = searchText.toLowerCase();
+
+		filteredOptions = text
+			? originalOptions.filter((option) => option.label.toLowerCase().includes(text))
+			: originalOptions;
+	};
+
+	const onClearSearch = () => {
+		filteredOptions = originalOptions;
+	};
+
+	const onHandleClickOutside = (event: MouseEvent) => {
+		if (showListOptions && dropdownElement && !dropdownElement.contains(event.target as Node)) {
+			showListOptions = false;
+		}
+	};
+
+	const activeOptionScroll: Action<HTMLElement, boolean> = (node, isActive) => {
+		$effect(() => {
+			if (isActive) {
+				node.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+			}
+		});
+	};
+
+	const autoDirection: Action = () => {
+		$effect(() => {
+			const rect = dropdownElement.getBoundingClientRect();
+			const viewportHeight = window.innerHeight;
+			const footer = 300;
+
+			showInTopPosition = rect.bottom + footer > viewportHeight;
+		});
+	};
+
+	onMount(() => {
+		if (!value) return;
+
+		if (multiple && Array.isArray(value)) {
+			selectedOptions = value.map(generateSelectOption);
+		} else if (!multiple && typeof value === 'string') {
+			selectedOption = generateSelectOption(value);
+		}
+	});
+</script>
+
+<svelte:window on:click={onHandleClickOutside} />
+
+<div class="form-container">
+	{#if label}
+		<Label {label} {required} {optional} {infoTooltip} />
+	{/if}
+
+	<div
+		class={['dropdown', readonly ? 'readonly' : [isInvalid && 'invalid', isValid && 'valid']]}
+		bind:this={dropdownElement}
+	>
+		<section
+			class="dropdown-container"
+			role="button"
+			tabindex="0"
+			onclick={() => (showListOptions = !showListOptions)}
+			onkeypress={() => {}}
+		>
+			<div class="dropdown-container-selected-options">
+				{#if selectedOption || selectedOptions.length}
+					{#if multiple}
+						{#each selectedOptions as selectedOption, index}
+							{@render selectedOptionTemplate(selectedOption, index)}
+						{/each}
+					{:else if customSelection}
+						<p>
+							{@render customSelection({
+								label: selectedOption?.label,
+								value: selectedOption?.value
+							} as SelectOption)}
+						</p>
+					{:else}
+						<p>{selectedOption?.label}</p>
+					{/if}
+				{:else}
+					<p class="placeholder">{placeholder}</p>
+				{/if}
+			</div>
+
+			{#if clearable && (selectedOption || selectedOptions.length)}
+				{@render removeButton(onClearAll)}
+			{/if}
+		</section>
+
+		{#if showListOptions}
+			<section class="dropdown-list" class:upwards={showInTopPosition} use:autoDirection>
+				{#if noOptionsAvailable}
+					<p class="dropdown-list-no-options-message">No options</p>
+				{:else}
+					{#if searchable}
+						<Search
+							placeholder="Search"
+							bind:value={searchText}
+							oninput={onInputSearch}
+							onclear={onClearSearch}
+						/>
+					{/if}
+					<ul class="dropdown-list-options-container">
+						{#each filteredOptions as filteredOption}
+							{@const isVisible = multiple ? canBeVisible(filteredOption) : true}
+							{@const isActive = !multiple && filteredOption.value === selectedOption?.value}
+
+							{#if isVisible}
+								<li
+									class={['dropdown-list-option', isActive && 'active']}
+									use:activeOptionScroll={!multiple && isActive}
+								>
+									{@render dropdownOptionTemplate(filteredOption)}
+								</li>
+							{/if}
+						{/each}
+					</ul>
+				{/if}
+			</section>
+		{/if}
+	</div>
+	{#if isInvalid}
+		<p class="form-message-error">
+			{Array.isArray(error) ? error[0] : error}
+		</p>
+	{/if}
+</div>
+
+{#snippet dropdownOptionTemplate(option: SelectOption)}
+	<button
+		type="button"
+		onclick={(event) => {
+			event.stopPropagation();
+			onSelectOption(option);
+		}}
+	>
+		{#if customOption}
+			{@render customOption(option)}
+		{:else}
+			{option.label}
+		{/if}
+	</button>
+{/snippet}
+
+{#snippet selectedOptionTemplate(option: SelectOption, index: number)}
+	<div class="dropdown-container-selected-option">
+		{#if customSelection}
+			<p>{@render customSelection(option)}</p>
+		{:else}
+			<p>{option.label}</p>
+		{/if}
+
+		{@render removeButton(() => onRemoveSelectedOption(index))}
+	</div>
+{/snippet}
+
+{#snippet removeButton(event: VoidFunction)}
+	<button
+		type="button"
+		class="clear-button"
+		onclick={(e) => {
+			e.stopPropagation();
+			event();
+		}}
+	>
+		✖
+	</button>
+{/snippet}
+
+<style>
+	.form-container {
+		--primary-color: #472aff;
+		--white: #fff;
+		--black: #000;
+		--error: #dc2626;
+		--success: #10b981;
+		--info-1: #eaecff;
+		--gray-1: #f4f6f8;
+		--gray-2: #e0e5e8;
+		--gray-3: #aeb1b9;
+		--gray-4: #6b7180;
+		--border: 1px solid var(--gray-3);
+
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		gap: 8px;
+		font-size: 14px;
+	}
+
+	.form-container > .form-message-error {
+		font-size: 12px;
+		color: var(--error);
+	}
+
+	.dropdown {
+		position: relative;
+		border: var(--border);
+		border-radius: 8px;
+		background: transparent;
+		transition:
+			border-color 0.2s ease-in-out,
+			box-shadow 0.2s ease-in-out;
+	}
+
+	.dropdown.readonly {
+		cursor: not-allowed;
+
+		> .dropdown-container {
+			pointer-events: none;
+			background: var(--gray-2);
+		}
+	}
+
+	.dropdown:not(.readonly, .invalid, .valid):hover {
+		border: 1px solid var(--primary-color);
+	}
+
+	.dropdown:not(.readonly, .invalid, .valid):focus-within {
+		border: 1px solid var(--primary-color);
+		box-shadow: 0 0 0 3px rgba(149, 155, 255, 0.3);
+	}
+
+	.dropdown.valid {
+		border: 1px solid var(--success);
+	}
+
+	.dropdown.valid:focus-within {
+		box-shadow: 0px 0px 0px 3px rgba(16, 185, 129, 0.15);
+	}
+
+	.dropdown.invalid {
+		border-color: var(--error);
+	}
+
+	.dropdown.invalid:focus-within {
+		box-shadow: 0px 0px 0px 3px rgba(220, 38, 38, 0.2);
+	}
+
+	.dropdown > .dropdown-container {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		min-height: 42px;
+		padding: 8px;
+		gap: 8px;
+		align-items: center;
+		cursor: pointer;
+		border: none;
+		border-radius: 8px;
+		background: var(--white);
+	}
+
+	.dropdown > .dropdown-container > .dropdown-container-selected-options {
+		display: flex;
+		flex-wrap: wrap;
+		max-height: 250px;
+		gap: 8px;
+		align-items: center;
+		overflow-y: auto;
+
+		> .placeholder {
+			color: var(--gray-4);
+			opacity: 1;
+		}
+
+		> .dropdown-container-selected-option {
+			display: grid;
+			grid-template-columns: auto auto;
+			padding: 8px;
+			gap: 8px;
+			align-items: center;
+			cursor: default;
+			border-radius: 8px;
+			background: var(--gray-1);
+		}
+	}
+
+	.dropdown > .dropdown-list {
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		z-index: 100;
+		width: 100%;
+		padding: 8px;
+		margin-top: 8px;
+		gap: 8px;
+		border-radius: 8px;
+		background: var(--white);
+		box-shadow:
+			0px 4px 5px rgba(51, 56, 64, 0.15),
+			0px 1px 3px rgba(51, 56, 64, 0.2),
+			0px 1px 16px rgba(51, 56, 64, 0.1);
+
+		> .dropdown-list-no-options-message {
+			text-align: center;
+			color: var(--gray-4);
+		}
+	}
+
+	.dropdown > .dropdown-list.upwards {
+		top: auto;
+		transform-origin: bottom;
+		bottom: 100%;
+		margin-bottom: 8px;
+	}
+
+	.dropdown > .dropdown-list > .dropdown-list-options-container {
+		display: flex;
+		flex-direction: column;
+		max-height: 200px;
+		gap: 8px;
+		overflow-y: auto;
+
+		.dropdown-list-option {
+			> button {
+				display: flex;
+				align-items: center;
+				text-align: left;
+				width: 100%;
+				min-height: 40px;
+				padding: 0px 8px;
+				cursor: pointer;
+				border: none;
+				background: transparent;
+			}
+		}
+
+		.dropdown-list-option:not(.active) > button:hover {
+			background: var(--gray-1);
+		}
+
+		.dropdown-list-option.active {
+			background: var(--info-1);
+		}
+	}
+
+	.clear-button {
+		border: none;
+		color: var(--gray-4);
+		background: transparent;
+		transition: color 0.2s ease-in-out;
+	}
+
+	.clear-button:hover {
+		cursor: pointer;
+		color: var(--black);
+	}
+</style>

package/dist/Form/Select/Select.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type Snippet } from 'svelte';
+import { type SelectOption } from '../../index.js';
+interface SelectProps {
+    options: string[] | SelectOption[];
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    optional?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    multiple?: boolean;
+    closeAfterSelect?: boolean;
+    readonly?: boolean;
+    disableValidationColor?: boolean;
+    value?: string | string[] | null;
+    error?: string | string[];
+    customSelection?: Snippet<[option: SelectOption]>;
+    customOption?: Snippet<[option: SelectOption]>;
+    infoTooltip?: string;
+}
+declare const Select: import("svelte").Component<SelectProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/Form/Select/selectState.svelte.d.ts

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

package/dist/Form/Select/selectState.svelte.js

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

package/dist/Form/TextArea/TextArea.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import Label from '../Label.svelte';
 
 	interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
 		label?: string;
@@ -9,17 +10,20 @@
 		description?: string;
 		maximumCharactersAllowed?: number;
 		resize?: boolean;
+		infoTooltip?: string;
 	}
 
 	let {
 		label,
 		value = $bindable(''),
 		optional = false,
+		required = false,
 		error,
 		description,
 		maximumCharactersAllowed,
 		resize = false,
 		id,
+		infoTooltip,
 		...props
 	}: TextAreaProps = $props();
 
@@ -36,16 +40,7 @@
 </script>
 
 <div class="form-container">
-	{#if label}
-		<div class="form-label-container">
-			<label for={textareaId}>{label}</label>
-			{#if props.required}
-				<span class="form-label-required">Required</span>
-			{:else if optional}
-				<span class="form-label-optional">Optional</span>
-			{/if}
-		</div>
-	{/if}
+	<Label {label} {id} {optional} {required} {infoTooltip} />
 
 	<div class={['form-textarea-wrapper', isInvalid && 'error', isValid && 'success']}>
 		<textarea
@@ -94,20 +89,6 @@
 		line-height: 20px;
 	}
 
-	.form-label-container {
-		display: flex;
-		gap: 8px;
-		font-weight: 500;
-	}
-
-	.form-label-optional {
-		color: #6b7180;
-	}
-
-	.form-label-required {
-		color: #dc2626;
-	}
-
 	.form-message {
 		font-size: 12px;
 	}

package/dist/Form/TextArea/TextArea.svelte.d.ts

@@ -7,6 +7,7 @@ interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
     description?: string;
     maximumCharactersAllowed?: number;
     resize?: boolean;
+    infoTooltip?: string;
 }
 declare const TextArea: import("svelte").Component<TextAreaProps, {}, "value">;
 type TextArea = ReturnType<typeof TextArea>;

package/dist/HighlightPanel/HighlightPanel.svelte

@@ -65,6 +65,10 @@
 		line-height: 20px;
 	}
 
+	h2 {
+		font-weight: bold;
+	}
+
 	.text-description {
 		color: #6b7180;
 	}

package/dist/Home/Home.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import type { HomeItem } from '../index.js';
+
+	interface HomeProps {
+		title: string;
+		homeItems: HomeItem[];
+	}
+
+	let { title, homeItems }: HomeProps = $props();
+
+	const hasSingleItem: boolean = homeItems.length === 1;
+	const hasManyItems: boolean = homeItems.length > 1;
+</script>
+
+<h1 class={['home-title', hasSingleItem && 'centered']}>
+	{title}
+</h1>
+
+<section class={['home-container', hasSingleItem && 'centered', hasManyItems && 'grid']}>
+	{#each homeItems as homeItem}
+		<a href={homeItem.url} class="home-item">
+			<span>
+				<img src={homeItem.icon} alt={homeItem.text} />
+			</span>
+			<div>
+				<h2>{homeItem.text}</h2>
+				<p>{homeItem.detail}</p>
+			</div>
+		</a>
+	{/each}
+</section>
+
+<style>
+	.home-title {
+		padding-bottom: 16px;
+		font-size: 18px;
+		line-height: 1.55;
+		font-weight: 600;
+	}
+
+	.home-title.centered {
+		display: flex;
+		justify-content: center;
+	}
+
+	.home-container {
+		--black-1: #434952;
+		--black-2: #273444;
+		--white: #fff;
+	}
+
+	.home-container.centered {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.home-container.grid {
+		display: grid;
+		gap: 24px;
+
+		@media (width >= 640px) {
+			grid-template-columns: repeat(1, minmax(0, 1fr));
+		}
+
+		@media (width >= 1024px) {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+
+		@media (width >= 1536px) {
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+		}
+	}
+
+	.home-container > .home-item {
+		display: flex;
+		max-height: 150px;
+		max-width: 770px;
+		gap: 16px;
+		padding: 12px;
+		border-radius: 16px;
+		background: var(--black-1);
+		transition: background 0.2s ease-in-out;
+
+		> span {
+			display: flex;
+			align-items: center;
+
+			> img {
+				width: 40px;
+				height: 40px;
+				filter: invert(100%);
+			}
+		}
+
+		> div {
+			color: var(--white);
+
+			> h2 {
+				padding-bottom: 8px;
+				font-size: 16px;
+				line-height: 1.5;
+				font-weight: 600;
+			}
+
+			> p {
+				font-size: 14px;
+				line-height: 1.42;
+			}
+		}
+	}
+
+	.home-container > .home-item:hover {
+		background: var(--black-2);
+	}
+</style>

package/dist/Home/Home.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HomeItem } from '../index.js';
+interface HomeProps {
+    title: string;
+    homeItems: HomeItem[];
+}
+declare const Home: import("svelte").Component<HomeProps, {}, "">;
+type Home = ReturnType<typeof Home>;
+export default Home;

package/dist/Home/homeState.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type MenuItem } from '../index.js';
+export type HomeItem = Omit<MenuItem, 'children'> & {
+    detail?: string;
+};

package/dist/Home/homeState.svelte.js

@@ -0,0 +1 @@
+import {} from '../index.js';