@acorex/components 21.0.1-next.3 → 21.0.1-next.30

package/accordion/index.d.ts

@@ -10,7 +10,6 @@ declare class AXAccordionGroupComponent {
     activeIndex: _angular_core.ModelSignal<number | number[]>;
     look: _angular_core.InputSignal<string>;
     collapsedOnItemClick: _angular_core.InputSignal<boolean>;
-    private get __hostClass();
     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>;
 }

package/action-sheet/index.d.ts

@@ -1,7 +1,8 @@
-import { AXStyleColorType, MXBaseComponent } from '@acorex/cdk/common';
-import { ComponentType, Portal, CdkPortalOutletAttachedRef } from '@angular/cdk/portal';
-import * as i0 from '@angular/core';
-import { TemplateRef, OnInit, OnDestroy } from '@angular/core';
+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';
 
@@ -21,36 +22,90 @@ interface AXActionSheetItem {
         title?: string;
     };
 }
-type AXActionSheetContentType = TemplateRef<unknown> | ComponentType<unknown>;
+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 {
-    dialogRef: any;
+    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, OnDestroy {
-    protected data: AXActionSheetConfig;
-    private dialogRef;
+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;
@@ -68,22 +123,42 @@ declare class AXActionSheetComponent extends MXBaseComponent implements OnInit,
     /**
      *  @ignore
      */
-    protected _selectedPortal: Portal<any>;
+    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
      */
-    private _componentRef;
+    ngOnInit(): void;
     /**
      *  @ignore
      */
-    ngOnInit(): void;
+    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;
-    protected handleAttched(ref: CdkPortalOutletAttachedRef): void;
     /**
      * 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
@@ -104,27 +179,33 @@ declare class AXActionSheetComponent extends MXBaseComponent implements OnInit,
      *                           This affects how the action sheet handles accessibility and event tracking.
      * @returns void
      */
-    close(e?: any, isUserInteraction?: boolean): void;
+    close(e?: unknown, isUserInteraction?: boolean): void;
     /**
      *  @ignore
      */
     protected onKeydownHandler(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXActionSheetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXActionSheetComponent, "ax-action-sheet", never, {}, {}, never, never, true, never>;
+    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: i0.ɵɵFactoryDeclaration<AXActionSheetModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXActionSheetModule, never, [typeof AXActionSheetComponent], [typeof AXActionSheetComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<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>;
 }
 
-interface AXActionSheetDialogRef {
-    close: (e?: any) => void;
-    closed: Subject<any>;
+/**
+ * @deprecated Use `AXActionSheetRef` instead
+ */
+interface AXActionSheetDialogRef<TResult = unknown> {
+    close: (e?: TResult) => void;
+    setInputs: (values: AXComponentInputs) => void;
+    closed: Subject<{
+        data?: TResult;
+    }>;
 }
 declare class AXActionSheetService {
-    private dialog;
+    private overlayService;
     private readonly actionSheetEvent;
     actionSheetEvent$: rxjs.Observable<AXActionSheetEvent>;
     /**
@@ -138,23 +219,24 @@ declare class AXActionSheetService {
      * @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() and a closed observable for tracking dialog state.
+     *          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',
-     *   items: [
-     *     { text: 'Option 1', value: 'opt1' },
-     *     { text: 'Option 2', value: 'opt2' }
-     *   ]
+     *   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(config: AXActionSheetConfig, isUserInteraction?: boolean): Promise<AXActionSheetDialogRef>;
+    open<TResult = unknown>(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,
@@ -162,13 +244,13 @@ declare class AXActionSheetService {
      * 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 dialog reference.
+     *               associated data, user interaction status, and overlay reference.
      * @returns void
      */
     setActionSheetEventState(event: AXActionSheetEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXActionSheetService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<AXActionSheetService>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXActionSheetService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXActionSheetService>;
 }
 
-export { AXActionSheetComponent, AXActionSheetModule, AXActionSheetService };
-export type { AXActionSheetConfig, AXActionSheetContentType, AXActionSheetDialogRef, AXActionSheetEvent, AXActionSheetItem };
+export { AXActionSheetComponent, AXActionSheetComponentBase, AXActionSheetModule, AXActionSheetService };
+export type { AXActionSheetConfig, AXActionSheetContentType, AXActionSheetDialogRef, AXActionSheetEvent, AXActionSheetInternalRef, AXActionSheetItem, AXActionSheetRef };

package/button-group/index.d.ts

@@ -1,7 +1,7 @@
-import * as polytype from 'polytype';
-import { MXInteractiveComponent, MXColorLookComponent, AXClickEvent, AXSelectionMode, AXStyleColorType, MXColorComponent } from '@acorex/cdk/common';
 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';
 
 declare const AXButtonGroupComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXColorLookComponent]>;
 /**
@@ -12,6 +12,7 @@ declare const AXButtonGroupComponent_base: polytype.Polytype.ClusteredConstructo
 declare class AXButtonGroupComponent extends AXButtonGroupComponent_base {
     #private;
     readonly fitParent: i0.InputSignal<boolean>;
+    readonly customClass: i0.InputSignal<string>;
     /**
      * Fires when any button in the group is clicked.
      *
@@ -82,7 +83,7 @@ declare class AXButtonGroupComponent extends AXButtonGroupComponent_base {
      */
     private __hostClick;
     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; }; "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; }; "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>;
 }
 
 interface AXButtonItemListItem {
@@ -109,6 +110,7 @@ declare class AXButtonGroupItemComponent extends AXButtonGroupItemComponent_base
      *  @ignore
      */
     private _selected;
+    readonly customClass: i0.ModelSignal<string>;
     /**
      * Indicates whether the button item is selected.
      *
@@ -157,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; }; "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"; }, never, ["*"], true, 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>;
 }
 
 declare class AXButtonGroupModule {

package/chips/index.d.ts

@@ -1,29 +1,25 @@
 import * as i0 from '@angular/core';
 import * as i1 from '@acorex/cdk/common';
-import { AXStyleLookType, AXStyleSizeType, MXColorComponent } from '@acorex/cdk/common';
+import { MXColorLookComponent } from '@acorex/cdk/common';
 
-type AXChipsLookType = Extract<AXStyleLookType, 'solid' | 'outline' | 'twotone'>;
-type AXChipsSizeType = Exclude<AXStyleSizeType, 'ax-xs' | 'ax-xl'>;
 /**
  * A component for displaying and managing a set of chips.
  *
  * @category Components
  */
-declare class AXChipsComponent extends MXColorComponent {
+declare class AXChipsComponent extends MXColorLookComponent {
     /**
      * The text displayed on the chips.
      *
      * @defaultValue ''
      */
     text: i0.ModelSignal<string>;
-    look: i0.ModelSignal<AXChipsLookType>;
-    size: i0.ModelSignal<AXChipsSizeType>;
     /**
      *  @ignore
      */
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXChipsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXChipsComponent, "ax-chips", never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "text": "textChange"; "look": "lookChange"; "size": "sizeChange"; }, never, ["ax-prefix", "ax-suffix"], true, [{ directive: typeof i1.AXRippleDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXChipsComponent, "ax-chips", never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, { "text": "textChange"; }, never, ["ax-prefix", "ax-suffix"], true, [{ directive: typeof i1.AXRippleDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare class AXChipsModule {
@@ -33,4 +29,3 @@ declare class AXChipsModule {
 }
 
 export { AXChipsComponent, AXChipsModule };
-export type { AXChipsLookType, AXChipsSizeType };

package/collapse/index.d.ts

@@ -5,9 +5,8 @@ import { AfterViewInit, OnDestroy, EventEmitter, TemplateRef } from '@angular/co
 
 declare const AXCollapseGroupComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXBaseComponent, typeof MXLookComponent]>;
 /**
- * Container for collapsible items with configurable styling.
- *
- * @category Components
+ * @deprecated Use `accordion` instead.
+ * This component deprecated and no longer support.
  */
 declare class AXCollapseGroupComponent extends AXCollapseGroupComponent_base implements AfterViewInit, OnDestroy {
     /**
@@ -73,9 +72,8 @@ declare class AXCollapseClickEvent extends AXClickEvent {
 }
 declare const AXCollapseComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXLookComponent]>;
 /**
- * A component that provides a collapsible section with animated transitions.
- *
- * @category Components
+ * @deprecated Use `accordion` instead.
+ * This component deprecated and no longer support.
  */
 declare class AXCollapseComponent extends AXCollapseComponent_base {
     private parent;

package/command/index.d.ts

@@ -1,5 +1,6 @@
 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';
@@ -38,6 +39,12 @@ declare class AXCommandComponent extends AXCommandComponent_base {
     readonly onSearchBoxBlur: _angular_core.OutputEmitterRef<AXHtmlEvent<FocusEvent>>;
     protected listNavigation: _angular_core.Signal<AXListNavigationDirective>;
     private listNav;
+    /**
+     * The custom template used for rendering content.
+     *
+     * @param {TemplateRef<any>} customTemplate
+     */
+    customTemplate: _angular_core.InputSignal<TemplateRef<any>>;
     protected displayItems: _angular_core.Signal<CommandItem[]>;
     protected focusHandler(e: AXFocusEvent): void;
     protected blurHandler(e: AXFocusEvent): void;
@@ -48,7 +55,7 @@ declare class AXCommandComponent extends AXCommandComponent_base {
     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; }; }, { "onSubmit": "onSubmit"; "onEscape": "onEscape"; "onSearchBoxFocus": "onSearchBoxFocus"; "onSearchBoxBlur": "onSearchBoxBlur"; }, never, never, true, never>;
 }
 
 declare class AXCommandModule {

package/conversation2/README.md

@@ -78,22 +78,32 @@ This package requires the following peer dependencies:
 
 ```typescript
 import { ApplicationConfig } from '@angular/core';
-import { provideConversation, AXIndexedDBApi } from '@acorex/components/conversation2';
+import {
+  provideConversation,
+  AXIndexedDBUserApi,
+  AXIndexedDBConversationApi,
+  AXIndexedDBMessageApi,
+  AXIndexedDBRealtimeApi,
+} from '@acorex/components/conversation2';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideConversation({
-      api: AXIndexedDBApi, // or your custom API implementation
+      userApi: AXIndexedDBUserApi,
+      conversationApi: AXIndexedDBConversationApi,
+      messageApi: AXIndexedDBMessageApi,
+      realtimeApi: AXIndexedDBRealtimeApi, // optional
       config: {
-        pageSize: 20,
-        maxFileSize: 10 * 1024 * 1024, // 10MB
+        messagePageSize: 50,
+        conversationPageSize: 30,
+        maxFileSize: 10 * 1024 * 1024,
         allowedFileTypes: ['image/*', 'video/*', 'audio/*', 'application/pdf'],
       },
       registry: {
         // Optional: Register custom message renderers, actions, etc.
-      }
-    })
-  ]
+      },
+    }),
+  ],
 };
 ```
 
@@ -101,17 +111,26 @@ export const appConfig: ApplicationConfig = {
 
 ```typescript
 import { NgModule } from '@angular/core';
-import { AXConversation2Module, AXIndexedDBApi } from '@acorex/components/conversation2';
+import {
+  AXConversation2Module,
+  AXIndexedDBUserApi,
+  AXIndexedDBConversationApi,
+  AXIndexedDBMessageApi,
+  AXIndexedDBRealtimeApi,
+} from '@acorex/components/conversation2';
 
 @NgModule({
   imports: [
     AXConversation2Module.forRoot({
-      api: AXIndexedDBApi,
-      config: { /* ... */ }
-    })
-  ]
+      userApi: AXIndexedDBUserApi,
+      conversationApi: AXIndexedDBConversationApi,
+      messageApi: AXIndexedDBMessageApi,
+      realtimeApi: AXIndexedDBRealtimeApi,
+      config: { /* ... */ },
+    }),
+  ],
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
 ### 3. Use in Template
@@ -155,20 +174,42 @@ export class MyConversationApi extends AXConversationApi {
 #### IndexedDB API (Development/Demo)
 
 ```typescript
-import { AXIndexedDBApi } from '@acorex/components/conversation2';
+import {
+  provideConversation,
+  AXIndexedDBUserApi,
+  AXIndexedDBConversationApi,
+  AXIndexedDBMessageApi,
+  AXIndexedDBRealtimeApi,
+} from '@acorex/components/conversation2';
 
 // Provides in-memory storage with sample data
 // Perfect for development and demos
-provideConversation({ api: AXIndexedDBApi })
+provideConversation({
+  userApi: AXIndexedDBUserApi,
+  conversationApi: AXIndexedDBConversationApi,
+  messageApi: AXIndexedDBMessageApi,
+  realtimeApi: AXIndexedDBRealtimeApi,
+});
 ```
 
 #### IndexedDB with AI API (AI-Powered Demo)
 
 ```typescript
-import { AXIndexedDBAIApi } from '@acorex/components/conversation2';
-
-// Includes AI-powered auto-responses
-provideConversation({ api: AXIndexedDBAIApi })
+import {
+  provideConversation,
+  AXIndexedDBUserApi,
+  AXIndexedDBConversationApi,
+  AXIndexedDBMessageAIApi,
+  AXIndexedDBRealtimeApi,
+} from '@acorex/components/conversation2';
+
+// Includes AI-powered auto-responses via message API
+provideConversation({
+  userApi: AXIndexedDBUserApi,
+  conversationApi: AXIndexedDBConversationApi,
+  messageApi: AXIndexedDBMessageAIApi,
+  realtimeApi: AXIndexedDBRealtimeApi,
+});
 ```
 
 ## ⚙️ Configuration
@@ -178,23 +219,18 @@ provideConversation({ api: AXIndexedDBAIApi })
 ```typescript
 interface AXConversationConfig {
   // Pagination
-  pageSize?: number;                    // Default: 20
+  messagePageSize?: number;             // Default: 50
+  conversationPageSize?: number;        // Default: 30
   infiniteScrollThreshold?: number;     // Default: 200px
   scrollThreshold?: number;             // Default: 100px
 
   // File Upload
   maxFileSize?: number;                 // Default: 10MB
-  allowedFileTypes?: string[];          // Default: all types
+  allowedFileTypes?: string[];          // Default: see defaults
 
   // UI Behavior
   messageHighlightDuration?: number;    // Default: 2000ms
   typingIndicatorTimeout?: number;      // Default: 3000ms
-
-  // Features
-  enableReactions?: boolean;            // Default: true
-  enableReplies?: boolean;              // Default: true
-  enableEditing?: boolean;              // Default: true
-  enableDeletion?: boolean;             // Default: true
 }
 ```
 
@@ -327,14 +363,18 @@ export class MyComponent {
 ```typescript
 import { TestBed } from '@angular/core/testing';
 import { provideConversation, AXConversationService } from '@acorex/components/conversation2';
-import { MockConversationApi } from './mocks/mock-api';
+import { MockUserApi, MockConversationApi, MockMessageApi } from './mocks/mock-apis';
 
 describe('MyComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [
-        provideConversation({ api: MockConversationApi })
-      ]
+        provideConversation({
+          userApi: MockUserApi,
+          conversationApi: MockConversationApi,
+          messageApi: MockMessageApi,
+        }),
+      ],
     });
   });
 
@@ -343,7 +383,7 @@ describe('MyComponent', () => {
     const message = await service.sendMessage({
       conversationId: 'test',
       type: 'text',
-      payload: { text: 'Test' }
+      payload: { text: 'Test' },
     });
     expect(message).toBeDefined();
   });