@acorex/components 21.0.1-next.7 → 21.0.1-next.70

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

@@ -24,6 +24,7 @@ import { AXResultModule } from '@acorex/components/result';
 import { AXSkeletonComponent, AXSkeletonModule } from '@acorex/components/skeleton';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling';
+import { AXTooltipDirective } from '@acorex/components/tooltip';
 
 class AXBaseDataTable extends MXBaseComponent {
     constructor() {
@@ -35,6 +36,12 @@ class AXBaseDataTable extends MXBaseComponent {
          * @defaultValue `parentId`
          */
         this.parentField = undefined;
+        /**
+         * Field name on each row that indicates whether the row has children (for showing expand icon).
+         *
+         * @defaultValue `hasChild`
+         */
+        this.hasChildrenField = 'hasChild';
         this.selectedRowsChange = new EventEmitter();
         this._selectedRows = signal([], ...(ngDevMode ? [{ debugName: "_selectedRows" }] : []));
     }
@@ -129,15 +136,17 @@ class AXBaseDataTable extends MXBaseComponent {
         this.selectedRows = this.selectedRows.filter((c) => !removedRowIds.includes(typeof c === 'object' ? c[key] : c));
         //this.selectedRows = this.selectedRows.filter((c) => !rows.includes(c));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXBaseDataTable, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXBaseDataTable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXBaseDataTable, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXBaseDataTable }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXBaseDataTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXBaseDataTable, decorators: [{
             type: Injectable
         }], propDecorators: { dataSource: [{
                 type: Input
             }], parentField: [{
                 type: Input
+            }], hasChildrenField: [{
+                type: Input
             }], rowDetailsTemplate: [{
                 type: Input
             }], selectedRowsChange: [{
@@ -165,10 +174,10 @@ class AXDataTableColumnComponent {
     get cssClass() {
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableColumnComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataTableColumnComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataTableColumnComponent, decorators: [{
             type: Injectable
         }], propDecorators: { caption: [{
                 type: Input
@@ -250,10 +259,10 @@ class AXDataTableColumnResizableDirective {
             this.cdr.reattach(); // Reattach the change detector
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableColumnResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: AXDataTableColumnResizableDirective, isStandalone: true, selector: "[ax-table-column-resizble]", inputs: { column: ["ax-table-column-resizble", "column"] }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataTableColumnResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: AXDataTableColumnResizableDirective, isStandalone: true, selector: "[ax-table-column-resizble]", inputs: { column: ["ax-table-column-resizble", "column"] }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableColumnResizableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataTableColumnResizableDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ax-table-column-resizble]' }]
         }], ctorParameters: () => [], propDecorators: { column: [{
@@ -335,12 +344,21 @@ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
     get name() {
         return `cl-${this.dataField}`;
     }
+    /**
+     * Returns the display text for a row cell. Used for cell tooltip when title is enabled on the table.
+     */
+    getCellDisplayText(rowData) {
+        if (rowData == null)
+            return '';
+        const text = this.getDisplayText(rowData, this.dataField);
+        return text != null ? String(text) : '';
+    }
     getDisplayText(rowData, dataField) {
         const value = rowData[dataField];
         return !this.format ? value : this.formatService.format(value, this.format, this.formatOptions);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXDataTableTextColumnComponent, isStandalone: true, selector: "ax-text-column", inputs: { width: "width", caption: "caption", allowSorting: "allowSorting", allowResizing: "allowResizing", fixed: "fixed", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", dataField: "dataField", expandHandler: "expandHandler", wrapText: "wrapText", cellTemplate: "cellTemplate", footerTemplate: "footerTemplate", headerTemplate: "headerTemplate", format: "format", formatOptions: "formatOptions" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXDataTableTextColumnComponent, isStandalone: true, selector: "ax-text-column", inputs: { width: "width", caption: "caption", allowSorting: "allowSorting", allowResizing: "allowResizing", fixed: "fixed", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", dataField: "dataField", expandHandler: "expandHandler", wrapText: "wrapText", cellTemplate: "cellTemplate", footerTemplate: "footerTemplate", headerTemplate: "headerTemplate", format: "format", formatOptions: "formatOptions" }, providers: [
             {
                 provide: AXDataTableColumnComponent,
                 useExisting: AXDataTableTextColumnComponent,
@@ -350,7 +368,7 @@ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
     <ng-template #header>{{ caption }}</ng-template>
     <ng-template #cell let-row>
       <div class="flex items-center gap-2">
-        @if (expandHandler) {
+        @if (expandHandler && (row.data?.[grid.hasChildrenField] !== false || (row.data?.children?.length ?? 0) > 0)) {
           <div
             (click)="handleExpandRow(row)"
             class="ax-expand-handler"
@@ -380,7 +398,7 @@ __decorate([
     __metadata("design:paramtypes", [Object, String]),
     __metadata("design:returntype", String)
 ], AXDataTableTextColumnComponent.prototype, "getDisplayText", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableTextColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataTableTextColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-text-column',
@@ -388,7 +406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     <ng-template #header>{{ caption }}</ng-template>
     <ng-template #cell let-row>
       <div class="flex items-center gap-2">
-        @if (expandHandler) {
+        @if (expandHandler && (row.data?.[grid.hasChildrenField] !== false || (row.data?.children?.length ?? 0) > 0)) {
           <div
             (click)="handleExpandRow(row)"
             class="ax-expand-handler"
@@ -498,7 +516,7 @@ class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
 class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponent {
     constructor() {
         super(...arguments);
-        this.emptyStateText = 't("dataTable.rowCommandColumn.emptyStateText")';
+        this.emptyStateText = '@acorex:dataTable.rowCommandColumn.emptyStateText';
         this.itemsLoading = signal(false, ...(ngDevMode ? [{ debugName: "itemsLoading" }] : []));
         this.itemsFetched = signal(false, ...(ngDevMode ? [{ debugName: "itemsFetched" }] : []));
         /**
@@ -631,8 +649,8 @@ class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponen
         };
         this.onItemClick.emit(args);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowDropdownCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXRowDropdownCommandColumnComponent, isStandalone: true, selector: "ax-dropdown-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", emptyStateTemplate: "emptyStateTemplate", emptyStateText: "emptyStateText", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRowDropdownCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXRowDropdownCommandColumnComponent, isStandalone: true, selector: "ax-dropdown-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", emptyStateTemplate: "emptyStateTemplate", emptyStateText: "emptyStateText", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
             {
                 provide: AXDataTableColumnComponent,
                 useExisting: AXRowDropdownCommandColumnComponent,
@@ -683,7 +701,7 @@ class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponen
     <ng-template #footer></ng-template>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowDropdownCommandColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRowDropdownCommandColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-dropdown-command-column',
@@ -853,8 +871,8 @@ class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
         };
         this.onItemClick.emit(args);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXRowCommandColumnComponent, isStandalone: true, selector: "ax-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRowCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXRowCommandColumnComponent, isStandalone: true, selector: "ax-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [
             {
                 provide: AXDataTableColumnComponent,
                 useExisting: AXRowCommandColumnComponent,
@@ -884,7 +902,7 @@ class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
     </ng-template>
     <ng-template #footer></ng-template> `, isInline: true, dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-command-column',
@@ -995,8 +1013,8 @@ class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
     get loadingEnabled() {
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowExpandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXRowExpandColumnComponent, isStandalone: true, selector: "ax-expand-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRowExpandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXRowExpandColumnComponent, isStandalone: true, selector: "ax-expand-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [
             {
                 provide: AXDataTableColumnComponent,
                 useExisting: AXRowExpandColumnComponent,
@@ -1005,6 +1023,7 @@ class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
         ], viewQueries: [{ propertyName: "_cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-template #header></ng-template>
     <ng-template #cell let-row>
+      @if (row.data?.[grid.hasChildrenField] !== false || (row.data?.children?.length ?? 0) > 0) {
       <div
         (click)="handleExpandRow(row)"
         class="ax-expand-handler"
@@ -1020,17 +1039,19 @@ class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
           }
         }
       </div>
+      }
     </ng-template>
     <ng-template #footer></ng-template>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowExpandColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRowExpandColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-expand-column',
                     template: `
     <ng-template #header></ng-template>
     <ng-template #cell let-row>
+      @if (row.data?.[grid.hasChildrenField] !== false || (row.data?.children?.length ?? 0) > 0) {
       <div
         (click)="handleExpandRow(row)"
         class="ax-expand-handler"
@@ -1046,6 +1067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           }
         }
       </div>
+      }
     </ng-template>
     <ng-template #footer></ng-template>
   `,
@@ -1144,8 +1166,8 @@ class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
     get cssClass() {
         return 'ax-index-column';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXRowIndexColumnComponent, isStandalone: true, selector: "ax-index-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", padZero: "padZero" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXRowIndexColumnComponent, isStandalone: true, selector: "ax-index-column", inputs: { width: "width", caption: "caption", fixed: "fixed", footerTemplate: "footerTemplate", padZero: "padZero" }, providers: [
             AXUnsubscriber,
             {
                 provide: AXDataTableColumnComponent,
@@ -1158,7 +1180,7 @@ class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
     </ng-template>
     <ng-template #footer></ng-template> `, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-index-column',
@@ -1300,8 +1322,8 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
     get cssClass() {
         return 'ax-select-column';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowSelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXRowSelectColumnComponent, isStandalone: true, selector: "ax-select-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRowSelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXRowSelectColumnComponent, isStandalone: true, selector: "ax-select-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [
             {
                 provide: AXDataTableColumnComponent,
                 useExisting: AXRowSelectColumnComponent,
@@ -1331,7 +1353,7 @@ class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
     </ng-template>
     <ng-template #footer></ng-template> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXRowSelectColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRowSelectColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-select-column',
@@ -1393,6 +1415,10 @@ class AXDataTableComponent extends AXBaseDataTable {
         this._zone = inject(NgZone);
         this.document = inject(DOCUMENT);
         this.platformID = inject(PLATFORM_ID);
+        /**
+         * When true, shows the cell content as tooltip (title attribute) on hover.
+         */
+        this.title = false;
         /**
          *  @ignore
          */
@@ -1638,6 +1664,11 @@ class AXDataTableComponent extends AXBaseDataTable {
             this.isLoading.set(data);
         });
         this.dataSource.onChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe((data) => {
+            const shouldMoveToPreviousPage = data.totalCount > 0 && data.items.length === 0 && data.page > 0;
+            if (shouldMoveToPreviousPage) {
+                this.goToPage(data.page);
+                return;
+            }
             this.displayedRows.set(data.items.filter((item) => !item[this.parentField]));
             this.totalRows = data.totalCount;
             this.hasItems = data.totalCount > 0;
@@ -1683,6 +1714,22 @@ class AXDataTableComponent extends AXBaseDataTable {
             }
         });
     }
+    /**
+     * Returns the display text for a cell. Used for the native title (tooltip) on each cell.
+     */
+    getCellTooltipText(column, rowData) {
+        if (rowData == null || typeof rowData !== 'object')
+            return '';
+        if (column instanceof AXDataTableTextColumnComponent) {
+            return column.getCellDisplayText(rowData);
+        }
+        const col = column;
+        if (col.dataField != null && col.dataField in rowData) {
+            const v = rowData[col.dataField];
+            return v != null ? String(v) : '';
+        }
+        return '';
+    }
     /**
      *  @ignore
      */
@@ -1716,10 +1763,12 @@ class AXDataTableComponent extends AXBaseDataTable {
             });
             if (expandedItem[this.getDataSourceKey()] === item[this.getDataSourceKey()]) {
                 const isExpanded = !item?.__meta__?.expanded;
+                const nextChildren = children ? this.toggleExpanded(children, expandedItem, item.children || []) : null;
                 return {
                     ...item,
                     __meta__: { expanded: isExpanded, level: expandedItem?.__meta__?.level ?? 0 },
-                    children: children ? this.toggleExpanded(children, expandedItem, item.children || []) : null,
+                    children: nextChildren,
+                    [this.hasChildrenField]: nextChildren != null && nextChildren.length > 0,
                 };
             }
             else if (item.children) {
@@ -1742,7 +1791,11 @@ class AXDataTableComponent extends AXBaseDataTable {
                 newChildren.forEach((child) => {
                     child.__meta__ = { ...child.__meta__, level: (item.__meta__?.level || 0) + 1 };
                 });
-                return { ...item, children: cloneDeep(newChildren) };
+                return {
+                    ...item,
+                    children: cloneDeep(newChildren),
+                    [this.hasChildrenField]: newChildren.length > 0,
+                };
             }
             else if (item.children) {
                 return { ...item, children: this.updateChildren(item.children, id, newChildren) };
@@ -1801,6 +1854,19 @@ class AXDataTableComponent extends AXBaseDataTable {
             }
         }
     }
+    goToPage(pageIndex) {
+        const pagerPage = Math.max(1, pageIndex);
+        if (this.customDataPager) {
+            this.customDataPager.goToPage(pagerPage);
+            return;
+        }
+        if (this.dataPager) {
+            this.dataPager.goToPage(pagerPage);
+            return;
+        }
+        this.page.set(pagerPage - 1);
+        this.dataSource.setPage(this.page());
+    }
     /**
      *  @ignore
      */
@@ -2146,16 +2212,16 @@ class AXDataTableComponent extends AXBaseDataTable {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXDataTableComponent, isStandalone: true, selector: "ax-data-table", inputs: { dataSource: "dataSource", selectedRows: "selectedRows", parentField: "parentField", rowDetailsTemplate: "rowDetailsTemplate", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXDataTableComponent, isStandalone: true, selector: "ax-data-table", inputs: { dataSource: "dataSource", selectedRows: "selectedRows", parentField: "parentField", hasChildrenField: "hasChildrenField", rowDetailsTemplate: "rowDetailsTemplate", title: "title", 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<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.ax-state-is-last]=\"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                  (dblclick)=\"onResizeHandlerDoubleClick($event, this.startFixedColumnsList().length + $index)\"\n                  title=\"Double-click to auto-fit column width\"\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.ax-state-is-first]=\"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 style=\"display: inherit\">\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 style=\"display: inherit\">\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.ax-state-is-last]=\"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.ax-state-is-first]=\"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              @if (rowDetailsTemplate) {\n                <tr>\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.ax-state-is-last]=\"c['isLastFixedColumn']\"\n                      [style.--sticky-start]=\"c['stickyStart']\"\n                    >\n                      <div class=\"ax-bg\"></div>\n                    </td>\n                  }\n                  <td class=\"ax-data-table-row-details\" [attr.colspan]=\"normalColumnsList().length + 1\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"rowDetailsTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: { data: data.row, rowIndex: data.rowIndex } }\"\n                    ></ng-container>\n                  </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.ax-state-is-first]=\"c['isFirstFixedColumn']\"\n                      [style.--sticky-end]=\"c['stickyEnd']\"\n                    >\n                      <div class=\"ax-bg\"></div>\n                    </td>\n                  }\n                </tr>\n              }\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.ax-state-is-last]=\"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                  (dblclick)=\"onResizeHandlerDoubleClick($event, this.startFixedColumnsList().length + $index)\"\n                  title=\"Double-click to auto-fit column width\"\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.ax-state-is-first]=\"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: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{ax-data-table{height:100%;min-height:inherit;border-radius:var(--radius-default);border-radius:var(--radius-default,var(--ax-sys-border-radius));border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-leading:calc(var(--spacing,.25rem)*4);line-height:calc(var(--spacing,.25rem)*4);flex-direction:column;display:flex;position:relative;overflow:hidden}ax-data-table td.ax-data-table-empty-data{height:calc(var(--spacing,.25rem)*32);border-bottom-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*8);text-align:center;vertical-align:middle;border-bottom-width:0;top:50%;transform:translateY(-50%);background-color:#0000!important;position:absolute!important}ax-data-table td.ax-data-table-empty-data span{height:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-surface,rgba(var(--ax-sys-color-surface)));justify-content:center;align-items:center;display:flex}ax-data-table .ax-data-table-wrapper{border-radius:var(--radius-default);border-radius:var(--radius-default,var(--ax-sys-border-radius));flex:1;width:100%;overflow:auto}ax-data-table .ax-data-table-wrapper table{table-layout:fixed;width:100%;height:100%;display:table;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{border-start-start-radius:var(--radius-default,var(--ax-sys-border-radius));border-start-end-radius:var(--radius-default,var(--ax-sys-border-radius));overflow:hidden}ax-data-table .ax-data-table-wrapper table thead th{height:calc(var(--spacing,.25rem)*10);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);background-color:var(--color-lighter);color:var(--color-on-lighter);border-bottom-width:1px;border-color:var(--color-border-lighter);padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;position:relative;overflow:hidden;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)))!important}ax-data-table .ax-data-table-wrapper table thead th:where(.dark,.dark *){background-color:var(--color-darker);color:var(--color-on-darker);border-color:var(--color-border-darker)}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:var(--color-light,rgba(var(--ax-sys-color-light-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{top:calc(var(--spacing,.25rem)*0);right:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:100%;width:calc(var(--spacing,.25rem)*1);cursor:col-resize;background-color:#0000;position:absolute}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover:where(.dark,.dark *){background-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{align-items:center;gap:calc(var(--spacing,.25rem)*2);display:flex}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{top:calc(var(--spacing,.25rem)*0);z-index:3;border-block-style:var(--tw-border-style);--tw-shadow:inset 1px 1px 0px 2px var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-block-width:0;position:sticky}@media screen and (min-width:768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{z-index:2;border-inline-style:var(--tw-border-style);border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{z-index:2;border-inline-style:var(--tw-border-style);background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}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:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);z-index:-1;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));opacity:.3;background-color:#0000;width:100%;height:100%;position:absolute}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:var(--color-light,rgba(var(--ax-sys-color-light-surface)));color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td:where(.dark,.dark *){background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:calc(var(--spacing,.25rem)*10);max-height:calc(var(--spacing,.25rem)*10)}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary-lightest,rgba(var(--ax-sys-color-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){color:var(--color-on-primary-lightest,rgba(var(--ax-sys-color-on-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column):where(.dark,.dark *){color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg{background-color:var(--color-on-primary-lightest,rgba(var(--ax-sys-color-on-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}ax-data-table .ax-data-table-wrapper table tbody td{min-width:calc(var(--spacing,.25rem)*8);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*2);vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td:where(.dark,.dark *){background-color:var(--color-darkest,rgba(var(--ax-sys-color-darkest-surface)))}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler{cursor:pointer;padding-inline:calc(var(--spacing,.25rem)*1)}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler.has-parent{padding-inline-start:calc(var(--spacing,.25rem)*6)!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));text-align:center;text-overflow:ellipsis;white-space:nowrap;color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)));overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)));color:var(--color-on-dark,rgba(var(--ax-sys-color-on-dark-surface)))}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{cursor:not-allowed!important;opacity:.5!important;position:relative!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{inset-inline-start:calc(var(--spacing,.25rem)*0);justify-content:center;align-items:center;width:100%;display:flex;position:absolute;top:50%;transform:translateY(-50%)}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button{--spacing:.2;justify-content:center;align-items:center;display:flex}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button ax-icon{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button{cursor:pointer;border-style:var(--tw-border-style);text-overflow:ellipsis;white-space:nowrap;border-width:0;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:calc(var(--spacing,.25rem)*3.5);border-radius:var(--radius-md,.375rem);width:33.3333%}ax-data-table .ax-data-table-wrapper table tfoot tr td{height:calc(var(--spacing,.25rem)*10);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)));padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-overflow:ellipsis;white-space:nowrap;color:var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)));text-transform:uppercase;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tfoot tr td:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)));color:var(--color-on-darker,rgba(var(--ax-sys-color-on-darker-surface)))}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:var(--color-light,rgba(var(--ax-sys-color-light-surface)))}@media screen and (min-width:768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{z-index:2;border-inline-style:var(--tw-border-style);border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{z-index:3;border-block-style:var(--tw-border-style);--tw-shadow:1px 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface))),0 -1px 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-block-width:0;position:sticky;bottom:-1px}@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}@media (min-width:48rem){ax-data-table ax-data-pager{justify-content:space-between}}ax-data-table .ax-table-footer{border-collapse:collapse;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));padding-inline:calc(var(--spacing,.25rem)*3.5);overflow:hidden}ax-data-table .ax-table-footer .ax-table-info{flex:1;justify-content:space-between;align-items:center;display:flex}ax-data-table .ax-data-table-numeric-paging{display:none}@media (min-width:64rem){ax-data-table .ax-data-table-numeric-paging{display:flex}}ax-data-table .ax-data-table-input-paging{display:flex}@media (min-width:64rem){ax-data-table .ax-data-table-input-paging{display:none}}ax-data-table .ax-data-table-info{justify-content:center;align-items:center;display:none}@media (min-width:48rem){ax-data-table .ax-data-table-info{display:flex}}ax-data-table .ax-data-table-info ax-text{color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}.cdk-drag-preview{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));text-transform:uppercase;--tw-shadow:0 5px 5px -3px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.2)),0 8px 10px 1px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.14)),0 3px 14px 2px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.12));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:relative}.ax-dropdown-command-empty-state-text{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\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.ax-state-is-last]=\"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                  (dblclick)=\"onResizeHandlerDoubleClick($event, this.startFixedColumnsList().length + $index)\"\n                  title=\"Double-click to auto-fit column width\"\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.ax-state-is-first]=\"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 style=\"display: inherit\">\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 style=\"display: inherit\">\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.ax-state-is-last]=\"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                  <span\n                    class=\"ax-data-table-cell-tooltip-wrapper\"\n                    [axTooltip]=\"data.row && !isLoading() ? getCellTooltipText(c, data.row) || null : null\"\n                  >\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                  </span>\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.ax-state-is-first]=\"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              @if (rowDetailsTemplate) {\n                <tr>\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.ax-state-is-last]=\"c['isLastFixedColumn']\"\n                      [style.--sticky-start]=\"c['stickyStart']\"\n                    >\n                      <div class=\"ax-bg\"></div>\n                    </td>\n                  }\n                  <td class=\"ax-data-table-row-details\" [attr.colspan]=\"normalColumnsList().length + 1\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"rowDetailsTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: { data: data.row, rowIndex: data.rowIndex } }\"\n                    ></ng-container>\n                  </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.ax-state-is-first]=\"c['isFirstFixedColumn']\"\n                      [style.--sticky-end]=\"c['stickyEnd']\"\n                    >\n                      <div class=\"ax-bg\"></div>\n                    </td>\n                  }\n                </tr>\n              }\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.ax-state-is-last]=\"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                  (dblclick)=\"onResizeHandlerDoubleClick($event, this.startFixedColumnsList().length + $index)\"\n                  title=\"Double-click to auto-fit column width\"\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.ax-state-is-first]=\"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: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{ax-data-table{height:100%;min-height:inherit;border-radius:var(--radius-default,var(--ax-sys-border-radius));border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 4);line-height:calc(var(--spacing,.25rem) * 4);flex-direction:column;display:flex;position:relative;overflow:hidden}ax-data-table td.ax-data-table-empty-data{height:calc(var(--spacing,.25rem) * 32);border-bottom-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 8);text-align:center;vertical-align:middle;border-bottom-width:0;top:50%;transform:translateY(-50%);background-color:#0000!important;position:absolute!important}ax-data-table td.ax-data-table-empty-data span{height:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--color-surface,rgba(var(--ax-sys-color-surface)));justify-content:center;align-items:center;display:flex}ax-data-table .ax-data-table-wrapper{border-radius:var(--radius-default,var(--ax-sys-border-radius));flex:1;width:100%;overflow:auto}ax-data-table .ax-data-table-wrapper table{table-layout:fixed;width:100%;height:100%;display:table;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{border-start-start-radius:var(--radius-default,var(--ax-sys-border-radius));border-start-end-radius:var(--radius-default,var(--ax-sys-border-radius));overflow:hidden}ax-data-table .ax-data-table-wrapper table thead th{height:calc(var(--spacing,.25rem) * 10);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);background-color:var(--color-lighter);color:var(--color-on-lighter);border-bottom-width:1px;border-color:var(--color-border-lighter);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;position:relative;overflow:hidden;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)))!important}ax-data-table .ax-data-table-wrapper table thead th:where(.dark,.dark *){background-color:var(--color-darker);color:var(--color-on-darker);border-color:var(--color-border-darker)}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:var(--color-light,rgba(var(--ax-sys-color-light-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{top:calc(var(--spacing,.25rem) * 0);right:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);height:100%;width:calc(var(--spacing,.25rem) * 1);cursor:col-resize;background-color:#0000;position:absolute}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover:where(.dark,.dark *){background-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{top:calc(var(--spacing,.25rem) * 0);z-index:3;border-block-style:var(--tw-border-style);--tw-shadow:inset 1px 1px 0px 2px var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-block-width:0;position:sticky}@media screen and (min-width:768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{z-index:2;border-inline-style:var(--tw-border-style);border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{z-index:2;border-inline-style:var(--tw-border-style);border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}ax-data-table .ax-data-table-wrapper table tbody tr td{z-index:0;position:relative}ax-data-table .ax-data-table-wrapper table tbody tr td .ax-data-table-cell-tooltip-wrapper{min-height:inherit;position:relative}ax-data-table .ax-data-table-wrapper table tbody tr td .ax-bg{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);z-index:-1;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));opacity:.3;background-color:#0000;width:100%;height:100%;position:absolute}ax-data-table .ax-data-table-wrapper table tbody tr{height:calc(var(--spacing,.25rem) * 10);max-height:calc(var(--spacing,.25rem) * 10);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary-lightest,rgba(var(--ax-sys-color-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){color:var(--color-on-primary-lightest,rgba(var(--ax-sys-color-on-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column):where(.dark,.dark *){color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg{background-color:var(--color-on-primary-lightest,rgba(var(--ax-sys-color-on-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}ax-data-table .ax-data-table-wrapper table tbody .empty-row{background-color:var(--color-red-500,oklch(63.7% .237 25.331))!important;height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td:where(.dark,.dark *){background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody td{min-width:calc(var(--spacing,.25rem) * 8);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2);vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td:where(.dark,.dark *){background-color:var(--color-darkest,rgba(var(--ax-sys-color-darkest-surface)))}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler{cursor:pointer;padding-inline:calc(var(--spacing,.25rem) * 1)}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler.has-parent{padding-inline-start:calc(var(--spacing,.25rem) * 6)!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));text-align:center;text-overflow:ellipsis;white-space:nowrap;color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)));overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)));color:var(--color-on-dark,rgba(var(--ax-sys-color-on-dark-surface)))}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{cursor:not-allowed!important;opacity:.5!important;position:relative!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{inset-inline-start:calc(var(--spacing,.25rem) * 0);justify-content:center;align-items:center;width:100%;display:flex;position:absolute;top:50%;transform:translateY(-50%)}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button{--spacing:.2;margin-inline:.5rem}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button ax-icon{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button{cursor:pointer;border-style:var(--tw-border-style);text-overflow:ellipsis;white-space:nowrap;border-width:0;position:relative}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:calc(var(--spacing,.25rem) * 3.5);border-radius:var(--radius-md,.375rem);width:33.3333%}ax-data-table .ax-data-table-wrapper table tfoot tr td{height:calc(var(--spacing,.25rem) * 10);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-overflow:ellipsis;white-space:nowrap;color:var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)));text-transform:uppercase;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tfoot tr td:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)));color:var(--color-on-darker,rgba(var(--ax-sys-color-on-darker-surface)))}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:var(--color-light,rgba(var(--ax-sys-color-light-surface)))}@media screen and (min-width:768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{z-index:2;border-inline-style:var(--tw-border-style);border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{z-index:3;border-block-style:var(--tw-border-style);--tw-shadow:1px 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface))), 0 -1px 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-block-width:0;position:sticky;bottom:-1px}@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}@media(min-width:48rem){ax-data-table ax-data-pager{justify-content:space-between}}ax-data-table .ax-table-footer{border-collapse:collapse;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));padding-inline:calc(var(--spacing,.25rem) * 3.5);overflow:hidden}ax-data-table .ax-table-footer .ax-table-info{flex:1;justify-content:space-between;align-items:center;display:flex}ax-data-table .ax-data-table-numeric-paging{display:none}@media(min-width:64rem){ax-data-table .ax-data-table-numeric-paging{display:flex}}ax-data-table .ax-data-table-input-paging{display:flex}@media(min-width:64rem){ax-data-table .ax-data-table-input-paging{display:none}}ax-data-table .ax-data-table-info{justify-content:center;align-items:center;display:none}@media(min-width:48rem){ax-data-table .ax-data-table-info{display:flex}}ax-data-table .ax-data-table-info ax-text{color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}.cdk-drag-preview{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));text-transform:uppercase;--tw-shadow:0 5px 5px -3px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.2)), 0 8px 10px 1px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.14)), 0 3px 14px 2px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.12));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:relative}.ax-dropdown-command-empty-state-text{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\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: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { 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.3.15", ngImport: i0, type: AXDataTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.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', 'selectedRows', 'parentField', 'rowDetailsTemplate'], outputs: ['selectedRowsChange'], providers: [
+            args: [{ selector: 'ax-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, inputs: ['dataSource', 'selectedRows', 'parentField', 'hasChildrenField', 'rowDetailsTemplate', 'title'], outputs: ['selectedRowsChange'], providers: [
                         { provide: AXBaseDataTable, useExisting: AXDataTableComponent },
                         AXUnsubscriber,
                         { provide: AXComponent, useExisting: AXDataTableComponent },
@@ -2178,7 +2244,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AXButtonComponent,
                         AsyncPipe,
                         AXTranslatorPipe,
-                    ], 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.ax-state-is-last]=\"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                  (dblclick)=\"onResizeHandlerDoubleClick($event, this.startFixedColumnsList().length + $index)\"\n                  title=\"Double-click to auto-fit column width\"\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.ax-state-is-first]=\"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 style=\"display: inherit\">\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 style=\"display: inherit\">\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.ax-state-is-last]=\"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.ax-state-is-first]=\"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              @if (rowDetailsTemplate) {\n                <tr>\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.ax-state-is-last]=\"c['isLastFixedColumn']\"\n                      [style.--sticky-start]=\"c['stickyStart']\"\n                    >\n                      <div class=\"ax-bg\"></div>\n                    </td>\n                  }\n                  <td class=\"ax-data-table-row-details\" [attr.colspan]=\"normalColumnsList().length + 1\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"rowDetailsTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: { data: data.row, rowIndex: data.rowIndex } }\"\n                    ></ng-container>\n                  </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.ax-state-is-first]=\"c['isFirstFixedColumn']\"\n                      [style.--sticky-end]=\"c['stickyEnd']\"\n                    >\n                      <div class=\"ax-bg\"></div>\n                    </td>\n                  }\n                </tr>\n              }\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.ax-state-is-last]=\"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                  (dblclick)=\"onResizeHandlerDoubleClick($event, this.startFixedColumnsList().length + $index)\"\n                  title=\"Double-click to auto-fit column width\"\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.ax-state-is-first]=\"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: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{ax-data-table{height:100%;min-height:inherit;border-radius:var(--radius-default);border-radius:var(--radius-default,var(--ax-sys-border-radius));border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-leading:calc(var(--spacing,.25rem)*4);line-height:calc(var(--spacing,.25rem)*4);flex-direction:column;display:flex;position:relative;overflow:hidden}ax-data-table td.ax-data-table-empty-data{height:calc(var(--spacing,.25rem)*32);border-bottom-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*8);text-align:center;vertical-align:middle;border-bottom-width:0;top:50%;transform:translateY(-50%);background-color:#0000!important;position:absolute!important}ax-data-table td.ax-data-table-empty-data span{height:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--color-surface,rgba(var(--ax-sys-color-surface)));justify-content:center;align-items:center;display:flex}ax-data-table .ax-data-table-wrapper{border-radius:var(--radius-default);border-radius:var(--radius-default,var(--ax-sys-border-radius));flex:1;width:100%;overflow:auto}ax-data-table .ax-data-table-wrapper table{table-layout:fixed;width:100%;height:100%;display:table;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{border-start-start-radius:var(--radius-default,var(--ax-sys-border-radius));border-start-end-radius:var(--radius-default,var(--ax-sys-border-radius));overflow:hidden}ax-data-table .ax-data-table-wrapper table thead th{height:calc(var(--spacing,.25rem)*10);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);background-color:var(--color-lighter);color:var(--color-on-lighter);border-bottom-width:1px;border-color:var(--color-border-lighter);padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;position:relative;overflow:hidden;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)))!important}ax-data-table .ax-data-table-wrapper table thead th:where(.dark,.dark *){background-color:var(--color-darker);color:var(--color-on-darker);border-color:var(--color-border-darker)}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:var(--color-light,rgba(var(--ax-sys-color-light-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{top:calc(var(--spacing,.25rem)*0);right:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:100%;width:calc(var(--spacing,.25rem)*1);cursor:col-resize;background-color:#0000;position:absolute}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover:where(.dark,.dark *){background-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{align-items:center;gap:calc(var(--spacing,.25rem)*2);display:flex}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{top:calc(var(--spacing,.25rem)*0);z-index:3;border-block-style:var(--tw-border-style);--tw-shadow:inset 1px 1px 0px 2px var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-block-width:0;position:sticky}@media screen and (min-width:768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{z-index:2;border-inline-style:var(--tw-border-style);border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{z-index:2;border-inline-style:var(--tw-border-style);background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}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:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);z-index:-1;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));opacity:.3;background-color:#0000;width:100%;height:100%;position:absolute}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:var(--color-light,rgba(var(--ax-sys-color-light-surface)));color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td:where(.dark,.dark *){background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody tr{height:calc(var(--spacing,.25rem)*10);max-height:calc(var(--spacing,.25rem)*10)}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary-lightest,rgba(var(--ax-sys-color-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){color:var(--color-on-primary-lightest,rgba(var(--ax-sys-color-on-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column):where(.dark,.dark *){color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg{background-color:var(--color-on-primary-lightest,rgba(var(--ax-sys-color-on-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}ax-data-table .ax-data-table-wrapper table tbody td{min-width:calc(var(--spacing,.25rem)*8);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*2);vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td:where(.dark,.dark *){background-color:var(--color-darkest,rgba(var(--ax-sys-color-darkest-surface)))}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler{cursor:pointer;padding-inline:calc(var(--spacing,.25rem)*1)}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler.has-parent{padding-inline-start:calc(var(--spacing,.25rem)*6)!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));text-align:center;text-overflow:ellipsis;white-space:nowrap;color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)));overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)));color:var(--color-on-dark,rgba(var(--ax-sys-color-on-dark-surface)))}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{cursor:not-allowed!important;opacity:.5!important;position:relative!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{inset-inline-start:calc(var(--spacing,.25rem)*0);justify-content:center;align-items:center;width:100%;display:flex;position:absolute;top:50%;transform:translateY(-50%)}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button{--spacing:.2;justify-content:center;align-items:center;display:flex}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button ax-icon{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button{cursor:pointer;border-style:var(--tw-border-style);text-overflow:ellipsis;white-space:nowrap;border-width:0;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:calc(var(--spacing,.25rem)*3.5);border-radius:var(--radius-md,.375rem);width:33.3333%}ax-data-table .ax-data-table-wrapper table tfoot tr td{height:calc(var(--spacing,.25rem)*10);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)));padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-overflow:ellipsis;white-space:nowrap;color:var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)));text-transform:uppercase;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tfoot tr td:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)));color:var(--color-on-darker,rgba(var(--ax-sys-color-on-darker-surface)))}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:var(--color-light,rgba(var(--ax-sys-color-light-surface)))}@media screen and (min-width:768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{z-index:2;border-inline-style:var(--tw-border-style);border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{z-index:3;border-block-style:var(--tw-border-style);--tw-shadow:1px 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface))),0 -1px 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-block-width:0;position:sticky;bottom:-1px}@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}@media (min-width:48rem){ax-data-table ax-data-pager{justify-content:space-between}}ax-data-table .ax-table-footer{border-collapse:collapse;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));padding-inline:calc(var(--spacing,.25rem)*3.5);overflow:hidden}ax-data-table .ax-table-footer .ax-table-info{flex:1;justify-content:space-between;align-items:center;display:flex}ax-data-table .ax-data-table-numeric-paging{display:none}@media (min-width:64rem){ax-data-table .ax-data-table-numeric-paging{display:flex}}ax-data-table .ax-data-table-input-paging{display:flex}@media (min-width:64rem){ax-data-table .ax-data-table-input-paging{display:none}}ax-data-table .ax-data-table-info{justify-content:center;align-items:center;display:none}@media (min-width:48rem){ax-data-table .ax-data-table-info{display:flex}}ax-data-table .ax-data-table-info ax-text{color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}.cdk-drag-preview{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));text-transform:uppercase;--tw-shadow:0 5px 5px -3px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.2)),0 8px 10px 1px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.14)),0 3px 14px 2px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.12));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:relative}.ax-dropdown-command-empty-state-text{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)))}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+                        AXTooltipDirective
+                    ], 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.ax-state-is-last]=\"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                  (dblclick)=\"onResizeHandlerDoubleClick($event, this.startFixedColumnsList().length + $index)\"\n                  title=\"Double-click to auto-fit column width\"\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.ax-state-is-first]=\"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 style=\"display: inherit\">\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 style=\"display: inherit\">\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.ax-state-is-last]=\"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                  <span\n                    class=\"ax-data-table-cell-tooltip-wrapper\"\n                    [axTooltip]=\"data.row && !isLoading() ? getCellTooltipText(c, data.row) || null : null\"\n                  >\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                  </span>\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.ax-state-is-first]=\"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              @if (rowDetailsTemplate) {\n                <tr>\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.ax-state-is-last]=\"c['isLastFixedColumn']\"\n                      [style.--sticky-start]=\"c['stickyStart']\"\n                    >\n                      <div class=\"ax-bg\"></div>\n                    </td>\n                  }\n                  <td class=\"ax-data-table-row-details\" [attr.colspan]=\"normalColumnsList().length + 1\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"rowDetailsTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: { data: data.row, rowIndex: data.rowIndex } }\"\n                    ></ng-container>\n                  </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.ax-state-is-first]=\"c['isFirstFixedColumn']\"\n                      [style.--sticky-end]=\"c['stickyEnd']\"\n                    >\n                      <div class=\"ax-bg\"></div>\n                    </td>\n                  }\n                </tr>\n              }\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.ax-state-is-last]=\"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                  (dblclick)=\"onResizeHandlerDoubleClick($event, this.startFixedColumnsList().length + $index)\"\n                  title=\"Double-click to auto-fit column width\"\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.ax-state-is-first]=\"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: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{ax-data-table{height:100%;min-height:inherit;border-radius:var(--radius-default,var(--ax-sys-border-radius));border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));width:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 4);line-height:calc(var(--spacing,.25rem) * 4);flex-direction:column;display:flex;position:relative;overflow:hidden}ax-data-table td.ax-data-table-empty-data{height:calc(var(--spacing,.25rem) * 32);border-bottom-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 8);text-align:center;vertical-align:middle;border-bottom-width:0;top:50%;transform:translateY(-50%);background-color:#0000!important;position:absolute!important}ax-data-table td.ax-data-table-empty-data span{height:100%;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--color-surface,rgba(var(--ax-sys-color-surface)));justify-content:center;align-items:center;display:flex}ax-data-table .ax-data-table-wrapper{border-radius:var(--radius-default,var(--ax-sys-border-radius));flex:1;width:100%;overflow:auto}ax-data-table .ax-data-table-wrapper table{table-layout:fixed;width:100%;height:100%;display:table;overflow-x:auto}ax-data-table .ax-data-table-wrapper table thead{border-start-start-radius:var(--radius-default,var(--ax-sys-border-radius));border-start-end-radius:var(--radius-default,var(--ax-sys-border-radius));overflow:hidden}ax-data-table .ax-data-table-wrapper table thead th{height:calc(var(--spacing,.25rem) * 10);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);background-color:var(--color-lighter);color:var(--color-on-lighter);border-bottom-width:1px;border-color:var(--color-border-lighter);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;position:relative;overflow:hidden;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)))!important}ax-data-table .ax-data-table-wrapper table thead th:where(.dark,.dark *){background-color:var(--color-darker);color:var(--color-on-darker);border-color:var(--color-border-darker)}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:var(--color-light,rgba(var(--ax-sys-color-light-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle{top:calc(var(--spacing,.25rem) * 0);right:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);height:100%;width:calc(var(--spacing,.25rem) * 1);cursor:col-resize;background-color:#0000;position:absolute}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover{background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-resize-handle:hover:where(.dark,.dark *){background-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)))}ax-data-table .ax-data-table-wrapper table thead th .ax-caption{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-data-table .ax-data-table-wrapper table thead th:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-data-table .ax-data-table-wrapper table thead.ax-data-table-sticky-header{top:calc(var(--spacing,.25rem) * 0);z-index:3;border-block-style:var(--tw-border-style);--tw-shadow:inset 1px 1px 0px 2px var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-block-width:0;position:sticky}@media screen and (min-width:768px){ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell{z-index:2;border-inline-style:var(--tw-border-style);border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-start.isLast:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table thead .ax-data-table-sticky-header-cell.sticky-end.isFirst:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell{z-index:2;border-inline-style:var(--tw-border-style);border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-start.isLast:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tbody tr .ax-data-table-sticky-body-cell.sticky-end.isFirst:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}ax-data-table .ax-data-table-wrapper table tbody tr td{z-index:0;position:relative}ax-data-table .ax-data-table-wrapper table tbody tr td .ax-data-table-cell-tooltip-wrapper{min-height:inherit;position:relative}ax-data-table .ax-data-table-wrapper table tbody tr td .ax-bg{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);z-index:-1;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));opacity:.3;background-color:#0000;width:100%;height:100%;position:absolute}ax-data-table .ax-data-table-wrapper table tbody tr{height:calc(var(--spacing,.25rem) * 10);max-height:calc(var(--spacing,.25rem) * 10);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary-lightest,rgba(var(--ax-sys-color-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column){color:var(--color-on-primary-lightest,rgba(var(--ax-sys-color-on-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr:hover td:not(.ax-index-column):where(.dark,.dark *){color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg{background-color:var(--color-on-primary-lightest,rgba(var(--ax-sys-color-on-primary-lightest-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-focused td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary-light,rgba(var(--ax-sys-color-primary-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected td:not(.ax-index-column) .ax-bg:where(.dark,.dark *){background-color:var(--color-primary-dark,rgba(var(--ax-sys-color-primary-dark-surface)))}ax-data-table .ax-data-table-wrapper table tbody tr.ax-state-selected:hover td:not(.ax-index-column) .ax-bg{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}ax-data-table .ax-data-table-wrapper table tbody .empty-row{background-color:var(--color-red-500,oklch(63.7% .237 25.331))!important;height:auto!important}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td{background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) td:where(.dark,.dark *){background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}ax-data-table .ax-data-table-wrapper table tbody.ax-data-table-row-alternative tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-data-table-wrapper table tbody td{min-width:calc(var(--spacing,.25rem) * 8);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2);vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td:where(.dark,.dark *){background-color:var(--color-darkest,rgba(var(--ax-sys-color-darkest-surface)))}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler{cursor:pointer;padding-inline:calc(var(--spacing,.25rem) * 1)}ax-data-table .ax-data-table-wrapper table tbody td .ax-expand-handler.has-parent{padding-inline-start:calc(var(--spacing,.25rem) * 6)!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column{background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));text-align:center;text-overflow:ellipsis;white-space:nowrap;color:var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)));overflow:hidden}ax-data-table .ax-data-table-wrapper table tbody td.ax-index-column:where(.dark,.dark *){background-color:var(--color-dark,rgba(var(--ax-sys-color-dark-surface)));color:var(--color-on-dark,rgba(var(--ax-sys-color-on-dark-surface)))}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{cursor:not-allowed!important;opacity:.5!important;position:relative!important}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column>div{inset-inline-start:calc(var(--spacing,.25rem) * 0);justify-content:center;align-items:center;width:100%;display:flex;position:absolute;top:50%;transform:translateY(-50%)}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button{--spacing:.2;margin-inline:.5rem}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button ax-icon{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button{cursor:pointer;border-style:var(--tw-border-style);text-overflow:ellipsis;white-space:nowrap;border-width:0;position:relative}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover:not(ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover.ax-state-selected,ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-data-table-wrapper table tbody td.ax-command-column ax-button button:active{opacity:1}ax-data-table .ax-data-table-wrapper table tbody td:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}ax-data-table .ax-data-table-wrapper table tbody td ax-skeleton{height:calc(var(--spacing,.25rem) * 3.5);border-radius:var(--radius-md,.375rem);width:33.3333%}ax-data-table .ax-data-table-wrapper table tfoot tr td{height:calc(var(--spacing,.25rem) * 10);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);text-overflow:ellipsis;white-space:nowrap;color:var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)));text-transform:uppercase;position:relative;overflow:hidden}ax-data-table .ax-data-table-wrapper table tfoot tr td:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)));color:var(--color-on-darker,rgba(var(--ax-sys-color-on-darker-surface)))}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:var(--color-light,rgba(var(--ax-sys-color-light-surface)))}@media screen and (min-width:768px){ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell{z-index:2;border-inline-style:var(--tw-border-style);border-inline-width:0;position:sticky}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-start.isLast{--tw-shadow:inset -2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end{--tw-shadow:inset 1px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-data-table .ax-data-table-wrapper table tfoot tr .ax-data-table-sticky-footer-cell.sticky-end.isFirst{--tw-shadow:inset 2px 0 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}ax-data-table .ax-data-table-wrapper table tfoot.ax-data-table-sticky-footer{z-index:3;border-block-style:var(--tw-border-style);--tw-shadow:1px 0 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface))), 0 -1px 0 var(--tw-shadow-color,rgba(var(--ax-sys-color-border-surface)));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-block-width:0;position:sticky;bottom:-1px}@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}@media(min-width:48rem){ax-data-table ax-data-pager{justify-content:space-between}}ax-data-table .ax-table-footer{border-collapse:collapse;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));padding-inline:calc(var(--spacing,.25rem) * 3.5);overflow:hidden}ax-data-table .ax-table-footer .ax-table-info{flex:1;justify-content:space-between;align-items:center;display:flex}ax-data-table .ax-data-table-numeric-paging{display:none}@media(min-width:64rem){ax-data-table .ax-data-table-numeric-paging{display:flex}}ax-data-table .ax-data-table-input-paging{display:flex}@media(min-width:64rem){ax-data-table .ax-data-table-input-paging{display:none}}ax-data-table .ax-data-table-info{justify-content:center;align-items:center;display:none}@media(min-width:48rem){ax-data-table .ax-data-table-info{display:flex}}ax-data-table .ax-data-table-info ax-text{color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}.cdk-drag-preview{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 3);text-align:start;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));text-transform:uppercase;--tw-shadow:0 5px 5px -3px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.2)), 0 8px 10px 1px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.14)), 0 3px 14px 2px var(--tw-shadow-color,rgba(var(--ax-sys-color-primary-900),.12));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:relative}.ax-dropdown-command-empty-state-text{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { dataPager: [{
                 type: ViewChild,
                 args: ['dataPager']
@@ -2187,6 +2254,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: [AXDataPagerComponent, {
                         static: true,
                     }]
+            }], title: [{
+                type: Input
             }], rowTemplate: [{
                 type: Input
             }], emptyTemplate: [{
@@ -2262,8 +2331,8 @@ const MODULES = [
     CdkDragHandle,
 ];
 class AXDataTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXDataTableModule, imports: [CommonModule,
             AXCommonModule,
             ScrollingModule,
             AXTranslationModule,
@@ -2294,7 +2363,7 @@ class AXDataTableModule {
             AXRowCommandColumnComponent,
             AXRowDropdownCommandColumnComponent,
             AXDataTableColumnResizableDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataTableModule, imports: [CommonModule,
             AXCommonModule,
             ScrollingModule,
             AXTranslationModule,
@@ -2310,7 +2379,7 @@ class AXDataTableModule {
             AXRowCommandColumnComponent,
             AXRowDropdownCommandColumnComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDataTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],