@lavalogic/scoria 0.0.1

package/dist/Components/Contexts/Tooltip.svelte

@@ -0,0 +1,116 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { TooltipContext } from '../../Contexts/TooltipContext.svelte.js';
+	import { Side } from '../../Types/Internal/Side.js';
+	import { getContext } from 'svelte';
+</script>
+
+<script lang="ts">
+	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
+</script>
+
+{#if tooltipContext.isShowingTooltip}
+	<div
+		role="tooltip"
+		style="--y: {tooltipContext.y}px; --x: {tooltipContext.x}px;"
+		class="tooltip-wrapper"
+		class:top-arrow={tooltipContext.anchor === Side.Top}
+		class:bottom-arrow={tooltipContext.anchor === Side.Bottom}
+		class:left-arrow={tooltipContext.anchor === Side.Left}
+		class:right-arrow={tooltipContext.anchor === Side.Right}
+	>
+		<div class="tooltip">
+			{tooltipContext.text}
+		</div>
+	</div>
+{/if}
+
+<style>.tooltip-wrapper {
+  position: fixed;
+  z-index: 9999;
+  border-radius: 4px;
+  background-color: black;
+  color: white;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1333333333);
+  border: solid 2px #dae0e5;
+}
+.tooltip-wrapper .tooltip {
+  padding: 0.5rem;
+  background-color: black;
+  border-radius: 4px;
+  font-weight: 500;
+  white-space: preserve;
+}
+.tooltip-wrapper.top-arrow {
+  left: var(--x, 0);
+  top: var(--y, 0);
+  translate: -50% 0;
+}
+.tooltip-wrapper.top-arrow::before {
+  position: absolute;
+  content: "";
+  padding: 0.3rem;
+  z-index: -1;
+  top: 0;
+  border-radius: 4px;
+  left: 50%;
+  translate: -50% -50%;
+  transform: rotate(45deg);
+  background-color: black;
+  border: solid 2px #dae0e5;
+}
+.tooltip-wrapper.bottom-arrow {
+  left: var(--x, 0);
+  bottom: calc(100% - var(--y, 0));
+  translate: -50% 0;
+}
+.tooltip-wrapper.bottom-arrow::after {
+  position: absolute;
+  content: "";
+  padding: 0.3rem;
+  z-index: -1;
+  top: 100%;
+  border-radius: 4px;
+  left: 50%;
+  translate: -50% -50%;
+  transform: rotate(45deg);
+  background-color: black;
+  border: solid 2px #dae0e5;
+}
+.tooltip-wrapper.left-arrow {
+  left: var(--x, 0);
+  top: var(--y, 0);
+  translate: 0 -50%;
+}
+.tooltip-wrapper.left-arrow::before {
+  position: absolute;
+  content: "";
+  padding: 0.3rem;
+  z-index: -1;
+  top: 50%;
+  border-radius: 4px;
+  left: 0;
+  translate: -50% -50%;
+  transform: rotate(45deg);
+  background-color: black;
+  border: solid 2px #dae0e5;
+}
+.tooltip-wrapper.right-arrow {
+  right: calc(100% - var(--x, 0));
+  top: var(--y, 0);
+  translate: 0 -50%;
+}
+.tooltip-wrapper.right-arrow::before {
+  position: absolute;
+  content: "";
+  padding: 0.3rem;
+  z-index: -1;
+  top: 50%;
+  border-radius: 4px;
+  left: 100%;
+  translate: -50% -50%;
+  transform: rotate(45deg);
+  background-color: black;
+  border: solid 2px #dae0e5;
+}</style>

package/dist/Components/Contexts/Tooltip.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Tooltip: import("svelte").Component<Record<string, never>, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/Components/DataMatrixIcon.svelte

@@ -0,0 +1,58 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface DataMatrixIconProps {
+		icon: SVGSVGElement;
+		interactive?: boolean;
+		title: string;
+		oncontextmenu?: (e: MouseEvent) => void;
+	}
+</script>
+
+<script lang="ts">
+	import { passthrough } from '../Helpers/Helpers.svelte.js';
+
+	const { icon, interactive = false, title, oncontextmenu }: DataMatrixIconProps = $props();
+
+	let svgContainer: HTMLDivElement | null = $state(null);
+
+	$effect(() => {
+		if (svgContainer) {
+			// eslint-disable-next-line svelte/no-dom-manipulating
+			svgContainer.innerHTML = '';
+			icon.setAttribute('width', '64');
+			icon.setAttribute('height', '64');
+			// eslint-disable-next-line svelte/no-dom-manipulating
+			svgContainer.appendChild(icon);
+		}
+	});
+</script>
+
+{#if interactive}
+	<button
+		aria-label="Edit Barcode Value"
+		onkeydown={passthrough}
+		title="Right click to edit barcode value for the {title} command"
+		oncontextmenu={(e) => {
+			if (oncontextmenu) {
+				e.preventDefault();
+				oncontextmenu(e);
+			}
+		}}
+	>
+		<div class="fit" bind:this={svgContainer}></div>
+	</button>
+{:else}
+	<div class="fit" bind:this={svgContainer}></div>
+{/if}
+
+<style>button {
+  display: contents;
+  cursor: pointer;
+}
+
+div.fit {
+  background-color: #ffffff;
+  display: flex;
+  padding: 8px;
+}</style>

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

@@ -0,0 +1,9 @@
+export interface DataMatrixIconProps {
+    icon: SVGSVGElement;
+    interactive?: boolean;
+    title: string;
+    oncontextmenu?: (e: MouseEvent) => void;
+}
+declare const DataMatrixIcon: import("svelte").Component<DataMatrixIconProps, {}, "">;
+type DataMatrixIcon = ReturnType<typeof DataMatrixIcon>;
+export default DataMatrixIcon;

package/dist/Components/DateInput.svelte

@@ -0,0 +1,356 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import type { InputDate } from '../Types/Internal/Misc.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Icon, { type PartialIconProps } from './Icon.svelte';
+
+	export interface DateInputProps {
+		value?: InputDate | null;
+		label?: string;
+		placeholder?: string;
+		required?: boolean;
+		variant?: InputVariant;
+		min?: string;
+		max?: string;
+		optional?: boolean;
+		type?: 'date' | 'datetime-local';
+		disabled?: boolean;
+		leftIcon?: PartialIconProps;
+		rightIcon?: PartialIconProps;
+		inputRef?: HTMLInputElement;
+		invalid?: boolean;
+		onblur?: (e: FocusEvent) => void;
+		onfocus?: (e: FocusEvent) => void;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable('' as InputDate),
+		label,
+		placeholder,
+		required = false,
+		optional,
+		variant = InputVariant.Default,
+		min,
+		max,
+		type = 'date',
+		disabled,
+		leftIcon,
+		rightIcon,
+		inputRef,
+		invalid,
+		onblur,
+		onfocus
+	}: DateInputProps = $props();
+
+	let isInvalid = $derived((required && !value?.trim()) || invalid);
+</script>
+
+<div
+	class="error-wrapper"
+	class:for-modal={variant == InputVariant.Modal}
+	class:for-table={variant == InputVariant.Table}
+>
+	<label class:for-modal={variant == InputVariant.Modal}>
+		{#if label}
+			<span
+				class="top-label"
+				class:for-default={variant === InputVariant.Default}
+				class:invalid={isInvalid}
+				>{label}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+			>
+			{#if variant === InputVariant.Default}
+				<span class="border" class:invalid={isInvalid}
+					>{label}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+				>
+			{/if}
+		{/if}
+		<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
+				step={type === 'datetime-local' ? 1 : 'any'}
+				class:invalid={isInvalid}
+				class:left-pad={leftIcon != undefined}
+				class:right-pad={rightIcon != undefined}
+				{type}
+				bind:value
+				{onblur}
+				{onfocus}
+				ondblclick={() => inputRef?.showPicker()}
+				onauxclick={(e) => {
+					e.preventDefault();
+					inputRef?.showPicker();
+				}}
+				bind:this={inputRef}
+				{min}
+				{max}
+				{placeholder}
+				{required}
+				{disabled}
+				onkeydown={(e) => {
+					if (e.key === 'Enter') {
+						e.preventDefault();
+						(
+							(e.target as HTMLElement | undefined)?.closest('form') as HTMLFormElement | undefined
+						)?.requestSubmit();
+					}
+				}}
+			/>
+			{#if rightIcon}
+				<Icon
+					name={rightIcon.name}
+					size={rightIcon.size ?? Size.Medium}
+					float
+					right="0.5rem"
+					top="50%"
+					anchorX="0"
+					anchorY="-50%"
+				/>
+			{/if}
+		</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;
+}</style>

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

@@ -0,0 +1,24 @@
+import { InputVariant } from '../Types/Internal/InputVariant.js';
+import type { InputDate } from '../Types/Internal/Misc.js';
+import { type PartialIconProps } from './Icon.svelte';
+export interface DateInputProps {
+    value?: InputDate | null;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    variant?: InputVariant;
+    min?: string;
+    max?: string;
+    optional?: boolean;
+    type?: 'date' | 'datetime-local';
+    disabled?: boolean;
+    leftIcon?: PartialIconProps;
+    rightIcon?: PartialIconProps;
+    inputRef?: HTMLInputElement;
+    invalid?: boolean;
+    onblur?: (e: FocusEvent) => void;
+    onfocus?: (e: FocusEvent) => void;
+}
+declare const DateInput: import("svelte").Component<DateInputProps, {}, "value">;
+type DateInput = ReturnType<typeof DateInput>;
+export default DateInput;