@softwareone/spi-sv5-library 1.10.4 → 1.11.0

package/dist/Button/Button.svelte

@@ -17,6 +17,7 @@
 		variant = 'primary',
 		variantColor = 'primary',
 		loading = false,
+		disabled = false,
 		children,
 		...props
 	}: ButtonProps = $props();
@@ -29,7 +30,7 @@
 <button
 	{@attach clearButtonFocus}
 	class={['btn', `btn-${variant}-${variantColor}`, loading && 'loading']}
-	disabled={loading || props.disabled}
+	disabled={loading || disabled}
 	{...props}
 >
 	{#if loading}

package/dist/Card/Card.svelte

@@ -9,7 +9,7 @@
 	let { children, disablePadding = false }: CardProps = $props();
 </script>
 
-<div class="card" class:padding={!disablePadding}>
+<div class={['card', !disablePadding && 'padding']}>
 	{@render children?.()}
 </div>
 

package/dist/{AttachFile → Controls/AttachFile}/AttachFile.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-	import { Notification } from '../index.js';
 	import type { Attachment } from 'svelte/attachments';
+
+	import type { LabelProps } from '../Label/labelState.svelte.js';
+	import { Label, Notification } from '../../index.js';
 	import FileManager from './FileManager.svelte';
 	import Warnings from './Warnings.svelte';
 
-	interface Props {
+	interface Props extends LabelProps {
 		accept?: string;
 		multiple?: boolean;
 		externalFileValidationMessages?: string[];
@@ -25,20 +27,29 @@
 		fileSizeLimitMB,
 		error,
 		onvalidatefile,
-		onchange
+		onchange,
+		label,
+		id,
+		required,
+		optional,
+		infoTooltip
 	}: Props = $props();
 
 	let validationMessages = $state<string[]>([]);
 
-	const extensionFilesMessage = accept
-		? `Files of the following type are allowed: ${accept.replaceAll(',', ' & ')}.`
-		: 'All file types are allowed.';
+	const extensionFilesMessage = $derived(
+		accept
+			? `Files of the following type are allowed: ${accept.replaceAll(',', ' & ')}.`
+			: 'All file types are allowed.'
+	);
 
-	const reviewMessages = [
-		extensionFilesMessage,
-		'Duplicate file names are not allowed.',
-		...externalFileValidationMessages
-	];
+	const reviewMessages = $derived(
+		[
+			extensionFilesMessage,
+			multiple && 'Duplicate file names are not allowed.',
+			...externalFileValidationMessages
+		].filter(Boolean)
+	);
 
 	const onChangeInputFile = async (selectedFiles: FileList | null) => {
 		if (selectedFiles?.length) {
@@ -138,7 +149,7 @@
 	};
 </script>
 
-<aside class="container">
+<div class="container">
 	<Notification type="info">
 		{#snippet content()}
 			<ul class="message">
@@ -148,13 +159,20 @@
 			</ul>
 		{/snippet}
 	</Notification>
-	<h2 class="title">Upload file</h2>
+	<Label
+		label={label || `Upload ${multiple ? 'files' : 'file'}`}
+		{id}
+		{required}
+		{optional}
+		{infoTooltip}
+	/>
 	<section class="drop-area">
 		<p class="caption">Drag and drop files here</p>
 		<p class="text-small">or</p>
 
 		<input
 			{@attach loadFiles}
+			{id}
 			name="files"
 			type="file"
 			aria-label="Select files to upload"
@@ -177,7 +195,7 @@
 	{#if files?.length}
 		<FileManager {fileSizeLimitMB} {files} {updateFiles} />
 	{/if}
-</aside>
+</div>
 
 <style>
 	.container {
@@ -192,6 +210,10 @@
 		--spacing-md: 20px;
 		--spacing-sm: 10px;
 		--border-radius-md: 5px;
+
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
 		width: 100%;
 	}
 
@@ -199,12 +221,6 @@
 		font-size: 14px;
 		line-height: 20px;
 	}
-	.title {
-		font-size: 16px;
-		line-height: 24px;
-		font-weight: 500;
-		margin-top: 12px;
-	}
 
 	.caption {
 		font-size: 16px;
@@ -233,7 +249,6 @@
 		border: 2px dashed var(--color-border);
 		border-radius: var(--border-radius-md);
 		text-align: center;
-		margin-top: 8px;
 	}
 
 	.drop-area input[type='file'] {

package/dist/{AttachFile → Controls/AttachFile}/AttachFile.svelte.d.ts

@@ -1,4 +1,5 @@
-interface Props {
+import type { LabelProps } from '../Label/labelState.svelte.js';
+interface Props extends LabelProps {
     accept?: string;
     multiple?: boolean;
     externalFileValidationMessages?: string[];

package/dist/{AttachFile → Controls/AttachFile}/Warnings.svelte

@@ -24,7 +24,7 @@
 
 <style>
 	.container {
-		margin-top: 16px;
+		margin-top: 8px;
 		font-size: 12px;
 		line-height: 16px;
 	}

package/dist/Controls/Input/Input.svelte

@@ -1,21 +1,19 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
+	import type { LabelProps } from '../Label/labelState.svelte.js';
 	import Label from '../Label/Label.svelte';
 	import InputIcon from './InputIcon.svelte';
 
 	type InputType = 'text' | 'password' | 'number' | 'date' | 'money';
 
-	interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'> {
-		label?: string;
+	interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelProps {
 		type?: InputType;
 		value?: string | number | null;
-		optional?: boolean;
 		error?: string | string[];
 		description?: string;
 		currency?: string;
 		disableValidationColor?: boolean;
-		infoTooltip?: string;
 	}
 
 	let {

package/dist/Controls/Input/Input.svelte.d.ts

@@ -1,15 +1,13 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
+import type { LabelProps } from '../Label/labelState.svelte.js';
 type InputType = 'text' | 'password' | 'number' | 'date' | 'money';
-interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'> {
-    label?: string;
+interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelProps {
     type?: InputType;
     value?: string | number | null;
-    optional?: boolean;
     error?: string | string[];
     description?: string;
     currency?: string;
     disableValidationColor?: boolean;
-    infoTooltip?: string;
 }
 declare const Input: import("svelte").Component<InputProps, {}, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/Controls/Label/Label.svelte

@@ -1,13 +1,6 @@
 <script lang="ts">
 	import { Tooltip } from '../../index.js';
-
-	interface LabelProps {
-		label?: string;
-		id?: string | null;
-		required?: boolean | null;
-		optional?: boolean;
-		infoTooltip?: string;
-	}
+	import type { LabelProps } from './labelState.svelte.js';
 
 	let { label, id, required, optional, infoTooltip }: LabelProps = $props();
 </script>
@@ -33,6 +26,8 @@
 		display: flex;
 		gap: 8px;
 		font-weight: 500;
+		font-size: 14px;
+		line-height: 20px;
 	}
 
 	.form-label-optional {

package/dist/Controls/Label/Label.svelte.d.ts

@@ -1,10 +1,4 @@
-interface LabelProps {
-    label?: string;
-    id?: string | null;
-    required?: boolean | null;
-    optional?: boolean;
-    infoTooltip?: string;
-}
+import type { LabelProps } from './labelState.svelte.js';
 declare const Label: import("svelte").Component<LabelProps, {}, "">;
 type Label = ReturnType<typeof Label>;
 export default Label;

package/dist/Controls/Label/labelState.svelte.d.ts

@@ -0,0 +1,7 @@
+export interface LabelProps {
+    label?: string;
+    id?: string | null;
+    required?: boolean | null;
+    optional?: boolean;
+    infoTooltip?: string;
+}

package/dist/Controls/Label/labelState.svelte.js

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

package/dist/Controls/Select/Select.svelte

@@ -4,15 +4,12 @@
 	import type { Attachment } from 'svelte/attachments';
 
 	import { Search, type SelectOption } from '../../index.js';
+	import type { LabelProps } from '../Label/labelState.svelte.js';
 	import Label from '../Label/Label.svelte';
 
-	interface SelectProps {
+	interface SelectProps extends LabelProps {
 		options: string[] | SelectOption[];
-		label?: string;
 		placeholder?: string;
-		infoTooltip?: string;
-		required?: boolean;
-		optional?: boolean;
 		searchable?: boolean;
 		hideClearButton?: boolean;
 		multiple?: boolean;

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

@@ -1,12 +1,9 @@
 import { type Snippet } from 'svelte';
 import { type SelectOption } from '../../index.js';
-interface SelectProps {
+import type { LabelProps } from '../Label/labelState.svelte.js';
+interface SelectProps extends LabelProps {
     options: string[] | SelectOption[];
-    label?: string;
     placeholder?: string;
-    infoTooltip?: string;
-    required?: boolean;
-    optional?: boolean;
     searchable?: boolean;
     hideClearButton?: boolean;
     multiple?: boolean;

package/dist/Controls/TextArea/TextArea.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	
+	import type { LabelProps } from '../Label/labelState.svelte.js';
 	import Label from '../Label/Label.svelte';
 
-	interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
-		label?: string;
+	interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'>, LabelProps {
 		value?: string | null;
-		optional?: boolean;
 		error?: string | string[];
 		description?: string;
 		maximumCharactersAllowed?: number;
 		resize?: boolean;
-		infoTooltip?: string;
 		disableValidationColor?: boolean;
 	}
 

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

@@ -1,13 +1,11 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
-interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
-    label?: string;
+import type { LabelProps } from '../Label/labelState.svelte.js';
+interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'>, LabelProps {
     value?: string | null;
-    optional?: boolean;
     error?: string | string[];
     description?: string;
     maximumCharactersAllowed?: number;
     resize?: boolean;
-    infoTooltip?: string;
     disableValidationColor?: boolean;
 }
 declare const TextArea: import("svelte").Component<TextAreaProps, {}, "value">;

package/dist/Controls/Toggle/Toggle.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
 	import Label from '../Label/Label.svelte';
+	import type { LabelProps } from '../Label/labelState.svelte.js';
 
-	interface ToggleProps {
-		id?: string;
+	interface ToggleProps extends Pick<LabelProps, 'id' | 'label' | 'infoTooltip'> {
 		checked?: boolean;
 		disabled?: boolean;
-		label?: string;
-		infoTooltip?: string;
 		vertical?: boolean;
 		onchange?: (event: Event) => void;
 	}
@@ -43,7 +41,7 @@
 			</span>
 		</div>
 	</label>
-	<Label {label} {infoTooltip} />
+	<Label {id} {label} {infoTooltip} />
 </div>
 
 <style>

package/dist/Controls/Toggle/Toggle.svelte.d.ts

@@ -1,9 +1,7 @@
-interface ToggleProps {
-    id?: string;
+import type { LabelProps } from '../Label/labelState.svelte.js';
+interface ToggleProps extends Pick<LabelProps, 'id' | 'label' | 'infoTooltip'> {
     checked?: boolean;
     disabled?: boolean;
-    label?: string;
-    infoTooltip?: string;
     vertical?: boolean;
     onchange?: (event: Event) => void;
 }