@acorex/components 22.0.0-next.9 → 22.0.1

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

@@ -155,6 +155,7 @@ declare abstract class AXBaseDataTable extends MXBaseComponent {
     set highlightText(value: string | undefined);
     selectedRowsChange: EventEmitter<unknown[]>;
     protected readonly highlightedRows: WritableSignal<Map<string | number, AXDataTableRowHighlight>>;
+    protected readonly highlightedColumns: WritableSignal<Map<string, AXDataTableRowColorType>>;
     private readonly rowCssClassCache;
     private readonly cellCssClassCache;
     private readonly highlightService;
@@ -180,9 +181,40 @@ declare abstract class AXBaseDataTable extends MXBaseComponent {
      */
     highlightRows(rows: unknown[], options?: AXDataTableRowHighlightOptions): void;
     /**
-     * Clears all temporary row highlights.
+     * Applies a color highlight to rows by their key (id) values.
+     * Unlike `highlightRow`, no badge, pulse, or pinning is applied.
+     *
+     * @param keys - Key (id) values of the rows to highlight.
+     * @param color - Semantic highlight color. @defaultValue `'primary'`
+     */
+    highlightRowsByKey(keys: (string | number)[], color?: AXDataTableRowColorType): void;
+    /**
+     * Clears temporary row highlights.
+     *
+     * @param keys - When provided, only highlights of rows with these key (id) values are cleared.
+     */
+    clearRowHighlights(keys?: (string | number)[]): void;
+    /**
+     * Applies a color highlight to one or more columns.
+     *
+     * @param columnNames - Column identifiers; either the column `name` (e.g. `cl-firstName`) or its `dataField`.
+     * @param color - Semantic highlight color. @defaultValue `'primary'`
+     */
+    highlightColumns(columnNames: string | string[], color?: AXDataTableRowColorType): void;
+    /**
+     * Clears column highlights.
+     *
+     * @param columnNames - When provided, only highlights of these columns are cleared.
+     */
+    clearColumnHighlights(columnNames?: string | string[]): void;
+    /**
+     * Returns the highlight color of a column, if any.
+     */
+    getColumnHighlightColor(column: AXDataTableColumnComponent): AXDataTableRowColorType | null;
+    /**
+     * Returns the CSS class of a highlighted column, applied to its header and body cells.
      */
-    clearRowHighlights(): void;
+    getColumnCssClass(column: AXDataTableColumnComponent): string;
     /**
      * Returns the temporary highlight state for a row, if any.
      */
@@ -200,7 +232,7 @@ declare abstract class AXBaseDataTable extends MXBaseComponent {
      */
     getRowCssClass(row: unknown, rowIndex: number): string;
     /**
-     * Returns CSS classes for a body cell, merging column `cssClass` with `cellCssClass`.
+     * Returns CSS classes for a body cell, merging column `cssClass`, column highlight, and `cellCssClass`.
      */
     getCellCssClass(row: unknown, column: AXDataTableColumnComponent, rowIndex: number): string;
     /**
@@ -396,7 +428,7 @@ declare class AXDataTableTextColumnComponent extends AXDataTableColumnComponent
     /**
      *  @ignore
      */
-    protected handleExpandRow(row: any): Promise<void>;
+    protected handleExpandRow(row: any, event?: Event): Promise<void>;
     /**
      * Generates a unique name based on the `dataField` value.
      */
@@ -609,7 +641,7 @@ declare class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
     /**
      *  @ignore
      */
-    protected handleExpandRow(row: any): Promise<void>;
+    protected handleExpandRow(row: any, event?: Event): Promise<void>;
     /**
      * Indicates whether loading is enabled for the column.
      */
@@ -821,6 +853,11 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
      *  @ignore
      */
     protected normalColumnsList: Signal<any[]>;
+    /**
+     * True when a text column owns the tree expander. That column stays `width: auto`
+     * so leftover table space is used for nested indent instead of the empty spacer.
+     */
+    protected hasTreeFillColumn: Signal<boolean>;
     /**
      *  @ignore
      */
@@ -1019,11 +1056,16 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
      *  @ignore
      */
     ngOnInit(): void;
+    private applyLoadedRows;
     /**
      *  @ignore
      */
     ngAfterViewInit(): void;
     private captureAutoFitIntentColumns;
+    /**
+     * Tree expand columns must keep `width: auto` so nested indent can use leftover table space.
+     */
+    private isTreeFillColumn;
     /**
      * Returns the display text for a cell. Used for the cell tooltip when the column has `hasTitle`.
      */

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

@@ -37,6 +37,7 @@ declare const AXDateTimeBoxComponent_base: polytype.Polytype.ClusteredConstructo
  * @category Components
  */
 declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
+    private readonly defaultConfig;
     /**
      *  @ignore
      */
@@ -59,6 +60,7 @@ declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
      * Indicates whether typing is allowed in the input.
      * When false, clicking the input (or the calendar icon) opens the picker.
      * When true, the input is for typing and the picker opens from the calendar button.
+     * Defaults to `AX_DATETIME_INPUT_CONFIG.allowTyping` when not set on the instance.
      *
      * @defaultValue false
      */

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

@@ -1,6 +1,8 @@
 import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import { MXInputBaseValueComponent, AXClickEvent } from '@acorex/cdk/common';
 import { AXDateTimePickerType } from '@acorex/components/calendar';
+import { AXLocaleProfile } from '@acorex/core/locale';
 
 /**
  * A component for date and time input with segment-based typing, keyboard navigation,
@@ -10,9 +12,9 @@ import { AXDateTimePickerType } from '@acorex/components/calendar';
  */
 declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
     #private;
-    private platformService;
     private localeService;
     private calendarService;
+    private readonly defaultConfig;
     /** @ignore */
     private readonly _editingParts;
     /** @ignore */
@@ -24,6 +26,7 @@ declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
     /**
      * When true, the user can type digits and navigate segments with the keyboard.
      * When false, keyboard input is blocked (used by datetime-box picker mode).
+     * Defaults to `AX_DATETIME_INPUT_CONFIG.allowTyping` when not set on the instance.
      * @defaultValue false
      */
     allowTyping: _angular_core.InputSignal<boolean>;
@@ -46,6 +49,8 @@ declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
     protected readonly _calendarSystem: _angular_core.Signal<string>;
     protected readonly _resolvedFormat: _angular_core.Signal<string>;
     /** @ignore */
+    protected readonly _isHijriRtl: _angular_core.Signal<boolean>;
+    /** @ignore */
     private _editingDate;
     /** @ignore */
     private inputRef;
@@ -54,9 +59,7 @@ declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
     /**
      * @description check if page is in rtl or ltr
      */
-    protected isRtl: _angular_core.WritableSignal<boolean>;
-    /** @ignore */
-    protected ngOnInit(): void;
+    protected readonly isRtl: _angular_core.Signal<boolean>;
     /**
      * Formats a part using the calendar already attached to the AXDateTime.
      * @ignore
@@ -67,6 +70,8 @@ declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
     /** @ignore */
     private _getOrderedParts;
     /** @ignore */
+    private _getNavigationParts;
+    /** @ignore */
     private _clearInputBuffer;
     /** @ignore */
     private _updateText;
@@ -108,10 +113,24 @@ declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
     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"; "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; "onKeyPress": "onKeyPress"; "onClick": "onClick"; }, never, ["ax-validation-rule"], true, never>;
 }
 
+interface AXDateTimeInputConfig {
+    allowTyping: boolean;
+}
+declare const AXDateTimeInputDefaultConfig: AXDateTimeInputConfig;
+declare const AX_DATETIME_INPUT_CONFIG: InjectionToken<AXDateTimeInputConfig>;
+declare function resolveDateTimeInputFormat(options: {
+    customFormat: string | null | undefined;
+    calendarSystem: string;
+    picker: AXDateTimePickerType;
+    isRtl: boolean;
+    localeFormats: AXLocaleProfile['formats'];
+}): string;
+
 declare class AXDateTimeInputModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDateTimeInputModule, never>;
     static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXDateTimeInputModule, never, [typeof AXDateTimeInputComponent], [typeof AXDateTimeInputComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXDateTimeInputModule>;
 }
 
-export { AXDateTimeInputComponent, AXDateTimeInputModule };
+export { AXDateTimeInputComponent, AXDateTimeInputDefaultConfig, AXDateTimeInputModule, AX_DATETIME_INPUT_CONFIG, resolveDateTimeInputFormat };
+export type { AXDateTimeInputConfig };

package/types/acorex-components-decorators.d.ts

@@ -8,6 +8,7 @@ import * as i1 from '@angular/common';
  * @category Components
  */
 declare class AXDecoratorClearButtonComponent extends MXBaseComponent {
+    #private;
     private _parent;
     /**
      *  @ignore

package/types/acorex-components-dialog.d.ts

@@ -2,6 +2,7 @@ import * as i2 from '@acorex/cdk/common';
 import { AXStyleColorType, AXStyleLookType, AXHotKeyAction, MXBaseComponent } from '@acorex/cdk/common';
 import { AXOverlayRef } from '@acorex/cdk/overlay';
 import * as i0 from '@angular/core';
+import { ElementRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import * as i3 from '@angular/cdk/drag-drop';
 import * as i4 from '@angular/cdk/a11y';
@@ -34,6 +35,14 @@ interface AXDialogConfig {
     icon?: string | 'none';
     draggable?: boolean;
     direction?: 'rtl' | 'ltr';
+    /**
+     * Element used to resolve inherited visual context for overlays rendered
+     * outside the originating DOM subtree.
+     *
+     * This affects Appearance, Light/Dark theme, Contrast, Size, and supported
+     * Density context. It does not affect overlay positioning.
+     */
+    contextElement?: HTMLElement | ElementRef<HTMLElement>;
 }
 interface AXDialogRef {
     close(): void;

package/types/acorex-components-grid-layout-builder.d.ts

@@ -5,6 +5,8 @@ import { NXEvent, NXComponent } from '@acorex/cdk/common';
 import { Subscription } from 'rxjs';
 import * as gridstack from 'gridstack';
 
+/** Grid size preset as `[width, height]` in column/row units. */
+type AXGridLayoutSize = readonly [width: number, height: number];
 interface AXGridLayoutPosition {
     /** widget position x (default?: 0) */
     x?: number;
@@ -22,6 +24,11 @@ interface AXGridLayoutPosition {
     minWidth?: number;
     /** minimum height of widget in rows (default?: undefined = un-constrained) */
     minHeight?: number;
+    /**
+     * When set, resize is limited to these `[width, height]` presets.
+     * Invalid sizes revert to the previous size on resize end. Min/max bounds are derived from this list.
+     */
+    allowedSizes?: readonly AXGridLayoutSize[];
 }
 interface AXGridLayoutWidget extends AXGridLayoutPosition {
     id?: string;
@@ -318,5 +325,30 @@ declare class AXGridLayoutBuilderModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXGridLayoutBuilderModule>;
 }
 
-export { AXGridLayoutBuilderModule, AXGridLayoutContainerComponent, AXGridLayoutWidgetComponent };
-export type { AXGridLayout, AXGridLayoutContainerElement, AXGridLayoutEvent, AXGridLayoutNode, AXGridLayoutOptions, AXGridLayoutPosition, AXGridLayoutWidget, AXGridLayoutWidgetElement };
+declare const AX_GRID_LAYOUT_ALLOWED_SIZES_ATTR = "data-ax-allowed-sizes";
+declare function convertAXGridLayoutWidgetToGridStackWidget(widget: AXGridLayoutWidget): gridstack.GridStackWidget;
+declare function convertGridStackWidgetToAXGridLayoutWidget(widget: gridstack.GridStackWidget): AXGridLayoutWidget;
+declare function convertAXGridLayoutNodeToGridStackNode(node: AXGridLayoutNode): gridstack.GridStackNode;
+declare function convertGridStackNodeToAXGridLayoutNode(node: gridstack.GridStackNode): AXGridLayoutNode;
+declare function convertAXGridLayoutOptionsToGridStackOptions(options: AXGridLayoutOptions): gridstack.GridStackOptions;
+declare function convertGridStackOptionsToAXGridLayoutOptions(options: gridstack.GridStackOptions): AXGridLayoutOptions;
+/** remove keys which are undefined */
+declare function removeUndefinedKeys<T extends object>(obj: T): T;
+declare function writeAllowedSizesToElement(element: HTMLElement | undefined, allowedSizes: readonly AXGridLayoutSize[] | undefined): void;
+declare function readAllowedSizesFromElement(element: HTMLElement): readonly AXGridLayoutSize[] | undefined;
+declare const AX_GRID_LAYOUT_RESIZE_INVALID_CLASS = "ax-grid-layout-resize-invalid";
+declare const AX_GRID_LAYOUT_RESIZE_PREV_SIZE_ATTR = "data-ax-resize-prev-size";
+declare function isExactAllowedSize(width: number, height: number, allowedSizes: readonly AXGridLayoutSize[]): boolean;
+declare function updateResizeValidityMarkers(gridEl: HTMLElement, element: gridstack.GridItemHTMLElement): void;
+declare function clearResizeValidityMarkers(gridEl: HTMLElement): void;
+declare function storeResizeStartSize(element: gridstack.GridItemHTMLElement): void;
+declare function clearResizeStartSize(element: HTMLElement): void;
+declare function readResizeStartSize(element: HTMLElement): AXGridLayoutSize | undefined;
+declare function snapToAllowedSize(width: number, height: number, allowedSizes: readonly AXGridLayoutSize[]): AXGridLayoutSize;
+declare function deriveMinMaxFromAllowedSizes(allowedSizes: readonly AXGridLayoutSize[]): Pick<AXGridLayoutWidget, 'minWidth' | 'maxWidth' | 'minHeight' | 'maxHeight'>;
+declare function normalizeLayoutNodeWithAllowedSizes<T extends AXGridLayoutWidget>(node: T): T;
+declare function snapElementToAllowedSize(grid: gridstack.GridStack, element: gridstack.GridItemHTMLElement): boolean;
+declare function revertElementToAllowedSizeIfInvalid(grid: gridstack.GridStack, element: gridstack.GridItemHTMLElement): boolean;
+
+export { AXGridLayoutBuilderModule, AXGridLayoutContainerComponent, AXGridLayoutWidgetComponent, AX_GRID_LAYOUT_ALLOWED_SIZES_ATTR, AX_GRID_LAYOUT_RESIZE_INVALID_CLASS, AX_GRID_LAYOUT_RESIZE_PREV_SIZE_ATTR, clearResizeStartSize, clearResizeValidityMarkers, convertAXGridLayoutNodeToGridStackNode, convertAXGridLayoutOptionsToGridStackOptions, convertAXGridLayoutWidgetToGridStackWidget, convertGridStackNodeToAXGridLayoutNode, convertGridStackOptionsToAXGridLayoutOptions, convertGridStackWidgetToAXGridLayoutWidget, deriveMinMaxFromAllowedSizes, isExactAllowedSize, normalizeLayoutNodeWithAllowedSizes, readAllowedSizesFromElement, readResizeStartSize, removeUndefinedKeys, revertElementToAllowedSizeIfInvalid, snapElementToAllowedSize, snapToAllowedSize, storeResizeStartSize, updateResizeValidityMarkers, writeAllowedSizesToElement };
+export type { AXGridLayout, AXGridLayoutContainerElement, AXGridLayoutEvent, AXGridLayoutNode, AXGridLayoutOptions, AXGridLayoutPosition, AXGridLayoutSize, AXGridLayoutWidget, AXGridLayoutWidgetElement };

package/types/acorex-components-loading-dialog.d.ts

@@ -1,6 +1,7 @@
 import { AXStyleColorType, AXStyleLookType, AXHotKeyAction, MXBaseComponent } from '@acorex/cdk/common';
 import { AXOverlayRef } from '@acorex/cdk/overlay';
 import { AXDialogButtonItem } from '@acorex/components/dialog';
+import { AXPopupSizeType, AXPopupRef } from '@acorex/components/popup';
 import { AXProgressMode } from '@acorex/components/progress-bar';
 import * as _angular_core from '@angular/core';
 import { OnInit } from '@angular/core';
@@ -13,6 +14,8 @@ interface AXLoadingDialogConfig {
     progressValue?: number;
     progressColor?: AXStyleColorType;
     progressHeight?: number;
+    /** Popup size token. Uses the same responsive sizes as `AXPopupService`. @default 'sm' */
+    size?: AXPopupSizeType;
     buttons?: AXLoadingDialogButtonItem[];
 }
 interface AXLoadingDialogButtonItem {
@@ -43,7 +46,7 @@ interface AXLoadingDialogRef {
 type AXDialogRef = AXLoadingDialogRef;
 /**
  * @internal
- * Internal reference used by loading dialog service to manage overlay instances
+ * Internal reference used by loading dialog service to manage overlay instances.
  */
 interface AXLoadingDialogInternalRef {
     overlayRef: AXOverlayRef<unknown>;
@@ -57,8 +60,13 @@ interface AXLoadingDialogInternalRef {
 declare class AXLoadingDialogComponent extends MXBaseComponent implements OnInit {
     /** Loading dialog configuration data */
     data: _angular_core.InputSignal<AXLoadingDialogConfig>;
-    /** @internal Callback function to close the dialog */
+    /** Callback function to close the dialog */
     onClose: _angular_core.InputSignal<() => void>;
+    /**
+     * Injected by {@link AXPopupComponent} when this dialog is opened via {@link AXPopupService}.
+     * @internal
+     */
+    readonly __popup__: _angular_core.InputSignal<AXPopupRef<any>>;
     /** @ignore */
     protected progressText: _angular_core.WritableSignal<string>;
     /** @ignore */
@@ -116,7 +124,7 @@ declare class AXLoadingDialogComponent extends MXBaseComponent implements OnInit
     /** @ignore */
     protected _hasAutoFocus(button: AXLoadingDialogButtonItem): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXLoadingDialogComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLoadingDialogComponent, "ax-loading-dialog", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "onClose": { "alias": "onClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLoadingDialogComponent, "ax-loading-dialog", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "onClose": { "alias": "onClose"; "required": false; "isSignal": true; }; "__popup__": { "alias": "__popup__"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class AXLoadingDialogModule {
@@ -126,7 +134,7 @@ declare class AXLoadingDialogModule {
 }
 
 declare class AXLoadingDialogService {
-    private overlayService;
+    private popupService;
     /**
      * Opens a loading dialog with the specified configuration.
      *