@acorex/components 21.0.0-next.28 → 21.0.0-next.29

package/button/index.d.ts

@@ -1,4 +1,4 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { EventEmitter, QueryList, AfterViewInit } from '@angular/core';
 import { MXInteractiveComponent, MXColorComponent, AXClickEvent, AXStyleColorType, AXItemClickEvent, AXStyleLookType, AXHotKeyAction, MXButtonBaseComponent } from '@acorex/cdk/common';
 import * as polytype from 'polytype';
@@ -11,7 +11,9 @@ interface AXButtonItemListItem {
     divided?: boolean;
     disabled?: boolean;
     selected?: boolean;
+    iconOnly?: boolean;
     color?: AXStyleColorType;
+    loading?: boolean;
 }
 declare const AXButtonItemComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXColorComponent]>;
 /**
@@ -93,8 +95,8 @@ declare class AXButtonItemComponent extends AXButtonItemComponent_base {
      * @ignore
      */
     tabindex: string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonItemComponent, "ax-button-item", never, { "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "text": { "alias": "text"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "divided": { "alias": "divided"; "required": false; }; "data": { "alias": "data"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "onClick": "onClick"; "onFocus": "onFocus"; "onBlur": "onBlur"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-loading", "ax-icon", "ax-suffix", "ax-dropdown-panel"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXButtonItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXButtonItemComponent, "ax-button-item", never, { "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "text": { "alias": "text"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "divided": { "alias": "divided"; "required": false; }; "data": { "alias": "data"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "onClick": "onClick"; "onFocus": "onFocus"; "onBlur": "onBlur"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-loading", "ax-icon", "ax-suffix", "ax-dropdown-panel"], true, never>;
 }
 
 /**
@@ -110,7 +112,20 @@ declare class AXButtonItemListComponent extends MXInteractiveComponent {
      *
      * @defaultValue []
      */
-    items: i0.InputSignal<AXButtonItemListItem[]>;
+    items: _angular_core.InputSignal<AXButtonItemListItem[]>;
+    /**
+     * Determines if the parent closable component should be closed automatically when
+     * an item is clicked.
+     *
+     * @defaultValue true
+     */
+    closeParentOnClick: _angular_core.InputSignal<boolean>;
+    /**
+     * Locks interaction for all items when any item is loading.
+     *
+     * @defaultValue false
+     */
+    lockOnLoading: _angular_core.InputSignal<boolean>;
     /**
      * Emits an event when an item is clicked.
      * The event contains details about the clicked item.
@@ -125,6 +140,8 @@ declare class AXButtonItemListComponent extends MXInteractiveComponent {
      * @ignore
      */
     constructor();
+    protected isDisabled(item: AXButtonItemListItem): boolean;
+    protected hasAnyLoadingItem(): boolean;
     /**
      * Initializes the content of the button item list.
      * Binds events and properties to content button items and marks for change detection.
@@ -162,6 +179,10 @@ declare class AXButtonItemListComponent extends MXInteractiveComponent {
      * @ignore
      */
     _emitOnItemClickEvent(e: AXClickEvent, item: AXButtonItemComponent): void;
+    /**
+     * Closes the parent closable component if available.
+     */
+    closeParent(): void;
     /**
      * Generates the CSS classes for the button item list host element.
      * Includes classes for action list and vertical layout.
@@ -170,8 +191,8 @@ declare class AXButtonItemListComponent extends MXInteractiveComponent {
      * @ignore
      */
     private get __hostClass();
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonItemListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonItemListComponent, "ax-button-item-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; }, ["_contentButtons"], ["*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXButtonItemListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXButtonItemListComponent, "ax-button-item-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "closeParentOnClick": { "alias": "closeParentOnClick"; "required": false; "isSignal": true; }; "lockOnLoading": { "alias": "lockOnLoading"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; }, ["_contentButtons"], ["*"], true, never>;
 }
 
 type AXButtonType = 'submit' | 'button' | 'cancel' | 'reset';
