@acorex/components 20.2.0-next.20 → 20.2.0-next.22

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

@@ -21,19 +21,33 @@ declare class AXDrawer2ContainerComponent extends MXBaseComponent {
  */
 declare class AXDrawer2Component extends MXBaseComponent {
     #private;
-    location: _angular_core.InputSignal<AXDrawerLocation>;
-    showBackdrop: _angular_core.InputSignal<boolean>;
-    mode: _angular_core.InputSignal<AXDrawerMode>;
-    transition: _angular_core.InputSignal<number>;
-    closeOnBackdropClick: _angular_core.InputSignal<boolean>;
-    backdropClass: _angular_core.InputSignal<string>;
-    collapsed: _angular_core.InputSignal<boolean>;
+    readonly location: _angular_core.InputSignal<AXDrawerLocation>;
+    readonly showBackdrop: _angular_core.InputSignal<boolean>;
+    readonly mode: _angular_core.InputSignal<AXDrawerMode>;
+    readonly transition: _angular_core.InputSignal<number>;
+    readonly closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    readonly backdropClass: _angular_core.InputSignal<string>;
+    readonly collapsed: _angular_core.InputSignal<boolean>;
     onBackdropClick: _angular_core.OutputEmitterRef<AXClickEvent>;
     collapsedStateChanged: _angular_core.OutputEmitterRef<boolean>;
     private drawerItem;
-    private el;
+    /**
+     * 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/index.d.ts

@@ -13,8 +13,8 @@ import * as i5 from '@acorex/components/decorators';
 
 declare const AXDropdownBoxComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXLookComponent]>;
 declare class AXDropdownBoxComponent extends AXDropdownBoxComponent_base implements OnInit {
-    hasInput: i0.InputSignal<boolean>;
-    popoverWidth: i0.InputSignal<string>;
+    readonly hasInput: i0.InputSignal<boolean>;
+    readonly popoverWidth: i0.InputSignal<string>;
     private _platform;
     /**
      *  @ignore
@@ -180,7 +180,7 @@ declare class AXDropdownPanelComponent extends MXInteractiveComponent implements
      *  @ignore
      */
     protected _placement: _acorex_cdk_common.AXConnectedPosition[];
-    placement: i0.InputSignal<"bottom-start" | "bottom-end">;
+    readonly placement: i0.InputSignal<"bottom-start" | "bottom-end">;
     /**
      *  @ignore
      */

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.1.8", ngImport: i0, type: AXAccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.8", 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.1.8", 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,27 +16,16 @@ 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);
-            });
             this.accordionItem()?.onClick.subscribe((e) => {
                 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' : ''}`,
@@ -97,10 +41,10 @@ class AXAccordionItemComponent {
     toggle() {
         this.isCollapsed.update((prev) => !prev);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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.1.8", ngImport: i0, type: AXAccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-accordion-item', imports: [
                         AXLoadingModule,
@@ -108,25 +52,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", 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.#eff = effect(() => {
+            const accordionItemDirective = [];
+            this.content().forEach((item) => {
+                accordionItemDirective.push(item.accordionItem());
+            });
+            this.accordionGroup().customAccordionItem.set(accordionItemDirective);
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
+    }
+    #eff;
+    get __hostClass() {
+        return `ax-${this.look()}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", 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
+      [activeIndex]="activeIndex()"
+      [collapsedOnItemClick]="collapsedOnItemClick()"
+      [accordion]="this.accordion()"
+      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", "collapsedOnItemClick"], exportAs: ["axAccordionGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-accordion-group', imports: [AXLoadingModule, AXAccordionGroupDirective], template: `
+    <div
+      [activeIndex]="activeIndex()"
+      [collapsedOnItemClick]="collapsedOnItemClick()"
+      [accordion]="this.accordion()"
+      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']
             }] } });
 
-const COMPONENT = [AXAccordionItemComponent, AXAccordionGroupComponent];
-const MODULES = [];
 class AXAccordionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.8", ngImport: i0, type: AXAccordionModule, imports: [AXAccordionItemComponent, AXAccordionGroupComponent], exports: [AXAccordionItemComponent, AXAccordionGroupComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXAccordionModule, imports: [MODULES, COMPONENT] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionModule, imports: [AXAccordionItemComponent, AXAccordionGroupComponent], exports: [AXAccordionItemComponent, AXAccordionGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionModule, imports: [AXAccordionItemComponent, AXAccordionGroupComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [...MODULES, ...COMPONENT],
-                    exports: [...COMPONENT],
-                    providers: [],
+                    imports: [AXAccordionItemComponent, AXAccordionGroupComponent],
+                    exports: [AXAccordionItemComponent, AXAccordionGroupComponent],
                 }]
         }] });