@acorex/components 7.24.4 → 17.0.0

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

@@ -1,31 +1,35 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, inject, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgZone, EventEmitter, ContentChildren, Output, ChangeDetectorRef, Directive, HostListener, NgModule } from '@angular/core';
+import { Injectable, Input, Directive, HostListener, inject, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, EventEmitter, Output, ChangeDetectorRef, signal, ContentChildren, NgZone, NgModule } from '@angular/core';
+import { isBrowser } from '@acorex/core/platform';
+import { Subject, debounceTime, buffer, filter } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
-import * as i2$2 from '@acorex/core/format';
+import * as i2 from '@acorex/core/format';
 import { AXFormatService, AXFormatModule } from '@acorex/core/format';
 import { Memorize } from '@acorex/core/memorize';
-import * as i5$1 from '@acorex/components/common';
+import * as i5 from '@acorex/components/common';
 import { MXBaseComponent, convertArrayToDataSource, AXListDataSource, AXPagedComponent, AXCommonModule, AXRippleDirective } from '@acorex/components/common';
-import * as i2 from '@angular/cdk/scrolling';
-import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
-import sum from 'lodash-es/sum';
-import { Subject, buffer, debounceTime, filter } from 'rxjs';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2$1 from '@acorex/components/decorators';
+import * as i1 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
+import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i4 from '@acorex/components/skeleton';
-import { AXSkeletonModule } from '@acorex/components/skeleton';
-import * as i5 from '@acorex/components/button';
+import * as i3$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i1$1 from '@acorex/components/loading';
-import { AXLoadingModule } from '@acorex/components/loading';
-import * as i4$1 from '@acorex/components/dropdown';
+import * as i4 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { AXUnsubscriber } from '@acorex/core/utils';
-import { isBrowser } from '@acorex/core/platform';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5$1 from '@acorex/components/data-pager';
+import { AXDataPagerModule } from '@acorex/components/data-pager';
 import { AXResultModule } from '@acorex/components/result';
+import * as i4$1 from '@acorex/components/skeleton';
+import { AXSkeletonModule } from '@acorex/components/skeleton';
 import { AXTranslationModule } from '@acorex/core/translation';
+import * as i6 from '@angular/cdk/drag-drop';
+import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
+import * as i2$1 from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import sum from 'lodash-es/sum';
 
 class AXDataTableColumnComponent {
     constructor() {
@@ -63,6 +67,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                 type: Input
             }] } });
 
+class AXDataTableColumnResizableDirective {
+    constructor(el, renderer, ngZone, cdr) {
+        this.el = el;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.cdr = cdr;
+        this.resize$ = new Subject();
+        this.onMouseMoveRawBound = this.onMouseMoveRaw.bind(this);
+        this.onMouseUpBound = this.onMouseUp.bind(this);
+        this.resize$.pipe(debounceTime(10)).subscribe((event) => this.onMouseMove(event));
+    }
+    onMouseDown(event) {
+        if (isBrowser()) {
+            event.stopPropagation();
+            this.ngZone.runOutsideAngular(() => {
+                this.startX = event.pageX;
+                this.startWidth = this.el?.nativeElement?.parentElement.offsetWidth;
+                document.addEventListener('mousemove', this.onMouseMoveRawBound);
+                document.addEventListener('mouseup', this.onMouseUpBound);
+            });
+            this.cdr.detach(); // Detach the change detector
+        }
+    }
+    onMouseMoveRaw(event) {
+        this.resize$.next(event);
+    }
+    onMouseMove(event) {
+        if (isBrowser()) {
+            const newWidth = this.startWidth + (event.pageX - this.startX);
+            this.renderer.setStyle(this.el?.nativeElement?.parentElement, 'width', `${newWidth}px`);
+            this.column.width = `${newWidth}px`;
+        }
+    }
+    onMouseUp() {
+        document.removeEventListener('mousemove', this.onMouseMoveRawBound);
+        document.removeEventListener('mouseup', this.onMouseUpBound);
+        this.cdr.reattach(); // Reattach the change detector
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableColumnResizableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: AXDataTableColumnResizableDirective, 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: "17.3.2", ngImport: i0, type: AXDataTableColumnResizableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ax-table-column-resizble]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { column: [{
+                type: Input,
+                args: ['ax-table-column-resizble']
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
 class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
     constructor() {
         super(...arguments);
@@ -138,57 +196,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                 type: Input
             }] } });
 
-class AXDataTableComponent extends MXBaseComponent {
+class AXBaseDataTable extends MXBaseComponent {
     constructor() {
         super(...arguments);
-        this.ngZone = inject(NgZone);
-        this.onPageChanged = new EventEmitter();
-        this.clickSubject = new Subject();
-        this.onRowClick = new EventEmitter();
-        this.onRowDbClick = new EventEmitter();
-        this.showHeader = true;
-        this.fetchDataMode = 'auto';
         this.dataSource = convertArrayToDataSource([]);
-        this.loading = {
-            enabled: true,
-            animation: true,
-        };
-        this.isLoading = true;
-        this.hasItems = false;
-        this.totalRows = 0;
-        this.currentPage = 0;
-        this.totalPages = 0;
-        this.startRowIndex = 0;
-        this.lastIndex = 0;
-        this.focusedRowChange = new EventEmitter();
         this.selectedRowsChange = new EventEmitter();
         this._selectedRows = [];
-        this.itemHeight = 40;
-        this.width = '100%';
-        this.height = '100%';
-        this.onScrolledIndexChanged = new EventEmitter();
-    }
-    startFixedColumn() {
-        return this.columns?.toArray().filter((c) => c.fixed == 'start') ?? [];
-    }
-    endFixedColumn() {
-        return this.columns?.toArray().filter((c) => c.fixed == 'end') ?? [];
-    }
-    notFixedColumn() {
-        return this.columns?.toArray().filter((c) => !c.fixed) ?? [];
-    }
-    notFixedColumnCount() {
-        return this.columns?.toArray().filter((c) => !c.fixed).length ?? 0;
-    }
-    fixedColumnCount() {
-        return this.columns?.toArray().filter((c) => c.fixed).length ?? 0;
-    }
-    get focusedRow() {
-        return this._focusedRow;
-    }
-    set focusedRow(v) {
-        this._focusedRow = v;
-        this.focusedRowChange.emit(v);
     }
     get selectedRows() {
         return this._selectedRows;
@@ -203,274 +216,75 @@ class AXDataTableComponent extends MXBaseComponent {
     unSelectRows(...rows) {
         this.selectedRows = this.selectedRows.filter((c) => !rows.includes(c));
     }
-    trackByIdx(i) {
-        return i;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXBaseDataTable, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXBaseDataTable }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXBaseDataTable, decorators: [{
+            type: Injectable
+        }], propDecorators: { dataSource: [{
+                type: Input
+            }], selectedRowsChange: [{
+                type: Output
+            }], selectedRows: [{
+                type: Input
+            }] } });
+
+class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
+    constructor() {
+        super(...arguments);
+        this.grid = inject(AXBaseDataTable);
+        this.cdr = inject(ChangeDetectorRef);
+        this.allowSorting = false;
+        this.onItemClick = new EventEmitter();
     }
-    ngOnInit() {
-        super.ngOnInit();
-        this.listDataSource = new AXListDataSource({
-            source: this.dataSource,
-        });
-        this.listDataSource.source.onLoadingChanged.subscribe((data) => {
-            this.isLoading = 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);
-        });
+    get loadingEnabled() {
+        return false;
     }
-    _handleOnscrolledIndexChange(e) {
-        this.lastIndex = e;
-        this.onScrolledIndexChanged.emit({
-            component: this,
-            index: this.lastIndex,
-            isUserInteraction: true,
-        });
+    get cssClass() {
+        return 'ax-command-column';
     }
-    ngDoCheck() {
-        //this.copyFixedColumns();
-        this.updateHScroll();
-        //
-        this.updateWidth();
-        this.updateHeight();
-        //
-        this.updateTotalCount();
+}
+class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponent {
+    constructor() {
+        super(...arguments);
+        this._items = [];
+        this.items = [];
     }
-    updateTotalCount() {
-        this.startRowIndex = this.lastIndex;
-        if (this.startRowIndex < 1)
-            this.startRowIndex = 1;
-        if (this.startRowIndex > this.totalRows)
-            this.startRowIndex = this.totalRows;
+    get template() {
+        return this._template;
     }
-    updateHeight() {
-        this.height = `calc(100% - ${(this.headerContainer?.nativeElement.clientHeight ?? 0) +
-            (this.footerContainer?.nativeElement.clientHeight ?? 0)}px)`;
+    get name() {
+        return 'cl-dd-cmd';
     }
-    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`;
+    async handleOnOpened(rowData) {
+        if (Array.isArray(this.items)) {
+            this._items = this.items;
         }
-    }
-    updateHScroll() {
-        this.ngZone.runOutsideAngular(() => {
-            if (this.headerContainer) {
-                const headerContainer = this.headerContainer.nativeElement;
-                const left = this.scrollableContainer.nativeElement.scrollLeft;
-                headerContainer.style.transform = `translateX(${-left}px)`;
+        else
+            typeof this.items == 'function';
+        {
+            const result = this['items'](rowData);
+            if (Array.isArray(result)) {
+                this._items = result;
             }
-        });
-    }
-    // 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());
-        for (const row of originalRows) {
-            const fixedCells = Array.from(row.querySelectorAll('[data-fixed="start"]'));
-            const fixedRow = document.createElement('tr');
-            for (const cell of fixedCells) {
-                const clonedCell = cell.cloneNode(true);
-                fixedRow.appendChild(clonedCell);
+            else if (result instanceof Promise) {
+                this._items = await result;
             }
-            fixedColumnTable.appendChild(fixedRow);
         }
-        const scrollTop = this.getHostElement().querySelector('.cdk-virtual-scrollable').scrollTop;
-        fixedColumnTable.style.transform = `translateY(${-scrollTop}px)`;
-    }
-    render() {
-        this.viewport.checkViewportSize();
-        this.viewport.scrollToIndex(this.lastIndex);
-        this.cdr.markForCheck();
-    }
-    refresh() {
-        this.lastIndex = 0;
-        this.dataSource.refresh();
+        this.cdr.detectChanges();
     }
-    handleRowClick(event, item) {
-        this.handleRowSingleClick(event, item);
-        this.clickSubject.next({ event, item });
+    handleOnClosed() {
+        this._items = [];
     }
-    handleRowSingleClick(event, item) {
-        if (this.focusedRow == item) {
-            this.focusedRow = null;
-        }
-        else {
-            this.focusedRow = item;
-        }
-        //
-        this.onRowClick.emit({
-            component: this,
-            data: item,
+    handleOnItemClick(e, data) {
+        const args = {
+            component: this.grid,
             isUserInteraction: true,
-        });
-    }
-    handleRowDoubleClick(e, item) {
-        this.focusedRow = item;
-        //
-        this.onRowDbClick.emit({
-            component: this,
-            data: item,
-            isUserInteraction: true,
-        });
-    }
-    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();
-        }
-    }
-    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;
-    }
-    _handleOnScroll() {
-        this.updateHScroll();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", dataSource: "dataSource", loading: "loading", focusedRow: "focusedRow", selectedRows: "selectedRows", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", focusedRowChange: "focusedRowChange", selectedRowsChange: "selectedRowsChange", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], 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          {\n          <th [class.ax-interactive]=\"c.allowSorting\" (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n            [style.width]=\"c.width\">\n            @if(c.headerTemplate)\n            {\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            }\n            @else {\n            <div class=\"ax-caption\">\n              {{ c.caption }}\n              @if(getSort(c)){\n              <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n              }\n            </div>\n            }\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 [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight + 'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n          <colgroup>\n            @for(c of notFixedColumn();track c.name)\n            {\n            <col [style.width]=\"c.width\" />\n            }\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container *cdkVirtualFor=\"\n                let item of listDataSource;\n                templateCacheSize: 100;\n                let i = index;\n                trackBy: trackByIdx;\n                let rIndex = index\n              \">\n              <!------------------- custom row template------------------->\n              @if (rowTemplate != null) {\n              <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\">\n              </ng-container>\n              } @else {\n              <!------------------- normal row template------------------->\n              <tr [class.ax-state-focused]=\"focusedRow && item === focusedRow\" [attr.data-index]=\"rIndex\"\n                [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event, item)\">\n                <!------------------- start fixed column ------------------->\n\n                <!------------------- Not fixed column ------------------->\n                @for (c of notFixedColumn(); track c.name) {\n                <!------------------- custom cell template ------------------->\n                @if (c.cellTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: { data: item, rowIndex: rIndex } }\">\n                </ng-container>\n                } @else {\n                <!------------------- default cell template ------------------->\n                <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                  @if (item) {\n                  <!------------------- render cell ------------------->\n                  <ng-container\n                    *ngTemplateOutlet=\"c.template;context: { $implicit: { data: item, rowIndex: rIndex } }\"></ng-container>\n                  }\n                  @else {\n                  <!------------------- render loading ------------------->\n                  @if (c.loadingEnabled && loading) {\n                  <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                  }\n                  }\n                </td>\n                }\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>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-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-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-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-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-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-color-border-default));background-color:rgba(var(--ax-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-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-color-on-surface));text-align:center}ax-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-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-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-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-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-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-data-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], 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          {\n          <th [class.ax-interactive]=\"c.allowSorting\" (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n            [style.width]=\"c.width\">\n            @if(c.headerTemplate)\n            {\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            }\n            @else {\n            <div class=\"ax-caption\">\n              {{ c.caption }}\n              @if(getSort(c)){\n              <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n              }\n            </div>\n            }\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 [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight + 'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n          <colgroup>\n            @for(c of notFixedColumn();track c.name)\n            {\n            <col [style.width]=\"c.width\" />\n            }\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container *cdkVirtualFor=\"\n                let item of listDataSource;\n                templateCacheSize: 100;\n                let i = index;\n                trackBy: trackByIdx;\n                let rIndex = index\n              \">\n              <!------------------- custom row template------------------->\n              @if (rowTemplate != null) {\n              <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\">\n              </ng-container>\n              } @else {\n              <!------------------- normal row template------------------->\n              <tr [class.ax-state-focused]=\"focusedRow && item === focusedRow\" [attr.data-index]=\"rIndex\"\n                [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event, item)\">\n                <!------------------- start fixed column ------------------->\n\n                <!------------------- Not fixed column ------------------->\n                @for (c of notFixedColumn(); track c.name) {\n                <!------------------- custom cell template ------------------->\n                @if (c.cellTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: { data: item, rowIndex: rIndex } }\">\n                </ng-container>\n                } @else {\n                <!------------------- default cell template ------------------->\n                <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                  @if (item) {\n                  <!------------------- render cell ------------------->\n                  <ng-container\n                    *ngTemplateOutlet=\"c.template;context: { $implicit: { data: item, rowIndex: rIndex } }\"></ng-container>\n                  }\n                  @else {\n                  <!------------------- render loading ------------------->\n                  @if (c.loadingEnabled && loading) {\n                  <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                  }\n                  }\n                </td>\n                }\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>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-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-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-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-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-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-color-border-default));background-color:rgba(var(--ax-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-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-color-on-surface));text-align:center}ax-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-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-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-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-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-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-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
-            }], dataSource: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], focusedRowChange: [{
-                type: Output
-            }], focusedRow: [{
-                type: Input
-            }], selectedRowsChange: [{
-                type: Output
-            }], selectedRows: [{
-                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 }]
-            }] } });
-
-class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
-    constructor() {
-        super(...arguments);
-        this.grid = inject(AXDataTableComponent);
-        this.cdr = inject(ChangeDetectorRef);
-        this.allowSorting = false;
-        this.onItemClick = new EventEmitter();
-    }
-    get loadingEnabled() {
-        return false;
-    }
-    get cssClass() {
-        return 'ax-command-column';
-    }
-}
-class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponent {
-    constructor() {
-        super(...arguments);
-        this._items = [];
-        this.items = [];
-    }
-    get template() {
-        return this._template;
-    }
-    get name() {
-        return 'cl-dd-cmd';
-    }
-    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;
-            }
-            else if (result instanceof Promise) {
-                this._items = await result;
-            }
-        }
-        this.cdr.detectChanges();
-    }
-    handleOnClosed() {
-        this._items = [];
-    }
-    handleOnItemClick(e, data) {
-        const args = {
-            component: this.grid,
-            isUserInteraction: true,
-            nativeEvent: e,
-            data,
-            name: e.name,
-        };
-        this.onItemClick.emit(args);
+            nativeEvent: e,
+            data,
+            name: e.name,
+        };
+        this.onItemClick.emit(args);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowDropdownCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
@@ -480,35 +294,27 @@ class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponen
             },
         ], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
     @if (row.data) {
-    <div>
-      <button [axRipple]>
-        <ax-icon icon="ax-icon ax-icon-solid ax-icon-more-horizontal"></ax-icon>
-        <ax-dropdown-panel
-          [adaptivityEnabled]="true"
-          (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 {
-          <div panel style="padding: 0.875rem;">
-            <ax-loading></ax-loading>
-          </div>
-          }
-        </ax-dropdown-panel>
-      </button>
-    </div>
+      <div>
+        <button [axRipple]>
+          <ax-icon icon="ax-icon ax-icon-solid ax-icon-more-horizontal"></ax-icon>
+          <ax-dropdown-panel [adaptivityEnabled]="true" (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 {
+              <div panel style="padding: 0.875rem;">
+                <ax-loading></ax-loading>
+              </div>
+            }
+          </ax-dropdown-panel>
+        </button>
+      </div>
     }
     <ng-template #loading>
       <div panel style="padding: 0.875rem;">
         <ax-loading></ax-loading>
       </div>
     </ng-template>
-  </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: i5$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: i5.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowDropdownCommandColumnComponent, decorators: [{
             type: Component,
@@ -516,28 +322,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                     selector: 'ax-dropdown-command-column',
                     template: ` <ng-template let-row>
     @if (row.data) {
-    <div>
-      <button [axRipple]>
-        <ax-icon icon="ax-icon ax-icon-solid ax-icon-more-horizontal"></ax-icon>
-        <ax-dropdown-panel
-          [adaptivityEnabled]="true"
-          (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 {
-          <div panel style="padding: 0.875rem;">
-            <ax-loading></ax-loading>
-          </div>
-          }
-        </ax-dropdown-panel>
-      </button>
-    </div>
+      <div>
+        <button [axRipple]>
+          <ax-icon icon="ax-icon ax-icon-solid ax-icon-more-horizontal"></ax-icon>
+          <ax-dropdown-panel [adaptivityEnabled]="true" (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 {
+              <div panel style="padding: 0.875rem;">
+                <ax-loading></ax-loading>
+              </div>
+            }
+          </ax-dropdown-panel>
+        </button>
+      </div>
     }
     <ng-template #loading>
       <div panel style="padding: 0.875rem;">
@@ -601,35 +399,39 @@ class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
                 useExisting: AXRowCommandColumnComponent,
             },
         ], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
-    @if (row.data) { @for (item of getItems(row.data); track $index) {
-    <button
-      [style.color]="'rgba(var(--ax-color-' + (item.color ?? 'primary)')"
-      [disabled]="item.disabled"
-      [class.ax-state-disabled]="item.disabled"
-      [axRipple]="!item.disabled"
-      (click)="handleOnItemClick($event, item, row.data)"
-    >
-      <ax-icon [icon]="item.icon"></ax-icon>
-    </button>
-    } }
-  </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i5$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    @if (row.data) {
+      @for (item of getItems(row.data); track $index) {
+        <button
+          [style.color]="'rgba(var(--ax-color-' + (item.color ?? 'primary)')"
+          [disabled]="item.disabled"
+          [class.ax-state-disabled]="item.disabled"
+          [axRipple]="!item.disabled"
+          (click)="handleOnItemClick($event, item, row.data)"
+        >
+          <ax-icon [icon]="item.icon"></ax-icon>
+        </button>
+      }
+    }
+  </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i5.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-command-column',
                     template: ` <ng-template let-row>
-    @if (row.data) { @for (item of getItems(row.data); track $index) {
-    <button
-      [style.color]="'rgba(var(--ax-color-' + (item.color ?? 'primary)')"
-      [disabled]="item.disabled"
-      [class.ax-state-disabled]="item.disabled"
-      [axRipple]="!item.disabled"
-      (click)="handleOnItemClick($event, item, row.data)"
-    >
-      <ax-icon [icon]="item.icon"></ax-icon>
-    </button>
-    } }
+    @if (row.data) {
+      @for (item of getItems(row.data); track $index) {
+        <button
+          [style.color]="'rgba(var(--ax-color-' + (item.color ?? 'primary)')"
+          [disabled]="item.disabled"
+          [class.ax-state-disabled]="item.disabled"
+          [axRipple]="!item.disabled"
+          (click)="handleOnItemClick($event, item, row.data)"
+        >
+          <ax-icon [icon]="item.icon"></ax-icon>
+        </button>
+      }
+    }
   </ng-template>`,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -652,7 +454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
 class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
     constructor() {
         super(...arguments);
-        this.grid = inject(AXDataTableComponent);
+        this.grid = inject(AXBaseDataTable);
         this.unsubscriber = inject(AXUnsubscriber);
         this.padZero = false;
         this.formatCount = 1;
@@ -666,9 +468,7 @@ class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
     }
     ngOnInit() {
         if (this.padZero) {
-            this.grid.dataSource.onChanged
-                .pipe(this.unsubscriber.takeUntilDestroy)
-                .subscribe((c) => {
+            this.grid.dataSource.onChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
                 this.formatCount = c.totalCount.toString().length;
             });
         }
@@ -687,27 +487,15 @@ class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
                 useExisting: AXRowIndexColumnComponent,
             },
         ], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
-    {{
-      row.rowIndex + 1
-        | format
-          : 'number'
-          : { zeroPadLength: this.formatCount, thousandSeparator: false }
-        | async
-    }}
-  </ng-template>`, isInline: true, dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    {{ row.rowIndex + 1 | format: 'number' : { zeroPadLength: this.formatCount, thousandSeparator: false } | async }}
+  </ng-template>`, isInline: true, dependencies: [{ kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-index-column',
                     template: ` <ng-template let-row>
-    {{
-      row.rowIndex + 1
-        | format
-          : 'number'
-          : { zeroPadLength: this.formatCount, thousandSeparator: false }
-        | async
-    }}
+    {{ row.rowIndex + 1 | format: 'number' : { zeroPadLength: this.formatCount, thousandSeparator: false } | async }}
   </ng-template>`,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -730,7 +518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
 class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
     constructor() {
         super(...arguments);
-        this.grid = inject(AXDataTableComponent);
+        this.grid = inject(AXBaseDataTable);
     }
     get template() {
         return this._template;
@@ -759,13 +547,7 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
                 useExisting: AXRowSelectColumnComponent,
             },
         ], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
-    <input
-      class="ax-checkbox"
-      type="checkbox"
-      [disabled]="!row.data"
-      (change)="handleChange(row.data)"
-      [checked]="isSelected(row.data)"
-    />
+    <input class="ax-checkbox" type="checkbox" [disabled]="!row.data" (change)="handleChange(row.data)" [checked]="isSelected(row.data)" />
   </ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowSelectColumnComponent, decorators: [{
@@ -773,13 +555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
             args: [{
                     selector: 'ax-select-column',
                     template: ` <ng-template let-row>
-    <input
-      class="ax-checkbox"
-      type="checkbox"
-      [disabled]="!row.data"
-      (change)="handleChange(row.data)"
-      [checked]="isSelected(row.data)"
-    />
+    <input class="ax-checkbox" type="checkbox" [disabled]="!row.data" (change)="handleChange(row.data)" [checked]="isSelected(row.data)" />
   </ng-template>`,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -796,61 +572,486 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                 args: [TemplateRef]
             }] } });
 
-class AXDataTableColumnResizableDirective {
-    constructor(el, renderer, ngZone, cdr) {
-        this.el = el;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.cdr = cdr;
-        this.resize$ = new Subject();
-        this.onMouseMoveRawBound = this.onMouseMoveRaw.bind(this);
-        this.onMouseUpBound = this.onMouseUp.bind(this);
-        this.resize$.pipe(debounceTime(10)).subscribe((event) => this.onMouseMove(event));
+class AXDataTableComponent extends AXBaseDataTable {
+    constructor() {
+        super(...arguments);
+        this.onColumnsOrderChanged = new EventEmitter();
+        this.displayedRows = signal([]);
+        this.page = signal(0);
+        this.pageSize = signal(0);
+        this.columnsList = signal([]);
+        this.showHeader = true;
+        this.fixedHeader = true;
+        this.itemHeight = 40;
+        this.fetchDataMode = 'auto';
+        this.loading = {
+            enabled: true,
+            animation: true,
+        };
+        this.isLoading = signal(true);
+        this.hasItems = false;
+        this.totalRows = 0;
+        this.currentPage = 0;
+        this.totalPages = 0;
+        this.startRowIndex = 0;
+        this.lastIndex = 0;
+        this.focusedRowChange = new EventEmitter();
+        this.onRowClick = new EventEmitter();
+        this.onRowDbClick = new EventEmitter();
+        this.clickSubject = new Subject();
     }
-    onMouseDown(event) {
-        if (isBrowser()) {
-            event.stopPropagation();
-            this.ngZone.runOutsideAngular(() => {
-                this.startX = event.pageX;
-                this.startWidth = this.el?.nativeElement?.parentElement.offsetWidth;
-                document.addEventListener('mousemove', this.onMouseMoveRawBound);
-                document.addEventListener('mouseup', this.onMouseUpBound);
-            });
-            this.cdr.detach(); // Detach the change detector
-        }
+    ngAfterViewInit() {
+        this.calculateStickyColumnsPositions();
+        this.columnsList.set(this.columns.toArray());
     }
-    onMouseMoveRaw(event) {
-        this.resize$.next(event);
+    drop(event) {
+        moveItemInArray(this.columnsList(), event.previousIndex, event.currentIndex);
+        this.onColumnsOrderChanged.emit({
+            component: this,
+            data: { event },
+            isUserInteraction: true,
+        });
     }
-    onMouseMove(event) {
-        if (isBrowser()) {
-            const newWidth = this.startWidth + (event.pageX - this.startX);
-            this.renderer.setStyle(this.el?.nativeElement?.parentElement, 'width', `${newWidth}px`);
-            this.column.width = `${newWidth}px`;
+    ngOnInit() {
+        super.ngOnInit();
+        this.dataSource.useCache = false;
+        this.totalRows = this.dataSource.items.length;
+        this.dataSource.onLoadingChanged.subscribe((data) => {
+            this.isLoading.set(data);
+        });
+        this.dataSource.onChanged.subscribe((data) => {
+            this.displayedRows.set(data.items);
+            this.totalRows = data.totalCount;
+            this.hasItems = data.totalCount > 0;
+        });
+        //
+        this.clickSubject
+            .pipe(buffer(this.clickSubject.pipe(debounceTime(250))), filter((clickArray) => clickArray.length === 2))
+            .subscribe((clickArray) => {
+            this.handleRowDoubleClick(clickArray[0].event, clickArray[0].item);
+        });
+    }
+    get focusedRow() {
+        return this._focusedRow;
+    }
+    set focusedRow(v) {
+        this._focusedRow = v;
+        this.focusedRowChange.emit(v);
+    }
+    handleRowClick(event, item) {
+        this.handleRowSingleClick(event, item);
+        this.clickSubject.next({ event, item });
+    }
+    handleRowSingleClick(event, item) {
+        if (this.focusedRow == item) {
+            this.focusedRow = null;
         }
+        else {
+            this.focusedRow = item;
+        }
+        //
+        this.onRowClick.emit({
+            component: this,
+            data: item,
+            isUserInteraction: true,
+        });
     }
-    onMouseUp() {
-        document.removeEventListener('mousemove', this.onMouseMoveRawBound);
-        document.removeEventListener('mouseup', this.onMouseUpBound);
-        this.cdr.reattach(); // Reattach the change detector
+    onPageChanged(event) {
+        if (event.page - 1 != this.page()) {
+            this.page.set(event.page - 1);
+            this.displayedRows.set(new Array(this.dataSource.pageSize));
+            this.dataSource.setPage(event.page - 1);
+        }
+        else if (event.take != this.pageSize()) {
+            this.pageSize.set(event.take);
+            this.displayedRows.set(new Array(this.dataSource.pageSize));
+            this.dataSource.setPageSize(event.take);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableColumnResizableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: AXDataTableColumnResizableDirective, 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: "17.3.2", ngImport: i0, type: AXDataTableColumnResizableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ax-table-column-resizble]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { column: [{
-                type: Input,
-                args: ['ax-table-column-resizble']
-            }], onMouseDown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
+    handleRowDoubleClick(e, item) {
+        this.focusedRow = item;
+        //
+        this.onRowDbClick.emit({
+            component: this,
+            data: item,
+            isUserInteraction: true,
+        });
+    }
+    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();
+        }
+    }
+    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;
+    }
+    refresh() {
+        this.lastIndex = 0;
+        this.dataSource.refresh();
+    }
+    calculateStickyColumnsPositions() {
+        let totalWidth = 0;
+        let accumulatedWidthFromStart = 0;
+        console.log('columns: ', this.columns);
+        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);
+            if (column.fixed === 'start' && !isNaN(width)) {
+                column['stickyStart'] = accumulatedWidthFromStart + 'px';
+                lastStartColumn = column;
+            }
+            if (!isNaN(width)) {
+                accumulatedWidthFromStart += width;
+            }
+        });
+        if (lastStartColumn)
+            lastStartColumn['isLastFixedColumn'] = true;
+        let accumulatedWidthFromEnd = 0;
+        let firstEndColumn;
+        for (let i = this.columns.length - 1; i >= 0; i--) {
+            const column = this.columns.get(i);
+            const width = parseInt(column.width);
+            if (column.fixed === 'end' && !isNaN(width)) {
+                column['stickyEnd'] = accumulatedWidthFromEnd + 'px';
+                firstEndColumn = column;
+            }
+            if (!isNaN(width)) {
+                accumulatedWidthFromEnd += width;
+            }
+        }
+        if (firstEndColumn)
+            firstEndColumn['isFirstFixedColumn'] = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXDataTableComponent, selector: "ax-data-table", inputs: { dataSource: "dataSource", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", fixedHeader: "fixedHeader", itemHeight: "itemHeight", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { onColumnsOrderChanged: "onColumnsOrderChanged", focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
+            {
+                provide: AXBaseDataTable,
+                useExisting: AXDataTableComponent,
+            },
+        ], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], 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 cdkDropList cdkScrollable cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event)\">\n          @for (column of columnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"column.fixed\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"column.allowSorting\"\n              (click)=\"column.allowSorting ? handleColumnClick($event, column) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"column.fixed && column.width\"\n              [style.width]=\"column.width\"\n              [class.sticky-end]=\"column.fixed === 'end'\"\n              [class.sticky-start]=\"column.fixed === 'start'\"\n              [class.isFirst]=\"column['isFirstFixedColumn']\"\n              [class.isLast]=\"column['isLastFixedColumn']\"\n              [style.--sticky-start]=\"column['stickyStart']\"\n              [style.--sticky-end]=\"column['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                {{ column.caption }}\n                @if (getSort(column)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(column) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          <th></th>\n        </tr>\n      </thead>\n    }\n    <tbody>\n      @for (row of displayedRows(); track $index) {\n        @if (rowTemplate) {\n          <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: $index } }\"> </ng-container>\n        } @else {\n          <tr\n            [class.ax-state-focused]=\"focusedRow && row === focusedRow\"\n            [attr.data-index]=\"$index\"\n            [class.ax-state-selected]=\"selectedRows.includes(row)\"\n            style.height=\"{{ itemHeight }}px\"\n            (click)=\"handleRowClick($event, row)\"\n          >\n            @for (c of columnsList(); track $index) {\n              @if (c.cellTemplate) {\n                <ng-container *ngTemplateOutlet=\"c.cellTemplate; context: { $implicit: { data: row, rowIndex: $index } }\"> </ng-container>\n              } @else {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [class.sticky-end]=\"c.fixed === 'end'\"\n                  [class.sticky-start]=\"c.fixed === 'start'\"\n                  [class.isFirst]=\"c['isFirstFixedColumn']\"\n                  [class.isLast]=\"c['isLastFixedColumn']\"\n                  [style.--sticky-start]=\"c['stickyStart']\"\n                  [style.--sticky-end]=\"c['stickyEnd']\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  @if (row && !isLoading()) {\n                    <ng-container *ngTemplateOutlet=\"c.template; context: { $implicit: { data: row, rowIndex: $index } }\"></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading) {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                </td>\n              }\n            }\n            <td></td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<div class=\"ax-table-footer\" #footerContainer>\n  <ax-data-pager\n    class=\"ax-justify-center md:ax-justify-between\"\n    [displayMode]=\"'custom'\"\n    (onChanged)=\"onPageChanged($event)\"\n    [total]=\"dataSource.totalCount\"\n    [size]=\"dataSource.pageSize\"\n  >\n    <ax-prefix class=\"ax-hidden lg:ax-flex\">\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-flex lg:ax-hidden\">\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-hidden md:ax-block\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  </ax-data-pager>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</div>\n", styles: [".ax-dark ax-data-table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}@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-color-border-default))}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-color-border-default))}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-color-border-default))}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-color-border-default))}}@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-color-border-default))}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-color-border-default))}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-color-border-default))}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-color-border-default))}}ax-data-table{display:flex;flex-direction:column;height:100%;width:100%;font-size:.875rem;line-height:1.25rem;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper{overflow:auto;width:100%;flex:1;border-radius:var(--ax-rounded-border-default)}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-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}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-color-border-default));background-color:rgba(var(--ax-color-on-surface));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}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-color-neutral-200))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}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;background-color:rgba(var(--ax-color-on-surface));border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-color-border-default)),0 -1px rgba(var(--ax-color-border-default))}@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-color-border-default))}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-color-border-default))}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-color-border-default))}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-color-border-default))}}@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-color-surface));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-color-border-default))}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-color-border-default))}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-color-border-default))}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-color-border-default))}}ax-data-table .ax-data-table-wrapper table tbody tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}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-color-border-default));background-color:rgba(var(--ax-color-surface));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-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));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-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;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}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-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding-inline-start:.875rem;padding-inline-end:.875rem;padding-top:.5rem;padding-bottom:.5rem}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-head-cell{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-color-primary-900),.2),0 8px 10px 1px rgba(var(--ax-color-primary-900),.14),0 3px 14px 2px rgba(var(--ax-color-primary-900),.12);border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i4$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i5$1.AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "component", type: i5$1.AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: i5$1.AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: i5$1.AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: i5$1.AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: i5$1.AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: i5$1.AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "directive", type: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, inputs: ['dataSource'], providers: [
+                        {
+                            provide: AXBaseDataTable,
+                            useExisting: AXDataTableComponent,
+                        },
+                    ], 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 cdkDropList cdkScrollable cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"drop($event)\">\n          @for (column of columnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"column.fixed\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"column.allowSorting\"\n              (click)=\"column.allowSorting ? handleColumnClick($event, column) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"column.fixed && column.width\"\n              [style.width]=\"column.width\"\n              [class.sticky-end]=\"column.fixed === 'end'\"\n              [class.sticky-start]=\"column.fixed === 'start'\"\n              [class.isFirst]=\"column['isFirstFixedColumn']\"\n              [class.isLast]=\"column['isLastFixedColumn']\"\n              [style.--sticky-start]=\"column['stickyStart']\"\n              [style.--sticky-end]=\"column['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                {{ column.caption }}\n                @if (getSort(column)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(column) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          <th></th>\n        </tr>\n      </thead>\n    }\n    <tbody>\n      @for (row of displayedRows(); track $index) {\n        @if (rowTemplate) {\n          <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: $index } }\"> </ng-container>\n        } @else {\n          <tr\n            [class.ax-state-focused]=\"focusedRow && row === focusedRow\"\n            [attr.data-index]=\"$index\"\n            [class.ax-state-selected]=\"selectedRows.includes(row)\"\n            style.height=\"{{ itemHeight }}px\"\n            (click)=\"handleRowClick($event, row)\"\n          >\n            @for (c of columnsList(); track $index) {\n              @if (c.cellTemplate) {\n                <ng-container *ngTemplateOutlet=\"c.cellTemplate; context: { $implicit: { data: row, rowIndex: $index } }\"> </ng-container>\n              } @else {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [class.sticky-end]=\"c.fixed === 'end'\"\n                  [class.sticky-start]=\"c.fixed === 'start'\"\n                  [class.isFirst]=\"c['isFirstFixedColumn']\"\n                  [class.isLast]=\"c['isLastFixedColumn']\"\n                  [style.--sticky-start]=\"c['stickyStart']\"\n                  [style.--sticky-end]=\"c['stickyEnd']\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  @if (row && !isLoading()) {\n                    <ng-container *ngTemplateOutlet=\"c.template; context: { $implicit: { data: row, rowIndex: $index } }\"></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading) {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                </td>\n              }\n            }\n            <td></td>\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<div class=\"ax-table-footer\" #footerContainer>\n  <ax-data-pager\n    class=\"ax-justify-center md:ax-justify-between\"\n    [displayMode]=\"'custom'\"\n    (onChanged)=\"onPageChanged($event)\"\n    [total]=\"dataSource.totalCount\"\n    [size]=\"dataSource.pageSize\"\n  >\n    <ax-prefix class=\"ax-hidden lg:ax-flex\">\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-flex lg:ax-hidden\">\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-hidden md:ax-block\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  </ax-data-pager>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</div>\n", styles: [".ax-dark ax-data-table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}@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-color-border-default))}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-color-border-default))}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-color-border-default))}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-color-border-default))}}@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-color-border-default))}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-color-border-default))}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-color-border-default))}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-color-border-default))}}ax-data-table{display:flex;flex-direction:column;height:100%;width:100%;font-size:.875rem;line-height:1.25rem;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper{overflow:auto;width:100%;flex:1;border-radius:var(--ax-rounded-border-default)}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-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}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-color-border-default));background-color:rgba(var(--ax-color-on-surface));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}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-color-neutral-200))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}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;background-color:rgba(var(--ax-color-on-surface));border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-color-border-default)),0 -1px rgba(var(--ax-color-border-default))}@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-color-border-default))}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-color-border-default))}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-color-border-default))}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-color-border-default))}}@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-color-surface));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-color-border-default))}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-color-border-default))}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-color-border-default))}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-color-border-default))}}ax-data-table .ax-data-table-wrapper table tbody tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}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-color-border-default));background-color:rgba(var(--ax-color-surface));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-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));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-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;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}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-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding-inline-start:.875rem;padding-inline-end:.875rem;padding-top:.5rem;padding-bottom:.5rem}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-head-cell{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-color-primary-900),.2),0 8px 10px 1px rgba(var(--ax-color-primary-900),.14),0 3px 14px 2px rgba(var(--ax-color-primary-900),.12);border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));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"] }]
+        }], propDecorators: { onColumnsOrderChanged: [{
+                type: Output
+            }], columns: [{
+                type: ContentChildren,
+                args: [AXDataTableColumnComponent]
+            }], rowTemplate: [{
+                type: Input
+            }], emptyTemplate: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], fixedHeader: [{
+                type: Input
+            }], itemHeight: [{
+                type: Input
+            }], fetchDataMode: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], focusedRow: [{
+                type: Input
+            }], focusedRowChange: [{
+                type: Output
+            }], onRowClick: [{
+                type: Output
+            }], onRowDbClick: [{
+                type: Output
+            }] } });
+
+class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
+    constructor() {
+        super(...arguments);
+        this.ngZone = inject(NgZone);
+        this.onPageChanged = new EventEmitter();
+        this.clickSubject = new Subject();
+        this.onRowClick = new EventEmitter();
+        this.onRowDbClick = new EventEmitter();
+        this.showHeader = true;
+        this.fetchDataMode = 'auto';
+        this.loading = {
+            enabled: true,
+            animation: true,
+        };
+        this.isLoading = signal(true);
+        this.hasItems = false;
+        this.totalRows = 0;
+        this.currentPage = 0;
+        this.totalPages = 0;
+        this.startRowIndex = 0;
+        this.lastIndex = 0;
+        this.focusedRowChange = new EventEmitter();
+        this.itemHeight = 40;
+        this.width = '100%';
+        this.height = '100%';
+        this.onScrolledIndexChanged = new EventEmitter();
+    }
+    startFixedColumn() {
+        return this.columns?.toArray().filter((c) => c.fixed == 'start') ?? [];
+    }
+    endFixedColumn() {
+        return this.columns?.toArray().filter((c) => c.fixed == 'end') ?? [];
+    }
+    notFixedColumn() {
+        return this.columns?.toArray().filter((c) => !c.fixed) ?? [];
+    }
+    notFixedColumnCount() {
+        return this.columns?.toArray().filter((c) => !c.fixed).length ?? 0;
+    }
+    fixedColumnCount() {
+        return this.columns?.toArray().filter((c) => c.fixed).length ?? 0;
+    }
+    get focusedRow() {
+        return this._focusedRow;
+    }
+    set focusedRow(v) {
+        this._focusedRow = v;
+        this.focusedRowChange.emit(v);
+    }
+    trackByIdx(i) {
+        return i;
+    }
+    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);
+        });
+    }
+    _handleOnscrolledIndexChange(e) {
+        this.lastIndex = e;
+        this.onScrolledIndexChanged.emit({
+            component: this,
+            index: this.lastIndex,
+            isUserInteraction: true,
+        });
+    }
+    ngDoCheck() {
+        //this.copyFixedColumns();
+        this.updateHScroll();
+        //
+        this.updateWidth();
+        this.updateHeight();
+        //
+        this.updateTotalCount();
+    }
+    updateTotalCount() {
+        this.startRowIndex = this.lastIndex;
+        if (this.startRowIndex < 1)
+            this.startRowIndex = 1;
+        if (this.startRowIndex > this.totalRows)
+            this.startRowIndex = this.totalRows;
+    }
+    updateHeight() {
+        this.height = `calc(100% - ${(this.headerContainer?.nativeElement.clientHeight ?? 0) + (this.footerContainer?.nativeElement.clientHeight ?? 0)}px)`;
+    }
+    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`;
+        }
+    }
+    updateHScroll() {
+        this.ngZone.runOutsideAngular(() => {
+            if (this.headerContainer) {
+                const headerContainer = this.headerContainer.nativeElement;
+                const left = this.scrollableContainer.nativeElement.scrollLeft;
+                headerContainer.style.transform = `translateX(${-left}px)`;
+            }
+        });
+    }
+    // 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());
+        for (const row of originalRows) {
+            const fixedCells = Array.from(row.querySelectorAll('[data-fixed="start"]'));
+            const fixedRow = 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)`;
+    }
+    render() {
+        this.viewport.checkViewportSize();
+        this.viewport.scrollToIndex(this.lastIndex);
+        this.cdr.markForCheck();
+    }
+    refresh() {
+        this.lastIndex = 0;
+        this.listDataSource.refresh();
+    }
+    handleRowClick(event, item) {
+        this.handleRowSingleClick(event, item);
+        this.clickSubject.next({ event, item });
+    }
+    handleRowSingleClick(event, item) {
+        if (this.focusedRow == item) {
+            this.focusedRow = null;
+        }
+        else {
+            this.focusedRow = item;
+        }
+        //
+        this.onRowClick.emit({
+            component: this,
+            data: item,
+            isUserInteraction: true,
+        });
+    }
+    handleRowDoubleClick(e, item) {
+        this.focusedRow = item;
+        //
+        this.onRowDbClick.emit({
+            component: this,
+            data: item,
+            isUserInteraction: true,
+        });
+    }
+    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();
+        }
+    }
+    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;
+    }
+    _handleOnScroll() {
+        this.updateHScroll();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXInfiniteScrollDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXInfiniteScrollDataTableComponent, selector: "ax-infinite-scroll-data-table", inputs: { dataSource: "dataSource", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", focusedRowChange: "focusedRowChange", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [
+            { provide: AXPagedComponent, useExisting: AXInfiniteScrollDataTableComponent },
+            {
+                provide: AXBaseDataTable,
+                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                @if (c.headerTemplate) {\n                  <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n                } @else {\n                  <div class=\"ax-caption\">\n                    {{ c.caption }}\n                    @if (getSort(c)) {\n                      <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                    }\n                  </div>\n                }\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=\"let item of listDataSource; templateCacheSize: 100; let i = index; trackBy: trackByIdx; let rIndex = index\"\n            >\n              <!------------------- custom row template------------------->\n              @if (rowTemplate != null) {\n                <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\"> </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                    <!------------------- custom cell template ------------------->\n                    @if (c.cellTemplate) {\n                      <ng-container *ngTemplateOutlet=\"c.cellTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\">\n                      </ng-container>\n                    } @else {\n                      <!------------------- default cell template ------------------->\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.template; context: { $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                  }\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-dark ax-infinite-scroll-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-infinite-scroll-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-infinite-scroll-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-infinite-scroll-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-infinite-scroll-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-infinite-scroll-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-infinite-scroll-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));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-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}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-color-border-default));background-color:rgba(var(--ax-color-on-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-color-neutral-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-color-neutral-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-color-on-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-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-color-primary-200));color:rgba(var(--ax-color-primary-fore-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-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-color-primary-300));color:rgba(var(--ax-color-primary-fore-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-color-primary-400));color:rgba(var(--ax-color-primary-fore))}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-color-border-default));background-color:rgba(var(--ax-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-color-on-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-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;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-color-border-default));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: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2$1.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i3$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", 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,
+                        },
+                    ], inputs: ['dataSource'], 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                @if (c.headerTemplate) {\n                  <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n                } @else {\n                  <div class=\"ax-caption\">\n                    {{ c.caption }}\n                    @if (getSort(c)) {\n                      <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                    }\n                  </div>\n                }\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=\"let item of listDataSource; templateCacheSize: 100; let i = index; trackBy: trackByIdx; let rIndex = index\"\n            >\n              <!------------------- custom row template------------------->\n              @if (rowTemplate != null) {\n                <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\"> </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                    <!------------------- custom cell template ------------------->\n                    @if (c.cellTemplate) {\n                      <ng-container *ngTemplateOutlet=\"c.cellTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\">\n                      </ng-container>\n                    } @else {\n                      <!------------------- default cell template ------------------->\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.template; context: { $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                  }\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-dark ax-infinite-scroll-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-infinite-scroll-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-infinite-scroll-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-infinite-scroll-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-infinite-scroll-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-infinite-scroll-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-infinite-scroll-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));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-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}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-color-border-default));background-color:rgba(var(--ax-color-on-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-color-neutral-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-color-neutral-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-color-on-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-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-color-primary-200));color:rgba(var(--ax-color-primary-fore-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-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-color-primary-300));color:rgba(var(--ax-color-primary-fore-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-color-primary-400));color:rgba(var(--ax-color-primary-fore))}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-color-border-default));background-color:rgba(var(--ax-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-color-on-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-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;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-color-border-default));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,
@@ -872,10 +1073,16 @@ const MODULES = [
     AXDropdownModule,
     AXFormatModule,
     AXRippleDirective,
+    AXDataPagerModule,
+    CdkDropList,
+    CdkDrag,
+    CdkDragPlaceholder,
+    CdkDragHandle,
 ];
 class AXDataTableModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableModule, declarations: [AXDataTableComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableModule, declarations: [AXInfiniteScrollDataTableComponent,
+            AXDataTableComponent,
             AXDataTableTextColumnComponent,
             AXRowIndexColumnComponent,
             AXRowSelectColumnComponent,
@@ -892,7 +1099,13 @@ class AXDataTableModule {
             AXButtonModule,
             AXDropdownModule,
             AXFormatModule,
-            AXRippleDirective], exports: [AXDataTableComponent,
+            AXRippleDirective,
+            AXDataPagerModule,
+            CdkDropList,
+            CdkDrag,
+            CdkDragPlaceholder,
+            CdkDragHandle], exports: [AXInfiniteScrollDataTableComponent,
+            AXDataTableComponent,
             AXDataTableTextColumnComponent,
             AXRowIndexColumnComponent,
             AXRowSelectColumnComponent,
@@ -909,7 +1122,8 @@ class AXDataTableModule {
             AXSkeletonModule,
             AXButtonModule,
             AXDropdownModule,
-            AXFormatModule] }); }
+            AXFormatModule,
+            AXDataPagerModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableModule, decorators: [{
             type: NgModule,
@@ -925,5 +1139,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableColumnResizableDirective, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
+export { AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableColumnResizableDirective, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXInfiniteScrollDataTableComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
 //# sourceMappingURL=acorex-components-data-table.mjs.map