@acorex/components 7.17.11 → 7.17.13

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

@@ -1,31 +1,29 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, inject, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, EventEmitter, ContentChildren, Output, ChangeDetectorRef, NgModule } from '@angular/core';
+import { Injectable, Input, inject, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgZone, EventEmitter, ContentChildren, Output, ChangeDetectorRef, NgModule } from '@angular/core';
 import { __metadata, __decorate } from 'tslib';
 import * as i1$1 from '@acorex/core/format';
 import { AXFormatService, AXFormatModule } from '@acorex/core/format';
 import { Memorize } from '@acorex/core/memorize';
-import * as i6$1 from '@acorex/components/common';
+import * as i6 from '@acorex/components/common';
 import { MXBaseComponent, convertArrayToDataSource, AXListDataSource, AXPagedComponent, AXCommonModule, AXRippleDirective } from '@acorex/components/common';
 import * as i2 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import sum from 'lodash-es/sum';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@acorex/components/result';
-import { AXResultModule } from '@acorex/components/result';
-import * as i3$1 from '@acorex/components/decorators';
+import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i5 from '@acorex/components/skeleton';
+import * as i4 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
-import * as i6 from '@acorex/components/button';
+import * as i5 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i7 from '@acorex/core/translation';
-import { AXTranslationModule } from '@acorex/core/translation';
 import * as i2$1 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i5$1 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { AXUnsubscriber } from '@acorex/core/utils';
