@eagami/ui 5.20.0 → 5.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.20.0",
+  "version": "5.21.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/src/styles/_mixins.scss

@@ -30,6 +30,46 @@ $target-size-min: 24px;
   }
 }
 
+// A readonly field takes no input, so it offers a pointer nothing: no ring on
+// click, no icon hover, no pointer cursor. Keyboard focus still has to be
+// visible, so the border alone picks up the focus colour, without the halo.
+@mixin readonly-focus-cue {
+  border-color: var(--color-border-focus);
+  box-shadow: none;
+
+  // Border colour is unreliable in forced-colors, so the ring's outline stands
+  // in there, matching what `focus-ring` paints for an editable field
+  @media (forced-colors: active) {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}
+
+@mixin readonly-field {
+  &:has(:focus-visible) {
+    @include readonly-focus-cue;
+  }
+
+  button {
+    cursor: default;
+
+    &:hover {
+      background-color: transparent;
+      color: var(--color-text-secondary);
+    }
+  }
+}
+
+// `readonly-field` for a control whose root is the focusable element itself: it
+// keeps the quiet keyboard cue but stops offering to be pressed or typed into.
+@mixin readonly-control {
+  cursor: default;
+
+  &:focus-visible {
+    @include readonly-focus-cue;
+  }
+}
+
 // Hides an element visually while keeping it in the accessibility tree, so
 // screen readers still announce it. The clip pattern is used instead of
 // `display: none` or `visibility: hidden`, which would remove it entirely.

package/types/eagami-ui.d.ts

@@ -733,6 +733,7 @@ declare class AutocompleteComponent implements ControlValueAccessor {
         [x: string]: boolean;
         'ea-autocomplete__wrapper--error': boolean;
         'ea-autocomplete__wrapper--focused': boolean;
+        'ea-autocomplete__wrapper--readonly': boolean;
         'ea-autocomplete__wrapper--disabled': boolean;
     }>;
     readonly listboxClasses: _angular_core.Signal<{
@@ -1333,6 +1334,7 @@ declare class ColorPickerComponent implements ControlValueAccessor {
         'ea-color-picker__trigger--error': boolean;
         'ea-color-picker__trigger--open': boolean;
         'ea-color-picker__trigger--disabled': boolean;
+        'ea-color-picker__trigger--readonly': boolean;
     }>;
     readonly wrapperClasses: _angular_core.Signal<{
         [x: string]: boolean;
@@ -1557,7 +1559,7 @@ declare class CodeInputComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CodeInputComponent, "ea-code-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "errorMessages": { "alias": "errorMessages"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "allowAllChars": { "alias": "allowAllChars"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
 }
 
-/** Visual size of the date picker trigger. */
+/** Visual size of the date picker field. */
 type DatePickerSize = EaSize;
 /** Locale-aware date format used for the displayed value. */
 type DatePickerFormat = 'short' | 'medium' | 'long';
@@ -1575,17 +1577,21 @@ interface CalendarDay {
     isFocused: boolean;
 }
 /**
- * Calendar popover for selecting a single date. Supports `min`/`max` bounds,
- * configurable week start, locale-aware formatting via `Intl.DateTimeFormat`,
- * and full keyboard navigation (arrows, PageUp/PageDown, Home/End, Enter,
- * Escape). Integrates with Angular forms via `ControlValueAccessor`.
+ * Date field with a calendar popover. The date can be typed straight into the
+ * field in any reasonable shape (ISO, all-numeric in the locale's field order,
+ * or with a month name) and is rewritten in the configured `format` on commit.
+ * Supports `min`/`max` bounds, configurable week start, locale-aware formatting
+ * via `Intl.DateTimeFormat`, and full keyboard navigation (arrows,
+ * PageUp/PageDown, Home/End, Enter, Escape). Integrates with Angular forms via
+ * `ControlValueAccessor`.
  */
 declare class DatePickerComponent implements ControlValueAccessor {
-    protected readonly triggerEl: _angular_core.Signal<ElementRef<HTMLButtonElement> | undefined>;
+    protected readonly fieldEl: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    protected readonly inputEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     private readonly injector;
     protected readonly i18n: EagamiI18nService;
     readonly label: _angular_core.InputSignal<string | undefined>;
-    /** Placeholder shown when no date is selected. Defaults to the active locale's text. */
+    /** Placeholder shown in the field when no date is selected. */
     readonly placeholder: _angular_core.InputSignal<string | undefined>;
     readonly size: _angular_core.InputSignal<EaSize>;
     readonly disabled: _angular_core.InputSignal<boolean>;
@@ -1609,6 +1615,9 @@ declare class DatePickerComponent implements ControlValueAccessor {
     readonly viewMonth: _angular_core.WritableSignal<number>;
     readonly focusedDate: _angular_core.WritableSignal<Date | null>;
     private readonly _formDisabled;
+    private readonly isFocused;
+    /** Entry in progress, held verbatim until it is committed or abandoned. */
+    private readonly draft;
     private onChange;
     private onTouched;
     readonly isDisabled: _angular_core.Signal<boolean>;
@@ -1628,23 +1637,23 @@ declare class DatePickerComponent implements ControlValueAccessor {
      *  Some browsers ship a reduced ICU that silently falls back to English for
      *  less common locales, so a matching request is not a given. */
     private readonly intlLocalizesEffectiveLocale;
-    /** Placeholder text: explicit `placeholder` input, else the active locale's default. */
+    /** Placeholder text, empty unless a `placeholder` is given. */
     readonly resolvedPlaceholder: _angular_core.Signal<string>;
+    /** Accessible name when no `label` is given. */
+    protected readonly fallbackLabel: _angular_core.Signal<string>;
     readonly dialogId: _angular_core.Signal<string>;
-    readonly triggerLabelledBy: _angular_core.Signal<string | null>;
-    readonly triggerClasses: _angular_core.Signal<{
-        [x: string]: boolean;
-        'ea-date-picker__trigger--error': boolean;
-        'ea-date-picker__trigger--open': boolean;
-        'ea-date-picker__trigger--disabled': boolean;
-    }>;
-    readonly wrapperClasses: _angular_core.Signal<{
-        [x: string]: boolean;
+    readonly fieldClasses: _angular_core.Signal<{
+        'ea-date-picker__field--focused': boolean;
+        'ea-date-picker__field--error': boolean;
+        'ea-date-picker__field--disabled': boolean;
+        'ea-date-picker__field--readonly': boolean;
     }>;
     readonly popoverClasses: _angular_core.Signal<{
         [x: string]: boolean;
     }>;
     readonly displayValue: _angular_core.Signal<string>;
+    /** Field text: the entry in progress while typing, else the formatted value. */
+    readonly inputText: _angular_core.Signal<string>;
     readonly monthYearLabel: _angular_core.Signal<string>;
     readonly weekdayLabels: _angular_core.Signal<string[]>;
     readonly weeks: _angular_core.Signal<CalendarDay[][]>;
@@ -1659,7 +1668,7 @@ declare class DatePickerComponent implements ControlValueAccessor {
     /** Closes the calendar popover. */
     close(): void;
     private focusFocusedDayCell;
-    /** Moves keyboard focus to the trigger button. */
+    /** Moves keyboard focus to the date field. */
     focus(): void;
     selectDay(day: CalendarDay): void;
     /** Clears the selected date and emits `changed` with `null`. */
@@ -1676,7 +1685,13 @@ declare class DatePickerComponent implements ControlValueAccessor {
      */
     private pullFocusIntoView;
     goToToday(): void;
-    handleTriggerKeydown(event: KeyboardEvent): void;
+    protected onInput(event: Event): void;
+    protected onInputFocus(): void;
+    protected onInputBlur(): void;
+    protected handleInputKeydown(event: KeyboardEvent): void;
+    private commitDraft;
+    private applyValue;
+    private isOutOfRange;
     handleGridKeydown(event: KeyboardEvent): void;
     /** Called by `<ea-popover>` when the user clicks outside the picker. */
     onPopoverCloseRequested(): void;
@@ -1901,6 +1916,7 @@ declare class DropdownComponent implements ControlValueAccessor {
         'ea-dropdown__trigger--error': boolean;
         'ea-dropdown__trigger--open': boolean;
         'ea-dropdown__trigger--disabled': boolean;
+        'ea-dropdown__trigger--readonly': boolean;
     }>;
     readonly menuClasses: _angular_core.Signal<{
         [x: string]: boolean;
@@ -2461,6 +2477,7 @@ declare class MultiSelectComponent implements ControlValueAccessor {
         'ea-multi-select__trigger--error': boolean;
         'ea-multi-select__trigger--open': boolean;
         'ea-multi-select__trigger--disabled': boolean;
+        'ea-multi-select__trigger--readonly': boolean;
         'ea-multi-select__trigger--placeholder': boolean;
     }>;
     readonly menuClasses: _angular_core.Signal<{
@@ -3643,6 +3660,7 @@ declare class TimePickerComponent implements ControlValueAccessor {
         '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<{
@@ -3777,6 +3795,8 @@ type ToastVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
 interface Toast {
     id: number;
     message: string;
+    /** Heading shown above the message; the message steps back when set. */
+    title?: string;
     variant: ToastVariant;
     duration: number;
     /** Icon component rendered in place of the variant's own; `null` renders none. */
@@ -3784,6 +3804,8 @@ interface Toast {
 }
 /** Optional configuration for a toast; defaults to `default` variant and 4s duration. */
 interface ToastOptions {
+    /** Heading shown above the message; the message steps back when set. */
+    title?: string;
     variant?: ToastVariant;
     duration?: number;
     /** Any icon component to render in place of the variant's own; `null` for no icon. */