@eagami/ui 5.12.2 → 5.13.0

package/package.json

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

@@ -168,6 +168,7 @@ interface EagamiMessages {
         range: (start: string, end: string, total: string) => string;
         previousPage: string;
         nextPage: string;
+        page: (page: string) => string;
     };
     progressBar: {
         label: string;
@@ -220,6 +221,7 @@ interface EagamiMessages {
         moveSelectedToSource: string;
         moveAllToSource: string;
         empty: string;
+        moved: (count: string, listLabel: string) => string;
     };
     validation: {
         required: string;
@@ -1429,6 +1431,10 @@ declare class DataTableComponent<T = Record<string, unknown>> {
     private static readonly PAGE_JUMP;
     readonly columns: _angular_core.InputSignal<DataTableColumn<T>[]>;
     readonly data: _angular_core.InputSignal<T[]>;
+    /** Accessible name for the table, announced when it takes focus as a grid. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Visible caption rendered above the table; also names it for assistive technology. */
+    readonly caption: _angular_core.InputSignal<string | undefined>;
     readonly trackBy: _angular_core.InputSignal<keyof T | undefined>;
     readonly density: _angular_core.InputSignal<DataTableDensity>;
     /** Visual size of the table; density paddings and icons scale with it. */
@@ -1473,7 +1479,7 @@ declare class DataTableComponent<T = Record<string, unknown>> {
     onGridKeydown(event: KeyboardEvent): void;
     private focusCell;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTableComponent<any>, "ea-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "noDataText": { "alias": "noDataText"; "required": false; "isSignal": true; }; "navigable": { "alias": "navigable"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; }, { "sort": "sortChange"; "sorted": "sorted"; "rowActivate": "rowActivate"; }, ["noDataTemplate"], ["ea-paginator"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTableComponent<any>, "ea-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "noDataText": { "alias": "noDataText"; "required": false; "isSignal": true; }; "navigable": { "alias": "navigable"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; }, { "sort": "sortChange"; "sorted": "sorted"; "rowActivate": "rowActivate"; }, ["noDataTemplate"], ["ea-paginator"], true, never>;
 }
 
 /** Visual size of each digit cell. */
@@ -2150,6 +2156,8 @@ declare class InputComponent implements ControlValueAccessor {
     protected readonly i18n: EagamiI18nService;
     /** Text label rendered above the field. */
     readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Accessible name for the control when no visible `label` is set. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     /** Native input type; `password` adds a built-in show/hide toggle. */
     readonly type: _angular_core.InputSignal<InputType>;
     /** Placeholder shown while the field is empty. */
@@ -2242,7 +2250,7 @@ declare class InputComponent implements ControlValueAccessor {
     /** Moves keyboard focus to the underlying native input element. */
     focus(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "ea-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "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; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "list": { "alias": "list"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "showPasswordToggle": { "alias": "showPasswordToggle"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "focused": "focused"; "blurred": "blurred"; }, never, ["[slot=prefix]", "[slot=suffix]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "ea-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "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; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "list": { "alias": "list"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "showPasswordToggle": { "alias": "showPasswordToggle"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "focused": "focused"; "blurred": "blurred"; }, never, ["[slot=prefix]", "[slot=suffix]"], true, never>;
 }
 
 /** Placement of the menu list relative to its trigger. */
@@ -2338,7 +2346,9 @@ declare class MenuItemComponent {
  */
 declare class MenuTriggerDirective {
     private readonly el;
+    private readonly renderer;
     readonly menu: _angular_core.InputSignal<MenuComponent>;
+    constructor();
     handleClick(): void;
     handleKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuTriggerDirective, never>;
@@ -3420,6 +3430,12 @@ declare class TagComponent {
     readonly removable: _angular_core.InputSignal<boolean>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly removeLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the remove button is a tab stop. Set `false` inside a composite
+     * widget (a combobox trigger, a grid cell) whose own keyboard model owns
+     * navigation, since roles like `combobox` forbid focusable descendants.
+     */
+    readonly removeTabbable: _angular_core.InputSignal<boolean>;
     /** Fires when the user activates the remove button on a `removable` tag. */
     readonly removed: _angular_core.OutputEmitterRef<void>;
     /** Accessible label for the remove button, falling back to the active locale. */
@@ -3430,7 +3446,7 @@ declare class TagComponent {
     }>;
     onRemove(event: MouseEvent): void;
     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; }; }, { "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; }; "removeTabbable": { "alias": "removeTabbable"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
 }
 
 /** Visual size of the textarea. */
@@ -3445,6 +3461,8 @@ type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 declare class TextareaComponent implements ControlValueAccessor {
     readonly textareaEl: _angular_core.Signal<ElementRef<HTMLTextAreaElement> | undefined>;
     readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Accessible name for the control when no visible `label` is set. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<EaSize>;
     readonly hint: _angular_core.InputSignal<string | undefined>;
@@ -3496,7 +3514,7 @@ declare class TextareaComponent implements ControlValueAccessor {
     /** Moves keyboard focus to the underlying native textarea element. */
     focus(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextareaComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "ea-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "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; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "ea-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "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; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
 }
 
 /** Visual size of the time picker trigger. */
@@ -3916,6 +3934,7 @@ declare class TransferListComponent {
     protected readonly canMoveAllLeft: _angular_core.Signal<boolean>;
     protected readonly resolvedSourceLabel: _angular_core.Signal<string>;
     protected readonly resolvedTargetLabel: _angular_core.Signal<string>;
+    protected readonly announcement: _angular_core.WritableSignal<string>;
     protected readonly hostClasses: _angular_core.Signal<string[]>;
     protected isHighlighted(pane: 'source' | 'target', id: string): boolean;
     protected itemTabindex(pane: 'source' | 'target', index: number, item: TransferListItem): number;
@@ -3931,6 +3950,7 @@ declare class TransferListComponent {
     protected moveAllRight(): void;
     protected moveSelectedLeft(): void;
     protected moveAllLeft(): void;
+    private announceMove;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TransferListComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TransferListComponent, "ea-transfer-list", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "selectedIds": { "alias": "selectedIds"; "required": false; "isSignal": true; }; "sourceLabel": { "alias": "sourceLabel"; "required": false; "isSignal": true; }; "targetLabel": { "alias": "targetLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "selectedIds": "selectedIdsChange"; }, never, never, true, never>;
 }