+import { AXResultModule } from '@acorex/components/result';
+import { AXTranslationModule } from '@acorex/core/translation';
 
 class AXDataTableColumnComponent {
     constructor() {
@@ -69,9 +67,12 @@ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
     get template() {
         return this._template;
     }
-    get skeleton() {
+    get loadingEnabled() {
         return true;
     }
+    get name() {
+        return `cl-${this.dataField}`;
+    }
     getDisplayText(rowData, dataField) {
         const value = rowData[dataField];
         const options = Array.isArray(this.formatOptions) ? this.formatOptions : [this.formatOptions];
@@ -79,7 +80,7 @@ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: { width: "width", caption: "caption", headerTemplate: "headerTemplate", cellTemplate: "cellTemplate", allowSorting: "allowSorting", 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>
-    <span [class.ax-truncate]="!wrapText">{{ getDisplayText(row.data, this.dataField) }}</span>
+    {{ getDisplayText(row.data, this.dataField) }}
   </ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
@@ -93,7 +94,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
             args: [{
                     selector: 'ax-text-column',
                     template: ` <ng-template let-row>
-    <span [class.ax-truncate]="!wrapText">{{ getDisplayText(row.data, this.dataField) }}</span>
+    {{ getDisplayText(row.data, this.dataField) }}
   </ng-template>`,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -116,10 +117,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
 class AXDataTableComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
+        this.ngZone = inject(NgZone);
         this.onPageChanged = new EventEmitter();
         this.showHeader = true;
         this.fetchDataMode = 'auto';
         this.dataSource = convertArrayToDataSource([]);
+        this.loading = {
+            enbaled: true,
+            animation: true,
+        };
         this.isLoading = true;
         this.hasItems = false;
         this.totalRows = 0;
@@ -226,11 +232,13 @@ class AXDataTableComponent extends MXBaseComponent {
         }
     }
     updateHScroll() {
-        if (this.headerContainer) {
-            const headerContainer = this.headerContainer.nativeElement;
-            const left = this.getHostElement().querySelector('.cdk-virtual-scrollable').scrollLeft;
-            headerContainer.style.transform = `translateX(${-left}px)`;
-        }
+        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() {
@@ -294,11 +302,11 @@ class AXDataTableComponent extends MXBaseComponent {
         this.updateHScroll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", dataSource: "dataSource", focusedRow: "focusedRow", selectedRows: "selectedRows", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", focusedRowChange: "focusedRowChange", selectedRowsChange: "selectedRowsChange", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "footerContainer", first: true, predicate: ["footerContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\">\n</ng-content>\n<!------------------- Header contents ------------------->\n<div class=\"ax-header-content\" *ngIf=\"showHeader\">\n  <div class=\"ax-header-columns ax-header-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col style=\"width: 10px;\">\n      </colgroup>\n      <thead>\n        <tr>\n          <!------------------- start fixed column ------------------->\n          <th *ngFor=\"let c of startFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\" class=\"ax-column-fixed\">\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{c.caption }}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <!------------------- not fixed column ------------------->\n          <th [attr.colspan]=\"notFixedColumnCount()\">\n\n          </th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <colgroup>\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col style=\"width: auto;\">\n      </colgroup>\n      <thead>\n        <tr>\n          <th *ngFor=\"let c of startFixedColumn()\">\n          </th>\n          <th *ngFor=\"let c of notFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\">\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{c.caption}}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <th></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n</div>\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns ax-body-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col>\n      </colgroup>\n      <tbody>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll($event)\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n          <colgroup>\n            <!------------------- start fixed column ------------------->\n            <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n            <!------------------- not fixed column ------------------->\n            <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n            <col>\n          </colgroup>\n          <tbody>\n            <ng-container\n              *cdkVirtualFor=\"let item of listDataSource;  let i = index; trackBy: trackByIdx;let rIndex=index;\">\n              <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n                <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                </ng-container>\n              </ng-template>\n              <ng-template #rowTpl>\n                <tr [class.ax-state-focused]=\"focusedRow && item===focusedRow\" [attr.data-index]=\"rIndex\"\n                  [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event,item)\">\n                  <!------------------- start fixed column ------------------->\n                  <ng-container *ngFor=\"let c of startFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                      <div class=\"ax-content\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\" [attr.data-fixed]=\"c.fixed\"\n                        class=\"ax-column-fixed\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container>\n                  <!------------------- Not fixed column ------------------->\n                  <ng-container *ngFor=\"let c of notFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container>\n                  <td></td>\n                </tr>\n              </ng-template>\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>\n      Showing {{startRowIndex}} of {{totalRows}} items\n    </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\">\n  </ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n    </ng-container>\n  </ng-container>\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <ax-skeleton [animated]=\"true\"></ax-skeleton>\n  </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n<ng-template #emptyTpl>\n  <tr>\n    <td [attr.colspan]=\"columns.length\">\n      <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n      </ng-template>\n      <ng-template #defaultEmptyTemplate>\n        <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\n      </ng-template>\n    </td>\n  </tr>\n</ng-template>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-neutral-500),var(--tw-bg-opacity))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-primary-800),var(--tw-bg-opacity))!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-primary-900),var(--tw-bg-opacity))!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-primary-800),var(--tw-bg-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-primary-900),var(--tw-bg-opacity))!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-primary-800),var(--tw-bg-opacity))!important}ax-data-table{height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-border-default),var(--tw-border-opacity));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-border-default),var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-neutral-200),var(--tw-bg-opacity))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-200),var(--tw-bg-opacity))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-200),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore-tint),var(--tw-text-opacity))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-300),var(--tw-bg-opacity))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-300),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore-tint),var(--tw-text-opacity))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-400),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}ax-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;border-bottom-width:1px;border-inline-end-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-border-default),var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.5rem 1rem}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content{justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content{position:relative}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-border-default),var(--tw-border-opacity));background-color:transparent;padding:.25rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-color-ghost-fore),var(--tw-text-opacity))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-icon{font-size:1.125rem;line-height:1.75rem}ax-data-table .ax-body-content .ax-body-columns table td>.ax-content{display:flex;width:100%;justify-content:flex-start}ax-data-table .ax-body-content .ax-body-columns table td>.ax-content>span{display:inline-block}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-border-default),var(--tw-border-opacity));padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: i3.AXResultComponent, selector: "ax-result", inputs: ["type", "caption", "description"] }, { kind: "component", type: i3$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", dataSource: "dataSource", loading: "loading", focusedRow: "focusedRow", selectedRows: "selectedRows", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", focusedRowChange: "focusedRowChange", selectedRowsChange: "selectedRowsChange", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "footerContainer", first: true, predicate: ["footerContainer"], descendants: true }, { propertyName: "scrollableContainer", first: true, predicate: ["scrolling"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n<!------------------- Header contents ------------------->\n<div class=\"ax-header-content\" *ngIf=\"showHeader\">\n  <div class=\"ax-header-columns ax-header-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\" />\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\" />\n        <col style=\"width: 10px\" />\n      </colgroup>\n      <thead>\n        <tr>\n          <!------------------- start fixed column ------------------->\n          <th\n            *ngFor=\"let c of startFixedColumn()\"\n            [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n            class=\"ax-column-fixed\"\n          >\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{ c.caption }}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <!------------------- not fixed column ------------------->\n          <th [attr.colspan]=\"notFixedColumnCount()\"></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <colgroup>\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\" />\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\" />\n        <col style=\"width: auto\" />\n      </colgroup>\n      <thead>\n        <tr>\n          <th *ngFor=\"let c of startFixedColumn()\"></th>\n          <th\n            *ngFor=\"let c of notFixedColumn()\"\n            [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n          >\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{ c.caption }}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <th></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n</div>\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <!-- <div class=\"ax-body-columns ax-body-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n      <colgroup>\n        ------------------ start fixed column -------------------\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        ------------------- not fixed column ------------------\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col>\n      </colgroup>\n      <tbody>\n      </tbody>\n    </table>\n  </div> -->\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll($event)\">\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\" [style.width]=\"width\">\n          <colgroup>\n            <!------------------- start fixed column ------------------->\n            <!-- <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\"> -->\n            <!------------------- not fixed column ------------------->\n            <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\" />\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container\n              *cdkVirtualFor=\"\n                let item of listDataSource;\n                templateCacheSize: 100;\n                let i = index;\n                trackBy: trackByIdx;\n                let rIndex = index\n              \"\n            >\n              <!------------------- custom row template------------------->\n              @if (rowTemplate != null) {\n                <ng-container\n                  *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\"\n                >\n                </ng-container>\n              } @else {\n                <!------------------- normal row template------------------->\n                <tr\n                  [class.ax-state-focused]=\"focusedRow && item === focusedRow\"\n                  [attr.data-index]=\"rIndex\"\n                  [class.ax-state-selected]=\"selectedRows.includes(item)\"\n                  (click)=\"handleRowClick($event, item)\"\n                >\n                  <!------------------- start fixed column ------------------->\n                  <!-- <ng-container *ngFor=\"let c of startFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                      <div class=\"ax-content\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\" [attr.data-fixed]=\"c.fixed\"\n                        class=\"ax-column-fixed\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container> -->\n                  <!------------------- Not fixed column ------------------->\n                  @for (c of notFixedColumn(); track c.name) {\n                    <!------------------- custom cell template ------------------->\n                    @if (c.cellTemplate) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          c.cellTemplate;\n                          context: { $implicit: { data: item, rowIndex: rIndex } }\n                        \"\n                      >\n                      </ng-container>\n                    } @else {\n                      <!------------------- default cell template ------------------->\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                        @if (item) {\n                          <!------------------- render cell ------------------->\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              c.template;\n                              context: { $implicit: { data: item, rowIndex: rIndex } }\n                            \"\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-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-data-table{height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-icon{font-size:1.125rem;line-height:1.75rem}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-data-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], template: "<ng-content select=\"ax-header\">\n</ng-content>\n<!------------------- Header contents ------------------->\n<div class=\"ax-header-content\" *ngIf=\"showHeader\">\n  <div class=\"ax-header-columns ax-header-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col style=\"width: 10px;\">\n      </colgroup>\n      <thead>\n        <tr>\n          <!------------------- start fixed column ------------------->\n          <th *ngFor=\"let c of startFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\" class=\"ax-column-fixed\">\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{c.caption }}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <!------------------- not fixed column ------------------->\n          <th [attr.colspan]=\"notFixedColumnCount()\">\n\n          </th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <colgroup>\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col style=\"width: auto;\">\n      </colgroup>\n      <thead>\n        <tr>\n          <th *ngFor=\"let c of startFixedColumn()\">\n          </th>\n          <th *ngFor=\"let c of notFixedColumn()\" [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event,c) : null\">\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{c.caption}}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{getSort(c)}}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <th></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n</div>\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns ax-body-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col>\n      </colgroup>\n      <tbody>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll($event)\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight+'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n          <colgroup>\n            <!------------------- start fixed column ------------------->\n            <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n            <!------------------- not fixed column ------------------->\n            <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n            <col>\n          </colgroup>\n          <tbody>\n            <ng-container\n              *cdkVirtualFor=\"let item of listDataSource;  let i = index; trackBy: trackByIdx;let rIndex=index;\">\n              <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\n                <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                </ng-container>\n              </ng-template>\n              <ng-template #rowTpl>\n                <tr [class.ax-state-focused]=\"focusedRow && item===focusedRow\" [attr.data-index]=\"rIndex\"\n                  [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event,item)\">\n                  <!------------------- start fixed column ------------------->\n                  <ng-container *ngFor=\"let c of startFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                      <div class=\"ax-content\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\" [attr.data-fixed]=\"c.fixed\"\n                        class=\"ax-column-fixed\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container>\n                  <!------------------- Not fixed column ------------------->\n                  <ng-container *ngFor=\"let c of notFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container>\n                  <td></td>\n                </tr>\n              </ng-template>\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>\n      Showing {{startRowIndex}} of {{totalRows}} items\n    </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\">\n  </ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  <ng-container *ngIf=\"loadingTemplate;else defaultLoadingTpl\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\n    </ng-container>\n  </ng-container>\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <ax-skeleton [animated]=\"true\"></ax-skeleton>\n  </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n<ng-template #emptyTpl>\n  <tr>\n    <td [attr.colspan]=\"columns.length\">\n      <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n      </ng-template>\n      <ng-template #defaultEmptyTemplate>\n        <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\n      </ng-template>\n    </td>\n  </tr>\n</ng-template>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-neutral-500),var(--tw-bg-opacity))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-primary-800),var(--tw-bg-opacity))!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-primary-900),var(--tw-bg-opacity))!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-primary-800),var(--tw-bg-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-primary-900),var(--tw-bg-opacity))!important;--tw-text-opacity: 1 !important;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-primary-800),var(--tw-bg-opacity))!important}ax-data-table{height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-border-default),var(--tw-border-opacity));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-border-default),var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-neutral-200),var(--tw-bg-opacity))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-200),var(--tw-bg-opacity))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-200),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore-tint),var(--tw-text-opacity))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-300),var(--tw-bg-opacity))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-300),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore-tint),var(--tw-text-opacity))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-primary-400),var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--ax-color-primary-fore),var(--tw-text-opacity))}ax-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;border-bottom-width:1px;border-inline-end-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-border-default),var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));padding:.5rem 1rem}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{--tw-bg-opacity: 1 !important;background-color:rgba(var(--ax-color-on-surface),var(--tw-bg-opacity))!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content{justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column>.ax-content span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content{position:relative}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-border-default),var(--tw-border-opacity));background-color:transparent;padding:.25rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-color-ghost-fore),var(--tw-text-opacity))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>.ax-content button .ax-icon{font-size:1.125rem;line-height:1.75rem}ax-data-table .ax-body-content .ax-body-columns table td>.ax-content{display:flex;width:100%;justify-content:flex-start}ax-data-table .ax-body-content .ax-body-columns table td>.ax-content>span{display:inline-block}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-color-border-default),var(--tw-border-opacity));padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"] }]
+            args: [{ selector: 'ax-data-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], template: "<ng-content select=\"ax-header\"> </ng-content>\n<!------------------- Header contents ------------------->\n<div class=\"ax-header-content\" *ngIf=\"showHeader\">\n  <div class=\"ax-header-columns ax-header-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" [style.width]=\"width\">\n      <colgroup>\n        <!------------------- start fixed column ------------------->\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\" />\n        <!------------------- not fixed column ------------------->\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\" />\n        <col style=\"width: 10px\" />\n      </colgroup>\n      <thead>\n        <tr>\n          <!------------------- start fixed column ------------------->\n          <th\n            *ngFor=\"let c of startFixedColumn()\"\n            [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n            class=\"ax-column-fixed\"\n          >\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{ c.caption }}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <!------------------- not fixed column ------------------->\n          <th [attr.colspan]=\"notFixedColumnCount()\"></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <colgroup>\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\" />\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\" />\n        <col style=\"width: auto\" />\n      </colgroup>\n      <thead>\n        <tr>\n          <th *ngFor=\"let c of startFixedColumn()\"></th>\n          <th\n            *ngFor=\"let c of notFixedColumn()\"\n            [class.ax-interactive]=\"c.allowSorting\"\n            (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n          >\n            <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\n              <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            </ng-template>\n            <ng-template #captionTpl>\n              <div class=\"ax-caption\">\n                {{ c.caption }}\n                <ax-icon *ngIf=\"getSort(c)\" icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n              </div>\n            </ng-template>\n          </th>\n          <th></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n</div>\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <!-- <div class=\"ax-body-columns ax-body-fixed-columns\" *ngIf=\"false\">\n    <table tabindex=\"0\" class=\"ax-table-body\" [style.width]=\"width\">\n      <colgroup>\n        ------------------ start fixed column -------------------\n        <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\">\n        ------------------- not fixed column ------------------\n        <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\">\n        <col>\n      </colgroup>\n      <tbody>\n      </tbody>\n    </table>\n  </div> -->\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll($event)\">\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\" [style.width]=\"width\">\n          <colgroup>\n            <!------------------- start fixed column ------------------->\n            <!-- <col *ngFor=\"let c of startFixedColumn()\" [style.width]=\"c.width\"> -->\n            <!------------------- not fixed column ------------------->\n            <col *ngFor=\"let c of notFixedColumn()\" [style.width]=\"c.width\" />\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container\n              *cdkVirtualFor=\"\n                let item of listDataSource;\n                templateCacheSize: 100;\n                let i = index;\n                trackBy: trackByIdx;\n                let rIndex = index\n              \"\n            >\n              <!------------------- custom row template------------------->\n              @if (rowTemplate != null) {\n                <ng-container\n                  *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\"\n                >\n                </ng-container>\n              } @else {\n                <!------------------- normal row template------------------->\n                <tr\n                  [class.ax-state-focused]=\"focusedRow && item === focusedRow\"\n                  [attr.data-index]=\"rIndex\"\n                  [class.ax-state-selected]=\"selectedRows.includes(item)\"\n                  (click)=\"handleRowClick($event, item)\"\n                >\n                  <!------------------- start fixed column ------------------->\n                  <!-- <ng-container *ngFor=\"let c of startFixedColumn()\">\n                    <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\n                      <div class=\"ax-content\">\n                        <ng-container\n                          *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:item,rowIndex:rIndex} }\">\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                    <ng-template #cellTpl>\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\" [attr.data-fixed]=\"c.fixed\"\n                        class=\"ax-column-fixed\">\n                        <div class=\"ax-content\">\n                          <ng-container *ngIf=\"item || !c.skeleton;else loadingTpl\">\n                            <ng-container\n                              *ngTemplateOutlet=\"c.template; context: { $implicit: {data:item,rowIndex:rIndex} }\"></ng-container>\n                          </ng-container>\n                        </div>\n                      </td>\n                    </ng-template>\n                  </ng-container> -->\n                  <!------------------- Not fixed column ------------------->\n                  @for (c of notFixedColumn(); track c.name) {\n                    <!------------------- custom cell template ------------------->\n                    @if (c.cellTemplate) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          c.cellTemplate;\n                          context: { $implicit: { data: item, rowIndex: rIndex } }\n                        \"\n                      >\n                      </ng-container>\n                    } @else {\n                      <!------------------- default cell template ------------------->\n                      <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                        @if (item) {\n                          <!------------------- render cell ------------------->\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              c.template;\n                              context: { $implicit: { data: item, rowIndex: rIndex } }\n                            \"\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-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-data-table{height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-icon{font-size:1.125rem;line-height:1.75rem}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"] }]
         }], propDecorators: { columns: [{
                 type: ContentChildren,
                 args: [AXDataTableColumnComponent]
@@ -308,14 +316,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 type: Input
             }], emptyTemplate: [{
                 type: Input
-            }], loadingTemplate: [{
-                type: Input
             }], showHeader: [{
                 type: Input
             }], fetchDataMode: [{
                 type: Input
             }], dataSource: [{
                 type: Input
+            }], loading: [{
+                type: Input
             }], focusedRowChange: [{
                 type: Output
             }], focusedRow: [{
@@ -337,6 +345,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
             }], footerContainer: [{
                 type: ViewChild,
                 args: ['footerContainer']
+            }], scrollableContainer: [{
+                type: ViewChild,
+                args: ['scrolling', { static: true }]
             }] } });
 
 class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
@@ -347,7 +358,7 @@ class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
         this.allowSorting = false;
         this.onItemClick = new EventEmitter();
     }
-    get skeleton() {
+    get loadingEnabled() {
         return false;
     }
     get cssClass() {
@@ -363,6 +374,9 @@ class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponen
     get template() {
         return this._template;
     }
+    get name() {
+        return 'cl-dd-cmd';
+    }
     async handleOnOpened(rowData) {
         if (Array.isArray(this.items)) {
             this._items = this.items;
@@ -420,7 +434,7 @@ class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponen
         <ax-loading></ax-loading>
       </div>
     </ng-template>
-  </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i3$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i6.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i5$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: i6$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i5$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: i6.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXRowDropdownCommandColumnComponent, decorators: [{
             type: Component,
@@ -473,6 +487,9 @@ class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
     get template() {
         return this._template;
     }
+    get name() {
+        return 'cl-in-cmd';
+    }
     getItems(rowData) {
         if (Array.isArray(this.items)) {
             return this.items;
@@ -508,7 +525,7 @@ class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
         <ax-icon [icon]="item.icon"></ax-icon>
       </button>
     </div>
-  </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i6$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i6.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
             type: Component,
@@ -553,8 +570,8 @@ class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
     get template() {
         return this._template;
     }
-    get cssClass() {
-        return 'ax-index-column';
+    get name() {
+        return 'cl-inx';
     }
     ngOnInit() {
         if (this.padZero) {
@@ -563,15 +580,18 @@ class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
             });
         }
     }
-    get skeleton() {
+    get loadingEnabled() {
         return false;
     }
+    get cssClass() {
+        return 'ax-index-column';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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>
-    <span> {{ row.rowIndex + 1 | format: 'number' : 'D' + formatCount }}</span>
+    {{ row.rowIndex + 1 | format: 'number' : 'D' + formatCount }}
   </ng-template>`, isInline: true, dependencies: [{ kind: "pipe", type: i1$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
@@ -579,7 +599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
             args: [{
                     selector: 'ax-index-column',
                     template: ` <ng-template let-row>
-    <span> {{ row.rowIndex + 1 | format: 'number' : 'D' + formatCount }}</span>
+    {{ row.rowIndex + 1 | format: 'number' : 'D' + formatCount }}
   </ng-template>`,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -604,6 +624,9 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
     get template() {
         return this._template;
     }
+    get name() {
+        return 'cl-select';
+    }
     isSelected(item) {
         return item != null && this.grid.selectedRows.includes(item);
     }
@@ -615,7 +638,7 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
             this.grid.selectRows(item);
         }
     }
-    get skeleton() {
+    get loadingEnabled() {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXRowSelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }