@delon/abc 12.2.1 → 12.4.0

package/fesm2015/table.js

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Injectable, Directive, TemplateRef, Host, Input, Optional, Inject, ViewContainerRef, ComponentFactoryResolver, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ElementRef, ViewChild, Output, NgModule } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ACLService, DelonACLModule } from '@delon/acl';
-import { ALAIN_I18N_TOKEN, _HttpClient, DatePipe, YNPipe, ModalHelper, DrawerHelper, DelonLocaleService } from '@delon/theme';
+import { ALAIN_I18N_TOKEN, _HttpClient, DatePipe, YNPipe, DelonLocaleService, ModalHelper, DrawerHelper } from '@delon/theme';
 import { warn, deepCopy, deepGet, deepMergeKey } from '@delon/util/other';
 import { DecimalPipe, DOCUMENT, CommonModule } from '@angular/common';
 import { HttpParams } from '@angular/common/http';
@@ -11,7 +11,6 @@ import { map, takeUntil, filter } from 'rxjs/operators';
 import { CurrencyService } from '@delon/util/format';
 import { __awaiter, __decorate } from 'tslib';
 import { XlsxService } from '@delon/abc/xlsx';
-import { Router } from '@angular/router';
 import { AlainConfigService } from '@delon/util/config';
 import { toBoolean, InputNumber, InputBoolean } from '@delon/util/decorator';
 import { NzContextMenuService, NzDropDownModule } from 'ng-zorro-antd/dropdown';
@@ -19,9 +18,11 @@ import { FormsModule } from '@angular/forms';
 import { LetModule } from '@delon/abc/let';
 import { NzBadgeModule } from 'ng-zorro-antd/badge';
 import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
 import { NzMenuModule } from 'ng-zorro-antd/menu';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
@@ -29,6 +30,7 @@ import { NzResizableModule } from 'ng-zorro-antd/resizable';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { Router } from '@angular/router';
 
 class STRowSource {
     constructor() {
@@ -220,14 +222,32 @@ class STColumnSource {
         }
         let res = item.filter;
         res.type = res.type || 'default';
+        res.showOPArea = res.showOPArea !== false;
         let icon = 'filter';
         let iconTheme = 'fill';
-        if (res.type === 'keyword') {
-            if (res.menus == null || res.menus.length === 0) {
-                res.menus = [{ value: '' }];
-            }
-            icon = 'search';
-            iconTheme = 'outline';
+        let fixMenus = true;
+        let 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 }];
         }
         if (res.menus.length === 0) {
             return null;
@@ -334,6 +354,9 @@ class STColumnSource {
             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);
         }
         return res;
@@ -723,9 +746,9 @@ class STDataSource {
                 }
                 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(w => !!w)
+                .join(' ');
         }
         return result;
     }
@@ -929,11 +952,17 @@ class STExport {
                         ret.t = 'n';
                         break;
                     case 'date':
-                        ret.t = 'd';
+                        // Can't be a empty value, it will cause `#NULL!`
+                        // See https://github.com/SheetJS/sheetjs/blob/master/docbits/52_datatype.md
+                        if (`${val}`.length > 0) {
+                            ret.t = 'd';
+                            // Number Formats: https://github.com/SheetJS/sheetjs/blob/master/docbits/63_numfmt.md
+                            ret.z = col.dateFormat;
+                        }
                         break;
                     case 'yn':
                         const yn = col.yn;
-                        ret.v = ret.v === yn.truth ? yn.yes : yn.no;
+                        ret.v = val === yn.truth ? yn.yes : yn.no;
                         break;
                 }
             }
@@ -1070,7 +1099,6 @@ const ST_DEFAULT_CONFIG = {
         trigger: 'click',
         placement: 'top'
     },
