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

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

@@ -1,6 +1,7 @@
 import { MXBaseComponent, convertArrayToDataSource, AXComponent, AXRippleDirective, AXListDataSource, AXPagedComponent, AXCommonModule } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, signal, Input, Output, Injectable, inject, ElementRef, Renderer2, NgZone, ChangeDetectorRef, DOCUMENT, PLATFORM_ID, HostListener, Directive, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, computed, effect, ContentChildren, ContentChild, NgModule } from '@angular/core';
+import { isEqual, cloneDeep } from 'lodash-es';
 import { isPlatformBrowser, AsyncPipe, NgTemplateOutlet, NgClass, CommonModule } from '@angular/common';
 import { Subject, debounceTime, buffer, filter } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
@@ -21,7 +22,6 @@ import { AXSkeletonComponent, AXSkeletonModule } from '@acorex/components/skelet
 import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { CdkScrollable, CdkVirtualScrollableElement, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
-import { cloneDeep } from 'lodash-es';
 import sum from 'lodash-es/sum';
 
 class AXBaseDataTable extends MXBaseComponent {
@@ -44,8 +44,10 @@ class AXBaseDataTable extends MXBaseComponent {
         return this._selectedRows();
     }
     set selectedRows(v) {
-        this._selectedRows.set(v);
-        this.selectedRowsChange.emit(v);
+        if (!isEqual(this._selectedRows(), v)) {
+            this._selectedRows.set(v);
+            this.selectedRowsChange.emit(v);
+        }
     }
     async expandRow(row) {
         if (row.data['__meta__.expanded'] || row.data.children != undefined) {
@@ -661,7 +663,7 @@ class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
       @if (row.data) {
         @for (item of getItems(row.data); track $index) {
           <button
-            [style.color]="'rgba(var(--ax-color-' + (item.color ?? 'primary)') + '-500))'"
+            [style.color]="'rgba(var(--ax-sys-color-' + (item.color ?? 'primary)') + '-500))'"
             [disabled]="item.disabled"
             [class.ax-state-disabled]="item.disabled"
             [axRipple]="!item.disabled"
@@ -683,7 +685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
       @if (row.data) {
         @for (item of getItems(row.data); track $index) {
           <button
-            [style.color]="'rgba(var(--ax-color-' + (item.color ?? 'primary)') + '-500))'"
+            [style.color]="'rgba(var(--ax-sys-color-' + (item.color ?? 'primary)') + '-500))'"
             [disabled]="item.disabled"
             [class.ax-state-disabled]="item.disabled"
             [axRipple]="!item.disabled"
@@ -1328,6 +1330,10 @@ class AXDataTableComponent extends AXBaseDataTable {
          *  @ignore
          */
         this.clickSubject = new Subject();
+        /**
+         *  @ignore
+         */
+        this.hasLoadedData = false;
         /**
          *  @ignore
          */
@@ -1385,6 +1391,12 @@ class AXDataTableComponent extends AXBaseDataTable {
         this._focusedRow = v;
         this.focusedRowChange.emit(v);
     }
+    /**
+     * Returns true if in manual mode and no data has been loaded yet.
+     */
+    get showNoDataLoadedYet() {
+        return this.fetchDataMode === 'manual' && !this.hasLoadedData;
+    }
     /**
      *  @ignore
      */
@@ -1407,6 +1419,9 @@ class AXDataTableComponent extends AXBaseDataTable {
             this.displayedRows.set(data.items.filter((item) => !item[this.parentField]));
             this.totalRows = data.totalCount;
             this.hasItems = data.totalCount > 0;
+            if (this.fetchDataMode === 'manual' && !this.hasLoadedData) {
+                this.hasLoadedData = true;
+            }
         });
         this.dataSource.onItemExpanded.pipe(this._unsubscriber.takeUntilDestroy).subscribe((data) => {
             const { expandedItem, children } = data;
@@ -1588,9 +1603,9 @@ class AXDataTableComponent extends AXBaseDataTable {
      * Refreshes the data in the data source and resets the data pager to the first page.
      * @ignore
      */
-    refresh() {
-        this.dataSource.refresh();
-        if (this.dataPager) {
+    refresh(options = { reset: true }) {
+        this.dataSource.refresh(options);
+        if (this.dataPager && options.reset) {
             this.dataPager.goFirstPage();
         }
     }
@@ -1676,15 +1691,15 @@ class AXDataTableComponent extends AXBaseDataTable {
             firstEndColumn['isFirstFixedColumn'] = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXDataTableComponent, isStandalone: true, 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", onPageChanged: "onPageChanged" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXDataTableComponent, isStandalone: true, selector: "ax-data-table", inputs: { dataSource: "dataSource", selectedRows: "selectedRows", parentField: "parentField", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", noDataTemplate: "noDataTemplate", alternative: "alternative", showHeader: "showHeader", fixedHeader: "fixedHeader", showFooter: "showFooter", fixedFooter: "fixedFooter", itemHeight: "itemHeight", allowReordering: "allowReordering", paging: "paging", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { selectedRowsChange: "selectedRowsChange", focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", onColumnsOrderChanged: "onColumnsOrderChanged", onColumnSizeChanged: "onColumnSizeChanged", onPageChanged: "onPageChanged" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
             { provide: AXBaseDataTable, useExisting: AXDataTableComponent },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXDataTableComponent },
-        ], queries: [{ propertyName: "customDataPager", first: true, predicate: AXDataPagerComponent, descendants: true, static: true }, { propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "dataPager", first: true, predicate: ["dataPager"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n@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>{{ '@acorex:common.general.no-record' | translate | async }}</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\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <th\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </th>\n          }\n          <th></th>\n          @for (c of endFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n    <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n      @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n        <ng-container\n          [ngTemplateOutlet]=\"rowTemp\"\n          [ngTemplateOutletContext]=\"{ data: { row, rowIndex } }\"\n        ></ng-container>\n      }\n\n      <ng-template #rowTemp let-data=\"data\">\n        @if (rowTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"rowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: { data: data.row, rowIndex: data.rowIndex } }\"\n          >\n          </ng-container>\n        } @else {\n          <tr\n            [class.ax-state-focused]=\"focusedRow && data.row === focusedRow\"\n            [attr.data-index]=\"data.rowIndex\"\n            [class.ax-state-selected]=\"selectedRows.includes(data.row)\"\n            style.height=\"{{ itemHeight }}px\"\n            style.max-height=\"{{ itemHeight }}px\"\n            (click)=\"handleRowClick($event, data.row)\"\n          >\n            @for (c of startFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-start]=\"true\"\n                [class.isLast]=\"c['isLastFixedColumn']\"\n                [style.--sticky-start]=\"c['stickyStart']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                <div class=\"ax-bg\"></div>\n                @if (data.row && !isLoading()) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                    }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            @for (c of normalColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                <div class=\"ax-bg\"></div>\n                @if (data.row && !isLoading()) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                    }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            <td><div class=\"ax-bg\"></div></td>\n            @for (c of endFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-end]=\"true\"\n                [class.isFirst]=\"c['isFirstFixedColumn']\"\n                [style.--sticky-end]=\"c['stickyEnd']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                <div class=\"ax-bg\"></div>\n                @if (data.row && !isLoading()) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                    }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n          </tr>\n          @if (data.row?.__meta__?.expanded) {\n            @for (childRow of data.row.children; let childRowIndex = $index; track childRowIndex) {\n              <ng-container\n                [ngTemplateOutlet]=\"rowTemp\"\n                [ngTemplateOutletContext]=\"{ data: { row: childRow, rowIndex: childRowIndex } }\"\n              ></ng-container>\n            }\n          }\n        }\n      </ng-template>\n\n      <tr class=\"empty-row\"></tr>\n    </tbody>\n    @if (showFooter) {\n      <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n        <tr>\n          @for (c of startFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-start\"\n              [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <td\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </td>\n          }\n          <td></td>\n          @for (c of endFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (paging) {\n  <div class=\"ax-table-footer\" #footerContainer>\n    <ng-template #customPager>\n      <ng-content select=\"ax-data-pager\"></ng-content>\n    </ng-template>\n\n    @if (customDataPager) {\n      <ng-container [ngTemplateOutlet]=\"customPager\"></ng-container>\n    } @else {\n      <ax-data-pager\n        #dataPager\n        [displayMode]=\"'custom'\"\n        (onChanged)=\"handleChangePage($event)\"\n        [total]=\"dataSource.totalCount\"\n        [size]=\"dataSource.pageSize\"\n        [isLoading]=\"isLoading()\"\n      >\n        <ax-prefix class=\"ax-data-table-numeric-paging\">\n          <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n          <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n        </ax-prefix>\n        <ax-prefix class=\"ax-data-table-input-paging\">\n          <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n          <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n          <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n        </ax-prefix>\n        <ax-suffix class=\"ax-data-table-info\">\n          <ax-data-pager-info> </ax-data-pager-info>\n          <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n            <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n          </ax-button>\n        </ax-suffix>\n      </ax-data-pager>\n    }\n  </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\n", styles: ["ax-data-table{--ax-comp-data-table-font-size: .875rem;--ax-comp-data-table-line-height: 1rem;--ax-comp-data-table-border-color: var(--ax-sys-color-border-surface);--ax-comp-data-table-border-radius: var(--ax-sys-border-radius);--ax-comp-data-table-column-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-data-table-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-header-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-data-table-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-footer-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-data-table-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-data-table-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-data-table-focus-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-data-table-selected-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-selected-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-index-bg-color: var(--ax-sys-color-light-surface);--ax-comp-data-table-index-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-alternative-bg-color: var(--ax-sys-color-light-surface);--ax-comp-data-table-alternative-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-skeleton-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-data-table-handler-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-interactive-bg-color: var(--ax-sys-color-light-surface)}.ax-dark ax-data-table{--ax-comp-data-table-column-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-data-table-header-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-data-table-header-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-data-table-footer-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-data-table-footer-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-data-table-hover-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-focus-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-selected-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-data-table-selected-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-index-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-data-table-index-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-data-table-skeleton-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-alternative-bg-color: var(--ax-sys-color-surface);--ax-comp-data-table-alternative-text-color: var(--ax-sys-color-on-surface);--ax-comp-data-table-handler-bg-color: var(--ax-sys-color-primary-dark-surface)}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table{display:flex;flex-direction:column;height:100%;width:100%;font-size:var(--ax-comp-data-table-font-size);line-height:var(--ax-comp-data-table-line-height);border-radius:var(--ax-comp-data-table-border-radius);border-width:1px;border-color:rgba(var(--ax-comp-data-table-border-color));position:relative;min-height:inherit}ax-data-table .ax-data-table-empty-data{position:absolute;top:calc(50% - 40px);width:100%;color:rgb(var(--ax-sys-color-ghost-500));text-align:center}ax-data-table .ax-data-table-wrapper{overflow:auto;width:100%;flex:1;border-radius:var(--ax-comp-data-table-border-radius)}ax-data-table .ax-data-table-wrapper table{display:table;height:100%;width:100%;table-layout:fixed;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{overflow:hidden;border-start-end-radius:var(--ax-comp-data-table-border-radius);border-start-start-radius:var(--ax-comp-data-table-border-radius)}ax-data-table .ax-data-table-wrapper table thead th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-header-bg-color));color:rgba(var(--ax-comp-data-table-header-text-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-comp-data-table-interactive-bg-color))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-comp-data-table-handler-bg-color))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{position:sticky;top:0;border-top:none;border-bottom:none;z-index:3;box-shadow:inset 1px 1px 0 2px rgba(var(--ax-comp-data-table-border-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{position:sticky;z-index:2;background-color:rgba(var(--ax-comp-data-table-column-bg-color));border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table .ax-data-table-wrapper table tbody tr td{z-index:0}ax-data-table .ax-data-table-wrapper table tbody tr td .ax-bg{top:0;left:0;z-index:-1;width:100%;height:100%;position:absolute;border-inline-end:1px solid rgba(var(--ax-comp-data-table-border-color));background-color:transparent;opacity:.3}ax-data-table .ax-data-table-wrapper table tbody .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-comp-data-table-alternative-bg-color));color:rgba(var(--ax-comp-data-table-alternative-text-color))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-height:2.5rem}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-hover-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-hover-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-focus-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-focus-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-selected-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-selected-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-selected-hover-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-selected-hover-bg-color))}ax-data-table .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-column-bg-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.5rem;padding-bottom:.5rem;vertical-align:middle}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler{padding-inline-start:.25rem;padding-inline-end:.25rem;cursor:pointer}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler.has-parent{padding-inline-start:1.5rem!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-comp-data-table-index-bg-color));color:rgba(var(--ax-comp-data-table-index-text-color));text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column{text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-comp-data-table-border-radius);border-style:none;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:transparent;padding:.25rem;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem;background-color:rgba(var(--ax-comp-data-table-skeleton-bg-color))}ax-data-table .ax-data-table-wrapper table tfoot tr td{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-footer-bg-color));color:rgba(var(--ax-comp-data-table-footer-text-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-comp-data-table-interactive-bg-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom:-1px;border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-comp-data-table-border-color)),0 -1px rgba(var(--ax-comp-data-table-border-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}}ax-data-table ax-data-pager{justify-content:center}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-comp-data-table-border-color));padding-inline-start:.875rem;padding-inline-end:.875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}ax-data-table .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{justify-content:space-between}}.cdk-drag-preview{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-sys-color-primary-900),.2),0 8px 10px 1px rgba(var(--ax-sys-color-primary-900),.14),0 3px 14px 2px rgba(var(--ax-sys-color-primary-900),.12);border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-surface-fore));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "isLoading", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "customDataPager", first: true, predicate: AXDataPagerComponent, descendants: true, static: true }, { propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "dataPager", first: true, predicate: ["dataPager"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n<div class=\"ax-data-table-wrapper\">\n  <table>\n    @if (showHeader) {\n      <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n        <tr\n          [cdkDropListDisabled]=\"!allowReordering\"\n          cdkDropList\n          cdkScrollable\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @for (c of startFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-start\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <th\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </th>\n          }\n          <th></th>\n          @for (c of endFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n    <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n      @if (showNoDataLoadedYet) {\n        <tr>\n          <td class=\"ax-data-table-empty-data\" [attr.colspan]=\"columnsList().length + 1\">\n            @if (noDataTemplate) {\n              <ng-container [ngTemplateOutlet]=\"noDataTemplate\"></ng-container>\n            } @else {\n              <span>{{ '@acorex:common.general.no-data-yet' | translate | async }}</span>\n            }\n          </td>\n        </tr>\n      } @else if (!displayedRows().length) {\n        <tr>\n          <td class=\"ax-data-table-empty-data\" [attr.colspan]=\"columnsList().length + 1\">\n            @if (emptyTemplate) {\n              <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\n            } @else {\n              <span>{{ '@acorex:common.general.no-record' | translate | async }}</span>\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n          <ng-container\n            [ngTemplateOutlet]=\"rowTemp\"\n            [ngTemplateOutletContext]=\"{ data: { row, rowIndex } }\"\n          ></ng-container>\n        }\n\n        <ng-template #rowTemp let-data=\"data\">\n          @if (rowTemplate) {\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: { data: data.row, rowIndex: data.rowIndex } }\"\n            >\n            </ng-container>\n          } @else {\n            <tr\n              [class.ax-state-focused]=\"focusedRow && data.row === focusedRow\"\n              [attr.data-index]=\"data.rowIndex\"\n              [class.ax-state-selected]=\"selectedRows.includes(data.row)\"\n              style.height=\"{{ itemHeight }}px\"\n              style.max-height=\"{{ itemHeight }}px\"\n              (click)=\"handleRowClick($event, data.row)\"\n            >\n              @for (c of startFixedColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [class.sticky-start]=\"true\"\n                  [class.isLast]=\"c['isLastFixedColumn']\"\n                  [style.--sticky-start]=\"c['stickyStart']\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n              @for (c of normalColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n              <td><div class=\"ax-bg\"></div></td>\n              @for (c of endFixedColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [class.sticky-end]=\"true\"\n                  [class.isFirst]=\"c['isFirstFixedColumn']\"\n                  [style.--sticky-end]=\"c['stickyEnd']\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n            </tr>\n            @if (data.row?.__meta__?.expanded) {\n              @for (childRow of data.row.children; let childRowIndex = $index; track childRowIndex) {\n                <ng-container\n                  [ngTemplateOutlet]=\"rowTemp\"\n                  [ngTemplateOutletContext]=\"{ data: { row: childRow, rowIndex: childRowIndex } }\"\n                ></ng-container>\n              }\n            }\n          }\n        </ng-template>\n\n        <tr class=\"empty-row\"></tr>\n      }\n    </tbody>\n    @if (showFooter) {\n      <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n        <tr>\n          @for (c of startFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-start\"\n              [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <td\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </td>\n          }\n          <td></td>\n          @for (c of endFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (paging) {\n  <div class=\"ax-table-footer\" #footerContainer>\n    <ng-template #customPager>\n      <ng-content select=\"ax-data-pager\"></ng-content>\n    </ng-template>\n\n    @if (customDataPager) {\n      <ng-container [ngTemplateOutlet]=\"customPager\"></ng-container>\n    } @else {\n      <ax-data-pager\n        #dataPager\n        [displayMode]=\"'custom'\"\n        (onChanged)=\"handleChangePage($event)\"\n        [total]=\"dataSource.totalCount\"\n        [size]=\"dataSource.pageSize\"\n        [isLoading]=\"isLoading()\"\n      >\n        <ax-prefix class=\"ax-data-table-numeric-paging\">\n          <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n          <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n        </ax-prefix>\n        <ax-prefix class=\"ax-data-table-input-paging\">\n          <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n          <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n          <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n        </ax-prefix>\n        <ax-suffix class=\"ax-data-table-info\">\n          <ax-data-pager-info> </ax-data-pager-info>\n          <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh({ reset: false })\">\n            <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n          </ax-button>\n        </ax-suffix>\n      </ax-data-pager>\n    }\n  </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\n", styles: ["ax-data-table{--ax-comp-data-table-font-size: .875rem;--ax-comp-data-table-line-height: 1rem;--ax-comp-data-table-border-color: var(--ax-sys-color-border-surface);--ax-comp-data-table-border-radius: var(--ax-sys-border-radius);--ax-comp-data-table-column-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-data-table-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-header-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-data-table-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-footer-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-data-table-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-data-table-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-data-table-focus-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-data-table-selected-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-selected-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-index-bg-color: var(--ax-sys-color-light-surface);--ax-comp-data-table-index-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-alternative-bg-color: var(--ax-sys-color-light-surface);--ax-comp-data-table-alternative-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-skeleton-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-data-table-handler-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-interactive-bg-color: var(--ax-sys-color-light-surface)}.ax-dark ax-data-table{--ax-comp-data-table-column-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-data-table-header-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-data-table-header-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-data-table-footer-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-data-table-footer-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-data-table-hover-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-focus-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-selected-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-data-table-selected-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-index-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-data-table-index-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-data-table-skeleton-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-alternative-bg-color: var(--ax-sys-color-surface);--ax-comp-data-table-alternative-text-color: var(--ax-sys-color-on-surface);--ax-comp-data-table-handler-bg-color: var(--ax-sys-color-primary-dark-surface)}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table{display:flex;flex-direction:column;height:100%;width:100%;font-size:var(--ax-comp-data-table-font-size);line-height:var(--ax-comp-data-table-line-height);border-radius:var(--ax-comp-data-table-border-radius);border-width:1px;border-color:rgba(var(--ax-comp-data-table-border-color));position:relative;min-height:inherit}ax-data-table .ax-data-table-empty-data{position:absolute;top:calc(50% - 40px);width:100%;color:rgb(var(--ax-sys-color-ghost-500));text-align:center}ax-data-table td.ax-data-table-empty-data{position:static;top:auto;width:auto;padding:2rem 1rem;text-align:center;vertical-align:middle;height:8rem;border-bottom:none}ax-data-table td.ax-data-table-empty-data span{color:rgb(var(--ax-sys-color-ghost-500));font-size:var(--ax-comp-data-table-font-size);display:block}ax-data-table .ax-data-table-wrapper{overflow:auto;width:100%;flex:1;border-radius:var(--ax-comp-data-table-border-radius)}ax-data-table .ax-data-table-wrapper table{display:table;height:100%;width:100%;table-layout:fixed;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{overflow:hidden;border-start-end-radius:var(--ax-comp-data-table-border-radius);border-start-start-radius:var(--ax-comp-data-table-border-radius)}ax-data-table .ax-data-table-wrapper table thead th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-header-bg-color));color:rgba(var(--ax-comp-data-table-header-text-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-comp-data-table-interactive-bg-color))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-comp-data-table-handler-bg-color))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{position:sticky;top:0;border-top:none;border-bottom:none;z-index:3;box-shadow:inset 1px 1px 0 2px rgba(var(--ax-comp-data-table-border-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{position:sticky;z-index:2;background-color:rgba(var(--ax-comp-data-table-column-bg-color));border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table .ax-data-table-wrapper table tbody tr td{z-index:0}ax-data-table .ax-data-table-wrapper table tbody tr td .ax-bg{top:0;left:0;z-index:-1;width:100%;height:100%;position:absolute;border-inline-end:1px solid rgba(var(--ax-comp-data-table-border-color));background-color:transparent;opacity:.3}ax-data-table .ax-data-table-wrapper table tbody .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-comp-data-table-alternative-bg-color));color:rgba(var(--ax-comp-data-table-alternative-text-color))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-height:2.5rem}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-hover-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-hover-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-focus-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-focus-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-selected-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-selected-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-selected-hover-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-selected-hover-bg-color))}ax-data-table .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-column-bg-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.5rem;padding-bottom:.5rem;vertical-align:middle}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler{padding-inline-start:.25rem;padding-inline-end:.25rem;cursor:pointer}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler.has-parent{padding-inline-start:1.5rem!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-comp-data-table-index-bg-color));color:rgba(var(--ax-comp-data-table-index-text-color));text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column{text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-comp-data-table-border-radius);border-style:none;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:transparent;padding:.25rem;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem;background-color:rgba(var(--ax-comp-data-table-skeleton-bg-color))}ax-data-table .ax-data-table-wrapper table tfoot tr td{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-footer-bg-color));color:rgba(var(--ax-comp-data-table-footer-text-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-comp-data-table-interactive-bg-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom:-1px;border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-comp-data-table-border-color)),0 -1px rgba(var(--ax-comp-data-table-border-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}}ax-data-table ax-data-pager{justify-content:center}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-comp-data-table-border-color));padding-inline-start:.875rem;padding-inline-end:.875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}ax-data-table .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{justify-content:space-between}}.cdk-drag-preview{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-sys-color-primary-900),.2),0 8px 10px 1px rgba(var(--ax-sys-color-primary-900),.14),0 3px 14px 2px rgba(var(--ax-sys-color-primary-900),.12);border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-surface-fore));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "isLoading", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, inputs: ['dataSource', 'parentField'], outputs: ['selectedRowsChange'], providers: [
+            args: [{ selector: 'ax-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, inputs: ['dataSource', 'selectedRows', 'parentField'], outputs: ['selectedRowsChange'], providers: [
                         { provide: AXBaseDataTable, useExisting: AXDataTableComponent },
                         AXUnsubscriber,
                         { provide: AXComponent, useExisting: AXDataTableComponent },
@@ -1707,7 +1722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         AXButtonComponent,
                         AsyncPipe,
                         AXTranslatorPipe,
-                    ], 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>{{ '@acorex:common.general.no-record' | translate | async }}</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\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <th\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </th>\n          }\n          <th></th>\n          @for (c of endFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n    <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n      @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n        <ng-container\n          [ngTemplateOutlet]=\"rowTemp\"\n          [ngTemplateOutletContext]=\"{ data: { row, rowIndex } }\"\n        ></ng-container>\n      }\n\n      <ng-template #rowTemp let-data=\"data\">\n        @if (rowTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"rowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: { data: data.row, rowIndex: data.rowIndex } }\"\n          >\n          </ng-container>\n        } @else {\n          <tr\n            [class.ax-state-focused]=\"focusedRow && data.row === focusedRow\"\n            [attr.data-index]=\"data.rowIndex\"\n            [class.ax-state-selected]=\"selectedRows.includes(data.row)\"\n            style.height=\"{{ itemHeight }}px\"\n            style.max-height=\"{{ itemHeight }}px\"\n            (click)=\"handleRowClick($event, data.row)\"\n          >\n            @for (c of startFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-start]=\"true\"\n                [class.isLast]=\"c['isLastFixedColumn']\"\n                [style.--sticky-start]=\"c['stickyStart']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                <div class=\"ax-bg\"></div>\n                @if (data.row && !isLoading()) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                    }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            @for (c of normalColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                <div class=\"ax-bg\"></div>\n                @if (data.row && !isLoading()) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                    }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n            <td><div class=\"ax-bg\"></div></td>\n            @for (c of endFixedColumnsList(); track $index) {\n              <td\n                [style.width]=\"c.width\"\n                [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                [class.sticky-end]=\"true\"\n                [class.isFirst]=\"c['isFirstFixedColumn']\"\n                [style.--sticky-end]=\"c['stickyEnd']\"\n                [attr.data-label]=\"c.caption\"\n                tabindex=\"0\"\n                [class]=\"c.cssClass\"\n              >\n                <div class=\"ax-bg\"></div>\n                @if (data.row && !isLoading()) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                    [ngTemplateOutletContext]=\"{\n                      $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                    }\"\n                  ></ng-container>\n                } @else {\n                  @if (c.loadingEnabled && loading.enabled) {\n                    @if (loading.loadingTemplate) {\n                      <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                    } @else {\n                      <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                    }\n                  }\n                }\n              </td>\n            }\n          </tr>\n          @if (data.row?.__meta__?.expanded) {\n            @for (childRow of data.row.children; let childRowIndex = $index; track childRowIndex) {\n              <ng-container\n                [ngTemplateOutlet]=\"rowTemp\"\n                [ngTemplateOutletContext]=\"{ data: { row: childRow, rowIndex: childRowIndex } }\"\n              ></ng-container>\n            }\n          }\n        }\n      </ng-template>\n\n      <tr class=\"empty-row\"></tr>\n    </tbody>\n    @if (showFooter) {\n      <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n        <tr>\n          @for (c of startFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-start\"\n              [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <td\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </td>\n          }\n          <td></td>\n          @for (c of endFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (paging) {\n  <div class=\"ax-table-footer\" #footerContainer>\n    <ng-template #customPager>\n      <ng-content select=\"ax-data-pager\"></ng-content>\n    </ng-template>\n\n    @if (customDataPager) {\n      <ng-container [ngTemplateOutlet]=\"customPager\"></ng-container>\n    } @else {\n      <ax-data-pager\n        #dataPager\n        [displayMode]=\"'custom'\"\n        (onChanged)=\"handleChangePage($event)\"\n        [total]=\"dataSource.totalCount\"\n        [size]=\"dataSource.pageSize\"\n        [isLoading]=\"isLoading()\"\n      >\n        <ax-prefix class=\"ax-data-table-numeric-paging\">\n          <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n          <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n        </ax-prefix>\n        <ax-prefix class=\"ax-data-table-input-paging\">\n          <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n          <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n          <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n        </ax-prefix>\n        <ax-suffix class=\"ax-data-table-info\">\n          <ax-data-pager-info> </ax-data-pager-info>\n          <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n            <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n          </ax-button>\n        </ax-suffix>\n      </ax-data-pager>\n    }\n  </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\n", styles: ["ax-data-table{--ax-comp-data-table-font-size: .875rem;--ax-comp-data-table-line-height: 1rem;--ax-comp-data-table-border-color: var(--ax-sys-color-border-surface);--ax-comp-data-table-border-radius: var(--ax-sys-border-radius);--ax-comp-data-table-column-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-data-table-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-header-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-data-table-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-footer-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-data-table-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-data-table-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-data-table-focus-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-data-table-selected-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-selected-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-index-bg-color: var(--ax-sys-color-light-surface);--ax-comp-data-table-index-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-alternative-bg-color: var(--ax-sys-color-light-surface);--ax-comp-data-table-alternative-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-skeleton-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-data-table-handler-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-interactive-bg-color: var(--ax-sys-color-light-surface)}.ax-dark ax-data-table{--ax-comp-data-table-column-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-data-table-header-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-data-table-header-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-data-table-footer-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-data-table-footer-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-data-table-hover-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-focus-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-selected-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-data-table-selected-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-index-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-data-table-index-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-data-table-skeleton-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-alternative-bg-color: var(--ax-sys-color-surface);--ax-comp-data-table-alternative-text-color: var(--ax-sys-color-on-surface);--ax-comp-data-table-handler-bg-color: var(--ax-sys-color-primary-dark-surface)}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table{display:flex;flex-direction:column;height:100%;width:100%;font-size:var(--ax-comp-data-table-font-size);line-height:var(--ax-comp-data-table-line-height);border-radius:var(--ax-comp-data-table-border-radius);border-width:1px;border-color:rgba(var(--ax-comp-data-table-border-color));position:relative;min-height:inherit}ax-data-table .ax-data-table-empty-data{position:absolute;top:calc(50% - 40px);width:100%;color:rgb(var(--ax-sys-color-ghost-500));text-align:center}ax-data-table .ax-data-table-wrapper{overflow:auto;width:100%;flex:1;border-radius:var(--ax-comp-data-table-border-radius)}ax-data-table .ax-data-table-wrapper table{display:table;height:100%;width:100%;table-layout:fixed;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{overflow:hidden;border-start-end-radius:var(--ax-comp-data-table-border-radius);border-start-start-radius:var(--ax-comp-data-table-border-radius)}ax-data-table .ax-data-table-wrapper table thead th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-header-bg-color));color:rgba(var(--ax-comp-data-table-header-text-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-comp-data-table-interactive-bg-color))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-comp-data-table-handler-bg-color))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{position:sticky;top:0;border-top:none;border-bottom:none;z-index:3;box-shadow:inset 1px 1px 0 2px rgba(var(--ax-comp-data-table-border-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{position:sticky;z-index:2;background-color:rgba(var(--ax-comp-data-table-column-bg-color));border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table .ax-data-table-wrapper table tbody tr td{z-index:0}ax-data-table .ax-data-table-wrapper table tbody tr td .ax-bg{top:0;left:0;z-index:-1;width:100%;height:100%;position:absolute;border-inline-end:1px solid rgba(var(--ax-comp-data-table-border-color));background-color:transparent;opacity:.3}ax-data-table .ax-data-table-wrapper table tbody .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-comp-data-table-alternative-bg-color));color:rgba(var(--ax-comp-data-table-alternative-text-color))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-height:2.5rem}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-hover-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-hover-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-focus-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-focus-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-selected-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-selected-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-selected-hover-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-selected-hover-bg-color))}ax-data-table .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-column-bg-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.5rem;padding-bottom:.5rem;vertical-align:middle}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler{padding-inline-start:.25rem;padding-inline-end:.25rem;cursor:pointer}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler.has-parent{padding-inline-start:1.5rem!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-comp-data-table-index-bg-color));color:rgba(var(--ax-comp-data-table-index-text-color));text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column{text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-comp-data-table-border-radius);border-style:none;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:transparent;padding:.25rem;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem;background-color:rgba(var(--ax-comp-data-table-skeleton-bg-color))}ax-data-table .ax-data-table-wrapper table tfoot tr td{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-footer-bg-color));color:rgba(var(--ax-comp-data-table-footer-text-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-comp-data-table-interactive-bg-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom:-1px;border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-comp-data-table-border-color)),0 -1px rgba(var(--ax-comp-data-table-border-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}}ax-data-table ax-data-pager{justify-content:center}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-comp-data-table-border-color));padding-inline-start:.875rem;padding-inline-end:.875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}ax-data-table .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{justify-content:space-between}}.cdk-drag-preview{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-sys-color-primary-900),.2),0 8px 10px 1px rgba(var(--ax-sys-color-primary-900),.14),0 3px 14px 2px rgba(var(--ax-sys-color-primary-900),.12);border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-surface-fore));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}\n"] }]
+                    ], template: "<ng-content select=\"ax-header\"> </ng-content>\n<div class=\"ax-data-table-wrapper\">\n  <table>\n    @if (showHeader) {\n      <thead [ngClass]=\"{ 'ax-data-table-sticky-header': fixedHeader }\">\n        <tr\n          [cdkDropListDisabled]=\"!allowReordering\"\n          cdkDropList\n          cdkScrollable\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @for (c of startFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-start\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <th\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </th>\n          }\n          <th></th>\n          @for (c of endFixedColumnsList(); track $index) {\n            <th\n              cdkDrag\n              [cdkDragDisabled]=\"true\"\n              cdkDragLockAxis=\"x\"\n              class=\"ax-data-table-head-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderHeaderTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </th>\n          }\n        </tr>\n      </thead>\n    }\n    <tbody [ngClass]=\"{ 'ax-data-table-row-alternative': alternative }\">\n      @if (showNoDataLoadedYet) {\n        <tr>\n          <td class=\"ax-data-table-empty-data\" [attr.colspan]=\"columnsList().length + 1\">\n            @if (noDataTemplate) {\n              <ng-container [ngTemplateOutlet]=\"noDataTemplate\"></ng-container>\n            } @else {\n              <span>{{ '@acorex:common.general.no-data-yet' | translate | async }}</span>\n            }\n          </td>\n        </tr>\n      } @else if (!displayedRows().length) {\n        <tr>\n          <td class=\"ax-data-table-empty-data\" [attr.colspan]=\"columnsList().length + 1\">\n            @if (emptyTemplate) {\n              <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\n            } @else {\n              <span>{{ '@acorex:common.general.no-record' | translate | async }}</span>\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayedRows(); let rowIndex = $index; track rowIndex) {\n          <ng-container\n            [ngTemplateOutlet]=\"rowTemp\"\n            [ngTemplateOutletContext]=\"{ data: { row, rowIndex } }\"\n          ></ng-container>\n        }\n\n        <ng-template #rowTemp let-data=\"data\">\n          @if (rowTemplate) {\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: { data: data.row, rowIndex: data.rowIndex } }\"\n            >\n            </ng-container>\n          } @else {\n            <tr\n              [class.ax-state-focused]=\"focusedRow && data.row === focusedRow\"\n              [attr.data-index]=\"data.rowIndex\"\n              [class.ax-state-selected]=\"selectedRows.includes(data.row)\"\n              style.height=\"{{ itemHeight }}px\"\n              style.max-height=\"{{ itemHeight }}px\"\n              (click)=\"handleRowClick($event, data.row)\"\n            >\n              @for (c of startFixedColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [class.sticky-start]=\"true\"\n                  [class.isLast]=\"c['isLastFixedColumn']\"\n                  [style.--sticky-start]=\"c['stickyStart']\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n              @for (c of normalColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n              <td><div class=\"ax-bg\"></div></td>\n              @for (c of endFixedColumnsList(); track $index) {\n                <td\n                  [style.width]=\"c.width\"\n                  [class.ax-data-table-sticky-body-cell]=\"c.fixed && c.width\"\n                  [class.sticky-end]=\"true\"\n                  [class.isFirst]=\"c['isFirstFixedColumn']\"\n                  [style.--sticky-end]=\"c['stickyEnd']\"\n                  [attr.data-label]=\"c.caption\"\n                  tabindex=\"0\"\n                  [class]=\"c.cssClass\"\n                >\n                  <div class=\"ax-bg\"></div>\n                  @if (data.row && !isLoading()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"c.renderCellTemplate\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: { data: data.row, rowIndex: calculateRowIndex(data.rowIndex) },\n                      }\"\n                    ></ng-container>\n                  } @else {\n                    @if (c.loadingEnabled && loading.enabled) {\n                      @if (loading.loadingTemplate) {\n                        <ng-container [ngTemplateOutlet]=\"loading.loadingTemplate\"></ng-container>\n                      } @else {\n                        <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                      }\n                    }\n                  }\n                </td>\n              }\n            </tr>\n            @if (data.row?.__meta__?.expanded) {\n              @for (childRow of data.row.children; let childRowIndex = $index; track childRowIndex) {\n                <ng-container\n                  [ngTemplateOutlet]=\"rowTemp\"\n                  [ngTemplateOutletContext]=\"{ data: { row: childRow, rowIndex: childRowIndex } }\"\n                ></ng-container>\n              }\n            }\n          }\n        </ng-template>\n\n        <tr class=\"empty-row\"></tr>\n      }\n    </tbody>\n    @if (showFooter) {\n      <tfoot [ngClass]=\"{ 'ax-data-table-sticky-footer': fixedFooter }\">\n        <tr>\n          @for (c of startFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-start\"\n              [class.ax-data-table-sticky-footer-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isLast]=\"c['isLastFixedColumn']\"\n              [style.--sticky-start]=\"c['stickyStart']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n          @for (c of normalColumnsList(); track $index) {\n            <td\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n              @if (c.allowResizing && !c.fixed) {\n                <div\n                  class=\"ax-resize-handle\"\n                  (mousedown)=\"onResizeColumnStart($event, this.startFixedColumnsList().length + $index)\"\n                ></div>\n              }\n            </td>\n          }\n          <td></td>\n          @for (c of endFixedColumnsList(); track $index) {\n            <td\n              class=\"ax-data-table-sticky-footer-cell sticky-end\"\n              [class.ax-interactive]=\"c.allowSorting\"\n              (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n              [class.ax-data-table-sticky-header-cell]=\"c.fixed && c.width\"\n              [style.width]=\"c.width\"\n              [class.isFirst]=\"c['isFirstFixedColumn']\"\n              [style.--sticky-end]=\"c['stickyEnd']\"\n            >\n              <div class=\"ax-caption\">\n                <ng-container\n                  [ngTemplateOutlet]=\"c.renderFooterTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: { data: c, rows: displayedRows(), rowIndex: $index } }\"\n                ></ng-container>\n                @if (getSort(c)) {\n                  <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (paging) {\n  <div class=\"ax-table-footer\" #footerContainer>\n    <ng-template #customPager>\n      <ng-content select=\"ax-data-pager\"></ng-content>\n    </ng-template>\n\n    @if (customDataPager) {\n      <ng-container [ngTemplateOutlet]=\"customPager\"></ng-container>\n    } @else {\n      <ax-data-pager\n        #dataPager\n        [displayMode]=\"'custom'\"\n        (onChanged)=\"handleChangePage($event)\"\n        [total]=\"dataSource.totalCount\"\n        [size]=\"dataSource.pageSize\"\n        [isLoading]=\"isLoading()\"\n      >\n        <ax-prefix class=\"ax-data-table-numeric-paging\">\n          <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n          <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n        </ax-prefix>\n        <ax-prefix class=\"ax-data-table-input-paging\">\n          <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n          <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n          <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n        </ax-prefix>\n        <ax-suffix class=\"ax-data-table-info\">\n          <ax-data-pager-info> </ax-data-pager-info>\n          <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh({ reset: false })\">\n            <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n          </ax-button>\n        </ax-suffix>\n      </ax-data-pager>\n    }\n  </div>\n}\n<ng-content select=\"ax-footer\"> </ng-content>\n", styles: ["ax-data-table{--ax-comp-data-table-font-size: .875rem;--ax-comp-data-table-line-height: 1rem;--ax-comp-data-table-border-color: var(--ax-sys-color-border-surface);--ax-comp-data-table-border-radius: var(--ax-sys-border-radius);--ax-comp-data-table-column-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-data-table-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-header-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-data-table-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-footer-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-data-table-hover-bg-color: var(--ax-sys-color-primary-lightest-surface);--ax-comp-data-table-hover-text-color: var(--ax-sys-color-on-primary-lightest-surface);--ax-comp-data-table-focus-bg-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-data-table-selected-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-selected-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-index-bg-color: var(--ax-sys-color-light-surface);--ax-comp-data-table-index-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-alternative-bg-color: var(--ax-sys-color-light-surface);--ax-comp-data-table-alternative-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-skeleton-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-data-table-handler-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-interactive-bg-color: var(--ax-sys-color-light-surface)}.ax-dark ax-data-table{--ax-comp-data-table-column-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-data-table-header-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-data-table-header-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-data-table-footer-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-data-table-footer-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-data-table-hover-bg-color: var(--ax-sys-color-primary-light-surface);--ax-comp-data-table-hover-text-color: var(--ax-sys-color-on-light-surface);--ax-comp-data-table-focus-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-selected-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-data-table-selected-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-data-table-index-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-data-table-index-text-color: var(--ax-sys-color-on-dark-surface);--ax-comp-data-table-skeleton-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-data-table-alternative-bg-color: var(--ax-sys-color-surface);--ax-comp-data-table-alternative-text-color: var(--ax-sys-color-on-surface);--ax-comp-data-table-handler-bg-color: var(--ax-sys-color-primary-dark-surface)}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table thead th.ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}}@media screen and (min-width: 768px){html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}html[dir=rtl] ax-data-table .ax-data-table-wrapper table tbody td.ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table{display:flex;flex-direction:column;height:100%;width:100%;font-size:var(--ax-comp-data-table-font-size);line-height:var(--ax-comp-data-table-line-height);border-radius:var(--ax-comp-data-table-border-radius);border-width:1px;border-color:rgba(var(--ax-comp-data-table-border-color));position:relative;min-height:inherit}ax-data-table .ax-data-table-empty-data{position:absolute;top:calc(50% - 40px);width:100%;color:rgb(var(--ax-sys-color-ghost-500));text-align:center}ax-data-table td.ax-data-table-empty-data{position:static;top:auto;width:auto;padding:2rem 1rem;text-align:center;vertical-align:middle;height:8rem;border-bottom:none}ax-data-table td.ax-data-table-empty-data span{color:rgb(var(--ax-sys-color-ghost-500));font-size:var(--ax-comp-data-table-font-size);display:block}ax-data-table .ax-data-table-wrapper{overflow:auto;width:100%;flex:1;border-radius:var(--ax-comp-data-table-border-radius)}ax-data-table .ax-data-table-wrapper table{display:table;height:100%;width:100%;table-layout:fixed;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{overflow:hidden;border-start-end-radius:var(--ax-comp-data-table-border-radius);border-start-start-radius:var(--ax-comp-data-table-border-radius)}ax-data-table .ax-data-table-wrapper table thead th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-header-bg-color));color:rgba(var(--ax-comp-data-table-header-text-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table thead th.ax-interactive:hover{background-color:rgba(var(--ax-comp-data-table-interactive-bg-color))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{position:absolute;inset-inline-end:0px;top:0;bottom:0;width:.25rem;height:100%;cursor:col-resize;background:transparent}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:rgba(var(--ax-comp-data-table-handler-bg-color))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{position:sticky;top:0;border-top:none;border-bottom:none;z-index:3;box-shadow:inset 1px 1px 0 2px rgba(var(--ax-comp-data-table-border-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{position:sticky;z-index:2;background-color:rgba(var(--ax-comp-data-table-column-bg-color));border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table .ax-data-table-wrapper table tbody tr td{z-index:0}ax-data-table .ax-data-table-wrapper table tbody tr td .ax-bg{top:0;left:0;z-index:-1;width:100%;height:100%;position:absolute;border-inline-end:1px solid rgba(var(--ax-comp-data-table-border-color));background-color:transparent;opacity:.3}ax-data-table .ax-data-table-wrapper table tbody .empty-row{height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:rgba(var(--ax-comp-data-table-alternative-bg-color));color:rgba(var(--ax-comp-data-table-alternative-text-color))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:2.5rem;max-height:2.5rem}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-hover-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-hover-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-focus-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-focus-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-selected-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-selected-bg-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column){color:rgba(var(--ax-comp-data-table-selected-hover-text-color))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column) .ax-bg{background-color:rgba(var(--ax-comp-data-table-selected-hover-bg-color))}ax-data-table .ax-data-table-wrapper table tbody td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-column-bg-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.5rem;padding-bottom:.5rem;vertical-align:middle}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler{padding-inline-start:.25rem;padding-inline-end:.25rem;cursor:pointer}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler.has-parent{padding-inline-start:1.5rem!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-comp-data-table-index-bg-color));color:rgba(var(--ax-comp-data-table-index-text-color));text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column{text-align:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-comp-data-table-border-radius);border-style:none;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:transparent;padding:.25rem;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-width:0px}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem;background-color:rgba(var(--ax-comp-data-table-skeleton-bg-color))}ax-data-table .ax-data-table-wrapper table tfoot tr td{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-comp-data-table-footer-bg-color));color:rgba(var(--ax-comp-data-table-footer-text-color));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;height:2.5rem}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive{cursor:pointer}ax-data-table .ax-data-table-wrapper table tfoot tr td.ax-interactive:hover{background-color:rgba(var(--ax-comp-data-table-interactive-bg-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{position:sticky;z-index:2;border-inline-start:none;border-inline-end:none}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{box-shadow:inset -1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{box-shadow:inset -2px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{box-shadow:inset 1px 0 rgba(var(--ax-comp-data-table-border-color))}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{box-shadow:inset 2px 0 rgba(var(--ax-comp-data-table-border-color))}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{position:sticky;bottom:-1px;border-top:none;border-bottom:none;z-index:3;box-shadow:1px 0 rgba(var(--ax-comp-data-table-border-color)),0 -1px rgba(var(--ax-comp-data-table-border-color))}@media screen and (min-width: 768px){ax-data-table .ax-data-table-wrapper table .sticky-end{inset-inline-end:var(--sticky-end)}ax-data-table .ax-data-table-wrapper table .sticky-start{inset-inline-start:var(--sticky-start)}}ax-data-table ax-data-pager{justify-content:center}ax-data-table .ax-table-footer{border-top-width:1px;border-collapse:collapse;overflow:hidden;border-color:rgba(var(--ax-comp-data-table-border-color));padding-inline-start:.875rem;padding-inline-end:.875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}ax-data-table .ax-data-table-numeric-paging{display:none}ax-data-table .ax-data-table-input-paging{display:flex}ax-data-table .ax-data-table-info{display:none}@media (min-width: 1024px){ax-data-table .ax-data-table-numeric-paging{display:flex}ax-data-table .ax-data-table-input-paging{display:none}}@media (min-width: 768px){ax-data-table .ax-data-table-info{display:block}ax-data-table ax-data-pager{justify-content:space-between}}.cdk-drag-preview{border-bottom-width:1px;border-inline-end-width:1px;box-shadow:0 5px 5px -3px rgba(var(--ax-sys-color-primary-900),.2),0 8px 10px 1px rgba(var(--ax-sys-color-primary-900),.14),0 3px 14px 2px rgba(var(--ax-sys-color-primary-900),.12);border-style:solid;border-color:rgba(var(--ax-comp-data-table-border-color));background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-surface-fore));padding-inline-start:1rem;padding-inline-end:1rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}\n"] }]
         }], propDecorators: { dataPager: [{
                 type: ViewChild,
                 args: ['dataPager']
@@ -1720,6 +1735,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 type: Input
             }], emptyTemplate: [{
                 type: Input
+            }], noDataTemplate: [{
+                type: Input
             }], alternative: [{
                 type: Input
             }], showHeader: [{