@@ -204,10 +225,10 @@ interface AXButtonItem {
  * @category Components
  */
 declare class AXButtonComponent extends MXButtonBaseComponent implements AfterViewInit {
-    iconOnly: i0.InputSignal<boolean>;
-    protected showIcon: i0.Signal<boolean>;
-    protected loadingIcon: i0.Signal<AXLoadingComponent>;
-    protected hasLoadingIcon: i0.Signal<boolean>;
+    iconOnly: _angular_core.InputSignal<boolean>;
+    protected showIcon: _angular_core.Signal<boolean>;
+    protected loadingIcon: _angular_core.Signal<AXLoadingComponent>;
+    protected hasLoadingIcon: _angular_core.Signal<boolean>;
     /**
      *  Fires each time the user clicks the button.
      *  @event
@@ -218,13 +239,13 @@ declare class AXButtonComponent extends MXButtonBaseComponent implements AfterVi
      *
      * @defaultValue 'button'
      */
-    type: i0.InputSignal<AXButtonType>;
+    type: _angular_core.InputSignal<AXButtonType>;
     /**
      * Defines the text displayed while the action sheet is loading.
      *
      * @defaultValue null
      */
-    loadingText: i0.ModelSignal<string>;
+    loadingText: _angular_core.ModelSignal<string>;
     /**
      *  @ignore
      */
@@ -255,14 +276,14 @@ declare class AXButtonComponent extends MXButtonBaseComponent implements AfterVi
      * when the button loses focus.
      */
     blur(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonComponent, "ax-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "toggleableChange": "toggleableChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; "loadingText": "loadingTextChange"; }, ["loadingIcon"], ["ax-loading, ax-loading-spinner", "ax-prefix, ax-icon", "ax-content", "ax-suffix", "ax-dropdown-panel", ".tab-content", "*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXButtonComponent, "ax-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "toggleableChange": "toggleableChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; "loadingText": "loadingTextChange"; }, ["loadingIcon"], ["ax-loading, ax-loading-spinner", "ax-prefix, ax-icon", "ax-content", "ax-suffix", "ax-dropdown-panel", ".tab-content", "*"], true, never>;
 }
 
 declare class AXButtonModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXButtonModule, never, [typeof AXButtonComponent, typeof AXButtonItemComponent, typeof AXButtonItemListComponent], [typeof AXButtonComponent, typeof AXButtonItemComponent, typeof AXButtonItemListComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AXButtonModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXButtonModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXButtonModule, never, [typeof AXButtonComponent, typeof AXButtonItemComponent, typeof AXButtonItemListComponent], [typeof AXButtonComponent, typeof AXButtonItemComponent, typeof AXButtonItemListComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXButtonModule>;
 }
 
 export { AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent, AXButtonModule };

package/data-table/index.d.ts

@@ -1,5 +1,5 @@
 import * as i2 from '@acorex/cdk/common';
-import { AXEvent, MXBaseComponent, AXDataSource, AXSortOrder, AXButtonClickEvent, AXItemClickEvent, AXValueChangedEvent, AXListDataSource } from '@acorex/cdk/common';
+import { AXEvent, MXBaseComponent, AXDataSource, AXSortOrder, AXStyleLookType, AXButtonClickEvent, AXItemClickEvent, AXClickEvent, AXValueChangedEvent, AXListDataSource } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, TemplateRef, ChangeDetectorRef, OnInit, DoCheck, QueryList, WritableSignal, ElementRef, AfterViewInit, Signal } from '@angular/core';
 import * as i11 from '@acorex/core/format';
@@ -245,14 +245,24 @@ declare class AXDataTableTextColumnComponent extends AXDataTableColumnComponent
     static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableTextColumnComponent, "ax-text-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "allowSorting": { "alias": "allowSorting"; "required": false; }; "allowResizing": { "alias": "allowResizing"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "customExpandIcon": { "alias": "customExpandIcon"; "required": false; }; "customCollapseIcon": { "alias": "customCollapseIcon"; "required": false; }; "dataField": { "alias": "dataField"; "required": false; }; "expandHandler": { "alias": "expandHandler"; "required": false; }; "wrapText": { "alias": "wrapText"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "format": { "alias": "format"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-type AXRowCommandItem = AXButtonItemListItem;
-type AXRowCommandItemClickEvent = AXButtonClickEvent;
+type AXRowCommandItem = AXButtonItemListItem & {
+    commandId?: string;
+    look?: AXStyleLookType;
+};
+interface AXRowCommandItemClickEvent extends AXButtonClickEvent {
+    setLoading?: (loading: boolean) => void;
+}
 declare abstract class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
     protected grid: AXBaseDataTable;
     protected cdr: ChangeDetectorRef;
+    protected commandLoading: i0.WritableSignal<string>;
+    private rowIdentityMap;
+    private rowIdentitySeq;
     allowSorting: boolean;
     get loadingEnabled(): boolean;
     get cssClass(): string;
+    protected resolveCommandId(rowData: unknown, commandName: string): string;
+    protected setCommandLoadingState(commandId: string, loading: boolean): void;
     onItemClick: EventEmitter<AXRowCommandItemClickEvent>;
 }
 /**
@@ -280,6 +290,10 @@ declare class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumn
      */
     get renderHeaderTemplate(): TemplateRef<unknown>;
     footerTemplate: TemplateRef<unknown>;
+    emptyStateTemplate?: TemplateRef<unknown>;
+    emptyStateText: string;
+    protected itemsLoading: i0.WritableSignal<boolean>;
+    protected itemsFetched: i0.WritableSignal<boolean>;
     /**
      *  @ignore
      */
@@ -298,6 +312,7 @@ declare class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumn
      */
     protected _items: AXRowCommandItem[];
     items: AXRowCommandItem[] | ((rowData: unknown) => AXRowCommandItem[] | Promise<AXRowCommandItem[]>);
+    private dropdownLoadingEffect;
     /**
      *  @ignore
      */
@@ -306,12 +321,14 @@ declare class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumn
      *  @ignore
      */
     protected handleOnClosed(): void;
+    private decorateItems;
+    private applyLoadingState;
     /**
      *  @ignore
      */
     protected handleOnItemClick(e: AXItemClickEvent<AXButtonItemComponent>, data: unknown): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXRowDropdownCommandColumnComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXRowDropdownCommandColumnComponent, "ax-dropdown-command-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "onItemClick": "onItemClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXRowDropdownCommandColumnComponent, "ax-dropdown-command-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "emptyStateTemplate": { "alias": "emptyStateTemplate"; "required": false; }; "emptyStateText": { "alias": "emptyStateText"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "onItemClick": "onItemClick"; }, never, never, true, never>;
 }
 /**
  * A column for displaying command buttons in a data table.
@@ -363,10 +380,15 @@ declare class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponen
      *  @ignore
      */
     protected getItems(rowData: unknown): AXRowCommandItem[];
