@acorex/components 21.0.1-next.7 → 21.0.1-next.70

package/{accordion/index.d.ts → types/acorex-components-accordion.d.ts}

@@ -2,13 +2,15 @@ import * as _angular_core from '@angular/core';
 import { AXAccordionItemDirective } from '@acorex/cdk/accordion';
 import { AXClickEvent } from '@acorex/cdk/common';
 
+type AXAccordionLook = 'solid' | 'fill' | 'outline' | 'flat' | 'card' | 'none';
+
 declare class AXAccordionGroupComponent {
     #private;
     private accordionGroup;
     private content;
     accordion: _angular_core.InputSignal<boolean>;
     activeIndex: _angular_core.ModelSignal<number | number[]>;
-    look: _angular_core.InputSignal<string>;
+    look: _angular_core.InputSignal<AXAccordionLook>;
     collapsedOnItemClick: _angular_core.InputSignal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXAccordionGroupComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXAccordionGroupComponent, "ax-accordion-group", never, { "accordion": { "alias": "accordion"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "collapsedOnItemClick": { "alias": "collapsedOnItemClick"; "required": false; "isSignal": true; }; }, { "activeIndex": "activeIndexChange"; }, ["content"], ["ax-accordion-item"], true, never>;
@@ -18,10 +20,11 @@ declare class AXAccordionItemComponent {
     #private;
     isCollapsed: _angular_core.ModelSignal<boolean>;
     icon: _angular_core.InputSignal<string>;
+    textdecoration: _angular_core.InputSignal<boolean>;
     caption: _angular_core.InputSignal<string>;
     isLoading: _angular_core.ModelSignal<boolean>;
     headerTemplate: _angular_core.InputSignal<any>;
-    look: _angular_core.InputSignal<string>;
+    look: _angular_core.InputSignal<AXAccordionLook>;
     disabled: _angular_core.InputSignal<boolean>;
     accordionItem: _angular_core.Signal<AXAccordionItemDirective>;
     private parent;
@@ -31,7 +34,7 @@ declare class AXAccordionItemComponent {
     close(): void;
     toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXAccordionItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXAccordionItemComponent, "ax-accordion-item", never, { "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; "isLoading": "isLoadingChange"; "onClick": "onClick"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXAccordionItemComponent, "ax-accordion-item", never, { "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "textdecoration": { "alias": "textdecoration"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; "isLoading": "isLoadingChange"; "onClick": "onClick"; }, never, ["*"], true, never>;
 }
 
 declare class AXAccordionModule {
@@ -41,3 +44,4 @@ declare class AXAccordionModule {
 }
 
 export { AXAccordionGroupComponent, AXAccordionItemComponent, AXAccordionModule };
+export type { AXAccordionLook };

package/types/acorex-components-action-sheet.d.ts

@@ -0,0 +1,256 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, Type, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { AXStyleColorType, AXComponentCloseEvent, MXBaseComponent } from '@acorex/cdk/common';
+import { AXOverlayRef } from '@acorex/cdk/overlay';
+import { AXComponentInputs, AXComponentType } from '@acorex/core/components';
+import * as rxjs from 'rxjs';
+import { Subject } from 'rxjs';
+
+interface AXActionSheetItem {
+    name?: string;
+    text: string;
+    icon?: string;
+    disabled?: boolean;
+    color?: AXStyleColorType;
+    onClick?: () => void;
+    suffix?: {
+        text: string;
+    };
+    break?: boolean;
+    group?: {
+        name?: string;
+        title?: string;
+    };
+}
+type AXActionSheetContentType = TemplateRef<unknown> | Type<unknown>;
+interface AXActionSheetConfig {
+    title?: string;
+    subTitle?: string;
+    closeButton?: boolean;
+    header?: boolean;
+    /** @deprecated Use `inputs` instead to pass data to the action sheet content component. */
+    data?: unknown;
+    /** Input values to pass to the content component */
+    inputs?: unknown;
+    closeOnBackdropClick?: boolean;
+    items?: AXActionSheetItem[];
+    content?: AXActionSheetContentType;
+    draggable?: boolean;
+    dragUp?: boolean;
+}
+/**
+ * Reference to an open action sheet, providing methods to interact with it.
+ */
+interface AXActionSheetRef<TResult = unknown> {
+    /** Closes the action sheet with optional result data */
+    close: (data?: TResult) => void;
+    /** Sets input values on the content component */
+    setInputs: (values: AXComponentInputs) => void;
+    /** Observable that emits when the action sheet is closed */
+    onClose: Subject<TResult>;
+}
+/**
+ * Base class for components that are displayed inside an action sheet.
+ * Extend this class to get access to the action sheet reference and helper methods.
+ *
+ * @example
+ * ```typescript
+ * @Component({...})
+ * export class MyActionSheetContent extends AXActionSheetComponentBase {
+ *   save() {
+ *     this.close({ saved: true });
+ *   }
+ * }
+ * ```
+ */
+declare abstract class AXActionSheetComponentBase {
+    /** Reference to the parent action sheet */
+    __actionSheet__: _angular_core.InputSignal<AXActionSheetRef<unknown>>;
+    /**
+     * Closes the action sheet with optional result data.
+     * @param data - Optional data to pass to the close handler
+     */
+    close(data?: any): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXActionSheetComponentBase, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXActionSheetComponentBase, never, never, { "__actionSheet__": { "alias": "__actionSheet__"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+interface AXActionSheetEvent {
+    overlayRef?: AXOverlayRef<unknown>;
+    nativeEvent?: Event;
+    isUserInteraction: boolean;
+    data: {
+        state: 'open' | 'close' | 'dragStart' | 'dragEnd' | 'fullScreen' | 'normalSize';
+    };
+}
+/**
+ * @internal
+ * Internal reference used by action sheet service to manage overlay instances
+ */
+interface AXActionSheetInternalRef {
+    overlayRef: AXOverlayRef<unknown>;
+    close: (result?: AXComponentCloseEvent) => void;
+}
+
+/**
+ * A component for displaying an action sheet, which is a menu that slides up from the bottom of the screen.
+ *
+ * @category Components
+ */
+declare class AXActionSheetComponent extends MXBaseComponent implements OnInit, AfterViewInit, OnDestroy {
+    /** Action sheet configuration data */
+    data: _angular_core.InputSignal<AXActionSheetConfig>;
+    /** @internal Callback function to close the action sheet */
+    onClose: _angular_core.InputSignal<(result?: AXComponentCloseEvent) => void>;
+    /** @internal Overlay reference for event tracking */
+    overlayRef: _angular_core.InputSignal<AXOverlayRef<unknown>>;
+    /** @internal Reference to the action sheet for content components */
+    __actionSheetRef__: _angular_core.InputSignal<AXActionSheetRef<unknown>>;
+    private contentContainerRef;
+    private document;
+    private platformID;
+    private renderer;
+    private actionSheetService;
+    private onMouseMoveListenerFn;
+    private onMouseUpListenerFn;
+    private onTouchMoveListenerFn;
+    private onTouchUpListenerFn;
+    private isDragging;
+    private isFullScreen;
+    private curserOffset;
+    private actionSheetHeight;
+    private isActionSheetHeightSet;
+    private transitionDuration;
+    /**
+     *  @ignore
+     */
+    private _componentRef;
+    /** Template content if data.content is a TemplateRef */
+    protected templateContent: _angular_core.Signal<TemplateRef<unknown>>;
+    /** Component content if data.content is a component Type */
+    protected componentContent: _angular_core.Signal<AXComponentType<unknown>>;
+    /** Template context for ngTemplateOutlet */
+    protected templateContext: _angular_core.Signal<{
+        $implicit: AXActionSheetConfig;
+        ref: AXActionSheetComponent;
+    }>;
+    /** Whether content has been rendered (for component content) */
+    protected isContentRendered: _angular_core.WritableSignal<boolean>;
+    /**
+     *  @ignore
+     */
+    ngOnInit(): void;
+    /**
+     *  @ignore
+     */
+    ngAfterViewInit(): void;
+    /**
+     * Renders the component content if provided.
+     * Uses ViewContainerRef to create the component and properly set inputs.
+     */
+    private renderComponentContent;
+    /**
+     * Sets input values on the content component.
+     * @param values - Object containing input values to set
+     */
+    setContentInputs(values: AXComponentInputs): void;
+    ngOnDestroy(): void;
+    protected handleMouseDown(e: MouseEvent): void;
+    protected handleTouchDown(e: TouchEvent): void;
+    private handleDown;
+    private snapToFinalPosition;
+    private heightCalculator;
+    /**
+     * Handles click events on action sheet items.
+     * This method is called when a user clicks on an action sheet item. It closes the action sheet
+     * with the clicked item as the result data and executes the item's onClick callback if provided.
+     *
+     * @param item - The action sheet item that was clicked. Contains the item's data and optional onClick callback.
+     * @returns void
+     */
+    onItemClick(item: AXActionSheetItem): void;
+    /**
+     * Closes the action sheet with optional result data.
+     * This method initiates the closing animation of the action sheet and eventually closes the dialog.
+     * The closing process includes a height animation and cleanup of event listeners.
+     *
+     * @param e - The result data to pass when closing the action sheet. Can be any value including null.
+     *            If an AXActionSheetItem is passed, it represents the selected item.
+     * @param isUserInteraction - Whether the close action was triggered by user interaction (default: true).
+     *                           This affects how the action sheet handles accessibility and event tracking.
+     * @returns void
+     */
+    close(e?: unknown, isUserInteraction?: boolean): void;
+    /**
+     *  @ignore
+     */
+    protected onKeydownHandler(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXActionSheetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXActionSheetComponent, "ax-action-sheet", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "onClose": { "alias": "onClose"; "required": false; "isSignal": true; }; "overlayRef": { "alias": "overlayRef"; "required": false; "isSignal": true; }; "__actionSheetRef__": { "alias": "__actionSheetRef__"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class AXActionSheetModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXActionSheetModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXActionSheetModule, never, [typeof AXActionSheetComponent], [typeof AXActionSheetComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXActionSheetModule>;
+}
+
+/**
+ * @deprecated Use `AXActionSheetRef` instead
+ */
+interface AXActionSheetDialogRef<TResult = unknown> {
+    close: (e?: TResult) => void;
+    setInputs: (values: AXComponentInputs) => void;
+    closed: Subject<{
+        data?: TResult;
+    }>;
+}
+declare class AXActionSheetService {
+    private overlayService;
+    private readonly actionSheetEvent;
+    actionSheetEvent$: rxjs.Observable<AXActionSheetEvent>;
+    /**
+     * Opens an action sheet with the specified configuration.
+     * This method creates and displays an action sheet component with the provided options.
+     * The action sheet will slide up from the bottom of the screen and can be dismissed
+     * by tapping outside, pressing escape, or calling the close method.
+     *
+     * @param config - The configuration object that defines the action sheet's appearance and behavior.
+     *                 Must include at least a title or content property. Will be merged with default config.
+     * @param isUserInteraction - Whether the action sheet is opened by user interaction (default: true).
+     *                           This affects how the action sheet handles accessibility and focus management.
+     * @returns A promise that resolves to a dialog reference containing methods to control the action sheet.
+     *          The reference includes methods like close(), setInputs() and a closed observable for tracking dialog state.
+     * @example
+     * ```typescript
+     * const dialogRef = await actionSheetService.open({
+     *   title: 'Choose an option',
+     *   content: MyCustomComponent,
+     *   inputs: { userId: 123, userName: 'John' }
+     * });
+     *
+     * // Update inputs dynamically
+     * dialogRef.setInputs({ userName: 'Jane' });
+     *
+     * dialogRef.closed.subscribe(result => {
+     *   console.log('Action sheet closed with:', result.data);
+     * });
+     * ```
+     */
+    open<TResult = any>(config: AXActionSheetConfig, isUserInteraction?: boolean): Promise<AXActionSheetRef<TResult>>;
+    /**
+     * Sets the current state of action sheet events.
+     * This method is used internally to track action sheet lifecycle events such as open, close,
+     * drag start, drag end, and full screen transitions. It emits events through the actionSheetEvent$
+     * observable for external subscribers to monitor action sheet state changes.
+     *
+     * @param event - The action sheet event to emit. Contains information about the event type,
+     *               associated data, user interaction status, and overlay reference.
+     * @returns void
+     */
+    setActionSheetEventState(event: AXActionSheetEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXActionSheetService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXActionSheetService>;
+}
+
+export { AXActionSheetComponent, AXActionSheetComponentBase, AXActionSheetModule, AXActionSheetService };
+export type { AXActionSheetConfig, AXActionSheetContentType, AXActionSheetDialogRef, AXActionSheetEvent, AXActionSheetInternalRef, AXActionSheetItem, AXActionSheetRef };

package/{button-group/index.d.ts → types/acorex-components-button-group.d.ts}

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
 import { EventEmitter } from '@angular/core';
-import * as polytype from 'polytype';
-import { MXInteractiveComponent, MXColorLookComponent, AXClickEvent, AXSelectionMode, AXStyleColorType, MXColorComponent } from '@acorex/cdk/common';
+import { MXInteractiveComponent, AXStyleColorType, AXStyleLookType, AXClickEvent, AXSelectionMode } from '@acorex/cdk/common';
 
-declare const AXButtonGroupComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXColorLookComponent]>;
 /**
  * A component that groups multiple buttons together, allowing for consistent styling and behavior.
  *
  * @category Components
  */
-declare class AXButtonGroupComponent extends AXButtonGroupComponent_base {
+declare class AXButtonGroupComponent extends MXInteractiveComponent {
     #private;
     readonly fitParent: i0.InputSignal<boolean>;
+    color: AXStyleColorType;
+    look: AXStyleLookType;
     readonly customClass: i0.InputSignal<string>;
     /**
      * Fires when any button in the group is clicked.
@@ -81,9 +81,9 @@ declare class AXButtonGroupComponent extends AXButtonGroupComponent_base {
     /**
      *  @ignore
      */
-    private __hostClick;
+    __hostClick(e: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonGroupComponent, "ax-button-group", never, { "disabled": { "alias": "disabled"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "fitParent": { "alias": "fitParent"; "required": false; "isSignal": true; }; "customClass": { "alias": "class"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; "onClick": "onClick"; "selectionChange": "selectionChange"; "selectedButtonChange": "selectedButtonChange"; }, ["_contentButtons"], ["ax-button-group-item"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonGroupComponent, "ax-button-group", never, { "disabled": { "alias": "disabled"; "required": false; }; "fitParent": { "alias": "fitParent"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "customClass": { "alias": "class"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; "onClick": "onClick"; "selectionChange": "selectionChange"; "selectedButtonChange": "selectedButtonChange"; }, ["_contentButtons"], ["ax-button-group-item"], true, never>;
 }
 
 interface AXButtonItemListItem {
@@ -94,14 +94,14 @@ interface AXButtonItemListItem {
     disabled?: boolean;
     color?: AXStyleColorType;
 }
-declare const AXButtonGroupItemComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXColorComponent]>;
 /**
  * Represents a button item with optional content like icons, text, and dropdowns.
  *
  * @category Components
  */
-declare class AXButtonGroupItemComponent extends AXButtonGroupItemComponent_base {
+declare class AXButtonGroupItemComponent extends MXInteractiveComponent {
     btnGroup: AXButtonGroupComponent;
+    color: AXStyleColorType;
     /**
      * Text displayed on the button item.
      */
@@ -141,15 +141,15 @@ declare class AXButtonGroupItemComponent extends AXButtonGroupItemComponent_base
     /**
      *  @ignore
      */
-    private __hostClick;
+    __hostClick(e: MouseEvent): void;
     /**
      *  @ignore
      */
-    private __hostFocus;
+    __hostFocus(e: FocusEvent): void;
     /**
      *  @ignore
      */
-    private __hostBlur;
+    __hostBlur(e: FocusEvent): void;
     /**
      *  @ignore
      */
@@ -159,7 +159,7 @@ declare class AXButtonGroupItemComponent extends AXButtonGroupItemComponent_base
      */
     tabindex: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonGroupItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonGroupItemComponent, "ax-button-group-item", never, { "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "text": { "alias": "text"; "required": false; }; "customClass": { "alias": "class"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; }; "divided": { "alias": "divided"; "required": false; }; "data": { "alias": "data"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "onClick": "onClick"; "onFocus": "onFocus"; "onBlur": "onBlur"; "disabledChange": "disabledChange"; "customClass": "classChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonGroupItemComponent, "ax-button-group-item", never, { "disabled": { "alias": "disabled"; "required": false; }; "color": { "alias": "color"; "required": false; }; "text": { "alias": "text"; "required": false; }; "customClass": { "alias": "class"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; }; "divided": { "alias": "divided"; "required": false; }; "data": { "alias": "data"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "onClick": "onClick"; "onFocus": "onFocus"; "onBlur": "onBlur"; "disabledChange": "disabledChange"; "customClass": "classChange"; }, never, ["*"], true, never>;
 }
 
 declare class AXButtonGroupModule {

package/{button/index.d.ts → types/acorex-components-button.d.ts}

@@ -64,7 +64,7 @@ declare class AXButtonItemComponent extends AXButtonItemComponent_base {
      * @param e - The mouse event that triggered the click.
      * @ignore
      */
-    private __hostClick;
+    __hostClick(e: MouseEvent): void;
     /**
      * Handles focus events on the button item host element.
      * Emits the onFocus event.
@@ -72,7 +72,7 @@ declare class AXButtonItemComponent extends AXButtonItemComponent_base {
      * @param e - The focus event that was triggered.
      * @ignore
      */
-    private __hostFocus;
+    __hostFocus(e: FocusEvent): void;
     /**
      * Handles blur events on the button item host element.
      * Emits the onBlur event.
@@ -80,7 +80,7 @@ declare class AXButtonItemComponent extends AXButtonItemComponent_base {
      * @param e - The blur event that was triggered.
      * @ignore
      */
-    private __hostBlur;
+    __hostBlur(e: FocusEvent): void;
     /**
      * Generates the CSS classes for the button item host element.
      * Includes classes for icon-only state, disabled state, selected state, divided state, and color.

package/{calendar/index.d.ts → types/acorex-components-calendar.d.ts}

@@ -2,7 +2,7 @@ import * as polytype from 'polytype';
 import * as i0 from '@angular/core';
 import { TemplateRef, EventEmitter, AfterViewInit } from '@angular/core';
 import { MXBaseComponent, AXItemClickEvent, AXRangeChangedEvent, MXValueComponent, AXRange, MXInteractiveComponent, AXClickEvent, MXComponentOptionChanged } from '@acorex/cdk/common';
-import { AXCalendarService, AXDateTime, AXDateTimeRange } from '@acorex/core/date-time';
+import { AXCalendarService, AXDateTimeRange, AXDateTime } from '@acorex/core/date-time';
 import { AXLocaleService } from '@acorex/core/locale';
 import { AXTranslationService } from '@acorex/core/translation';
 

package/{check-box/index.d.ts → types/acorex-components-check-box.d.ts}

@@ -49,7 +49,7 @@ declare class AXCheckBoxComponent extends AXCheckBoxComponent_base {
     /**
      * @ignore
      */
-    private _handleClick;
+    _handleClick(e: UIEvent): boolean;
     /**
      *  @ignore
      */

package/{code-editor/index.d.ts → types/acorex-components-code-editor.d.ts}

@@ -320,7 +320,7 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
      * Handles Ctrl/Cmd+S on the host. If formatOnSave is enabled, attempts
      * to format the document first, then emits the saved text.
      */
-    onSaveShortcut(event: KeyboardEvent): Promise<void>;
+    onSaveShortcut(event: Event): Promise<void>;
     private loadCodeMirrorModules;
     private createCompartments;
     private buildKeymaps;

package/{color-palette/index.d.ts → types/acorex-components-color-palette.d.ts}

@@ -1,5 +1,4 @@
 import { AXValueChangedEvent, AXOptionChangedEvent, MXBaseComponent, MXValueComponent } from '@acorex/cdk/common';
-import { AXMaskOptions } from '@acorex/components/text-box';
 import * as i0 from '@angular/core';
 import { EventEmitter, AfterViewInit, OnDestroy, ElementRef, OnInit, QueryList } from '@angular/core';
 
@@ -53,7 +52,7 @@ declare class AXColorPaletteInputComponent extends MXBaseComponent implements Af
     /**
      *  @ignore
      */
-    protected _hexMaskOptions: AXMaskOptions;
+    protected _hexMaskOptions: string;
     /**
      *  @ignore
      */

package/{command/index.d.ts → types/acorex-components-command.d.ts}

@@ -1,31 +1,43 @@
 import * as polytype from 'polytype';
 import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
 import { AXEvent, MXInputBaseValueComponent, MXLookComponent, AXHtmlEvent, AXFocusEvent } from '@acorex/cdk/common';
 import { AXListNavigationDirective, AXListNavigationItemDirective } from '@acorex/cdk/list-navigation';
 import { AXSearchBoxComponent } from '@acorex/components/search-box';
 
-type CommandItem = {
+type AXCommandItem = {
     id: string | number;
     text: string;
     icon?: string;
     href?: string;
-    children?: CommandItem[];
+    children?: AXCommandItem[];
     index?: number;
     data?: any;
 };
-type CommandMenuItem = {
+type forceId = {
+    id: string | number;
+};
+type AXCommandMenuItem<T extends forceId = AXCommandItem> = {
     pinned?: {
-        title: string;
-        items: CommandItem[];
+        title?: string;
+        items: T[];
+    };
+    list: {
+        title?: string;
+        items: T[];
     };
-    items: CommandItem[];
 };
 declare class AXCommandComponentEvent extends AXEvent {
-    data: CommandItem;
+    data: AXCommandItem;
 }
+type AXCommandFooter = {
+    navigation: boolean;
+    select: boolean;
+    close: boolean;
+};
 
 declare const AXCommandComponent_base: polytype.Polytype.ClusteredConstructor<[{
-    new (): MXInputBaseValueComponent<CommandMenuItem>;
+    new (): MXInputBaseValueComponent<AXCommandMenuItem>;
     ɵfac: _angular_core.ɵɵFactoryDeclaration<MXInputBaseValueComponent<any>, never>;
     ɵprov: _angular_core.ɵɵInjectableDeclaration<MXInputBaseValueComponent<any>>;
 }, typeof MXLookComponent]>;
@@ -38,17 +50,27 @@ declare class AXCommandComponent extends AXCommandComponent_base {
     readonly onSearchBoxBlur: _angular_core.OutputEmitterRef<AXHtmlEvent<FocusEvent>>;
     protected listNavigation: _angular_core.Signal<AXListNavigationDirective>;
     private listNav;
-    protected displayItems: _angular_core.Signal<CommandItem[]>;
+    /**
+     * The custom template used for rendering content.
+     *
+     * @param {TemplateRef<any>} customTemplate
+     */
+    customTemplate: _angular_core.InputSignal<TemplateRef<any>>;
+    searchBar: _angular_core.InputSignal<boolean>;
+    divider: _angular_core.InputSignal<boolean>;
+    searchKey: _angular_core.InputSignal<string>;
+    footerButtons: _angular_core.InputSignal<AXCommandFooter>;
+    protected displayItems: _angular_core.Signal<AXCommandItem[]>;
     protected focusHandler(e: AXFocusEvent): void;
     protected blurHandler(e: AXFocusEvent): void;
     private filterRecursive;
-    protected onItemClick(item: CommandItem): void;
-    protected keyPress(e: AXHtmlEvent<KeyboardEvent>, item: CommandItem): void;
+    protected onItemClick(item: AXCommandItem): void;
+    protected keyPress(e: AXHtmlEvent<KeyboardEvent>, item: AXCommandItem): void;
     protected searchEscapeHandler(e: AXHtmlEvent<KeyboardEvent>): void;
     protected closeHandler(e: AXHtmlEvent<KeyboardEvent>): void;
     protected activeHandler(l: AXListNavigationDirective, i: AXListNavigationItemDirective): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCommandComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXCommandComponent, "ax-command", 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; }; }, { "onSubmit": "onSubmit"; "onEscape": "onEscape"; "onSearchBoxFocus": "onSearchBoxFocus"; "onSearchBoxBlur": "onSearchBoxBlur"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXCommandComponent, "ax-command", 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; }; "customTemplate": { "alias": "customTemplate"; "required": false; "isSignal": true; }; "searchBar": { "alias": "searchBar"; "required": false; "isSignal": true; }; "divider": { "alias": "divider"; "required": false; "isSignal": true; }; "searchKey": { "alias": "searchKey"; "required": false; "isSignal": true; }; "footerButtons": { "alias": "footerButtons"; "required": false; "isSignal": true; }; }, { "onSubmit": "onSubmit"; "onEscape": "onEscape"; "onSearchBoxFocus": "onSearchBoxFocus"; "onSearchBoxBlur": "onSearchBoxBlur"; }, never, never, true, never>;
 }
 
 declare class AXCommandModule {
@@ -58,4 +80,4 @@ declare class AXCommandModule {
 }
 
 export { AXCommandComponent, AXCommandComponentEvent, AXCommandModule };
-export type { CommandItem, CommandMenuItem };
+export type { AXCommandFooter, AXCommandItem, AXCommandMenuItem };