@ng-nest/ui 18.0.0 → 18.0.2

package/fesm2022/ng-nest-ui-table.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { input, model, output, Component, inject, ChangeDetectorRef, viewChild, signal, computed, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Renderer2, effect, viewChildren, NgModule } from '@angular/core';
 import { XPropertyFunction, XToDataConvert, XToNumber, XToBoolean, XToCssPixelValue, XProperty, XIsEmpty, XRemoveNgTag, XIsFunction, XResize, XStripTags, XParentPath, XIsChange, XIsArray, XIsUndefined } from '@ng-nest/ui/core';
 import { XPaginationSizeData, XPaginationComponent } from '@ng-nest/ui/pagination';
-import { map, takeUntil } from 'rxjs/operators';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 import { Subject, fromEvent } from 'rxjs';
 import { NgStyle, NgClass, NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import { XLoadingComponent } from '@ng-nest/ui/loading';
@@ -18,7 +18,6 @@ import * as i2$1 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import { XEmptyComponent } from '@ng-nest/ui/empty';
 import { XButtonComponent } from '@ng-nest/ui/button';
-import { toSignal } from '@angular/core/rxjs-interop';
 
 /**
  * Table
@@ -407,10 +406,10 @@ class XTableProperty extends XPropertyFunction(X_TABLE_CONFIG_NAME) {
          */
         this.columnDragWidthEnded = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XTableProperty, selector: "x-table-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, activatedRow: { classPropertyName: "activatedRow", publicName: "activatedRow", isSignal: true, isRequired: false, transformFunction: null }, headColumnTpl: { classPropertyName: "headColumnTpl", publicName: "headColumnTpl", isSignal: true, isRequired: false, transformFunction: null }, headThTpl: { classPropertyName: "headThTpl", publicName: "headThTpl", isSignal: true, isRequired: false, transformFunction: null }, bodyColumnTpl: { classPropertyName: "bodyColumnTpl", publicName: "bodyColumnTpl", isSignal: true, isRequired: false, transformFunction: null }, bodyTdTpl: { classPropertyName: "bodyTdTpl", publicName: "bodyTdTpl", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, headSearchTpl: { classPropertyName: "headSearchTpl", publicName: "headSearchTpl", isSignal: true, isRequired: false, transformFunction: null }, allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: false, transformFunction: null }, allowCheckRow: { classPropertyName: "allowCheckRow", publicName: "allowCheckRow", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, bodyHeight: { classPropertyName: "bodyHeight", publicName: "bodyHeight", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, adaptionHeight: { classPropertyName: "adaptionHeight", publicName: "adaptionHeight", isSignal: true, isRequired: false, transformFunction: null }, docPercent: { classPropertyName: "docPercent", publicName: "docPercent", isSignal: true, isRequired: false, transformFunction: null }, checkedRow: { classPropertyName: "checkedRow", publicName: "checkedRow", isSignal: true, isRequired: false, transformFunction: null }, manual: { classPropertyName: "manual", publicName: "manual", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, cellConfig: { classPropertyName: "cellConfig", publicName: "cellConfig", isSignal: true, isRequired: false, transformFunction: null }, rowSize: { classPropertyName: "rowSize", publicName: "rowSize", isSignal: true, isRequired: false, transformFunction: null }, paginationPosition: { classPropertyName: "paginationPosition", publicName: "paginationPosition", isSignal: true, isRequired: false, transformFunction: null }, hiddenWrapBorder: { classPropertyName: "hiddenWrapBorder", publicName: "hiddenWrapBorder", isSignal: true, isRequired: false, transformFunction: null }, hiddenPaginationBorder: { classPropertyName: "hiddenPaginationBorder", publicName: "hiddenPaginationBorder", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, treeTable: { classPropertyName: "treeTable", publicName: "treeTable", isSignal: true, isRequired: false, transformFunction: null }, expandedAll: { classPropertyName: "expandedAll", publicName: "expandedAll", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, expandTpl: { classPropertyName: "expandTpl", publicName: "expandTpl", isSignal: true, isRequired: false, transformFunction: null }, showEmpty: { classPropertyName: "showEmpty", publicName: "showEmpty", isSignal: true, isRequired: false, transformFunction: null }, emptyImg: { classPropertyName: "emptyImg", publicName: "emptyImg", isSignal: true, isRequired: false, transformFunction: null }, emptyContent: { classPropertyName: "emptyContent", publicName: "emptyContent", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, pageLinkSize: { classPropertyName: "pageLinkSize", publicName: "pageLinkSize", isSignal: true, isRequired: false, transformFunction: null }, showEllipsis: { classPropertyName: "showEllipsis", publicName: "showEllipsis", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, showBackground: { classPropertyName: "showBackground", publicName: "showBackground", isSignal: true, isRequired: false, transformFunction: null }, showSize: { classPropertyName: "showSize", publicName: "showSize", isSignal: true, isRequired: false, transformFunction: null }, sizeWidth: { classPropertyName: "sizeWidth", publicName: "sizeWidth", isSignal: true, isRequired: false, transformFunction: null }, showInputSize: { classPropertyName: "showInputSize", publicName: "showInputSize", isSignal: true, isRequired: false, transformFunction: null }, inputSizeWidth: { classPropertyName: "inputSizeWidth", publicName: "inputSizeWidth", isSignal: true, isRequired: false, transformFunction: null }, sizeData: { classPropertyName: "sizeData", publicName: "sizeData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showJump: { classPropertyName: "showJump", publicName: "showJump", isSignal: true, isRequired: false, transformFunction: null }, jumpWidth: { classPropertyName: "jumpWidth", publicName: "jumpWidth", isSignal: true, isRequired: false, transformFunction: null }, totalTpl: { classPropertyName: "totalTpl", publicName: "totalTpl", isSignal: true, isRequired: false, transformFunction: null }, simple: { classPropertyName: "simple", publicName: "simple", isSignal: true, isRequired: false, transformFunction: null }, simpleIndexWidth: { classPropertyName: "simpleIndexWidth", publicName: "simpleIndexWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activatedRow: "activatedRowChange", sortChange: "sortChange", headCheckboxChange: "headCheckboxChange", bodyCheckboxChange: "bodyCheckboxChange", manual: "manualChange", index: "indexChange", size: "sizeChange", total: "totalChange", query: "queryChange", columnDragStarted: "columnDragStarted", columnDragEnded: "columnDragEnded", columnDropListDropped: "columnDropListDropped", columnDragWidthStarted: "columnDragWidthStarted", columnDragWidthMoved: "columnDragWidthMoved", columnDragWidthEnded: "columnDragWidthEnded" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.6", type: XTableProperty, selector: "x-table-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, activatedRow: { classPropertyName: "activatedRow", publicName: "activatedRow", isSignal: true, isRequired: false, transformFunction: null }, headColumnTpl: { classPropertyName: "headColumnTpl", publicName: "headColumnTpl", isSignal: true, isRequired: false, transformFunction: null }, headThTpl: { classPropertyName: "headThTpl", publicName: "headThTpl", isSignal: true, isRequired: false, transformFunction: null }, bodyColumnTpl: { classPropertyName: "bodyColumnTpl", publicName: "bodyColumnTpl", isSignal: true, isRequired: false, transformFunction: null }, bodyTdTpl: { classPropertyName: "bodyTdTpl", publicName: "bodyTdTpl", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, headSearchTpl: { classPropertyName: "headSearchTpl", publicName: "headSearchTpl", isSignal: true, isRequired: false, transformFunction: null }, allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: false, transformFunction: null }, allowCheckRow: { classPropertyName: "allowCheckRow", publicName: "allowCheckRow", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, bodyHeight: { classPropertyName: "bodyHeight", publicName: "bodyHeight", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, adaptionHeight: { classPropertyName: "adaptionHeight", publicName: "adaptionHeight", isSignal: true, isRequired: false, transformFunction: null }, docPercent: { classPropertyName: "docPercent", publicName: "docPercent", isSignal: true, isRequired: false, transformFunction: null }, checkedRow: { classPropertyName: "checkedRow", publicName: "checkedRow", isSignal: true, isRequired: false, transformFunction: null }, manual: { classPropertyName: "manual", publicName: "manual", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, cellConfig: { classPropertyName: "cellConfig", publicName: "cellConfig", isSignal: true, isRequired: false, transformFunction: null }, rowSize: { classPropertyName: "rowSize", publicName: "rowSize", isSignal: true, isRequired: false, transformFunction: null }, paginationPosition: { classPropertyName: "paginationPosition", publicName: "paginationPosition", isSignal: true, isRequired: false, transformFunction: null }, hiddenWrapBorder: { classPropertyName: "hiddenWrapBorder", publicName: "hiddenWrapBorder", isSignal: true, isRequired: false, transformFunction: null }, hiddenPaginationBorder: { classPropertyName: "hiddenPaginationBorder", publicName: "hiddenPaginationBorder", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, treeTable: { classPropertyName: "treeTable", publicName: "treeTable", isSignal: true, isRequired: false, transformFunction: null }, expandedAll: { classPropertyName: "expandedAll", publicName: "expandedAll", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, expandTpl: { classPropertyName: "expandTpl", publicName: "expandTpl", isSignal: true, isRequired: false, transformFunction: null }, showEmpty: { classPropertyName: "showEmpty", publicName: "showEmpty", isSignal: true, isRequired: false, transformFunction: null }, emptyImg: { classPropertyName: "emptyImg", publicName: "emptyImg", isSignal: true, isRequired: false, transformFunction: null }, emptyContent: { classPropertyName: "emptyContent", publicName: "emptyContent", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, pageLinkSize: { classPropertyName: "pageLinkSize", publicName: "pageLinkSize", isSignal: true, isRequired: false, transformFunction: null }, showEllipsis: { classPropertyName: "showEllipsis", publicName: "showEllipsis", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, showBackground: { classPropertyName: "showBackground", publicName: "showBackground", isSignal: true, isRequired: false, transformFunction: null }, showSize: { classPropertyName: "showSize", publicName: "showSize", isSignal: true, isRequired: false, transformFunction: null }, sizeWidth: { classPropertyName: "sizeWidth", publicName: "sizeWidth", isSignal: true, isRequired: false, transformFunction: null }, showInputSize: { classPropertyName: "showInputSize", publicName: "showInputSize", isSignal: true, isRequired: false, transformFunction: null }, inputSizeWidth: { classPropertyName: "inputSizeWidth", publicName: "inputSizeWidth", isSignal: true, isRequired: false, transformFunction: null }, sizeData: { classPropertyName: "sizeData", publicName: "sizeData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showJump: { classPropertyName: "showJump", publicName: "showJump", isSignal: true, isRequired: false, transformFunction: null }, jumpWidth: { classPropertyName: "jumpWidth", publicName: "jumpWidth", isSignal: true, isRequired: false, transformFunction: null }, totalTpl: { classPropertyName: "totalTpl", publicName: "totalTpl", isSignal: true, isRequired: false, transformFunction: null }, simple: { classPropertyName: "simple", publicName: "simple", isSignal: true, isRequired: false, transformFunction: null }, simpleIndexWidth: { classPropertyName: "simpleIndexWidth", publicName: "simpleIndexWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activatedRow: "activatedRowChange", sortChange: "sortChange", headCheckboxChange: "headCheckboxChange", bodyCheckboxChange: "bodyCheckboxChange", manual: "manualChange", index: "indexChange", size: "sizeChange", total: "totalChange", query: "queryChange", columnDragStarted: "columnDragStarted", columnDragEnded: "columnDragEnded", columnDropListDropped: "columnDropListDropped", columnDragWidthStarted: "columnDragWidthStarted", columnDragWidthMoved: "columnDragWidthMoved", columnDragWidthEnded: "columnDragWidthEnded" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTablePrefix}-property`, template: '' }]
         }] });
@@ -462,10 +461,10 @@ class XTableHeadProperty extends XProperty {
          */
         this.position = input();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableHeadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XTableHeadProperty, selector: "x-table-head-property", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, columnTpl: { classPropertyName: "columnTpl", publicName: "columnTpl", isSignal: true, isRequired: false, transformFunction: null }, scrollYWidth: { classPropertyName: "scrollYWidth", publicName: "scrollYWidth", isSignal: true, isRequired: false, transformFunction: null }, scrollXWidth: { classPropertyName: "scrollXWidth", publicName: "scrollXWidth", isSignal: true, isRequired: false, transformFunction: null }, cellConfig: { classPropertyName: "cellConfig", publicName: "cellConfig", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableHeadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.6", type: XTableHeadProperty, selector: "x-table-head-property", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, columnTpl: { classPropertyName: "columnTpl", publicName: "columnTpl", isSignal: true, isRequired: false, transformFunction: null }, scrollYWidth: { classPropertyName: "scrollYWidth", publicName: "scrollYWidth", isSignal: true, isRequired: false, transformFunction: null }, scrollXWidth: { classPropertyName: "scrollXWidth", publicName: "scrollXWidth", isSignal: true, isRequired: false, transformFunction: null }, cellConfig: { classPropertyName: "cellConfig", publicName: "cellConfig", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableHeadProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableHeadProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTableHeadPrefix}-property`, template: '' }]
         }] });
