@ng-nest/ui 12.0.11 → 13.0.3

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

@@ -0,0 +1,1063 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, Directive, Inject, 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, XResize, stripTags } from '@ng-nest/ui/core';
+import * as i6$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$2 from '@ng-nest/ui/loading';
+import { XLoadingModule } from '@ng-nest/ui/loading';
+import * as i2 from '@ng-nest/ui/checkbox';
+import { XCheckboxModule } from '@ng-nest/ui/checkbox';
+import * as i3 from '@ng-nest/ui/icon';
+import { XIconModule } from '@ng-nest/ui/icon';
+import * as i4 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i6 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i7 from '@ng-nest/ui/outlet';
+import { XOutletModule } from '@ng-nest/ui/outlet';
+import * as i2$1 from '@ng-nest/ui/empty';
+import { XEmptyModule } from '@ng-nest/ui/empty';
+import * as i3$1 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
+/**
+ * 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 列头自定义模板
+         * @en_US Column header custom template
+         */
+        this.headColumnTpl = {};
+        /**
+         * @zh_CN 列内容自定义模板
+         * @en_US Column content custom template
+         */
+        this.bodyColumnTpl = {};
+        /**
+         * @zh_CN 排序点击的事件
+         * @en_US Sort click events
+         */
+        this.sortChange = 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();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XTableProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTableProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XTableProperty, selector: "ng-component", inputs: { data: "data", columns: "columns", rowHeight: "rowHeight", loading: "loading", bordered: "bordered", showHeader: "showHeader", activatedRow: "activatedRow", headColumnTpl: "headColumnTpl", bodyColumnTpl: "bodyColumnTpl", allowSelectRow: "allowSelectRow", virtualScroll: "virtualScroll", bodyHeight: "bodyHeight", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", checkedRow: "checkedRow", manual: "manual", scroll: "scroll", cellConfig: "cellConfig", rowSize: "rowSize" }, outputs: { activatedRowChange: "activatedRowChange", sortChange: "sortChange", manualChange: "manualChange" }, 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, true),
+    XInputBoolean()
+], XTableProperty.prototype, "allowSelectRow", 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);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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
+            }], activatedRow: [{
+                type: Input
+            }], activatedRowChange: [{
+                type: Output
+            }], headColumnTpl: [{
+                type: Input
+            }], bodyColumnTpl: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
+            }], allowSelectRow: [{
+                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
+            }], manualChange: [{
+                type: Output
+            }], cellConfig: [{
+                type: Input
+            }], rowSize: [{
+                type: Input
+            }] } });
+/**
+ * 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 */ /** @nocollapse */ XTableHeadProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTableHeadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableHeadProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XTableHeadProperty, selector: "ng-component", inputs: { columns: "columns", rowHeight: "rowHeight", columnTpl: "columnTpl", scrollYWidth: "scrollYWidth", scrollXWidth: "scrollXWidth", cellConfig: "cellConfig" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+__decorate([
+    XInputNumber()
+], XTableHeadProperty.prototype, "rowHeight", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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
+            }] } });
+/**
+ * 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;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XTableBodyProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTableBodyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableBodyProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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" }, 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);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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
+            }] } });
+/**
+ * Table Foot
+ * @selector x-table-foot
+ * @decorator component
+ */
+const XTableFootPrefix = 'x-table-foot';
+/**
+ * Table Foot Property
+ */
+class XTableFootProperty extends XProperty {
+}
+/** @nocollapse */ /** @nocollapse */ XTableFootProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTableFootProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableFootProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XTableFootProperty, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTableFootProperty, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }] });
+
+class XDragDirective {
+    constructor(elementRef, document, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.draging = new EventEmitter();
+        this._unSubject = new Subject();
+        this.doc = 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');
+            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.draging.emit({ x: offsetX, y: 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');
+                _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 */ /** @nocollapse */ XDragDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XDragDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ XDragDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: XDragDirective, selector: "[xDrag]", outputs: { draging: "draging" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XDragDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[xDrag]' }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i0.Renderer2 }];
+    }, propDecorators: { draging: [{
+                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 = {};
+    }
+    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.thead = this.thead;
+        this.table.headChange = () => this.cdr.detectChanges();
+    }
+    getSticky(column) {
+        return Number(column.left) >= 0;
+    }
+    getFlex(column) {
+        if (column.width)
+            return 'none';
+        if (!column.flex)
+            return 1;
+        return column.flex;
+    }
+    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();
+    }
+    dragWidth(dis, column) {
+        if (column.width) {
+            column.width += dis.x;
+            if (column.width < 60)
+                column.width = 60;
+            this.cdr.detectChanges();
+            this.table.bodyChange();
+        }
+    }
+    trackByItem(_index, item) {
+        return item.id;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XTableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTableHeadComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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\">\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]=\"getSticky(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.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 *ngIf=\"column.dragWidth\" class=\"x-table-drag-width\" xDrag (draging)=\"dragWidth($event, column)\"></div>\r\n      </th>\r\n    </tr>\r\n  </ng-container>\r\n</thead>\r\n\r\n<ng-template #columnsTpl>\r\n  <tr\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  >\r\n    <th\r\n      *ngFor=\"let column of columns; trackBy: trackByItem\"\r\n      [class.x-table-sticky]=\"getSticky(column)\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n      [style.width.px]=\"column.width\"\r\n      [style.left.px]=\"column.left\"\r\n      [style.flex]=\"getFlex(column)\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n      <div *ngIf=\"column.dragWidth\" class=\"x-table-drag-width\" xDrag (draging)=\"dragWidth($event, column)\"></div>\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", components: [{ type: i2.XCheckboxComponent, selector: "x-checkbox" }, { type: i3.XIconComponent, selector: "x-icon" }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: XDragDirective, selector: "[xDrag]", outputs: ["draging"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTableHeadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTableHeadPrefix}`, encapsulation: ViewEncapsulation.None, template: "<thead #thead [ngStyle]=\"theadStyle\">\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]=\"getSticky(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.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 *ngIf=\"column.dragWidth\" class=\"x-table-drag-width\" xDrag (draging)=\"dragWidth($event, column)\"></div>\r\n      </th>\r\n    </tr>\r\n  </ng-container>\r\n</thead>\r\n\r\n<ng-template #columnsTpl>\r\n  <tr\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  >\r\n    <th\r\n      *ngFor=\"let column of columns; trackBy: trackByItem\"\r\n      [class.x-table-sticky]=\"getSticky(column)\"\r\n      [style.min-height.px]=\"getRowHeight\"\r\n      [style.width.px]=\"column.width\"\r\n      [style.left.px]=\"column.left\"\r\n      [style.flex]=\"getFlex(column)\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n      <div *ngIf=\"column.dragWidth\" class=\"x-table-drag-width\" xDrag (draging)=\"dragWidth($event, column)\"></div>\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, doc, configService) {
+        super();
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.doc = doc;
+        this.configService = configService;
+        this.tbodyStyle = {};
+        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 > this.rowHeight ? this.rowHeight : this.itemSize;
+    }
+    ngOnChanges(simples) {
+        const { data, columns, activatedRow, mergeRule } = simples;
+        XIsChange(data, columns, activatedRow, mergeRule) && this.cdr.detectChanges();
+    }
+    ngOnInit() {
+        var _a;
+        removeNgTag(this.elementRef.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(window, '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.thead) {
+                    this.table.thead.nativeElement.scrollLeft = this.table.scrollLeft;
+                }
+                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 headHeight = ((_a = this.table.thead) === null || _a === void 0 ? void 0 : _a.nativeElement.clientHeight) || 0;
+            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 -
+                    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(row) {
+        this.activatedRow = row;
+        if (this.table.rowChecked) {
+            if (!Array.from(event.path).find((x) => x.localName == 'x-checkbox')) {
+                row[this.table.rowChecked.id] = !row[this.table.rowChecked.id];
+                this.table.bodyChecked(row[this.table.rowChecked.id], this.table.rowChecked);
+            }
+        }
+        this.activatedRowChange.emit(row);
+        this.cdr.detectChanges();
+    }
+    trackByItem(_index, item) {
+        return item.id;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTableBodyComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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.getSticky(column)\"\r\n        [style.left.px]=\"column.left\"\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 *ngIf=\"isEmpty\"></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(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  <tr\r\n    *ngFor=\"let row of data; index as i; 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(row)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: i }\"></ng-container>\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #rowTpl 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-sticky]=\"table.getSticky(column)\"\r\n      [style.left.px]=\"column.left\"\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        (ngModelChange)=\"table.bodyChecked($event, column)\"\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 *xOutlet=\"columnTpl[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n        <div [innerHTML]=\"row[column.id]\" [style.text-align]=\"column.textAlign\"></div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", components: [{ type: i2$1.XEmptyComponent, selector: "x-empty" }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: i2.XCheckboxComponent, selector: "x-checkbox" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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.getSticky(column)\"\r\n        [style.left.px]=\"column.left\"\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 *ngIf=\"isEmpty\"></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(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  <tr\r\n    *ngFor=\"let row of data; index as i; 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(row)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: i }\"></ng-container>\r\n  </tr>\r\n</ng-template>\r\n\r\n<ng-template #rowTpl 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-sticky]=\"table.getSticky(column)\"\r\n      [style.left.px]=\"column.left\"\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        (ngModelChange)=\"table.bodyChecked($event, column)\"\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 *xOutlet=\"columnTpl[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n        <div [innerHTML]=\"row[column.id]\" [style.text-align]=\"column.textAlign\"></div>\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: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { 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;
+    }
+    ngOnInit() {
+        removeNgTag(this.elementRef.nativeElement);
+    }
+    ngAfterViewInit() {
+        this.table.tfoot = this.tfoot;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XTableFootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTableFootComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableFootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTableFootComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTableFootPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tfoot></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.hasScrollY = false;
+        this.scrollYWidth = 0;
+        this.hasScrollX = false;
+        this.scrollXHeight = 0;
+        this.scrollLeft = 0;
+        this.scrollTop = 0;
+        this.dataIsFunc = false;
+        this.getting = false;
+        this.tableData = [];
+        this.checkedValues = {};
+        this.indeterminate = '$$indeterminate';
+        this._unSubject = new Subject();
+    }
+    get getScrollLeft() {
+        return this.scrollLeft > 0;
+    }
+    get getScrollTop() {
+        return this.scrollTop > 0;
+    }
+    ngOnInit() {
+        this.setClassMap();
+        this.setRowChecked();
+        this.setMerge();
+    }
+    ngOnChanges(simples) {
+        const { data, checkedRow, columns, activatedRow, manual } = simples;
+        XIsChange(data, checkedRow) && this.setData();
+        XIsChange(columns, activatedRow) && this.cdr.detectChanges();
+        XIsChange(manual) && this.setManual();
+    }
+    ngOnDestroy() {
+        this._unSubject.next();
+        this._unSubject.complete();
+    }
+    setClassMap() {
+        this.classMap = {
+            [`${XTablePrefix}-row-size-${this.rowSize}`]: !XIsEmpty(this.rowSize)
+        };
+        this.cdr.detectChanges();
+    }
+    getSticky(column) {
+        return Number(column.left) >= 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.setHeadCheckboxList();
+        }
+        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) => {
+            [this.tableData, this.total] = [x.list, x.total];
+            if (this.virtualBody) {
+                this.virtualBody.scrollToIndex(0);
+                this.virtualBody.checkViewportSize();
+            }
+            this.getting = false;
+            this.setChecked();
+            this.setHeadCheckboxList();
+            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);
+    }
+    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() {
+        let result = [];
+        if (XIsEmpty(this.tableData) || !this.checkedRow)
+            return;
+        for (let key in this.checkedRow) {
+            const arr = this.checkedRow[key];
+            for (let item of this.tableData) {
+                item[key] = arr.includes(item.id);
+                result = [...result, item];
+            }
+        }
+        if (result.length > 0)
+            this.tableData = [...result];
+        this.detectChanges();
+    }
+    setHeadCheckboxList() {
+        if (XIsEmpty(this.tableData) || !this.headCheckboxList)
+            return;
+        for (let column of this.headCheckboxList) {
+            this.setCheckedValues(column);
+        }
+    }
+    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) => {
+            x[column.id] = checked;
+        });
+        this.setCheckedValues(column);
+        this.detectChanges();
+    }
+    bodyChecked(_checked, column) {
+        this.setCheckedValues(column);
+        this.detectChanges();
+    }
+    setCheckedValues(column) {
+        const count = this.tableData.length;
+        const checkedLen = this.tableData.filter((x) => x[column.id]).length;
+        this.checkedValues[column.id] = count === checkedLen;
+        this.checkedValues[column.id + this.indeterminate] = checkedLen > 0 && checkedLen < count;
+    }
+    detectChanges() {
+        this.bodyChange && this.bodyChange();
+        this.headChange && this.headChange();
+        this.cdr.detectChanges();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XTableComponent, selector: "x-table", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], 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-scroll-left]=\"getScrollLeft\"\r\n  [class.x-table-scroll-top]=\"getScrollTop\"\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  <x-table-head\r\n    *ngIf=\"showHeader\"\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    [table]=\"this\"\r\n  ></x-table-head>\r\n  <x-table-body\r\n    [data]=\"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    [cellConfig]=\"cellConfig?.tbody\"\r\n    [(activatedRow)]=\"activatedRow\"\r\n    (activatedRowChange)=\"activatedRowChange.emit($event)\"\r\n    [table]=\"this\"\r\n  ></x-table-body>\r\n  <x-table-foot [table]=\"this\"></x-table-foot>\r\n</table>\r\n<x-pagination\r\n  #pagination\r\n  *ngIf=\"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]=\"hiddenBorder\"\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%;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{position:absolute;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:1}.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>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:1}.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>tfoot{display:flex;flex-direction:column;justify-content:center}.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>thead .x-table-sticky{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-scroll-left>tbody .x-table-sticky{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-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) 0}.x-table-row-size-big>thead>tr>th:first-child,.x-table-row-size-big>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-bordered>thead>tr>th,.x-table-row-size-big.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-cell-config>thead>tr>th,.x-table-row-size-big.x-table-cell-config>tbody tr>td{padding-left: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) 0}.x-table-row-size-large>thead>tr>th:first-child,.x-table-row-size-large>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-bordered>thead>tr>th,.x-table-row-size-large.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-cell-config>thead>tr>th,.x-table-row-size-large.x-table-cell-config>tbody tr>td{padding-left: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) 0}.x-table-row-size-medium>thead>tr>th:first-child,.x-table-row-size-medium>tbody tr>td:first-child{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-bordered>thead>tr>th,.x-table-row-size-medium.x-table-bordered>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-cell-config>thead>tr>th,.x-table-row-size-medium.x-table-cell-config>tbody tr>td{padding-left: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) 0}.x-table-row-size-small>thead>tr>th:first-child,.x-table-row-size-small>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-bordered>thead>tr>th,.x-table-row-size-small.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-cell-config>thead>tr>th,.x-table-row-size-small.x-table-cell-config>tbody tr>td{padding-left: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) 0}.x-table-row-size-mini>thead>tr>th:first-child,.x-table-row-size-mini>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-bordered>thead>tr>th,.x-table-row-size-mini.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-cell-config>thead>tr>th,.x-table-row-size-mini.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}x-table{width:100%}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}\n"], components: [{ type: i2$2.XLoadingComponent, selector: "x-loading, [x-loading]" }, { type: XTableHeadComponent, selector: "x-table-head", inputs: ["table"] }, { type: XTableBodyComponent, selector: "x-table-body", inputs: ["table"] }, { type: XTableFootComponent, selector: "x-table-foot", inputs: ["table"] }, { type: i6$1.XPaginationComponent, selector: "x-pagination" }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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-scroll-left]=\"getScrollLeft\"\r\n  [class.x-table-scroll-top]=\"getScrollTop\"\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  <x-table-head\r\n    *ngIf=\"showHeader\"\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    [table]=\"this\"\r\n  ></x-table-head>\r\n  <x-table-body\r\n    [data]=\"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    [cellConfig]=\"cellConfig?.tbody\"\r\n    [(activatedRow)]=\"activatedRow\"\r\n    (activatedRowChange)=\"activatedRowChange.emit($event)\"\r\n    [table]=\"this\"\r\n  ></x-table-body>\r\n  <x-table-foot [table]=\"this\"></x-table-foot>\r\n</table>\r\n<x-pagination\r\n  #pagination\r\n  *ngIf=\"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]=\"hiddenBorder\"\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%;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{position:absolute;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:1}.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>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:1}.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>tfoot{display:flex;flex-direction:column;justify-content:center}.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>thead .x-table-sticky{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-scroll-left>tbody .x-table-sticky{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-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) 0}.x-table-row-size-big>thead>tr>th:first-child,.x-table-row-size-big>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-bordered>thead>tr>th,.x-table-row-size-big.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-cell-config>thead>tr>th,.x-table-row-size-big.x-table-cell-config>tbody tr>td{padding-left: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) 0}.x-table-row-size-large>thead>tr>th:first-child,.x-table-row-size-large>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-bordered>thead>tr>th,.x-table-row-size-large.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-cell-config>thead>tr>th,.x-table-row-size-large.x-table-cell-config>tbody tr>td{padding-left: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) 0}.x-table-row-size-medium>thead>tr>th:first-child,.x-table-row-size-medium>tbody tr>td:first-child{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-bordered>thead>tr>th,.x-table-row-size-medium.x-table-bordered>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-cell-config>thead>tr>th,.x-table-row-size-medium.x-table-cell-config>tbody tr>td{padding-left: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) 0}.x-table-row-size-small>thead>tr>th:first-child,.x-table-row-size-small>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-bordered>thead>tr>th,.x-table-row-size-small.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-cell-config>thead>tr>th,.x-table-row-size-small.x-table-cell-config>tbody tr>td{padding-left: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) 0}.x-table-row-size-mini>thead>tr>th:first-child,.x-table-row-size-mini>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-bordered>thead>tr>th,.x-table-row-size-mini.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-cell-config>thead>tr>th,.x-table-row-size-mini.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}x-table{width:100%}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, propDecorators: { table: [{
+                type: ViewChild,
+                args: ['table']
+            }], pagination: [{
+                type: ViewChild,
+                args: ['pagination']
+            }] } });
+
+class XTableModule {
+}
+/** @nocollapse */ /** @nocollapse */ XTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ XTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTableModule, declarations: [XDragDirective,
+        XTableComponent,
+        XTableProperty,
+        XTableHeadComponent,
+        XTableHeadProperty,
+        XTableBodyComponent,
+        XTableBodyProperty,
+        XTableFootComponent,
+        XTableFootProperty], imports: [CommonModule,
+        FormsModule,
+        XPaginationModule,
+        XOutletModule,
+        XCheckboxModule,
+        XIconModule,
+        ScrollingModule,
+        XEmptyModule,
+        XLoadingModule], exports: [XTableComponent] });
+/** @nocollapse */ /** @nocollapse */ XTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTableModule, imports: [[
+            CommonModule,
+            FormsModule,
+            XPaginationModule,
+            XOutletModule,
+            XCheckboxModule,
+            XIconModule,
+            ScrollingModule,
+            XEmptyModule,
+            XLoadingModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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,
+                        ScrollingModule,
+                        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