+    protected getItemsWithIds(rowData: unknown): Array<{
+        item: AXRowCommandItem;
+        commandId: string;
+    }>;
     /**
      *  @ignore
      */
-    protected handleOnItemClick(e: MouseEvent, item: AXRowCommandItem, data: unknown): void;
+    protected getCommandId(rowData: unknown, item: AXRowCommandItem): string;
+    protected handleOnItemClick(e: AXClickEvent, item: AXRowCommandItem, data: unknown): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXRowCommandColumnComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXRowCommandColumnComponent, "ax-command-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "onItemClick": "onItemClick"; }, never, never, true, never>;
 }
@@ -910,6 +932,14 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
      * @defaultValue `true`
      */
     alternative: boolean;
+    /**
+     * Auto-fits all columns width on initial data load.
+     * Only applies to columns with allowResizing=true.
+     * Fixed columns are skipped by default.
+     *
+     * @defaultValue `false`
+     */
+    autoFitColumnsOnLoad: boolean;
     /**
      * Indicates if the table header should be displayed.
      *
@@ -1096,6 +1126,14 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
      *  @ignore
      */
     protected calculateRowIndex(index: number): number;
+    /**
+     * Handles double-click on resize handle to auto-fit column width.
+     *
+     * @param event - The mouse event from the double-click
+     * @param columnIndex - The index of the column to auto-fit
+     * @ignore
+     */
+    protected onResizeHandlerDoubleClick(event: MouseEvent, columnIndex: number): void;
     /**
      *  @ignore
      */
