@acorex/components 7.20.0 → 7.21.0

package/esm2022/data-pager/lib/data-pager-info.component.mjs

@@ -3,6 +3,8 @@ import { AXUnsubscriber } from '@acorex/core/utils';
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, inject } from '@angular/core';
 import { AXDataPagerChild } from './data-pager-base.component';
 import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@acorex/core/translation";
 export class AXDataPagerInfoComponent extends AXDataPagerChild {
     constructor() {
         super(...arguments);
@@ -11,26 +13,24 @@ export class AXDataPagerInfoComponent extends AXDataPagerChild {
     applyParent() {
         const info = this._parent.displayInfo;
         if ([info.range, info.range.from, info.totalItems].every((c) => c)) {
-            this._textFormatted =
-                this.translateService.translateSync(this.text ?? 'datapager.info.text')
-                    .replace('[from]', info.range.from.toString())
-                    .replace('[to]', info.range.to.toString())
-                    .replace('[totalItems]', info.totalItems.toString())
-                    .replace('[page]', info.page.toString())
-                    .replace('[totalPages]', info.totalPages.toString());
+            this._textFormatted = this.translateService
+                .translateSync(this.text ?? 'datapager.info.text')
+                .replace('[from]', info.range.from.toString())
+                .replace('[to]', info.range.to.toString())
+                .replace('[totalItems]', info.totalItems.toString())
+                .replace('[page]', info.page.toString())
+                .replace('[totalPages]', info.totalPages.toString());
             this.cdr.markForCheck();
         }
-        else {
-        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: { text: "text" }, providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `{{ _textFormatted }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: { text: "text" }, providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `{{ _textFormatted | translate | async }}`, isInline: true, dependencies: [{ 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: "17.1.0", ngImport: i0, type: AXDataPagerInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerInfoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-info',
-                    template: `{{ _textFormatted }}`,
+                    template: `{{ _textFormatted | translate | async }}`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent }, AXUnsubscriber],
@@ -38,4 +38,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
         }], propDecorators: { text: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1wYWdlci1pbmZvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9kYXRhLXBhZ2VyL3NyYy9saWIvZGF0YS1wYWdlci1pbmZvLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNoRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDcEQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3JHLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDOztBQVMvRCxNQUFNLE9BQU8sd0JBQXlCLFNBQVEsZ0JBQWdCO0lBUDlEOztRQWFZLHFCQUFnQixHQUFHLE1BQU0sQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDO0tBZ0IzRDtJQWRvQixXQUFXO1FBQzVCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsV0FBVyxDQUFDO1FBQ3RDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFO1lBQ2xFLElBQUksQ0FBQyxjQUFjO2dCQUNqQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLElBQUkscUJBQXFCLENBQUM7cUJBQ3BFLE9BQU8sQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7cUJBQzdDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsUUFBUSxFQUFFLENBQUM7cUJBQ3pDLE9BQU8sQ0FBQyxjQUFjLEVBQUUsSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQztxQkFDbkQsT0FBTyxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO3FCQUN2QyxPQUFPLENBQUMsY0FBYyxFQUFFLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztZQUN6RCxJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO1NBQ3pCO2FBQU07U0FDTjtJQUNILENBQUM7OEdBckJVLHdCQUF3QjtrR0FBeEIsd0JBQXdCLHVFQUZ4QixDQUFDLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFdBQVcsRUFBRSx3QkFBd0IsRUFBRSxFQUFFLGNBQWMsQ0FBQyxpREFIdkYsc0JBQXNCOzsyRkFLckIsd0JBQXdCO2tCQVBwQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxvQkFBb0I7b0JBQzlCLFFBQVEsRUFBRSxzQkFBc0I7b0JBQ2hDLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO29CQUMvQyxhQUFhLEVBQUUsaUJBQWlCLENBQUMsSUFBSTtvQkFDckMsU0FBUyxFQUFFLENBQUMsRUFBRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsV0FBVywwQkFBMEIsRUFBRSxFQUFFLGNBQWMsQ0FBQztpQkFDbEc7OEJBR0MsSUFBSTtzQkFESCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQVhUcmFuc2xhdGlvblNlcnZpY2UgfSBmcm9tICdAYWNvcmV4L2NvcmUvdHJhbnNsYXRpb24nO1xuaW1wb3J0IHsgQVhVbnN1YnNjcmliZXIgfSBmcm9tICdAYWNvcmV4L2NvcmUvdXRpbHMnO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQsIFZpZXdFbmNhcHN1bGF0aW9uLCBpbmplY3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFYRGF0YVBhZ2VyQ2hpbGQgfSBmcm9tICcuL2RhdGEtcGFnZXItYmFzZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdheC1kYXRhLXBhZ2VyLWluZm8nLFxuICB0ZW1wbGF0ZTogYHt7IF90ZXh0Rm9ybWF0dGVkIH19YCxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHByb3ZpZGVyczogW3sgcHJvdmlkZTogQVhEYXRhUGFnZXJDaGlsZCwgdXNlRXhpc3Rpbmc6IEFYRGF0YVBhZ2VySW5mb0NvbXBvbmVudCB9LCBBWFVuc3Vic2NyaWJlcl0sXG59KVxuZXhwb3J0IGNsYXNzIEFYRGF0YVBhZ2VySW5mb0NvbXBvbmVudCBleHRlbmRzIEFYRGF0YVBhZ2VyQ2hpbGQge1xuICBASW5wdXQoKVxuICB0ZXh0OiBzdHJpbmc7XG5cbiAgcHJvdGVjdGVkIF90ZXh0Rm9ybWF0dGVkOiBzdHJpbmc7XG5cbiAgcHJvdGVjdGVkIHRyYW5zbGF0ZVNlcnZpY2UgPSBpbmplY3QoQVhUcmFuc2xhdGlvblNlcnZpY2UpO1xuXG4gIHByb3RlY3RlZCBvdmVycmlkZSBhcHBseVBhcmVudCgpIHtcbiAgICBjb25zdCBpbmZvID0gdGhpcy5fcGFyZW50LmRpc3BsYXlJbmZvO1xuICAgIGlmIChbaW5mby5yYW5nZSwgaW5mby5yYW5nZS5mcm9tLCBpbmZvLnRvdGFsSXRlbXNdLmV2ZXJ5KChjKSA9PiBjKSkge1xuICAgICAgdGhpcy5fdGV4dEZvcm1hdHRlZCA9XG4gICAgICAgIHRoaXMudHJhbnNsYXRlU2VydmljZS50cmFuc2xhdGVTeW5jKHRoaXMudGV4dCA/PyAnZGF0YXBhZ2VyLmluZm8udGV4dCcpXG4gICAgICAgICAgLnJlcGxhY2UoJ1tmcm9tXScsIGluZm8ucmFuZ2UuZnJvbS50b1N0cmluZygpKVxuICAgICAgICAgIC5yZXBsYWNlKCdbdG9dJywgaW5mby5yYW5nZS50by50b1N0cmluZygpKVxuICAgICAgICAgIC5yZXBsYWNlKCdbdG90YWxJdGVtc10nLCBpbmZvLnRvdGFsSXRlbXMudG9TdHJpbmcoKSlcbiAgICAgICAgICAucmVwbGFjZSgnW3BhZ2VdJywgaW5mby5wYWdlLnRvU3RyaW5nKCkpXG4gICAgICAgICAgLnJlcGxhY2UoJ1t0b3RhbFBhZ2VzXScsIGluZm8udG90YWxQYWdlcy50b1N0cmluZygpKTtcbiAgICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpO1xuICAgIH0gZWxzZSB7XG4gICAgfVxuICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1wYWdlci1pbmZvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9kYXRhLXBhZ2VyL3NyYy9saWIvZGF0YS1wYWdlci1pbmZvLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNoRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDcEQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3JHLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDOzs7O0FBUy9ELE1BQU0sT0FBTyx3QkFBeUIsU0FBUSxnQkFBZ0I7SUFQOUQ7O1FBYVkscUJBQWdCLEdBQUcsTUFBTSxDQUFDLG9CQUFvQixDQUFDLENBQUM7S0FlM0Q7SUFib0IsV0FBVztRQUM1QixNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLFdBQVcsQ0FBQztRQUN0QyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRTtZQUNsRSxJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxnQkFBZ0I7aUJBQ3hDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxJQUFJLHFCQUFxQixDQUFDO2lCQUNqRCxPQUFPLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO2lCQUM3QyxPQUFPLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLFFBQVEsRUFBRSxDQUFDO2lCQUN6QyxPQUFPLENBQUMsY0FBYyxFQUFFLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxFQUFFLENBQUM7aUJBQ25ELE9BQU8sQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztpQkFDdkMsT0FBTyxDQUFDLGNBQWMsRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUM7WUFDdkQsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQztTQUN6QjtJQUNILENBQUM7OEdBcEJVLHdCQUF3QjtrR0FBeEIsd0JBQXdCLHVFQUZ4QixDQUFDLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFdBQVcsRUFBRSx3QkFBd0IsRUFBRSxFQUFFLGNBQWMsQ0FBQyxpREFIdkYsMENBQTBDOzsyRkFLekMsd0JBQXdCO2tCQVBwQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxvQkFBb0I7b0JBQzlCLFFBQVEsRUFBRSwwQ0FBMEM7b0JBQ3BELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO29CQUMvQyxhQUFhLEVBQUUsaUJBQWlCLENBQUMsSUFBSTtvQkFDckMsU0FBUyxFQUFFLENBQUMsRUFBRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsV0FBVywwQkFBMEIsRUFBRSxFQUFFLGNBQWMsQ0FBQztpQkFDbEc7OEJBR0MsSUFBSTtzQkFESCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQVhUcmFuc2xhdGlvblNlcnZpY2UgfSBmcm9tICdAYWNvcmV4L2NvcmUvdHJhbnNsYXRpb24nO1xuaW1wb3J0IHsgQVhVbnN1YnNjcmliZXIgfSBmcm9tICdAYWNvcmV4L2NvcmUvdXRpbHMnO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQsIFZpZXdFbmNhcHN1bGF0aW9uLCBpbmplY3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFYRGF0YVBhZ2VyQ2hpbGQgfSBmcm9tICcuL2RhdGEtcGFnZXItYmFzZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdheC1kYXRhLXBhZ2VyLWluZm8nLFxuICB0ZW1wbGF0ZTogYHt7IF90ZXh0Rm9ybWF0dGVkIHwgdHJhbnNsYXRlIHwgYXN5bmMgfX1gLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgcHJvdmlkZXJzOiBbeyBwcm92aWRlOiBBWERhdGFQYWdlckNoaWxkLCB1c2VFeGlzdGluZzogQVhEYXRhUGFnZXJJbmZvQ29tcG9uZW50IH0sIEFYVW5zdWJzY3JpYmVyXSxcbn0pXG5leHBvcnQgY2xhc3MgQVhEYXRhUGFnZXJJbmZvQ29tcG9uZW50IGV4dGVuZHMgQVhEYXRhUGFnZXJDaGlsZCB7XG4gIEBJbnB1dCgpXG4gIHRleHQ6IHN0cmluZztcblxuICBwcm90ZWN0ZWQgX3RleHRGb3JtYXR0ZWQ6IHN0cmluZztcblxuICBwcm90ZWN0ZWQgdHJhbnNsYXRlU2VydmljZSA9IGluamVjdChBWFRyYW5zbGF0aW9uU2VydmljZSk7XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIGFwcGx5UGFyZW50KCkge1xuICAgIGNvbnN0IGluZm8gPSB0aGlzLl9wYXJlbnQuZGlzcGxheUluZm87XG4gICAgaWYgKFtpbmZvLnJhbmdlLCBpbmZvLnJhbmdlLmZyb20sIGluZm8udG90YWxJdGVtc10uZXZlcnkoKGMpID0+IGMpKSB7XG4gICAgICB0aGlzLl90ZXh0Rm9ybWF0dGVkID0gdGhpcy50cmFuc2xhdGVTZXJ2aWNlXG4gICAgICAgIC50cmFuc2xhdGVTeW5jKHRoaXMudGV4dCA/PyAnZGF0YXBhZ2VyLmluZm8udGV4dCcpXG4gICAgICAgIC5yZXBsYWNlKCdbZnJvbV0nLCBpbmZvLnJhbmdlLmZyb20udG9TdHJpbmcoKSlcbiAgICAgICAgLnJlcGxhY2UoJ1t0b10nLCBpbmZvLnJhbmdlLnRvLnRvU3RyaW5nKCkpXG4gICAgICAgIC5yZXBsYWNlKCdbdG90YWxJdGVtc10nLCBpbmZvLnRvdGFsSXRlbXMudG9TdHJpbmcoKSlcbiAgICAgICAgLnJlcGxhY2UoJ1twYWdlXScsIGluZm8ucGFnZS50b1N0cmluZygpKVxuICAgICAgICAucmVwbGFjZSgnW3RvdGFsUGFnZXNdJywgaW5mby50b3RhbFBhZ2VzLnRvU3RyaW5nKCkpO1xuICAgICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gICAgfVxuICB9XG59XG4iXX0=

package/esm2022/data-pager/lib/data-pager-input-selector.component.mjs

@@ -21,8 +21,8 @@ export class AXDataPagerInputSelectorComponent extends AXDataPagerChild {
             this._parent.goToPage(e.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerInputSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInputSelectorComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerInputSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInputSelectorComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
     <ax-number-box
       class="ax-sm"
       [disabled]="_parent.disabled"
@@ -36,7 +36,7 @@ export class AXDataPagerInputSelectorComponent extends AXDataPagerChild {
     </ax-number-box>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerInputSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerInputSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-input-selector',

package/esm2022/data-pager/lib/data-pager-next-buttons.components.mjs

@@ -20,8 +20,8 @@ export class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
             return;
         this._parent.goNextPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerNextButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNextButtonsComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerNextButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNextButtonsComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
     <ax-button
       [disabled]="disabled"
       look="blank"
@@ -48,7 +48,7 @@ export class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
     </ax-button>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerNextButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-next-buttons',

package/esm2022/data-pager/lib/data-pager-numeric-selector.component.mjs

@@ -47,8 +47,8 @@ export class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
             return;
         this._parent.goToPage(Number(e.data));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerNumericSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerNumericSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector", providers: [
             { provide: AXDataPagerChild, useExisting: AXDataPagerNumericSelectorComponent },
             AXUnsubscriber,
         ], usesInheritance: true, ngImport: i0, template: `
@@ -91,7 +91,7 @@ export class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
     </ax-button>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerNumericSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerNumericSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-numeric-selector',

package/esm2022/data-pager/lib/data-pager-pagesize-dropdown.component.mjs

@@ -34,8 +34,8 @@ export class AXDataPagerPageSizesComponent extends AXDataPagerChild {
             return;
         this._size = this._parent.size = Number(e.data.size);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerPageSizesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: { sizes: "sizes" }, providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPageSizesComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerPageSizesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: { sizes: "sizes" }, providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPageSizesComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
     <ax-button
       [text]="_size"
       [color]="'default'"
@@ -56,9 +56,9 @@ export class AXDataPagerPageSizesComponent extends AXDataPagerChild {
       </ax-suffix>
     </ax-button>
     <!-- <span >items per page</span> -->
-  `, isInline: true, dependencies: [{ kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerPageSizesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-page-sizes',

package/esm2022/data-pager/lib/data-pager-prev-buttons.component.mjs

@@ -19,8 +19,8 @@ export class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
             return;
         this._parent.goPrevPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerPrevButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPrevButtonsComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerPrevButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPrevButtonsComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
     <ax-button
       [disabled]="disabled"
       look="blank"
@@ -47,7 +47,7 @@ export class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
     </ax-button>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerPrevButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-prev-buttons',

package/esm2022/data-pager/lib/data-pager.component.mjs

@@ -130,8 +130,8 @@ export class AXDataPagerComponent extends MXValueComponent {
             this.commitValue(page);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerComponent, deps: [{ token: AXPagedComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: AXDataPagerComponent, selector: "ax-data-pager", inputs: { value: "value", name: "name", disabled: "disabled", readonly: "readonly", size: "size", total: "total", displayMode: "displayMode" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", disabledChange: "disabledChange", readonlyChange: "readonlyChange", displayModeChange: "displayModeChange", onChanged: "onChanged" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerComponent, deps: [{ token: AXPagedComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: AXDataPagerComponent, selector: "ax-data-pager", inputs: { value: "value", name: "name", disabled: "disabled", readonly: "readonly", size: "size", total: "total", displayMode: "displayMode" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", disabledChange: "disabledChange", readonlyChange: "readonlyChange", displayModeChange: "displayModeChange", onChanged: "onChanged" }, providers: [
             { provide: AXDataPagerParentComponent, useExisting: AXDataPagerComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -140,7 +140,7 @@ export class AXDataPagerComponent extends MXValueComponent {
             },
         ], usesInheritance: true, ngImport: i0, template: "@switch(displayMode){\n@case('full'){\n<ax-prefix>\n    <ax-data-pager-numeric-selector>\n    </ax-data-pager-numeric-selector>\n    <ax-data-pager-page-sizes>\n    </ax-data-pager-page-sizes>\n</ax-prefix>\n<ax-suffix>\n    <ax-data-pager-info>\n    </ax-data-pager-info>\n</ax-suffix>\n}\n@case('compact'){\n<ax-prefix>\n    <ax-data-pager-prev-buttons>\n    </ax-data-pager-prev-buttons>\n    <ax-data-pager-input-selector>\n    </ax-data-pager-input-selector>\n    <ax-data-pager-next-buttons>\n    </ax-data-pager-next-buttons>\n</ax-prefix>\n<ax-suffix>\n    <ax-data-pager-info>\n    </ax-data-pager-info>\n</ax-suffix>\n}\n@default{\n<ng-content select=\"ax-prefix\"></ng-content>\n<ng-content select=\"ax-suffix\"></ng-content>\n}\n}", styles: ["ax-data-pager{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem;font-size:.875rem;line-height:1.25rem}ax-data-pager ax-button-group{display:flex!important;gap:1rem!important;border-radius:0!important;border-width:0px!important}ax-data-pager ax-button-group ax-button-item{border-radius:0!important;border-width:0px!important;padding:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:4rem!important;max-width:10rem!important;text-align:center!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{display:flex;gap:.5rem}ax-data-pager ax-data-pager-page-sizes ax-button{border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-data-pager ax-prefix,ax-data-pager ax-suffix{display:flex}\n"], dependencies: [{ kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2.AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: i3.AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: i4.AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: i5.AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: i6.AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: i7.AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-data-pager', inputs: ['value', 'name', 'disabled', 'readonly'], outputs: ['valueChange', 'onValueChanged', 'disabledChange', 'readonlyChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXDataPagerParentComponent, useExisting: AXDataPagerComponent },

package/esm2022/data-pager/lib/data-pager.module.mjs

@@ -13,6 +13,7 @@ import { AXDataPagerNumericSelectorComponent } from './data-pager-numeric-select
 import { AXDataPagerPageSizesComponent } from './data-pager-pagesize-dropdown.component';
 import { AXDataPagerPrevButtonsComponent } from './data-pager-prev-buttons.component';
 import { AXDataPagerComponent } from './data-pager.component';
+import { AXTranslationModule } from '@acorex/core/translation';
 import * as i0 from "@angular/core";
 const COMPONENT = [
     AXDataPagerComponent,
@@ -31,10 +32,11 @@ const MODULES = [
     AXNumberBoxModule,
     AXDropdownModule,
     AXDecoratorModule,
+    AXTranslationModule
 ];
 export class AXDataPagerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerModule, declarations: [AXDataPagerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerModule, declarations: [AXDataPagerComponent,
             AXDataPagerNextButtonsComponent,
             AXDataPagerPrevButtonsComponent,
             AXDataPagerPageSizesComponent,
@@ -46,16 +48,17 @@ export class AXDataPagerModule {
             AXButtonGroupModule,
             AXNumberBoxModule,
             AXDropdownModule,
-            AXDecoratorModule], exports: [AXDataPagerComponent,
+            AXDecoratorModule,
+            AXTranslationModule], exports: [AXDataPagerComponent,
             AXDataPagerNextButtonsComponent,
             AXDataPagerPrevButtonsComponent,
             AXDataPagerPageSizesComponent,
             AXDataPagerNumericSelectorComponent,
             AXDataPagerInputSelectorComponent,
             AXDataPagerInfoComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerModule, imports: [MODULES] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataPagerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataPagerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],
@@ -64,4 +67,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                     providers: [],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1wYWdlci5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvZGF0YS1wYWdlci9zcmMvbGliL2RhdGEtcGFnZXIubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUN0RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDdkUsT0FBTyxFQUFFLGlDQUFpQyxFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDMUYsT0FBTyxFQUFFLCtCQUErQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDdkYsT0FBTyxFQUFFLG1DQUFtQyxFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDOUYsT0FBTyxFQUFFLDZCQUE2QixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDekYsT0FBTyxFQUFFLCtCQUErQixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDdEYsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7O0FBRTlELE1BQU0sU0FBUyxHQUFHO0lBQ2hCLG9CQUFvQjtJQUNwQiwrQkFBK0I7SUFDL0IsK0JBQStCO0lBQy9CLDZCQUE2QjtJQUM3QixtQ0FBbUM7SUFDbkMsaUNBQWlDO0lBQ2pDLHdCQUF3QjtDQUN6QixDQUFDO0FBQ0YsTUFBTSxPQUFPLEdBQUc7SUFDZCxZQUFZO0lBQ1osV0FBVztJQUNYLGNBQWM7SUFDZCxtQkFBbUI7SUFDbkIsaUJBQWlCO0lBQ2pCLGdCQUFnQjtJQUNoQixpQkFBaUI7Q0FDbEIsQ0FBQztBQVFGLE1BQU0sT0FBTyxpQkFBaUI7OEdBQWpCLGlCQUFpQjsrR0FBakIsaUJBQWlCLGlCQXhCNUIsb0JBQW9CO1lBQ3BCLCtCQUErQjtZQUMvQiwrQkFBK0I7WUFDL0IsNkJBQTZCO1lBQzdCLG1DQUFtQztZQUNuQyxpQ0FBaUM7WUFDakMsd0JBQXdCLGFBR3hCLFlBQVk7WUFDWixXQUFXO1lBQ1gsY0FBYztZQUNkLG1CQUFtQjtZQUNuQixpQkFBaUI7WUFDakIsZ0JBQWdCO1lBQ2hCLGlCQUFpQixhQWZqQixvQkFBb0I7WUFDcEIsK0JBQStCO1lBQy9CLCtCQUErQjtZQUMvQiw2QkFBNkI7WUFDN0IsbUNBQW1DO1lBQ25DLGlDQUFpQztZQUNqQyx3QkFBd0I7K0dBa0JiLGlCQUFpQixZQUpmLE9BQU87OzJGQUlULGlCQUFpQjtrQkFON0IsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxHQUFHLFNBQVMsQ0FBQztvQkFDNUIsT0FBTyxFQUFFLENBQUMsR0FBRyxPQUFPLENBQUM7b0JBQ3JCLE9BQU8sRUFBRSxDQUFDLEdBQUcsU0FBUyxDQUFDO29CQUN2QixTQUFTLEVBQUUsRUFBRTtpQkFDZCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFYQnV0dG9uTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2J1dHRvbic7XG5pbXBvcnQgeyBBWEJ1dHRvbkdyb3VwTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2J1dHRvbi1ncm91cCc7XG5pbXBvcnQgeyBBWERlY29yYXRvck1vZHVsZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9kZWNvcmF0b3JzJztcbmltcG9ydCB7IEFYRHJvcGRvd25Nb2R1bGUgfSBmcm9tICdAYWNvcmV4L2NvbXBvbmVudHMvZHJvcGRvd24nO1xuaW1wb3J0IHsgQVhOdW1iZXJCb3hNb2R1bGUgfSBmcm9tICdAYWNvcmV4L2NvbXBvbmVudHMvbnVtYmVyLWJveCc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgQVhEYXRhUGFnZXJJbmZvQ29tcG9uZW50IH0gZnJvbSAnLi9kYXRhLXBhZ2VyLWluZm8uY29tcG9uZW50JztcbmltcG9ydCB7IEFYRGF0YVBhZ2VySW5wdXRTZWxlY3RvckNvbXBvbmVudCB9IGZyb20gJy4vZGF0YS1wYWdlci1pbnB1dC1zZWxlY3Rvci5jb21wb25lbnQnO1xuaW1wb3J0IHsgQVhEYXRhUGFnZXJOZXh0QnV0dG9uc0NvbXBvbmVudCB9IGZyb20gJy4vZGF0YS1wYWdlci1uZXh0LWJ1dHRvbnMuY29tcG9uZW50cyc7XG5pbXBvcnQgeyBBWERhdGFQYWdlck51bWVyaWNTZWxlY3RvckNvbXBvbmVudCB9IGZyb20gJy4vZGF0YS1wYWdlci1udW1lcmljLXNlbGVjdG9yLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBWERhdGFQYWdlclBhZ2VTaXplc0NvbXBvbmVudCB9IGZyb20gJy4vZGF0YS1wYWdlci1wYWdlc2l6ZS1kcm9wZG93bi5jb21wb25lbnQnO1xuaW1wb3J0IHsgQVhEYXRhUGFnZXJQcmV2QnV0dG9uc0NvbXBvbmVudCB9IGZyb20gJy4vZGF0YS1wYWdlci1wcmV2LWJ1dHRvbnMuY29tcG9uZW50JztcbmltcG9ydCB7IEFYRGF0YVBhZ2VyQ29tcG9uZW50IH0gZnJvbSAnLi9kYXRhLXBhZ2VyLmNvbXBvbmVudCc7XG5cbmNvbnN0IENPTVBPTkVOVCA9IFtcbiAgQVhEYXRhUGFnZXJDb21wb25lbnQsXG4gIEFYRGF0YVBhZ2VyTmV4dEJ1dHRvbnNDb21wb25lbnQsXG4gIEFYRGF0YVBhZ2VyUHJldkJ1dHRvbnNDb21wb25lbnQsXG4gIEFYRGF0YVBhZ2VyUGFnZVNpemVzQ29tcG9uZW50LFxuICBBWERhdGFQYWdlck51bWVyaWNTZWxlY3RvckNvbXBvbmVudCxcbiAgQVhEYXRhUGFnZXJJbnB1dFNlbGVjdG9yQ29tcG9uZW50LFxuICBBWERhdGFQYWdlckluZm9Db21wb25lbnQsXG5dO1xuY29uc3QgTU9EVUxFUyA9IFtcbiAgQ29tbW9uTW9kdWxlLFxuICBGb3Jtc01vZHVsZSxcbiAgQVhCdXR0b25Nb2R1bGUsXG4gIEFYQnV0dG9uR3JvdXBNb2R1bGUsXG4gIEFYTnVtYmVyQm94TW9kdWxlLFxuICBBWERyb3Bkb3duTW9kdWxlLFxuICBBWERlY29yYXRvck1vZHVsZSxcbl07XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogWy4uLkNPTVBPTkVOVF0sXG4gIGltcG9ydHM6IFsuLi5NT0RVTEVTXSxcbiAgZXhwb3J0czogWy4uLkNPTVBPTkVOVF0sXG4gIHByb3ZpZGVyczogW10sXG59KVxuZXhwb3J0IGNsYXNzIEFYRGF0YVBhZ2VyTW9kdWxlIHt9XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1wYWdlci5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvZGF0YS1wYWdlci9zcmMvbGliL2RhdGEtcGFnZXIubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUN0RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDdkUsT0FBTyxFQUFFLGlDQUFpQyxFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDMUYsT0FBTyxFQUFFLCtCQUErQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDdkYsT0FBTyxFQUFFLG1DQUFtQyxFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDOUYsT0FBTyxFQUFFLDZCQUE2QixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDekYsT0FBTyxFQUFFLCtCQUErQixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDdEYsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDOUQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7O0FBRS9ELE1BQU0sU0FBUyxHQUFHO0lBQ2hCLG9CQUFvQjtJQUNwQiwrQkFBK0I7SUFDL0IsK0JBQStCO0lBQy9CLDZCQUE2QjtJQUM3QixtQ0FBbUM7SUFDbkMsaUNBQWlDO0lBQ2pDLHdCQUF3QjtDQUN6QixDQUFDO0FBQ0YsTUFBTSxPQUFPLEdBQUc7SUFDZCxZQUFZO0lBQ1osV0FBVztJQUNYLGNBQWM7SUFDZCxtQkFBbUI7SUFDbkIsaUJBQWlCO0lBQ2pCLGdCQUFnQjtJQUNoQixpQkFBaUI7SUFDakIsbUJBQW1CO0NBQ3BCLENBQUM7QUFRRixNQUFNLE9BQU8saUJBQWlCOzhHQUFqQixpQkFBaUI7K0dBQWpCLGlCQUFpQixpQkF6QjVCLG9CQUFvQjtZQUNwQiwrQkFBK0I7WUFDL0IsK0JBQStCO1lBQy9CLDZCQUE2QjtZQUM3QixtQ0FBbUM7WUFDbkMsaUNBQWlDO1lBQ2pDLHdCQUF3QixhQUd4QixZQUFZO1lBQ1osV0FBVztZQUNYLGNBQWM7WUFDZCxtQkFBbUI7WUFDbkIsaUJBQWlCO1lBQ2pCLGdCQUFnQjtZQUNoQixpQkFBaUI7WUFDakIsbUJBQW1CLGFBaEJuQixvQkFBb0I7WUFDcEIsK0JBQStCO1lBQy9CLCtCQUErQjtZQUMvQiw2QkFBNkI7WUFDN0IsbUNBQW1DO1lBQ25DLGlDQUFpQztZQUNqQyx3QkFBd0I7K0dBbUJiLGlCQUFpQixZQUpmLE9BQU87OzJGQUlULGlCQUFpQjtrQkFON0IsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxHQUFHLFNBQVMsQ0FBQztvQkFDNUIsT0FBTyxFQUFFLENBQUMsR0FBRyxPQUFPLENBQUM7b0JBQ3JCLE9BQU8sRUFBRSxDQUFDLEdBQUcsU0FBUyxDQUFDO29CQUN2QixTQUFTLEVBQUUsRUFBRTtpQkFDZCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFYQnV0dG9uTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2J1dHRvbic7XG5pbXBvcnQgeyBBWEJ1dHRvbkdyb3VwTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2J1dHRvbi1ncm91cCc7XG5pbXBvcnQgeyBBWERlY29yYXRvck1vZHVsZSB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9kZWNvcmF0b3JzJztcbmltcG9ydCB7IEFYRHJvcGRvd25Nb2R1bGUgfSBmcm9tICdAYWNvcmV4L2NvbXBvbmVudHMvZHJvcGRvd24nO1xuaW1wb3J0IHsgQVhOdW1iZXJCb3hNb2R1bGUgfSBmcm9tICdAYWNvcmV4L2NvbXBvbmVudHMvbnVtYmVyLWJveCc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgQVhEYXRhUGFnZXJJbmZvQ29tcG9uZW50IH0gZnJvbSAnLi9kYXRhLXBhZ2VyLWluZm8uY29tcG9uZW50JztcbmltcG9ydCB7IEFYRGF0YVBhZ2VySW5wdXRTZWxlY3RvckNvbXBvbmVudCB9IGZyb20gJy4vZGF0YS1wYWdlci1pbnB1dC1zZWxlY3Rvci5jb21wb25lbnQnO1xuaW1wb3J0IHsgQVhEYXRhUGFnZXJOZXh0QnV0dG9uc0NvbXBvbmVudCB9IGZyb20gJy4vZGF0YS1wYWdlci1uZXh0LWJ1dHRvbnMuY29tcG9uZW50cyc7XG5pbXBvcnQgeyBBWERhdGFQYWdlck51bWVyaWNTZWxlY3RvckNvbXBvbmVudCB9IGZyb20gJy4vZGF0YS1wYWdlci1udW1lcmljLXNlbGVjdG9yLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBWERhdGFQYWdlclBhZ2VTaXplc0NvbXBvbmVudCB9IGZyb20gJy4vZGF0YS1wYWdlci1wYWdlc2l6ZS1kcm9wZG93bi5jb21wb25lbnQnO1xuaW1wb3J0IHsgQVhEYXRhUGFnZXJQcmV2QnV0dG9uc0NvbXBvbmVudCB9IGZyb20gJy4vZGF0YS1wYWdlci1wcmV2LWJ1dHRvbnMuY29tcG9uZW50JztcbmltcG9ydCB7IEFYRGF0YVBhZ2VyQ29tcG9uZW50IH0gZnJvbSAnLi9kYXRhLXBhZ2VyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBWFRyYW5zbGF0aW9uTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb3JlL3RyYW5zbGF0aW9uJztcblxuY29uc3QgQ09NUE9ORU5UID0gW1xuICBBWERhdGFQYWdlckNvbXBvbmVudCxcbiAgQVhEYXRhUGFnZXJOZXh0QnV0dG9uc0NvbXBvbmVudCxcbiAgQVhEYXRhUGFnZXJQcmV2QnV0dG9uc0NvbXBvbmVudCxcbiAgQVhEYXRhUGFnZXJQYWdlU2l6ZXNDb21wb25lbnQsXG4gIEFYRGF0YVBhZ2VyTnVtZXJpY1NlbGVjdG9yQ29tcG9uZW50LFxuICBBWERhdGFQYWdlcklucHV0U2VsZWN0b3JDb21wb25lbnQsXG4gIEFYRGF0YVBhZ2VySW5mb0NvbXBvbmVudCxcbl07XG5jb25zdCBNT0RVTEVTID0gW1xuICBDb21tb25Nb2R1bGUsXG4gIEZvcm1zTW9kdWxlLFxuICBBWEJ1dHRvbk1vZHVsZSxcbiAgQVhCdXR0b25Hcm91cE1vZHVsZSxcbiAgQVhOdW1iZXJCb3hNb2R1bGUsXG4gIEFYRHJvcGRvd25Nb2R1bGUsXG4gIEFYRGVjb3JhdG9yTW9kdWxlLFxuICBBWFRyYW5zbGF0aW9uTW9kdWxlXG5dO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFsuLi5DT01QT05FTlRdLFxuICBpbXBvcnRzOiBbLi4uTU9EVUxFU10sXG4gIGV4cG9ydHM6IFsuLi5DT01QT05FTlRdLFxuICBwcm92aWRlcnM6IFtdLFxufSlcbmV4cG9ydCBjbGFzcyBBWERhdGFQYWdlck1vZHVsZSB7fVxuIl19

package/esm2022/data-table/lib/columns/data-table-column-resizable.directive.mjs

@@ -36,10 +36,10 @@ export class AXDataTableColumnResizableDirective {
         document.removeEventListener('mouseup', this.onMouseUpBound);
         this.cdr.reattach(); // Reattach the change detector
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataTableColumnResizableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: AXDataTableColumnResizableDirective, 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: "17.1.1", ngImport: i0, type: AXDataTableColumnResizableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: AXDataTableColumnResizableDirective, selector: "[ax-table-column-resizble]", inputs: { column: ["ax-table-column-resizble", "column"] }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataTableColumnResizableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataTableColumnResizableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ax-table-column-resizble]'

package/esm2022/data-table/lib/columns/data-table-column.mjs

@@ -11,10 +11,10 @@ export class AXDataTableColumnComponent {
     get cssClass() {
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataTableColumnComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataTableColumnComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataTableColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataTableColumnComponent, decorators: [{
             type: Injectable
         }], propDecorators: { caption: [{
                 type: Input

package/esm2022/data-table/lib/columns/data-text-column.component.mjs

@@ -23,8 +23,8 @@ export class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
         const value = rowData[dataField];
         return !this.format ? value : this.formatService.format(value, this.format, this.formatOptions);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: { width: "width", caption: "caption", headerTemplate: "headerTemplate", cellTemplate: "cellTemplate", allowSorting: "allowSorting", allowResizing: "allowResizing", fixed: "fixed", dataField: "dataField", wrapText: "wrapText", format: "format", formatOptions: "formatOptions" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXDataTableTextColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataTableTextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: { width: "width", caption: "caption", headerTemplate: "headerTemplate", cellTemplate: "cellTemplate", allowSorting: "allowSorting", allowResizing: "allowResizing", fixed: "fixed", dataField: "dataField", wrapText: "wrapText", format: "format", formatOptions: "formatOptions" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXDataTableTextColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
     {{ getDisplayText(row.data, this.dataField) }}
   </ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -34,7 +34,7 @@ __decorate([
     __metadata("design:paramtypes", [Object, String]),
     __metadata("design:returntype", String)
 ], AXDataTableTextColumnComponent.prototype, "getDisplayText", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataTableTextColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataTableTextColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-text-column',

package/esm2022/data-table/lib/columns/row-command-column.component.mjs

@@ -64,8 +64,8 @@ export class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnC
         };
         this.onItemClick.emit(args);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXRowDropdownCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowDropdownCommandColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXRowDropdownCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowDropdownCommandColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
     @if (row.data) {
       <div>
         <button [axRipple]>
@@ -92,9 +92,9 @@ export class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnC
         <ax-loading></ax-loading>
       </div>
     </ng-template>
-  </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: i5.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: i5.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXRowDropdownCommandColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXRowDropdownCommandColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-dropdown-command-column',
@@ -170,8 +170,8 @@ export class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent
         };
         this.onItemClick.emit(args);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXRowCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: AXRowCommandColumnComponent, selector: "ax-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowCommandColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXRowCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: AXRowCommandColumnComponent, selector: "ax-command-column", inputs: { width: "width", caption: "caption", fixed: "fixed", items: "items" }, outputs: { onItemClick: "onItemClick" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowCommandColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
     @if (row.data) {
       @for (item of getItems(row.data); track $index) {
         <button
@@ -187,7 +187,7 @@ export class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent
     }
   </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: i5.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXRowCommandColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-command-column',

package/esm2022/data-table/lib/columns/row-index-column.component.mjs

@@ -33,15 +33,15 @@ export class AXRowIndexColumnComponent extends AXDataTableColumnComponent {
     get cssClass() {
         return 'ax-index-column';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXRowIndexColumnComponent, selector: "ax-index-column", inputs: { width: "width", caption: "caption", fixed: "fixed", padZero: "padZero" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXRowIndexColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXRowIndexColumnComponent, selector: "ax-index-column", inputs: { width: "width", caption: "caption", fixed: "fixed", padZero: "padZero" }, providers: [
             AXUnsubscriber,
             { provide: AXDataTableColumnComponent, useExisting: AXRowIndexColumnComponent },
         ], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
     {{ row.rowIndex + 1 | format:'number': {zeroPadLength:this.formatCount, thousandSeparator:false} | async }}
   </ng-template>`, isInline: true, dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXRowIndexColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-index-column',

package/esm2022/data-table/lib/columns/row-select-column.component.mjs

@@ -27,8 +27,8 @@ export class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
     get loadingEnabled() {
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXRowSelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXRowSelectColumnComponent, selector: "ax-select-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowSelectColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXRowSelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXRowSelectColumnComponent, selector: "ax-select-column", inputs: { width: "width", caption: "caption", fixed: "fixed" }, providers: [{ provide: AXDataTableColumnComponent, useExisting: AXRowSelectColumnComponent }], viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template let-row>
     <input
       class="ax-checkbox"
       type="checkbox"
@@ -38,7 +38,7 @@ export class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
     />
   </ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXRowSelectColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXRowSelectColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-select-column',

package/esm2022/data-table/lib/data-table.component.mjs

@@ -226,10 +226,10 @@ export class AXDataTableComponent extends MXBaseComponent {
     _handleOnScroll() {
         this.updateHScroll();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", dataSource: "dataSource", loading: "loading", focusedRow: "focusedRow", selectedRows: "selectedRows", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", focusedRowChange: "focusedRowChange", selectedRowsChange: "selectedRowsChange", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "footerContainer", first: true, predicate: ["footerContainer"], descendants: true }, { propertyName: "scrollableContainer", first: true, predicate: ["scrolling"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n<!------------------- Header contents ------------------->\n@if(showHeader){\n<div class=\"ax-header-content\">\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <thead>\n        <tr>\n          @for(c of notFixedColumn();track c.name)\n          {\n          <th [class.ax-interactive]=\"c.allowSorting\" (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n            [style.width]=\"c.width\">\n            @if(c.headerTemplate)\n            {\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            }\n            @else {\n            <div class=\"ax-caption\">\n              {{ c.caption }}\n              @if(getSort(c)){\n              <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n              }\n            </div>\n            }\n            <!-- @if(c.allowResizing)\n              {\n              <div class=\"ax-resize-handle\" [ax-table-column-resizble]=\"c\"></div>\n              } -->\n          </th>\n          }\n          <th></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n</div>\n}\n\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll()\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight + 'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n          <colgroup>\n            @for(c of notFixedColumn();track c.name)\n            {\n            <col [style.width]=\"c.width\" />\n            }\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container *cdkVirtualFor=\"\n                let item of listDataSource;\n                templateCacheSize: 100;\n                let i = index;\n                trackBy: trackByIdx;\n                let rIndex = index\n              \">\n              <!------------------- custom row template------------------->\n              @if (rowTemplate != null) {\n              <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\">\n              </ng-container>\n              } @else {\n              <!------------------- normal row template------------------->\n              <tr [class.ax-state-focused]=\"focusedRow && item === focusedRow\" [attr.data-index]=\"rIndex\"\n                [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event, item)\">\n                <!------------------- start fixed column ------------------->\n\n                <!------------------- Not fixed column ------------------->\n                @for (c of notFixedColumn(); track c.name) {\n                <!------------------- custom cell template ------------------->\n                @if (c.cellTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: { data: item, rowIndex: rIndex } }\">\n                </ng-container>\n                } @else {\n                <!------------------- default cell template ------------------->\n                <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                  @if (item) {\n                  <!------------------- render cell ------------------->\n                  <ng-container\n                    *ngTemplateOutlet=\"c.template;context: { $implicit: { data: item, rowIndex: rIndex } }\"></ng-container>\n                  }\n                  @else {\n                  <!------------------- render loading ------------------->\n                  @if (c.loadingEnabled && loading) {\n                  <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                  }\n                  }\n                </td>\n                }\n                }\n                <td></td>\n              </tr>\n              }\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n  <div class=\"ax-table-info\">\n    <div>Showing {{ startRowIndex }} of {{ totalRows }} items</div>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n      <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n    </ax-button>\n  </div>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</div>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", fetchDataMode: "fetchDataMode", dataSource: "dataSource", loading: "loading", focusedRow: "focusedRow", selectedRows: "selectedRows", itemHeight: "itemHeight" }, outputs: { onPageChanged: "onPageChanged", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", focusedRowChange: "focusedRowChange", selectedRowsChange: "selectedRowsChange", onScrolledIndexChanged: "onScrolledIndexChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], queries: [{ propertyName: "columns", predicate: AXDataTableColumnComponent }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "footerContainer", first: true, predicate: ["footerContainer"], descendants: true }, { propertyName: "scrollableContainer", first: true, predicate: ["scrolling"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"> </ng-content>\n<!------------------- Header contents ------------------->\n@if(showHeader){\n<div class=\"ax-header-content\">\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <thead>\n        <tr>\n          @for(c of notFixedColumn();track c.name)\n          {\n          <th [class.ax-interactive]=\"c.allowSorting\" (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n            [style.width]=\"c.width\">\n            @if(c.headerTemplate)\n            {\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            }\n            @else {\n            <div class=\"ax-caption\">\n              {{ c.caption }}\n              @if(getSort(c)){\n              <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n              }\n            </div>\n            }\n            <!-- @if(c.allowResizing)\n              {\n              <div class=\"ax-resize-handle\" [ax-table-column-resizble]=\"c\"></div>\n              } -->\n          </th>\n          }\n          <th></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n</div>\n}\n\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll()\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight + 'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n          <colgroup>\n            @for(c of notFixedColumn();track c.name)\n            {\n            <col [style.width]=\"c.width\" />\n            }\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container *cdkVirtualFor=\"\n                let item of listDataSource;\n                templateCacheSize: 100;\n                let i = index;\n                trackBy: trackByIdx;\n                let rIndex = index\n              \">\n              <!------------------- custom row template------------------->\n              @if (rowTemplate != null) {\n              <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\">\n              </ng-container>\n              } @else {\n              <!------------------- normal row template------------------->\n              <tr [class.ax-state-focused]=\"focusedRow && item === focusedRow\" [attr.data-index]=\"rIndex\"\n                [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event, item)\">\n                <!------------------- start fixed column ------------------->\n\n                <!------------------- Not fixed column ------------------->\n                @for (c of notFixedColumn(); track c.name) {\n                <!------------------- custom cell template ------------------->\n                @if (c.cellTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: { data: item, rowIndex: rIndex } }\">\n                </ng-container>\n                } @else {\n                <!------------------- default cell template ------------------->\n                <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                  @if (item) {\n                  <!------------------- render cell ------------------->\n                  <ng-container\n                    *ngTemplateOutlet=\"c.template;context: { $implicit: { data: item, rowIndex: rIndex } }\"></ng-container>\n                  }\n                  @else {\n                  <!------------------- render loading ------------------->\n                  @if (c.loadingEnabled && loading) {\n                  <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                  }\n                  }\n                </td>\n                }\n                }\n                <td></td>\n              </tr>\n              }\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n  <div class=\"ax-table-info\">\n    <div>Showing {{ startRowIndex }} of {{ totalRows }} items</div>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n      <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n    </ax-button>\n  </div>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</div>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i2.CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXDataTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXDataTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-data-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], template: "<ng-content select=\"ax-header\"> </ng-content>\n<!------------------- Header contents ------------------->\n@if(showHeader){\n<div class=\"ax-header-content\">\n  <div class=\"ax-header-columns\">\n    <table tabindex=\"0\" [style.width]=\"width\" #headerContainer>\n      <thead>\n        <tr>\n          @for(c of notFixedColumn();track c.name)\n          {\n          <th [class.ax-interactive]=\"c.allowSorting\" (click)=\"c.allowSorting ? handleColumnClick($event, c) : null\"\n            [style.width]=\"c.width\">\n            @if(c.headerTemplate)\n            {\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\n            }\n            @else {\n            <div class=\"ax-caption\">\n              {{ c.caption }}\n              @if(getSort(c)){\n              <ax-icon icon=\"ax-icon {{ getSort(c) }}\"></ax-icon>\n              }\n            </div>\n            }\n            <!-- @if(c.allowResizing)\n              {\n              <div class=\"ax-resize-handle\" [ax-table-column-resizble]=\"c\"></div>\n              } -->\n          </th>\n          }\n          <th></th>\n        </tr>\n      </thead>\n    </table>\n  </div>\n</div>\n}\n\n<!------------------- Body contents ------------------->\n<div [style.height]=\"height\" class=\"ax-body-content\">\n  <div class=\"ax-body-columns\">\n    <div cdkVirtualScrollingElement #scrolling [style.height]=\"'100%'\" (scroll)=\"_handleOnScroll()\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"itemHeight\" [style.--item-height]=\"itemHeight + 'px'\"\n        (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\">\n        <table tabindex=\"0\" class=\"ax-table-body ax-relative\" [style.width]=\"width\">\n          <colgroup>\n            @for(c of notFixedColumn();track c.name)\n            {\n            <col [style.width]=\"c.width\" />\n            }\n            <col />\n          </colgroup>\n          <tbody>\n            <ng-container *cdkVirtualFor=\"\n                let item of listDataSource;\n                templateCacheSize: 100;\n                let i = index;\n                trackBy: trackByIdx;\n                let rIndex = index\n              \">\n              <!------------------- custom row template------------------->\n              @if (rowTemplate != null) {\n              <ng-container *ngTemplateOutlet=\"rowTemplate; context: { $implicit: { data: item, rowIndex: rIndex } }\">\n              </ng-container>\n              } @else {\n              <!------------------- normal row template------------------->\n              <tr [class.ax-state-focused]=\"focusedRow && item === focusedRow\" [attr.data-index]=\"rIndex\"\n                [class.ax-state-selected]=\"selectedRows.includes(item)\" (click)=\"handleRowClick($event, item)\">\n                <!------------------- start fixed column ------------------->\n\n                <!------------------- Not fixed column ------------------->\n                @for (c of notFixedColumn(); track c.name) {\n                <!------------------- custom cell template ------------------->\n                @if (c.cellTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: { data: item, rowIndex: rIndex } }\">\n                </ng-container>\n                } @else {\n                <!------------------- default cell template ------------------->\n                <td [attr.data-label]=\"c.caption\" tabindex=\"0\" [class]=\"c.cssClass\">\n                  @if (item) {\n                  <!------------------- render cell ------------------->\n                  <ng-container\n                    *ngTemplateOutlet=\"c.template;context: { $implicit: { data: item, rowIndex: rIndex } }\"></ng-container>\n                  }\n                  @else {\n                  <!------------------- render loading ------------------->\n                  @if (c.loadingEnabled && loading) {\n                  <ax-skeleton [animated]=\"loading.animation\"></ax-skeleton>\n                  }\n                  }\n                </td>\n                }\n                }\n                <td></td>\n              </tr>\n              }\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n<div class=\"ax-table-footer\" #footerContainer>\n  <div class=\"ax-table-info\">\n    <div>Showing {{ startRowIndex }} of {{ totalRows }} items</div>\n    <ax-button look=\"blank\" class=\"ax-sm\" (onClick)=\"refresh()\">\n      <ax-icon icon=\"ax-icon ax-icon-refresh\"></ax-icon>\n    </ax-button>\n  </div>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</div>", styles: [".ax-dark ax-data-table .ax-header-content th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-500))!important}.ax-dark ax-data-table .ax-body-content tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-900))!important;color:rgba(var(--ax-color-primary-fore))!important}.ax-dark ax-data-table .ax-body-content tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-800))!important}ax-data-table{display:block;height:100%;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;line-height:1.25rem}ax-data-table table{table-layout:fixed}ax-data-table .ax-header-content{position:relative;height:3rem;overflow:hidden}ax-data-table .ax-header-content .ax-header-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-header-content .ax-header-fixed-columns th.ax-column-fixed{pointer-events:auto}ax-data-table .ax-header-content .ax-header-fixed-columns th:not(.ax-column-fixed){visibility:hidden;background-color:transparent}ax-data-table .ax-header-content .ax-header-columns{height:100%}ax-data-table .ax-header-content .ax-header-columns>table{height:100%;overflow:hidden;border-start-end-radius:var(--ax-rounded-border-default);border-start-start-radius:var(--ax-rounded-border-default)}ax-data-table .ax-header-content .ax-header-columns>table th{border-bottom-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;text-align:start;font-weight:500;text-transform:uppercase;position:relative}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive{cursor:pointer}ax-data-table .ax-header-content .ax-header-columns>table th.ax-interactive:hover{background-color:rgba(var(--ax-color-neutral-200))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent}ax-data-table .ax-header-content .ax-header-columns>table th .ax-resize-handle:hover{background-color:rgba(var(--ax-color-neutral-300))}ax-data-table .ax-header-content .ax-header-columns>table th .ax-caption{display:flex;align-items:center;gap:.5rem}ax-data-table .ax-header-content .ax-header-columns>table th:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content{position:relative}ax-data-table .ax-body-content .ax-body-fixed-columns{pointer-events:none;position:absolute;z-index:10}ax-data-table .ax-body-content .ax-body-columns{height:100%}ax-data-table .ax-body-content .ax-body-columns table{border-collapse:collapse}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) td{background-color:rgba(var(--ax-color-on-surface))}ax-data-table .ax-body-content .ax-body-columns table tr:nth-child(2n) ax-skeleton{width:25%}ax-data-table .ax-body-content .ax-body-columns table tr{height:2.5rem}ax-data-table .ax-body-content .ax-body-columns table tr:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-focused:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore-tint))}ax-data-table .ax-body-content .ax-body-columns table tr.ax-state-selected:hover td:not(.ax-index-column){background-color:rgba(var(--ax-color-primary-400));color:rgba(var(--ax-color-primary-fore))}ax-data-table .ax-body-content .ax-body-columns table td{position:relative;min-width:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom-width:1px;border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding:.5rem 1rem;vertical-align:middle}ax-data-table .ax-body-content .ax-body-columns table td.ax-index-column{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(var(--ax-color-on-surface));text-align:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button.ax-state-disabled{position:relative!important;cursor:not-allowed!important;opacity:.5!important}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column>div{position:absolute;inset-inline-start:0px;top:50%;display:flex;width:100%;transform:translateY(-50%);align-items:center;justify-content:center}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button{position:relative;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--ax-rounded-border-default);border-style:none;border-color:rgba(var(--ax-color-border-default));background-color:transparent;padding:.25rem;line-height:1;color:rgba(var(--ax-color-ghost-fore))}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover:not(ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-selected,ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:hover.ax-state-disabled){opacity:.75}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button:active{opacity:1}ax-data-table .ax-body-content .ax-body-columns table td.ax-command-column button .ax-ripple{background-color:rgba(var(--ax-color-ghost-fore),.05)}ax-data-table .ax-body-content .ax-body-columns table td:last-child{border-inline-end-width:0px}ax-data-table .ax-body-content .ax-body-columns table td ax-skeleton{height:.875rem;width:33.333333%;border-radius:.375rem}ax-data-table .ax-table-footer{border-collapse:collapse;overflow:hidden;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem .875rem}ax-data-table .ax-table-footer .ax-table-info{display:flex;flex:1 1 0%;align-items:center;justify-content:space-between}\n"] }]
         }], propDecorators: { columns: [{