@lavalogic/scoria 0.0.1

package/dist/Components/TextArea.svelte

@@ -0,0 +1,349 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface TextAreaProps {
+		value: string;
+
+		onblur?: (e: FocusEvent) => void;
+		onfocus?: (e: FocusEvent) => void;
+		labelTop?: string | undefined;
+		labelRight?: string;
+		placeholder?: string | undefined;
+		required?: boolean;
+		variant?: InputVariant;
+		selectNone?: boolean;
+		optional?: boolean;
+		uppercase?: boolean;
+		disabled?: boolean;
+		invalid?: boolean;
+		maxWidth?: boolean;
+		showErrorColours?: boolean;
+		leftIcon?: PartialIconProps;
+		rightIcon?: PartialIconProps;
+		onLeftIconClick?: () => void;
+		onRightIconClick?: () => void;
+		rows?: number;
+		textAreaRef?: HTMLTextAreaElement | undefined;
+		noresize?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import { Size } from '../Types/Internal/Size.js';
+
+	import Icon, { type PartialIconProps } from './Icon.svelte';
+
+	let {
+		value = $bindable(''),
+		labelTop,
+		labelRight,
+		placeholder,
+		maxWidth = false,
+		required = false,
+		variant = InputVariant.Default,
+		selectNone = false,
+		noresize = false,
+		uppercase = false,
+		disabled,
+		invalid = false,
+		showErrorColours = false,
+		optional = false,
+		leftIcon,
+		rightIcon,
+		onLeftIconClick,
+		onRightIconClick,
+		rows = 4,
+
+		textAreaRef = $bindable(),
+		onblur,
+		onfocus
+	}: TextAreaProps = $props();
+
+	let isInvalid = $derived(showErrorColours && ((required && value.trim() === '') || invalid));
+</script>
+
+<label class:for-modal={variant === InputVariant.Modal} class:max-width={maxWidth}>
+	<!-- HACK removed label for modals for now because I couldn't think of a decent style that doesn't interfere with scrolling -->
+	{#if labelTop && variant !== InputVariant.Modal}
+		<!-- <span class="top-label" class:invalid={isInvalid}>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span> -->
+		<span
+			class="top-label"
+			class:for-default={variant === InputVariant.Default}
+			class:invalid={isInvalid}
+			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+		>
+		{#if variant === InputVariant.Default}
+			<span class="border" class:invalid={isInvalid}
+				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+			>
+		{/if}
+	{/if}
+	<!-- style="--background-colour: {leftIcon?.backgroundColour ?? rightIcon?.backgroundColour};" -->
+	<div class="icon-container" class:for-modal={variant == InputVariant.Modal}>
+		{#if leftIcon}
+			<Icon
+				name={leftIcon.name}
+				size={leftIcon.size ?? Size.Medium}
+				colour={leftIcon.colour}
+				float
+				left="0.75rem"
+				top="50%"
+				anchorX="0"
+				anchorY="-50%"
+				clickable={!!onLeftIconClick}
+				onclick={onLeftIconClick}
+			/>
+		{/if}
+		<textarea
+			class:noresize
+			class:uppercase
+			class:invalid={isInvalid}
+			class:select-none={selectNone}
+			class:left-pad={leftIcon != undefined}
+			class:right-pad={rightIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			class:max-width={maxWidth}
+			bind:value
+			{onblur}
+			{onfocus}
+			{rows}
+			bind:this={textAreaRef}
+			{placeholder}
+			{required}
+			{disabled}
+		></textarea>
+		{#if rightIcon}
+			<Icon
+				name={rightIcon.name}
+				size={rightIcon.size ?? Size.Medium}
+				colour={rightIcon.colour}
+				float
+				right={variant == InputVariant.Modal ? '1rem' : '0.5rem'}
+				top="50%"
+				anchorX="0"
+				anchorY="-50%"
+				clickable={!!onRightIconClick}
+				onclick={onRightIconClick}
+			/>
+		{/if}
+		{#if labelRight}
+			<span class="right-label" class:for-modal={variant == InputVariant.Modal}>{labelRight}</span>
+		{/if}
+	</div>
+</label>
+
+<style>textarea {
+  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);
+}
+textarea:disabled {
+  background-color: #f4f7f9;
+}
+textarea.for-default:focus-visible {
+  outline-offset: -1px;
+  outline-width: 1px;
+}
+textarea.invalid {
+  border-color: #aa1414;
+  color: #aa1414;
+  background-color: #f9e9e9;
+}
+textarea.invalid:focus, textarea.invalid:focus-visible {
+  outline-color: #aa1414 !important;
+}
+textarea.noresize {
+  resize: none;
+}
+textarea.full-width {
+  width: 100%;
+  flex-basis: 100%;
+  flex-grow: 1;
+}
+
+label {
+  position: relative;
+  width: var(--input-width, 100%);
+}
+label.max-width {
+  flex-grow: 1;
+}
+
+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 textarea {
+  font-size: 2rem;
+  box-sizing: border-box;
+  flex-grow: 1;
+}
+label.for-modal textarea.uppercase {
+  text-transform: uppercase;
+}
+label.for-modal textarea:focus {
+  outline-color: #1f81a0;
+}
+label.for-modal textarea.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 textarea.for-modal.left-pad {
+  padding-left: 3.5rem;
+}
+label.for-modal textarea.for-modal.right-pad {
+  padding-right: 3.5rem;
+}
+label.for-modal textarea {
+  height: 4rem;
+}
+
+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;
+}
+
+.textarea-error-wrapper {
+  display: block;
+  width: 100%;
+  height: max(var(--input-height, 3rem), 2rem);
+  width: var(--input-width, 100%);
+}
+.textarea-error-wrapper.for-modal {
+  position: relative;
+  height: 100%;
+}</style>

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

@@ -0,0 +1,29 @@
+export interface TextAreaProps {
+    value: string;
+    onblur?: (e: FocusEvent) => void;
+    onfocus?: (e: FocusEvent) => void;
+    labelTop?: string | undefined;
+    labelRight?: string;
+    placeholder?: string | undefined;
+    required?: boolean;
+    variant?: InputVariant;
+    selectNone?: boolean;
+    optional?: boolean;
+    uppercase?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    maxWidth?: boolean;
+    showErrorColours?: boolean;
+    leftIcon?: PartialIconProps;
+    rightIcon?: PartialIconProps;
+    onLeftIconClick?: () => void;
+    onRightIconClick?: () => void;
+    rows?: number;
+    textAreaRef?: HTMLTextAreaElement | undefined;
+    noresize?: boolean;
+}
+import { InputVariant } from '../Types/Internal/InputVariant.js';
+import { type PartialIconProps } from './Icon.svelte';
+declare const TextArea: import("svelte").Component<TextAreaProps, {}, "value" | "textAreaRef">;
+type TextArea = ReturnType<typeof TextArea>;
+export default TextArea;