cax-design-system 1.2.13 → 2.0.0

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

@@ -236,6 +236,8 @@ class Table {
     overlayService;
     config;
     domSanitizer;
+    fontSize = 'md';
+    rowSize = 'md';
     /**
      * An array of objects to represent dynamic columns that are frozen.
      * @group Props
@@ -2566,6 +2568,16 @@ class Table {
     getGroupRowsMeta() {
         return { field: this.groupRowsBy, order: this.groupRowsByOrder };
     }
+    getTableClasses() {
+        return {
+            'cax-datatable 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',
+            ['cax-datatable-font-' + this.fontSize]: true,
+            ['cax-datatable-row-' + this.rowSize]: true
+        };
+    }
     createResponsiveStyle() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.responsiveStyleElement) {
@@ -2632,20 +2644,24 @@ class Table {
             .trim();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", type: Table, isStandalone: true, selector: "cax-table", inputs: { 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], 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\r\n    #container\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n    [ngClass]=\"{ 'cax-datatable cax-component': true, 'cax-datatable-hoverable-rows': rowHover || selectionMode, 'cax-datatable-scrollable': scrollable, 'cax-datatable-flex-scrollable': scrollable && scrollHeight === 'flex' }\"\r\n    [attr.id]=\"id\"\r\n>\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{cursor:pointer;-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;background:inherit;z-index:1}.cax-datatable-scrollable th.cax-frozen-column{z-index:1}.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-menu{display:inline-flex}.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-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}.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}}\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"], 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", 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], 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{cursor:pointer;-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;background:inherit;z-index:1}.cax-datatable-scrollable th.cax-frozen-column{z-index:1}.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-menu{display:inline-flex}.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-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}.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-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: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)}\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"], 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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: {
                         class: 'cax-element'
-                    }, template: "<div\r\n    #container\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n    [ngClass]=\"{ 'cax-datatable cax-component': true, 'cax-datatable-hoverable-rows': rowHover || selectionMode, 'cax-datatable-scrollable': scrollable, 'cax-datatable-flex-scrollable': scrollable && scrollHeight === 'flex' }\"\r\n    [attr.id]=\"id\"\r\n>\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{cursor:pointer;-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;background:inherit;z-index:1}.cax-datatable-scrollable th.cax-frozen-column{z-index:1}.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-menu{display:inline-flex}.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-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}.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}}\n"] }]
+                    }, 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{cursor:pointer;-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;background:inherit;z-index:1}.cax-datatable-scrollable th.cax-frozen-column{z-index:1}.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-menu{display:inline-flex}.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-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}.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-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: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)}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: TableService }, { type: i0.ChangeDetectorRef }, { type: i2.FilterService }, { type: i2.OverlayService }, { type: i2.caxConfig }, { type: i3$1.DomSanitizer }], propDecorators: { frozenColumns: [{
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: TableService }, { type: i0.ChangeDetectorRef }, { type: i2.FilterService }, { type: i2.OverlayService }, { type: i2.caxConfig }, { type: i3$1.DomSanitizer }], propDecorators: { fontSize: [{
+                type: Input
+            }], rowSize: [{
+                type: Input
+            }], frozenColumns: [{
                 type: Input
             }], frozenValue: [{
                 type: Input
@@ -4166,7 +4182,7 @@ class TableCheckbox {
     cd;
     disabled;
     value;
-    index;
+    index = -1;
     inputId;
     name;
     required;
@@ -4174,6 +4190,7 @@ class TableCheckbox {
     checked;
     focused;
     subscription;
+    isHovered = false;
     constructor(dt, tableService, cd) {
         this.dt = dt;
         this.tableService = tableService;
@@ -4208,13 +4225,13 @@ class TableCheckbox {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", 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-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", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TableCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'cax-tableCheckbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, CheckIcon], host: {
                         class: 'cax-element'
-                    }, template: "<div 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" }]
+                    }, 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" }]
         }], ctorParameters: () => [{ type: Table }, { type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -4299,13 +4316,13 @@ class TableHeaderCheckbox {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", 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 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", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TableHeaderCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'cax-tableHeaderCheckbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, CheckIcon], host: {
                         class: 'cax-element'
-                    }, template: "<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" }]
+                    }, 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" }]
         }], ctorParameters: () => [{ type: Table }, { type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -5435,6 +5452,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 args: ['keydown.enter', ['$event']]
             }] } });
 
+class DynamicColumnWidth {
+    el;
+    renderer;
+    minWidth;
+    maxWidth;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        if (this.minWidth) {
+            this.renderer.setStyle(this.el.nativeElement, 'min-width', this.minWidth);
+        }
+        if (this.maxWidth) {
+            this.renderer.setStyle(this.el.nativeElement, 'max-width', this.maxWidth);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicColumnWidth, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: DynamicColumnWidth, isStandalone: true, selector: "[caxColumnWidth]", inputs: { minWidth: "minWidth", maxWidth: "maxWidth" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicColumnWidth, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[caxColumnWidth]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { minWidth: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }] } });
+
+class CellHighlightDirective {
+    el;
+    renderer;
+    caxCellHighlight = 'default';
+    constructor(el, renderer) {
+        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());
+    }
+    getHighlightClass() {
+        return this.caxCellHighlight === 'error' ? 'cax-cell-highlight-error' : 'cax-cell-highlight-default';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CellHighlightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: CellHighlightDirective, isStandalone: true, selector: "[caxCellHighlight]", inputs: { caxCellHighlight: "caxCellHighlight" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CellHighlightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[caxCellHighlight]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { caxCellHighlight: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
 class TableModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: TableModule, imports: [Table,
@@ -5460,7 +5549,9 @@ class TableModule {
             InitEditableRow,
             SaveEditableRow,
             CancelEditableRow,
-            ColumnFilter], exports: [Table,
+            ColumnFilter,
+            DynamicColumnWidth,
+            CellHighlightDirective], exports: [Table,
             SharedModule,
             SortableColumn,
             FrozenColumn,
@@ -5484,7 +5575,9 @@ class TableModule {
             SaveEditableRow,
             CancelEditableRow,
             ColumnFilter,
-            ScrollerModule] });
+            ScrollerModule,
+            DynamicColumnWidth,
+            CellHighlightDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TableModule, imports: [Table,
             CellEditor,
             TableBody,
@@ -5522,7 +5615,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         InitEditableRow,
                         SaveEditableRow,
                         CancelEditableRow,
-                        ColumnFilter
+                        ColumnFilter,
+                        DynamicColumnWidth,
+                        CellHighlightDirective
                     ],
                     exports: [
                         Table,
@@ -5549,7 +5644,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         SaveEditableRow,
                         CancelEditableRow,
                         ColumnFilter,
-                        ScrollerModule
+                        ScrollerModule,
+                        DynamicColumnWidth,
+                        CellHighlightDirective
                     ]
                 }]
         }] });
@@ -5558,5 +5655,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CancelEditableRow, CellEditor, ColumnFilter, ColumnFilterFormElement, ContextMenuRow, EditableColumn, EditableRow, FrozenColumn, InitEditableRow, ReorderableColumn, ReorderableRow, ReorderableRowHandle, ResizableColumn, RowGroupHeader, RowToggler, SaveEditableRow, SelectableRow, SelectableRowDblClick, SortIcon, SortableColumn, Table, TableBody, TableCheckbox, TableHeaderCheckbox, TableModule, TableRadioButton };
+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 };
 //# sourceMappingURL=cax-design-system-table.mjs.map