@delon/abc 12.2.3 → 12.4.2

package/bundles/table.umd.js

@@ -1,13 +1,13 @@
 /**
- * @license ng-alain(cipchk@qq.com) v12.2.3
+ * @license ng-alain(cipchk@qq.com) v12.4.2
  * (c) 2020 cipchk https://ng-alain.com/
  * License: MIT
  */
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser'), require('@delon/acl'), require('@delon/theme'), require('@delon/util/other'), require('@angular/common'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators'), require('@delon/util/format'), require('@delon/abc/xlsx'), require('@angular/router'), require('@delon/util/config'), require('@delon/util/decorator'), require('ng-zorro-antd/dropdown'), require('@angular/forms'), require('@delon/abc/let'), require('ng-zorro-antd/badge'), require('ng-zorro-antd/checkbox'), require('ng-zorro-antd/divider'), require('ng-zorro-antd/icon'), require('ng-zorro-antd/input'), require('ng-zorro-antd/menu'), require('ng-zorro-antd/popconfirm'), require('ng-zorro-antd/radio'), require('ng-zorro-antd/resizable'), require('ng-zorro-antd/table'), require('ng-zorro-antd/tag'), require('ng-zorro-antd/tooltip')) :
-    typeof define === 'function' && define.amd ? define('@delon/abc/st', ['exports', '@angular/core', '@angular/platform-browser', '@delon/acl', '@delon/theme', '@delon/util/other', '@angular/common', '@angular/common/http', 'rxjs', 'rxjs/operators', '@delon/util/format', '@delon/abc/xlsx', '@angular/router', '@delon/util/config', '@delon/util/decorator', 'ng-zorro-antd/dropdown', '@angular/forms', '@delon/abc/let', 'ng-zorro-antd/badge', 'ng-zorro-antd/checkbox', 'ng-zorro-antd/divider', 'ng-zorro-antd/icon', 'ng-zorro-antd/input', 'ng-zorro-antd/menu', 'ng-zorro-antd/popconfirm', 'ng-zorro-antd/radio', 'ng-zorro-antd/resizable', 'ng-zorro-antd/table', 'ng-zorro-antd/tag', 'ng-zorro-antd/tooltip'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.delon = global.delon || {}, global.delon.abc = global.delon.abc || {}, global.delon.abc.st = {}), global.ng.core, global.ng.platformBrowser, global.delon.acl, global.delon.theme, global.other, global.ng.common, global.ng.common.http, global.rxjs, global.rxjs.operators, global.format, global.delon.abc.xlsx, global.ng.router, global.config, global.decorator, global["ng-zorro-antd/dropdown"], global.ng.forms, global.delon.abc["let"], global["ng-zorro-antd/badge"], global["ng-zorro-antd/checkbox"], global["ng-zorro-antd/divider"], global["ng-zorro-antd/icon"], global["ng-zorro-antd/input"], global["ng-zorro-antd/menu"], global["ng-zorro-antd/popconfirm"], global["ng-zorro-antd/radio"], global.resizable, global["ng-zorro-antd/table"], global["ng-zorro-antd/tag"], global["ng-zorro-antd/tooltip"]));
-})(this, (function (exports, i0, platformBrowser, acl, theme, other, common, http, rxjs, operators, format, xlsx, router, config, decorator, dropdown, forms, _let, badge, checkbox, divider, icon, input, menu, popconfirm, radio, resizable, table, tag, tooltip) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser'), require('@delon/acl'), require('@delon/theme'), require('@delon/util/other'), require('@angular/common'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators'), require('@delon/util/format'), require('@delon/abc/xlsx'), require('@delon/util/config'), require('@delon/util/decorator'), require('ng-zorro-antd/dropdown'), require('@angular/forms'), require('@delon/abc/let'), require('ng-zorro-antd/badge'), require('ng-zorro-antd/checkbox'), require('ng-zorro-antd/date-picker'), require('ng-zorro-antd/divider'), require('ng-zorro-antd/icon'), require('ng-zorro-antd/input'), require('ng-zorro-antd/input-number'), require('ng-zorro-antd/menu'), require('ng-zorro-antd/popconfirm'), require('ng-zorro-antd/radio'), require('ng-zorro-antd/resizable'), require('ng-zorro-antd/table'), require('ng-zorro-antd/tag'), require('ng-zorro-antd/tooltip'), require('@angular/router')) :
+    typeof define === 'function' && define.amd ? define('@delon/abc/st', ['exports', '@angular/core', '@angular/platform-browser', '@delon/acl', '@delon/theme', '@delon/util/other', '@angular/common', '@angular/common/http', 'rxjs', 'rxjs/operators', '@delon/util/format', '@delon/abc/xlsx', '@delon/util/config', '@delon/util/decorator', 'ng-zorro-antd/dropdown', '@angular/forms', '@delon/abc/let', 'ng-zorro-antd/badge', 'ng-zorro-antd/checkbox', 'ng-zorro-antd/date-picker', 'ng-zorro-antd/divider', 'ng-zorro-antd/icon', 'ng-zorro-antd/input', 'ng-zorro-antd/input-number', 'ng-zorro-antd/menu', 'ng-zorro-antd/popconfirm', 'ng-zorro-antd/radio', 'ng-zorro-antd/resizable', 'ng-zorro-antd/table', 'ng-zorro-antd/tag', 'ng-zorro-antd/tooltip', '@angular/router'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.delon = global.delon || {}, global.delon.abc = global.delon.abc || {}, global.delon.abc.st = {}), global.ng.core, global.ng.platformBrowser, global.delon.acl, global.delon.theme, global.other, global.ng.common, global.ng.common.http, global.rxjs, global.rxjs.operators, global.format, global.delon.abc.xlsx, global.config, global.decorator, global["ng-zorro-antd/dropdown"], global.ng.forms, global.delon.abc["let"], global["ng-zorro-antd/badge"], global["ng-zorro-antd/checkbox"], global.datePicker, global["ng-zorro-antd/divider"], global["ng-zorro-antd/icon"], global["ng-zorro-antd/input"], global.inputNumber, global["ng-zorro-antd/menu"], global["ng-zorro-antd/popconfirm"], global["ng-zorro-antd/radio"], global.resizable, global["ng-zorro-antd/table"], global["ng-zorro-antd/tag"], global["ng-zorro-antd/tooltip"], global.ng.router));
+})(this, (function (exports, i0, platformBrowser, acl, theme, other, common, http, rxjs, operators, format, xlsx, config, decorator, dropdown, forms, _let, badge, checkbox, datePicker, divider, icon, input, inputNumber, menu, popconfirm, radio, resizable, table, tag, tooltip, router) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -567,14 +567,32 @@
             }
             var res = item.filter;
             res.type = res.type || 'default';
+            res.showOPArea = res.showOPArea !== false;
             var icon = 'filter';
             var iconTheme = 'fill';
-            if (res.type === 'keyword') {
-                if (res.menus == null || res.menus.length === 0) {
-                    res.menus = [{ value: '' }];
-                }
-                icon = 'search';
-                iconTheme = 'outline';
+            var fixMenus = true;
+            var value = undefined;
+            switch (res.type) {
+                case 'keyword':
+                    icon = 'search';
+                    iconTheme = 'outline';
+                    break;
+                case 'number':
+                    icon = 'search';
+                    iconTheme = 'outline';
+                    res.number = Object.assign({ step: 1, min: -Infinity, max: Infinity }, res.number);
+                    break;
+                case 'date':
+                    icon = 'calendar';
+                    iconTheme = 'outline';
+                    res.date = Object.assign({ range: false, mode: 'date', showToday: true, showNow: false }, res.date);
+                    break;
+                default:
+                    fixMenus = false;
+                    break;
+            }
+            if (fixMenus && (res.menus == null || res.menus.length === 0)) {
+                res.menus = [{ value: value }];
             }
             if (res.menus.length === 0) {
                 return null;
@@ -688,6 +706,9 @@
                     if (this.acl && item.acl && !this.acl.can(item.acl)) {
                         continue;
                     }
+                    if (Array.isArray(item.children) && item.children.length > 0) {
+                        item.children = this.cleanCond(item.children);
+                    }
                     res.push(item);
                 }
             }
@@ -1102,9 +1123,9 @@
                     }
                     return _this.get(result[i], c, i);
                 });
-                if (rowClassName) {
-                    result[i]._rowClassName = rowClassName(result[i], i);
-                }
+                result[i]._rowClassName = [rowClassName ? rowClassName(result[i], i) : null, result[i].className]
+                    .filter(function (w) { return !!w; })
+                    .join(' ');
             };
             for (var i = 0, len = result.length; i < len; i++) {
                 _loop_1(i, len);
@@ -1482,7 +1503,6 @@
             trigger: 'click',
             placement: 'top'
         },
-        rowClickTime: 200,
         btnIcon: {
             theme: 'outline',
             spin: false
@@ -1511,14 +1531,11 @@
     };
 
     var STComponent = /** @class */ (function () {
-        function STComponent(i18nSrv, cdr, router, el, exportSrv, modalHelper, drawerHelper, doc, columnSource, dataSource, delonI18n, configSrv, cms) {
+        function STComponent(i18nSrv, cdr, el, exportSrv, doc, columnSource, dataSource, delonI18n, configSrv, cms) {
             var _this = this;
             this.cdr = cdr;
-            this.router = router;
             this.el = el;
             this.exportSrv = exportSrv;
-            this.modalHelper = modalHelper;
-            this.drawerHelper = drawerHelper;
             this.doc = doc;
             this.columnSource = columnSource;
             this.dataSource = dataSource;
@@ -1526,7 +1543,6 @@
             this.cms = cms;
             this.destroy$ = new rxjs.Subject();
             this.totalTpl = "";
-            this.rowClickCount = 0;
             this.customWidthConfig = false;
             this._widthConfig = [];
             this.locale = {};
@@ -1550,7 +1566,6 @@
             this.showHeader = true;
             this.expandRowByClick = false;
             this.expandAccordion = false;
-            this.rowClickTime = 200;
             this.responsive = true;
             this.error = new i0.EventEmitter();
             this.change = new i0.EventEmitter();
@@ -1669,14 +1684,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(STComponent.prototype, "routerState", {
-            get: function () {
-                var _b = this, pi = _b.pi, ps = _b.ps, total = _b.total;
-                return { pi: pi, ps: ps, total: total };
-            },
-            enumerable: false,
-            configurable: true
-        });
         STComponent.prototype.setCog = function (cog) {
             var copyMultiSort = Object.assign({}, cog.multiSort);
             // Because multiSort.global will affect the result, it should be removed first, and multiSort will be operated again after processing.
@@ -1692,6 +1699,10 @@
             this.cdr.detectChanges();
             return this;
         };
+        STComponent.prototype.refreshData = function () {
+            this._data = __spreadArray([], __read(this._data));
+            return this.cd();
+        };
         STComponent.prototype.renderTotal = function (total, range) {
             return this.totalTpl
                 ? this.totalTpl.replace('{{total}}', total).replace('{{range[0]}}', range[0]).replace('{{range[1]}}', range[1])
@@ -1883,46 +1894,30 @@
             }
             this.changeEmit(type);
         };
-        STComponent.prototype._click = function (e, item, col) {
-            e.preventDefault();
-            e.stopPropagation();
-            var res = col.click(item, this);
-            if (typeof res === 'string') {
-                this.router.navigateByUrl(res, { state: this.routerState });
-            }
-            return false;
-        };
         STComponent.prototype.closeOtherExpand = function (item) {
             if (this.expandAccordion === false)
                 return;
             this._data.filter(function (i) { return i !== item; }).forEach(function (i) { return (i.expand = false); });
         };
-        STComponent.prototype._rowClick = function (e, item, index) {
-            var _this = this;
+        STComponent.prototype._rowClick = function (e, item, index, dbl) {
             var el = e.target;
             if (el.nodeName === 'INPUT')
                 return;
-            var _b = this, expand = _b.expand, expandRowByClick = _b.expandRowByClick, rowClickTime = _b.rowClickTime;
+            var _b = this, expand = _b.expand, expandRowByClick = _b.expandRowByClick;
             if (!!expand && item.showExpand !== false && expandRowByClick) {
                 item.expand = !item.expand;
                 this.closeOtherExpand(item);
                 this.changeEmit('expand', item);
                 return;
             }
-            ++this.rowClickCount;
-            if (this.rowClickCount !== 1)
-                return;
-            setTimeout(function () {
-                var data = { e: e, item: item, index: index };
-                if (_this.rowClickCount === 1) {
-                    _this._clickRowClassName(el, item, index);
-                    _this.changeEmit('click', data);
-                }
-                else {
-                    _this.changeEmit('dblClick', data);
-                }
-                _this.rowClickCount = 0;
-            }, rowClickTime);
+            var data = { e: e, item: item, index: index };
+            if (dbl) {
+                this.changeEmit('dblClick', data);
+            }
+            else {
+                this._clickRowClassName(el, item, index);
+                this.changeEmit('click', data);
+            }
         };
         STComponent.prototype._clickRowClassName = function (el, item, index) {
             var cr = this.clickRowClassName;
@@ -1978,7 +1973,7 @@
                 var text = "" + _this.dataSource.getNoIndex(i, c, idx);
                 i._values[c.__point] = { text: text, _text: text, org: idx, safeType: 'text' };
             }); });
-            return this.cd();
+            return this.refreshData();
         };
         /**
          * Sets the row value for the `index` in the table, like this:
@@ -2003,8 +1998,7 @@
                 this.resetColumns({ emitReload: options.emitReload });
                 return this;
             }
-            this.cdr.detectChanges();
-            return this;
+            return this.refreshData();
         };
         // #endregion
         // #region sort
@@ -2031,37 +2025,29 @@
         };
         // #endregion
         // #region filter
-        STComponent.prototype.handleFilter = function (col) {
+        STComponent.prototype._handleFilter = function (col, confirm) {
+            if (!confirm) {
+                this.columnSource.cleanFilter(col);
+            }
             // 过滤表示一种数据的变化应重置页码为 `1`
             this.pi = 1;
             this.columnSource.updateDefault(col.filter);
             this.loadPageData();
             this.changeEmit('filter', col);
         };
-        STComponent.prototype._filterConfirm = function (col) {
-            this.handleFilter(col);
-        };
-        STComponent.prototype._filterRadio = function (col, item, checked) {
-            col.filter.menus.forEach(function (i) { return (i.checked = false); });
-            item.checked = checked;
-        };
-        STComponent.prototype._filterClear = function (col) {
-            this.columnSource.cleanFilter(col);
-            this.handleFilter(col);
+        STComponent.prototype.handleFilterNotify = function (value) {
+            this.changeEmit('filterChange', value);
         };
         STComponent.prototype.clearFilter = function () {
             var _this = this;
             this._columns.filter(function (w) { return w.filter && w.filter.default === true; }).forEach(function (col) { return _this.columnSource.cleanFilter(col); });
             return this;
         };
-        STComponent.prototype._filterClick = function ($event) {
-            $event.stopPropagation();
-        };
         // #endregion
         // #region checkbox
         /** 清除所有 `checkbox` */
         STComponent.prototype.clearCheck = function () {
-            return this._checkAll(false);
+            return this.checkAll(false);
         };
         STComponent.prototype._refCheck = function () {
             var validData = this._data.filter(function (w) { return !w.disabled; });
@@ -2072,14 +2058,10 @@
             this._allCheckedDisabled = this._data.length === this._data.filter(function (w) { return w.disabled; }).length;
             return this.cd();
         };
