@acorex/components 21.0.0-next.1 → 21.0.0-next.11

package/drawer/index.d.ts

@@ -1,86 +1,61 @@
-import { MXBaseComponent } from '@acorex/cdk/common';
-import * as i0 from '@angular/core';
-import { AfterContentInit, DoCheck } from '@angular/core';
-import * as i1 from '@angular/common';
+import { MXBaseComponent, AXClickEvent } from '@acorex/cdk/common';
+import * as _angular_core from '@angular/core';
+import * as i1 from '@acorex/cdk/drawer';
+import { AXDrawerLocation, AXDrawerMode } from '@acorex/cdk/drawer';
 
 /**
  * A container component that organizes and positions drawer components.
  * @category component
  */
 declare class AXDrawerContainerComponent extends MXBaseComponent {
-    private service;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXDrawerContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDrawerContainerComponent, "ax-drawer-container", never, {}, {}, never, ["ax-drawer", "ax-content"], true, never>;
+    #private;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDrawerContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXDrawerContainerComponent, "ax-drawer-container", never, {}, {}, never, ["ax-drawer", "ax-content"], true, [{ directive: typeof i1.AXDrawerContainerDirective; inputs: {}; outputs: {}; }]>;
 }
 
-type AXDrawerMode = 'push' | 'overlay';
-type AXDrawerLocation = 'start' | 'end';
 /**
  * A component that represents a drawer with header and content sections.
  *
  * @category Components
  */
