@acorex/components 21.0.2-next.57 → 21.0.2-next.59

package/data-table/index.d.ts

@@ -1,5 +1,5 @@
 import * as i2 from '@acorex/cdk/common';
-import { MXBaseComponent, AXDataSource, AXStyleColorType, AXEvent, AXSortOrder, AXButtonClickEvent, AXStyleLookType, AXClickEvent, AXItemClickEvent, AXValueChangedEvent, AXListDataSource } from '@acorex/cdk/common';
+import { AXSortOrder, MXBaseComponent, AXDataSource, AXStyleColorType, AXEvent, AXButtonClickEvent, AXStyleLookType, AXClickEvent, AXItemClickEvent, AXValueChangedEvent, AXListDataSource } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
 import { TemplateRef, EventEmitter, WritableSignal, ChangeDetectorRef, OnInit, DoCheck, QueryList, ElementRef, AfterViewInit, Signal } from '@angular/core';
 import * as i11 from '@acorex/core/format';
@@ -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;
 }
@@ -40,6 +72,11 @@ type AXDataTableLook = 'classic' | 'minimal';
  */
 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).
  */
@@ -85,18 +122,32 @@ declare abstract class AXBaseDataTable extends MXBaseComponent {
      */
     rowDetailsTemplate?: TemplateRef<unknown>;
     /**
-     * Resolves the semantic background color for a row.
-     * Takes precedence over `rowColorField` when provided.
+     * Resolves custom CSS classes for a row `<tr>`.
+     * Supports synchronous and asynchronous (`Promise`) return values.
      */
-    rowColor?: (row: unknown, rowIndex: number) => AXDataTableRowColorType | null | undefined;
+    rowCssClass?: AXDataTableRowCssClassResolver;
     /**
-     * Field name on each row object that holds an `AXDataTableRowColorType` value.
-     * Used when `rowColor` is not provided.
+     * 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.
      */
-    rowColorField?: string;
+    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.
      *
@@ -125,19 +176,39 @@ declare abstract class AXBaseDataTable extends MXBaseComponent {
      */
     getRowHighlightBadge(row: unknown): string | null;
     /**
-     * Returns the semantic background color for the given row, if any.
+     * Clears cached asynchronous CSS class results for rows and cells.
      */
-    getRowColor(row: unknown, rowIndex: number): AXDataTableRowColorType | null;
+    clearResolvedCssClasses(): void;
     /**
-     * Returns the CSS class name for the row background color, if any.
+     * Returns CSS classes for the given row `<tr>`, including temporary highlight styles.
      */
-    getRowColorClass(row: unknown, rowIndex: number): string;
+    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[]);
@@ -173,36 +244,6 @@ declare abstract class AXBaseDataTable extends MXBaseComponent {
     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
-     *
-     * @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>;
-}
-
 declare class AXDataTableColumnResizableDirective {
     private el;
     private renderer;
@@ -917,6 +958,7 @@ declare class AXInfiniteScrollDataTableComponent extends AXBaseDataTable impleme
      * @ignore
      */
     protected onRowHighlightsChanged(): void;
+    protected onCssClassResolved(): void;
     /**
      *  @ignore
      */
@@ -946,7 +988,7 @@ declare class AXInfiniteScrollDataTableComponent extends AXBaseDataTable impleme
      */
     protected _handleOnScroll(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXInfiniteScrollDataTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXInfiniteScrollDataTableComponent, "ax-infinite-scroll-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "rowColor": { "alias": "rowColor"; "required": false; }; "rowColorField": { "alias": "rowColorField"; "required": false; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "onPageChanged": "onPageChanged"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "focusedRowChange": "focusedRowChange"; "onScrolledIndexChanged": "onScrolledIndexChanged"; }, ["columns"], ["ax-header", "ax-footer"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXInfiniteScrollDataTableComponent, "ax-infinite-scroll-data-table", never, { "dataSource": { "alias": "dataSource"; "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; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "onPageChanged": "onPageChanged"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "focusedRowChange": "focusedRowChange"; "onScrolledIndexChanged": "onScrolledIndexChanged"; }, ["columns"], ["ax-header", "ax-footer"], true, never>;
 }
 
 /**
@@ -1275,6 +1317,7 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
      * @ignore
      */
     protected onRowHighlightsChanged(): void;
+    protected onCssClassResolved(): void;
     /**
      * Refreshes the data table with optional reset options.
      *
@@ -1356,7 +1399,7 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
         headerOnly?: boolean;
     }): 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; }; "rowColor": { "alias": "rowColor"; "required": false; }; "rowColorField": { "alias": "rowColorField"; "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>;
+    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 {
@@ -1366,4 +1409,4 @@ declare class AXDataTableModule {
 }
 
 export { AXBaseDataTable, AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableColumnResizableDirective, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXInfiniteScrollDataTableComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowExpandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent, AX_DATA_TABLE_ROW_COLOR_TYPES, AX_DATA_TABLE_ROW_HIGHLIGHT_DEFAULT_BADGE };
-export type { AXColumnsOrderChangedEvent, AXDataTableLook, AXDataTableRowClick, AXDataTableRowColorType, AXDataTableRowDbClick, AXDataTableRowHighlight, AXDataTableRowHighlightOptions, AXDataTableScrollIndexChanged, AXRowCommandItem, AXRowCommandItemClickEvent, onColumnSizeChangedEvent };
+export type { AXColumnsOrderChangedEvent, AXDataTableCellCssClassResolver, AXDataTableCssClassValue, AXDataTableLook, AXDataTableRowClick, AXDataTableRowColorType, AXDataTableRowCssClassResolver, AXDataTableRowDbClick, AXDataTableRowHighlight, AXDataTableRowHighlightOptions, AXDataTableScrollIndexChanged, AXRowCommandItem, AXRowCommandItemClickEvent, onColumnSizeChangedEvent };