@lavalogic/scoria 0.40.18 → 0.40.20

package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte

@@ -771,6 +771,9 @@ $effect(() => {
 						{#if apt.sublabel}
 							<span class="apt-sublabel">{apt.sublabel}</span>
 						{/if}
+						{#if apt.reference}
+							<span class="apt-reference">Ref: {apt.reference}</span>
+						{/if}
 					</div>
 				{/each}
 			</div>
@@ -1044,11 +1047,15 @@ $effect(() => {
   color: #259fc7;
 }
 .appointment-block.outbound {
-  border-color: #e7b100;
-  background-color: #f0faf0;
+  border-color: #66bb6a;
+  background-color: #eaf7ec;
 }
 .appointment-block.outbound .apt-type {
-  color: #e7b100;
+  color: #2e7d32;
+}
+.appointment-block.outbound:hover {
+  background-color: #dcefdd;
+  border-color: #43a047;
 }
 
 .apt-type {
@@ -1067,6 +1074,12 @@ $effect(() => {
   font-size: 0.75rem;
 }
 
+.apt-reference {
+  color: #647d8e;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
 .week-day-tabs {
   display: flex;
   flex-flow: row nowrap;

package/dist/Components/AppointmentCalendar/AppointmentCalendarProps.d.ts

@@ -29,6 +29,8 @@ export interface CalendarAppointment {
     readonly typeCode: string;
     readonly label: string;
     readonly sublabel?: string;
+    /** Optional booking reference shown on the appointment card. */
+    readonly reference?: string;
 }
 export interface CalendarDoor {
     readonly id: number;

package/dist/Components/DateInput.svelte

@@ -3,7 +3,7 @@
 <script
 	lang="ts"
 	module
->import { cssLength, passthrough } from "../Helpers/Helpers.svelte.js";
+>import { cssLength } from "../Helpers/Helpers.svelte.js";
 import { InputVariant } from "../Types/Internal/InputVariant.js";
 import { Size } from "../Types/Internal/Size.js";
 import Icon from "./Icon.svelte";
@@ -28,11 +28,13 @@ function submitAncestorForm(e) {
 // DateInput rendered inside e.g. the Order Details collapsible card.
 const isInvalid = $derived(required && !value?.trim() || invalid);
 function onkeydown(e) {
+	// Only Enter is intercepted (to submit an ancestor form). All other
+	// keys — crucially the digit keys used to type a date/time — must pass
+	// through; `passthrough` was blurring the input on every alphanumeric
+	// keypress, which made the field impossible to type into.
 	if (e.key === "Enter") {
 		submitAncestorForm(e);
-		return;
 	}
-	passthrough(e);
 }
 function ondblclick() {
 	openPicker(inputRef);
@@ -82,7 +84,7 @@ function handleChange(e) {
 				/>
 			{/if}
 			<input
-				step={type === 'datetime-local' ? 1 : 'any'}
+				step={type === 'datetime-local' ? 1 : type === 'time' ? 60 : 'any'}
 				class:invalid={isInvalid}
 				class:left-pad={leftIcon != undefined}
 				class:right-pad={rightIcon != undefined}

package/dist/Components/DateInputProps.d.ts

@@ -1,3 +1,4 @@
 import type { DateOnlyInputProps } from './DateOnlyInputProps.js';
 import type { DateTimeInputProps } from './DateTimeInputProps.js';
-export type DateInputProps = DateOnlyInputProps | DateTimeInputProps;
+import type { TimeInputProps } from './TimeInputProps.js';
+export type DateInputProps = DateOnlyInputProps | DateTimeInputProps | TimeInputProps;

package/dist/Components/Icons.d.ts

@@ -867,4 +867,16 @@ export declare const icons: {
         readonly box: 24;
         readonly svg: "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17.4338 3C17.7851 3 18.1106 3.1843 18.2913 3.4855L20.8575 7.76249C20.9507 7.9179 21 8.09574 21 8.27698V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V8.27698C3 8.09574 3.04926 7.9179 3.14251 7.76249L5.7087 3.4855C5.88942 3.1843 6.21493 3 6.56619 3H17.4338ZM14.5 5H17.2L19 8H15.5L14.5 5ZM12.5 5H11.5L10.5 8V13H13.5V8L12.5 5ZM9.5 5H6.8L5 8H8.5L9.5 5ZM8.5 10H5V19H19V10H15.5V14C15.5 14.5523 15.0523 15 14.5 15H9.5C8.94772 15 8.5 14.5523 8.5 14V10Z\"/>";
     };
+    readonly doors: {
+        readonly box: 24;
+        readonly svg: "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 4C19 4 22 8 22 8V9H20V20H4V9H2V8C2 8 5 4 12 4ZM12 6C8 6 6 8 6 8V18H8V13H11V18H13V13H16V18H18V8C18 8 16 6 12 6Z\"/>";
+    };
+    readonly 'door-groups': {
+        readonly box: 24;
+        readonly svg: "<path d=\"M13 21H11V13H5V21H3V11H13V21Z\"/>\n\t\t\t\t\t\t<path d=\"M17 17H15V9H9V10H7V7H17V17Z\"/>\n\t\t\t\t\t\t<path d=\"M21 13H19V5H13V6H11V3H21V13Z\"/>";
+    };
+    readonly 'door-schedule': {
+        readonly box: 24;
+        readonly svg: "<path d=\"M20 22H18V6H6V22H4V3H20V22Z\"/>\n\t\t\t\t\t\t<path d=\"M10.1465 10.8535C10.4615 10.5386 10.9999 10.7616 11 11.207V16.793C10.9999 17.2384 10.4615 17.4614 10.1465 17.1465L7.35352 14.3535C7.1583 14.1583 7.1583 13.8417 7.35352 13.6465L10.1465 10.8535Z\"/>\n\t\t\t\t\t\t<path d=\"M13 11.207C13.0001 10.7616 13.5385 10.5386 13.8535 10.8535L16.6465 13.6465C16.8417 13.8417 16.8417 14.1583 16.6465 14.3535L13.8535 17.1465C13.5385 17.4614 13.0001 17.2384 13 16.793V11.207Z\"/>";
+    };
 };

package/dist/Components/Icons.js

@@ -1238,6 +1238,22 @@ export const icons = {
         box: 24,
         svg: `<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4338 3C17.7851 3 18.1106 3.1843 18.2913 3.4855L20.8575 7.76249C20.9507 7.9179 21 8.09574 21 8.27698V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V8.27698C3 8.09574 3.04926 7.9179 3.14251 7.76249L5.7087 3.4855C5.88942 3.1843 6.21493 3 6.56619 3H17.4338ZM14.5 5H17.2L19 8H15.5L14.5 5ZM12.5 5H11.5L10.5 8V13H13.5V8L12.5 5ZM9.5 5H6.8L5 8H8.5L9.5 5ZM8.5 10H5V19H19V10H15.5V14C15.5 14.5523 15.0523 15 14.5 15H9.5C8.94772 15 8.5 14.5523 8.5 14V10Z"/>`,
     },
+    doors: {
+        box: 24,
+        svg: `<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C19 4 22 8 22 8V9H20V20H4V9H2V8C2 8 5 4 12 4ZM12 6C8 6 6 8 6 8V18H8V13H11V18H13V13H16V18H18V8C18 8 16 6 12 6Z"/>`,
+    },
+    'door-groups': {
+        box: 24,
+        svg: `<path d="M13 21H11V13H5V21H3V11H13V21Z"/>
+						<path d="M17 17H15V9H9V10H7V7H17V17Z"/>
+						<path d="M21 13H19V5H13V6H11V3H21V13Z"/>`,
+    },
+    'door-schedule': {
+        box: 24,
+        svg: `<path d="M20 22H18V6H6V22H4V3H20V22Z"/>
+						<path d="M10.1465 10.8535C10.4615 10.5386 10.9999 10.7616 11 11.207V16.793C10.9999 17.2384 10.4615 17.4614 10.1465 17.1465L7.35352 14.3535C7.1583 14.1583 7.1583 13.8417 7.35352 13.6465L10.1465 10.8535Z"/>
+						<path d="M13 11.207C13.0001 10.7616 13.5385 10.5386 13.8535 10.8535L16.6465 13.6465C16.8417 13.8417 16.8417 14.1583 16.6465 14.3535L13.8535 17.1465C13.5385 17.4614 13.0001 17.2384 13 16.793V11.207Z"/>`,
+    },
 };
 Object.freeze(icons);
 Object.keys(icons).forEach((key) => {

package/dist/Components/TimeInputProps.d.ts

@@ -0,0 +1,51 @@
+import type { InputVariant } from '../Types/Internal/InputVariant.js';
+import type { InputTime } from '../Types/Internal/Misc.js';
+import type { PartialIconProps } from './PartialIconProps.js';
+/**
+ * Props for the `time` variant of {@link DateInput}.
+ *
+ * Renders a native `<input type="time">` with the same overlapping-label
+ * border chrome as the date/datetime variants. `value` is branded with
+ * {@link InputTime} (`HH:MM`); the empty string is a known sentinel that
+ * the consumer is expected to handle when binding.
+ */
+export interface TimeInputProps {
+    /** Discriminator. Must be the literal `'time'`. */
+    type: 'time';
+    /**
+     * Bindable time value (`HH:MM`). `''` or `null` represent "no time
+     * selected" — both are accepted because consumers commonly back the
+     * binding with a nullable field; the component treats them alike.
+     */
+    value?: InputTime | '' | null;
+    /** Label rendered above the input. */
+    label?: string;
+    /** Native `placeholder` attribute. */
+    placeholder?: string;
+    /** Native `required` attribute. */
+    required?: boolean;
+    /** Render the "- optional" suffix next to `label`. */
+    optional?: boolean;
+    /** Render variant. See {@link InputVariant}. */
+    variant?: InputVariant;
+    /** Native `min` constraint. */
+    min?: InputTime;
+    /** Native `max` constraint. */
+    max?: InputTime;
+    /** Native `disabled` attribute. */
+    disabled?: boolean;
+    /** Icon rendered on the left of the input. */
+    leftIcon?: PartialIconProps;
+    /** Icon rendered on the right of the input. */
+    rightIcon?: PartialIconProps;
+    /** Bindable reference to the underlying `<input>` element. */
+    inputRef?: HTMLInputElement;
+    /** Force the invalid visual state. */
+    invalid?: boolean;
+    /** Blur handler. */
+    onblur?: (e: FocusEvent) => void;
+    /** Focus handler. */
+    onfocus?: (e: FocusEvent) => void;
+    /** Change handler. May return `void` or `Promise<void>`. */
+    onchange?: (value: InputTime | null) => void | Promise<void>;
+}

package/dist/Components/TimeInputProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Types/Internal/Misc.d.ts

@@ -69,6 +69,8 @@ export type ScoriaStorageKey = BrandedString<'ScoriaStorageKey'>;
 export type InputDate = BrandedString<'InputDate'>;
 /** ISO date-time string of the form `YYYY-MM-DDTHH:MM:SS`. */
 export type InputDateWithTime = BrandedString<'InputDateWithTime'>;
+/** ISO time-only string of the form `HH:MM`. */
+export type InputTime = BrandedString<'InputTime'>;
 /** Date string formatted for the FloWMS SQL backend. */
 export type SQLDate = BrandedString<'SQLDate'>;
 /** Integer centimetre count. Used by dimension inputs. */

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export type { DateOnlyInputProps } from './Components/DateOnlyInputProps.js';
 export { default as DatePicker } from './Components/DatePicker.svelte';
 export { type DatePickerProps } from './Components/DatePickerProps.js';
 export type { DateTimeInputProps } from './Components/DateTimeInputProps.js';
+export type { TimeInputProps } from './Components/TimeInputProps.js';
 export { default as DesktopModal } from './Components/DesktopModal.svelte';
 export type { DesktopModalProps } from './Components/DesktopModalProps.js';
 export { default as Dial } from './Components/Dial.svelte';
@@ -210,7 +211,7 @@ export { type GridStringItem } from './Types/Internal/GridStringItem.js';
 export { type GridTextItem } from './Types/Internal/GridTextItem.js';
 export { type IdentifiableToastMessage } from './Types/Internal/IdentifiableToastMessage.js';
 export { InputVariant } from './Types/Internal/InputVariant.js';
-export { type BrandedInteger, type BrandedNumber, type BrandedString, type Centimetres, type CssLength, type InputDate, type InputDateWithTime, type NonNullableKey, type Pixels, type ScoriaStorageKey, type SQLDate, type Unsubscriber, type Uuid, type ValueProp, } from './Types/Internal/Misc.js';
+export { type BrandedInteger, type BrandedNumber, type BrandedString, type Centimetres, type CssLength, type InputDate, type InputDateWithTime, type InputTime, type NonNullableKey, type Pixels, type ScoriaStorageKey, type SQLDate, type Unsubscriber, type Uuid, type ValueProp, } from './Types/Internal/Misc.js';
 export { type RefWrapper } from './Types/Internal/RefWrapper.js';
 export { type SelectOption } from './Types/Internal/SelectOption.js';
 export { Shape } from './Types/Internal/Shape.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.40.18",
+  "version": "0.40.20",
   "publishConfig": {
     "access": "restricted"
   },