@acorex/components 22.1.7 → 22.2.0-next.0

package/fesm2022/acorex-components-button.mjs

@@ -1,14 +1,44 @@
-import { MXInteractiveComponent, MXColorComponent, AXComponent, AXClosableComponent, MXButtonBaseComponent, AXRippleDirective, AXFocusableComponent } from '@acorex/cdk/common';
+import { MXInteractiveComponent, MXColorComponent, AXComponent, AXClosableComponent, MXButtonBaseComponent, AXRippleDirective, AXFocusableComponent, MXBaseComponent } from '@acorex/cdk/common';
 import { AXDecoratorGenericComponent, AXDecoratorIconComponent } from '@acorex/components/decorators';
 import { AXLoadingComponent } from '@acorex/components/loading';
 import * as i0 from '@angular/core';
-import { EventEmitter, HostBinding, HostListener, Output, Input, ViewEncapsulation, Component, inject, input, afterNextRender, ContentChildren, computed, contentChild, model, NgModule } from '@angular/core';
-import * as i2 from '@acorex/core/translation';
-import { AXTranslationModule } from '@acorex/core/translation';
+import { Injectable, contentChildren, inject, viewChild, computed, EventEmitter, HostBinding, Output, Input, ViewEncapsulation, Component, DestroyRef, input, afterNextRender, ContentChildren, contentChild, model, HostListener, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgTemplateOutlet, NgClass, AsyncPipe } from '@angular/common';
+import { AXPopoverComponent } from '@acorex/components/popover';
+import { AXHtmlUtil } from '@acorex/core/utils';
+import * as i2 from '@acorex/core/translation';
+import { AXTranslationModule, AXTranslatorPipe } from '@acorex/core/translation';
 import { classes } from 'polytype';
 
+/** Coordinates which nested `ax-button-item` submenu is open within one `ax-button-item-list`. */
+class AXButtonItemSubmenuCoordinator {
+    constructor() {
+        this.current = null;
+    }
+    requestOpen(item) {
+        if (this.current && this.current !== item) {
+            this.current.closeNestedMenu();
+        }
+        this.current = item;
+    }
+    clear(item) {
+        if (this.current === item) {
+            this.current = null;
+        }
+    }
+    closeAll() {
+        this.current?.closeNestedMenu();
+        this.current = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXButtonItemSubmenuCoordinator, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXButtonItemSubmenuCoordinator }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXButtonItemSubmenuCoordinator, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * Represents a button item with optional content like icons, text, and dropdowns.
  *
@@ -17,6 +47,16 @@ import { classes } from 'polytype';
 class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorComponent) {
     constructor() {
         super(...arguments);
+        this.childMenuItems = contentChildren(AXButtonItemComponent, { ...(ngDevMode ? { debugName: "childMenuItems" } : /* istanbul ignore next */ {}), descendants: false });
+        this.submenuCoordinator = inject(AXButtonItemSubmenuCoordinator, { optional: true });
+        this.submenuPopover = viewChild('submenuPopover', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "submenuPopover" }] : /* istanbul ignore next */ []));
+        this.submenuTarget = this;
+        this.arrowIcon = computed(() => {
+            const isRtl = AXHtmlUtil.isRtl(this.getHostElement());
+            return isRtl ? 'ax-icon-chevron-left' : 'ax-icon-chevron-right';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "arrowIcon" }] : /* istanbul ignore next */ []));
         /**
          * Whether the item is visually separated from other items.
          *  @defaultValue false
@@ -48,6 +88,20 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
         this._selected = v;
         this.cdr.markForCheck();
     }
+    /** Whether this item has nested `ax-button-item` children. */
+    hasSubItems() {
+        return this.childMenuItems().length > 0;
+    }
+    /** Closes the nested submenu flyout when open. */
+    closeNestedMenu() {
+        this.submenuPopover()?.close();
+    }
+    handleSubmenuOpened() {
+        this.submenuCoordinator?.requestOpen(this);
+    }
+    handleSubmenuClosed() {
+        this.submenuCoordinator?.clear(this);
+    }
     /**
      * Handles click events on the button item host element.
      * Emits the onClick event if the component is not disabled.
@@ -55,14 +109,20 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
      * @param e - The mouse event that triggered the click.
      * @ignore
      */
-    __hostClick(e) {
-        if (!this.disabled) {
-            this.onClick.emit({
-                component: this,
-                htmlElement: this.getHostElement(),
-                nativeEvent: e,
-            });
+    handleHostClick(e) {
+        e.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        if (this.hasSubItems()) {
+            this.submenuCoordinator?.requestOpen(this);
+            this.submenuPopover()?.open();
         }
+        this.onClick.emit({
+            component: this,
+            htmlElement: this.getHostElement(),
+            nativeEvent: e,
+        });
     }
     /**
      * Handles focus events on the button item host element.
@@ -71,7 +131,7 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
      * @param e - The focus event that was triggered.
      * @ignore
      */
-    __hostFocus(e) {
+    handleHostFocus(e) {
         this.emitOnFocusEvent(e);
     }
     /**
@@ -81,9 +141,13 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
      * @param e - The blur event that was triggered.
      * @ignore
      */
-    __hostBlur(e) {
+    handleHostBlur(e) {
         this.emitOnBlurEvent(e);
     }
+    ngOnDestroy() {
+        this.closeNestedMenu();
+        this.submenuCoordinator?.clear(this);
+    }
     /**
      * Generates the CSS classes for the button item host element.
      * Includes classes for icon-only state, disabled state, selected state, divided state, and color.
@@ -98,6 +162,7 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
             'ax-state-selected': this.selected,
             'ax-divided': this.divided,
             'ax-action-item': true,
+            'ax-has-submenu': this.hasSubItems(),
         };
         cssClasses[`${this.color}`] = true;
         return Object.entries(cssClasses)
@@ -105,8 +170,8 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
             .map((c) => c[0])
             .join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXButtonItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXButtonItemComponent, isStandalone: true, selector: "ax-button-item", inputs: { color: "color", disabled: "disabled", text: "text", selected: "selected", divided: "divided", data: "data", name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", disabledChange: "disabledChange" }, host: { listeners: { "click": "__hostClick($event)", "focus": "__hostFocus($event)", "blur": "__hostBlur($event)" }, properties: { "class": "this.__hostClass", "attr.tabindex": "this.tabindex" } }, providers: [{ provide: AXComponent, useExisting: AXButtonItemComponent }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXButtonItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXButtonItemComponent, isStandalone: true, selector: "ax-button-item", inputs: { color: "color", disabled: "disabled", text: "text", selected: "selected", divided: "divided", data: "data", name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", disabledChange: "disabledChange" }, host: { listeners: { "click": "handleHostClick($event)", "focus": "handleHostFocus($event)", "blur": "handleHostBlur($event)" }, properties: { "class": "this.__hostClass", "attr.tabindex": "this.tabindex" } }, providers: [{ provide: AXComponent, useExisting: AXButtonItemComponent }], queries: [{ propertyName: "childMenuItems", predicate: AXButtonItemComponent, isSignal: true }], viewQueries: [{ propertyName: "submenuPopover", first: true, predicate: ["submenuPopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <div class="ax-action-item-prefix">
       <ng-content select="ax-prefix"> </ng-content>
       <ng-content select="ax-loading"> </ng-content>
@@ -117,11 +182,32 @@ class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorCompo
     </div>
     <div class="ax-action-item-suffix">
       <ng-content select="ax-suffix"> </ng-content>
+      @if (hasSubItems()) {
+        <i class="ax-icon ax-icon-solid {{ arrowIcon() }}"></i>
+      }
     </div>
     <ng-content select="ax-dropdown-panel"> </ng-content>
-  `, isInline: true, styles: ["@layer properties;@layer components{ax-button-item{display:flex;height:calc(var(--spacing, .25rem) * 9);width:100%;cursor:pointer;align-items:center;justify-content:space-between;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);padding-inline:var(--ax-comp-action-item-padding-inline, .875rem);color:var(--ax-comp-bg, var(--color-on-surface))}ax-button-item.ax-state-selected{background-color:rgba(var(--ax-sys-color-surface))}ax-button-item:hover:not(.ax-state-disabled,.ax-state-selected){background-color:rgba(var(--ax-sys-color-surface))}ax-button-item>div{display:flex;align-items:center;justify-content:center}ax-button-item>div.ax-action-item-prefix,ax-button-item>div.ax-action-item-suffix{gap:calc(var(--spacing, .25rem) * 2)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    @if (hasSubItems()) {
+      <ax-popover
+        #submenuPopover
+        [target]="submenuTarget"
+        openOn="hover"
+        closeOn="leave"
+        placement="end-top"
+        [closeOnScroll]="false"
+        visualContextScope="theme"
+        panelClass="ax-button-item-submenu-panel"
+        (onOpened)="handleSubmenuOpened()"
+        (onClosed)="handleSubmenuClosed()"
+      >
+        <div class="ax-button-item-submenu ax-action-list ax-action-list-vertical">
+          <ng-content select="ax-button-item,ax-divider,ax-title"></ng-content>
+        </div>
+      </ax-popover>
+    }
+  `, isInline: true, styles: ["@layer properties;@layer components{ax-button-item{display:flex;height:calc(var(--spacing, .25rem) * 9);width:100%;cursor:pointer;align-items:center;justify-content:space-between;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);padding-inline:var(--ax-comp-action-item-padding-inline, .875rem);color:var(--ax-comp-bg, var(--color-on-surface))}ax-button-item.ax-state-selected{background-color:rgba(var(--ax-sys-color-surface))}ax-button-item:hover:not(.ax-state-disabled,.ax-state-selected){background-color:rgba(var(--ax-sys-color-surface))}ax-button-item>div{display:flex;align-items:center;justify-content:center}ax-button-item>div.ax-action-item-prefix,ax-button-item>div.ax-action-item-suffix{gap:calc(var(--spacing, .25rem) * 2)}ax-button-item.ax-has-submenu>.ax-action-item-suffix{gap:calc(var(--spacing, .25rem) * 1)}.ax-button-item-submenu{min-width:12rem;padding-block:var(--ax-comp-button-item-list-padding-block, .25rem)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXButtonItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXButtonItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-button-item', template: `
     <div class="ax-action-item-prefix">
@@ -134,10 +220,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
     </div>
     <div class="ax-action-item-suffix">
       <ng-content select="ax-suffix"> </ng-content>
+      @if (hasSubItems()) {
+        <i class="ax-icon ax-icon-solid {{ arrowIcon() }}"></i>
+      }
     </div>
     <ng-content select="ax-dropdown-panel"> </ng-content>
-  `, encapsulation: ViewEncapsulation.None, inputs: ['color', 'disabled'], outputs: ['onClick', 'onFocus', 'onBlur', 'disabledChange'], imports: [CommonModule, AXDecoratorGenericComponent, AXTranslationModule], providers: [{ provide: AXComponent, useExisting: AXButtonItemComponent }], styles: ["@layer properties;@layer components{ax-button-item{display:flex;height:calc(var(--spacing, .25rem) * 9);width:100%;cursor:pointer;align-items:center;justify-content:space-between;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);padding-inline:var(--ax-comp-action-item-padding-inline, .875rem);color:var(--ax-comp-bg, var(--color-on-surface))}ax-button-item.ax-state-selected{background-color:rgba(var(--ax-sys-color-surface))}ax-button-item:hover:not(.ax-state-disabled,.ax-state-selected){background-color:rgba(var(--ax-sys-color-surface))}ax-button-item>div{display:flex;align-items:center;justify-content:center}ax-button-item>div.ax-action-item-prefix,ax-button-item>div.ax-action-item-suffix{gap:calc(var(--spacing, .25rem) * 2)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { text: [{
+    @if (hasSubItems()) {
+      <ax-popover
+        #submenuPopover
+        [target]="submenuTarget"
+        openOn="hover"
+        closeOn="leave"
+        placement="end-top"
+        [closeOnScroll]="false"
+        visualContextScope="theme"
+        panelClass="ax-button-item-submenu-panel"
+        (onOpened)="handleSubmenuOpened()"
+        (onClosed)="handleSubmenuClosed()"
+      >
+        <div class="ax-button-item-submenu ax-action-list ax-action-list-vertical">
+          <ng-content select="ax-button-item,ax-divider,ax-title"></ng-content>
+        </div>
+      </ax-popover>
+    }
+  `, encapsulation: ViewEncapsulation.None, inputs: ['color', 'disabled'], outputs: ['onClick', 'onFocus', 'onBlur', 'disabledChange'], imports: [CommonModule, AXDecoratorGenericComponent, AXTranslationModule, AXPopoverComponent], providers: [{ provide: AXComponent, useExisting: AXButtonItemComponent }], host: {
+                        '(click)': 'handleHostClick($event)',
+                        '(focus)': 'handleHostFocus($event)',
+                        '(blur)': 'handleHostBlur($event)',
+                    }, styles: ["@layer properties;@layer components{ax-button-item{display:flex;height:calc(var(--spacing, .25rem) * 9);width:100%;cursor:pointer;align-items:center;justify-content:space-between;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);padding-inline:var(--ax-comp-action-item-padding-inline, .875rem);color:var(--ax-comp-bg, var(--color-on-surface))}ax-button-item.ax-state-selected{background-color:rgba(var(--ax-sys-color-surface))}ax-button-item:hover:not(.ax-state-disabled,.ax-state-selected){background-color:rgba(var(--ax-sys-color-surface))}ax-button-item>div{display:flex;align-items:center;justify-content:center}ax-button-item>div.ax-action-item-prefix,ax-button-item>div.ax-action-item-suffix{gap:calc(var(--spacing, .25rem) * 2)}ax-button-item.ax-has-submenu>.ax-action-item-suffix{gap:calc(var(--spacing, .25rem) * 1)}.ax-button-item-submenu{min-width:12rem;padding-block:var(--ax-comp-button-item-list-padding-block, .25rem)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { childMenuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXButtonItemComponent), { ...{ descendants: false }, isSignal: true }] }], submenuPopover: [{ type: i0.ViewChild, args: ['submenuPopover', { isSignal: true }] }], text: [{
                 type: Input
             }], selected: [{
                 type: Input
@@ -149,15 +260,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], onClick: [{
                 type: Output
-            }], __hostClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], __hostFocus: [{
-                type: HostListener,
-                args: ['focus', ['$event']]
-            }], __hostBlur: [{
-                type: HostListener,
-                args: ['blur', ['$event']]
             }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -181,6 +283,9 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
     constructor() {
         super();
         this.parent = inject(AXClosableComponent, { optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.submenuCoordinator = inject(AXButtonItemSubmenuCoordinator);
+        this.boundClickItems = new WeakSet();
         /**
          * The list of button items to display.
          *
@@ -215,6 +320,13 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
             this._contentButtons.changes.subscribe(() => {
                 this._initContents();
             });
+            this.bindParentClosed();
+        });
+    }
+    bindParentClosed() {
+        const closable = this.parent;
+        closable?.onClosed?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.submenuCoordinator.closeAll();
         });
     }
     isDisabled(item) {
@@ -251,10 +363,13 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
      */
     _bindEvents() {
         this._contentButtons?.forEach((b) => {
-            if (!b.onClick.length)
-                b.onClick.subscribe((c) => {
-                    this._handleOnItemClick(c);
-                });
+            if (this.boundClickItems.has(b)) {
+                return;
+            }
+            this.boundClickItems.add(b);
+            b.onClick.subscribe((c) => {
+                this._handleOnItemClick(c);
+            });
         });
     }
     /**
@@ -276,10 +391,12 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
      * @ignore
      */
     _handleOnItemClick(e) {
-        if (this.closeParentOnClick()) {
+        const item = e.component;
+        this._emitOnItemClickEvent(e, item);
+        if (this.closeParentOnClick() && !item.hasSubItems()) {
+            this.submenuCoordinator.closeAll();
             this.parent?.close();
         }
-        this._emitOnItemClickEvent(e, e.component);
     }
     /**
      * Emits the onItemClick event with details about the clicked item.
@@ -314,9 +431,17 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
     get __hostClass() {
         return `ax-action-list ax-action-list-vertical`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXButtonItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXButtonItemListComponent, isStandalone: true, selector: "ax-button-item-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, closeParentOnClick: { classPropertyName: "closeParentOnClick", publicName: "closeParentOnClick", isSignal: true, isRequired: false, transformFunction: null }, lockOnLoading: { classPropertyName: "lockOnLoading", publicName: "lockOnLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXButtonItemListComponent }], queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXButtonItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXButtonItemListComponent, isStandalone: true, selector: "ax-button-item-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, closeParentOnClick: { classPropertyName: "closeParentOnClick", publicName: "closeParentOnClick", isSignal: true, isRequired: false, transformFunction: null }, lockOnLoading: { classPropertyName: "lockOnLoading", publicName: "lockOnLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+            { provide: AXComponent, useExisting: AXButtonItemListComponent },
+            AXButtonItemSubmenuCoordinator,
+        ], queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     @for (item of items(); track item.name) {
+      <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+    }
+    <ng-content></ng-content>
+
+    <ng-template #itemTemplate let-item>
       <ax-button-item
         [text]="item.text"
         [name]="item.name"
@@ -332,18 +457,25 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
             <ax-icon [icon]="item.icon"></ax-icon>
           </ax-prefix>
         }
+        @for (child of item.items ?? []; track child.name ?? child.text) {
+          <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: child }"></ng-container>
+        }
       </ax-button-item>
       @if (item.divided) {
         <ax-divider></ax-divider>
       }
-    }
-    <ng-content></ng-content>
-  `, isInline: true, styles: ["@layer components{ax-button-item-list.ax-action-list{padding-block:var(--ax-comp-button-item-list-padding-block, .25rem)}ax-button-item-list .ax-button-item-loading{display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    </ng-template>
+  `, isInline: true, styles: ["@layer components{ax-button-item-list.ax-action-list{padding-block:var(--ax-comp-button-item-list-padding-block, .25rem)}ax-button-item-list .ax-button-item-loading{display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXButtonItemListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXButtonItemListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-button-item-list', template: `
     @for (item of items(); track item.name) {
+      <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+    }
+    <ng-content></ng-content>
+
+    <ng-template #itemTemplate let-item>
       <ax-button-item
         [text]="item.text"
         [name]="item.name"
@@ -359,16 +491,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             <ax-icon [icon]="item.icon"></ax-icon>
           </ax-prefix>
         }
+        @for (child of item.items ?? []; track child.name ?? child.text) {
+          <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: child }"></ng-container>
+        }
       </ax-button-item>
       @if (item.divided) {
         <ax-divider></ax-divider>
       }
-    }
-    <ng-content></ng-content>
-  `, encapsulation: ViewEncapsulation.None, imports: [AXButtonItemComponent, AXDecoratorGenericComponent, AXDecoratorIconComponent, AXLoadingComponent], providers: [{ provide: AXComponent, useExisting: AXButtonItemListComponent }], styles: ["@layer components{ax-button-item-list.ax-action-list{padding-block:var(--ax-comp-button-item-list-padding-block, .25rem)}ax-button-item-list .ax-button-item-loading{display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+    </ng-template>
+  `, encapsulation: ViewEncapsulation.None, imports: [
+                        NgTemplateOutlet,
+                        AXButtonItemComponent,
+                        AXDecoratorGenericComponent,
+                        AXDecoratorIconComponent,
+                        AXLoadingComponent,
+                    ], providers: [
+                        { provide: AXComponent, useExisting: AXButtonItemListComponent },
+                        AXButtonItemSubmenuCoordinator,
+                    ], styles: ["@layer components{ax-button-item-list.ax-action-list{padding-block:var(--ax-comp-button-item-list-padding-block, .25rem)}ax-button-item-list .ax-button-item-loading{display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { _contentButtons: [{
                 type: ContentChildren,
-                args: [AXButtonItemComponent]
+                args: [AXButtonItemComponent, { descendants: true }]
             }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], closeParentOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeParentOnClick", required: false }] }], lockOnLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockOnLoading", required: false }] }], onItemClick: [{
                 type: Output
             }], __hostClass: [{
@@ -479,16 +622,16 @@ class AXButtonComponent extends MXButtonBaseComponent {
     blur() {
         this.getButton()?.blur();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXButtonComponent, isStandalone: true, selector: "ax-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", loadingText: "loadingTextChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXButtonComponent, isStandalone: true, selector: "ax-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", loadingText: "loadingTextChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXComponent, useExisting: AXButtonComponent },
             { provide: AXButtonItemComponent, useExisting: AXButtonComponent },
             { provide: AXFocusableComponent, useExisting: AXButtonComponent },
         ], queries: [{ propertyName: "loadingIcon", first: true, predicate: AXLoadingComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n  [axRipple]\n  [attr.type]=\"type()\"\n  [disabled]=\"disabled\"\n  [attr.tabindex]=\"tabIndex\"\n  (click)=\"_handleClick($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  class=\"{{ color }}\n  {{ interactiveLook }} \n  {{ selected ? 'ax-state-selected' : '' }} \n  {{ disabled ? 'ax-state-disabled' : '' }}\"\n>\n  <ng-content select=\"ax-loading, ax-loading-spinner\"> </ng-content>\n\n  @if (showIcon()) {\n    <ng-content select=\"ax-prefix, ax-icon\"> </ng-content>\n  }\n\n  <ng-content select=\"ax-content\"> </ng-content>\n\n  @if (text && !loadingText() && !iconOnly()) {\n    <span class=\"ax-button-text\">{{ text | translate | async }}</span>\n  }\n\n  @if (loadingText()) {\n    <span class=\"ax-button-text\">{{ loadingText() }}</span>\n  }\n\n  <ng-content select=\"ax-suffix\"> </ng-content>\n  <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n  <ng-content select=\".tab-content\"> </ng-content>\n\n  <ng-content></ng-content>\n</button>\n", styles: ["@layer properties;@layer components{ax-button{--ax-comp-button-shadow-rest: var(--ax-sys-effect-control-rest);--ax-comp-button-shadow-hover: var(--ax-sys-effect-control-hover);--ax-comp-button-shadow-active: var(--ax-sys-effect-control-active);--ax-comp-button-shadow-subtle-rest: var(--ax-sys-effect-control-subtle-rest);--ax-comp-button-shadow-subtle-hover: var(--ax-sys-effect-control-subtle-hover);--ax-comp-button-highlight-rest: var(--ax-sys-highlight-control);--ax-comp-button-highlight-hover: var(--ax-sys-highlight-control);--ax-comp-button-highlight-subtle: var(--ax-sys-highlight-control-subtle);--ax-comp-button-inner-border-rest: var(--ax-sys-inner-border-control);--ax-comp-button-inner-border-hover: var(--ax-sys-inner-border-control);--ax-comp-button-inner-border-active: var(--ax-sys-inner-border-control);--ax-comp-button-bevel-rest: var(--ax-sys-bevel-control-rest);--ax-comp-button-bevel-hover: var(--ax-sys-bevel-control-hover);--ax-comp-button-bevel-active: var(--ax-sys-bevel-control-active);--ax-comp-button-bevel-disabled: var(--ax-sys-bevel-control-disabled);--ax-comp-button-inset-shadow-active: var(--ax-sys-effect-control-active);--ax-comp-button-background-image-rest: var(--ax-sys-gradient-control-rest);--ax-comp-button-background-image-hover: var(--ax-sys-gradient-control-hover);--ax-comp-button-background-image-active: var(--ax-sys-gradient-control-active);--ax-comp-button-surface-overlay-rest: var(--ax-sys-surface-overlay-control-rest);--ax-comp-button-surface-overlay-hover: var(--ax-sys-surface-overlay-control-hover);--ax-comp-button-surface-overlay-active: var(--ax-sys-surface-overlay-control-active);--ax-comp-button-surface-overlay-subtle-rest: var(--ax-sys-surface-overlay-control-subtle-rest);--ax-comp-button-surface-overlay-subtle-hover: var(--ax-sys-surface-overlay-control-subtle-hover);--ax-comp-button-surface-overlay-subtle-active: var(--ax-sys-surface-overlay-control-subtle-active, var(--ax-sys-surface-overlay-control-active));--ax-comp-button-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-control);--ax-comp-button-contrast-inner-border-hover: var(--ax-sys-contrast-inner-border-control);--ax-comp-button-contrast-inner-border-active: var(--ax-sys-contrast-inner-border-control);--ax-comp-button-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-control);--ax-comp-button-transform-rest: var(--ax-sys-transform-control-rest);--ax-comp-button-transform-hover: var(--ax-sys-transform-control-hover);--ax-comp-button-transform-active: var(--ax-sys-transform-control-active);--ax-comp-button-transform-disabled: var(--ax-sys-transform-control-disabled);--ax-comp-button-transition-duration: var(--ax-sys-motion-duration);--ax-comp-button-transition-timing: var(--ax-sys-motion-timing);display:inline-flex;border-radius:var(--ax-sys-border-radius)}ax-button button{position:relative;display:flex;height:var(--ax-sys-size-base);width:100%;cursor:pointer;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:inherit;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);-webkit-user-select:none;user-select:none;transition-property:box-shadow,background-image,border-color,background-color,color,transform;transition-duration:var(--ax-comp-button-transition-duration);transition-timing-function:var(--ax-comp-button-transition-timing);transform:var(--ax-comp-button-transform-rest)}ax-button button.ax-state-disabled,ax-button button.ax-state-loading{cursor:not-allowed;opacity:50%;box-shadow:var(--ax-comp-button-contrast-inner-border-rest),var(--ax-comp-button-inner-border-rest);background-image:none;transform:var(--ax-comp-button-transform-disabled)}ax-button button.ax-solid-interactive{box-shadow:var(--ax-comp-button-contrast-inner-border-rest),var(--ax-comp-button-inner-border-rest),var(--ax-comp-button-bevel-rest),var(--ax-comp-button-highlight-rest),var(--ax-comp-button-shadow-rest);background-image:linear-gradient(var(--ax-comp-button-contrast-surface-overlay-rest),var(--ax-comp-button-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-button-surface-overlay-rest),var(--ax-comp-button-surface-overlay-rest)),var(--ax-comp-button-background-image-rest)}ax-button button.ax-solid-interactive.ax-default{border-color:rgba(var(--ax-sys-color-border-surface));--ax-comp-button-highlight-rest: 0 0 #0000;--ax-comp-button-highlight-hover: 0 0 #0000;--ax-comp-button-shadow-rest: var(--ax-sys-effect-control-neutral-rest);--ax-comp-button-shadow-hover: var(--ax-sys-effect-control-neutral-hover);--ax-comp-button-shadow-active: var(--ax-sys-effect-control-neutral-active);--ax-comp-button-inset-shadow-active: var(--ax-sys-effect-control-neutral-active);--ax-comp-button-bevel-rest: var(--ax-sys-bevel-control-neutral-rest);--ax-comp-button-bevel-hover: var(--ax-sys-bevel-control-neutral-hover);--ax-comp-button-bevel-active: var(--ax-sys-bevel-control-neutral-active);--ax-comp-button-bevel-disabled: var(--ax-sys-bevel-control-neutral-disabled);--ax-comp-button-inner-border-rest: var(--ax-sys-inner-border-control-neutral-rest);--ax-comp-button-inner-border-hover: var(--ax-sys-inner-border-control-neutral-hover);--ax-comp-button-inner-border-active: var(--ax-sys-inner-border-control-neutral-active);--ax-comp-button-background-image-rest: var(--ax-sys-gradient-control-neutral-rest);--ax-comp-button-background-image-hover: var(--ax-sys-gradient-control-neutral-hover);--ax-comp-button-background-image-active: var(--ax-sys-gradient-control-neutral-active)}ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):hover{box-shadow:var(--ax-comp-button-contrast-inner-border-hover),var(--ax-comp-button-inner-border-hover),var(--ax-comp-button-bevel-hover),var(--ax-comp-button-highlight-hover),var(--ax-comp-button-shadow-hover);background-image:linear-gradient(var(--ax-comp-button-contrast-surface-overlay-rest),var(--ax-comp-button-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-button-surface-overlay-hover),var(--ax-comp-button-surface-overlay-hover)),var(--ax-comp-button-background-image-hover);transform:var(--ax-comp-button-transform-hover)}ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):focus,ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):focus-within,ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):focus-visible{box-shadow:var(--ax-comp-button-contrast-inner-border-rest),var(--ax-comp-button-inner-border-rest),var(--ax-comp-button-bevel-rest),var(--ax-comp-button-highlight-rest),var(--ax-comp-button-shadow-rest);background-image:linear-gradient(var(--ax-comp-button-contrast-surface-overlay-rest),var(--ax-comp-button-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-button-surface-overlay-rest),var(--ax-comp-button-surface-overlay-rest)),var(--ax-comp-button-background-image-rest);transform:var(--ax-comp-button-transform-rest)}ax-button button.ax-solid-interactive:not(.ax-state-disabled,.ax-state-loading):active{box-shadow:var(--ax-comp-button-contrast-inner-border-active),var(--ax-comp-button-inner-border-active),var(--ax-comp-button-bevel-active),var(--ax-comp-button-inset-shadow-active);background-image:linear-gradient(var(--ax-comp-button-surface-overlay-active),var(--ax-comp-button-surface-overlay-active)),var(--ax-comp-button-background-image-active);transform:var(--ax-comp-button-transform-active)}ax-button button.ax-outline-interactive{box-shadow:var(--ax-comp-button-contrast-inner-border-rest);background-image:linear-gradient(var(--ax-comp-button-contrast-surface-overlay-rest),var(--ax-comp-button-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-button-surface-overlay-subtle-rest),var(--ax-comp-button-surface-overlay-subtle-rest))}ax-button button.ax-outline-interactive:not(.ax-state-disabled,.ax-state-loading):hover{box-shadow:var(--ax-comp-button-contrast-inner-border-hover),var(--ax-comp-button-highlight-subtle),var(--ax-comp-button-shadow-subtle-hover);background-image:linear-gradient(var(--ax-comp-button-contrast-surface-overlay-rest),var(--ax-comp-button-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-button-surface-overlay-subtle-hover),var(--ax-comp-button-surface-overlay-subtle-hover))}ax-button button.ax-outline-interactive:not(.ax-state-disabled,.ax-state-loading):active{box-shadow:var(--ax-comp-button-contrast-inner-border-active),var(--ax-comp-button-inset-shadow-active);background-image:linear-gradient(var(--ax-comp-button-contrast-surface-overlay-rest),var(--ax-comp-button-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-button-surface-overlay-subtle-active),var(--ax-comp-button-surface-overlay-subtle-active));transform:var(--ax-comp-button-transform-active)}ax-button button.ax-twotone-interactive{box-shadow:var(--ax-comp-button-contrast-inner-border-rest),var(--ax-comp-button-highlight-subtle),var(--ax-comp-button-shadow-subtle-rest);background-image:linear-gradient(var(--ax-comp-button-contrast-surface-overlay-rest),var(--ax-comp-button-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-button-surface-overlay-subtle-rest),var(--ax-comp-button-surface-overlay-subtle-rest))}ax-button button.ax-twotone-interactive:not(.ax-state-disabled,.ax-state-loading):hover{box-shadow:var(--ax-comp-button-contrast-inner-border-hover),var(--ax-comp-button-highlight-subtle),var(--ax-comp-button-shadow-subtle-hover);background-image:linear-gradient(var(--ax-comp-button-contrast-surface-overlay-rest),var(--ax-comp-button-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-button-surface-overlay-subtle-hover),var(--ax-comp-button-surface-overlay-subtle-hover))}ax-button button.ax-twotone-interactive:not(.ax-state-disabled,.ax-state-loading):active{box-shadow:var(--ax-comp-button-contrast-inner-border-active),var(--ax-comp-button-inset-shadow-active);background-image:linear-gradient(var(--ax-comp-button-contrast-surface-overlay-rest),var(--ax-comp-button-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-button-surface-overlay-subtle-active),var(--ax-comp-button-surface-overlay-subtle-active));transform:var(--ax-comp-button-transform-active)}ax-button button.ax-blank-interactive{box-shadow:var(--ax-comp-button-contrast-inner-border-rest)}ax-button button.ax-blank-interactive:not(.ax-state-disabled,.ax-state-loading):hover{box-shadow:var(--ax-comp-button-contrast-inner-border-hover),var(--ax-comp-button-shadow-subtle-rest);background-image:linear-gradient(var(--ax-comp-button-surface-overlay-subtle-hover),var(--ax-comp-button-surface-overlay-subtle-hover))}ax-button button.ax-blank-interactive:not(.ax-state-disabled,.ax-state-loading):active{box-shadow:var(--ax-comp-button-contrast-inner-border-active),var(--ax-comp-button-inset-shadow-active);background-image:linear-gradient(var(--ax-comp-button-surface-overlay-active),var(--ax-comp-button-surface-overlay-active));transform:var(--ax-comp-button-transform-active)}ax-button button.ax-link-interactive{box-shadow:none;background-image:none;transform:none}ax-button.ax-xs button{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4)}ax-button.ax-sm button{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5)}ax-button button,ax-button.ax-md button{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5)}ax-button.ax-lg button{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5)}ax-button.ax-xl button{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6)}ax-button .ax-button-text{text-wrap:nowrap}ax-button.ax-button-icon.ax-xs button{width:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding:calc(var(--spacing, .25rem) * 1);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-button.ax-button-icon.ax-sm button{width:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding:calc(var(--spacing, .25rem) * 1);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-button.ax-button-icon button,ax-button.ax-button-icon.ax-md button{width:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-button.ax-button-icon.ax-lg button{width:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-button.ax-button-icon.ax-xl button{width:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-button.ax-button-icon button ax-icon,ax-button.ax-button-icon button ax-prefix,ax-button.ax-button-icon button i{font-size:1.125em}ax-button ax-dropdown-panel{position:absolute}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-button', inputs: ['disabled', 'size', 'tabIndex', 'color', 'look', 'text', 'toggleable', 'selected'], outputs: [
+            args: [{ selector: 'ax-button', inputs: ['disabled', 'tabIndex', 'color', 'look', 'text', 'toggleable', 'selected'], outputs: [
                         'onBlur',
                         'onFocus',
                         'onClick',
@@ -507,16 +650,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * Icon-only blank chrome control (window caption, toolbar). Matches {@link AXDecoratorCloseButtonComponent} styling.
+ *
+ * @category Components
+ */
+class AXChromeButtonComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        /** Visible tooltip / native title. */
+        this.title = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Accessible name; falls back to {@link title}. */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    }
+    /** Forwards ax-xs … ax-xl from the host to the inner ax-button. */
+    get buttonSizeClasses() {
+        const host = this.getHostElement();
+        return ['ax-xs', 'ax-sm', 'ax-md', 'ax-lg', 'ax-xl'].filter((size) => host.classList.contains(size)).join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXChromeButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AXChromeButtonComponent, isStandalone: true, selector: "ax-chrome-button", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXChromeButtonComponent }], usesInheritance: true, ngImport: i0, template: `<ax-button
+    class="ax-chrome-button-action"
+    look="blank"
+    color="default"
+    [iconOnly]="true"
+    [class]="buttonSizeClasses"
+    [attr.aria-label]="ariaLabel() ?? title()"
+    [attr.title]="title()"
+  >
+    <ng-content></ng-content>
+  </ax-button>`, isInline: true, styles: ["@layer components{:is(ax-close-button,ax-chrome-button){display:inline-flex;flex-shrink:0}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action{display:inline-flex}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon button{width:auto;height:auto;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);cursor:pointer;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);box-shadow:none;background-image:none;transform:none}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon button i{--ax-sys-icon-size: 1.25rem;font-size:1.25rem}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon.ax-xs button i{--ax-sys-icon-size: 1rem;font-size:1rem}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon.ax-sm button i{--ax-sys-icon-size: 1.125rem;font-size:1.125rem}}:is(ax-close-button,ax-chrome-button){--ax-comp-ink: var(--ax-comp-text, var(--color-on-surface));--ax-comp-ink-dark: var(--ax-comp-text-dark, var(--ax-comp-text, var(--color-on-surface)));--ax-comp-ink-darker: var(--ax-comp-text-darker, var(--ax-comp-text, var(--color-on-surface)));color:var(--ax-comp-text, inherit)}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive{color:var(--ax-comp-text, var(--color-on-surface));box-shadow:none;background-color:transparent;background-image:none}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive :is(i,svg){color:inherit}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive i:before,:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive i:after{color:inherit}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive:not(.ax-state-disabled,.ax-state-loading):is(:hover,:focus,:focus-within,:focus-visible,.ax-state-focus){opacity:.75;color:var(--ax-comp-text, var(--color-on-surface));background-color:transparent;background-image:none;box-shadow:none;transform:none}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive:not(.ax-state-disabled,.ax-state-loading):active{opacity:1;color:var(--ax-comp-text, var(--color-on-surface));background-color:transparent;background-image:none;box-shadow:none;transform:none}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXChromeButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-chrome-button', template: `<ax-button
+    class="ax-chrome-button-action"
+    look="blank"
+    color="default"
+    [iconOnly]="true"
+    [class]="buttonSizeClasses"
+    [attr.aria-label]="ariaLabel() ?? title()"
+    [attr.title]="title()"
+  >
+    <ng-content></ng-content>
+  </ax-button>`, encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent], providers: [{ provide: AXComponent, useExisting: AXChromeButtonComponent }], styles: ["@layer components{:is(ax-close-button,ax-chrome-button){display:inline-flex;flex-shrink:0}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action{display:inline-flex}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon button{width:auto;height:auto;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);cursor:pointer;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);box-shadow:none;background-image:none;transform:none}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon button i{--ax-sys-icon-size: 1.25rem;font-size:1.25rem}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon.ax-xs button i{--ax-sys-icon-size: 1rem;font-size:1rem}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon.ax-sm button i{--ax-sys-icon-size: 1.125rem;font-size:1.125rem}}:is(ax-close-button,ax-chrome-button){--ax-comp-ink: var(--ax-comp-text, var(--color-on-surface));--ax-comp-ink-dark: var(--ax-comp-text-dark, var(--ax-comp-text, var(--color-on-surface)));--ax-comp-ink-darker: var(--ax-comp-text-darker, var(--ax-comp-text, var(--color-on-surface)));color:var(--ax-comp-text, inherit)}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive{color:var(--ax-comp-text, var(--color-on-surface));box-shadow:none;background-color:transparent;background-image:none}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive :is(i,svg){color:inherit}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive i:before,:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive i:after{color:inherit}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive:not(.ax-state-disabled,.ax-state-loading):is(:hover,:focus,:focus-within,:focus-visible,.ax-state-focus){opacity:.75;color:var(--ax-comp-text, var(--color-on-surface));background-color:transparent;background-image:none;box-shadow:none;transform:none}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive:not(.ax-state-disabled,.ax-state-loading):active{opacity:1;color:var(--ax-comp-text, var(--color-on-surface));background-color:transparent;background-image:none;box-shadow:none;transform:none}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+
+/**
+ * A button component that displays a close icon and triggers an action when clicked.
+ *
+ * @category Components
+ */
+class AXDecoratorCloseButtonComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this._parent = inject(AXClosableComponent, { optional: true });
+        // @Inject(AXClosableComponent) private _parent?: AXClosableComponent,
+        this.closeAll = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeAll" }] : /* istanbul ignore next */ []));
+        /**
+         *  @ignore
+         */
+        this._icon = 'ax-icon ax-icon-close';
+    }
+    /**
+     * The icon class to be applied to the button.
+     */
+    get icon() {
+        return this._icon || 'ax-icon-close';
+    }
+    /**
+     * Sets the icon class to be applied to the button.
+     *
+     * @param v The icon class.
+     */
+    set icon(v) {
+        this._icon = v;
+    }
+    /** Forwards ax-xs … ax-xl from the host to the inner ax-button. */
+    get buttonSizeClasses() {
+        const host = this.getHostElement();
+        return ['ax-xs', 'ax-sm', 'ax-md', 'ax-lg', 'ax-xl'].filter((size) => host.classList.contains(size)).join(' ');
+    }
+    /**
+     *  @ignore
+     */
+    _handleOnClick() {
+        if (this.closeAll()) {
+            this._parent?.closeAll();
+        }
+        else {
+            this._parent?.close();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDecoratorCloseButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AXDecoratorCloseButtonComponent, isStandalone: true, selector: "ax-close-button", inputs: { closeAll: { classPropertyName: "closeAll", publicName: "closeAll", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_handleOnClick()" } }, providers: [{ provide: AXComponent, useExisting: AXDecoratorCloseButtonComponent }], usesInheritance: true, ngImport: i0, template: `<ax-button
+    class="ax-chrome-button-action"
+    look="blank"
+    color="default"
+    [iconOnly]="true"
+    [class]="buttonSizeClasses"
+    [attr.aria-label]="
+      closeAll()
+        ? ('@acorex:common.general.close-all' | translate | async)
+        : ('@acorex:common.general.close' | translate | async)
+    "
+    [attr.title]="
+      closeAll()
+        ? ('@acorex:common.general.close-all' | translate | async)
+        : ('@acorex:common.general.close' | translate | async)
+    "
+  >
+    <i [ngClass]="icon"></i>
+  </ax-button>`, isInline: true, styles: ["@layer components{:is(ax-close-button,ax-chrome-button){display:inline-flex;flex-shrink:0}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action{display:inline-flex}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon button{width:auto;height:auto;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);cursor:pointer;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);box-shadow:none;background-image:none;transform:none}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon button i{--ax-sys-icon-size: 1.25rem;font-size:1.25rem}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon.ax-xs button i{--ax-sys-icon-size: 1rem;font-size:1rem}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon.ax-sm button i{--ax-sys-icon-size: 1.125rem;font-size:1.125rem}}:is(ax-close-button,ax-chrome-button){--ax-comp-ink: var(--ax-comp-text, var(--color-on-surface));--ax-comp-ink-dark: var(--ax-comp-text-dark, var(--ax-comp-text, var(--color-on-surface)));--ax-comp-ink-darker: var(--ax-comp-text-darker, var(--ax-comp-text, var(--color-on-surface)));color:var(--ax-comp-text, inherit)}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive{color:var(--ax-comp-text, var(--color-on-surface));box-shadow:none;background-color:transparent;background-image:none}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive :is(i,svg){color:inherit}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive i:before,:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive i:after{color:inherit}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive:not(.ax-state-disabled,.ax-state-loading):is(:hover,:focus,:focus-within,:focus-visible,.ax-state-focus){opacity:.75;color:var(--ax-comp-text, var(--color-on-surface));background-color:transparent;background-image:none;box-shadow:none;transform:none}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive:not(.ax-state-disabled,.ax-state-loading):active{opacity:1;color:var(--ax-comp-text, var(--color-on-surface));background-color:transparent;background-image:none;box-shadow:none;transform:none}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDecoratorCloseButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-close-button', template: `<ax-button
+    class="ax-chrome-button-action"
+    look="blank"
+    color="default"
+    [iconOnly]="true"
+    [class]="buttonSizeClasses"
+    [attr.aria-label]="
+      closeAll()
+        ? ('@acorex:common.general.close-all' | translate | async)
+        : ('@acorex:common.general.close' | translate | async)
+    "
+    [attr.title]="
+      closeAll()
+        ? ('@acorex:common.general.close-all' | translate | async)
+        : ('@acorex:common.general.close' | translate | async)
+    "
+  >
+    <i [ngClass]="icon"></i>
+  </ax-button>`, encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, NgClass, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXDecoratorCloseButtonComponent }], styles: ["@layer components{:is(ax-close-button,ax-chrome-button){display:inline-flex;flex-shrink:0}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action{display:inline-flex}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon button{width:auto;height:auto;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);cursor:pointer;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);box-shadow:none;background-image:none;transform:none}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon button i{--ax-sys-icon-size: 1.25rem;font-size:1.25rem}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon.ax-xs button i{--ax-sys-icon-size: 1rem;font-size:1rem}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon.ax-sm button i{--ax-sys-icon-size: 1.125rem;font-size:1.125rem}}:is(ax-close-button,ax-chrome-button){--ax-comp-ink: var(--ax-comp-text, var(--color-on-surface));--ax-comp-ink-dark: var(--ax-comp-text-dark, var(--ax-comp-text, var(--color-on-surface)));--ax-comp-ink-darker: var(--ax-comp-text-darker, var(--ax-comp-text, var(--color-on-surface)));color:var(--ax-comp-text, inherit)}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive{color:var(--ax-comp-text, var(--color-on-surface));box-shadow:none;background-color:transparent;background-image:none}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive :is(i,svg){color:inherit}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive i:before,:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive i:after{color:inherit}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive:not(.ax-state-disabled,.ax-state-loading):is(:hover,:focus,:focus-within,:focus-visible,.ax-state-focus){opacity:.75;color:var(--ax-comp-text, var(--color-on-surface));background-color:transparent;background-image:none;box-shadow:none;transform:none}:is(ax-close-button,ax-chrome-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive:not(.ax-state-disabled,.ax-state-loading):active{opacity:1;color:var(--ax-comp-text, var(--color-on-surface));background-color:transparent;background-image:none;box-shadow:none;transform:none}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { closeAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAll", required: false }] }], icon: [{
+                type: Input
+            }], _handleOnClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 class AXButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXButtonModule, imports: [AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent], exports: [AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXButtonModule, imports: [AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXButtonModule, imports: [AXButtonComponent,
+            AXButtonItemComponent,
+            AXButtonItemListComponent,
+            AXDecoratorCloseButtonComponent,
+            AXChromeButtonComponent], exports: [AXButtonComponent,
+            AXButtonItemComponent,
+            AXButtonItemListComponent,
+            AXDecoratorCloseButtonComponent,
+            AXChromeButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXButtonModule, imports: [AXButtonComponent,
+            AXButtonItemComponent,
+            AXButtonItemListComponent,
+            AXDecoratorCloseButtonComponent,
+            AXChromeButtonComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent],
-                    exports: [AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent],
+                    imports: [
+                        AXButtonComponent,
+                        AXButtonItemComponent,
+                        AXButtonItemListComponent,
+                        AXDecoratorCloseButtonComponent,
+                        AXChromeButtonComponent,
+                    ],
+                    exports: [
+                        AXButtonComponent,
+                        AXButtonItemComponent,
+                        AXButtonItemListComponent,
+                        AXDecoratorCloseButtonComponent,
+                        AXChromeButtonComponent,
+                    ],
                 }]
         }] });
 
@@ -524,5 +834,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent, AXButtonModule };
+export { AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent, AXButtonModule, AXChromeButtonComponent, AXDecoratorCloseButtonComponent };
 //# sourceMappingURL=acorex-components-button.mjs.map