-declare class AXDrawerComponent extends MXBaseComponent implements AfterContentInit, DoCheck {
+declare class AXDrawerComponent extends MXBaseComponent {
     #private;
-    location: i0.ModelSignal<AXDrawerLocation>;
-    showBackdrop: i0.InputSignal<boolean>;
-    mode: i0.ModelSignal<AXDrawerMode>;
-    closeOthers: i0.InputSignal<boolean>;
-    collapsed: i0.ModelSignal<boolean>;
-    private backdropElement;
-    protected loaded: i0.WritableSignal<boolean>;
-    private service;
-    private _zone;
-    private document;
-    private platformID;
-    /**
+    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;
+    /**
+     * Toggles the drawer state between open and closed.
      *
-     *  @ignore
-     */
-    ngAfterContentInit(): void;
-    /**
-     *  @ignore
-     */
-    ngDoCheck(): void;
-    /**
-     *  @ignore
-     */
-    private _detectBoundingSize;
-    /**
-     * Toggles the collapsed state of the drawer.
+     * @returns void - No return value. The drawer state is toggled.
      */
     toggle(): void;
     /**
-     * Collapses the drawer.
-     * @ignore
+     * Closes the drawer.
+     *
+     * @returns void - No return value. The drawer is collapsed.
      */
     close(): void;
     /**
-     * Expands the drawer.
+     * Opens the drawer.
+     *
+     * @returns void - No return value. The drawer is expanded.
      */
     open(): void;
-    /**
-     *  @ignore
-     */
-    private _addBackdrop;
-    /**
-     *  @ignore
-     */
-    private _removeBackdrop;
-    /**
-     *  @ignore
-     */
-    private get __hostClass();
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXDrawerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDrawerComponent, "ax-drawer", never, { "location": { "alias": "location"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "closeOthers": { "alias": "closeOthers"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "location": "locationChange"; "mode": "modeChange"; "collapsed": "collapsedChange"; }, never, ["ax-header", "ax-content"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDrawerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXDrawerComponent, "ax-drawer", 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: {}; }]>;
 }
 
 declare class AXDrawerModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXDrawerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDrawerModule, never, [typeof i1.CommonModule, typeof AXDrawerComponent, typeof AXDrawerContainerComponent], [typeof AXDrawerComponent, typeof AXDrawerContainerComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AXDrawerModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDrawerModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXDrawerModule, never, [typeof AXDrawerComponent, typeof AXDrawerContainerComponent], [typeof AXDrawerComponent, typeof AXDrawerContainerComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXDrawerModule>;
 }
 
 export { AXDrawerComponent, AXDrawerContainerComponent, AXDrawerModule };
-export type { AXDrawerLocation, AXDrawerMode };

package/drawer-legacy/README.md

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

package/drawer-legacy/index.d.ts

@@ -0,0 +1,86 @@
+import { MXBaseComponent } from '@acorex/cdk/common';
+import * as i0 from '@angular/core';
+import { AfterContentInit, DoCheck } from '@angular/core';
+import * as i1 from '@angular/common';
+
+/**
+ * A container component that organizes and positions drawer components.
+ * @category component
+ */
+declare class AXDrawerLegacyContainerComponent extends MXBaseComponent {
+    private service;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXDrawerLegacyContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDrawerLegacyContainerComponent, "ax-drawer-legacy-container", never, {}, {}, never, ["ax-drawer", "ax-content"], true, never>;
+}
+
+type AXDrawerMode = 'push' | 'overlay';
+type AXDrawerLocation = 'start' | 'end';
+/**
+ * A component that represents a drawer with header and content sections.
+ *
+ * @category Components
+ */
+declare class AXDrawerLegacyComponent extends MXBaseComponent implements AfterContentInit, DoCheck {
+    #private;
+    location: i0.ModelSignal<AXDrawerLocation>;
+    showBackdrop: i0.InputSignal<boolean>;
+    mode: i0.ModelSignal<AXDrawerMode>;
+    closeOthers: i0.InputSignal<boolean>;
+    collapsed: i0.ModelSignal<boolean>;
+    private backdropElement;
+    protected loaded: i0.WritableSignal<boolean>;
+    private service;
+    private _zone;
+    private document;
+    private platformID;
+    /**
+     *
+     *  @ignore
+     */
+    ngAfterContentInit(): void;
+    /**
+     *  @ignore
+     */
+    ngDoCheck(): void;
+    /**
+     *  @ignore
+     */
+    private _detectBoundingSize;
+    /**
+     * Toggles the collapsed state of the drawer.
+     */
+    toggle(): void;
+    /**
+     * Collapses the drawer.
+     * @ignore
+     */
+    close(): void;
+    /**
+     * Expands the drawer.
+     */
+    open(): void;
+    /**
+     *  @ignore
+     */
+    private _addBackdrop;
+    /**
+     *  @ignore
+     */
+    private _removeBackdrop;
+    /**
+     *  @ignore
+     */
+    private get __hostClass();
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXDrawerLegacyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDrawerLegacyComponent, "ax-drawer-legacy", never, { "location": { "alias": "location"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "closeOthers": { "alias": "closeOthers"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "location": "locationChange"; "mode": "modeChange"; "collapsed": "collapsedChange"; }, never, ["ax-header", "ax-content"], true, never>;
+}
+
+declare class AXDrawerLegacyModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXDrawerLegacyModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDrawerLegacyModule, never, [typeof i1.CommonModule, typeof AXDrawerLegacyComponent, typeof AXDrawerLegacyContainerComponent], [typeof AXDrawerLegacyComponent, typeof AXDrawerLegacyContainerComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AXDrawerLegacyModule>;
+}
+
+export { AXDrawerLegacyComponent, AXDrawerLegacyContainerComponent, AXDrawerLegacyModule };
+export type { AXDrawerLocation, AXDrawerMode };

package/editor/README.md

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

package/editor/index.d.ts

@@ -0,0 +1,41 @@
+import * as polytype from 'polytype';
+import * as i0 from '@angular/core';
+import { MXInputBaseValueComponent, MXLookComponent } from '@acorex/cdk/common';
+import { OutputData } from '@editorjs/editorjs';
+
+type EditorJsTool = 'header' | 'list' | 'raw' | 'image' | 'quote' | 'code' | 'underline' | 'color';
+type ImageToolConfig = {
+    endpoints: {
+        byFile: string;
+        byUrl: string;
+    };
+};
+
+declare const AXEditorComponent_base: polytype.Polytype.ClusteredConstructor<[{
+    new (): MXInputBaseValueComponent<OutputData>;
+    ɵfac: i0.ɵɵFactoryDeclaration<MXInputBaseValueComponent<any>, never>;
+    ɵprov: i0.ɵɵInjectableDeclaration<MXInputBaseValueComponent<any>>;
+}, typeof MXLookComponent]>;
+declare class AXEditorComponent extends AXEditorComponent_base {
+    #private;
+    private editorHolder;
+    modules: i0.InputSignal<EditorJsTool[]>;
+    private editorClass;
+    private colorConfig;
+    private markerConfig;
+    loadEditorJsTools(selectedTools: EditorJsTool[]): Promise<Record<string, any>>;
+    private get __hostClass();
+    private get __hostName();
+    save(): Promise<OutputData>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXEditorComponent, "ax-editor", never, { "look": { "alias": "look"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "modules": { "alias": "modules"; "required": false; "isSignal": true; }; }, { "onValueChanged": "onValueChanged"; }, never, ["ax-validation-rule"], true, never>;
+}
+
+declare class EditorModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EditorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EditorModule, never, [typeof AXEditorComponent], [typeof AXEditorComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EditorModule>;
+}
+
+export { AXEditorComponent, EditorModule };
+export type { EditorJsTool, ImageToolConfig };

package/fesm2022/acorex-components-accordion.mjs

@@ -41,10 +41,10 @@ class AXAccordionItemComponent {
     toggle() {
         this.isCollapsed.update((prev) => !prev);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", 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.3.3", ngImport: i0, type: AXAccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-accordion-item', imports: [
                         AXLoadingModule,
@@ -53,7 +53,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         AXAccordionItemDirective,
                         AXAccordionItemContentDirective,
                     ], 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: [{
+        }], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }, { type: i0.Output, args: ["isLoadingChange"] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accordionItem: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXAccordionItemDirective), { isSignal: true }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -78,8 +78,8 @@ class AXAccordionGroupComponent {
     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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", 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,
@@ -96,7 +96,7 @@ class AXAccordionGroupComponent {
     </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-accordion-group', imports: [AXLoadingModule, AXAccordionGroupDirective], template: `
     <div
@@ -114,17 +114,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         },
                         { 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: [{
+        }], propDecorators: { accordionGroup: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXAccordionGroupDirective), { isSignal: true }] }], content: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXAccordionItemComponent), { isSignal: true }] }], accordion: [{ type: i0.Input, args: [{ isSignal: true, alias: "accordion", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], collapsedOnItemClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedOnItemClick", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 class AXAccordionModule {
-    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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionModule, imports: [AXAccordionItemComponent, AXAccordionGroupComponent], exports: [AXAccordionItemComponent, AXAccordionGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionModule, imports: [AXAccordionItemComponent, AXAccordionGroupComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXAccordionItemComponent, AXAccordionGroupComponent],