cax-design-system 2.8.4 → 3.0.0

package/fesm2022/cax-design-system-table.mjs

@@ -11,8 +11,8 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'cax-design-system/u
 import { ArrowDownIcon } from 'cax-design-system/icons/arrowdown';
 import { ArrowUpIcon } from 'cax-design-system/icons/arrowup';
 import { SpinnerIcon } from 'cax-design-system/icons/spinner';
-import * as i5 from 'cax-design-system/paginator';
-import { PaginatorModule } from 'cax-design-system/paginator';
+import * as i5 from 'cax-design-system/table-paginator';
+import { TablePaginatorModule } from 'cax-design-system/table-paginator';
 import { Subject } from 'rxjs';
 import * as i3$1 from '@angular/platform-browser';
 import { trigger, transition, style, animate } from '@angular/animations';
@@ -34,11 +34,9 @@ import { ButtonModule } from 'cax-design-system/button';
 import { TrashIcon } from 'cax-design-system/icons/trash';
 import { PlusIcon } from 'cax-design-system/icons/plus';
 import { RadioButtonModule } from 'cax-design-system/radiobutton';
-import * as i7$1 from 'cax-design-system/divider';
 import { DividerModule } from 'cax-design-system/divider';
 import * as i3$2 from 'cax-design-system/badge';
 import { BadgeModule } from 'cax-design-system/badge';
-import { CheckIcon } from 'cax-design-system/icons/check';
 
 class TableService {
     sortSource = new Subject();
@@ -71,10 +69,10 @@ class TableService {
     onColumnsChange(columns) {
         this.columnsSource.next(columns);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TableService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -197,14 +195,14 @@ class TableBody {
         const getItemOptions = this.getScrollerOption('getItemOptions');
         return getItemOptions ? getItemOptions(index).index : index;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TableBody, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: TableBody, isStandalone: true, selector: "[caxTableBody]", inputs: { columns: ["caxTableBody", "columns"], template: ["caxTableBodyTemplate", "template"], value: "value", frozen: ["frozen", "frozen", booleanAttribute], frozenRows: ["frozenRows", "frozenRows", booleanAttribute], scrollerOptions: "scrollerOptions" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<ng-container *ngIf=\"!dt.expandedRowTemplate\">\r\n    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"value\" [ngForTrackBy]=\"dt.rowTrackBy\">\r\n        <ng-container *ngIf=\"dt.groupHeaderTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))\" role=\"row\">\r\n            <ng-container *ngTemplateOutlet=\"dt.groupHeaderTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"dt.rowGroupMode !== 'rowspan'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rowData ? template : dt.loadingBodyTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"\r\n            ></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"dt.rowGroupMode === 'rowspan'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    rowData ? template : dt.loadingBodyTemplate;\r\n                    context: {\r\n                        $implicit: rowData,\r\n                        rowIndex: getRowIndex(rowIndex),\r\n                        columns: columns,\r\n                        editing: dt.editMode === 'row' && dt.isRowEditing(rowData),\r\n                        frozen: frozen,\r\n                        rowgroup: shouldRenderRowspan(value, rowData, rowIndex),\r\n                        rowspan: calculateRowGroupSize(value, rowData, rowIndex)\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"dt.groupFooterTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, rowIndex)\" role=\"row\">\r\n            <ng-container *ngTemplateOutlet=\"dt.groupFooterTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"></ng-container>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-container>\r\n<ng-container *ngIf=\"dt.expandedRowTemplate && !(frozen && dt.frozenExpandedRowTemplate)\">\r\n    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"value\" [ngForTrackBy]=\"dt.rowTrackBy\">\r\n        <ng-container *ngIf=\"!dt.groupHeaderTemplate\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"\r\n            ></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"dt.groupHeaderTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))\" role=\"row\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dt.groupHeaderTemplate;\r\n                    context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\r\n                \"\r\n            ></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\r\n            <ng-container *ngTemplateOutlet=\"dt.expandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }\"></ng-container>\r\n            <ng-container *ngIf=\"dt.groupFooterTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))\" role=\"row\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dt.groupFooterTemplate;\r\n                        context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\r\n                    \"\r\n                ></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-container>\r\n<ng-container *ngIf=\"dt.frozenExpandedRowTemplate && frozen\">\r\n    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"value\" [ngForTrackBy]=\"dt.rowTrackBy\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"\r\n        ></ng-container>\r\n        <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\r\n            <ng-container *ngTemplateOutlet=\"dt.frozenExpandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }\"></ng-container>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-container>\r\n<ng-container *ngIf=\"dt.loading\">\r\n    <ng-container *ngTemplateOutlet=\"dt.loadingBodyTemplate; context: { $implicit: columns, frozen: frozen }\"></ng-container>\r\n</ng-container>\r\n<ng-container *ngIf=\"dt.isEmpty() && !dt.loading\">\r\n    <ng-container *ngTemplateOutlet=\"dt.emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }\"></ng-container>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableBody, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: TableBody, isStandalone: true, selector: "[caxTableBody]", inputs: { columns: ["caxTableBody", "columns"], template: ["caxTableBodyTemplate", "template"], value: "value", frozen: ["frozen", "frozen", booleanAttribute], frozenRows: ["frozenRows", "frozenRows", booleanAttribute], scrollerOptions: "scrollerOptions" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<ng-container *ngIf=\"!dt.expandedRowTemplate\">\n    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"value\" [ngForTrackBy]=\"dt.rowTrackBy\">\n        <ng-container *ngIf=\"dt.groupHeaderTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))\" role=\"row\">\n            <ng-container *ngTemplateOutlet=\"dt.groupHeaderTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"dt.rowGroupMode !== 'rowspan'\">\n            <ng-container\n                *ngTemplateOutlet=\"rowData ? template : dt.loadingBodyTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"dt.rowGroupMode === 'rowspan'\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    rowData ? template : dt.loadingBodyTemplate;\n                    context: {\n                        $implicit: rowData,\n                        rowIndex: getRowIndex(rowIndex),\n                        columns: columns,\n                        editing: dt.editMode === 'row' && dt.isRowEditing(rowData),\n                        frozen: frozen,\n                        rowgroup: shouldRenderRowspan(value, rowData, rowIndex),\n                        rowspan: calculateRowGroupSize(value, rowData, rowIndex)\n                    }\n                \"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"dt.groupFooterTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, rowIndex)\" role=\"row\">\n            <ng-container *ngTemplateOutlet=\"dt.groupFooterTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"dt.expandedRowTemplate && !(frozen && dt.frozenExpandedRowTemplate)\">\n    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"value\" [ngForTrackBy]=\"dt.rowTrackBy\">\n        <ng-container *ngIf=\"!dt.groupHeaderTemplate\">\n            <ng-container\n                *ngTemplateOutlet=\"template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"dt.groupHeaderTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))\" role=\"row\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    dt.groupHeaderTemplate;\n                    context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\n                \"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\n            <ng-container *ngTemplateOutlet=\"dt.expandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }\"></ng-container>\n            <ng-container *ngIf=\"dt.groupFooterTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))\" role=\"row\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        dt.groupFooterTemplate;\n                        context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"dt.frozenExpandedRowTemplate && frozen\">\n    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"value\" [ngForTrackBy]=\"dt.rowTrackBy\">\n        <ng-container\n            *ngTemplateOutlet=\"template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"\n        ></ng-container>\n        <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\n            <ng-container *ngTemplateOutlet=\"dt.frozenExpandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }\"></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"dt.loading\">\n    <ng-container *ngTemplateOutlet=\"dt.loadingBodyTemplate; context: { $implicit: columns, frozen: frozen }\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"dt.isEmpty() && !dt.loading\">\n    <ng-container *ngTemplateOutlet=\"dt.emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }\"></ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TableBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableBody, decorators: [{
             type: Component,
             args: [{ selector: '[caxTableBody]', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], host: {
                         class: 'cax-element'
-                    }, template: "<ng-container *ngIf=\"!dt.expandedRowTemplate\">\r\n    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"value\" [ngForTrackBy]=\"dt.rowTrackBy\">\r\n        <ng-container *ngIf=\"dt.groupHeaderTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))\" role=\"row\">\r\n            <ng-container *ngTemplateOutlet=\"dt.groupHeaderTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"dt.rowGroupMode !== 'rowspan'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rowData ? template : dt.loadingBodyTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"\r\n            ></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"dt.rowGroupMode === 'rowspan'\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    rowData ? template : dt.loadingBodyTemplate;\r\n                    context: {\r\n                        $implicit: rowData,\r\n                        rowIndex: getRowIndex(rowIndex),\r\n                        columns: columns,\r\n                        editing: dt.editMode === 'row' && dt.isRowEditing(rowData),\r\n                        frozen: frozen,\r\n                        rowgroup: shouldRenderRowspan(value, rowData, rowIndex),\r\n                        rowspan: calculateRowGroupSize(value, rowData, rowIndex)\r\n                    }\r\n                \"\r\n            ></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"dt.groupFooterTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, rowIndex)\" role=\"row\">\r\n            <ng-container *ngTemplateOutlet=\"dt.groupFooterTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"></ng-container>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-container>\r\n<ng-container *ngIf=\"dt.expandedRowTemplate && !(frozen && dt.frozenExpandedRowTemplate)\">\r\n    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"value\" [ngForTrackBy]=\"dt.rowTrackBy\">\r\n        <ng-container *ngIf=\"!dt.groupHeaderTemplate\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"\r\n            ></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"dt.groupHeaderTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))\" role=\"row\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"\r\n                    dt.groupHeaderTemplate;\r\n                    context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\r\n                \"\r\n            ></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\r\n            <ng-container *ngTemplateOutlet=\"dt.expandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }\"></ng-container>\r\n            <ng-container *ngIf=\"dt.groupFooterTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))\" role=\"row\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        dt.groupFooterTemplate;\r\n                        context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\r\n                    \"\r\n                ></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-container>\r\n<ng-container *ngIf=\"dt.frozenExpandedRowTemplate && frozen\">\r\n    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"value\" [ngForTrackBy]=\"dt.rowTrackBy\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"\r\n        ></ng-container>\r\n        <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\r\n            <ng-container *ngTemplateOutlet=\"dt.frozenExpandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }\"></ng-container>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-container>\r\n<ng-container *ngIf=\"dt.loading\">\r\n    <ng-container *ngTemplateOutlet=\"dt.loadingBodyTemplate; context: { $implicit: columns, frozen: frozen }\"></ng-container>\r\n</ng-container>\r\n<ng-container *ngIf=\"dt.isEmpty() && !dt.loading\">\r\n    <ng-container *ngTemplateOutlet=\"dt.emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }\"></ng-container>\r\n</ng-container>\r\n" }]
+                    }, template: "<ng-container *ngIf=\"!dt.expandedRowTemplate\">\n    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"value\" [ngForTrackBy]=\"dt.rowTrackBy\">\n        <ng-container *ngIf=\"dt.groupHeaderTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))\" role=\"row\">\n            <ng-container *ngTemplateOutlet=\"dt.groupHeaderTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"dt.rowGroupMode !== 'rowspan'\">\n            <ng-container\n                *ngTemplateOutlet=\"rowData ? template : dt.loadingBodyTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"dt.rowGroupMode === 'rowspan'\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    rowData ? template : dt.loadingBodyTemplate;\n                    context: {\n                        $implicit: rowData,\n                        rowIndex: getRowIndex(rowIndex),\n                        columns: columns,\n                        editing: dt.editMode === 'row' && dt.isRowEditing(rowData),\n                        frozen: frozen,\n                        rowgroup: shouldRenderRowspan(value, rowData, rowIndex),\n                        rowspan: calculateRowGroupSize(value, rowData, rowIndex)\n                    }\n                \"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"dt.groupFooterTemplate && !dt.virtualScroll && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, rowIndex)\" role=\"row\">\n            <ng-container *ngTemplateOutlet=\"dt.groupFooterTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"dt.expandedRowTemplate && !(frozen && dt.frozenExpandedRowTemplate)\">\n    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"value\" [ngForTrackBy]=\"dt.rowTrackBy\">\n        <ng-container *ngIf=\"!dt.groupHeaderTemplate\">\n            <ng-container\n                *ngTemplateOutlet=\"template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"dt.groupHeaderTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(rowIndex))\" role=\"row\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    dt.groupHeaderTemplate;\n                    context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\n                \"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\n            <ng-container *ngTemplateOutlet=\"dt.expandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }\"></ng-container>\n            <ng-container *ngIf=\"dt.groupFooterTemplate && dt.rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(rowIndex))\" role=\"row\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        dt.groupFooterTemplate;\n                        context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"dt.frozenExpandedRowTemplate && frozen\">\n    <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"value\" [ngForTrackBy]=\"dt.rowTrackBy\">\n        <ng-container\n            *ngTemplateOutlet=\"template; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, expanded: dt.isRowExpanded(rowData), editing: dt.editMode === 'row' && dt.isRowEditing(rowData), frozen: frozen }\"\n        ></ng-container>\n        <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\n            <ng-container *ngTemplateOutlet=\"dt.frozenExpandedRowTemplate; context: { $implicit: rowData, rowIndex: getRowIndex(rowIndex), columns: columns, frozen: frozen }\"></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n<ng-container *ngIf=\"dt.loading\">\n    <ng-container *ngTemplateOutlet=\"dt.loadingBodyTemplate; context: { $implicit: columns, frozen: frozen }\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"dt.isEmpty() && !dt.loading\">\n    <ng-container *ngTemplateOutlet=\"dt.emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }\"></ng-container>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: Table }, { type: TableService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { columns: [{
                 type: Input,
                 args: ['caxTableBody']
