@ng-nest/ui 11.2.9 → 11.2.13

package/bundles/ng-nest-ui-table.umd.js

@@ -230,10 +230,16 @@
                 r[k] = a[j];
         return r;
     }
-    function __spreadArray(to, from) {
-        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-            to[j] = from[i];
-        return to;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -420,7 +426,8 @@
         manual: [{ type: core.Input }],
         scroll: [{ type: core.Input }],
         manualChange: [{ type: core.Output }],
-        cellConfig: [{ type: core.Input }]
+        cellConfig: [{ type: core.Input }],
+        rowSize: [{ type: core.Input }]
     };
     __decorate([
         core$1.XWithConfig(X_CONFIG_NAME, 42),
@@ -468,6 +475,10 @@
         core$1.XInputBoolean(),
         __metadata("design:type", Object)
     ], XTableProperty.prototype, "manual", void 0);
+    __decorate([
+        core$1.XWithConfig(X_CONFIG_NAME, 'medium'),
+        __metadata("design:type", String)
+    ], XTableProperty.prototype, "rowSize", void 0);
     /**
      * Table Head
      * @selector x-table-head
@@ -645,11 +656,13 @@
     /**
      * Table Foot Property
      */
-    var XTableFootProperty = /** @class */ (function () {
+    var XTableFootProperty = /** @class */ (function (_super) {
+        __extends(XTableFootProperty, _super);
         function XTableFootProperty() {
+            return _super !== null && _super.apply(this, arguments) || this;
         }
         return XTableFootProperty;
-    }());
+    }(core$1.XProperty));
     XTableFootProperty.decorators = [
         { type: core.Component, args: [{ template: '' },] }
     ];
@@ -691,6 +704,7 @@
             configurable: true
         });
         XTableComponent.prototype.ngOnInit = function () {
+            this.setClassMap();
             this.setRowChecked();
             this.setMerge();
         };
@@ -703,6 +717,13 @@
             this._unSubject.next();
             this._unSubject.complete();
         };
+        XTableComponent.prototype.setClassMap = function () {
+            var _c;
+            this.classMap = (_c = {},
+                _c[XTablePrefix + "-row-size-" + this.rowSize] = !core$1.XIsEmpty(this.rowSize),
+                _c);
+            this.cdr.detectChanges();
+        };
         XTableComponent.prototype.getSticky = function (column) {
             return Number(column.left) >= 0;
         };
@@ -879,10 +900,10 @@
     XTableComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "" + XTablePrefix,