@@ -577,10 +576,10 @@ class XTableBodyProperty extends XProperty {
          */
         this.expandTpl = input();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableBodyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XTableBodyProperty, selector: "x-table-body-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, columnTpl: { classPropertyName: "columnTpl", publicName: "columnTpl", isSignal: true, isRequired: false, transformFunction: null }, activatedRow: { classPropertyName: "activatedRow", publicName: "activatedRow", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, bodyHeight: { classPropertyName: "bodyHeight", publicName: "bodyHeight", isSignal: true, isRequired: false, transformFunction: null }, allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, adaptionHeight: { classPropertyName: "adaptionHeight", publicName: "adaptionHeight", isSignal: true, isRequired: false, transformFunction: null }, docPercent: { classPropertyName: "docPercent", publicName: "docPercent", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, cellConfig: { classPropertyName: "cellConfig", publicName: "cellConfig", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, expandedAll: { classPropertyName: "expandedAll", publicName: "expandedAll", isSignal: true, isRequired: false, transformFunction: null }, expandTpl: { classPropertyName: "expandTpl", publicName: "expandTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activatedRow: "activatedRowChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableBodyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.6", type: XTableBodyProperty, selector: "x-table-body-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, columnTpl: { classPropertyName: "columnTpl", publicName: "columnTpl", isSignal: true, isRequired: false, transformFunction: null }, activatedRow: { classPropertyName: "activatedRow", publicName: "activatedRow", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, bodyHeight: { classPropertyName: "bodyHeight", publicName: "bodyHeight", isSignal: true, isRequired: false, transformFunction: null }, allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, adaptionHeight: { classPropertyName: "adaptionHeight", publicName: "adaptionHeight", isSignal: true, isRequired: false, transformFunction: null }, docPercent: { classPropertyName: "docPercent", publicName: "docPercent", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, cellConfig: { classPropertyName: "cellConfig", publicName: "cellConfig", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, expandedAll: { classPropertyName: "expandedAll", publicName: "expandedAll", isSignal: true, isRequired: false, transformFunction: null }, expandTpl: { classPropertyName: "expandTpl", publicName: "expandTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activatedRow: "activatedRowChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableBodyProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableBodyProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTableBodyPrefix}-property`, template: '' }]
         }] });
@@ -607,10 +606,10 @@ class XTableFootProperty extends XProperty {
          */
         this.rowHeight = input(null, { transform: XToNumber });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableFootProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XTableFootProperty, selector: "x-table-foot-property", inputs: { footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableFootProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.6", type: XTableFootProperty, selector: "x-table-foot-property", inputs: { footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableFootProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableFootProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTableFootPrefix}-property`, template: '' }]
         }] });
