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

package/autocomplete/index.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
 import * as polytype from 'polytype';
-import { MXSelectionValueComponent, MXLookComponent, AXDataSource, MXSelectionBridgeService, AXAutocompleteParentComponent, MXInputBaseValueComponent, AXEvent, AXValueChangedEvent } from '@acorex/cdk/common';
+import { MXSelectionValueComponent, MXLookComponent, AXDataSource, MXSelectionBridgeService, AXAutocompleteParentComponent, MXInputBaseValueComponent, AXEvent, AXValueChangedEvent, AXItemClickEvent, AXItemSelectedEvent } from '@acorex/cdk/common';
 import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
 import { AXListComponent } from '@acorex/components/list';
 
@@ -100,6 +100,10 @@ declare class AXAutocompleteComponent extends AXAutocompleteComponent_base imple
     /** @ignore */
     protected _handleValueChanged(e: AXValueChangedEvent): void;
     /** @ignore */
+    protected _handleItemClick(e: AXItemClickEvent): void;
+    /** @ignore */
+    protected _handleItemSelected(e: AXItemSelectedEvent): void;
+    /** @ignore */
     private setDropdownSize;
     /**
      * Filters the data source based on the provided search term.
@@ -112,7 +116,7 @@ declare class AXAutocompleteComponent extends AXAutocompleteComponent_base imple
     refresh(): void;
     private get __hostName();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXAutocompleteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXAutocompleteComponent, "ax-autocomplete", 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; }; "delayTime": { "alias": "delayTime"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "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; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-footer"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXAutocompleteComponent, "ax-autocomplete", 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; }; "delayTime": { "alias": "delayTime"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "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; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onOpened": "onOpened"; "onClosed": "onClosed"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; }, never, ["ax-footer"], true, never>;
 }
 
 declare class AXAutocompleteModule {

package/data-list/README.md

@@ -0,0 +1,356 @@
+# @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

@@ -0,0 +1,102 @@
+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 };

package/fesm2022/acorex-components-autocomplete.mjs

@@ -161,6 +161,20 @@ class AXAutocompleteComponent extends classes(MXDropdownBoxBaseComponent, MXSele
         }
     }
     /** @ignore */
