@eagami/ui 5.35.0 → 5.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.35.0",
+  "version": "5.36.0",
   "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/types/eagami-ui.d.ts

@@ -3995,15 +3995,25 @@ interface ParsedTime {
  * configurable steps for minutes and seconds, optional seconds column, and
  * integrates with Angular forms via `ControlValueAccessor`.
  *
- * Keyboard: Tab moves between the hour, minute, (seconds), and AM/PM columns.
- * Each spinner accepts ArrowUp/ArrowDown to step by 1 (or by the configured
- * step), PageUp/PageDown for a coarser bump, and digit keys to type a value
+ * The field itself is a text input: a time can be typed by hand and is read
+ * leniently on Enter or blur. Bare digits are a 24-hour clock ("5" is 05:00,
+ * "1234" is 12:34, "123456" adds seconds), `:`, `.`, `h`, and spaces all
+ * separate units ("17h30", "12.34"), and an AM/PM suffix reads the hour on
+ * the 12-hour clock ("5pm" is 17:00). Text that parses to no time is
+ * discarded and the field falls back to the current value; clearing the text
+ * clears the value.
+ *
+ * Keyboard: ArrowDown opens the popover and moves into the hour column. Tab
+ * moves between the hour, minute, (seconds), and AM/PM columns. Each spinner
+ * accepts ArrowUp/ArrowDown to step by 1 (or by the configured step),
+ * PageUp/PageDown for a coarser bump, and digit keys to type a value
  * directly. After typing two digits (or one digit that already maxes the
  * unit), focus auto-advances to the next column. Backspace clears the typed
  * buffer; Escape closes the popover.
  */
 declare class TimePickerComponent implements ControlValueAccessor {
-    protected readonly triggerEl: _angular_core.Signal<ElementRef<HTMLButtonElement> | undefined>;
+    protected readonly triggerEl: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    protected readonly inputEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     protected readonly hoursEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     protected readonly minutesEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     protected readonly secondsEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
@@ -4032,6 +4042,8 @@ declare class TimePickerComponent implements ControlValueAccessor {
     /** Fires with the new value whenever the user changes the time. */
     readonly changed: _angular_core.OutputEmitterRef<string | null>;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
+    /** Raw text under edit in the field, or `null` while it mirrors the value. */
+    readonly typedText: _angular_core.WritableSignal<string | null>;
     /** Typed-digit buffer for the currently focused column, or `null` when idle. */
     readonly editBuffer: _angular_core.WritableSignal<{
         unit: Unit;
@@ -4070,13 +4082,14 @@ declare class TimePickerComponent implements ControlValueAccessor {
     /** Localized text shown on the trigger. Falls back to placeholder when no value. */
     readonly displayValue: _angular_core.Signal<string | null>;
     readonly resolvedPlaceholder: _angular_core.Signal<string>;
+    /** What the field's input shows: the text mid-edit, else the formatted value. */
+    readonly triggerText: _angular_core.Signal<string>;
     readonly triggerClasses: _angular_core.Signal<{
         [x: string]: boolean;
         'ea-time-picker__trigger--error': boolean;
         'ea-time-picker__trigger--open': boolean;
         'ea-time-picker__trigger--disabled': boolean;
         'ea-time-picker__trigger--readonly': boolean;
-        'ea-time-picker__trigger--placeholder': boolean;
     }>;
     readonly wrapperClasses: _angular_core.Signal<{
         [x: string]: boolean;
@@ -4089,7 +4102,12 @@ declare class TimePickerComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     constructor();
-    toggle(): void;
+    /**
+     * A click anywhere on the field opens the popover and leaves the focus in
+     * the input, so the caret lands where it was aimed and typing can start
+     * straight away. A click while open only moves the caret.
+     */
+    onTriggerClick(): void;
     /**
      * Push focus into the hours input once the popover surface has been
      * rendered. `afterNextRender` guarantees the DOM has been updated (and the
@@ -4101,6 +4119,14 @@ declare class TimePickerComponent implements ControlValueAccessor {
     onPopoverCloseRequested(): void;
     clear(event: Event): void;
     handleTriggerKeydown(event: KeyboardEvent): void;
+    onTriggerInput(event: Event): void;
+    onTriggerBlur(): void;
+    /**
+     * Reads the hand-typed text and commits what it says: a time updates the
+     * value, emptied text clears it, and anything unreadable is dropped so the
+     * field falls back to the value it already shows.
+     */
+    private commitTyped;
     /** Stepper button or keyboard arrow nudges one column up or down. */
     step(unit: Unit, direction: 1 | -1): void;
     /**
@@ -4122,7 +4148,7 @@ declare class TimePickerComponent implements ControlValueAccessor {
     /** Switches the AM/PM period in 12h mode by toggling the 12-hour offset. */
     togglePeriod(): void;
     handlePopoverKeydown(event: KeyboardEvent, unit: Unit): void;
-    /** Escape from anywhere inside the popover closes it and refocuses the trigger. */
+    /** Escape from anywhere inside the popover closes it and refocuses the field. */
     onPopoverEscape(event: Event): void;
     /** Select-all on focus so the first keystroke replaces the current value. */
     onSpinnerFocus(event: FocusEvent): void;