@lavalogic/scoria 0.0.1

package/dist/Components/PasswordInput.svelte

@@ -0,0 +1,324 @@
+<svelte:options runes />
+
+<script module lang="ts">
+	import Icon, { type PartialIconProps } from './Icon.svelte';
+	import type { FocusEventHandler, KeyboardEventHandler } from 'svelte/elements';
+	import Action from './Action.svelte';
+	import { ColourSet } from '../scss/colours.js';
+	import { Size } from '../Types/Internal/Size.js';
+
+	export interface InputProps {
+		value?: string;
+		label?: string;
+		placeholder?: string;
+		required?: boolean;
+		disabled?: boolean;
+		showInput?: boolean;
+		leftIcon?: PartialIconProps;
+		inputRef?: HTMLInputElement | undefined;
+
+		onblur?: FocusEventHandler<HTMLInputElement>;
+		onfocus?: FocusEventHandler<HTMLInputElement>;
+		onkeydown?: KeyboardEventHandler<HTMLInputElement>;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(''),
+		label = undefined,
+		placeholder = undefined,
+		required = false,
+		disabled = undefined,
+		showInput = $bindable(false),
+		leftIcon = undefined,
+		inputRef = $bindable(),
+		...inputEvents
+	}: InputProps = $props();
+
+	// let inputRef: HTMLInputElement | undefined = undefined;
+
+	function toggleVisibility() {
+		showInput = !showInput;
+		inputRef?.focus();
+	}
+</script>
+
+<div class="error-wrapper">
+	<label>
+		{#if label}
+			<span class="for-default">{label}</span>
+			<span class="border">{label}</span>
+		{/if}
+		<!-- style="--background-colour: {leftIcon?.backgroundColour};" -->
+		<div class="icon-container">
+			{#if leftIcon}
+				<Icon
+					name={leftIcon.name}
+					size={leftIcon.size ?? Size.Medium}
+					float
+					left="0.75rem"
+					top="50%"
+					anchorX="0"
+					anchorY="-50%"
+				/>
+			{/if}
+			<input
+				class="for-default"
+				{...inputEvents}
+				class:left-pad={leftIcon != undefined}
+				class:right-pad={true}
+				{...{ type: showInput ? 'text' : 'password' }}
+				bind:value
+				bind:this={inputRef}
+				{placeholder}
+				{required}
+				{disabled}
+			/>
+
+			<div class="right-icon">
+				<Action
+					colourSet={showInput ? ColourSet.Secondary : ColourSet.Auxiliary}
+					icon={{ name: 'assessment' }}
+					size={Size.MediumSmall}
+					onclick={toggleVisibility}
+				/>
+			</div>
+		</div>
+	</label>
+</div>
+
+<style>input {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  font-size: 0.9375rem;
+  font-weight: 400;
+  padding-top: var(--input-padding-top, 0.65rem);
+  padding-bottom: var(--input-padding-bottom, 0.55rem);
+  padding-left: var(--input-padding-left, 0.75rem);
+  padding-right: var(--input-padding-right, 0.75rem);
+  border: var(--input-border, solid 1px #cbd4da);
+  color: #3a4952;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+  border-radius: var(--input-border-radius, 4px);
+}
+input:disabled {
+  background-color: #f4f7f9;
+}
+input.for-default:focus-visible {
+  outline-offset: -1px;
+  outline-width: 1px;
+}
+input.invalid {
+  border-color: #aa1414;
+  color: #aa1414;
+  background-color: #f9e9e9;
+}
+input.invalid:focus, input.invalid:focus-visible {
+  outline-color: #aa1414 !important;
+}
+
+span {
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+}
+
+span.right-label.inset {
+  user-select: none;
+  font-size: 1rem;
+  font-weight: 500;
+  position: absolute;
+  background-color: #f4f7f9;
+  border-left: solid 1px #cbd4da;
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+  border-radius: 0 4px 4px 0;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  aspect-ratio: 1/1;
+  align-content: center;
+  text-align: center;
+}
+
+span.right-label {
+  color: #46525b;
+  display: inline;
+  flex-basis: 2rem;
+}
+span.right-label.for-modal {
+  align-self: center;
+  margin-top: 1rem;
+}
+
+span.for-default {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.9375rem;
+  user-select: none;
+  padding-left: 0.4rem;
+  padding-right: 0.4rem;
+  padding: 0.1rem 0.4rem;
+  top: -0.6rem;
+  z-index: 2;
+  color: #647d8e;
+  white-space: nowrap;
+}
+span.for-default.invalid {
+  color: #aa1414;
+}
+
+span.border {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.9375rem;
+  user-select: none;
+  padding-left: 0.4rem;
+  padding-right: 0.4rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  z-index: 1;
+  white-space: nowrap;
+  top: 0%;
+  height: 0;
+  color: transparent;
+  border-bottom: solid 1px #ffffff;
+}
+span.border.invalid {
+  border-bottom-color: #f9e9e9;
+}
+
+.select-none {
+  user-select: none;
+}
+
+.left-pad {
+  padding-left: 3rem;
+}
+
+.right-pad {
+  padding-right: 3rem;
+}
+
+.icon-container {
+  position: relative;
+  display: flex;
+  flex-flow: row;
+  width: 100%;
+  height: 100%;
+  gap: 1.5rem;
+}
+.icon-container.for-modal {
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.error {
+  color: #aa1414;
+  margin-left: 0.25rem;
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.right-icon {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  translate: 0 -50%;
+}
+
+label {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.error-wrapper {
+  display: block;
+  height: max(var(--input-height, 3rem));
+  width: var(--input-width, 100%);
+}
+.error-wrapper.for-table {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.error-wrapper.for-modal {
+  flex: unset;
+  position: relative;
+  height: 4.17rem;
+}
+
+label.for-modal {
+  box-sizing: border-box;
+  font-size: 1.5rem;
+  position: relative;
+  display: block;
+  width: 100%;
+}
+label.for-modal span.top-label {
+  color: #647d8e;
+  --colour: #8096a5;
+  font-size: 0.9375rem;
+  z-index: 1;
+  position: absolute;
+  top: 0.45rem;
+  left: 0.75rem;
+}
+label.for-modal span.top-label.invalid {
+  color: #aa1414;
+}
+label.for-modal input {
+  font-size: 2rem;
+  box-sizing: border-box;
+  flex-grow: 1;
+}
+label.for-modal input.uppercase {
+  text-transform: uppercase;
+}
+label.for-modal input:focus {
+  outline-color: #1f81a0;
+}
+label.for-modal input.for-modal {
+  border-radius: 0;
+  height: 100%;
+  resize: none;
+  padding-top: 1.44rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.75rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+label.for-modal input.for-modal.left-pad {
+  padding-left: 3.5rem;
+}
+label.for-modal input.for-modal.right-pad {
+  padding-right: 3.5rem;
+}
+label.for-modal input {
+  height: 3rem;
+}
+
+label.for-table {
+  display: flex;
+  width: 100%;
+}
+label.for-table input {
+  height: unset;
+}
+
+td {
+  --input-border: none;
+}</style>

package/dist/Components/PasswordInput.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type PartialIconProps } from './Icon.svelte';
+import type { FocusEventHandler, KeyboardEventHandler } from 'svelte/elements';
+export interface InputProps {
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    showInput?: boolean;
+    leftIcon?: PartialIconProps;
+    inputRef?: HTMLInputElement | undefined;
+    onblur?: FocusEventHandler<HTMLInputElement>;
+    onfocus?: FocusEventHandler<HTMLInputElement>;
+    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
+}
+declare const PasswordInput: import("svelte").Component<InputProps, {}, "value" | "inputRef" | "showInput">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/Components/Portal.svelte

@@ -0,0 +1,31 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface PortalProps {
+		target?: HTMLElement;
+		children: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+
+	let { target = globalThis.document?.body, children }: PortalProps = $props();
+
+	let ref: HTMLElement | undefined = $state();
+
+	$effect(() => {
+		if (target && ref) {
+			target.appendChild(ref);
+		}
+
+		return () => {
+			ref?.parentNode?.removeChild(ref);
+		};
+	});
+	// this block is almost needless/useless (if not totally) as, on destroy, the ref will no longer exist/be in the DOM anyways
+</script>
+
+<div bind:this={ref}>
+	{@render children()}
+</div>

package/dist/Components/Portal.svelte.d.ts

@@ -0,0 +1,8 @@
+export interface PortalProps {
+    target?: HTMLElement;
+    children: Snippet;
+}
+import { type Snippet } from 'svelte';
+declare const Portal: import("svelte").Component<PortalProps, {}, "">;
+type Portal = ReturnType<typeof Portal>;
+export default Portal;

package/dist/Components/ProgressBubble.svelte

@@ -0,0 +1,134 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { browser } from '$app/environment';
+	import { getCanvasContext } from '../Helpers/Helpers.svelte.js';
+	import { tick } from 'svelte';
+	import type { BubbleColour } from './Bubble.svelte';
+
+	export interface BubbleProps {
+		value: [number, number];
+
+		colours?: BubbleColour | Promise<BubbleColour> | undefined;
+	}
+</script>
+
+<script lang="ts">
+	let { value, colours }: BubbleProps = $props();
+
+	let current = $derived(value[0]);
+	// let current = $derived(37)
+	let total = $derived(value[1]);
+	let progress = $derived(`${current}/${total}`);
+
+	let progressBarRef: HTMLDivElement | undefined = $state();
+
+	// for some reason, doing this in a derived-by puts the browser in some kind of infinite loop
+	let fitsInProgressBar = $state(false);
+	$effect(() => {
+		if (browser && progress && progressBarRef) {
+			const oldRef = progressBarRef;
+			tick().then(() => {
+				if (oldRef === progressBarRef) {
+					const textWidth = getCanvasContext().measureText(`__${progress}__`).width;
+					const progresValueWidth = progressBarRef.getBoundingClientRect().width;
+
+					fitsInProgressBar = progresValueWidth > textWidth;
+				} else {
+					fitsInProgressBar = false;
+				}
+			});
+		}
+	});
+
+	let awaitedColours: BubbleColour | undefined = $state();
+
+	$effect(() => {
+		if (colours) {
+			if (colours instanceof Promise) {
+				colours
+					.then((c) => {
+						awaitedColours = c;
+					})
+					.catch((awaitedColours = undefined));
+			} else {
+				awaitedColours = colours;
+			}
+		} else {
+			awaitedColours = undefined;
+		}
+	});
+</script>
+
+<div
+	class="progress-wrapper"
+	style={awaitedColours
+		? `--bar-background-colour: ${awaitedColours.backgroundColour}; --text-colour: ${awaitedColours.colour};`
+		: ''}
+>
+	<progress value={current} max={total}>{progress}</progress>
+
+	<div class="progress-background" role="progressbar">
+		<div
+			class:fits={fitsInProgressBar}
+			class="progress-value"
+			bind:this={progressBarRef}
+			style={`width: ${Math.min((current / total) * 100, 100)}%;`}
+		>
+			<span class:fits={fitsInProgressBar} class="progress-text">{progress}</span>
+		</div>
+	</div>
+</div>
+
+<style>.progress-wrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: 12px;
+  margin: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+.progress-wrapper .progress-background,
+.progress-wrapper .progress-value {
+  box-sizing: border-box;
+  border-radius: var(--progress-bar-radius, 12px);
+  transition: border-radius ease-out 0.15s 0s;
+}
+.progress-wrapper .progress-background {
+  position: relative;
+  width: 100%;
+  height: calc(var(--height) / 2);
+  background-color: #e9ecf1;
+}
+.progress-wrapper .progress-value {
+  height: 100%;
+  background-color: var(--bar-background-colour, #3a4952);
+}
+.progress-wrapper .progress-value.fits {
+  position: relative;
+}
+
+progress {
+  display: none;
+}
+
+.progress-text {
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  left: -2px;
+  right: -2px;
+  max-height: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  background-color: transparent;
+  color: #3a4952;
+}
+.progress-text.fits {
+  color: var(--text-colour, #3a4952);
+}</style>

package/dist/Components/ProgressBubble.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { BubbleColour } from './Bubble.svelte';
+export interface BubbleProps {
+    value: [number, number];
+    colours?: BubbleColour | Promise<BubbleColour> | undefined;
+}
+declare const ProgressBubble: import("svelte").Component<BubbleProps, {}, "">;
+type ProgressBubble = ReturnType<typeof ProgressBubble>;
+export default ProgressBubble;