@@ -752,10 +751,10 @@ class XTableHeadComponent extends XTableHeadProperty {
         this.table.detectChanges();
         this.table.columnDragEnded.emit(column);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableHeadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XTableHeadComponent, isStandalone: true, selector: "x-table-head", viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<thead\r\n  #thead\r\n  [ngStyle]=\"theadStyle()\"\r\n  [class.x-table-head-top]=\"position() === 'top'\"\r\n  [class.x-table-head-bottom]=\"position() === 'bottom'\"\r\n>\r\n  @if (cellConfig()) {\r\n    <tr [style.gridTemplateColumns]=\"cellConfig()!.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight()\">\r\n      @for (column of cellConfig()!.cells; track column.id) {\r\n        <th\r\n          [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n          [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n          [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n          [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n          [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n          [class.x-table-width-drag]=\"column.dragWidth\"\r\n          [style.grid-area]=\"column.gridArea\"\r\n          [style.left.px]=\"column.left\"\r\n          [style.right.px]=\"column.right\"\r\n          [style.min-height.px]=\"getRowHeight()\"\r\n          [title]=\"column?.label\"\r\n        >\r\n          <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n          @if (column.dragWidth) {\r\n            <div\r\n              class=\"x-table-drag-width\"\r\n              x-drag\r\n              (dragMoved)=\"dragWidthMoved($event, column)\"\r\n              (dragStarted)=\"dragWidthStarted($event, column)\"\r\n              (dragEnded)=\"dragWidthEnded($event, column)\"\r\n            ></div>\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"columnsTpl\"></ng-container>\r\n  }\r\n  @if (table.headSearchTpl()) {\r\n    <ng-container *ngTemplateOutlet=\"columnsTpl; context: { case: 'search' }\"></ng-container>\r\n  }\r\n</thead>\r\n\r\n<ng-template #columnsTpl let-case=\"case\">\r\n  <tr\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListSorted)=\"dropListSorted($event)\"\r\n    (cdkDropListDropped)=\"dropListDropped($event)\"\r\n    [style.height.px]=\"getRowHeight()\"\r\n    [style.min-height.px]=\"getRowHeight()\"\r\n    [style.padding-right.px]=\"scrollYWidth()\"\r\n    [style.width.px]=\"scrollXWidth()\"\r\n    [class.x-table-search]=\"case === 'search'\"\r\n  >\r\n    @for (column of initColumns(); track column.id) {\r\n      <th\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"column.draggingWidth || !column.dragColumn\"\r\n        (cdkDragStarted)=\"dragStarted($event, column)\"\r\n        (cdkDragEnded)=\"dragEnded(column)\"\r\n        [ngClass]=\"thClassMap()\"\r\n        [class.x-table-th]=\"true\"\r\n        [class.x-table-sticky]=\"table.getSticky(column)\"\r\n        [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n        [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n        [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n        [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n        [style.min-height.px]=\"getRowHeight()\"\r\n        [style.width.px]=\"getColumnWidth(column)\"\r\n        [style.left.px]=\"column.left\"\r\n        [style.right.px]=\"getColumnRight(column.right)\"\r\n        [style.flex]=\"getFlex(column)\"\r\n      >\r\n        @switch (case) {\r\n          @case ('search') {\r\n            <ng-container *xOutlet=\"table.headSearchTpl()!; context: { $column: column }\"></ng-container>\r\n          }\r\n          @default {\r\n            <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n            @if (column.dragWidth) {\r\n              <div\r\n                class=\"x-table-drag-width\"\r\n                x-drag\r\n                (dragMoved)=\"dragWidthMoved($event, column)\"\r\n                (dragStarted)=\"dragWidthStarted($event, column)\"\r\n                (dragEnded)=\"dragWidthEnded($event, column)\"\r\n              ></div>\r\n            }\r\n          }\r\n        }\r\n      </th>\r\n    }\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n  @switch (column.type) {\r\n    @case ('checkbox') {\r\n      @if (column.headChecked) {\r\n        <x-checkbox\r\n          [data]=\"[{ id: true, label: column.label }]\"\r\n          [(ngModel)]=\"table.checkedValues()[column.id]\"\r\n          (ngModelChange)=\"table.headChecked($event, column)\"\r\n          [indeterminate]=\"table.checkedValues()[column.id + table.indeterminate()]\"\r\n          single\r\n        ></x-checkbox>\r\n      }\r\n      @if (!column.headChecked) {\r\n        <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n      }\r\n    }\r\n    @case ('index') {\r\n      <a\r\n        ><ng-container *xOutlet=\"columnTpl()[column.id]; context: { $column: column }\">\r\n          <ng-container *xOutlet=\"table.headThTpl(); context: { $column: column }\">\r\n            {{ column.label }}\r\n          </ng-container>\r\n        </ng-container></a\r\n      >\r\n    }\r\n    @default {\r\n      <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n  <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n    <ng-container *xOutlet=\"columnTpl()[column.id]; context: { $column: column }\">\r\n      <ng-container *xOutlet=\"table.headThTpl(); context: { $column: column }\">\r\n        {{ column.label }}\r\n      </ng-container>\r\n    </ng-container>\r\n    @if (column.sort) {\r\n      <x-icon\r\n        type=\"fto-bar-chart\"\r\n        class=\"x-table-sort-icon\"\r\n        [class.x-table-icon-up]=\"sortStr() === column.id + ' desc'\"\r\n        [class.x-table-icon-down]=\"sortStr() === column.id + ' asc'\"\r\n      ></x-icon>\r\n    }\r\n  </a>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: XDragDirective, selector: "[x-drag]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableHeadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: XTableHeadComponent, isStandalone: true, selector: "x-table-head", viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<thead\r\n  #thead\r\n  [ngStyle]=\"theadStyle()\"\r\n  [class.x-table-head-top]=\"position() === 'top'\"\r\n  [class.x-table-head-bottom]=\"position() === 'bottom'\"\r\n>\r\n  @if (cellConfig()) {\r\n    <tr [style.gridTemplateColumns]=\"cellConfig()!.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight()\">\r\n      @for (column of cellConfig()!.cells; track column.id) {\r\n        <th\r\n          [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n          [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n          [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n          [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n          [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n          [class.x-table-width-drag]=\"column.dragWidth\"\r\n          [style.grid-area]=\"column.gridArea\"\r\n          [style.left.px]=\"column.left\"\r\n          [style.right.px]=\"column.right\"\r\n          [style.min-height.px]=\"getRowHeight()\"\r\n          [title]=\"column?.label\"\r\n        >\r\n          <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n          @if (column.dragWidth) {\r\n            <div\r\n              class=\"x-table-drag-width\"\r\n              x-drag\r\n              (dragMoved)=\"dragWidthMoved($event, column)\"\r\n              (dragStarted)=\"dragWidthStarted($event, column)\"\r\n              (dragEnded)=\"dragWidthEnded($event, column)\"\r\n            ></div>\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"columnsTpl\"></ng-container>\r\n  }\r\n  @if (table.headSearchTpl()) {\r\n    <ng-container *ngTemplateOutlet=\"columnsTpl; context: { case: 'search' }\"></ng-container>\r\n  }\r\n</thead>\r\n\r\n<ng-template #columnsTpl let-case=\"case\">\r\n  <tr\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListSorted)=\"dropListSorted($event)\"\r\n    (cdkDropListDropped)=\"dropListDropped($event)\"\r\n    [style.height.px]=\"getRowHeight()\"\r\n    [style.min-height.px]=\"getRowHeight()\"\r\n    [style.padding-right.px]=\"scrollYWidth()\"\r\n    [style.min-width.px]=\"scrollXWidth()\"\r\n    [class.x-table-search]=\"case === 'search'\"\r\n  >\r\n    @for (column of initColumns(); track column.id) {\r\n      <th\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"column.draggingWidth || !column.dragColumn\"\r\n        (cdkDragStarted)=\"dragStarted($event, column)\"\r\n        (cdkDragEnded)=\"dragEnded(column)\"\r\n        [ngClass]=\"thClassMap()\"\r\n        [class.x-table-th]=\"true\"\r\n        [class.x-table-sticky]=\"table.getSticky(column)\"\r\n        [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n        [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n        [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n        [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n        [style.min-height.px]=\"getRowHeight()\"\r\n        [style.width.px]=\"getColumnWidth(column)\"\r\n        [style.left.px]=\"column.left\"\r\n        [style.right.px]=\"getColumnRight(column.right)\"\r\n        [style.flex]=\"getFlex(column)\"\r\n      >\r\n        @switch (case) {\r\n          @case ('search') {\r\n            <ng-container *xOutlet=\"table.headSearchTpl()!; context: { $column: column }\"></ng-container>\r\n          }\r\n          @default {\r\n            <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n            @if (column.dragWidth) {\r\n              <div\r\n                class=\"x-table-drag-width\"\r\n                x-drag\r\n                (dragMoved)=\"dragWidthMoved($event, column)\"\r\n                (dragStarted)=\"dragWidthStarted($event, column)\"\r\n                (dragEnded)=\"dragWidthEnded($event, column)\"\r\n              ></div>\r\n            }\r\n          }\r\n        }\r\n      </th>\r\n    }\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n  @switch (column.type) {\r\n    @case ('checkbox') {\r\n      @if (column.headChecked) {\r\n        <x-checkbox\r\n          [data]=\"[{ id: true, label: column.label }]\"\r\n          [(ngModel)]=\"table.checkedValues()[column.id]\"\r\n          (ngModelChange)=\"table.headChecked($event, column)\"\r\n          [indeterminate]=\"table.checkedValues()[column.id + table.indeterminate()]\"\r\n          single\r\n        ></x-checkbox>\r\n      }\r\n      @if (!column.headChecked) {\r\n        <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n      }\r\n    }\r\n    @case ('index') {\r\n      <a\r\n        ><ng-container *xOutlet=\"columnTpl()[column.id]; context: { $column: column }\">\r\n          <ng-container *xOutlet=\"table.headThTpl(); context: { $column: column }\">\r\n            {{ column.label }}\r\n          </ng-container>\r\n        </ng-container></a\r\n      >\r\n    }\r\n    @default {\r\n      <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n  <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n    <ng-container *xOutlet=\"columnTpl()[column.id]; context: { $column: column }\">\r\n      <ng-container *xOutlet=\"table.headThTpl(); context: { $column: column }\">\r\n        {{ column.label }}\r\n      </ng-container>\r\n    </ng-container>\r\n    @if (column.sort) {\r\n      <x-icon\r\n        type=\"fto-bar-chart\"\r\n        class=\"x-table-sort-icon\"\r\n        [class.x-table-icon-up]=\"sortStr() === column.id + ' desc'\"\r\n        [class.x-table-icon-down]=\"sortStr() === column.id + ' asc'\"\r\n      ></x-icon>\r\n    }\r\n  </a>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: XDragDirective, selector: "[x-drag]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableHeadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableHeadComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTableHeadPrefix}`, standalone: true, imports: [
                         NgStyle,
@@ -767,7 +766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
                         XCheckboxComponent,
                         XOutletDirective,
                         XIconComponent
-                    ], encapsulation: ViewEncapsulation.None, template: "<thead\r\n  #thead\r\n  [ngStyle]=\"theadStyle()\"\r\n  [class.x-table-head-top]=\"position() === 'top'\"\r\n  [class.x-table-head-bottom]=\"position() === 'bottom'\"\r\n>\r\n  @if (cellConfig()) {\r\n    <tr [style.gridTemplateColumns]=\"cellConfig()!.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight()\">\r\n      @for (column of cellConfig()!.cells; track column.id) {\r\n        <th\r\n          [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n          [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n          [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n          [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n          [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n          [class.x-table-width-drag]=\"column.dragWidth\"\r\n          [style.grid-area]=\"column.gridArea\"\r\n          [style.left.px]=\"column.left\"\r\n          [style.right.px]=\"column.right\"\r\n          [style.min-height.px]=\"getRowHeight()\"\r\n          [title]=\"column?.label\"\r\n        >\r\n          <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n          @if (column.dragWidth) {\r\n            <div\r\n              class=\"x-table-drag-width\"\r\n              x-drag\r\n              (dragMoved)=\"dragWidthMoved($event, column)\"\r\n              (dragStarted)=\"dragWidthStarted($event, column)\"\r\n              (dragEnded)=\"dragWidthEnded($event, column)\"\r\n            ></div>\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"columnsTpl\"></ng-container>\r\n  }\r\n  @if (table.headSearchTpl()) {\r\n    <ng-container *ngTemplateOutlet=\"columnsTpl; context: { case: 'search' }\"></ng-container>\r\n  }\r\n</thead>\r\n\r\n<ng-template #columnsTpl let-case=\"case\">\r\n  <tr\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListSorted)=\"dropListSorted($event)\"\r\n    (cdkDropListDropped)=\"dropListDropped($event)\"\r\n    [style.height.px]=\"getRowHeight()\"\r\n    [style.min-height.px]=\"getRowHeight()\"\r\n    [style.padding-right.px]=\"scrollYWidth()\"\r\n    [style.width.px]=\"scrollXWidth()\"\r\n    [class.x-table-search]=\"case === 'search'\"\r\n  >\r\n    @for (column of initColumns(); track column.id) {\r\n      <th\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"column.draggingWidth || !column.dragColumn\"\r\n        (cdkDragStarted)=\"dragStarted($event, column)\"\r\n        (cdkDragEnded)=\"dragEnded(column)\"\r\n        [ngClass]=\"thClassMap()\"\r\n        [class.x-table-th]=\"true\"\r\n        [class.x-table-sticky]=\"table.getSticky(column)\"\r\n        [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n        [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n        [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n        [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n        [style.min-height.px]=\"getRowHeight()\"\r\n        [style.width.px]=\"getColumnWidth(column)\"\r\n        [style.left.px]=\"column.left\"\r\n        [style.right.px]=\"getColumnRight(column.right)\"\r\n        [style.flex]=\"getFlex(column)\"\r\n      >\r\n        @switch (case) {\r\n          @case ('search') {\r\n            <ng-container *xOutlet=\"table.headSearchTpl()!; context: { $column: column }\"></ng-container>\r\n          }\r\n          @default {\r\n            <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n            @if (column.dragWidth) {\r\n              <div\r\n                class=\"x-table-drag-width\"\r\n                x-drag\r\n                (dragMoved)=\"dragWidthMoved($event, column)\"\r\n                (dragStarted)=\"dragWidthStarted($event, column)\"\r\n                (dragEnded)=\"dragWidthEnded($event, column)\"\r\n              ></div>\r\n            }\r\n          }\r\n        }\r\n      </th>\r\n    }\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n  @switch (column.type) {\r\n    @case ('checkbox') {\r\n      @if (column.headChecked) {\r\n        <x-checkbox\r\n          [data]=\"[{ id: true, label: column.label }]\"\r\n          [(ngModel)]=\"table.checkedValues()[column.id]\"\r\n          (ngModelChange)=\"table.headChecked($event, column)\"\r\n          [indeterminate]=\"table.checkedValues()[column.id + table.indeterminate()]\"\r\n          single\r\n        ></x-checkbox>\r\n      }\r\n      @if (!column.headChecked) {\r\n        <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n      }\r\n    }\r\n    @case ('index') {\r\n      <a\r\n        ><ng-container *xOutlet=\"columnTpl()[column.id]; context: { $column: column }\">\r\n          <ng-container *xOutlet=\"table.headThTpl(); context: { $column: column }\">\r\n            {{ column.label }}\r\n          </ng-container>\r\n        </ng-container></a\r\n      >\r\n    }\r\n    @default {\r\n      <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n  <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n    <ng-container *xOutlet=\"columnTpl()[column.id]; context: { $column: column }\">\r\n      <ng-container *xOutlet=\"table.headThTpl(); context: { $column: column }\">\r\n        {{ column.label }}\r\n      </ng-container>\r\n    </ng-container>\r\n    @if (column.sort) {\r\n      <x-icon\r\n        type=\"fto-bar-chart\"\r\n        class=\"x-table-sort-icon\"\r\n        [class.x-table-icon-up]=\"sortStr() === column.id + ' desc'\"\r\n        [class.x-table-icon-down]=\"sortStr() === column.id + ' asc'\"\r\n      ></x-icon>\r\n    }\r\n  </a>\r\n</ng-template>\r\n" }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<thead\r\n  #thead\r\n  [ngStyle]=\"theadStyle()\"\r\n  [class.x-table-head-top]=\"position() === 'top'\"\r\n  [class.x-table-head-bottom]=\"position() === 'bottom'\"\r\n>\r\n  @if (cellConfig()) {\r\n    <tr [style.gridTemplateColumns]=\"cellConfig()!.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight()\">\r\n      @for (column of cellConfig()!.cells; track column.id) {\r\n        <th\r\n          [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n          [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n          [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n          [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n          [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n          [class.x-table-width-drag]=\"column.dragWidth\"\r\n          [style.grid-area]=\"column.gridArea\"\r\n          [style.left.px]=\"column.left\"\r\n          [style.right.px]=\"column.right\"\r\n          [style.min-height.px]=\"getRowHeight()\"\r\n          [title]=\"column?.label\"\r\n        >\r\n          <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n          @if (column.dragWidth) {\r\n            <div\r\n              class=\"x-table-drag-width\"\r\n              x-drag\r\n              (dragMoved)=\"dragWidthMoved($event, column)\"\r\n              (dragStarted)=\"dragWidthStarted($event, column)\"\r\n              (dragEnded)=\"dragWidthEnded($event, column)\"\r\n            ></div>\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"columnsTpl\"></ng-container>\r\n  }\r\n  @if (table.headSearchTpl()) {\r\n    <ng-container *ngTemplateOutlet=\"columnsTpl; context: { case: 'search' }\"></ng-container>\r\n  }\r\n</thead>\r\n\r\n<ng-template #columnsTpl let-case=\"case\">\r\n  <tr\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    (cdkDropListSorted)=\"dropListSorted($event)\"\r\n    (cdkDropListDropped)=\"dropListDropped($event)\"\r\n    [style.height.px]=\"getRowHeight()\"\r\n    [style.min-height.px]=\"getRowHeight()\"\r\n    [style.padding-right.px]=\"scrollYWidth()\"\r\n    [style.min-width.px]=\"scrollXWidth()\"\r\n    [class.x-table-search]=\"case === 'search'\"\r\n  >\r\n    @for (column of initColumns(); track column.id) {\r\n      <th\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"column.draggingWidth || !column.dragColumn\"\r\n        (cdkDragStarted)=\"dragStarted($event, column)\"\r\n        (cdkDragEnded)=\"dragEnded(column)\"\r\n        [ngClass]=\"thClassMap()\"\r\n        [class.x-table-th]=\"true\"\r\n        [class.x-table-sticky]=\"table.getSticky(column)\"\r\n        [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n        [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n        [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n        [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n        [style.min-height.px]=\"getRowHeight()\"\r\n        [style.width.px]=\"getColumnWidth(column)\"\r\n        [style.left.px]=\"column.left\"\r\n        [style.right.px]=\"getColumnRight(column.right)\"\r\n        [style.flex]=\"getFlex(column)\"\r\n      >\r\n        @switch (case) {\r\n          @case ('search') {\r\n            <ng-container *xOutlet=\"table.headSearchTpl()!; context: { $column: column }\"></ng-container>\r\n          }\r\n          @default {\r\n            <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n            @if (column.dragWidth) {\r\n              <div\r\n                class=\"x-table-drag-width\"\r\n                x-drag\r\n                (dragMoved)=\"dragWidthMoved($event, column)\"\r\n                (dragStarted)=\"dragWidthStarted($event, column)\"\r\n                (dragEnded)=\"dragWidthEnded($event, column)\"\r\n              ></div>\r\n            }\r\n          }\r\n        }\r\n      </th>\r\n    }\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n  @switch (column.type) {\r\n    @case ('checkbox') {\r\n      @if (column.headChecked) {\r\n        <x-checkbox\r\n          [data]=\"[{ id: true, label: column.label }]\"\r\n          [(ngModel)]=\"table.checkedValues()[column.id]\"\r\n          (ngModelChange)=\"table.headChecked($event, column)\"\r\n          [indeterminate]=\"table.checkedValues()[column.id + table.indeterminate()]\"\r\n          single\r\n        ></x-checkbox>\r\n      }\r\n      @if (!column.headChecked) {\r\n        <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n      }\r\n    }\r\n    @case ('index') {\r\n      <a\r\n        ><ng-container *xOutlet=\"columnTpl()[column.id]; context: { $column: column }\">\r\n          <ng-container *xOutlet=\"table.headThTpl(); context: { $column: column }\">\r\n            {{ column.label }}\r\n          </ng-container>\r\n        </ng-container></a\r\n      >\r\n    }\r\n    @default {\r\n      <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n  <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n    <ng-container *xOutlet=\"columnTpl()[column.id]; context: { $column: column }\">\r\n      <ng-container *xOutlet=\"table.headThTpl(); context: { $column: column }\">\r\n        {{ column.label }}\r\n      </ng-container>\r\n    </ng-container>\r\n    @if (column.sort) {\r\n      <x-icon\r\n        type=\"fto-bar-chart\"\r\n        class=\"x-table-sort-icon\"\r\n        [class.x-table-icon-up]=\"sortStr() === column.id + ' desc'\"\r\n        [class.x-table-icon-down]=\"sortStr() === column.id + ' asc'\"\r\n      ></x-icon>\r\n    }\r\n  </a>\r\n</ng-template>\r\n" }]
         }] });
 
 class XTableFootComponent extends XTableFootProperty {
@@ -785,10 +784,10 @@ class XTableFootComponent extends XTableFootProperty {
     ngAfterViewInit() {
         this.table.tfoot.set(this.tfoot());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableFootComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.1", type: XTableFootComponent, isStandalone: true, selector: "x-table-foot", viewQueries: [{ propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<tfoot #tfoot class=\"x-table-footer\" [style.height.px]=\"getRowHeight()!\" [style.min-height.px]=\"getRowHeight()\">\r\n  <ng-container *xOutlet=\"footer()\">{{ footer() }}</ng-container>\r\n</tfoot>\r\n", dependencies: [{ kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableFootComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.6", type: XTableFootComponent, isStandalone: true, selector: "x-table-foot", viewQueries: [{ propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<tfoot #tfoot class=\"x-table-footer\" [style.height.px]=\"getRowHeight()!\" [style.min-height.px]=\"getRowHeight()\">\r\n  <ng-container *xOutlet=\"footer()\">{{ footer() }}</ng-container>\r\n</tfoot>\r\n", dependencies: [{ kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableFootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableFootComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTableFootPrefix}`, standalone: true, imports: [XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tfoot #tfoot class=\"x-table-footer\" [style.height.px]=\"getRowHeight()!\" [style.min-height.px]=\"getRowHeight()\">\r\n  <ng-container *xOutlet=\"footer()\">{{ footer() }}</ng-container>\r\n</tfoot>\r\n" }]
         }] });
@@ -808,23 +807,19 @@ class XTableBodyComponent extends XTableBodyProperty {
         this.isEmpty = computed(() => this.data().length === 0);
         this.getRowHeight = computed(() => (this.rowHeight() == 0 ? '' : this.rowHeight()));
         this.getItemSize = computed(() => this.rowHeight() !== 0 && this.itemSize() > this.rowHeight() ? this.rowHeight() : this.itemSize());
-        this.docChanged = toSignal(fromEvent(this.doc.defaultView, 'resize').pipe(map(() => this.doc.documentElement.clientWidth)));
+        this.docClientHeight = signal(this.doc.documentElement.clientHeight);
+        this.headHeight = signal(0);
+        this.captionHeight = signal(0);
+        this.footHeight = signal(0);
+        this.paginationHeight = signal(0);
         this.bodyHeightSignal = computed(() => {
             const adaptionHeight = this.adaptionHeight();
             if (adaptionHeight && adaptionHeight > 0) {
-                this.docChanged();
-                const captionHeight = this.table.caption()?.nativeElement.clientHeight || 0;
-                let headHeight = 0;
-                for (let thead of this.table.theads()) {
-                    headHeight += thead.nativeElement.clientHeight;
-                }
-                const footHeight = this.table.tfoot()?.nativeElement.clientHeight || 0;
-                const paginationHeight = this.table.pagination()?.elementRef.nativeElement.clientHeight || 0;
-                let bodyHeight = this.docPercent() * this.doc.documentElement.clientHeight -
-                    captionHeight -
-                    headHeight -
-                    footHeight -
-                    paginationHeight -
+                let bodyHeight = this.docPercent() * this.docClientHeight() -
+                    this.captionHeight() -
+                    this.headHeight() -
+                    this.footHeight() -
+                    this.paginationHeight() -
                     adaptionHeight;
                 if (bodyHeight < 0)
                     bodyHeight = 0;
@@ -838,14 +833,14 @@ class XTableBodyComponent extends XTableBodyProperty {
         this.minBufferPxSignal = computed(() => {
             const adaptionHeight = this.adaptionHeight();
             if (adaptionHeight && adaptionHeight > 0) {
-                return this.bodyHeight();
+                return this.bodyHeightSignal();
             }
             return this.minBufferPx();
         });
         this.maxBufferPxSignal = computed(() => {
             const adaptionHeight = this.adaptionHeight();
             if (adaptionHeight && adaptionHeight > 0) {
-                return this.bodyHeight() * 1.2;
+                return this.bodyHeightSignal() * 1.2;
             }
             return this.maxBufferPx();
         });
@@ -864,13 +859,31 @@ class XTableBodyComponent extends XTableBodyProperty {
         XRemoveNgTag(this.elementRef.nativeElement);
         if (this.level() > 0)
             XRemoveNgTag(this.tbody().nativeElement);
+        fromEvent(this.doc.defaultView, 'resize')
+            .pipe(debounceTime(30), takeUntil(this.unSubject))
+            .subscribe(() => {
+            this.docClientHeight.set(this.doc.documentElement.clientHeight);
+        });
     }
     ngAfterViewInit() {
         this.table.virtualBody.set(this.virtualBody());
-        // this.table.bodyChange = () => this.cdr.detectChanges();
+        this.docClientHeight.set(this.doc.documentElement.clientHeight);
         this.setSubject();
         this.setScroll();
     }
+    ngAfterViewChecked() {
+        let headHeight = 0;
+        for (let thead of this.table.theads()) {
+            headHeight += thead.nativeElement.clientHeight;
+        }
+        this.headHeight.set(headHeight);
+        const captionHeight = this.table.caption()?.nativeElement.clientHeight || 0;
+        this.captionHeight.set(captionHeight);
+        const footHeight = this.table.tfoot()?.nativeElement.clientHeight || 0;
+        this.footHeight.set(footHeight);
+        const paginationHeight = this.table.pagination()?.elementRef.nativeElement.clientHeight || 0;
+        this.paginationHeight.set(paginationHeight);
+    }
     ngOnDestroy() {
         this.unSubject.next();
         this.unSubject.complete();
@@ -883,7 +896,7 @@ class XTableBodyComponent extends XTableBodyProperty {
                 this.renderer.setStyle(this.table.scrollContentEle(), 'width', `${this.scroll()?.x}px`);
             }
             XResize(this.table.table().nativeElement, this.table.scrollContentEle())
-                .pipe(takeUntil(this.unSubject))
+                .pipe(debounceTime(30), takeUntil(this.unSubject))
                 .subscribe((x) => {
                 this.resizeObserver = x.resizeObserver;
                 this.setScroll();
@@ -982,10 +995,10 @@ class XTableBodyComponent extends XTableBodyProperty {
     trackByItem(_index, item) {
         return item.id;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XTableBodyComponent, isStandalone: true, selector: "x-table-body", viewQueries: [{ propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<tbody #tbody>\r\n  @if (cellConfig()) {\r\n    @for (row of data(); track row.id; let i = $index) {\r\n      <tr [style.gridTemplateColumns]=\"cellConfig()!.gridTemplateColumns\">\r\n        @for (column of cellConfig()!.cells; track column; let j = $index) {\r\n          <td\r\n            [title]=\"getTitle(row, column)\"\r\n            [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n            [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n            [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n            [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n            [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n            [style.left.px]=\"column.left\"\r\n            [style.right.px]=\"column.right\"\r\n            [style.grid-area]=\"column.gridArea\"\r\n          >\r\n            <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n          </td>\r\n        }\r\n      </tr>\r\n    }\r\n  } @else {\r\n    @if (virtualScroll()) {\r\n      <cdk-virtual-scroll-viewport\r\n        #virtualBody\r\n        [itemSize]=\"getItemSize()\"\r\n        [minBufferPx]=\"minBufferPxSignal()\"\r\n        [maxBufferPx]=\"maxBufferPxSignal()\"\r\n        [style.height.px]=\"bodyHeightSignal()\"\r\n      >\r\n        <tr\r\n          *cdkVirtualFor=\"let row of data(); let index = index; trackBy: trackByItem\"\r\n          [class.x-table-activated]=\"allowSelectRow() && activatedRow()?.id === row.id\"\r\n          [style.height.px]=\"getRowHeight()\"\r\n          [style.min-height.px]=\"getRowHeight()\"\r\n          (click)=\"rowClick($event, row)\"\r\n        >\r\n          <!-- rowHeight \u4E3A 0 \u7684\u65F6\u5019\uFF0Cindex \u4E0B\u6807\u83B7\u53D6\u4E0D\u5230 -->\r\n          <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: getIndex(index, row) }\"></ng-container>\r\n        </tr>\r\n      </cdk-virtual-scroll-viewport>\r\n    } @else {\r\n      @for (row of data(); track row.id; let i = $index) {\r\n        <tr\r\n          [class.x-table-activated]=\"allowSelectRow() && activatedRow()?.id === row.id\"\r\n          [style.height.px]=\"getRowHeight()\"\r\n          [style.min-height.px]=\"getRowHeight()\"\r\n          (click)=\"rowClick($event, row)\"\r\n        >\r\n          <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: i }\"></ng-container>\r\n        </tr>\r\n        @if (table.treeTable() && row.children && row.expanded) {\r\n          <div class=\"x-table-children\" [class.x-table-expandTpl]=\"expandTpl()\">\r\n            <x-table-body\r\n              [data]=\"row.children\"\r\n              [columns]=\"table.columns()\"\r\n              [itemSize]=\"table.itemSize()\"\r\n              [rowHeight]=\"table.rowHeight()\"\r\n              [columnTpl]=\"table.bodyColumnTpl()\"\r\n              [allowSelectRow]=\"table.allowSelectRow()\"\r\n              [rowClass]=\"table.rowClass()\"\r\n              [cellConfig]=\"table.cellConfig()?.tbody\"\r\n              [(activatedRow)]=\"table.activatedRow\"\r\n              [expandedAll]=\"expandedAll()\"\r\n              [expandTpl]=\"expandTpl()\"\r\n              [level]=\"row.level! + 1\"\r\n            ></x-table-body>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  }\r\n  @if (table.showEmpty() && isEmpty() && level() === 0) {\r\n    <x-empty [img]=\"table.emptyImg()!\" [content]=\"table.emptyContent()!\"></x-empty>\r\n  }\r\n</tbody>\r\n\r\n<ng-template #rowTpl let-row=\"row\" let-i=\"i\">\r\n  @if (level() > 0 && expandTpl()) {\r\n    <ng-container *xOutlet=\"expandTpl(); context: { $row: row, $index: i, $level: level() }\"></ng-container>\r\n  } @else if (level() === 0 || !expandTpl()) {\r\n    <ng-container *xOutlet=\"rowDefault; context: { row: row, i: i, level: level() }\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #rowDefault let-row=\"row\" let-i=\"i\">\r\n  @for (column of columns(); track column.id; let j = $index) {\r\n    <td\r\n      [style.width.px]=\"column.width\"\r\n      [style.flex]=\"getFlex(column)\"\r\n      [title]=\"getTitle(row, column)\"\r\n      [class.x-table-dragging]=\"column.dragging\"\r\n      [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n      [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n      [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n      [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n      [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n      [style.left.px]=\"column.left\"\r\n      [style.right.px]=\"column.right\"\r\n      [ngClass]=\"!rowClass() ? {} : rowClass()!(row, i)\"\r\n    >\r\n      <ng-template *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-template>\r\n    </td>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-column=\"column\" let-row=\"row\" let-i=\"i\">\r\n  @switch (column.type) {\r\n    @case ('checkbox') {\r\n      <x-checkbox\r\n        [data]=\"[{ id: true, label: '' }]\"\r\n        [(ngModel)]=\"row[column.id]\"\r\n        [disabled]=\"row.disabled\"\r\n        (ngModelChange)=\"table.bodyChecked($event, column, row)\"\r\n        single\r\n      ></x-checkbox>\r\n    }\r\n    @case ('index') {\r\n      <div>{{ table.getIndex(i) }}</div>\r\n    }\r\n    @default {\r\n      @if (table.isExpandColumn(column)) {\r\n        <x-button\r\n          [class.is-leaf]=\"!row.leaf\"\r\n          [class.is-expanded]=\"row.expanded\"\r\n          (click)=\"onExpanded($event, row)\"\r\n          icon=\"fto-chevron-right\"\r\n          size=\"mini\"\r\n          onlyIcon\r\n          flat\r\n          plain\r\n          class=\"x-table-expand\"\r\n          [style.margin-left.rem]=\"row.level - 0.5\"\r\n        ></x-button>\r\n      }\r\n      <ng-container\r\n        *xOutlet=\"columnTpl()[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\"\r\n      >\r\n        <ng-container *xOutlet=\"table.bodyTdTpl(); context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n          <div [innerHTML]=\"row[column.id]\" [style.text-align]=\"column.textAlign\"></div>\r\n          {{ table.rowExpand() && table.rowExpand()!.id === column.id ? 'x-table-body-level-' + row.level : '' }}\r\n        </ng-container>\r\n      </ng-container>\r\n    }\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: XTableBodyComponent, selector: "x-table-body" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "component", type: XButtonComponent, selector: "x-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: XTableBodyComponent, isStandalone: true, selector: "x-table-body", viewQueries: [{ propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<tbody #tbody>\r\n  @if (cellConfig()) {\r\n    @for (row of data(); track row.id; let i = $index) {\r\n      <tr [style.gridTemplateColumns]=\"cellConfig()!.gridTemplateColumns\">\r\n        @for (column of cellConfig()!.cells; track column; let j = $index) {\r\n          <td\r\n            [title]=\"getTitle(row, column)\"\r\n            [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n            [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n            [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n            [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n            [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n            [style.left.px]=\"column.left\"\r\n            [style.right.px]=\"column.right\"\r\n            [style.grid-area]=\"column.gridArea\"\r\n          >\r\n            <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n          </td>\r\n        }\r\n      </tr>\r\n    }\r\n  } @else {\r\n    @if (virtualScroll()) {\r\n      <cdk-virtual-scroll-viewport\r\n        #virtualBody\r\n        [itemSize]=\"getItemSize()\"\r\n        [minBufferPx]=\"minBufferPxSignal()\"\r\n        [maxBufferPx]=\"maxBufferPxSignal()\"\r\n        [style.height.px]=\"bodyHeightSignal()\"\r\n      >\r\n        <tr\r\n          *cdkVirtualFor=\"let row of data(); let index = index; trackBy: trackByItem\"\r\n          [class.x-table-activated]=\"allowSelectRow() && activatedRow()?.id === row.id\"\r\n          [style.height.px]=\"getRowHeight()\"\r\n          [style.min-height.px]=\"getRowHeight()\"\r\n          (click)=\"rowClick($event, row)\"\r\n        >\r\n          <!-- rowHeight \u4E3A 0 \u7684\u65F6\u5019\uFF0Cindex \u4E0B\u6807\u83B7\u53D6\u4E0D\u5230 -->\r\n          <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: getIndex(index, row) }\"></ng-container>\r\n        </tr>\r\n      </cdk-virtual-scroll-viewport>\r\n    } @else {\r\n      @for (row of data(); track row.id; let i = $index) {\r\n        <tr\r\n          [class.x-table-activated]=\"allowSelectRow() && activatedRow()?.id === row.id\"\r\n          [style.height.px]=\"getRowHeight()\"\r\n          [style.min-height.px]=\"getRowHeight()\"\r\n          (click)=\"rowClick($event, row)\"\r\n        >\r\n          <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: i }\"></ng-container>\r\n        </tr>\r\n        @if (table.treeTable() && row.children && row.expanded) {\r\n          <div class=\"x-table-children\" [class.x-table-expandTpl]=\"expandTpl()\">\r\n            <x-table-body\r\n              [data]=\"row.children\"\r\n              [columns]=\"table.columns()\"\r\n              [itemSize]=\"table.itemSize()\"\r\n              [rowHeight]=\"table.rowHeight()\"\r\n              [columnTpl]=\"table.bodyColumnTpl()\"\r\n              [allowSelectRow]=\"table.allowSelectRow()\"\r\n              [rowClass]=\"table.rowClass()\"\r\n              [cellConfig]=\"table.cellConfig()?.tbody\"\r\n              [(activatedRow)]=\"table.activatedRow\"\r\n              [expandedAll]=\"expandedAll()\"\r\n              [expandTpl]=\"expandTpl()\"\r\n              [level]=\"row.level! + 1\"\r\n            ></x-table-body>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  }\r\n  @if (table.showEmpty() && isEmpty() && level() === 0) {\r\n    <x-empty [img]=\"table.emptyImg()!\" [content]=\"table.emptyContent()!\"></x-empty>\r\n  }\r\n</tbody>\r\n\r\n<ng-template #rowTpl let-row=\"row\" let-i=\"i\">\r\n  @if (level() > 0 && expandTpl()) {\r\n    <ng-container *xOutlet=\"expandTpl(); context: { $row: row, $index: i, $level: level() }\"></ng-container>\r\n  } @else if (level() === 0 || !expandTpl()) {\r\n    <ng-container *xOutlet=\"rowDefault; context: { row: row, i: i, level: level() }\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #rowDefault let-row=\"row\" let-i=\"i\">\r\n  @for (column of columns(); track column.id; let j = $index) {\r\n    <td\r\n      [style.width.px]=\"column.width\"\r\n      [style.flex]=\"getFlex(column)\"\r\n      [title]=\"getTitle(row, column)\"\r\n      [class.x-table-dragging]=\"column.dragging\"\r\n      [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n      [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n      [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n      [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n      [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n      [style.left.px]=\"column.left\"\r\n      [style.right.px]=\"column.right\"\r\n      [ngClass]=\"!rowClass() ? {} : rowClass()!(row, i)\"\r\n    >\r\n      <ng-template *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-template>\r\n    </td>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-column=\"column\" let-row=\"row\" let-i=\"i\">\r\n  @switch (column.type) {\r\n    @case ('checkbox') {\r\n      <x-checkbox\r\n        [data]=\"[{ id: true, label: '' }]\"\r\n        [(ngModel)]=\"row[column.id]\"\r\n        [disabled]=\"row.disabled\"\r\n        (ngModelChange)=\"table.bodyChecked($event, column, row)\"\r\n        single\r\n      ></x-checkbox>\r\n    }\r\n    @case ('index') {\r\n      <div>{{ table.getIndex(i) }}</div>\r\n    }\r\n    @default {\r\n      @if (table.isExpandColumn(column)) {\r\n        <x-button\r\n          [class.is-leaf]=\"!row.leaf\"\r\n          [class.is-expanded]=\"row.expanded\"\r\n          (click)=\"onExpanded($event, row)\"\r\n          icon=\"fto-chevron-right\"\r\n          size=\"mini\"\r\n          onlyIcon\r\n          flat\r\n          plain\r\n          class=\"x-table-expand\"\r\n          [style.margin-left.rem]=\"row.level - 0.5\"\r\n        ></x-button>\r\n      }\r\n      <ng-container\r\n        *xOutlet=\"columnTpl()[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\"\r\n      >\r\n        <ng-container *xOutlet=\"table.bodyTdTpl(); context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n          <div [innerHTML]=\"row[column.id]\" [style.text-align]=\"column.textAlign\"></div>\r\n          {{ table.rowExpand() && table.rowExpand()!.id === column.id ? 'x-table-body-level-' + row.level : '' }}\r\n        </ng-container>\r\n      </ng-container>\r\n    }\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: XTableBodyComponent, selector: "x-table-body" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "component", type: XButtonComponent, selector: "x-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTableBodyPrefix}`, standalone: true, imports: [
                         NgClass,
@@ -1104,6 +1117,8 @@ class XTableComponent extends XTableProperty {
             };
             return { thead: setRule(cellConfig.thead), tbody: setRule(cellConfig.tbody) };
         });
+        this.tbodyHeight = signal(0);
+        this.tbodyScrollHeight = signal(0);
     }
     ngOnInit() {
         this.setRowChecked();
@@ -1121,6 +1136,20 @@ class XTableComponent extends XTableProperty {
         XIsChange(columns, activatedRow, showPagination) && this.cdr.detectChanges();
         XIsChange(manual) && this.setManual();
     }
+    ngAfterViewChecked() {
+        if (this.bodyCom().length > 0) {
+            const first = this.bodyCom()[0].tbody().nativeElement;
+            this.tbodyHeight.set(first.clientHeight);
+            this.tbodyScrollHeight.set(first.scrollHeight);
+            // let trs = first.tbody().nativeElement.querySelectorAll('tr');
+            // let i = 0;
+            // let h = 0;
+            // while (i < trs.length) {
+            //   h += trs[i].clientHeight;
+            // }
+            // this.trsHeight.set(h);
+        }
+    }
     ngOnDestroy() {
         this.unSubject.next();
         this.unSubject.complete();
@@ -1326,10 +1355,10 @@ class XTableComponent extends XTableProperty {
         this.footCom()?.cdr.markForCheck();
         this.cdr.markForCheck();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XTableComponent, isStandalone: true, selector: "x-table", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, isSignal: true }, { propertyName: "caption", first: true, predicate: ["caption"], descendants: true, isSignal: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true, isSignal: true }, { propertyName: "stickyTopRightEle", first: true, predicate: ["stickyTopRightEle"], descendants: true, isSignal: true }, { propertyName: "stickyBottomRightEle", first: true, predicate: ["stickyBottomRightEle"], descendants: true, isSignal: true }, { propertyName: "headCom", predicate: XTableHeadComponent, descendants: true, isSignal: true }, { propertyName: "bodyCom", predicate: XTableBodyComponent, descendants: true, isSignal: true }, { propertyName: "footCom", first: true, predicate: XTableFootComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\r\n  #table\r\n  class=\"x-table\"\r\n  [ngClass]=\"classMap()\"\r\n  [x-loading]=\"loading() && getting()\"\r\n  [class.x-table-wrap-border-hidden]=\"hiddenWrapBorder()\"\r\n  [class.x-table-scroll-left]=\"getScrollLeft()\"\r\n  [class.x-table-scroll-left-max]=\"scrollLeftMax()\"\r\n  [class.x-table-scroll-top]=\"getScrollTop()\"\r\n  [class.x-table-has-scroll-right]=\"scrollYWidth()\"\r\n  [class.x-table-has-scroll-bottom]=\"scrollXWidth()\"\r\n  [class.x-table-bordered]=\"bordered()\"\r\n  [class.x-table-td-adaption-height]=\"rowHeight() == 0\"\r\n  [class.x-table-cell-config]=\"!!cellConfigSignal()\"\r\n>\r\n  @if (header()) {\r\n    <caption #caption class=\"x-table-header\" [style.height.px]=\"getRowHeight()\" [style.min-height.px]=\"getRowHeight()\">\r\n      <ng-container *xOutlet=\"header()\">{{ header() }}</ng-container>\r\n    </caption>\r\n  }\r\n  @if (showHeader() && (headerPosition() === 'top' || headerPosition() === 'top-bottom')) {\r\n    <x-table-head\r\n      [columns]=\"columns()\"\r\n      [rowHeight]=\"rowHeight()\"\r\n      [columnTpl]=\"headColumnTpl()\"\r\n      [scrollYWidth]=\"scrollYWidth()\"\r\n      [scrollXWidth]=\"scrollXWidth()!\"\r\n      [cellConfig]=\"cellConfigSignal()?.thead\"\r\n      [position]=\"'top'\"\r\n    ></x-table-head>\r\n  }\r\n  <x-table-body\r\n    [data]=\"treeTable() ? treeTableData() : tableData()\"\r\n    [columns]=\"columns()\"\r\n    [itemSize]=\"itemSize()\"\r\n    [rowHeight]=\"rowHeight()\"\r\n    [bodyHeight]=\"bodyHeight()!\"\r\n    [columnTpl]=\"bodyColumnTpl()\"\r\n    [allowSelectRow]=\"allowSelectRow()\"\r\n    [virtualScroll]=\"virtualScroll()\"\r\n    [minBufferPx]=\"minBufferPx()\"\r\n    [maxBufferPx]=\"maxBufferPx()\"\r\n    [adaptionHeight]=\"adaptionHeight()!\"\r\n    [docPercent]=\"docPercent()\"\r\n    [scroll]=\"scroll()\"\r\n    [rowClass]=\"rowClass()\"\r\n    [cellConfig]=\"cellConfigSignal()?.tbody\"\r\n    [expandedAll]=\"expandedAll()\"\r\n    [expandTpl]=\"expandTpl()\"\r\n    [(activatedRow)]=\"activatedRow\"\r\n  ></x-table-body>\r\n  @if (showHeader() && (headerPosition() === 'bottom' || headerPosition() === 'top-bottom')) {\r\n    <x-table-head\r\n      [columns]=\"columns()\"\r\n      [rowHeight]=\"rowHeight()\"\r\n      [columnTpl]=\"headColumnTpl()\"\r\n      [scrollYWidth]=\"scrollYWidth()\"\r\n      [scrollXWidth]=\"scrollXWidth()!\"\r\n      [cellConfig]=\"cellConfigSignal()?.thead\"\r\n      [position]=\"'bottom'\"\r\n    ></x-table-head>\r\n  }\r\n  @if (footer()) {\r\n    <x-table-foot [footer]=\"footer()\" [rowHeight]=\"rowHeight()\"></x-table-foot>\r\n  }\r\n  @if (hasStickyTopRight()) {\r\n    <div\r\n      #stickyTopRightEle\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [class.x-table-border-bottom]=\"headSearchTpl()\"\r\n      [style.top.px]=\"getStickyTopScrollTop()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyTopRight() && headSearchTpl()) {\r\n    <div\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [style.top.px]=\"getStickyTopScrollTop() + getStickyTopRightEleHeight()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyBottomRight()) {\r\n    <div\r\n      #stickyBottomRightEle\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [style.bottom.px]=\"getStickyBottomScrollTop()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyBottomRight() && headSearchTpl()) {\r\n    <div\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [class.x-table-border-bottom]=\"headSearchTpl()\"\r\n      [style.bottom.px]=\"getStickyBottomScrollTop() + getStickyBottomRightEleHeight()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n</table>\r\n@if (showPagination() && size()) {\r\n  <x-pagination\r\n    #pagination\r\n    [(index)]=\"index\"\r\n    [(size)]=\"size\"\r\n    [(query)]=\"query\"\r\n    [total]=\"total()\"\r\n    (indexChange)=\"pageChange('index')\"\r\n    (sizeChange)=\"pageChange('size')\"\r\n    [showEllipsis]=\"showEllipsis()\"\r\n    [showTotal]=\"showTotal()\"\r\n    [space]=\"space()\"\r\n    [showBackground]=\"showBackground()\"\r\n    [showSize]=\"showSize()\"\r\n    [showJump]=\"showJump()\"\r\n    [jumpWidth]=\"jumpWidth()\"\r\n    [showInputSize]=\"showInputSize()\"\r\n    [inputSizeWidth]=\"inputSizeWidth()\"\r\n    [sizeData]=\"sizeData()\"\r\n    [sizeWidth]=\"sizeWidth()\"\r\n    [pageLinkSize]=\"pageLinkSize()\"\r\n    [disabled]=\"disabled()\"\r\n    [totalTpl]=\"totalTpl()\"\r\n    [simple]=\"simple()\"\r\n    [simpleIndexWidth]=\"simpleIndexWidth()\"\r\n  >\r\n  </x-pagination>\r\n}\r\n", styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;position:relative}.x-table:not(.x-table-wrap-border-hidden){border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead{position:relative;overflow:hidden;display:block;min-height:42px}.x-table>thead>tr{width:100%;display:flex;min-height:42px}.x-table>thead>tr>th{display:flex;align-items:center;flex:1;position:relative;font-weight:600;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead>tr>th>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-table>thead>tr>th.x-table-sticky{position:sticky;z-index:5}.x-table>thead>tr>th .x-table-drag-width{position:absolute;height:100%;width:.1875rem;right:-.125rem;cursor:ew-resize;transition:background-color var(--x-animation-duration-fast);z-index:1}.x-table>thead>tr>th .x-table-drag-width:hover{background-color:var(--x-primary)}.x-table>thead>tr.cdk-drop-list-dragging>th.cdk-drag-placeholder{background-color:var(--x-background-a200);opacity:.9}.x-table>thead.x-table-head-bottom>tr>th{border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:none}.x-table>thead.x-table-head-bottom>tr.x-table-search>th{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody tr>td>div{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-table>tbody tr>td.x-table-sticky{position:sticky;z-index:5}.x-table>tbody tr>td>x-button .x-icon{transition:var(--x-animation-duration-base)}.x-table>tbody tr>td>x-button.is-leaf{visibility:hidden}.x-table>tbody tr>td>x-button.is-expanded .x-icon{transform:rotate(90deg)}.x-table>tbody tr>td.x-table-dragging{background-color:var(--x-background-a200);opacity:.9}.x-table>tbody tr.x-table-activated>td{background-color:var(--x-primary-900)}.x-table>tbody tr:hover:not(.x-table-activated)>td{background-color:var(--x-background-a100)}.x-table>tbody tr:last-child>td{border-bottom:none}.x-table>tbody x-empty{position:absolute;top:0;width:100%;padding:calc(var(--x-font-size) * 2)}.x-table-sort{cursor:pointer;transition:transform .2s}.x-table-sort:hover{color:var(--x-text-300)}.x-table-sort:active{transform:translate(1px,1px)}.x-table-sort-icon.x-icon{margin-left:.25rem;display:none;font-size:1rem;transform:rotate(90deg) rotateY(180deg);transition:.3s}.x-table-sort-icon.x-icon.x-table-icon-up,.x-table-sort-icon.x-icon.x-table-icon-down{display:inherit}.x-table-sort-icon.x-icon.x-table-icon-down{transform:rotate(90deg)}.x-table-scroll-top>thead{box-shadow:var(--x-box-shadow-bottom);z-index:1}.x-table-scroll-left .x-table-sticky-left-last{box-shadow:var(--x-box-shadow-right);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-td-adaption-height>tbody tr>td{overflow:inherit}.x-table-td-adaption-height>tbody tr>td>div{white-space:inherit;text-overflow:inherit;overflow:inherit}.x-table-bordered>thead>tr>th,.x-table-bordered>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>thead>tr>th:last-child,.x-table-bordered>tbody tr>td:last-child{border-right:none}.x-table-cell-config>thead tr,.x-table-cell-config>tbody tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>thead>tr>th,.x-table-cell-config>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>thead>tr>th:last-child,.x-table-cell-config>tbody tr>td:last-child{border-right:none}.x-table-expand{margin-right:.5rem}.x-table-expandTpl>tr{display:block!important;height:inherit!important}.x-table-header{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left;display:flex;align-items:center}.x-table-footer{display:flex;align-items:center;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-sticky-right-scroll{position:absolute;right:0;min-height:42px;background-color:var(--x-background);z-index:1}.x-table-has-scroll-right .x-table-footer{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-has-scroll-bottom:not(.x-table-scroll-left-max) .x-table-sticky-right-first{box-shadow:var(--x-box-shadow-left);border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-border-bottom{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-border-top{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-row-size-big>thead>tr>th,.x-table-row-size-big>tbody tr>td{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big .x-table-header,.x-table-row-size-big .x-table-footer{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>thead>tr>th,.x-table-row-size-large>tbody tr>td{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large .x-table-header,.x-table-row-size-large .x-table-footer{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>thead>tr>th,.x-table-row-size-medium>tbody tr>td{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}.x-table-row-size-medium .x-table-header,.x-table-row-size-medium .x-table-footer{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}.x-table-row-size-small>thead>tr>th,.x-table-row-size-small>tbody tr>td{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small .x-table-header,.x-table-row-size-small .x-table-footer{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>thead>tr>th,.x-table-row-size-mini>tbody tr>td{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}.x-table-row-size-mini .x-table-header,.x-table-row-size-mini .x-table-footer{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}x-table{width:100%;display:flex;flex-direction:column}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}x-table.x-table-top-left{flex-direction:column-reverse}x-table.x-table-top-left .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-center{flex-direction:column-reverse;align-items:center}x-table.x-table-top-center .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-right{flex-direction:column-reverse;align-items:flex-end}x-table.x-table-top-right .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-bottom-center{align-items:center}x-table.x-table-bottom-right{align-items:flex-end}body>.x-table-th{display:block}body>.x-table-th-big{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}body>.x-table-th-large{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}body>.x-table-th-medium{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}body>.x-table-th-small{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}body>.x-table-th-mini{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}body>.x-table-th.cdk-drag-preview{display:flex;align-items:center;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-style:dashed;background-color:var(--x-background);opacity:.8;box-shadow:var(--x-box-shadow)}body>.x-table-th.cdk-drag-preview>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}body>.x-table-th.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XLoadingComponent, selector: "x-loading, [x-loading]" }, { kind: "component", type: XTableHeadComponent, selector: "x-table-head" }, { kind: "component", type: XTableFootComponent, selector: "x-table-foot" }, { kind: "component", type: XTableBodyComponent, selector: "x-table-body" }, { kind: "component", type: XPaginationComponent, selector: "x-pagination" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: XTableComponent, isStandalone: true, selector: "x-table", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, isSignal: true }, { propertyName: "caption", first: true, predicate: ["caption"], descendants: true, isSignal: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true, isSignal: true }, { propertyName: "stickyTopRightEle", first: true, predicate: ["stickyTopRightEle"], descendants: true, isSignal: true }, { propertyName: "stickyBottomRightEle", first: true, predicate: ["stickyBottomRightEle"], descendants: true, isSignal: true }, { propertyName: "headCom", predicate: XTableHeadComponent, descendants: true, isSignal: true }, { propertyName: "bodyCom", predicate: XTableBodyComponent, descendants: true, isSignal: true }, { propertyName: "footCom", first: true, predicate: XTableFootComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\r\n  #table\r\n  class=\"x-table\"\r\n  [ngClass]=\"classMap()\"\r\n  [x-loading]=\"loading() && getting()\"\r\n  [class.x-table-wrap-border-hidden]=\"hiddenWrapBorder()\"\r\n  [class.x-table-scroll-left]=\"getScrollLeft()\"\r\n  [class.x-table-scroll-left-max]=\"scrollLeftMax()\"\r\n  [class.x-table-scroll-top]=\"getScrollTop()\"\r\n  [class.x-table-has-scroll-right]=\"scrollYWidth()\"\r\n  [class.x-table-has-scroll-bottom]=\"scrollXWidth()\"\r\n  [class.x-table-bordered]=\"bordered()\"\r\n  [class.x-table-td-adaption-height]=\"rowHeight() == 0\"\r\n  [class.x-table-cell-config]=\"!!cellConfigSignal()\"\r\n  [class.x-table-last-tr-bordered]=\"!!adaptionHeight() || tbodyHeight() >= tbodyScrollHeight()\"\r\n>\r\n  @if (header()) {\r\n    <caption #caption class=\"x-table-header\" [style.height.px]=\"getRowHeight()\" [style.min-height.px]=\"getRowHeight()\">\r\n      <ng-container *xOutlet=\"header()\">{{ header() }}</ng-container>\r\n    </caption>\r\n  }\r\n  @if (showHeader() && (headerPosition() === 'top' || headerPosition() === 'top-bottom')) {\r\n    <x-table-head\r\n      [columns]=\"columns()\"\r\n      [rowHeight]=\"rowHeight()\"\r\n      [columnTpl]=\"headColumnTpl()\"\r\n      [scrollYWidth]=\"scrollYWidth()\"\r\n      [scrollXWidth]=\"scrollXWidth()!\"\r\n      [cellConfig]=\"cellConfigSignal()?.thead\"\r\n      [position]=\"'top'\"\r\n    ></x-table-head>\r\n  }\r\n  <x-table-body\r\n    [data]=\"treeTable() ? treeTableData() : tableData()\"\r\n    [columns]=\"columns()\"\r\n    [itemSize]=\"itemSize()\"\r\n    [rowHeight]=\"rowHeight()\"\r\n    [bodyHeight]=\"bodyHeight()!\"\r\n    [columnTpl]=\"bodyColumnTpl()\"\r\n    [allowSelectRow]=\"allowSelectRow()\"\r\n    [virtualScroll]=\"virtualScroll()\"\r\n    [minBufferPx]=\"minBufferPx()\"\r\n    [maxBufferPx]=\"maxBufferPx()\"\r\n    [adaptionHeight]=\"adaptionHeight()!\"\r\n    [docPercent]=\"docPercent()\"\r\n    [scroll]=\"scroll()\"\r\n    [rowClass]=\"rowClass()\"\r\n    [cellConfig]=\"cellConfigSignal()?.tbody\"\r\n    [expandedAll]=\"expandedAll()\"\r\n    [expandTpl]=\"expandTpl()\"\r\n    [(activatedRow)]=\"activatedRow\"\r\n  ></x-table-body>\r\n  @if (showHeader() && (headerPosition() === 'bottom' || headerPosition() === 'top-bottom')) {\r\n    <x-table-head\r\n      [columns]=\"columns()\"\r\n      [rowHeight]=\"rowHeight()\"\r\n      [columnTpl]=\"headColumnTpl()\"\r\n      [scrollYWidth]=\"scrollYWidth()\"\r\n      [scrollXWidth]=\"scrollXWidth()!\"\r\n      [cellConfig]=\"cellConfigSignal()?.thead\"\r\n      [position]=\"'bottom'\"\r\n    ></x-table-head>\r\n  }\r\n  @if (footer()) {\r\n    <x-table-foot [footer]=\"footer()\" [rowHeight]=\"rowHeight()\"></x-table-foot>\r\n  }\r\n  @if (hasStickyTopRight()) {\r\n    <div\r\n      #stickyTopRightEle\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [class.x-table-border-bottom]=\"headSearchTpl()\"\r\n      [style.top.px]=\"getStickyTopScrollTop()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyTopRight() && headSearchTpl()) {\r\n    <div\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [style.top.px]=\"getStickyTopScrollTop() + getStickyTopRightEleHeight()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyBottomRight()) {\r\n    <div\r\n      #stickyBottomRightEle\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [style.bottom.px]=\"getStickyBottomScrollTop()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyBottomRight() && headSearchTpl()) {\r\n    <div\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [class.x-table-border-bottom]=\"headSearchTpl()\"\r\n      [style.bottom.px]=\"getStickyBottomScrollTop() + getStickyBottomRightEleHeight()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n</table>\r\n@if (showPagination() && size()) {\r\n  <x-pagination\r\n    #pagination\r\n    [(index)]=\"index\"\r\n    [(size)]=\"size\"\r\n    [(query)]=\"query\"\r\n    [total]=\"total()\"\r\n    (indexChange)=\"pageChange('index')\"\r\n    (sizeChange)=\"pageChange('size')\"\r\n    [showEllipsis]=\"showEllipsis()\"\r\n    [showTotal]=\"showTotal()\"\r\n    [space]=\"space()\"\r\n    [showBackground]=\"showBackground()\"\r\n    [showSize]=\"showSize()\"\r\n    [showJump]=\"showJump()\"\r\n    [jumpWidth]=\"jumpWidth()\"\r\n    [showInputSize]=\"showInputSize()\"\r\n    [inputSizeWidth]=\"inputSizeWidth()\"\r\n    [sizeData]=\"sizeData()\"\r\n    [sizeWidth]=\"sizeWidth()\"\r\n    [pageLinkSize]=\"pageLinkSize()\"\r\n    [disabled]=\"disabled()\"\r\n    [totalTpl]=\"totalTpl()\"\r\n    [simple]=\"simple()\"\r\n    [simpleIndexWidth]=\"simpleIndexWidth()\"\r\n  >\r\n  </x-pagination>\r\n}\r\n", styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;position:relative}.x-table:not(.x-table-wrap-border-hidden){border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead{position:relative;overflow:hidden;display:block;min-height:42px}.x-table>thead>tr{width:100%;display:flex;min-height:42px}.x-table>thead>tr>th{display:flex;align-items:center;flex:1;position:relative;font-weight:600;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead>tr>th>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-table>thead>tr>th.x-table-sticky{position:sticky;z-index:5}.x-table>thead>tr>th .x-table-drag-width{position:absolute;height:100%;width:.1875rem;right:-.125rem;cursor:ew-resize;transition:background-color var(--x-animation-duration-fast);z-index:1}.x-table>thead>tr>th .x-table-drag-width:hover{background-color:var(--x-primary)}.x-table>thead>tr.cdk-drop-list-dragging>th.cdk-drag-placeholder{background-color:var(--x-background-a200);opacity:.9}.x-table>thead.x-table-head-bottom>tr>th{border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:none}.x-table>thead.x-table-head-bottom>tr.x-table-search>th{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody tr>td>div{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-table>tbody tr>td.x-table-sticky{position:sticky;z-index:5}.x-table>tbody tr>td>x-button .x-icon{transition:var(--x-animation-duration-base)}.x-table>tbody tr>td>x-button.is-leaf{visibility:hidden}.x-table>tbody tr>td>x-button.is-expanded .x-icon{transform:rotate(90deg)}.x-table>tbody tr>td.x-table-dragging{background-color:var(--x-background-a200);opacity:.9}.x-table>tbody tr.x-table-activated>td{background-color:var(--x-primary-900)}.x-table>tbody tr:hover:not(.x-table-activated)>td{background-color:var(--x-background-a100)}.x-table>tbody tr:last-child>td{border-bottom:none}.x-table>tbody x-empty{position:absolute;top:0;width:100%;padding:calc(var(--x-font-size) * 2)}.x-table-sort{cursor:pointer;transition:transform .2s}.x-table-sort:hover{color:var(--x-text-300)}.x-table-sort:active{transform:translate(1px,1px)}.x-table-sort-icon.x-icon{margin-left:.25rem;display:none;font-size:1rem;transform:rotate(90deg) rotateY(180deg);transition:.3s}.x-table-sort-icon.x-icon.x-table-icon-up,.x-table-sort-icon.x-icon.x-table-icon-down{display:inherit}.x-table-sort-icon.x-icon.x-table-icon-down{transform:rotate(90deg)}.x-table-scroll-top>thead{box-shadow:var(--x-box-shadow-bottom);z-index:1}.x-table-scroll-left .x-table-sticky-left-last{box-shadow:var(--x-box-shadow-right);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-td-adaption-height>tbody tr>td{overflow:inherit}.x-table-td-adaption-height>tbody tr>td>div{white-space:inherit;text-overflow:inherit;overflow:inherit}.x-table-bordered>thead>tr>th,.x-table-bordered>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>thead>tr>th:last-child,.x-table-bordered>tbody tr>td:last-child{border-right:none}.x-table-cell-config>thead tr,.x-table-cell-config>tbody tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>thead>tr>th,.x-table-cell-config>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>thead>tr>th:last-child,.x-table-cell-config>tbody tr>td:last-child{border-right:none}.x-table-expand{margin-right:.5rem}.x-table-expandTpl>tr{display:block!important;height:inherit!important}.x-table-header{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left;display:flex;align-items:center}.x-table-footer{display:flex;align-items:center;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-sticky-right-scroll{position:absolute;right:0;min-height:42px;background-color:var(--x-background);z-index:1}.x-table-has-scroll-right .x-table-footer{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-has-scroll-bottom:not(.x-table-scroll-left-max) .x-table-sticky-right-first{box-shadow:var(--x-box-shadow-left);border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-border-bottom{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-border-top{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-last-tr-bordered>tbody tr:last-child>td{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-row-size-big>thead>tr>th,.x-table-row-size-big>tbody tr>td{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big .x-table-header,.x-table-row-size-big .x-table-footer{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>thead>tr>th,.x-table-row-size-large>tbody tr>td{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large .x-table-header,.x-table-row-size-large .x-table-footer{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>thead>tr>th,.x-table-row-size-medium>tbody tr>td{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}.x-table-row-size-medium .x-table-header,.x-table-row-size-medium .x-table-footer{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}.x-table-row-size-small>thead>tr>th,.x-table-row-size-small>tbody tr>td{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small .x-table-header,.x-table-row-size-small .x-table-footer{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>thead>tr>th,.x-table-row-size-mini>tbody tr>td{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}.x-table-row-size-mini .x-table-header,.x-table-row-size-mini .x-table-footer{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}x-table{width:100%;display:flex;flex-direction:column}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}x-table.x-table-top-left{flex-direction:column-reverse}x-table.x-table-top-left .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-center{flex-direction:column-reverse;align-items:center}x-table.x-table-top-center .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-right{flex-direction:column-reverse;align-items:flex-end}x-table.x-table-top-right .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-bottom-center{align-items:center}x-table.x-table-bottom-right{align-items:flex-end}body>.x-table-th{display:block}body>.x-table-th-big{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}body>.x-table-th-large{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}body>.x-table-th-medium{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}body>.x-table-th-small{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}body>.x-table-th-mini{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}body>.x-table-th.cdk-drag-preview{display:flex;align-items:center;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-style:dashed;background-color:var(--x-background);opacity:.8;box-shadow:var(--x-box-shadow)}body>.x-table-th.cdk-drag-preview>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}body>.x-table-th.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XLoadingComponent, selector: "x-loading, [x-loading]" }, { kind: "component", type: XTableHeadComponent, selector: "x-table-head" }, { kind: "component", type: XTableFootComponent, selector: "x-table-foot" }, { kind: "component", type: XTableBodyComponent, selector: "x-table-body" }, { kind: "component", type: XPaginationComponent, selector: "x-pagination" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTablePrefix}`, standalone: true, imports: [
                         NgClass,
@@ -1339,15 +1368,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
                         XTableFootComponent,
                         XTableBodyComponent,
                         XPaginationComponent
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\r\n  #table\r\n  class=\"x-table\"\r\n  [ngClass]=\"classMap()\"\r\n  [x-loading]=\"loading() && getting()\"\r\n  [class.x-table-wrap-border-hidden]=\"hiddenWrapBorder()\"\r\n  [class.x-table-scroll-left]=\"getScrollLeft()\"\r\n  [class.x-table-scroll-left-max]=\"scrollLeftMax()\"\r\n  [class.x-table-scroll-top]=\"getScrollTop()\"\r\n  [class.x-table-has-scroll-right]=\"scrollYWidth()\"\r\n  [class.x-table-has-scroll-bottom]=\"scrollXWidth()\"\r\n  [class.x-table-bordered]=\"bordered()\"\r\n  [class.x-table-td-adaption-height]=\"rowHeight() == 0\"\r\n  [class.x-table-cell-config]=\"!!cellConfigSignal()\"\r\n>\r\n  @if (header()) {\r\n    <caption #caption class=\"x-table-header\" [style.height.px]=\"getRowHeight()\" [style.min-height.px]=\"getRowHeight()\">\r\n      <ng-container *xOutlet=\"header()\">{{ header() }}</ng-container>\r\n    </caption>\r\n  }\r\n  @if (showHeader() && (headerPosition() === 'top' || headerPosition() === 'top-bottom')) {\r\n    <x-table-head\r\n      [columns]=\"columns()\"\r\n      [rowHeight]=\"rowHeight()\"\r\n      [columnTpl]=\"headColumnTpl()\"\r\n      [scrollYWidth]=\"scrollYWidth()\"\r\n      [scrollXWidth]=\"scrollXWidth()!\"\r\n      [cellConfig]=\"cellConfigSignal()?.thead\"\r\n      [position]=\"'top'\"\r\n    ></x-table-head>\r\n  }\r\n  <x-table-body\r\n    [data]=\"treeTable() ? treeTableData() : tableData()\"\r\n    [columns]=\"columns()\"\r\n    [itemSize]=\"itemSize()\"\r\n    [rowHeight]=\"rowHeight()\"\r\n    [bodyHeight]=\"bodyHeight()!\"\r\n    [columnTpl]=\"bodyColumnTpl()\"\r\n    [allowSelectRow]=\"allowSelectRow()\"\r\n    [virtualScroll]=\"virtualScroll()\"\r\n    [minBufferPx]=\"minBufferPx()\"\r\n    [maxBufferPx]=\"maxBufferPx()\"\r\n    [adaptionHeight]=\"adaptionHeight()!\"\r\n    [docPercent]=\"docPercent()\"\r\n    [scroll]=\"scroll()\"\r\n    [rowClass]=\"rowClass()\"\r\n    [cellConfig]=\"cellConfigSignal()?.tbody\"\r\n    [expandedAll]=\"expandedAll()\"\r\n    [expandTpl]=\"expandTpl()\"\r\n    [(activatedRow)]=\"activatedRow\"\r\n  ></x-table-body>\r\n  @if (showHeader() && (headerPosition() === 'bottom' || headerPosition() === 'top-bottom')) {\r\n    <x-table-head\r\n      [columns]=\"columns()\"\r\n      [rowHeight]=\"rowHeight()\"\r\n      [columnTpl]=\"headColumnTpl()\"\r\n      [scrollYWidth]=\"scrollYWidth()\"\r\n      [scrollXWidth]=\"scrollXWidth()!\"\r\n      [cellConfig]=\"cellConfigSignal()?.thead\"\r\n      [position]=\"'bottom'\"\r\n    ></x-table-head>\r\n  }\r\n  @if (footer()) {\r\n    <x-table-foot [footer]=\"footer()\" [rowHeight]=\"rowHeight()\"></x-table-foot>\r\n  }\r\n  @if (hasStickyTopRight()) {\r\n    <div\r\n      #stickyTopRightEle\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [class.x-table-border-bottom]=\"headSearchTpl()\"\r\n      [style.top.px]=\"getStickyTopScrollTop()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyTopRight() && headSearchTpl()) {\r\n    <div\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [style.top.px]=\"getStickyTopScrollTop() + getStickyTopRightEleHeight()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyBottomRight()) {\r\n    <div\r\n      #stickyBottomRightEle\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [style.bottom.px]=\"getStickyBottomScrollTop()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyBottomRight() && headSearchTpl()) {\r\n    <div\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [class.x-table-border-bottom]=\"headSearchTpl()\"\r\n      [style.bottom.px]=\"getStickyBottomScrollTop() + getStickyBottomRightEleHeight()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n</table>\r\n@if (showPagination() && size()) {\r\n  <x-pagination\r\n    #pagination\r\n    [(index)]=\"index\"\r\n    [(size)]=\"size\"\r\n    [(query)]=\"query\"\r\n    [total]=\"total()\"\r\n    (indexChange)=\"pageChange('index')\"\r\n    (sizeChange)=\"pageChange('size')\"\r\n    [showEllipsis]=\"showEllipsis()\"\r\n    [showTotal]=\"showTotal()\"\r\n    [space]=\"space()\"\r\n    [showBackground]=\"showBackground()\"\r\n    [showSize]=\"showSize()\"\r\n    [showJump]=\"showJump()\"\r\n    [jumpWidth]=\"jumpWidth()\"\r\n    [showInputSize]=\"showInputSize()\"\r\n    [inputSizeWidth]=\"inputSizeWidth()\"\r\n    [sizeData]=\"sizeData()\"\r\n    [sizeWidth]=\"sizeWidth()\"\r\n    [pageLinkSize]=\"pageLinkSize()\"\r\n    [disabled]=\"disabled()\"\r\n    [totalTpl]=\"totalTpl()\"\r\n    [simple]=\"simple()\"\r\n    [simpleIndexWidth]=\"simpleIndexWidth()\"\r\n  >\r\n  </x-pagination>\r\n}\r\n", styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;position:relative}.x-table:not(.x-table-wrap-border-hidden){border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead{position:relative;overflow:hidden;display:block;min-height:42px}.x-table>thead>tr{width:100%;display:flex;min-height:42px}.x-table>thead>tr>th{display:flex;align-items:center;flex:1;position:relative;font-weight:600;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead>tr>th>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-table>thead>tr>th.x-table-sticky{position:sticky;z-index:5}.x-table>thead>tr>th .x-table-drag-width{position:absolute;height:100%;width:.1875rem;right:-.125rem;cursor:ew-resize;transition:background-color var(--x-animation-duration-fast);z-index:1}.x-table>thead>tr>th .x-table-drag-width:hover{background-color:var(--x-primary)}.x-table>thead>tr.cdk-drop-list-dragging>th.cdk-drag-placeholder{background-color:var(--x-background-a200);opacity:.9}.x-table>thead.x-table-head-bottom>tr>th{border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:none}.x-table>thead.x-table-head-bottom>tr.x-table-search>th{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody tr>td>div{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-table>tbody tr>td.x-table-sticky{position:sticky;z-index:5}.x-table>tbody tr>td>x-button .x-icon{transition:var(--x-animation-duration-base)}.x-table>tbody tr>td>x-button.is-leaf{visibility:hidden}.x-table>tbody tr>td>x-button.is-expanded .x-icon{transform:rotate(90deg)}.x-table>tbody tr>td.x-table-dragging{background-color:var(--x-background-a200);opacity:.9}.x-table>tbody tr.x-table-activated>td{background-color:var(--x-primary-900)}.x-table>tbody tr:hover:not(.x-table-activated)>td{background-color:var(--x-background-a100)}.x-table>tbody tr:last-child>td{border-bottom:none}.x-table>tbody x-empty{position:absolute;top:0;width:100%;padding:calc(var(--x-font-size) * 2)}.x-table-sort{cursor:pointer;transition:transform .2s}.x-table-sort:hover{color:var(--x-text-300)}.x-table-sort:active{transform:translate(1px,1px)}.x-table-sort-icon.x-icon{margin-left:.25rem;display:none;font-size:1rem;transform:rotate(90deg) rotateY(180deg);transition:.3s}.x-table-sort-icon.x-icon.x-table-icon-up,.x-table-sort-icon.x-icon.x-table-icon-down{display:inherit}.x-table-sort-icon.x-icon.x-table-icon-down{transform:rotate(90deg)}.x-table-scroll-top>thead{box-shadow:var(--x-box-shadow-bottom);z-index:1}.x-table-scroll-left .x-table-sticky-left-last{box-shadow:var(--x-box-shadow-right);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-td-adaption-height>tbody tr>td{overflow:inherit}.x-table-td-adaption-height>tbody tr>td>div{white-space:inherit;text-overflow:inherit;overflow:inherit}.x-table-bordered>thead>tr>th,.x-table-bordered>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>thead>tr>th:last-child,.x-table-bordered>tbody tr>td:last-child{border-right:none}.x-table-cell-config>thead tr,.x-table-cell-config>tbody tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>thead>tr>th,.x-table-cell-config>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>thead>tr>th:last-child,.x-table-cell-config>tbody tr>td:last-child{border-right:none}.x-table-expand{margin-right:.5rem}.x-table-expandTpl>tr{display:block!important;height:inherit!important}.x-table-header{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left;display:flex;align-items:center}.x-table-footer{display:flex;align-items:center;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-sticky-right-scroll{position:absolute;right:0;min-height:42px;background-color:var(--x-background);z-index:1}.x-table-has-scroll-right .x-table-footer{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-has-scroll-bottom:not(.x-table-scroll-left-max) .x-table-sticky-right-first{box-shadow:var(--x-box-shadow-left);border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-border-bottom{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-border-top{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-row-size-big>thead>tr>th,.x-table-row-size-big>tbody tr>td{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big .x-table-header,.x-table-row-size-big .x-table-footer{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>thead>tr>th,.x-table-row-size-large>tbody tr>td{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large .x-table-header,.x-table-row-size-large .x-table-footer{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>thead>tr>th,.x-table-row-size-medium>tbody tr>td{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}.x-table-row-size-medium .x-table-header,.x-table-row-size-medium .x-table-footer{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}.x-table-row-size-small>thead>tr>th,.x-table-row-size-small>tbody tr>td{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small .x-table-header,.x-table-row-size-small .x-table-footer{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>thead>tr>th,.x-table-row-size-mini>tbody tr>td{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}.x-table-row-size-mini .x-table-header,.x-table-row-size-mini .x-table-footer{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}x-table{width:100%;display:flex;flex-direction:column}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}x-table.x-table-top-left{flex-direction:column-reverse}x-table.x-table-top-left .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-center{flex-direction:column-reverse;align-items:center}x-table.x-table-top-center .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-right{flex-direction:column-reverse;align-items:flex-end}x-table.x-table-top-right .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-bottom-center{align-items:center}x-table.x-table-bottom-right{align-items:flex-end}body>.x-table-th{display:block}body>.x-table-th-big{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}body>.x-table-th-large{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}body>.x-table-th-medium{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}body>.x-table-th-small{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}body>.x-table-th-mini{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}body>.x-table-th.cdk-drag-preview{display:flex;align-items:center;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-style:dashed;background-color:var(--x-background);opacity:.8;box-shadow:var(--x-box-shadow)}body>.x-table-th.cdk-drag-preview>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}body>.x-table-th.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\r\n  #table\r\n  class=\"x-table\"\r\n  [ngClass]=\"classMap()\"\r\n  [x-loading]=\"loading() && getting()\"\r\n  [class.x-table-wrap-border-hidden]=\"hiddenWrapBorder()\"\r\n  [class.x-table-scroll-left]=\"getScrollLeft()\"\r\n  [class.x-table-scroll-left-max]=\"scrollLeftMax()\"\r\n  [class.x-table-scroll-top]=\"getScrollTop()\"\r\n  [class.x-table-has-scroll-right]=\"scrollYWidth()\"\r\n  [class.x-table-has-scroll-bottom]=\"scrollXWidth()\"\r\n  [class.x-table-bordered]=\"bordered()\"\r\n  [class.x-table-td-adaption-height]=\"rowHeight() == 0\"\r\n  [class.x-table-cell-config]=\"!!cellConfigSignal()\"\r\n  [class.x-table-last-tr-bordered]=\"!!adaptionHeight() || tbodyHeight() >= tbodyScrollHeight()\"\r\n>\r\n  @if (header()) {\r\n    <caption #caption class=\"x-table-header\" [style.height.px]=\"getRowHeight()\" [style.min-height.px]=\"getRowHeight()\">\r\n      <ng-container *xOutlet=\"header()\">{{ header() }}</ng-container>\r\n    </caption>\r\n  }\r\n  @if (showHeader() && (headerPosition() === 'top' || headerPosition() === 'top-bottom')) {\r\n    <x-table-head\r\n      [columns]=\"columns()\"\r\n      [rowHeight]=\"rowHeight()\"\r\n      [columnTpl]=\"headColumnTpl()\"\r\n      [scrollYWidth]=\"scrollYWidth()\"\r\n      [scrollXWidth]=\"scrollXWidth()!\"\r\n      [cellConfig]=\"cellConfigSignal()?.thead\"\r\n      [position]=\"'top'\"\r\n    ></x-table-head>\r\n  }\r\n  <x-table-body\r\n    [data]=\"treeTable() ? treeTableData() : tableData()\"\r\n    [columns]=\"columns()\"\r\n    [itemSize]=\"itemSize()\"\r\n    [rowHeight]=\"rowHeight()\"\r\n    [bodyHeight]=\"bodyHeight()!\"\r\n    [columnTpl]=\"bodyColumnTpl()\"\r\n    [allowSelectRow]=\"allowSelectRow()\"\r\n    [virtualScroll]=\"virtualScroll()\"\r\n    [minBufferPx]=\"minBufferPx()\"\r\n    [maxBufferPx]=\"maxBufferPx()\"\r\n    [adaptionHeight]=\"adaptionHeight()!\"\r\n    [docPercent]=\"docPercent()\"\r\n    [scroll]=\"scroll()\"\r\n    [rowClass]=\"rowClass()\"\r\n    [cellConfig]=\"cellConfigSignal()?.tbody\"\r\n    [expandedAll]=\"expandedAll()\"\r\n    [expandTpl]=\"expandTpl()\"\r\n    [(activatedRow)]=\"activatedRow\"\r\n  ></x-table-body>\r\n  @if (showHeader() && (headerPosition() === 'bottom' || headerPosition() === 'top-bottom')) {\r\n    <x-table-head\r\n      [columns]=\"columns()\"\r\n      [rowHeight]=\"rowHeight()\"\r\n      [columnTpl]=\"headColumnTpl()\"\r\n      [scrollYWidth]=\"scrollYWidth()\"\r\n      [scrollXWidth]=\"scrollXWidth()!\"\r\n      [cellConfig]=\"cellConfigSignal()?.thead\"\r\n      [position]=\"'bottom'\"\r\n    ></x-table-head>\r\n  }\r\n  @if (footer()) {\r\n    <x-table-foot [footer]=\"footer()\" [rowHeight]=\"rowHeight()\"></x-table-foot>\r\n  }\r\n  @if (hasStickyTopRight()) {\r\n    <div\r\n      #stickyTopRightEle\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [class.x-table-border-bottom]=\"headSearchTpl()\"\r\n      [style.top.px]=\"getStickyTopScrollTop()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyTopRight() && headSearchTpl()) {\r\n    <div\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [style.top.px]=\"getStickyTopScrollTop() + getStickyTopRightEleHeight()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyBottomRight()) {\r\n    <div\r\n      #stickyBottomRightEle\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [style.bottom.px]=\"getStickyBottomScrollTop()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n  @if (hasStickyBottomRight() && headSearchTpl()) {\r\n    <div\r\n      class=\"x-table-sticky-right-scroll\"\r\n      [class.x-table-border-bottom]=\"headSearchTpl()\"\r\n      [style.bottom.px]=\"getStickyBottomScrollTop() + getStickyBottomRightEleHeight()\"\r\n      [style.width.px]=\"scrollYWidth()\"\r\n      [style.height.px]=\"getRowHeight()\"\r\n      [style.min-height.px]=\"getRowHeight()\"\r\n    ></div>\r\n  }\r\n</table>\r\n@if (showPagination() && size()) {\r\n  <x-pagination\r\n    #pagination\r\n    [(index)]=\"index\"\r\n    [(size)]=\"size\"\r\n    [(query)]=\"query\"\r\n    [total]=\"total()\"\r\n    (indexChange)=\"pageChange('index')\"\r\n    (sizeChange)=\"pageChange('size')\"\r\n    [showEllipsis]=\"showEllipsis()\"\r\n    [showTotal]=\"showTotal()\"\r\n    [space]=\"space()\"\r\n    [showBackground]=\"showBackground()\"\r\n    [showSize]=\"showSize()\"\r\n    [showJump]=\"showJump()\"\r\n    [jumpWidth]=\"jumpWidth()\"\r\n    [showInputSize]=\"showInputSize()\"\r\n    [inputSizeWidth]=\"inputSizeWidth()\"\r\n    [sizeData]=\"sizeData()\"\r\n    [sizeWidth]=\"sizeWidth()\"\r\n    [pageLinkSize]=\"pageLinkSize()\"\r\n    [disabled]=\"disabled()\"\r\n    [totalTpl]=\"totalTpl()\"\r\n    [simple]=\"simple()\"\r\n    [simpleIndexWidth]=\"simpleIndexWidth()\"\r\n  >\r\n  </x-pagination>\r\n}\r\n", styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;position:relative}.x-table:not(.x-table-wrap-border-hidden){border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead{position:relative;overflow:hidden;display:block;min-height:42px}.x-table>thead>tr{width:100%;display:flex;min-height:42px}.x-table>thead>tr>th{display:flex;align-items:center;flex:1;position:relative;font-weight:600;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead>tr>th>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-table>thead>tr>th.x-table-sticky{position:sticky;z-index:5}.x-table>thead>tr>th .x-table-drag-width{position:absolute;height:100%;width:.1875rem;right:-.125rem;cursor:ew-resize;transition:background-color var(--x-animation-duration-fast);z-index:1}.x-table>thead>tr>th .x-table-drag-width:hover{background-color:var(--x-primary)}.x-table>thead>tr.cdk-drop-list-dragging>th.cdk-drag-placeholder{background-color:var(--x-background-a200);opacity:.9}.x-table>thead.x-table-head-bottom>tr>th{border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom:none}.x-table>thead.x-table-head-bottom>tr.x-table-search>th{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody tr>td>div{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-table>tbody tr>td.x-table-sticky{position:sticky;z-index:5}.x-table>tbody tr>td>x-button .x-icon{transition:var(--x-animation-duration-base)}.x-table>tbody tr>td>x-button.is-leaf{visibility:hidden}.x-table>tbody tr>td>x-button.is-expanded .x-icon{transform:rotate(90deg)}.x-table>tbody tr>td.x-table-dragging{background-color:var(--x-background-a200);opacity:.9}.x-table>tbody tr.x-table-activated>td{background-color:var(--x-primary-900)}.x-table>tbody tr:hover:not(.x-table-activated)>td{background-color:var(--x-background-a100)}.x-table>tbody tr:last-child>td{border-bottom:none}.x-table>tbody x-empty{position:absolute;top:0;width:100%;padding:calc(var(--x-font-size) * 2)}.x-table-sort{cursor:pointer;transition:transform .2s}.x-table-sort:hover{color:var(--x-text-300)}.x-table-sort:active{transform:translate(1px,1px)}.x-table-sort-icon.x-icon{margin-left:.25rem;display:none;font-size:1rem;transform:rotate(90deg) rotateY(180deg);transition:.3s}.x-table-sort-icon.x-icon.x-table-icon-up,.x-table-sort-icon.x-icon.x-table-icon-down{display:inherit}.x-table-sort-icon.x-icon.x-table-icon-down{transform:rotate(90deg)}.x-table-scroll-top>thead{box-shadow:var(--x-box-shadow-bottom);z-index:1}.x-table-scroll-left .x-table-sticky-left-last{box-shadow:var(--x-box-shadow-right);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-td-adaption-height>tbody tr>td{overflow:inherit}.x-table-td-adaption-height>tbody tr>td>div{white-space:inherit;text-overflow:inherit;overflow:inherit}.x-table-bordered>thead>tr>th,.x-table-bordered>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>thead>tr>th:last-child,.x-table-bordered>tbody tr>td:last-child{border-right:none}.x-table-cell-config>thead tr,.x-table-cell-config>tbody tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>thead>tr>th,.x-table-cell-config>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>thead>tr>th:last-child,.x-table-cell-config>tbody tr>td:last-child{border-right:none}.x-table-expand{margin-right:.5rem}.x-table-expandTpl>tr{display:block!important;height:inherit!important}.x-table-header{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left;display:flex;align-items:center}.x-table-footer{display:flex;align-items:center;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-sticky-right-scroll{position:absolute;right:0;min-height:42px;background-color:var(--x-background);z-index:1}.x-table-has-scroll-right .x-table-footer{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-has-scroll-bottom:not(.x-table-scroll-left-max) .x-table-sticky-right-first{box-shadow:var(--x-box-shadow-left);border-left:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-border-bottom{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-border-top{border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-last-tr-bordered>tbody tr:last-child>td{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-row-size-big>thead>tr>th,.x-table-row-size-big>tbody tr>td{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big .x-table-header,.x-table-row-size-big .x-table-footer{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>thead>tr>th,.x-table-row-size-large>tbody tr>td{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large .x-table-header,.x-table-row-size-large .x-table-footer{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>thead>tr>th,.x-table-row-size-medium>tbody tr>td{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}.x-table-row-size-medium .x-table-header,.x-table-row-size-medium .x-table-footer{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}.x-table-row-size-small>thead>tr>th,.x-table-row-size-small>tbody tr>td{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small .x-table-header,.x-table-row-size-small .x-table-footer{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>thead>tr>th,.x-table-row-size-mini>tbody tr>td{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}.x-table-row-size-mini .x-table-header,.x-table-row-size-mini .x-table-footer{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}x-table{width:100%;display:flex;flex-direction:column}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}x-table.x-table-top-left{flex-direction:column-reverse}x-table.x-table-top-left .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-center{flex-direction:column-reverse;align-items:center}x-table.x-table-top-center .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-right{flex-direction:column-reverse;align-items:flex-end}x-table.x-table-top-right .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-bottom-center{align-items:center}x-table.x-table-bottom-right{align-items:flex-end}body>.x-table-th{display:block}body>.x-table-th-big{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4)}body>.x-table-th-large{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3)}body>.x-table-th-medium{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) var(--x-font-size)}body>.x-table-th-small{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3)}body>.x-table-th-mini{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2)}body>.x-table-th.cdk-drag-preview{display:flex;align-items:center;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-style:dashed;background-color:var(--x-background);opacity:.8;box-shadow:var(--x-box-shadow)}body>.x-table-th.cdk-drag-preview>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}body>.x-table-th.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
         }] });
 
 class XTableModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XTableModule, imports: [XTableComponent, XTableHeadComponent, XTableBodyComponent, XTableFootComponent], exports: [XTableComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableModule, imports: [XTableComponent, XTableHeadComponent, XTableBodyComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: XTableModule, imports: [XTableComponent, XTableHeadComponent, XTableBodyComponent, XTableFootComponent], exports: [XTableComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableModule, imports: [XTableComponent, XTableHeadComponent, XTableBodyComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: XTableModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XTableComponent],