@acorex/cdk 20.2.0-next.9 → 20.2.0

package/accordion/index.d.ts

@@ -9,14 +9,31 @@ declare class AXAccordionCloseButtonDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<AXAccordionCloseButtonDirective, "[axAccordionCloseButton]", never, {}, {}, never, never, true, never>;
 }
 
+declare class AXAccordionItemDirective {
+    #private;
+    private closeBtn;
+    private header;
+    id: i0.WritableSignal<number>;
+    collapsedOnItemClick: i0.WritableSignal<boolean>;
+    isCollapsed: i0.ModelSignal<boolean>;
+    onClick: i0.OutputEmitterRef<AXClickEvent>;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXAccordionItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AXAccordionItemDirective, "[axAccordionItem]", ["axAccordionItem"], { "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; "onClick": "onClick"; }, ["closeBtn", "header"], never, true, never>;
+}
+
 declare class AXAccordionGroupDirective {
     #private;
-    accordion: i0.ModelSignal<boolean>;
-    activeIndex: i0.ModelSignal<number | number[]>;
+    accordion: i0.InputSignal<boolean>;
+    activeIndex: i0.InputSignal<number | number[]>;
+    collapsedOnItemClick: i0.InputSignal<boolean>;
+    private contentChildren;
     private activeId;
-    private content;
+    customAccordionItem: i0.WritableSignal<AXAccordionItemDirective[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXAccordionGroupDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AXAccordionGroupDirective, "[axAccordionGroup]", ["axAccordionGroup"], { "accordion": { "alias": "accordion"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; }, { "accordion": "accordionChange"; "activeIndex": "activeIndexChange"; }, ["content"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AXAccordionGroupDirective, "[axAccordionGroup]", ["axAccordionGroup"], { "accordion": { "alias": "accordion"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "collapsedOnItemClick": { "alias": "collapsedOnItemClick"; "required": false; "isSignal": true; }; }, {}, ["contentChildren"], never, true, never>;
 }
 
 declare class AXAccordionItemContentDirective {
@@ -35,18 +52,6 @@ declare class AXAccordionItemHeaderDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<AXAccordionItemHeaderDirective, "[axAccordionItemHeader]", ["axAccordionItemHeader"], {}, {}, never, never, true, never>;
 }
 
-declare class AXAccordionItemDirective {
-    #private;
-    private close;
-    private header;
-    id: i0.WritableSignal<number>;
-    isCollapsed: i0.ModelSignal<boolean>;
-    onClick: i0.OutputEmitterRef<AXClickEvent>;
-    collapsedOnItemClick: i0.ModelSignal<boolean>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXAccordionItemDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AXAccordionItemDirective, "[axAccordionItem]", ["axAccordionItem"], { "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "collapsedOnItemClick": { "alias": "collapsedOnItemClick"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; "onClick": "onClick"; "collapsedOnItemClick": "collapsedOnItemClickChange"; }, ["close", "header"], never, true, never>;
-}
-
 declare class AXAccordionCdkModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXAccordionCdkModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<AXAccordionCdkModule, never, [typeof i1.CommonModule, typeof AXAccordionGroupDirective, typeof AXAccordionItemContentDirective, typeof AXAccordionItemHeaderDirective, typeof AXAccordionItemDirective, typeof AXAccordionCloseButtonDirective], [typeof AXAccordionGroupDirective, typeof AXAccordionItemContentDirective, typeof AXAccordionItemHeaderDirective, typeof AXAccordionItemDirective, typeof AXAccordionCloseButtonDirective]>;

package/carousel/index.d.ts

@@ -8,6 +8,7 @@ declare class AXCarouselDirective {
     carousel: _angular_core.WritableSignal<Swiper>;
     carouselOptions: _angular_core.InputSignal<SwiperOptions>;
     private el;
+    private platformId;
     private init;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCarouselDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXCarouselDirective, "[axCarousel]", ["axCarousel"], { "carouselOptions": { "alias": "carouselOptions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

package/common/README.md

@@ -1,3 +1,3 @@
 # @acorex/cdk/common
 
-Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/cdk/common`.
+Secondary entry point of `@acorex/cdk`. It can be used by importing from `@acorex/cdk/common`.

package/common/index.d.ts

@@ -210,6 +210,13 @@ declare class AXItemClickEvent<T = any> extends AXClickEvent {
     name?: string;
     item: T;
 }
+/**
+ *  Fires each time the user select the element.
+ * @category Events
+ */
+declare class AXItemSelectedEvent<T = any> extends AXEvent {
+    item: T;
+}
 /**
  *  Fires each time the component gets focused.
  * @category Events
@@ -262,6 +269,11 @@ declare abstract class MXBaseComponent {
     get id(): string;
     set id(v: string);
     protected get cdr(): ChangeDetectorRef;
+    /**
+     * Gets the host HTML element of the component.
+     *
+     * @returns T - The native DOM element associated with this component.
+     */
     getHostElement<T = HTMLElement>(): T;
     protected getViewContainer(): ViewContainerRef;
     protected internalOptionChanging(option: MXComponentOptionChanging): any;
@@ -276,6 +288,11 @@ declare abstract class MXBaseComponent {
      * @event
      */
     onOptionChanged: EventEmitter<AXOptionChangedEvent>;
+    /**
+     * Sets a component option with optional lifecycle callbacks.
+     *
+     * @param option - The option configuration containing the name, value and optional before/after callbacks.
+     */
     setOption<T = any>(option: MXComponentSetOption<T>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MXBaseComponent, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MXBaseComponent>;
@@ -286,6 +303,11 @@ declare class MXInteractiveComponent extends MXBaseComponent {
      *  @ignore
      */
     protected onTouchedCallback: () => void;
+    /**
+     * Registers a touched callback function (ControlValueAccessor method).
+     *
+     * @param fn - The callback function to register.
+     */
     registerOnTouched(fn: () => void): void;
     private _touched;
     /**
@@ -309,6 +331,11 @@ declare class MXInteractiveComponent extends MXBaseComponent {
      */
     get disabled(): boolean;
     set disabled(value: boolean);
+    /**
+     * Sets the disabled state of the component.
+     *
+     * @param isDisabled - Whether the component should be disabled.
+     */
     setDisabledState(isDisabled: boolean): void;
     _tabIndex: number;
     /**
@@ -328,10 +355,18 @@ declare class MXInteractiveComponent extends MXBaseComponent {
      */
     onBlur: EventEmitter<AXFocusEvent>;
     protected emitOnBlurEvent(e?: FocusEvent): void;
+    /**
+     * Focuses the component.
+     */
     focus(): void;
+    /**
+     * Removes focus from the component.
+     */
     blur(): void;
     /**
-     *  Check component is focused or has any focused element.
+     * Checks if the component is focused or has any focused element.
+     *
+     * @returns boolean - True if the component has focus.
      */
     hasFocus(): boolean;
 }
@@ -385,15 +420,54 @@ declare class MXValueComponent<T = any> extends MXInteractiveComponent implement
     validationRulesChange: EventEmitter<AXFormValidationRule[]>;
     private validationRules;
     get isRequired(): boolean;
+    /**
+     * Adds a validation rule.
+     *
+     * @param rule - The validation rule to add.
+     */
     addValidationRule(rule: AXFormValidationRule): void;
+    /**
+     * Removes a validation rule.
+     *
+     * @param ruleToRemove - The validation rule to remove.
+     */
     removeValidationRule(ruleToRemove: AXFormValidationRule): void;
+    /**
+     * Validates the component.
+     *
+     * @returns Promise<AXValidationSummary> - Validation result.
+     */
     validate(): Promise<AXValidationSummary>;
     protected setState(state: AXComponentState, ...args: any[]): void;
     protected onChangeCallback: (value: T) => void;
+    /**
+     * Registers a change callback function (ControlValueAccessor method).
+     *
+     * @param fn - The callback function to register.
+     */
     registerOnChange(fn: (value: T) => void): void;
+    /**
+     * Writes a value to the component (ControlValueAccessor method).
+     *
+     * @param value - The value to write.
+     */
     writeValue(value: T): void;
+    /**
+     * Commits a value with optional user interaction flag.
+     *
+     * @param value - The value to commit.
+     * @param u - Optional flag indicating if this is a user interaction.
+     */
     commitValue(value: T, u?: boolean): void;
+    /**
+     * Resets the component value.
+     *
+     * @param e - Optional flag indicating if this is a user interaction.
+     */
     reset(e?: boolean): void;
+    /**
+     * Resets validation errors.
+     */
     resetErrors(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MXValueComponent<any>, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MXValueComponent<any>>;
@@ -579,6 +653,7 @@ declare function convertArrayToDataSource<T = unknown>(items: T[], options?: {
     key: string;
     pageSize: number;
 }): AXDataSource<T>;
+declare function applyDataSourceQuery<T extends Record<string, unknown>>(items: T[], filter: AXDataSourceFilterOption): T[];
 
 interface AXDataListQuery {
     take?: number;
@@ -853,6 +928,10 @@ declare abstract class MXSelectionValueComponent<T = unknown> extends MXValueCom
     /** Template string for formatting item display text */
     get textTemplate(): string;
     set textTemplate(value: string);
+    private _defaultText;
+    /** Text to display when neither textField nor valueField exist on the item */
+    get defaultText(): string;
+    set defaultText(value: string);
     private _disabledField;
     /** Field name used to determine if an item is disabled */
     get disabledField(): string;
@@ -863,6 +942,13 @@ declare abstract class MXSelectionValueComponent<T = unknown> extends MXValueCom
     set multiple(value: boolean);
     /** Gets the currently selected items */
     get selectedItems(): unknown[];
+    onItemSelected: EventEmitter<AXItemSelectedEvent>;
+    /**
+     * Emitted when an item in the list is clicked.
+     *
+     * @event
+     */
+    onItemClick: EventEmitter<AXItemClickEvent>;
     /**
      * Abstract method to retrieve an item by its key
      * @param key The unique identifier of the item
@@ -940,6 +1026,12 @@ declare abstract class MXSelectionValueComponent<T = unknown> extends MXValueCom
      * @returns True if the item is disabled
      */
     isItemDisabled(item: T): boolean;
+    /**
+     * Checks if an item is currently loading
+     * @param item Item to check
+     * @returns True if the item is loading
+     */
+    isItemLoading(item: T): boolean;
     /**
      * Gets the display text for an item using template or text field
      * @param item Item to get display text for
@@ -960,6 +1052,25 @@ declare abstract class MXSelectionValueComponent<T = unknown> extends MXValueCom
      * Clears only the cache while preserving selected items
      */
     protected softClearSelectionCache(): void;
+    /**
+     * Clears the debouncing cache for specific items to ensure fresh data is displayed
+     */
+    protected clearItemDebouncingCache(item: T): void;
+    /**
+     * Forces a refresh of the display when items are loaded asynchronously
+     * This should be called when the data source is updated
+     */
+    protected refreshDisplay(): void;
+    /**
+     * Refreshes the display for all selected items to ensure consistency
+     * This is useful when the data source has been updated
+     */
+    protected refreshSelectedItemsDisplay(): void;
+    /**
+     * Forces a refresh of all selected items by clearing their debouncing cache
+     * This ensures fresh data is displayed when the data source is updated
+     */
+    protected forceRefreshSelectedItems(): void;
     /**
      * Asynchronously loads an item by its key and caches the result
      * @param key Key to load item by
@@ -1043,5 +1154,5 @@ declare class AXHotkeysService {
     static ɵprov: i0.ɵɵInjectableDeclaration<AXHotkeysService>;
 }
 
-export { AXAutoFocusDirective, AXAutocompleteParentComponent, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosableComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXDataSource, AXDomService, AXEvent, AXFocusEvent, AXFocusableComponent, AXHotkeyDirective, AXHotkeysService, AXHtmlEvent, AXInfiniteScrollerDirective, AXInvertedColorDirective, AXItemClickEvent, AXListDataSource, AXNgModelDelayedValueChangedDirective, AXOptionChangedEvent, AXPagedComponent, AXRangeChangedEvent, AXResponsiveDirective, AXRippleDirective, AXSearchableComponent, AXSelectionValueChangedEvent, AXValuableComponent, AXValueChangedEvent, AX_LOCATIONS, AX_PLACEMENT_BOTTOM, AX_PLACEMENT_BOTTOM_END, AX_PLACEMENT_BOTTOM_START, AX_PLACEMENT_END, AX_PLACEMENT_END_BOTTOM, AX_PLACEMENT_END_TOP, AX_PLACEMENT_MAP, AX_PLACEMENT_START, AX_PLACEMENT_START_BOTTOM, AX_PLACEMENT_START_TOP, AX_PLACEMENT_TOP, AX_PLACEMENT_TOP_END, AX_PLACEMENT_TOP_START, AX_SELECTION_DATA_TOKEN, AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXLookableComponent, MXSelectionBridgeService, MXSelectionValueComponent, MXValueComponent, NXButtonComponent, NXClickEvent, NXColorComponent, NXComponent, NXEvent, NXInteractiveComponent, NXLookComponent, NXNativeEvent, NXValueComponent, TAB_META_KEY, convertArrayToDataSource, convertToPlacement };
+export { AXAutoFocusDirective, AXAutocompleteParentComponent, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosableComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXDataSource, AXDomService, AXEvent, AXFocusEvent, AXFocusableComponent, AXHotkeyDirective, AXHotkeysService, AXHtmlEvent, AXInfiniteScrollerDirective, AXInvertedColorDirective, AXItemClickEvent, AXItemSelectedEvent, AXListDataSource, AXNgModelDelayedValueChangedDirective, AXOptionChangedEvent, AXPagedComponent, AXRangeChangedEvent, AXResponsiveDirective, AXRippleDirective, AXSearchableComponent, AXSelectionValueChangedEvent, AXValuableComponent, AXValueChangedEvent, AX_LOCATIONS, AX_PLACEMENT_BOTTOM, AX_PLACEMENT_BOTTOM_END, AX_PLACEMENT_BOTTOM_START, AX_PLACEMENT_END, AX_PLACEMENT_END_BOTTOM, AX_PLACEMENT_END_TOP, AX_PLACEMENT_MAP, AX_PLACEMENT_START, AX_PLACEMENT_START_BOTTOM, AX_PLACEMENT_START_TOP, AX_PLACEMENT_TOP, AX_PLACEMENT_TOP_END, AX_PLACEMENT_TOP_START, AX_SELECTION_DATA_TOKEN, AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXLookableComponent, MXSelectionBridgeService, MXSelectionValueComponent, MXValueComponent, NXButtonComponent, NXClickEvent, NXColorComponent, NXComponent, NXEvent, NXInteractiveComponent, NXLookComponent, NXNativeEvent, NXValueComponent, TAB_META_KEY, applyDataSourceQuery, convertArrayToDataSource, convertToPlacement };
 export type { AXAnimationEasing, AXComponentState, AXConnectedPosition, AXDataListFetchCallbackResult, AXDataListFetchDataCallback, AXDataListItems, AXDataListQuery, AXDataSourceByKeyCallback, AXDataSourceCallbackResult, AXDataSourceChangedEvent, AXDataSourceConfig, AXDataSourceFilterOption, AXDataSourceItemExpandedEvent, AXDataSourceLoadCallback, AXDataSourceOperator, AXDataSourceQuery, AXDataSourceSortOption, AXDirection, AXExpandToggleIcons, AXFilterLogic, AXFormValidationRule, AXHotKeyAction, AXLocation, AXOrientation, AXPagedComponentInterface, AXPlacement, AXPlacementType, AXRange, AXScrollPosition, AXSelectionMode, AXSizeType, AXSortOrder, AXStyleColorType, AXStyleLookType, AXStyleSizeType, AXSurfaceType, DisabledCallback, MXComponentOptionChanged, MXComponentOptionChanging, MXComponentSetOption, NormalizedItem };

package/drag-drop/index.d.ts

@@ -154,6 +154,7 @@ declare class AXDropListDirective extends NXComponent implements OnInit, AfterCo
     private readonly _zone;
     private readonly _renderer;
     private readonly _cdr;
+    private readonly _platformId;
     private readonly _hostEl;
     /** Whether sorting within this list is disabled. */
     sortingDisabled: _angular_core.InputSignal<boolean>;

package/drawer/index.d.ts

@@ -28,8 +28,23 @@ declare class AXDrawerItemDirective implements OnDestroy {
     closeOnBackdropClick: _angular_core.ModelSignal<boolean>;
     backdropClass: _angular_core.ModelSignal<string>;
     onBackdropClick: _angular_core.OutputEmitterRef<AXClickEvent>;
+    /**
+     * Shows the drawer by animating it into view.
+     *
+     * @returns void - No return value. The drawer becomes visible.
+     */
     show(): void;
+    /**
+     * Hides the drawer by animating it out of view.
+     *
+     * @returns void - No return value. The drawer becomes hidden.
+     */
     hide(): void;
+    /**
+     * Toggles the drawer state between visible and hidden.
+     *
+     * @returns void - No return value. The drawer state is toggled.
+     */
     toggle(): void;
     private addBackdrop;
     private removeBackdrop;

package/fesm2022/acorex-cdk-accordion.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, contentChild, signal, model, output, afterNextRender, contentChildren, effect, computed, input, NgModule } from '@angular/core';
+import { inject, ElementRef, Directive, contentChild, signal, model, output, afterNextRender, input, contentChildren, effect, computed, NgModule } from '@angular/core';
 import { castArray } from 'lodash-es';
 import { CommonModule } from '@angular/common';
 
@@ -7,10 +7,10 @@ class AXAccordionCloseButtonDirective {
     constructor() {
         this.elm = inject(ElementRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAccordionCloseButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: AXAccordionCloseButtonDirective, isStandalone: true, selector: "[axAccordionCloseButton]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionCloseButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: AXAccordionCloseButtonDirective, isStandalone: true, selector: "[axAccordionCloseButton]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAccordionCloseButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionCloseButtonDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axAccordionCloseButton]' }]
         }] });
@@ -19,10 +19,10 @@ class AXAccordionItemHeaderDirective {
     constructor() {
         this.elm = inject(ElementRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAccordionItemHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: AXAccordionItemHeaderDirective, isStandalone: true, selector: "[axAccordionItemHeader]", exportAs: ["axAccordionItemHeader"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionItemHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: AXAccordionItemHeaderDirective, isStandalone: true, selector: "[axAccordionItemHeader]", exportAs: ["axAccordionItemHeader"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAccordionItemHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionItemHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axAccordionItemHeader]',
@@ -32,15 +32,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
 
 class AXAccordionItemDirective {
     constructor() {
-        this.close = contentChild(AXAccordionCloseButtonDirective, ...(ngDevMode ? [{ debugName: "close", descendants: true }] : [{ descendants: true }]));
+        this.closeBtn = contentChild(AXAccordionCloseButtonDirective, ...(ngDevMode ? [{ debugName: "closeBtn", descendants: true }] : [{ descendants: true }]));
         this.header = contentChild(AXAccordionItemHeaderDirective, ...(ngDevMode ? [{ debugName: "header", descendants: true }] : [{ descendants: true }]));
         this.id = signal(Math.random(), ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.collapsedOnItemClick = signal(true, ...(ngDevMode ? [{ debugName: "collapsedOnItemClick" }] : []));
         this.isCollapsed = model(true, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
         this.onClick = output();
-        this.collapsedOnItemClick = model(true, ...(ngDevMode ? [{ debugName: "collapsedOnItemClick" }] : []));
         this.#init = afterNextRender(() => {
-            if (this.close()) {
-                (this.close()?.elm.nativeElement).onclick = () => {
+            if (this.closeBtn()) {
+                (this.closeBtn()?.elm.nativeElement).onclick = () => {
                     if (this.collapsedOnItemClick()) {
                         this.isCollapsed.update((prev) => !prev);
                     }
@@ -58,10 +58,19 @@ class AXAccordionItemDirective {
         });
     }
     #init;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.1.3", type: AXAccordionItemDirective, isStandalone: true, selector: "[axAccordionItem]", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsedOnItemClick: { classPropertyName: "collapsedOnItemClick", publicName: "collapsedOnItemClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", onClick: "onClick", collapsedOnItemClick: "collapsedOnItemClickChange" }, queries: [{ propertyName: "close", first: true, predicate: AXAccordionCloseButtonDirective, descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: AXAccordionItemHeaderDirective, descendants: true, isSignal: true }], exportAs: ["axAccordionItem"], ngImport: i0 }); }
+    open() {
+        this.isCollapsed.set(false);
+    }
+    close() {
+        this.isCollapsed.set(true);
+    }
+    toggle() {
+        this.isCollapsed.update((prev) => !prev);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.3", type: AXAccordionItemDirective, isStandalone: true, selector: "[axAccordionItem]", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", onClick: "onClick" }, queries: [{ propertyName: "closeBtn", first: true, predicate: AXAccordionCloseButtonDirective, descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: AXAccordionItemHeaderDirective, descendants: true, isSignal: true }], exportAs: ["axAccordionItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAccordionItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axAccordionItem]',
@@ -71,16 +80,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
 
 class AXAccordionGroupDirective {
     constructor() {
-        this.accordion = model(true, ...(ngDevMode ? [{ debugName: "accordion" }] : []));
-        this.activeIndex = model(null, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+        this.accordion = input(true, ...(ngDevMode ? [{ debugName: "accordion" }] : []));
+        this.activeIndex = input(null, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+        this.collapsedOnItemClick = input(true, ...(ngDevMode ? [{ debugName: "collapsedOnItemClick" }] : []));
+        this.contentChildren = contentChildren(AXAccordionItemDirective, ...(ngDevMode ? [{ debugName: "contentChildren" }] : []));
         this.activeId = signal(null, ...(ngDevMode ? [{ debugName: "activeId" }] : []));
-        this.content = contentChildren(AXAccordionItemDirective, ...(ngDevMode ? [{ debugName: "content" }] : []));
+        this.customAccordionItem = signal([], ...(ngDevMode ? [{ debugName: "customAccordionItem" }] : []));
         this.#init = afterNextRender(() => {
-            this.content().forEach((element) => {
-                element.onClick.subscribe((e) => {
-                    this.activeId.set(e.component.id());
+            if (this.contentChildren().length) {
+                this.contentChildren().forEach((element) => {
+                    element.collapsedOnItemClick.set(this.collapsedOnItemClick());
+                    if (this.accordion() && !element.isCollapsed())
+                        this.activeId.set(element.id());
+                    element.onClick.subscribe((e) => {
+                        this.activeId.set(e.component.id());
+                    });
+                });
+            }
+            else {
+                this.customAccordionItem().forEach((element) => {
+                    element.collapsedOnItemClick.set(this.collapsedOnItemClick());
+                    if (this.accordion() && !element.isCollapsed())
+                        this.activeId.set(element.id());
+                    element.onClick.subscribe((e) => {
+                        this.activeId.set(e.component.id());
+                    });
                 });
-            });
+            }
         });
         this.#eff2 = effect(() => {
             if (!this.activeIndex())
@@ -88,38 +114,59 @@ class AXAccordionGroupDirective {
             const activeIndexes = castArray(this.activeIndex());
             if (activeIndexes.length)
                 return;
-            this.content().forEach((item, index) => {
-                if (activeIndexes.includes(index)) {
-                    setTimeout(() => {
-                        item.isCollapsed.set(false);
-                    });
-                }
-            });
+            if (this.contentChildren().length) {
+                this.contentChildren().forEach((item, index) => {
+                    if (activeIndexes.includes(index)) {
+                        setTimeout(() => {
+                            this.activeId.set(item.id());
+                            item.isCollapsed.set(false);
+                        });
+                    }
+                });
+            }
+            else {
+                this.customAccordionItem().forEach((item, index) => {
+                    if (activeIndexes.includes(index)) {
+                        setTimeout(() => {
+                            this.activeId.set(item.id());
+                            item.isCollapsed.set(false);
+                        });
+                    }
+                });
+            }
         }, ...(ngDevMode ? [{ debugName: "#eff2" }] : []));
         this.#eff3 = effect(() => {
-            if (!this.accordion())
+            if (!this.accordion() || !this.collapsedOnItemClick())
                 return;
-            this.content().forEach((element) => {
-                if (this.activeId() === element.id()) {
-                    if (!element.collapsedOnItemClick())
-                        return;
-                    element.isCollapsed.set(false);
-                }
-                else {
-                    if (!element.collapsedOnItemClick())
-                        return;
-                    element.isCollapsed.set(true);
-                }
-            });
+            if (this.contentChildren().length) {
+                this.contentChildren().forEach((element) => {
+                    if (this.activeId() === element.id()) {
+                        element.isCollapsed.set(false);
+                    }
+                    else {
+                        element.isCollapsed.set(true);
+                    }
+                });
+            }
+            else {
+                this.customAccordionItem().forEach((element) => {
+                    if (this.activeId() === element.id()) {
+                        element.isCollapsed.set(false);
+                    }
+                    else {
+                        element.isCollapsed.set(true);
+                    }
+                });
+            }
         }, ...(ngDevMode ? [{ debugName: "#eff3" }] : []));
     }
     #init;
     #eff2;
     #eff3;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAccordionGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.1.3", type: AXAccordionGroupDirective, isStandalone: true, selector: "[axAccordionGroup]", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { accordion: "accordionChange", activeIndex: "activeIndexChange" }, queries: [{ propertyName: "content", predicate: AXAccordionItemDirective, isSignal: true }], exportAs: ["axAccordionGroup"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.3", type: AXAccordionGroupDirective, isStandalone: true, selector: "[axAccordionGroup]", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, collapsedOnItemClick: { classPropertyName: "collapsedOnItemClick", publicName: "collapsedOnItemClick", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "contentChildren", predicate: AXAccordionItemDirective, isSignal: true }], exportAs: ["axAccordionGroup"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAccordionGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axAccordionGroup]',
@@ -149,9 +196,11 @@ class AXAccordionItemContentDirective {
                 });
             }
             else {
-                el.style.display = 'block';
-                el.style.opacity = '1';
-                el.style.height = el.scrollHeight + 'px';
+                setTimeout(() => {
+                    el.style.display = 'block';
+                    el.style.opacity = '1';
+                    el.style.height = el.scrollHeight + 'px';
+                });
                 const onTransitionEnd = (event) => {
                     if (event.propertyName === 'height') {
                         el.style.height = 'auto';
@@ -163,10 +212,10 @@ class AXAccordionItemContentDirective {
     }
     #init;
     #eff;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAccordionItemContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: AXAccordionItemContentDirective, isStandalone: true, selector: "[axAccordionItemContent]", inputs: { transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["axAccordionItemContent"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionItemContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: AXAccordionItemContentDirective, isStandalone: true, selector: "[axAccordionItemContent]", inputs: { transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["axAccordionItemContent"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAccordionItemContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionItemContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axAccordionItemContent]',
@@ -183,8 +232,8 @@ const COMPONENT = [
 ];
 const MODULES = [CommonModule];
 class AXAccordionCdkModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAccordionCdkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: AXAccordionCdkModule, imports: [CommonModule, AXAccordionGroupDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionCdkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionCdkModule, imports: [CommonModule, AXAccordionGroupDirective,
             AXAccordionItemContentDirective,
             AXAccordionItemHeaderDirective,
             AXAccordionItemDirective,
@@ -193,9 +242,9 @@ class AXAccordionCdkModule {
             AXAccordionItemHeaderDirective,
             AXAccordionItemDirective,
             AXAccordionCloseButtonDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAccordionCdkModule, imports: [MODULES] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionCdkModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAccordionCdkModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionCdkModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],