@acorex/components 16.0.2 → 17.0.1

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

@@ -0,0 +1,1143 @@
+import * as i5 from '@acorex/components/common';
+import { MXBaseComponent, convertArrayToDataSource, AXListDataSource, AXPagedComponent, AXCommonModule, AXRippleDirective } from '@acorex/components/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Injectable, Input, Output, Directive, HostListener, inject, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, 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 from '@acorex/core/format';
+import { AXFormatService, AXFormatModule } from '@acorex/core/format';
+import { Memorize } from '@acorex/core/memorize';
+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 i3$1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i4 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import { AXUnsubscriber } from '@acorex/core/utils';
+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 AXBaseDataTable extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.dataSource = convertArrayToDataSource([]);
+        this.selectedRowsChange = new EventEmitter();
+        this._selectedRows = [];
+    }
+    get selectedRows() {
+        return this._selectedRows;
+    }
+    set selectedRows(v) {
+        this._selectedRows = v;
+        this.selectedRowsChange.emit(v);
+    }
+    selectRows(...rows) {
+        this.selectedRows = [...this.selectedRows, ...rows];
+    }
+    unSelectRows(...rows) {
+        this.selectedRows = this.selectedRows.filter((c) => !rows.includes(c));
+    }
+    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 AXDataTableColumnComponent {
+    constructor() {
+        this.width = 'auto';
+        this.allowSorting = false;
+        this.allowResizing = false;
+        this.sortIndex = undefined;
+        this.sortOrder = undefined;
+    }
+    get cssClass() {
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableColumnComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableColumnComponent, decorators: [{
+            type: Injectable
+        }], propDecorators: { caption: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], fixed: [{
+                type: Input
+            }], allowSorting: [{
+                type: Input
+            }], allowResizing: [{
+                type: Input
+            }], sortIndex: [{
+                type: Input
+            }], sortOrder: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], cellTemplate: [{
+                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);
+        this.wrapText = false;
+        this.formatService = inject(AXFormatService);
+    }
+    get template() {
+        return this._template;
+    }
+    get loadingEnabled() {
+        return true;
+    }
+    get name() {
+        return `cl-${this.dataField}`;
+    }
+    getDisplayText(rowData, dataField) {
+        const value = rowData[dataField];
+        return !this.format
+            ? value
+            : this.formatService.format(value, this.format, this.formatOptions);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: { width: "width", caption: "caption", headerTemplate: "headerTemplate", cellTemplate: "cellTemplate", allowSorting: "allowSorting", allowResizing: "allowResizing", fixed: "fixed", dataField: "dataField", wrapText: "wrapText", format: "format", formatOptions: "formatOptions" }, providers: [
+            {
+                provide: AXDataTableColumnComponent,
+                useExisting: AXDataTableTextColumnComponent,
+            },
+        ], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
+    {{ getDisplayText(row.data, this.dataField) }}
+  </ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+__decorate([
+    Memorize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object, String]),
+    __metadata("design:returntype", String)
+], AXDataTableTextColumnComponent.prototype, "getDisplayText", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableTextColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-text-column',
+                    template: ` <ng-template let-row>
+    {{ getDisplayText(row.data, this.dataField) }}
+  </ng-template>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: AXDataTableColumnComponent,
+                            useExisting: AXDataTableTextColumnComponent,
+                        },
+                    ],
+                    inputs: [
+                        'width',
+                        'caption',
+                        'headerTemplate',
+                        'cellTemplate',
+                        'allowSorting',
+                        'allowResizing',
+                        'fixed',
+                    ],
+                }]
+        }], propDecorators: { dataField: [{
+                type: Input
+            }], wrapText: [{
+                type: Input
+            }], _template: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }], getDisplayText: [], format: [{
+                type: Input
+            }], formatOptions: [{
+                type: Input
+            }] } });
+
+class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
+    constructor() {
+        super(...arguments);
+        this.grid = inject(AXBaseDataTable);
+        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);
+    }
+    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: [
+            {
+                provide: AXDataTableColumnComponent,
+                useExisting: AXRowDropdownCommandColumnComponent,
+            },
+        ], 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>
+    }
+    <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.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,
+            args: [{
+                    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>
+    }
+    <ng-template #loading>
+      <div panel style="padding: 0.875rem;">
+        <ax-loading></ax-loading>
+      </div>
+    </ng-template>
+  </ng-template>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: AXDataTableColumnComponent,
+                            useExisting: AXRowDropdownCommandColumnComponent,
+                        },
+                    ],
+                    inputs: ['width', 'caption', 'fixed'],
+                    outputs: ['onItemClick'],
+                }]
+        }], propDecorators: { _template: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }], items: [{
+                type: Input
+            }] } });
+class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+    }
+    get template() {
+        return this._template;
+    }
+    get name() {
+        return 'cl-in-cmd';
+    }
+    getItems(rowData) {
+        if (Array.isArray(this.items)) {
+            return this.items;
+        }
+        else
+            typeof this.items == 'function';
+        {
+            return this.items(rowData);
+        }
+        return [];
+    }
+    handleOnItemClick(e, item, data) {
+        const args = {
+            component: this.grid,
+            isUserInteraction: true,
+            nativeEvent: e,
+            data,
+            name: item.name,
+        };
+        this.onItemClick.emit(args);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXRowCommandColumnComponent, selector: "ax-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
+            {
+                provide: AXDataTableColumnComponent,
+                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: 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>
+      }
+    }
+  </ng-template>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: AXDataTableColumnComponent,
+                            useExisting: AXRowCommandColumnComponent,
+                        },
+                    ],
+                    inputs: ['width', 'caption', 'fixed'],
+                    outputs: ['onItemClick'],
+                }]
+        }], propDecorators: { _template: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }], items: [{
+                type: Input
+            }] } });
+
+class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
+    constructor() {
+        super(...arguments);
+        this.grid = inject(AXBaseDataTable);
+        this.unsubscriber = inject(AXUnsubscriber);
+        this.padZero = false;
+        this.formatCount = 1;
+        this.allowSorting = false;
+    }
+    get template() {
+        return this._template;
+    }
+    get name() {
+        return 'cl-inx';
+    }
+    ngOnInit() {
+        if (this.padZero) {
+            this.grid.dataSource.onChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
+                this.formatCount = c.totalCount.toString().length;
+            });
+        }
+    }
+    get loadingEnabled() {
+        return false;
+    }
+    get cssClass() {
+        return 'ax-index-column';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXRowIndexColumnComponent, selector: "ax-index-column", inputs: { width: "width", caption: "caption", fixed: "fixed", padZero: "padZero" }, providers: [
+            AXUnsubscriber,
+            {
+                provide: 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$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 }}
+  </ng-template>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        AXUnsubscriber,
+                        {
+                            provide: AXDataTableColumnComponent,
+                            useExisting: AXRowIndexColumnComponent,
+                        },
+                    ],
+                    inputs: ['width', 'caption', 'fixed'],
+                }]
+        }], propDecorators: { _template: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }], padZero: [{
+                type: Input
+            }] } });
+
+class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
+    constructor() {
+        super(...arguments);
+        this.grid = inject(AXBaseDataTable);
+    }
+    get template() {
+        return this._template;
+    }
+    get name() {
+        return 'cl-select';
+    }
+    isSelected(item) {
+        return item != null && this.grid.selectedRows.includes(item);
+    }
+    handleChange(item) {
+        if (this.isSelected(item)) {
+            this.grid.unSelectRows(item);
+        }
+        else {
+            this.grid.selectRows(item);
+        }
+    }
+    get loadingEnabled() {
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRowSelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXRowSelectColumnComponent, selector: "ax-select-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [
+            {
+                provide: 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)" />
+  </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: [{
+            type: Component,
+            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)" />
+  </ng-template>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: AXDataTableColumnComponent,
+                            useExisting: AXRowSelectColumnComponent,
+                        },
+                    ],
+                    inputs: ['width', 'caption', 'fixed'],
+                }]
+        }], propDecorators: { _template: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }] } });
+
+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();
+    }
+    ngAfterViewInit() {
+        this.calculateStickyColumnsPositions();
+        this.columnsList.set(this.columns.toArray());
+    }
+    drop(event) {
+        moveItemInArray(this.columnsList(), event.previousIndex, event.currentIndex);
+        this.onColumnsOrderChanged.emit({
+            component: this,
+            data: { event },
+            isUserInteraction: true,
+        });
+    }
+    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,
+        });
+    }
+    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);
+        }
+    }
+    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,
+    AXRowSelectColumnComponent,
+    AXRowCommandColumnComponent,
+    AXRowDropdownCommandColumnComponent,
+    AXDataTableColumnResizableDirective,
+];
+const MODULES = [
+    CommonModule,
+    AXCommonModule,
+    ScrollingModule,
+    AXTranslationModule,
+    AXResultModule,
+    AXLoadingModule,
+    AXDecoratorModule,
+    AXSkeletonModule,
+    AXButtonModule,
+    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: [AXInfiniteScrollDataTableComponent,
+            AXDataTableComponent,
+            AXDataTableTextColumnComponent,
+            AXRowIndexColumnComponent,
+            AXRowSelectColumnComponent,
+            AXRowCommandColumnComponent,
+            AXRowDropdownCommandColumnComponent,
+            AXDataTableColumnResizableDirective], imports: [CommonModule,
+            AXCommonModule,
+            ScrollingModule,
+            AXTranslationModule,
+            AXResultModule,
+            AXLoadingModule,
+            AXDecoratorModule,
+            AXSkeletonModule,
+            AXButtonModule,
+            AXDropdownModule,
+            AXFormatModule,
+            AXRippleDirective,
+            AXDataPagerModule,
+            CdkDropList,
+            CdkDrag,
+            CdkDragPlaceholder,
+            CdkDragHandle], exports: [AXInfiniteScrollDataTableComponent,
+            AXDataTableComponent,
+            AXDataTableTextColumnComponent,
+            AXRowIndexColumnComponent,
+            AXRowSelectColumnComponent,
+            AXRowCommandColumnComponent,
+            AXRowDropdownCommandColumnComponent,
+            AXDataTableColumnResizableDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableModule, imports: [CommonModule,
+            AXCommonModule,
+            ScrollingModule,
+            AXTranslationModule,
+            AXResultModule,
+            AXLoadingModule,
+            AXDecoratorModule,
+            AXSkeletonModule,
+            AXButtonModule,
+            AXDropdownModule,
+            AXFormatModule,
+            AXDataPagerModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXBaseDataTable, AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableColumnResizableDirective, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXInfiniteScrollDataTableComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
+//# sourceMappingURL=acorex-components-data-table.mjs.map