@acorex/components 21.0.0-next.5 → 21.0.0-next.50

package/fesm2022/acorex-components-data-table.mjs

@@ -1,8 +1,9 @@
-import { MXBaseComponent, convertArrayToDataSource, AXComponent, AXRippleDirective, AXListDataSource, AXPagedComponent, AXCommonModule } from '@acorex/cdk/common';
+import { MXBaseComponent, convertArrayToDataSource, AXComponent, AXRippleDirective, AXCommonModule } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, Input, Output, Injectable, inject, ElementRef, Renderer2, NgZone, ChangeDetectorRef, DOCUMENT, PLATFORM_ID, HostListener, Directive, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, computed, effect, ContentChildren, ContentChild, NgModule } from '@angular/core';
+import { EventEmitter, signal, Input, Output, Injectable, inject, ElementRef, Renderer2, NgZone, ChangeDetectorRef, DOCUMENT, PLATFORM_ID, HostListener, Directive, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, effect, computed, untracked, ContentChildren, ContentChild, NgModule } from '@angular/core';
 import { isEqual, cloneDeep } from 'lodash-es';
-import { isPlatformBrowser, AsyncPipe, NgTemplateOutlet, NgClass, CommonModule } from '@angular/common';
+import * as i1 from '@angular/common';
+import { isPlatformBrowser, CommonModule, NgTemplateOutlet, AsyncPipe, NgClass } from '@angular/common';
 import { Subject, debounceTime, buffer, filter } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
 import { AXFormatService, AXFormatPipe, AXFormatModule } from '@acorex/core/format';
@@ -11,18 +12,18 @@ import { AXButtonItemListComponent, AXButtonComponent, AXButtonModule } from '@a
 import { AXDecoratorIconComponent, AXDecoratorGenericComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXDropdownPanelComponent, AXDropdownModule } from '@acorex/components/dropdown';
 import { AXLoadingComponent, AXLoadingModule } from '@acorex/components/loading';
+import * as i2 from '@acorex/core/translation';
+import { AXTranslationModule, AXTranslatorPipe } from '@acorex/core/translation';
 import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
-import * as i2 from '@acorex/components/check-box';
+import * as i2$1 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
-import * as i1 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { AXDataPagerComponent, AXDataPagerNumericSelectorComponent, AXDataPagerPageSizesComponent, AXDataPagerPrevButtonsComponent, AXDataPagerInputSelectorComponent, AXDataPagerNextButtonsComponent, AXDataPagerInfoComponent, AXDataPagerModule } from '@acorex/components/data-pager';
 import { AXResultModule } from '@acorex/components/result';
 import { AXSkeletonComponent, AXSkeletonModule } from '@acorex/components/skeleton';
