@eagami/ui 5.34.0 → 5.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.34.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

@@ -979,11 +979,13 @@ declare class BadgeComponent {
     readonly variant: _angular_core.InputSignal<BadgeVariant>;
     readonly size: _angular_core.InputSignal<BadgeSize>;
     readonly shape: _angular_core.InputSignal<BadgeShape>;
+    readonly uppercase: _angular_core.InputSignal<boolean>;
     readonly hostClasses: _angular_core.Signal<{
         [x: string]: boolean;
+        'ea-badge--uppercase': boolean;
     }>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "ea-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "ea-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "uppercase": { "alias": "uppercase"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** Visual style of the separator rendered between breadcrumb items. */
@@ -1034,8 +1036,9 @@ type ButtonType = 'button' | 'submit' | 'reset';
  * Standard action button supporting primary, secondary, ghost, and danger
  * variants. Includes a loading state that swaps the label for a spinner while
  * preserving the rendered width. Chrome is tunable per instance via
- * `--ea-button-padding` and `--ea-button-min-height`, which is how an
- * icon-only button comes down to little more than its glyph.
+ * `--ea-button-padding`, `--ea-button-min-height` and `--ea-button-radius`,
+ * which is how an icon-only button comes down to little more than its glyph
+ * and how a call-to-action becomes a pill.
  */
 declare class ButtonComponent {
     readonly variant: _angular_core.InputSignal<ButtonVariant>;
@@ -1044,6 +1047,7 @@ declare class ButtonComponent {
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly loading: _angular_core.InputSignal<boolean>;
     readonly fullWidth: _angular_core.InputSignal<boolean>;
+    readonly uppercase: _angular_core.InputSignal<boolean>;
     /** Optional icon component rendered to the left of the label. */
     readonly icon: _angular_core.InputSignal<Type<unknown> | undefined>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
@@ -1054,12 +1058,13 @@ declare class ButtonComponent {
     readonly hostClasses: _angular_core.Signal<{
         [x: string]: boolean;
         'ea-button--full-width': boolean;
+        'ea-button--uppercase': boolean;
         'ea-button--loading': boolean;
         'ea-button--disabled': boolean;
     }>;
     handleClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "ea-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaCurrent": { "alias": "aria-current"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["[slot=prefix]", "*", "[slot=suffix]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "ea-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "uppercase": { "alias": "uppercase"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaCurrent": { "alias": "aria-current"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["[slot=prefix]", "*", "[slot=suffix]"], true, never>;
 }
 
 /** Visual style of a card surface. */
@@ -3872,6 +3877,7 @@ declare class TagComponent {
      * navigation, since roles like `combobox` forbid focusable descendants.
      */
     readonly removeTabbable: _angular_core.InputSignal<boolean>;
+    readonly uppercase: _angular_core.InputSignal<boolean>;
     /** Fires when the user activates the remove button on a `removable` tag. */
     readonly removed: _angular_core.OutputEmitterRef<void>;
     /** Full label text, held only while the rendered label is clipped. */
@@ -3884,6 +3890,7 @@ declare class TagComponent {
     readonly hostClasses: _angular_core.Signal<{
         [x: string]: boolean;
         'ea-tag--disabled': boolean;
+        'ea-tag--uppercase': boolean;
     }>;
     /** `maxWidth` as a CSS length; a bare number is px, as the input documents. */
     protected readonly resolvedMaxWidth: _angular_core.Signal<string | null>;
@@ -3899,7 +3906,7 @@ declare class TagComponent {
      */
     private watchLabel;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "ea-tag", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "removeTabbable": { "alias": "removeTabbable"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "ea-tag", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "removeTabbable": { "alias": "removeTabbable"; "required": false; "isSignal": true; }; "uppercase": { "alias": "uppercase"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
 }
 
 /** Visual size of the textarea. */
@@ -3988,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>;
@@ -4025,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;
@@ -4063,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;
@@ -4082,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
@@ -4094,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;
     /**
@@ -4115,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;