@acorex/components 19.1.0-next.0 → 19.1.0-next.2

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

@@ -11,17 +11,17 @@ 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 i5 from '@acorex/components/button';
+import * as i4 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i4 from '@acorex/components/dropdown';
+import * as i5 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i4$1 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
 import * as i6 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 * as i3 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import { AXTranslationModule } from '@acorex/core/translation';
 import * as i7 from '@angular/cdk/drag-drop';
@@ -34,6 +34,12 @@ class AXBaseDataTable extends MXBaseComponent {
     constructor() {
         super(...arguments);
         this.dataSource = convertArrayToDataSource([]);
+        /**
+         * For handle nested rows.
+         *
+         * @defaultValue `parentId`
+         */
+        this.parentField = 'parentId';
         this.selectedRowsChange = new EventEmitter();
         this._selectedRows = signal([]);
     }
@@ -47,6 +53,29 @@ class AXBaseDataTable extends MXBaseComponent {
         this._selectedRows.set(v);
         this.selectedRowsChange.emit(v);
     }
+    async expandRow(row) {
+        if (row.data['__meta__.expanded'] || row.data.children != undefined) {
+            this.dataSource.onItemExpanded.next({
+                expandedItem: row.data,
+                children: row.data.children,
+            });
+        }
+        else {
+            const key = this.getDataSourceKey();
+            const filter = {
+                field: this.parentField,
+                operator: {
+                    type: 'equal',
+                },
+                value: row['data'][key],
+            };
+            const expandedItems = await this.dataSource.getItemsByFilter(filter);
+            this.dataSource.onItemExpanded.next({
+                expandedItem: row.data,
+                children: expandedItems.items,
+            });
+        }
+    }
     selectRows(...rows) {
         const key = this.getDataSourceKey();
         const selectRowIds = this.selectedRows.map((sr) => (typeof sr === 'object' ? sr[key] : sr));
@@ -67,6 +96,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             type: Injectable
         }], propDecorators: { dataSource: [{
                 type: Input
+            }], parentField: [{
+                type: Input
             }], selectedRowsChange: [{
                 type: Output
             }], selectedRows: [{
@@ -170,6 +201,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
     constructor() {
         super(...arguments);
+        this.grid = inject(AXBaseDataTable);
+        this.loadingRow = signal(null);
+        this.initialWidth = '';
+        /**
+         * Controls the display of an expandable arrow icon beside the cell text.
+         * If set to `true`, an arrow icon is shown next to the text, indicating expandability.
+         *
+         * @defaultValue false
+         *
+         */
+        this.expandHandler = false;
         /**
          * Toggles text wrapping in the cell.
          *
@@ -208,6 +250,17 @@ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
     get loadingEnabled() {
         return true;
     }
+    /**
+     *  @ignore
+     */
+    async handleExpandRow(row) {
+        this.loadingRow.set(row);
+        await this.grid.expandRow(row);
+        this.loadingRow.set(null);
+        // if (row.data?.__meta__?.expanded === undefined) {
+        //   this.width = `${parseInt(this.width as string) + 24}px`;
+        // }
+    }
     /**
      * Generates a unique name based on the `dataField` value.
      */
@@ -219,7 +272,7 @@ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
         return !this.format ? value : this.formatService.format(value, this.format, this.formatOptions);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXDataTableTextColumnComponent, isStandalone: false, selector: "ax-text-column", inputs: { width: "width", caption: "caption", allowSorting: "allowSorting", allowResizing: "allowResizing", fixed: "fixed", dataField: "dataField", wrapText: "wrapText", cellTemplate: "cellTemplate", footerTemplate: "footerTemplate", headerTemplate: "headerTemplate", format: "format", formatOptions: "formatOptions" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXDataTableTextColumnComponent, isStandalone: false, selector: "ax-text-column", inputs: { width: "width", caption: "caption", allowSorting: "allowSorting", allowResizing: "allowResizing", fixed: "fixed", dataField: "dataField", expandHandler: "expandHandler", wrapText: "wrapText", cellTemplate: "cellTemplate", footerTemplate: "footerTemplate", headerTemplate: "headerTemplate", format: "format", formatOptions: "formatOptions" }, providers: [
             {
                 provide: AXDataTableColumnComponent,
                 useExisting: AXDataTableTextColumnComponent,
@@ -227,7 +280,27 @@ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
         ], viewQueries: [{ propertyName: "_contentCellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-template #header>{{ caption }}</ng-template>
     <ng-template #cell let-row>
-      {{ getDisplayText(row.data, this.dataField) }}
+      <div class="ax-flex ax-items-center ax-gap-2">
+        @if (expandHandler) {
+          <div
+            (click)="handleExpandRow(row)"
+            class="ax-expand-handler"
+            id="ax-expand-handler-container"
+            [style.padding-inline-start.rem]="row.data?.__meta__?.level * 1.5"
+          >
+            @if (loadingRow() === row) {
+              <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+            } @else {
+              @if (row.data?.__meta__?.expanded) {
+                <i class="fas fa-chevron-down"></i>
+              } @else {
+                <i class="fas fa-chevron-right"></i>
+              }
+            }
+          </div>
+        }
+        {{ getDisplayText(row.data, this.dataField) }}
+      </div>
     </ng-template>
     <ng-template #footer></ng-template>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -245,7 +318,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     template: `
     <ng-template #header>{{ caption }}</ng-template>
     <ng-template #cell let-row>
-      {{ getDisplayText(row.data, this.dataField) }}
+      <div class="ax-flex ax-items-center ax-gap-2">
+        @if (expandHandler) {
+          <div
+            (click)="handleExpandRow(row)"
+            class="ax-expand-handler"
+            id="ax-expand-handler-container"
+            [style.padding-inline-start.rem]="row.data?.__meta__?.level * 1.5"
+          >
+            @if (loadingRow() === row) {
+              <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+            } @else {
+              @if (row.data?.__meta__?.expanded) {
+                <i class="fas fa-chevron-down"></i>
+              } @else {
+                <i class="fas fa-chevron-right"></i>
+              }
+            }
+          </div>
+        }
+        {{ getDisplayText(row.data, this.dataField) }}
+      </div>
     </ng-template>
     <ng-template #footer></ng-template>
   `,
@@ -258,10 +351,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         },
                     ],
                     inputs: ['width', 'caption', 'allowSorting', 'allowResizing', 'fixed'],
-                    standalone: false
+                    standalone: false,
                 }]
         }], propDecorators: { dataField: [{
                 type: Input
+            }], expandHandler: [{
+                type: Input
             }], wrapText: [{
                 type: Input
             }], cellTemplate: [{
@@ -417,7 +512,7 @@ class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponen
       </ng-template>
     </ng-template>
     <ng-template #footer></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: i5.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$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: i5$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXRowDropdownCommandColumnComponent, decorators: [{
             type: Component,
@@ -571,7 +666,7 @@ class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
         }
       }
     </ng-template>
-    <ng-template #footer></ng-template> `, isInline: true, dependencies: [{ kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i5$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    <ng-template #footer></ng-template> `, isInline: true, dependencies: [{ kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i5$1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
             type: Component,
@@ -621,6 +716,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Column component that provides checkboxes for row selection in a data table.
+ *
+ * @category Components
+ */
+class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
+    constructor() {
+        super(...arguments);
+        this.grid = inject(AXBaseDataTable);
+        this.loadingRow = signal(null);
+    }
+    /**
+     * Gets the template used to render cells in the column.
+     */
+    get renderCellTemplate() {
+        return this._cellTemplate;
+    }
+    /**
+     * Gets the template used to render the column header.
+     */
+    get renderHeaderTemplate() {
+        return this._contentHeaderTemplate;
+    }
+    /**
+     * Gets the template used to render the column footer.
+     */
+    get renderFooterTemplate() {
+        return this._contentFooterTemplate;
+    }
+    /**
+     * Gets the unique identifier for the column.
+     */
+    get name() {
+        return 'cl-expand';
+    }
+    /**
+     *  @ignore
+     */
+    async handleExpandRow(row) {
+        this.loadingRow.set(row);
+        await this.grid.expandRow(row);
+        this.loadingRow.set(null);
+    }
+    /**
+     * Indicates whether loading is enabled for the column.
+     */
+    get loadingEnabled() {
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXRowExpandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXRowExpandColumnComponent, isStandalone: false, selector: "ax-expand-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [
+            {
+                provide: AXDataTableColumnComponent,
+                useExisting: AXRowExpandColumnComponent,
+            },
+        ], viewQueries: [{ propertyName: "_cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-template #header></ng-template>
+    <ng-template #cell let-row>
+      <div
+        (click)="handleExpandRow(row)"
+        class="ax-expand-handler"
+        [style.padding-inline-start.rem]="row.data?.__meta__?.level * 1.5"
+      >
+        @if (loadingRow() === row) {
+          <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+        } @else {
+          @if (row.data?.__meta__?.expanded) {
+            <i class="fas fa-chevron-down"></i>
+          } @else {
+            <i class="fas fa-chevron-right"></i>
+          }
+        }
+      </div>
+    </ng-template>
+    <ng-template #footer></ng-template>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXRowExpandColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-expand-column',
+                    template: `
+    <ng-template #header></ng-template>
+    <ng-template #cell let-row>
+      <div
+        (click)="handleExpandRow(row)"
+        class="ax-expand-handler"
+        [style.padding-inline-start.rem]="row.data?.__meta__?.level * 1.5"
+      >
+        @if (loadingRow() === row) {
+          <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+        } @else {
+          @if (row.data?.__meta__?.expanded) {
+            <i class="fas fa-chevron-down"></i>
+          } @else {
+            <i class="fas fa-chevron-right"></i>
+          }
+        }
+      </div>
+    </ng-template>
+    <ng-template #footer></ng-template>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false,
+                    providers: [
+                        {
+                            provide: AXDataTableColumnComponent,
+                            useExisting: AXRowExpandColumnComponent,
+                        },
+                    ],
+                    inputs: ['width', 'caption', 'fixed'],
+                }]
+        }], propDecorators: { _cellTemplate: [{
+                type: ViewChild,
+                args: ['cell']
+            }], _contentHeaderTemplate: [{
+                type: ViewChild,
+                args: ['header']
+            }], _contentFooterTemplate: [{
+                type: ViewChild,
+                args: ['footer']
+            }] } });
+
 /**
  * Component for displaying row indices in a data table column.
  *
@@ -1069,6 +1288,12 @@ class AXDataTableComponent extends AXBaseDataTable {
          * @event onColumnsOrderChanged
          */
         this.onColumnsOrderChanged = new EventEmitter();
+        /**
+         * Emits when the order of columns changes.
+         *
+         * @event onColumnSizeChanged
+         */
+        this.onColumnSizeChanged = new EventEmitter();
         /**
          *  @ignore
          */
@@ -1094,6 +1319,16 @@ class AXDataTableComponent extends AXBaseDataTable {
             }
             const newWidth = parseInt(this.resizeColumnProp.thElement.attributes.getNamedItem('new-width').value);
             this.columns.get(this.resizeColumnProp.columnIndex).width = `${Math.max(100, newWidth)}px`;
+            this.onColumnSizeChanged.emit({
+                type: 'end',
+                data: {
+                    columnIndex: this.resizeColumnProp.columnIndex,
+                    width: this.columns.get(this.resizeColumnProp.columnIndex).width,
+                    dataField: this.columns.get(this.resizeColumnProp.columnIndex).name,
+                },
+                isUserInteraction: true,
+                component: this,
+            });
             this.resetResizingProcess();
         };
     }
@@ -1128,10 +1363,14 @@ class AXDataTableComponent extends AXBaseDataTable {
             this.isLoading.set(data);
         });
         this.dataSource.onChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe((data) => {
-            this.displayedRows.set(data.items);
+            this.displayedRows.set(data.items.filter((item) => !item[this.parentField]));
             this.totalRows = data.totalCount;
             this.hasItems = data.totalCount > 0;
         });
+        this.dataSource.onItemExpanded.pipe(this._unsubscriber.takeUntilDestroy).subscribe((data) => {
+            const { expandedItem, children } = data;
+            this.displayedRows.update((prev) => this.toggleExpanded(prev, expandedItem, children));
+        });
         this.pageSize.set(this.dataSource.pageSize);
         //
         this.clickSubject
@@ -1150,6 +1389,35 @@ class AXDataTableComponent extends AXBaseDataTable {
             this.columnsList.set(cols.toArray());
         });
     }
+    toggleExpanded(rows, expandedItem, children) {
+        return rows.map((item) => {
+            children.forEach((c) => {
+                if (!c.__meta__) {
+                    c.__meta__ = {
+                        level: (expandedItem?.__meta__?.level ?? 0) + 1,
+                    };
+                }
+            });
+            if (expandedItem[this.getDataSourceKey()] === item[this.getDataSourceKey()]) {
+                const isExpanded = !item?.__meta__?.expanded;
+                return {
+                    ...item,
+                    __meta__: {
+                        expanded: isExpanded,
+                        level: expandedItem?.__meta__?.level ?? 0,
+                    },
+                    children: children ? this.toggleExpanded(children, expandedItem, item.children || []) : null,
+                };
+            }
+            else if (item.children) {
+                return {
+                    ...item,
+                    children: this.toggleExpanded(item.children, expandedItem, children),
+                };
+            }
+            return item;
+        });
+    }
     /**
      *  @ignore
      */
@@ -1278,6 +1546,16 @@ class AXDataTableComponent extends AXBaseDataTable {
      *  @ignore
      */
     onResizeColumnStart(event, columnIndex) {
+        this.onColumnSizeChanged.emit({
+            type: 'start',
+            data: {
+                columnIndex: columnIndex,
+                width: this.columns.get(columnIndex).width,
+                dataField: this.columns.get(columnIndex).name,
+            },
+            isUserInteraction: true,
+            component: this,
+        });
         event.preventDefault();
         event.stopPropagation();
         this.resizeColumnProp.startX = event.pageX;
@@ -1346,23 +1624,23 @@ class AXDataTableComponent extends AXBaseDataTable {
             firstEndColumn['isFirstFixedColumn'] = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXDataTableComponent, isStandalone: false, selector: "ax-data-table", inputs: { dataSource: "dataSource", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", alternative: "alternative", showHeader: "showHeader", fixedHeader: "fixedHeader", showFooter: "showFooter", fixedFooter: "fixedFooter", itemHeight: "itemHeight", allowReordering: "allowReordering", paging: "paging", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { selectedRowsChange: "selectedRowsChange", focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", onColumnsOrderChanged: "onColumnsOrderChanged" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXDataTableComponent, isStandalone: false, selector: "ax-data-table", inputs: { dataSource: "dataSource", parentField: "parentField", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", alternative: "alternative", showHeader: "showHeader", fixedHeader: "fixedHeader", showFooter: "showFooter", fixedFooter: "fixedFooter", itemHeight: "itemHeight", allowReordering: "allowReordering", paging: "paging", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { selectedRowsChange: "selectedRowsChange", focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", onColumnsOrderChanged: "onColumnsOrderChanged", onColumnSizeChanged: "onColumnSizeChanged" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
             {
                 provide: AXBaseDataTable,
                 useExisting: AXDataTableComponent,
             },
             AXUnsubscriber,
-        ], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "dataPager", first: true, predicate: ["dataPager"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n@if (!displayedRows().length) {\n  <div class=\"ax-data-table-empty-data\">\n    @if (emptyTemplate) {\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n    } @else {\n      <span>No Record Found!</span>\n    }\n  </div>\n}\n<div class=\"ax-data-table-wrapper\">\n  <table>\n    @if (showHeader) {\n      <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n        <tr\n          [cdkDropListDisabled]=\"!allowReordering\"\n          cdkDropList\n          cdkScrollable\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @for (c of startFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-start\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <th\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n              }\n            </th>\n          }\n          <th></th>\n          @for (c of endFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n    <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n      @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n        @if (rowTemplate) {\n          <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: rowIndex } }\"> </ng-container>\n        } @else {\n          <tr\n            [class.ax-state-focused]=\"focusedRow && row === focusedRow\"\n            [attr.data-index]=\"rowIndex\"\n            [class.ax-state-selected]=\"selectedRows.includes(row)\"\n            style.height=\"{{ itemHeight }}px\"\n            style.max-height=\"{{ itemHeight }}px\"\n            (click)=\"handleRowClick($event, row)\"\n          >\n            @for (c of startFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-start]=\"true\"\n                [class.isLast]=\"c['isLastFixedColumn']\"\n                [style.--sticky-start]=\"c['stickyStart']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            @for (c of normalColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            <td></td>\n            @for (c of endFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-end]=\"true\"\n                [class.isFirst]=\"c['isFirstFixedColumn']\"\n                [style.--sticky-end]=\"c['stickyEnd']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n\n      <tr class=\"empty-row\"></tr>\n    </tbody>\n    @if (showFooter) {\n      <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n        <tr>\n          @for (c of startFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-start\"\n              [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <td\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n              }\n            </td>\n          }\n          <td></td>\n          @for (c of endFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (paging) {\n  <div class=\"ax-table-footer\" #footerContainer>\n    <ax-data-pager\n      #dataPager\n      [displayMode]=\"'custom'\"\n      (onChanged)=\"onPageChanged($event)\"\n      [total]=\"dataSource.totalCount\"\n      [size]=\"dataSource.pageSize\"\n      [isLoading]=\"isLoading()\"\n    >\n      <ax-prefix class=\"ax-data-table-numeric-paging\">\n        <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n        <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n      </ax-prefix>\n      <ax-prefix class=\"ax-data-table-input-paging\">\n        <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n        <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n        <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n      </ax-prefix>\n      <ax-suffix class=\"ax-data-table-info\">\n        <ax-data-pager-info> </ax-data-pager-info>\n        <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n          <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n        </ax-button>\n      </ax-suffix>\n    </ax-data-pager>\n  </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\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));position:relative;min-height:inherit}ax-data-table .ax-data-table-empty-data{position:absolute;top:calc(50% - 40px);width:100%;color:rgb(var(--ax-color-neutral-500));text-align:center}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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-primary-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;border-top:none;border-bottom:none;z-index:3;box-shadow:inset 1px 1px 0 2px 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 .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-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 tfoot tr td{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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom:0;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 .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}}ax-data-table ax-data-pager{justify-content:center}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding-inline-start:.875rem;padding-inline-end:.875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}ax-data-table .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{justify-content:space-between}}.cdk-drag-preview{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-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.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i6.AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "isLoading", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "component", type: i6.AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: i6.AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: i6.AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: i6.AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: i6.AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: i6.AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "dataPager", first: true, predicate: ["dataPager"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n@if (!displayedRows().length) {\n  <div class=\"ax-data-table-empty-data\">\n    @if (emptyTemplate) {\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n    } @else {\n      <span>No Record Found!</span>\n    }\n  </div>\n}\n<div class=\"ax-data-table-wrapper\">\n  <table>\n    @if (showHeader) {\n      <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n        <tr\n          [cdkDropListDisabled]=\"!allowReordering\"\n          cdkDropList\n          cdkScrollable\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @for (c of startFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-start\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    c.renderHeaderTemplate;\n                    context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\n                  \"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <th\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    c.renderHeaderTemplate;\n                    context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\n                  \"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </th>\n          }\n          <th></th>\n          @for (c of endFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    c.renderHeaderTemplate;\n                    context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\n                  \"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n    <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n      @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n        <ng-container *ngTemplateOutlet=\"rowTemp; context: { data: { row, rowIndex } }\"></ng-container>\n      }\n\n      <ng-template #rowTemp let-data=\"data\">\n        @if (rowTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              rowTemplate;\n              context: { $implicit: { data: data.row, rowIndex: data.rowIndex } }\n            \"\n          >\n          </ng-container>\n        } @else {\n          <tr\n            [class.ax-state-focused]=\"focusedRow && data.row === focusedRow\"\n            [attr.data-index]=\"data.rowIndex\"\n            [class.ax-state-selected]=\"selectedRows.includes(data.row)\"\n            style.height=\"{{ itemHeight }}px\"\n            style.max-height=\"{{ itemHeight }}px\"\n            (click)=\"handleRowClick($event, data.row)\"\n          >\n            @for (c of startFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-start]=\"true\"\n                [class.isLast]=\"c['isLastFixedColumn']\"\n                [style.--sticky-start]=\"c['stickyStart']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (data.row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      c.renderCellTemplate;\n                      context: { $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) } }\n                    \"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            @for (c of normalColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (data.row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      c.renderCellTemplate;\n                      context: { $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) } }\n                    \"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            <td></td>\n            @for (c of endFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-end]=\"true\"\n                [class.isFirst]=\"c['isFirstFixedColumn']\"\n                [style.--sticky-end]=\"c['stickyEnd']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (data.row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      c.renderCellTemplate;\n                      context: { $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) } }\n                    \"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n          </tr>\n          @if (data.row?.__meta__?.expanded) {\n            @for (childRow of data.row.children; let childRowIndex = $index; track childRowIndex) {\n              <ng-container\n                *ngTemplateOutlet=\"rowTemp; context: { data: { row: childRow, rowIndex: childRowIndex } }\"\n              ></ng-container>\n            }\n          }\n        }\n      </ng-template>\n\n      <tr class=\"empty-row\"></tr>\n    </tbody>\n    @if (showFooter) {\n      <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n        <tr>\n          @for (c of startFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-start\"\n              [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    c.renderFooterTemplate;\n                    context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\n                  \"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <td\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    c.renderFooterTemplate;\n                    context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\n                  \"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </td>\n          }\n          <td></td>\n          @for (c of endFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    c.renderFooterTemplate;\n                    context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\n                  \"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (paging) {\n  <div class=\"ax-table-footer\" #footerContainer>\n    <ax-data-pager\n      #dataPager\n      [displayMode]=\"'custom'\"\n      (onChanged)=\"onPageChanged($event)\"\n      [total]=\"dataSource.totalCount\"\n      [size]=\"dataSource.pageSize\"\n      [isLoading]=\"isLoading()\"\n    >\n      <ax-prefix class=\"ax-data-table-numeric-paging\">\n        <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n        <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n      </ax-prefix>\n      <ax-prefix class=\"ax-data-table-input-paging\">\n        <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n        <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n        <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n      </ax-prefix>\n      <ax-suffix class=\"ax-data-table-info\">\n        <ax-data-pager-info> </ax-data-pager-info>\n        <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n          <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n        </ax-button>\n      </ax-suffix>\n    </ax-data-pager>\n  </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\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));position:relative;min-height:inherit}ax-data-table .ax-data-table-empty-data{position:absolute;top:calc(50% - 40px);width:100%;color:rgb(var(--ax-color-neutral-500));text-align:center}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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-primary-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;border-top:none;border-bottom:none;z-index:3;box-shadow:inset 1px 1px 0 2px 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 .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-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-expand-handler{padding-inline-start:.25rem;padding-inline-end:.25rem;cursor:pointer}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler.has-parent{padding-inline-start:1.5rem!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-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 tfoot tr td{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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom:0;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 .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}}ax-data-table ax-data-pager{justify-content:center}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding-inline-start:.875rem;padding-inline-end:.875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}ax-data-table .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{justify-content:space-between}}.cdk-drag-preview{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-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.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.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: i6.AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "isLoading", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "component", type: i6.AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: i6.AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: i6.AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: i6.AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: i6.AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: i6.AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, inputs: ['dataSource'], outputs: ['selectedRowsChange'], providers: [
+            args: [{ selector: 'ax-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, inputs: ['dataSource', 'parentField'], outputs: ['selectedRowsChange'], providers: [
                         {
                             provide: AXBaseDataTable,
                             useExisting: AXDataTableComponent,
                         },
                         AXUnsubscriber,
-                    ], standalone: false, template: "<ng-content select=\"ax-header\"> </ng-content>\n@if (!displayedRows().length) {\n  <div class=\"ax-data-table-empty-data\">\n    @if (emptyTemplate) {\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n    } @else {\n      <span>No Record Found!</span>\n    }\n  </div>\n}\n<div class=\"ax-data-table-wrapper\">\n  <table>\n    @if (showHeader) {\n      <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n        <tr\n          [cdkDropListDisabled]=\"!allowReordering\"\n          cdkDropList\n          cdkScrollable\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @for (c of startFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-start\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <th\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n              }\n            </th>\n          }\n          <th></th>\n          @for (c of endFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderHeaderTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n    <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n      @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n        @if (rowTemplate) {\n          <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: row, rowIndex: rowIndex } }\"> </ng-container>\n        } @else {\n          <tr\n            [class.ax-state-focused]=\"focusedRow && row === focusedRow\"\n            [attr.data-index]=\"rowIndex\"\n            [class.ax-state-selected]=\"selectedRows.includes(row)\"\n            style.height=\"{{ itemHeight }}px\"\n            style.max-height=\"{{ itemHeight }}px\"\n            (click)=\"handleRowClick($event, row)\"\n          >\n            @for (c of startFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-start]=\"true\"\n                [class.isLast]=\"c['isLastFixedColumn']\"\n                [style.--sticky-start]=\"c['stickyStart']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            @for (c of normalColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            <td></td>\n            @for (c of endFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-end]=\"true\"\n                [class.isFirst]=\"c['isFirstFixedColumn']\"\n                [style.--sticky-end]=\"c['stickyEnd']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"c.renderCellTemplate; context: { $implicit: { data: row, rowIndex: calculateRowIndex(rowIndex) } }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n\n      <tr class=\"empty-row\"></tr>\n    </tbody>\n    @if (showFooter) {\n      <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n        <tr>\n          @for (c of startFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-start\"\n              [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <td\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div class=\"ax-resize-handle\" (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"></div>\n              }\n            </td>\n          }\n          <td></td>\n          @for (c of endFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"c.renderFooterTemplate; context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (paging) {\n  <div class=\"ax-table-footer\" #footerContainer>\n    <ax-data-pager\n      #dataPager\n      [displayMode]=\"'custom'\"\n      (onChanged)=\"onPageChanged($event)\"\n      [total]=\"dataSource.totalCount\"\n      [size]=\"dataSource.pageSize\"\n      [isLoading]=\"isLoading()\"\n    >\n      <ax-prefix class=\"ax-data-table-numeric-paging\">\n        <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n        <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n      </ax-prefix>\n      <ax-prefix class=\"ax-data-table-input-paging\">\n        <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n        <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n        <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n      </ax-prefix>\n      <ax-suffix class=\"ax-data-table-info\">\n        <ax-data-pager-info> </ax-data-pager-info>\n        <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n          <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n        </ax-button>\n      </ax-suffix>\n    </ax-data-pager>\n  </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\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));position:relative;min-height:inherit}ax-data-table .ax-data-table-empty-data{position:absolute;top:calc(50% - 40px);width:100%;color:rgb(var(--ax-color-neutral-500));text-align:center}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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-primary-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;border-top:none;border-bottom:none;z-index:3;box-shadow:inset 1px 1px 0 2px 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 .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-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 tfoot tr td{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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom:0;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 .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}}ax-data-table ax-data-pager{justify-content:center}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding-inline-start:.875rem;padding-inline-end:.875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}ax-data-table .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{justify-content:space-between}}.cdk-drag-preview{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-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"] }]
+                    ], standalone: false, template: "<ng-content select=\"ax-header\"> </ng-content>\n@if (!displayedRows().length) {\n  <div class=\"ax-data-table-empty-data\">\n    @if (emptyTemplate) {\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n    } @else {\n      <span>No Record Found!</span>\n    }\n  </div>\n}\n<div class=\"ax-data-table-wrapper\">\n  <table>\n    @if (showHeader) {\n      <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n        <tr\n          [cdkDropListDisabled]=\"!allowReordering\"\n          cdkDropList\n          cdkScrollable\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @for (c of startFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-start\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    c.renderHeaderTemplate;\n                    context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\n                  \"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <th\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    c.renderHeaderTemplate;\n                    context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\n                  \"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </th>\n          }\n          <th></th>\n          @for (c of endFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    c.renderHeaderTemplate;\n                    context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\n                  \"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n    <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n      @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n        <ng-container *ngTemplateOutlet=\"rowTemp; context: { data: { row, rowIndex } }\"></ng-container>\n      }\n\n      <ng-template #rowTemp let-data=\"data\">\n        @if (rowTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              rowTemplate;\n              context: { $implicit: { data: data.row, rowIndex: data.rowIndex } }\n            \"\n          >\n          </ng-container>\n        } @else {\n          <tr\n            [class.ax-state-focused]=\"focusedRow && data.row === focusedRow\"\n            [attr.data-index]=\"data.rowIndex\"\n            [class.ax-state-selected]=\"selectedRows.includes(data.row)\"\n            style.height=\"{{ itemHeight }}px\"\n            style.max-height=\"{{ itemHeight }}px\"\n            (click)=\"handleRowClick($event, data.row)\"\n          >\n            @for (c of startFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-start]=\"true\"\n                [class.isLast]=\"c['isLastFixedColumn']\"\n                [style.--sticky-start]=\"c['stickyStart']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (data.row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      c.renderCellTemplate;\n                      context: { $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) } }\n                    \"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            @for (c of normalColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (data.row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      c.renderCellTemplate;\n                      context: { $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) } }\n                    \"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            <td></td>\n            @for (c of endFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-end]=\"true\"\n                [class.isFirst]=\"c['isFirstFixedColumn']\"\n                [style.--sticky-end]=\"c['stickyEnd']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                @if (data.row && !isLoading()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      c.renderCellTemplate;\n                      context: { $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) } }\n                    \"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container *ngTemplateOutlet=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n          </tr>\n          @if (data.row?.__meta__?.expanded) {\n            @for (childRow of data.row.children; let childRowIndex = $index; track childRowIndex) {\n              <ng-container\n                *ngTemplateOutlet=\"rowTemp; context: { data: { row: childRow, rowIndex: childRowIndex } }\"\n              ></ng-container>\n            }\n          }\n        }\n      </ng-template>\n\n      <tr class=\"empty-row\"></tr>\n    </tbody>\n    @if (showFooter) {\n      <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n        <tr>\n          @for (c of startFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-start\"\n              [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    c.renderFooterTemplate;\n                    context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\n                  \"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <td\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    c.renderFooterTemplate;\n                    context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\n                  \"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </td>\n          }\n          <td></td>\n          @for (c of endFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    c.renderFooterTemplate;\n                    context: { $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\n                  \"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (paging) {\n  <div class=\"ax-table-footer\" #footerContainer>\n    <ax-data-pager\n      #dataPager\n      [displayMode]=\"'custom'\"\n      (onChanged)=\"onPageChanged($event)\"\n      [total]=\"dataSource.totalCount\"\n      [size]=\"dataSource.pageSize\"\n      [isLoading]=\"isLoading()\"\n    >\n      <ax-prefix class=\"ax-data-table-numeric-paging\">\n        <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n        <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n      </ax-prefix>\n      <ax-prefix class=\"ax-data-table-input-paging\">\n        <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n        <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n        <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n      </ax-prefix>\n      <ax-suffix class=\"ax-data-table-info\">\n        <ax-data-pager-info> </ax-data-pager-info>\n        <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n          <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n        </ax-button>\n      </ax-suffix>\n    </ax-data-pager>\n  </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\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));position:relative;min-height:inherit}ax-data-table .ax-data-table-empty-data{position:absolute;top:calc(50% - 40px);width:100%;color:rgb(var(--ax-color-neutral-500));text-align:center}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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-primary-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;border-top:none;border-bottom:none;z-index:3;box-shadow:inset 1px 1px 0 2px 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 .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-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-expand-handler{padding-inline-start:.25rem;padding-inline-end:.25rem;cursor:pointer}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler.has-parent{padding-inline-start:1.5rem!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-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 tfoot tr td{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;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-color-border-default))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-color-border-default))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom:0;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 .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}}ax-data-table ax-data-pager{justify-content:center}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-color-border-default));padding-inline-start:.875rem;padding-inline-end:.875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}ax-data-table .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{justify-content:space-between}}.cdk-drag-preview{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-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: { dataPager: [{
                 type: ViewChild,
                 args: ['dataPager']
@@ -1400,6 +1678,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 type: Output
             }], onColumnsOrderChanged: [{
                 type: Output
+            }], onColumnSizeChanged: [{
+                type: Output
             }], columns: [{
                 type: ContentChildren,
                 args: [AXDataTableColumnComponent]
@@ -1776,7 +2056,7 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
                 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                <div class=\"ax-caption\">\n                  <ng-container *ngTemplateOutlet=\"c.renderHeaderTemplate\"></ng-container>\n                  @if (getSort(c)) {\n                    <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                  }\n                </div>\n                <!-- @if(c.allowResizing)\n              {\n              <div class=\"ax-resize-handle\" [ax-table-column-resizble]=\"c\"></div>\n              } -->\n              </th>\n            }\n            <th></th>\n          </tr>\n        </thead>\n      </table>\n    </div>\n  </div>\n}\n\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll()\">\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"itemHeight\"\n        [style.--item-height]=\"itemHeight + 'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n      >\n        <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n          <colgroup>\n            @for (c of notFixedColumn(); track c.name) {\n              <col [style.width]=\"c.width\" />\n            }\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container\n              *cdkVirtualFor=\"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                    <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                      @if (item && !isLoading()) {\n                        <!------------------- render cell ------------------->\n                        <ng-container\n                          *ngTemplateOutlet=\"c.renderCellTemplate; 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                  <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: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "footerContainer", first: true, predicate: ["footerContainer"], descendants: true }, { propertyName: "scrollableContainer", first: true, predicate: ["scrolling"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n<!------------------- Header contents ------------------->\n@if (showHeader) {\n  <div class=\"ax-header-content\">\n    <div class=\"ax-header-columns\">\n      <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n        <thead>\n          <tr>\n            @for (c of notFixedColumn(); track c.name) {\n              <th\n                [class.ax-interactive]=\"c.allowSorting\"\n                (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n                [style.width]=\"c.width\"\n              >\n                <div class=\"ax-caption\">\n                  <ng-container *ngTemplateOutlet=\"c.renderHeaderTemplate\"></ng-container>\n                  @if (getSort(c)) {\n                    <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                  }\n                </div>\n                <!-- @if(c.allowResizing)\n              {\n              <div class=\"ax-resize-handle\" [ax-table-column-resizble]=\"c\"></div>\n              } -->\n              </th>\n            }\n            <th></th>\n          </tr>\n        </thead>\n      </table>\n    </div>\n  </div>\n}\n\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll()\">\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"itemHeight\"\n        [style.--item-height]=\"itemHeight + 'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n      >\n        <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n          <colgroup>\n            @for (c of notFixedColumn(); track c.name) {\n              <col [style.width]=\"c.width\" />\n            }\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container\n              *cdkVirtualFor=\"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                    <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                      @if (item && !isLoading()) {\n                        <!------------------- render cell ------------------->\n                        <ng-container\n                          *ngTemplateOutlet=\"c.renderCellTemplate; 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                  <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.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXInfiniteScrollDataTableComponent, decorators: [{
             type: Component,
@@ -1834,6 +2114,7 @@ const COMPONENT = [
     AXDataTableTextColumnComponent,
     AXRowIndexColumnComponent,
     AXRowSelectColumnComponent,
+    AXRowExpandColumnComponent,
     AXRowCommandColumnComponent,
     AXRowDropdownCommandColumnComponent,
     AXDataTableColumnResizableDirective,
@@ -1845,9 +2126,9 @@ const MODULES = [
     AXTranslationModule,
     AXResultModule,
     AXLoadingModule,
-    AXDecoratorModule,
     AXSkeletonModule,
     AXButtonModule,
+    AXDecoratorModule,
     AXDropdownModule,
     AXFormatModule,
     AXRippleDirective,
@@ -1864,6 +2145,7 @@ class AXDataTableModule {
             AXDataTableTextColumnComponent,
             AXRowIndexColumnComponent,
             AXRowSelectColumnComponent,
+            AXRowExpandColumnComponent,
             AXRowCommandColumnComponent,
             AXRowDropdownCommandColumnComponent,
             AXDataTableColumnResizableDirective], imports: [CommonModule,
@@ -1872,9 +2154,9 @@ class AXDataTableModule {
             AXTranslationModule,
             AXResultModule,
             AXLoadingModule,
-            AXDecoratorModule,
             AXSkeletonModule,
             AXButtonModule,
+            AXDecoratorModule,
             AXDropdownModule,
             AXFormatModule,
             AXRippleDirective,
@@ -1887,6 +2169,7 @@ class AXDataTableModule {
             AXDataTableTextColumnComponent,
             AXRowIndexColumnComponent,
             AXRowSelectColumnComponent,
+            AXRowExpandColumnComponent,
             AXRowCommandColumnComponent,
             AXRowDropdownCommandColumnComponent,
             AXDataTableColumnResizableDirective] }); }
@@ -1896,9 +2179,9 @@ class AXDataTableModule {
             AXTranslationModule,
             AXResultModule,
             AXLoadingModule,
-            AXDecoratorModule,
             AXSkeletonModule,
             AXButtonModule,
+            AXDecoratorModule,
             AXDropdownModule,
             AXFormatModule,
             AXDataPagerModule] }); }
@@ -1917,5 +2200,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXBaseDataTable, AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableColumnResizableDirective, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXInfiniteScrollDataTableComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
+export { AXBaseDataTable, AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableColumnResizableDirective, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXInfiniteScrollDataTableComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowExpandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
 //# sourceMappingURL=acorex-components-data-table.mjs.map