-import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
-import { CdkScrollable, CdkVirtualScrollableElement, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
-import sum from 'lodash-es/sum';
+import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling';
 
 class AXBaseDataTable extends MXBaseComponent {
     constructor() {
@@ -33,7 +34,7 @@ class AXBaseDataTable extends MXBaseComponent {
          *
          * @defaultValue `parentId`
          */
-        this.parentField = 'parentId';
+        this.parentField = undefined;
         this.selectedRowsChange = new EventEmitter();
         this._selectedRows = signal([], ...(ngDevMode ? [{ debugName: "_selectedRows" }] : []));
     }
@@ -61,12 +62,21 @@ class AXBaseDataTable extends MXBaseComponent {
      * @returns Promise<void> - Promise that resolves when expansion is complete.
      */
     async expandRow(row) {
-        if (row.data['__meta__.expanded'] || row.data.children != undefined) {
+        // Scenario 1: Row details template without nested children
+        if (this.rowDetailsTemplate && !this.parentField) {
+            this.dataSource.onItemExpanded.next({
+                expandedItem: row.data,
+                children: null,
+            });
+        }
+        // Scenario 2: Children already exist in the row data
+        else if (row.data['__meta__.expanded'] || row.data.children != undefined) {
             this.dataSource.onItemExpanded.next({
                 expandedItem: row.data,
                 children: row.data.children,
             });
         }
+        // Scenario 3: Fetch children from datasource using parentField
         else {
             const key = this.getDataSourceKey();
             const filter = {
@@ -119,15 +129,17 @@ class AXBaseDataTable extends MXBaseComponent {
         this.selectedRows = this.selectedRows.filter((c) => !removedRowIds.includes(typeof c === 'object' ? c[key] : c));
         //this.selectedRows = this.selectedRows.filter((c) => !rows.includes(c));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXBaseDataTable, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXBaseDataTable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXBaseDataTable, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXBaseDataTable }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXBaseDataTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXBaseDataTable, decorators: [{
             type: Injectable
         }], propDecorators: { dataSource: [{
                 type: Input
             }], parentField: [{
                 type: Input
+            }], rowDetailsTemplate: [{
+                type: Input
             }], selectedRowsChange: [{
                 type: Output
             }], selectedRows: [{
@@ -136,6 +148,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
 
 class AXDataTableColumnComponent {
     constructor() {
+        /**
+         * 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'
+         */
         this.width = 'auto';
         this.allowSorting = false;
         this.allowResizing = false;
@@ -145,10 +165,10 @@ class AXDataTableColumnComponent {
     get cssClass() {
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableColumnComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableColumnComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableColumnComponent, decorators: [{
             type: Injectable
         }], propDecorators: { caption: [{
                 type: Input
@@ -230,10 +250,10 @@ class AXDataTableColumnResizableDirective {
             this.cdr.reattach(); // Reattach the change detector
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableColumnResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: AXDataTableColumnResizableDirective, isStandalone: true, selector: "[ax-table-column-resizble]", inputs: { column: ["ax-table-column-resizble", "column"] }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableColumnResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: AXDataTableColumnResizableDirective, isStandalone: true, selector: "[ax-table-column-resizble]", inputs: { column: ["ax-table-column-resizble", "column"] }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableColumnResizableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableColumnResizableDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ax-table-column-resizble]' }]
         }], ctorParameters: () => [], propDecorators: { column: [{
@@ -319,8 +339,8 @@ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
         const value = rowData[dataField];
         return !this.format ? value : this.formatService.format(value, this.format, this.formatOptions);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXDataTableTextColumnComponent, isStandalone: true, selector: "ax-text-column", inputs: { width: "width", caption: "caption", allowSorting: "allowSorting", allowResizing: "allowResizing", fixed: "fixed", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", dataField: "dataField", expandHandler: "expandHandler", wrapText: "wrapText", cellTemplate: "cellTemplate", footerTemplate: "footerTemplate", headerTemplate: "headerTemplate", format: "format", formatOptions: "formatOptions" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXDataTableTextColumnComponent, isStandalone: true, selector: "ax-text-column", inputs: { width: "width", caption: "caption", allowSorting: "allowSorting", allowResizing: "allowResizing", fixed: "fixed", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", dataField: "dataField", expandHandler: "expandHandler", wrapText: "wrapText", cellTemplate: "cellTemplate", footerTemplate: "footerTemplate", headerTemplate: "headerTemplate", format: "format", formatOptions: "formatOptions" }, providers: [
             {
                 provide: AXDataTableColumnComponent,
                 useExisting: AXDataTableTextColumnComponent,
@@ -329,7 +349,7 @@ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
         ], viewQueries: [{ propertyName: "_contentCellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-template #header>{{ caption }}</ng-template>
     <ng-template #cell let-row>
-      <div class="ax-flex ax-items-center ax-gap-2">
+      <div class="flex items-center gap-2">
         @if (expandHandler) {
           <div
             (click)="handleExpandRow(row)"
@@ -338,7 +358,7 @@ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
             [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
           >
             @if (loadingRow() === row) {
-              <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+              <i class="fas fa-spinner-third animate-twSpin animate-infinite"></i>
             } @else {
               @if (row.data?.__meta__?.expanded) {
                 <i [class]="customCollapseIcon || 'fas fa-chevron-down'"></i>
@@ -360,14 +380,14 @@ __decorate([
     __metadata("design:paramtypes", [Object, String]),
     __metadata("design:returntype", String)
 ], AXDataTableTextColumnComponent.prototype, "getDisplayText", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableTextColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableTextColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-text-column',
                     template: `
     <ng-template #header>{{ caption }}</ng-template>
     <ng-template #cell let-row>
-      <div class="ax-flex ax-items-center ax-gap-2">
+      <div class="flex items-center gap-2">
         @if (expandHandler) {
           <div
             (click)="handleExpandRow(row)"
@@ -376,7 +396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
           >
             @if (loadingRow() === row) {
-              <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+              <i class="fas fa-spinner-third animate-twSpin animate-infinite"></i>
             } @else {
               @if (row.data?.__meta__?.expanded) {
                 <i [class]="customCollapseIcon || 'fas fa-chevron-down'"></i>
@@ -438,6 +458,9 @@ class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
         super(...arguments);
         this.grid = inject(AXBaseDataTable);
         this.cdr = inject(ChangeDetectorRef);
+        this.commandLoading = signal(null, ...(ngDevMode ? [{ debugName: "commandLoading" }] : []));
+        this.rowIdentityMap = new WeakMap();
+        this.rowIdentitySeq = 0;
         this.allowSorting = false;
         this.onItemClick = new EventEmitter();
     }
@@ -447,6 +470,25 @@ class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
     get cssClass() {
         return 'ax-command-column';
     }
+    resolveCommandId(rowData, commandName) {
+        if (rowData && typeof rowData === 'object') {
+            const record = rowData;
+            const keyValue = record[this.grid.getDataSourceKey()];
+            if (typeof keyValue === 'string' || typeof keyValue === 'number') {
+                return `${keyValue}:${commandName}`;
+            }
+            let fallbackKey = this.rowIdentityMap.get(record);
+            if (!fallbackKey) {
+                fallbackKey = `row-${++this.rowIdentitySeq}`;
+                this.rowIdentityMap.set(record, fallbackKey);
+            }
+            return `${fallbackKey}:${commandName}`;
+        }
+        return `unknown:${commandName}`;
+    }
+    setCommandLoadingState(commandId, loading) {
+        this.commandLoading.set(loading ? commandId : null);
+    }
 }
 /**
  * A column for displaying dropdown command buttons in a data table.
@@ -456,11 +498,17 @@ class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
 class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponent {
     constructor() {
         super(...arguments);
+        this.emptyStateText = 't("dataTable.rowCommandColumn.emptyStateText")';
+        this.itemsLoading = signal(false, ...(ngDevMode ? [{ debugName: "itemsLoading" }] : []));
+        this.itemsFetched = signal(false, ...(ngDevMode ? [{ debugName: "itemsFetched" }] : []));
         /**
          *  @ignore
          */
         this._items = [];
         this.items = [];
+        this.dropdownLoadingEffect = effect(() => {
+            this.applyLoadingState(this.commandLoading());
+        }, ...(ngDevMode ? [{ debugName: "dropdownLoadingEffect" }] : []));
     }
     /**
      * Returns the template used for rendering cell content.
@@ -493,43 +541,98 @@ class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponen
      *  @ignore
      */
     async handleOnOpened(rowData) {
-        if (Array.isArray(this.items)) {
-            this._items = this.items;
-        }
-        else
-            typeof this.items == 'function';
-        {
-            const result = this['items'](rowData);
-            if (Array.isArray(result)) {
-                this._items = result;
+        this.itemsLoading.set(true);
+        this.itemsFetched.set(false);
+        try {
+            let resolvedItems = [];
+            if (Array.isArray(this.items)) {
+                resolvedItems = this.items;
             }
-            else if (result instanceof Promise) {
-                this._items = await result;
+            else
+                typeof this.items == 'function';
+            {
+                const result = this['items'](rowData);
+                if (Array.isArray(result)) {
+                    resolvedItems = result;
+                }
+                else if (result instanceof Promise) {
+                    resolvedItems = await result;
+                }
             }
+            this._items = this.decorateItems(rowData, resolvedItems);
+            this.applyLoadingState(this.commandLoading());
+            this.itemsFetched.set(true);
+        }
+        finally {
+            this.itemsLoading.set(false);
+            this.cdr.detectChanges();
         }
-        this.cdr.detectChanges();
     }
     /**
      *  @ignore
      */
     handleOnClosed() {
         this._items = [];
+        this.itemsFetched.set(false);
+        this.itemsLoading.set(false);
+    }
+    decorateItems(rowData, items) {
+        return items.map((item) => ({
+            ...item,
+            commandId: this.resolveCommandId(rowData, item.name ?? 'command'),
+            loading: false,
+        }));
+    }
+    applyLoadingState(activeCommandId) {
+        if (!this._items.length) {
+            return;
+        }
+        let hasChanges = false;
+        const updatedItems = this._items.map((item) => {
+            const nextLoading = !!activeCommandId && item.commandId === activeCommandId;
+            if (item.loading !== nextLoading) {
+                hasChanges = true;
+                return { ...item, loading: nextLoading };
+            }
+            return item;
+        });
+        if (hasChanges) {
+            this._items = updatedItems;
+            this.cdr.markForCheck();
+        }
     }
     /**
      *  @ignore
      */
     handleOnItemClick(e, data) {
+        const commandName = e.name ?? 'command';
+        const commandId = this.resolveCommandId(data, commandName);
+        const itemList = e.component;
+        let pendingAutoClose = setTimeout(() => {
+            itemList?.closeParent();
+            pendingAutoClose = undefined;
+        });
         const args = {
             component: this.grid,
             isUserInteraction: true,
             nativeEvent: e,
             data,
-            name: e.name,
+            name: commandName,
+            setLoading: (loading) => {
+                if (pendingAutoClose) {
+                    clearTimeout(pendingAutoClose);
+                    pendingAutoClose = undefined;
+                }
+                this.setCommandLoadingState(commandId, loading);
+                if (!loading) {
+                    itemList?.closeParent();
+                }
+            },
         };
         this.onItemClick.emit(args);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRowDropdownCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXRowDropdownCommandColumnComponent, isStandalone: true, selector: "ax-dropdown-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowDropdownCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXRowDropdownCommandColumnComponent, isStandalone: true, selector: "ax-dropdown-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", emptyStateTemplate: "emptyStateTemplate", emptyStateText: "emptyStateText", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
             {
                 provide: AXDataTableColumnComponent,
                 useExisting: AXRowDropdownCommandColumnComponent,
@@ -547,13 +650,25 @@ class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponen
               (onOpened)="handleOnOpened(row.data)"
               (onClosed)="handleOnClosed()"
             >
-              @if (_items.length) {
-                <ax-button-item-list (onItemClick)="handleOnItemClick($event, row.data)" [items]="_items">
-                </ax-button-item-list>
-              } @else {
+              @if (itemsLoading()) {
                 <div panel style="padding: 0.875rem;">
                   <ax-loading></ax-loading>
                 </div>
+              } @else if (!_items.length && itemsFetched()) {
+                <div panel style="padding: 0.875rem;">
+                  @if (emptyStateTemplate) {
+                    <ng-container [ngTemplateOutlet]="emptyStateTemplate"></ng-container>
+                  } @else {
+                    <span class="ax-dropdown-command-empty-state-text">{{ emptyStateText | translate | async }}</span>
+                  }
+                </div>
+              } @else if (_items.length) {
+                <ax-button-item-list
+                  (onItemClick)="handleOnItemClick($event, row.data)"
+                  [items]="_items"
+                  [closeParentOnClick]="false"
+                  [lockOnLoading]="true"
+                ></ax-button-item-list>
               }
             </ax-dropdown-panel>
           </button>
@@ -566,9 +681,9 @@ class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponen
       </ng-template>
     </ng-template>
     <ng-template #footer></ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRowDropdownCommandColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowDropdownCommandColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-dropdown-command-column',
@@ -584,13 +699,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
               (onOpened)="handleOnOpened(row.data)"
               (onClosed)="handleOnClosed()"
             >
-              @if (_items.length) {
-                <ax-button-item-list (onItemClick)="handleOnItemClick($event, row.data)" [items]="_items">
-                </ax-button-item-list>
-              } @else {
+              @if (itemsLoading()) {
                 <div panel style="padding: 0.875rem;">
                   <ax-loading></ax-loading>
                 </div>
+              } @else if (!_items.length && itemsFetched()) {
+                <div panel style="padding: 0.875rem;">
+                  @if (emptyStateTemplate) {
+                    <ng-container [ngTemplateOutlet]="emptyStateTemplate"></ng-container>
+                  } @else {
+                    <span class="ax-dropdown-command-empty-state-text">{{ emptyStateText | translate | async }}</span>
+                  }
+                </div>
+              } @else if (_items.length) {
+                <ax-button-item-list
+                  (onItemClick)="handleOnItemClick($event, row.data)"
+                  [items]="_items"
+                  [closeParentOnClick]="false"
+                  [lockOnLoading]="true"
+                ></ax-button-item-list>
               }
             </ax-dropdown-panel>
           </button>
@@ -616,11 +743,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                     inputs: ['width', 'caption', 'fixed'],
                     outputs: ['onItemClick'],
                     imports: [
+                        CommonModule,
                         AXRippleDirective,
                         AXDecoratorIconComponent,
                         AXDropdownPanelComponent,
                         AXButtonItemListComponent,
                         AXLoadingComponent,
+                        NgTemplateOutlet,
+                        AXTranslationModule,
                     ],
                 }]
         }], propDecorators: { _cellTemplate: [{
@@ -631,6 +761,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 args: ['header']
             }], footerTemplate: [{
                 type: Input
+            }], emptyStateTemplate: [{
+                type: Input
+            }], emptyStateText: [{
+                type: Input
             }], _contentFooterTemplate: [{
                 type: ViewChild,
                 args: ['footer']
@@ -692,21 +826,35 @@ class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
         }
         return [];
     }
+    getItemsWithIds(rowData) {
+        return this.getItems(rowData).map((item) => ({
+            item,
+            commandId: this.getCommandId(rowData, item),
+        }));
+    }
     /**
      *  @ignore
      */
+    getCommandId(rowData, item) {
+        const commandName = item.name ?? 'command';
+        return this.resolveCommandId(rowData, commandName);
+    }
     handleOnItemClick(e, item, data) {
+        const commandId = this.getCommandId(data, item);
         const args = {
             component: this.grid,
             isUserInteraction: true,
-            nativeEvent: e,
+            nativeEvent: e.nativeEvent,
             data,
-            name: item.name,
+            name: item.name ?? 'command',
+            setLoading: (loading) => {
+                this.setCommandLoadingState(commandId, loading);
+            },
         };
         this.onItemClick.emit(args);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRowCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXRowCommandColumnComponent, isStandalone: true, selector: "ax-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXRowCommandColumnComponent, isStandalone: true, selector: "ax-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
             {
                 provide: AXDataTableColumnComponent,
                 useExisting: AXRowCommandColumnComponent,
@@ -714,38 +862,52 @@ class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
         ], viewQueries: [{ propertyName: "_cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-template #header></ng-template>
     <ng-template #cell let-row>
       @if (row.data) {
-        @for (item of getItems(row.data); track $index) {
-          <button
-            [style.color]="'rgba(var(--ax-sys-color-' + (item.color ?? 'primary)') + '-500))'"
-            [disabled]="item.disabled"
-            [class.ax-state-disabled]="item.disabled"
-            [axRipple]="!item.disabled"
-            (click)="handleOnItemClick($event, item, row.data)"
+        @for (command of getItemsWithIds(row.data); track command.commandId) {
+          <ax-button
+            [iconOnly]="command.item.iconOnly ?? true"
+            [text]="command.item.text"
+            [attr.title]="command.item.text"
+            [style.color]="'rgba(var(--ax-sys-color-' + (command.item.color ?? 'primary)') + '-500))'"
+            [disabled]="command.item.disabled || commandLoading()"
+            [class.ax-state-disabled]="command.item.disabled"
+            [axRipple]="!command.item.disabled"
+            [look]="command.item.look ?? 'blank'"
+            (onClick)="handleOnItemClick($event, command.item, row.data)"
           >
-            <ax-icon [icon]="item.icon"></ax-icon>
-          </button>
+            <ax-icon [icon]="command.item.icon"></ax-icon>
+            @if (commandLoading() === command.commandId) {
+              <ax-loading></ax-loading>
+            }
+          </ax-button>
         }
       }
     </ng-template>
-    <ng-template #footer></ng-template> `, isInline: true, dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    <ng-template #footer></ng-template> `, isInline: true, dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { 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.3", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-command-column',
                     template: `<ng-template #header></ng-template>
     <ng-template #cell let-row>
       @if (row.data) {
-        @for (item of getItems(row.data); track $index) {
-          <button
-            [style.color]="'rgba(var(--ax-sys-color-' + (item.color ?? 'primary)') + '-500))'"
-            [disabled]="item.disabled"
-            [class.ax-state-disabled]="item.disabled"
-            [axRipple]="!item.disabled"
-            (click)="handleOnItemClick($event, item, row.data)"
+        @for (command of getItemsWithIds(row.data); track command.commandId) {
+          <ax-button
+            [iconOnly]="command.item.iconOnly ?? true"
+            [text]="command.item.text"
+            [attr.title]="command.item.text"
+            [style.color]="'rgba(var(--ax-sys-color-' + (command.item.color ?? 'primary)') + '-500))'"
+            [disabled]="command.item.disabled || commandLoading()"
+            [class.ax-state-disabled]="command.item.disabled"
+            [axRipple]="!command.item.disabled"
+            [look]="command.item.look ?? 'blank'"
+            (onClick)="handleOnItemClick($event, command.item, row.data)"
           >
-            <ax-icon [icon]="item.icon"></ax-icon>
-          </button>
+            <ax-icon [icon]="command.item.icon"></ax-icon>
+            @if (commandLoading() === command.commandId) {
+              <ax-loading></ax-loading>
+            }
+          </ax-button>
         }
       }
     </ng-template>
@@ -760,7 +922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                     ],
                     inputs: ['width', 'caption', 'fixed'],
                     outputs: ['onItemClick'],
-                    imports: [AXRippleDirective, AXDecoratorIconComponent],
+                    imports: [AXRippleDirective, AXDecoratorIconComponent, AXButtonComponent, AXLoadingComponent],
                 }]
         }], propDecorators: { _cellTemplate: [{
                 type: ViewChild,
@@ -826,8 +988,8 @@ class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
     get loadingEnabled() {
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRowExpandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXRowExpandColumnComponent, isStandalone: true, selector: "ax-expand-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowExpandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXRowExpandColumnComponent, isStandalone: true, selector: "ax-expand-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [
             {
                 provide: AXDataTableColumnComponent,
                 useExisting: AXRowExpandColumnComponent,
@@ -842,7 +1004,7 @@ class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
         [style.padding-inline-start.rem]="row.data?.__meta__?.level * 1.5"
       >
         @if (loadingRow() === row) {
-          <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+          <i class="fas fa-spinner-third animate-twSpin animate-infinite"></i>
         } @else {
           @if (row.data?.__meta__?.expanded) {
             <i class="fas fa-chevron-down"></i>
@@ -855,7 +1017,7 @@ class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
     <ng-template #footer></ng-template>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRowExpandColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowExpandColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-expand-column',
@@ -868,7 +1030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         [style.padding-inline-start.rem]="row.data?.__meta__?.level * 1.5"
       >
         @if (loadingRow() === row) {
-          <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+          <i class="fas fa-spinner-third animate-twSpin animate-infinite"></i>
         } @else {
           @if (row.data?.__meta__?.expanded) {
             <i class="fas fa-chevron-down"></i>
@@ -975,8 +1137,8 @@ class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
     get cssClass() {
         return 'ax-index-column';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXRowIndexColumnComponent, isStandalone: true, selector: "ax-index-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", padZero: "padZero" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXRowIndexColumnComponent, isStandalone: true, selector: "ax-index-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", padZero: "padZero" }, providers: [
             AXUnsubscriber,
             {
                 provide: AXDataTableColumnComponent,
@@ -989,7 +1151,7 @@ class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
     </ng-template>
     <ng-template #footer></ng-template> `, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-index-column',
@@ -1131,8 +1293,8 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
     get cssClass() {
         return 'ax-select-column';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRowSelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXRowSelectColumnComponent, isStandalone: true, selector: "ax-select-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowSelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXRowSelectColumnComponent, isStandalone: true, selector: "ax-select-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [
             {
                 provide: AXDataTableColumnComponent,
                 useExisting: AXRowSelectColumnComponent,
@@ -1160,9 +1322,9 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
       ></ax-check-box>
       <!-- <input class="ax-checkbox" type="checkbox" [disabled]="!row.data" (change)="handleChange(row.data)" [checked]="isSelected(row.data)" /> -->
     </ng-template>
-    <ng-template #footer></ng-template> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    <ng-template #footer></ng-template> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRowSelectColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowSelectColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-select-column',
@@ -1386,7 +1548,7 @@ class AXDataTableComponent extends AXBaseDataTable {
         /**
          *  @ignore
          */
-        this.hasLoadedData = false;
+        this.isRefreshCalled = signal(false, ...(ngDevMode ? [{ debugName: "isRefreshCalled" }] : []));
         /**
          *  @ignore
          */
@@ -1414,7 +1576,7 @@ class AXDataTableComponent extends AXBaseDataTable {
                 this.document.removeEventListener('mousemove', this.onResizeColumnMove);
                 this.document.removeEventListener('mouseup', this.onResizeColumnEnd);
             }
-            const newWidth = parseInt(this.resizeColumnProp.thElement.attributes.getNamedItem('new-width').value);
+            const newWidth = parseInt(this.resizeColumnProp.thElement.attributes.getNamedItem('new-width')?.value);
             this.columns.get(this.resizeColumnProp.columnIndex).width = `${Math.max(100, newWidth)}px`;
             this.onColumnSizeChanged.emit({
                 type: 'end',
@@ -1448,7 +1610,7 @@ class AXDataTableComponent extends AXBaseDataTable {
      * Returns true if in manual mode and no data has been loaded yet.
      */
     get showNoDataLoadedYet() {
-        return this.fetchDataMode === 'manual' && !this.hasLoadedData;
+        return this.fetchDataMode === 'manual' && !this.isRefreshCalled();
     }
     /**
      *  @ignore
@@ -1472,13 +1634,16 @@ class AXDataTableComponent extends AXBaseDataTable {
             this.displayedRows.set(data.items.filter((item) => !item[this.parentField]));
             this.totalRows = data.totalCount;
             this.hasItems = data.totalCount > 0;
-            if (this.fetchDataMode === 'manual' && !this.hasLoadedData) {
-                this.hasLoadedData = true;
-            }
         });
         this.dataSource.onItemExpanded.pipe(this._unsubscriber.takeUntilDestroy).subscribe((data) => {
             const { expandedItem, children } = data;
-            this.displayedRows.update((prev) => this.toggleExpanded(prev, expandedItem, children));
+            // If children is null, it means we only want to toggle row details without managing children
+            if (children === null) {
+                this.displayedRows.update((prev) => this.toggleExpandedState(prev, expandedItem));
+            }
+            else {
+                this.displayedRows.update((prev) => this.toggleExpanded(prev, expandedItem, children));
+            }
         });
         this.dataSource.onItemRefreshChildren.pipe(this._unsubscriber.takeUntilDestroy).subscribe((data) => {
             const { id } = data;
@@ -1501,11 +1666,40 @@ class AXDataTableComponent extends AXBaseDataTable {
         this.columns.changes.pipe(this._unsubscriber.takeUntilDestroy).subscribe((cols) => {
             this.columnsList.set(cols.toArray());
         });
+        // Auto-fit columns with width='auto' after data load
+        this.dataSource.onChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe((data) => {
+            if (data.items.length > 0) {
+                // Delay to ensure DOM is ready
+                setTimeout(() => {
+                    this.autoFitColumnsWithAutoWidth();
+                }, 100);
+            }
+        });
     }
     /**
      *  @ignore
      */
     #effect;
+    /**
+     * Toggles the expanded state of a row without managing children.
+     * Used for row details template without nested hierarchy.
+     *
+     * @param rows - The array of rows to search in
+     * @param expandedItem - The item to toggle
+     * @returns Updated rows array with toggled state
+     */
+    toggleExpandedState(rows, expandedItem) {
+        return rows.map((item) => {
+            if (expandedItem[this.getDataSourceKey()] === item[this.getDataSourceKey()]) {
+                const isExpanded = !item?.__meta__?.expanded;
+                return {
+                    ...item,
+                    __meta__: { expanded: isExpanded, level: expandedItem?.__meta__?.level ?? 0 },
+                };
+            }
+            return item;
+        });
+    }
     toggleExpanded(rows, expandedItem, children) {
         return rows.map((item) => {
             children.forEach((c) => {
@@ -1661,6 +1855,10 @@ class AXDataTableComponent extends AXBaseDataTable {
      */
     refresh(options = { reset: true }) {
         this.dataSource.refresh(options);
+        const isRefreshCalled = untracked(() => this.isRefreshCalled());
+        if (this.fetchDataMode === 'manual' && !isRefreshCalled) {
+            this.isRefreshCalled.set(true);
+        }
         if (this.dataPager && options.reset) {
             this.dataPager.goFirstPage();
         }
@@ -1671,6 +1869,18 @@ class AXDataTableComponent extends AXBaseDataTable {
     calculateRowIndex(index) {
         return this.dataSource.pageSize * this.page() + index;
     }
+    /**
+     * 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
+     */
+    onResizeHandlerDoubleClick(event, columnIndex) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.autoFitColumn(columnIndex);
+    }
     /**
      *  @ignore
      */
@@ -1709,14 +1919,7 @@ class AXDataTableComponent extends AXBaseDataTable {
      *  @ignore
      */
     calculateStickyColumnsPositions() {
-        let totalWidth = 0;
         let accumulatedWidthFromStart = 0;
-        this.columns.forEach((column) => {
-            const width = parseInt(column.width);
-            if (!isNaN(width)) {
-                totalWidth += width;
-            }
-        });
         let lastStartColumn;
         this.columns.forEach((column) => {
             const width = parseInt(column.width);
@@ -1746,16 +1949,206 @@ class AXDataTableComponent extends AXBaseDataTable {
         if (firstEndColumn)
             firstEndColumn['isFirstFixedColumn'] = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXDataTableComponent, isStandalone: true, selector: "ax-data-table", inputs: { dataSource: "dataSource", selectedRows: "selectedRows", parentField: "parentField", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", noDataTemplate: "noDataTemplate", alternative: "alternative", showHeader: "showHeader", fixedHeader: "fixedHeader", showFooter: "showFooter", fixedFooter: "fixedFooter", itemHeight: "itemHeight", allowReordering: "allowReordering", paging: "paging", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { selectedRowsChange: "selectedRowsChange", focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", onColumnsOrderChanged: "onColumnsOrderChanged", onColumnSizeChanged: "onColumnSizeChanged", onPageChanged: "onPageChanged" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
+    /**
+     * Auto-fits columns that have width='auto'.
+     * Called automatically after data load.
+     *
+     * @ignore
+     */
+    autoFitColumnsWithAutoWidth() {
+        const autoWidthColumns = [];
+        this.columns.forEach((column, index) => {
+            // Only auto-fit if width is explicitly set to 'auto'
+            if (column.width === 'auto') {
+                autoWidthColumns.push(index);
+                try {
+                    this.autoFitColumn(index, { maxWidth: 500 });
+                }
+                catch (error) {
+                    console.error(`Failed to auto-fit column ${index}:`, error);
+                }
+            }
+        });
+        if (autoWidthColumns.length > 0) {
+            console.log(`Auto-fitted ${autoWidthColumns.length} column(s) with width='auto': indices ${autoWidthColumns.join(', ')}`);
+        }
+    }
+    /**
+     * 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 = {}) {
+        const { skipFixed = true, skipLoading = true, maxWidth = 500 } = options;
+        // Skip if loading
+        if (skipLoading && this.isLoading()) {
+            console.warn('Cannot auto-fit columns while data is loading');
+            return;
+        }
+        // Auto-fit each column
+        this.columns.forEach((column, index) => {
+            // Skip fixed columns if requested
+            if (skipFixed && column.fixed) {
+                return;
+            }
+            // Skip if column doesn't allow resizing
+            if (!column.allowResizing) {
+                return;
+            }
+            try {
+                this.autoFitColumn(index, { maxWidth });
+            }
+            catch (error) {
+                console.error(`Failed to auto-fit column ${index}:`, error);
+            }
+        });
+    }
+    /**
+     * 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, options = {}) {
+        if (!isPlatformBrowser(this.platformID)) {
+            return;
+        }
+        const column = this.columns.get(columnIndex);
+        if (!column) {
+            console.warn(`Column at index ${columnIndex} not found`);
+            return;
+        }
+        const hostElement = this.getHostElement();
+        if (!hostElement) {
+            return;
+        }
+        const mainTable = hostElement.querySelector('table');
+        if (!mainTable) {
+            return;
+        }
+        // Find actual column index in rendered table (accounting for fixed columns)
+        const allColumns = [...this.startFixedColumnsList(), ...this.normalColumnsList(), ...this.endFixedColumnsList()];
+        const actualColumnIndex = allColumns.findIndex((c) => c === column);
+        if (actualColumnIndex === -1) {
+            console.warn('Column not found in rendered table');
+            return;
+        }
+        // Create invisible helper table
+        const helperTable = this.document.createElement('table');
+        helperTable.style.position = 'absolute';
+        helperTable.style.visibility = 'hidden';
+        helperTable.style.tableLayout = 'auto';
+        helperTable.style.width = 'auto';
+        helperTable.style.top = '-9999px';
+        helperTable.style.left = '-9999px';
+        // Copy styles from main table
+        const mainTableStyle = this.document.defaultView?.getComputedStyle(mainTable);
+        if (mainTableStyle) {
+            helperTable.style.fontSize = mainTableStyle.fontSize;
+            helperTable.style.fontFamily = mainTableStyle.fontFamily;
+            helperTable.style.fontWeight = mainTableStyle.fontWeight;
+        }
+        this.document.body.appendChild(helperTable);
+        let maxWidth = 0;
+        try {
+            // Measure header cell
+            const headerRow = mainTable.querySelector('thead tr');
+            if (headerRow) {
+                const headerCells = headerRow.querySelectorAll('th');
+                if (headerCells.length > actualColumnIndex) {
+                    const headerCell = headerCells[actualColumnIndex];
+                    // Clone header cell to helper table
+                    const helperThead = this.document.createElement('thead');
+                    const helperTr = this.document.createElement('tr');
+                    const helperTh = headerCell.cloneNode(true);
+                    helperTh.style.width = 'auto';
+                    helperTh.style.whiteSpace = 'nowrap';
+                    helperTr.appendChild(helperTh);
+                    helperThead.appendChild(helperTr);
+                    helperTable.appendChild(helperThead);
+                    // Force layout calculation
+                    const headerWidth = helperTh.offsetWidth;
+                    maxWidth = Math.max(maxWidth, headerWidth);
+                    helperTable.removeChild(helperThead);
+                }
+            }
+            // Measure body cells
+            const bodyRows = mainTable.querySelectorAll('tbody tr:not(.empty-row)');
+            const helperTbody = this.document.createElement('tbody');
+            helperTable.appendChild(helperTbody);
+            // Sample first 20 rows for performance (you can adjust this)
+            const sampleSize = Math.min(20, bodyRows.length);
+            for (let i = 0; i < sampleSize; i++) {
+                const row = bodyRows[i];
+                const cells = row.querySelectorAll('td');
+                if (cells.length > actualColumnIndex) {
+                    const cell = cells[actualColumnIndex];
+                    // Clone cell to helper table
+                    const helperTr = this.document.createElement('tr');
+                    const helperTd = cell.cloneNode(true);
+                    helperTd.style.width = 'auto';
+                    helperTd.style.whiteSpace = 'nowrap';
+                    helperTr.appendChild(helperTd);
+                    helperTbody.appendChild(helperTr);
+                    // Force layout calculation
+                    const cellWidth = helperTd.offsetWidth;
+                    maxWidth = Math.max(maxWidth, cellWidth);
+                    helperTbody.removeChild(helperTr);
+                }
+            }
+            // Add some padding for better UX
+            let finalWidth = Math.max(maxWidth + 40, 100); // Minimum 100px, add 40px padding
+            // Apply max width if specified
+            if (options.maxWidth) {
+                finalWidth = Math.min(finalWidth, options.maxWidth);
+            }
+            // Set column width
+            column.width = `${finalWidth}px`;
+            // Trigger change detection to update the view
+            this.columnsList.set([...this.columnsList()]);
+            // Recalculate sticky positions if column is fixed
+            if (column.fixed) {
+                setTimeout(() => {
+                    this.calculateStickyColumnsPositions();
+                }, 0);
+            }
+            // Emit column size changed event
+            this.onColumnSizeChanged.emit({
+                type: 'end',
+                data: {
+                    columnIndex: columnIndex,
+                    width: column.width,
+                    dataField: column.name,
+                },
+                isUserInteraction: true,
+                component: this,
+            });
+        }
+        finally {
+            // Clean up helper table
+            if (helperTable.parentNode) {
+                this.document.body.removeChild(helperTable);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXDataTableComponent, isStandalone: true, selector: "ax-data-table", inputs: { dataSource: "dataSource", selectedRows: "selectedRows", parentField: "parentField", rowDetailsTemplate: "rowDetailsTemplate", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", noDataTemplate: "noDataTemplate", alternative: "alternative", showHeader: "showHeader", fixedHeader: "fixedHeader", showFooter: "showFooter", fixedFooter: "fixedFooter", itemHeight: "itemHeight", allowReordering: "allowReordering", paging: "paging", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { selectedRowsChange: "selectedRowsChange", focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", onColumnsOrderChanged: "onColumnsOrderChanged", onColumnSizeChanged: "onColumnSizeChanged", onPageChanged: "onPageChanged" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
             { provide: AXBaseDataTable, useExisting: AXDataTableComponent },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXDataTableComponent },
-        ], queries: [{ propertyName: "customDataPager", first: true, predicate: AXDataPagerComponent, descendants: true, static: true }, { propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "dataPager", first: true, predicate: ["dataPager"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n<div class=\"ax-data-table-wrapper\">\n  <table>\n    @if (showHeader) {\n      <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n        <tr\n          [cdkDropListDisabled]=\"!allowReordering\"\n          cdkDropList\n          cdkScrollable\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @for (c of startFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-start\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <th\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </th>\n          }\n          <th></th>\n          @for (c of endFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n    <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n      @if (showNoDataLoadedYet) {\n        <tr style=\"display: inherit\">\n          <td class=\"ax-data-table-empty-data\" [attr.colspan]=\"columnsList().length + 1\">\n            @if (noDataTemplate) {\n              <ng-container [ngTemplateOutlet]=\"noDataTemplate\"></ng-container>\n            } @else {\n              <span>{{ '@acorex:common.general.no-data-yet' | translate | async }}</span>\n            }\n          </td>\n        </tr>\n      } @else if (!displayedRows().length) {\n        <tr style=\"display: inherit\">\n          <td class=\"ax-data-table-empty-data\" [attr.colspan]=\"columnsList().length + 1\">\n            @if (emptyTemplate) {\n              <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\n            } @else {\n              <span>{{ '@acorex:common.general.no-record' | translate | async }}</span>\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n          <ng-container\n            [ngTemplateOutlet]=\"rowTemp\"\n            [ngTemplateOutletContext]=\"{ data: { row, rowIndex } }\"\n          ></ng-container>\n        }\n\n        <ng-template #rowTemp let-data=\"data\">\n          @if (rowTemplate) {\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: { data: data.row, rowIndex: data.rowIndex } }\"\n            >\n            </ng-container>\n          } @else {\n            <tr\n              [class.ax-state-focused]=\"focusedRow && data.row === focusedRow\"\n              [attr.data-index]=\"data.rowIndex\"\n              [class.ax-state-selected]=\"selectedRows.includes(data.row)\"\n              style.height=\"{{ itemHeight }}px\"\n              style.max-height=\"{{ itemHeight }}px\"\n              (click)=\"handleRowClick($event, data.row)\"\n            >\n              @for (c of startFixedColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [class.sticky-start]=\"true\"\n                  [class.isLast]=\"c['isLastFixedColumn']\"\n                  [style.--sticky-start]=\"c['stickyStart']\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n              @for (c of normalColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n              <td><div class=\"ax-bg\"></div></td>\n              @for (c of endFixedColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [class.sticky-end]=\"true\"\n                  [class.isFirst]=\"c['isFirstFixedColumn']\"\n                  [style.--sticky-end]=\"c['stickyEnd']\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n            </tr>\n            @if (data.row?.__meta__?.expanded) {\n              @for (childRow of data.row.children; let childRowIndex = $index; track childRowIndex) {\n                <ng-container\n                  [ngTemplateOutlet]=\"rowTemp\"\n                  [ngTemplateOutletContext]=\"{ data: { row: childRow, rowIndex: childRowIndex } }\"\n                ></ng-container>\n              }\n            }\n          }\n        </ng-template>\n\n        <tr class=\"empty-row\"></tr>\n      }\n    </tbody>\n    @if (showFooter) {\n      <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n        <tr>\n          @for (c of startFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-start\"\n              [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <td\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </td>\n          }\n          <td></td>\n          @for (c of endFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (paging) {\n  <div class=\"ax-table-footer\" #footerContainer>\n    <ng-template #customPager>\n      <ng-content select=\"ax-data-pager\"></ng-content>\n    </ng-template>\n\n    @if (customDataPager) {\n      <ng-container [ngTemplateOutlet]=\"customPager\"></ng-container>\n    } @else {\n      <ax-data-pager\n        #dataPager\n        [displayMode]=\"'custom'\"\n        (onChanged)=\"handleChangePage($event)\"\n        [total]=\"dataSource.totalCount\"\n        [size]=\"dataSource.pageSize\"\n        [isLoading]=\"isLoading()\"\n      >\n        <ax-prefix class=\"ax-data-table-numeric-paging\">\n          <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n          <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n        </ax-prefix>\n        <ax-prefix class=\"ax-data-table-input-paging\">\n          <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n          <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n          <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n        </ax-prefix>\n        <ax-suffix class=\"ax-data-table-info\">\n          <ax-data-pager-info> </ax-data-pager-info>\n          <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh({ reset: false })\">\n            <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n          </ax-button>\n        </ax-suffix>\n      </ax-data-pager>\n    }\n  </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\n", styles: ["ax-data-table{--ax-comp-data-table-font-size: .875rem;--ax-comp-data-table-line-height: 1rem;--ax-comp-data-table-border-color: var(--ax-sys-color-border-surface);--ax-comp-data-table-border-radius: var(--ax-sys-border-radius);--ax-comp-data-table-column-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-data-table-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-header-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-data-table-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-footer-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-data-table-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-data-table-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-data-table-focus-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-data-table-selected-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-selected-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-index-bg-color: var(--ax-sys-color-light-surface);--ax-comp-data-table-index-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-alternative-bg-color: var(--ax-sys-color-light-surface);--ax-comp-data-table-alternative-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-skeleton-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-data-table-handler-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-interactive-bg-color: var(--ax-sys-color-light-surface)}.ax-dark ax-data-table{--ax-comp-data-table-column-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-data-table-header-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-data-table-header-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-data-table-footer-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-data-table-footer-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-data-table-hover-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-focus-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-selected-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-data-table-selected-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-index-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-data-table-index-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-data-table-skeleton-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-alternative-bg-color: var(--ax-sys-color-surface);--ax-comp-data-table-alternative-text-color: var(--ax-sys-color-on-surface);--ax-comp-data-table-handler-bg-color: var(--ax-sys-color-primary-dark-surface)}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table{display:flex;flex-direction:column;height:100%;width:100%;font-size:var(--ax-comp-data-table-font-size);line-height:var(--ax-comp-data-table-line-height);border-radius:var(--ax-comp-data-table-border-radius);border-width:1px;border-color:rgba(var(--ax-comp-data-table-border-color));position:relative;min-height:inherit;overflow:hidden}ax-data-table td.ax-data-table-empty-data{background:transparent!important;position:absolute!important;padding:2rem 1rem;text-align:center;vertical-align:middle;height:8rem;border-bottom:none;top:50%;transform:translateY(-50%);width:100%}ax-data-table td.ax-data-table-empty-data span{color:rgb(var(--ax-sys-color-ghost-500));font-size:var(--ax-comp-data-table-font-size);display:flex;height:100%;align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper{overflow:auto;width:100%;flex:1;border-radius:var(--ax-comp-data-table-border-radius)}ax-data-table .ax-data-table-wrapper table{display:table;height:100%;width:100%;table-layout:fixed;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{overflow:hidden;border-start-end-radius:var(--ax-comp-data-table-border-radius);border-start-start-radius:var(--ax-comp-data-table-border-radius)}ax-data-table .ax-data-table-wrapper table thead th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-header-bg-color));color:rgba(var(--ax-comp-data-table-header-text-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-comp-data-table-interactive-bg-color))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-comp-data-table-handler-bg-color))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{position:sticky;top:0;border-top:none;border-bottom:none;z-index:3;box-shadow:inset 1px 1px 0 2px rgba(var(--ax-comp-data-table-border-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{position:sticky;z-index:2;background-color:rgba(var(--ax-comp-data-table-column-bg-color));border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table .ax-data-table-wrapper table tbody tr td{z-index:0}ax-data-table .ax-data-table-wrapper table tbody tr td .ax-bg{top:0;left:0;z-index:-1;width:100%;height:100%;position:absolute;border-inline-end:1px solid rgba(var(--ax-comp-data-table-border-color));background-color:transparent;opacity:.3}ax-data-table .ax-data-table-wrapper table tbody .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-comp-data-table-alternative-bg-color));color:rgba(var(--ax-comp-data-table-alternative-text-color))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-height:2.5rem}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-hover-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-hover-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-focus-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-focus-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-selected-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-selected-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-selected-hover-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-selected-hover-text-color))}ax-data-table .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-column-bg-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.5rem;padding-bottom:.5rem;vertical-align:middle}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler{padding-inline-start:.25rem;padding-inline-end:.25rem;cursor:pointer}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler.has-parent{padding-inline-start:1.5rem!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-comp-data-table-index-bg-color));color:rgba(var(--ax-comp-data-table-index-text-color));text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column{text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-comp-data-table-border-radius);border-style:none;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:transparent;padding:.25rem;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem;background-color:rgba(var(--ax-comp-data-table-skeleton-bg-color))}ax-data-table .ax-data-table-wrapper table tfoot tr td{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-footer-bg-color));color:rgba(var(--ax-comp-data-table-footer-text-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-comp-data-table-interactive-bg-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom:-1px;border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-comp-data-table-border-color)),0 -1px rgba(var(--ax-comp-data-table-border-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}}ax-data-table ax-data-pager{justify-content:center}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-comp-data-table-border-color));padding-inline-start:.875rem;padding-inline-end:.875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}ax-data-table .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{justify-content:space-between}}.cdk-drag-preview{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-sys-color-primary-900),.2),0 8px 10px 1px rgba(var(--ax-sys-color-primary-900),.14),0 3px 14px 2px rgba(var(--ax-sys-color-primary-900),.12);border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-surface-fore));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "isLoading", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { 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: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "customDataPager", first: true, predicate: AXDataPagerComponent, descendants: true, static: true }, { propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "dataPager", first: true, predicate: ["dataPager"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n<div class=\"ax-data-table-wrapper\">\n  <table>\n    @if (showHeader) {\n      <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n        <tr\n          [cdkDropListDisabled]=\"!allowReordering\"\n          cdkDropList\n          cdkScrollable\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @for (c of startFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-start\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.ax-state-is-last]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <th\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                  (dblclick)=\"onResizeHandlerDoubleClick($event, this.startFixedColumnsList().length + $index)\"\n                  title=\"Double-click to auto-fit column width\"\n                ></div>\n              }\n            </th>\n          }\n          <th></th>\n          @for (c of endFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.ax-state-is-first]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n    <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n      @if (showNoDataLoadedYet) {\n        <tr style=\"display: inherit\">\n          <td class=\"ax-data-table-empty-data\" [attr.colspan]=\"columnsList().length + 1\">\n            @if (noDataTemplate) {\n              <ng-container [ngTemplateOutlet]=\"noDataTemplate\"></ng-container>\n            } @else {\n              <span>{{ '@acorex:common.general.no-data-yet' | translate | async }}</span>\n            }\n          </td>\n        </tr>\n      } @else if (!displayedRows().length) {\n        <tr style=\"display: inherit\">\n          <td class=\"ax-data-table-empty-data\" [attr.colspan]=\"columnsList().length + 1\">\n            @if (emptyTemplate) {\n              <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\n            } @else {\n              <span>{{ '@acorex:common.general.no-record' | translate | async }}</span>\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n          <ng-container\n            [ngTemplateOutlet]=\"rowTemp\"\n            [ngTemplateOutletContext]=\"{ data: { row, rowIndex } }\"\n          ></ng-container>\n        }\n\n        <ng-template #rowTemp let-data=\"data\">\n          @if (rowTemplate) {\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: { data: data.row, rowIndex: data.rowIndex } }\"\n            >\n            </ng-container>\n          } @else {\n            <tr\n              [class.ax-state-focused]=\"focusedRow && data.row === focusedRow\"\n              [attr.data-index]=\"data.rowIndex\"\n              [class.ax-state-selected]=\"selectedRows.includes(data.row)\"\n              style.height=\"{{ itemHeight }}px\"\n              style.max-height=\"{{ itemHeight }}px\"\n              (click)=\"handleRowClick($event, data.row)\"\n            >\n              @for (c of startFixedColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [class.sticky-start]=\"true\"\n                  [class.ax-state-is-last]=\"c['isLastFixedColumn']\"\n                  [style.--sticky-start]=\"c['stickyStart']\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n              @for (c of normalColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n              <td><div class=\"ax-bg\"></div></td>\n              @for (c of endFixedColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [class.sticky-end]=\"true\"\n                  [class.ax-state-is-first]=\"c['isFirstFixedColumn']\"\n                  [style.--sticky-end]=\"c['stickyEnd']\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n            </tr>\n            @if (data.row?.__meta__?.expanded) {\n              @if (rowDetailsTemplate) {\n                <tr>\n                  @for (c of startFixedColumnsList(); track $index) {\n                    <td\n                      [style.width]=\"c.width\"\n                      [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                      [class.sticky-start]=\"true\"\n                      [class.ax-state-is-last]=\"c['isLastFixedColumn']\"\n                      [style.--sticky-start]=\"c['stickyStart']\"\n                    >\n                      <div class=\"ax-bg\"></div>\n                    </td>\n                  }\n                  <td class=\"ax-data-table-row-details\" [attr.colspan]=\"normalColumnsList().length + 1\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"rowDetailsTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: { data: data.row, rowIndex: data.rowIndex } }\"\n                    ></ng-container>\n                  </td>\n                  @for (c of endFixedColumnsList(); track $index) {\n                    <td\n                      [style.width]=\"c.width\"\n                      [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                      [class.sticky-end]=\"true\"\n                      [class.ax-state-is-first]=\"c['isFirstFixedColumn']\"\n                      [style.--sticky-end]=\"c['stickyEnd']\"\n                    >\n                      <div class=\"ax-bg\"></div>\n                    </td>\n                  }\n                </tr>\n              }\n              @for (childRow of data.row.children; let childRowIndex = $index; track childRowIndex) {\n                <ng-container\n                  [ngTemplateOutlet]=\"rowTemp\"\n                  [ngTemplateOutletContext]=\"{ data: { row: childRow, rowIndex: childRowIndex } }\"\n                ></ng-container>\n              }\n            }\n          }\n        </ng-template>\n\n        <tr class=\"empty-row\"></tr>\n      }\n    </tbody>\n    @if (showFooter) {\n      <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n        <tr>\n          @for (c of startFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-start\"\n              [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.ax-state-is-last]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <td\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                  (dblclick)=\"onResizeHandlerDoubleClick($event, this.startFixedColumnsList().length + $index)\"\n                  title=\"Double-click to auto-fit column width\"\n                ></div>\n              }\n            </td>\n          }\n          <td></td>\n          @for (c of endFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.ax-state-is-first]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (paging) {\n  <div class=\"ax-table-footer\" #footerContainer>\n    <ng-template #customPager>\n      <ng-content select=\"ax-data-pager\"></ng-content>\n    </ng-template>\n\n    @if (customDataPager) {\n      <ng-container [ngTemplateOutlet]=\"customPager\"></ng-container>\n    } @else {\n      <ax-data-pager\n        #dataPager\n        [displayMode]=\"'custom'\"\n        (onChanged)=\"handleChangePage($event)\"\n        [total]=\"dataSource.totalCount\"\n        [size]=\"dataSource.pageSize\"\n        [isLoading]=\"isLoading()\"\n      >\n        <ax-prefix class=\"ax-data-table-numeric-paging\">\n          <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n          <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n        </ax-prefix>\n        <ax-prefix class=\"ax-data-table-input-paging\">\n          <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n          <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n          <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n        </ax-prefix>\n        <ax-suffix class=\"ax-data-table-info\">\n          <ax-data-pager-info> </ax-data-pager-info>\n          <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh({ reset: false })\">\n            <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n          </ax-button>\n        </ax-suffix>\n      </ax-data-pager>\n    }\n  </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\n", styles: ["@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-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{ax-data-table{height:100%;min-height:inherit;border-radius:var(--radius-default,var(--ax-sys-border-radius));border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));width:100%;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);flex-direction:column;display:flex;position:relative;overflow:hidden}ax-data-table td.ax-data-table-empty-data{height:calc(var(--spacing,.25rem)*32);border-bottom-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*8);text-align:center;vertical-align:middle;border-bottom-width:0;top:50%;transform:translateY(-50%);background-color:#0000!important;position:absolute!important}ax-data-table td.ax-data-table-empty-data span{height:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-surface,rgba(var(--ax-sys-color-surface)));justify-content:center;align-items:center;display:flex}ax-data-table .ax-data-table-wrapper{border-radius:var(--radius-default,var(--ax-sys-border-radius));flex:1;width:100%;overflow:auto}ax-data-table .ax-data-table-wrapper table{table-layout:fixed;width:100%;height:100%;display:table;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{border-start-start-radius:var(--radius-default,var(--ax-sys-border-radius));border-start-end-radius:var(--radius-default,var(--ax-sys-border-radius));overflow:hidden}ax-data-table .ax-data-table-wrapper table thead th{height:calc(var(--spacing,.25rem)*10);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);background-color:var(--color-lighter);color:var(--color-on-lighter);border-bottom-width:1px;border-color:var(--color-border-lighter);padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;position:relative;overflow:hidden;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)))!important}ax-data-table .ax-data-table-wrapper table thead th:where(.dark,.dark *){background-color:var(--color-darker);color:var(--color-on-darker);border-color:var(--color-border-darker)}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{top:calc(var(--spacing,.25rem)*0);right:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:100%;width:calc(var(--spacing,.25rem)*1);cursor:col-resize;background-color:#0000;position:absolute}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover:where(.dark,.dark *){background-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{align-items:center;gap:calc(var(--spacing,.25rem)*2);display:flex}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{top:calc(var(--spacing,.25rem)*0);z-index:3;border-block-style:var(--tw-border-style);--tw-shadow:inset 1px 1px 0px 2px var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-block-width:0;position:sticky}@media screen and (min-width:768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{z-index:2;border-inline-style:var(--tw-border-style);border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{z-index:2;border-inline-style:var(--tw-border-style);background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}ax-data-table .ax-data-table-wrapper table tbody tr td{z-index:0}ax-data-table .ax-data-table-wrapper table tbody tr td .ax-bg{top:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);z-index:-1;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));opacity:.3;background-color:#0000;width:100%;height:100%;position:absolute}ax-data-table .ax-data-table-wrapper table tbody .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td:where(.dark,.dark *){background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:calc(var(--spacing,.25rem)*10);max-height:calc(var(--spacing,.25rem)*10)}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary-lightest,rgba(var(--ax-sys-color-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){color:var(--color-on-primary-lightest,rgba(var(--ax-sys-color-on-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column):where(.dark,.dark *){color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg{background-color:var(--color-on-primary-lightest,rgba(var(--ax-sys-color-on-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}ax-data-table .ax-data-table-wrapper table tbody td{min-width:calc(var(--spacing,.25rem)*8);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*2);vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td:where(.dark,.dark *){background-color:var(--color-darkest,rgba(var(--ax-sys-color-darkest-surface)))}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler{cursor:pointer;padding-inline:calc(var(--spacing,.25rem)*1)}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler.has-parent{padding-inline-start:calc(var(--spacing,.25rem)*6)!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));text-align:center;text-overflow:ellipsis;white-space:nowrap;color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)));overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)));color:var(--color-on-dark,rgba(var(--ax-sys-color-on-dark-surface)))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column{text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{cursor:not-allowed!important;opacity:.5!important;position:relative!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{inset-inline-start:calc(var(--spacing,.25rem)*0);justify-content:center;align-items:center;width:100%;display:flex;position:absolute;top:50%;transform:translateY(-50%)}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button{--spacing:.2;justify-content:center;align-items:center;display:flex}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button ax-icon{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button{cursor:pointer;border-style:var(--tw-border-style);text-overflow:ellipsis;white-space:nowrap;border-width:0;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:calc(var(--spacing,.25rem)*3.5);border-radius:var(--radius-md,.375rem);width:33.3333%}ax-data-table .ax-data-table-wrapper table tfoot tr td{height:calc(var(--spacing,.25rem)*10);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)));padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-overflow:ellipsis;white-space:nowrap;color:var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)));text-transform:uppercase;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tfoot tr td:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)));color:var(--color-on-darker,rgba(var(--ax-sys-color-on-darker-surface)))}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)))}@media screen and (min-width:768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{z-index:2;border-inline-style:var(--tw-border-style);border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{z-index:3;border-block-style:var(--tw-border-style);--tw-shadow:1px 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface))),0 -1px 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-block-width:0;position:sticky;bottom:-1px}@media screen and (min-width:768px){ax-data-table .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}}ax-data-table ax-data-pager{justify-content:center}@media (min-width:48rem){ax-data-table ax-data-pager{justify-content:space-between}}ax-data-table .ax-table-footer{border-collapse:collapse;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));padding-inline:calc(var(--spacing,.25rem)*3.5);overflow:hidden}ax-data-table .ax-table-footer .ax-table-info{flex:1;justify-content:space-between;align-items:center;display:flex}ax-data-table .ax-data-table-numeric-paging{display:none}@media (min-width:64rem){ax-data-table .ax-data-table-numeric-paging{display:flex}}ax-data-table .ax-data-table-input-paging{display:flex}@media (min-width:64rem){ax-data-table .ax-data-table-input-paging{display:none}}ax-data-table .ax-data-table-info{justify-content:center;align-items:center;display:none}@media (min-width:48rem){ax-data-table .ax-data-table-info{display:flex}}ax-data-table .ax-data-table-info ax-text{color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}.cdk-drag-preview{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));text-transform:uppercase;--tw-shadow:0 5px 5px -3px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.2)),0 8px 10px 1px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.14)),0 3px 14px 2px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.12));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:relative}.ax-dropdown-command-empty-state-text{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "isLoading", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { 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: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, inputs: ['dataSource', 'selectedRows', 'parentField'], outputs: ['selectedRowsChange'], providers: [
+            args: [{ selector: 'ax-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, inputs: ['dataSource', 'selectedRows', 'parentField', 'rowDetailsTemplate'], outputs: ['selectedRowsChange'], providers: [
                         { provide: AXBaseDataTable, useExisting: AXDataTableComponent },
                         AXUnsubscriber,
                         { provide: AXComponent, useExisting: AXDataTableComponent },
@@ -1778,7 +2171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         AXButtonComponent,
                         AsyncPipe,
                         AXTranslatorPipe,
-                    ], template: "<ng-content select=\"ax-header\"> </ng-content>\n<div class=\"ax-data-table-wrapper\">\n  <table>\n    @if (showHeader) {\n      <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n        <tr\n          [cdkDropListDisabled]=\"!allowReordering\"\n          cdkDropList\n          cdkScrollable\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @for (c of startFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-start\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <th\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </th>\n          }\n          <th></th>\n          @for (c of endFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n    <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n      @if (showNoDataLoadedYet) {\n        <tr style=\"display: inherit\">\n          <td class=\"ax-data-table-empty-data\" [attr.colspan]=\"columnsList().length + 1\">\n            @if (noDataTemplate) {\n              <ng-container [ngTemplateOutlet]=\"noDataTemplate\"></ng-container>\n            } @else {\n              <span>{{ '@acorex:common.general.no-data-yet' | translate | async }}</span>\n            }\n          </td>\n        </tr>\n      } @else if (!displayedRows().length) {\n        <tr style=\"display: inherit\">\n          <td class=\"ax-data-table-empty-data\" [attr.colspan]=\"columnsList().length + 1\">\n            @if (emptyTemplate) {\n              <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\n            } @else {\n              <span>{{ '@acorex:common.general.no-record' | translate | async }}</span>\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n          <ng-container\n            [ngTemplateOutlet]=\"rowTemp\"\n            [ngTemplateOutletContext]=\"{ data: { row, rowIndex } }\"\n          ></ng-container>\n        }\n\n        <ng-template #rowTemp let-data=\"data\">\n          @if (rowTemplate) {\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: { data: data.row, rowIndex: data.rowIndex } }\"\n            >\n            </ng-container>\n          } @else {\n            <tr\n              [class.ax-state-focused]=\"focusedRow && data.row === focusedRow\"\n              [attr.data-index]=\"data.rowIndex\"\n              [class.ax-state-selected]=\"selectedRows.includes(data.row)\"\n              style.height=\"{{ itemHeight }}px\"\n              style.max-height=\"{{ itemHeight }}px\"\n              (click)=\"handleRowClick($event, data.row)\"\n            >\n              @for (c of startFixedColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [class.sticky-start]=\"true\"\n                  [class.isLast]=\"c['isLastFixedColumn']\"\n                  [style.--sticky-start]=\"c['stickyStart']\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n              @for (c of normalColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n              <td><div class=\"ax-bg\"></div></td>\n              @for (c of endFixedColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [class.sticky-end]=\"true\"\n                  [class.isFirst]=\"c['isFirstFixedColumn']\"\n                  [style.--sticky-end]=\"c['stickyEnd']\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n            </tr>\n            @if (data.row?.__meta__?.expanded) {\n              @for (childRow of data.row.children; let childRowIndex = $index; track childRowIndex) {\n                <ng-container\n                  [ngTemplateOutlet]=\"rowTemp\"\n                  [ngTemplateOutletContext]=\"{ data: { row: childRow, rowIndex: childRowIndex } }\"\n                ></ng-container>\n              }\n            }\n          }\n        </ng-template>\n\n        <tr class=\"empty-row\"></tr>\n      }\n    </tbody>\n    @if (showFooter) {\n      <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n        <tr>\n          @for (c of startFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-start\"\n              [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <td\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </td>\n          }\n          <td></td>\n          @for (c of endFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (paging) {\n  <div class=\"ax-table-footer\" #footerContainer>\n    <ng-template #customPager>\n      <ng-content select=\"ax-data-pager\"></ng-content>\n    </ng-template>\n\n    @if (customDataPager) {\n      <ng-container [ngTemplateOutlet]=\"customPager\"></ng-container>\n    } @else {\n      <ax-data-pager\n        #dataPager\n        [displayMode]=\"'custom'\"\n        (onChanged)=\"handleChangePage($event)\"\n        [total]=\"dataSource.totalCount\"\n        [size]=\"dataSource.pageSize\"\n        [isLoading]=\"isLoading()\"\n      >\n        <ax-prefix class=\"ax-data-table-numeric-paging\">\n          <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n          <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n        </ax-prefix>\n        <ax-prefix class=\"ax-data-table-input-paging\">\n          <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n          <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n          <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n        </ax-prefix>\n        <ax-suffix class=\"ax-data-table-info\">\n          <ax-data-pager-info> </ax-data-pager-info>\n          <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh({ reset: false })\">\n            <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n          </ax-button>\n        </ax-suffix>\n      </ax-data-pager>\n    }\n  </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\n", styles: ["ax-data-table{--ax-comp-data-table-font-size: .875rem;--ax-comp-data-table-line-height: 1rem;--ax-comp-data-table-border-color: var(--ax-sys-color-border-surface);--ax-comp-data-table-border-radius: var(--ax-sys-border-radius);--ax-comp-data-table-column-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-data-table-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-header-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-data-table-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-footer-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-data-table-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-data-table-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-data-table-focus-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-data-table-selected-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-selected-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-index-bg-color: var(--ax-sys-color-light-surface);--ax-comp-data-table-index-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-alternative-bg-color: var(--ax-sys-color-light-surface);--ax-comp-data-table-alternative-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-skeleton-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-data-table-handler-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-interactive-bg-color: var(--ax-sys-color-light-surface)}.ax-dark ax-data-table{--ax-comp-data-table-column-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-data-table-header-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-data-table-header-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-data-table-footer-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-data-table-footer-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-data-table-hover-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-focus-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-selected-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-data-table-selected-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-index-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-data-table-index-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-data-table-skeleton-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-alternative-bg-color: var(--ax-sys-color-surface);--ax-comp-data-table-alternative-text-color: var(--ax-sys-color-on-surface);--ax-comp-data-table-handler-bg-color: var(--ax-sys-color-primary-dark-surface)}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table{display:flex;flex-direction:column;height:100%;width:100%;font-size:var(--ax-comp-data-table-font-size);line-height:var(--ax-comp-data-table-line-height);border-radius:var(--ax-comp-data-table-border-radius);border-width:1px;border-color:rgba(var(--ax-comp-data-table-border-color));position:relative;min-height:inherit;overflow:hidden}ax-data-table td.ax-data-table-empty-data{background:transparent!important;position:absolute!important;padding:2rem 1rem;text-align:center;vertical-align:middle;height:8rem;border-bottom:none;top:50%;transform:translateY(-50%);width:100%}ax-data-table td.ax-data-table-empty-data span{color:rgb(var(--ax-sys-color-ghost-500));font-size:var(--ax-comp-data-table-font-size);display:flex;height:100%;align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper{overflow:auto;width:100%;flex:1;border-radius:var(--ax-comp-data-table-border-radius)}ax-data-table .ax-data-table-wrapper table{display:table;height:100%;width:100%;table-layout:fixed;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{overflow:hidden;border-start-end-radius:var(--ax-comp-data-table-border-radius);border-start-start-radius:var(--ax-comp-data-table-border-radius)}ax-data-table .ax-data-table-wrapper table thead th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-header-bg-color));color:rgba(var(--ax-comp-data-table-header-text-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-comp-data-table-interactive-bg-color))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-comp-data-table-handler-bg-color))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{position:sticky;top:0;border-top:none;border-bottom:none;z-index:3;box-shadow:inset 1px 1px 0 2px rgba(var(--ax-comp-data-table-border-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{position:sticky;z-index:2;background-color:rgba(var(--ax-comp-data-table-column-bg-color));border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table .ax-data-table-wrapper table tbody tr td{z-index:0}ax-data-table .ax-data-table-wrapper table tbody tr td .ax-bg{top:0;left:0;z-index:-1;width:100%;height:100%;position:absolute;border-inline-end:1px solid rgba(var(--ax-comp-data-table-border-color));background-color:transparent;opacity:.3}ax-data-table .ax-data-table-wrapper table tbody .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-comp-data-table-alternative-bg-color));color:rgba(var(--ax-comp-data-table-alternative-text-color))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-height:2.5rem}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-hover-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-hover-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-focus-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-focus-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-selected-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-selected-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-selected-hover-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-selected-hover-text-color))}ax-data-table .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-column-bg-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.5rem;padding-bottom:.5rem;vertical-align:middle}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler{padding-inline-start:.25rem;padding-inline-end:.25rem;cursor:pointer}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler.has-parent{padding-inline-start:1.5rem!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-comp-data-table-index-bg-color));color:rgba(var(--ax-comp-data-table-index-text-color));text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column{text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-comp-data-table-border-radius);border-style:none;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:transparent;padding:.25rem;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem;background-color:rgba(var(--ax-comp-data-table-skeleton-bg-color))}ax-data-table .ax-data-table-wrapper table tfoot tr td{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-footer-bg-color));color:rgba(var(--ax-comp-data-table-footer-text-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-comp-data-table-interactive-bg-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom:-1px;border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-comp-data-table-border-color)),0 -1px rgba(var(--ax-comp-data-table-border-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}}ax-data-table ax-data-pager{justify-content:center}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-comp-data-table-border-color));padding-inline-start:.875rem;padding-inline-end:.875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}ax-data-table .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{justify-content:space-between}}.cdk-drag-preview{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-sys-color-primary-900),.2),0 8px 10px 1px rgba(var(--ax-sys-color-primary-900),.14),0 3px 14px 2px rgba(var(--ax-sys-color-primary-900),.12);border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-surface-fore));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}\n"] }]
+                    ], template: "<ng-content select=\"ax-header\"> </ng-content>\n<div class=\"ax-data-table-wrapper\">\n  <table>\n    @if (showHeader) {\n      <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n        <tr\n          [cdkDropListDisabled]=\"!allowReordering\"\n          cdkDropList\n          cdkScrollable\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @for (c of startFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-start\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.ax-state-is-last]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <th\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                  (dblclick)=\"onResizeHandlerDoubleClick($event, this.startFixedColumnsList().length + $index)\"\n                  title=\"Double-click to auto-fit column width\"\n                ></div>\n              }\n            </th>\n          }\n          <th></th>\n          @for (c of endFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.ax-state-is-first]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n    <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n      @if (showNoDataLoadedYet) {\n        <tr style=\"display: inherit\">\n          <td class=\"ax-data-table-empty-data\" [attr.colspan]=\"columnsList().length + 1\">\n            @if (noDataTemplate) {\n              <ng-container [ngTemplateOutlet]=\"noDataTemplate\"></ng-container>\n            } @else {\n              <span>{{ '@acorex:common.general.no-data-yet' | translate | async }}</span>\n            }\n          </td>\n        </tr>\n      } @else if (!displayedRows().length) {\n        <tr style=\"display: inherit\">\n          <td class=\"ax-data-table-empty-data\" [attr.colspan]=\"columnsList().length + 1\">\n            @if (emptyTemplate) {\n              <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\n            } @else {\n              <span>{{ '@acorex:common.general.no-record' | translate | async }}</span>\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n          <ng-container\n            [ngTemplateOutlet]=\"rowTemp\"\n            [ngTemplateOutletContext]=\"{ data: { row, rowIndex } }\"\n          ></ng-container>\n        }\n\n        <ng-template #rowTemp let-data=\"data\">\n          @if (rowTemplate) {\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: { data: data.row, rowIndex: data.rowIndex } }\"\n            >\n            </ng-container>\n          } @else {\n            <tr\n              [class.ax-state-focused]=\"focusedRow && data.row === focusedRow\"\n              [attr.data-index]=\"data.rowIndex\"\n              [class.ax-state-selected]=\"selectedRows.includes(data.row)\"\n              style.height=\"{{ itemHeight }}px\"\n              style.max-height=\"{{ itemHeight }}px\"\n              (click)=\"handleRowClick($event, data.row)\"\n            >\n              @for (c of startFixedColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [class.sticky-start]=\"true\"\n                  [class.ax-state-is-last]=\"c['isLastFixedColumn']\"\n                  [style.--sticky-start]=\"c['stickyStart']\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n              @for (c of normalColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n              <td><div class=\"ax-bg\"></div></td>\n              @for (c of endFixedColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [class.sticky-end]=\"true\"\n                  [class.ax-state-is-first]=\"c['isFirstFixedColumn']\"\n                  [style.--sticky-end]=\"c['stickyEnd']\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n            </tr>\n            @if (data.row?.__meta__?.expanded) {\n              @if (rowDetailsTemplate) {\n                <tr>\n                  @for (c of startFixedColumnsList(); track $index) {\n                    <td\n                      [style.width]=\"c.width\"\n                      [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                      [class.sticky-start]=\"true\"\n                      [class.ax-state-is-last]=\"c['isLastFixedColumn']\"\n                      [style.--sticky-start]=\"c['stickyStart']\"\n                    >\n                      <div class=\"ax-bg\"></div>\n                    </td>\n                  }\n                  <td class=\"ax-data-table-row-details\" [attr.colspan]=\"normalColumnsList().length + 1\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"rowDetailsTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: { data: data.row, rowIndex: data.rowIndex } }\"\n                    ></ng-container>\n                  </td>\n                  @for (c of endFixedColumnsList(); track $index) {\n                    <td\n                      [style.width]=\"c.width\"\n                      [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                      [class.sticky-end]=\"true\"\n                      [class.ax-state-is-first]=\"c['isFirstFixedColumn']\"\n                      [style.--sticky-end]=\"c['stickyEnd']\"\n                    >\n                      <div class=\"ax-bg\"></div>\n                    </td>\n                  }\n                </tr>\n              }\n              @for (childRow of data.row.children; let childRowIndex = $index; track childRowIndex) {\n                <ng-container\n                  [ngTemplateOutlet]=\"rowTemp\"\n                  [ngTemplateOutletContext]=\"{ data: { row: childRow, rowIndex: childRowIndex } }\"\n                ></ng-container>\n              }\n            }\n          }\n        </ng-template>\n\n        <tr class=\"empty-row\"></tr>\n      }\n    </tbody>\n    @if (showFooter) {\n      <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n        <tr>\n          @for (c of startFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-start\"\n              [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.ax-state-is-last]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <td\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                  (dblclick)=\"onResizeHandlerDoubleClick($event, this.startFixedColumnsList().length + $index)\"\n                  title=\"Double-click to auto-fit column width\"\n                ></div>\n              }\n            </td>\n          }\n          <td></td>\n          @for (c of endFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.ax-state-is-first]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (paging) {\n  <div class=\"ax-table-footer\" #footerContainer>\n    <ng-template #customPager>\n      <ng-content select=\"ax-data-pager\"></ng-content>\n    </ng-template>\n\n    @if (customDataPager) {\n      <ng-container [ngTemplateOutlet]=\"customPager\"></ng-container>\n    } @else {\n      <ax-data-pager\n        #dataPager\n        [displayMode]=\"'custom'\"\n        (onChanged)=\"handleChangePage($event)\"\n        [total]=\"dataSource.totalCount\"\n        [size]=\"dataSource.pageSize\"\n        [isLoading]=\"isLoading()\"\n      >\n        <ax-prefix class=\"ax-data-table-numeric-paging\">\n          <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n          <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n        </ax-prefix>\n        <ax-prefix class=\"ax-data-table-input-paging\">\n          <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n          <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n          <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n        </ax-prefix>\n        <ax-suffix class=\"ax-data-table-info\">\n          <ax-data-pager-info> </ax-data-pager-info>\n          <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh({ reset: false })\">\n            <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n          </ax-button>\n        </ax-suffix>\n      </ax-data-pager>\n    }\n  </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\n", styles: ["@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-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{ax-data-table{height:100%;min-height:inherit;border-radius:var(--radius-default,var(--ax-sys-border-radius));border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));width:100%;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);flex-direction:column;display:flex;position:relative;overflow:hidden}ax-data-table td.ax-data-table-empty-data{height:calc(var(--spacing,.25rem)*32);border-bottom-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*8);text-align:center;vertical-align:middle;border-bottom-width:0;top:50%;transform:translateY(-50%);background-color:#0000!important;position:absolute!important}ax-data-table td.ax-data-table-empty-data span{height:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-surface,rgba(var(--ax-sys-color-surface)));justify-content:center;align-items:center;display:flex}ax-data-table .ax-data-table-wrapper{border-radius:var(--radius-default,var(--ax-sys-border-radius));flex:1;width:100%;overflow:auto}ax-data-table .ax-data-table-wrapper table{table-layout:fixed;width:100%;height:100%;display:table;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{border-start-start-radius:var(--radius-default,var(--ax-sys-border-radius));border-start-end-radius:var(--radius-default,var(--ax-sys-border-radius));overflow:hidden}ax-data-table .ax-data-table-wrapper table thead th{height:calc(var(--spacing,.25rem)*10);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);background-color:var(--color-lighter);color:var(--color-on-lighter);border-bottom-width:1px;border-color:var(--color-border-lighter);padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;position:relative;overflow:hidden;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)))!important}ax-data-table .ax-data-table-wrapper table thead th:where(.dark,.dark *){background-color:var(--color-darker);color:var(--color-on-darker);border-color:var(--color-border-darker)}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{top:calc(var(--spacing,.25rem)*0);right:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:100%;width:calc(var(--spacing,.25rem)*1);cursor:col-resize;background-color:#0000;position:absolute}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover:where(.dark,.dark *){background-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{align-items:center;gap:calc(var(--spacing,.25rem)*2);display:flex}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{top:calc(var(--spacing,.25rem)*0);z-index:3;border-block-style:var(--tw-border-style);--tw-shadow:inset 1px 1px 0px 2px var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-block-width:0;position:sticky}@media screen and (min-width:768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{z-index:2;border-inline-style:var(--tw-border-style);border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{z-index:2;border-inline-style:var(--tw-border-style);background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}ax-data-table .ax-data-table-wrapper table tbody tr td{z-index:0}ax-data-table .ax-data-table-wrapper table tbody tr td .ax-bg{top:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);z-index:-1;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));opacity:.3;background-color:#0000;width:100%;height:100%;position:absolute}ax-data-table .ax-data-table-wrapper table tbody .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td:where(.dark,.dark *){background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:calc(var(--spacing,.25rem)*10);max-height:calc(var(--spacing,.25rem)*10)}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary-lightest,rgba(var(--ax-sys-color-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){color:var(--color-on-primary-lightest,rgba(var(--ax-sys-color-on-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column):where(.dark,.dark *){color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg{background-color:var(--color-on-primary-lightest,rgba(var(--ax-sys-color-on-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}ax-data-table .ax-data-table-wrapper table tbody td{min-width:calc(var(--spacing,.25rem)*8);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*2);vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td:where(.dark,.dark *){background-color:var(--color-darkest,rgba(var(--ax-sys-color-darkest-surface)))}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler{cursor:pointer;padding-inline:calc(var(--spacing,.25rem)*1)}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler.has-parent{padding-inline-start:calc(var(--spacing,.25rem)*6)!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));text-align:center;text-overflow:ellipsis;white-space:nowrap;color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)));overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)));color:var(--color-on-dark,rgba(var(--ax-sys-color-on-dark-surface)))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column{text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{cursor:not-allowed!important;opacity:.5!important;position:relative!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{inset-inline-start:calc(var(--spacing,.25rem)*0);justify-content:center;align-items:center;width:100%;display:flex;position:absolute;top:50%;transform:translateY(-50%)}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button{--spacing:.2;justify-content:center;align-items:center;display:flex}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button ax-icon{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button{cursor:pointer;border-style:var(--tw-border-style);text-overflow:ellipsis;white-space:nowrap;border-width:0;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:calc(var(--spacing,.25rem)*3.5);border-radius:var(--radius-md,.375rem);width:33.3333%}ax-data-table .ax-data-table-wrapper table tfoot tr td{height:calc(var(--spacing,.25rem)*10);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)));padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-overflow:ellipsis;white-space:nowrap;color:var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)));text-transform:uppercase;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tfoot tr td:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)));color:var(--color-on-darker,rgba(var(--ax-sys-color-on-darker-surface)))}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)))}@media screen and (min-width:768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{z-index:2;border-inline-style:var(--tw-border-style);border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{z-index:3;border-block-style:var(--tw-border-style);--tw-shadow:1px 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface))),0 -1px 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-block-width:0;position:sticky;bottom:-1px}@media screen and (min-width:768px){ax-data-table .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}}ax-data-table ax-data-pager{justify-content:center}@media (min-width:48rem){ax-data-table ax-data-pager{justify-content:space-between}}ax-data-table .ax-table-footer{border-collapse:collapse;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));padding-inline:calc(var(--spacing,.25rem)*3.5);overflow:hidden}ax-data-table .ax-table-footer .ax-table-info{flex:1;justify-content:space-between;align-items:center;display:flex}ax-data-table .ax-data-table-numeric-paging{display:none}@media (min-width:64rem){ax-data-table .ax-data-table-numeric-paging{display:flex}}ax-data-table .ax-data-table-input-paging{display:flex}@media (min-width:64rem){ax-data-table .ax-data-table-input-paging{display:none}}ax-data-table .ax-data-table-info{justify-content:center;align-items:center;display:none}@media (min-width:48rem){ax-data-table .ax-data-table-info{display:flex}}ax-data-table .ax-data-table-info ax-text{color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}.cdk-drag-preview{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));text-transform:uppercase;--tw-shadow:0 5px 5px -3px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.2)),0 8px 10px 1px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.14)),0 3px 14px 2px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.12));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:relative}.ax-dropdown-command-empty-state-text{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { dataPager: [{
                 type: ViewChild,
                 args: ['dataPager']
@@ -1832,439 +2225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 args: [AXDataTableColumnComponent]
             }] } });
 
-/**
- * Component for a data table with infinite scrolling capabilities.
- *
- * @category Components
- */
-class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
-    constructor() {
-        super(...arguments);
-        this.document = inject(DOCUMENT);
-        this.platformID = inject(PLATFORM_ID);
-        this.ngZone = inject(NgZone);
-        /**
-         * Emits an event when the page changes.
-         *
-         * @event
-         */
-        this.onPageChanged = new EventEmitter();
-        /**
-         *  @ignore
-         */
-        this.clickSubject = new Subject();
-        /**
-         * Emits an event when a row is clicked.
-         *
-         * @event
-         */
-        this.onRowClick = new EventEmitter();
-        /**
-         * Emits an event when a row is double-clicked.
-         *
-         * @event
-         */
-        this.onRowDbClick = new EventEmitter();
-        /**
-         * Controls the visibility of the table header.
-         *
-         * @defaultValue true
-         */
-        this.showHeader = true;
-        /**
-         * Defines the mode for fetching data.
-         *
-         * @defaultValue 'auto'
-         */
-        this.fetchDataMode = 'auto';
-        /**
-         * Configuration for the loading state of the data table.
-         *
-         * @defaultValue { enabled: true, animation: true }
-         */
-        this.loading = {
-            enabled: true,
-            animation: true,
-        };
-        /**
-         *  @ignore
-         */
-        this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-        /**
-         *  @ignore
-         */
-        this.hasItems = false;
-        /**
-         *  @ignore
-         */
-        this.totalRows = 0;
-        /**
-         *  @ignore
-         */
-        this.currentPage = 0;
-        /**
-         *  @ignore
-         */
-        this.totalPages = 0;
-        /**
-         *  @ignore
-         */
-        this.startRowIndex = 0;
-        /**
-         *  @ignore
-         */
-        this.lastIndex = 0;
-        /**
-         * Event emitted when the focused row changes.
-         *
-         * @event
-         */
-        this.focusedRowChange = new EventEmitter();
-        /**
-         * Defines the height of each item in the table.
-         *
-         * @default 40
-         */
-        this.itemHeight = 40;
-        /**
-         *  @ignore
-         */
-        this.width = '100%';
-        /**
-         *  @ignore
-         */
-        this.height = '100%';
-        /**
-         * Emitted when the scroll index changes in the table.
-         *
-         * @event
-         */
-        this.onScrolledIndexChanged = new EventEmitter();
-    }
-    /**
-     *  @ignore
-     */
-    startFixedColumn() {
-        return this.columns?.toArray().filter((c) => c.fixed == 'start') ?? [];
-    }
-    /**
-     *  @ignore
-     */
-    endFixedColumn() {
-        return this.columns?.toArray().filter((c) => c.fixed == 'end') ?? [];
-    }
-    /**
-     *  @ignore
-     */
-    notFixedColumn() {
-        return this.columns?.toArray().filter((c) => !c.fixed) ?? [];
-    }
-    /**
-     *  @ignore
-     */
-    notFixedColumnCount() {
-        return this.columns?.toArray().filter((c) => !c.fixed).length ?? 0;
-    }
-    /**
-     *  @ignore
-     */
-    fixedColumnCount() {
-        return this.columns?.toArray().filter((c) => c.fixed).length ?? 0;
-    }
-    /**
-     * Retrieves the currently focused row.
-     */
-    get focusedRow() {
-        return this._focusedRow;
-    }
-    /**
-     * Sets the currently focused row and emits a change event.
-     *
-     * @param v - The row data to be set as focused.
-     */
-    set focusedRow(v) {
-        this._focusedRow = v;
-        this.focusedRowChange.emit(v);
-    }
-    trackByIdx(i) {
-        return i;
-    }
-    /**
-     *  @ignore
-     */
-    ngOnInit() {
-        super.ngOnInit();
-        this.listDataSource = new AXListDataSource({
-            source: this.dataSource,
-        });
-        this.listDataSource.source.onLoadingChanged.subscribe((data) => {
-            this.isLoading.set(data);
-        });
-        this.listDataSource.source.onChanged.subscribe((data) => {
-            this.totalRows = data.totalCount;
-            this.hasItems = data.totalCount > 0;
-            setTimeout(() => {
-                this.render();
-            }, 100);
-        });
-        //
-        this.clickSubject
-            .pipe(buffer(this.clickSubject.pipe(debounceTime(250))), filter((clickArray) => clickArray.length === 2))
-            .subscribe((clickArray) => {
-            this.handleRowDoubleClick(clickArray[0].event, clickArray[0].item);
-        });
-    }
-    /**
-     *  @ignore
-     */
-    _handleOnscrolledIndexChange(e) {
-        this.lastIndex = e;
-        this.onScrolledIndexChanged.emit({
-            component: this,
-            index: this.lastIndex,
-            isUserInteraction: true,
-        });
-    }
-    /**
-     *  @ignore
-     */
-    ngDoCheck() {
-        //this.copyFixedColumns();
-        this.updateHScroll();
-        //
-        this.updateWidth();
-        this.updateHeight();
-        //
-        this.updateTotalCount();
-    }
-    /**
-     *  @ignore
-     */
-    updateTotalCount() {
-        this.startRowIndex = this.lastIndex;
-        if (this.startRowIndex < 1)
-            this.startRowIndex = 1;
-        if (this.startRowIndex > this.totalRows)
-            this.startRowIndex = this.totalRows;
-    }
-    /**
-     *  @ignore
-     */
-    updateHeight() {
-        this.height = `calc(100% - ${(this.headerContainer?.nativeElement.clientHeight ?? 0) + (this.footerContainer?.nativeElement.clientHeight ?? 0)}px)`;
-    }
-    /**
-     *  @ignore
-     */
-    updateWidth() {
-        if (this.columns && this.columns.length) {
-            const sumPx = sum(this.columns.toArray().map((c) => (typeof c.width == 'number' ? c.width : Number(c.width.replace('px', '')))));
-            this.width = `${Math.max(sumPx, this.getHostElement().clientWidth - 5)}px`;
-        }
-    }
-    /**
-     *  @ignore
-     */
-    updateHScroll() {
-        this.ngZone.runOutsideAngular(() => {
-            if (this.headerContainer) {
-                const headerContainer = this.headerContainer.nativeElement;
-                const left = this.scrollableContainer.nativeElement.scrollLeft;
-                headerContainer.style.transform = `translateX(${-left}px)`;
-            }
-        });
-    }
-    /**
-     *  @ignore
-     */
-    // Function to copy fixed columns
-    copyFixedColumns() {
-        const originalRows = Array.from(this.viewport._contentWrapper.nativeElement.querySelectorAll('tr'));
-        const fixedColumnTable = this.getHostElement().querySelector('.ax-body-fixed-columns > table > tbody');
-        fixedColumnTable.querySelectorAll('tr').forEach((n) => n.remove());
-        if (isPlatformBrowser(this.platformID)) {
-            for (const row of originalRows) {
-                const fixedCells = Array.from(row.querySelectorAll('[data-fixed="start"]'));
-                const fixedRow = this.document.createElement('tr');
-                for (const cell of fixedCells) {
-                    const clonedCell = cell.cloneNode(true);
-                    fixedRow.appendChild(clonedCell);
-                }
-                fixedColumnTable.appendChild(fixedRow);
-            }
-        }
-        const scrollTop = this.getHostElement().querySelector('.cdk-virtual-scrollable').scrollTop;
-        fixedColumnTable.style.transform = `translateY(${-scrollTop}px)`;
-    }
-    /**
-     * Updates the viewport by checking its size and scrolling to the last index.
-     * Marks the component for change detection.
-     * @ignore
-     */
-    render() {
-        this.viewport.checkViewportSize();
-        this.viewport.scrollToIndex(this.lastIndex);
-        this.cdr.markForCheck();
-    }
-    /**
-     * Resets the index to zero and refreshes the data source.
-     * @ignore
-     */
-    refresh() {
-        this.lastIndex = 0;
-        this.listDataSource.refresh();
-    }
-    /**
-     *  @ignore
-     */
-    handleRowClick(event, item) {
-        this.handleRowSingleClick(event, item);
-        this.clickSubject.next({ event, item });
-    }
-    /**
-     *  @ignore
-     */
-    handleRowSingleClick(event, item) {
-        if (this.focusedRow == item) {
-            this.focusedRow = null;
-        }
-        else {
-            this.focusedRow = item;
-        }
-        //
-        this.onRowClick.emit({
-            component: this,
-            data: item,
-            isUserInteraction: true,
-        });
-    }
-    /**
-     *  @ignore
-     */
-    handleRowDoubleClick(e, item) {
-        this.focusedRow = item;
-        //
-        this.onRowDbClick.emit({
-            component: this,
-            data: item,
-            isUserInteraction: true,
-        });
-    }
-    /**
-     * Handles column header clicks to toggle sorting on the column.
-     *
-     * @param e - The mouse event triggered by the click.
-     * @param column - The column that was clicked.
-     * @ignore
-     */
-    handleColumnClick(e, column) {
-        if (column instanceof AXDataTableTextColumnComponent) {
-            const sort = this.dataSource.query.sort.find((c) => c.field == column.dataField);
-            if (!sort) {
-                this.dataSource.query.sort.push({
-                    field: column.dataField,
-                    dir: 'asc',
-                });
-            }
-            else {
-                if (sort.dir == 'asc') {
-                    sort.dir = 'desc';
-                }
-                else {
-                    this.dataSource.query.sort = this.dataSource.query.sort.filter((c) => c != sort);
-                }
-            }
-            this.refresh();
-        }
-    }
-    /**
-     *  @ignore
-     */
-    getSort(column) {
-        if (column instanceof AXDataTableTextColumnComponent) {
-            const sort = this.dataSource.query.sort.find((c) => c.field == column.dataField);
-            return sort ? (sort.dir == 'asc' ? 'ax-icon-arrow-long-down' : 'ax-icon-arrow-long-up') : undefined;
-        }
-        return undefined;
-    }
-    /**
-     *  @ignore
-     */
-    _handleOnScroll() {
-        this.updateHScroll();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXInfiniteScrollDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXInfiniteScrollDataTableComponent, isStandalone: true, selector: "ax-infinite-scroll-data-table", inputs: { dataSource: "dataSource", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow", itemHeight: "itemHeight" }, outputs: { selectedRowsChange: "selectedRowsChange", onPageChanged: "onPageChanged", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", focusedRowChange: "focusedRowChange", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [
-            { provide: AXPagedComponent, useExisting: AXInfiniteScrollDataTableComponent },
-            {
-                provide: AXBaseDataTable,
-                useExisting: AXInfiniteScrollDataTableComponent,
-            },
-            { provide: AXComponent, useExisting: AXInfiniteScrollDataTableComponent },
-        ], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "footerContainer", first: true, predicate: ["footerContainer"], descendants: true }, { propertyName: "scrollableContainer", first: true, predicate: ["scrolling"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n<!------------------- Header contents ------------------->\n@if (showHeader) {\n  <div class=\"ax-header-content\">\n    <div class=\"ax-header-columns\">\n      <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n        <thead>\n          <tr>\n            @for (c of notFixedColumn(); track c.name) {\n              <th\n                [class.ax-interactive]=\"c.allowSorting\"\n                (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n                [style.width]=\"c.width\"\n              >\n                <div class=\"ax-caption\">\n                  <ng-container [ngTemplateOutlet]=\"c.renderHeaderTemplate\"></ng-container>\n                  @if (getSort(c)) {\n                    <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                  }\n                </div>\n                <!-- @if(c.allowResizing)\n              {\n              <div class=\"ax-resize-handle\" [ax-table-column-resizble]=\"c\"></div>\n              } -->\n              </th>\n            }\n            <th></th>\n          </tr>\n        </thead>\n      </table>\n    </div>\n  </div>\n}\n\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll()\">\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"itemHeight\"\n        [style.--item-height]=\"itemHeight + 'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n      >\n        <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n          <colgroup>\n            @for (c of notFixedColumn(); track c.name) {\n              <col [style.width]=\"c.width\" />\n            }\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container\n              *cdkVirtualFor=\"\n                let item of listDataSource;\n                templateCacheSize: 100;\n                let i = index;\n                trackBy: trackByIdx;\n                let rIndex = index\n              \"\n            >\n              <!------------------- custom row template------------------->\n              @if (rowTemplate !== null) {\n                <ng-container\n                  [ngTemplateOutlet]=\"rowTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: item, rowIndex: rIndex } }\"\n                >\n                </ng-container>\n              } @else {\n                <!------------------- normal row template------------------->\n                <tr\n                  [class.ax-state-focused]=\"focusedRow && item === focusedRow\"\n                  [attr.data-index]=\"rIndex\"\n                  [class.ax-state-selected]=\"selectedRows.includes(item)\"\n                  (click)=\"handleRowClick($event, item)\"\n                >\n                  <!------------------- start fixed column ------------------->\n\n                  <!------------------- Not fixed column ------------------->\n                  @for (c of notFixedColumn(); track c.name) {\n                    <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                      @if (item && !isLoading()) {\n                        <!------------------- render cell ------------------->\n                        <ng-container\n                          [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                          [ngTemplateOutletContext]=\"{ $implicit: { data: item, rowIndex: rIndex } }\"\n                        ></ng-container>\n                      } @else {\n                        <!------------------- render loading ------------------->\n                        @if (c.loadingEnabled && loading) {\n                          <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                        }\n                      }\n                    </td>\n                  }\n                  <td></td>\n                </tr>\n              }\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n  <div class=\"ax-table-info\">\n    <div>Showing {{ startRowIndex }} of {{ totalRows }} items</div>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n      <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n    </ax-button>\n  </div>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</div>\n", styles: ["ax-infinite-scroll-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));font-size:.875rem;line-height:1.25rem}ax-infinite-scroll-data-table table{table-layout:fixed}ax-infinite-scroll-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-infinite-scroll-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-infinite-scroll-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-infinite-scroll-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns{height:100%}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-sys-border-radius);border-start-start-radius:var(--ax-sys-border-radius)}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-sys-color-secondary-200))}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle:hover{background-color:rgba(var(--ax-sys-color-secondary-300))}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-infinite-scroll-data-table .ax-body-content{position:relative}ax-infinite-scroll-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns{height:100%}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-sys-color-surface))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-sys-color-primary-200))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-sys-color-primary-200));color:rgba(var(--ax-sys-color-on-primary-tint))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-sys-color-primary-300))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-sys-color-primary-300));color:rgba(var(--ax-sys-color-on-primary-tint))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-sys-color-primary-400));color:rgba(var(--ax-sys-color-on-primary))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-sys-color-surface));text-align:center}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-sys-border-radius);border-style:none;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:transparent;padding:.25rem;color:rgba(var(--ax-color-ghost-fore))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-infinite-scroll-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:.5rem .875rem}ax-infinite-scroll-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXInfiniteScrollDataTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-infinite-scroll-data-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        { provide: AXPagedComponent, useExisting: AXInfiniteScrollDataTableComponent },
-                        {
-                            provide: AXBaseDataTable,
-                            useExisting: AXInfiniteScrollDataTableComponent,
-                        },
-                        { provide: AXComponent, useExisting: AXInfiniteScrollDataTableComponent },
-                    ], outputs: ['selectedRowsChange'], inputs: ['dataSource'], imports: [
-                        NgTemplateOutlet,
-                        AXDecoratorIconComponent,
-                        CdkVirtualScrollableElement,
-                        CdkVirtualScrollViewport,
-                        CdkFixedSizeVirtualScroll,
-                        CdkVirtualForOf,
-                        AXSkeletonComponent,
-                        AXButtonComponent,
-                    ], template: "<ng-content select=\"ax-header\"> </ng-content>\n<!------------------- Header contents ------------------->\n@if (showHeader) {\n  <div class=\"ax-header-content\">\n    <div class=\"ax-header-columns\">\n      <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n        <thead>\n          <tr>\n            @for (c of notFixedColumn(); track c.name) {\n              <th\n                [class.ax-interactive]=\"c.allowSorting\"\n                (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n                [style.width]=\"c.width\"\n              >\n                <div class=\"ax-caption\">\n                  <ng-container [ngTemplateOutlet]=\"c.renderHeaderTemplate\"></ng-container>\n                  @if (getSort(c)) {\n                    <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                  }\n                </div>\n                <!-- @if(c.allowResizing)\n              {\n              <div class=\"ax-resize-handle\" [ax-table-column-resizble]=\"c\"></div>\n              } -->\n              </th>\n            }\n            <th></th>\n          </tr>\n        </thead>\n      </table>\n    </div>\n  </div>\n}\n\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll()\">\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"itemHeight\"\n        [style.--item-height]=\"itemHeight + 'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n      >\n        <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n          <colgroup>\n            @for (c of notFixedColumn(); track c.name) {\n              <col [style.width]=\"c.width\" />\n            }\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container\n              *cdkVirtualFor=\"\n                let item of listDataSource;\n                templateCacheSize: 100;\n                let i = index;\n                trackBy: trackByIdx;\n                let rIndex = index\n              \"\n            >\n              <!------------------- custom row template------------------->\n              @if (rowTemplate !== null) {\n                <ng-container\n                  [ngTemplateOutlet]=\"rowTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: item, rowIndex: rIndex } }\"\n                >\n                </ng-container>\n              } @else {\n                <!------------------- normal row template------------------->\n                <tr\n                  [class.ax-state-focused]=\"focusedRow && item === focusedRow\"\n                  [attr.data-index]=\"rIndex\"\n                  [class.ax-state-selected]=\"selectedRows.includes(item)\"\n                  (click)=\"handleRowClick($event, item)\"\n                >\n                  <!------------------- start fixed column ------------------->\n\n                  <!------------------- Not fixed column ------------------->\n                  @for (c of notFixedColumn(); track c.name) {\n                    <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                      @if (item && !isLoading()) {\n                        <!------------------- render cell ------------------->\n                        <ng-container\n                          [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                          [ngTemplateOutletContext]=\"{ $implicit: { data: item, rowIndex: rIndex } }\"\n                        ></ng-container>\n                      } @else {\n                        <!------------------- render loading ------------------->\n                        @if (c.loadingEnabled && loading) {\n                          <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                        }\n                      }\n                    </td>\n                  }\n                  <td></td>\n                </tr>\n              }\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n  <div class=\"ax-table-info\">\n    <div>Showing {{ startRowIndex }} of {{ totalRows }} items</div>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n      <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n    </ax-button>\n  </div>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</div>\n", styles: ["ax-infinite-scroll-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));font-size:.875rem;line-height:1.25rem}ax-infinite-scroll-data-table table{table-layout:fixed}ax-infinite-scroll-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-infinite-scroll-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-infinite-scroll-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-infinite-scroll-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns{height:100%}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-sys-border-radius);border-start-start-radius:var(--ax-sys-border-radius)}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-sys-color-secondary-200))}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle:hover{background-color:rgba(var(--ax-sys-color-secondary-300))}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-infinite-scroll-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-infinite-scroll-data-table .ax-body-content{position:relative}ax-infinite-scroll-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns{height:100%}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-sys-color-surface))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-sys-color-primary-200))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-sys-color-primary-200));color:rgba(var(--ax-sys-color-on-primary-tint))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-sys-color-primary-300))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-sys-color-primary-300));color:rgba(var(--ax-sys-color-on-primary-tint))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-sys-color-primary-400));color:rgba(var(--ax-sys-color-on-primary))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-sys-color-surface));text-align:center}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-sys-border-radius);border-style:none;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:transparent;padding:.25rem;color:rgba(var(--ax-color-ghost-fore))}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-infinite-scroll-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-infinite-scroll-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:.5rem .875rem}ax-infinite-scroll-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"] }]
-        }], propDecorators: { columns: [{
-                type: ContentChildren,
-                args: [AXDataTableColumnComponent]
-            }], onPageChanged: [{
-                type: Output
-            }], onRowClick: [{
-                type: Output
-            }], onRowDbClick: [{
-                type: Output
-            }], rowTemplate: [{
-                type: Input
-            }], emptyTemplate: [{
-                type: Input
-            }], showHeader: [{
-                type: Input
-            }], fetchDataMode: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], focusedRowChange: [{
-                type: Output
-            }], focusedRow: [{
-                type: Input
-            }], itemHeight: [{
-                type: Input
-            }], viewport: [{
-                type: ViewChild,
-                args: [CdkVirtualScrollViewport, { static: true }]
-            }], onScrolledIndexChanged: [{
-                type: Output
-            }], headerContainer: [{
-                type: ViewChild,
-                args: ['headerContainer']
-            }], footerContainer: [{
-                type: ViewChild,
-                args: ['footerContainer']
-            }], scrollableContainer: [{
-                type: ViewChild,
-                args: ['scrolling', { static: true }]
-            }] } });
-
 const COMPONENT = [
-    AXInfiniteScrollDataTableComponent,
     AXDataTableComponent,
     AXDataTableTextColumnComponent,
     AXRowIndexColumnComponent,
@@ -2294,8 +2255,8 @@ const MODULES = [
     CdkDragHandle,
 ];
 class AXDataTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableModule, imports: [CommonModule,
             AXCommonModule,
             ScrollingModule,
             AXTranslationModule,
@@ -2311,16 +2272,14 @@ class AXDataTableModule {
             CdkDropList,
             CdkDrag,
             CdkDragPlaceholder,
-            CdkDragHandle, AXInfiniteScrollDataTableComponent,
-            AXDataTableComponent,
+            CdkDragHandle, AXDataTableComponent,
             AXDataTableTextColumnComponent,
             AXRowIndexColumnComponent,
             AXRowSelectColumnComponent,
             AXRowExpandColumnComponent,
             AXRowCommandColumnComponent,
             AXRowDropdownCommandColumnComponent,
-            AXDataTableColumnResizableDirective], exports: [AXInfiniteScrollDataTableComponent,
-            AXDataTableComponent,
+            AXDataTableColumnResizableDirective], exports: [AXDataTableComponent,
             AXDataTableTextColumnComponent,
             AXRowIndexColumnComponent,
             AXRowSelectColumnComponent,
@@ -2328,7 +2287,7 @@ class AXDataTableModule {
             AXRowCommandColumnComponent,
             AXRowDropdownCommandColumnComponent,
             AXDataTableColumnResizableDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableModule, imports: [CommonModule,
             AXCommonModule,
             ScrollingModule,
             AXTranslationModule,
@@ -2339,13 +2298,12 @@ class AXDataTableModule {
             AXDecoratorModule,
             AXDropdownModule,
             AXFormatModule,
-            AXDataPagerModule, AXInfiniteScrollDataTableComponent,
-            AXDataTableComponent,
+            AXDataPagerModule, AXDataTableComponent,
             AXRowSelectColumnComponent,
             AXRowCommandColumnComponent,
             AXRowDropdownCommandColumnComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],
@@ -2358,5 +2316,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXBaseDataTable, AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableColumnResizableDirective, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXInfiniteScrollDataTableComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowExpandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
+export { AXBaseDataTable, AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableColumnResizableDirective, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowExpandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
 //# sourceMappingURL=acorex-components-data-table.mjs.map