@softwareone/spi-sv5-library 1.7.8 → 1.7.10

package/dist/DeleteConfirmation/DeleteConfirmation.svelte

@@ -70,8 +70,9 @@
 		display: flex;
 		flex-direction: column;
 		gap: 16px;
+		width: 100%;
 	}
-
+	
 	p {
 		margin: 0;
 		user-select: none;

package/dist/Form/Input/Input.svelte

@@ -40,10 +40,10 @@
 	const componentId = $props.id();
 	const inputId = id || componentId;
 
-	const isInvalid = $derived(!!error);
-	const isValid = $derived(!isInvalid && (!!value || optional));
+	const isInvalid = $derived(!!error && !disabled);
+	const isValid = $derived(!isInvalid && (!!value || optional) && !disabled);
 	const hasStatus = $derived(isInvalid || isValid);
-	const showIcon = $derived(hasStatus || ['password', 'money'].includes(type));
+	const showIcon = $derived((hasStatus || ['password', 'money'].includes(type)) && !disabled);
 	const showDatePicker = $derived(type === 'date');
 
 	const transformationType = $derived<Record<string, string>>({
@@ -176,9 +176,9 @@
 	}
 
 	.form-input-disabled {
-		background-color: #f3f4f6;
-		border-color: #d1d5db;
-		color: #6b7180;
+		background-color: #e0e5e8;
+		border-color: #6b7180;
+		color: #000;
 		cursor: not-allowed;
 	}
 

package/dist/Form/Select/Select.svelte

@@ -18,6 +18,7 @@
 		multiple?: boolean;
 		keepOpen?: boolean;
 		disabled?: boolean;
+		readonly?: boolean;
 		disableValidationColor?: boolean;
 		value?: string | string[] | null;
 		error?: string | string[];
@@ -40,6 +41,7 @@
 		multiple = false,
 		keepOpen = false,
 		disabled = false,
+		readonly = false,
 		disableValidationColor = false,
 		value = $bindable(),
 		error,
@@ -208,15 +210,20 @@
 	{/if}
 
 	<div
-		class={['dropdown', disabled ? 'disabled' : [isInvalid && 'invalid', isValid && 'valid']]}
+		class={[
+			'dropdown',
+			disabled && 'disabled',
+			readonly && 'readonly',
+			!disabled && [isInvalid && 'invalid', isValid && 'valid']
+		]}
 		bind:this={dropdown}
 	>
 		<section
 			role="button"
 			tabindex="0"
 			class="dropdown-container"
-			onclick={onToggleListOptions}
-			onkeypress={onToggleListOptions}
+			onclick={readonly ? undefined : onToggleListOptions}
+			onkeypress={readonly ? undefined : onToggleListOptions}
 			bind:this={dropdownContainer}
 		>
 			<div class="dropdown-container-selected-options">
@@ -240,12 +247,12 @@
 				{/if}
 			</div>
 
-			{#if !hideClearButton && (selectedOption || selectedOptions.length)}
+			{#if !hideClearButton && !disabled && !readonly && (selectedOption || selectedOptions.length)}
 				{@render removeButton(onClearAll)}
 			{/if}
 		</section>
 
-		{#if showListOptions}
+		{#if showListOptions && !readonly}
 			<section
 				class={[
 					'dropdown-list',
@@ -339,12 +346,14 @@
 		--white: #fff;
 		--black: #000;
 		--error: #dc2626;
-		--success: #10b981;
+		--success: #008556;
 		--info-1: #eaecff;
 		--gray-1: #f4f6f8;
 		--gray-2: #e0e5e8;
 		--gray-3: #aeb1b9;
 		--gray-4: #6b7180;
+		--readonly-bg: #f9fafb;
+		--readonly-border: #d1d5db;
 		--border: 1px solid var(--gray-4);
 
 		display: flex;
@@ -384,11 +393,21 @@
 		}
 	}
 
-	.dropdown:not(.disabled, .invalid, .valid):hover {
+	.dropdown.readonly {
+		cursor: default;
+
+		> .dropdown-container {
+			cursor: default;
+			background: var(--readonly-bg);
+			border-color: var(--readonly-border);
+		}
+	}
+
+	.dropdown:not(.disabled, .readonly, .invalid, .valid):hover {
 		border: 1px solid var(--primary-color);
 	}
 
-	.dropdown:not(.disabled, .invalid, .valid):focus-within {
+	.dropdown:not(.disabled, .readonly, .invalid, .valid):focus-within {
 		border: 1px solid var(--primary-color);
 		box-shadow: 0 0 0 3px rgba(149, 155, 255, 0.3);
 	}
@@ -410,6 +429,8 @@
 	}
 
 	.dropdown > .dropdown-container {
+		font-size: 14px;
+		line-height: 20px;
 		display: grid;
 		grid-template-columns: 1fr auto;
 		min-height: 36px;

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

@@ -12,6 +12,7 @@ interface SelectProps {
     multiple?: boolean;
     keepOpen?: boolean;
     disabled?: boolean;
+    readonly?: boolean;
     disableValidationColor?: boolean;
     value?: string | string[] | null;
     error?: string | string[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.7.8",
+	"version": "1.7.10",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",