@acorex/components 20.2.0-next.18 → 20.2.0-next.19

package/list/index.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { OnInit, WritableSignal, TemplateRef, EventEmitter } from '@angular/core';
-import { AXEvent, MXSelectionValueComponent, AXDataSource, AXListDataSource } from '@acorex/cdk/common';
+import { OnInit, EventEmitter, WritableSignal, TemplateRef } from '@angular/core';
+import { AXEvent, MXSelectionValueComponent, AXItemClickEvent, AXDataSource, AXListDataSource } from '@acorex/cdk/common';
 import * as i1 from '@angular/common';
 import * as i2 from '@angular/cdk/scrolling';
 import * as i3 from '@acorex/core/translation';
@@ -27,6 +27,12 @@ declare class AXListComponent extends MXSelectionValueComponent implements OnIni
      * @defaultValue false
      */
     showItemTooltip: i0.InputSignal<boolean>;
+    /**
+     * Emitted when an item in the list is clicked.
+     *
+     * @event
+     */
+    onItemClick: EventEmitter<AXItemClickEvent<any>>;
     /**
      * Defines the data source for the list.
      *
@@ -142,7 +148,7 @@ declare class AXListComponent extends MXSelectionValueComponent implements OnIni
      */
     showEmptyTemplate: i0.Signal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXListComponent, "ax-list", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "textTemplate": { "alias": "textTemplate"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "isItemTruncated": { "alias": "isItemTruncated"; "required": false; "isSignal": true; }; "showItemTooltip": { "alias": "showItemTooltip"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "checkbox": { "alias": "checkbox"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "disabledChange": "disabledChange"; "readonlyChange": "readonlyChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onScrolledIndexChanged": "onScrolledIndexChanged"; }, never, ["ax-header", "ax-footer"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXListComponent, "ax-list", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "textTemplate": { "alias": "textTemplate"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "isItemTruncated": { "alias": "isItemTruncated"; "required": false; "isSignal": true; }; "showItemTooltip": { "alias": "showItemTooltip"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "checkbox": { "alias": "checkbox"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "disabledChange": "disabledChange"; "readonlyChange": "readonlyChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onItemClick": "onItemClick"; "onScrolledIndexChanged": "onScrolledIndexChanged"; }, never, ["ax-header", "ax-footer"], true, never>;
 }
 
 declare class AXListModule {

package/menu/index.d.ts

@@ -78,6 +78,8 @@ declare class AXContextMenuComponent extends NXComponent {
     showAt(point: AXPoint, targetElement?: HTMLElement, event?: AXContextMenuOpeningEvent): void;
     close(): void;
     private backdropElement;
+    private originalNextSibling;
+    private originalParent;
     protected items: _angular_core.WritableSignal<AXMenuItem[]>;
     /** @ignore */
     private getTargetElements;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/components",
-  "version": "20.2.0-next.18",
+  "version": "20.2.0-next.19",
   "peerDependencies": {
     "@angular/common": "^20.0.0",
     "@angular/core": "^20.0.0",
@@ -114,10 +114,6 @@
       "types": "./cron-job/index.d.ts",
       "default": "./fesm2022/acorex-components-cron-job.mjs"
     },
-    "./data-list": {
-      "types": "./data-list/index.d.ts",
-      "default": "./fesm2022/acorex-components-data-list.mjs"
-    },
     "./data-pager": {
       "types": "./data-pager/index.d.ts",
       "default": "./fesm2022/acorex-components-data-pager.mjs"
@@ -130,14 +126,14 @@
       "types": "./datetime-box/index.d.ts",
       "default": "./fesm2022/acorex-components-datetime-box.mjs"
     },
-    "./datetime-input": {
-      "types": "./datetime-input/index.d.ts",
-      "default": "./fesm2022/acorex-components-datetime-input.mjs"
-    },
     "./datetime-picker": {
       "types": "./datetime-picker/index.d.ts",
       "default": "./fesm2022/acorex-components-datetime-picker.mjs"
     },
+    "./datetime-input": {
+      "types": "./datetime-input/index.d.ts",
+      "default": "./fesm2022/acorex-components-datetime-input.mjs"
+    },
     "./decorators": {
       "types": "./decorators/index.d.ts",
       "default": "./fesm2022/acorex-components-decorators.mjs"
@@ -310,14 +306,14 @@
       "types": "./rate-picker/index.d.ts",
       "default": "./fesm2022/acorex-components-rate-picker.mjs"
     },
-    "./rest-api-generator": {
-      "types": "./rest-api-generator/index.d.ts",
-      "default": "./fesm2022/acorex-components-rest-api-generator.mjs"
-    },
     "./result": {
       "types": "./result/index.d.ts",
       "default": "./fesm2022/acorex-components-result.mjs"
     },
+    "./rest-api-generator": {
+      "types": "./rest-api-generator/index.d.ts",
+      "default": "./fesm2022/acorex-components-rest-api-generator.mjs"
+    },
     "./routing-progress": {
       "types": "./routing-progress/index.d.ts",
       "default": "./fesm2022/acorex-components-routing-progress.mjs"

package/rail-navigation/index.d.ts

@@ -32,6 +32,10 @@ declare class AXRailNavigationItemComponent extends MXBaseComponent implements A
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     handleClickEvent(e: MouseEvent): void;
+    /**
+     * Gets the height and top position of the item.
+     * @returns Object containing height and top position
+     */
     getStats(): {
         height: number;
         top: number;
@@ -64,7 +68,14 @@ declare class AXRailNavigationModule {
 
 declare class AXRailNavigationService {
     private activeItem;
+    /**
+     * Observable that emits the currently active rail navigation item.
+     */
     activeItem$: rxjs.Observable<AXRailNavigationItemComponent>;
+    /**
+     * Sets the specified item as the active rail navigation item.
+     * @param item - The rail navigation item to set as active
+     */
     setActive(item: AXRailNavigationItemComponent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXRailNavigationService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXRailNavigationService>;

package/select-box/index.d.ts

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { OnDestroy, WritableSignal, TemplateRef, ElementRef } from '@angular/core';
 import * as polytype from 'polytype';
 import * as i2 from '@acorex/cdk/common';
-import { MXSelectionValueComponent, MXLookComponent, AXDataSource, MXSelectionBridgeService, AXEvent, AXValueChangedEvent, AXItemClickEvent, AXItemSelectedEvent } from '@acorex/cdk/common';
+import { MXSelectionValueComponent, MXLookComponent, AXDataSource, MXSelectionBridgeService, AXEvent, AXValueChangedEvent } from '@acorex/cdk/common';
 import * as i12 from '@acorex/components/dropdown';
 import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
 import * as i13 from '@acorex/components/list';
@@ -126,11 +126,6 @@ declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements
     private _unsubscriber;
     /** @ignore */
     protected ngOnInit(): void;
-    /**
-     * Proactively fetches item data if the component has a value but no corresponding item data.
-     * This prevents showing "loading..." when the component has a value.
-     */
-    private fetchItemDataIfNeeded;
     /** @ignore */
     ngOnDestroy(): void;
     /**
@@ -149,10 +144,6 @@ declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements
     /** @ignore */
     protected _handleValueChanged(e: AXValueChangedEvent): void;
     /** @ignore */
-    protected _handleItemClick(e: AXItemClickEvent): void;
-    /** @ignore */
-    protected _handleItemSelected(e: AXItemSelectedEvent): void;
-    /** @ignore */
     private setDropdownSize;
     private updateDropdownPosition;
     private updateDropdownSize;
@@ -172,7 +163,7 @@ declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements
     refresh(): void;
     private hostClickListener;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXSelectBoxComponent, never>;
-    static ɵcmp: i0.ɵɵ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; }; "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>;
+    static ɵcmp: i0.ɵɵ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; }; "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"; }, ["searchBox"], ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-search-box", "ax-footer", "ax-validation-rule"], true, never>;
 }
 
 declare class AXSelectBoxModule {

package/tag-box/index.d.ts

@@ -26,8 +26,8 @@ declare class AXTagBoxComponent extends AXTagBoxComponent_base implements OnInit
     addItems(items: object[]): void;
     removeItem(index: number): void;
     convertString(v: unknown): object[];
-    getFieldValue(item: unknown, path: string): unknown;
-    protected internalSetValue(value: unknown): unknown[];
+    protected internalSetValue(value: any): unknown[];
+    protected internalSetValue(value: any): any;
     private get __hostName();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXTagBoxComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXTagBoxComponent, "ax-tag-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "addOnComma": { "alias": "addOnComma"; "required": false; "isSignal": true; }; "addOnEnter": { "alias": "addOnEnter"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "readonlyField": { "alias": "readonlyField"; "required": false; "isSignal": true; }; "allowDuplicateValues": { "alias": "allowDuplicateValues"; "required": false; "isSignal": true; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; "onKeyPress": "onKeyPress"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-autocomplete", "ax-validation-rule"], true, never>;

package/data-list/README.md

@@ -1,356 +0,0 @@
-# @acorex/components/data-list
-
-Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/data-list`.
-
-## Overview
-
-`AXDataList` is a modern, signal-based Angular data list component that provides virtual scrolling, selection management, and tree grouping capabilities. It's designed to replace the existing `AXListComponent` with improved performance and modern Angular patterns.
-
-## Key Features
-
-### Core Functionality
-
-- ✅ **Virtual Scrolling** - CDK-based virtual scrolling for large datasets
-- ✅ **Selection Management** - Single and multiple selection modes
-- ✅ **Tree Grouping** - Hierarchical item organization with expand/collapse
-- ✅ **Template System** - Custom templates for items, loading, and empty states
-- ✅ **Keyboard Navigation** - Full keyboard accessibility
-- ✅ **Modern Angular** - Signal-based architecture for optimal performance
-
-### Advanced Features
-
-- ✅ **Disabled Items** - Field-based item disabling with visual and behavioral support
-- ✅ **Tooltip Support** - Custom tooltip content via field mapping
-- ✅ **Checkbox Control** - Configurable checkbox display and behavior
-- ✅ **Search API** - External search integration (not built-in)
-
-## Component Architecture
-
-### Base Class
-
-- **Inherits from**: `MXValueComponent` (instead of `MXSelectionValueComponent`)
-- **Change Detection**: `OnPush` strategy
-- **Encapsulation**: `ViewEncapsulation.None`
-
-### Dependencies
-
-- `@angular/cdk/scrolling` - Virtual scrolling
-- `@angular/forms` - Form integration
-- `@acorex/cdk/common` - Base components and utilities
-
-## Input Properties
-
-### Basic Properties
-
-| Property   | Type      | Default | Description                  |
-| ---------- | --------- | ------- | ---------------------------- |
-| `id`       | `string`  | -       | Component identifier         |
-| `name`     | `string`  | -       | Component name for forms     |
-| `disabled` | `boolean` | `false` | Disable the entire component |
-| `readonly` | `boolean` | `false` | Make component read-only     |
-| `tabIndex` | `number`  | `0`     | Tab order                    |
-
-### Data & Selection
-
-| Property        | Type                    | Default  | Description                      |
-| --------------- | ----------------------- | -------- | -------------------------------- |
-| `dataSource`    | `AXDataSource<unknown>` | `[]`     | Data source for the list         |
-| `value`         | `unknown \| unknown[]`  | -        | Current selected value(s)        |
-| `valueField`    | `string`                | `'id'`   | Field name for item value        |
-| `textField`     | `string`                | `'text'` | Field name for item display text |
-| `multiple`      | `boolean`               | `false`  | Enable multiple selection        |
-| `selectionMode` | `string`                | `'item'` | Selection behavior               |
-
-### Display & Behavior
-
-| Property          | Type               | Default | Description                       |
-| ----------------- | ------------------ | ------- | --------------------------------- |
-| `itemHeight`      | `number \| 'auto'` | `40`    | Height of each list item          |
-| `isItemTruncated` | `boolean`          | `true`  | Enable text truncation            |
-| `showItemTooltip` | `boolean`          | `false` | Show tooltips for truncated items |
-| `showCheckbox`    | `boolean`          | `true`  | Show checkboxes for selection     |
-
-### Field Mappings
-
-| Property        | Type     | Default | Description                                 |
-| --------------- | -------- | ------- | ------------------------------------------- |
-| `disabledField` | `string` | -       | Field name to determine if item is disabled |
-| `tooltipField`  | `string` | -       | Field name for custom tooltip content       |
-
-### Tree Grouping
-
-| Property             | Type          | Default      | Description                       |
-| -------------------- | ------------- | ------------ | --------------------------------- |
-| `childrenField`      | `string`      | `'children'` | Field name containing child items |
-| `expandedField`      | `string`      | `'expanded'` | Field name for expanded state     |
-| `levelField`         | `string`      | `'level'`    | Field name for nesting level      |
-| `groupTemplate`      | `TemplateRef` | -            | Template for group headers        |
-| `expandIconTemplate` | `TemplateRef` | -            | Custom expand/collapse icons      |
-
-### Templates
-
-| Property          | Type          | Default | Description                    |
-| ----------------- | ------------- | ------- | ------------------------------ |
-| `itemTemplate`    | `TemplateRef` | -       | Custom template for list items |
-| `emptyTemplate`   | `TemplateRef` | -       | Template for empty state       |
-| `loadingTemplate` | `TemplateRef` | -       | Template for loading state     |
-| `textTemplate`    | `TemplateRef` | -       | Custom text display template   |
-
-## Output Events
-
-### Value & Selection Events
-
-| Event                | Type                      | Description             |
-| -------------------- | ------------------------- | ----------------------- |
-| `onValueChanged`     | `AXValueChangedEvent`     | Value selection changed |
-| `onItemClick`        | `AXItemClickEvent`        | Item clicked            |
-| `onItemSelected`     | `AXItemSelectedEvent`     | Item selection changed  |
-| `onSelectionChanged` | `AXSelectionChangedEvent` | Selection state changed |
-
-### Focus & Interaction Events
-
-| Event       | Type             | Description            |
-| ----------- | ---------------- | ---------------------- |
-| `onBlur`    | `AXBlurEvent`    | Component lost focus   |
-| `onFocus`   | `AXFocusEvent`   | Component gained focus |
-| `onKeyDown` | `AXKeyDownEvent` | Key pressed            |
-
-### Data & State Events
-
-| Event                    | Type                       | Description             |
-| ------------------------ | -------------------------- | ----------------------- |
-| `onScrolledIndexChanged` | `AXListScrollIndexChanged` | Scroll position changed |
-| `onLoadingChanged`       | `AXLoadingChangedEvent`    | Loading state changed   |
-| `onDataChanged`          | `AXDataChangedEvent`       | Data source changed     |
-
-### Tree Grouping Events
-
-| Event             | Type                   | Description                   |
-| ----------------- | ---------------------- | ----------------------------- |
-| `onItemExpanded`  | `AXItemExpandedEvent`  | Item expanded                 |
-| `onItemCollapsed` | `AXItemCollapsedEvent` | Item collapsed                |
-| `onGroupToggle`   | `AXGroupToggleEvent`   | Group expand/collapse toggled |
-
-## Public API Methods
-
-### Selection Management
-
-| Method                 | Parameters      | Return      | Description                   |
-| ---------------------- | --------------- | ----------- | ----------------------------- |
-| `selectItem(item)`     | `item: unknown` | `void`      | Select specific item          |
-| `deselectItem(item)`   | `item: unknown` | `void`      | Deselect specific item        |
-| `clearSelection()`     | -               | `void`      | Clear all selections          |
-| `getSelectedItems()`   | -               | `unknown[]` | Get currently selected items  |
-| `isItemSelected(item)` | `item: unknown` | `boolean`   | Check if item is selected     |
-| `isItemDisabled(item)` | `item: unknown` | `boolean`   | Check if item is disabled     |
-| `canSelectItem(item)`  | `item: unknown` | `boolean`   | Check if item can be selected |
-
-### Navigation & Focus
-
-| Method                 | Parameters      | Return | Description                  |
-| ---------------------- | --------------- | ------ | ---------------------------- |
-| `focus()`              | -               | `void` | Focus the component          |
-| `focusItem(index)`     | `index: number` | `void` | Focus specific item by index |
-| `focusNextItem()`      | -               | `void` | Focus next item              |
-| `focusPreviousItem()`  | -               | `void` | Focus previous item          |
-| `scrollToIndex(index)` | `index: number` | `void` | Scroll to specific index     |
-
-### Data & State
-
-| Method                  | Parameters      | Return      | Description                 |
-| ----------------------- | --------------- | ----------- | --------------------------- |
-| `refresh()`             | -               | `void`      | Refresh data source         |
-| `getItemByKey(key)`     | `key: unknown`  | `unknown`   | Get item by key             |
-| `getItemByIndex(index)` | `index: number` | `unknown`   | Get item by index           |
-| `getVisibleItems()`     | -               | `unknown[]` | Get items currently visible |
-
-### Tree Grouping
-
-| Method                 | Parameters      | Return      | Description               |
-| ---------------------- | --------------- | ----------- | ------------------------- |
-| `expandItem(item)`     | `item: unknown` | `void`      | Expand group              |
-| `collapseItem(item)`   | `item: unknown` | `void`      | Collapse group            |
-| `toggleExpanded(item)` | `item: unknown` | `void`      | Toggle expand/collapse    |
-| `expandAll()`          | -               | `void`      | Expand all groups         |
-| `collapseAll()`        | -               | `void`      | Collapse all groups       |
-| `isExpanded(item)`     | `item: unknown` | `boolean`   | Check if item is expanded |
-| `getItemLevel(item)`   | `item: unknown` | `number`    | Get nesting level         |
-| `getParentItem(item)`  | `item: unknown` | `unknown`   | Get parent item           |
-| `getChildItems(item)`  | `item: unknown` | `unknown[]` | Get child items           |
-
-### Viewport Management
-
-| Method                | Parameters | Return | Description                |
-| --------------------- | ---------- | ------ | -------------------------- |
-| `render()`            | -          | `void` | Re-render the component    |
-| `checkViewportSize()` | -          | `void` | Update viewport dimensions |
-| `scrollToTop()`       | -          | `void` | Scroll to top              |
-| `scrollToBottom()`    | -          | `void` | Scroll to bottom           |
-
-## Template Context Variables
-
-### Standard Item Context
-
-| Variable    | Type      | Description     |
-| ----------- | --------- | --------------- |
-| `$implicit` | `unknown` | The item data   |
-| `index`     | `number`  | Item index      |
-| `selected`  | `boolean` | Selection state |
-| `disabled`  | `boolean` | Disabled state  |
-| `first`     | `boolean` | First item flag |
-| `last`      | `boolean` | Last item flag  |
-| `even`      | `boolean` | Even index flag |
-| `odd`       | `boolean` | Odd index flag  |
-
-### Tree Grouping Context
-
-| Variable      | Type        | Description                    |
-| ------------- | ----------- | ------------------------------ |
-| `level`       | `number`    | Nesting level (0, 1, 2, etc.)  |
-| `isGroup`     | `boolean`   | Whether item is a group/parent |
-| `isExpanded`  | `boolean`   | Whether group is expanded      |
-| `hasChildren` | `boolean`   | Whether item has children      |
-| `parent`      | `unknown`   | Reference to parent item       |
-| `children`    | `unknown[]` | Child items array              |
-
-## Behavior Specifications
-
-### Disabled Items
-
-- **Visual**: Grayed out appearance with reduced opacity
-- **Focus**: Disabled items are focusable but not selectable
-- **Navigation**: Skipped in keyboard navigation (Arrow keys)
-- **Selection**: Cannot be selected or deselected
-- **Checkbox**: Disabled checkboxes for disabled items
-
-### Tooltip Behavior
-
-- **Custom Tooltip**: `tooltipField` provides custom tooltip content
-- **Default Tooltip**: Shows on hover regardless of truncation
-- **Priority**: Custom tooltip overrides default text tooltip
-
-### Checkbox Behavior
-
-- **Display**: Controlled by `showCheckbox` input
-- **State**: Disabled items show disabled checkboxes
-- **Group Headers**: Can show checkboxes for "select all children" behavior
-- **Behavior Options**: Configurable checkbox interaction patterns
-
-### Tree Grouping Behavior
-
-- **Expand/Collapse**: Click on group header or expand icon
-- **Selection**: Group selection can affect child selection
-- **Navigation**: Keyboard navigation respects expanded/collapsed state
-- **Performance**: Virtual scrolling optimized for tree structures
-
-## CSS Classes & Styling
-
-### Container Classes
-
-- `.ax-list-container` - Main container
-- `.ax-list-container.ax-height-auto` - Auto height mode
-- `.ax-list-container.ax-tree-mode` - Tree grouping mode
-
-### Item Classes
-
-- `.ax-list-item` - Individual items
-- `.ax-list-item.ax-state-selected` - Selected state
-- `.ax-list-item.ax-state-disabled` - Disabled state
-- `.ax-list-item.ax-state-focused` - Focused state
-- `.ax-list-item.ax-state-loading` - Loading state
-- `.ax-list-item.ax-state-empty` - Empty state
-
-### Tree Grouping Classes
-
-- `.ax-list-item.ax-group-header` - Group header items
-- `.ax-list-item.ax-group-expanded` - Expanded group
-- `.ax-list-item.ax-group-collapsed` - Collapsed group
-- `.ax-list-item.ax-group-child` - Child items
-- `.ax-list-item.ax-level-{n}` - Nesting level styling
-
-### State Classes
-
-- `.ax-list-item.ax-level-0` - Root level items
-- `.ax-list-item.ax-level-1` - First level nested items
-- `.ax-list-item.ax-level-2` - Second level nested items
-- `.ax-list-item.ax-has-children` - Items with children
-- `.ax-list-item.ax-no-children` - Items without children
-
-## Performance Considerations
-
-### Virtual Scrolling
-
-- **Item Size**: Fixed item height for optimal performance
-- **Viewport Management**: Efficient viewport size calculations
-- **Memory Usage**: Minimal DOM elements for large datasets
-
-### Signal Optimization
-
-- **Change Detection**: Signal-based updates for minimal re-renders
-- **Computed Values**: Efficient computed signals for derived state
-- **Memory Management**: Proper signal cleanup and disposal
-
-### Tree Grouping Performance
-
-- **Lazy Loading**: Children loaded on demand
-- **Virtual Scrolling**: Optimized for hierarchical structures
-- **Selection Caching**: Efficient selection state management
-
-## Migration Guide
-
-### From AXListComponent
-
-- **Component Name**: Change from `ax-list` to `ax-data-list`
-- **Base Class**: Change from `MXSelectionValueComponent` to `MXValueComponent`
-- **Inputs**: Update input property names (e.g., `checkbox` → `showCheckbox`)
-- **Events**: Update event handler names
-- **Templates**: Ensure template context compatibility
-
-### Breaking Changes
-
-- **Selection API**: Simplified selection management
-- **Event Names**: Updated event naming conventions
-- **Template Context**: Enhanced context variables for tree grouping
-
-## Future Enhancements
-
-### Planned Features
-
-- **Drag & Drop**: Item reordering and tree restructuring
-- **Filtering**: Client-side filtering capabilities
-- **Sorting**: Multi-column sorting support
-- **Pagination**: Built-in pagination controls
-- **Export**: Data export functionality
-
-### Performance Improvements
-
-- **Web Workers**: Background data processing
-- **Service Workers**: Offline data caching
-- **IndexedDB**: Local data persistence
-- **WebAssembly**: High-performance data operations
-
-## Implementation Notes
-
-### Development Phases
-
-1. **Phase 1**: Core functionality with virtual scrolling
-2. **Phase 2**: Selection management and templates
-3. **Phase 3**: Tree grouping implementation
-4. **Phase 4**: Advanced features and optimizations
-
-### Testing Strategy
-
-- **Unit Tests**: Component logic and API methods
-- **Integration Tests**: Template system and data binding
-- **Performance Tests**: Virtual scrolling and large datasets
-- **Accessibility Tests**: Keyboard navigation and screen readers
-
-### Browser Support
-
-- **Modern Browsers**: Chrome 90+, Firefox 88+, Safari 14+
-- **Mobile**: iOS Safari 14+, Chrome Mobile 90+
-- **Fallbacks**: Graceful degradation for older browsers
-
----
-
-_This README serves as the complete specification for AXListComponent2 development and implementation._

package/data-list/index.d.ts

@@ -1,102 +0,0 @@
-import * as _angular_core from '@angular/core';
-import { OnInit, TemplateRef, EventEmitter } from '@angular/core';
-import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { MXValueComponent, AXDataSource, AXListDataSource } from '@acorex/cdk/common';
-
-interface AXDataListItem {
-    id: string;
-    text: string;
-    description?: string;
-    disabled?: boolean;
-    tooltip?: string;
-    level?: number;
-    children?: AXDataListItem[];
-    expanded?: boolean;
-    [key: string]: any;
-}
-interface AXDataListConfig {
-    disabledField?: string;
-    tooltipField?: string;
-    textField?: string;
-    descriptionField?: string;
-    levelField?: string;
-    childrenField?: string;
-    expandedField?: string;
-}
-interface AXDataListSelectionChange {
-    selectedItems: AXDataListItem[];
-    selectedKeys: string[];
-    isMultiple: boolean;
-}
-declare class AXDataListComponent extends MXValueComponent implements OnInit {
-    dataSource: _angular_core.InputSignal<AXDataSource<AXDataListItem>>;
-    config: _angular_core.InputSignal<AXDataListConfig>;
-    multiple: _angular_core.InputSignal<boolean>;
-    showCheckbox: _angular_core.InputSignal<boolean>;
-    itemHeight: _angular_core.InputSignal<number>;
-    isItemTruncated: _angular_core.InputSignal<boolean>;
-    showItemTooltip: _angular_core.InputSignal<boolean>;
-    disabledField: _angular_core.InputSignal<string>;
-    tooltipField: _angular_core.InputSignal<string>;
-    textField: _angular_core.InputSignal<string>;
-    descriptionField: _angular_core.InputSignal<string>;
-    levelField: _angular_core.InputSignal<string>;
-    childrenField: _angular_core.InputSignal<string>;
-    expandedField: _angular_core.InputSignal<string>;
-    itemTemplate: _angular_core.InputSignal<TemplateRef<any>>;
-    emptyTemplate: _angular_core.InputSignal<TemplateRef<any>>;
-    loadingTemplate: _angular_core.InputSignal<TemplateRef<any>>;
-    selectionChange: EventEmitter<AXDataListSelectionChange>;
-    itemClick: EventEmitter<AXDataListItem>;
-    itemDoubleClick: EventEmitter<AXDataListItem>;
-    expandChange: EventEmitter<{
-        item: AXDataListItem;
-        expanded: boolean;
-    }>;
-    viewport: CdkVirtualScrollViewport;
-    protected loading: _angular_core.WritableSignal<boolean>;
-    protected totalItems: _angular_core.WritableSignal<number>;
-    protected selectedItems: _angular_core.WritableSignal<AXDataListItem[]>;
-    protected selectedKeys: _angular_core.WritableSignal<string[]>;
-    protected focusedIndex: _angular_core.WritableSignal<number>;
-    protected expandedItems: _angular_core.WritableSignal<Set<string>>;
-    protected listDataSource: AXListDataSource<AXDataListItem> | null;
-    protected hasItems: _angular_core.Signal<boolean>;
-    protected isEmpty: _angular_core.Signal<boolean>;
-    protected isMultipleSelection: _angular_core.Signal<boolean>;
-    protected showCheckboxes: _angular_core.Signal<boolean>;
-    selectionModel: _angular_core.ModelSignal<string | string[]>;
-    constructor();
-    ngOnInit(): void;
-    private setupDataSourceSubscription;
-    protected selectItem(item: AXDataListItem, event?: Event): void;
-    protected toggleMultipleSelection(item: AXDataListItem): void;
-    protected setSingleSelection(item: AXDataListItem): void;
-    protected deselectItem(item: AXDataListItem): void;
-    protected updateSelectedItems(): void;
-    protected isItemSelected(item: AXDataListItem): boolean;
-    protected isItemDisabled(item: AXDataListItem): boolean;
-    protected getItemKey(item: AXDataListItem): string;
-    protected toggleExpanded(item: AXDataListItem, event: Event): void;
-    protected hasChildren(item: AXDataListItem): boolean;
-    protected isExpanded(item: AXDataListItem): boolean;
-    protected getItemLevel(item: AXDataListItem): number;
-    protected onKeyDown(event: KeyboardEvent, item: AXDataListItem, index: number): void;
-    protected focusNextItem(currentIndex: number): void;
-    protected focusPreviousItem(currentIndex: number): void;
-    protected scrollToIndex(index: number): void;
-    protected onItemClick(item: AXDataListItem, event: Event): void;
-    protected onCheckboxChange(item: AXDataListItem, checked: boolean): void;
-    protected onCheckboxClick(event: Event): void;
-    protected onItemDoubleClick(item: AXDataListItem): void;
-    protected getItemText(item: AXDataListItem): string;
-    protected getItemDescription(item: AXDataListItem): string;
-    protected getItemTooltip(item: AXDataListItem): string;
-    protected shouldShowTooltip(item: AXDataListItem): boolean;
-    protected trackByFn: (index: number, item: AXDataListItem) => string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDataListComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXDataListComponent, "ax-data-list", never, { "dataSource": { "alias": "dataSource"; "required": true; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "isItemTruncated": { "alias": "isItemTruncated"; "required": false; "isSignal": true; }; "showItemTooltip": { "alias": "showItemTooltip"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "tooltipField": { "alias": "tooltipField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "descriptionField": { "alias": "descriptionField"; "required": false; "isSignal": true; }; "levelField": { "alias": "levelField"; "required": false; "isSignal": true; }; "childrenField": { "alias": "childrenField"; "required": false; "isSignal": true; }; "expandedField": { "alias": "expandedField"; "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; }; "selectionModel": { "alias": "selectionModel"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "itemClick": "itemClick"; "itemDoubleClick": "itemDoubleClick"; "expandChange": "expandChange"; "selectionModel": "selectionModelChange"; }, never, never, true, never>;
-}
-
-export { AXDataListComponent };
-export type { AXDataListConfig, AXDataListItem, AXDataListSelectionChange };