@acorex/components 21.0.2-next.8 → 21.0.3-next.1

package/types/acorex-components-data-pager.d.ts

@@ -59,6 +59,7 @@ declare abstract class AXDataPagerParentComponent {
 declare abstract class AXDataPagerChild extends MXInteractiveComponent {
     protected _parent: AXDataPagerParentComponent;
     protected _unsubscriber: AXUnsubscriber;
+    private _localeService;
     /**
      *  @ignore
      */
@@ -130,14 +131,8 @@ declare class AXDataPagerInputSelectorComponent extends AXDataPagerChild {
  * @category Components
  */
 declare class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
-    /**
-     *  @ignore
-     */
-    protected rtl: boolean;
-    /**
-     *  @ignore
-     */
-    ngOnInit(): void;
+    private localeService;
+    protected readonly isRtl: i0.Signal<boolean>;
     /**
      *  @ignore
      */
@@ -165,19 +160,11 @@ declare class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
     protected _lastPage: number;
     protected _loading: boolean;
     private localeService;
-    protected rtlstatus: i0.Signal<boolean>;
+    protected readonly isRtl: i0.Signal<boolean>;
     /**
      *  @ignore
      */
     private _displayCount;
-    /**
-     *  @ignore
-     */
-    protected rtl: boolean;
-    /**
-     *  @ignore
-     */
-    constructor();
     /**
      *  @ignore
      */
@@ -236,14 +223,8 @@ declare class AXDataPagerPageSizesComponent extends AXDataPagerChild {
  * @category Components
  */
 declare class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
-    /**
-     *  @ignore
-     */
-    protected rtl: boolean;
-    /**
-     *  @ignore
-     */
-    ngOnInit(): void;
+    private localeService;
+    protected readonly isRtl: i0.Signal<boolean>;
     /**
      *  @ignore
      */

package/types/acorex-components-data-table.d.ts

@@ -1,7 +1,7 @@
 import * as i2 from '@acorex/cdk/common';
-import { MXBaseComponent, AXDataSource, AXEvent, AXSortOrder, AXButtonClickEvent, AXStyleLookType, AXClickEvent, AXItemClickEvent, AXValueChangedEvent } from '@acorex/cdk/common';
+import { AXSortOrder, MXBaseComponent, AXDataSource, AXStyleColorType, AXEvent, AXButtonClickEvent, AXStyleLookType, AXClickEvent, AXItemClickEvent, AXValueChangedEvent } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
-import { TemplateRef, EventEmitter, ChangeDetectorRef, OnInit, AfterViewInit, WritableSignal, Signal, QueryList } from '@angular/core';
+import { TemplateRef, EventEmitter, WritableSignal, ChangeDetectorRef, OnInit, AfterViewInit, Signal, QueryList } from '@angular/core';
 import * as i11 from '@acorex/core/format';
 import { AXFormatOptions } from '@acorex/core/format';
 import * as i8 from '@acorex/components/button';
@@ -19,6 +19,38 @@ import { AXDataPagerComponent, AXDataPagerChangedEvent } from '@acorex/component
 import * as i13 from '@angular/cdk/drag-drop';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 
+declare abstract class AXDataTableColumnComponent {
+    caption: string;
+    /**
+     * Width of the column.
+     * - string: e.g., '180px', '20%'
+     * - number: e.g., 180 (treated as pixels)
+     * - 'auto': sizes from headers when the table first renders, then refits from row content once data loads
+     *
+     * @defaultValue 'auto'
+     */
+    width: string | number | 'auto';
+    fixed: 'start' | 'end' | undefined;
+    allowSorting: boolean;
+    allowResizing: boolean;
+    /**
+     * When true, shows the cell content as tooltip on hover (via `axTooltip`).
+     */
+    hasTitle: boolean;
+    sortIndex: number | undefined;
+    sortOrder: AXSortOrder | undefined;
+    abstract get renderCellTemplate(): TemplateRef<unknown>;
+    abstract get renderHeaderTemplate(): TemplateRef<unknown>;
+    abstract get renderFooterTemplate(): TemplateRef<unknown>;
+    abstract get loadingEnabled(): boolean;
+    abstract get name(): string;
+    get cssClass(): string | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableColumnComponent, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AXDataTableColumnComponent>;
+}
+
+type AXDataTableCssClassValue = string | null | undefined;
+
 interface AXDataTableScrollIndexChanged extends AXEvent {
     index: number;
 }
@@ -34,6 +66,59 @@ interface onColumnSizeChangedEvent extends AXEvent {
 }
 interface AXDataTableRowDbClick extends AXDataTableRowClick {
 }
+type AXDataTableLook = 'classic' | 'minimal';
+/**
+ * Semantic row background colors supported by the data table.
+ */
+type AXDataTableRowColorType = Exclude<AXStyleColorType, 'default'>;
+declare const AX_DATA_TABLE_ROW_COLOR_TYPES: AXDataTableRowColorType[];
+
+/** Row CSS class resolver; may return a value synchronously or as a `Promise`. */
+type AXDataTableRowCssClassResolver = (row: unknown, rowIndex: number) => AXDataTableCssClassValue | Promise<AXDataTableCssClassValue>;
+/** Cell CSS class resolver; may return a value synchronously or as a `Promise`. */
+type AXDataTableCellCssClassResolver = (row: unknown, column: AXDataTableColumnComponent, rowIndex: number) => AXDataTableCssClassValue | Promise<AXDataTableCssClassValue>;
+/**
+ * Options for temporarily highlighting a row (e.g. after create).
+ */
+interface AXDataTableRowHighlightOptions {
+    /** Semantic row background color. @defaultValue `'success'` */
+    color?: AXDataTableRowColorType;
+    /**
+     * Translation key for the row badge.
+     * Pass `null` to hide the badge.
+     * @defaultValue `'@acorex:dataTable.rowHighlight.new'`
+     */
+    badge?: string | null;
+    /** Whether the row background should pulse. @defaultValue `true` */
+    pulse?: boolean;
+    /** Whether the row should be pinned above other rows until refresh. @defaultValue `true` */
+    pinned?: boolean;
+}
+interface AXDataTableRowHighlight {
+    row: unknown;
+    color: AXDataTableRowColorType;
+    badge: string | null;
+    pulse: boolean;
+    pinned: boolean;
+    order: number;
+}
+declare const AX_DATA_TABLE_ROW_HIGHLIGHT_DEFAULT_BADGE = "@acorex:dataTable.rowHighlight.new";
+/** Options for auto-fitting a single column to its content width. */
+interface AXDataTableAutoFitColumnOptions {
+    /** Maximum width in pixels. */
+    maxWidth?: number;
+    /** When true, only the header cell is measured (e.g. before row data exists). */
+    headerOnly?: boolean;
+}
+/** Options for auto-fitting all columns to their content width. */
+interface AXDataTableAutoFitAllColumnsOptions {
+    /** When true, fixed columns are skipped. @defaultValue `true` */
+    skipFixed?: boolean;
+    /** When true, auto-fit is skipped while data is loading. @defaultValue `true` */
+    skipLoading?: boolean;
+    /** Maximum width in pixels for any column. @defaultValue `500` */
+    maxWidth?: number;
+}
 declare abstract class AXBaseDataTable extends MXBaseComponent {
     dataSource: AXDataSource<unknown>;
     /**
@@ -52,13 +137,94 @@ declare abstract class AXBaseDataTable extends MXBaseComponent {
      * Template for expanded custom row content.
      */
     rowDetailsTemplate?: TemplateRef<unknown>;
+    /**
+     * Resolves custom CSS classes for a row `<tr>`.
+     * Supports synchronous and asynchronous (`Promise`) return values.
+     */
+    rowCssClass?: AXDataTableRowCssClassResolver;
+    /**
+     * Resolves custom CSS classes for an individual body cell `<td>`.
+     * Column `cssClass` is preserved and merged with the resolved value.
+     * Supports synchronous and asynchronous (`Promise`) return values.
+     */
+    cellCssClass?: AXDataTableCellCssClassResolver;
+    /**
+     * When set, matching text in the table body is highlighted.
+     */
+    get highlightText(): string | undefined;
+    set highlightText(value: string | undefined);
     selectedRowsChange: EventEmitter<unknown[]>;
+    protected readonly highlightedRows: WritableSignal<Map<string | number, AXDataTableRowHighlight>>;
+    private readonly rowCssClassCache;
+    private readonly cellCssClassCache;
+    private readonly highlightService;
+    private readonly platformId;
+    private readonly destroyRef;
+    private _highlightText?;
+    private highlightOrder;
+    private textHighlightFrame?;
+    constructor();
     /**
      * Gets the data source key field name.
      *
      * @returns string - The key field name for the data source.
      */
     getDataSourceKey(): string;
+    /**
+     * Temporarily highlights a row with optional pin, badge, and pulse styling.
+     * Highlights are cleared on the next grid `refresh()` unless `preserveHighlights` is set.
+     */
+    highlightRow(row: unknown, options?: AXDataTableRowHighlightOptions): void;
+    /**
+     * Temporarily highlights multiple rows.
+     */
+    highlightRows(rows: unknown[], options?: AXDataTableRowHighlightOptions): void;
+    /**
+     * Clears all temporary row highlights.
+     */
+    clearRowHighlights(): void;
+    /**
+     * Returns the temporary highlight state for a row, if any.
+     */
+    getRowHighlight(row: unknown): AXDataTableRowHighlight | null;
+    /**
+     * Returns the translation key for the row highlight badge, if any.
+     */
+    getRowHighlightBadge(row: unknown): string | null;
+    /**
+     * Clears cached asynchronous CSS class results for rows and cells.
+     */
+    clearResolvedCssClasses(): void;
+    /**
+     * Returns CSS classes for the given row `<tr>`, including temporary highlight styles.
+     */
+    getRowCssClass(row: unknown, rowIndex: number): string;
+    /**
+     * Returns CSS classes for a body cell, merging column `cssClass` with `cellCssClass`.
+     */
+    getCellCssClass(row: unknown, column: AXDataTableColumnComponent, rowIndex: number): string;
+    /**
+     * Merges pinned highlighted rows with loaded items.
+     */
+    protected mergeRowsWithHighlights(items: unknown[]): unknown[];
+    protected resolveRowKey(row: unknown): string | number | null;
+    protected abstract onRowHighlightsChanged(): void;
+    protected onCssClassResolved(): void;
+    /**
+     * Schedules text highlighting after the current render frame.
+     */
+    protected scheduleTextHighlight(): void;
+    /**
+     * Returns the DOM root used for text highlighting.
+     */
+    protected getTextHighlightRoot(): HTMLElement | null;
+    protected getTextHighlightSelector(): string;
+    protected applyTextHighlight(): void;
+    protected clearTextHighlight(): void;
+    private resolveRowCssClass;
+    private resolveCellCssClass;
+    private resolveRowCssClassCacheKey;
+    private resolveCellCssClassCacheKey;
     private _selectedRows;
     get selectedRows(): unknown[];
     set selectedRows(v: unknown[]);
@@ -90,38 +256,23 @@ declare abstract class AXBaseDataTable extends MXBaseComponent {
      * @returns void - No return value.
      */
     unSelectRows(...rows: unknown[]): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXBaseDataTable, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<AXBaseDataTable>;
-}
-
-declare abstract class AXDataTableColumnComponent {
-    caption: string;
     /**
-     * Width of the column.
-     * - string: e.g., '180px', '20%'
-     * - number: e.g., 180 (treated as pixels)
-     * - 'auto': sizes from headers when the table first renders, then refits from row content once data loads
+     * Auto-fits all resizable columns to their content width.
+     * Call this whenever row data or templates change and column widths should be recalculated.
+     */
+    abstract autoFitAllColumns(options?: AXDataTableAutoFitAllColumnsOptions): void;
+    /**
+     * Auto-fits a single column to its content width.
      *
-     * @defaultValue 'auto'
+     * @param columnIndex - 0-based index in the columns `QueryList`.
      */
-    width: string | number | 'auto';
-    fixed: 'start' | 'end' | undefined;
-    allowSorting: boolean;
-    allowResizing: boolean;
+    abstract autoFitColumn(columnIndex: number, options?: AXDataTableAutoFitColumnOptions): void;
     /**
-     * When true, shows the cell content as tooltip on hover (via `axTooltip`).
+     * Auto-fits a single column by its `name` / data field.
      */
-    hasTitle: boolean;
-    sortIndex: number | undefined;
-    sortOrder: AXSortOrder | undefined;
-    abstract get renderCellTemplate(): TemplateRef<unknown>;
-    abstract get renderHeaderTemplate(): TemplateRef<unknown>;
-    abstract get renderFooterTemplate(): TemplateRef<unknown>;
-    abstract get loadingEnabled(): boolean;
-    abstract get name(): string;
-    get cssClass(): string | undefined;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableColumnComponent, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<AXDataTableColumnComponent>;
+    abstract autoFitColumnByName(columnName: string, options?: AXDataTableAutoFitColumnOptions): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXBaseDataTable, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AXBaseDataTable>;
 }
 
 declare class AXDataTableColumnResizableDirective {
@@ -473,7 +624,7 @@ declare class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
  * @category Components
  */
 declare class AXRowIndexColumnComponent extends AXDataTableColumnComponent implements OnInit {
-    private grid;
+    protected grid: AXBaseDataTable;
     private unsubscriber;
     /**
      *  @ignore
@@ -613,6 +764,15 @@ declare class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
  */
 declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, AfterViewInit {
     #private;
+    /**
+     * Controls the table look.
+     *
+     * - `classic` — classic look (default).
+     * - `minimal` — minimal look.
+     *
+     * @defaultValue `'classic'`
+     */
+    look: i0.InputSignal<AXDataTableLook>;
     private _unsubscriber;
     private _zone;
     private document;
@@ -846,6 +1006,11 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
      * Returns true if in manual mode and no data has been loaded yet.
      */
     get showNoDataLoadedYet(): boolean;
+    /**
+     * Root rows from the latest data source load (before highlight merge).
+     * @ignore
+     */
+    private lastLoadedRows;
     /**
      *  @ignore
      */
@@ -913,6 +1078,12 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
      *  @ignore
      */
     protected getSort(column: AXDataTableColumnComponent): string | undefined;
+    /**
+     * Re-applies pinned highlighted rows to the current view.
+     * @ignore
+     */
+    protected onRowHighlightsChanged(): void;
+    protected onCssClassResolved(): void;
     /**
      * Refreshes the data table with optional reset options.
      *
@@ -922,11 +1093,13 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
      */
     refresh(options?: {
         reset?: boolean;
+        preserveHighlights?: boolean;
     }): void;
     /**
      *  @ignore
      */
     protected calculateRowIndex(index: number): number;
+    private countHighlightBadgeRowsBefore;
     /**
      * Handles double-click on resize handle to auto-fit column width.
      *
@@ -963,36 +1136,23 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
      */
     private autoFitColumnsWithAutoWidth;
     /**
-     * Auto-fits all columns width based on their content.
-     *
-     * @param options - Configuration options
-     * @param options.skipFixed - If true, skips fixed columns (default: true)
-     * @param options.skipLoading - If true, skips if data is loading (default: true)
-     * @param options.maxWidth - Maximum width for any column in pixels (default: 500)
-     * @returns void
+     * Auto-fits all resizable columns to their content width.
+     * Call this whenever row data or templates change and column widths should be recalculated.
      */
-    autoFitAllColumns(options?: {
-        skipFixed?: boolean;
-        skipLoading?: boolean;
-        maxWidth?: number;
-    }): void;
+    autoFitAllColumns(options?: AXDataTableAutoFitAllColumnsOptions): void;
     /**
-     * Auto-fits a column width based on its content.
+     * Auto-fits a single column to its content width.
      * Similar to Excel's "AutoFit Column Width" feature.
-     * Uses an invisible helper table to measure actual content width without affecting the main table.
      *
-     * @param columnIndex - The index of the column to auto-fit (0-based, based on columns QueryList)
-     * @param options - Configuration options
-     * @param options.maxWidth - Maximum width for the column in pixels (default: none)
-     * @param options.headerOnly - When true, only the header cell is measured (e.g. before row data exists)
-     * @returns void
+     * @param columnIndex - 0-based index in the columns `QueryList`.
      */
-    autoFitColumn(columnIndex: number, options?: {
-        maxWidth?: number;
-        headerOnly?: boolean;
-    }): void;
+    autoFitColumn(columnIndex: number, options?: AXDataTableAutoFitColumnOptions): void;
+    /**
+     * Auto-fits a single column by its `name` / data field.
+     */
+    autoFitColumnByName(columnName: string, options?: AXDataTableAutoFitColumnOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableComponent, "ax-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "selectedRows": { "alias": "selectedRows"; "required": false; }; "parentField": { "alias": "parentField"; "required": false; }; "hasChildrenField": { "alias": "hasChildrenField"; "required": false; }; "rowDetailsTemplate": { "alias": "rowDetailsTemplate"; "required": false; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "noDataTemplate": { "alias": "noDataTemplate"; "required": false; }; "alternative": { "alias": "alternative"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fixedHeader": { "alias": "fixedHeader"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "fixedFooter": { "alias": "fixedFooter"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "allowReordering": { "alias": "allowReordering"; "required": false; }; "paging": { "alias": "paging"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "focusedRowChange": "focusedRowChange"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "onColumnsOrderChanged": "onColumnsOrderChanged"; "onColumnSizeChanged": "onColumnSizeChanged"; "onPageChanged": "onPageChanged"; }, ["customDataPager", "columns"], ["ax-header", "ax-data-pager", "ax-footer"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableComponent, "ax-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "selectedRows": { "alias": "selectedRows"; "required": false; }; "parentField": { "alias": "parentField"; "required": false; }; "hasChildrenField": { "alias": "hasChildrenField"; "required": false; }; "rowDetailsTemplate": { "alias": "rowDetailsTemplate"; "required": false; }; "rowCssClass": { "alias": "rowCssClass"; "required": false; }; "cellCssClass": { "alias": "cellCssClass"; "required": false; }; "highlightText": { "alias": "highlightText"; "required": false; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "noDataTemplate": { "alias": "noDataTemplate"; "required": false; }; "alternative": { "alias": "alternative"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fixedHeader": { "alias": "fixedHeader"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "fixedFooter": { "alias": "fixedFooter"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "allowReordering": { "alias": "allowReordering"; "required": false; }; "paging": { "alias": "paging"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "focusedRowChange": "focusedRowChange"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "onColumnsOrderChanged": "onColumnsOrderChanged"; "onColumnSizeChanged": "onColumnSizeChanged"; "onPageChanged": "onPageChanged"; }, ["customDataPager", "columns"], ["ax-header", "ax-data-pager", "ax-footer"], true, never>;
 }
 
 declare class AXDataTableModule {
@@ -1001,5 +1161,5 @@ declare class AXDataTableModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<AXDataTableModule>;
 }
 
-export { AXBaseDataTable, AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableColumnResizableDirective, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowExpandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
-export type { AXColumnsOrderChangedEvent, AXDataTableRowClick, AXDataTableRowDbClick, AXDataTableScrollIndexChanged, AXRowCommandItem, AXRowCommandItemClickEvent, onColumnSizeChangedEvent };
+export { AXBaseDataTable, AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableColumnResizableDirective, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowExpandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent, AX_DATA_TABLE_ROW_COLOR_TYPES, AX_DATA_TABLE_ROW_HIGHLIGHT_DEFAULT_BADGE };
+export type { AXColumnsOrderChangedEvent, AXDataTableAutoFitAllColumnsOptions, AXDataTableAutoFitColumnOptions, AXDataTableCellCssClassResolver, AXDataTableCssClassValue, AXDataTableLook, AXDataTableRowClick, AXDataTableRowColorType, AXDataTableRowCssClassResolver, AXDataTableRowDbClick, AXDataTableRowHighlight, AXDataTableRowHighlightOptions, AXDataTableScrollIndexChanged, AXRowCommandItem, AXRowCommandItemClickEvent, onColumnSizeChangedEvent };

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

@@ -1,13 +1,31 @@
+import { TimeUnit } from '@acorex/core/date-time';
+import * as dist_packages_core_types_acorex_core_date_time from 'dist/packages/core/types/acorex-core-date-time';
+import * as _acorex_components_datetime_box from '@acorex/components/datetime-box';
 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 { MXCalendarBaseComponent, AXDateTimePickerType, AXCalendarNavigateEvent } from '@acorex/components/calendar';
+import { MXInputBaseValueComponent, MXLookComponent, AXEvent, AXFocusEvent, AXValueChangedEvent } from '@acorex/cdk/common';
+import { MXCalendarBaseComponent, AXDateTimePickerType, AXCalendarNavigationLookType, AXCalendarYearRange, AXCalendarNavigateEvent } from '@acorex/components/calendar';
 import { AXDateTimeInputComponent } from '@acorex/components/datetime-input';
 import { AXDateTimePickerComponent } from '@acorex/components/datetime-picker';
 import { AXDecoratorGenericComponent } from '@acorex/components/decorators';
 import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
 
+/**
+ * Controls how date/time is chosen in the datetime box.
+ * - `default`: text input with calendar popup.
+ * - `classic`: inline select boxes for year, month, day, and optionally hour/minute.
+ */
+type AXDateTimeBoxLookType = 'default' | 'classic';
+type AXDateTimeBoxClassicPart = Extract<TimeUnit, 'year' | 'month' | 'day' | 'hour' | 'minute'>;
+interface AXDateTimeBoxClassicField {
+    part: AXDateTimeBoxClassicPart;
+    dropdownWidth: string;
+    maxVisibleItems: number;
+}
+declare const AX_DATETIME_BOX_CLASSIC_DATE_FIELDS: AXDateTimeBoxClassicField[];
+declare const AX_DATETIME_BOX_CLASSIC_TIME_FIELDS: AXDateTimeBoxClassicField[];
+
 declare const AXDateTimeBoxComponent_base: polytype.Polytype.ClusteredConstructor<[{
     new (): MXInputBaseValueComponent<Date>;
     ɵfac: _angular_core.ɵɵFactoryDeclaration<MXInputBaseValueComponent<any>, never>;
@@ -19,7 +37,6 @@ declare const AXDateTimeBoxComponent_base: polytype.Polytype.ClusteredConstructo
  * @category Components
  */
 declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
-    #private;
     /**
      *  @ignore
      */
@@ -51,17 +68,62 @@ declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
     readonly calendar: _angular_core.InputSignal<string>;
     readonly weekend: _angular_core.InputSignal<number[]>;
     readonly weekdays: _angular_core.InputSignal<number[]>;
+    /**
+     * Day view navigation style of the embedded calendar.
+     */
+    readonly calendarLook: _angular_core.InputSignal<AXCalendarNavigationLookType>;
+    /**
+     * Years shown in the year selector when `calendarLook` is `select`.
+     * Use a number for equal past/future ranges, or `{ past, future }` for asymmetric ranges.
+     * `minValue` and `maxValue` take priority when set.
+     */
+    readonly yearRange: _angular_core.InputSignal<AXCalendarYearRange>;
+    /**
+     * Input style of the datetime box.
+     * - `default`: text input with calendar popup.
+     * - `classic`: inline select boxes for date/time parts.
+     */
+    readonly boxLook: _angular_core.InputSignal<AXDateTimeBoxLookType>;
     /**
      * @deprecated use locale & mode instead
      */
     readonly format: _angular_core.InputSignal<string>;
     protected _editingDateObj: _angular_core.WritableSignal<Date>;
-    protected _calendarSystem: _angular_core.WritableSignal<string>;
-    private _format;
+    protected readonly _calendarSystem: _angular_core.Signal<string>;
+    protected readonly _resolvedFormat: _angular_core.Signal<string>;
+    protected readonly _classicDateFields: _acorex_components_datetime_box.AXDateTimeBoxClassicField[];
+    protected readonly _classicTimeFields: _acorex_components_datetime_box.AXDateTimeBoxClassicField[];
+    private readonly _classicTimeOptions;
+    protected _classicDate: _angular_core.Signal<dist_packages_core_types_acorex_core_date_time.AXDateTime>;
+    protected _classicYearOptions: _angular_core.Signal<{
+        id: number;
+        text: string;
+    }[]>;
+    protected _classicMonthOptions: _angular_core.Signal<{
+        id: number;
+        text: string;
+    }[]>;
+    protected _classicDayOptions: _angular_core.Signal<{
+        id: number;
+        text: string;
+    }[]>;
+    protected get _classicBoxClass(): string;
+    protected get _classicHasDatePart(): boolean;
+    protected get _classicHasTimePart(): boolean;
     /**
      *  @ignore
      */
-    protected _handleInputModelChange(value: Date | null): void;
+    protected _classicPartValue(part: AXDateTimeBoxClassicPart): {
+        id: number;
+        text: string;
+    } | null;
+    /**
+     *  @ignore
+     */
+    protected _classicPartOptions(part: AXDateTimeBoxClassicPart): {
+        id: number;
+        text: string;
+    }[];
     /**
      *  @ignore
      */
@@ -92,13 +154,21 @@ declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
      * @ignore
      */
     internalValueChanged(value: any): void;
+    /**
+     *  @ignore
+     */
+    protected _handleClassicPartChanged(e: AXValueChangedEvent, part: AXDateTimeBoxClassicPart): void;
+    /**
+     *  @ignore
+     */
+    private _readSelectValue;
     /**
      *  @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; }; "picker": { "alias": "picker"; "required": false; "isSignal": true; }; "calendar": { "alias": "calendar"; "required": false; "isSignal": true; }; "weekend": { "alias": "weekend"; "required": false; "isSignal": true; }; "weekdays": { "alias": "weekdays"; "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>;
+    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; }; "picker": { "alias": "picker"; "required": false; "isSignal": true; }; "calendar": { "alias": "calendar"; "required": false; "isSignal": true; }; "weekend": { "alias": "weekend"; "required": false; "isSignal": true; }; "weekdays": { "alias": "weekdays"; "required": false; "isSignal": true; }; "calendarLook": { "alias": "calendarLook"; "required": false; "isSignal": true; }; "yearRange": { "alias": "yearRange"; "required": false; "isSignal": true; }; "boxLook": { "alias": "boxLook"; "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-suffix", "ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], true, never>;
 }
 
 declare class AXDateTimeBoxModule {
@@ -107,4 +177,5 @@ declare class AXDateTimeBoxModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXDateTimeBoxModule>;
 }
 
-export { AXDateTimeBoxComponent, AXDateTimeBoxModule };
+export { AXDateTimeBoxComponent, AXDateTimeBoxModule, AX_DATETIME_BOX_CLASSIC_DATE_FIELDS, AX_DATETIME_BOX_CLASSIC_TIME_FIELDS };
+export type { AXDateTimeBoxClassicField, AXDateTimeBoxClassicPart, AXDateTimeBoxLookType };

package/types/acorex-components-datetime-input.d.ts

@@ -34,7 +34,7 @@ declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
      * @description The calendar type to use for the datetime input.
      */
     calendar: _angular_core.InputSignal<string>;
-    protected _calendarSystem: _angular_core.WritableSignal<string>;
+    protected readonly _calendarSystem: _angular_core.Signal<string>;
     private _activePart;
     private _editingDate;
     /**
@@ -49,7 +49,7 @@ declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
      */
     onClick: _angular_core.OutputEmitterRef<AXClickEvent>;
     picker: _angular_core.InputSignal<AXDateTimePickerType>;
-    private _format;
+    protected readonly _resolvedFormat: _angular_core.Signal<string>;
     /**
      * @deprecated use locale & mode instead
      */