@softwareone/spi-sv5-library 1.7.8 → 1.7.9

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/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',
@@ -384,11 +391,21 @@
 		}
 	}
 
-	.dropdown:not(.disabled, .invalid, .valid):hover {
+	.dropdown.readonly {
+		cursor: default;
+
+		> .dropdown-container {
+			cursor: default;
+			background: #f9fafb;
+			border-color: #d1d5db;
+		}
+	}
+
+	.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 +427,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.9",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",