-                    template: "<table\r\n  #table\r\n  class=\"x-table\"\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    [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  ></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  ></x-table-body>\r\n  <x-table-foot></x-table-foot>\r\n</table>\r\n<x-pagination #pagination [(index)]=\"index\" [(size)]=\"size\" [(query)]=\"query\" [total]=\"total\" (indexChange)=\"change($event)\">\r\n</x-pagination>\r\n",
+                    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    [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 #pagination *ngIf=\"size\" [(index)]=\"index\" [(size)]=\"size\" [(query)]=\"query\" [total]=\"total\" (indexChange)=\"change($event)\">\r\n</x-pagination>\r\n",
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);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-a100);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-a100);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) 0}.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>thead>tr>th:first-child{padding-left:var(--x-font-size)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex;min-height:42px}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;background-color:var(--x-background-a100);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) 0}.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>td:first-child{padding-left:var(--x-font-size)}.x-table>tbody tr.x-table-activated>td{background-color:var(--x-background);color:var(--x-primary)}.x-table>tbody tr:hover>td{background-color:var(--x-background)}.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-down,.x-table-sort-icon.x-icon.x-table-icon-up{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>tbody .x-table-sticky,.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-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>tbody tr>td,.x-table-bordered>thead>tr>th{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:var(--x-font-size)}.x-table-bordered>tbody tr>td:last-child,.x-table-bordered>thead>tr>th:last-child{border-right:none}.x-table-cell-config>tbody tr,.x-table-cell-config>thead tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>tbody tr>td,.x-table-cell-config>thead>tr>th{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:var(--x-font-size)}.x-table-cell-config>tbody tr>td:last-child,.x-table-cell-config>thead>tr>th:last-child{border-right:none}x-table{width:100%}x-table .x-pagination{padding-top:var(--x-font-size)}"]
+                    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{color:var(--x-primary)}.x-table>tbody tr.x-table-activated>td,.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-down,.x-table-sort-icon.x-icon.x-table-icon-up{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>tbody .x-table-sticky,.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-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>tbody tr>td,.x-table-bordered>thead>tr>th{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>tbody tr>td:last-child,.x-table-bordered>thead>tr>th:last-child{border-right:none}.x-table-cell-config>tbody tr,.x-table-cell-config>thead tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>tbody tr>td,.x-table-cell-config>thead>tr>th{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>tbody tr>td:last-child,.x-table-cell-config>thead>tr>th:last-child{border-right:none}.x-table-row-size-big>tbody tr>td,.x-table-row-size-big>thead>tr>th{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.x-table-bordered>tbody tr>td,.x-table-row-size-big.x-table-bordered>thead>tr>th,.x-table-row-size-big.x-table-cell-config>tbody tr>td,.x-table-row-size-big.x-table-cell-config>thead>tr>th,.x-table-row-size-big>tbody tr>td:first-child,.x-table-row-size-big>thead>tr>th:first-child{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>tbody tr>td,.x-table-row-size-large>thead>tr>th{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.x-table-bordered>tbody tr>td,.x-table-row-size-large.x-table-bordered>thead>tr>th,.x-table-row-size-large.x-table-cell-config>tbody tr>td,.x-table-row-size-large.x-table-cell-config>thead>tr>th,.x-table-row-size-large>tbody tr>td:first-child,.x-table-row-size-large>thead>tr>th:first-child{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>tbody tr>td,.x-table-row-size-medium>thead>tr>th{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) 0}.x-table-row-size-medium.x-table-bordered>tbody tr>td,.x-table-row-size-medium.x-table-bordered>thead>tr>th,.x-table-row-size-medium.x-table-cell-config>tbody tr>td,.x-table-row-size-medium.x-table-cell-config>thead>tr>th,.x-table-row-size-medium>tbody tr>td:first-child,.x-table-row-size-medium>thead>tr>th:first-child{padding-left:var(--x-font-size)}.x-table-row-size-small>tbody tr>td,.x-table-row-size-small>thead>tr>th{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.x-table-bordered>tbody tr>td,.x-table-row-size-small.x-table-bordered>thead>tr>th,.x-table-row-size-small.x-table-cell-config>tbody tr>td,.x-table-row-size-small.x-table-cell-config>thead>tr>th,.x-table-row-size-small>tbody tr>td:first-child,.x-table-row-size-small>thead>tr>th:first-child{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>tbody tr>td,.x-table-row-size-mini>thead>tr>th{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.x-table-bordered>tbody tr>td,.x-table-row-size-mini.x-table-bordered>thead>tr>th,.x-table-row-size-mini.x-table-cell-config>tbody tr>td,.x-table-row-size-mini.x-table-cell-config>thead>tr>th,.x-table-row-size-mini>tbody tr>td:first-child,.x-table-row-size-mini>thead>tr>th:first-child{padding-left:calc(var(--x-font-size) / 2)}x-table{width:100%}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}"]
                 },] }
     ];
     /** @nocollapse */
@@ -899,9 +920,10 @@
 
     var XTableHeadComponent = /** @class */ (function (_super) {
         __extends(XTableHeadComponent, _super);
-        function XTableHeadComponent(table, renderer, elementRef, cdr, configService) {
+        function XTableHeadComponent(
+        // @Optional() @Host() public table: XTableComponent,
+        renderer, elementRef, cdr, configService) {
             var _this = _super.call(this) || this;
-            _this.table = table;
             _this.renderer = renderer;
             _this.elementRef = elementRef;
             _this.cdr = cdr;
@@ -911,6 +933,13 @@
             _this.theadStyle = {};
             return _this;
         }
+        Object.defineProperty(XTableHeadComponent.prototype, "getRowHeight", {
+            get: function () {
+                return this.rowHeight == 0 ? '' : this.rowHeight;
+            },
+            enumerable: false,
+            configurable: true
+        });
         XTableHeadComponent.prototype.ngOnChanges = function (simples) {
             core$1.XIsChange(simples.columns, simples.scrollYWidth, simples.scrollXWidth, simples.cellConfig) && this.cdr.detectChanges();
         };
@@ -927,6 +956,7 @@
             return Number(column.left) >= 0;
         };
         XTableHeadComponent.prototype.setStyle = function () {
+            var _b;
             var height = this.rowHeight == 0 ? '' : this.rowHeight;
             if (this.cellConfig && this.cellConfig.cells) {
                 var spt = this.cellConfig.cells.map(function (x) {
@@ -936,9 +966,11 @@
                 });
                 height = ((Math.max.apply(Math, __spread(spt)) - 1) * height);
             }
-            this.theadStyle = {
-                height: height + "px"
-            };
+            this.theadStyle = (_b = {
+                    height: height + "px"
+                },
+                _b['min-height'] = this.getRowHeight + "px",
+                _b);
         };
         XTableHeadComponent.prototype.onSort = function (column) {
             var _a;
@@ -984,27 +1016,28 @@
     XTableHeadComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "" + XTableHeadPrefix,
-                    template: "<thead #thead [ngStyle]=\"theadStyle\">\r\n  <ng-container *ngIf=\"cellConfig; else columnsTpl\">\r\n    <tr [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\">\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.widthDrag\"\r\n        [style.grid-area]=\"column.gridArea\"\r\n        [style.left.px]=\"column.left\"\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 [style.height.px]=\"rowHeight == 0 ? '' : rowHeight\" [style.padding-right.px]=\"scrollYWidth\" [style.width.px]=\"scrollXWidth\">\r\n    <th\r\n      *ngFor=\"let column of columns; trackBy: trackByItem\"\r\n      [class.x-table-sticky]=\"getSticky(column)\"\r\n      [style.width.px]=\"column.width\"\r\n      [style.left.px]=\"column.left\"\r\n      [style.flex]=\"column.width ? 'none' : column.flex\"\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",
+                    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.widthDrag\"\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]=\"column.width ? 'none' : column.flex\"\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",
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
     /** @nocollapse */
     XTableHeadComponent.ctorParameters = function () { return [
-        { type: XTableComponent, decorators: [{ type: core.Host }, { type: core.Optional }] },
         { type: core.Renderer2 },
         { type: core.ElementRef },
         { type: core.ChangeDetectorRef },
         { type: core$1.XConfigService }
     ]; };
     XTableHeadComponent.propDecorators = {
-        thead: [{ type: core.ViewChild, args: ['thead',] }]
+        thead: [{ type: core.ViewChild, args: ['thead',] }],
+        table: [{ type: core.Input }]
     };
 
     var XTableBodyComponent = /** @class */ (function (_super) {
         __extends(XTableBodyComponent, _super);
-        function XTableBodyComponent(table, renderer, elementRef, cdr, doc, configService) {
+        function XTableBodyComponent(
+        // @Optional() @Host() public table: XTableComponent,
+        renderer, elementRef, cdr, doc, configService) {
             var _this = _super.call(this) || this;
-            _this.table = table;
             _this.renderer = renderer;
             _this.elementRef = elementRef;
             _this.cdr = cdr;
@@ -1022,6 +1055,20 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(XTableBodyComponent.prototype, "getRowHeight", {
+            get: function () {
+                return this.rowHeight == 0 ? '' : this.rowHeight;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XTableBodyComponent.prototype, "getItemSize", {
+            get: function () {
+                return this.rowHeight !== 0 && this.itemSize > this.rowHeight ? this.rowHeight : this.itemSize;
+            },
+            enumerable: false,
+            configurable: true
+        });
         XTableBodyComponent.prototype.ngOnChanges = function (simples) {
             core$1.XIsChange(simples.data, simples.columns, simples.activatedRow, simples.mergeRule) && this.cdr.detectChanges();
         };
@@ -1127,6 +1174,10 @@
                 return index;
             return this.data.indexOf(item);
         };
+        XTableBodyComponent.prototype.getTitle = function (row, column) {
+            var it = row[column.id];
+            return it ? core$1.stripTags(it) : '';
+        };
         XTableBodyComponent.prototype.setAdaptionHeight = function () {
             var _a, _b, _c;
             if (this.adaptionHeight > 0) {
@@ -1167,14 +1218,13 @@
     XTableBodyComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "" + XTableBodyPrefix,
-                    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]=\"row[column.id] ? row[column.id] : ''\"\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]=\"itemSize\"\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]=\"rowHeight == 0 ? '' : rowHeight\"\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]=\"rowHeight == 0 ? '' : rowHeight\"\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]=\"column.width ? 'none' : column.flex\"\r\n      [title]=\"row[column.id] ? row[column.id] : ''\"\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 }\">\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",
+                    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]=\"column.width ? 'none' : column.flex\"\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 }\">\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",
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     /** @nocollapse */
     XTableBodyComponent.ctorParameters = function () { return [
-        { type: XTableComponent, decorators: [{ type: core.Host }, { type: core.Optional }] },
         { type: core.Renderer2 },
         { type: core.ElementRef },
         { type: core.ChangeDetectorRef },
@@ -1183,14 +1233,16 @@
     ]; };
     XTableBodyComponent.propDecorators = {
         tbody: [{ type: core.ViewChild, args: ['tbody',] }],
-        virtualBody: [{ type: core.ViewChild, args: ['virtualBody',] }]
+        virtualBody: [{ type: core.ViewChild, args: ['virtualBody',] }],
+        table: [{ type: core.Input }]
     };
 
     var XTableFootComponent = /** @class */ (function (_super) {
         __extends(XTableFootComponent, _super);
-        function XTableFootComponent(table, renderer, elementRef, cdr) {
+        function XTableFootComponent(
+        // @Optional() @Host() public table: XTableComponent,
+        renderer, elementRef, cdr) {
             var _this = _super.call(this) || this;
-            _this.table = table;
             _this.renderer = renderer;
             _this.elementRef = elementRef;
             _this.cdr = cdr;
@@ -1214,13 +1266,13 @@
     ];
     /** @nocollapse */
     XTableFootComponent.ctorParameters = function () { return [
-        { type: XTableComponent, decorators: [{ type: core.Host }, { type: core.Optional }] },
         { type: core.Renderer2 },
         { type: core.ElementRef },
         { type: core.ChangeDetectorRef }
     ]; };
     XTableFootComponent.propDecorators = {
-        tfoot: [{ type: core.ViewChild, args: ['tfoot',] }]
+        tfoot: [{ type: core.ViewChild, args: ['tfoot',] }],
+        table: [{ type: core.Input }]
     };
 
     var XDragDirective = /** @class */ (function () {