@acorex/components 22.1.0-next.0 → 22.1.0-next.2

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

@@ -1,9 +1,12 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef, ElementRef } from '@angular/core';
-import { AXEvent, NXComponent, AXDataSource, AXStyleLookType, AXValueChangedEvent, AXListDataSource } from '@acorex/cdk/common';
+import { AXEvent, AXDataSource, AXListDataSource, AXHtmlEvent, NXComponent, AXStyleLookType, AXValueChangedEvent, AXFocusEvent, AXItemClickEvent, AXItemSelectedEvent } from '@acorex/cdk/common';
 import { AXPopoverComponent } from '@acorex/components/popover';
 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';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { AXDataTableComponent, AXDataTableRowClick } from '@acorex/components/data-table';
 
 /**
  * The lookup rendering mode. Each mode is rendered by its own internal mini component:
@@ -16,11 +19,11 @@ import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
  */
 type AXLookupMode = 'drop-down-list' | 'multi-select' | 'drop-down-tree' | 'multi-select-tree' | 'multi-column';
 /**
- * A column definition for the `multi-column` lookup mode.
+ * A column definition for the `multi-column` lookup mode (rendered via `ax-data-table`).
  *
- * - `field` — the item property rendered in this column.
- * - `title` — the header text of the column.
- * - `width` — optional CSS grid track size (e.g. `120px`, `1fr`, `minmax(80px, 1fr)`). Defaults to `1fr`.
+ * - `field` — the item property rendered in this column (`ax-text-column` `dataField`).
+ * - `title` — the header text of the column (`ax-text-column` `caption`).
+ * - `width` — optional column width (`120px`, `20%`, or `auto`). Defaults to `auto`.
  */
 interface AXLookupColumn {
     field: string;
@@ -47,6 +50,91 @@ interface AXLookupSelectionChangedEvent extends AXEvent {
     value: unknown | unknown[] | null;
 }
 
+/**
+ * Shared `AXDataSource` + CDK virtual scroll plumbing for the list-based lookup views
+ * (`ax-lookup-drop-down-list`, `ax-lookup-multi-select`).
+ */
+declare abstract class AXLookupListViewBase {
+    #private;
+    /**
+     * The datasource providing the items (paged, remote-capable).
+     */
+    dataSource: _angular_core.InputSignal<AXDataSource<AXLookupItem>>;
+    /**
+     * The item property used as the selection value.
+     */
+    valueField: _angular_core.InputSignal<string>;
+    /**
+     * The item property used as the display text.
+     */
+    textField: _angular_core.InputSignal<string>;
+    /**
+     * The item property marking an item as disabled.
+     */
+    disabledField: _angular_core.InputSignal<string>;
+    /**
+     * Currently selected values (always an array, even for single selection).
+     */
+    selectedValues: _angular_core.InputSignal<unknown[]>;
+    /**
+     * The fixed row height in pixels used by the virtual scroll viewport.
+     */
+    itemHeight: _angular_core.InputSignal<number>;
+    /**
+     * The maximum number of rows visible before the popup scrolls.
+     */
+    maxVisibleItems: _angular_core.InputSignal<number>;
+    /**
+     * Custom template rendered for each item. Context: `$implicit` is the item.
+     */
+    itemTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * Custom template rendered when the datasource has no items.
+     */
+    emptyTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * Custom template rendered for rows whose page is still loading.
+     */
+    loadingTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * When `true`, list rows use alternating background colors for easier scanning.
+     */
+    alternate: _angular_core.InputSignal<boolean>;
+    /**
+     * Emitted when the user picks (or toggles) an item.
+     */
+    itemClick: _angular_core.OutputEmitterRef<AXLookupItemClickEvent>;
+    /**
+     * Emitted when keyboard navigation should leave the list (e.g. ArrowUp on the first
+     * item, or a printable key that should return focus to the trigger search input).
+     */
+    navigateOut: _angular_core.OutputEmitterRef<"up" | "typeahead">;
+    /** CDK virtual scroll adapter over the datasource. */
+    protected listDataSource: _angular_core.WritableSignal<AXListDataSource<AXLookupItem>>;
+    protected totalCount: _angular_core.WritableSignal<number>;
+    protected isLoading: _angular_core.WritableSignal<boolean>;
+    protected isEmpty: _angular_core.Signal<boolean>;
+    /** Viewport height so the popup grows with the items up to `maxVisibleItems`. */
+    protected viewportHeight: _angular_core.Signal<number>;
+    protected viewportRef: _angular_core.Signal<CdkVirtualScrollViewport>;
+    protected listNavigation: _angular_core.Signal<AXListNavigationDirective>;
+    protected navItems: _angular_core.Signal<readonly AXListNavigationItemDirective[]>;
+    constructor();
+    /** Moves keyboard focus to the first rendered list option. */
+    focusFirst(): void;
+    protected getValue(item: AXLookupItem): unknown;
+    protected getText(item: AXLookupItem): string;
+    protected isSelected(item: AXLookupItem): boolean;
+    protected isDisabled(item: AXLookupItem): boolean;
+    protected handleItemClick(item: AXLookupItem | null | undefined): void;
+    protected handleItemKeypress(e: AXHtmlEvent<KeyboardEvent>, item: AXLookupItem | null | undefined): void;
+    protected handleListKeypress(e: AXHtmlEvent<KeyboardEvent>): void;
+    protected activateNavItem(nav: AXListNavigationDirective, item: AXListNavigationItemDirective): void;
+    protected trackByIndex: (index: number) => number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXLookupListViewBase, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXLookupListViewBase, never, never, { "dataSource": { "alias": "dataSource"; "required": true; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "selectedValues": { "alias": "selectedValues"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "navigateOut": "navigateOut"; }, never, never, true, never>;
+}
+
 /**
  * Selection payload of the multi-select tree view.
  */
@@ -107,11 +195,17 @@ 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` — a table-structured list; 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.
+ *
+ * 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`.
+ *
+ * Implements {@link FormValueControl} so `[(ngModel)]` / signal forms work via the `value` model
+ * (no `ControlValueAccessor`).
  *
  * @category Components
  */
-declare class AXLookupComponent extends NXComponent {
+declare class AXLookupComponent extends NXComponent implements FormValueControl<unknown | unknown[] | null> {
     #private;
     /**
      * The lookup rendering mode. Selects which mini component renders in the popup.
@@ -141,7 +235,7 @@ declare class AXLookupComponent extends NXComponent {
      */
     disabledField: _angular_core.InputSignal<string>;
     /**
-     * Column definitions for the `multi-column` mode.
+     * Column definitions for the `multi-column` mode (rendered as `ax-text-column` in `ax-data-table`).
      */
     columns: _angular_core.InputSignal<AXLookupColumn[]>;
     /**
@@ -150,6 +244,20 @@ declare class AXLookupComponent extends NXComponent {
      * Applies to `drop-down-list`, `multi-select`, and `multi-column`. Tree modes ignore this.
      */
     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.
+     */
+    adaptivityEnabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Title shown in the actionsheet header on small screens. Falls back to `placeholder`.
+     */
+    caption: _angular_core.InputSignal<string>;
+    /**
+     * When `true`, list rows use alternating background colors for easier scanning
+     * (`drop-down-list`, `multi-select`, and `multi-column` modes).
+     */
+    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.
@@ -162,11 +270,11 @@ declare class AXLookupComponent extends NXComponent {
     /**
      * Whether the lookup is disabled.
      */
-    disabled: _angular_core.ModelSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
     /**
      * Whether the lookup is readonly.
      */
-    readonly: _angular_core.ModelSignal<boolean>;
+    readonly readonly: _angular_core.InputSignal<boolean>;
     /**
      * Predefined look scheme of the editor container. Same looks as other editor components like ax-text-box.
      */
@@ -201,9 +309,10 @@ declare class AXLookupComponent extends NXComponent {
     loadingTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
     /**
      * The selected value(s): a scalar in single modes, an array in
-     * `multi-select` / `multi-select-tree`. Supports two-way binding.
+     * `multi-select` / `multi-select-tree`. Supports `[(value)]`, `[(ngModel)]`, and signal forms
+     * via {@link FormValueControl}.
      */
-    value: _angular_core.ModelSignal<unknown>;
+    readonly value: _angular_core.ModelSignal<unknown>;
     /**
      * Emitted when the selected value changes.
      */
@@ -212,6 +321,22 @@ declare class AXLookupComponent extends NXComponent {
      * Emitted when the selection changes, carrying the resolved selected items.
      */
     onSelectionChanged: _angular_core.OutputEmitterRef<AXLookupSelectionChangedEvent>;
+    /**
+     * Emitted when the trigger receives focus.
+     */
+    onFocus: _angular_core.OutputEmitterRef<AXFocusEvent>;
+    /**
+     * Emitted when the trigger loses focus.
+     */
+    onBlur: _angular_core.OutputEmitterRef<AXFocusEvent>;
+    /**
+     * Emitted when a list/tree item is clicked.
+     */
+    onItemClick: _angular_core.OutputEmitterRef<AXItemClickEvent<AXLookupItem>>;
+    /**
+     * Emitted when an item is selected (click or keyboard).
+     */
+    onItemSelected: _angular_core.OutputEmitterRef<AXItemSelectedEvent<AXLookupItem>>;
     /**
      * Emitted when the popup opens.
      */
@@ -222,6 +347,8 @@ declare class AXLookupComponent extends NXComponent {
     onClosed: _angular_core.OutputEmitterRef<AXEvent>;
     /** Whether the popup is expanded. */
     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 current mode selects multiple values. */
     protected isMultiple: _angular_core.Signal<boolean>;
     /** Whether the current mode renders a tree. */
@@ -241,15 +368,39 @@ declare class AXLookupComponent extends NXComponent {
      * Multi-select starts empty; single modes sync from the selected display text.
      */
     protected searchText: _angular_core.WritableSignal<string>;
+    /**
+     * Whether the trigger should render `selectedTemplate` instead of the plain input text.
+     * Searchable mode shows the template while the popup is closed and the input still matches
+     * the selected display text (same pattern as combo-box).
+     */
+    protected showSelectedTemplate: _angular_core.Signal<boolean>;
     protected popoverRef: _angular_core.Signal<AXPopoverComponent>;
     protected triggerSearchInput: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+    protected listView: _angular_core.Signal<AXLookupListViewBase>;
     constructor();
     /** Returns the display text of an item using the `textField` mapping. */
     protected getItemText(item: AXLookupItem): string;
+    /** Stable unique key for selected chips — avoids NG0955 and remounts on reorder/remove. */
+    protected trackSelectedKey(item: AXLookupItem): unknown;
     /**
      * Opens (editable trigger) or toggles the popup on trigger click.
      */
     protected onTriggerClick(): void;
+    /**
+     * Focuses the lookup trigger input.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Handles keyboard interaction on the trigger input.
+     */
+    protected onTriggerKeydown(e: KeyboardEvent): void;
+    /** 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.
+     */
+    protected onListNavigateOut(_reason: 'up' | 'typeahead'): void;
+    protected focusListFirst(): void;
     /**
      * Keeps the expanded state in sync when the popover closes (e.g. click outside),
      * and clears any applied search filter.
@@ -259,6 +410,10 @@ declare class AXLookupComponent extends NXComponent {
      * Closes the popup.
      */
     close(): void;
+    /**
+     * Closes the popup (alias for {@link close}, required by `AXClosableComponent`).
+     */
+    closeAll(): void;
     /**
      * Opens the popup.
      */
@@ -282,85 +437,23 @@ declare class AXLookupComponent extends NXComponent {
      * Applies the multi-select-tree selection to the value; the popup stays open.
      */
     protected handleTreeSelectionChange(e: AXLookupTreeSelectionEvent): void;
+    /** Forwards native focus from the trigger input. */
+    protected emitOnFocus(e: FocusEvent): void;
+    /** Forwards native blur from the trigger input. */
+    protected emitOnBlur(e: FocusEvent): void;
     /**
      * Removes a single chip from the multi selection.
      */
     protected removeChip(event: Event, item: AXLookupItem): void;
     /**
      * Clears the whole selection.
+     * Sets `null` in single modes and `[]` in multi modes. Used by projected `ax-clear-button`.
+     *
+     * @param isUserInteraction - Whether the clear was triggered by the user.
      */
-    protected clearAll(event: Event): void;
+    reset(isUserInteraction?: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXLookupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupComponent, "ax-lookup", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "treeDataSource": { "alias": "treeDataSource"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "treeSelectionBehavior": { "alias": "treeSelectionBehavior"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "readonly": "readonlyChange"; "look": "lookChange"; "value": "valueChange"; "onValueChanged": "onValueChanged"; "onSelectionChanged": "onSelectionChanged"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-prefix", "ax-suffix"], true, never>;
-}
-
-/**
- * Shared `AXDataSource` + CDK virtual scroll plumbing for the list-based lookup views
- * (`ax-lookup-drop-down-list`, `ax-lookup-multi-select`, `ax-lookup-multi-column`).
- */
-declare abstract class AXLookupListViewBase {
-    #private;
-    /**
-     * The datasource providing the items (paged, remote-capable).
-     */
-    dataSource: _angular_core.InputSignal<AXDataSource<AXLookupItem>>;
-    /**
-     * The item property used as the selection value.
-     */
-    valueField: _angular_core.InputSignal<string>;
-    /**
-     * The item property used as the display text.
-     */
-    textField: _angular_core.InputSignal<string>;
-    /**
-     * The item property marking an item as disabled.
-     */
-    disabledField: _angular_core.InputSignal<string>;
-    /**
-     * Currently selected values (always an array, even for single selection).
-     */
-    selectedValues: _angular_core.InputSignal<unknown[]>;
-    /**
-     * The fixed row height in pixels used by the virtual scroll viewport.
-     */
-    itemHeight: _angular_core.InputSignal<number>;
-    /**
-     * The maximum number of rows visible before the popup scrolls.
-     */
-    maxVisibleItems: _angular_core.InputSignal<number>;
-    /**
-     * Custom template rendered for each item. Context: `$implicit` is the item.
-     */
-    itemTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
-    /**
-     * Custom template rendered when the datasource has no items.
-     */
-    emptyTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
-    /**
-     * Custom template rendered for rows whose page is still loading.
-     */
-    loadingTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
-    /**
-     * Emitted when the user picks (or toggles) an item.
-     */
-    itemClick: _angular_core.OutputEmitterRef<AXLookupItemClickEvent>;
-    /** CDK virtual scroll adapter over the datasource. */
-    protected listDataSource: _angular_core.WritableSignal<AXListDataSource<AXLookupItem>>;
-    protected totalCount: _angular_core.WritableSignal<number>;
-    protected isLoading: _angular_core.WritableSignal<boolean>;
-    protected isEmpty: _angular_core.Signal<boolean>;
-    /** Viewport height so the popup grows with the items up to `maxVisibleItems`. */
-    protected viewportHeight: _angular_core.Signal<number>;
-    protected viewportRef: _angular_core.Signal<CdkVirtualScrollViewport>;
-    constructor();
-    protected getValue(item: AXLookupItem): unknown;
-    protected getText(item: AXLookupItem): string;
-    protected isSelected(item: AXLookupItem): boolean;
-    protected isDisabled(item: AXLookupItem): boolean;
-    protected handleItemClick(item: AXLookupItem | null | undefined): void;
-    protected trackByIndex: (index: number) => number;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXLookupListViewBase, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXLookupListViewBase, never, never, { "dataSource": { "alias": "dataSource"; "required": true; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "selectedValues": { "alias": "selectedValues"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupComponent, "ax-lookup", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "treeDataSource": { "alias": "treeDataSource"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "treeSelectionBehavior": { "alias": "treeSelectionBehavior"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "look": "lookChange"; "value": "valueChange"; "onValueChanged": "onValueChanged"; "onSelectionChanged": "onSelectionChanged"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-header", "ax-footer"], true, never>;
 }
 
 /**
@@ -428,20 +521,97 @@ declare class AXLookupDropDownTreeComponent {
 
 /**
  * Internal mini component for the `multi-column` lookup mode:
- * a table-structured, virtualized list with a sticky header row.
+ * renders selectable rows in an `ax-data-table` grid and loads further
+ * pages as the user scrolls (no pager UI).
  *
  * @category Components
  */
-declare class AXLookupMultiColumnComponent extends AXLookupListViewBase {
+declare class AXLookupMultiColumnComponent {
+    #private;
+    /**
+     * The datasource providing the grid rows (paged, remote-capable).
+     * Pages are fetched on demand as the user scrolls the table body.
+     */
+    dataSource: _angular_core.InputSignal<AXDataSource<AXLookupItem>>;
+    /**
+     * The item property used as the selection value.
+     */
+    valueField: _angular_core.InputSignal<string>;
+    /**
+     * The item property used as the display text.
+     */
+    textField: _angular_core.InputSignal<string>;
+    /**
+     * The item property marking an item as disabled.
+     */
+    disabledField: _angular_core.InputSignal<string>;
+    /**
+     * Currently selected values (always an array, even for single selection).
+     */
+    selectedValues: _angular_core.InputSignal<unknown[]>;
+    /**
+     * The fixed row height in pixels passed to the data table.
+     */
+    itemHeight: _angular_core.InputSignal<number>;
     /**
-     * Column definitions rendered as a sticky header plus one grid cell per row.
+     * The maximum number of body rows visible before the table scrolls.
+     */
+    maxVisibleItems: _angular_core.InputSignal<number>;
+    /**
+     * Column definitions rendered as `ax-text-column` instances.
      */
     columns: _angular_core.InputSignal<AXLookupColumn[]>;
-    /** CSS grid track list built from the column widths. */
-    protected gridTemplate: _angular_core.Signal<string>;
-    protected getCellText(item: AXLookupItem, column: AXLookupColumn): string;
+    /**
+     * Optional custom row content. Context: `$implicit` is the row item.
+     * When set, replaces the default multi-column cell layout.
+     */
+    itemTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * Custom template rendered when the datasource has no items.
+     */
+    emptyTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * Custom template rendered while the table is loading.
+     */
+    loadingTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * When `true`, table rows use alternating background colors for easier scanning.
+     */
+    alternate: _angular_core.InputSignal<boolean>;
+    /**
+     * Emitted when the user picks a row.
+     */
+    itemClick: _angular_core.OutputEmitterRef<AXLookupItemClickEvent>;
+    protected tableRef: _angular_core.Signal<AXDataTableComponent>;
+    /**
+     * Local table source: one page of whatever has been scrolled in so far.
+     * Kept as a stable instance so the table host is not recreated on each page load.
+     * `pageSize` grows with `#loadedItems` — never seed with a huge empty array (data-table
+     * initializes `displayedRows` as `new Array(pageSize)`, which caused NG0955-level jank).
+     */
+    protected readonly tableDataSource: AXDataSource<AXLookupItem>;
+    /**
+     * Header (~40px) + body rows. Grows with results up to `maxVisibleItems`,
+     * then the table body scrolls for the rest.
+     */
+    protected tableHeight: _angular_core.Signal<number>;
+    protected loadingConfig: _angular_core.Signal<{
+        enabled: boolean;
+        animation: boolean;
+        loadingTemplate: TemplateRef<unknown>;
+    }>;
+    constructor();
+    /** Stable unique key for `@for` — avoids NG0955 when `field` is missing or duplicated. */
+    protected trackColumnKey(index: number, column: AXLookupColumn): string;
+    protected resolveColumnWidth(column: AXLookupColumn): string | number | 'auto';
+    protected resolveRowCssClass: (row: unknown) => string;
+    protected handleRowClick(event: AXDataTableRowClick): void;
+    protected handleItemClick(item: AXLookupItem | null | undefined): void;
+    protected isSelected(item: AXLookupItem): boolean;
+    protected isDisabled(item: AXLookupItem): boolean;
+    private getValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXLookupMultiColumnComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupMultiColumnComponent, "ax-lookup-multi-column", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupMultiColumnComponent, "ax-lookup-multi-column", never, { "dataSource": { "alias": "dataSource"; "required": true; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "selectedValues": { "alias": "selectedValues"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
 }
 
 declare class AXLookupModule {

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

@@ -138,6 +138,8 @@ declare class AXContextMenuComponent extends NXComponent {
     /** @ignore */
     private createBackdrop;
     /** @ignore */
+    private resolveContextMenuTarget;
+    /** @ignore */
     private removeBackdrop;
     private createEventListeners;
     /** @ignore */

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

@@ -1,7 +1,7 @@
 import { AXStyleColorType, AXStyleLookType, AXLocation, MXBaseComponent } from '@acorex/cdk/common';
 import { AXOverlayRef } from '@acorex/cdk/overlay';
 import * as _angular_core from '@angular/core';
-import { TemplateRef, Type, OnInit, InjectionToken } from '@angular/core';
+import { TemplateRef, Type, ElementRef, OnInit, InjectionToken } from '@angular/core';
 
 type AXNotificationContentType = string | TemplateRef<unknown> | Type<unknown>;
 interface AXNotificationButtonItem {
@@ -26,6 +26,14 @@ interface AXNotificationOptions {
     timeOut?: number;
     timeOutProgress?: boolean;
     pauseOnHover?: boolean;
+    /**
+     * Element used to resolve inherited visual context for overlays rendered
+     * outside the originating DOM subtree.
+     *
+     * This affects Appearance, Light/Dark theme, Contrast, Size, and supported
+     * Density context. It does not affect overlay positioning.
+     */
+    contextElement?: HTMLElement | ElementRef<HTMLElement>;
 }
 interface AXNotificationData {
     buttons?: AXNotificationButtonItem[];
@@ -50,6 +58,7 @@ interface AXNotificationInternalRef {
     id: string;
     overlayRef: AXOverlayRef<unknown>;
     config: AXNotificationData;
+    contextElement?: HTMLElement | ElementRef<HTMLElement>;
     close: () => void;
 }
 
@@ -124,6 +133,7 @@ declare class AXNotificationService {
     private notificationCounterRef;
     private moreNotificationsColor;
     private moreNotificationsLocation;
+    private moreNotificationsContextElement;
     private reserveCounter;
     show(config: AXNotificationOptions): AXNotificationRef;
     private displayNotification;

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

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { OnDestroy, ElementRef, ComponentRef, TemplateRef, EventEmitter } from '@angular/core';
 import { MXBaseComponent, AXPlacementType, AXEvent } from '@acorex/cdk/common';
+import { AXOverlayVisualContextScope } from '@acorex/cdk/overlay';
 import { AXComponentType } from '@acorex/core/components';
 import * as i1 from '@angular/common';
 
@@ -39,6 +40,8 @@ declare class AXPopoverComponent extends MXBaseComponent implements OnDestroy {
     private _disabled;
     readonly width: i0.InputSignal<string>;
     readonly disablePanelClass: i0.InputSignal<boolean>;
+    /** Propagate theme/size only — floating dropdown panels opt out of appearance/contrast. */
+    readonly visualContextScope: i0.InputSignal<AXOverlayVisualContextScope>;
     private translateService;
     /**
      * Gets or sets whether the popover is disabled.
@@ -240,7 +243,7 @@ declare class AXPopoverComponent extends MXBaseComponent implements OnDestroy {
     /** @ignore */
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXPopoverComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXPopoverComponent, "ax-popover", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "disablePanelClass": { "alias": "disablePanelClass"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "offsetX": { "alias": "offsetX"; "required": false; }; "offsetY": { "alias": "offsetY"; "required": false; }; "target": { "alias": "target"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "content": { "alias": "content"; "required": false; }; "openOn": { "alias": "openOn"; "required": false; }; "closeOn": { "alias": "closeOn"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "openAfter": { "alias": "openAfter"; "required": false; }; "closeAfter": { "alias": "closeAfter"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; }; }, { "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXPopoverComponent, "ax-popover", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "disablePanelClass": { "alias": "disablePanelClass"; "required": false; "isSignal": true; }; "visualContextScope": { "alias": "visualContextScope"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "offsetX": { "alias": "offsetX"; "required": false; }; "offsetY": { "alias": "offsetY"; "required": false; }; "target": { "alias": "target"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "content": { "alias": "content"; "required": false; }; "openOn": { "alias": "openOn"; "required": false; }; "closeOn": { "alias": "closeOn"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "openAfter": { "alias": "openAfter"; "required": false; }; "closeAfter": { "alias": "closeAfter"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; }; }, { "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["*"], true, never>;
 }
 
 declare class AXPopoverModule {

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, ViewContainerRef, StaticProvider, OnInit, OnDestroy } from '@angular/core';
+import { TemplateRef, ViewContainerRef, StaticProvider, ElementRef, OnInit, OnDestroy } from '@angular/core';
 import * as i2 from '@acorex/cdk/common';
 import { NXComponent, MXBaseComponent, AXComponentClosedPromise } from '@acorex/cdk/common';
 import { AXComponentType, AXComponentInputs } from '@acorex/core/components';
@@ -55,6 +55,14 @@ interface AXPopupConfig {
      * extra content inputs that depend on the ref.
      */
     _bindContentInputs?: (ref: AXPopupRef) => Record<string, unknown>;
+    /**
+     * Element used to resolve inherited visual context for overlays rendered
+     * outside the originating DOM subtree.
+     *
+     * This affects Appearance, Light/Dark theme, Contrast, Size, and supported
+     * Density context. It does not affect overlay positioning.
+     */
+    contextElement?: HTMLElement | ElementRef<HTMLElement>;
 }
 interface AXPopupData {
     title: string;

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

@@ -12,7 +12,7 @@ import { Observable } from 'rxjs';
 import * as i1 from '@angular/common';
 import * as i3 from '@angular/forms';
 import * as i4 from '@acorex/components/check-box';
-import * as i5 from '@acorex/components/badge';
+import * as i5 from '@acorex/components/tag';
 import * as i6 from '@acorex/components/decorators';
 import * as i7 from '@acorex/core/translation';
 import * as i8 from '@acorex/components/popover';
@@ -22,8 +22,10 @@ import * as i11 from '@acorex/components/text-box';
 
 declare const AXSelectBoxComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXDropdownBoxBaseComponent, typeof MXSelectionValueComponent, typeof MXLookComponent]>;
 /**
- * The Button is a component which detects user interaction and triggers a corresponding event
- * @category
+ * @deprecated Use `combo-box` when your data is a simple array. Use `lookup` when you need advanced features and `AXDataSource` support.
+ * This component is deprecated and no longer supported.
+ *
+ * @category Components
  */
 declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements OnDestroy {
     #private;
@@ -189,9 +191,13 @@ declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXSelectBoxComponent, "ax-select-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "textTemplate": { "alias": "textTemplate"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "isItemTruncated": { "alias": "isItemTruncated"; "required": false; "isSignal": true; }; "showItemTooltip": { "alias": "showItemTooltip"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "minRecordsForSearch": { "alias": "minRecordsForSearch"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; "isSignal": true; }; "searchBoxAutoFocus": { "alias": "searchBoxAutoFocus"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onOpened": "onOpened"; "onClosed": "onClosed"; "onItemSelected": "onItemSelected"; "onItemClick": "onItemClick"; }, ["searchBox"], ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-search-box", "ax-footer", "ax-validation-rule"], true, never>;
 }
 
+/**
+ * @deprecated Use `combo-box` when your data is a simple array. Use `lookup` when you need advanced features and `AXDataSource` support.
+ * This module is deprecated and no longer supported.
+ */
 declare class AXSelectBoxModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSelectBoxModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXSelectBoxModule, never, [typeof i1.CommonModule, typeof i2.AXCommonModule, typeof i3.FormsModule, typeof i4.AXCheckBoxModule, typeof i5.AXBadgeModule, typeof i6.AXDecoratorModule, typeof i7.AXTranslationModule, typeof i8.AXPopoverModule, typeof i9.AXLoadingModule, typeof i10.A11yModule, typeof i11.AXTextBoxModule, typeof i12.AXDropdownModule, typeof i13.AXListModule, typeof AXSelectBoxComponent], [typeof AXSelectBoxComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXSelectBoxModule, never, [typeof i1.CommonModule, typeof i2.AXCommonModule, typeof i3.FormsModule, typeof i4.AXCheckBoxModule, typeof i5.AXTagModule, typeof i6.AXDecoratorModule, typeof i7.AXTranslationModule, typeof i8.AXPopoverModule, typeof i9.AXLoadingModule, typeof i10.A11yModule, typeof i11.AXTextBoxModule, typeof i12.AXDropdownModule, typeof i13.AXListModule, typeof AXSelectBoxComponent], [typeof AXSelectBoxComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXSelectBoxModule>;
 }