@acorex/components 22.0.0-next.9 → 22.1.0-next.0

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;
     /**

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-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 };