@acorex/cdk 21.0.0-next.9 → 21.0.0-next51

package/accordion/index.d.ts

@@ -32,6 +32,7 @@ declare class AXAccordionGroupDirective {
     private contentChildren;
     private activeId;
     customAccordionItem: i0.WritableSignal<AXAccordionItemDirective[]>;
+    private accordionHandler;
     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; }; "collapsedOnItemClick": { "alias": "collapsedOnItemClick"; "required": false; "isSignal": true; }; }, {}, ["contentChildren"], never, true, never>;
 }

package/drag-drop/index.d.ts

@@ -16,6 +16,7 @@ declare class AXDragDirective implements OnInit, OnDestroy {
     private viewContainerRef;
     private el;
     private handleDirective;
+    axDrag: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     dragData: _angular_core.InputSignal<unknown>;
     dragDisabled: _angular_core.InputSignal<boolean>;
     dragTransition: _angular_core.InputSignal<boolean>;
@@ -38,13 +39,14 @@ declare class AXDragDirective implements OnInit, OnDestroy {
     private dragStartTime;
     private isDragging;
     private elementOpacity;
-    private isDelayStarted;
     private movedAfterDelay;
     private activePointerId;
     private prevDropZone;
     private dragStartOffset;
     private clonePointerOffset;
     private clonedElementViewRef;
+    private rafId;
+    private pendingPointerEvent;
     private _parentDropList;
     private _currentDropList;
     readonly createCloneElement: _angular_core.Signal<boolean>;
@@ -56,6 +58,7 @@ declare class AXDragDirective implements OnInit, OnDestroy {
     private boundHandlePointerUp;
     private boundHandlePointerDown;
     private boundHandlePointerMove;
+    private listenersAttached;
     ngOnInit(): void;
     ngOnDestroy(): void;
     private setElementTransition;
@@ -68,6 +71,7 @@ declare class AXDragDirective implements OnInit, OnDestroy {
     private preventClicking;
     private handleDropListInteractions;
     private canDropInList;
+    private isCircularReference;
     private dropZoneHoverHandler;
     private dropZoneDropHandler;
     private getDropZonesFromPoint;
@@ -83,7 +87,7 @@ declare class AXDragDirective implements OnInit, OnDestroy {
     private addDocumentListeners;
     private removeDocumentListeners;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDragDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDragDirective, "[axDrag]", never, { "dragData": { "alias": "dragData"; "required": false; "isSignal": true; }; "dragDisabled": { "alias": "dragDisabled"; "required": false; "isSignal": true; }; "dragTransition": { "alias": "dragTransition"; "required": false; "isSignal": true; }; "dragElementClone": { "alias": "dragElementClone"; "required": false; "isSignal": true; }; "dropZoneGroup": { "alias": "dropZoneGroup"; "required": false; "isSignal": true; }; "dragStartDelay": { "alias": "dragStartDelay"; "required": false; "isSignal": true; }; "dragResetOnDblClick": { "alias": "dragResetOnDblClick"; "required": false; "isSignal": true; }; "dragLockAxis": { "alias": "dragLockAxis"; "required": false; "isSignal": true; }; "dragClonedTemplate": { "alias": "dragClonedTemplate"; "required": false; "isSignal": true; }; "dragCursor": { "alias": "dragCursor"; "required": false; "isSignal": true; }; "dragBoundary": { "alias": "dragBoundary"; "required": false; "isSignal": true; }; "dragTransitionDuration": { "alias": "dragTransitionDuration"; "required": false; "isSignal": true; }; }, { "dragPositionChanged": "dragPositionChanged"; }, ["handleDirective"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDragDirective, "[axDrag]", never, { "axDrag": { "alias": "axDrag"; "required": false; "isSignal": true; }; "dragData": { "alias": "dragData"; "required": false; "isSignal": true; }; "dragDisabled": { "alias": "dragDisabled"; "required": false; "isSignal": true; }; "dragTransition": { "alias": "dragTransition"; "required": false; "isSignal": true; }; "dragElementClone": { "alias": "dragElementClone"; "required": false; "isSignal": true; }; "dropZoneGroup": { "alias": "dropZoneGroup"; "required": false; "isSignal": true; }; "dragStartDelay": { "alias": "dragStartDelay"; "required": false; "isSignal": true; }; "dragResetOnDblClick": { "alias": "dragResetOnDblClick"; "required": false; "isSignal": true; }; "dragLockAxis": { "alias": "dragLockAxis"; "required": false; "isSignal": true; }; "dragClonedTemplate": { "alias": "dragClonedTemplate"; "required": false; "isSignal": true; }; "dragCursor": { "alias": "dragCursor"; "required": false; "isSignal": true; }; "dragBoundary": { "alias": "dragBoundary"; "required": false; "isSignal": true; }; "dragTransitionDuration": { "alias": "dragTransitionDuration"; "required": false; "isSignal": true; }; }, { "dragPositionChanged": "dragPositionChanged"; }, ["handleDirective"], never, true, never>;
 }
 
 declare class AXDragHandleDirective {
@@ -93,45 +97,6 @@ declare class AXDragHandleDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDragHandleDirective, "[axDragHandle]", never, {}, {}, never, never, true, never>;
 }
 
-interface AXDropZoneDropEvent extends NXNativeEvent<AXDropZoneDirective, MouseEvent> {
-    dropped: AXDragDirective;
-}
-type AXDropZoneHoverEvent = AXDropZoneDropEvent & {
-    state: 'enter' | 'leave';
-};
-declare class AXDropZoneDirective extends NXComponent implements OnInit {
-    dropZoneGroup: _angular_core.InputSignal<string>;
-    isHovered: _angular_core.WritableSignal<boolean>;
-    readonly element: _angular_core.WritableSignal<HTMLElement>;
-    onElementDrop: _angular_core.OutputEmitterRef<AXDropZoneDropEvent>;
-    onElementHover: _angular_core.OutputEmitterRef<AXDropZoneHoverEvent>;
-    ngOnInit(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDropZoneDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDropZoneDirective, "[axDropZone]", ["axDropZone"], { "dropZoneGroup": { "alias": "dropZoneGroup"; "required": false; "isSignal": true; }; }, { "onElementDrop": "onElementDrop"; "onElementHover": "onElementHover"; }, never, never, true, never>;
-}
-
-declare class AXDragDropModule {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDragDropModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXDragDropModule, never, [typeof AXDragDirective, typeof AXDragHandleDirective, typeof AXDropZoneDirective], [typeof AXDragDirective, typeof AXDragHandleDirective, typeof AXDropZoneDirective]>;
-    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXDragDropModule>;
-}
-
-/**
- * Moves an item one index in an array to another.
- * @param array Array in which to move the item.
- * @param fromIndex Starting index of the item.
- * @param toIndex Index to which the item should be moved.
- */
-declare function moveItemInArray<T = any>(array: T[], fromIndex: number, toIndex: number): void;
-/**
- * Moves an item from one array to another.
- * @param currentArray Array from which to transfer the item.
- * @param targetArray Array into which to put the item.
- * @param currentIndex Index of the item in its current array.
- * @param targetIndex Index at which to insert the item.
- */
-declare function transferArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
-
 /** Event object emitted when an item is dropped into a drop list. */
 interface AXDropListDroppedEvent extends NXNativeEvent<AXDropListDirective, MouseEvent> {
     item: AXDragDirective;
@@ -150,12 +115,14 @@ interface AXDropListDroppedEvent extends NXNativeEvent<AXDropListDirective, Mous
  * This directive automatically detects `gap` from flexbox/grid layouts and handles
  * items with variable sizes and margins.
  */
-declare class AXDropListDirective extends NXComponent implements OnInit, AfterContentInit {
+declare class AXDropListDirective extends NXComponent implements OnInit, AfterContentInit, OnDestroy {
     private readonly _zone;
     private readonly _renderer;
     private readonly _cdr;
     private readonly _platformId;
     private readonly _hostEl;
+    /** Boolean input matching the directive selector name for conditional application. */
+    axDropList: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     /** Whether sorting within this list is disabled. */
     sortingDisabled: _angular_core.InputSignal<boolean>;
     /** The group this drop list belongs to. Dragging is only allowed between lists of the same group. */
@@ -180,8 +147,11 @@ declare class AXDropListDirective extends NXComponent implements OnInit, AfterCo
     private readonly _listGap;
     /** A signal-based alias for the orientation input for internal use. */
     private readonly _orientation;
+    /** DOM placeholder element for inter-list drags */
+    private _placeholderElement;
     ngOnInit(): void;
     ngAfterContentInit(): void;
+    ngOnDestroy(): void;
     /** Checks if the given drag item is the one currently active in this list. */
     isDragActiveForThisList(dragItem: AXDragDirective): boolean;
     /**
@@ -222,8 +192,12 @@ declare class AXDropListDirective extends NXComponent implements OnInit, AfterCo
      * @returns The calculated placeholder index.
      */
     private _calculatePlaceholderIndex;
-    /** Applies `transform` styles to all items to create the visual sorting effect. */
+    /** Applies visual shifts - uses placeholder for inter-list, transforms for intra-list. */
     private _applyVisualShifts;
+    /** Creates or moves the placeholder element for inter-list drags */
+    private _updatePlaceholderElement;
+    /** Removes the placeholder element if it exists */
+    private _removePlaceholderElement;
     /**
      * Calculates the required transform in pixels for a single item.
      * @param index The index of the item to transform.
@@ -240,8 +214,47 @@ declare class AXDropListDirective extends NXComponent implements OnInit, AfterCo
     /** Resets the internal state of the directive to its initial values. */
     resetSortState(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDropListDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDropListDirective, "[axDropList]", ["axDropList"], { "sortingDisabled": { "alias": "sortingDisabled"; "required": false; "isSignal": true; }; "dropListGroup": { "alias": "dropListGroup"; "required": false; "isSignal": true; }; "dropListOrientation": { "alias": "dropListOrientation"; "required": false; "isSignal": true; }; }, { "dropListDropped": "dropListDropped"; }, ["_draggableItems"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDropListDirective, "[axDropList]", ["axDropList"], { "axDropList": { "alias": "axDropList"; "required": false; "isSignal": true; }; "sortingDisabled": { "alias": "sortingDisabled"; "required": false; "isSignal": true; }; "dropListGroup": { "alias": "dropListGroup"; "required": false; "isSignal": true; }; "dropListOrientation": { "alias": "dropListOrientation"; "required": false; "isSignal": true; }; }, { "dropListDropped": "dropListDropped"; }, ["_draggableItems"], never, true, never>;
 }
 
+interface AXDropZoneDropEvent extends NXNativeEvent<AXDropZoneDirective, MouseEvent> {
+    dropped: AXDragDirective;
+}
+type AXDropZoneHoverEvent = AXDropZoneDropEvent & {
+    state: 'enter' | 'leave';
+};
+declare class AXDropZoneDirective extends NXComponent implements OnInit {
+    dropZoneGroup: _angular_core.InputSignal<string>;
+    isHovered: _angular_core.WritableSignal<boolean>;
+    readonly element: _angular_core.WritableSignal<HTMLElement>;
+    onElementDrop: _angular_core.OutputEmitterRef<AXDropZoneDropEvent>;
+    onElementHover: _angular_core.OutputEmitterRef<AXDropZoneHoverEvent>;
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDropZoneDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDropZoneDirective, "[axDropZone]", ["axDropZone"], { "dropZoneGroup": { "alias": "dropZoneGroup"; "required": false; "isSignal": true; }; }, { "onElementDrop": "onElementDrop"; "onElementHover": "onElementHover"; }, never, never, true, never>;
+}
+
+declare class AXDragDropModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDragDropModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXDragDropModule, never, [typeof AXDragDirective, typeof AXDragHandleDirective, typeof AXDropListDirective, typeof AXDropZoneDirective], [typeof AXDragDirective, typeof AXDragHandleDirective, typeof AXDropListDirective, typeof AXDropZoneDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXDragDropModule>;
+}
+
+/**
+ * Moves an item one index in an array to another.
+ * @param array Array in which to move the item.
+ * @param fromIndex Starting index of the item.
+ * @param toIndex Index to which the item should be moved.
+ */
+declare function moveItemInArray<T = any>(array: T[], fromIndex: number, toIndex: number): void;
+/**
+ * Moves an item from one array to another.
+ * @param currentArray Array from which to transfer the item.
+ * @param targetArray Array into which to put the item.
+ * @param currentIndex Index of the item in its current array.
+ * @param targetIndex Index at which to insert the item.
+ */
+declare function transferArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
+
 export { AXDragDirective, AXDragDropModule, AXDragHandleDirective, AXDropListDirective, AXDropZoneDirective, moveItemInArray, transferArrayItem };
 export type { AXDropListDroppedEvent, AXDropZoneDropEvent, AXDropZoneHoverEvent };

package/drawer/index.d.ts

@@ -1,14 +1,7 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, OnDestroy } from '@angular/core';
+import { OnDestroy, ElementRef } from '@angular/core';
 import { AXClickEvent } from '@acorex/cdk/common';
 
-declare class AXDrawerContainerDirective {
-    #private;
-    el: ElementRef<any>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDrawerContainerDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDrawerContainerDirective, "[axDrawerContainer]", ["axDrawerContainer"], {}, {}, never, never, true, never>;
-}
-
 type AXDrawerMode = 'push' | 'overlay';
 type AXDrawerLocation = 'start' | 'end' | 'top' | 'bottom';
 declare class AXDrawerItemDirective implements OnDestroy {
@@ -28,6 +21,8 @@ declare class AXDrawerItemDirective implements OnDestroy {
     closeOnBackdropClick: _angular_core.ModelSignal<boolean>;
     backdropClass: _angular_core.ModelSignal<string>;
     onBackdropClick: _angular_core.OutputEmitterRef<AXClickEvent>;
+    singleOpenMode: _angular_core.ModelSignal<boolean>;
+    id: number;
     /**
      * Shows the drawer by animating it into view.
      *
@@ -51,7 +46,15 @@ declare class AXDrawerItemDirective implements OnDestroy {
     private removeBackDropOnResize;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDrawerItemDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDrawerItemDirective, "[axDrawerItem]", ["axDrawerItem"], { "location": { "alias": "location"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "backDrop": { "alias": "backDrop"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "transition": { "alias": "transition"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; }, { "collapseStateChanged": "collapseStateChanged"; "location": "locationChange"; "collapsed": "collapsedChange"; "backDrop": "backDropChange"; "mode": "modeChange"; "transition": "transitionChange"; "closeOnBackdropClick": "closeOnBackdropClickChange"; "backdropClass": "backdropClassChange"; "onBackdropClick": "onBackdropClick"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDrawerItemDirective, "[axDrawerItem]", ["axDrawerItem"], { "location": { "alias": "location"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "backDrop": { "alias": "backDrop"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "transition": { "alias": "transition"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "singleOpenMode": { "alias": "singleOpenMode"; "required": false; "isSignal": true; }; }, { "collapseStateChanged": "collapseStateChanged"; "location": "locationChange"; "collapsed": "collapsedChange"; "backDrop": "backDropChange"; "mode": "modeChange"; "transition": "transitionChange"; "closeOnBackdropClick": "closeOnBackdropClickChange"; "backdropClass": "backdropClassChange"; "onBackdropClick": "onBackdropClick"; "singleOpenMode": "singleOpenModeChange"; }, never, never, true, never>;
+}
+
+declare class AXDrawerContainerDirective {
+    #private;
+    el: ElementRef<any>;
+    drawerItem: _angular_core.Signal<readonly AXDrawerItemDirective[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDrawerContainerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDrawerContainerDirective, "[axDrawerContainer]", ["axDrawerContainer"], {}, {}, ["drawerItem"], never, true, never>;
 }
 
 declare class AXDrawerDirectiveModule {

package/fesm2022/acorex-cdk-accordion.mjs

@@ -7,10 +7,10 @@ class AXAccordionCloseButtonDirective {
     constructor() {
         this.elm = inject(ElementRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionCloseButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: AXAccordionCloseButtonDirective, isStandalone: true, selector: "[axAccordionCloseButton]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXAccordionCloseButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: AXAccordionCloseButtonDirective, isStandalone: true, selector: "[axAccordionCloseButton]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionCloseButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", 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.3.6", ngImport: i0, type: AXAccordionItemHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: AXAccordionItemHeaderDirective, isStandalone: true, selector: "[axAccordionItemHeader]", exportAs: ["axAccordionItemHeader"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXAccordionItemHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: AXAccordionItemHeaderDirective, isStandalone: true, selector: "[axAccordionItemHeader]", exportAs: ["axAccordionItemHeader"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionItemHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXAccordionItemHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axAccordionItemHeader]',
@@ -67,10 +67,10 @@ class AXAccordionItemDirective {
     toggle() {
         this.isCollapsed.update((prev) => !prev);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.6", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXAccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.9", 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.3.6", ngImport: i0, type: AXAccordionItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXAccordionItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axAccordionItem]',
@@ -86,7 +86,7 @@ class AXAccordionGroupDirective {
         this.contentChildren = contentChildren(AXAccordionItemDirective, ...(ngDevMode ? [{ debugName: "contentChildren" }] : []));
         this.activeId = signal(null, ...(ngDevMode ? [{ debugName: "activeId" }] : []));
         this.customAccordionItem = signal([], ...(ngDevMode ? [{ debugName: "customAccordionItem" }] : []));
-        this.#init = afterNextRender(() => {
+        this.#init = effect(() => {
             if (this.contentChildren().length) {
                 this.contentChildren().forEach((element) => {
                     element.collapsedOnItemClick.set(this.collapsedOnItemClick());
@@ -94,6 +94,8 @@ class AXAccordionGroupDirective {
                         this.activeId.set(element.id());
                     element.onClick.subscribe((e) => {
                         this.activeId.set(e.component.id());
+                        if (this.accordion())
+                            this.accordionHandler(e.component.id());
                     });
                 });
             }
@@ -104,10 +106,12 @@ class AXAccordionGroupDirective {
                         this.activeId.set(element.id());
                     element.onClick.subscribe((e) => {
                         this.activeId.set(e.component.id());
+                        if (this.accordion())
+                            this.accordionHandler(e.component.id());
                     });
                 });
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "#init" }] : []));
         this.#eff2 = effect(() => {
             if (!this.activeIndex())
                 return;
@@ -135,38 +139,35 @@ class AXAccordionGroupDirective {
                 });
             }
         }, ...(ngDevMode ? [{ debugName: "#eff2" }] : []));
-        this.#eff3 = effect(() => {
-            if (!this.accordion() || !this.collapsedOnItemClick())
-                return;
-            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.3.6", ngImport: i0, type: AXAccordionGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.6", 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 }); }
+    accordionHandler(activeId) {
+        if (this.contentChildren().length) {
+            this.contentChildren().forEach((element) => {
+                if (activeId === element.id()) {
+                    element.isCollapsed.update((prev) => prev);
+                }
+                else {
+                    element.isCollapsed.set(true);
+                }
+            });
+        }
+        else {
+            this.customAccordionItem().forEach((element) => {
+                if (activeId === element.id()) {
+                    element.isCollapsed.update((prev) => prev);
+                }
+                else {
+                    element.isCollapsed.set(true);
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXAccordionGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.9", 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.3.6", ngImport: i0, type: AXAccordionGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXAccordionGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axAccordionGroup]',
@@ -180,42 +181,26 @@ class AXAccordionItemContentDirective {
         this.parent = inject(AXAccordionItemDirective);
         this.collapseContent = computed(() => this.parent.isCollapsed(), ...(ngDevMode ? [{ debugName: "collapseContent" }] : []));
         this.transition = input(150, ...(ngDevMode ? [{ debugName: "transition" }] : []));
-        this.#init = afterNextRender(() => {
-            const el = this.elm.nativeElement;
-            el.style.display = 'none';
-        });
         this.#eff = effect(() => {
             const el = this.elm.nativeElement;
-            el.style.transition = `height ${this.transition()}ms cubic-bezier(0.4,0,0.2,1), opacity ${this.transition()}ms cubic-bezier(0.4,0,0.2,1)`;
+            const originalTransition = `all ${this.transition()}ms ease-in-out`;
+            el.style.transition = originalTransition;
             el.style.overflow = 'hidden';
             if (this.collapseContent()) {
+                el.style.height = '0';
                 el.style.opacity = '0';
-                el.style.height = el.scrollHeight + 'px';
-                requestAnimationFrame(() => {
-                    el.style.height = '0';
-                });
             }
             else {
-                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';
-                    }
-                };
-                el.addEventListener('transitionend', onTransitionEnd, { once: true });
+                el.style.height = 'auto';
+                el.style.opacity = '1';
             }
         }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
     }
-    #init;
     #eff;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionItemContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.6", 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.9", ngImport: i0, type: AXAccordionItemContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", 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.3.6", ngImport: i0, type: AXAccordionItemContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXAccordionItemContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axAccordionItemContent]',
@@ -232,8 +217,8 @@ const COMPONENT = [
 ];
 const MODULES = [CommonModule];
 class AXAccordionCdkModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionCdkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionCdkModule, imports: [CommonModule, AXAccordionGroupDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXAccordionCdkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: AXAccordionCdkModule, imports: [CommonModule, AXAccordionGroupDirective,
             AXAccordionItemContentDirective,
             AXAccordionItemHeaderDirective,
             AXAccordionItemDirective,
@@ -242,9 +227,9 @@ class AXAccordionCdkModule {
             AXAccordionItemHeaderDirective,
             AXAccordionItemDirective,
             AXAccordionCloseButtonDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionCdkModule, imports: [MODULES] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXAccordionCdkModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionCdkModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXAccordionCdkModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],