-    rowClickTime: 200,
     btnIcon: {
         theme: 'outline',
         spin: false
@@ -1099,13 +1127,10 @@ const ST_DEFAULT_CONFIG = {
 };
 
 class STComponent {
-    constructor(i18nSrv, cdr, router, el, exportSrv, modalHelper, drawerHelper, doc, columnSource, dataSource, delonI18n, configSrv, cms) {
+    constructor(i18nSrv, cdr, el, exportSrv, doc, columnSource, dataSource, delonI18n, configSrv, cms) {
         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;
@@ -1113,7 +1138,6 @@ class STComponent {
         this.cms = cms;
         this.destroy$ = new Subject();
         this.totalTpl = ``;
-        this.rowClickCount = 0;
         this.customWidthConfig = false;
         this._widthConfig = [];
         this.locale = {};
@@ -1137,7 +1161,6 @@ class STComponent {
         this.showHeader = true;
         this.expandRowByClick = false;
         this.expandAccordion = false;
-        this.rowClickTime = 200;
         this.responsive = true;
         this.error = new EventEmitter();
         this.change = new EventEmitter();
@@ -1220,10 +1243,6 @@ class STComponent {
     get list() {
         return this._data;
     }
-    get routerState() {
-        const { pi, ps, total } = this;
-        return { pi, ps, total };
-    }
     setCog(cog) {
         const 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.
@@ -1419,45 +1438,30 @@ class STComponent {
         }
         this.changeEmit(type);
     }
-    _click(e, item, col) {
-        e.preventDefault();
-        e.stopPropagation();
-        const res = col.click(item, this);
-        if (typeof res === 'string') {
-            this.router.navigateByUrl(res, { state: this.routerState });
-        }
-        return false;
-    }
     closeOtherExpand(item) {
         if (this.expandAccordion === false)
             return;
         this._data.filter(i => i !== item).forEach(i => (i.expand = false));
     }
-    _rowClick(e, item, index) {
+    _rowClick(e, item, index, dbl) {
         const el = e.target;
         if (el.nodeName === 'INPUT')
             return;
-        const { expand, expandRowByClick, rowClickTime } = this;
+        const { expand, expandRowByClick } = this;
         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(() => {
-            const data = { e, item, index };
-            if (this.rowClickCount === 1) {
-                this._clickRowClassName(el, item, index);
-                this.changeEmit('click', data);
-            }
-            else {
-                this.changeEmit('dblClick', data);
-            }
-            this.rowClickCount = 0;
-        }, rowClickTime);
+        const data = { e, item, index };
+        if (dbl) {
+            this.changeEmit('dblClick', data);
+        }
+        else {
+            this._clickRowClassName(el, item, index);
+            this.changeEmit('click', data);
+        }
     }
     _clickRowClassName(el, item, index) {
         const cr = this.clickRowClassName;
@@ -1565,31 +1569,23 @@ class STComponent {
     }
     // #endregion
     // #region filter
-    handleFilter(col) {
+    _handleFilter(col, confirm) {
+        if (!confirm) {
+            this.columnSource.cleanFilter(col);
+        }
         // 过滤表示一种数据的变化应重置页码为 `1`
         this.pi = 1;
         this.columnSource.updateDefault(col.filter);
         this.loadPageData();
         this.changeEmit('filter', col);
     }
-    _filterConfirm(col) {
-        this.handleFilter(col);
-    }
-    _filterRadio(col, item, checked) {
-        col.filter.menus.forEach(i => (i.checked = false));
-        item.checked = checked;
-    }
-    _filterClear(col) {
-        this.columnSource.cleanFilter(col);
-        this.handleFilter(col);
+    handleFilterNotify(value) {
+        this.changeEmit('filterChange', value);
     }
     clearFilter() {
         this._columns.filter(w => w.filter && w.filter.default === true).forEach(col => this.columnSource.cleanFilter(col));
         return this;
     }
-    _filterClick($event) {
-        $event.stopPropagation();
-    }
     // #endregion
     // #region checkbox
     /** 清除所有 `checkbox` */
@@ -1610,10 +1606,6 @@ class STComponent {
         this._data.filter(w => !w.disabled).forEach(i => (i.checked = checked));
         return this._refCheck()._checkNotify();
     }
-    _checkSelection(i, value) {
-        i.checked = value;
-        return this._refCheck()._checkNotify();
-    }
     _rowSelection(row) {
         row.select(this._data);
         return this._refCheck()._checkNotify();
@@ -1631,63 +1623,17 @@ class STComponent {
         this.changeEmit('radio', null);
         return this;
     }
-    _refRadio(checked, item) {
-        // if (item.disabled === true) return;
-        this._data.filter(w => !w.disabled).forEach(i => (i.checked = false));
-        item.checked = checked;
-        this.changeEmit('radio', item);
-        return this;
-    }
     // #endregion
-    // #region buttons
-    _btnClick(record, btn, ev) {
-        if (ev) {
-            ev.stopPropagation();
-        }
-        if (btn.type === 'modal' || btn.type === 'static') {
-            const { modal } = btn;
-            const obj = { [modal.paramsName]: record };
-            this.modalHelper[btn.type === 'modal' ? 'create' : 'createStatic'](modal.component, Object.assign(Object.assign({}, obj), (modal.params && modal.params(record))), deepMergeKey({}, true, this.cog.modal, modal))
-                .pipe(filter(w => typeof w !== 'undefined'))
-                .subscribe((res) => this.btnCallback(record, btn, res));
-            return;
-        }
-        else if (btn.type === 'drawer') {
-            const { drawer } = btn;
-            const obj = { [drawer.paramsName]: record };
-            this.drawerHelper
-                .create(drawer.title, drawer.component, Object.assign(Object.assign({}, obj), (drawer.params && drawer.params(record))), deepMergeKey({}, true, this.cog.drawer, drawer))
-                .pipe(filter(w => typeof w !== 'undefined'))
-                .subscribe(res => this.btnCallback(record, btn, res));
-            return;
-        }
-        else if (btn.type === 'link') {
-            const clickRes = this.btnCallback(record, btn);
-            if (typeof clickRes === 'string') {
-                this.router.navigateByUrl(clickRes, { state: this.routerState });
-            }
-            return;
-        }
-        this.btnCallback(record, btn);
-    }
-    btnCallback(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);
+    _handleTd(ev) {
+        switch (ev.type) {
+            case 'checkbox':
+                this._refCheck()._checkNotify();
+                break;
+            case 'radio':
+                this.changeEmit('radio', ev.item);
+                break;
         }
     }
-    // #endregion
     // #region export
     /**
      * 导出当前页，确保已经注册 `XlsxModule`
@@ -1834,7 +1780,7 @@ STComponent.decorators = [
     { type: 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, DatePipe, YNPipe, DecimalPipe],
                 host: {
                     '[class.st]': `true`,
@@ -1852,11 +1798,8 @@ STComponent.decorators = [
 STComponent.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [ALAIN_I18N_TOKEN,] }] },
     { type: ChangeDetectorRef },
-    { type: Router },
     { type: ElementRef },
     { type: STExport },
-    { type: ModalHelper },
-    { type: DrawerHelper },
     { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
     { type: STColumnSource },
     { type: STDataSource },
@@ -1898,7 +1841,6 @@ STComponent.propDecorators = {
     expandAccordion: [{ type: Input }],
     expand: [{ type: Input }],
     noResult: [{ type: Input }],
-    rowClickTime: [{ type: Input }],
     responsive: [{ type: Input }],
     responsiveHideHeaderFooter: [{ type: Input }],
     error: [{ type: Output }],
@@ -1934,9 +1876,6 @@ __decorate([
 __decorate([
     InputBoolean()
 ], STComponent.prototype, "expandAccordion", void 0);
-__decorate([
-    InputNumber()
-], STComponent.prototype, "rowClickTime", void 0);
 __decorate([
     InputBoolean()
 ], STComponent.prototype, "responsive", void 0);
@@ -1956,6 +1895,380 @@ __decorate([
     InputNumber()
 ], STComponent.prototype, "virtualMinBufferPx", void 0);
 
+class STFilterComponent {
+    constructor() {
+        this.visible = false;
+        this.locale = {};
+        this.n = new EventEmitter();
+        this.handle = new EventEmitter();
+    }
+    get icon() {
+        return this.f.icon;
+    }
+    show($event) {
+        $event.stopPropagation();
+    }
+    checkboxChange() {
+        var _a;
+        this.n.emit((_a = this.f.menus) === null || _a === void 0 ? void 0 : _a.filter(w => w.checked));
+    }
+    radioChange(item) {
+        this.f.menus.forEach(i => (i.checked = false));
+        item.checked = !item.checked;
+        this.n.emit(item);
+    }
+    confirm() {
+        this.handle.emit(true);
+    }
+    reset() {
+        this.handle.emit(false);
+    }
+}
+STFilterComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'st-filter',
+                template: `
+    <span
+      class="ant-table-filter-trigger"
+      [class.active]="visible || f.default"
+      nz-dropdown
+      [nzDropdownMenu]="filterMenu"
+      nzTrigger="click"
+      [nzClickHide]="false"
+      [(nzVisible)]="visible"
+      nzOverlayClassName="st__filter-wrap"
+      (click)="show($event)"
+    >
+      <i nz-icon [nzType]="icon.type" [nzTheme]="icon.theme!"></i>
+    </span>
+    <nz-dropdown-menu #filterMenu="nzDropdownMenu">
+      <div class="ant-table-filter-dropdown">
+        <ng-container [ngSwitch]="f.type">
+          <div *ngSwitchCase="'keyword'" class="st__filter-keyword">
+            <input
+              type="text"
+              nz-input
+              [attr.placeholder]="f.placeholder"
+              [(ngModel)]="f.menus![0]!.value"
+              (ngModelChange)="n.emit($event)"
+              (keyup.enter)="confirm()"
+            />
+          </div>
+          <div *ngSwitchCase="'number'" class="p-sm st__filter-number">
+            <nz-input-number
+              [(ngModel)]="f.menus![0]!.value"
+              (ngModelChange)="n.emit($event)"
+              [nzMin]="f.number!.min!"
+              [nzMax]="f.number!.max!"
+              [nzStep]="f.number!.step!"
+              [nzPrecision]="f.number!.precision"
+              [nzPlaceHolder]="f.placeholder!"
+              class="width-100"
+            ></nz-input-number>
+          </div>
+          <div *ngSwitchCase="'date'" class="p-sm st__filter-date">
+            <nz-date-picker
+              *ngIf="!f.date!.range"
+              nzInline
+              [nzMode]="f.date!.mode"
+              [(ngModel)]="f.menus![0]!.value"
+              (ngModelChange)="n.emit($event)"
+              [nzShowNow]="f.date!.showNow"
+              [nzShowToday]="f.date!.showToday"
+              [nzDisabledDate]="f.date!.disabledDate"
+              [nzDisabledTime]="f.date!.disabledTime"
+            ></nz-date-picker>
+            <nz-range-picker
+              *ngIf="f.date!.range"
+              nzInline
+              [nzMode]="f.date!.mode"
+              [(ngModel)]="f.menus![0]!.value"
+              (ngModelChange)="n.emit($event)"
+              [nzShowNow]="f.date!.showNow"
+              [nzShowToday]="f.date!.showToday"
+              [nzDisabledDate]="f.date!.disabledDate"
+              [nzDisabledTime]="f.date!.disabledTime"
+            ></nz-range-picker>
+          </div>
+          <div *ngSwitchCase="'time'" class="p-sm st__filter-time"> </div>
+          <div *ngSwitchCase="'custom'" class="st__filter-custom">
+            <ng-template
+              [ngTemplateOutlet]="f.custom!"
+              [ngTemplateOutletContext]="{ $implicit: f, col: col }"
+            ></ng-template>
+          </div>
+          <ul *ngSwitchDefault nz-menu>
+            <ng-container *ngIf="f.multiple">
+              <li nz-menu-item *ngFor="let filter of f.menus">
+                <label nz-checkbox [(ngModel)]="filter.checked" (ngModelChange)="checkboxChange()">
+                  {{ filter.text }}
+                </label>
+              </li>
+            </ng-container>
+            <ng-container *ngIf="!f.multiple">
+              <li nz-menu-item *ngFor="let filter of f.menus">
+                <label nz-radio [ngModel]="filter.checked" (ngModelChange)="radioChange(filter)">
+                  {{ filter.text }}
+                </label>
+              </li>
+            </ng-container>
+          </ul>
+        </ng-container>
+        <div *ngIf="f.showOPArea" class="ant-table-filter-dropdown-btns">
+          <a class="ant-table-filter-dropdown-link confirm" (click)="visible = false">
+            <span (click)="confirm()">{{ f.confirmText || locale.filterConfirm }}</span>
+          </a>
+          <a class="ant-table-filter-dropdown-link clear" (click)="visible = false">
+            <span (click)="reset()">{{ f.clearText || locale.filterReset }}</span>
+          </a>
+        </div>
+      </div>
+    </nz-dropdown-menu>
+  `,
+                host: {
+                    '[class.ant-table-filter-trigger-container]': `true`,
+                    '[class.st__filter]': `true`,
+                    '[class.ant-table-filter-trigger-container-open]': `visible`
+                },
+                preserveWhitespaces: false,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+STFilterComponent.propDecorators = {
+    col: [{ type: Input }],
+    locale: [{ type: Input }],
+    f: [{ type: Input }],
+    n: [{ type: Output }],
+    handle: [{ type: Output }]
+};
+
+class STTdComponent {
+    constructor(stComp, router, modalHelper, drawerHelper) {
+        this.stComp = stComp;
+        this.router = router;
+        this.modalHelper = modalHelper;
+        this.drawerHelper = drawerHelper;
+        this.n = new EventEmitter();
+    }
+    get routerState() {
+        const { pi, ps, total } = this.stComp;
+        return { pi, ps, total };
+    }
+    report(type) {
+        this.n.emit({ type, item: this.i, col: this.c });
+    }
+    _checkbox(value) {
+        this.i.checked = value;
+        this.report('checkbox');
+    }
+    _radio(checked) {
+        this.data.filter(w => !w.disabled).forEach(i => (i.checked = false));
+        this.i.checked = checked;
+        this.report('radio');
+    }
+    _link(e) {
+        this._stopPropagation(e);
+        const res = this.c.click(this.i, this.stComp);
+        if (typeof res === 'string') {
+            this.router.navigateByUrl(res, { state: this.routerState });
+        }
+        return false;
+    }
+    _stopPropagation(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+    }
+    _btn(btn, ev) {
+        if (ev) {
+            ev.stopPropagation();
+        }
+        const record = this.i;
+        if (btn.type === 'modal' || btn.type === 'static') {
+            const { modal } = btn;
+            const obj = { [modal.paramsName]: record };
+            this.modalHelper[btn.type === 'modal' ? 'create' : 'createStatic'](modal.component, Object.assign(Object.assign({}, obj), (modal.params && modal.params(record))), deepMergeKey({}, true, this.stComp['cog'].modal, modal))
+                .pipe(filter(w => typeof w !== 'undefined'))
+                .subscribe((res) => this.btnCallback(record, btn, res));
+            return;
+        }
+        else if (btn.type === 'drawer') {
+            const { drawer } = btn;
+            const obj = { [drawer.paramsName]: record };
+            this.drawerHelper
+                .create(drawer.title, drawer.component, Object.assign(Object.assign({}, obj), (drawer.params && drawer.params(record))), deepMergeKey({}, true, this.stComp['cog'].drawer, drawer))
+                .pipe(filter(w => typeof w !== 'undefined'))
+                .subscribe(res => this.btnCallback(record, btn, res));
+            return;
+        }
+        else if (btn.type === 'link') {
+            const clickRes = this.btnCallback(record, btn);
+            if (typeof clickRes === 'string') {
+                this.router.navigateByUrl(clickRes, { state: this.routerState });
+            }
+            return;
+        }
+        this.btnCallback(record, btn);
+    }
+    btnCallback(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);
+        }
+    }
+}
+STTdComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'st-td',
+                template: `
+    <ng-template #btnTpl let-i>
+      <ng-container *ngIf="!i.tooltip">
+        <ng-template [ngTemplateOutlet]="btnItemTpl" [ngTemplateOutletContext]="{ $implicit: i }"></ng-template>
+      </ng-container>
+      <span *ngIf="i.tooltip" nz-tooltip [nzTooltipTitle]="i.tooltip">
+        <ng-template [ngTemplateOutlet]="btnItemTpl" [ngTemplateOutletContext]="{ $implicit: i }"></ng-template>
+      </span>
+    </ng-template>
+    <ng-template #btnItemTpl let-i>
+      <a
+        *ngIf="i.pop"
+        nz-popconfirm
+        [nzPopconfirmTitle]="i.pop.title"
+        [nzIcon]="i.pop.icon"
+        [nzCondition]="i.pop.condition(i)"
+        [nzCancelText]="i.pop.cancelText"
+        [nzOkText]="i.pop.okText"
+        [nzOkType]="i.pop.okType"
+        (nzOnConfirm)="_btn(i)"
+        class="st__btn-text"
+        [ngClass]="i.className"
+        (click)="_stopPropagation($event)"
+      >
+        <ng-template [ngTemplateOutlet]="btnTextTpl" [ngTemplateOutletContext]="{ $implicit: i }"></ng-template>
+      </a>
+      <a *ngIf="!i.pop" (click)="_btn(i, $event)" class="st__btn-text" [ngClass]="i.className">
+        <ng-template [ngTemplateOutlet]="btnTextTpl" [ngTemplateOutletContext]="{ $implicit: i }"></ng-template>
+      </a>
+    </ng-template>
+    <ng-template #btnTextTpl let-i>
+      <ng-container *ngIf="i.icon">
+        <i
+          *ngIf="!i.icon.iconfont"
+          nz-icon
+          [nzType]="i.icon.type"
+          [nzTheme]="i.icon.theme"
+          [nzSpin]="i.icon.spin"
+          [nzTwotoneColor]="i.icon.twoToneColor"
+        ></i>
+        <i *ngIf="i.icon.iconfont" nz-icon [nzIconfont]="i.icon.iconfont"></i>
+      </ng-container>
+      <span [innerHTML]="i._text" [ngClass]="{ 'pl-xs': i.icon }"></span>
+    </ng-template>
+    <ng-template
+      #render
+      [ngTemplateOutlet]="c.__render!"
+      [ngTemplateOutletContext]="{ $implicit: i, index: index, column: c }"
+    ></ng-template>
+    <ng-container *ngIf="!c.__render; else render">
+      <ng-container [ngSwitch]="c.type">
+        <label
+          *ngSwitchCase="'checkbox'"
+          nz-checkbox
+          [nzDisabled]="i.disabled"
+          [ngModel]="i.checked"
+          (ngModelChange)="_checkbox($event)"
+        ></label>
+        <label
+          *ngSwitchCase="'radio'"
+          nz-radio
+          [nzDisabled]="i.disabled"
+          [ngModel]="i.checked"
+          (ngModelChange)="_radio($event)"
+        ></label>
+        <a
+          *ngSwitchCase="'link'"
+          (click)="_link($event)"
+          [innerHTML]="i._values[cIdx]._text"
+          [attr.title]="i._values[cIdx].text"
+        ></a>
+        <ng-container *ngIf="i._values[cIdx].text">
+          <nz-tag *ngSwitchCase="'tag'" [nzColor]="i._values[cIdx].color">
+            <span [innerHTML]="i._values[cIdx]._text"></span>
+          </nz-tag>
+          <nz-badge
+            *ngSwitchCase="'badge'"
+            [nzStatus]="i._values[cIdx].color"
+            [nzText]="i._values[cIdx].text"
+          ></nz-badge>
+        </ng-container>
+        <ng-template *ngSwitchCase="'widget'" st-widget-host [record]="i" [column]="c"></ng-template
+        ><ng-container *ngSwitchDefault>
+          <span
+            *ngIf="c.safeType !== 'text'"
+            [innerHTML]="i._values[cIdx]._text"
+            [attr.title]="c._isTruncate ? i._values[cIdx].text : null"
+          ></span>
+          <span
+            *ngIf="c.safeType === 'text'"
+            [innerText]="i._values[cIdx]._text"
+            [attr.title]="c._isTruncate ? i._values[cIdx].text : null"
+          ></span>
+        </ng-container>
+      </ng-container>
+      <ng-container *ngFor="let btn of i._values[cIdx].buttons; let last = last">
+        <a *ngIf="btn.children!.length > 0" nz-dropdown [nzDropdownMenu]="btnMenu" nzOverlayClassName="st__btn-sub">
+          <span [innerHTML]="btn._text"></span>
+          <i nz-icon nzType="down"></i>
+        </a>
+        <nz-dropdown-menu #btnMenu="nzDropdownMenu">
+          <ul nz-menu>
+            <ng-container *ngFor="let subBtn of btn.children!">
+              <li *ngIf="subBtn.type !== 'divider'" nz-menu-item [class.st__btn-disabled]="subBtn._disabled">
+                <ng-template [ngTemplateOutlet]="btnTpl" [ngTemplateOutletContext]="{ $implicit: subBtn }">
+                </ng-template>
+              </li>
+              <li *ngIf="subBtn.type === 'divider'" nz-menu-divider></li>
+            </ng-container>
+          </ul>
+        </nz-dropdown-menu>
+        <span *ngIf="btn.children!.length === 0" [class.st__btn-disabled]="btn._disabled">
+          <ng-template [ngTemplateOutlet]="btnTpl" [ngTemplateOutletContext]="{ $implicit: btn }"> </ng-template>
+        </span>
+        <nz-divider *ngIf="!last" nzType="vertical"></nz-divider>
+      </ng-container>
+    </ng-container>
+  `,
+                preserveWhitespaces: false,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+STTdComponent.ctorParameters = () => [
+    { type: STComponent, decorators: [{ type: Host }] },
+    { type: Router },
+    { type: ModalHelper },
+    { type: DrawerHelper }
+];
+STTdComponent.propDecorators = {
+    c: [{ type: Input }],
+    cIdx: [{ type: Input }],
+    data: [{ type: Input }],
+    i: [{ type: Input }],
+    index: [{ type: Input }],
+    n: [{ type: Output }]
+};
+
 const COMPONENTS = [STComponent, STRowDirective, STWidgetHostDirective];
 class STModule {
 }
@@ -1978,9 +2291,11 @@ STModule.decorators = [
                     NzTagModule,
                     NzInputModule,
                     NzToolTipModule,
-                    NzResizableModule
+                    NzResizableModule,
+                    NzInputNumberModule,
+                    NzDatePickerModule
                 ],
-                declarations: COMPONENTS,
+                declarations: [...COMPONENTS, STFilterComponent, STTdComponent],
                 exports: COMPONENTS
             },] }
 ];
@@ -1989,5 +2304,5 @@ STModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { STColumnSource, STComponent, STDataSource, STExport, STModule, STRowDirective, STWidgetHostDirective, STWidgetRegistry, ST_DEFAULT_CONFIG, STRowSource as ɵa };
+export { STColumnSource, STComponent, STDataSource, STExport, STModule, STRowDirective, STWidgetHostDirective, STWidgetRegistry, ST_DEFAULT_CONFIG, STRowSource as ɵa, STFilterComponent as ɵb, STTdComponent as ɵc };
 //# sourceMappingURL=table.js.map