@softwareone/spi-sv5-library 0.1.3 → 1.0.0

package/dist/ErrorPage/ErrorPage.svelte.d.ts

@@ -0,0 +1,8 @@
+import { StatusCodes } from 'http-status-codes';
+interface ErrorPageProps {
+    status: StatusCodes;
+    title?: string;
+}
+declare const ErrorPage: import("svelte").Component<ErrorPageProps, {}, "">;
+type ErrorPage = ReturnType<typeof ErrorPage>;
+export default ErrorPage;

package/dist/Footer/Footer.svelte

@@ -1,162 +1,56 @@
 <script lang="ts">
 	interface FooterProps {
-		isInternal?: boolean;
+		homeUrl?: string;
 	}
-
-	let { isInternal }: FooterProps = $props();
-
-	isInternal = isInternal ?? false;
+	let { homeUrl = '/' }: FooterProps = $props();
 </script>
 
-{#if isInternal}
-		<section class="footer-section">
-			<article class="footer-logo">
-				<img alt="SoftwareOne logo" class="logo-image" src="/softwareone-logo-white.svg" />
-			</article>
-			<article class="footer-links">
-				<a class="footer-link" href="mailto:support@softwareone.com" title="support@softwareone.com">Support</a>
-				<a
-					class="footer-link"
-					href="https://softwareone.atlassian.net/wiki/spaces/MA/pages/4642996240/GDAP+Manual"
-					title="GDAP Manual"
-					target="_blank">Documentation</a
-				>
-			</article>
-			<article class="footer-links">
-				<div class="footer-link">Privacy Supplement - Cloud Control Platform</div>
-				<div class="footer-link">© 2024 SoftwareOne. All rights reserved</div>
-			</article>
-		</section>
-{:else}
-<div class="logo-legal-section">
-	<div class="logo">
-		<div class="powered-by">Powered by</div>
-		<div class="software-one">
-			<svg
-				width="120"
-				height="43"
-				viewBox="0 0 120 43"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
+<div class="footer-section">
+	<a href={homeUrl} title="Home">
+		<img alt="SoftwareOne logo" class="logo-image" src="/softwareone-logo-white.svg" />
+	</a>
+	<ul class="links">
+		<li>
+			<a href="mailto:support@softwareone.com" title="support@softwareone.com">Support</a>
+		</li>
+		<li>
+			<a
+				href="https://softwareone.atlassian.net/wiki/spaces/MA/pages/4642996240/GDAP+Manual"
+				title="GDAP Manual"
+				target="_blank"
+				rel="noopener noreferrer">Documentation</a
 			>
-				<path
-					d="M41.7916 25.2245C39.8995 35.1656 31.1792 42.3529 21.0878 42.3529C9.4607 42.3529 0 32.8524 0 21.1765C0 9.47296 9.4607 0 21.0878 0C31.2066 0 39.8995 7.18733 41.7916 17.1284V1.18412H53.7752V6.08583C57.1207 1.87256 60.85 0 65.8135 0C74.5338 0 79.936 6.33366 79.936 16.5777V17.3212C81.5813 6.91196 89.6983 0 100.338 0C112.02 0 120 8.83959 120 21.7272V24.3984H91.5905C92.4406 30.2364 95.8409 33.5684 100.941 33.5684C104.671 33.5684 107.358 31.8335 108.181 28.8595H119.452C117.861 36.9556 110.402 42.3529 100.777 42.3529C89.9726 42.3529 81.6087 35.4134 79.936 25.0593V41.1688H67.7605V17.8444C67.7605 12.8326 65.2925 10.0513 60.8775 10.0513C56.7368 10.0513 53.9946 13.1355 53.9946 17.8444V41.1688H41.7916V25.2245ZM108.099 16.6878C107.331 11.4832 104.369 8.45407 100.091 8.45407C95.7861 8.45407 92.7696 11.4281 91.7824 16.6878H108.099Z"
-					fill="black"
-				/>
-				<path
-					d="M1.63617 21.8654H3.15125C3.24533 22.3776 3.53745 22.6013 4.1316 22.6013C4.62673 22.6013 4.95351 22.3477 4.95351 21.9599C4.95351 21.6765 4.73565 21.4925 4.29994 21.4179L3.71074 21.3185C2.35905 21.0898 1.76985 20.5876 1.76985 19.6628C1.76985 18.6833 2.72049 17.9922 4.06723 17.9922C5.42388 17.9922 6.23588 18.5441 6.41908 19.5982H4.91885C4.84953 19.1855 4.54751 18.9617 4.05733 18.9617C3.59687 18.9617 3.25523 19.2302 3.25523 19.5932C3.25523 19.8617 3.46813 20.0108 3.96326 20.1003L4.60197 20.2147C5.9091 20.4484 6.48345 20.9705 6.48345 21.9251C6.48345 22.9543 5.54766 23.6454 4.15141 23.6454C2.65613 23.6454 1.74015 22.9991 1.63617 21.8654ZM6.73596 20.8362C6.73596 19.1905 7.92426 17.9922 9.56312 17.9922C11.1921 17.9922 12.3408 19.1457 12.3408 20.7915C12.3408 22.4571 11.1673 23.6454 9.52351 23.6454C7.8797 23.6454 6.73596 22.4919 6.73596 20.8362ZM10.7366 20.8014C10.7366 19.812 10.2712 19.1855 9.53342 19.1855C8.80558 19.1855 8.34017 19.8219 8.34017 20.8113C8.34017 21.8257 8.79568 22.4521 9.53342 22.4521C10.2761 22.4521 10.7366 21.8157 10.7366 20.8014ZM12.2566 18.1563H13.128V17.6392C13.128 16.4459 13.6727 15.9188 14.8956 15.9188C15.0986 15.9188 15.3462 15.9387 15.4848 15.9636V17.0922C15.3957 17.0873 15.3957 17.0873 15.2868 17.0873C14.8412 17.0873 14.6926 17.2165 14.6926 17.6143V18.1563H16.2374V16.4906H17.7971V18.1563H20.2331L20.7975 20.692C20.8767 21.055 20.956 21.4428 21.0203 21.8058C21.0995 21.4279 21.1936 21.05 21.2877 20.697L21.9462 18.196H23.2236L23.892 20.697C23.9713 21.0053 24.0653 21.403 24.1446 21.7411C24.2386 21.229 24.2881 20.9804 24.3525 20.697L24.917 18.1563H26.4568L24.9516 23.4814H23.4514L22.5552 20.0705L21.6788 23.4814H20.134L18.9656 19.27H17.7971V21.6964C17.7971 22.1538 17.9604 22.3079 18.4358 22.3079C18.5744 22.3079 18.6487 22.303 18.7873 22.2781V23.4316C18.5249 23.4814 18.2278 23.5162 17.9902 23.5162C16.7325 23.5162 16.2374 23.0488 16.2374 21.8605V19.27H14.6926V23.4814H13.128V19.27H12.2566V18.1563ZM26.1647 22.1091C26.1647 21.1445 26.7885 20.6572 28.3878 20.3838C29.2493 20.2396 29.5612 20.0407 29.5612 19.633C29.5612 19.2253 29.2592 18.9767 28.7591 18.9767C28.2293 18.9767 27.9273 19.2203 27.8927 19.6827H26.4518C26.5657 18.5888 27.3827 17.9922 28.774 17.9922C30.3089 17.9922 31.0664 18.733 31.0664 20.2396V22.3527C31.0664 23.009 31.1011 23.1979 31.2744 23.4814H29.7692C29.6949 23.3024 29.6454 23.0985 29.6256 22.825C29.2146 23.367 28.6849 23.6156 27.9521 23.6156C26.843 23.6156 26.1647 23.0438 26.1647 22.1091ZM28.6849 21.1892C27.9422 21.3384 27.6649 21.5472 27.6649 21.9599C27.6649 22.3776 27.9323 22.6162 28.4076 22.6162C29.1255 22.6162 29.5662 22.1588 29.5662 21.4279V20.9307C29.3384 21.0401 29.1503 21.0948 28.6849 21.1892ZM31.8438 18.1563H33.3935V18.9717C33.7302 18.3601 34.1708 18.0668 34.765 18.0668C34.8343 18.0668 34.9779 18.0817 35.0967 18.1065V19.4092C34.9977 19.3844 34.8937 19.3744 34.6759 19.3744C33.9134 19.3744 33.4232 19.8667 33.4232 20.6324V23.4814H31.8438V18.1563ZM35.0472 20.8362C35.0472 19.1407 36.1563 17.9922 37.7952 17.9922C39.3548 17.9922 40.4045 19.1656 40.4045 20.9207V21.1942H36.6168C36.7207 22.0792 37.1763 22.5814 37.8744 22.5814C38.3992 22.5814 38.7409 22.3328 38.8547 21.8803H40.3302C40.1173 22.9394 39.1271 23.6454 37.8546 23.6454C36.186 23.6454 35.0472 22.5068 35.0472 20.8362ZM38.8498 20.2644C38.7508 19.454 38.3745 19.0214 37.7655 19.0214C37.1565 19.0214 36.7752 19.449 36.6465 20.2644H38.8498Z"
-					fill="white"
-				/>
-			</svg>
-		</div>
-	</div>
-	<div class="legal">
-		<div class="legal-text">
-			SoftwareONE is a trademark of SoftwareONE, Inc. "The Software Licensing Experts" is a
-			service mark of SoftwareONE, Inc. VAR assist is a trademark of SoftwareONE, Inc. "It pays to
-			partner" is a service mark of SoftwareONE, Incorporated. All other trademarks, service marks
-			or trade names appearing herein are the property of their respective owners.
-		</div>
-		<div class="legal-text">Privacy Statement | Terms of Service</div>
-	</div>
+		</li>
+	</ul>
+	<ul class="legal">
+		<li>Privacy Supplement - Cloud Control Platform</li>
+		<li>© 2025 SoftwareOne. All rights reserved</li>
+	</ul>
 </div>
-{/if}
 
 <style>
-	/* Footer sticks to the bottom */
 	.footer-section {
 		background-color: #25282d;
 		display: flex;
-		flex-direction: row;
 		gap: 96px;
 		align-items: center;
 		justify-content: center;
 		padding: 24px;
-	}
-
-	.footer-logo {
-		display: flex;
-		justify-content: center;
+		color: white;
 	}
 
 	.logo-image {
 		width: 192px;
 	}
 
-	.footer-links {
-		display: grid;
-	}
-
-	.footer-link {
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
-		font-size: 16px;
-		font-weight: 400;
-		color: white;
-		padding-bottom: 4px;
-		text-decoration: none;
+	.footer-section .links,
+	.footer-section .legal {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
 	}
 
-	.footer-link:hover {
-		color: #fff;
-		cursor: pointer;
+	.footer-section a:hover {
 		text-decoration: underline;
 	}
-
-	.logo-legal-section {
-		display: inline-flex;
-		height: 118.35px;
-		width: 100%;
-		align-items: center;
-		justify-content: space-between;
-		padding: 10px 20px;
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		margin-left:24px;
-
-	}
-
-	.legal-text {
-		font-size: 12px;
-		color: #6b7180;
-	}
-
-	.logo-legal-section {
-		display: inline-flex;
-		height: 118.35px;
-		width: 1440px;
-		align-items: center;
-		justify-content: start;
-		gap: 20px;
-		padding: 6px;
-	}
-	.logo {
-		display: inline-flex;
-		flex-direction: column;
-		align-items: start;
-		justify-content: start;
-		gap: 2px;
-	}
-	.powered-by {
-		font-family: 'Haas Grot Text', sans-serif;
-		font-size: 14px;
-		font-weight: 500;
-		line-height: 1.5;
-		color: #6b7180;
-	}
-	.legal {
-		display: inline-flex;
-		flex-grow: 1;
-		flex-direction: column;
-		align-items: start;
-		justify-content: start;
-		gap: 2px;
-	}
-	.legal-text {
-		font-family: 'Haas Grot Text', sans-serif;
-		width: 100%;
-		font-size: 12px;
-		font-weight: 500;
-		color: #6b7180;
-	}
 </style>

package/dist/Footer/Footer.svelte.d.ts

@@ -1,5 +1,5 @@
 interface FooterProps {
-    isInternal?: boolean;
+    homeUrl?: string;
 }
 declare const Footer: import("svelte").Component<FooterProps, {}, "">;
 type Footer = ReturnType<typeof Footer>;

package/dist/Form/Input/Input.svelte

@@ -0,0 +1,398 @@
+<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;
+		optional?: boolean;
+		error?: 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'
+	});
+
+	const handleInput = (event: Event): void => {
+		const target = event.target as HTMLInputElement;
+		value = type === 'number' || type === 'money' ? target.valueAsNumber : target.value;
+		oninput?.(event as Event & { currentTarget: EventTarget & HTMLInputElement });
+	};
+</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
+			{...props}
+			id={inputId}
+			type={transformationType[type] ?? type}
+			{value}
+			{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}
+			oninput={handleInput}
+		/>
+
+		{#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">
+			{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;
+    optional?: boolean;
+    error?: string;
+    description?: string;
+    currency?: string;
+}
+declare const Input: import("svelte").Component<InputProps, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;