@softwareone/spi-sv5-library 0.1.3 → 1.0.0

package/dist/Form/Input/InputIcon.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	type IconType = 'error' | 'success' | 'password';
+
+	interface Props {
+		type: IconType;
+		isPasswordVisible?: boolean;
+		isDateInput?: boolean;
+	}
+
+	let { type, isPasswordVisible = $bindable(false), isDateInput = false }: Props = $props();
+
+	const icons: Record<Exclude<IconType, 'password'>, string> = {
+		error: 'priority_high',
+		success: 'check'
+	};
+</script>
+
+<div class="form-input-icon">
+	{#if type === 'password'}
+		<button
+			type="button"
+			class="form-input-icon-button"
+			onclick={() => (isPasswordVisible = !isPasswordVisible)}
+			aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
+		>
+			<span class="material-icons-outlined form-input-icon form-input-icon--password">
+				{isPasswordVisible ? 'visibility_off' : 'visibility'}
+			</span>
+		</button>
+	{:else}
+		<span class="material-icons-outlined form-input-icon form-input-icon--{type}"
+			class:form-input-icon--date-status={isDateInput && (type === 'error' || type === 'success')}
+			>{icons[type]}</span
+		>
+	{/if}
+</div>
+
+<style>
+	.form-input-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 18px;
+		height: 18px;
+		line-height: 1;
+		position: static;
+		transform: none;
+	}
+
+	.form-input-icon--error {
+		color: #dc2626;
+	}
+
+	.form-input-icon--success {
+		color: #059669;
+	}
+
+	.form-input-icon--password {
+		color: inherit;
+	}
+
+	.form-input-icon--date-status {
+		margin-right: 40px;
+	}
+
+	@-moz-document url-prefix() {
+		.form-input-icon--date-status {
+			margin-right: 35px;
+		}
+	}
+
+	.form-input-icon-button {
+		background: none;
+		border: none;
+		padding: 4px;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #000;
+		transition: color 0.2s ease;
+		width: 24px;
+		height: 24px;
+		border-radius: 4px;
+		position: relative;
+		z-index: 1;
+		pointer-events: auto;
+	}
+
+	.form-input-icon-button:focus {
+		outline: none;
+	}
+
+	.form-input-icon-button:active {
+		transform: scale(0.95);
+	} 
+</style>

package/dist/Form/Input/InputIcon.svelte.d.ts

@@ -0,0 +1,9 @@
+type IconType = 'error' | 'success' | 'password';
+interface Props {
+    type: IconType;
+    isPasswordVisible?: boolean;
+    isDateInput?: boolean;
+}
+declare const InputIcon: import("svelte").Component<Props, {}, "isPasswordVisible">;
+type InputIcon = ReturnType<typeof InputIcon>;
+export default InputIcon;

package/dist/Form/TextArea/TextArea.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
+		label?: string;
+		value?: string;
+		optional?: boolean;
+		error?: string;
+		description?: string;
+		maximumCharactersAllowed?: number;
+		resize?: boolean;
+	}
+
+	let {
+		label,
+		value = $bindable(''),
+		optional = false,
+		error,
+		description,
+		maximumCharactersAllowed,
+		resize = false,
+		id,
+		...props
+	}: TextAreaProps = $props();
+
+	const componentId = $props.id();
+	const textareaId = id || componentId;
+
+	const currentTextLength = $derived(value?.trim().length ?? 0);
+	const isOverLimit = $derived(
+		maximumCharactersAllowed ? currentTextLength > maximumCharactersAllowed : false
+	);
+	const errorMessage = $derived(isOverLimit ? 'Character limit exceeded' : error);
+	const isInvalid = $derived(!!errorMessage);
+	const isValid = $derived(!isInvalid && (!!value || optional));
+</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}
+
+	<div class={['form-textarea-wrapper', isInvalid && 'error', isValid && 'success']}>
+		<textarea
+			{...props}
+			id={textareaId}
+			bind:value
+			class={[
+				'form-textarea',
+				props.disabled && 'form-textarea-disabled',
+				props.readonly && 'form-textarea-readonly',
+				!resize && 'form-textarea-no-resize'
+			]}
+			aria-invalid={isInvalid}
+		></textarea>
+	</div>
+
+	{#if !!(maximumCharactersAllowed || error || description)}
+		<div class="form-footer">
+			<div class="form-messages">
+				{#if description}
+					<p class="form-message form-message-description">
+						{description}
+					</p>
+				{/if}
+				{#if errorMessage}
+					<p class="form-message form-message-error">
+						{errorMessage}
+					</p>
+				{/if}
+			</div>
+			{#if maximumCharactersAllowed}
+				<div class={['form-character-count', isOverLimit && 'error']}>
+					{currentTextLength} / {maximumCharactersAllowed}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.form-container {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		font-size: 14px;
+		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;
+	}
+
+	.form-textarea-wrapper {
+		position: relative;
+		display: flex;
+		width: 100%;
+		border-radius: 8px;
+		border: 1px solid #6b7180;
+		background: #fff;
+		transition: all 0.2s ease-in-out;
+		overflow: hidden;
+	}
+
+	.form-textarea-wrapper:hover:not(:has(.form-textarea:disabled)):not(
+			:has(.form-textarea:read-only)
+		),
+	.form-textarea-wrapper:focus-within {
+		border-color: #472aff;
+	}
+
+	.form-textarea-wrapper:focus-within {
+		box-shadow: 0px 0px 0px 3px rgba(149, 155, 255, 0.3);
+	}
+
+	.form-textarea {
+		font-size: 14px;
+		line-height: 20px;
+		display: flex;
+		width: 100%;
+		min-height: 80px;
+		padding: 8px 16px;
+		border: none;
+		border-radius: 8px;
+		color: #000;
+		transition: all 0.2s ease-in-out;
+		font-family: inherit;
+	}
+
+	.form-textarea:focus {
+		outline: none;
+	}
+
+	.form-textarea-disabled {
+		background-color: #f3f4f6;
+		border-color: #d1d5db;
+		color: #6b7180;
+		cursor: not-allowed;
+	}
+
+	.form-textarea-readonly {
+		background-color: #f9fafb;
+		border-color: #d1d5db;
+		cursor: default;
+	}
+
+	.form-textarea-no-resize {
+		resize: none;
+	}
+
+	.form-textarea::placeholder,
+	.form-textarea:disabled::placeholder {
+		color: #6b7180;
+		opacity: 1;
+	}
+
+	.form-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		gap: 8px;
+	}
+
+	.form-messages {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		flex: 1;
+	}
+
+	.form-message-error {
+		color: #dc2626;
+	}
+
+	.form-message-description {
+		color: #6b7180;
+	}
+
+	.form-character-count {
+		font-size: 12px;
+		color: #6b7180;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+
+	.form-character-count.error {
+		color: #dc2626;
+	}
+
+	.form-textarea-wrapper.error,
+	.form-textarea-wrapper.error:hover:not(:has(.form-textarea:disabled)):not(
+			:has(.form-textarea:read-only)
+		),
+	.form-textarea-wrapper.error:focus-within {
+		border-color: #dc2626;
+	}
+
+	.form-textarea-wrapper.error:focus-within {
+		box-shadow: 0px 0px 0px 3px rgba(220, 38, 38, 0.2);
+	}
+
+	.form-textarea-wrapper.success {
+		border-color: #008556;
+	}
+
+	.form-textarea-wrapper.success:hover:not(:has(.form-textarea:disabled)):not(:has(.form-textarea:read-only)),
+	.form-textarea-wrapper.success:focus-within {
+		border-color: #10b981;
+	}
+
+	.form-textarea-wrapper.success:focus-within {
+		box-shadow: 0px 0px 0px 3px rgba(16, 185, 129, 0.15);
+	}
+
+	.form-textarea-wrapper:has(.form-textarea:disabled),
+	.form-textarea-wrapper:has(.form-textarea:read-only) {
+		border-color: #d1d5db !important;
+		box-shadow: none !important;
+	}
+
+	@media (prefers-contrast: high) {
+		.form-textarea {
+			border-width: 2px;
+		}
+
+		.form-textarea:focus {
+			outline: 2px solid;
+			outline-offset: 2px;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.form-textarea {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
+    label?: string;
+    value?: string;
+    optional?: boolean;
+    error?: string;
+    description?: string;
+    maximumCharactersAllowed?: number;
+    resize?: boolean;
+}
+declare const TextArea: import("svelte").Component<TextAreaProps, {}, "value">;
+type TextArea = ReturnType<typeof TextArea>;
+export default TextArea;

package/dist/Form/Toggle/Toggle.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	interface ToggleProps {
+		id?: string;
+		checked?: boolean;
+		disabled?: boolean;
+		onchange?: (event: Event) => void;
+	}
+
+	let { id = '', checked = $bindable(false), disabled = false, onchange }: ToggleProps = $props();
+</script>
+
+<label class="toggle-container">
+	<input
+		type="checkbox"
+		class="toggle-input"
+		bind:checked
+		{disabled}
+		{id}
+		{onchange}
+		role="switch"
+	/>
+	<div class={['toggle-slider', checked && 'checked', disabled && 'disabled']}>
+		<span class="material-icons-outlined toggle-icon">
+			{#if checked}
+				done
+			{:else}
+				close
+			{/if}
+		</span>
+	</div>
+</label>
+
+<style>
+	.toggle-container {
+		position: relative;
+	}
+
+	.toggle-input {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.toggle-slider {
+		display: flex;
+		width: 40px;
+		padding: 2px;
+		align-items: center;
+		border-radius: 12px;
+		border: 2px solid #6b7180;
+		background: #fff;
+		transition: all 0.3s ease;
+		cursor: pointer;
+	}
+
+	.toggle-slider.checked {
+		justify-content: flex-end;
+		border: 2px solid #472aff;
+		background: #472aff;
+	}
+
+	.toggle-slider.disabled {
+		cursor: not-allowed;
+		border: 2px solid #6b7180;
+		background: #e0e5e8;
+	}
+
+	.toggle-slider.disabled.checked {
+		border: 2px solid #6b7180;
+		background: #6b7180;
+	}
+
+	.toggle-icon {
+		display: flex;
+		font-size: 12px;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		border-radius: 16px;
+		border: 2px solid #6b7180;
+		background: #6b7180;
+		color: #fff;
+		transition: all 0.3s ease;
+		cursor: pointer;
+	}
+
+	.toggle-slider.checked .toggle-icon {
+		border: 2px solid #fff;
+		background: #fff;
+		color: #472aff;
+	}
+
+	.toggle-slider.disabled .toggle-icon {
+		cursor: not-allowed;
+		border: 2px solid #6b7180;
+		background: #6b7180;
+		color: #fff;
+	}
+
+	.toggle-slider.disabled.checked .toggle-icon {
+		border: 2px solid #fff;
+		background: #fff;
+		color: #6b7180;
+	}
+
+	.toggle-container:hover .toggle-slider:not(.disabled).checked {
+		background: #3520bf;
+		border: 2px solid #3520bf;
+	}
+
+	.toggle-container:hover .toggle-slider:not(.disabled):not(.checked) {
+		border: 2px solid #434952;
+	}
+
+	.toggle-container:hover .toggle-slider:not(.disabled):not(.checked) .toggle-icon {
+		border: 2px solid #434952;
+		background: #434952;
+	}
+</style>

package/dist/{Toggle → Form/Toggle}/Toggle.svelte.d.ts

@@ -1,8 +1,9 @@
 interface ToggleProps {
-    status?: 'on' | 'off';
+    id?: string;
+    checked?: boolean;
     disabled?: boolean;
-    onToggle?: () => void;
+    onchange?: (event: Event) => void;
 }
-declare const Toggle: import("svelte").Component<ToggleProps, {}, "">;
+declare const Toggle: import("svelte").Component<ToggleProps, {}, "checked">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;