+    _handleItemClick(e) {
+        this.onItemClick.emit(e);
+        if (!this.multiple) {
+            this.close();
+        }
+    }
+    /** @ignore */
+    _handleItemSelected(e) {
+        this.onItemSelected.emit(e);
+        if (!this.multiple) {
+            this.close();
+        }
+    }
+    /** @ignore */
     setDropdownSize(count = 0) {
         if (this.dropdown.isActionsheetStyle) {
             this.dropdownSizes = {
@@ -211,7 +225,7 @@ class AXAutocompleteComponent extends classes(MXDropdownBoxBaseComponent, MXSele
         return this.name;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXAutocompleteComponent, isStandalone: true, selector: "ax-autocomplete", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: false, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: false, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: false, isRequired: false, transformFunction: null }, textTemplate: { classPropertyName: "textTemplate", publicName: "textTemplate", isSignal: false, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: false, isRequired: false, transformFunction: null }, delayTime: { classPropertyName: "delayTime", publicName: "delayTime", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, selectedTemplate: { classPropertyName: "selectedTemplate", publicName: "selectedTemplate", isSignal: false, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: false, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: false, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onOpened: "onOpened", onClosed: "onClosed" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "attr.name": "this.__hostName" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXAutocompleteComponent, isStandalone: true, selector: "ax-autocomplete", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: false, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: false, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: false, isRequired: false, transformFunction: null }, textTemplate: { classPropertyName: "textTemplate", publicName: "textTemplate", isSignal: false, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: false, isRequired: false, transformFunction: null }, delayTime: { classPropertyName: "delayTime", publicName: "delayTime", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, selectedTemplate: { classPropertyName: "selectedTemplate", publicName: "selectedTemplate", isSignal: false, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: false, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: false, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onOpened: "onOpened", onClosed: "onClosed", onItemClick: "onItemClick", onItemSelected: "onItemSelected" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "attr.name": "this.__hostName" } }, providers: [
             { provide: AXComponent, useExisting: AXAutocompleteComponent },
             { provide: AXFocusableComponent, useExisting: AXAutocompleteComponent },
             { provide: AXValuableComponent, useExisting: AXAutocompleteComponent },
@@ -228,7 +242,7 @@ class AXAutocompleteComponent extends classes(MXDropdownBoxBaseComponent, MXSele
                 useClass: MXSelectionBridgeService,
             },
             AXUnsubscriber,
-        ], viewQueries: [{ propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n  [look]=\"look\"\n  [hasInput]=\"false\"\n  [disabled]=\"disabled\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  [class.ax-state-multiple]=\"multiple\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container panel>\n    <div #panel class=\"ax-autocomplete-panel\" [style.min-width]=\"dropdownSizes.width\">\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ caption || placeholder | translate | async }}</ax-title>\n          <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n        </ax-header>\n      }\n      @if (renderList) {\n        <ax-list\n          [ngModel]=\"value\"\n          [readonly]=\"readonly\"\n          [multiple]=\"multiple\"\n          [textField]=\"textField\"\n          [selectionMode]=\"'item'\"\n          [valueField]=\"valueField\"\n          [textTemplate]=\"textTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [dataSource]=\"_listDataSource\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [style.height]=\"dropdownSizes.height\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n        >\n          <ng-template #empty> {{ '@acorex:common.general.no-result-found' | translate | async }} </ng-template>\n        </ax-list>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n        } @else {\n          <div class=\"ax-autocomplete-loading-container\">\n            <ax-loading></ax-loading>\n          </div>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onScrolledIndexChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n  [look]=\"look\"\n  [hasInput]=\"false\"\n  [disabled]=\"disabled\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  [class.ax-state-multiple]=\"multiple\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container panel>\n    <div #panel class=\"ax-autocomplete-panel\" [style.min-width]=\"dropdownSizes.width\">\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ caption || placeholder | translate | async }}</ax-title>\n          <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n        </ax-header>\n      }\n      @if (renderList) {\n        <ax-list\n          [ngModel]=\"value\"\n          [readonly]=\"readonly\"\n          [multiple]=\"multiple\"\n          [textField]=\"textField\"\n          [selectionMode]=\"'item'\"\n          [valueField]=\"valueField\"\n          [textTemplate]=\"textTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [dataSource]=\"_listDataSource\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [style.height]=\"dropdownSizes.height\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n          (onItemClick)=\"_handleItemClick($event)\"\n          (onItemSelected)=\"_handleItemSelected($event)\"\n        >\n          <ng-template #empty> {{ '@acorex:common.general.no-result-found' | translate | async }} </ng-template>\n        </ax-list>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n        } @else {\n          <div class=\"ax-autocomplete-loading-container\">\n            <ax-loading></ax-loading>\n          </div>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXAutocompleteComponent, decorators: [{
             type: Component,
@@ -261,6 +275,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         'disabledChange',
                         'onOpened',
                         'onClosed',
+                        'onItemClick',
+                        'onItemSelected',
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXComponent, useExisting: AXAutocompleteComponent },
                         { provide: AXFocusableComponent, useExisting: AXAutocompleteComponent },
@@ -288,7 +304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         AXDropdownBoxComponent,
                         AXDecoratorGenericComponent,
                         AXDecoratorCloseButtonComponent,
-                    ], template: "<ax-dropdown-box\n  [look]=\"look\"\n  [hasInput]=\"false\"\n  [disabled]=\"disabled\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  [class.ax-state-multiple]=\"multiple\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container panel>\n    <div #panel class=\"ax-autocomplete-panel\" [style.min-width]=\"dropdownSizes.width\">\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ caption || placeholder | translate | async }}</ax-title>\n          <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n        </ax-header>\n      }\n      @if (renderList) {\n        <ax-list\n          [ngModel]=\"value\"\n          [readonly]=\"readonly\"\n          [multiple]=\"multiple\"\n          [textField]=\"textField\"\n          [selectionMode]=\"'item'\"\n          [valueField]=\"valueField\"\n          [textTemplate]=\"textTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [dataSource]=\"_listDataSource\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [style.height]=\"dropdownSizes.height\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n        >\n          <ng-template #empty> {{ '@acorex:common.general.no-result-found' | translate | async }} </ng-template>\n        </ax-list>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n        } @else {\n          <div class=\"ax-autocomplete-loading-container\">\n            <ax-loading></ax-loading>\n          </div>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n" }]
+                    ], template: "<ax-dropdown-box\n  [look]=\"look\"\n  [hasInput]=\"false\"\n  [disabled]=\"disabled\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  [class.ax-state-multiple]=\"multiple\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container panel>\n    <div #panel class=\"ax-autocomplete-panel\" [style.min-width]=\"dropdownSizes.width\">\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ caption || placeholder | translate | async }}</ax-title>\n          <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n        </ax-header>\n      }\n      @if (renderList) {\n        <ax-list\n          [ngModel]=\"value\"\n          [readonly]=\"readonly\"\n          [multiple]=\"multiple\"\n          [textField]=\"textField\"\n          [selectionMode]=\"'item'\"\n          [valueField]=\"valueField\"\n          [textTemplate]=\"textTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [dataSource]=\"_listDataSource\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [style.height]=\"dropdownSizes.height\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n          (onItemClick)=\"_handleItemClick($event)\"\n          (onItemSelected)=\"_handleItemSelected($event)\"\n        >\n          <ng-template #empty> {{ '@acorex:common.general.no-result-found' | translate | async }} </ng-template>\n        </ax-list>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n        } @else {\n          <div class=\"ax-autocomplete-loading-container\">\n            <ax-loading></ax-loading>\n          </div>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n" }]
         }], propDecorators: { dataSource: [{
                 type: Input
             }], placeholder: [{