@ng-nest/ui 15.0.20 → 16.0.0

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

@@ -1,1473 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, inject, Directive, ViewEncapsulation, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import * as i1 from '@ng-nest/ui/core';
-import { XWithConfig, XInputNumber, XInputBoolean, XProperty, XIsChange, removeNgTag, XIsEmpty, XIsFunction, XResize, stripTags, XParentPath, XIsUndefined } from '@ng-nest/ui/core';
-import * as i3$1 from '@ng-nest/ui/pagination';
-import { XPaginationProperty, XPaginationModule } from '@ng-nest/ui/pagination';
-import { takeUntil } from 'rxjs/operators';
-import { Subject, fromEvent } from 'rxjs';
-import * as i2 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i4 from '@ng-nest/ui/outlet';
-import { XOutletModule } from '@ng-nest/ui/outlet';
-import * as i5$1 from '@ng-nest/ui/loading';
-import { XLoadingModule } from '@ng-nest/ui/loading';
-import * as i7 from '@angular/cdk/drag-drop';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i3 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i5 from '@ng-nest/ui/checkbox';
-import { XCheckboxModule } from '@ng-nest/ui/checkbox';
-import * as i6 from '@ng-nest/ui/icon';
-import { XIconModule } from '@ng-nest/ui/icon';
-import * as i6$1 from '@ng-nest/ui/button';
-import { XButtonModule } from '@ng-nest/ui/button';
-import * as i7$1 from '@angular/cdk/scrolling';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import * as i8 from '@ng-nest/ui/empty';
-import { XEmptyModule } from '@ng-nest/ui/empty';
-
-/**
- * Table
- * @selector x-table
- * @decorator component
- */
-const XTablePrefix = 'x-table';
-const X_CONFIG_NAME = 'table';
-/**
- * Table Property
- */
-class XTableProperty extends XPaginationProperty {
-    constructor() {
-        super(...arguments);
-        /**
-         * @zh_CN 行数据
-         * @en_US Row data
-         */
-        this.data = [];
-        /**
-         * @zh_CN 列集合
-         * @en_US Column set
-         */
-        this.columns = [];
-        /**
-         * @zh_CN 当前选中行改变
-         * @en_US The currently selected row changes
-         */
-        this.activatedRowChange = new EventEmitter();
-        /**
-         * @zh_CN 列头自定义模板，通过 key-value 的方式指定每列的模版
-         * @en_US Column header custom template
-         */
-        this.headColumnTpl = {};
-        /**
-         * @zh_CN 列内容自定义模板，通过 key-value 的方式指定每列的模版
-         * @en_US Column content custom template
-         */
-        this.bodyColumnTpl = {};
-        /**
-         * @zh_CN 排序点击的事件
-         * @en_US Sort click events
-         */
-        this.sortChange = new EventEmitter();
-        /**
-         * @zh_CN 列头 checkbox 事件
-         * @en_US head checkbox event
-         */
-        this.headCheckboxChange = new EventEmitter();
-        /**
-         * @zh_CN body checkbox 事件
-         * @en_US head checkbox event
-         */
-        this.bodyCheckboxChange = new EventEmitter();
-        /**
-         * @zh_CN 超出可视窗口缓冲区的最小值，对应 cdk scroll 中的参数
-         * @en_US Exceed the minimum value of the visible window buffer, corresponding to the parameters in cdk scroll
-         */
-        this.minBufferPx = 100;
-        /**
-         * @zh_CN 渲染新数据缓冲区的像素，对应 cdk scroll 中的参数
-         * @en_US Render the pixels of the new data buffer, corresponding to the parameters in cdk scroll
-         */
-        this.maxBufferPx = 200;
-        /**
-         * @zh_CN 文档高度百分比，弹窗百分比高度用到
-         * @en_US Document height percentage, used by pop-up window percentage height
-         */
-        this.docPercent = 1;
-        /**
-         * @zh_CN checkbox 列初始选中的数据，列中激活 checkbox
-         * @en_US Checkbox column initially selected data, checkbox is activated in column
-         */
-        this.checkedRow = {};
-        /**
-         * @zh_CN 如果 data 是函数类型，可以通过此参数控制请求，常用于弹框中的表格，弹出后再请求
-         * @en_US If data is a function type, you can use this parameter to control the request, which is often used in the form in the pop-up box, and then request it after it pops up
-         */
-        this.manual = true;
-        /**
-         * @zh_CN 参数控制请求改变事件
-         * @en_US Parameter control request change event
-         */
-        this.manualChange = new EventEmitter();
-        /**
-         * @zh_CN 分页器位置
-         * @en_US Pagination position
-         */
-        this.paginationPosition = 'bottom-left';
-        /**
-         * @zh_CN 展开的节点
-         * @en_US Expanded node
-         */
-        this.expanded = [];
-        /**
-         * @zh_CN 列头拖动开始事件，返回拖动的列
-         * @en_US Column Header Drag End Event
-         */
-        this.columnDragStarted = new EventEmitter();
-        /**
-         * @zh_CN 列头拖动结束事件，返回拖动的列
-         * @en_US The column header is dragging, and the event is triggered when the order is changed
-         */
-        this.columnDragEnded = new EventEmitter();
-        /**
-         * @zh_CN 当用户把一个条目投放进该容器时就会触发，拖动放开的事件，返回拖动排序后的列数据
-         * @en_US The column header is dragging, and the event is triggered when the order is changed
-         */
-        this.columnDropListDropped = new EventEmitter();
-        /**
-         * @zh_CN 开始拖动列宽的事件
-         * @en_US Event to started drag column width
-         */
-        this.columnDragWidthStarted = new EventEmitter();
-        /**
-         * @zh_CN 正在拖动列宽时的事件
-         * @en_US Event to moved drag column width
-         */
-        this.columnDragWidthMoved = new EventEmitter();
-        /**
-         * @zh_CN 结束拖动列宽的事件
-         * @en_US Event to ended drag column width
-         */
-        this.columnDragWidthEnded = new EventEmitter();
-    }
-}
-/** @nocollapse */ XTableProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTableProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: XTableProperty, selector: "ng-component", inputs: { data: "data", columns: "columns", rowHeight: "rowHeight", loading: "loading", bordered: "bordered", showHeader: "showHeader", headerPosition: "headerPosition", activatedRow: "activatedRow", headColumnTpl: "headColumnTpl", bodyColumnTpl: "bodyColumnTpl", bodyTdTpl: "bodyTdTpl", rowClass: "rowClass", headSearchTpl: "headSearchTpl", allowSelectRow: "allowSelectRow", allowCheckRow: "allowCheckRow", virtualScroll: "virtualScroll", bodyHeight: "bodyHeight", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", checkedRow: "checkedRow", manual: "manual", scroll: "scroll", header: "header", footer: "footer", cellConfig: "cellConfig", rowSize: "rowSize", paginationPosition: "paginationPosition", hiddenWrapBorder: "hiddenWrapBorder", hiddenPaginationBorder: "hiddenPaginationBorder", showPagination: "showPagination", treeTable: "treeTable", expandedAll: "expandedAll", expandedLevel: "expandedLevel", expanded: "expanded", expandTpl: "expandTpl", showEmpty: "showEmpty", emptyImg: "emptyImg", emptyContent: "emptyContent" }, outputs: { activatedRowChange: "activatedRowChange", sortChange: "sortChange", headCheckboxChange: "headCheckboxChange", bodyCheckboxChange: "bodyCheckboxChange", manualChange: "manualChange", columnDragStarted: "columnDragStarted", columnDragEnded: "columnDragEnded", columnDropListDropped: "columnDropListDropped", columnDragWidthStarted: "columnDragWidthStarted", columnDragWidthMoved: "columnDragWidthMoved", columnDragWidthEnded: "columnDragWidthEnded" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 42),
-    XInputNumber()
-], XTableProperty.prototype, "rowHeight", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XTableProperty.prototype, "loading", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XTableProperty.prototype, "bordered", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, true),
-    XInputBoolean()
-], XTableProperty.prototype, "showHeader", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'top')
-], XTableProperty.prototype, "headerPosition", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, true),
-    XInputBoolean()
-], XTableProperty.prototype, "allowSelectRow", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, true),
-    XInputBoolean()
-], XTableProperty.prototype, "allowCheckRow", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME),
-    XInputBoolean()
-], XTableProperty.prototype, "virtualScroll", void 0);
-__decorate([
-    XInputNumber()
-], XTableProperty.prototype, "bodyHeight", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 42),
-    XInputNumber()
-], XTableProperty.prototype, "itemSize", void 0);
-__decorate([
-    XInputNumber()
-], XTableProperty.prototype, "adaptionHeight", void 0);
-__decorate([
-    XInputNumber()
-], XTableProperty.prototype, "docPercent", void 0);
-__decorate([
-    XInputBoolean()
-], XTableProperty.prototype, "manual", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'medium')
-], XTableProperty.prototype, "rowSize", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XTableProperty.prototype, "hiddenWrapBorder", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XTableProperty.prototype, "hiddenPaginationBorder", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, true),
-    XInputBoolean()
-], XTableProperty.prototype, "showPagination", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XTableProperty.prototype, "treeTable", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XTableProperty.prototype, "expandedAll", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, -1),
-    XInputNumber()
-], XTableProperty.prototype, "expandedLevel", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, true),
-    XInputBoolean()
-], XTableProperty.prototype, "showEmpty", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME)
-], XTableProperty.prototype, "emptyImg", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME)
-], XTableProperty.prototype, "emptyContent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableProperty, decorators: [{
-            type: Component,
-            args: [{ template: '' }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }], rowHeight: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], bordered: [{
-                type: Input
-            }], showHeader: [{
-                type: Input
-            }], headerPosition: [{
-                type: Input
-            }], activatedRow: [{
-                type: Input
-            }], activatedRowChange: [{
-                type: Output
-            }], headColumnTpl: [{
-                type: Input
-            }], bodyColumnTpl: [{
-                type: Input
-            }], bodyTdTpl: [{
-                type: Input
-            }], rowClass: [{
-                type: Input
-            }], headSearchTpl: [{
-                type: Input
-            }], sortChange: [{
-                type: Output
-            }], headCheckboxChange: [{
-                type: Output
-            }], bodyCheckboxChange: [{
-                type: Output
-            }], allowSelectRow: [{
-                type: Input
-            }], allowCheckRow: [{
-                type: Input
-            }], virtualScroll: [{
-                type: Input
-            }], bodyHeight: [{
-                type: Input
-            }], itemSize: [{
-                type: Input
-            }], minBufferPx: [{
-                type: Input
-            }], maxBufferPx: [{
-                type: Input
-            }], adaptionHeight: [{
-                type: Input
-            }], docPercent: [{
-                type: Input
-            }], checkedRow: [{
-                type: Input
-            }], manual: [{
-                type: Input
-            }], scroll: [{
-                type: Input
-            }], header: [{
-                type: Input
-            }], footer: [{
-                type: Input
-            }], manualChange: [{
-                type: Output
-            }], cellConfig: [{
-                type: Input
-            }], rowSize: [{
-                type: Input
-            }], paginationPosition: [{
-                type: Input
-            }], hiddenWrapBorder: [{
-                type: Input
-            }], hiddenPaginationBorder: [{
-                type: Input
-            }], showPagination: [{
-                type: Input
-            }], treeTable: [{
-                type: Input
-            }], expandedAll: [{
-                type: Input
-            }], expandedLevel: [{
-                type: Input
-            }], expanded: [{
-                type: Input
-            }], expandTpl: [{
-                type: Input
-            }], showEmpty: [{
-                type: Input
-            }], emptyImg: [{
-                type: Input
-            }], emptyContent: [{
-                type: Input
-            }], columnDragStarted: [{
-                type: Output
-            }], columnDragEnded: [{
-                type: Output
-            }], columnDropListDropped: [{
-                type: Output
-            }], columnDragWidthStarted: [{
-                type: Output
-            }], columnDragWidthMoved: [{
-                type: Output
-            }], columnDragWidthEnded: [{
-                type: Output
-            }] } });
-/**
- * Table Head
- * @selector x-table-head
- * @decorator component
- */
-const XTableHeadPrefix = 'x-table-head';
-/**
- * Table Head Property
- */
-class XTableHeadProperty extends XProperty {
-    constructor() {
-        super(...arguments);
-        /**
-         * @zh_CN 列集合
-         * @en_US Column set
-         */
-        this.columns = [];
-        /**
-         * @zh_CN 高度，单位 px
-         * @en_US Height in px
-         */
-        this.rowHeight = 42;
-        /**
-         * @zh_CN 自定义模板
-         * @en_US Custom template
-         */
-        this.columnTpl = {};
-    }
-}
-/** @nocollapse */ XTableHeadProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableHeadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTableHeadProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: XTableHeadProperty, selector: "ng-component", inputs: { columns: "columns", rowHeight: "rowHeight", columnTpl: "columnTpl", scrollYWidth: "scrollYWidth", scrollXWidth: "scrollXWidth", cellConfig: "cellConfig", position: "position" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-__decorate([
-    XInputNumber()
-], XTableHeadProperty.prototype, "rowHeight", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableHeadProperty, decorators: [{
-            type: Component,
-            args: [{ template: '' }]
-        }], propDecorators: { columns: [{
-                type: Input
-            }], rowHeight: [{
-                type: Input
-            }], columnTpl: [{
-                type: Input
-            }], scrollYWidth: [{
-                type: Input
-            }], scrollXWidth: [{
-                type: Input
-            }], cellConfig: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }] } });
-/**
- * Table Body
- * @selector x-table-body
- * @decorator component
- */
-const XTableBodyPrefix = 'x-table-body';
-/**
- * Table Body Property
- */
-class XTableBodyProperty extends XProperty {
-    constructor() {
-        super(...arguments);
-        /**
-         * @zh_CN 行数据
-         * @en_US Row data
-         */
-        this.data = [];
-        /**
-         * @zh_CN 列集合
-         * @en_US Column set
-         */
-        this.columns = [];
-        /**
-         * @zh_CN 自定义模板
-         * @en_US Custom template
-         */
-        this.columnTpl = {};
-        /**
-         * @zh_CN 当前选中行改变
-         * @en_US The currently selected row changes
-         */
-        this.activatedRowChange = new EventEmitter();
-        /**
-         * @zh_CN 高度，单位 px。设置为 0 表示行高自适应内容高度。
-         * @en_US Height in px. set to 0 means that the row height is adaptive to the content height
-         */
-        this.rowHeight = 42;
-        /**
-         * @zh_CN 允许行点击选中
-         * @en_US Allow row click to select
-         */
-        this.allowSelectRow = true;
-        /**
-         * @zh_CN 开启虚拟滚动
-         * @en_US Turn on virtual scrolling
-         */
-        this.virtualScroll = false;
-        /**
-         * @zh_CN itemSize，对应 cdk scroll 中的参数
-         * @en_US itemSize，corresponding to the parameters in cdk scroll
-         */
-        this.itemSize = 42;
-        /**
-         * @zh_CN 超出可视窗口缓冲区的最小值，对应 cdk scroll 中的参数
-         * @en_US Exceed the minimum value of the visible window buffer, corresponding to the parameters in cdk scroll
-         */
-        this.minBufferPx = 100;
-        /**
-         * @zh_CN 渲染新数据缓冲区的像素，对应 cdk scroll 中的参数
-         * @en_US Render the pixels of the new data buffer, corresponding to the parameters in cdk scroll
-         */
-        this.maxBufferPx = 200;
-        /**
-         * @zh_CN 文档高度百分比，弹窗百分比高度用到
-         * @en_US Document height percentage, used by pop-up window percentage height
-         */
-        this.docPercent = 1;
-        /**
-         * @zh_CN 树形表格下的层级
-         * @en_US The level under the tree table
-         */
-        this.level = 0;
-    }
-}
-/** @nocollapse */ XTableBodyProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableBodyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTableBodyProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: XTableBodyProperty, selector: "ng-component", inputs: { data: "data", columns: "columns", columnTpl: "columnTpl", activatedRow: "activatedRow", rowHeight: "rowHeight", bodyHeight: "bodyHeight", allowSelectRow: "allowSelectRow", virtualScroll: "virtualScroll", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", scroll: "scroll", cellConfig: "cellConfig", rowClass: "rowClass", level: "level", expandedAll: "expandedAll", expandTpl: "expandTpl" }, outputs: { activatedRowChange: "activatedRowChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-__decorate([
-    XInputNumber()
-], XTableBodyProperty.prototype, "rowHeight", void 0);
-__decorate([
-    XInputNumber()
-], XTableBodyProperty.prototype, "bodyHeight", void 0);
-__decorate([
-    XInputBoolean()
-], XTableBodyProperty.prototype, "allowSelectRow", void 0);
-__decorate([
-    XInputBoolean()
-], XTableBodyProperty.prototype, "virtualScroll", void 0);
-__decorate([
-    XInputNumber()
-], XTableBodyProperty.prototype, "itemSize", void 0);
-__decorate([
-    XInputNumber()
-], XTableBodyProperty.prototype, "adaptionHeight", void 0);
-__decorate([
-    XInputNumber()
-], XTableBodyProperty.prototype, "docPercent", void 0);
-__decorate([
-    XInputBoolean()
-], XTableBodyProperty.prototype, "expandedAll", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableBodyProperty, decorators: [{
-            type: Component,
-            args: [{ template: '' }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }], columnTpl: [{
-                type: Input
-            }], activatedRow: [{
-                type: Input
-            }], activatedRowChange: [{
-                type: Output
-            }], rowHeight: [{
-                type: Input
-            }], bodyHeight: [{
-                type: Input
-            }], allowSelectRow: [{
-                type: Input
-            }], virtualScroll: [{
-                type: Input
-            }], itemSize: [{
-                type: Input
-            }], minBufferPx: [{
-                type: Input
-            }], maxBufferPx: [{
-                type: Input
-            }], adaptionHeight: [{
-                type: Input
-            }], docPercent: [{
-                type: Input
-            }], scroll: [{
-                type: Input
-            }], cellConfig: [{
-                type: Input
-            }], rowClass: [{
-                type: Input
-            }], level: [{
-                type: Input
-            }], expandedAll: [{
-                type: Input
-            }], expandTpl: [{
-                type: Input
-            }] } });
-/**
- * Table Foot
- * @selector x-table-foot
- * @decorator component
- */
-const XTableFootPrefix = 'x-table-foot';
-/**
- * Table Foot Property
- */
-class XTableFootProperty extends XProperty {
-}
-/** @nocollapse */ XTableFootProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableFootProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTableFootProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: XTableFootProperty, selector: "ng-component", inputs: { footer: "footer", rowHeight: "rowHeight" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableFootProperty, decorators: [{
-            type: Component,
-            args: [{ template: '' }]
-        }], propDecorators: { footer: [{
-                type: Input
-            }], rowHeight: [{
-                type: Input
-            }] } });
-
-class XDragDirective {
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.dragStarted = new EventEmitter();
-        this.dragMoved = new EventEmitter();
-        this.dragEnded = new EventEmitter();
-        this._unSubject = new Subject();
-        this.doc = inject(DOCUMENT);
-    }
-    ngOnInit() {
-        const mouseDown = fromEvent(this.elementRef.nativeElement, 'mousedown');
-        mouseDown.subscribe((downMe) => {
-            let x = downMe.pageX;
-            let y = downMe.pageY;
-            let offsetX = 0;
-            let offsetY = 0;
-            const _unSub = new Subject();
-            this.renderer.setStyle(this.doc.documentElement, 'cursor', 'ew-resize');
-            this.renderer.setStyle(this.doc.documentElement, 'user-select', 'none');
-            this.dragStarted.emit({ x, y });
-            fromEvent(this.doc.documentElement, 'mousemove')
-                .pipe(takeUntil(_unSub))
-                .subscribe((moveMe) => {
-                offsetX = moveMe.pageX - x;
-                offsetY = moveMe.pageY - y;
-                x = moveMe.pageX;
-                y = moveMe.pageY;
-                this.dragMoved.emit({ x, y, offsetX, offsetY });
-            });
-            fromEvent(this.doc.documentElement, 'mouseup')
-                .pipe(takeUntil(_unSub))
-                .subscribe(() => {
-                this.renderer.removeStyle(this.doc.documentElement, 'cursor');
-                this.renderer.removeStyle(this.doc.documentElement, 'user-select');
-                this.dragEnded.emit({ x, y });
-                _unSub.next();
-                _unSub.complete();
-            });
-        });
-        // fromEvent(this.elementRef.nativeElement, 'mousedown')
-        //   .pipe(
-        //     tap((mouse: MouseEvent) => {
-        //       return { startX: mouse.clientX, startY: mouse.clientY };
-        //     }),
-        //     tap((x) => {
-        //       fromEvent(this.elementRef.nativeElement, 'mousemove').pipe()
-        //     }),
-        //     takeUntil(this._unSubject)
-        //   )
-        //   .subscribe((x) => {
-        //     console.log(x);
-        //   });
-    }
-    ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.complete();
-    }
-}
-/** @nocollapse */ XDragDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XDragDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ XDragDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: XDragDirective, selector: "[xDrag]", outputs: { dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XDragDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[xDrag]' }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { dragStarted: [{
-                type: Output
-            }], dragMoved: [{
-                type: Output
-            }], dragEnded: [{
-                type: Output
-            }] } });
-
-class XTableHeadComponent extends XTableHeadProperty {
-    constructor(
-    // @Optional() @Host() public table: XTableComponent,
-    renderer, elementRef, cdr, configService) {
-        super();
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.configService = configService;
-        this.sort = [];
-        this.sortStr = '';
-        this.theadStyle = {};
-        this.thClassMap = {};
-    }
-    get getRowHeight() {
-        return this.rowHeight == 0 ? '' : this.rowHeight;
-    }
-    ngOnChanges(simples) {
-        const { columns, scrollYWidth, scrollXWidth, cellConfig } = simples;
-        XIsChange(columns, scrollYWidth, scrollXWidth, cellConfig) && this.cdr.detectChanges();
-    }
-    ngOnInit() {
-        removeNgTag(this.elementRef.nativeElement);
-        this.setStyle();
-    }
-    ngAfterViewInit() {
-        this.table.theads.push(this.thead);
-        this.table.theadsChange.push(() => this.cdr.detectChanges());
-        this.setThClassMap();
-    }
-    setThClassMap() {
-        this.thClassMap = {
-            [`${XTablePrefix}-th-${this.table.rowSize}`]: !XIsEmpty(this.table.rowSize)
-        };
-    }
-    getFlex(column) {
-        if (column.width)
-            return 'none';
-        if (!column.flex)
-            return 1;
-        return column.flex;
-    }
-    getColumnRight(right) {
-        if (Number(right) >= 0) {
-            if (Number(this.scrollYWidth) >= 0) {
-                return Number(right) + Number(this.scrollYWidth);
-            }
-            return Number(right);
-        }
-        // return right;
-        return '';
-    }
-    getColumnWidth(column) {
-        // if (Number(column.right) === 0) {
-        //   if (Number(this.scrollYWidth) >= 0) {
-        //     return Number(column.width) + Number(this.scrollYWidth);
-        //   }
-        //   return column.width;
-        // }
-        return column.width;
-    }
-    setStyle() {
-        let height = this.rowHeight == 0 ? '' : this.rowHeight;
-        if (this.cellConfig && this.cellConfig.cells) {
-            const spt = this.cellConfig.cells.map((x) => {
-                var _a;
-                const gridAreaSpt = (_a = x.gridArea) === null || _a === void 0 ? void 0 : _a.split('/');
-                return gridAreaSpt && gridAreaSpt.length > 3 ? Number(gridAreaSpt[2]) : 2;
-            });
-            height = ((Math.max(...spt) - 1) * height);
-        }
-        this.theadStyle = {
-            // height: `${height}px`,
-            ['min-height']: `${this.getRowHeight}px`
-        };
-    }
-    onSort(column) {
-        var _a;
-        if (!column.sort)
-            return;
-        if (XIsEmpty(this.sort))
-            this.sort = [];
-        let sort = (_a = this.sort) === null || _a === void 0 ? void 0 : _a.find((y) => y.field === column.id);
-        if (sort) {
-            if (sort.value === 'asc') {
-                this.sort = [];
-                this.sortStr = '';
-            }
-            else {
-                sort.value = 'asc';
-            }
-        }
-        else {
-            sort = { field: column.id, value: 'desc' };
-            this.sort = [sort];
-        }
-        if (!XIsEmpty(this.sort))
-            this.sortStr = `${sort.field} ${sort.value}`;
-        this.table.checkSort(this.sort);
-        this.table.sortChange.emit(this.sort);
-        this.table.resetScroll(false, true);
-        this.cdr.detectChanges();
-    }
-    dragWidthMoved(position, column) {
-        if (column.width) {
-            column.width += position.offsetX;
-            if (column.width < 60)
-                column.width = 60;
-            XIsFunction(column.dragWidthMoved) && column.dragWidthMoved({ position, column });
-            this.table.columnDragWidthMoved.emit({ position, column });
-            this.cdr.detectChanges();
-            this.table.bodyChange();
-        }
-    }
-    dragWidthStarted(position, column) {
-        column.draggingWidth = true;
-        if (column.width && XIsFunction(column.dragWidthStarted)) {
-            column.dragWidthStarted({ position, column });
-            this.table.columnDragWidthStarted.emit({ position, column });
-        }
-    }
-    dragWidthEnded(position, column) {
-        column.draggingWidth = false;
-        if (column.width && XIsFunction(column.dragWidthEnded)) {
-            column.dragWidthEnded({ position, column });
-            this.table.columnDragWidthEnded.emit({ position, column });
-        }
-    }
-    dropListDropped(_event) {
-        this.dragChange();
-        this.table.columnDropListDropped.emit(this.columns);
-    }
-    dropListSorted(event) {
-        const previous = this.columns[event.previousIndex];
-        const current = this.columns[event.currentIndex];
-        const middle = { left: previous.left, right: previous.right };
-        previous.left = current.left;
-        previous.right = current.right;
-        current.left = middle.left;
-        current.right = middle.right;
-        moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
-        this.dragChange();
-    }
-    dragStarted(_event, column) {
-        column.dragging = true;
-        this.dragChange();
-        this.table.theadsChanges();
-        this.table.columnDragStarted.emit(column);
-    }
-    dragEnded(column) {
-        column.dragging = false;
-        this.dragChange();
-        this.table.theadsChanges();
-        this.table.columnDragEnded.emit(column);
-    }
-    dragChange() {
-        this.table.bodyChange();
-    }
-    trackByItem(_index, item) {
-        return item.id;
-    }
-}
-/** @nocollapse */ XTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableHeadComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: XTableHeadComponent, selector: "x-table-head", inputs: { table: "table" }, viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<thead #thead [ngStyle]=\"theadStyle\" [class.x-table-head-top]=\"position === 'top'\" [class.x-table-head-bottom]=\"position === 'bottom'\">\r\n  <ng-container *ngIf=\"cellConfig; else columnsTpl\">\r\n    <tr [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight\">\r\n      <th\r\n        *ngFor=\"let column of cellConfig.cells\"\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        <div\r\n          *ngIf=\"column.dragWidth\"\r\n          class=\"x-table-drag-width\"\r\n          xDrag\r\n          (dragMoved)=\"dragWidthMoved($event, column)\"\r\n          (dragStarted)=\"dragWidthStarted($event, column)\"\r\n          (dragEnded)=\"dragWidthEnded($event, column)\"\r\n        ></div>\r\n      </th>\r\n    </tr>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"table.headSearchTpl\">\r\n    <ng-container *ngTemplateOutlet=\"columnsTpl; context: { case: 'search' }\"></ng-container>\r\n  </ng-container>\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    <th\r\n      *ngFor=\"let column of columns; trackBy: trackByItem\"\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      <ng-container [ngSwitch]=\"case\">\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <ng-container *ngTemplateOutlet=\"table.headSearchTpl; context: { $column: column }\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n          <div\r\n            *ngIf=\"column.dragWidth\"\r\n            class=\"x-table-drag-width\"\r\n            xDrag\r\n            (dragMoved)=\"dragWidthMoved($event, column)\"\r\n            (dragStarted)=\"dragWidthStarted($event, column)\"\r\n            (dragEnded)=\"dragWidthEnded($event, column)\"\r\n          ></div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </th>\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n  <ng-container [ngSwitch]=\"column.type\">\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n      <x-checkbox\r\n        *ngIf=\"column.headChecked\"\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      ></x-checkbox>\r\n      <ng-container *ngIf=\"!column.headChecked\">\r\n        <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'index'\">\r\n      <a>{{ column.label }}</a>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\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      {{ column.label }}\r\n    </ng-container>\r\n    <x-icon\r\n      *ngIf=\"column.sort\"\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  </a>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: i5.XCheckboxComponent, selector: "x-checkbox" }, { kind: "component", type: i6.XIconComponent, selector: "x-icon" }, { kind: "directive", type: i7.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: i7.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: "directive", type: XDragDirective, selector: "[xDrag]", outputs: ["dragStarted", "dragMoved", "dragEnded"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableHeadComponent, decorators: [{
-            type: Component,
-            args: [{ selector: `${XTableHeadPrefix}`, encapsulation: ViewEncapsulation.None, template: "<thead #thead [ngStyle]=\"theadStyle\" [class.x-table-head-top]=\"position === 'top'\" [class.x-table-head-bottom]=\"position === 'bottom'\">\r\n  <ng-container *ngIf=\"cellConfig; else columnsTpl\">\r\n    <tr [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\" [style.min-height.px]=\"getRowHeight\">\r\n      <th\r\n        *ngFor=\"let column of cellConfig.cells\"\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        <div\r\n          *ngIf=\"column.dragWidth\"\r\n          class=\"x-table-drag-width\"\r\n          xDrag\r\n          (dragMoved)=\"dragWidthMoved($event, column)\"\r\n          (dragStarted)=\"dragWidthStarted($event, column)\"\r\n          (dragEnded)=\"dragWidthEnded($event, column)\"\r\n        ></div>\r\n      </th>\r\n    </tr>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"table.headSearchTpl\">\r\n    <ng-container *ngTemplateOutlet=\"columnsTpl; context: { case: 'search' }\"></ng-container>\r\n  </ng-container>\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    <th\r\n      *ngFor=\"let column of columns; trackBy: trackByItem\"\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      <ng-container [ngSwitch]=\"case\">\r\n        <ng-container *ngSwitchCase=\"'search'\">\r\n          <ng-container *ngTemplateOutlet=\"table.headSearchTpl; context: { $column: column }\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n          <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n          <div\r\n            *ngIf=\"column.dragWidth\"\r\n            class=\"x-table-drag-width\"\r\n            xDrag\r\n            (dragMoved)=\"dragWidthMoved($event, column)\"\r\n            (dragStarted)=\"dragWidthStarted($event, column)\"\r\n            (dragEnded)=\"dragWidthEnded($event, column)\"\r\n          ></div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </th>\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n  <ng-container [ngSwitch]=\"column.type\">\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n      <x-checkbox\r\n        *ngIf=\"column.headChecked\"\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      ></x-checkbox>\r\n      <ng-container *ngIf=\"!column.headChecked\">\r\n        <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'index'\">\r\n      <a>{{ column.label }}</a>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\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      {{ column.label }}\r\n    </ng-container>\r\n    <x-icon\r\n      *ngIf=\"column.sort\"\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  </a>\r\n</ng-template>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, propDecorators: { thead: [{
-                type: ViewChild,
-                args: ['thead']
-            }], table: [{
-                type: Input
-            }] } });
-
-class XTableBodyComponent extends XTableBodyProperty {
-    constructor(
-    // @Optional() @Host() public table: XTableComponent,
-    renderer, elementRef, cdr, configService) {
-        super();
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.configService = configService;
-        this.tbodyStyle = {};
-        this.doc = inject(DOCUMENT);
-        this._unSubject = new Subject();
-    }
-    get isEmpty() {
-        var _a;
-        return ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) === 0;
-    }
-    get getRowHeight() {
-        return this.rowHeight == 0 ? '' : this.rowHeight;
-    }
-    get getItemSize() {
-        return this.rowHeight !== 0 && this.itemSize > Number(this.rowHeight) ? this.rowHeight : this.itemSize;
-    }
-    ngOnChanges(simples) {
-        const { data, columns, activatedRow, mergeRule, expandedAll, adaptionHeight } = simples;
-        XIsChange(data, columns, activatedRow, mergeRule, expandedAll) && this.cdr.detectChanges();
-        XIsChange(adaptionHeight) && this.setAdaptionHeight();
-    }
-    ngOnInit() {
-        var _a;
-        removeNgTag(this.elementRef.nativeElement);
-        if (this.level > 0)
-            removeNgTag(this.tbody.nativeElement);
-        if (((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.y) && !this.bodyHeight) {
-            this.bodyHeight = this.scroll.y;
-        }
-    }
-    ngAfterViewInit() {
-        this.table.virtualBody = this.virtualBody;
-        this.table.bodyChange = () => this.cdr.detectChanges();
-        this.setSubject();
-        this.setScroll();
-    }
-    ngOnDestroy() {
-        var _a;
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
-        (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    setSubject() {
-        var _a, _b, _c;
-        if (this.virtualBody) {
-            this.table.scrollContentEle = (_b = (_a = this.virtualBody) === null || _a === void 0 ? void 0 : _a.elementRef) === null || _b === void 0 ? void 0 : _b.nativeElement.querySelector('.cdk-virtual-scroll-content-wrapper');
-            if ((_c = this.scroll) === null || _c === void 0 ? void 0 : _c.x) {
-                this.renderer.setStyle(this.table.scrollContentEle, 'width', `${this.scroll.x}px`);
-            }
-            XResize(this.table.table.nativeElement, this.table.scrollContentEle)
-                .pipe(takeUntil(this._unSubject))
-                .subscribe((x) => {
-                this._resizeObserver = x.resizeObserver;
-                this.setAdaptionHeight();
-                this.setScroll();
-            });
-            fromEvent(this.doc.defaultView, 'resize')
-                .pipe(takeUntil(this._unSubject))
-                .subscribe(() => {
-                this.setAdaptionHeight();
-            });
-        }
-        if (this.table.scrollContentEle) {
-            fromEvent(this.virtualBody.elementRef.nativeElement, 'scroll')
-                .pipe(takeUntil(this._unSubject))
-                .subscribe((x) => {
-                const ele = x.srcElement;
-                this.table.scrollTop = ele.scrollTop;
-                this.table.scrollLeft = ele.scrollLeft;
-                if (ele.scrollLeft >= 0 && this.table.theads.length > 0) {
-                    for (let thead of this.table.theads) {
-                        thead.nativeElement.scrollLeft = this.table.scrollLeft;
-                    }
-                }
-                this.table.scrollLeftMax = ele.scrollLeft + ele.clientWidth === ele.scrollWidth;
-                this.table.cdr.detectChanges();
-            });
-        }
-    }
-    setScroll() {
-        if (!this.virtualBody)
-            return;
-        const ele = this.virtualBody.elementRef.nativeElement;
-        const hasY = ele.scrollHeight > this.bodyHeight;
-        const hasX = this.table.scrollContentEle.clientWidth > ele.clientWidth;
-        if (!this.table.hasScrollY && hasY) {
-            this.table.hasScrollY = true;
-            this.table.scrollYWidth = ele.offsetWidth - ele.clientWidth;
-        }
-        else if (this.table.hasScrollY && !hasY) {
-            this.table.hasScrollY = false;
-            this.table.scrollYWidth = 0;
-        }
-        if (!this.table.hasScrollX && hasX) {
-            this.table.hasScrollX = true;
-            this.table.scrollXHeight = ele.offsetHeight - ele.clientHeight;
-        }
-        else if (this.table.hasScrollX && !hasX) {
-            this.table.hasScrollX = false;
-            this.table.scrollXHeight = 0;
-            this.table.scrollXWidth = null;
-        }
-        if (hasX) {
-            this.table.scrollXWidth = ele.offsetWidth + ele.scrollWidth - ele.clientWidth;
-        }
-        this.table.cdr.detectChanges();
-    }
-    setStyle() {
-        let height = this.rowHeight == 0 ? '' : this.rowHeight;
-        if (this.cellConfig && this.cellConfig.cells) {
-            const spt = this.cellConfig.cells.map((x) => {
-                var _a;
-                const gridAreaSpt = (_a = x.gridArea) === null || _a === void 0 ? void 0 : _a.split('/');
-                return gridAreaSpt && gridAreaSpt.length > 3 ? Number(gridAreaSpt[2]) : 2;
-            });
-            height = ((Math.max(...spt) - 1) * height);
-        }
-        this.tbodyStyle = {
-            height: `${height}px`
-        };
-    }
-    getIndex(index, item) {
-        if (!isNaN(index))
-            return index;
-        return this.data.indexOf(item);
-    }
-    getFlex(column) {
-        if (column.width)
-            return 'none';
-        if (!column.flex)
-            return 1;
-        return column.flex;
-    }
-    getTitle(row, column) {
-        let it = row[column.id];
-        return it ? stripTags(it) : '';
-    }
-    setAdaptionHeight() {
-        var _a, _b, _c;
-        if (this.adaptionHeight > 0) {
-            const captionHeight = ((_a = this.table.tcaption) === null || _a === void 0 ? void 0 : _a.nativeElement.clientHeight) || 0;
-            let headHeight = 0;
-            for (let thead of this.table.theads) {
-                headHeight += thead.nativeElement.clientHeight;
-            }
-            const footHeight = ((_b = this.table.tfoot) === null || _b === void 0 ? void 0 : _b.nativeElement.clientHeight) || 0;
-            const paginationHeight = ((_c = this.table.pagination) === null || _c === void 0 ? void 0 : _c.elementRef.nativeElement.clientHeight) || 0;
-            this.bodyHeight =
-                Number(this.docPercent) * this.doc.documentElement.clientHeight -
-                    captionHeight -
-                    headHeight -
-                    footHeight -
-                    paginationHeight -
-                    Number(this.adaptionHeight);
-            if (this.bodyHeight < 0)
-                this.bodyHeight = 0;
-            this.minBufferPx = this.bodyHeight;
-            this.maxBufferPx = this.bodyHeight * 1.2;
-            this.virtualBody['_scrollStrategy']['_minBufferPx'] = this.minBufferPx;
-            this.virtualBody['_scrollStrategy']['_maxBufferPx'] = this.maxBufferPx;
-            this.cdr.detectChanges();
-        }
-    }
-    rowClick(event, row) {
-        if (row.disabled)
-            return;
-        this.activatedRow = row;
-        if (this.table.allowCheckRow && this.table.rowChecked) {
-            if (!XParentPath(event.target).includes('x-checkbox')) {
-                row[this.table.rowChecked.id] = !row[this.table.rowChecked.id];
-                this.table.bodyChecked(row[this.table.rowChecked.id], this.table.rowChecked, row);
-            }
-        }
-        this.activatedRowChange.emit(row);
-        this.cdr.detectChanges();
-    }
-    onExpanded(_event, node) {
-        node.expanded = !node.expanded;
-        this.cdr.detectChanges();
-    }
-    trackByItem(_index, item) {
-        return item.id;
-    }
-}
-/** @nocollapse */ XTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableBodyComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: XTableBodyComponent, selector: "x-table-body", inputs: { table: "table" }, viewQueries: [{ propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<tbody #tbody>\r\n  <ng-container *ngIf=\"cellConfig; else virtualScrollTpl\">\r\n    <tr *ngFor=\"let row of data; index as i; trackBy: trackByItem\" [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\">\r\n      <td\r\n        *ngFor=\"let column of cellConfig.cells; index as j\"\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    </tr>\r\n  </ng-container>\r\n  <x-empty [img]=\"table.emptyImg\" [content]=\"table.emptyContent\" *ngIf=\"table.showEmpty && isEmpty && level === 0\"></x-empty>\r\n</tbody>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    *ngIf=\"virtualScroll; else bodyTpl\"\r\n    [itemSize]=\"getItemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"bodyHeight\"\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</ng-template>\r\n\r\n<ng-template #bodyTpl>\r\n  <ng-container *ngFor=\"let row of data; index as i; trackBy: trackByItem\">\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    <div class=\"x-table-children\" [class.x-table-expandTpl]=\"expandTpl\" *ngIf=\"table.treeTable && row.children && row.expanded\">\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        (activatedRowChange)=\"table.activatedRowChange.emit($event)\"\r\n        [level]=\"row.level! + 1\"\r\n        [table]=\"table\"\r\n      ></x-table-body>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #rowTpl let-row=\"row\" let-i=\"i\">\r\n  <ng-container *ngIf=\"level > 0 && expandTpl\">\r\n    <ng-container *xOutlet=\"expandTpl; context: { $row: row, $index: i, $level: level }\"></ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"level === 0 || !expandTpl\">\r\n    <ng-container *xOutlet=\"rowDefault; context: { row: row, i: i, level: level }\"></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #rowDefault let-row=\"row\" let-i=\"i\">\r\n  <ng-container *ngFor=\"let column of columns; index as j; trackBy: trackByItem\">\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  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-column=\"column\" let-row=\"row\" let-i=\"i\">\r\n  <ng-container [ngSwitch]=\"column.type\">\r\n    <ng-container *ngSwitchCase=\"'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      ></x-checkbox>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'index'\">\r\n      <div>{{ table.getIndex(i) }}</div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *ngIf=\"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          class=\"x-table-expand\"\r\n          [style.margin-left.rem]=\"row.level - 0.5\"\r\n        ></x-button>\r\n      </ng-container>\r\n      <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\">\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.rowExpandNext && table.rowExpandNext.id === column.id ? 'x-table-body-level-' + row.level : '' }}\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: i5.XCheckboxComponent, selector: "x-checkbox" }, { kind: "component", type: i6$1.XButtonComponent, selector: "x-button" }, { kind: "directive", type: i7$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i7$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i7$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i8.XEmptyComponent, selector: "x-empty" }, { kind: "component", type: XTableBodyComponent, selector: "x-table-body", inputs: ["table"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableBodyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: `${XTableBodyPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tbody #tbody>\r\n  <ng-container *ngIf=\"cellConfig; else virtualScrollTpl\">\r\n    <tr *ngFor=\"let row of data; index as i; trackBy: trackByItem\" [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\">\r\n      <td\r\n        *ngFor=\"let column of cellConfig.cells; index as j\"\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    </tr>\r\n  </ng-container>\r\n  <x-empty [img]=\"table.emptyImg\" [content]=\"table.emptyContent\" *ngIf=\"table.showEmpty && isEmpty && level === 0\"></x-empty>\r\n</tbody>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    *ngIf=\"virtualScroll; else bodyTpl\"\r\n    [itemSize]=\"getItemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"bodyHeight\"\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</ng-template>\r\n\r\n<ng-template #bodyTpl>\r\n  <ng-container *ngFor=\"let row of data; index as i; trackBy: trackByItem\">\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    <div class=\"x-table-children\" [class.x-table-expandTpl]=\"expandTpl\" *ngIf=\"table.treeTable && row.children && row.expanded\">\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        (activatedRowChange)=\"table.activatedRowChange.emit($event)\"\r\n        [level]=\"row.level! + 1\"\r\n        [table]=\"table\"\r\n      ></x-table-body>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #rowTpl let-row=\"row\" let-i=\"i\">\r\n  <ng-container *ngIf=\"level > 0 && expandTpl\">\r\n    <ng-container *xOutlet=\"expandTpl; context: { $row: row, $index: i, $level: level }\"></ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"level === 0 || !expandTpl\">\r\n    <ng-container *xOutlet=\"rowDefault; context: { row: row, i: i, level: level }\"></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #rowDefault let-row=\"row\" let-i=\"i\">\r\n  <ng-container *ngFor=\"let column of columns; index as j; trackBy: trackByItem\">\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  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-column=\"column\" let-row=\"row\" let-i=\"i\">\r\n  <ng-container [ngSwitch]=\"column.type\">\r\n    <ng-container *ngSwitchCase=\"'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      ></x-checkbox>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'index'\">\r\n      <div>{{ table.getIndex(i) }}</div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *ngIf=\"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          class=\"x-table-expand\"\r\n          [style.margin-left.rem]=\"row.level - 0.5\"\r\n        ></x-button>\r\n      </ng-container>\r\n      <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\">\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.rowExpandNext && table.rowExpandNext.id === column.id ? 'x-table-body-level-' + row.level : '' }}\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, propDecorators: { tbody: [{
-                type: ViewChild,
-                args: ['tbody']
-            }], virtualBody: [{
-                type: ViewChild,
-                args: ['virtualBody']
-            }], table: [{
-                type: Input
-            }] } });
-
-class XTableFootComponent extends XTableFootProperty {
-    constructor(
-    // @Optional() @Host() public table: XTableComponent,
-    renderer, elementRef, cdr) {
-        super();
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-    }
-    get getRowHeight() {
-        return this.rowHeight == 0 ? '' : this.rowHeight;
-    }
-    ngOnInit() {
-        removeNgTag(this.elementRef.nativeElement);
-    }
-    ngAfterViewInit() {
-        this.table.tfoot = this.tfoot;
-    }
-}
-/** @nocollapse */ XTableFootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableFootComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTableFootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: XTableFootComponent, selector: "x-table-foot", inputs: { table: "table" }, viewQueries: [{ propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: 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: i4.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableFootComponent, decorators: [{
-            type: Component,
-            args: [{ selector: `${XTableFootPrefix}`, 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" }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tfoot: [{
-                type: ViewChild,
-                args: ['tfoot']
-            }], table: [{
-                type: Input
-            }] } });
-
-class XTableComponent extends XTableProperty {
-    constructor(renderer, elementRef, cdr, configService) {
-        super();
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.configService = configService;
-        this.theads = [];
-        this.theadsChange = [];
-        this.hasScrollY = false;
-        this.scrollYWidth = 0;
-        this.hasScrollX = false;
-        this.scrollXHeight = 0;
-        this.scrollLeft = 0;
-        this.scrollLeftMax = false;
-        this.scrollTop = 0;
-        this.dataIsFunc = false;
-        this.getting = false;
-        this.tableData = [];
-        this.treeTableData = [];
-        this.checkedValues = {};
-        this.indeterminate = '$$indeterminate';
-        this._unSubject = new Subject();
-    }
-    get getScrollLeft() {
-        return this.scrollLeft > 0;
-    }
-    get getScrollTop() {
-        return this.scrollTop > 0;
-    }
-    get getRowHeight() {
-        return this.rowHeight == 0 ? '' : this.rowHeight;
-    }
-    get getStickyTopScrollTop() {
-        return this.tcaption ? this.tcaption.nativeElement.offsetHeight : 0;
-    }
-    get getStickyBottomScrollTop() {
-        var _a;
-        let top = 0;
-        if (this.footer && this.tfoot) {
-            top += ((_a = this.tfoot) === null || _a === void 0 ? void 0 : _a.nativeElement.clientHeight) + 1;
-        }
-        return top;
-    }
-    get getStickyTopRightEleHeight() {
-        if (this.stickyTopRightEle) {
-            return this.stickyTopRightEle.nativeElement.offsetHeight;
-        }
-        else {
-            return 0;
-        }
-    }
-    get getStickyBottomRightEleHeight() {
-        if (this.stickyBottomRightEle) {
-            return this.stickyBottomRightEle.nativeElement.offsetHeight;
-        }
-        else {
-            return 0;
-        }
-    }
-    ngOnInit() {
-        this.setClassMap();
-        this.setRowChecked();
-        this.setRowExpand();
-        this.setPaginationPosition();
-    }
-    ngOnChanges(simples) {
-        const { data, checkedRow, columns, activatedRow, manual, showPagination, expandedAll, cellConfig } = simples;
-        XIsChange(expandedAll) && this.setExpandedAll();
-        XIsChange(data, checkedRow) && this.setData();
-        XIsChange(columns, activatedRow, showPagination) && this.cdr.detectChanges();
-        XIsChange(manual) && this.setManual();
-        XIsChange(cellConfig) && this.setMerge();
-    }
-    ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.complete();
-    }
-    ngAfterViewInit() {
-        this.tcaption = this.caption;
-    }
-    setClassMap() {
-        this.classMap = {
-            [`${XTablePrefix}-row-size-${this.rowSize}`]: !XIsEmpty(this.rowSize)
-        };
-        this.cdr.detectChanges();
-    }
-    setPaginationPosition() {
-        this.renderer.addClass(this.elementRef.nativeElement, `x-table-${this.paginationPosition}`);
-    }
-    getSticky(column) {
-        return this.getStickyLeft(column) || this.getStickyRight(column);
-    }
-    getStickyLeft(column) {
-        return Number(column.left) >= 0;
-    }
-    getStickyLeftLast(column) {
-        let lefts = this.columns.filter((x) => Number(x.left) >= 0);
-        if (lefts.length === 0)
-            return false;
-        return lefts[lefts.length - 1].id === column.id;
-    }
-    getStickyRight(column) {
-        return Number(column.right) >= 0;
-    }
-    getStickyRightFirst(column) {
-        let rights = this.columns.filter((x) => Number(x.right) >= 0);
-        if (rights.length === 0)
-            return false;
-        return rights[0].id === column.id;
-    }
-    hasStickyTopRight() {
-        return (this.showHeader &&
-            (this.headerPosition === 'top' || this.headerPosition === 'top-bottom') &&
-            this.columns.some((x) => Number(x.right) >= 0));
-    }
-    hasStickyTopRightSearch() {
-        return this.headSearchTpl ? true : false;
-    }
-    hasStickyBottomRight() {
-        return (this.showHeader &&
-            (this.headerPosition === 'bottom' || this.headerPosition === 'top-bottom') &&
-            this.columns.some((x) => Number(x.right) >= 0));
-    }
-    getIndex(index) {
-        return (Number(this.index) - 1) * Number(this.size) + index + 1;
-    }
-    setData() {
-        if (Array.isArray(this.data)) {
-            this.dataIsFunc = false;
-            this.tableData = this.data;
-            this.setChecked(this.data);
-            this.setHeadCheckboxList(this.data);
-            this.setExpand(this.data);
-            this.setHeadExpandList();
-            this.detectChanges();
-        }
-        else if (this.data instanceof Function) {
-            this.dataIsFunc = true;
-            this.getDataByFunc();
-        }
-    }
-    getDataByFunc() {
-        if (!this.manual)
-            return;
-        this.getting = true;
-        this.cdr.detectChanges();
-        this._unSubject.next();
-        this.data(this.index, this.size, this.query)
-            .pipe(takeUntil(this._unSubject))
-            .subscribe((x) => {
-            let [data, total] = [x.list, x.total];
-            if (this.virtualBody) {
-                this.virtualBody.scrollToIndex(0);
-                this.virtualBody.checkViewportSize();
-            }
-            this.getting = false;
-            this.tableData = data;
-            this.setChecked(data);
-            this.setHeadCheckboxList(data);
-            this.setExpand(data);
-            this.setHeadExpandList();
-            this.total = total;
-            this.detectChanges();
-        });
-    }
-    setManual() {
-        if (this.dataIsFunc)
-            this.getDataByFunc();
-    }
-    setRowChecked() {
-        this.rowChecked = this.columns.find((x) => x.rowChecked);
-        this.headCheckboxList = this.columns.filter((x) => x.type === 'checkbox' && x.headChecked);
-    }
-    setRowExpand() {
-        this.rowExpand = this.columns.find((x) => x.rowExpand);
-    }
-    isExpandColumn(column) {
-        let expandColumn = this.columns.find((x) => x.id === column.id && x.type === 'expand');
-        if (expandColumn) {
-            return true;
-        }
-        return false;
-    }
-    setMerge() {
-        if (!this.cellConfig)
-            return;
-        const setRule = (rule) => {
-            if (!rule)
-                return;
-            let gridTemplateColumns = '', cells = [];
-            if (!rule.gridTemplateColumns) {
-                gridTemplateColumns = `${this.columns
-                    .map((x) => {
-                    if (x.width)
-                        return x.width;
-                    if (x.flex)
-                        return `${x.flex}fr`;
-                    return '1fr';
-                })
-                    .join(' ')}`;
-            }
-            if (!rule.cells)
-                return;
-            cells = rule.cells.map((y) => {
-                const col = this.columns.find((z) => z.id === y.id);
-                if (col) {
-                    return Object.assign(Object.assign({}, col), y);
-                }
-                return y;
-            });
-            return { gridTemplateColumns, cells };
-        };
-        this.cellConfig.thead = setRule(this.cellConfig.thead);
-        this.cellConfig.tbody = setRule(this.cellConfig.tbody);
-    }
-    change(index) {
-        this.index = index;
-        this.dataIsFunc && this.getDataByFunc();
-        this.indexChange.emit(index);
-        this.resetScroll();
-    }
-    resetScroll(x = true, y = true) {
-        var _a, _b;
-        if (this.hasScrollX && x)
-            (_a = this.virtualBody) === null || _a === void 0 ? void 0 : _a.scrollTo({ left: 0 });
-        if (this.hasScrollY && y)
-            (_b = this.virtualBody) === null || _b === void 0 ? void 0 : _b.scrollTo({ top: 0 });
-    }
-    setChecked(data) {
-        let result = [];
-        if (XIsEmpty(data) || !this.checkedRow)
-            return;
-        for (let key in this.checkedRow) {
-            const arr = this.checkedRow[key];
-            for (let item of data) {
-                item[key] = arr.includes(item.id);
-                result = [...result, item];
-            }
-        }
-        if (result.length > 0)
-            data = [...result];
-    }
-    setHeadCheckboxList(data) {
-        if (XIsEmpty(data) || !this.headCheckboxList)
-            return;
-        for (let column of this.headCheckboxList) {
-            this.setCheckedValues(column);
-        }
-    }
-    setExpand(data) {
-        const getChildren = (node, level) => {
-            var _a, _b;
-            node.level = level;
-            node.expanded = Boolean(this.expandedAll) || level <= this.expandedLevel || this.expanded.includes(node.id);
-            if (XIsUndefined(node.children))
-                node.children = data.filter((y) => y.pid === node.id);
-            if (XIsUndefined(node.leaf))
-                node.leaf = ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 0;
-            if (node.leaf)
-                (_b = node.children) === null || _b === void 0 ? void 0 : _b.map((y) => getChildren(y, level + 1));
-            return node;
-        };
-        this.treeTableData = data
-            .filter((x) => XIsEmpty(x.pid))
-            .map((x, index) => {
-            if (XIsUndefined(x.id))
-                x.id = index + 1;
-            return getChildren(x, 0);
-        });
-    }
-    setExpandedAll() {
-        var _a;
-        if (!this.treeTable || ((_a = this.treeTableData) === null || _a === void 0 ? void 0 : _a.length) === 0)
-            return;
-        const setChildren = (nodes) => {
-            if (XIsEmpty(nodes))
-                return;
-            nodes.forEach((x) => {
-                x.expanded = Boolean(this.expandedAll);
-                setChildren(x.children);
-            });
-        };
-        setChildren(this.treeTableData);
-        this.detectChanges();
-    }
-    setHeadExpandList() { }
-    checkSort(sort) {
-        if (!this.dataIsFunc)
-            return;
-        if (typeof this.query === 'undefined')
-            this.query = {};
-        this.query.sort = sort;
-        this.queryChange.emit(this.query);
-        this.getDataByFunc();
-    }
-    headChecked(checked, column) {
-        this.tableData.forEach((x) => {
-            if (!x.disabled) {
-                x[column.id] = checked;
-            }
-        });
-        this.setCheckedValues(column);
-        this.headCheckboxChange.emit({ rows: this.tableData, checkbox: this.checkedValues });
-        this.detectChanges();
-    }
-    bodyChecked(_checked, column, row) {
-        this.setCheckedValues(column);
-        this.bodyCheckboxChange.emit(row);
-        this.detectChanges();
-    }
-    setCheckedValues(column) {
-        const notDisabled = this.tableData.filter((x) => !x.disabled);
-        const count = notDisabled.length;
-        const checkedLen = notDisabled.filter((x) => x[column.id]).length;
-        this.checkedValues[column.id] = count === checkedLen && count !== 0;
-        this.checkedValues[column.id + this.indeterminate] = checkedLen > 0 && checkedLen < count;
-    }
-    detectChanges() {
-        this.bodyChange && this.bodyChange();
-        this.theadsChanges();
-        this.cdr.detectChanges();
-    }
-    theadsChanges() {
-        if (this.theadsChange && this.theadsChange.length > 0) {
-            for (let item of this.theadsChange) {
-                item();
-            }
-        }
-    }
-}
-/** @nocollapse */ XTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: XTableComponent, selector: "x-table", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "caption", first: true, predicate: ["caption"], descendants: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }, { propertyName: "stickyTopRightEle", first: true, predicate: ["stickyTopRightEle"], descendants: true }, { propertyName: "stickyBottomRightEle", first: true, predicate: ["stickyBottomRightEle"], descendants: 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]=\"cellConfig\"\r\n>\r\n  <caption #caption class=\"x-table-header\" *ngIf=\"header\" [style.height.px]=\"getRowHeight\" [style.min-height.px]=\"getRowHeight\">\r\n    <ng-container *xOutlet=\"header\">{{ header }}</ng-container>\r\n  </caption>\r\n  <x-table-head\r\n    *ngIf=\"showHeader && (headerPosition === 'top' || headerPosition === 'top-bottom')\"\r\n    [columns]=\"columns\"\r\n    [rowHeight]=\"rowHeight\"\r\n    [columnTpl]=\"headColumnTpl\"\r\n    [scrollYWidth]=\"scrollYWidth\"\r\n    [scrollXWidth]=\"scrollXWidth\"\r\n    [cellConfig]=\"cellConfig?.thead\"\r\n    [position]=\"'top'\"\r\n    [table]=\"this\"\r\n  ></x-table-head>\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]=\"cellConfig?.tbody\"\r\n    [expandedAll]=\"expandedAll\"\r\n    [expandTpl]=\"expandTpl\"\r\n    [(activatedRow)]=\"activatedRow\"\r\n    (activatedRowChange)=\"activatedRowChange.emit($event)\"\r\n    [table]=\"this\"\r\n  ></x-table-body>\r\n  <x-table-head\r\n    *ngIf=\"showHeader && (headerPosition === 'bottom' || headerPosition === 'top-bottom')\"\r\n    [columns]=\"columns\"\r\n    [rowHeight]=\"rowHeight\"\r\n    [columnTpl]=\"headColumnTpl\"\r\n    [scrollYWidth]=\"scrollYWidth\"\r\n    [scrollXWidth]=\"scrollXWidth\"\r\n    [cellConfig]=\"cellConfig?.thead\"\r\n    [position]=\"'bottom'\"\r\n    [table]=\"this\"\r\n  ></x-table-head>\r\n  <x-table-foot *ngIf=\"footer\" [table]=\"this\" [footer]=\"footer\" [rowHeight]=\"rowHeight\"></x-table-foot>\r\n  <div\r\n    *ngIf=\"hasStickyTopRight()\"\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  <div\r\n    *ngIf=\"hasStickyTopRight() && headSearchTpl\"\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  <div\r\n    *ngIf=\"hasStickyBottomRight()\"\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  <div\r\n    *ngIf=\"hasStickyBottomRight() && headSearchTpl\"\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</table>\r\n<x-pagination\r\n  #pagination\r\n  *ngIf=\"showPagination && size\"\r\n  [(index)]=\"index\"\r\n  [(size)]=\"size\"\r\n  [(query)]=\"query\"\r\n  [total]=\"total\"\r\n  (indexChange)=\"change($event)\"\r\n  [showEllipsis]=\"showEllipsis\"\r\n  [showTotal]=\"showTotal\"\r\n  [space]=\"space\"\r\n  [hiddenBorder]=\"hiddenPaginationBorder!\"\r\n>\r\n</x-pagination>\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;background-color:var(--x-background);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-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-background-a200);color:var(--x-primary)}.x-table>tbody tr:hover>td{background-color:var(--x-background-a200)}.x-table>tbody tr:last-child{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:0 var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);z-index:1}.x-table-scroll-left .x-table-sticky-left-last{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);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}.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-light-width-minus) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);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;border-radius:var(--x-border-radius);background-color:var(--x-background);opacity:.8;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.XPaginationComponent, selector: "x-pagination" }, { kind: "directive", type: i4.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: i5$1.XLoadingComponent, selector: "x-loading, [x-loading]" }, { kind: "component", type: XTableHeadComponent, selector: "x-table-head", inputs: ["table"] }, { kind: "component", type: XTableBodyComponent, selector: "x-table-body", inputs: ["table"] }, { kind: "component", type: XTableFootComponent, selector: "x-table-foot", inputs: ["table"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: `${XTablePrefix}`, 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]=\"cellConfig\"\r\n>\r\n  <caption #caption class=\"x-table-header\" *ngIf=\"header\" [style.height.px]=\"getRowHeight\" [style.min-height.px]=\"getRowHeight\">\r\n    <ng-container *xOutlet=\"header\">{{ header }}</ng-container>\r\n  </caption>\r\n  <x-table-head\r\n    *ngIf=\"showHeader && (headerPosition === 'top' || headerPosition === 'top-bottom')\"\r\n    [columns]=\"columns\"\r\n    [rowHeight]=\"rowHeight\"\r\n    [columnTpl]=\"headColumnTpl\"\r\n    [scrollYWidth]=\"scrollYWidth\"\r\n    [scrollXWidth]=\"scrollXWidth\"\r\n    [cellConfig]=\"cellConfig?.thead\"\r\n    [position]=\"'top'\"\r\n    [table]=\"this\"\r\n  ></x-table-head>\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]=\"cellConfig?.tbody\"\r\n    [expandedAll]=\"expandedAll\"\r\n    [expandTpl]=\"expandTpl\"\r\n    [(activatedRow)]=\"activatedRow\"\r\n    (activatedRowChange)=\"activatedRowChange.emit($event)\"\r\n    [table]=\"this\"\r\n  ></x-table-body>\r\n  <x-table-head\r\n    *ngIf=\"showHeader && (headerPosition === 'bottom' || headerPosition === 'top-bottom')\"\r\n    [columns]=\"columns\"\r\n    [rowHeight]=\"rowHeight\"\r\n    [columnTpl]=\"headColumnTpl\"\r\n    [scrollYWidth]=\"scrollYWidth\"\r\n    [scrollXWidth]=\"scrollXWidth\"\r\n    [cellConfig]=\"cellConfig?.thead\"\r\n    [position]=\"'bottom'\"\r\n    [table]=\"this\"\r\n  ></x-table-head>\r\n  <x-table-foot *ngIf=\"footer\" [table]=\"this\" [footer]=\"footer\" [rowHeight]=\"rowHeight\"></x-table-foot>\r\n  <div\r\n    *ngIf=\"hasStickyTopRight()\"\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  <div\r\n    *ngIf=\"hasStickyTopRight() && headSearchTpl\"\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  <div\r\n    *ngIf=\"hasStickyBottomRight()\"\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  <div\r\n    *ngIf=\"hasStickyBottomRight() && headSearchTpl\"\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</table>\r\n<x-pagination\r\n  #pagination\r\n  *ngIf=\"showPagination && size\"\r\n  [(index)]=\"index\"\r\n  [(size)]=\"size\"\r\n  [(query)]=\"query\"\r\n  [total]=\"total\"\r\n  (indexChange)=\"change($event)\"\r\n  [showEllipsis]=\"showEllipsis\"\r\n  [showTotal]=\"showTotal\"\r\n  [space]=\"space\"\r\n  [hiddenBorder]=\"hiddenPaginationBorder!\"\r\n>\r\n</x-pagination>\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;background-color:var(--x-background);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-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-background-a200);color:var(--x-primary)}.x-table>tbody tr:hover>td{background-color:var(--x-background-a200)}.x-table>tbody tr:last-child{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:0 var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);z-index:1}.x-table-scroll-left .x-table-sticky-left-last{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);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}.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-light-width-minus) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);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;border-radius:var(--x-border-radius);background-color:var(--x-background);opacity:.8;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color)}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"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, propDecorators: { table: [{
-                type: ViewChild,
-                args: ['table']
-            }], caption: [{
-                type: ViewChild,
-                args: ['caption']
-            }], pagination: [{
-                type: ViewChild,
-                args: ['pagination']
-            }], stickyTopRightEle: [{
-                type: ViewChild,
-                args: ['stickyTopRightEle']
-            }], stickyBottomRightEle: [{
-                type: ViewChild,
-                args: ['stickyBottomRightEle']
-            }] } });
-
-class XTableModule {
-}
-/** @nocollapse */ XTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ XTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: XTableModule, declarations: [XDragDirective,
-        XTableComponent,
-        XTableProperty,
-        XTableHeadComponent,
-        XTableHeadProperty,
-        XTableBodyComponent,
-        XTableBodyProperty,
-        XTableFootComponent,
-        XTableFootProperty], imports: [CommonModule,
-        FormsModule,
-        XPaginationModule,
-        XOutletModule,
-        XCheckboxModule,
-        XIconModule,
-        XButtonModule,
-        ScrollingModule,
-        DragDropModule,
-        XEmptyModule,
-        XLoadingModule], exports: [XTableComponent] });
-/** @nocollapse */ XTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableModule, imports: [CommonModule,
-        FormsModule,
-        XPaginationModule,
-        XOutletModule,
-        XCheckboxModule,
-        XIconModule,
-        XButtonModule,
-        ScrollingModule,
-        DragDropModule,
-        XEmptyModule,
-        XLoadingModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: XTableModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        XDragDirective,
-                        XTableComponent,
-                        XTableProperty,
-                        XTableHeadComponent,
-                        XTableHeadProperty,
-                        XTableBodyComponent,
-                        XTableBodyProperty,
-                        XTableFootComponent,
-                        XTableFootProperty
-                    ],
-                    exports: [XTableComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        XPaginationModule,
-                        XOutletModule,
-                        XCheckboxModule,
-                        XIconModule,
-                        XButtonModule,
-                        ScrollingModule,
-                        DragDropModule,
-                        XEmptyModule,
-                        XLoadingModule
-                    ]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { XDragDirective, XTableBodyComponent, XTableBodyPrefix, XTableBodyProperty, XTableComponent, XTableFootComponent, XTableFootPrefix, XTableFootProperty, XTableHeadComponent, XTableHeadPrefix, XTableHeadProperty, XTableModule, XTablePrefix, XTableProperty };
-//# sourceMappingURL=ng-nest-ui-table.mjs.map