@softwareone/spi-sv5-library 0.1.3 → 1.1.0

package/dist/Form/Input/Input.svelte

@@ -0,0 +1,393 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import InputIcon from './InputIcon.svelte';
+
+	type InputType = 'text' | 'password' | 'number' | 'date' | 'money';
+
+	interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'> {
+		label?: string;
+		type?: InputType;
+		value?: string | number | null;
+		optional?: boolean;
+		error?: string | string[];
+		description?: string;
+		currency?: string;
+	}
+
+	let {
+		label,
+		type = 'text',
+		value = $bindable(''),
+		optional = false,
+		error,
+		description,
+		currency,
+		id,
+		disabled,
+		readonly,
+		required,
+		oninput,
+		...props
+	}: InputProps = $props();
+
+	let isPasswordVisible = $state(false);
+
+	const componentId = $props.id();
+	const inputId = id || componentId;
+
+	const isInvalid = $derived(!!error);
+	const isValid = $derived(!isInvalid && (!!value || optional));
+	const hasStatus = $derived(isInvalid || isValid);
+	const showIcon = $derived(hasStatus || ['password', 'money'].includes(type));
+	const showDatePicker = $derived(type === 'date');
+
+	const transformationType = $derived<Record<string, string>>({
+		money: 'number',
+		password: isPasswordVisible ? 'text' : 'password'
+	});
+</script>
+
+<div class="form-container">
+	{#if label}
+		<div class="form-label-container">
+			<label for={inputId}>{label}</label>
+			{#if required}
+				<span class="form-label-required">Required</span>
+			{:else if optional}
+				<span class="form-label-optional">Optional</span>
+			{/if}
+		</div>
+	{/if}
+
+	<div
+		class={[
+			'form-input-wrapper',
+			isInvalid && 'error',
+			isValid && 'success',
+			type === 'money' && currency && 'money-with-icon'
+		]}
+	>
+		<input
+			bind:value
+			{...props}
+			id={inputId}
+			type={transformationType[type] ?? type}
+			{disabled}
+			{readonly}
+			class={[
+				'form-input',
+				disabled && 'form-input-disabled',
+				readonly && 'form-input-readonly',
+				(showIcon || showDatePicker) && 'form-input-with-icon',
+				showDatePicker && 'form-input-date'
+			]}
+			aria-invalid={isInvalid}
+		/>
+
+		{#if type === 'money' && currency}
+			<div class="form-input-currency">{currency}</div>
+		{/if}
+
+		{#if showIcon}
+			<div
+				class={[
+					'form-input-icon-container',
+					type === 'password' && hasStatus && 'form-input-icon-container-password'
+				]}
+			>
+				{#if hasStatus}
+					<InputIcon type={isInvalid ? 'error' : 'success'} isDateInput={showDatePicker} />
+				{/if}
+
+				{#if type === 'password'}
+					<InputIcon type="password" bind:isPasswordVisible />
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	{#if description}
+		<p class="form-message form-message-description">
+			{description}
+		</p>
+	{/if}
+	{#if isInvalid}
+		<p class="form-message form-message-error">
+			{Array.isArray(error) ? error[0] : error}
+		</p>
+	{/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-input-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		border-radius: 8px;
+		border: 1px solid #6b7180;
+		background: #fff;
+		transition: all 0.2s ease-in-out;
+	}
+
+	.form-input-wrapper:hover:not(:has(.form-input:disabled)):not(:has(.form-input:read-only)),
+	.form-input-wrapper:focus-within {
+		border-color: #472aff;
+	}
+
+	.form-input-wrapper:focus-within,
+	.form-input-wrapper:not(.money-with-icon):not(.error):not(.success) .form-input:focus-visible {
+		box-shadow: 0px 0px 0px 3px rgba(149, 155, 255, 0.3);
+	}
+
+	.form-input-wrapper:not(.money-with-icon):not(.error):not(.success) .form-input:focus-visible {
+		outline: none;
+		border-color: #472aff;
+	}
+
+	.form-input {
+		font-size: 14px;
+		line-height: 20px;
+		display: flex;
+		width: 100%;
+		padding: 8px 16px;
+		align-items: center;
+		border: none;
+		border-radius: 8px;
+		color: #000;
+		transition: all 0.2s ease-in-out;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	.form-input-with-icon {
+		padding-right: 52px;
+	}
+
+	.form-input:focus {
+		outline: none;
+	}
+
+	.form-input-disabled {
+		background-color: #f3f4f6;
+		border-color: #d1d5db;
+		color: #6b7180;
+		cursor: not-allowed;
+	}
+
+	.form-input-readonly {
+		background-color: #f9fafb;
+		border-color: #d1d5db;
+		cursor: default;
+	}
+
+	.form-input-date {
+		cursor: pointer;
+		position: relative;
+	}
+
+	.form-input-date::-webkit-calendar-picker-indicator {
+		opacity: 1;
+		cursor: pointer;
+		width: 20px;
+		height: 20px;
+		position: absolute;
+		right: 10px;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	.form-input-date::-moz-calendar-picker-indicator {
+		opacity: 1;
+		cursor: pointer;
+		width: 20px;
+		height: 20px;
+		position: absolute;
+		right: 12px;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	@-moz-document url-prefix() {
+		.form-input-date.form-input-with-icon {
+			padding-right: 10px;
+		}
+	}
+
+	.form-input-date.form-input-with-icon::-webkit-calendar-picker-indicator,
+	.form-input-date.form-input-with-icon::-moz-calendar-picker-indicator {
+		right: 40px;
+	}
+
+	.form-input-date.form-input-with-icon::before {
+		content: '';
+		position: absolute;
+		right: 43px;
+		top: 0;
+		bottom: 0;
+		width: 1px;
+		background-color: #6b7180;
+		z-index: 1;
+	}
+
+	.form-input::placeholder,
+	.form-input:disabled::placeholder {
+		color: #6b7180;
+		opacity: 1;
+	}
+
+	.form-message-error {
+		color: #dc2626;
+	}
+
+	.form-message-description {
+		color: #6b7180;
+	}
+
+	.form-input-icon-container {
+		position: absolute;
+		right: 12px;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 24px;
+		pointer-events: none;
+	}
+
+	.form-input-icon-container-password {
+		gap: 8px;
+	}
+
+	.form-input-wrapper:has(.form-input-icon-container-password) .form-input {
+		padding-right: 72px;
+	}
+
+	.form-input-icon-container :global(.form-input-icon) {
+		position: static;
+		transform: none;
+	}
+
+	.form-input-wrapper:not(.money-with-icon):not(.error):not(.success) .form-input:focus-visible {
+		outline: none;
+		border-color: #472aff;
+		box-shadow: 0px 0px 0px 3px rgba(149, 155, 255, 0.3);
+	}
+
+	.form-input-currency {
+		display: flex;
+		align-items: center;
+		padding: 0 10px 0 10px;
+		color: #000;
+		font-size: 12px;
+		font-weight: 400;
+		height: 100%;
+		flex-shrink: 0;
+		position: relative;
+	}
+
+	.form-input-currency::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: -8px;
+		bottom: -8px;
+		width: 1px;
+		background-color: #6b7180;
+		z-index: 1;
+	}
+
+	.form-input-wrapper:focus-within {
+		border-color: #472aff;
+		box-shadow: 0px 0px 0px 3px rgba(149, 155, 255, 0.3);
+	}
+
+	.form-input-wrapper.error,
+	.form-input-wrapper.error:hover:not(:has(.form-input:disabled)):not(:has(.form-input:read-only)),
+	.form-input-wrapper.error:focus-within {
+		border-color: #dc2626;
+	}
+
+	.form-input-wrapper.error:focus-within {
+		box-shadow: 0px 0px 0px 3px rgba(220, 38, 38, 0.2);
+	}
+
+	.form-input-wrapper.success {
+		border-color: #008556;
+	}
+
+	.form-input-wrapper.success:hover:not(:has(.form-input:disabled)):not(
+			:has(.form-input:read-only)
+		),
+	.form-input-wrapper.success:focus-within {
+		border-color: #10b981;
+	}
+
+	.form-input-wrapper.success:focus-within {
+		box-shadow: 0px 0px 0px 3px rgba(16, 185, 129, 0.15);
+	}
+
+	.form-input-wrapper:has(.form-input-currency) .form-input-icon-container {
+		right: 50px;
+	}
+
+	.form-input-wrapper.money-with-icon .form-input-icon-container {
+		right: 55px;
+	}
+
+	input::-webkit-outer-spin-button,
+	input::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	input[type='number'] {
+		appearance: textfield;
+		-moz-appearance: textfield;
+	}
+
+	@media (prefers-contrast: high) {
+		.form-input {
+			border-width: 2px;
+		}
+
+		.form-input:focus {
+			outline: 2px solid;
+			outline-offset: 2px;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.form-input {
+			transition: none;
+		}
+	}
+</style>

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

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

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;