@acorex/components 22.1.0-next.10 → 22.1.0-next.11

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@acorex/components",
-  "version": "22.1.0-next.10",
+  "version": "22.1.0-next.11",
   "peerDependencies": {
-    "@acorex/core": "22.1.0-next.10",
-    "@acorex/cdk": "22.1.0-next.10",
+    "@acorex/core": "22.1.0-next.11",
+    "@acorex/cdk": "22.1.0-next.11",
     "@angular/aria": ">=22.1.0",
     "polytype": ">=0.17.0",
     "angular-imask": ">=7.6.1",

package/types/acorex-components-combo-box.d.ts

@@ -2,6 +2,7 @@ import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
 import { NXValueComponent, AXStyleLookType, AXValueChangedEvent, AXFocusEvent, AXItemClickEvent, AXItemSelectedEvent, AXEvent } from '@acorex/cdk/common';
 import { AXPopoverComponent } from '@acorex/components/popover';
+import { AXSearchBoxComponent } from '@acorex/components/search-box';
 import { Combobox } from '@angular/aria/combobox';
 import { Listbox } from '@angular/aria/listbox';
 import { FormValueControl } from '@angular/forms/signals';
@@ -28,7 +29,8 @@ type AXComboBoxValue = string | number | (string | number)[] | null;
  * A minimal combo box for selecting one or more values from a list of items.
  *
  * Built on top of the `@angular/aria/combobox` directives, it supports two behaviors:
- * - `searchable="true"` (default): an input with typeahead filtering (matches `id`).
+ * - `searchable="true"` (default): an input with typeahead filtering (matches `id`). On small
+ *   screens with `adaptivityEnabled`, the trigger is select-like and search moves into the actionsheet.
  * - `searchable="false"`: a select-like, non-editable trigger (same input; typing blocked without
  *   Combobox `readonly`, so Tab focus and keyboard open/select keep working).
  *
@@ -58,6 +60,7 @@ declare class AXComboBoxComponent extends NXValueComponent implements FormValueC
     /**
      * Whether the combo box accepts typing and filters the list (`true`),
      * or is a select-like, non-editable trigger (`false`).
+     * On small screens with `adaptivityEnabled`, search is typed in the actionsheet instead of the trigger.
      */
     searchable: _angular_core.InputSignal<boolean>;
     /**
@@ -67,7 +70,8 @@ declare class AXComboBoxComponent extends NXValueComponent implements FormValueC
     multiple: _angular_core.InputSignal<boolean>;
     /**
      * When `true` (default), the popup list uses the alternate actionsheet presentation on small
-     * screens (`SM`). When `false`, the list always opens as an anchored dropdown.
+     * screens (`SM`). Searchable mode then shows a search field inside the sheet. When `false`,
+     * the list always opens as an anchored dropdown.
      */
     adaptivityEnabled: _angular_core.InputSignal<boolean>;
     /**
@@ -83,8 +87,9 @@ declare class AXComboBoxComponent extends NXValueComponent implements FormValueC
      */
     placeholder: _angular_core.InputSignal<string>;
     /**
-     * Placeholder for the trigger search input when items are already selected (multi-select).
-     * Falls back to `placeholder` when the selection is empty.
+     * Placeholder for the trigger search input when items are already selected (multi-select),
+     * and for the in-sheet search field on small screens. Falls back to `placeholder` when the
+     * selection is empty on desktop.
      */
     searchPlaceholder: _angular_core.InputSignal<string>;
     /**
@@ -154,6 +159,12 @@ declare class AXComboBoxComponent extends NXValueComponent implements FormValueC
     protected expanded: _angular_core.WritableSignal<boolean>;
     /** Whether the list is currently shown as a bottom actionsheet (small screens + adaptivity). */
     protected isActionsheetStyle: _angular_core.WritableSignal<boolean>;
+    /** Whether the trigger input is writable and filters as you type (desktop searchable only). */
+    protected isEditableTrigger: _angular_core.Signal<boolean>;
+    /** Whether search is typed in the actionsheet instead of the trigger. */
+    protected isSheetSearchEnabled: _angular_core.Signal<boolean>;
+    /** Query typed in the actionsheet search field (independent of the trigger display text). */
+    protected sheetSearchText: _angular_core.WritableSignal<string>;
     /** The current selection normalized to an array of submitted values. */
     protected selectedValues: _angular_core.Signal<(string | number)[]>;
     /** Whether there is at least one selected value. */
@@ -177,9 +188,12 @@ declare class AXComboBoxComponent extends NXValueComponent implements FormValueC
     protected selection: _angular_core.WritableSignal<string[]>;
     /** Items filtered by typed query against `id` when the combo box is searchable. */
     protected filteredItems: _angular_core.Signal<AXComboBoxItem[]>;
+    /** Whether the filtered list is empty (empty-state vs hidden listbox). */
+    protected hasNoMatches: _angular_core.Signal<boolean>;
     protected comboboxRef: _angular_core.Signal<Combobox>;
     protected listboxRef: _angular_core.Signal<Listbox<any>>;
     protected popoverRef: _angular_core.Signal<AXPopoverComponent>;
+    protected sheetSearchRef: _angular_core.Signal<AXSearchBoxComponent>;
     constructor();
     /** Stable unique key for `@for` — avoids NG0955 when `id` is missing or duplicated. */
     protected trackItemKey(index: number, item: AXComboBoxItem): string;
@@ -195,8 +209,16 @@ declare class AXComboBoxComponent extends NXValueComponent implements FormValueC
      * - Multi-select: Backspace removes the last chip when the search input is empty.
      */
     protected onTriggerKeydown(event: KeyboardEvent): void;
-    /** Blocks typing in non-searchable mode without Combobox `readonly` (keeps Tab/keyboard working). */
+    /** Blocks typing when the trigger is not editable (keeps Tab / keyboard open working). */
     protected onBeforeInput(event: Event): void;
+    /**
+     * Combobox `expanded` two-way binding. On actionsheet with in-sheet search, ignore collapse
+     * so focusing the search field (Aria combobox blur) does not close the popup. Dismiss is owned
+     * by the popover (`clickOut`, close button), `commit()`, and Escape.
+     */
+    protected onExpandedChange(open: boolean): void;
+    /** Filters the list from the actionsheet search field (reads the input so delayed ngModel cannot block typing). */
+    protected onSheetSearchInput(): void;
     /**
      * Keeps the combobox expanded state in sync when the popover closes (e.g. click outside).
      */

package/types/acorex-components-lookup.d.ts

@@ -2,6 +2,7 @@ import * as _angular_core from '@angular/core';
 import { TemplateRef, ElementRef } from '@angular/core';
 import { AXEvent, AXDataSource, AXListDataSource, AXHtmlEvent, NXValueComponent, AXStyleLookType, AXValueChangedEvent, AXFocusEvent, AXItemClickEvent, AXItemSelectedEvent } from '@acorex/cdk/common';
 import { AXPopoverComponent } from '@acorex/components/popover';
+import { AXSearchBoxComponent } from '@acorex/components/search-box';
 import { AXTreeViewNode, AXTreeViewDataSource, AXTreeViewSelectionBehavior, AXTreeViewItemTemplateContext, AXTreeViewSelectionChangeEvent } from '@acorex/components/tree-view';
 import { FormValueControl } from '@angular/forms/signals';
 import { AXListNavigationDirective, AXListNavigationItemDirective } from '@acorex/cdk/list-navigation';
@@ -200,7 +201,8 @@ declare class AXLookupMultiSelectTreeComponent {
  * - `multi-select` — a predefined list of options for multiple item selection (chips in the trigger).
  * - `drop-down-tree` — a predefined list rendered in a tree-like structure for single item selection.
  * - `multi-select-tree` — a tree-like structure for multiple item selection.
- * - `multi-column` — an `ax-data-table` grid; when searchable, the trigger input filters as you type.
+ * - `multi-column` — an `ax-data-table` grid; when searchable, the trigger input filters as you type
+ *   (on small screens the search field is inside the actionsheet).
  *
  * With `adaptivityEnabled` (default `true`), the list opens as a bottom actionsheet on small
  * screens instead of an anchored dropdown — the same alternate presentation as `ax-select-box`.
@@ -251,11 +253,13 @@ declare class AXLookupComponent extends NXValueComponent implements FormValueCon
      * Whether the trigger accepts typing and filters the datasource (`true`),
      * or is select-only with no writable input (`false`).
      * Applies to `drop-down-list`, `multi-select`, and `multi-column`. Tree modes ignore this.
+     * On small screens with `adaptivityEnabled`, search is typed in the actionsheet instead of the trigger.
      */
     searchable: _angular_core.InputSignal<boolean>;
     /**
      * When `true` (default), the popup list uses the alternate actionsheet presentation on small
-     * screens (`SM`). When `false`, the list always opens as an anchored dropdown.
+     * screens (`SM`). Searchable list modes then show a search field inside the sheet. When `false`,
+     * the list always opens as an anchored dropdown.
      */
     adaptivityEnabled: _angular_core.InputSignal<boolean>;
     /**
@@ -269,7 +273,8 @@ declare class AXLookupComponent extends NXValueComponent implements FormValueCon
     alternate: _angular_core.InputSignal<boolean>;
     /**
      * Placeholder for the trigger search input when items are already selected
-     * (mainly useful in `multi-select`). Falls back to `placeholder` when the selection is empty.
+     * (mainly useful in `multi-select`), and for the in-sheet search field on small screens.
+     * Falls back to `placeholder` when the selection is empty on desktop.
      */
     searchPlaceholder: _angular_core.InputSignal<string>;
     /**
@@ -368,8 +373,14 @@ declare class AXLookupComponent extends NXValueComponent implements FormValueCon
     protected isMultiple: _angular_core.Signal<boolean>;
     /** Whether the current mode renders a tree. */
     protected isTreeMode: _angular_core.Signal<boolean>;
-    /** Whether the trigger input is writable and filters as you type. */
+    /** Whether the current mode can filter a flat list as you type. */
+    protected isListSearchMode: _angular_core.Signal<boolean>;
+    /** Whether the trigger input is writable and filters as you type (desktop only). */
     protected isEditableTrigger: _angular_core.Signal<boolean>;
+    /** Whether search is typed in the actionsheet instead of the trigger. */
+    protected isSheetSearchEnabled: _angular_core.Signal<boolean>;
+    /** Query typed in the actionsheet search field (independent of the trigger display text). */
+    protected sheetSearchText: _angular_core.WritableSignal<string>;
     /** The datasource for list-based modes; plain arrays are converted. */
     protected resolvedDataSource: _angular_core.Signal<AXDataSource<AXLookupItem>>;
     /** The current selection normalized to an array. */
@@ -389,9 +400,12 @@ declare class AXLookupComponent extends NXValueComponent implements FormValueCon
      * the selected display text (same pattern as combo-box).
      */
     protected showSelectedTemplate: _angular_core.Signal<boolean>;
+    /** Placeholder for the editable trigger search input. */
+    protected triggerSearchPlaceholder: _angular_core.Signal<string>;
     protected popoverRef: _angular_core.Signal<AXPopoverComponent>;
     protected triggerSearchInput: _angular_core.Signal<ElementRef<HTMLInputElement>>;
     protected listView: _angular_core.Signal<AXLookupListViewBase>;
+    protected sheetSearchRef: _angular_core.Signal<AXSearchBoxComponent>;
     constructor();
     /** Returns the display text of an item using the `textField` mapping. */
     protected getItemText(item: AXLookupItem): string;
@@ -412,7 +426,7 @@ declare class AXLookupComponent extends NXValueComponent implements FormValueCon
     /** Blocks typing when the trigger is not editable (keeps Tab / keyboard open working). */
     protected onBeforeInput(event: Event): void;
     /**
-     * Returns focus to the trigger input when list navigation requests it.
+     * Returns focus to the search field when list navigation requests it.
      */
     protected onListNavigateOut(_reason: 'up' | 'typeahead'): void;
     protected focusListFirst(): void;
@@ -437,8 +451,8 @@ declare class AXLookupComponent extends NXValueComponent implements FormValueCon
      * Handles typing in the editable trigger input.
      */
     protected onTriggerSearchInput(text: string): void;
-    /** Placeholder for the editable trigger search input. */
-    protected triggerSearchPlaceholder: _angular_core.Signal<string>;
+    /** Filters the datasource from the actionsheet search field (reads the input so delayed ngModel cannot block typing). */
+    protected onSheetSearchInput(): void;
     /**
      * Commits a single pick (drop-down-list, drop-down-tree, multi-column) and closes the popup.
      */