@@ -276,71 +274,31 @@ class Table {
      * @group Props
      */
     paginator;
-    /**
-     * Number of page links to display in paginator.
-     * @group Props
-     */
-    pageLinks = 5;
     /**
      * Array of integer/object values to display inside rows per page dropdown of paginator
      * @group Props
      */
-    rowsPerPageOptions;
-    /**
-     * Whether to show it even there is only one page.
-     * @group Props
-     */
-    alwaysShowPaginator = true;
+    rowsPerPageOptions = [5, 10, 20];
     /**
      * Position of the paginator, options are "top", "bottom" or "both".
      * @group Props
      */
     paginatorPosition = 'bottom';
     /**
-     * Custom style class for paginator
-     * @group Props
-     */
-    paginatorStyleClass;
-    /**
-     * Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
-     * @group Props
-     */
-    paginatorDropdownAppendTo;
-    /**
-     * Paginator dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
-     * @group Props
-     */
-    paginatorDropdownScrollHeight = '200px';
-    /**
-     * Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
-     * @group Props
-     */
-    currentPageReportTemplate = '{currentPage} of {totalPages}';
-    /**
-     * Whether to display current page report.
+     * Whether to show prev and next buttons.
      * @group Props
      */
-    showCurrentPageReport;
+    showPrevNext = true;
     /**
-     * Whether to display a dropdown to navigate to any page.
+     * Whether to show results per page dropdown.
      * @group Props
      */
-    showJumpToPageDropdown;
+    showResultsPerPage = true;
     /**
-     * Whether to display a input to navigate to any page.
+     * Alignment of the paginator.
      * @group Props
      */
-    showJumpToPageInput;
-    /**
-     * When enabled, icons are displayed on paginator to go first and last page.
-     * @group Props
-     */
-    showFirstLastIcon = true;
-    /**
-     * Whether to show page links.
-     * @group Props
-     */
-    showPageLinks = true;
+    paginatorAlignment = 'right';
     /**
      * Sort order to use when an unsorted column gets sorted by user interaction.
      * @group Props
@@ -350,8 +308,8 @@ class Table {
      * Defines whether sorting works on single column or on multiple columns.
      * @group Props
      */
-    filterType = 'default';
-    sortType = 'default';
+    filterType = 'custom';
+    sortType = 'custom';
     sortMode = 'single';
     /**
      * When true, resets paginator to first page after sorting. Available only when sortMode is set to single.
@@ -759,6 +717,24 @@ class Table {
      * @group Emits
      */
     onPage = new EventEmitter();
+    /**
+     * Callback to invoke when results per page changes.
+     * @param {PaginatorState} event - custom per page change event.
+     * @group Events
+     */
+    onPerPageChange = new EventEmitter();
+    /**
+     * Callback to invoke when previous page button is clicked.
+     * @param {PaginatorState} event - custom prev click event.
+     * @group Events
+     */
+    onPrevClick = new EventEmitter();
+    /**
+     * Callback to invoke when next page button is clicked.
+     * @param {PaginatorState} event - custom next click event.
+     * @group Events
+     */
+    onNextClick = new EventEmitter();
     /**
      * Callback to invoke when a column gets sorted.
      * @param {Object} object - sort meta.
@@ -1225,6 +1201,7 @@ class Table {
             first: this.first,
             rows: this.rows
         });
+        this.onPerPageChange.emit(event);
         if (this.lazy) {
             this.onLazyLoad.emit(this.createLazyLoadMetadata());
         }
@@ -1239,6 +1216,12 @@ class Table {
             this.resetScrollTop();
         }
     }
+    onPrevClickChange(event) {
+        this.onPrevClick.emit(event);
+    }
+    onNextClickChange(event) {
+        this.onNextClick.emit(event);
+    }
     nextSortOrder = (current) => {
         switch (current) {
             case 0:
@@ -1447,7 +1430,7 @@ class Table {
     }
     isSorted(field) {
         if (this.sortMode === 'single') {
-            return this.sortField && this.sortField === field;
+            return this.sortField && this.sortField === field && this.sortOrder !== 0;
         }
         else if (this.sortMode === 'multiple') {
             let sorted = false;
@@ -1462,7 +1445,7 @@ class Table {
             return sorted;
         }
         else if (this.sortMode === 'custom') {
-            return this.sortField && this.sortField === field;
+            return this.sortField && this.sortField === field && this.sortOrder !== 0;
         }
     }
     handleRowClick(event) {
@@ -1830,11 +1813,13 @@ class Table {
         }
         return true;
     }
-    _filter() {
+    _filter(emit = true) {
         if (this.filterType === 'custom') {
-            this.onFilter.emit({
-                filters: Object.fromEntries(Object.entries(this.filters).filter(([_, value]) => value && value?.matchMode !== null))
-            });
+            if (emit) {
+                this.onFilter.emit({
+                    filters: Object.fromEntries(Object.entries(this.filters).filter(([_, value]) => value && value?.matchMode !== null))
+                });
+            }
         }
         else {
             if (!this.restoringFilter) {
@@ -1916,10 +1901,12 @@ class Table {
                     }
                 }
             }
-            this.onFilter.emit({
-                filters: this.filters,
-                filteredValue: this.filteredValue || this.value
-            });
+            if (emit) {
+                this.onFilter.emit({
+                    filters: this.filters,
+                    filteredValue: this.filteredValue || this.value
+                });
+            }
             this.tableService.onValueChange(this.value);
             if (this.isStateful() && !this.restoringFilter) {
                 this.saveState();
@@ -2631,7 +2618,7 @@ class Table {
     }
     getTableClasses() {
         return {
-            'cax-datatable cax-component': true,
+            'cax-datatable cax-datatable-gridlines cax-component': true,
             'cax-datatable-hoverable-rows': this.rowHover || this.selectionMode,
             'cax-datatable-scrollable': this.scrollable,
             'cax-datatable-flex-scrollable': this.scrollable && this.scrollHeight === 'flex',
@@ -2698,20 +2685,14 @@ class Table {
         this.destroyStyleElement();
         this.destroyResponsiveStyle();
     }
-    getPaginatorStyleClasses(className) {
-        return [this.paginatorStyleClass, className]
-            .filter((c) => !!c)
-            .join(' ')
-            .trim();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Table, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TableService }, { token: i0.ChangeDetectorRef }, { token: i2.FilterService }, { token: i2.OverlayService }, { token: i2.caxConfig }, { token: i3$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: Table, isStandalone: true, selector: "cax-table", inputs: { fontSize: "fontSize", rowSize: "rowSize", frozenColumns: "frozenColumns", frozenValue: "frozenValue", style: "style", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", paginator: ["paginator", "paginator", booleanAttribute], pageLinks: ["pageLinks", "pageLinks", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: ["alwaysShowPaginator", "alwaysShowPaginator", booleanAttribute], paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showJumpToPageInput: ["showJumpToPageInput", "showJumpToPageInput", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], defaultSortOrder: ["defaultSortOrder", "defaultSortOrder", numberAttribute], filterType: "filterType", sortType: "sortType", sortMode: "sortMode", resetPageOnSort: ["resetPageOnSort", "resetPageOnSort", booleanAttribute], selectionMode: "selectionMode", selectionPageOnly: ["selectionPageOnly", "selectionPageOnly", booleanAttribute], contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], rowSelectable: "rowSelectable", rowTrackBy: "rowTrackBy", lazy: ["lazy", "lazy", booleanAttribute], lazyLoadOnInit: ["lazyLoadOnInit", "lazyLoadOnInit", booleanAttribute], compareSelectionBy: "compareSelectionBy", csvSeparator: "csvSeparator", exportFilename: "exportFilename", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: ["filterDelay", "filterDelay", numberAttribute], filterLocale: "filterLocale", expandedRowKeys: "expandedRowKeys", editingRowKeys: "editingRowKeys", rowExpandMode: "rowExpandMode", scrollable: ["scrollable", "scrollable", booleanAttribute], scrollDirection: "scrollDirection", rowGroupMode: "rowGroupMode", scrollHeight: "scrollHeight", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: ["virtualScrollDelay", "virtualScrollDelay", numberAttribute], frozenWidth: "frozenWidth", responsive: "responsive", contextMenu: "contextMenu", resizableColumns: ["resizableColumns", "resizableColumns", booleanAttribute], columnResizeMode: "columnResizeMode", reorderableColumns: ["reorderableColumns", "reorderableColumns", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", showLoader: ["showLoader", "showLoader", booleanAttribute], rowHover: ["rowHover", "rowHover", booleanAttribute], customSort: ["customSort", "customSort", booleanAttribute], showInitialSortBadge: ["showInitialSortBadge", "showInitialSortBadge", booleanAttribute], autoLayout: ["autoLayout", "autoLayout", booleanAttribute], exportFunction: "exportFunction", exportHeader: "exportHeader", stateKey: "stateKey", stateStorage: "stateStorage", editMode: "editMode", groupRowsBy: "groupRowsBy", groupRowsByOrder: ["groupRowsByOrder", "groupRowsByOrder", numberAttribute], responsiveLayout: "responsiveLayout", breakpoint: "breakpoint", paginatorLocale: "paginatorLocale", value: "value", columns: "columns", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", selectAll: "selectAll", virtualRowHeight: "virtualRowHeight" }, outputs: { contextMenuSelectionChange: "contextMenuSelectionChange", selectAllChange: "selectAllChange", selectionChange: "selectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onPage: "onPage", onSort: "onSort", onFilter: "onFilter", onLazyLoad: "onLazyLoad", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onContextMenuSelect: "onContextMenuSelect", onColResize: "onColResize", onColReorder: "onColReorder", onRowReorder: "onRowReorder", onEditInit: "onEditInit", onEditComplete: "onEditComplete", onEditCancel: "onEditCancel", onHeaderCheckboxToggle: "onHeaderCheckboxToggle", sortFunction: "sortFunction", firstChange: "firstChange", rowsChange: "rowsChange", onStateSave: "onStateSave", onStateRestore: "onStateRestore" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "resizeHelperViewChild", first: true, predicate: ["resizeHelper"], descendants: true }, { propertyName: "reorderIndicatorUpViewChild", first: true, predicate: ["reorderIndicatorUp"], descendants: true }, { propertyName: "reorderIndicatorDownViewChild", first: true, predicate: ["reorderIndicatorDown"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "tableHeaderViewChild", first: true, predicate: ["thead"], descendants: true }, { propertyName: "tableFooterViewChild", first: true, predicate: ["tfoot"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container [ngStyle]=\"style\" [class]=\"styleClass\" [ngClass]=\"getTableClasses()\" [attr.id]=\"id\">\r\n    <div class=\"cax-datatable-loading-overlay cax-component-overlay\" *ngIf=\"loading && showLoader\">\r\n        <i *ngIf=\"loadingIcon\" [class]=\"'cax-datatable-loading-icon ' + loadingIcon\"></i>\r\n        <ng-container *ngIf=\"!loadingIcon\">\r\n            <SpinnerIcon *ngIf=\"!loadingIconTemplate\" [spin]=\"true\" [styleClass]=\"'cax-datatable-loading-icon'\" />\r\n            <span *ngIf=\"loadingIconTemplate\" class=\"cax-datatable-loading-icon\">\r\n                <ng-template *ngTemplateOutlet=\"loadingIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-container>\r\n    </div>\r\n    <div *ngIf=\"captionTemplate\" class=\"cax-datatable-header\">\r\n        <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\r\n    </div>\r\n    <cax-paginator\r\n        [rows]=\"rows\"\r\n        [first]=\"first\"\r\n        [totalRecords]=\"totalRecords\"\r\n        [pageLinkSize]=\"pageLinks\"\r\n        [alwaysShow]=\"alwaysShowPaginator\"\r\n        (onPageChange)=\"onPageChange($event)\"\r\n        [rowsPerPageOptions]=\"rowsPerPageOptions\"\r\n        *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')\"\r\n        [templateLeft]=\"paginatorLeftTemplate\"\r\n        [templateRight]=\"paginatorRightTemplate\"\r\n        [dropdownAppendTo]=\"paginatorDropdownAppendTo\"\r\n        [dropdownScrollHeight]=\"paginatorDropdownScrollHeight\"\r\n        [currentPageReportTemplate]=\"currentPageReportTemplate\"\r\n        [showFirstLastIcon]=\"showFirstLastIcon\"\r\n        [dropdownItemTemplate]=\"paginatorDropdownItemTemplate\"\r\n        [showCurrentPageReport]=\"showCurrentPageReport\"\r\n        [showJumpToPageDropdown]=\"showJumpToPageDropdown\"\r\n        [showJumpToPageInput]=\"showJumpToPageInput\"\r\n        [showPageLinks]=\"showPageLinks\"\r\n        [styleClass]=\"getPaginatorStyleClasses('cax-paginator-top')\"\r\n        [locale]=\"paginatorLocale\"\r\n    >\r\n        <ng-template caxTemplate=\"dropdownicon\" *ngIf=\"paginatorDropdownIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorDropdownIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"firstpagelinkicon\" *ngIf=\"paginatorFirstPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorFirstPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"previouspagelinkicon\" *ngIf=\"paginatorPreviousPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorPreviousPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"lastpagelinkicon\" *ngIf=\"paginatorLastPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorLastPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"nextpagelinkicon\" *ngIf=\"paginatorNextPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorNextPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n    </cax-paginator>\r\n\r\n    <div #wrapper class=\"cax-datatable-wrapper\" [ngStyle]=\"{ maxHeight: virtualScroll ? '' : scrollHeight }\">\r\n        <cax-scroller\r\n            #scroller\r\n            *ngIf=\"virtualScroll\"\r\n            [items]=\"processedData\"\r\n            [columns]=\"columns\"\r\n            [style]=\"{ height: scrollHeight !== 'flex' ? scrollHeight : undefined }\"\r\n            [scrollHeight]=\"scrollHeight !== 'flex' ? undefined : '100%'\"\r\n            [itemSize]=\"virtualScrollItemSize || _virtualRowHeight\"\r\n            [step]=\"rows\"\r\n            [delay]=\"lazy ? virtualScrollDelay : 0\"\r\n            [inline]=\"true\"\r\n            [autoSize]=\"true\"\r\n            [lazy]=\"lazy\"\r\n            (onLazyLoad)=\"onLazyItemLoad($event)\"\r\n            [loaderDisabled]=\"true\"\r\n            [showSpacer]=\"false\"\r\n            [showLoader]=\"loadingBodyTemplate\"\r\n            [options]=\"virtualScrollOptions\"\r\n        >\r\n            <ng-template caxTemplate=\"content\" let-items let-scrollerOptions=\"options\">\r\n                <ng-container *ngTemplateOutlet=\"buildInTable; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\r\n            </ng-template>\r\n        </cax-scroller>\r\n        <ng-container *ngIf=\"!virtualScroll\">\r\n            <ng-container *ngTemplateOutlet=\"buildInTable; context: { $implicit: processedData, options: { columns } }\"></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #buildInTable let-items let-scrollerOptions=\"options\">\r\n            <table\r\n                #table\r\n                role=\"table\"\r\n                [ngClass]=\"{ 'cax-datatable-table': true, 'cax-datatable-scrollable-table': scrollable, 'cax-datatable-resizable-table': resizableColumns, 'cax-datatable-resizable-table-fit': resizableColumns && columnResizeMode === 'fit' }\"\r\n                [class]=\"tableStyleClass\"\r\n                [ngStyle]=\"tableStyle\"\r\n                [attr.id]=\"id + '-table'\"\r\n            >\r\n                <ng-container *ngTemplateOutlet=\"colGroupTemplate; context: { $implicit: scrollerOptions.columns }\"></ng-container>\r\n                <thead role=\"rowgroup\" #thead class=\"cax-datatable-thead\">\r\n                    <ng-container *ngTemplateOutlet=\"headerGroupedTemplate || headerTemplate; context: { $implicit: scrollerOptions.columns }\"></ng-container>\r\n                </thead>\r\n                <tbody\r\n                    role=\"rowgroup\"\r\n                    class=\"cax-datatable-tbody cax-datatable-frozen-tbody\"\r\n                    *ngIf=\"frozenValue || frozenBodyTemplate\"\r\n                    [value]=\"frozenValue\"\r\n                    [frozenRows]=\"true\"\r\n                    [caxTableBody]=\"scrollerOptions.columns\"\r\n                    [caxTableBodyTemplate]=\"frozenBodyTemplate\"\r\n                    [frozen]=\"true\"\r\n                ></tbody>\r\n                <tbody\r\n                    role=\"rowgroup\"\r\n                    class=\"cax-datatable-tbody\"\r\n                    [ngClass]=\"scrollerOptions.contentStyleClass\"\r\n                    [ngStyle]=\"scrollerOptions.contentStyle\"\r\n                    [value]=\"dataToRender(scrollerOptions.rows)\"\r\n                    [caxTableBody]=\"scrollerOptions.columns\"\r\n                    [caxTableBodyTemplate]=\"bodyTemplate\"\r\n                    [scrollerOptions]=\"scrollerOptions\"\r\n                ></tbody>\r\n                <tbody\r\n                    role=\"rowgroup\"\r\n                    *ngIf=\"scrollerOptions.spacerStyle\"\r\n                    [ngStyle]=\"{ height: 'calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px)' }\"\r\n                    class=\"cax-datatable-scroller-spacer\"\r\n                ></tbody>\r\n                <tfoot role=\"rowgroup\" *ngIf=\"footerGroupedTemplate || footerTemplate\" #tfoot class=\"cax-datatable-tfoot\">\r\n                    <ng-container *ngTemplateOutlet=\"footerGroupedTemplate || footerTemplate; context: { $implicit: scrollerOptions.columns }\"></ng-container>\r\n                </tfoot>\r\n            </table>\r\n        </ng-template>\r\n    </div>\r\n\r\n    <cax-paginator\r\n        [rows]=\"rows\"\r\n        [first]=\"first\"\r\n        [totalRecords]=\"totalRecords\"\r\n        [pageLinkSize]=\"pageLinks\"\r\n        [alwaysShow]=\"alwaysShowPaginator\"\r\n        (onPageChange)=\"onPageChange($event)\"\r\n        [rowsPerPageOptions]=\"rowsPerPageOptions\"\r\n        *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')\"\r\n        [templateLeft]=\"paginatorLeftTemplate\"\r\n        [templateRight]=\"paginatorRightTemplate\"\r\n        [dropdownAppendTo]=\"paginatorDropdownAppendTo\"\r\n        [dropdownScrollHeight]=\"paginatorDropdownScrollHeight\"\r\n        [currentPageReportTemplate]=\"currentPageReportTemplate\"\r\n        [showFirstLastIcon]=\"showFirstLastIcon\"\r\n        [dropdownItemTemplate]=\"paginatorDropdownItemTemplate\"\r\n        [showCurrentPageReport]=\"showCurrentPageReport\"\r\n        [showJumpToPageDropdown]=\"showJumpToPageDropdown\"\r\n        [showJumpToPageInput]=\"showJumpToPageInput\"\r\n        [showPageLinks]=\"showPageLinks\"\r\n        [styleClass]=\"getPaginatorStyleClasses('cax-paginator-bottom')\"\r\n        [locale]=\"paginatorLocale\"\r\n    >\r\n        <ng-template caxTemplate=\"dropdownicon\" *ngIf=\"paginatorDropdownIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorDropdownIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"firstpagelinkicon\" *ngIf=\"paginatorFirstPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorFirstPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"previouspagelinkicon\" *ngIf=\"paginatorPreviousPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorPreviousPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"lastpagelinkicon\" *ngIf=\"paginatorLastPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorLastPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"nextpagelinkicon\" *ngIf=\"paginatorNextPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorNextPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n    </cax-paginator>\r\n\r\n    <div *ngIf=\"summaryTemplate\" class=\"cax-datatable-footer\">\r\n        <ng-container *ngTemplateOutlet=\"summaryTemplate\"></ng-container>\r\n    </div>\r\n\r\n    <div\r\n        #resizeHelper\r\n        class=\"cax-column-resizer-helper\"\r\n        [ngStyle]=\"{\r\n                    display: 'none'\r\n                }\"\r\n        *ngIf=\"resizableColumns\"\r\n    ></div>\r\n    <span\r\n        #reorderIndicatorUp\r\n        class=\"cax-datatable-reorder-indicator-up\"\r\n        [ngStyle]=\"{\r\n                    display: 'none'\r\n                }\"\r\n        *ngIf=\"reorderableColumns\"\r\n    >\r\n        <ArrowDownIcon *ngIf=\"!reorderIndicatorUpIconTemplate\" />\r\n        <ng-template *ngTemplateOutlet=\"reorderIndicatorUpIconTemplate\"></ng-template>\r\n    </span>\r\n    <span\r\n        #reorderIndicatorDown\r\n        class=\"cax-datatable-reorder-indicator-down\"\r\n        [ngStyle]=\"{\r\n                    display: 'none'\r\n                }\"\r\n        *ngIf=\"reorderableColumns\"\r\n    >\r\n        <ArrowUpIcon *ngIf=\"!reorderIndicatorDownIconTemplate\" />\r\n        <ng-template *ngTemplateOutlet=\"reorderIndicatorDownIconTemplate\"></ng-template>\r\n    </span>\r\n</div>\r\n", styles: ["@layer cax{.cax-datatable{position:relative}.cax-datatable>.cax-datatable-wrapper{overflow:auto;border-radius:12px}.cax-datatable-wrapper::-webkit-scrollbar{width:8px;height:8px}.cax-datatable-wrapper::-webkit-scrollbar-track{background:#f0f0f0;border-radius:10px}.cax-datatable-wrapper::-webkit-scrollbar-thumb{background:#888;border-radius:10px}.cax-datatable-table{border-spacing:0px;width:100%}.cax-datatable .cax-sortable-column{-webkit-user-select:none;user-select:none}.cax-datatable .cax-sortable-column .cax-column-title,.cax-datatable .cax-sortable-column .cax-sortable-column-icon,.cax-datatable .cax-sortable-column .cax-sortable-column-badge{vertical-align:middle}.cax-datatable .cax-sortable-column .cax-icon-wrapper{display:inline}.cax-datatable .cax-sortable-column .cax-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}.cax-datatable-hoverable-rows .cax-selectable-row{cursor:pointer}.cax-datatable-scrollable>.cax-datatable-wrapper{position:relative}.cax-datatable-scrollable-table>.cax-datatable-thead{position:sticky;top:0;z-index:2}.cax-datatable-scrollable-table>.cax-datatable-frozen-tbody{position:sticky;z-index:1}.cax-datatable-scrollable-table>.cax-datatable-tfoot{position:sticky;bottom:0;z-index:1}.cax-datatable-scrollable .cax-frozen-column{position:sticky;z-index:1}.cax-datatable-scrollable th.cax-frozen-column{z-index:2;background:var(--neutral-75)}.cax-datatable-scrollable td.cax-frozen-column{z-index:1;background:var(--neutral-25)}.cax-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}.cax-datatable-flex-scrollable>.cax-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}.cax-datatable-scrollable-table>.cax-datatable-tbody>.cax-rowgroucax-header{position:sticky;z-index:2}.cax-datatable-resizable-table>.cax-datatable-thead>tr>th,.cax-datatable-resizable-table>.cax-datatable-tfoot>tr>td,.cax-datatable-resizable-table>.cax-datatable-tbody>tr>td{overflow:hidden;white-space:nowrap}.cax-datatable-resizable-table>.cax-datatable-thead>tr>th.cax-resizable-column:not(.cax-frozen-column){background-clip:padding-box;position:relative}.cax-datatable-resizable-table-fit>.cax-datatable-thead>tr>th.cax-resizable-column:last-child .cax-column-resizer{display:none}.cax-datatable .cax-column-resizer{display:block;position:absolute!important;top:0;right:0;margin:0;width:.5rem;height:100%;padding:0;cursor:col-resize;border:1px solid transparent}.cax-datatable .cax-column-resizer-helper{width:1px;position:absolute;z-index:10;display:none}.cax-datatable .cax-row-editor-init,.cax-datatable .cax-row-editor-save,.cax-datatable .cax-row-editor-cancel,.cax-datatable .cax-row-toggler{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.cax-datatable-reorder-indicator-up,.cax-datatable-reorder-indicator-down{position:absolute}.cax-datatable-reorderablerow-handle,[caxReorderableColumn]{cursor:move}.cax-datatable .cax-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:3}.cax-column-filter-row{display:flex;align-items:center;width:100%}.cax-column-filter-row i{font-size:20px}.cax-column-filter-menu,.cax-column-filter-custom{display:inline-flex;position:relative;float:right;top:-3px;margin-left:4px}.cax-column-filter-menu i,.cax-column-filter-custom i{font-size:20px}.cax-column-filter-custom-container{padding:16px;display:flex;gap:16px;flex-direction:column}.cax-column-filter-custom-container .cax-column-filter-custom-buttons{display:flex;gap:12px}.cax-column-filter-custom-container .cax-column-filter-custom-buttons cax-button{flex:1}.cax-column-filter-overlay-custom{width:248px}.cax-column-filter-row cax-columnfilterformelement{flex:1 1 auto;width:1%}.cax-column-filter-menu-button,.cax-column-filter-clear-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}.cax-column-filter-menu-button:disabled{opacity:.5}.cax-column-filter-overlay{position:absolute;top:0;left:0}.cax-column-filter-row-items{margin:0;padding:0;list-style:none}.cax-column-filter-row-item{cursor:pointer}.cax-column-filter-add-button,.cax-column-filter-remove-button{justify-content:center}.cax-column-filter-add-button .cax-button-label,.cax-column-filter-remove-button .cax-button-label{flex-grow:0}.cax-column-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.cax-column-filter-buttonbar .cax-button{width:auto}.cax-datatable-tbody>tr>td>.cax-column-title{display:none}.cax-datatable-scroller-spacer{display:flex}.cax-datatable .cax-scroller .cax-scroller-loading{transform:none!important;min-height:0;position:sticky;top:0;left:0}}.cax-datatable .cax-editable-column .cax-inputtext{width:100%;box-shadow:none;border:0;padding:0;line-height:normal}.cax-datatable.cax-datatable-font-sm .cax-datatable-tbody>tr>td{font-size:12px}.cax-datatable.cax-datatable-font-sm .cax-datatable-tbody>tr>td .cax-inputtext{font-size:12px}.cax-datatable.cax-datatable-font-sm .cax-datatable-tbody>tr>td cax-tablecheckbox .cax-checkbox .cax-checkbox-box{width:16px;height:16px}.cax-datatable.cax-datatable-font-md .cax-datatable-tbody>tr>td{font-size:14px}.cax-datatable.cax-datatable-font-md .cax-datatable-tbody>tr>td .cax-inputtext{font-size:14px}.cax-datatable.cax-datatable-font-md .cax-datatable-tbody>tr>td cax-tablecheckbox .cax-checkbox .cax-checkbox-box{width:18px;height:18px}.cax-datatable.cax-datatable-font-lg .cax-datatable-tbody>tr>td{font-size:16px}.cax-datatable.cax-datatable-font-lg .cax-datatable-tbody>tr>td .cax-inputtext{font-size:16px}.cax-datatable.cax-datatable-font-lg .cax-datatable-tbody>tr>td cax-tablecheckbox.cax-checkbox .cax-checkbox-box{width:20px;height:20px}.cax-datatable.cax-datatable-font-xl .cax-datatable-tbody>tr>td{font-size:18px}.cax-datatable.cax-datatable-font-xl .cax-datatable-tbody>tr>td .cax-inputtext{font-size:18px}.cax-datatable.cax-datatable-font-xl .cax-datatable-tbody>tr>td cax-tablecheckbox.cax-checkbox .cax-checkbox-box{width:22px;height:22px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:42px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:56px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:72px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:88px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:44px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:60px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:78px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:96px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:54px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:66px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:86px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:108px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:56px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:70px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:94px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:116px}.cax-cell-highlight-default{border:1px solid var(--primary-500)!important}.cax-cell-highlight-error{border:1px solid var(--error-600)!important}.cax-cell-background-error{background:var(--error-50)}.cax-sort-icon-button{border:0;width:28px;height:28px!important;display:flex;background:transparent;cursor:pointer;padding:0!important;align-items:center;justify-content:center;border-radius:6px}.cax-sort-icon-button i{font-size:20px}.cax-sort-icon-button:disabled{opacity:.5;cursor:context-menu}.cax-sort-icon-button:hover{background-color:var(--primary-100)}cax-sorticon{display:inline-flex;position:relative;float:right;top:-3px;margin-left:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i5.Paginator, selector: "cax-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "rightAligned"], outputs: ["onPageChange"] }, { kind: "directive", type: i2.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "component", type: i6.Scroller, selector: "cax-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: ArrowDownIcon, selector: "ArrowDownIcon" }, { kind: "component", type: ArrowUpIcon, selector: "ArrowUpIcon" }, { kind: "component", type: SpinnerIcon, selector: "SpinnerIcon" }, { kind: "component", type: TableBody, selector: "[caxTableBody]", inputs: ["caxTableBody", "caxTableBodyTemplate", "value", "frozen", "frozenRows", "scrollerOptions"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Table, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TableService }, { token: i0.ChangeDetectorRef }, { token: i2.FilterService }, { token: i2.OverlayService }, { token: i2.caxConfig }, { token: i3$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: Table, isStandalone: true, selector: "cax-table", inputs: { fontSize: "fontSize", rowSize: "rowSize", frozenColumns: "frozenColumns", frozenValue: "frozenValue", style: "style", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", paginator: ["paginator", "paginator", booleanAttribute], rowsPerPageOptions: "rowsPerPageOptions", paginatorPosition: "paginatorPosition", showPrevNext: ["showPrevNext", "showPrevNext", booleanAttribute], showResultsPerPage: ["showResultsPerPage", "showResultsPerPage", booleanAttribute], paginatorAlignment: "paginatorAlignment", defaultSortOrder: ["defaultSortOrder", "defaultSortOrder", numberAttribute], filterType: "filterType", sortType: "sortType", sortMode: "sortMode", resetPageOnSort: ["resetPageOnSort", "resetPageOnSort", booleanAttribute], selectionMode: "selectionMode", selectionPageOnly: ["selectionPageOnly", "selectionPageOnly", booleanAttribute], contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], rowSelectable: "rowSelectable", rowTrackBy: "rowTrackBy", lazy: ["lazy", "lazy", booleanAttribute], lazyLoadOnInit: ["lazyLoadOnInit", "lazyLoadOnInit", booleanAttribute], compareSelectionBy: "compareSelectionBy", csvSeparator: "csvSeparator", exportFilename: "exportFilename", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: ["filterDelay", "filterDelay", numberAttribute], filterLocale: "filterLocale", expandedRowKeys: "expandedRowKeys", editingRowKeys: "editingRowKeys", rowExpandMode: "rowExpandMode", scrollable: ["scrollable", "scrollable", booleanAttribute], scrollDirection: "scrollDirection", rowGroupMode: "rowGroupMode", scrollHeight: "scrollHeight", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: ["virtualScrollDelay", "virtualScrollDelay", numberAttribute], frozenWidth: "frozenWidth", responsive: "responsive", contextMenu: "contextMenu", resizableColumns: ["resizableColumns", "resizableColumns", booleanAttribute], columnResizeMode: "columnResizeMode", reorderableColumns: ["reorderableColumns", "reorderableColumns", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", showLoader: ["showLoader", "showLoader", booleanAttribute], rowHover: ["rowHover", "rowHover", booleanAttribute], customSort: ["customSort", "customSort", booleanAttribute], showInitialSortBadge: ["showInitialSortBadge", "showInitialSortBadge", booleanAttribute], autoLayout: ["autoLayout", "autoLayout", booleanAttribute], exportFunction: "exportFunction", exportHeader: "exportHeader", stateKey: "stateKey", stateStorage: "stateStorage", editMode: "editMode", groupRowsBy: "groupRowsBy", groupRowsByOrder: ["groupRowsByOrder", "groupRowsByOrder", numberAttribute], responsiveLayout: "responsiveLayout", breakpoint: "breakpoint", paginatorLocale: "paginatorLocale", value: "value", columns: "columns", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", selectAll: "selectAll", virtualRowHeight: "virtualRowHeight" }, outputs: { contextMenuSelectionChange: "contextMenuSelectionChange", selectAllChange: "selectAllChange", selectionChange: "selectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onPage: "onPage", onPerPageChange: "onPerPageChange", onPrevClick: "onPrevClick", onNextClick: "onNextClick", onSort: "onSort", onFilter: "onFilter", onLazyLoad: "onLazyLoad", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onContextMenuSelect: "onContextMenuSelect", onColResize: "onColResize", onColReorder: "onColReorder", onRowReorder: "onRowReorder", onEditInit: "onEditInit", onEditComplete: "onEditComplete", onEditCancel: "onEditCancel", onHeaderCheckboxToggle: "onHeaderCheckboxToggle", sortFunction: "sortFunction", firstChange: "firstChange", rowsChange: "rowsChange", onStateSave: "onStateSave", onStateRestore: "onStateRestore" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "resizeHelperViewChild", first: true, predicate: ["resizeHelper"], descendants: true }, { propertyName: "reorderIndicatorUpViewChild", first: true, predicate: ["reorderIndicatorUp"], descendants: true }, { propertyName: "reorderIndicatorDownViewChild", first: true, predicate: ["reorderIndicatorDown"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "tableHeaderViewChild", first: true, predicate: ["thead"], descendants: true }, { propertyName: "tableFooterViewChild", first: true, predicate: ["tfoot"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container [ngStyle]=\"style\" [class]=\"styleClass\" [ngClass]=\"getTableClasses()\" [attr.id]=\"id\">\n    <div class=\"cax-datatable-loading-overlay cax-component-overlay\" *ngIf=\"loading && showLoader\">\n        <i *ngIf=\"loadingIcon\" [class]=\"'cax-datatable-loading-icon ' + loadingIcon\"></i>\n        <ng-container *ngIf=\"!loadingIcon\">\n            <SpinnerIcon *ngIf=\"!loadingIconTemplate\" [spin]=\"true\" [styleClass]=\"'cax-datatable-loading-icon'\" />\n            <span *ngIf=\"loadingIconTemplate\" class=\"cax-datatable-loading-icon\">\n                <ng-template *ngTemplateOutlet=\"loadingIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n    </div>\n    <div *ngIf=\"captionTemplate\" class=\"cax-datatable-header\">\n        <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n    </div>\n    <cax-tablePaginator\n        [rows]=\"rows\"\n        [first]=\"first\"\n        [totalRecords]=\"totalRecords\"\n        [rowsPerPageOptions]=\"rowsPerPageOptions\"\n        [showPrevNext]=\"showPrevNext\"\n        [showResultsPerPage]=\"showResultsPerPage\"\n        [alignment]=\"paginatorAlignment\"\n        (onPerPageChange)=\"onPageChange($event)\"\n        (onPrevClick)=\"onPrevClickChange($event)\"\n        (onNextClick)=\"onNextClickChange($event)\"\n        *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')\"\n    ></cax-tablePaginator>\n\n    <div #wrapper class=\"cax-datatable-wrapper\" [ngStyle]=\"{ maxHeight: virtualScroll ? '' : scrollHeight }\">\n        <cax-scroller\n            #scroller\n            *ngIf=\"virtualScroll\"\n            [items]=\"processedData\"\n            [columns]=\"columns\"\n            [style]=\"{ height: scrollHeight !== 'flex' ? scrollHeight : undefined }\"\n            [scrollHeight]=\"scrollHeight !== 'flex' ? undefined : '100%'\"\n            [itemSize]=\"virtualScrollItemSize || _virtualRowHeight\"\n            [step]=\"rows\"\n            [delay]=\"lazy ? virtualScrollDelay : 0\"\n            [inline]=\"true\"\n            [autoSize]=\"true\"\n            [lazy]=\"lazy\"\n            (onLazyLoad)=\"onLazyItemLoad($event)\"\n            [loaderDisabled]=\"true\"\n            [showSpacer]=\"false\"\n            [showLoader]=\"loadingBodyTemplate\"\n            [options]=\"virtualScrollOptions\"\n        >\n            <ng-template caxTemplate=\"content\" let-items let-scrollerOptions=\"options\">\n                <ng-container *ngTemplateOutlet=\"buildInTable; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\n            </ng-template>\n        </cax-scroller>\n        <ng-container *ngIf=\"!virtualScroll\">\n            <ng-container *ngTemplateOutlet=\"buildInTable; context: { $implicit: processedData, options: { columns } }\"></ng-container>\n        </ng-container>\n\n        <ng-template #buildInTable let-items let-scrollerOptions=\"options\">\n            <table\n                #table\n                role=\"table\"\n                [ngClass]=\"{ 'cax-datatable-table': true, 'cax-datatable-scrollable-table': scrollable, 'cax-datatable-resizable-table': resizableColumns, 'cax-datatable-resizable-table-fit': resizableColumns && columnResizeMode === 'fit' }\"\n                [class]=\"tableStyleClass\"\n                [ngStyle]=\"tableStyle\"\n                [attr.id]=\"id + '-table'\"\n            >\n                <ng-container *ngTemplateOutlet=\"colGroupTemplate; context: { $implicit: scrollerOptions.columns }\"></ng-container>\n                <thead role=\"rowgroup\" #thead class=\"cax-datatable-thead\">\n                    <ng-container *ngTemplateOutlet=\"headerGroupedTemplate || headerTemplate; context: { $implicit: scrollerOptions.columns }\"></ng-container>\n                </thead>\n                <tbody\n                    role=\"rowgroup\"\n                    class=\"cax-datatable-tbody cax-datatable-frozen-tbody\"\n                    *ngIf=\"frozenValue || frozenBodyTemplate\"\n                    [value]=\"frozenValue\"\n                    [frozenRows]=\"true\"\n                    [caxTableBody]=\"scrollerOptions.columns\"\n                    [caxTableBodyTemplate]=\"frozenBodyTemplate\"\n                    [frozen]=\"true\"\n                ></tbody>\n                <tbody\n                    role=\"rowgroup\"\n                    class=\"cax-datatable-tbody\"\n                    [ngClass]=\"scrollerOptions.contentStyleClass\"\n                    [ngStyle]=\"scrollerOptions.contentStyle\"\n                    [value]=\"dataToRender(scrollerOptions.rows)\"\n                    [caxTableBody]=\"scrollerOptions.columns\"\n                    [caxTableBodyTemplate]=\"bodyTemplate\"\n                    [scrollerOptions]=\"scrollerOptions\"\n                ></tbody>\n                <tbody\n                    role=\"rowgroup\"\n                    *ngIf=\"scrollerOptions.spacerStyle\"\n                    [ngStyle]=\"{ height: 'calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px)' }\"\n                    class=\"cax-datatable-scroller-spacer\"\n                ></tbody>\n                <tfoot role=\"rowgroup\" *ngIf=\"footerGroupedTemplate || footerTemplate\" #tfoot class=\"cax-datatable-tfoot\">\n                    <ng-container *ngTemplateOutlet=\"footerGroupedTemplate || footerTemplate; context: { $implicit: scrollerOptions.columns }\"></ng-container>\n                </tfoot>\n            </table>\n        </ng-template>\n    </div>\n\n    <cax-tablePaginator\n        [rows]=\"rows\"\n        [first]=\"first\"\n        [totalRecords]=\"totalRecords\"\n        [rowsPerPageOptions]=\"rowsPerPageOptions\"\n        [showPrevNext]=\"showPrevNext\"\n        [showResultsPerPage]=\"showResultsPerPage\"\n        [alignment]=\"paginatorAlignment\"\n        (onPerPageChange)=\"onPageChange($event)\"\n        (onPrevClick)=\"onPrevClickChange($event)\"\n        (onNextClick)=\"onNextClickChange($event)\"\n        *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')\"\n    ></cax-tablePaginator>\n\n    <div *ngIf=\"summaryTemplate\" class=\"cax-datatable-footer\">\n        <ng-container *ngTemplateOutlet=\"summaryTemplate\"></ng-container>\n    </div>\n\n    <div\n        #resizeHelper\n        class=\"cax-column-resizer-helper\"\n        [ngStyle]=\"{\n                    display: 'none'\n                }\"\n        *ngIf=\"resizableColumns\"\n    ></div>\n    <span\n        #reorderIndicatorUp\n        class=\"cax-datatable-reorder-indicator-up\"\n        [ngStyle]=\"{\n                    display: 'none'\n                }\"\n        *ngIf=\"reorderableColumns\"\n    >\n        <ArrowDownIcon *ngIf=\"!reorderIndicatorUpIconTemplate\" />\n        <ng-template *ngTemplateOutlet=\"reorderIndicatorUpIconTemplate\"></ng-template>\n    </span>\n    <span\n        #reorderIndicatorDown\n        class=\"cax-datatable-reorder-indicator-down\"\n        [ngStyle]=\"{\n                    display: 'none'\n                }\"\n        *ngIf=\"reorderableColumns\"\n    >\n        <ArrowUpIcon *ngIf=\"!reorderIndicatorDownIconTemplate\" />\n        <ng-template *ngTemplateOutlet=\"reorderIndicatorDownIconTemplate\"></ng-template>\n    </span>\n</div>\n", styles: ["@layer cax{.cax-datatable{position:relative}.cax-datatable>.cax-datatable-wrapper{overflow:auto;border-radius:12px}.cax-datatable-wrapper::-webkit-scrollbar{width:10px;height:10px}.cax-datatable-wrapper::-webkit-scrollbar-track{background:var(--neutral-25);border-radius:12px}.cax-datatable-wrapper::-webkit-scrollbar-thumb{background:var(--neutral-100);border-radius:12px}.cax-datatable-table{border-spacing:0px;width:100%}.cax-datatable .cax-sortable-column{-webkit-user-select:none;user-select:none}.cax-datatable .cax-sortable-column .cax-column-title,.cax-datatable .cax-sortable-column .cax-sortable-column-icon,.cax-datatable .cax-sortable-column .cax-sortable-column-badge{vertical-align:middle}.cax-datatable thead th>div.flex{width:100%}.cax-datatable .cax-sortable-column .cax-icon-wrapper{display:inline}.cax-datatable .cax-sortable-column .cax-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}.cax-datatable-hoverable-rows .cax-selectable-row{cursor:pointer}.cax-datatable-scrollable>.cax-datatable-wrapper{position:relative}.cax-datatable-scrollable-table>.cax-datatable-thead{position:sticky;top:0;z-index:2}.cax-datatable-scrollable-table>.cax-datatable-frozen-tbody{position:sticky;z-index:1}.cax-datatable-scrollable-table>.cax-datatable-tfoot{position:sticky;bottom:0;z-index:1}.cax-datatable-scrollable .cax-frozen-column{position:sticky;z-index:20}.cax-datatable-scrollable th.cax-frozen-column{z-index:20;background:var(--neutral-75)}.cax-datatable-scrollable td.cax-frozen-column{z-index:20;background:var(--neutral-25)}.cax-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}.cax-datatable-flex-scrollable>.cax-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}.cax-datatable-scrollable-table>.cax-datatable-tbody>.cax-rowgroucax-header{position:sticky;z-index:2}.cax-datatable-resizable-table>.cax-datatable-thead>tr>th,.cax-datatable-resizable-table>.cax-datatable-tfoot>tr>td,.cax-datatable-resizable-table>.cax-datatable-tbody>tr>td{overflow:hidden;white-space:nowrap}.cax-datatable-resizable-table>.cax-datatable-thead>tr>th.cax-resizable-column:not(.cax-frozen-column){background-clip:padding-box;position:relative}.cax-datatable-resizable-table-fit>.cax-datatable-thead>tr>th.cax-resizable-column:last-child .cax-column-resizer{display:none}.cax-datatable .cax-column-resizer{display:block;position:absolute!important;top:0;right:0;margin:0;width:.5rem;height:100%;padding:0;cursor:col-resize;border:1px solid transparent}.cax-datatable .cax-column-resizer-helper{width:1px;position:absolute;z-index:10;display:none}.cax-datatable .cax-row-editor-init,.cax-datatable .cax-row-editor-save,.cax-datatable .cax-row-editor-cancel,.cax-datatable .cax-row-toggler{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.cax-datatable-reorder-indicator-up,.cax-datatable-reorder-indicator-down{position:absolute}.cax-datatable-reorderablerow-handle,[caxReorderableColumn]{cursor:move}.cax-datatable .cax-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:3}.cax-column-filter-row{display:flex;align-items:center;width:100%}.cax-column-filter-row i{font-size:20px}cax-columnfilter{margin-left:auto;order:3;float:right}.cax-column-filter-menu{display:inline-flex;align-items:center;vertical-align:middle;margin-left:auto;order:3;float:right}.cax-column-filter-menu i{font-size:20px}.cax-column-filter-row cax-columnfilterformelement,cax-columnfilterformelement{flex:1 1 auto;display:contents}.cax-column-filter-menu-button,.cax-column-filter-clear-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}.cax-column-filter-menu-button:disabled{opacity:.5}.cax-column-filter-overlay{position:absolute;top:0;left:0;padding:16px;display:flex;flex-direction:column;gap:8px}.cax-column-filter-menu-container,.cax-column-filter-constraints,.cax-column-filter-constraint{display:flex;flex-direction:column;gap:8px}.cax-fluid{display:block}.cax-fluid .cax-inputtext,.cax-fluid .cax-dropdown,.cax-fluid .cax-inputnumber,.cax-fluid .cax-calendar,.cax-fluid .cax-dropdown .cax-dropdown-label{width:100%}.cax-fluid .cax-checkbox-icon{width:12px!important;height:12px!important}.cax-column-filter-row-items{margin:0;padding:0;list-style:none}.cax-column-filter-row-item{cursor:pointer}.cax-column-filter-add-button,.cax-column-filter-remove-button{justify-content:center}.cax-column-filter-add-button .cax-button-label,.cax-column-filter-remove-button .cax-button-label{flex-grow:0}.cax-column-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid var(--neutral-100)}.cax-column-filter-buttonbar .cax-button{width:auto;flex:1}.cax-datatable-tbody>tr>td>.cax-column-title{display:none}.cax-datatable-scroller-spacer{display:flex}.cax-datatable .cax-scroller .cax-scroller-loading{transform:none!important;min-height:0;position:sticky;top:0;left:0}}.cax-datatable .cax-editable-column .cax-inputtext{width:100%;box-shadow:none;border:0;padding:0;line-height:normal}.cax-datatable.cax-datatable-font-sm .cax-datatable-tbody>tr>td{font-size:12px}.cax-datatable.cax-datatable-font-sm .cax-datatable-tbody>tr>td .cax-inputtext{font-size:12px}.cax-datatable.cax-datatable-font-md .cax-datatable-tbody>tr>td{font-size:14px}.cax-datatable.cax-datatable-font-md .cax-datatable-tbody>tr>td .cax-inputtext{font-size:14px}.cax-datatable.cax-datatable-font-lg .cax-datatable-tbody>tr>td{font-size:16px}.cax-datatable.cax-datatable-font-lg .cax-datatable-tbody>tr>td .cax-inputtext{font-size:16px}.cax-datatable.cax-datatable-font-xl .cax-datatable-tbody>tr>td{font-size:18px}.cax-datatable.cax-datatable-font-xl .cax-datatable-tbody>tr>td .cax-inputtext{font-size:18px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:32px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:40px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:60px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:74px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:36px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:48px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:64px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:80px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:40px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:48px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:72px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:96px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:48px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:60px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:88px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:116px}.cax-cell-highlight-default{border:1px solid var(--primary-500)!important}.cax-cell-highlight-error{border:1px solid var(--error-600)!important}.cax-cell-background-error{background:var(--error-50)}.cax-sort-icon-button{border:0;width:28px;height:28px!important;display:flex;background:transparent;cursor:pointer;padding:0!important;align-items:center;justify-content:center;border-radius:4px}.cax-sort-icon-button i{font-size:20px}.cax-sort-icon-button:disabled{opacity:.5;cursor:context-menu}.cax-sort-icon-button:hover{background-color:var(--neutral-150)}.cax-sort-icon-button.cax-sort-icon-button-active{background-color:var(--primary-75)}cax-sorticon,cax-sortIcon{display:inline-flex;align-items:center;vertical-align:middle;margin-left:4px;order:2;float:right}.cax-column-filter-menu~.cax-column-filter-menu,.cax-column-filter-menu~cax-sorticon,.cax-column-filter-menu~cax-sortIcon,cax-sorticon~.cax-column-filter-menu,cax-sorticon~cax-sorticon,cax-sorticon~cax-sortIcon,cax-sortIcon~.cax-column-filter-menu,cax-sortIcon~cax-sorticon,cax-sortIcon~cax-sortIcon{margin-left:8px;float:right}.cax-table-checkbox-container{display:flex;justify-content:center}cax-cellEditor .cax-inputtextarea{height:100%!important}cax-cellEditor textarea:focus{outline:none!important}cax-cellEditor input:focus{outline:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TablePaginatorModule }, { kind: "component", type: i5.TablePaginatorComponent, selector: "cax-tablePaginator", inputs: ["totalRecords", "rows", "rowsPerPageOptions", "first", "showPrevNext", "showResultsPerPage", "alignment"], outputs: ["onPerPageChange", "onPrevClick", "onNextClick"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i6.Scroller, selector: "cax-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i2.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "component", type: ArrowDownIcon, selector: "ArrowDownIcon" }, { kind: "component", type: ArrowUpIcon, selector: "ArrowUpIcon" }, { kind: "component", type: SpinnerIcon, selector: "SpinnerIcon" }, { kind: "component", type: TableBody, selector: "[caxTableBody]", inputs: ["caxTableBody", "caxTableBodyTemplate", "value", "frozen", "frozenRows", "scrollerOptions"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Table, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Table, decorators: [{
             type: Component,
-            args: [{ selector: 'cax-table', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, PaginatorModule, ScrollerModule, ArrowDownIcon, ArrowUpIcon, SpinnerIcon, TableBody], host: {
+            args: [{ selector: 'cax-table', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, TablePaginatorModule, ScrollerModule, ArrowDownIcon, ArrowUpIcon, SpinnerIcon, TableBody], host: {
                         class: 'cax-element'
-                    }, template: "<div #container [ngStyle]=\"style\" [class]=\"styleClass\" [ngClass]=\"getTableClasses()\" [attr.id]=\"id\">\r\n    <div class=\"cax-datatable-loading-overlay cax-component-overlay\" *ngIf=\"loading && showLoader\">\r\n        <i *ngIf=\"loadingIcon\" [class]=\"'cax-datatable-loading-icon ' + loadingIcon\"></i>\r\n        <ng-container *ngIf=\"!loadingIcon\">\r\n            <SpinnerIcon *ngIf=\"!loadingIconTemplate\" [spin]=\"true\" [styleClass]=\"'cax-datatable-loading-icon'\" />\r\n            <span *ngIf=\"loadingIconTemplate\" class=\"cax-datatable-loading-icon\">\r\n                <ng-template *ngTemplateOutlet=\"loadingIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-container>\r\n    </div>\r\n    <div *ngIf=\"captionTemplate\" class=\"cax-datatable-header\">\r\n        <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\r\n    </div>\r\n    <cax-paginator\r\n        [rows]=\"rows\"\r\n        [first]=\"first\"\r\n        [totalRecords]=\"totalRecords\"\r\n        [pageLinkSize]=\"pageLinks\"\r\n        [alwaysShow]=\"alwaysShowPaginator\"\r\n        (onPageChange)=\"onPageChange($event)\"\r\n        [rowsPerPageOptions]=\"rowsPerPageOptions\"\r\n        *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')\"\r\n        [templateLeft]=\"paginatorLeftTemplate\"\r\n        [templateRight]=\"paginatorRightTemplate\"\r\n        [dropdownAppendTo]=\"paginatorDropdownAppendTo\"\r\n        [dropdownScrollHeight]=\"paginatorDropdownScrollHeight\"\r\n        [currentPageReportTemplate]=\"currentPageReportTemplate\"\r\n        [showFirstLastIcon]=\"showFirstLastIcon\"\r\n        [dropdownItemTemplate]=\"paginatorDropdownItemTemplate\"\r\n        [showCurrentPageReport]=\"showCurrentPageReport\"\r\n        [showJumpToPageDropdown]=\"showJumpToPageDropdown\"\r\n        [showJumpToPageInput]=\"showJumpToPageInput\"\r\n        [showPageLinks]=\"showPageLinks\"\r\n        [styleClass]=\"getPaginatorStyleClasses('cax-paginator-top')\"\r\n        [locale]=\"paginatorLocale\"\r\n    >\r\n        <ng-template caxTemplate=\"dropdownicon\" *ngIf=\"paginatorDropdownIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorDropdownIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"firstpagelinkicon\" *ngIf=\"paginatorFirstPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorFirstPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"previouspagelinkicon\" *ngIf=\"paginatorPreviousPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorPreviousPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"lastpagelinkicon\" *ngIf=\"paginatorLastPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorLastPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"nextpagelinkicon\" *ngIf=\"paginatorNextPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorNextPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n    </cax-paginator>\r\n\r\n    <div #wrapper class=\"cax-datatable-wrapper\" [ngStyle]=\"{ maxHeight: virtualScroll ? '' : scrollHeight }\">\r\n        <cax-scroller\r\n            #scroller\r\n            *ngIf=\"virtualScroll\"\r\n            [items]=\"processedData\"\r\n            [columns]=\"columns\"\r\n            [style]=\"{ height: scrollHeight !== 'flex' ? scrollHeight : undefined }\"\r\n            [scrollHeight]=\"scrollHeight !== 'flex' ? undefined : '100%'\"\r\n            [itemSize]=\"virtualScrollItemSize || _virtualRowHeight\"\r\n            [step]=\"rows\"\r\n            [delay]=\"lazy ? virtualScrollDelay : 0\"\r\n            [inline]=\"true\"\r\n            [autoSize]=\"true\"\r\n            [lazy]=\"lazy\"\r\n            (onLazyLoad)=\"onLazyItemLoad($event)\"\r\n            [loaderDisabled]=\"true\"\r\n            [showSpacer]=\"false\"\r\n            [showLoader]=\"loadingBodyTemplate\"\r\n            [options]=\"virtualScrollOptions\"\r\n        >\r\n            <ng-template caxTemplate=\"content\" let-items let-scrollerOptions=\"options\">\r\n                <ng-container *ngTemplateOutlet=\"buildInTable; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\r\n            </ng-template>\r\n        </cax-scroller>\r\n        <ng-container *ngIf=\"!virtualScroll\">\r\n            <ng-container *ngTemplateOutlet=\"buildInTable; context: { $implicit: processedData, options: { columns } }\"></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #buildInTable let-items let-scrollerOptions=\"options\">\r\n            <table\r\n                #table\r\n                role=\"table\"\r\n                [ngClass]=\"{ 'cax-datatable-table': true, 'cax-datatable-scrollable-table': scrollable, 'cax-datatable-resizable-table': resizableColumns, 'cax-datatable-resizable-table-fit': resizableColumns && columnResizeMode === 'fit' }\"\r\n                [class]=\"tableStyleClass\"\r\n                [ngStyle]=\"tableStyle\"\r\n                [attr.id]=\"id + '-table'\"\r\n            >\r\n                <ng-container *ngTemplateOutlet=\"colGroupTemplate; context: { $implicit: scrollerOptions.columns }\"></ng-container>\r\n                <thead role=\"rowgroup\" #thead class=\"cax-datatable-thead\">\r\n                    <ng-container *ngTemplateOutlet=\"headerGroupedTemplate || headerTemplate; context: { $implicit: scrollerOptions.columns }\"></ng-container>\r\n                </thead>\r\n                <tbody\r\n                    role=\"rowgroup\"\r\n                    class=\"cax-datatable-tbody cax-datatable-frozen-tbody\"\r\n                    *ngIf=\"frozenValue || frozenBodyTemplate\"\r\n                    [value]=\"frozenValue\"\r\n                    [frozenRows]=\"true\"\r\n                    [caxTableBody]=\"scrollerOptions.columns\"\r\n                    [caxTableBodyTemplate]=\"frozenBodyTemplate\"\r\n                    [frozen]=\"true\"\r\n                ></tbody>\r\n                <tbody\r\n                    role=\"rowgroup\"\r\n                    class=\"cax-datatable-tbody\"\r\n                    [ngClass]=\"scrollerOptions.contentStyleClass\"\r\n                    [ngStyle]=\"scrollerOptions.contentStyle\"\r\n                    [value]=\"dataToRender(scrollerOptions.rows)\"\r\n                    [caxTableBody]=\"scrollerOptions.columns\"\r\n                    [caxTableBodyTemplate]=\"bodyTemplate\"\r\n                    [scrollerOptions]=\"scrollerOptions\"\r\n                ></tbody>\r\n                <tbody\r\n                    role=\"rowgroup\"\r\n                    *ngIf=\"scrollerOptions.spacerStyle\"\r\n                    [ngStyle]=\"{ height: 'calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px)' }\"\r\n                    class=\"cax-datatable-scroller-spacer\"\r\n                ></tbody>\r\n                <tfoot role=\"rowgroup\" *ngIf=\"footerGroupedTemplate || footerTemplate\" #tfoot class=\"cax-datatable-tfoot\">\r\n                    <ng-container *ngTemplateOutlet=\"footerGroupedTemplate || footerTemplate; context: { $implicit: scrollerOptions.columns }\"></ng-container>\r\n                </tfoot>\r\n            </table>\r\n        </ng-template>\r\n    </div>\r\n\r\n    <cax-paginator\r\n        [rows]=\"rows\"\r\n        [first]=\"first\"\r\n        [totalRecords]=\"totalRecords\"\r\n        [pageLinkSize]=\"pageLinks\"\r\n        [alwaysShow]=\"alwaysShowPaginator\"\r\n        (onPageChange)=\"onPageChange($event)\"\r\n        [rowsPerPageOptions]=\"rowsPerPageOptions\"\r\n        *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')\"\r\n        [templateLeft]=\"paginatorLeftTemplate\"\r\n        [templateRight]=\"paginatorRightTemplate\"\r\n        [dropdownAppendTo]=\"paginatorDropdownAppendTo\"\r\n        [dropdownScrollHeight]=\"paginatorDropdownScrollHeight\"\r\n        [currentPageReportTemplate]=\"currentPageReportTemplate\"\r\n        [showFirstLastIcon]=\"showFirstLastIcon\"\r\n        [dropdownItemTemplate]=\"paginatorDropdownItemTemplate\"\r\n        [showCurrentPageReport]=\"showCurrentPageReport\"\r\n        [showJumpToPageDropdown]=\"showJumpToPageDropdown\"\r\n        [showJumpToPageInput]=\"showJumpToPageInput\"\r\n        [showPageLinks]=\"showPageLinks\"\r\n        [styleClass]=\"getPaginatorStyleClasses('cax-paginator-bottom')\"\r\n        [locale]=\"paginatorLocale\"\r\n    >\r\n        <ng-template caxTemplate=\"dropdownicon\" *ngIf=\"paginatorDropdownIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorDropdownIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"firstpagelinkicon\" *ngIf=\"paginatorFirstPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorFirstPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"previouspagelinkicon\" *ngIf=\"paginatorPreviousPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorPreviousPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"lastpagelinkicon\" *ngIf=\"paginatorLastPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorLastPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template caxTemplate=\"nextpagelinkicon\" *ngIf=\"paginatorNextPageLinkIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"paginatorNextPageLinkIconTemplate\"></ng-container>\r\n        </ng-template>\r\n    </cax-paginator>\r\n\r\n    <div *ngIf=\"summaryTemplate\" class=\"cax-datatable-footer\">\r\n        <ng-container *ngTemplateOutlet=\"summaryTemplate\"></ng-container>\r\n    </div>\r\n\r\n    <div\r\n        #resizeHelper\r\n        class=\"cax-column-resizer-helper\"\r\n        [ngStyle]=\"{\r\n                    display: 'none'\r\n                }\"\r\n        *ngIf=\"resizableColumns\"\r\n    ></div>\r\n    <span\r\n        #reorderIndicatorUp\r\n        class=\"cax-datatable-reorder-indicator-up\"\r\n        [ngStyle]=\"{\r\n                    display: 'none'\r\n                }\"\r\n        *ngIf=\"reorderableColumns\"\r\n    >\r\n        <ArrowDownIcon *ngIf=\"!reorderIndicatorUpIconTemplate\" />\r\n        <ng-template *ngTemplateOutlet=\"reorderIndicatorUpIconTemplate\"></ng-template>\r\n    </span>\r\n    <span\r\n        #reorderIndicatorDown\r\n        class=\"cax-datatable-reorder-indicator-down\"\r\n        [ngStyle]=\"{\r\n                    display: 'none'\r\n                }\"\r\n        *ngIf=\"reorderableColumns\"\r\n    >\r\n        <ArrowUpIcon *ngIf=\"!reorderIndicatorDownIconTemplate\" />\r\n        <ng-template *ngTemplateOutlet=\"reorderIndicatorDownIconTemplate\"></ng-template>\r\n    </span>\r\n</div>\r\n", styles: ["@layer cax{.cax-datatable{position:relative}.cax-datatable>.cax-datatable-wrapper{overflow:auto;border-radius:12px}.cax-datatable-wrapper::-webkit-scrollbar{width:8px;height:8px}.cax-datatable-wrapper::-webkit-scrollbar-track{background:#f0f0f0;border-radius:10px}.cax-datatable-wrapper::-webkit-scrollbar-thumb{background:#888;border-radius:10px}.cax-datatable-table{border-spacing:0px;width:100%}.cax-datatable .cax-sortable-column{-webkit-user-select:none;user-select:none}.cax-datatable .cax-sortable-column .cax-column-title,.cax-datatable .cax-sortable-column .cax-sortable-column-icon,.cax-datatable .cax-sortable-column .cax-sortable-column-badge{vertical-align:middle}.cax-datatable .cax-sortable-column .cax-icon-wrapper{display:inline}.cax-datatable .cax-sortable-column .cax-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}.cax-datatable-hoverable-rows .cax-selectable-row{cursor:pointer}.cax-datatable-scrollable>.cax-datatable-wrapper{position:relative}.cax-datatable-scrollable-table>.cax-datatable-thead{position:sticky;top:0;z-index:2}.cax-datatable-scrollable-table>.cax-datatable-frozen-tbody{position:sticky;z-index:1}.cax-datatable-scrollable-table>.cax-datatable-tfoot{position:sticky;bottom:0;z-index:1}.cax-datatable-scrollable .cax-frozen-column{position:sticky;z-index:1}.cax-datatable-scrollable th.cax-frozen-column{z-index:2;background:var(--neutral-75)}.cax-datatable-scrollable td.cax-frozen-column{z-index:1;background:var(--neutral-25)}.cax-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}.cax-datatable-flex-scrollable>.cax-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}.cax-datatable-scrollable-table>.cax-datatable-tbody>.cax-rowgroucax-header{position:sticky;z-index:2}.cax-datatable-resizable-table>.cax-datatable-thead>tr>th,.cax-datatable-resizable-table>.cax-datatable-tfoot>tr>td,.cax-datatable-resizable-table>.cax-datatable-tbody>tr>td{overflow:hidden;white-space:nowrap}.cax-datatable-resizable-table>.cax-datatable-thead>tr>th.cax-resizable-column:not(.cax-frozen-column){background-clip:padding-box;position:relative}.cax-datatable-resizable-table-fit>.cax-datatable-thead>tr>th.cax-resizable-column:last-child .cax-column-resizer{display:none}.cax-datatable .cax-column-resizer{display:block;position:absolute!important;top:0;right:0;margin:0;width:.5rem;height:100%;padding:0;cursor:col-resize;border:1px solid transparent}.cax-datatable .cax-column-resizer-helper{width:1px;position:absolute;z-index:10;display:none}.cax-datatable .cax-row-editor-init,.cax-datatable .cax-row-editor-save,.cax-datatable .cax-row-editor-cancel,.cax-datatable .cax-row-toggler{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.cax-datatable-reorder-indicator-up,.cax-datatable-reorder-indicator-down{position:absolute}.cax-datatable-reorderablerow-handle,[caxReorderableColumn]{cursor:move}.cax-datatable .cax-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:3}.cax-column-filter-row{display:flex;align-items:center;width:100%}.cax-column-filter-row i{font-size:20px}.cax-column-filter-menu,.cax-column-filter-custom{display:inline-flex;position:relative;float:right;top:-3px;margin-left:4px}.cax-column-filter-menu i,.cax-column-filter-custom i{font-size:20px}.cax-column-filter-custom-container{padding:16px;display:flex;gap:16px;flex-direction:column}.cax-column-filter-custom-container .cax-column-filter-custom-buttons{display:flex;gap:12px}.cax-column-filter-custom-container .cax-column-filter-custom-buttons cax-button{flex:1}.cax-column-filter-overlay-custom{width:248px}.cax-column-filter-row cax-columnfilterformelement{flex:1 1 auto;width:1%}.cax-column-filter-menu-button,.cax-column-filter-clear-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}.cax-column-filter-menu-button:disabled{opacity:.5}.cax-column-filter-overlay{position:absolute;top:0;left:0}.cax-column-filter-row-items{margin:0;padding:0;list-style:none}.cax-column-filter-row-item{cursor:pointer}.cax-column-filter-add-button,.cax-column-filter-remove-button{justify-content:center}.cax-column-filter-add-button .cax-button-label,.cax-column-filter-remove-button .cax-button-label{flex-grow:0}.cax-column-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.cax-column-filter-buttonbar .cax-button{width:auto}.cax-datatable-tbody>tr>td>.cax-column-title{display:none}.cax-datatable-scroller-spacer{display:flex}.cax-datatable .cax-scroller .cax-scroller-loading{transform:none!important;min-height:0;position:sticky;top:0;left:0}}.cax-datatable .cax-editable-column .cax-inputtext{width:100%;box-shadow:none;border:0;padding:0;line-height:normal}.cax-datatable.cax-datatable-font-sm .cax-datatable-tbody>tr>td{font-size:12px}.cax-datatable.cax-datatable-font-sm .cax-datatable-tbody>tr>td .cax-inputtext{font-size:12px}.cax-datatable.cax-datatable-font-sm .cax-datatable-tbody>tr>td cax-tablecheckbox .cax-checkbox .cax-checkbox-box{width:16px;height:16px}.cax-datatable.cax-datatable-font-md .cax-datatable-tbody>tr>td{font-size:14px}.cax-datatable.cax-datatable-font-md .cax-datatable-tbody>tr>td .cax-inputtext{font-size:14px}.cax-datatable.cax-datatable-font-md .cax-datatable-tbody>tr>td cax-tablecheckbox .cax-checkbox .cax-checkbox-box{width:18px;height:18px}.cax-datatable.cax-datatable-font-lg .cax-datatable-tbody>tr>td{font-size:16px}.cax-datatable.cax-datatable-font-lg .cax-datatable-tbody>tr>td .cax-inputtext{font-size:16px}.cax-datatable.cax-datatable-font-lg .cax-datatable-tbody>tr>td cax-tablecheckbox.cax-checkbox .cax-checkbox-box{width:20px;height:20px}.cax-datatable.cax-datatable-font-xl .cax-datatable-tbody>tr>td{font-size:18px}.cax-datatable.cax-datatable-font-xl .cax-datatable-tbody>tr>td .cax-inputtext{font-size:18px}.cax-datatable.cax-datatable-font-xl .cax-datatable-tbody>tr>td cax-tablecheckbox.cax-checkbox .cax-checkbox-box{width:22px;height:22px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:42px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:56px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:72px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:88px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:44px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:60px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:78px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:96px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:54px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:66px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:86px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:108px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:56px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:70px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:94px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:116px}.cax-cell-highlight-default{border:1px solid var(--primary-500)!important}.cax-cell-highlight-error{border:1px solid var(--error-600)!important}.cax-cell-background-error{background:var(--error-50)}.cax-sort-icon-button{border:0;width:28px;height:28px!important;display:flex;background:transparent;cursor:pointer;padding:0!important;align-items:center;justify-content:center;border-radius:6px}.cax-sort-icon-button i{font-size:20px}.cax-sort-icon-button:disabled{opacity:.5;cursor:context-menu}.cax-sort-icon-button:hover{background-color:var(--primary-100)}cax-sorticon{display:inline-flex;position:relative;float:right;top:-3px;margin-left:4px}\n"] }]
+                    }, template: "<div #container [ngStyle]=\"style\" [class]=\"styleClass\" [ngClass]=\"getTableClasses()\" [attr.id]=\"id\">\n    <div class=\"cax-datatable-loading-overlay cax-component-overlay\" *ngIf=\"loading && showLoader\">\n        <i *ngIf=\"loadingIcon\" [class]=\"'cax-datatable-loading-icon ' + loadingIcon\"></i>\n        <ng-container *ngIf=\"!loadingIcon\">\n            <SpinnerIcon *ngIf=\"!loadingIconTemplate\" [spin]=\"true\" [styleClass]=\"'cax-datatable-loading-icon'\" />\n            <span *ngIf=\"loadingIconTemplate\" class=\"cax-datatable-loading-icon\">\n                <ng-template *ngTemplateOutlet=\"loadingIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n    </div>\n    <div *ngIf=\"captionTemplate\" class=\"cax-datatable-header\">\n        <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n    </div>\n    <cax-tablePaginator\n        [rows]=\"rows\"\n        [first]=\"first\"\n        [totalRecords]=\"totalRecords\"\n        [rowsPerPageOptions]=\"rowsPerPageOptions\"\n        [showPrevNext]=\"showPrevNext\"\n        [showResultsPerPage]=\"showResultsPerPage\"\n        [alignment]=\"paginatorAlignment\"\n        (onPerPageChange)=\"onPageChange($event)\"\n        (onPrevClick)=\"onPrevClickChange($event)\"\n        (onNextClick)=\"onNextClickChange($event)\"\n        *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')\"\n    ></cax-tablePaginator>\n\n    <div #wrapper class=\"cax-datatable-wrapper\" [ngStyle]=\"{ maxHeight: virtualScroll ? '' : scrollHeight }\">\n        <cax-scroller\n            #scroller\n            *ngIf=\"virtualScroll\"\n            [items]=\"processedData\"\n            [columns]=\"columns\"\n            [style]=\"{ height: scrollHeight !== 'flex' ? scrollHeight : undefined }\"\n            [scrollHeight]=\"scrollHeight !== 'flex' ? undefined : '100%'\"\n            [itemSize]=\"virtualScrollItemSize || _virtualRowHeight\"\n            [step]=\"rows\"\n            [delay]=\"lazy ? virtualScrollDelay : 0\"\n            [inline]=\"true\"\n            [autoSize]=\"true\"\n            [lazy]=\"lazy\"\n            (onLazyLoad)=\"onLazyItemLoad($event)\"\n            [loaderDisabled]=\"true\"\n            [showSpacer]=\"false\"\n            [showLoader]=\"loadingBodyTemplate\"\n            [options]=\"virtualScrollOptions\"\n        >\n            <ng-template caxTemplate=\"content\" let-items let-scrollerOptions=\"options\">\n                <ng-container *ngTemplateOutlet=\"buildInTable; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\n            </ng-template>\n        </cax-scroller>\n        <ng-container *ngIf=\"!virtualScroll\">\n            <ng-container *ngTemplateOutlet=\"buildInTable; context: { $implicit: processedData, options: { columns } }\"></ng-container>\n        </ng-container>\n\n        <ng-template #buildInTable let-items let-scrollerOptions=\"options\">\n            <table\n                #table\n                role=\"table\"\n                [ngClass]=\"{ 'cax-datatable-table': true, 'cax-datatable-scrollable-table': scrollable, 'cax-datatable-resizable-table': resizableColumns, 'cax-datatable-resizable-table-fit': resizableColumns && columnResizeMode === 'fit' }\"\n                [class]=\"tableStyleClass\"\n                [ngStyle]=\"tableStyle\"\n                [attr.id]=\"id + '-table'\"\n            >\n                <ng-container *ngTemplateOutlet=\"colGroupTemplate; context: { $implicit: scrollerOptions.columns }\"></ng-container>\n                <thead role=\"rowgroup\" #thead class=\"cax-datatable-thead\">\n                    <ng-container *ngTemplateOutlet=\"headerGroupedTemplate || headerTemplate; context: { $implicit: scrollerOptions.columns }\"></ng-container>\n                </thead>\n                <tbody\n                    role=\"rowgroup\"\n                    class=\"cax-datatable-tbody cax-datatable-frozen-tbody\"\n                    *ngIf=\"frozenValue || frozenBodyTemplate\"\n                    [value]=\"frozenValue\"\n                    [frozenRows]=\"true\"\n                    [caxTableBody]=\"scrollerOptions.columns\"\n                    [caxTableBodyTemplate]=\"frozenBodyTemplate\"\n                    [frozen]=\"true\"\n                ></tbody>\n                <tbody\n                    role=\"rowgroup\"\n                    class=\"cax-datatable-tbody\"\n                    [ngClass]=\"scrollerOptions.contentStyleClass\"\n                    [ngStyle]=\"scrollerOptions.contentStyle\"\n                    [value]=\"dataToRender(scrollerOptions.rows)\"\n                    [caxTableBody]=\"scrollerOptions.columns\"\n                    [caxTableBodyTemplate]=\"bodyTemplate\"\n                    [scrollerOptions]=\"scrollerOptions\"\n                ></tbody>\n                <tbody\n                    role=\"rowgroup\"\n                    *ngIf=\"scrollerOptions.spacerStyle\"\n                    [ngStyle]=\"{ height: 'calc(' + scrollerOptions.spacerStyle.height + ' - ' + scrollerOptions.rows.length * scrollerOptions.itemSize + 'px)' }\"\n                    class=\"cax-datatable-scroller-spacer\"\n                ></tbody>\n                <tfoot role=\"rowgroup\" *ngIf=\"footerGroupedTemplate || footerTemplate\" #tfoot class=\"cax-datatable-tfoot\">\n                    <ng-container *ngTemplateOutlet=\"footerGroupedTemplate || footerTemplate; context: { $implicit: scrollerOptions.columns }\"></ng-container>\n                </tfoot>\n            </table>\n        </ng-template>\n    </div>\n\n    <cax-tablePaginator\n        [rows]=\"rows\"\n        [first]=\"first\"\n        [totalRecords]=\"totalRecords\"\n        [rowsPerPageOptions]=\"rowsPerPageOptions\"\n        [showPrevNext]=\"showPrevNext\"\n        [showResultsPerPage]=\"showResultsPerPage\"\n        [alignment]=\"paginatorAlignment\"\n        (onPerPageChange)=\"onPageChange($event)\"\n        (onPrevClick)=\"onPrevClickChange($event)\"\n        (onNextClick)=\"onNextClickChange($event)\"\n        *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')\"\n    ></cax-tablePaginator>\n\n    <div *ngIf=\"summaryTemplate\" class=\"cax-datatable-footer\">\n        <ng-container *ngTemplateOutlet=\"summaryTemplate\"></ng-container>\n    </div>\n\n    <div\n        #resizeHelper\n        class=\"cax-column-resizer-helper\"\n        [ngStyle]=\"{\n                    display: 'none'\n                }\"\n        *ngIf=\"resizableColumns\"\n    ></div>\n    <span\n        #reorderIndicatorUp\n        class=\"cax-datatable-reorder-indicator-up\"\n        [ngStyle]=\"{\n                    display: 'none'\n                }\"\n        *ngIf=\"reorderableColumns\"\n    >\n        <ArrowDownIcon *ngIf=\"!reorderIndicatorUpIconTemplate\" />\n        <ng-template *ngTemplateOutlet=\"reorderIndicatorUpIconTemplate\"></ng-template>\n    </span>\n    <span\n        #reorderIndicatorDown\n        class=\"cax-datatable-reorder-indicator-down\"\n        [ngStyle]=\"{\n                    display: 'none'\n                }\"\n        *ngIf=\"reorderableColumns\"\n    >\n        <ArrowUpIcon *ngIf=\"!reorderIndicatorDownIconTemplate\" />\n        <ng-template *ngTemplateOutlet=\"reorderIndicatorDownIconTemplate\"></ng-template>\n    </span>\n</div>\n", styles: ["@layer cax{.cax-datatable{position:relative}.cax-datatable>.cax-datatable-wrapper{overflow:auto;border-radius:12px}.cax-datatable-wrapper::-webkit-scrollbar{width:10px;height:10px}.cax-datatable-wrapper::-webkit-scrollbar-track{background:var(--neutral-25);border-radius:12px}.cax-datatable-wrapper::-webkit-scrollbar-thumb{background:var(--neutral-100);border-radius:12px}.cax-datatable-table{border-spacing:0px;width:100%}.cax-datatable .cax-sortable-column{-webkit-user-select:none;user-select:none}.cax-datatable .cax-sortable-column .cax-column-title,.cax-datatable .cax-sortable-column .cax-sortable-column-icon,.cax-datatable .cax-sortable-column .cax-sortable-column-badge{vertical-align:middle}.cax-datatable thead th>div.flex{width:100%}.cax-datatable .cax-sortable-column .cax-icon-wrapper{display:inline}.cax-datatable .cax-sortable-column .cax-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}.cax-datatable-hoverable-rows .cax-selectable-row{cursor:pointer}.cax-datatable-scrollable>.cax-datatable-wrapper{position:relative}.cax-datatable-scrollable-table>.cax-datatable-thead{position:sticky;top:0;z-index:2}.cax-datatable-scrollable-table>.cax-datatable-frozen-tbody{position:sticky;z-index:1}.cax-datatable-scrollable-table>.cax-datatable-tfoot{position:sticky;bottom:0;z-index:1}.cax-datatable-scrollable .cax-frozen-column{position:sticky;z-index:20}.cax-datatable-scrollable th.cax-frozen-column{z-index:20;background:var(--neutral-75)}.cax-datatable-scrollable td.cax-frozen-column{z-index:20;background:var(--neutral-25)}.cax-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}.cax-datatable-flex-scrollable>.cax-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}.cax-datatable-scrollable-table>.cax-datatable-tbody>.cax-rowgroucax-header{position:sticky;z-index:2}.cax-datatable-resizable-table>.cax-datatable-thead>tr>th,.cax-datatable-resizable-table>.cax-datatable-tfoot>tr>td,.cax-datatable-resizable-table>.cax-datatable-tbody>tr>td{overflow:hidden;white-space:nowrap}.cax-datatable-resizable-table>.cax-datatable-thead>tr>th.cax-resizable-column:not(.cax-frozen-column){background-clip:padding-box;position:relative}.cax-datatable-resizable-table-fit>.cax-datatable-thead>tr>th.cax-resizable-column:last-child .cax-column-resizer{display:none}.cax-datatable .cax-column-resizer{display:block;position:absolute!important;top:0;right:0;margin:0;width:.5rem;height:100%;padding:0;cursor:col-resize;border:1px solid transparent}.cax-datatable .cax-column-resizer-helper{width:1px;position:absolute;z-index:10;display:none}.cax-datatable .cax-row-editor-init,.cax-datatable .cax-row-editor-save,.cax-datatable .cax-row-editor-cancel,.cax-datatable .cax-row-toggler{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.cax-datatable-reorder-indicator-up,.cax-datatable-reorder-indicator-down{position:absolute}.cax-datatable-reorderablerow-handle,[caxReorderableColumn]{cursor:move}.cax-datatable .cax-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:3}.cax-column-filter-row{display:flex;align-items:center;width:100%}.cax-column-filter-row i{font-size:20px}cax-columnfilter{margin-left:auto;order:3;float:right}.cax-column-filter-menu{display:inline-flex;align-items:center;vertical-align:middle;margin-left:auto;order:3;float:right}.cax-column-filter-menu i{font-size:20px}.cax-column-filter-row cax-columnfilterformelement,cax-columnfilterformelement{flex:1 1 auto;display:contents}.cax-column-filter-menu-button,.cax-column-filter-clear-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}.cax-column-filter-menu-button:disabled{opacity:.5}.cax-column-filter-overlay{position:absolute;top:0;left:0;padding:16px;display:flex;flex-direction:column;gap:8px}.cax-column-filter-menu-container,.cax-column-filter-constraints,.cax-column-filter-constraint{display:flex;flex-direction:column;gap:8px}.cax-fluid{display:block}.cax-fluid .cax-inputtext,.cax-fluid .cax-dropdown,.cax-fluid .cax-inputnumber,.cax-fluid .cax-calendar,.cax-fluid .cax-dropdown .cax-dropdown-label{width:100%}.cax-fluid .cax-checkbox-icon{width:12px!important;height:12px!important}.cax-column-filter-row-items{margin:0;padding:0;list-style:none}.cax-column-filter-row-item{cursor:pointer}.cax-column-filter-add-button,.cax-column-filter-remove-button{justify-content:center}.cax-column-filter-add-button .cax-button-label,.cax-column-filter-remove-button .cax-button-label{flex-grow:0}.cax-column-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid var(--neutral-100)}.cax-column-filter-buttonbar .cax-button{width:auto;flex:1}.cax-datatable-tbody>tr>td>.cax-column-title{display:none}.cax-datatable-scroller-spacer{display:flex}.cax-datatable .cax-scroller .cax-scroller-loading{transform:none!important;min-height:0;position:sticky;top:0;left:0}}.cax-datatable .cax-editable-column .cax-inputtext{width:100%;box-shadow:none;border:0;padding:0;line-height:normal}.cax-datatable.cax-datatable-font-sm .cax-datatable-tbody>tr>td{font-size:12px}.cax-datatable.cax-datatable-font-sm .cax-datatable-tbody>tr>td .cax-inputtext{font-size:12px}.cax-datatable.cax-datatable-font-md .cax-datatable-tbody>tr>td{font-size:14px}.cax-datatable.cax-datatable-font-md .cax-datatable-tbody>tr>td .cax-inputtext{font-size:14px}.cax-datatable.cax-datatable-font-lg .cax-datatable-tbody>tr>td{font-size:16px}.cax-datatable.cax-datatable-font-lg .cax-datatable-tbody>tr>td .cax-inputtext{font-size:16px}.cax-datatable.cax-datatable-font-xl .cax-datatable-tbody>tr>td{font-size:18px}.cax-datatable.cax-datatable-font-xl .cax-datatable-tbody>tr>td .cax-inputtext{font-size:18px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:32px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:40px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:60px}.cax-datatable.cax-datatable-font-sm.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:74px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:36px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:48px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:64px}.cax-datatable.cax-datatable-font-md.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:80px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:40px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:48px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:72px}.cax-datatable.cax-datatable-font-lg.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:96px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-sm .cax-datatable-tbody>tr>td{height:48px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-md .cax-datatable-tbody>tr>td{height:60px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-lg .cax-datatable-tbody>tr>td{height:88px}.cax-datatable.cax-datatable-font-xl.cax-datatable-row-xl .cax-datatable-tbody>tr>td{height:116px}.cax-cell-highlight-default{border:1px solid var(--primary-500)!important}.cax-cell-highlight-error{border:1px solid var(--error-600)!important}.cax-cell-background-error{background:var(--error-50)}.cax-sort-icon-button{border:0;width:28px;height:28px!important;display:flex;background:transparent;cursor:pointer;padding:0!important;align-items:center;justify-content:center;border-radius:4px}.cax-sort-icon-button i{font-size:20px}.cax-sort-icon-button:disabled{opacity:.5;cursor:context-menu}.cax-sort-icon-button:hover{background-color:var(--neutral-150)}.cax-sort-icon-button.cax-sort-icon-button-active{background-color:var(--primary-75)}cax-sorticon,cax-sortIcon{display:inline-flex;align-items:center;vertical-align:middle;margin-left:4px;order:2;float:right}.cax-column-filter-menu~.cax-column-filter-menu,.cax-column-filter-menu~cax-sorticon,.cax-column-filter-menu~cax-sortIcon,cax-sorticon~.cax-column-filter-menu,cax-sorticon~cax-sorticon,cax-sorticon~cax-sortIcon,cax-sortIcon~.cax-column-filter-menu,cax-sortIcon~cax-sorticon,cax-sortIcon~cax-sortIcon{margin-left:8px;float:right}.cax-table-checkbox-container{display:flex;justify-content:center}cax-cellEditor .cax-inputtextarea{height:100%!important}cax-cellEditor textarea:focus{outline:none!important}cax-cellEditor input:focus{outline:none!important}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -2737,39 +2718,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }], paginator: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], pageLinks: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
             }], rowsPerPageOptions: [{
                 type: Input
-            }], alwaysShowPaginator: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], paginatorPosition: [{
                 type: Input
-            }], paginatorStyleClass: [{
-                type: Input
-            }], paginatorDropdownAppendTo: [{
-                type: Input
-            }], paginatorDropdownScrollHeight: [{
-                type: Input
-            }], currentPageReportTemplate: [{
-                type: Input
-            }], showCurrentPageReport: [{
+            }], showPrevNext: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], showJumpToPageDropdown: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], showJumpToPageInput: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], showFirstLastIcon: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], showPageLinks: [{
+            }], showResultsPerPage: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], paginatorAlignment: [{
+                type: Input
             }], defaultSortOrder: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -2934,6 +2894,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 type: Output
             }], onPage: [{
                 type: Output
+            }], onPerPageChange: [{
+                type: Output
+            }], onPrevClick: [{
+                type: Output
+            }], onNextClick: [{
+                type: Output
             }], onSort: [{
                 type: Output
             }], onFilter: [{
@@ -3283,10 +3249,10 @@ class EditableColumn {
             this.dt.overlaySubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: EditableColumn, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: EditableColumn, isStandalone: true, selector: "[caxEditableColumn]", inputs: { data: ["caxEditableColumn", "data"], field: ["caxEditableColumnField", "field"], rowIndex: ["caxEditableColumnRowIndex", "rowIndex"], caxEditableColumnDisabled: ["caxEditableColumnDisabled", "caxEditableColumnDisabled", booleanAttribute], pFocusCellSelector: "pFocusCellSelector" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKeyDown($event)", "keydown.tab": "onShiftKeyDown($event)", "keydown.escape": "onEscapeKeyDown($event)", "keydown.shift.tab": "onShiftKeyDown($event)", "keydown.meta.tab": "onShiftKeyDown($event)", "keydown.arrowdown": "onArrowDown($event)", "keydown.arrowup": "onArrowUp($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)" }, classAttribute: "cax-element" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: EditableColumn, deps: [{ token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: EditableColumn, isStandalone: true, selector: "[caxEditableColumn]", inputs: { data: ["caxEditableColumn", "data"], field: ["caxEditableColumnField", "field"], rowIndex: ["caxEditableColumnRowIndex", "rowIndex"], caxEditableColumnDisabled: ["caxEditableColumnDisabled", "caxEditableColumnDisabled", booleanAttribute], pFocusCellSelector: "pFocusCellSelector" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKeyDown($event)", "keydown.tab": "onShiftKeyDown($event)", "keydown.escape": "onEscapeKeyDown($event)", "keydown.shift.tab": "onShiftKeyDown($event)", "keydown.meta.tab": "onShiftKeyDown($event)", "keydown.arrowdown": "onArrowDown($event)", "keydown.arrowup": "onArrowUp($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)" }, classAttribute: "cax-element" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: EditableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: EditableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxEditableColumn]',
@@ -3354,10 +3320,10 @@ class EditableRow {
     isEnabled() {
         return this.caxEditableRowDisabled !== true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: EditableRow, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: EditableRow, isStandalone: true, selector: "[caxEditableRow]", inputs: { data: ["caxEditableRow", "data"], caxEditableRowDisabled: ["caxEditableRowDisabled", "caxEditableRowDisabled", booleanAttribute] }, host: { classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: EditableRow, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: EditableRow, isStandalone: true, selector: "[caxEditableRow]", inputs: { data: ["caxEditableRow", "data"], caxEditableRowDisabled: ["caxEditableRowDisabled", "caxEditableRowDisabled", booleanAttribute] }, host: { classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: EditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: EditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxEditableRow]',
@@ -3401,14 +3367,14 @@ class CellEditor {
     get editing() {
         return (this.dt.editingCell && this.editableColumn && this.dt.editingCell === this.editableColumn.el.nativeElement) || (this.editableRow && this.dt.editMode === 'row' && this.dt.isRowEditing(this.editableRow.data));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CellEditor, deps: [{ token: Table }, { token: EditableColumn, optional: true }, { token: EditableRow, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: CellEditor, isStandalone: true, selector: "cax-cellEditor", host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<ng-container *ngIf=\"editing\">\r\n    <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\r\n</ng-container>\r\n<ng-container *ngIf=\"!editing\">\r\n    <ng-container *ngTemplateOutlet=\"outputTemplate\"></ng-container>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CellEditor, deps: [{ token: Table }, { token: EditableColumn, optional: true }, { token: EditableRow, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: CellEditor, isStandalone: true, selector: "cax-cellEditor", host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<ng-container *ngIf=\"editing\">\n    <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!editing\">\n    <ng-container *ngTemplateOutlet=\"outputTemplate\"></ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CellEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CellEditor, decorators: [{
             type: Component,
             args: [{ selector: 'cax-cellEditor', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], host: {
                         class: 'cax-element'
-                    }, template: "<ng-container *ngIf=\"editing\">\r\n    <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\r\n</ng-container>\r\n<ng-container *ngIf=\"!editing\">\r\n    <ng-container *ngTemplateOutlet=\"outputTemplate\"></ng-container>\r\n</ng-container>\r\n" }]
+                    }, template: "<ng-container *ngIf=\"editing\">\n    <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!editing\">\n    <ng-container *ngTemplateOutlet=\"outputTemplate\"></ng-container>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: Table }, { type: EditableColumn, decorators: [{
                     type: Optional
                 }] }, { type: EditableRow, decorators: [{
@@ -3447,33 +3413,33 @@ class ColumnFilterFormElement {
     ngOnInit() {
         this.filterCallback = (value) => {
             this.filterConstraint.value = value;
-            this.dt._filter();
+            this.dt._filter(this.colFilter.display === 'row');
         };
     }
     onModelChange(value) {
         this.filterConstraint.value = value;
         if (this.type === 'date' || this.type === 'boolean' || value === '') {
-            this.dt._filter();
+            this.dt._filter(this.colFilter.display === 'row');
         }
     }
     onTextInputEnterKeyDown(event) {
-        this.dt._filter();
+        this.dt._filter(true);
         event.preventDefault();
     }
     onNumericInputKeyDown(event) {
         if (event.key === 'Enter') {
-            this.dt._filter();
+            this.dt._filter(true);
             event.preventDefault();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ColumnFilterFormElement, deps: [{ token: Table }, { token: ColumnFilter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: ColumnFilterFormElement, isStandalone: true, selector: "cax-columnFilterFormElement", inputs: { field: "field", type: "type", filterConstraint: "filterConstraint", filterTemplate: "filterTemplate", placeholder: "placeholder", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], ariaLabel: "ariaLabel" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<ng-container *ngIf=\"filterTemplate; else builtInElement\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            filterTemplate;\r\n            context: {\r\n                $implicit: filterConstraint.value,\r\n                filterCallback: filterCallback,\r\n                type: type,\r\n                field: field,\r\n                filterConstraint: filterConstraint,\r\n                placeholder: placeholder,\r\n                minFractionDigits: minFractionDigits,\r\n                maxFractionDigits: maxFractionDigits,\r\n                prefix: prefix,\r\n                suffix: suffix,\r\n                locale: locale,\r\n                localeMatcher: localeMatcher,\r\n                currency: currency,\r\n                currencyDisplay: currencyDisplay,\r\n                useGrouping: useGrouping,\r\n                showButtons: showButtons\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-container>\r\n<ng-template #builtInElement>\r\n    <ng-container [ngSwitch]=\"type\">\r\n        <input\r\n            *ngSwitchCase=\"'text'\"\r\n            type=\"text\"\r\n            [ariaLabel]=\"ariaLabel\"\r\n            caxInputText\r\n            [value]=\"filterConstraint?.value\"\r\n            (input)=\"onModelChange($event.target.value)\"\r\n            (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\r\n            [attr.placeholder]=\"placeholder\"\r\n        />\r\n        <cax-inputNumber\r\n            *ngSwitchCase=\"'numeric'\"\r\n            [ngModel]=\"filterConstraint?.value\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (onKeyDown)=\"onNumericInputKeyDown($event)\"\r\n            [showButtons]=\"showButtons\"\r\n            [minFractionDigits]=\"minFractionDigits\"\r\n            [maxFractionDigits]=\"maxFractionDigits\"\r\n            [ariaLabel]=\"ariaLabel\"\r\n            [prefix]=\"prefix\"\r\n            [suffix]=\"suffix\"\r\n            [placeholder]=\"placeholder\"\r\n            [mode]=\"currency ? 'currency' : 'decimal'\"\r\n            [locale]=\"locale\"\r\n            [localeMatcher]=\"localeMatcher\"\r\n            [currency]=\"currency\"\r\n            [currencyDisplay]=\"currencyDisplay\"\r\n            [useGrouping]=\"useGrouping\"\r\n        ></cax-inputNumber>\r\n        <cax-triStateCheckbox [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'boolean'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\"></cax-triStateCheckbox>\r\n        <cax-calendar [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'date'\" [placeholder]=\"placeholder\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\" appendTo=\"body\"></cax-calendar>\r\n    </ng-container>\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputtextDirective, selector: "[caxInputText]", inputs: ["placeholder", "disabled", "variant"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i6$1.Calendar, selector: "cax-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "labelText", "timeSeparator", "leftIcon", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onInlineSaved", "onInlineCancelled", "onShow"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "cax-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefixIcon", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: TriStateCheckboxModule }, { kind: "component", type: i8.TriStateCheckbox, selector: "cax-triStateCheckbox", inputs: ["disabled", "name", "ariaLabel", "ariaLabelledBy", "variant", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon", "autofocus"], outputs: ["onChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ColumnFilterFormElement, deps: [{ token: Table }, { token: ColumnFilter }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: ColumnFilterFormElement, isStandalone: true, selector: "cax-columnFilterFormElement", inputs: { field: "field", type: "type", filterConstraint: "filterConstraint", filterTemplate: "filterTemplate", placeholder: "placeholder", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], ariaLabel: "ariaLabel" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<ng-container\n    *ngIf=\"filterTemplate; else builtInElement\"\n    [ngTemplateOutlet]=\"filterTemplate\"\n    [ngTemplateOutletContext]=\"{\n        $implicit: filterConstraint.value,\n        filterCallback: filterCallback,\n        type: type,\n        field: field,\n        filterConstraint: filterConstraint,\n        placeholder: placeholder,\n        minFractionDigits: minFractionDigits,\n        maxFractionDigits: maxFractionDigits,\n        prefix: prefix,\n        suffix: suffix,\n        locale: locale,\n        localeMatcher: localeMatcher,\n        currency: currency,\n        currencyDisplay: currencyDisplay,\n        useGrouping: useGrouping,\n        showButtons: showButtons\n    }\"\n></ng-container>\n<ng-template #builtInElement>\n    <ng-container [ngSwitch]=\"type\">\n        <input\n            *ngSwitchCase=\"'text'\"\n            type=\"text\"\n            [ariaLabel]=\"ariaLabel\"\n            caxInputText\n            [value]=\"filterConstraint?.value\"\n            (input)=\"onModelChange($event.target.value)\"\n            (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n            [attr.placeholder]=\"placeholder\"\n            class=\"cax-fluid\"\n        />\n        <cax-inputNumber\n            *ngSwitchCase=\"'numeric'\"\n            [ngModel]=\"filterConstraint?.value\"\n            (ngModelChange)=\"onModelChange($event)\"\n            (onKeyDown)=\"onNumericInputKeyDown($event)\"\n            [showButtons]=\"showButtons\"\n            [minFractionDigits]=\"minFractionDigits\"\n            [maxFractionDigits]=\"maxFractionDigits\"\n            [ariaLabel]=\"ariaLabel\"\n            [prefix]=\"prefix\"\n            [suffix]=\"suffix\"\n            [placeholder]=\"placeholder\"\n            [mode]=\"currency ? 'currency' : 'decimal'\"\n            [locale]=\"locale\"\n            [localeMatcher]=\"localeMatcher\"\n            [currency]=\"currency\"\n            [currencyDisplay]=\"currencyDisplay\"\n            [useGrouping]=\"useGrouping\"\n            class=\"cax-fluid\"\n        ></cax-inputNumber>\n        <cax-triStateCheckbox [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'boolean'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\" class=\"cax-fluid\"></cax-triStateCheckbox>\n        <cax-calendar [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'date'\" [placeholder]=\"placeholder\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\" appendTo=\"body\" class=\"cax-fluid\"></cax-calendar>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputtextDirective, selector: "[caxInputText]", inputs: ["placeholder", "disabled", "readonly", "variant", "size"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i6$1.Calendar, selector: "cax-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "size", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "labelText", "helperText", "errorText", "invalid", "timeSeparator", "leftIcon", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onDateSaved", "onShow"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "cax-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "label", "errorText", "successText", "invalid", "minFractionDigits", "maxFractionDigits", "prefixIcon", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "value"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: TriStateCheckboxModule }, { kind: "component", type: i8.TriStateCheckbox, selector: "cax-triStateCheckbox", inputs: ["disabled", "name", "ariaLabel", "ariaLabelledBy", "variant", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon", "autofocus"], outputs: ["onChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ColumnFilterFormElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ColumnFilterFormElement, decorators: [{
             type: Component,
             args: [{ selector: 'cax-columnFilterFormElement', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, InputTextModule, FormsModule, CalendarModule, InputNumberModule, TriStateCheckboxModule], host: {
                         class: 'cax-element'
-                    }, template: "<ng-container *ngIf=\"filterTemplate; else builtInElement\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            filterTemplate;\r\n            context: {\r\n                $implicit: filterConstraint.value,\r\n                filterCallback: filterCallback,\r\n                type: type,\r\n                field: field,\r\n                filterConstraint: filterConstraint,\r\n                placeholder: placeholder,\r\n                minFractionDigits: minFractionDigits,\r\n                maxFractionDigits: maxFractionDigits,\r\n                prefix: prefix,\r\n                suffix: suffix,\r\n                locale: locale,\r\n                localeMatcher: localeMatcher,\r\n                currency: currency,\r\n                currencyDisplay: currencyDisplay,\r\n                useGrouping: useGrouping,\r\n                showButtons: showButtons\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-container>\r\n<ng-template #builtInElement>\r\n    <ng-container [ngSwitch]=\"type\">\r\n        <input\r\n            *ngSwitchCase=\"'text'\"\r\n            type=\"text\"\r\n            [ariaLabel]=\"ariaLabel\"\r\n            caxInputText\r\n            [value]=\"filterConstraint?.value\"\r\n            (input)=\"onModelChange($event.target.value)\"\r\n            (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\r\n            [attr.placeholder]=\"placeholder\"\r\n        />\r\n        <cax-inputNumber\r\n            *ngSwitchCase=\"'numeric'\"\r\n            [ngModel]=\"filterConstraint?.value\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (onKeyDown)=\"onNumericInputKeyDown($event)\"\r\n            [showButtons]=\"showButtons\"\r\n            [minFractionDigits]=\"minFractionDigits\"\r\n            [maxFractionDigits]=\"maxFractionDigits\"\r\n            [ariaLabel]=\"ariaLabel\"\r\n            [prefix]=\"prefix\"\r\n            [suffix]=\"suffix\"\r\n            [placeholder]=\"placeholder\"\r\n            [mode]=\"currency ? 'currency' : 'decimal'\"\r\n            [locale]=\"locale\"\r\n            [localeMatcher]=\"localeMatcher\"\r\n            [currency]=\"currency\"\r\n            [currencyDisplay]=\"currencyDisplay\"\r\n            [useGrouping]=\"useGrouping\"\r\n        ></cax-inputNumber>\r\n        <cax-triStateCheckbox [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'boolean'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\"></cax-triStateCheckbox>\r\n        <cax-calendar [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'date'\" [placeholder]=\"placeholder\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\" appendTo=\"body\"></cax-calendar>\r\n    </ng-container>\r\n</ng-template>\r\n" }]
+                    }, template: "<ng-container\n    *ngIf=\"filterTemplate; else builtInElement\"\n    [ngTemplateOutlet]=\"filterTemplate\"\n    [ngTemplateOutletContext]=\"{\n        $implicit: filterConstraint.value,\n        filterCallback: filterCallback,\n        type: type,\n        field: field,\n        filterConstraint: filterConstraint,\n        placeholder: placeholder,\n        minFractionDigits: minFractionDigits,\n        maxFractionDigits: maxFractionDigits,\n        prefix: prefix,\n        suffix: suffix,\n        locale: locale,\n        localeMatcher: localeMatcher,\n        currency: currency,\n        currencyDisplay: currencyDisplay,\n        useGrouping: useGrouping,\n        showButtons: showButtons\n    }\"\n></ng-container>\n<ng-template #builtInElement>\n    <ng-container [ngSwitch]=\"type\">\n        <input\n            *ngSwitchCase=\"'text'\"\n            type=\"text\"\n            [ariaLabel]=\"ariaLabel\"\n            caxInputText\n            [value]=\"filterConstraint?.value\"\n            (input)=\"onModelChange($event.target.value)\"\n            (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n            [attr.placeholder]=\"placeholder\"\n            class=\"cax-fluid\"\n        />\n        <cax-inputNumber\n            *ngSwitchCase=\"'numeric'\"\n            [ngModel]=\"filterConstraint?.value\"\n            (ngModelChange)=\"onModelChange($event)\"\n            (onKeyDown)=\"onNumericInputKeyDown($event)\"\n            [showButtons]=\"showButtons\"\n            [minFractionDigits]=\"minFractionDigits\"\n            [maxFractionDigits]=\"maxFractionDigits\"\n            [ariaLabel]=\"ariaLabel\"\n            [prefix]=\"prefix\"\n            [suffix]=\"suffix\"\n            [placeholder]=\"placeholder\"\n            [mode]=\"currency ? 'currency' : 'decimal'\"\n            [locale]=\"locale\"\n            [localeMatcher]=\"localeMatcher\"\n            [currency]=\"currency\"\n            [currencyDisplay]=\"currencyDisplay\"\n            [useGrouping]=\"useGrouping\"\n            class=\"cax-fluid\"\n        ></cax-inputNumber>\n        <cax-triStateCheckbox [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'boolean'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\" class=\"cax-fluid\"></cax-triStateCheckbox>\n        <cax-calendar [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'date'\" [placeholder]=\"placeholder\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\" appendTo=\"body\" class=\"cax-fluid\"></cax-calendar>\n    </ng-container>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: Table }, { type: ColumnFilter }], propDecorators: { field: [{
                 type: Input
             }], type: [{
@@ -3730,72 +3696,6 @@ class ColumnFilter {
     get filterConstraintAriaLabel() {
         return this.config.translation ? this.config.translation.aria.filterConstraint : undefined;
     }
-    customFilterListVisible = false;
-    selectedCustomFilter;
-    commonFilterOptions = [
-        {
-            label: 'Is empty',
-            key: 'empty'
-        },
-        {
-            label: 'Is filled',
-            key: 'filled'
-        }
-    ];
-    stringFilterOptions = [
-        {
-            label: 'Contains',
-            key: 'contains'
-        },
-        {
-            label: 'Does not contain',
-            key: 'does not contain'
-        },
-        {
-            label: 'Is exactly',
-            key: 'exactly'
-        }
-    ];
-    numberFilterOptions = [
-        {
-            label: 'Greater than',
-            key: 'gt'
-        },
-        {
-            label: 'Less than',
-            key: 'lt'
-        },
-        {
-            label: 'Greater than or equal to',
-            key: 'gte'
-        },
-        {
-            label: 'Less than or equal to',
-            key: 'lte'
-        },
-        {
-            label: 'Greater than and less than',
-            key: 'gtlt'
-        }
-    ];
-    dateFilterOptions = [
-        {
-            label: 'Before',
-            key: 'before'
-        },
-        {
-            label: 'After',
-            key: 'after'
-        },
-        {
-            label: 'Today',
-            key: 'today'
-        }
-    ];
-    customInputFilter = '';
-    customNumberFilter1;
-    customNumberFilter2;
-    customDateFilter;
     constructor(document, el, dt, renderer, config, overlayService, cd) {
         this.document = document;
         this.el = el;
@@ -3811,28 +3711,6 @@ class ColumnFilter {
         if (!this.dt.filters[this.field]) {
             this.initFieldFilterConstraint();
         }
-        if (this.dt.filters[this.field] && this.dt.filterType === 'custom') {
-            let filterData = this.dt.filters[this.field];
-            if (!Array.isArray(filterData)) {
-                this.selectedCustomFilter = this.getSelectedFilter(filterData.matchMode);
-                if (this.isCustomStringFilterSelected)
-                    this.customInputFilter = filterData.value;
-                if (this.isCustomNumberFilterSelected) {
-                    if (this.selectedCustomFilter.key === 'gtlt') {
-                        this.customNumberFilter1 = filterData.value.gt;
-                        this.customNumberFilter2 = filterData.value.lt;
-                    }
-                    else {
-                        this.customNumberFilter1 = filterData.value;
-                    }
-                }
-                if (this.isCustomDateFilterSelected) {
-                    if (this.selectedCustomFilter.key !== 'today') {
-                        this.customDateFilter = new Date(filterData.value);
-                    }
-                }
-            }
-        }
         this.translationSubscription = this.config.translationObserver.subscribe(() => {
             this.generateMatchModeOptions();
             this.generateOperatorOptions();
@@ -3840,10 +3718,6 @@ class ColumnFilter {
         this.generateMatchModeOptions();
         this.generateOperatorOptions();
     }
-    getSelectedFilter(key) {
-        const allOptions = [...this.commonFilterOptions, ...this.stringFilterOptions, ...this.numberFilterOptions, ...this.dateFilterOptions];
-        return allOptions.find((option) => option.key === key);
-    }
     generateMatchModeOptions() {
         this.matchModes =
             this.matchModeOptions ||
@@ -3889,24 +3763,22 @@ class ColumnFilter {
     }
     initFieldFilterConstraint() {
         let defaultMatchMode = this.getDefaultMatchMode();
-        if (this.dt.filterType === 'custom') {
-            this.dt.filters[this.field] = { value: null, matchMode: null };
-        }
-        else {
-            this.dt.filters[this.field] = this.display == 'row' ? { value: null, matchMode: defaultMatchMode } : [{ value: null, matchMode: defaultMatchMode, operator: this.operator }];
-        }
+        this.dt.filters[this.field] = this.display == 'row' ? { value: null, matchMode: defaultMatchMode } : [{ value: null, matchMode: defaultMatchMode, operator: this.operator }];
     }
     onMenuMatchModeChange(value, filterMeta) {
         filterMeta.matchMode = value;
         if (!this.showApplyButton) {
-            this.dt._filter();
+            this.dt._filter(true);
+        }
+        else {
+            this.dt._filter(false);
         }
     }
     onRowMatchModeChange(matchMode) {
         const fieldFilter = this.dt.filters[this.field];
         fieldFilter.matchMode = matchMode;
         if (fieldFilter.value) {
-            this.dt._filter();
+            this.dt._filter(true);
         }
         this.hide();
     }
@@ -3947,7 +3819,10 @@ class ColumnFilter {
     removeConstraint(filterMeta) {
         this.dt.filters[this.field] = this.dt.filters[this.field].filter((meta) => meta !== filterMeta);
         if (!this.showApplyButton) {
-            this.dt._filter();
+            this.dt._filter(true);
+        }
+        else {
+            this.dt._filter(false);
         }
         DomHandler.focus(this.clearButtonViewChild.nativeElement);
     }
@@ -3957,7 +3832,10 @@ class ColumnFilter {
             this.operator = value;
         });
         if (!this.showApplyButton) {
-            this.dt._filter();
+            this.dt._filter(true);
+        }
+        else {
+            this.dt._filter(false);
         }
     }
     toggleMenu() {
@@ -4074,18 +3952,10 @@ class ColumnFilter {
     hasFilter() {
         let fieldFilter = this.dt.filters[this.field];
         if (fieldFilter) {
-            if (this.dt.filterType === 'custom') {
-                if (Array.isArray(fieldFilter))
-                    return false;
-                else
-                    return fieldFilter.matchMode != null || undefined ? true : false;
-            }
-            else {
-                if (Array.isArray(fieldFilter))
-                    return !this.dt.isFilterBlank(fieldFilter[0].value);
-                else
-                    return !this.dt.isFilterBlank(fieldFilter.value);
-            }
+            if (Array.isArray(fieldFilter))
+                return !this.dt.isFilterBlank(fieldFilter[0].value);
+            else
+                return !this.dt.isFilterBlank(fieldFilter.value);
         }
         return false;
     }
@@ -4166,12 +4036,12 @@ class ColumnFilter {
     }
     clearFilter() {
         this.initFieldFilterConstraint();
-        this.dt._filter();
+        this.dt._filter(true);
         if (this.hideOnClear)
             this.hide();
     }
     applyFilter() {
-        this.dt._filter();
+        this.dt._filter(true);
         this.hide();
     }
     ngOnDestroy() {
@@ -4190,77 +4060,14 @@ class ColumnFilter {
             this.overlaySubscription.unsubscribe();
         }
     }
-    toggleCustomFilterList() {
-        this.customFilterListVisible = !this.customFilterListVisible;
-    }
-    selectCustomFilter(option) {
-        this.customInputFilter = '';
-        this.customNumberFilter1 = undefined;
-        this.customNumberFilter2 = undefined;
-        this.customDateFilter = undefined;
-        this.customFilterListVisible = false;
-        this.selectedCustomFilter = option;
-    }
-    get isCustomCommonFilterSelected() {
-        return this.commonFilterOptions.some((list) => list.key == this.selectedCustomFilter?.key);
-    }
-    get isCustomStringFilterSelected() {
-        return this.stringFilterOptions.some((list) => list.key == this.selectedCustomFilter?.key);
-    }
-    get isCustomNumberFilterSelected() {
-        return this.numberFilterOptions.some((list) => list.key == this.selectedCustomFilter?.key);
-    }
-    get isCustomDateFilterSelected() {
-        return this.dateFilterOptions.some((list) => list.key == this.selectedCustomFilter?.key);
-    }
-    onClearCustomFilters() {
-        this.selectedCustomFilter = undefined;
-        this.customInputFilter = '';
-        this.customNumberFilter1 = undefined;
-        this.customNumberFilter2 = undefined;
-        this.customDateFilter = undefined;
-    }
-    onApplyCustomFilters() {
-        let appliedFilters = undefined;
-        if (this.isCustomCommonFilterSelected) {
-            appliedFilters = {
-                matchMode: this.selectedCustomFilter.key
-            };
-        }
-        else if (this.isCustomStringFilterSelected) {
-            appliedFilters = {
-                matchMode: this.selectedCustomFilter.key,
-                value: this.customInputFilter
-            };
-        }
-        else if (this.isCustomNumberFilterSelected) {
-            appliedFilters = {
-                matchMode: this.selectedCustomFilter.key
-            };
-            if (this.selectedCustomFilter.key === 'gtlt')
-                appliedFilters.value = { gt: this.customNumberFilter1, lt: this.customNumberFilter2 };
-            else
-                appliedFilters.value = this.customNumberFilter1;
-        }
-        else if (this.isCustomDateFilterSelected) {
-            appliedFilters = {
-                matchMode: this.selectedCustomFilter.key
-            };
-            if (this.selectedCustomFilter.key !== 'today')
-                appliedFilters.value = this.customDateFilter;
-        }
-        this.dt.filters[this.field] = appliedFilters;
-        this.dt._filter();
-        this.hide();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ColumnFilter, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: Table }, { token: i0.Renderer2 }, { token: i2.caxConfig }, { token: i2.OverlayService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: ColumnFilter, isStandalone: true, selector: "cax-columnFilter", inputs: { field: "field", type: "type", disabled: "disabled", display: "display", showMenu: ["showMenu", "showMenu", booleanAttribute], matchMode: "matchMode", operator: "operator", showOperator: ["showOperator", "showOperator", booleanAttribute], showClearButton: ["showClearButton", "showClearButton", booleanAttribute], showApplyButton: ["showApplyButton", "showApplyButton", booleanAttribute], showMatchModes: ["showMatchModes", "showMatchModes", booleanAttribute], showAddButton: ["showAddButton", "showAddButton", booleanAttribute], hideOnClear: ["hideOnClear", "hideOnClear", booleanAttribute], placeholder: "placeholder", matchModeOptions: "matchModeOptions", maxConstraints: ["maxConstraints", "maxConstraints", numberAttribute], minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], showButtons: ["showButtons", "showButtons", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true }, { propertyName: "clearButtonViewChild", first: true, predicate: ["clearBtn"], descendants: true }], ngImport: i0, template: "<div\r\n    class=\"cax-column-filter\"\r\n    [ngClass]=\"{ 'cax-column-filter-row': display === 'row' && dt.filterType === 'default', 'cax-column-filter-menu': display === 'menu' && dt.filterType === 'default', 'cax-column-filter-custom':  dt.filterType === 'custom' }\"\r\n>\r\n    <cax-columnFilterFormElement\r\n        *ngIf=\"display === 'row' && dt.filterType === 'default'\"\r\n        class=\"cax-fluid\"\r\n        [type]=\"type\"\r\n        [field]=\"field\"\r\n        [ariaLabel]=\"ariaLabel\"\r\n        [filterConstraint]=\"dt.filters[field]\"\r\n        [filterTemplate]=\"filterTemplate\"\r\n        [placeholder]=\"placeholder\"\r\n        [minFractionDigits]=\"minFractionDigits\"\r\n        [maxFractionDigits]=\"maxFractionDigits\"\r\n        [prefix]=\"prefix\"\r\n        [suffix]=\"suffix\"\r\n        [locale]=\"locale\"\r\n        [localeMatcher]=\"localeMatcher\"\r\n        [currency]=\"currency\"\r\n        [currencyDisplay]=\"currencyDisplay\"\r\n        [useGrouping]=\"useGrouping\"\r\n        [showButtons]=\"showButtons\"\r\n    ></cax-columnFilterFormElement>\r\n    <button\r\n        #icon\r\n        *ngIf=\"showMenuButton\"\r\n        type=\"button\"\r\n        class=\"cax-column-filter-menu-button cax-link\"\r\n        aria-haspopup=\"true\"\r\n        [attr.aria-label]=\"filterMenuButtonAriaLabel\"\r\n        [attr.aria-controls]=\"overlayVisible ? overlayId : null\"\r\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n        [disabled]=\"disabled\"\r\n        [ngClass]=\"{ 'cax-column-filter-menu-button-open': overlayVisible, 'cax-column-filter-menu-button-active': hasFilter() }\"\r\n        (click)=\"toggleMenu()\"\r\n        (keydown)=\"onToggleButtonKeyDown($event)\"\r\n    >\r\n        <i *ngIf=\"!filterIconTemplate\" [styleClass]=\"'pi-filter-icon'\" class=\"cax cax-filter\"></i>\r\n        <span class=\"pi-filter-icon\" *ngIf=\"filterIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n    <button\r\n        #icon\r\n        *ngIf=\"showClearButton && display === 'row' && dt.filterType === 'default'\"\r\n        [ngClass]=\"{ 'cax-hidden-space': !hasRowFilter() }\"\r\n        type=\"button\"\r\n        class=\"cax-column-filter-clear-button cax-link\"\r\n        (click)=\"clearFilter()\"\r\n        [attr.aria-label]=\"clearButtonLabel\"\r\n    >\r\n        <FilterSlashIcon *ngIf=\"!clearFilterIconTemplate\" />\r\n        <ng-template *ngTemplateOutlet=\"clearFilterIconTemplate\"></ng-template>\r\n    </button>\r\n    <div\r\n        *ngIf=\"showMenu && overlayVisible\"\r\n        [ngClass]=\"{ 'cax-column-filter-overlay cax-component cax-fluid': true, 'cax-column-filter-overlay-menu': display === 'menu' && dt.filterType === 'default' , 'cax-column-filter-overlay-custom': dt.filterType === 'custom' }\"\r\n        [id]=\"overlayId\"\r\n        [attr.aria-modal]=\"true\"\r\n        role=\"dialog\"\r\n        (click)=\"onContentClick()\"\r\n        [@overlayAnimation]=\"'visible'\"\r\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\r\n        (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\r\n        (keydown.escape)=\"onEscape()\"\r\n    >\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: field }\"></ng-container>\r\n        <ul *ngIf=\"display === 'row' && dt.filterType === 'default'; else menu\" class=\"cax-column-filter-row-items\">\r\n            <li\r\n                class=\"cax-column-filter-row-item\"\r\n                *ngFor=\"let matchMode of matchModes; let i = index\"\r\n                (click)=\"onRowMatchModeChange(matchMode.value)\"\r\n                (keydown)=\"onRowMatchModeKeyDown($event)\"\r\n                (keydown.enter)=\"this.onRowMatchModeChange(matchMode.value)\"\r\n                [ngClass]=\"{ 'cax-highlight': isRowMatchModeSelected(matchMode.value) }\"\r\n                [attr.tabindex]=\"i === 0 ? '0' : null\"\r\n            >\r\n                {{ matchMode.label }}\r\n            </li>\r\n            <li class=\"cax-column-filter-separator\"></li>\r\n            <li class=\"cax-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onRowMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">{{ noFilterLabel }}</li>\r\n        </ul>\r\n        <ng-template #menu>\r\n            <ng-container *ngIf=\"display === 'menu' && dt.filterType === 'default'; else custom\">\r\n                <div class=\"cax-column-filter-operator\" *ngIf=\"isShowOperator\">\r\n                    <cax-dropdown [options]=\"operatorOptions\" [ngModel]=\"operator\" (ngModelChange)=\"onOperatorChange($event)\" styleClass=\"cax-column-filter-operator-dropdown\"></cax-dropdown>\r\n                </div>\r\n                <div class=\"cax-column-filter-constraints\">\r\n                    <div *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\" class=\"cax-column-filter-constraint\">\r\n                        <cax-dropdown\r\n                            *ngIf=\"showMatchModes && matchModes\"\r\n                            [options]=\"matchModes\"\r\n                            [ngModel]=\"fieldConstraint.matchMode\"\r\n                            (ngModelChange)=\"onMenuMatchModeChange($event, fieldConstraint)\"\r\n                            styleClass=\"cax-column-filter-matchmode-dropdown\"\r\n                        ></cax-dropdown>\r\n                        <cax-columnFilterFormElement\r\n                            [type]=\"type\"\r\n                            [field]=\"field\"\r\n                            [filterConstraint]=\"fieldConstraint\"\r\n                            [filterTemplate]=\"filterTemplate\"\r\n                            [placeholder]=\"placeholder\"\r\n                            [minFractionDigits]=\"minFractionDigits\"\r\n                            [maxFractionDigits]=\"maxFractionDigits\"\r\n                            [prefix]=\"prefix\"\r\n                            [suffix]=\"suffix\"\r\n                            [locale]=\"locale\"\r\n                            [localeMatcher]=\"localeMatcher\"\r\n                            [currency]=\"currency\"\r\n                            [currencyDisplay]=\"currencyDisplay\"\r\n                            [useGrouping]=\"useGrouping\"\r\n                        ></cax-columnFilterFormElement>\r\n                        <div>\r\n                            <button\r\n                                *ngIf=\"showRemoveIcon\"\r\n                                type=\"button\"\r\n                                caxButton\r\n                                class=\"cax-column-filter-remove-button cax-button-text cax-button-danger cax-button-sm\"\r\n                                (click)=\"removeConstraint(fieldConstraint)\"\r\n                                pRipple\r\n                                [attr.aria-label]=\"removeRuleButtonLabel\"\r\n                                [label]=\"removeRuleButtonLabel\"\r\n                            >\r\n                                <TrashIcon *ngIf=\"!removeRuleIconTemplate\" [styleClass]=\"'cax-button-icon-left'\" />\r\n                                <ng-template *ngTemplateOutlet=\"removeRuleIconTemplate\"></ng-template>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"cax-column-filter-add-rule\" *ngIf=\"isShowAddConstraint\">\r\n                    <button type=\"button\" caxButton [label]=\"addRuleButtonLabel\" [attr.aria-label]=\"addRuleButtonLabel\" class=\"cax-column-filter-add-button cax-button-text cax-button-sm\" (click)=\"addConstraint()\" pRipple>\r\n                        <PlusIcon *ngIf=\"!addRuleIconTemplate\" [styleClass]=\"'cax-button-icon-left'\" />\r\n                        <ng-template *ngTemplateOutlet=\"addRuleIconTemplate\"></ng-template>\r\n                    </button>\r\n                </div>\r\n                <div class=\"cax-column-filter-buttonbar\" *ngIf=\"showButtons\">\r\n                    <button\r\n                        #clearBtn\r\n                        *ngIf=\"showClearButton\"\r\n                        type=\"button\"\r\n                        caxButton\r\n                        class=\"cax-button-outlined cax-button-danger cax-button-sm\"\r\n                        (click)=\"clearFilter()\"\r\n                        [attr.aria-label]=\"clearButtonLabel\"\r\n                        [label]=\"clearButtonLabel\"\r\n                        pRipple\r\n                    ></button>\r\n                    <button *ngIf=\"showApplyButton\" type=\"button\" caxButton (click)=\"applyFilter()\" class=\"cax-button-sm\" [label]=\"applyButtonLabel\" pRipple [attr.aria-label]=\"applyButtonLabel\"></button>\r\n                </div>\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template #custom>\r\n            <div class=\"cax-column-filter-custom-container\">\r\n                <div>\r\n                    <div class=\"cax-column-filter-custom-list-header\" (click)=\"toggleCustomFilterList()\">\r\n                        <span *ngIf=\"!selectedCustomFilter?.label?.length\">Select a condition</span>\r\n                        <div *ngIf=\"selectedCustomFilter\">{{ selectedCustomFilter.label }}</div>\r\n                        <i class=\"cax cax-alt-arrow-down\"></i>\r\n                    </div>\r\n                    <div class=\"cax-column-filter-custom-list\" *ngIf=\"customFilterListVisible\">\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of commonFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                        <cax-divider [style]=\"{margin: 0}\"></cax-divider>\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of stringFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                        <cax-divider [style]=\"{margin: 0}\"></cax-divider>\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of numberFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                        <cax-divider [style]=\"{margin: 0}\"></cax-divider>\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of dateFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"isCustomStringFilterSelected\">\r\n                    <cax-inputtext [(ngModel)]=\"customInputFilter\" [clearIcon]=\"false\"></cax-inputtext>\r\n                </div>\r\n                <div *ngIf=\"isCustomNumberFilterSelected\" style=\"display: flex; gap: 12px\">\r\n                    <cax-inputNumber [(ngModel)]=\"customNumberFilter1\"></cax-inputNumber>\r\n                    <cax-inputNumber [(ngModel)]=\"customNumberFilter2\" *ngIf=\"selectedCustomFilter.key === 'gtlt'\"></cax-inputNumber>\r\n                </div>\r\n                <div *ngIf=\"isCustomDateFilterSelected && selectedCustomFilter.key !== 'today'\">\r\n                    <cax-calendar [(ngModel)]=\"customDateFilter\" [showIcon]=\"true\" iconDisplay=\"input\"></cax-calendar>\r\n                </div>\r\n                <div class=\"cax-column-filter-custom-buttons\">\r\n                    <cax-button (click)=\"onClearCustomFilters()\" [disabled]=\"!selectedCustomFilter\" [label]=\"'Clear'\" [severity]=\"'danger'\" outlined=\"true\"></cax-button>\r\n                    <cax-button (click)=\"onApplyCustomFilters()\" [label]=\"'Apply'\"></cax-button>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: field }\"></ng-container>\r\n    </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4$1.Dropdown, selector: "cax-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "labelText", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6$2.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "component", type: i6$2.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FilterSlashIcon, selector: "FilterSlashIcon" }, { kind: "component", type: PlusIcon, selector: "PlusIcon" }, { kind: "component", type: TrashIcon, selector: "TrashIcon" }, { kind: "component", type: ColumnFilterFormElement, selector: "cax-columnFilterFormElement", inputs: ["field", "type", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "ariaLabel"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i7$1.Divider, selector: "cax-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: i4.InputTextComponent, selector: "cax-inputtext", inputs: ["value", "placeholder", "disabled", "maxlength", "successText", "errorText", "showLabel", "leftIcon", "rightIcon", "rightIconClickable", "clearIcon", "label", "iconPath", "disabledIcon", "showIcon", "iconClass", "leftIconClass", "rightIconClass", "invalid", "required", "style", "size", "styleClass"], outputs: ["valueChange", "rightIconClick"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "cax-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefixIcon", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i6$1.Calendar, selector: "cax-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "labelText", "timeSeparator", "leftIcon", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onInlineSaved", "onInlineCancelled", "onShow"] }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]), transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])])], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ColumnFilter, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: Table }, { token: i0.Renderer2 }, { token: i2.caxConfig }, { token: i2.OverlayService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: ColumnFilter, isStandalone: true, selector: "cax-columnFilter", inputs: { field: "field", type: "type", disabled: "disabled", display: "display", showMenu: ["showMenu", "showMenu", booleanAttribute], matchMode: "matchMode", operator: "operator", showOperator: ["showOperator", "showOperator", booleanAttribute], showClearButton: ["showClearButton", "showClearButton", booleanAttribute], showApplyButton: ["showApplyButton", "showApplyButton", booleanAttribute], showMatchModes: ["showMatchModes", "showMatchModes", booleanAttribute], showAddButton: ["showAddButton", "showAddButton", booleanAttribute], hideOnClear: ["hideOnClear", "hideOnClear", booleanAttribute], placeholder: "placeholder", matchModeOptions: "matchModeOptions", maxConstraints: ["maxConstraints", "maxConstraints", numberAttribute], minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], showButtons: ["showButtons", "showButtons", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true }, { propertyName: "clearButtonViewChild", first: true, predicate: ["clearBtn"], descendants: true }], ngImport: i0, template: "<div class=\"cax-column-filter\" [ngClass]=\"{ 'cax-column-filter-row': display === 'row', 'cax-column-filter-menu': display === 'menu' }\">\n    <cax-columnFilterFormElement\n        *ngIf=\"display === 'row'\"\n        class=\"cax-fluid\"\n        [type]=\"type\"\n        [field]=\"field\"\n        [ariaLabel]=\"ariaLabel\"\n        [filterConstraint]=\"dt.filters[field]\"\n        [filterTemplate]=\"filterTemplate\"\n        [placeholder]=\"placeholder\"\n        [minFractionDigits]=\"minFractionDigits\"\n        [maxFractionDigits]=\"maxFractionDigits\"\n        [prefix]=\"prefix\"\n        [suffix]=\"suffix\"\n        [locale]=\"locale\"\n        [localeMatcher]=\"localeMatcher\"\n        [currency]=\"currency\"\n        [currencyDisplay]=\"currencyDisplay\"\n        [useGrouping]=\"useGrouping\"\n        [showButtons]=\"showButtons\"\n    ></cax-columnFilterFormElement>\n    <button\n        #icon\n        *ngIf=\"showMenuButton\"\n        type=\"button\"\n        class=\"cax-column-filter-menu-button cax-link\"\n        aria-haspopup=\"true\"\n        [attr.aria-label]=\"filterMenuButtonAriaLabel\"\n        [attr.aria-controls]=\"overlayVisible ? overlayId : null\"\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"{ 'cax-column-filter-menu-button-open': overlayVisible, 'cax-column-filter-menu-button-active': hasFilter() }\"\n        (click)=\"toggleMenu()\"\n        (keydown)=\"onToggleButtonKeyDown($event)\"\n    >\n        <i *ngIf=\"!filterIconTemplate\" [ngClass]=\"'pi-filter-icon'\" class=\"cax cax-filter\"></i>\n        <span class=\"pi-filter-icon\" *ngIf=\"filterIconTemplate\">\n            <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\n        </span>\n    </button>\n    <button #icon *ngIf=\"showClearButton && display === 'row'\" [ngClass]=\"{ 'cax-hidden-space': !hasRowFilter() }\" type=\"button\" class=\"cax-column-filter-clear-button cax-link\" (click)=\"clearFilter()\" [attr.aria-label]=\"clearButtonLabel\">\n        <FilterSlashIcon *ngIf=\"!clearFilterIconTemplate\" />\n        <ng-template *ngTemplateOutlet=\"clearFilterIconTemplate\"></ng-template>\n    </button>\n    <div\n        *ngIf=\"showMenu && overlayVisible\"\n        [ngClass]=\"{ 'cax-column-filter-overlay cax-component cax-fluid': true, 'cax-column-filter-overlay-menu': display === 'menu' }\"\n        [id]=\"overlayId\"\n        [attr.aria-modal]=\"true\"\n        role=\"dialog\"\n        (click)=\"onContentClick()\"\n        [@overlayAnimation]=\"'visible'\"\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n        (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n        (keydown.escape)=\"onEscape()\"\n    >\n        <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: field }\"></ng-container>\n        <ul *ngIf=\"display === 'row'; else menu\" class=\"cax-column-filter-row-items\">\n            <li\n                class=\"cax-column-filter-row-item\"\n                *ngFor=\"let matchMode of matchModes; let i = index\"\n                (click)=\"onRowMatchModeChange(matchMode.value)\"\n                (keydown)=\"onRowMatchModeKeyDown($event)\"\n                (keydown.enter)=\"this.onRowMatchModeChange(matchMode.value)\"\n                [ngClass]=\"{ 'cax-highlight': isRowMatchModeSelected(matchMode.value) }\"\n                [attr.tabindex]=\"i === 0 ? '0' : null\"\n            >\n                {{ matchMode.label }}\n            </li>\n            <li class=\"cax-column-filter-separator\"></li>\n            <li class=\"cax-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onRowMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">{{ noFilterLabel }}</li>\n        </ul>\n        <ng-template #menu>\n            <div *ngIf=\"display === 'menu'\" class=\"cax-column-filter-menu-container\">\n                <cax-dropdown *ngIf=\"isShowOperator\" [options]=\"operatorOptions\" [ngModel]=\"operator\" (ngModelChange)=\"onOperatorChange($event)\" styleClass=\"cax-column-filter-operator-dropdown cax-fluid\"></cax-dropdown>\n\n                <div class=\"cax-column-filter-constraints\">\n                    <div *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\" class=\"cax-column-filter-constraint\">\n                        <cax-dropdown\n                            *ngIf=\"showMatchModes && matchModes\"\n                            [options]=\"matchModes\"\n                            [ngModel]=\"fieldConstraint.matchMode\"\n                            (ngModelChange)=\"onMenuMatchModeChange($event, fieldConstraint)\"\n                            styleClass=\"cax-column-filter-matchmode-dropdown cax-fluid\"\n                        ></cax-dropdown>\n                        <cax-columnFilterFormElement\n                            class=\"cax-fluid\"\n                            [type]=\"type\"\n                            [field]=\"field\"\n                            [filterConstraint]=\"fieldConstraint\"\n                            [filterTemplate]=\"filterTemplate\"\n                            [placeholder]=\"placeholder\"\n                            [minFractionDigits]=\"minFractionDigits\"\n                            [maxFractionDigits]=\"maxFractionDigits\"\n                            [prefix]=\"prefix\"\n                            [suffix]=\"suffix\"\n                            [locale]=\"locale\"\n                            [localeMatcher]=\"localeMatcher\"\n                            [currency]=\"currency\"\n                            [currencyDisplay]=\"currencyDisplay\"\n                            [useGrouping]=\"useGrouping\"\n                        ></cax-columnFilterFormElement>\n                        <button\n                            *ngIf=\"showRemoveIcon\"\n                            type=\"button\"\n                            caxButton\n                            severity=\"danger\"\n                            outlined=\"true\"\n                            class=\"cax-column-filter-remove-button cax-button-sm\"\n                            (click)=\"removeConstraint(fieldConstraint)\"\n                            caxRipple\n                            [attr.aria-label]=\"removeRuleButtonLabel\"\n                            [label]=\"removeRuleButtonLabel\"\n                        >\n                            <TrashIcon *ngIf=\"!removeRuleIconTemplate\" [styleClass]=\"'cax-button-icon-left'\" />\n                            <ng-template *ngTemplateOutlet=\"removeRuleIconTemplate\"></ng-template>\n                        </button>\n                    </div>\n                </div>\n\n                <button *ngIf=\"isShowAddConstraint\" type=\"button\" caxButton [label]=\"addRuleButtonLabel\" [attr.aria-label]=\"addRuleButtonLabel\" class=\"cax-column-filter-add-button cax-button-text cax-button-sm\" (click)=\"addConstraint()\" caxRipple>\n                    <PlusIcon *ngIf=\"!addRuleIconTemplate\" [styleClass]=\"'cax-button-icon-left'\" />\n                    <ng-template *ngTemplateOutlet=\"addRuleIconTemplate\"></ng-template>\n                </button>\n\n                <div class=\"cax-column-filter-buttonbar\" *ngIf=\"showButtons\">\n                    <button\n                        #clearBtn\n                        *ngIf=\"showClearButton\"\n                        type=\"button\"\n                        caxButton\n                        class=\"cax-button-outlined cax-button-danger cax-button-sm\"\n                        (click)=\"clearFilter()\"\n                        [attr.aria-label]=\"clearButtonLabel\"\n                        [label]=\"clearButtonLabel\"\n                        pRipple\n                    ></button>\n                    <button *ngIf=\"showApplyButton\" type=\"button\" caxButton (click)=\"applyFilter()\" class=\"cax-button-sm\" [label]=\"applyButtonLabel\" pRipple [attr.aria-label]=\"applyButtonLabel\"></button>\n                </div>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: field }\"></ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4$1.Dropdown, selector: "cax-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "size", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "labelText", "invalid", "errorText", "successText", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6$2.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "component", type: FilterSlashIcon, selector: "FilterSlashIcon" }, { kind: "component", type: PlusIcon, selector: "PlusIcon" }, { kind: "component", type: TrashIcon, selector: "TrashIcon" }, { kind: "component", type: ColumnFilterFormElement, selector: "cax-columnFilterFormElement", inputs: ["field", "type", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "ariaLabel"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: CalendarModule }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]), transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])])], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ColumnFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ColumnFilter, decorators: [{
             type: Component,
             args: [{ selector: 'cax-columnFilter', animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]), transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])])], encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, DropdownModule, FormsModule, ButtonModule, FilterSlashIcon, PlusIcon, TrashIcon, ColumnFilterFormElement, RadioButtonModule, DividerModule, InputTextModule, InputNumberModule, CalendarModule], host: {
                         class: 'cax-element'
-                    }, template: "<div\r\n    class=\"cax-column-filter\"\r\n    [ngClass]=\"{ 'cax-column-filter-row': display === 'row' && dt.filterType === 'default', 'cax-column-filter-menu': display === 'menu' && dt.filterType === 'default', 'cax-column-filter-custom':  dt.filterType === 'custom' }\"\r\n>\r\n    <cax-columnFilterFormElement\r\n        *ngIf=\"display === 'row' && dt.filterType === 'default'\"\r\n        class=\"cax-fluid\"\r\n        [type]=\"type\"\r\n        [field]=\"field\"\r\n        [ariaLabel]=\"ariaLabel\"\r\n        [filterConstraint]=\"dt.filters[field]\"\r\n        [filterTemplate]=\"filterTemplate\"\r\n        [placeholder]=\"placeholder\"\r\n        [minFractionDigits]=\"minFractionDigits\"\r\n        [maxFractionDigits]=\"maxFractionDigits\"\r\n        [prefix]=\"prefix\"\r\n        [suffix]=\"suffix\"\r\n        [locale]=\"locale\"\r\n        [localeMatcher]=\"localeMatcher\"\r\n        [currency]=\"currency\"\r\n        [currencyDisplay]=\"currencyDisplay\"\r\n        [useGrouping]=\"useGrouping\"\r\n        [showButtons]=\"showButtons\"\r\n    ></cax-columnFilterFormElement>\r\n    <button\r\n        #icon\r\n        *ngIf=\"showMenuButton\"\r\n        type=\"button\"\r\n        class=\"cax-column-filter-menu-button cax-link\"\r\n        aria-haspopup=\"true\"\r\n        [attr.aria-label]=\"filterMenuButtonAriaLabel\"\r\n        [attr.aria-controls]=\"overlayVisible ? overlayId : null\"\r\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n        [disabled]=\"disabled\"\r\n        [ngClass]=\"{ 'cax-column-filter-menu-button-open': overlayVisible, 'cax-column-filter-menu-button-active': hasFilter() }\"\r\n        (click)=\"toggleMenu()\"\r\n        (keydown)=\"onToggleButtonKeyDown($event)\"\r\n    >\r\n        <i *ngIf=\"!filterIconTemplate\" [styleClass]=\"'pi-filter-icon'\" class=\"cax cax-filter\"></i>\r\n        <span class=\"pi-filter-icon\" *ngIf=\"filterIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n    <button\r\n        #icon\r\n        *ngIf=\"showClearButton && display === 'row' && dt.filterType === 'default'\"\r\n        [ngClass]=\"{ 'cax-hidden-space': !hasRowFilter() }\"\r\n        type=\"button\"\r\n        class=\"cax-column-filter-clear-button cax-link\"\r\n        (click)=\"clearFilter()\"\r\n        [attr.aria-label]=\"clearButtonLabel\"\r\n    >\r\n        <FilterSlashIcon *ngIf=\"!clearFilterIconTemplate\" />\r\n        <ng-template *ngTemplateOutlet=\"clearFilterIconTemplate\"></ng-template>\r\n    </button>\r\n    <div\r\n        *ngIf=\"showMenu && overlayVisible\"\r\n        [ngClass]=\"{ 'cax-column-filter-overlay cax-component cax-fluid': true, 'cax-column-filter-overlay-menu': display === 'menu' && dt.filterType === 'default' , 'cax-column-filter-overlay-custom': dt.filterType === 'custom' }\"\r\n        [id]=\"overlayId\"\r\n        [attr.aria-modal]=\"true\"\r\n        role=\"dialog\"\r\n        (click)=\"onContentClick()\"\r\n        [@overlayAnimation]=\"'visible'\"\r\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\r\n        (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\r\n        (keydown.escape)=\"onEscape()\"\r\n    >\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: field }\"></ng-container>\r\n        <ul *ngIf=\"display === 'row' && dt.filterType === 'default'; else menu\" class=\"cax-column-filter-row-items\">\r\n            <li\r\n                class=\"cax-column-filter-row-item\"\r\n                *ngFor=\"let matchMode of matchModes; let i = index\"\r\n                (click)=\"onRowMatchModeChange(matchMode.value)\"\r\n                (keydown)=\"onRowMatchModeKeyDown($event)\"\r\n                (keydown.enter)=\"this.onRowMatchModeChange(matchMode.value)\"\r\n                [ngClass]=\"{ 'cax-highlight': isRowMatchModeSelected(matchMode.value) }\"\r\n                [attr.tabindex]=\"i === 0 ? '0' : null\"\r\n            >\r\n                {{ matchMode.label }}\r\n            </li>\r\n            <li class=\"cax-column-filter-separator\"></li>\r\n            <li class=\"cax-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onRowMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">{{ noFilterLabel }}</li>\r\n        </ul>\r\n        <ng-template #menu>\r\n            <ng-container *ngIf=\"display === 'menu' && dt.filterType === 'default'; else custom\">\r\n                <div class=\"cax-column-filter-operator\" *ngIf=\"isShowOperator\">\r\n                    <cax-dropdown [options]=\"operatorOptions\" [ngModel]=\"operator\" (ngModelChange)=\"onOperatorChange($event)\" styleClass=\"cax-column-filter-operator-dropdown\"></cax-dropdown>\r\n                </div>\r\n                <div class=\"cax-column-filter-constraints\">\r\n                    <div *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\" class=\"cax-column-filter-constraint\">\r\n                        <cax-dropdown\r\n                            *ngIf=\"showMatchModes && matchModes\"\r\n                            [options]=\"matchModes\"\r\n                            [ngModel]=\"fieldConstraint.matchMode\"\r\n                            (ngModelChange)=\"onMenuMatchModeChange($event, fieldConstraint)\"\r\n                            styleClass=\"cax-column-filter-matchmode-dropdown\"\r\n                        ></cax-dropdown>\r\n                        <cax-columnFilterFormElement\r\n                            [type]=\"type\"\r\n                            [field]=\"field\"\r\n                            [filterConstraint]=\"fieldConstraint\"\r\n                            [filterTemplate]=\"filterTemplate\"\r\n                            [placeholder]=\"placeholder\"\r\n                            [minFractionDigits]=\"minFractionDigits\"\r\n                            [maxFractionDigits]=\"maxFractionDigits\"\r\n                            [prefix]=\"prefix\"\r\n                            [suffix]=\"suffix\"\r\n                            [locale]=\"locale\"\r\n                            [localeMatcher]=\"localeMatcher\"\r\n                            [currency]=\"currency\"\r\n                            [currencyDisplay]=\"currencyDisplay\"\r\n                            [useGrouping]=\"useGrouping\"\r\n                        ></cax-columnFilterFormElement>\r\n                        <div>\r\n                            <button\r\n                                *ngIf=\"showRemoveIcon\"\r\n                                type=\"button\"\r\n                                caxButton\r\n                                class=\"cax-column-filter-remove-button cax-button-text cax-button-danger cax-button-sm\"\r\n                                (click)=\"removeConstraint(fieldConstraint)\"\r\n                                pRipple\r\n                                [attr.aria-label]=\"removeRuleButtonLabel\"\r\n                                [label]=\"removeRuleButtonLabel\"\r\n                            >\r\n                                <TrashIcon *ngIf=\"!removeRuleIconTemplate\" [styleClass]=\"'cax-button-icon-left'\" />\r\n                                <ng-template *ngTemplateOutlet=\"removeRuleIconTemplate\"></ng-template>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"cax-column-filter-add-rule\" *ngIf=\"isShowAddConstraint\">\r\n                    <button type=\"button\" caxButton [label]=\"addRuleButtonLabel\" [attr.aria-label]=\"addRuleButtonLabel\" class=\"cax-column-filter-add-button cax-button-text cax-button-sm\" (click)=\"addConstraint()\" pRipple>\r\n                        <PlusIcon *ngIf=\"!addRuleIconTemplate\" [styleClass]=\"'cax-button-icon-left'\" />\r\n                        <ng-template *ngTemplateOutlet=\"addRuleIconTemplate\"></ng-template>\r\n                    </button>\r\n                </div>\r\n                <div class=\"cax-column-filter-buttonbar\" *ngIf=\"showButtons\">\r\n                    <button\r\n                        #clearBtn\r\n                        *ngIf=\"showClearButton\"\r\n                        type=\"button\"\r\n                        caxButton\r\n                        class=\"cax-button-outlined cax-button-danger cax-button-sm\"\r\n                        (click)=\"clearFilter()\"\r\n                        [attr.aria-label]=\"clearButtonLabel\"\r\n                        [label]=\"clearButtonLabel\"\r\n                        pRipple\r\n                    ></button>\r\n                    <button *ngIf=\"showApplyButton\" type=\"button\" caxButton (click)=\"applyFilter()\" class=\"cax-button-sm\" [label]=\"applyButtonLabel\" pRipple [attr.aria-label]=\"applyButtonLabel\"></button>\r\n                </div>\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template #custom>\r\n            <div class=\"cax-column-filter-custom-container\">\r\n                <div>\r\n                    <div class=\"cax-column-filter-custom-list-header\" (click)=\"toggleCustomFilterList()\">\r\n                        <span *ngIf=\"!selectedCustomFilter?.label?.length\">Select a condition</span>\r\n                        <div *ngIf=\"selectedCustomFilter\">{{ selectedCustomFilter.label }}</div>\r\n                        <i class=\"cax cax-alt-arrow-down\"></i>\r\n                    </div>\r\n                    <div class=\"cax-column-filter-custom-list\" *ngIf=\"customFilterListVisible\">\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of commonFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                        <cax-divider [style]=\"{margin: 0}\"></cax-divider>\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of stringFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                        <cax-divider [style]=\"{margin: 0}\"></cax-divider>\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of numberFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                        <cax-divider [style]=\"{margin: 0}\"></cax-divider>\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of dateFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"isCustomStringFilterSelected\">\r\n                    <cax-inputtext [(ngModel)]=\"customInputFilter\" [clearIcon]=\"false\"></cax-inputtext>\r\n                </div>\r\n                <div *ngIf=\"isCustomNumberFilterSelected\" style=\"display: flex; gap: 12px\">\r\n                    <cax-inputNumber [(ngModel)]=\"customNumberFilter1\"></cax-inputNumber>\r\n                    <cax-inputNumber [(ngModel)]=\"customNumberFilter2\" *ngIf=\"selectedCustomFilter.key === 'gtlt'\"></cax-inputNumber>\r\n                </div>\r\n                <div *ngIf=\"isCustomDateFilterSelected && selectedCustomFilter.key !== 'today'\">\r\n                    <cax-calendar [(ngModel)]=\"customDateFilter\" [showIcon]=\"true\" iconDisplay=\"input\"></cax-calendar>\r\n                </div>\r\n                <div class=\"cax-column-filter-custom-buttons\">\r\n                    <cax-button (click)=\"onClearCustomFilters()\" [disabled]=\"!selectedCustomFilter\" [label]=\"'Clear'\" [severity]=\"'danger'\" outlined=\"true\"></cax-button>\r\n                    <cax-button (click)=\"onApplyCustomFilters()\" [label]=\"'Apply'\"></cax-button>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: field }\"></ng-container>\r\n    </div>\r\n</div>\r\n" }]
+                    }, template: "<div class=\"cax-column-filter\" [ngClass]=\"{ 'cax-column-filter-row': display === 'row', 'cax-column-filter-menu': display === 'menu' }\">\n    <cax-columnFilterFormElement\n        *ngIf=\"display === 'row'\"\n        class=\"cax-fluid\"\n        [type]=\"type\"\n        [field]=\"field\"\n        [ariaLabel]=\"ariaLabel\"\n        [filterConstraint]=\"dt.filters[field]\"\n        [filterTemplate]=\"filterTemplate\"\n        [placeholder]=\"placeholder\"\n        [minFractionDigits]=\"minFractionDigits\"\n        [maxFractionDigits]=\"maxFractionDigits\"\n        [prefix]=\"prefix\"\n        [suffix]=\"suffix\"\n        [locale]=\"locale\"\n        [localeMatcher]=\"localeMatcher\"\n        [currency]=\"currency\"\n        [currencyDisplay]=\"currencyDisplay\"\n        [useGrouping]=\"useGrouping\"\n        [showButtons]=\"showButtons\"\n    ></cax-columnFilterFormElement>\n    <button\n        #icon\n        *ngIf=\"showMenuButton\"\n        type=\"button\"\n        class=\"cax-column-filter-menu-button cax-link\"\n        aria-haspopup=\"true\"\n        [attr.aria-label]=\"filterMenuButtonAriaLabel\"\n        [attr.aria-controls]=\"overlayVisible ? overlayId : null\"\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"{ 'cax-column-filter-menu-button-open': overlayVisible, 'cax-column-filter-menu-button-active': hasFilter() }\"\n        (click)=\"toggleMenu()\"\n        (keydown)=\"onToggleButtonKeyDown($event)\"\n    >\n        <i *ngIf=\"!filterIconTemplate\" [ngClass]=\"'pi-filter-icon'\" class=\"cax cax-filter\"></i>\n        <span class=\"pi-filter-icon\" *ngIf=\"filterIconTemplate\">\n            <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\n        </span>\n    </button>\n    <button #icon *ngIf=\"showClearButton && display === 'row'\" [ngClass]=\"{ 'cax-hidden-space': !hasRowFilter() }\" type=\"button\" class=\"cax-column-filter-clear-button cax-link\" (click)=\"clearFilter()\" [attr.aria-label]=\"clearButtonLabel\">\n        <FilterSlashIcon *ngIf=\"!clearFilterIconTemplate\" />\n        <ng-template *ngTemplateOutlet=\"clearFilterIconTemplate\"></ng-template>\n    </button>\n    <div\n        *ngIf=\"showMenu && overlayVisible\"\n        [ngClass]=\"{ 'cax-column-filter-overlay cax-component cax-fluid': true, 'cax-column-filter-overlay-menu': display === 'menu' }\"\n        [id]=\"overlayId\"\n        [attr.aria-modal]=\"true\"\n        role=\"dialog\"\n        (click)=\"onContentClick()\"\n        [@overlayAnimation]=\"'visible'\"\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n        (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n        (keydown.escape)=\"onEscape()\"\n    >\n        <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: field }\"></ng-container>\n        <ul *ngIf=\"display === 'row'; else menu\" class=\"cax-column-filter-row-items\">\n            <li\n                class=\"cax-column-filter-row-item\"\n                *ngFor=\"let matchMode of matchModes; let i = index\"\n                (click)=\"onRowMatchModeChange(matchMode.value)\"\n                (keydown)=\"onRowMatchModeKeyDown($event)\"\n                (keydown.enter)=\"this.onRowMatchModeChange(matchMode.value)\"\n                [ngClass]=\"{ 'cax-highlight': isRowMatchModeSelected(matchMode.value) }\"\n                [attr.tabindex]=\"i === 0 ? '0' : null\"\n            >\n                {{ matchMode.label }}\n            </li>\n            <li class=\"cax-column-filter-separator\"></li>\n            <li class=\"cax-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onRowMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">{{ noFilterLabel }}</li>\n        </ul>\n        <ng-template #menu>\n            <div *ngIf=\"display === 'menu'\" class=\"cax-column-filter-menu-container\">\n                <cax-dropdown *ngIf=\"isShowOperator\" [options]=\"operatorOptions\" [ngModel]=\"operator\" (ngModelChange)=\"onOperatorChange($event)\" styleClass=\"cax-column-filter-operator-dropdown cax-fluid\"></cax-dropdown>\n\n                <div class=\"cax-column-filter-constraints\">\n                    <div *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\" class=\"cax-column-filter-constraint\">\n                        <cax-dropdown\n                            *ngIf=\"showMatchModes && matchModes\"\n                            [options]=\"matchModes\"\n                            [ngModel]=\"fieldConstraint.matchMode\"\n                            (ngModelChange)=\"onMenuMatchModeChange($event, fieldConstraint)\"\n                            styleClass=\"cax-column-filter-matchmode-dropdown cax-fluid\"\n                        ></cax-dropdown>\n                        <cax-columnFilterFormElement\n                            class=\"cax-fluid\"\n                            [type]=\"type\"\n                            [field]=\"field\"\n                            [filterConstraint]=\"fieldConstraint\"\n                            [filterTemplate]=\"filterTemplate\"\n                            [placeholder]=\"placeholder\"\n                            [minFractionDigits]=\"minFractionDigits\"\n                            [maxFractionDigits]=\"maxFractionDigits\"\n                            [prefix]=\"prefix\"\n                            [suffix]=\"suffix\"\n                            [locale]=\"locale\"\n                            [localeMatcher]=\"localeMatcher\"\n                            [currency]=\"currency\"\n                            [currencyDisplay]=\"currencyDisplay\"\n                            [useGrouping]=\"useGrouping\"\n                        ></cax-columnFilterFormElement>\n                        <button\n                            *ngIf=\"showRemoveIcon\"\n                            type=\"button\"\n                            caxButton\n                            severity=\"danger\"\n                            outlined=\"true\"\n                            class=\"cax-column-filter-remove-button cax-button-sm\"\n                            (click)=\"removeConstraint(fieldConstraint)\"\n                            caxRipple\n                            [attr.aria-label]=\"removeRuleButtonLabel\"\n                            [label]=\"removeRuleButtonLabel\"\n                        >\n                            <TrashIcon *ngIf=\"!removeRuleIconTemplate\" [styleClass]=\"'cax-button-icon-left'\" />\n                            <ng-template *ngTemplateOutlet=\"removeRuleIconTemplate\"></ng-template>\n                        </button>\n                    </div>\n                </div>\n\n                <button *ngIf=\"isShowAddConstraint\" type=\"button\" caxButton [label]=\"addRuleButtonLabel\" [attr.aria-label]=\"addRuleButtonLabel\" class=\"cax-column-filter-add-button cax-button-text cax-button-sm\" (click)=\"addConstraint()\" caxRipple>\n                    <PlusIcon *ngIf=\"!addRuleIconTemplate\" [styleClass]=\"'cax-button-icon-left'\" />\n                    <ng-template *ngTemplateOutlet=\"addRuleIconTemplate\"></ng-template>\n                </button>\n\n                <div class=\"cax-column-filter-buttonbar\" *ngIf=\"showButtons\">\n                    <button\n                        #clearBtn\n                        *ngIf=\"showClearButton\"\n                        type=\"button\"\n                        caxButton\n                        class=\"cax-button-outlined cax-button-danger cax-button-sm\"\n                        (click)=\"clearFilter()\"\n                        [attr.aria-label]=\"clearButtonLabel\"\n                        [label]=\"clearButtonLabel\"\n                        pRipple\n                    ></button>\n                    <button *ngIf=\"showApplyButton\" type=\"button\" caxButton (click)=\"applyFilter()\" class=\"cax-button-sm\" [label]=\"applyButtonLabel\" pRipple [attr.aria-label]=\"applyButtonLabel\"></button>\n                </div>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: field }\"></ng-container>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -4401,14 +4208,14 @@ class SortIcon {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: SortIcon, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: SortIcon, isStandalone: true, selector: "cax-sortIcon", inputs: { field: "field", disabled: "disabled" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<ng-container *ngIf=\"!dt.sortIconTemplate\">\r\n    <ng-container *ngIf=\"isMultiSorted(); else noBadge\">\r\n        <button [disabled]=\"disabled\" caxBadge [badgeSize]=\"'xs'\" [value]=\"getBadgeValue()\" class=\"cax-sort-icon-button\" [ngClass]=\"{ 'cax-sort-icon-button-active': sortOrder !== 0 }\">\r\n            <i class=\"cax cax-sort-vertical\" [styleClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 0\"></i>\r\n            <i class=\"cax cax-sort-from-bottom-to-top\" style=\"color: var(--primary-color)\" [styleClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 1\"></i>\r\n            <i class=\"cax cax-sort-from-top-to-bottom\" style=\"color: var(--primary-color)\" [styleClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === -1\"></i>\r\n        </button>\r\n    </ng-container>\r\n    <ng-template #noBadge>\r\n        <button [disabled]=\"disabled\" class=\"cax-sort-icon-button\" [ngClass]=\"{ 'cax-sort-icon-button-active': sortOrder !== 0 }\">\r\n            <i class=\"cax cax-sort-vertical\" [styleClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 0\"></i>\r\n            <i class=\"cax cax-sort-from-bottom-to-top\" style=\"color: var(--primary-color)\" [styleClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 1\"></i>\r\n            <i class=\"cax cax-sort-from-top-to-bottom\" style=\"color: var(--primary-color)\" [styleClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === -1\"></i>\r\n        </button>\r\n    </ng-template>\r\n</ng-container>\r\n<span *ngIf=\"dt.sortIconTemplate\" class=\"cax-sortable-column-icon\">\r\n    <ng-template *ngTemplateOutlet=\"dt.sortIconTemplate; context: { $implicit: sortOrder }\"></ng-template>\r\n</span>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "directive", type: i3$2.BadgeDirective, selector: "[caxBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "caxBadge", "value", "badgeSeverity", "severity", "badgeStyle", "badgeStyleClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SortIcon, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: SortIcon, isStandalone: true, selector: "cax-sortIcon", inputs: { field: "field", disabled: "disabled" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<ng-container *ngIf=\"!dt.sortIconTemplate\">\n    <ng-container *ngIf=\"isMultiSorted(); else noBadge\">\n        <button [disabled]=\"disabled\" caxBadge [badgeSize]=\"'xs'\" [value]=\"getBadgeValue()\" class=\"cax-sort-icon-button\" [ngClass]=\"{ 'cax-sort-icon-button-active': sortOrder !== 0 }\">\n            <i class=\"cax cax-sort-vertical\" [ngClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 0\"></i>\n            <i class=\"cax cax-sort-from-bottom-to-top\" style=\"color: var(--primary-600)\" [ngClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 1\"></i>\n            <i class=\"cax cax-sort-from-top-to-bottom\" style=\"color: var(--primary-600)\" [ngClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === -1\"></i>\n        </button>\n    </ng-container>\n    <ng-template #noBadge>\n        <button [disabled]=\"disabled\" class=\"cax-sort-icon-button\" [ngClass]=\"{ 'cax-sort-icon-button-active': sortOrder !== 0 }\">\n            <i class=\"cax cax-sort-vertical\" [ngClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 0\"></i>\n            <i class=\"cax cax-sort-from-bottom-to-top\" style=\"color: var(--primary-600)\" [ngClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 1\"></i>\n            <i class=\"cax cax-sort-from-top-to-bottom\" style=\"color: var(--primary-600)\" [ngClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === -1\"></i>\n        </button>\n    </ng-template>\n</ng-container>\n<span *ngIf=\"dt.sortIconTemplate\" class=\"cax-sortable-column-icon\">\n    <ng-template *ngTemplateOutlet=\"dt.sortIconTemplate; context: { $implicit: sortOrder }\"></ng-template>\n</span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "directive", type: i3$2.BadgeDirective, selector: "[caxBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "caxBadge", "value", "badgeSeverity", "severity", "badgeStyle", "badgeStyleClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: SortIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SortIcon, decorators: [{
             type: Component,
             args: [{ selector: 'cax-sortIcon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, ButtonModule, BadgeModule], host: {
                         class: 'cax-element'
-                    }, template: "<ng-container *ngIf=\"!dt.sortIconTemplate\">\r\n    <ng-container *ngIf=\"isMultiSorted(); else noBadge\">\r\n        <button [disabled]=\"disabled\" caxBadge [badgeSize]=\"'xs'\" [value]=\"getBadgeValue()\" class=\"cax-sort-icon-button\" [ngClass]=\"{ 'cax-sort-icon-button-active': sortOrder !== 0 }\">\r\n            <i class=\"cax cax-sort-vertical\" [styleClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 0\"></i>\r\n            <i class=\"cax cax-sort-from-bottom-to-top\" style=\"color: var(--primary-color)\" [styleClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 1\"></i>\r\n            <i class=\"cax cax-sort-from-top-to-bottom\" style=\"color: var(--primary-color)\" [styleClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === -1\"></i>\r\n        </button>\r\n    </ng-container>\r\n    <ng-template #noBadge>\r\n        <button [disabled]=\"disabled\" class=\"cax-sort-icon-button\" [ngClass]=\"{ 'cax-sort-icon-button-active': sortOrder !== 0 }\">\r\n            <i class=\"cax cax-sort-vertical\" [styleClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 0\"></i>\r\n            <i class=\"cax cax-sort-from-bottom-to-top\" style=\"color: var(--primary-color)\" [styleClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 1\"></i>\r\n            <i class=\"cax cax-sort-from-top-to-bottom\" style=\"color: var(--primary-color)\" [styleClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === -1\"></i>\r\n        </button>\r\n    </ng-template>\r\n</ng-container>\r\n<span *ngIf=\"dt.sortIconTemplate\" class=\"cax-sortable-column-icon\">\r\n    <ng-template *ngTemplateOutlet=\"dt.sortIconTemplate; context: { $implicit: sortOrder }\"></ng-template>\r\n</span>\r\n" }]
+                    }, template: "<ng-container *ngIf=\"!dt.sortIconTemplate\">\n    <ng-container *ngIf=\"isMultiSorted(); else noBadge\">\n        <button [disabled]=\"disabled\" caxBadge [badgeSize]=\"'xs'\" [value]=\"getBadgeValue()\" class=\"cax-sort-icon-button\" [ngClass]=\"{ 'cax-sort-icon-button-active': sortOrder !== 0 }\">\n            <i class=\"cax cax-sort-vertical\" [ngClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 0\"></i>\n            <i class=\"cax cax-sort-from-bottom-to-top\" style=\"color: var(--primary-600)\" [ngClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 1\"></i>\n            <i class=\"cax cax-sort-from-top-to-bottom\" style=\"color: var(--primary-600)\" [ngClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === -1\"></i>\n        </button>\n    </ng-container>\n    <ng-template #noBadge>\n        <button [disabled]=\"disabled\" class=\"cax-sort-icon-button\" [ngClass]=\"{ 'cax-sort-icon-button-active': sortOrder !== 0 }\">\n            <i class=\"cax cax-sort-vertical\" [ngClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 0\"></i>\n            <i class=\"cax cax-sort-from-bottom-to-top\" style=\"color: var(--primary-600)\" [ngClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === 1\"></i>\n            <i class=\"cax cax-sort-from-top-to-bottom\" style=\"color: var(--primary-600)\" [ngClass]=\"'cax-sortable-column-icon'\" *ngIf=\"sortOrder === -1\"></i>\n        </button>\n    </ng-template>\n</ng-container>\n<span *ngIf=\"dt.sortIconTemplate\" class=\"cax-sortable-column-icon\">\n    <ng-template *ngTemplateOutlet=\"dt.sortIconTemplate; context: { $implicit: sortOrder }\"></ng-template>\n</span>\n" }]
         }], ctorParameters: () => [{ type: Table }, { type: i0.ChangeDetectorRef }], propDecorators: { field: [{
                 type: Input
             }], disabled: [{
@@ -4463,14 +4270,14 @@ class TableCheckbox {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TableCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: TableCheckbox, isStandalone: true, selector: "cax-tableCheckbox", inputs: { disabled: ["disabled", "disabled", booleanAttribute], value: "value", index: ["index", "index", numberAttribute], inputId: "inputId", name: "name", required: ["required", "required", booleanAttribute], ariaLabel: "ariaLabel" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; justify-content: center\" (mouseenter)=\"isHovered = true\" (mouseleave)=\"isHovered = false\">\r\n    <div *ngIf=\"index < 0 || isHovered || checked\" class=\"cax-checkbox cax-component\" [ngClass]=\"{ 'cax-checkbox-focused': focused, 'cax-checkbox-disabled': disabled }\" (click)=\"onClick($event)\">\r\n        <div class=\"cax-hidden-accessible\">\r\n            <input type=\"checkbox\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\" [attr.required]=\"required\" [attr.aria-label]=\"ariaLabel\" [tabindex]=\"disabled ? null : '0'\" />\r\n        </div>\r\n        <div #box [ngClass]=\"{ 'cax-checkbox-box cax-component': true, 'cax-highlight': checked, 'cax-focus': focused, 'cax-disabled': disabled }\">\r\n            <ng-container *ngIf=\"!dt.checkboxIconTemplate\">\r\n                <CheckIcon [styleClass]=\"'cax-checkbox-icon'\" *ngIf=\"checked\" />\r\n            </ng-container>\r\n            <span *ngIf=\"dt.checkboxIconTemplate\">\r\n                <ng-template *ngTemplateOutlet=\"dt.checkboxIconTemplate; context: { $implicit: checked }\"></ng-template>\r\n            </span>\r\n        </div>\r\n    </div>\r\n    <span *ngIf=\"index > -1 && !isHovered && !checked\">{{ index + 1 }}</span>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckIcon, selector: "CheckIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: TableCheckbox, isStandalone: true, selector: "cax-tableCheckbox", inputs: { disabled: ["disabled", "disabled", booleanAttribute], value: "value", index: ["index", "index", numberAttribute], inputId: "inputId", name: "name", required: ["required", "required", booleanAttribute], ariaLabel: "ariaLabel" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div class=\"cax-table-checkbox-container\" (mouseenter)=\"isHovered = true\" (mouseleave)=\"isHovered = false\">\n    <div *ngIf=\"index < 0 || isHovered || checked\" class=\"cax-checkbox cax-component\" [ngClass]=\"{ 'cax-checkbox-focused': focused, 'cax-checkbox-disabled': disabled, 'cax-checkbox-checked': checked }\" (click)=\"onClick($event)\">\n        <div class=\"cax-hidden-accessible\">\n            <input type=\"checkbox\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\" [attr.required]=\"required\" [attr.aria-label]=\"ariaLabel\" [tabindex]=\"disabled ? null : '0'\" />\n        </div>\n        <div\n            #box\n            [ngClass]=\"{ 'cax-checkbox-box cax-component': true, 'cax-highlight': checked, 'cax-focus': focused, 'cax-disabled': disabled, 'cax-checkbox-sm': dt.fontSize === 'sm', 'cax-checkbox-md': dt.fontSize === 'md', 'cax-checkbox-lg': dt.fontSize === 'lg' || dt.fontSize === 'xl' }\"\n        >\n            <ng-container *ngIf=\"checked\">\n                <ng-container *ngIf=\"!dt.checkboxIconTemplate\">\n                    <span class=\"cax cax-check cax-checkbox-icon\"></span>\n                </ng-container>\n                <span class=\"cax-checkbox-icon\" *ngIf=\"dt.checkboxIconTemplate\">\n                    <ng-template *ngTemplateOutlet=\"dt.checkboxIconTemplate; context: { $implicit: checked }\"></ng-template>\n                </span>\n            </ng-container>\n        </div>\n    </div>\n    <span class=\"cax-table-row-number\" *ngIf=\"index > -1 && !isHovered && !checked\">{{ index + 1 }}</span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TableCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableCheckbox, decorators: [{
             type: Component,
-            args: [{ selector: 'cax-tableCheckbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, CheckIcon], host: {
+            args: [{ selector: 'cax-tableCheckbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], host: {
                         class: 'cax-element'
-                    }, template: "<div style=\"display: flex; align-items: center; justify-content: center\" (mouseenter)=\"isHovered = true\" (mouseleave)=\"isHovered = false\">\r\n    <div *ngIf=\"index < 0 || isHovered || checked\" class=\"cax-checkbox cax-component\" [ngClass]=\"{ 'cax-checkbox-focused': focused, 'cax-checkbox-disabled': disabled }\" (click)=\"onClick($event)\">\r\n        <div class=\"cax-hidden-accessible\">\r\n            <input type=\"checkbox\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\" [attr.required]=\"required\" [attr.aria-label]=\"ariaLabel\" [tabindex]=\"disabled ? null : '0'\" />\r\n        </div>\r\n        <div #box [ngClass]=\"{ 'cax-checkbox-box cax-component': true, 'cax-highlight': checked, 'cax-focus': focused, 'cax-disabled': disabled }\">\r\n            <ng-container *ngIf=\"!dt.checkboxIconTemplate\">\r\n                <CheckIcon [styleClass]=\"'cax-checkbox-icon'\" *ngIf=\"checked\" />\r\n            </ng-container>\r\n            <span *ngIf=\"dt.checkboxIconTemplate\">\r\n                <ng-template *ngTemplateOutlet=\"dt.checkboxIconTemplate; context: { $implicit: checked }\"></ng-template>\r\n            </span>\r\n        </div>\r\n    </div>\r\n    <span *ngIf=\"index > -1 && !isHovered && !checked\">{{ index + 1 }}</span>\r\n</div>\r\n" }]
+                    }, template: "<div class=\"cax-table-checkbox-container\" (mouseenter)=\"isHovered = true\" (mouseleave)=\"isHovered = false\">\n    <div *ngIf=\"index < 0 || isHovered || checked\" class=\"cax-checkbox cax-component\" [ngClass]=\"{ 'cax-checkbox-focused': focused, 'cax-checkbox-disabled': disabled, 'cax-checkbox-checked': checked }\" (click)=\"onClick($event)\">\n        <div class=\"cax-hidden-accessible\">\n            <input type=\"checkbox\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\" [attr.required]=\"required\" [attr.aria-label]=\"ariaLabel\" [tabindex]=\"disabled ? null : '0'\" />\n        </div>\n        <div\n            #box\n            [ngClass]=\"{ 'cax-checkbox-box cax-component': true, 'cax-highlight': checked, 'cax-focus': focused, 'cax-disabled': disabled, 'cax-checkbox-sm': dt.fontSize === 'sm', 'cax-checkbox-md': dt.fontSize === 'md', 'cax-checkbox-lg': dt.fontSize === 'lg' || dt.fontSize === 'xl' }\"\n        >\n            <ng-container *ngIf=\"checked\">\n                <ng-container *ngIf=\"!dt.checkboxIconTemplate\">\n                    <span class=\"cax cax-check cax-checkbox-icon\"></span>\n                </ng-container>\n                <span class=\"cax-checkbox-icon\" *ngIf=\"dt.checkboxIconTemplate\">\n                    <ng-template *ngTemplateOutlet=\"dt.checkboxIconTemplate; context: { $implicit: checked }\"></ng-template>\n                </span>\n            </ng-container>\n        </div>\n    </div>\n    <span class=\"cax-table-row-number\" *ngIf=\"index > -1 && !isHovered && !checked\">{{ index + 1 }}</span>\n</div>\n" }]
         }], ctorParameters: () => [{ type: Table }, { type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -4498,6 +4305,7 @@ class TableHeaderCheckbox {
     inputId;
     name;
     ariaLabel;
+    required;
     checked;
     focused;
     selectionChangeSubscription;
@@ -4554,14 +4362,14 @@ class TableHeaderCheckbox {
             return ObjectUtils.isNotEmpty(selectableVal) && ObjectUtils.isNotEmpty(this.dt.selection) && selectableVal.every((v) => this.dt.selection.some((s) => this.dt.equals(v, s)));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TableHeaderCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: TableHeaderCheckbox, isStandalone: true, selector: "cax-tableHeaderCheckbox", inputs: { disabled: ["disabled", "disabled", booleanAttribute], inputId: "inputId", name: "name", ariaLabel: "ariaLabel" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; justify-content: center\">\r\n    <div class=\"cax-checkbox cax-component\" [ngClass]=\"{ 'cax-checkbox-focused': focused, 'cax-checkbox-disabled': isDisabled() }\" (click)=\"onClick($event)\">\r\n        <div class=\"cax-hidden-accessible\">\r\n            <input #cb type=\"checkbox\" [tabindex]=\"disabled ? null : '0'\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"isDisabled()\" [attr.aria-label]=\"ariaLabel\" />\r\n        </div>\r\n        <div #box [ngClass]=\"{ 'cax-checkbox-box': true, 'cax-highlight': checked, 'cax-focus': focused, 'cax-disabled': isDisabled() }\">\r\n            <ng-container *ngIf=\"!dt.headerCheckboxIconTemplate\">\r\n                <CheckIcon *ngIf=\"checked\" [styleClass]=\"'cax-checkbox-icon'\" />\r\n            </ng-container>\r\n            <span class=\"cax-checkbox-icon\" *ngIf=\"dt.headerCheckboxIconTemplate\">\r\n                <ng-template *ngTemplateOutlet=\"dt.headerCheckboxIconTemplate; context: { $implicit: checked }\"></ng-template>\r\n            </span>\r\n        </div>\r\n    </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckIcon, selector: "CheckIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableHeaderCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: TableHeaderCheckbox, isStandalone: true, selector: "cax-tableHeaderCheckbox", inputs: { disabled: ["disabled", "disabled", booleanAttribute], inputId: "inputId", name: "name", ariaLabel: "ariaLabel", required: ["required", "required", booleanAttribute] }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div class=\"cax-table-checkbox-container\">\n    <div class=\"cax-checkbox cax-component\" [ngClass]=\"{ 'cax-checkbox-focused': focused, 'cax-checkbox-disabled': isDisabled(), 'cax-checkbox-checked': checked }\" (click)=\"onClick($event)\">\n        <div class=\"cax-hidden-accessible\">\n            <input\n                #cb\n                type=\"checkbox\"\n                [tabindex]=\"isDisabled() ? null : '0'\"\n                [attr.id]=\"inputId\"\n                [attr.name]=\"name\"\n                [checked]=\"checked\"\n                (focus)=\"onFocus()\"\n                (blur)=\"onBlur()\"\n                [disabled]=\"isDisabled()\"\n                [attr.required]=\"required\"\n                [attr.aria-label]=\"ariaLabel\"\n            />\n        </div>\n        <div\n            #box\n            [ngClass]=\"{ 'cax-checkbox-box cax-component': true, 'cax-highlight': checked, 'cax-focus': focused, 'cax-disabled': isDisabled(), 'cax-checkbox-sm': dt.fontSize === 'sm', 'cax-checkbox-md': dt.fontSize === 'md', 'cax-checkbox-lg': dt.fontSize === 'lg' || dt.fontSize === 'xl' }\"\n        >\n            <ng-container *ngIf=\"checked\">\n                <ng-container *ngIf=\"!dt.headerCheckboxIconTemplate\">\n                    <span class=\"cax cax-check cax-checkbox-icon\"></span>\n                </ng-container>\n                <span class=\"cax-checkbox-icon\" *ngIf=\"dt.headerCheckboxIconTemplate\">\n                    <ng-template *ngTemplateOutlet=\"dt.headerCheckboxIconTemplate; context: { $implicit: checked }\"></ng-template>\n                </span>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TableHeaderCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableHeaderCheckbox, decorators: [{
             type: Component,
-            args: [{ selector: 'cax-tableHeaderCheckbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, CheckIcon], host: {
+            args: [{ selector: 'cax-tableHeaderCheckbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], host: {
                         class: 'cax-element'
-                    }, template: "<div style=\"display: flex; align-items: center; justify-content: center\">\r\n    <div class=\"cax-checkbox cax-component\" [ngClass]=\"{ 'cax-checkbox-focused': focused, 'cax-checkbox-disabled': isDisabled() }\" (click)=\"onClick($event)\">\r\n        <div class=\"cax-hidden-accessible\">\r\n            <input #cb type=\"checkbox\" [tabindex]=\"disabled ? null : '0'\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"isDisabled()\" [attr.aria-label]=\"ariaLabel\" />\r\n        </div>\r\n        <div #box [ngClass]=\"{ 'cax-checkbox-box': true, 'cax-highlight': checked, 'cax-focus': focused, 'cax-disabled': isDisabled() }\">\r\n            <ng-container *ngIf=\"!dt.headerCheckboxIconTemplate\">\r\n                <CheckIcon *ngIf=\"checked\" [styleClass]=\"'cax-checkbox-icon'\" />\r\n            </ng-container>\r\n            <span class=\"cax-checkbox-icon\" *ngIf=\"dt.headerCheckboxIconTemplate\">\r\n                <ng-template *ngTemplateOutlet=\"dt.headerCheckboxIconTemplate; context: { $implicit: checked }\"></ng-template>\r\n            </span>\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
+                    }, template: "<div class=\"cax-table-checkbox-container\">\n    <div class=\"cax-checkbox cax-component\" [ngClass]=\"{ 'cax-checkbox-focused': focused, 'cax-checkbox-disabled': isDisabled(), 'cax-checkbox-checked': checked }\" (click)=\"onClick($event)\">\n        <div class=\"cax-hidden-accessible\">\n            <input\n                #cb\n                type=\"checkbox\"\n                [tabindex]=\"isDisabled() ? null : '0'\"\n                [attr.id]=\"inputId\"\n                [attr.name]=\"name\"\n                [checked]=\"checked\"\n                (focus)=\"onFocus()\"\n                (blur)=\"onBlur()\"\n                [disabled]=\"isDisabled()\"\n                [attr.required]=\"required\"\n                [attr.aria-label]=\"ariaLabel\"\n            />\n        </div>\n        <div\n            #box\n            [ngClass]=\"{ 'cax-checkbox-box cax-component': true, 'cax-highlight': checked, 'cax-focus': focused, 'cax-disabled': isDisabled(), 'cax-checkbox-sm': dt.fontSize === 'sm', 'cax-checkbox-md': dt.fontSize === 'md', 'cax-checkbox-lg': dt.fontSize === 'lg' || dt.fontSize === 'xl' }\"\n        >\n            <ng-container *ngIf=\"checked\">\n                <ng-container *ngIf=\"!dt.headerCheckboxIconTemplate\">\n                    <span class=\"cax cax-check cax-checkbox-icon\"></span>\n                </ng-container>\n                <span class=\"cax-checkbox-icon\" *ngIf=\"dt.headerCheckboxIconTemplate\">\n                    <ng-template *ngTemplateOutlet=\"dt.headerCheckboxIconTemplate; context: { $implicit: checked }\"></ng-template>\n                </span>\n            </ng-container>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: Table }, { type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -4571,6 +4379,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 type: Input
             }], ariaLabel: [{
                 type: Input
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
 class TableRadioButton {
@@ -4619,14 +4430,14 @@ class TableRadioButton {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TableRadioButton, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: TableRadioButton, isStandalone: true, selector: "cax-tableRadioButton", inputs: { disabled: ["disabled", "disabled", booleanAttribute], value: "value", index: ["index", "index", numberAttribute], inputId: "inputId", name: "name", ariaLabel: "ariaLabel" }, host: { classAttribute: "cax-element" }, viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["rb"], descendants: true }], ngImport: i0, template: "<div class=\"cax-radiobutton cax-component\" [ngClass]=\"{ 'cax-radiobutton-focused': focused, 'cax-radiobutton-checked': checked, 'cax-radiobutton-disabled': disabled }\" (click)=\"onClick($event)\">\r\n    <div class=\"cax-hidden-accessible\">\r\n        <input #rb type=\"radio\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\" [attr.aria-label]=\"ariaLabel\" [tabindex]=\"disabled ? null : '0'\" />\r\n    </div>\r\n    <div #box [ngClass]=\"{ 'cax-radiobutton-box cax-component': true, 'cax-highlight': checked, 'cax-focus': focused, 'cax-disabled': disabled }\">\r\n        <div class=\"cax-radiobutton-icon\"></div>\r\n    </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableRadioButton, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: TableRadioButton, isStandalone: true, selector: "cax-tableRadioButton", inputs: { disabled: ["disabled", "disabled", booleanAttribute], value: "value", index: ["index", "index", numberAttribute], inputId: "inputId", name: "name", ariaLabel: "ariaLabel" }, host: { classAttribute: "cax-element" }, viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["rb"], descendants: true }], ngImport: i0, template: "<div class=\"cax-radiobutton cax-component\" [ngClass]=\"{ 'cax-radiobutton-focused': focused, 'cax-radiobutton-checked': checked, 'cax-radiobutton-disabled': disabled }\" (click)=\"onClick($event)\">\n    <div class=\"cax-hidden-accessible\">\n        <input #rb type=\"radio\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\" [attr.aria-label]=\"ariaLabel\" [tabindex]=\"disabled ? null : '0'\" />\n    </div>\n    <div #box [ngClass]=\"{ 'cax-radiobutton-box cax-component': true, 'cax-highlight': checked, 'cax-focus': focused, 'cax-disabled': disabled }\">\n        <div class=\"cax-radiobutton-icon\"></div>\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TableRadioButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableRadioButton, decorators: [{
             type: Component,
             args: [{ selector: 'cax-tableRadioButton', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], host: {
                         class: 'cax-element'
-                    }, template: "<div class=\"cax-radiobutton cax-component\" [ngClass]=\"{ 'cax-radiobutton-focused': focused, 'cax-radiobutton-checked': checked, 'cax-radiobutton-disabled': disabled }\" (click)=\"onClick($event)\">\r\n    <div class=\"cax-hidden-accessible\">\r\n        <input #rb type=\"radio\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\" [attr.aria-label]=\"ariaLabel\" [tabindex]=\"disabled ? null : '0'\" />\r\n    </div>\r\n    <div #box [ngClass]=\"{ 'cax-radiobutton-box cax-component': true, 'cax-highlight': checked, 'cax-focus': focused, 'cax-disabled': disabled }\">\r\n        <div class=\"cax-radiobutton-icon\"></div>\r\n    </div>\r\n</div>\r\n" }]
+                    }, template: "<div class=\"cax-radiobutton cax-component\" [ngClass]=\"{ 'cax-radiobutton-focused': focused, 'cax-radiobutton-checked': checked, 'cax-radiobutton-disabled': disabled }\" (click)=\"onClick($event)\">\n    <div class=\"cax-hidden-accessible\">\n        <input #rb type=\"radio\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\" [attr.aria-label]=\"ariaLabel\" [tabindex]=\"disabled ? null : '0'\" />\n    </div>\n    <div #box [ngClass]=\"{ 'cax-radiobutton-box cax-component': true, 'cax-highlight': checked, 'cax-focus': focused, 'cax-disabled': disabled }\">\n        <div class=\"cax-radiobutton-icon\"></div>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: Table }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -4657,10 +4468,10 @@ class CancelEditableRow {
         this.dt.cancelRowEdit(this.editableRow.data);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CancelEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: CancelEditableRow, isStandalone: true, selector: "[caxCancelEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CancelEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: CancelEditableRow, isStandalone: true, selector: "[caxCancelEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CancelEditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CancelEditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxCancelEditableRow]',
@@ -4712,10 +4523,10 @@ class ContextMenuRow {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ContextMenuRow, deps: [{ token: Table }, { token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: ContextMenuRow, isStandalone: true, selector: "[caxContextMenuRow]", inputs: { data: ["caxContextMenuRow", "data"], index: ["caxContextMenuRowIndex", "index"], caxContextMenuRowDisabled: ["caxContextMenuRowDisabled", "caxContextMenuRowDisabled", booleanAttribute] }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "class.cax-highlight-contextmenu": "selected", "attr.tabindex": "isEnabled() ? 0 : undefined" }, classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ContextMenuRow, deps: [{ token: Table }, { token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: ContextMenuRow, isStandalone: true, selector: "[caxContextMenuRow]", inputs: { data: ["caxContextMenuRow", "data"], index: ["caxContextMenuRowIndex", "index"], caxContextMenuRowDisabled: ["caxContextMenuRowDisabled", "caxContextMenuRowDisabled", booleanAttribute] }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "class.cax-highlight-contextmenu": "selected", "attr.tabindex": "isEnabled() ? 0 : undefined" }, classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ContextMenuRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ContextMenuRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxContextMenuRow]',
@@ -4792,10 +4603,10 @@ class FrozenColumn {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FrozenColumn, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: FrozenColumn, isStandalone: true, selector: "[caxFrozenColumn]", inputs: { frozen: "frozen", alignFrozen: "alignFrozen" }, host: { listeners: { "window:resize": "recalculateColumns($event)" }, properties: { "class.cax-frozen-column": "frozen" }, classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FrozenColumn, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: FrozenColumn, isStandalone: true, selector: "[caxFrozenColumn]", inputs: { frozen: "frozen", alignFrozen: "alignFrozen" }, host: { listeners: { "window:resize": "recalculateColumns($event)" }, properties: { "class.cax-frozen-column": "frozen" }, classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FrozenColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FrozenColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxFrozenColumn]',
@@ -4825,10 +4636,10 @@ class InitEditableRow {
         this.dt.initRowEdit(this.editableRow.data);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: InitEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: InitEditableRow, isStandalone: true, selector: "[caxInitEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InitEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: InitEditableRow, isStandalone: true, selector: "[caxInitEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: InitEditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InitEditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxInitEditableRow]',
@@ -4928,10 +4739,10 @@ class ReorderableColumn {
     ngOnDestroy() {
         this.unbindEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ReorderableColumn, deps: [{ token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: ReorderableColumn, isStandalone: true, selector: "[caxReorderableColumn]", inputs: { caxReorderableColumnDisabled: ["caxReorderableColumnDisabled", "caxReorderableColumnDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" }, properties: { "style.cursor": "isEnabled() ? \"move\" : \"default\"" }, classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReorderableColumn, deps: [{ token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: ReorderableColumn, isStandalone: true, selector: "[caxReorderableColumn]", inputs: { caxReorderableColumnDisabled: ["caxReorderableColumnDisabled", "caxReorderableColumnDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" }, properties: { "style.cursor": "isEnabled() ? \"move\" : \"default\"" }, classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ReorderableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReorderableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxReorderableColumn]',
@@ -4960,10 +4771,10 @@ class ReorderableRowHandle {
     ngAfterViewInit() {
         DomHandler.addClass(this.el.nativeElement, 'cax-datatable-reorderablerow-handle');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ReorderableRowHandle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: ReorderableRowHandle, isStandalone: true, selector: "[caxReorderableRowHandle]", host: { classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReorderableRowHandle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: ReorderableRowHandle, isStandalone: true, selector: "[caxReorderableRowHandle]", host: { classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ReorderableRowHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReorderableRowHandle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxReorderableRowHandle]',
@@ -5070,10 +4881,10 @@ class ReorderableRow {
     ngOnDestroy() {
         this.unbindEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ReorderableRow, deps: [{ token: i0.Renderer2 }, { token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: ReorderableRow, isStandalone: true, selector: "[caxReorderableRow]", inputs: { index: ["caxReorderableRow", "index"], caxReorderableRowDisabled: ["caxReorderableRowDisabled", "caxReorderableRowDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" }, classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReorderableRow, deps: [{ token: i0.Renderer2 }, { token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: ReorderableRow, isStandalone: true, selector: "[caxReorderableRow]", inputs: { index: ["caxReorderableRow", "index"], caxReorderableRowDisabled: ["caxReorderableRowDisabled", "caxReorderableRowDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" }, classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ReorderableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReorderableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxReorderableRow]',
@@ -5188,10 +4999,10 @@ class ResizableColumn {
         }
         this.unbindDocumentEvents();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ResizableColumn, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: ResizableColumn, isStandalone: true, selector: "[caxResizableColumn]", inputs: { caxResizableColumnDisabled: ["caxResizableColumnDisabled", "caxResizableColumnDisabled", booleanAttribute] }, host: { classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ResizableColumn, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: Table }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: ResizableColumn, isStandalone: true, selector: "[caxResizableColumn]", inputs: { caxResizableColumnDisabled: ["caxResizableColumnDisabled", "caxResizableColumnDisabled", booleanAttribute] }, host: { classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ResizableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ResizableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxResizableColumn]',
@@ -5219,10 +5030,10 @@ class RowGroupHeader {
     get getFrozenRowGroupHeaderStickyPosition() {
         return this.dt.rowGroupHeaderStyleObject ? this.dt.rowGroupHeaderStyleObject.top : '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: RowGroupHeader, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: RowGroupHeader, isStandalone: true, selector: "[caxRowGroupHeader]", host: { properties: { "style.top": "getFrozenRowGroupHeaderStickyPosition" }, classAttribute: "cax-rowgroucax-header cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RowGroupHeader, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: RowGroupHeader, isStandalone: true, selector: "[caxRowGroupHeader]", host: { properties: { "style.top": "getFrozenRowGroupHeaderStickyPosition" }, classAttribute: "cax-rowgroucax-header cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: RowGroupHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RowGroupHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxRowGroupHeader]',
@@ -5250,10 +5061,10 @@ class RowToggler {
     isEnabled() {
         return this.caxRowTogglerDisabled !== true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: RowToggler, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: RowToggler, isStandalone: true, selector: "[caxRowToggler]", inputs: { data: ["caxRowToggler", "data"], caxRowTogglerDisabled: ["caxRowTogglerDisabled", "caxRowTogglerDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RowToggler, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: RowToggler, isStandalone: true, selector: "[caxRowToggler]", inputs: { data: ["caxRowToggler", "data"], caxRowTogglerDisabled: ["caxRowTogglerDisabled", "caxRowTogglerDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: RowToggler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RowToggler, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxRowToggler]',
@@ -5284,10 +5095,10 @@ class SaveEditableRow {
         this.dt.saveRowEdit(this.editableRow.data, this.editableRow.el.nativeElement);
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: SaveEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: SaveEditableRow, isStandalone: true, selector: "[caxSaveEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SaveEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: SaveEditableRow, isStandalone: true, selector: "[caxSaveEditableRow]", host: { listeners: { "click": "onClick($event)" }, classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: SaveEditableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SaveEditableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxSaveEditableRow]',
@@ -5340,10 +5151,10 @@ class SelectableRowDblClick {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: SelectableRowDblClick, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: SelectableRowDblClick, isStandalone: true, selector: "[caxSelectableRowDblClick]", inputs: { data: ["caxSelectableRowDblClick", "data"], index: ["caxSelectableRowIndex", "index"], caxSelectableRowDisabled: ["caxSelectableRowDisabled", "caxSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "dblclick": "onClick($event)" }, properties: { "class.cax-selectable-row": "isEnabled()", "class.cax-highlight": "selected" }, classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectableRowDblClick, deps: [{ token: Table }, { token: TableService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: SelectableRowDblClick, isStandalone: true, selector: "[caxSelectableRowDblClick]", inputs: { data: ["caxSelectableRowDblClick", "data"], index: ["caxSelectableRowIndex", "index"], caxSelectableRowDisabled: ["caxSelectableRowDisabled", "caxSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "dblclick": "onClick($event)" }, properties: { "class.cax-selectable-row": "isEnabled()", "class.cax-highlight": "selected" }, classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: SelectableRowDblClick, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectableRowDblClick, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxSelectableRowDblClick]',
@@ -5568,10 +5379,10 @@ class SelectableRow {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: SelectableRow, deps: [{ token: Table }, { token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: SelectableRow, isStandalone: true, selector: "[caxSelectableRow]", inputs: { data: ["caxSelectableRow", "data"], index: ["caxSelectableRowIndex", "index"], caxSelectableRowDisabled: ["caxSelectableRowDisabled", "caxSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "touchend": "onTouchEnd($event)", "keydown": "onKeyDown($event)" }, properties: { "class.cax-selectable-row": "isEnabled()", "class.cax-highlight": "selected", "attr.tabindex": "setRowTabIndex()", "attr.data-cax-highlight": "selected", "attr.data-cax-selectable-row": "true" }, classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectableRow, deps: [{ token: Table }, { token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: SelectableRow, isStandalone: true, selector: "[caxSelectableRow]", inputs: { data: ["caxSelectableRow", "data"], index: ["caxSelectableRowIndex", "index"], caxSelectableRowDisabled: ["caxSelectableRowDisabled", "caxSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "touchend": "onTouchEnd($event)", "keydown": "onKeyDown($event)" }, properties: { "class.cax-selectable-row": "isEnabled()", "class.cax-highlight": "selected", "attr.tabindex": "setRowTabIndex()", "attr.data-cax-highlight": "selected", "attr.data-cax-selectable-row": "true" }, classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: SelectableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectableRow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxSelectableRow]',
@@ -5657,10 +5468,10 @@ class SortableColumn {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: SortableColumn, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: SortableColumn, isStandalone: true, selector: "[caxSortableColumn]", inputs: { field: ["caxSortableColumn", "field"], caxSortableColumnDisabled: ["caxSortableColumnDisabled", "caxSortableColumnDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown.space": "onEnterKey($event)", "keydown.enter": "onEnterKey($event)" }, properties: { "class.cax-sortable-column": "isEnabled()", "class.cax-highlight": "sorted", "attr.tabindex": "isEnabled() ? \"0\" : null", "attr.role": "\"columnheader\"", "attr.aria-sort": "sortOrder" }, classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SortableColumn, deps: [{ token: Table }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: SortableColumn, isStandalone: true, selector: "[caxSortableColumn]", inputs: { field: ["caxSortableColumn", "field"], caxSortableColumnDisabled: ["caxSortableColumnDisabled", "caxSortableColumnDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown.space": "onEnterKey($event)", "keydown.enter": "onEnterKey($event)" }, properties: { "class.cax-sortable-column": "isEnabled()", "class.cax-highlight": "sorted", "attr.tabindex": "isEnabled() ? \"0\" : null", "attr.role": "\"columnheader\"", "attr.aria-sort": "sortOrder" }, classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: SortableColumn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SortableColumn, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxSortableColumn]',
@@ -5703,15 +5514,17 @@ class DynamicColumnWidth {
     ngOnInit() {
         if (this.minWidth) {
             this.renderer.setStyle(this.el.nativeElement, 'min-width', this.minWidth);
+            this.renderer.setStyle(this.el.nativeElement, '--cax-column-min-width', this.minWidth);
         }
         if (this.maxWidth) {
             this.renderer.setStyle(this.el.nativeElement, 'max-width', this.maxWidth);
+            this.renderer.setStyle(this.el.nativeElement, '--cax-column-max-width', this.maxWidth);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DynamicColumnWidth, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: DynamicColumnWidth, isStandalone: true, selector: "[caxColumnWidth]", inputs: { minWidth: "minWidth", maxWidth: "maxWidth" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DynamicColumnWidth, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: DynamicColumnWidth, isStandalone: true, selector: "[caxColumnWidth]", inputs: { minWidth: "minWidth", maxWidth: "maxWidth" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DynamicColumnWidth, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DynamicColumnWidth, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxColumnWidth]',
@@ -5731,23 +5544,23 @@ class CellHighlightDirective {
         this.el = el;
         this.renderer = renderer;
     }
-    ngOnInit() {
-        if (this.caxCellHighlight === 'error')
-            this.renderer.addClass(this.el.nativeElement, 'cax-cell-background-error');
-    }
-    onMouseEnter() {
-        this.renderer.addClass(this.el.nativeElement, this.getHighlightClass());
-    }
-    onMouseLeave() {
-        this.renderer.removeClass(this.el.nativeElement, this.getHighlightClass());
+    ngOnChanges(changes) {
+        if (changes['caxCellHighlight']) {
+            this.updateClasses(changes['caxCellHighlight'].previousValue, changes['caxCellHighlight'].currentValue);
+        }
     }
-    getHighlightClass() {
-        return this.caxCellHighlight === 'error' ? 'cax-cell-highlight-error' : 'cax-cell-highlight-default';
+    updateClasses(oldValue, newValue) {
+        if (oldValue === 'error') {
+            this.renderer.removeClass(this.el.nativeElement, 'cax-cell-background-error');
+        }
+        if (newValue === 'error') {
+            this.renderer.addClass(this.el.nativeElement, 'cax-cell-background-error');
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CellHighlightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: CellHighlightDirective, isStandalone: true, selector: "[caxCellHighlight]", inputs: { caxCellHighlight: "caxCellHighlight" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CellHighlightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: CellHighlightDirective, isStandalone: true, selector: "[caxCellHighlight]", inputs: { caxCellHighlight: "caxCellHighlight" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CellHighlightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CellHighlightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxCellHighlight]',
@@ -5755,17 +5568,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { caxCellHighlight: [{
                 type: Input
-            }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
+            }] } });
+
+class CaxCellExtendDirective {
+    el;
+    renderer;
+    lineClamp;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnChanges(changes) {
+        if (changes['lineClamp']) {
+            this.updateLineClamp();
+        }
+    }
+    ngAfterViewInit() {
+        const nativeElement = this.el.nativeElement;
+        const isCell = nativeElement.tagName === 'TD' || nativeElement.tagName === 'TH';
+        // Use setTimeout to ensure the DOM is ready and styles are applied
+        setTimeout(() => {
+            if (isCell) {
+                this.renderer.setStyle(nativeElement, 'white-space', 'normal', 1 /* Important */);
+                this.wrapContent(nativeElement);
+            }
+            else {
+                // If it's not a cell (e.g., a div inside a template),
+                // just apply the class directly to the host element
+                this.renderer.addClass(nativeElement, 'cax-cell-extend-wrapper');
+            }
+            this.updateLineClamp();
+        });
+    }
+    wrapContent(nativeElement) {
+        // Prevent double wrapping
+        if (nativeElement.querySelector('.cax-cell-extend-wrapper')) {
+            return;
+        }
+        const wrapper = this.renderer.createElement('div');
+        this.renderer.addClass(wrapper, 'cax-cell-extend-wrapper');
+        // Move all children of the cell into the wrapper
+        while (nativeElement.firstChild) {
+            this.renderer.appendChild(wrapper, nativeElement.firstChild);
+        }
+        this.renderer.appendChild(nativeElement, wrapper);
+    }
+    updateLineClamp() {
+        const nativeElement = this.el.nativeElement;
+        const wrapper = nativeElement.querySelector('.cax-cell-extend-wrapper');
+        if (wrapper) {
+            // If a specific value is passed to the directive, use it.
+            // Otherwise, it will fall back to the CSS variable defined in the theme.
+            if (this.lineClamp !== undefined && this.lineClamp !== null && this.lineClamp !== '') {
+                this.renderer.setStyle(wrapper, '-webkit-line-clamp', this.lineClamp);
+                this.renderer.setStyle(wrapper, 'line-clamp', this.lineClamp);
+            }
+            else {
+                this.renderer.removeStyle(wrapper, '-webkit-line-clamp');
+                this.renderer.removeStyle(wrapper, 'line-clamp');
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CaxCellExtendDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: CaxCellExtendDirective, isStandalone: true, selector: "[caxCellExtend]", inputs: { lineClamp: ["caxCellExtend", "lineClamp"] }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CaxCellExtendDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[caxCellExtend]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { lineClamp: [{
+                type: Input,
+                args: ['caxCellExtend']
             }] } });
 
 class TableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: TableModule, imports: [Table,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: TableModule, imports: [Table,
             SortableColumn,
             FrozenColumn,
             RowGroupHeader,
@@ -5790,7 +5670,8 @@ class TableModule {
             CancelEditableRow,
             ColumnFilter,
             DynamicColumnWidth,
-            CellHighlightDirective], exports: [Table,
+            CellHighlightDirective,
+            CaxCellExtendDirective], exports: [Table,
             SharedModule,
             SortableColumn,
             FrozenColumn,
@@ -5816,8 +5697,9 @@ class TableModule {
             ColumnFilter,
             ScrollerModule,
             DynamicColumnWidth,
-            CellHighlightDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TableModule, imports: [Table,
+            CellHighlightDirective,
+            CaxCellExtendDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableModule, imports: [Table,
             CellEditor,
             TableBody,
             SortIcon,
@@ -5827,7 +5709,7 @@ class TableModule {
             ColumnFilter, SharedModule,
             ScrollerModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -5856,7 +5738,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                         CancelEditableRow,
                         ColumnFilter,
                         DynamicColumnWidth,
-                        CellHighlightDirective
+                        CellHighlightDirective,
+                        CaxCellExtendDirective
                     ],
                     exports: [
                         Table,
@@ -5885,7 +5768,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                         ColumnFilter,
                         ScrollerModule,
                         DynamicColumnWidth,
-                        CellHighlightDirective
+                        CellHighlightDirective,
+                        CaxCellExtendDirective
                     ]
                 }]
         }] });
@@ -5894,5 +5778,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CancelEditableRow, CellEditor, CellHighlightDirective, ColumnFilter, ColumnFilterFormElement, ContextMenuRow, DynamicColumnWidth, EditableColumn, EditableRow, FrozenColumn, InitEditableRow, ReorderableColumn, ReorderableRow, ReorderableRowHandle, ResizableColumn, RowGroupHeader, RowToggler, SaveEditableRow, SelectableRow, SelectableRowDblClick, SortIcon, SortableColumn, Table, TableBody, TableCheckbox, TableHeaderCheckbox, TableModule, TableRadioButton };
+export { CancelEditableRow, CaxCellExtendDirective, CellEditor, CellHighlightDirective, ColumnFilter, ColumnFilterFormElement, ContextMenuRow, DynamicColumnWidth, EditableColumn, EditableRow, FrozenColumn, InitEditableRow, ReorderableColumn, ReorderableRow, ReorderableRowHandle, ResizableColumn, RowGroupHeader, RowToggler, SaveEditableRow, SelectableRow, SelectableRowDblClick, SortIcon, SortableColumn, Table, TableBody, TableCheckbox, TableHeaderCheckbox, TableModule, TableRadioButton };
 //# sourceMappingURL=cax-design-system-table.mjs.map