@@ -1116,8 +1154,35 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
      *  @ignore
      */
     private calculateStickyColumnsPositions;
+    /**
+     * Auto-fits all columns width based on their content.
+     *
+     * @param options - Configuration options
+     * @param options.skipFixed - If true, skips fixed columns (default: true)
+     * @param options.skipLoading - If true, skips if data is loading (default: true)
+     * @param options.maxWidth - Maximum width for any column in pixels (default: 500)
+     * @returns void
+     */
+    autoFitAllColumns(options?: {
+        skipFixed?: boolean;
+        skipLoading?: boolean;
+        maxWidth?: number;
+    }): void;
+    /**
+     * Auto-fits a column width based on its content.
+     * Similar to Excel's "AutoFit Column Width" feature.
+     * Uses an invisible helper table to measure actual content width without affecting the main table.
+     *
+     * @param columnIndex - The index of the column to auto-fit (0-based, based on columns QueryList)
+     * @param options - Configuration options
+     * @param options.maxWidth - Maximum width for the column in pixels (default: none)
+     * @returns void
+     */
+    autoFitColumn(columnIndex: number, options?: {
+        maxWidth?: number;
+    }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableComponent, "ax-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "selectedRows": { "alias": "selectedRows"; "required": false; }; "parentField": { "alias": "parentField"; "required": false; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "noDataTemplate": { "alias": "noDataTemplate"; "required": false; }; "alternative": { "alias": "alternative"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fixedHeader": { "alias": "fixedHeader"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "fixedFooter": { "alias": "fixedFooter"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "allowReordering": { "alias": "allowReordering"; "required": false; }; "paging": { "alias": "paging"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "focusedRowChange": "focusedRowChange"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "onColumnsOrderChanged": "onColumnsOrderChanged"; "onColumnSizeChanged": "onColumnSizeChanged"; "onPageChanged": "onPageChanged"; }, ["customDataPager", "columns"], ["ax-header", "ax-data-pager", "ax-footer"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableComponent, "ax-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "selectedRows": { "alias": "selectedRows"; "required": false; }; "parentField": { "alias": "parentField"; "required": false; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "noDataTemplate": { "alias": "noDataTemplate"; "required": false; }; "alternative": { "alias": "alternative"; "required": false; }; "autoFitColumnsOnLoad": { "alias": "autoFitColumnsOnLoad"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fixedHeader": { "alias": "fixedHeader"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "fixedFooter": { "alias": "fixedFooter"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "allowReordering": { "alias": "allowReordering"; "required": false; }; "paging": { "alias": "paging"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "focusedRowChange": "focusedRowChange"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "onColumnsOrderChanged": "onColumnsOrderChanged"; "onColumnSizeChanged": "onColumnSizeChanged"; "onPageChanged": "onPageChanged"; }, ["customDataPager", "columns"], ["ax-header", "ax-data-pager", "ax-footer"], true, never>;
 }
 
 declare class AXDataTableModule {

package/fesm2022/acorex-components-button.mjs

@@ -1,5 +1,6 @@
 import { MXInteractiveComponent, MXColorComponent, AXComponent, AXClosableComponent, MXButtonBaseComponent, AXRippleDirective, AXFocusableComponent } 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, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, input, afterNextRender, ContentChildren, computed, contentChild, model, NgModule } from '@angular/core';
 import * as i2 from '@acorex/core/translation';
@@ -7,7 +8,6 @@ import { AXTranslationModule } from '@acorex/core/translation';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { classes } from 'polytype';
-import { AXLoadingComponent } from '@acorex/components/loading';
 
 /**
  * Represents a button item with optional content like icons, text, and dropdowns.
@@ -187,6 +187,19 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
          * @defaultValue []
          */
         this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+        /**
+         * Determines if the parent closable component should be closed automatically when
+         * an item is clicked.
+         *
+         * @defaultValue true
+         */
+        this.closeParentOnClick = input(true, ...(ngDevMode ? [{ debugName: "closeParentOnClick" }] : []));
+        /**
+         * Locks interaction for all items when any item is loading.
+         *
+         * @defaultValue false
+         */
+        this.lockOnLoading = input(false, ...(ngDevMode ? [{ debugName: "lockOnLoading" }] : []));
         /**
          * Emits an event when an item is clicked.
          * The event contains details about the clicked item.
@@ -201,6 +214,21 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
             });
         });
     }
+    isDisabled(item) {
+        if (item.disabled) {
+            return true;
+        }
+        if (item.loading) {
+            return true;
+        }
+        if (this.lockOnLoading() && this.hasAnyLoadingItem()) {
+            return true;
+        }
+        return false;
+    }
+    hasAnyLoadingItem() {
+        return this.items().some((item) => !!item.loading);
+    }
     /**
      * Initializes the content of the button item list.
      * Binds events and properties to content button items and marks for change detection.
@@ -245,7 +273,9 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
      * @ignore
      */
     _handleOnItemClick(e) {
-        this.parent?.close();
+        if (this.closeParentOnClick()) {
+            this.parent?.close();
+        }
         this._emitOnItemClickEvent(e, e.component);
     }
     /**
@@ -265,6 +295,12 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
             data: item.data,
         });
     }
+    /**
+     * Closes the parent closable component if available.
+     */
+    closeParent() {
+        this.parent?.close();
+    }
     /**
      * Generates the CSS classes for the button item list host element.
      * Includes classes for action list and vertical layout.
@@ -276,17 +312,19 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
         return `ax-action-list ax-action-list-vertical`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXButtonItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXButtonItemListComponent, isStandalone: true, selector: "ax-button-item-list", inputs: { items: { classPropertyName: "items", publicName: "items", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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: `
     @for (item of items(); track item.name) {
       <ax-button-item
         [text]="item.text"
         [name]="item.name"
-        [disabled]="item.disabled"
+        [disabled]="isDisabled(item)"
         [color]="item.color"
         [selected]="item.selected"
         (onClick)="_handleOnItemClick($event)"
       >
-        @if (item.icon) {
+        @if (item.loading) {
+          <ax-loading class="ax-button-item-loading"></ax-loading>
+        } @else if (item.icon) {
           <ax-prefix>
             <ax-icon [icon]="item.icon"></ax-icon>
           </ax-prefix>
@@ -297,7 +335,7 @@ class AXButtonItemListComponent extends MXInteractiveComponent {
       }
     }
     <ng-content></ng-content>
-  `, isInline: true, styles: ["ax-button-item-list.ax-action-list{padding-block:var(--ax-comp-button-item-list-padding-block, .25rem)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["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"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXButtonItemListComponent, decorators: [{
             type: Component,
@@ -306,12 +344,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
       <ax-button-item
         [text]="item.text"
         [name]="item.name"
-        [disabled]="item.disabled"
+        [disabled]="isDisabled(item)"
         [color]="item.color"
         [selected]="item.selected"
         (onClick)="_handleOnItemClick($event)"
       >
-        @if (item.icon) {
+        @if (item.loading) {
+          <ax-loading class="ax-button-item-loading"></ax-loading>
+        } @else if (item.icon) {
           <ax-prefix>
             <ax-icon [icon]="item.icon"></ax-icon>
           </ax-prefix>
@@ -322,11 +362,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
       }
     }
     <ng-content></ng-content>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXButtonItemComponent, AXDecoratorGenericComponent, AXDecoratorIconComponent], providers: [{ provide: AXComponent, useExisting: AXButtonItemListComponent }], styles: ["ax-button-item-list.ax-action-list{padding-block:var(--ax-comp-button-item-list-padding-block, .25rem)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXButtonItemComponent, AXDecoratorGenericComponent, AXDecoratorIconComponent, AXLoadingComponent], providers: [{ provide: AXComponent, useExisting: AXButtonItemListComponent }], styles: ["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"] }]
         }], ctorParameters: () => [], propDecorators: { _contentButtons: [{
                 type: ContentChildren,
                 args: [AXButtonItemComponent]
-            }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], onItemClick: [{
+            }], 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: [{
                 type: HostBinding,