@acorex/components 22.0.0-next.9 → 22.0.1-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,44 @@ 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;
+    /**
+     * Header `<th>` classes: column highlight + column `cssClass` (e.g. `ax-select-column`).
+     */
+    getHeadColumnCssClass(column: AXDataTableColumnComponent): string;
     /**
      * Returns the temporary highlight state for a row, if any.
      */
@@ -200,7 +236,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;
     /**
@@ -350,6 +386,10 @@ declare class AXDataTableTextColumnComponent extends AXDataTableColumnComponent
      * @defaultValue false
      */
     wrapText: boolean;
+    /**
+     * When `true`, cell values are resolved as i18n expressions (e.g. `@acorex:common.actions.cancel`).
+     */
+    translate: boolean;
     /**
      * Provides a custom template for rendering cells within the column.
      */
@@ -396,7 +436,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.
      */
@@ -409,6 +449,7 @@ declare class AXDataTableTextColumnComponent extends AXDataTableColumnComponent
      *  @ignore
      */
     private formatService;
+    private translationService;
     protected getDisplayText(rowData: unknown, dataField: string): string;
     /**
      * Defines the format string for displaying values in the component.
@@ -419,7 +460,7 @@ declare class AXDataTableTextColumnComponent extends AXDataTableColumnComponent
      */
     formatOptions: AXFormatOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableTextColumnComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableTextColumnComponent, "ax-text-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "allowSorting": { "alias": "allowSorting"; "required": false; }; "allowResizing": { "alias": "allowResizing"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "hasTitle": { "alias": "hasTitle"; "required": false; }; "customExpandIcon": { "alias": "customExpandIcon"; "required": false; }; "customCollapseIcon": { "alias": "customCollapseIcon"; "required": false; }; "dataField": { "alias": "dataField"; "required": false; }; "expandHandler": { "alias": "expandHandler"; "required": false; }; "wrapText": { "alias": "wrapText"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "format": { "alias": "format"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableTextColumnComponent, "ax-text-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "allowSorting": { "alias": "allowSorting"; "required": false; }; "allowResizing": { "alias": "allowResizing"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "hasTitle": { "alias": "hasTitle"; "required": false; }; "customExpandIcon": { "alias": "customExpandIcon"; "required": false; }; "customCollapseIcon": { "alias": "customCollapseIcon"; "required": false; }; "dataField": { "alias": "dataField"; "required": false; }; "expandHandler": { "alias": "expandHandler"; "required": false; }; "wrapText": { "alias": "wrapText"; "required": false; }; "translate": { "alias": "translate"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "format": { "alias": "format"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 type AXRowCommandItem = AXButtonItemListItem & {
@@ -609,7 +650,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,15 +862,21 @@ 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
      */
     protected resizeColumnProp: {
         startX: number;
         startWidth: number;
-        columnIndex: number;
-        newColumnWidth: number;
-        thElement: any;
+        column: AXDataTableColumnComponent | null;
+        thElement: HTMLElement | null;
+        /** True when the resize handle sits on the column's trailing edge in screen coordinates. */
+        resizeFromTrailingEdge: boolean;
     };
     /**
      * Columns that used `width="auto"` and received header-only sizing before rows were available.
@@ -1019,11 +1066,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`.
      */
@@ -1040,10 +1092,20 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
     protected toggleExpanded(rows: any[], expandedItem: any, children: any[]): any[];
     protected refreshExpandedItem(id: string | number): Promise<void>;
     private updateChildren;
+    /**
+     * CDK sort-predicate indices follow physical left-to-right order; map them to `columnsList` order.
+     * @ignore
+     */
+    private cdkSortIndexToColumnIndex;
+    /**
+     * Restricts column reordering to non-fixed columns only.
+     * @ignore
+     */
+    protected columnReorderSortPredicate: (index: number) => boolean;
     /**
      *  @ignore
      */
-    protected drop(event: CdkDragDrop<any, any, any>): void;
+    protected drop(event: CdkDragDrop<AXDataTableColumnComponent>): void;
     /**
      *  @ignore
      */
@@ -1107,11 +1169,11 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
      * @param columnIndex - The index of the column to auto-fit
      * @ignore
      */
-    protected onResizeHandlerDoubleClick(event: MouseEvent, columnIndex: number): void;
+    protected onResizeHandlerDoubleClick(event: MouseEvent, column: AXDataTableColumnComponent): void;
     /**
      *  @ignore
      */
-    protected onResizeColumnStart(event: MouseEvent, columnIndex: number): void;
+    protected onResizeColumnStart(event: MouseEvent, column: AXDataTableColumnComponent): void;
     /**
      *  @ignore
      */

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

@@ -1,5 +1,6 @@
 import { MXBaseComponent, AXSurfaceType } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
+import { AXFullScreenMode } from '@acorex/core/full-screen';
 import * as i1 from '@angular/common';
 
 /**
@@ -8,6 +9,7 @@ import * as i1 from '@angular/common';
  * @category Components
  */
 declare class AXDecoratorClearButtonComponent extends MXBaseComponent {
+    #private;
     private _parent;
     /**
      *  @ignore
@@ -75,10 +77,21 @@ declare class AXDecoratorFullScreenButtonComponent extends MXBaseComponent {
     #private;
     private readonly fullScreenService;
     private readonly elementRef;
+    /**
+     * Target element to fullscreen. Falls back to the closest decorated parent when omitted.
+     */
     element: i0.ModelSignal<HTMLElement>;
+    /**
+     * Whether fullscreen mode is active.
+     */
     isActive: i0.ModelSignal<boolean>;
+    /**
+     * Fullscreen implementation mode.
+     * @defaultValue 'overlay'
+     */
+    mode: i0.InputSignal<AXFullScreenMode>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDecoratorFullScreenButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDecoratorFullScreenButtonComponent, "ax-fullscreen-button", never, { "element": { "alias": "element"; "required": false; "isSignal": true; }; "isActive": { "alias": "isActive"; "required": false; "isSignal": true; }; }, { "element": "elementChange"; "isActive": "isActiveChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDecoratorFullScreenButtonComponent, "ax-fullscreen-button", never, { "element": { "alias": "element"; "required": false; "isSignal": true; }; "isActive": { "alias": "isActive"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, { "element": "elementChange"; "isActive": "isActiveChange"; }, never, never, true, never>;
 }
 
 /**

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-emoji.d.ts

@@ -0,0 +1,42 @@
+import * as _angular_core from '@angular/core';
+import { AXEmoji } from '@acorex/core/constants';
+
+/**
+ * Renders a single emoji using its Unicode character from metadata.
+ *
+ * @category Components
+ */
+declare class AXEmojiComponent {
+    /**
+     * Emoji metadata to render.
+     */
+    readonly emoji: _angular_core.InputSignal<AXEmoji>;
+    /**
+     * Emoji rendering style.
+     * - `google`: Noto Color Emoji (Android/Google look) on all platforms, including Windows.
+     * - `native`: OS default fonts (Segoe UI Emoji on Windows).
+     *
+     * @defaultValue 'google'
+     */
+    readonly appearance: _angular_core.InputSignal<"google" | "native">;
+    /**
+     * Rendered size in pixels.
+     *
+     * @defaultValue 20
+     */
+    readonly size: _angular_core.InputSignal<number>;
+    /** Unicode glyph to display. */
+    protected readonly glyph: _angular_core.Signal<string>;
+    /** Accessible label sourced from emoji metadata. */
+    protected readonly ariaLabel: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXEmojiComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXEmojiComponent, "ax-emoji", never, { "emoji": { "alias": "emoji"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class AXEmojiModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXEmojiModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXEmojiModule, never, [typeof AXEmojiComponent], [typeof AXEmojiComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXEmojiModule>;
+}
+
+export { AXEmojiComponent, AXEmojiModule };

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

@@ -0,0 +1,146 @@
+import * as _angular_core from '@angular/core';
+import { AXValueChangedEvent } from '@acorex/cdk/common';
+import { AXGestureEvent } from '@acorex/cdk/gesture';
+import { AXTabStripChangedEvent } from '@acorex/components/tabs';
+import { AXEmoji, AXEmojiCategory, AXEmojiPickerCategoryId, AXEmojiCategoryMeta } from '@acorex/core/constants';
+
+/**
+ * Telegram-style emoji picker with category tabs, search, and recent emojis.
+ *
+ * @category Components
+ */
+declare class AXEmojiPickerComponent {
+    private readonly hostRef;
+    private readonly destroyRef;
+    /** Emoji entries available in the picker. */
+    readonly items: _angular_core.InputSignal<readonly AXEmoji[]>;
+    /** Rendered emoji size in the grid. */
+    readonly size: _angular_core.InputSignal<number>;
+    /**
+     * Emoji rendering style passed to {@link AXEmojiComponent}.
+     * `google` uses Noto Color Emoji (Android/Google look) on Windows too.
+     *
+     * @defaultValue 'google'
+     */
+    readonly appearance: _angular_core.InputSignal<"google" | "native">;
+    /** Whether the search box is shown. */
+    readonly showSearch: _angular_core.InputSignal<boolean>;
+    /** Whether the recent category tab is shown. */
+    readonly showRecent: _angular_core.InputSignal<boolean>;
+    /** Number of emoji columns in the virtualized grid. */
+    readonly columns: _angular_core.InputSignal<number>;
+    /** Search box placeholder text. */
+    readonly searchPlaceholder: _angular_core.InputSignal<string>;
+    /** Unicode emoji group categories to hide from tabs and results. */
+    readonly excludeCategories: _angular_core.InputSignal<readonly AXEmojiCategory[]>;
+    /** `AXEmoji.code` values to hide (e.g. `1f595`). */
+    readonly excludeCodes: _angular_core.InputSignal<readonly string[]>;
+    /** `AXEmoji.unicode` glyph values to hide (e.g. `🖕`). */
+    readonly excludeUnicode: _angular_core.InputSignal<readonly string[]>;
+    /** Emits when the user selects an emoji. */
+    readonly selected: _angular_core.OutputEmitterRef<AXEmoji>;
+    /**
+     * Recently used emojis supplied by the parent (e.g. API, LocalStorage).
+     * Rendered in the Recent tab when {@link showRecent} is enabled.
+     */
+    readonly recentItems: _angular_core.InputSignal<readonly AXEmoji[]>;
+    /** Emits the updated recent list after the user selects an allowed emoji. */
+    readonly recentChanged: _angular_core.OutputEmitterRef<readonly AXEmoji[]>;
+    /** Current search query. */
+    protected readonly searchQuery: _angular_core.WritableSignal<string>;
+    /** Active category tab. */
+    protected readonly activeCategoryId: _angular_core.WritableSignal<AXEmojiPickerCategoryId>;
+    private readonly containerWidth;
+    protected readonly effectiveColumns: _angular_core.Signal<number>;
+    protected readonly availableWidthCss: _angular_core.Signal<string>;
+    constructor();
+    /** Items after picker exclusions are applied. */
+    protected readonly filteredItems: _angular_core.Signal<readonly AXEmoji[]>;
+    private readonly categoryIndex;
+    /** Recent items after active exclusions are applied for display. */
+    protected readonly visibleRecentItems: _angular_core.Signal<AXEmoji[]>;
+    protected onCategorySwipe(event: AXGestureEvent): void;
+    /** Visible category tabs. */
+    protected readonly categories: _angular_core.Signal<readonly AXEmojiCategoryMeta[]>;
+    /** Emojis shown in the current view (category or search results). */
+    protected readonly visibleEmojis: _angular_core.Signal<readonly AXEmoji[]>;
+    /** Rows used by the virtual scroll viewport. */
+    protected readonly emojiRows: _angular_core.Signal<readonly (readonly AXEmoji[])[]>;
+    /** Virtual scroll row height in pixels. */
+    protected readonly rowHeight: _angular_core.Signal<number>;
+    /** Whether the user is searching. */
+    protected readonly isSearching: _angular_core.Signal<boolean>;
+    /** Whether the current view has no emojis. */
+    protected readonly isEmpty: _angular_core.Signal<boolean>;
+    /** Keeps the active tab valid when exclusions change. */
+    private readonly syncActiveCategory;
+    /** Selects a category tab and clears search. */
+    protected selectCategory(categoryId: AXEmojiPickerCategoryId): void;
+    /** Whether the given category tab is active. */
+    protected isCategoryActive(categoryId: AXEmojiPickerCategoryId): boolean;
+    /** Whether the category tab is the virtual recent group. */
+    protected isRecentCategory(categoryId: AXEmojiPickerCategoryId): boolean;
+    /** Syncs the active emoji category when a tab is selected. */
+    protected onCategoryTabChanged(event: AXTabStripChangedEvent): void;
+    /** Updates the search query from the search box. */
+    protected onSearchChanged(event: AXValueChangedEvent<string>): void;
+    /** Emits the selected emoji and notifies the parent of the updated recent list. */
+    protected selectEmoji(emoji: AXEmoji): void;
+    /** @ignore */
+    protected trackRow(index: number, row: readonly AXEmoji[]): string;
+    private rememberRecent;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXEmojiPickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXEmojiPickerComponent, "ax-emoji-picker", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "showRecent": { "alias": "showRecent"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "excludeCategories": { "alias": "excludeCategories"; "required": false; "isSignal": true; }; "excludeCodes": { "alias": "excludeCodes"; "required": false; "isSignal": true; }; "excludeUnicode": { "alias": "excludeUnicode"; "required": false; "isSignal": true; }; "recentItems": { "alias": "recentItems"; "required": false; "isSignal": true; }; }, { "selected": "selected"; "recentChanged": "recentChanged"; }, never, never, true, never>;
+}
+
+/** Maximum number of emojis kept in the recent list. */
+declare const RECENT_EMOJI_LIMIT = 20;
+/** Grid cell size in px (`--ax-comp-emoji-picker-cell-size`). */
+declare const EMOJI_PICKER_CELL_SIZE_PX = 36;
+/** Grid cell size in px on narrow viewports. */
+declare const EMOJI_PICKER_CELL_SIZE_PX_COMPACT = 32;
+/** Gap between grid cells in px (`--ax-comp-emoji-picker-cell-gap`). */
+declare const EMOJI_PICKER_CELL_GAP_PX = 2;
+/** Horizontal padding around the emoji grid in px. */
+declare const EMOJI_PICKER_GRID_PADDING_PX = 24;
+/** Minimum column count. */
+declare const EMOJI_PICKER_MIN_COLUMNS = 1;
+/** Nearest ancestor that participates in layout (skips `display: contents`). */
+declare function getEmojiPickerLayoutContainer(element: HTMLElement): HTMLElement;
+/**
+ * Available width for the picker grid.
+ * Uses the tightest ancestor content box and the visible viewport slot so an
+ * overflowing parent cannot keep an 8-column grid that is clipped off-screen.
+ */
+declare function resolveEmojiPickerContainerWidth(element: HTMLElement): number;
+/** Resolves column count from container width while keeping a fixed cell size and gap. */
+declare function resolveEmojiPickerColumns(containerWidth: number, requested: number): number;
+/** Maximum number of emojis returned by search. */
+declare const SEARCH_RESULT_LIMIT = 200;
+/** User-defined exclusions for picker emoji lists. */
+interface AXEmojiPickerFilter {
+    /** Unicode emoji group categories to hide from tabs and results. */
+    readonly excludeCategories?: readonly AXEmojiCategory[];
+    /** `AXEmoji.code` values to hide (hyphen-separated code points, e.g. `1f595`). */
+    readonly excludeCodes?: readonly string[];
+    /** `AXEmoji.unicode` glyph values to hide (e.g. `👋`). */
+    readonly excludeUnicode?: readonly string[];
+}
+/** Applies picker exclusions and default people-body curation. */
+declare function filterPickerItems(items: readonly AXEmoji[], filter?: AXEmojiPickerFilter): readonly AXEmoji[];
+/**
+ * Builds a category index for picker rendering.
+ * Expects items to be pre-filtered with {@link filterPickerItems}.
+ */
+declare function buildEmojiPickerIndex(items: readonly AXEmoji[]): ReadonlyMap<AXEmojiCategory, readonly AXEmoji[]>;
+/** Searches pre-filtered emoji metadata by name and keywords. */
+declare function searchPickerEmojis(items: readonly AXEmoji[], query: string, limit?: number): readonly AXEmoji[];
+
+declare class AXEmojiPickerModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXEmojiPickerModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXEmojiPickerModule, never, [typeof AXEmojiPickerComponent], [typeof AXEmojiPickerComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXEmojiPickerModule>;
+}
+
+export { AXEmojiPickerComponent, AXEmojiPickerModule, EMOJI_PICKER_CELL_GAP_PX, EMOJI_PICKER_CELL_SIZE_PX, EMOJI_PICKER_CELL_SIZE_PX_COMPACT, EMOJI_PICKER_GRID_PADDING_PX, EMOJI_PICKER_MIN_COLUMNS, RECENT_EMOJI_LIMIT, SEARCH_RESULT_LIMIT, buildEmojiPickerIndex, filterPickerItems, getEmojiPickerLayoutContainer, resolveEmojiPickerColumns, resolveEmojiPickerContainerWidth, searchPickerEmojis };
+export type { AXEmojiPickerFilter };