@acorex/components 20.2.38 → 20.2.40

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';
@@ -86,7 +86,15 @@ declare abstract class AXBaseDataTable extends MXBaseComponent {
 
 declare abstract class AXDataTableColumnComponent {
     caption: string;
-    width: string | number;
+    /**
+     * Width of the column.
+     * - string: e.g., '180px', '20%'
+     * - number: e.g., 180 (treated as pixels)
+     * - 'auto': automatically fits to content after data load
+     *
+     * @defaultValue 'auto'
+     */
+    width: string | number | 'auto';
     fixed: 'start' | 'end' | undefined;
     allowSorting: boolean;
     allowResizing: boolean;
@@ -245,14 +253,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 +298,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 +320,7 @@ declare class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumn
      */
     protected _items: AXRowCommandItem[];
     items: AXRowCommandItem[] | ((rowData: unknown) => AXRowCommandItem[] | Promise<AXRowCommandItem[]>);
+    private dropdownLoadingEffect;
     /**
      *  @ignore
      */
@@ -306,12 +329,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 +388,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>;
 }
@@ -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,6 +1154,40 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
      *  @ignore
      */
     private calculateStickyColumnsPositions;
+    /**
+     * Auto-fits columns that have width='auto'.
+     * Called automatically after data load.
+     *
+     * @ignore
+     */
+    private autoFitColumnsWithAutoWidth;
+    /**
+     * 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>;
 }

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,