@acorex/components 20.1.35 → 20.1.36

package/accordion/index.d.ts

@@ -1,16 +1,18 @@
 import * as _angular_core from '@angular/core';
-import * as i1 from '@acorex/cdk/accordion';
+import { AXAccordionItemDirective } from '@acorex/cdk/accordion';
 import { AXClickEvent } from '@acorex/cdk/common';
 
 declare class AXAccordionGroupComponent {
     #private;
     private accordionGroup;
+    private content;
     accordion: _angular_core.InputSignal<boolean>;
     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; }; }, { "activeIndex": "activeIndexChange"; }, never, ["ax-accordion-item"], true, [{ directive: typeof i1.AXAccordionGroupDirective; inputs: {}; outputs: {}; }]>;
+    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>;
 }
 
 declare class AXAccordionItemComponent {
@@ -22,8 +24,7 @@ declare class AXAccordionItemComponent {
     headerTemplate: _angular_core.InputSignal<any>;
     look: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
-    collapsedOnItemClick: _angular_core.InputSignal<boolean>;
-    private accordionItem;
+    accordionItem: _angular_core.Signal<AXAccordionItemDirective>;
     private parent;
     onClick: _angular_core.OutputEmitterRef<AXClickEvent>;
     get __hostClass(): string[];
@@ -31,7 +32,7 @@ declare class AXAccordionItemComponent {
     close(): void;
     toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXAccordionItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXAccordionItemComponent, "ax-accordion-item", never, { "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "collapsedOnItemClick": { "alias": "collapsedOnItemClick"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; "isLoading": "isLoadingChange"; "onClick": "onClick"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXAccordionItemComponent, "ax-accordion-item", never, { "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; "isLoading": "isLoadingChange"; "onClick": "onClick"; }, never, ["*"], true, never>;
 }
 
 declare class AXAccordionModule {

package/command/index.d.ts

@@ -1,10 +1,11 @@
 import * as polytype from 'polytype';
 import * as _angular_core from '@angular/core';
-import { AXEvent, MXInputBaseValueComponent, MXLookComponent, AXHtmlEvent } from '@acorex/cdk/common';
+import { AXEvent, MXInputBaseValueComponent, MXLookComponent, AXHtmlEvent, AXFocusEvent } from '@acorex/cdk/common';
+import { AXListNavigationDirective, AXListNavigationItemDirective } from '@acorex/cdk/list-navigation';
 import { AXSearchBoxComponent } from '@acorex/components/search-box';
 
 type CommandItem = {
-    id: string;
+    id: string | number;
     text: string;
     icon?: string;
     href?: string;
@@ -32,12 +33,21 @@ declare class AXCommandComponent extends AXCommandComponent_base {
     protected searchValue: _angular_core.WritableSignal<string>;
     protected searchBox: _angular_core.Signal<AXSearchBoxComponent>;
     readonly onSubmit: _angular_core.OutputEmitterRef<AXCommandComponentEvent>;
+    readonly onEscape: _angular_core.OutputEmitterRef<AXHtmlEvent<KeyboardEvent>>;
+    readonly onSearchBoxFocus: _angular_core.OutputEmitterRef<AXHtmlEvent<FocusEvent>>;
+    readonly onSearchBoxBlur: _angular_core.OutputEmitterRef<AXHtmlEvent<FocusEvent>>;
+    protected listNavigation: _angular_core.Signal<AXListNavigationDirective>;
     protected displayItems: _angular_core.Signal<CommandItem[]>;
+    protected focusHandler(e: AXFocusEvent): void;
+    protected blurHandler(e: AXFocusEvent): void;
+    private filterRecursive;
     protected onItemClick(item: CommandItem): void;
     protected keyPress(e: AXHtmlEvent<KeyboardEvent>, item: CommandItem): void;
+    protected searchEscapeHandler(e: AXHtmlEvent<KeyboardEvent>): void;
     protected closeHandler(e: AXHtmlEvent<KeyboardEvent>): void;
+    protected activeHandler(l: AXListNavigationDirective, i: AXListNavigationItemDirective): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCommandComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXCommandComponent, "ax-command", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "onSubmit": "onSubmit"; }, 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; }; }, { "onSubmit": "onSubmit"; "onEscape": "onEscape"; "onSearchBoxFocus": "onSearchBoxFocus"; "onSearchBoxBlur": "onSearchBoxBlur"; }, never, never, true, never>;
 }
 
 declare class AXCommandModule {

package/comment/index.d.ts

@@ -17,6 +17,12 @@ import * as i7 from '@angular/common';
 declare class AXCommentContainerComponent {
     private document;
     private platformID;
+    /**
+     * Scrolls to a specific comment reply by its ID and highlights it temporarily.
+     *
+     * @param id - The ID of the comment reply to scroll to
+     * @returns void
+     */
     scrollToReply(id: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCommentContainerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXCommentContainerComponent, "ax-comment-container", never, {}, {}, never, ["*"], true, never>;

package/data-table/index.d.ts

@@ -43,13 +43,42 @@ declare abstract class AXBaseDataTable extends MXBaseComponent {
      */
     parentField: string;
     selectedRowsChange: EventEmitter<unknown[]>;
+    /**
+     * Gets the data source key field name.
+     *
+     * @returns string - The key field name for the data source.
+     */
     getDataSourceKey(): string;
     private _selectedRows;
     get selectedRows(): unknown[];
     set selectedRows(v: unknown[]);
+    /**
+     * Expands a row to show its children.
+     *
+     * @param row - The row data to expand.
+     * @returns Promise<void> - Promise that resolves when expansion is complete.
+     */
     expandRow(row: any): Promise<void>;
+    /**
+     * Refreshes the children of a specific item.
+     *
+     * @param id - The ID of the item whose children should be refreshed.
+     * @returns Promise<void> - Promise that resolves when refresh is complete.
+     */
     refreshItemChildren(id: string): Promise<void>;
+    /**
+     * Selects one or more rows.
+     *
+     * @param rows - The rows to select.
+     * @returns void - No return value.
+     */
     selectRows(...rows: unknown[]): void;
+    /**
+     * Unselects one or more rows.
+     *
+     * @param rows - The rows to unselect.
+     * @returns void - No return value.
+     */
     unSelectRows(...rows: unknown[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXBaseDataTable, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AXBaseDataTable>;
@@ -87,9 +116,33 @@ declare class AXDataTableColumnResizableDirective {
     private onMouseMoveRawBound;
     private onMouseUpBound;
     constructor();
+    /**
+     * Handles mouse down events to initiate column resizing.
+     *
+     * @param event - The mouse down event.
+     * @returns void - No return value.
+     */
     onMouseDown(event: MouseEvent): void;
+    /**
+     * Handles raw mouse move events and forwards them to the debounced resize stream.
+     * This method acts as a bridge between the raw DOM event and the debounced onMouseMove method.
+     *
+     * @param event - The raw mouse move event.
+     * @returns void - No return value.
+     */
     onMouseMoveRaw(event: MouseEvent): void;
+    /**
+     * Handles mouse move events during column resizing.
+     *
+     * @param event - The mouse move event.
+     * @returns void - No return value.
+     */
     onMouseMove(event: MouseEvent): void;
+    /**
+     * Handles mouse up events to complete column resizing.
+     *
+     * @returns void - No return value.
+     */
     onMouseUp(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableColumnResizableDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AXDataTableColumnResizableDirective, "[ax-table-column-resizble]", never, { "column": { "alias": "ax-table-column-resizble"; "required": false; }; }, {}, never, never, true, never>;
@@ -1030,8 +1083,11 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
      */
     protected getSort(column: AXDataTableColumnComponent): string | undefined;
     /**
-     * Refreshes the data in the data source and resets the data pager to the first page.
-     * @ignore
+     * Refreshes the data table with optional reset options.
+     *
+     * @param options - Configuration options for refresh operation.
+     * @param options.reset - Whether to reset pagination state.
+     * @returns void - No return value.
      */
     refresh(options?: {
         reset?: boolean;

package/dialog/index.d.ts

@@ -70,7 +70,8 @@ declare class AXDialogComponent extends MXBaseComponent {
     protected _hasAutoFocus(button: AXDialogButtonItem): boolean;
     /**
      * Closes the dialog.
-     * @ignore
+     *
+     * @returns void - No return value. The dialog is closed and removed from the DOM.
      */
     close(): void;
     /**
@@ -99,21 +100,45 @@ declare class AXDialogService {
     private defaultConfig;
     private detectIcon;
     /**
-     *  Show an alert box with 'Okay' button.
+     * Show an alert box with 'Okay' button.
+     *
+     * @param title - The title of the alert dialog.
+     * @param content - The content message of the alert dialog.
+     * @param type - The type/color of the alert (primary, success, warning, danger).
+     * @param orientation - The orientation of the dialog (horizontal or vertical).
+     * @param draggable - Whether the dialog can be dragged.
+     * @returns Promise<void> - Promise that resolves when the dialog is closed.
      */
     alert(title: string, content: string, type?: AXStyleColorType, orientation?: 'horizontal' | 'vertical', draggable?: boolean): Promise<void>;
     /**
-     *  Show a confirm box with 'Okay' & 'Cancel' buttons.
+     * Show a confirm box with 'Okay' & 'Cancel' buttons.
+     *
+     * @param title - The title of the confirm dialog.
+     * @param content - The content message of the confirm dialog.
+     * @param type - The type/color of the confirm dialog (primary, success, warning, danger).
+     * @param orientation - The orientation of the dialog (horizontal or vertical).
+     * @param draggable - Whether the dialog can be dragged.
+     * @param defaultAction - The default action to focus (confirm or cancel).
+     * @returns Promise<{ result: boolean }> - Promise that resolves with the user's choice.
      */
     confirm(title: string, content: string, type?: AXStyleColorType, orientation?: 'horizontal' | 'vertical', draggable?: boolean, defaultAction?: 'confirm' | 'cancel'): Promise<{
         result: boolean;
     }>;
     /**
-     *  Show a custom dialog box.
+     * Show a custom dialog box.
+     *
+     * @param options - Configuration options for the custom dialog.
+     * @returns Promise<{ name: string }> - Promise that resolves with the button name that was clicked.
      */
     show(options: AXDialogConfig): Promise<{
         name: string;
     }>;
+    /**
+     * Show a custom dialog box.
+     *
+     * @param options - Configuration options for the custom dialog.
+     * @returns Promise<{ name: string }> - Promise that resolves with the button name that was clicked.
+     */
     open(config: AXDialogConfig): AXDialogRef;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDialogService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AXDialogService>;

package/drawer-2/index.d.ts

@@ -31,8 +31,23 @@ declare class AXDrawer2Component extends MXBaseComponent {
     onBackdropClick: _angular_core.OutputEmitterRef<AXClickEvent>;
     collapsedStateChanged: _angular_core.OutputEmitterRef<boolean>;
     private drawerItem;
+    /**
+     * Toggles the drawer state between open and closed.
+     *
+     * @returns void - No return value. The drawer state is toggled.
+     */
     toggle(): void;
+    /**
+     * Closes the drawer.
+     *
+     * @returns void - No return value. The drawer is collapsed.
+     */
     close(): void;
+    /**
+     * Opens the drawer.
+     *
+     * @returns void - No return value. The drawer is expanded.
+     */
     open(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDrawer2Component, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXDrawer2Component, "ax-drawer2", never, { "location": { "alias": "location"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "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; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "onBackdropClick": "onBackdropClick"; "collapsedStateChanged": "collapsedStateChanged"; }, never, ["ax-header", "ax-content"], true, [{ directive: typeof i1.AXDrawerItemDirective; inputs: {}; outputs: {}; }]>;

package/dropdown-button/index.d.ts

@@ -52,20 +52,25 @@ declare class AXDropdownButtonComponent extends MXButtonBaseComponent implements
     /**
      * Simulates a click event on the button element.
      *
-     * @ignore
+     * @returns void - No return value. The button click is simulated.
      */
     click(): void;
     /**
      * Sets focus to the button and adds a focus state class.
+     *
+     * @returns void - No return value. The button receives focus.
      */
     focus(): void;
     /**
      * Removes the focus state class from the button.
+     *
+     * @returns void - No return value. The button loses focus.
      */
     blur(): void;
     /**
      * Closes the dropdown panel.
-     * @ignore
+     *
+     * @returns void - No return value. The dropdown panel is closed.
      */
     close(): void;
     private get __hostClass();

package/fesm2022/acorex-components-accordion.mjs

@@ -1,57 +1,12 @@
-import * as i1 from '@acorex/cdk/accordion';
-import { AXAccordionGroupDirective, AXAccordionItemDirective, AXAccordionItemHeaderDirective, AXAccordionItemContentDirective } from '@acorex/cdk/accordion';
+import { AXAccordionItemDirective, AXAccordionItemHeaderDirective, AXAccordionItemContentDirective, AXAccordionGroupDirective } from '@acorex/cdk/accordion';
 import { MXLookableComponent, AXComponent } from '@acorex/cdk/common';
-import * as i1$1 from '@acorex/components/loading';
+import * as i1 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i0 from '@angular/core';
-import { inject, input, model, afterNextRender, effect, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChild, output, NgModule } from '@angular/core';
+import { model, input, viewChild, inject, output, afterNextRender, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChildren, effect, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
-class AXAccordionGroupComponent {
-    constructor() {
-        this.accordionGroup = inject(AXAccordionGroupDirective);
-        this.accordion = input(true, ...(ngDevMode ? [{ debugName: "accordion" }] : []));
-        this.activeIndex = model(null, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
-        this.look = input('solid', ...(ngDevMode ? [{ debugName: "look" }] : []));
-        this.#init = afterNextRender(() => {
-            this.accordionGroup.activeIndex.subscribe((index) => {
-                this.activeIndex.set(index);
-            });
-        });
-        this.#eff = effect(() => {
-            this.accordionGroup.accordion.set(this.accordion());
-            this.accordionGroup.activeIndex.set(this.activeIndex());
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
-    }
-    #init;
-    #eff;
-    get __hostClass() {
-        return `ax-${this.look()}`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXAccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: AXAccordionGroupComponent, isStandalone: true, selector: "ax-accordion-group", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
-            {
-                provide: MXLookableComponent,
-                useExisting: AXAccordionGroupComponent,
-            },
-            { provide: AXComponent, useExisting: AXAccordionGroupComponent },
-        ], hostDirectives: [{ directive: i1.AXAccordionGroupDirective }], ngImport: i0, template: `<ng-content select="ax-accordion-item"></ng-content>`, isInline: true, styles: ["ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-group ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-group ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-group{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-accordion-group ax-accordion-item{margin-bottom:var(--ax-comp-accordion-margin)}ax-accordion-group ax-accordion-item.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-solid .ax-accordion-header{background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-group ax-accordion-item.ax-fill .ax-accordion-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-group ax-accordion-item.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-outline .ax-accordion-header{background-color:transparent}ax-accordion-group ax-accordion-item.ax-flat{border-bottom-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-flat .ax-accordion-header{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: AXLoadingModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXAccordionGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-accordion-group', imports: [AXLoadingModule], hostDirectives: [AXAccordionGroupDirective], template: `<ng-content select="ax-accordion-item"></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: MXLookableComponent,
-                            useExisting: AXAccordionGroupComponent,
-                        },
-                        { provide: AXComponent, useExisting: AXAccordionGroupComponent },
-                    ], styles: ["ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-group ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-group ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-group{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-accordion-group ax-accordion-item{margin-bottom:var(--ax-comp-accordion-margin)}ax-accordion-group ax-accordion-item.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-solid .ax-accordion-header{background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-group ax-accordion-item.ax-fill .ax-accordion-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-group ax-accordion-item.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-outline .ax-accordion-header{background-color:transparent}ax-accordion-group ax-accordion-item.ax-flat{border-bottom-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-flat .ax-accordion-header{background-color:transparent}\n"] }]
-        }], propDecorators: { __hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
 class AXAccordionItemComponent {
     constructor() {
         this.isCollapsed = model(true, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
@@ -61,12 +16,10 @@ class AXAccordionItemComponent {
         this.headerTemplate = input(null, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
         this.look = input('solid', ...(ngDevMode ? [{ debugName: "look" }] : []));
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        this.collapsedOnItemClick = input(true, ...(ngDevMode ? [{ debugName: "collapsedOnItemClick" }] : []));
         this.accordionItem = viewChild(AXAccordionItemDirective, ...(ngDevMode ? [{ debugName: "accordionItem" }] : []));
         this.parent = inject(AXAccordionGroupComponent, { optional: true });
         this.onClick = output();
         this.#init = afterNextRender(() => {
-            this.accordionItem()?.collapsedOnItemClick.set(this.collapsedOnItemClick());
             this.accordionItem()?.isCollapsed.subscribe((isCollapsed) => {
                 this.isCollapsed.set(isCollapsed);
             });
@@ -74,14 +27,8 @@ class AXAccordionItemComponent {
                 this.onClick.emit({ component: this, nativeEvent: e });
             });
         });
-        this.#eff = effect(() => {
-            if (this.collapsedOnItemClick())
-                return;
-            this.accordionItem()?.isCollapsed.set(this.isCollapsed());
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
     }
     #init;
-    #eff;
     get __hostClass() {
         return [
             `${this.disabled() ? 'ax-state-disabled' : ''}`,
@@ -98,7 +45,7 @@ class AXAccordionItemComponent {
         this.isCollapsed.update((prev) => !prev);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AXAccordionItemComponent, isStandalone: true, selector: "ax-accordion-item", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, collapsedOnItemClick: { classPropertyName: "collapsedOnItemClick", publicName: "collapsedOnItemClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", isLoading: "isLoadingChange", onClick: "onClick" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "accordionItem", first: true, predicate: AXAccordionItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div axAccordionItem>\n  <div axAccordionItemHeader class=\"ax-accordion-header\">\n    @if (headerTemplate()) {\n      <div class=\"ax-accordion-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption: caption(), isCollapsed: isCollapsed() } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-accordion-header-container\">\n        <div class=\"ax-accordion-header-start\">\n          <span class=\"ax-accordion-header-icon\" [class]=\"icon()\"> </span>\n          <span>\n            {{ caption() }}\n          </span>\n        </div>\n        <div class=\"ax-accordion-header-end\">\n          @if (isLoading()) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-accordion-arrow\"\n              [ngClass]=\"{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div axAccordionItemContent class=\"ax-accordion-body\">\n    <div class=\"ax-accordion-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-group ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-group ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-accordion-item.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-solid .ax-accordion-header{background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-item.ax-fill .ax-accordion-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-item.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-outline .ax-accordion-header{background-color:transparent}ax-accordion-item.ax-flat{border-bottom-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-flat .ax-accordion-header{background-color:transparent}ax-accordion-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-accordion-item .ax-accordion-header,ax-accordion-item .ax-accordion-body{font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-surface-high))!important}ax-accordion-item .ax-accordion-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.75rem}ax-accordion-item .ax-accordion-header .ax-accordion-header-container{display:flex;justify-content:space-between}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start{display:flex;align-items:center}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start:not(:empty) .ax-accordion-header-icon{padding-inline-end:.5rem}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow{transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow.-rotation-90{transform:rotate(-90deg)}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow.rotation-90{transform:rotate(90deg)}ax-accordion-item .ax-accordion-body .ax-accordion-body-content{padding:1rem;padding-inline-end:1rem;padding-inline-start:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXAccordionItemHeaderDirective, selector: "[axAccordionItemHeader]", exportAs: ["axAccordionItemHeader"] }, { kind: "directive", type: AXAccordionItemDirective, selector: "[axAccordionItem]", inputs: ["isCollapsed", "collapsedOnItemClick"], outputs: ["isCollapsedChange", "onClick", "collapsedOnItemClickChange"], exportAs: ["axAccordionItem"] }, { kind: "directive", type: AXAccordionItemContentDirective, selector: "[axAccordionItemContent]", inputs: ["transition"], exportAs: ["axAccordionItemContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AXAccordionItemComponent, isStandalone: true, selector: "ax-accordion-item", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", isLoading: "isLoadingChange", onClick: "onClick" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "accordionItem", first: true, predicate: AXAccordionItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [isCollapsed]=\"isCollapsed()\" axAccordionItem>\n  <div axAccordionItemHeader class=\"ax-accordion-header\">\n    @if (headerTemplate()) {\n      <div class=\"ax-accordion-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption: caption(), isCollapsed: isCollapsed() } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-accordion-header-container\">\n        <div class=\"ax-accordion-header-start\">\n          <span class=\"ax-accordion-header-icon\" [class]=\"icon()\"> </span>\n          <span>\n            {{ caption() }}\n          </span>\n        </div>\n        <div class=\"ax-accordion-header-end\">\n          @if (isLoading()) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-accordion-arrow\"\n              [ngClass]=\"{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div axAccordionItemContent class=\"ax-accordion-body\">\n    <div class=\"ax-accordion-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-group ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-group ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-accordion-item.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-solid .ax-accordion-header{background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-item.ax-fill .ax-accordion-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-item.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-outline .ax-accordion-header{background-color:transparent}ax-accordion-item.ax-flat{border-bottom-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-flat .ax-accordion-header{background-color:transparent}ax-accordion-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-accordion-item .ax-accordion-header,ax-accordion-item .ax-accordion-body{font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-surface-high))!important}ax-accordion-item .ax-accordion-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.75rem}ax-accordion-item .ax-accordion-header .ax-accordion-header-container{display:flex;justify-content:space-between}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start{display:flex;align-items:center}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start:not(:empty) .ax-accordion-header-icon{padding-inline-end:.5rem}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow{transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow.-rotation-90{transform:rotate(-90deg)}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow.rotation-90{transform:rotate(90deg)}ax-accordion-item .ax-accordion-body .ax-accordion-body-content{padding:1rem;padding-inline-end:1rem;padding-inline-start:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXAccordionItemHeaderDirective, selector: "[axAccordionItemHeader]", exportAs: ["axAccordionItemHeader"] }, { kind: "directive", type: AXAccordionItemDirective, selector: "[axAccordionItem]", inputs: ["isCollapsed"], outputs: ["isCollapsedChange", "onClick"], exportAs: ["axAccordionItem"] }, { kind: "directive", type: AXAccordionItemContentDirective, selector: "[axAccordionItemContent]", inputs: ["transition"], exportAs: ["axAccordionItemContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXAccordionItemComponent, decorators: [{
             type: Component,
@@ -108,7 +55,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         AXAccordionItemHeaderDirective,
                         AXAccordionItemDirective,
                         AXAccordionItemContentDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div axAccordionItem>\n  <div axAccordionItemHeader class=\"ax-accordion-header\">\n    @if (headerTemplate()) {\n      <div class=\"ax-accordion-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption: caption(), isCollapsed: isCollapsed() } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-accordion-header-container\">\n        <div class=\"ax-accordion-header-start\">\n          <span class=\"ax-accordion-header-icon\" [class]=\"icon()\"> </span>\n          <span>\n            {{ caption() }}\n          </span>\n        </div>\n        <div class=\"ax-accordion-header-end\">\n          @if (isLoading()) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-accordion-arrow\"\n              [ngClass]=\"{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div axAccordionItemContent class=\"ax-accordion-body\">\n    <div class=\"ax-accordion-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-group ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-group ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-accordion-item.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-solid .ax-accordion-header{background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-item.ax-fill .ax-accordion-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-item.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-outline .ax-accordion-header{background-color:transparent}ax-accordion-item.ax-flat{border-bottom-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-flat .ax-accordion-header{background-color:transparent}ax-accordion-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-accordion-item .ax-accordion-header,ax-accordion-item .ax-accordion-body{font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-surface-high))!important}ax-accordion-item .ax-accordion-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.75rem}ax-accordion-item .ax-accordion-header .ax-accordion-header-container{display:flex;justify-content:space-between}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start{display:flex;align-items:center}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start:not(:empty) .ax-accordion-header-icon{padding-inline-end:.5rem}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow{transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow.-rotation-90{transform:rotate(-90deg)}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow.rotation-90{transform:rotate(90deg)}ax-accordion-item .ax-accordion-body .ax-accordion-body-content{padding:1rem;padding-inline-end:1rem;padding-inline-start:1.25rem}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [isCollapsed]=\"isCollapsed()\" axAccordionItem>\n  <div axAccordionItemHeader class=\"ax-accordion-header\">\n    @if (headerTemplate()) {\n      <div class=\"ax-accordion-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption: caption(), isCollapsed: isCollapsed() } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-accordion-header-container\">\n        <div class=\"ax-accordion-header-start\">\n          <span class=\"ax-accordion-header-icon\" [class]=\"icon()\"> </span>\n          <span>\n            {{ caption() }}\n          </span>\n        </div>\n        <div class=\"ax-accordion-header-end\">\n          @if (isLoading()) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-accordion-arrow\"\n              [ngClass]=\"{ '-rotation-90': isCollapsed(), 'rotation-90': !isCollapsed() }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div axAccordionItemContent class=\"ax-accordion-body\">\n    <div class=\"ax-accordion-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-group ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-group ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-accordion-item.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-solid .ax-accordion-header{background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-item.ax-fill .ax-accordion-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-item.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-outline .ax-accordion-header{background-color:transparent}ax-accordion-item.ax-flat{border-bottom-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-item.ax-flat .ax-accordion-header{background-color:transparent}ax-accordion-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-accordion-item .ax-accordion-header,ax-accordion-item .ax-accordion-body{font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-surface-high))!important}ax-accordion-item .ax-accordion-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.75rem}ax-accordion-item .ax-accordion-header .ax-accordion-header-container{display:flex;justify-content:space-between}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start{display:flex;align-items:center}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-start:not(:empty) .ax-accordion-header-icon{padding-inline-end:.5rem}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow{transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow.-rotation-90{transform:rotate(-90deg)}ax-accordion-item .ax-accordion-header .ax-accordion-header-container .ax-accordion-header-end .ax-accordion-arrow.rotation-90{transform:rotate(90deg)}ax-accordion-item .ax-accordion-body .ax-accordion-body-content{padding:1rem;padding-inline-end:1rem;padding-inline-start:1.25rem}\n"] }]
+        }], propDecorators: { __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class AXAccordionGroupComponent {
+    constructor() {
+        this.accordionGroup = viewChild(AXAccordionGroupDirective, ...(ngDevMode ? [{ debugName: "accordionGroup" }] : []));
+        this.content = contentChildren(AXAccordionItemComponent, ...(ngDevMode ? [{ debugName: "content" }] : []));
+        this.accordion = input(true, ...(ngDevMode ? [{ debugName: "accordion" }] : []));
+        this.activeIndex = model(null, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+        this.look = input('solid', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        this.collapsedOnItemClick = input(true, ...(ngDevMode ? [{ debugName: "collapsedOnItemClick" }] : []));
+        this.#init = afterNextRender(() => {
+            this.accordionGroup().activeIndex.subscribe((index) => {
+                this.activeIndex.set(index);
+            });
+        });
+        this.#eff = effect(() => {
+            const accordionItemDirective = [];
+            this.content().forEach((item) => {
+                accordionItemDirective.push(item.accordionItem());
+            });
+            this.accordionGroup().customAccordionItem.set(accordionItemDirective);
+            this.accordionGroup().collapsedOnItemClick.set(this.collapsedOnItemClick());
+            this.accordionGroup().accordion.set(this.accordion());
+            this.accordionGroup().activeIndex.set(this.activeIndex());
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
+    }
+    #init;
+    #eff;
+    get __hostClass() {
+        return `ax-${this.look()}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXAccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", type: AXAccordionGroupComponent, isStandalone: true, selector: "ax-accordion-group", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, collapsedOnItemClick: { classPropertyName: "collapsedOnItemClick", publicName: "collapsedOnItemClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+            {
+                provide: MXLookableComponent,
+                useExisting: AXAccordionGroupComponent,
+            },
+            { provide: AXComponent, useExisting: AXAccordionGroupComponent },
+        ], queries: [{ propertyName: "content", predicate: AXAccordionItemComponent, isSignal: true }], viewQueries: [{ propertyName: "accordionGroup", first: true, predicate: AXAccordionGroupDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div axAccordionGroup>
+      <ng-content select="ax-accordion-item"></ng-content>
+    </div>
+  `, isInline: true, styles: ["ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-group ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-group ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-group{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-accordion-group ax-accordion-item{margin-bottom:var(--ax-comp-accordion-margin)}ax-accordion-group ax-accordion-item.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-solid .ax-accordion-header{background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-group ax-accordion-item.ax-fill .ax-accordion-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-group ax-accordion-item.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-outline .ax-accordion-header{background-color:transparent}ax-accordion-group ax-accordion-item.ax-flat{border-bottom-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-flat .ax-accordion-header{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "directive", type: AXAccordionGroupDirective, selector: "[axAccordionGroup]", inputs: ["accordion", "activeIndex", "customAccordionItem", "collapsedOnItemClick"], outputs: ["accordionChange", "activeIndexChange", "customAccordionItemChange", "collapsedOnItemClickChange"], exportAs: ["axAccordionGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXAccordionGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-accordion-group', imports: [AXLoadingModule, AXAccordionGroupDirective], template: `
+    <div axAccordionGroup>
+      <ng-content select="ax-accordion-item"></ng-content>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: MXLookableComponent,
+                            useExisting: AXAccordionGroupComponent,
+                        },
+                        { provide: AXComponent, useExisting: AXAccordionGroupComponent },
+                    ], styles: ["ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-group ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}.ax-dark ax-accordion-item.ax-solid{--ax-comp-accordion-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-accordion-border-color: var(--ax-sys-color-border-darkest-surface)}ax-accordion-group ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-item.ax-fill{--ax-comp-accordion-bg-color: var(--ax-sys-color-surface)}ax-accordion-group ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-flat{--ax-comp-accordion-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-item.ax-outline{--ax-comp-accordion-border-color: var(--ax-sys-color-border-surface);--ax-comp-accordion-border-width: 1px}ax-accordion-group ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-item{--ax-comp-accordion-margin: .5rem}ax-accordion-group{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-accordion-group ax-accordion-item{margin-bottom:var(--ax-comp-accordion-margin)}ax-accordion-group ax-accordion-item.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-solid .ax-accordion-header{background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-group ax-accordion-item.ax-fill .ax-accordion-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-accordion-bg-color))}ax-accordion-group ax-accordion-item.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-outline .ax-accordion-header{background-color:transparent}ax-accordion-group ax-accordion-item.ax-flat{border-bottom-width:var(--ax-comp-accordion-border-width);border-color:rgba(var(--ax-comp-accordion-border-color))}ax-accordion-group ax-accordion-item.ax-flat .ax-accordion-header{background-color:transparent}\n"] }]
         }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']