-        STComponent.prototype._checkAll = function (checked) {
+        STComponent.prototype.checkAll = function (checked) {
             checked = typeof checked === 'undefined' ? this._allChecked : checked;
             this._data.filter(function (w) { return !w.disabled; }).forEach(function (i) { return (i.checked = checked); });
-            return this._refCheck()._checkNotify();
-        };
-        STComponent.prototype._checkSelection = function (i, value) {
-            i.checked = value;
-            return this._refCheck()._checkNotify();
+            return this._refCheck()._checkNotify().refreshData();
         };
         STComponent.prototype._rowSelection = function (row) {
             row.select(this._data);
@@ -2096,67 +2078,20 @@
         STComponent.prototype.clearRadio = function () {
             this._data.filter(function (w) { return w.checked; }).forEach(function (item) { return (item.checked = false); });
             this.changeEmit('radio', null);
-            return this;
-        };
-        STComponent.prototype._refRadio = function (checked, item) {
-            // if (item.disabled === true) return;
-            this._data.filter(function (w) { return !w.disabled; }).forEach(function (i) { return (i.checked = false); });
-            item.checked = checked;
-            this.changeEmit('radio', item);
-            return this;
+            return this.refreshData();
         };
         // #endregion
-        // #region buttons
-        STComponent.prototype._btnClick = function (record, btn, ev) {
-            var _b, _c;
-            var _this = this;
-            if (ev) {
-                ev.stopPropagation();
+        STComponent.prototype._handleTd = function (ev) {
+            switch (ev.type) {
+                case 'checkbox':
+                    this._refCheck()._checkNotify();
+                    break;
+                case 'radio':
+                    this.changeEmit('radio', ev.item);
+                    this.refreshData();
+                    break;
             }
-            if (btn.type === 'modal' || btn.type === 'static') {
-                var modal = btn.modal;
-                var obj = (_b = {}, _b[modal.paramsName] = record, _b);
-                this.modalHelper[btn.type === 'modal' ? 'create' : 'createStatic'](modal.component, Object.assign(Object.assign({}, obj), (modal.params && modal.params(record))), other.deepMergeKey({}, true, this.cog.modal, modal))
-                    .pipe(operators.filter(function (w) { return typeof w !== 'undefined'; }))
-                    .subscribe(function (res) { return _this.btnCallback(record, btn, res); });
-                return;
-            }
-            else if (btn.type === 'drawer') {
-                var drawer = btn.drawer;
-                var obj = (_c = {}, _c[drawer.paramsName] = record, _c);
-                this.drawerHelper
-                    .create(drawer.title, drawer.component, Object.assign(Object.assign({}, obj), (drawer.params && drawer.params(record))), other.deepMergeKey({}, true, this.cog.drawer, drawer))
-                    .pipe(operators.filter(function (w) { return typeof w !== 'undefined'; }))
-                    .subscribe(function (res) { return _this.btnCallback(record, btn, res); });
-                return;
-            }
-            else if (btn.type === 'link') {
-                var clickRes = this.btnCallback(record, btn);
-                if (typeof clickRes === 'string') {
-                    this.router.navigateByUrl(clickRes, { state: this.routerState });
-                }
-                return;
-            }
-            this.btnCallback(record, btn);
         };
-        STComponent.prototype.btnCallback = function (record, btn, modal) {
-            if (!btn.click)
-                return;
-            if (typeof btn.click === 'string') {
-                switch (btn.click) {
-                    case 'load':
-                        this.load();
-                        break;
-                    case 'reload':
-                        this.reload();
-                        break;
-                }
-            }
-            else {
-                return btn.click(record, modal, this);
-            }
-        };
-        // #endregion
         // #region export
         /**
          * 导出当前页，确保已经注册 `XlsxModule`
@@ -2311,7 +2246,7 @@
         { type: i0.Component, args: [{
                     selector: 'st',
                     exportAs: 'st',
-                    template: "<ng-template #btnTpl let-i let-btn=\"btn\">\n  <ng-container *ngIf=\"!btn.tooltip\">\n    <ng-template [ngTemplateOutlet]=\"btnItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, btn: btn }\"></ng-template>\n  </ng-container>\n  <span *ngIf=\"btn.tooltip\" nz-tooltip [nzTooltipTitle]=\"btn.tooltip\">\n    <ng-template [ngTemplateOutlet]=\"btnItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, btn: btn }\"></ng-template>\n  </span>\n</ng-template>\n<ng-template #btnItemTpl let-i let-btn=\"btn\">\n  <a\n    *ngIf=\"btn.pop\"\n    nz-popconfirm\n    [nzPopconfirmTitle]=\"btn.pop.title\"\n    [nzIcon]=\"btn.pop.icon\"\n    [nzCondition]=\"btn.pop.condition(i)\"\n    [nzCancelText]=\"btn.pop.cancelText\"\n    [nzOkText]=\"btn.pop.okText\"\n    [nzOkType]=\"btn.pop.okType\"\n    (nzOnConfirm)=\"_btnClick(i, btn)\"\n    class=\"st__btn-text\"\n    [ngClass]=\"btn.className\"\n    (click)=\"_stopPropagation($event)\"\n  >\n    <ng-template [ngTemplateOutlet]=\"btnTextTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, btn: btn }\"></ng-template>\n  </a>\n  <a *ngIf=\"!btn.pop\" (click)=\"_btnClick(i, btn, $event)\" class=\"st__btn-text\" [ngClass]=\"btn.className\">\n    <ng-template [ngTemplateOutlet]=\"btnTextTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, btn: btn }\"></ng-template>\n  </a>\n</ng-template>\n<ng-template #btnTextTpl let-i let-btn=\"btn\">\n  <ng-container *ngIf=\"btn.icon\">\n    <i\n      *ngIf=\"!btn.icon.iconfont\"\n      nz-icon\n      [nzType]=\"btn.icon.type\"\n      [nzTheme]=\"btn.icon.theme\"\n      [nzSpin]=\"btn.icon.spin\"\n      [nzTwotoneColor]=\"btn.icon.twoToneColor\"\n    ></i>\n    <i *ngIf=\"btn.icon.iconfont\" nz-icon [nzIconfont]=\"btn.icon.iconfont\"></i>\n  </ng-container>\n  <span [innerHTML]=\"btn._text\" [ngClass]=\"{ 'pl-xs': btn.icon }\"></span>\n</ng-template>\n<ng-template #titleTpl let-i>\n  <span [innerHTML]=\"i._text\"></span>\n  <small *ngIf=\"i.optional\" class=\"st__head-optional\" [innerHTML]=\"i.optional\"></small>\n  <i\n    *ngIf=\"i.optionalHelp\"\n    class=\"st__head-tip\"\n    nz-tooltip\n    [nzTooltipTitle]=\"i.optionalHelp\"\n    nz-icon\n    nzType=\"question-circle\"\n  ></i>\n</ng-template>\n<ng-template #chkAllTpl let-custom>\n  <label\n    nz-checkbox\n    class=\"st__checkall\"\n    [nzDisabled]=\"_allCheckedDisabled\"\n    [(ngModel)]=\"_allChecked\"\n    [nzIndeterminate]=\"_indeterminate\"\n    (ngModelChange)=\"_checkAll()\"\n    [class.ant-table-selection-select-all-custom]=\"custom\"\n  ></label>\n</ng-template>\n<nz-table\n  #table\n  [nzData]=\"_data\"\n  [(nzPageIndex)]=\"pi\"\n  (nzPageIndexChange)=\"_change('pi')\"\n  [(nzPageSize)]=\"ps\"\n  (nzPageSizeChange)=\"_change('ps')\"\n  [nzTotal]=\"total\"\n  [nzShowPagination]=\"_isPagination\"\n  [nzFrontPagination]=\"false\"\n  [nzBordered]=\"bordered\"\n  [nzSize]=\"size\"\n  [nzLoading]=\"_loading\"\n  [nzLoadingDelay]=\"loadingDelay\"\n  [nzLoadingIndicator]=\"loadingIndicator\"\n  [nzTitle]=\"header!\"\n  [nzFooter]=\"footer!\"\n  [nzScroll]=\"scroll\"\n  [nzVirtualItemSize]=\"virtualItemSize\"\n  [nzVirtualMaxBufferPx]=\"virtualMaxBufferPx\"\n  [nzVirtualMinBufferPx]=\"virtualMinBufferPx\"\n  [nzVirtualForTrackBy]=\"virtualForTrackBy\"\n  [nzNoResult]=\"noResult!\"\n  [nzPageSizeOptions]=\"page.pageSizes!\"\n  [nzShowQuickJumper]=\"page.showQuickJumper\"\n  [nzShowSizeChanger]=\"page.showSize\"\n  [nzPaginationPosition]=\"page.position!\"\n  [nzPaginationType]=\"page.type!\"\n  [nzItemRender]=\"page.itemRender!\"\n  [nzSimple]=\"page.simple\"\n  [nzShowTotal]=\"totalTpl\"\n  [nzWidthConfig]=\"_widthConfig\"\n  (contextmenu)=\"onContextmenu($event)\"\n>\n  <thead *ngIf=\"showHeader\">\n    <tr *ngFor=\"let row of _headers; let rowFirst = first\">\n      <th *ngIf=\"rowFirst && expand\" nzWidth=\"50px\" [rowSpan]=\"_headers.length\"></th>\n      <ng-container *ngFor=\"let h of row; let index = index; let last = last\">\n        <th\n          *let=\"h.column as _c\"\n          [colSpan]=\"h.colSpan\"\n          [rowSpan]=\"h.rowSpan\"\n          [nzWidth]=\"$any(_c).width\"\n          [nzLeft]=\"_c._left!\"\n          [nzRight]=\"_c._right!\"\n          [ngClass]=\"_c.className!\"\n          [attr.data-col]=\"_c.indexKey\"\n          [attr.data-col-index]=\"index\"\n          [nzShowSort]=\"_c._sort.enabled\"\n          [nzSortOrder]=\"$any(_c)._sort.default\"\n          (nzSortOrderChange)=\"sort(_c, index, $event)\"\n          [nzCustomFilter]=\"$any(_c).filter\"\n          nz-resizable\n          [nzDisabled]=\"last || $any(_c).resizable.disabled\"\n          [nzMaxWidth]=\"$any(_c).resizable.maxWidth\"\n          [nzMinWidth]=\"$any(_c).resizable.minWidth\"\n          [nzBounds]=\"$any(_c).resizable.bounds\"\n          [nzPreview]=\"$any(_c).resizable.preview\"\n          (nzResizeEnd)=\"colResize($event, _c)\"\n        >\n          <nz-resize-handle *ngIf=\"$any(!last && !$any(_c).resizable.disabled)\" nzDirection=\"right\">\n            <i></i>\n          </nz-resize-handle>\n          <ng-template\n            #renderTitle\n            [ngTemplateOutlet]=\"_c.__renderTitle!\"\n            [ngTemplateOutletContext]=\"{ $implicit: h.column, index: index }\"\n          ></ng-template>\n          <ng-container *ngIf=\"!_c.__renderTitle; else renderTitle\">\n            <ng-container [ngSwitch]=\"_c.type\">\n              <ng-container *ngSwitchCase=\"'checkbox'\">\n                <ng-container *ngIf=\"_c.selections!.length === 0\">\n                  <ng-template [ngTemplateOutlet]=\"chkAllTpl\" [ngTemplateOutletContext]=\"{ $implicit: false }\">\n                  </ng-template>\n                </ng-container>\n                <div *ngIf=\"_c.selections!.length > 0\" class=\"ant-table-selection\">\n                  <ng-template [ngTemplateOutlet]=\"chkAllTpl\" [ngTemplateOutletContext]=\"{ $implicit: true }\">\n                  </ng-template>\n                  <div\n                    *ngIf=\"_c.selections!.length\"\n                    nz-dropdown\n                    nzPlacement=\"bottomLeft\"\n                    [nzDropdownMenu]=\"selectionMenu\"\n                    class=\"ant-table-selection-down st__checkall-selection\"\n                  >\n                    <i nz-icon nzType=\"down\"></i>\n                  </div>\n                  <nz-dropdown-menu #selectionMenu=\"nzDropdownMenu\">\n                    <ul nz-menu class=\"ant-table-selection-menu\">\n                      <li\n                        nz-menu-item\n                        *ngFor=\"let rw of _c.selections\"\n                        (click)=\"_rowSelection(rw)\"\n                        [innerHTML]=\"rw.text\"\n                      ></li>\n                    </ul>\n                  </nz-dropdown-menu>\n                </div>\n              </ng-container>\n              <ng-container *ngSwitchDefault>\n                <ng-template\n                  [ngTemplateOutlet]=\"titleTpl\"\n                  [ngTemplateOutletContext]=\"{ $implicit: _c.title }\"\n                ></ng-template>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"_c.filter\">\n            <div\n              nz-th-extra\n              *let=\"_c.filter as _f\"\n              class=\"ant-table-filter-trigger-container st__filter\"\n              [class.ant-table-filter-trigger-container-open]=\"$any(_f).visible\"\n            >\n              <span\n                class=\"ant-table-filter-trigger\"\n                [class.active]=\"$any(_f).visible || _f.default\"\n                nz-dropdown\n                [nzDropdownMenu]=\"filterMenu\"\n                nzTrigger=\"click\"\n                [nzClickHide]=\"false\"\n                [(nzVisible)]=\"$any(_f).visible\"\n                nzOverlayClassName=\"st__filter-wrap\"\n                (click)=\"_filterClick($event)\"\n              >\n                <i nz-icon [nzType]=\"$any(_f).icon.type\" [nzTheme]=\"$any(_f).icon.theme\"></i>\n              </span>\n              <nz-dropdown-menu #filterMenu=\"nzDropdownMenu\">\n                <div class=\"ant-table-filter-dropdown\">\n                  <ng-container [ngSwitch]=\"_f.type\">\n                    <div *ngSwitchCase=\"'keyword'\" class=\"st__filter-keyword\">\n                      <input\n                        type=\"text\"\n                        nz-input\n                        [attr.placeholder]=\"$any(_f).menus[0].text\"\n                        [(ngModel)]=\"$any(_f).menus[0].value\"\n                      />\n                    </div>\n                    <ul *ngSwitchDefault nz-menu>\n                      <ng-container *ngIf=\"_f.multiple\">\n                        <li nz-menu-item *ngFor=\"let filter of _f.menus\">\n                          <label nz-checkbox [(ngModel)]=\"filter.checked\">{{ filter.text }}</label>\n                        </li>\n                      </ng-container>\n                      <ng-container *ngIf=\"!_f.multiple\">\n                        <li nz-menu-item *ngFor=\"let filter of _f.menus\">\n                          <label\n                            nz-radio\n                            [ngModel]=\"filter.checked\"\n                            (ngModelChange)=\"_filterRadio(h.column, filter, $event)\"\n                            >{{ filter.text }}</label\n                          >\n                        </li>\n                      </ng-container>\n                    </ul>\n                  </ng-container>\n                  <div class=\"ant-table-filter-dropdown-btns\">\n                    <a class=\"ant-table-filter-dropdown-link confirm\" (click)=\"$any(_f).visible = false\">\n                      <span (click)=\"_filterConfirm(h.column)\">{{ _f.confirmText || locale.filterConfirm }}</span>\n                    </a>\n                    <a class=\"ant-table-filter-dropdown-link clear\" (click)=\"$any(_f).visible = false\">\n                      <span (click)=\"_filterClear(h.column)\">{{ _f.clearText || locale.filterReset }}</span>\n                    </a>\n                  </div>\n                </div>\n              </nz-dropdown-menu>\n            </div>\n          </ng-container>\n        </th>\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody class=\"st__body\">\n    <ng-container *ngIf=\"!_loading\">\n      <ng-template\n        [ngTemplateOutlet]=\"bodyHeader!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _statistical }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #bodyTpl let-i let-index=\"index\">\n      <tr [attr.data-index]=\"index\" (click)=\"_rowClick($event, i, index)\" [ngClass]=\"i._rowClassName\">\n        <td\n          *ngIf=\"expand\"\n          [nzShowExpand]=\"expand && i.showExpand !== false\"\n          [nzExpand]=\"i.expand\"\n          (nzExpandChange)=\"_expandChange(i, $event)\"\n          (click)=\"_stopPropagation($event)\"\n          nzWidth=\"50px\"\n        ></td>\n        <td\n          *ngFor=\"let c of _columns; let cIdx = index\"\n          [nzLeft]=\"!!c._left\"\n          [nzRight]=\"!!c._right\"\n          [attr.data-col-index]=\"cIdx\"\n          [ngClass]=\"c._className!\"\n          [attr.colspan]=\"c.colSpan\"\n        >\n          <span *ngIf=\"responsive\" class=\"ant-table-rep__title\">\n            <ng-template [ngTemplateOutlet]=\"titleTpl\" [ngTemplateOutletContext]=\"{ $implicit: c.title }\"></ng-template>\n          </span>\n          <span>\n            <ng-template\n              #render\n              [ngTemplateOutlet]=\"c.__render!\"\n              [ngTemplateOutletContext]=\"{ $implicit: i, index: index, column: c }\"\n            ></ng-template>\n            <ng-container *ngIf=\"!c.__render; else render\">\n              <ng-container [ngSwitch]=\"c.type\">\n                <label\n                  *ngSwitchCase=\"'checkbox'\"\n                  nz-checkbox\n                  [nzDisabled]=\"i.disabled\"\n                  [ngModel]=\"i.checked\"\n                  (ngModelChange)=\"_checkSelection(i, $event)\"\n                ></label>\n                <label\n                  *ngSwitchCase=\"'radio'\"\n                  nz-radio\n                  [nzDisabled]=\"i.disabled\"\n                  [ngModel]=\"i.checked\"\n                  (ngModelChange)=\"_refRadio($event, i)\"\n                ></label>\n                <a\n                  *ngSwitchCase=\"'link'\"\n                  (click)=\"_click($event, i, c)\"\n                  [innerHTML]=\"i._values[cIdx]._text\"\n                  [attr.title]=\"i._values[cIdx].text\"\n                ></a>\n                <ng-container *ngIf=\"i._values[cIdx].text\">\n                  <nz-tag *ngSwitchCase=\"'tag'\" [nzColor]=\"i._values[cIdx].color\">\n                    <span [innerHTML]=\"i._values[cIdx]._text\"></span>\n                  </nz-tag>\n                  <nz-badge\n                    *ngSwitchCase=\"'badge'\"\n                    [nzStatus]=\"i._values[cIdx].color\"\n                    [nzText]=\"i._values[cIdx].text\"\n                  ></nz-badge>\n                </ng-container>\n                <ng-template *ngSwitchCase=\"'widget'\" st-widget-host [record]=\"i\" [column]=\"c\"></ng-template>\n                <ng-container *ngSwitchDefault>\n                  <span\n                    *ngIf=\"c.safeType !== 'text'\"\n                    [innerHTML]=\"i._values[cIdx]._text\"\n                    [attr.title]=\"c._isTruncate ? i._values[cIdx].text : null\"\n                  ></span>\n                  <span\n                    *ngIf=\"c.safeType === 'text'\"\n                    [innerText]=\"i._values[cIdx]._text\"\n                    [attr.title]=\"c._isTruncate ? i._values[cIdx].text : null\"\n                  ></span>\n                </ng-container>\n              </ng-container>\n              <ng-container *ngFor=\"let btn of i._values[cIdx].buttons; let last = last\">\n                <a\n                  *ngIf=\"btn.children!.length > 0\"\n                  nz-dropdown\n                  [nzDropdownMenu]=\"btnMenu\"\n                  nzOverlayClassName=\"st__btn-sub\"\n                >\n                  <span [innerHTML]=\"btn._text\"></span>\n                  <i nz-icon nzType=\"down\"></i>\n                </a>\n                <nz-dropdown-menu #btnMenu=\"nzDropdownMenu\">\n                  <ul nz-menu>\n                    <ng-container *ngFor=\"let subBtn of btn.children!\">\n                      <li *ngIf=\"subBtn.type !== 'divider'\" nz-menu-item [class.st__btn-disabled]=\"subBtn._disabled\">\n                        <ng-template\n                          [ngTemplateOutlet]=\"btnTpl\"\n                          [ngTemplateOutletContext]=\"{ $implicit: i, btn: subBtn }\"\n                        >\n                        </ng-template>\n                      </li>\n                      <li *ngIf=\"subBtn.type === 'divider'\" nz-menu-divider></li>\n                    </ng-container>\n                  </ul>\n                </nz-dropdown-menu>\n                <span *ngIf=\"btn.children!.length === 0\" [class.st__btn-disabled]=\"btn._disabled\">\n                  <ng-template [ngTemplateOutlet]=\"btnTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, btn: btn }\">\n                  </ng-template>\n                </span>\n                <nz-divider *ngIf=\"!last\" nzType=\"vertical\"></nz-divider>\n              </ng-container>\n            </ng-container>\n          </span>\n        </td>\n      </tr>\n      <tr [nzExpand]=\"i.expand\">\n        <ng-template\n          [ngTemplateOutlet]=\"expand\"\n          [ngTemplateOutletContext]=\"{ $implicit: i, index: index }\"\n        ></ng-template>\n      </tr>\n    </ng-template>\n    <ng-container *ngIf=\"!virtualScroll\">\n      <ng-container *ngFor=\"let i of _data; let index = index\">\n        <ng-template [ngTemplateOutlet]=\"bodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, index: index }\">\n        </ng-template>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"virtualScroll\">\n      <ng-template nz-virtual-scroll let-i let-index=\"index\">\n        <ng-template [ngTemplateOutlet]=\"bodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, index: index }\">\n        </ng-template>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"!_loading\">\n      <ng-template [ngTemplateOutlet]=\"body!\" [ngTemplateOutletContext]=\"{ $implicit: _statistical }\"></ng-template>\n    </ng-container>\n  </tbody>\n  <ng-template #totalTpl let-range=\"range\" let-total>{{ renderTotal(total, range) }}</ng-template>\n</nz-table>\n<nz-dropdown-menu #contextmenuTpl=\"nzDropdownMenu\">\n  <ul nz-menu class=\"st__contextmenu\">\n    <ng-container *ngFor=\"let i of contextmenuList\">\n      <li nz-menu-item *ngIf=\"i.children!.length === 0\" (click)=\"i.fn!(i)\" [innerHTML]=\"i.text\"></li>\n      <li nz-submenu *ngIf=\"i.children!.length > 0\" [nzTitle]=\"i.text\">\n        <ul>\n          <li nz-menu-item *ngFor=\"let ci of i.children\" (click)=\"ci.fn!(ci)\" [innerHTML]=\"ci.text\"></li>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n</nz-dropdown-menu>\n",
+                    template: "<ng-template #titleTpl let-i>\n  <span [innerHTML]=\"i._text\"></span>\n  <small *ngIf=\"i.optional\" class=\"st__head-optional\" [innerHTML]=\"i.optional\"></small>\n  <i\n    *ngIf=\"i.optionalHelp\"\n    class=\"st__head-tip\"\n    nz-tooltip\n    [nzTooltipTitle]=\"i.optionalHelp\"\n    nz-icon\n    nzType=\"question-circle\"\n  ></i>\n</ng-template>\n<ng-template #chkAllTpl let-custom>\n  <label\n    nz-checkbox\n    class=\"st__checkall\"\n    [nzDisabled]=\"_allCheckedDisabled\"\n    [(ngModel)]=\"_allChecked\"\n    [nzIndeterminate]=\"_indeterminate\"\n    (ngModelChange)=\"checkAll()\"\n    [class.ant-table-selection-select-all-custom]=\"custom\"\n  ></label>\n</ng-template>\n<nz-table\n  #table\n  [nzData]=\"_data\"\n  [(nzPageIndex)]=\"pi\"\n  (nzPageIndexChange)=\"_change('pi')\"\n  [(nzPageSize)]=\"ps\"\n  (nzPageSizeChange)=\"_change('ps')\"\n  [nzTotal]=\"total\"\n  [nzShowPagination]=\"_isPagination\"\n  [nzFrontPagination]=\"false\"\n  [nzBordered]=\"bordered\"\n  [nzSize]=\"size\"\n  [nzLoading]=\"_loading\"\n  [nzLoadingDelay]=\"loadingDelay\"\n  [nzLoadingIndicator]=\"loadingIndicator\"\n  [nzTitle]=\"header!\"\n  [nzFooter]=\"footer!\"\n  [nzScroll]=\"scroll\"\n  [nzVirtualItemSize]=\"virtualItemSize\"\n  [nzVirtualMaxBufferPx]=\"virtualMaxBufferPx\"\n  [nzVirtualMinBufferPx]=\"virtualMinBufferPx\"\n  [nzVirtualForTrackBy]=\"virtualForTrackBy\"\n  [nzNoResult]=\"noResult!\"\n  [nzPageSizeOptions]=\"page.pageSizes!\"\n  [nzShowQuickJumper]=\"page.showQuickJumper\"\n  [nzShowSizeChanger]=\"page.showSize\"\n  [nzPaginationPosition]=\"page.position!\"\n  [nzPaginationType]=\"page.type!\"\n  [nzItemRender]=\"page.itemRender!\"\n  [nzSimple]=\"page.simple\"\n  [nzShowTotal]=\"totalTpl\"\n  [nzWidthConfig]=\"_widthConfig\"\n  (contextmenu)=\"onContextmenu($event)\"\n>\n  <thead *ngIf=\"showHeader\">\n    <tr *ngFor=\"let row of _headers; let rowFirst = first\">\n      <th *ngIf=\"rowFirst && expand\" nzWidth=\"50px\" [rowSpan]=\"_headers.length\"></th>\n      <ng-container *ngFor=\"let h of row; let index = index; let last = last\">\n        <th\n          *let=\"h.column as _c\"\n          [colSpan]=\"h.colSpan\"\n          [rowSpan]=\"h.rowSpan\"\n          [nzWidth]=\"$any(_c).width\"\n          [nzLeft]=\"_c._left!\"\n          [nzRight]=\"_c._right!\"\n          [ngClass]=\"_c.className!\"\n          [attr.data-col]=\"_c.indexKey\"\n          [attr.data-col-index]=\"index\"\n          [nzShowSort]=\"_c._sort.enabled\"\n          [nzSortOrder]=\"$any(_c)._sort.default\"\n          (nzSortOrderChange)=\"sort(_c, index, $event)\"\n          [nzCustomFilter]=\"$any(_c).filter\"\n          nz-resizable\n          [nzDisabled]=\"last || $any(_c).resizable.disabled\"\n          [nzMaxWidth]=\"$any(_c).resizable.maxWidth\"\n          [nzMinWidth]=\"$any(_c).resizable.minWidth\"\n          [nzBounds]=\"$any(_c).resizable.bounds\"\n          [nzPreview]=\"$any(_c).resizable.preview\"\n          (nzResizeEnd)=\"colResize($event, _c)\"\n        >\n          <nz-resize-handle *ngIf=\"$any(!last && !$any(_c).resizable.disabled)\" nzDirection=\"right\">\n            <i></i>\n          </nz-resize-handle>\n          <ng-template\n            #renderTitle\n            [ngTemplateOutlet]=\"_c.__renderTitle!\"\n            [ngTemplateOutletContext]=\"{ $implicit: h.column, index: index }\"\n          ></ng-template>\n          <ng-container *ngIf=\"!_c.__renderTitle; else renderTitle\">\n            <ng-container [ngSwitch]=\"_c.type\">\n              <ng-container *ngSwitchCase=\"'checkbox'\">\n                <ng-container *ngIf=\"_c.selections!.length === 0\">\n                  <ng-template [ngTemplateOutlet]=\"chkAllTpl\" [ngTemplateOutletContext]=\"{ $implicit: false }\">\n                  </ng-template>\n                </ng-container>\n                <div *ngIf=\"_c.selections!.length > 0\" class=\"ant-table-selection\">\n                  <ng-template [ngTemplateOutlet]=\"chkAllTpl\" [ngTemplateOutletContext]=\"{ $implicit: true }\">\n                  </ng-template>\n                  <div *ngIf=\"_c.selections!.length\" class=\"ant-table-selection-extra\">\n                    <div\n                      nz-dropdown\n                      nzPlacement=\"bottomLeft\"\n                      [nzDropdownMenu]=\"selectionMenu\"\n                      class=\"ant-table-selection-down st__checkall-selection\"\n                    >\n                      <i nz-icon nzType=\"down\"></i>\n                    </div>\n                  </div>\n                  <nz-dropdown-menu #selectionMenu=\"nzDropdownMenu\">\n                    <ul nz-menu class=\"ant-table-selection-menu\">\n                      <li\n                        nz-menu-item\n                        *ngFor=\"let rw of _c.selections\"\n                        (click)=\"_rowSelection(rw)\"\n                        [innerHTML]=\"rw.text\"\n                      ></li>\n                    </ul>\n                  </nz-dropdown-menu>\n                </div>\n              </ng-container>\n              <ng-container *ngSwitchDefault>\n                <ng-template\n                  [ngTemplateOutlet]=\"titleTpl\"\n                  [ngTemplateOutletContext]=\"{ $implicit: _c.title }\"\n                ></ng-template>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"_c.filter\">\n            <st-filter\n              nz-th-extra\n              [col]=\"h.column\"\n              [f]=\"_c.filter\"\n              [locale]=\"locale\"\n              (n)=\"handleFilterNotify($event)\"\n              (handle)=\"_handleFilter(_c, $event)\"\n            ></st-filter>\n          </ng-container>\n        </th>\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody class=\"st__body\">\n    <ng-container *ngIf=\"!_loading\">\n      <ng-template\n        [ngTemplateOutlet]=\"bodyHeader!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _statistical }\"\n      ></ng-template>\n    </ng-container>\n    <ng-template #bodyTpl let-i let-index=\"index\">\n      <tr\n        [attr.data-index]=\"index\"\n        (click)=\"_rowClick($event, i, index, false)\"\n        (dblclick)=\"_rowClick($event, i, index, true)\"\n        [ngClass]=\"i._rowClassName\"\n      >\n        <td\n          *ngIf=\"expand\"\n          [nzShowExpand]=\"expand && i.showExpand !== false\"\n          [nzExpand]=\"i.expand\"\n          (nzExpandChange)=\"_expandChange(i, $event)\"\n          (click)=\"_stopPropagation($event)\"\n          nzWidth=\"50px\"\n        ></td>\n        <td\n          *ngFor=\"let c of _columns; let cIdx = index\"\n          [nzLeft]=\"!!c._left\"\n          [nzRight]=\"!!c._right\"\n          [attr.data-col-index]=\"cIdx\"\n          [ngClass]=\"c._className!\"\n          [attr.colspan]=\"c.colSpan\"\n        >\n          <span *ngIf=\"responsive\" class=\"ant-table-rep__title\">\n            <ng-template [ngTemplateOutlet]=\"titleTpl\" [ngTemplateOutletContext]=\"{ $implicit: c.title }\"></ng-template>\n          </span>\n          <st-td [data]=\"_data\" [i]=\"i\" [index]=\"index\" [c]=\"c\" [cIdx]=\"cIdx\" (n)=\"_handleTd($event)\"></st-td>\n        </td>\n      </tr>\n      <tr [nzExpand]=\"i.expand\">\n        <ng-template\n          [ngTemplateOutlet]=\"expand\"\n          [ngTemplateOutletContext]=\"{ $implicit: i, index: index }\"\n        ></ng-template>\n      </tr>\n    </ng-template>\n    <ng-container *ngIf=\"!virtualScroll\">\n      <ng-container *ngFor=\"let i of _data; let index = index\">\n        <ng-template [ngTemplateOutlet]=\"bodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, index: index }\">\n        </ng-template>\n      </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"virtualScroll\">\n      <ng-template nz-virtual-scroll let-i let-index=\"index\">\n        <ng-template [ngTemplateOutlet]=\"bodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: i, index: index }\">\n        </ng-template>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"!_loading\">\n      <ng-template [ngTemplateOutlet]=\"body!\" [ngTemplateOutletContext]=\"{ $implicit: _statistical }\"></ng-template>\n    </ng-container>\n  </tbody>\n  <ng-template #totalTpl let-range=\"range\" let-total>{{ renderTotal(total, range) }}</ng-template>\n</nz-table>\n<nz-dropdown-menu #contextmenuTpl=\"nzDropdownMenu\">\n  <ul nz-menu class=\"st__contextmenu\">\n    <ng-container *ngFor=\"let i of contextmenuList\">\n      <li nz-menu-item *ngIf=\"i.children!.length === 0\" (click)=\"i.fn!(i)\" [innerHTML]=\"i.text\"></li>\n      <li nz-submenu *ngIf=\"i.children!.length > 0\" [nzTitle]=\"i.text\">\n        <ul>\n          <li nz-menu-item *ngFor=\"let ci of i.children\" (click)=\"ci.fn!(ci)\" [innerHTML]=\"ci.text\"></li>\n        </ul>\n      </li>\n    </ng-container>\n  </ul>\n</nz-dropdown-menu>\n",
                     providers: [STDataSource, STRowSource, STColumnSource, STExport, theme.DatePipe, theme.YNPipe, common.DecimalPipe],
                     host: {
                         '[class.st]': "true",
@@ -2329,11 +2264,8 @@
     STComponent.ctorParameters = function () { return [
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [theme.ALAIN_I18N_TOKEN,] }] },
         { type: i0.ChangeDetectorRef },
-        { type: router.Router },
         { type: i0.ElementRef },
         { type: STExport },
-        { type: theme.ModalHelper },
-        { type: theme.DrawerHelper },
         { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
         { type: STColumnSource },
         { type: STDataSource },
@@ -2375,7 +2307,6 @@
         expandAccordion: [{ type: i0.Input }],
         expand: [{ type: i0.Input }],
         noResult: [{ type: i0.Input }],
-        rowClickTime: [{ type: i0.Input }],
         responsive: [{ type: i0.Input }],
         responsiveHideHeaderFooter: [{ type: i0.Input }],
         error: [{ type: i0.Output }],
@@ -2411,9 +2342,6 @@
     __decorate([
         decorator.InputBoolean()
     ], STComponent.prototype, "expandAccordion", void 0);
-    __decorate([
-        decorator.InputNumber()
-    ], STComponent.prototype, "rowClickTime", void 0);
     __decorate([
         decorator.InputBoolean()
     ], STComponent.prototype, "responsive", void 0);
@@ -2433,6 +2361,178 @@
         decorator.InputNumber()
     ], STComponent.prototype, "virtualMinBufferPx", void 0);
 
+    var STFilterComponent = /** @class */ (function () {
+        function STFilterComponent() {
+            this.visible = false;
+            this.locale = {};
+            this.n = new i0.EventEmitter();
+            this.handle = new i0.EventEmitter();
+        }
+        Object.defineProperty(STFilterComponent.prototype, "icon", {
+            get: function () {
+                return this.f.icon;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        STFilterComponent.prototype.show = function ($event) {
+            $event.stopPropagation();
+        };
+        STFilterComponent.prototype.checkboxChange = function () {
+            var _a;
+            this.n.emit((_a = this.f.menus) === null || _a === void 0 ? void 0 : _a.filter(function (w) { return w.checked; }));
+        };
+        STFilterComponent.prototype.radioChange = function (item) {
+            this.f.menus.forEach(function (i) { return (i.checked = false); });
+            item.checked = !item.checked;
+            this.n.emit(item);
+        };
+        STFilterComponent.prototype.confirm = function () {
+            this.handle.emit(true);
+        };
+        STFilterComponent.prototype.reset = function () {
+            this.handle.emit(false);
+        };
+        return STFilterComponent;
+    }());
+    STFilterComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'st-filter',
+                    template: "\n    <span\n      class=\"ant-table-filter-trigger\"\n      [class.active]=\"visible || f.default\"\n      nz-dropdown\n      [nzDropdownMenu]=\"filterMenu\"\n      nzTrigger=\"click\"\n      [nzClickHide]=\"false\"\n      [(nzVisible)]=\"visible\"\n      nzOverlayClassName=\"st__filter-wrap\"\n      (click)=\"show($event)\"\n    >\n      <i nz-icon [nzType]=\"icon.type\" [nzTheme]=\"icon.theme!\"></i>\n    </span>\n    <nz-dropdown-menu #filterMenu=\"nzDropdownMenu\">\n      <div class=\"ant-table-filter-dropdown\">\n        <ng-container [ngSwitch]=\"f.type\">\n          <div *ngSwitchCase=\"'keyword'\" class=\"st__filter-keyword\">\n            <input\n              type=\"text\"\n              nz-input\n              [attr.placeholder]=\"f.placeholder\"\n              [(ngModel)]=\"f.menus![0]!.value\"\n              (ngModelChange)=\"n.emit($event)\"\n              (keyup.enter)=\"confirm()\"\n            />\n          </div>\n          <div *ngSwitchCase=\"'number'\" class=\"p-sm st__filter-number\">\n            <nz-input-number\n              [(ngModel)]=\"f.menus![0]!.value\"\n              (ngModelChange)=\"n.emit($event)\"\n              [nzMin]=\"f.number!.min!\"\n              [nzMax]=\"f.number!.max!\"\n              [nzStep]=\"f.number!.step!\"\n              [nzPrecision]=\"f.number!.precision\"\n              [nzPlaceHolder]=\"f.placeholder!\"\n              class=\"width-100\"\n            ></nz-input-number>\n          </div>\n          <div *ngSwitchCase=\"'date'\" class=\"p-sm st__filter-date\">\n            <nz-date-picker\n              *ngIf=\"!f.date!.range\"\n              nzInline\n              [nzMode]=\"f.date!.mode\"\n              [(ngModel)]=\"f.menus![0]!.value\"\n              (ngModelChange)=\"n.emit($event)\"\n              [nzShowNow]=\"f.date!.showNow\"\n              [nzShowToday]=\"f.date!.showToday\"\n              [nzDisabledDate]=\"f.date!.disabledDate\"\n              [nzDisabledTime]=\"f.date!.disabledTime\"\n            ></nz-date-picker>\n            <nz-range-picker\n              *ngIf=\"f.date!.range\"\n              nzInline\n              [nzMode]=\"f.date!.mode\"\n              [(ngModel)]=\"f.menus![0]!.value\"\n              (ngModelChange)=\"n.emit($event)\"\n              [nzShowNow]=\"f.date!.showNow\"\n              [nzShowToday]=\"f.date!.showToday\"\n              [nzDisabledDate]=\"f.date!.disabledDate\"\n              [nzDisabledTime]=\"f.date!.disabledTime\"\n            ></nz-range-picker>\n          </div>\n          <div *ngSwitchCase=\"'time'\" class=\"p-sm st__filter-time\"> </div>\n          <div *ngSwitchCase=\"'custom'\" class=\"st__filter-custom\">\n            <ng-template\n              [ngTemplateOutlet]=\"f.custom!\"\n              [ngTemplateOutletContext]=\"{ $implicit: f, col: col }\"\n            ></ng-template>\n          </div>\n          <ul *ngSwitchDefault nz-menu>\n            <ng-container *ngIf=\"f.multiple\">\n              <li nz-menu-item *ngFor=\"let filter of f.menus\">\n                <label nz-checkbox [(ngModel)]=\"filter.checked\" (ngModelChange)=\"checkboxChange()\">\n                  {{ filter.text }}\n                </label>\n              </li>\n            </ng-container>\n            <ng-container *ngIf=\"!f.multiple\">\n              <li nz-menu-item *ngFor=\"let filter of f.menus\">\n                <label nz-radio [ngModel]=\"filter.checked\" (ngModelChange)=\"radioChange(filter)\">\n                  {{ filter.text }}\n                </label>\n              </li>\n            </ng-container>\n          </ul>\n        </ng-container>\n        <div *ngIf=\"f.showOPArea\" class=\"ant-table-filter-dropdown-btns\">\n          <a class=\"ant-table-filter-dropdown-link confirm\" (click)=\"visible = false\">\n            <span (click)=\"confirm()\">{{ f.confirmText || locale.filterConfirm }}</span>\n          </a>\n          <a class=\"ant-table-filter-dropdown-link clear\" (click)=\"visible = false\">\n            <span (click)=\"reset()\">{{ f.clearText || locale.filterReset }}</span>\n          </a>\n        </div>\n      </div>\n    </nz-dropdown-menu>\n  ",
+                    host: {
+                        '[class.ant-table-filter-trigger-container]': "true",
+                        '[class.st__filter]': "true",
+                        '[class.ant-table-filter-trigger-container-open]': "visible"
+                    },
+                    preserveWhitespaces: false,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    STFilterComponent.propDecorators = {
+        col: [{ type: i0.Input }],
+        locale: [{ type: i0.Input }],
+        f: [{ type: i0.Input }],
+        n: [{ type: i0.Output }],
+        handle: [{ type: i0.Output }]
+    };
+
+    var STTdComponent = /** @class */ (function () {
+        function STTdComponent(stComp, router, modalHelper, drawerHelper) {
+            this.stComp = stComp;
+            this.router = router;
+            this.modalHelper = modalHelper;
+            this.drawerHelper = drawerHelper;
+            this.n = new i0.EventEmitter();
+        }
+        Object.defineProperty(STTdComponent.prototype, "routerState", {
+            get: function () {
+                var _a = this.stComp, pi = _a.pi, ps = _a.ps, total = _a.total;
+                return { pi: pi, ps: ps, total: total };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        STTdComponent.prototype.report = function (type) {
+            this.n.emit({ type: type, item: this.i, col: this.c });
+        };
+        STTdComponent.prototype._checkbox = function (value) {
+            this.i.checked = value;
+            this.report('checkbox');
+        };
+        STTdComponent.prototype._radio = function () {
+            this.data.filter(function (w) { return !w.disabled; }).forEach(function (i) { return (i.checked = false); });
+            this.i.checked = true;
+            this.report('radio');
+        };
+        STTdComponent.prototype._link = function (e) {
+            this._stopPropagation(e);
+            var res = this.c.click(this.i, this.stComp);
+            if (typeof res === 'string') {
+                this.router.navigateByUrl(res, { state: this.routerState });
+            }
+            return false;
+        };
+        STTdComponent.prototype._stopPropagation = function (ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        };
+        STTdComponent.prototype._btn = function (btn, ev) {
+            var _a, _b;
+            var _this = this;
+            if (ev) {
+                ev.stopPropagation();
+            }
+            var record = this.i;
+            if (btn.type === 'modal' || btn.type === 'static') {
+                var modal = btn.modal;
+                var obj = (_a = {}, _a[modal.paramsName] = record, _a);
+                this.modalHelper[btn.type === 'modal' ? 'create' : 'createStatic'](modal.component, Object.assign(Object.assign({}, obj), (modal.params && modal.params(record))), other.deepMergeKey({}, true, this.stComp['cog'].modal, modal))
+                    .pipe(operators.filter(function (w) { return typeof w !== 'undefined'; }))
+                    .subscribe(function (res) { return _this.btnCallback(record, btn, res); });
+                return;
+            }
+            else if (btn.type === 'drawer') {
+                var drawer = btn.drawer;
+                var obj = (_b = {}, _b[drawer.paramsName] = record, _b);
+                this.drawerHelper
+                    .create(drawer.title, drawer.component, Object.assign(Object.assign({}, obj), (drawer.params && drawer.params(record))), other.deepMergeKey({}, true, this.stComp['cog'].drawer, drawer))
+                    .pipe(operators.filter(function (w) { return typeof w !== 'undefined'; }))
+                    .subscribe(function (res) { return _this.btnCallback(record, btn, res); });
+                return;
+            }
+            else if (btn.type === 'link') {
+                var clickRes = this.btnCallback(record, btn);
+                if (typeof clickRes === 'string') {
+                    this.router.navigateByUrl(clickRes, { state: this.routerState });
+                }
+                return;
+            }
+            this.btnCallback(record, btn);
+        };
+        STTdComponent.prototype.btnCallback = function (record, btn, modal) {
+            if (!btn.click)
+                return;
+            if (typeof btn.click === 'string') {
+                switch (btn.click) {
+                    case 'load':
+                        this.stComp.load();
+                        break;
+                    case 'reload':
+                        this.stComp.reload();
+                        break;
+                }
+            }
+            else {
+                return btn.click(record, modal, this.stComp);
+            }
+        };
+        return STTdComponent;
+    }());
+    STTdComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'st-td',
+                    template: "\n    <ng-template #btnTpl let-i>\n      <ng-container *ngIf=\"!i.tooltip\">\n        <ng-template [ngTemplateOutlet]=\"btnItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: i }\"></ng-template>\n      </ng-container>\n      <span *ngIf=\"i.tooltip\" nz-tooltip [nzTooltipTitle]=\"i.tooltip\">\n        <ng-template [ngTemplateOutlet]=\"btnItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: i }\"></ng-template>\n      </span>\n    </ng-template>\n    <ng-template #btnItemTpl let-i>\n      <a\n        *ngIf=\"i.pop\"\n        nz-popconfirm\n        [nzPopconfirmTitle]=\"i.pop.title\"\n        [nzIcon]=\"i.pop.icon\"\n        [nzCondition]=\"i.pop.condition(i)\"\n        [nzCancelText]=\"i.pop.cancelText\"\n        [nzOkText]=\"i.pop.okText\"\n        [nzOkType]=\"i.pop.okType\"\n        (nzOnConfirm)=\"_btn(i)\"\n        class=\"st__btn-text\"\n        [ngClass]=\"i.className\"\n        (click)=\"_stopPropagation($event)\"\n      >\n        <ng-template [ngTemplateOutlet]=\"btnTextTpl\" [ngTemplateOutletContext]=\"{ $implicit: i }\"></ng-template>\n      </a>\n      <a *ngIf=\"!i.pop\" (click)=\"_btn(i, $event)\" class=\"st__btn-text\" [ngClass]=\"i.className\">\n        <ng-template [ngTemplateOutlet]=\"btnTextTpl\" [ngTemplateOutletContext]=\"{ $implicit: i }\"></ng-template>\n      </a>\n    </ng-template>\n    <ng-template #btnTextTpl let-i>\n      <ng-container *ngIf=\"i.icon\">\n        <i\n          *ngIf=\"!i.icon.iconfont\"\n          nz-icon\n          [nzType]=\"i.icon.type\"\n          [nzTheme]=\"i.icon.theme\"\n          [nzSpin]=\"i.icon.spin\"\n          [nzTwotoneColor]=\"i.icon.twoToneColor\"\n        ></i>\n        <i *ngIf=\"i.icon.iconfont\" nz-icon [nzIconfont]=\"i.icon.iconfont\"></i>\n      </ng-container>\n      <span [innerHTML]=\"i._text\" [ngClass]=\"{ 'pl-xs': i.icon }\"></span>\n    </ng-template>\n    <ng-template\n      #render\n      [ngTemplateOutlet]=\"c.__render!\"\n      [ngTemplateOutletContext]=\"{ $implicit: i, index: index, column: c }\"\n    ></ng-template>\n    <ng-container *ngIf=\"!c.__render; else render\">\n      <ng-container [ngSwitch]=\"c.type\">\n        <label\n          *ngSwitchCase=\"'checkbox'\"\n          nz-checkbox\n          [nzDisabled]=\"i.disabled\"\n          [ngModel]=\"i.checked\"\n          (ngModelChange)=\"_checkbox($event)\"\n        ></label>\n        <label\n          *ngSwitchCase=\"'radio'\"\n          nz-radio\n          [nzDisabled]=\"i.disabled\"\n          [ngModel]=\"i.checked\"\n          (ngModelChange)=\"_radio()\"\n        ></label>\n        <a\n          *ngSwitchCase=\"'link'\"\n          (click)=\"_link($event)\"\n          [innerHTML]=\"i._values[cIdx]._text\"\n          [attr.title]=\"i._values[cIdx].text\"\n        ></a>\n        <ng-container *ngIf=\"i._values[cIdx].text\">\n          <nz-tag *ngSwitchCase=\"'tag'\" [nzColor]=\"i._values[cIdx].color\">\n            <span [innerHTML]=\"i._values[cIdx]._text\"></span>\n          </nz-tag>\n          <nz-badge\n            *ngSwitchCase=\"'badge'\"\n            [nzStatus]=\"i._values[cIdx].color\"\n            [nzText]=\"i._values[cIdx].text\"\n          ></nz-badge>\n        </ng-container>\n        <ng-template *ngSwitchCase=\"'widget'\" st-widget-host [record]=\"i\" [column]=\"c\"></ng-template\n        ><ng-container *ngSwitchDefault>\n          <span\n            *ngIf=\"c.safeType !== 'text'\"\n            [innerHTML]=\"i._values[cIdx]._text\"\n            [attr.title]=\"c._isTruncate ? i._values[cIdx].text : null\"\n          ></span>\n          <span\n            *ngIf=\"c.safeType === 'text'\"\n            [innerText]=\"i._values[cIdx]._text\"\n            [attr.title]=\"c._isTruncate ? i._values[cIdx].text : null\"\n          ></span>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngFor=\"let btn of i._values[cIdx].buttons; let last = last\">\n        <a *ngIf=\"btn.children!.length > 0\" nz-dropdown [nzDropdownMenu]=\"btnMenu\" nzOverlayClassName=\"st__btn-sub\">\n          <span [innerHTML]=\"btn._text\"></span>\n          <i nz-icon nzType=\"down\"></i>\n        </a>\n        <nz-dropdown-menu #btnMenu=\"nzDropdownMenu\">\n          <ul nz-menu>\n            <ng-container *ngFor=\"let subBtn of btn.children!\">\n              <li *ngIf=\"subBtn.type !== 'divider'\" nz-menu-item [class.st__btn-disabled]=\"subBtn._disabled\">\n                <ng-template [ngTemplateOutlet]=\"btnTpl\" [ngTemplateOutletContext]=\"{ $implicit: subBtn }\">\n                </ng-template>\n              </li>\n              <li *ngIf=\"subBtn.type === 'divider'\" nz-menu-divider></li>\n            </ng-container>\n          </ul>\n        </nz-dropdown-menu>\n        <span *ngIf=\"btn.children!.length === 0\" [class.st__btn-disabled]=\"btn._disabled\">\n          <ng-template [ngTemplateOutlet]=\"btnTpl\" [ngTemplateOutletContext]=\"{ $implicit: btn }\"> </ng-template>\n        </span>\n        <nz-divider *ngIf=\"!last\" nzType=\"vertical\"></nz-divider>\n      </ng-container>\n    </ng-container>\n  ",
+                    preserveWhitespaces: false,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    STTdComponent.ctorParameters = function () { return [
+        { type: STComponent, decorators: [{ type: i0.Host }] },
+        { type: router.Router },
+        { type: theme.ModalHelper },
+        { type: theme.DrawerHelper }
+    ]; };
+    STTdComponent.propDecorators = {
+        c: [{ type: i0.Input }],
+        cIdx: [{ type: i0.Input }],
+        data: [{ type: i0.Input }],
+        i: [{ type: i0.Input }],
+        index: [{ type: i0.Input }],
+        n: [{ type: i0.Output }]
+    };
+
     var COMPONENTS = [STComponent, STRowDirective, STWidgetHostDirective];
     var STModule = /** @class */ (function () {
         function STModule() {
@@ -2458,9 +2558,11 @@
                         tag.NzTagModule,
                         input.NzInputModule,
                         tooltip.NzToolTipModule,
-                        resizable.NzResizableModule
+                        resizable.NzResizableModule,
+                        inputNumber.NzInputNumberModule,
+                        datePicker.NzDatePickerModule
                     ],
-                    declarations: COMPONENTS,
+                    declarations: __spreadArray(__spreadArray([], __read(COMPONENTS)), [STFilterComponent, STTdComponent]),
                     exports: COMPONENTS
                 },] }
     ];
@@ -2479,6 +2581,8 @@
     exports.STWidgetRegistry = STWidgetRegistry;
     exports.ST_DEFAULT_CONFIG = ST_DEFAULT_CONFIG;
     exports["ɵa"] = STRowSource;
+    exports["ɵb"] = STFilterComponent;
+    exports["ɵc"] = STTdComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });