@softwareone/spi-sv5-library 1.1.0 → 1.2.0

package/dist/Form/Select/Select.svelte

@@ -0,0 +1,457 @@
+<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]>;
+	}
+
+	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
+	}: 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} />
+	{/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,22 @@
+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]>;
+}
+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;
@@ -15,6 +16,7 @@
 		label,
 		value = $bindable(''),
 		optional = false,
+		required = false,
 		error,
 		description,
 		maximumCharactersAllowed,
@@ -36,16 +38,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} />
 
 	<div class={['form-textarea-wrapper', isInvalid && 'error', isValid && 'success']}>
 		<textarea
@@ -94,19 +87,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/Modal/Modal.svelte

@@ -9,7 +9,7 @@
 	let {
 		showModal = $bindable(false),
 		title,
-		width = 'md',
+		width = 'xs',
 		errorIcon,
 		onclose = () => {},
 		children,
@@ -80,6 +80,10 @@
 		width: var(--modal-width);
 	}
 
+	.modal.xs {
+		--modal-width: 500px;
+	}
+
 	.modal.md {
 		--modal-width: 600px;
 	}

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

@@ -12,4 +12,4 @@ export interface ModalHeaderProps {
 export interface ModalFooterProps {
     footer?: Snippet;
 }
-export type WidthModal = 'md' | 'lg' | 'xl';
+export type WidthModal = 'xs' | 'md' | 'lg' | 'xl';

package/dist/Notification/Notification.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { NotificationProps } from './notificationState.svelte';
+
+	let { title, disableBorder = false, content, type }: NotificationProps = $props();
+</script>
+
+<aside class="notification-container" class:border={!disableBorder}>
+	<span class="status-indicator {type}"></span>
+	<div class="notification-content">
+		{#if title}
+			<span class="title">{title}</span>
+		{/if}
+		{@render content()}
+	</div>
+</aside>
+
+<style>
+	.notification-container {
+		width: 100%;
+		height: 100%;
+		padding: 16px;
+		gap: 16px;
+		display: flex;
+	}
+
+	.border {
+		border: 1px solid #e0e5e8;
+		border-radius: 8px;
+	}
+
+	.status-indicator {
+		width: 8px;
+		border-radius: 4px;
+		background-color: var(--toast-bg);
+	}
+
+	.notification-content {
+		flex-direction: column;
+		flex: 1 1 0;
+		gap: 4px;
+		display: flex;
+		font-size: 14px;
+		line-height: 20px;
+	}
+
+	.title {
+		font-weight: 700;
+	}
+
+	.status-indicator.info {
+		--toast-bg: #472aff;
+	}
+
+	.status-indicator.warning {
+		--toast-bg: #e87d1e;
+	}
+
+	.status-indicator.danger {
+		--toast-bg: #dc182c;
+	}
+
+	.status-indicator.neutral {
+		--toast-bg: #6b7180;
+	}
+
+	.status-indicator.success {
+		--toast-bg: #008556;
+	}
+</style>

package/dist/Notification/Notification.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationProps } from './notificationState.svelte';
+declare const Notification: import("svelte").Component<NotificationProps, {}, "">;
+type Notification = ReturnType<typeof Notification>;
+export default Notification;

package/dist/Notification/notificationState.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type NotificationType = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export interface NotificationProps {
+    title?: string;
+    type: NotificationType;
+    disableBorder?: boolean;
+    content: Snippet;
+}
+export {};

package/dist/Notification/notificationState.svelte.js

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