@acorex/components 20.2.0-next.2 → 20.2.0-next.21

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/data-pager/index.d.ts

@@ -377,28 +377,33 @@ declare class AXDataPagerComponent extends MXValueComponent<number> {
     private _emitChangedEvent;
     /**
      * Navigates to the next page, or to the last page if on the final page.
-     * @ignore
+     *
+     * @returns void - No return value. The component navigates to the next available page.
      */
     goNextPage(): void;
     /**
      * Navigates to the last page.
-     * @ignore
+     *
+     * @returns void - No return value. The component navigates to the final page.
      */
     goLastPage(): void;
     /**
      * Navigates to the first page.
-     * @ignore
+     *
+     * @returns void - No return value. The component navigates to the first page.
      */
     goFirstPage(): void;
     /**
      * Navigates to the previous page, or to the first page if on the initial page.
-     * @ignore
+     *
+     * @returns void - No return value. The component navigates to the previous available page.
      */
     goPrevPage(): void;
     /**
      * Navigates to a specified page.
+     *
      * @param page - The page number to navigate to.
-     * @ignore
+     * @returns void - No return value. The component navigates to the specified page.
      */
     goToPage(page: number): void;
     get __hostClass(): string;

package/datetime-box/index.d.ts

@@ -2,17 +2,11 @@ import * as polytype from 'polytype';
 import * as _angular_core from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { MXInputBaseValueComponent, MXLookComponent, AXEvent, AXFocusEvent } from '@acorex/cdk/common';
-import * as i5 from '@acorex/components/calendar';
 import { MXCalendarBaseComponent, AXDateTimePickerType, AXCalendarNavigateEvent } from '@acorex/components/calendar';
-import * as i3 from '@acorex/components/datetime-input';
 import { AXDateTimeInputComponent } from '@acorex/components/datetime-input';
-import * as i6 from '@acorex/components/datetime-picker';
 import { AXDateTimePickerComponent } from '@acorex/components/datetime-picker';
 import { AXDecoratorGenericComponent } from '@acorex/components/decorators';
-import * as i4 from '@acorex/components/dropdown';
 import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
-import * as i1 from '@angular/common';
-import * as i2 from '@angular/forms';
 
 declare const AXDateTimeBoxComponent_base: polytype.Polytype.ClusteredConstructor<[{
     new (): MXInputBaseValueComponent<Date>;
@@ -100,13 +94,14 @@ declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
      *  @ignore
      */
     protected _handleInputOnClick(): void;
+    private get __hostName();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDateTimeBoxComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXDateTimeBoxComponent, "ax-datetime-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; }; "depth": { "alias": "depth"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "allowTyping": { "alias": "allowTyping"; "required": false; "isSignal": true; }; "calendar": { "alias": "calendar"; "required": false; "isSignal": true; }; "picker": { "alias": "picker"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onOpened": "onOpened"; "onClosed": "onClosed"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "formatChange": "formatChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], true, never>;
 }
 
 declare class AXDateTimeBoxModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDateTimeBoxModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXDateTimeBoxModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.AXDateTimeInputModule, typeof i4.AXDropdownModule, typeof i5.AXCalendarModule, typeof i6.AXDateTimePickerModule, typeof AXDateTimeBoxComponent], [typeof AXDateTimeBoxComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXDateTimeBoxModule, never, [typeof AXDateTimeBoxComponent], [typeof AXDateTimeBoxComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXDateTimeBoxModule>;
 }
 

package/datetime-input/index.d.ts

@@ -1,9 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { MXInputBaseValueComponent, AXClickEvent } from '@acorex/cdk/common';
 import { AXDateTimePickerType } from '@acorex/components/calendar';
-import * as i1 from '@angular/common';
-import * as i2 from '@angular/forms';
-import * as i3 from '@acorex/core/date-time';
 
 /**
  * A component for date and time input with various custom features.
@@ -122,13 +119,14 @@ declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
      *  @ignore
      */
     private _detectValueChanges;
+    private get __hostName();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDateTimeInputComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXDateTimeInputComponent, "ax-datetime-input", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "allowTyping": { "alias": "allowTyping"; "required": false; "isSignal": true; }; "calendar": { "alias": "calendar"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "picker": { "alias": "picker"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onClick": "onClick"; }, never, ["ax-validation-rule"], true, never>;
 }
 
 declare class AXDateTimeInputModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDateTimeInputModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXDateTimeInputModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.AXDateTimeModule, typeof AXDateTimeInputComponent], [typeof AXDateTimeInputComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXDateTimeInputModule, never, [typeof AXDateTimeInputComponent], [typeof AXDateTimeInputComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXDateTimeInputModule>;
 }
 

package/datetime-picker/index.d.ts

@@ -2,18 +2,9 @@ import * as polytype from 'polytype';
 import * as _angular_core from '@angular/core';
 import { OnInit, InjectionToken } from '@angular/core';
 import { MXValueComponent, AXValueChangedEvent } from '@acorex/cdk/common';
-import * as i6 from '@acorex/components/calendar';
 import { MXCalendarBaseComponent, AXDateTimePickerType, AXCalendarNavigateEvent } from '@acorex/components/calendar';
-import * as i3 from '@acorex/components/tabs';
 import { AXTabsComponent, AXTabStripChangedEvent } from '@acorex/components/tabs';
-import * as i4 from '@acorex/core/date-time';
 import { AXDateTimeParts, AXDateTime } from '@acorex/core/date-time';
-import * as i1 from '@angular/common';
-import * as i2 from '@angular/forms';
-import * as i5 from '@acorex/components/button';
-import * as i7 from '@acorex/components/picker';
-import * as i8 from '@acorex/core/translation';
-import * as i9 from '@acorex/components/decorators';
 
 declare const AXDateTimePickerComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXCalendarBaseComponent, {
     new (): MXValueComponent<Date>;
@@ -30,6 +21,12 @@ declare class AXDateTimePickerComponent extends AXDateTimePickerComponent_base i
     private formatService;
     protected buttonText: _angular_core.Signal<"dateTime.today" | "dateTime.now">;
     private defaultConfig;
+    protected pickerHoursMinValue: _angular_core.WritableSignal<number>;
+    protected pickerHoursMaxValue: _angular_core.WritableSignal<number>;
+    protected pickerMinuteMinValue: _angular_core.WritableSignal<number>;
+    protected pickerMinuteMaxValue: _angular_core.WritableSignal<number>;
+    protected pickerSecondMinValue: _angular_core.WritableSignal<number>;
+    protected pickerSecondMaxValue: _angular_core.WritableSignal<number>;
     /**
      *  @ignore
      */
@@ -104,6 +101,8 @@ declare class AXDateTimePickerComponent extends AXDateTimePickerComponent_base i
      *  @ignore
      */
     protected _handleCalendarOnValueChanged(e: AXValueChangedEvent<Date>): void;
+    private checkSelectedMinValue;
+    private checkSelectedMaxValue;
     /**
      *  @ignore
      */
@@ -139,7 +138,7 @@ declare function dateTimePickerConfig(config?: PartialDateTimePickerConfig): AXD
 
 declare class AXDateTimePickerModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDateTimePickerModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXDateTimePickerModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.AXTabsModule, typeof i4.AXDateTimeModule, typeof i5.AXButtonModule, typeof i6.AXCalendarModule, typeof i7.AXPickerModule, typeof i8.AXTranslationModule, typeof i9.AXDecoratorModule, typeof AXDateTimePickerComponent], [typeof AXDateTimePickerComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXDateTimePickerModule, never, [typeof AXDateTimePickerComponent], [typeof AXDateTimePickerComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXDateTimePickerModule>;
 }