@duoduo-oba/ng-devui/fesm5/ng-devui-data-table.js

DevUI components based on Angular

import { __spread, __assign } from 'tslib';
import { Component, ChangeDetectionStrategy, ContentChild, TemplateRef, EventEmitter, Input, Output, ElementRef, ChangeDetectorRef, NgZone, Renderer2, ContentChildren, ViewChild, HostBinding, Directive, ViewContainerRef, ComponentFactoryResolver, KeyValueDiffers, IterableDiffers, Renderer, HostListener, Pipe, NgModule } from '@angular/core';
import { debounceTime, distinctUntilChanged, switchMap, map } from 'rxjs/operators';
import { WindowRef } from '@duoduo-oba/ng-devui/window-ref';
import { of, BehaviorSubject, fromEvent } from 'rxjs';
import { InputNumberComponent, InputNumberModule } from '@duoduo-oba/ng-devui/input-number';
import { SelectComponent, SelectModule } from '@duoduo-oba/ng-devui/select';
import { TreeSelectComponent, TreeSelectModule } from '@duoduo-oba/ng-devui/tree-select';
import { stopPropagationIfExist, formatDate, SafePipeModule } from '@duoduo-oba/ng-devui/utils';
import { I18nService } from '@duoduo-oba/ng-devui/i18n';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { PaginationModule } from '@duoduo-oba/ng-devui/pagination';
import { DCommonModule } from '@duoduo-oba/ng-devui/common';
import { DatepickerModule } from '@duoduo-oba/ng-devui/datepicker';
import { CheckBoxModule } from '@duoduo-oba/ng-devui/checkbox';
import { ButtonModule } from '@duoduo-oba/ng-devui/button';
import { DropDownModule } from '@duoduo-oba/ng-devui/dropdown';
import { TooltipModule } from '@duoduo-oba/ng-devui/tooltip';
import { DragDropModule } from '@duoduo-oba/ng-devui/dragdrop';

/**
 * @fileoverview added by tsickle
 * Generated from: tmpl/data-table-cell-edit-tmpl.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var DataTableCellEditTmplComponent = /** @class */ (function () {
    function DataTableCellEditTmplComponent() {
    }
    DataTableCellEditTmplComponent.decorators = [
        { type: Component, args: [{
                    selector: 'd-cell-edit',
                    template: '',
                    changeDetection: ChangeDetectionStrategy.OnPush
                }] }
    ];
    DataTableCellEditTmplComponent.propDecorators = {
        template: [{ type: ContentChild, args: [TemplateRef, { static: false },] }]
    };
    return DataTableCellEditTmplComponent;
}());
if (false) {
    /** @type {?} */
    DataTableCellEditTmplComponent.prototype.template;
    /** @type {?} */
    DataTableCellEditTmplComponent.prototype.dataPicker;
}

/**
 * @fileoverview added by tsickle
 * Generated from: tmpl/data-table-cell-view-tmpl.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var DataTableCellViewTmplComponent = /** @class */ (function () {
    function DataTableCellViewTmplComponent() {
    }
    DataTableCellViewTmplComponent.decorators = [
        { type: Component, args: [{
                    selector: 'd-cell',
                    template: '',
                    changeDetection: ChangeDetectionStrategy.OnPush
                }] }
    ];
    DataTableCellViewTmplComponent.propDecorators = {
        template: [{ type: ContentChild, args: [TemplateRef, { static: false },] }]
    };
    return DataTableCellViewTmplComponent;
}());
if (false) {
    /** @type {?} */
    DataTableCellViewTmplComponent.prototype.template;
}

/**
 * @fileoverview added by tsickle
 * Generated from: tmpl/data-table-head-cell-tmpl.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var DataTableHeadCellTmplComponent = /** @class */ (function () {
    function DataTableHeadCellTmplComponent() {
    }
    DataTableHeadCellTmplComponent.decorators = [
        { type: Component, args: [{
                    selector: 'd-head-cell',
                    template: '',
                    changeDetection: ChangeDetectionStrategy.OnPush
                }] }
    ];
    DataTableHeadCellTmplComponent.propDecorators = {
        template: [{ type: ContentChild, args: [TemplateRef, { static: false },] }]
    };
    return DataTableHeadCellTmplComponent;
}());
if (false) {
    /** @type {?} */
    DataTableHeadCellTmplComponent.prototype.template;
}

/**
 * @fileoverview added by tsickle
 * Generated from: tmpl/data-table-column-tmpl.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var DataTableColumnTmplComponent = /** @class */ (function () {
    function DataTableColumnTmplComponent() {
        this.fieldType = 'text';
        this.order = Number.MAX_VALUE;
        this.nestedColumn = false;
        this.filterChange = new EventEmitter();
        this.filterMultiple = true;
        this.orderChange = new EventEmitter();
        // 鼠标是否移动到当前表头单元格
        this.selected = false;
        this.filterIconActiveInner = false;
    }
    /**
     * @return {?}
     */
    DataTableColumnTmplComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        var _this = this;
        if (this.filterable) {
            if (this.filterList) {
                if (!this.searchFn) {
                    this.searchFn = (/**
                     * @param {?} item
                     * @return {?}
                     */
                    function (item) {
                        return of((_this.filterList ? _this.filterList : [])
                            .filter((/**
                         * @param {?} value
                         * @return {?}
                         */
                        function (value) { return value.name.toLowerCase().includes(item.toLowerCase()); })));
                    });
                }
            }
        }
    };
    /**
     * @param {?} changes
     * @return {?}
     */
    DataTableColumnTmplComponent.prototype.ngOnChanges = /**
     * @param {?} changes
     * @return {?}
     */
    function (changes) {
        if (changes['order']) {
            this.orderChange.emit(changes['order'].currentValue);
        }
        if (changes['filterList']) {
            if (this.filterIconActive !== undefined) {
                return;
            }
            /** @type {?} */
            var checkedList = this.filterList.filter((/**
             * @param {?} item
             * @return {?}
             */
            function (item) { return item.checked; }));
            if (checkedList.length && (checkedList.length < this.filterList.length)) {
                this.filterIconActiveInner = true;
            }
            else {
                this.filterIconActiveInner = false;
            }
        }
    };
    /**
     * @return {?}
     */
    DataTableColumnTmplComponent.prototype.ngOnDestroy = /**
     * @return {?}
     */
    function () {
        this.orderChange.unsubscribe();
    };
    // column.extraOptions?.dateFormat
    // column.extraOptions?.dateFormat
    /**
     * @param {?} filterData
     * @return {?}
     */
    DataTableColumnTmplComponent.prototype.emitFilterData = 
    // column.extraOptions?.dateFormat
    /**
     * @param {?} filterData
     * @return {?}
     */
    function (filterData) {
        this.filterChange.emit(filterData);
    };
    /**
     * @param {?} isOpen
     * @return {?}
     */
    DataTableColumnTmplComponent.prototype.canFilter = /**
     * @param {?} isOpen
     * @return {?}
     */
    function (isOpen) {
        /** @type {?} */
        var changeResult = Promise.resolve(true);
        if (this.beforeFilter) {
            /** @type {?} */
            var result = this.beforeFilter(isOpen);
            if (typeof result !== 'undefined') {
                if (result.then) {
                    changeResult = result;
                }
                else if (result.subscribe) {
                    changeResult = ((/** @type {?} */ (result))).toPromise();
                }
                else {
                    changeResult = Promise.resolve(result);
                }
            }
        }
        return changeResult;
    };
    DataTableColumnTmplComponent.decorators = [
        { type: Component, args: [{
                    selector: 'd-column',
                    template: '',
                    changeDetection: ChangeDetectionStrategy.OnPush
                }] }
    ];
    /** @nocollapse */
    DataTableColumnTmplComponent.ctorParameters = function () { return []; };
    DataTableColumnTmplComponent.propDecorators = {
        advancedHeader: [{ type: Input }],
        fieldType: [{ type: Input }],
        maxWidth: [{ type: Input }],
        minWidth: [{ type: Input }],
        field: [{ type: Input }],
        header: [{ type: Input }],
        sortable: [{ type: Input }],
        editable: [{ type: Input }],
        unresizable: [{ type: Input }],
        filterable: [{ type: Input }],
        cellClass: [{ type: Input }],
        width: [{ type: Input }],
        fixedLeft: [{ type: Input }],
        fixedRight: [{ type: Input }],
        extraOptions: [{ type: Input }],
        order: [{ type: Input }],
        nestedColumn: [{ type: Input }],
        filterList: [{ type: Input }],
        filterChange: [{ type: Output }],
        filterMultiple: [{ type: Input }],
        filterIconActive: [{ type: Input }],
        filterBoxWidth: [{ type: Input }],
        filterBoxHeight: [{ type: Input }],
        beforeFilter: [{ type: Input }],
        cellCmp: [{ type: ContentChild, args: [DataTableCellViewTmplComponent, { static: false },] }],
        cellEditCmp: [{ type: ContentChild, args: [DataTableCellEditTmplComponent, { static: false },] }],
        headCellTmpl: [{ type: ContentChild, args: [DataTableHeadCellTmplComponent, { static: false },] }],
        customFilterTemplate: [{ type: Input }],
        searchFn: [{ type: Input }]
    };
    return DataTableColumnTmplComponent;
}());
if (false) {
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.advancedHeader;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.fieldType;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.maxWidth;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.minWidth;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.field;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.header;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.sortable;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.editable;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.unresizable;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.filterable;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.cellClass;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.width;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.fixedLeft;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.fixedRight;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.extraOptions;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.order;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.nestedColumn;
    /**
     * 传入筛选列表
     * @type {?}
     */
    DataTableColumnTmplComponent.prototype.filterList;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.filterChange;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.filterMultiple;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.filterIconActive;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.filterBoxWidth;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.filterBoxHeight;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.beforeFilter;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.cellCmp;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.cellEditCmp;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.headCellTmpl;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.customFilterTemplate;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.searchFn;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.orderChange;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype._formatter;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.selected;
    /** @type {?} */
    DataTableColumnTmplComponent.prototype.filterIconActiveInner;
}

/**
 * @fileoverview added by tsickle
 * Generated from: tmpl/data-table-foot-tmpl.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var DataTableFootTmplComponent = /** @class */ (function () {
    function DataTableFootTmplComponent() {
    }
    DataTableFootTmplComponent.decorators = [
        { type: Component, args: [{
                    selector: 'd-foot',
                    template: '',
                    changeDetection: ChangeDetectionStrategy.OnPush
                }] }
    ];
    DataTableFootTmplComponent.propDecorators = {
        template: [{ type: ContentChild, args: [TemplateRef, { static: false },] }]
    };
    return DataTableFootTmplComponent;
}());
if (false) {
    /** @type {?} */
    DataTableFootTmplComponent.prototype.template;
}

/**
 * @fileoverview added by tsickle
 * Generated from: tmpl/data-table-head-tmpl.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var DataTableHeadTmplComponent = /** @class */ (function () {
    function DataTableHeadTmplComponent() {
    }
    DataTableHeadTmplComponent.decorators = [
        { type: Component, args: [{
                    selector: 'd-head',
                    template: '',
                    changeDetection: ChangeDetectionStrategy.OnPush
                }] }
    ];
    DataTableHeadTmplComponent.propDecorators = {
        template: [{ type: ContentChild, args: [TemplateRef, { static: false },] }]
    };
    return DataTableHeadTmplComponent;
}());
if (false) {
    /** @type {?} */
    DataTableHeadTmplComponent.prototype.template;
}

/**
 * @fileoverview added by tsickle
 * Generated from: tmpl/data-table-pager-tmpl.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var DataTablePagerTmplComponent = /** @class */ (function () {
    function DataTablePagerTmplComponent() {
    }
    DataTablePagerTmplComponent.decorators = [
        { type: Component, args: [{
                    selector: 'd-pager-panel',
                    template: '',
                    changeDetection: ChangeDetectionStrategy.OnPush
                }] }
    ];
    DataTablePagerTmplComponent.propDecorators = {
        template: [{ type: ContentChild, args: [TemplateRef, { static: false },] }]
    };
    return DataTablePagerTmplComponent;
}());
if (false) {
    /** @type {?} */
    DataTablePagerTmplComponent.prototype.template;
}

/**
 * @fileoverview added by tsickle
 * Generated from: data-table.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var DataTableComponent = /** @class */ (function () {
    function DataTableComponent(windowRef, elementRef, changeDetectorRef, ngZone, renderer) {
        var _this = this;
        this.windowRef = windowRef;
        this.elementRef = elementRef;
        this.changeDetectorRef = changeDetectorRef;
        this.ngZone = ngZone;
        this.renderer = renderer;
        /**
         * 【可选】默认表格使用的表格类型，可选值为'cell'
         */
        this.editModel = 'cell';
        /**
         * 表格类型,striped表现为条纹间隔
         */
        this.type = '';
        /**
         * 表格是否开启鼠标hover行高亮效果
         */
        this.hover = true;
        /**
         * 表格宽度
         */
        this.tableWidth = '100%';
        /**
         * 【可选】多列选择数组，用来指导那几列会被排序
         */
        this.multiSort = [];
        /**
         * 【可选】用来自定义不可拖拽的前几列
         */
        this.colDropFreezeTo = 0;
        /**
         * 【可选】同时绑定单击、双击事件时，用于区分点击的时间间隔,默认300ms，两个事件不同时使用可以指定为0
         */
        this.timeout = 300;
        /**
         * 【可选】是否显示排序未激活图标，默认显示,
         */
        this.showSortIcon = true;
        /**
         * 多列选择Change事件，用来更新多列选择数组
         *
         */
        this.multiSortChange = new EventEmitter();
        /**
         * 表格单元格点击事件
         */
        this.cellClick = new EventEmitter();
        /**
         * 表格单元格双击事件
         */
        this.cellDBClick = new EventEmitter();
        /**
         * 表格行点击事件
         */
        this.rowClick = new EventEmitter();
        /**
         * 表格行双击事件
         */
        this.rowDBClick = new EventEmitter();
        /**
         * 行detail toggle事件
         */
        this.detialToggle = new EventEmitter();
        /**
         * 表格单元格开始编辑事件
         */
        this.cellEditStart = new EventEmitter();
        /**
         * 表格单元格结束编辑事件
         */
        this.cellEditEnd = new EventEmitter();
        /**
         * 某行的勾选状态变化事件
         */
        this.rowCheckChange = new EventEmitter();
        /**
         * 当前页码全勾选状态变化事件
         */
        this.checkAllChange = new EventEmitter();
        /**
         * 页码变化事件
         */
        this.pageIndexChange = new EventEmitter();
        /**
         * 延迟懒加载完成事件
         */
        this.loadMore = new EventEmitter();
        /**
         * 列宽变化事件
         */
        this.resize = new EventEmitter();
        /**
         * 当前表格层级，默认为0，在树形表格场景下自增长
         */
        this.tableLevel = 0;
        /**
         * 配置树形表格的父子选中是否互相关联
         * upward：选中子关联父
         * downward： 选中父关联子
         */
        this.checkableRelation = { upward: true, downward: true };
        /**
         * 子列表关闭事件
         */
        this.childrenTableClose = new EventEmitter();
        /**
         * 全部子列表关闭事件
         */
        this.allChildrenTableClose = new EventEmitter();
        this._dataSource = [];
        this._pageAllChecked = false;
        this.selectable = true;
        this.allChecked = [];
        this.documentClickEvent = new EventEmitter();
        this.cellEditorClickEvent = new EventEmitter();
        this._hideColumn = [];
        this._lazy = false;
        this.scrollStream = new EventEmitter();
        this.searchQueryChange = new EventEmitter();
        this.halfChecked = false;
        this.tableStatusEnum = {
            open: true,
            close: false
        };
        this.scrollY = 0;
        // 判断数据是否存在选中状态
        this.hasChecked = (/**
         * @param {?} data
         * @return {?}
         */
        function (data) {
            if (data.$checked) {
                return true;
            }
            if (data.children) {
                return data.children.some(_this.hasChecked);
            }
        });
        // 判断数据是否存在未选中状态
        this.hasUnChecked = (/**
         * @param {?} data
         * @return {?}
         */
        function (data) {
            if (!data.$checked) {
                return true;
            }
            if (data.children) {
                return data.children.some(_this.hasUnChecked);
            }
        });
    }
    Object.defineProperty(DataTableComponent.prototype, "resizeBar", {
        set: /**
         * @param {?} content
         * @return {?}
         */
        function (content) {
            var _this = this;
            setTimeout((/**
             * @return {?}
             */
            function () {
                _this.resizeBarRefElement = content;
                if (!_this.changeDetectorRef['destroyed']) {
                    _this.changeDetectorRef.detectChanges();
                }
            }));
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DataTableComponent.prototype, "dataSource", {
        get: /**
         * @return {?}
         */
        function () {
            return this._dataSource;
        },
        set: /**
         * @param {?} dataSource
         * @return {?}
         */
        function (dataSource) {
            if (null === dataSource || !dataSource) {
                dataSource = [];
            }
            this._dataSource = dataSource;
            /** @type {?} */
            var hasChecked = this.dataSource.some(this.hasChecked);
            /** @type {?} */
            var hasUnChecked = this.dataSource.some(this.hasUnChecked);
            this._pageAllChecked = dataSource && dataSource.length > 0 && !hasUnChecked;
            this.halfChecked = hasChecked && hasUnChecked;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DataTableComponent.prototype, "hideColumn", {
        get: /**
         * @return {?}
         */
        function () {
            return this._hideColumn;
        },
        set: /**
         * @param {?} hideColume
         * @return {?}
         */
        function (hideColume) {
            this._hideColumn = hideColume;
            if (this._columns) {
                this.updateColumns();
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DataTableComponent.prototype, "pager", {
        get: /**
         * @return {?}
         */
        function () {
            return this._pager;
        },
        set: /**
         * @param {?} pager
         * @return {?}
         */
        function (pager) {
            if (pager === undefined || pager === null) {
                return;
            }
            else {
                this._pager = {
                    total: pager.total,
                    pageIndex: pager.pageIndex || 1,
                    pageSize: pager.pageSize || 10,
                    maxItems: pager.maxItems || 8,
                    selectDirection: pager.selectDirection || 'auto'
                };
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DataTableComponent.prototype, "pageAllChecked", {
        get: /**
         * @return {?}
         */
        function () {
            return this._pageAllChecked;
        },
        set: /**
         * @param {?} pageAllChecked
         * @return {?}
         */
        function (pageAllChecked) {
            if (this.dataSource) {
                this._dataSource = this.setCheckedStatus(this.dataSource, pageAllChecked);
            }
            this._pageAllChecked = pageAllChecked;
            this.halfChecked = this.dataSource.some(this.hasChecked) && this.dataSource.some(this.hasUnChecked);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DataTableComponent.prototype, "lazy", {
        get: /**
         * @return {?}
         */
        function () {
            return this._lazy;
        },
        set: /**
         * @param {?} lazy
         * @return {?}
         */
        function (lazy) {
            this._lazy = lazy;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @private
     * @return {?}
     */
    DataTableComponent.prototype.getColumns = /**
     * @private
     * @return {?}
     */
    function () {
        var _this = this;
        /** @type {?} */
        var cols = this.columns
            .filter((/**
         * @param {?} column
         * @return {?}
         */
        function (column) {
            return !_this.hideColumn.some((/**
             * @param {?} field
             * @return {?}
             */
            function (field) { return column.field === field; }));
        }));
        cols.sort((/**
         * @param {?} first
         * @param {?} second
         * @return {?}
         */
        function (first, second) { return first.order - second.order; }));
        return cols;
    };
    // life hook start
    // life hook start
    /**
     * @return {?}
     */
    DataTableComponent.prototype.ngOnInit = 
    // life hook start
    /**
     * @return {?}
     */
    function () {
        var _this = this;
        if (this.lazy) {
            this.pager = null;
        }
        this.setupScrollEvent();
        this.ngZone.runOutsideAngular((/**
         * @return {?}
         */
        function () {
            document.addEventListener('click', _this.onDocumentClick.bind(_this));
            window.addEventListener('wheel', _this.onWinScroll.bind(_this));
        }));
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.onDocumentClick = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        this.documentClickEvent.emit($event);
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.onWinScroll = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        var _this = this;
        this.ngZone.run((/**
         * @return {?}
         */
        function () {
            _this.scrollStream.emit($event);
        }));
    };
    /**
     * @return {?}
     */
    DataTableComponent.prototype.ngAfterContentInit = /**
     * @return {?}
     */
    function () {
        var _this = this;
        this.updateColumns();
        this.columns.forEach((/**
         * @param {?} col
         * @return {?}
         */
        function (col) {
            col.orderChange.subscribe((/**
             * @param {?} order
             * @return {?}
             */
            function (order) {
                _this.updateColumns();
            }));
        }));
        this.columns.changes.subscribe((/**
         * @return {?}
         */
        function () {
            _this.updateColumns();
        }));
    };
    /**
     * @private
     * @return {?}
     */
    DataTableComponent.prototype.updateColumns = /**
     * @private
     * @return {?}
     */
    function () {
        this._columns = this.getColumns();
    };
    /**
     * @private
     * @return {?}
     */
    DataTableComponent.prototype.getScrollbarWidth = /**
     * @private
     * @return {?}
     */
    function () {
        if (this.tableBodyEl) {
            /** @type {?} */
            var inner = this.tableBodyEl.nativeElement.parentNode;
            /** @type {?} */
            var outer = inner.parentNode;
            // Calculating difference between container's full width and the child width
            return (outer.offsetWidth - inner.offsetWidth);
        }
    };
    /**
     * @return {?}
     */
    DataTableComponent.prototype.ngOnDestroy = /**
     * @return {?}
     */
    function () {
        this.unSubscription();
    };
    /**
     * @param {?} column
     * @return {?}
     */
    DataTableComponent.prototype.onHandleSort = /**
     * @param {?} column
     * @return {?}
     */
    function (column) {
        // set column direction
        for (var i = 0; i < this.multiSort.length; i++) {
            if (this.multiSort[i].field === column.field) {
                this.multiSort[i].direction = column.direction;
                break;
            }
        }
        if (this.multiSort) {
            /** @type {?} */
            var multiSortIndex = this.multiSort.findIndex((/**
             * @param {?} item
             * @return {?}
             */
            function (item) { return item.field === column.field; }));
            if (multiSortIndex !== -1) {
                this.multiSort.splice(multiSortIndex, 1);
            }
            if (column.direction === '') {
                this.multiSortChange.emit(this.multiSort);
                return;
            }
            if (!this.onlyOneColumnSort) {
                this.multiSort.push(column);
            }
            else {
                this.multiSort = [column];
            }
        }
        else {
            this.multiSort = [column];
        }
        this.multiSortChange.emit(this.multiSort);
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.onCellClick = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        var _this = this;
        this.selectedRowItem = $event.rowItem;
        this.selectedColumnItem = $event.column;
        this.ngZone.run((/**
         * @return {?}
         */
        function () {
            _this.cellClick.emit($event);
        }));
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.onCellEditStart = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        this.isCellEdit = true;
        this.cellEditStart.emit($event);
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.onCellEditEnd = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        this.isCellEdit = false;
        this.cellEditEnd.emit($event);
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.onCellDBClick = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        var _this = this;
        this.ngZone.run((/**
         * @return {?}
         */
        function () {
            _this.cellDBClick.emit($event);
        }));
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.onRowClick = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        var _this = this;
        this.selectedRowItem = $event.rowItem;
        this.ngZone.run((/**
         * @return {?}
         */
        function () {
            _this.rowClick.emit($event);
        }));
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.onRowDBClick = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        var _this = this;
        this.ngZone.run((/**
         * @return {?}
         */
        function () {
            _this.rowDBClick.emit($event);
        }));
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.onDetailToggle = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        this.detialToggle.emit($event);
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.onRowCheckChange = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        // 处理children的选中
        if ($event.rowItem.children && this.checkableRelation.downward) {
            this.setCheckedStatus($event.rowItem.children, $event.checked);
        }
        // 处理parents的选中
        if (this.checkableRelation.upward) {
            /** @type {?} */
            var nestedIndexArray = $event.nestedIndex.split(',');
            nestedIndexArray.shift();
            /** @type {?} */
            var nestedIndexArrayToInt = nestedIndexArray.map((/**
             * @param {?} value
             * @return {?}
             */
            function (value) {
                // tslint:disable-next-line:radix
                return parseInt(value);
            }));
            // 通过选中行的父级索引设置父的选中状态
            this.setParentCheckStatus(nestedIndexArrayToInt);
        }
        // 处理整个table header的选中
        /** @type {?} */
        var hasChecked = this.dataSource.some(this.hasChecked);
        if ($event) {
            /** @type {?} */
            var hasUnChecked = this.dataSource.some(this.hasUnChecked);
            this._pageAllChecked = !hasUnChecked;
            this.halfChecked = hasChecked && hasUnChecked;
        }
        else {
            this._pageAllChecked = false;
            this.halfChecked = hasChecked;
        }
        this.rowCheckChange.emit($event);
    };
    /**
     * @private
     * @param {?} nestedIndex
     * @return {?}
     */
    DataTableComponent.prototype.setParentCheckStatus = /**
     * @private
     * @param {?} nestedIndex
     * @return {?}
     */
    function (nestedIndex) {
        if (nestedIndex.length > 0) {
            /** @type {?} */
            var topIndex = nestedIndex[0];
            /** @type {?} */
            var topParent = this.dataSource[topIndex];
            /** @type {?} */
            var argNestedIndex = __spread(nestedIndex);
            argNestedIndex.shift();
            /** @type {?} */
            var lastParent = this.findLastParent(topParent, argNestedIndex);
            this.setSelfCheckStatus(lastParent);
            nestedIndex.pop();
            if (nestedIndex.length > 0) {
                this.setParentCheckStatus(nestedIndex);
            }
        }
    };
    /**
     * @private
     * @param {?} source
     * @param {?} indexArray
     * @return {?}
     */
    DataTableComponent.prototype.findLastParent = /**
     * @private
     * @param {?} source
     * @param {?} indexArray
     * @return {?}
     */
    function (source, indexArray) {
        if (source && indexArray.length > 0) {
            /** @type {?} */
            var topIndex = indexArray[0];
            /** @type {?} */
            var topParent = source.children[topIndex];
            indexArray.shift();
            return this.findLastParent(topParent, indexArray);
        }
        else {
            return source;
        }
    };
    /**
     * @private
     * @param {?} data
     * @return {?}
     */
    DataTableComponent.prototype.setSelfCheckStatus = /**
     * @private
     * @param {?} data
     * @return {?}
     */
    function (data) {
        if (data && data.children) {
            /** @type {?} */
            var hasUnChecked = data.children.some((/**
             * @param {?} child
             * @return {?}
             */
            function (child) {
                return !child.$checked;
            }));
            /** @type {?} */
            var hasChecked = data.children.some((/**
             * @param {?} child
             * @return {?}
             */
            function (child) {
                return child.$checked || child.$halfChecked;
            }));
            data.$checked = !hasUnChecked;
            data.$halfChecked = hasUnChecked && hasChecked;
        }
    };
    /**
     * @private
     * @param {?} data
     * @param {?} checked
     * @return {?}
     */
    DataTableComponent.prototype.setCheckedStatus = /**
     * @private
     * @param {?} data
     * @param {?} checked
     * @return {?}
     */
    function (data, checked) {
        var _this = this;
        return data.map((/**
         * @param {?} item
         * @return {?}
         */
        function (item) {
            if (!item.$disabled) {
                item.$checked = checked;
                item.$halfChecked = false;
            }
            if (item.children) {
                item.children = _this.setCheckedStatus(item.children, checked);
            }
            return item;
        }));
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.onCheckAllChange = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        this.pageAllChecked = $event;
        this.checkAllChange.emit($event);
        // this.changeDetectorRef.markForCheck();
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.onSearchQueryChange = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        this.searchQueryChange.emit($event);
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.onPageChange = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        this.pageIndexChange.emit({ pageIndex: $event, pageSize: this.pager.pageSize });
    };
    /**
     * @return {?}
     */
    DataTableComponent.prototype.getSelectedRowItem = /**
     * @return {?}
     */
    function () {
        return this.selectedRowItem;
    };
    /**
     * @param {?} complete
     * @return {?}
     */
    DataTableComponent.prototype.loadFinish = /**
     * @param {?} complete
     * @return {?}
     */
    function (complete) {
        var _this = this;
        if (complete) {
            return this.unSubscription();
        }
        setTimeout((/**
         * @param {?} _
         * @return {?}
         */
        function (_) { return _this.onWinScroll(null); }), 300);
    };
    /**
     * @return {?}
     */
    DataTableComponent.prototype.onScrollChange = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var winHeight = this.windowRef.innerHeight;
        /** @type {?} */
        var clientRect = this.windowRef.getBoundingClientRect(this.elementRef);
        if (clientRect && winHeight - clientRect.bottom >= 40) {
            this.loadMore.emit(this);
        }
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.beginResizeHandlerEvent = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        this.onDocumentClick($event);
    };
    /**
     * @param {?} __0
     * @return {?}
     */
    DataTableComponent.prototype.onResizingFixedHandler = /**
     * @param {?} __0
     * @return {?}
     */
    function (_a) {
        var _this = this;
        var column = _a.column, width = _a.width, nextElementWidth = _a.nextElementWidth;
        this._columns = this._columns.map((/**
         * @param {?} _column
         * @param {?} index
         * @return {?}
         */
        function (_column, index) {
            if (_column.field === column.field) {
                _this.ngZone.run((/**
                 * @return {?}
                 */
                function () {
                    if (index + 1 < _this._columns.length && _this._columns[index + 1].width && _column.width) {
                        _this._columns[index + 1].width = parseInt(nextElementWidth, 10) + 'px';
                    }
                    _column.width = width + 'px';
                }));
                return _column;
            }
            return _column;
        }));
    };
    /**
     * @param {?} __0
     * @return {?}
     */
    DataTableComponent.prototype.handleDragTable = /**
     * @param {?} __0
     * @return {?}
     */
    function (_a) {
        var _this = this;
        var from = _a.from, to = _a.to;
        /** @type {?} */
        var sortArray = (/**
         * @param {?} array
         * @param {?} fromE
         * @param {?} toE
         * @return {?}
         */
        function (array, fromE, toE) {
            if (fromE < toE) {
                /** @type {?} */
                var fromEData_1 = array[fromE];
                var _loop_1 = function (i) {
                    if (i >= fromE && i < toE) {
                        _this.ngZone.run((/**
                         * @return {?}
                         */
                        function () {
                            array[i] = array[i + 1];
                        }));
                    }
                };
                for (var i = 0; i < array.length; i++) {
                    _loop_1(i);
                }
                _this.ngZone.run((/**
                 * @return {?}
                 */
                function () {
                    array[toE] = fromEData_1;
                }));
            }
            if (fromE > toE) {
                /** @type {?} */
                var fromEData = array[fromE];
                for (var i = array.length; i > 0; i--) {
                    if (i <= fromE && i > toE) {
                        array[i] = array[i - 1];
                    }
                }
                array[toE] = fromEData;
            }
        });
        sortArray(this._columns, from, to);
        this._columns.forEach((/**
         * @param {?} item
         * @param {?} index
         * @return {?}
         */
        function (item, index) {
            item.order = index;
        }));
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    DataTableComponent.prototype.onResizeHandler = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        var _this = this;
        var width = $event.width, field = $event.field, isUserDefined = $event.isUserDefined, nextElementWidth = $event.nextElementWidth;
        this._columns = this._columns.map((/**
         * @param {?} column
         * @param {?} index
         * @return {?}
         */
        function (column, index) {
            if (column.field === field) {
                _this.ngZone.run((/**
                 * @return {?}
                 */
                function () {
                    if (index + 1 < _this._columns.length && _this._columns[index + 1].width && column.width) {
                        _this._columns[index + 1].width = parseInt(nextElementWidth, 10) + 'px';
                    }
                    column.width = parseInt(width, 10) + 'px';
                    /** @type {?} */
                    var columnResizeEventArg = { currentColumn: column, nextColumn: _this._columns[index + 1] };
                    _this.resize.emit(columnResizeEventArg);
                }));
                return column;
            }
            return column;
        }));
        this.changeDetectorRef.markForCheck();
    };
    /**
     * @param {?} event
     * @return {?}
     */
    DataTableComponent.prototype.onBodyScroll = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        /** @type {?} */
        var target = (/** @type {?} */ (event.target));
        if (this.isCellEdit) {
            // Y轴滚动距离超过tr高度时取消目前编辑状态
            if (this.scrollY === 0) {
                this.scrollY = target.scrollTop;
            }
            /** @type {?} */
            var offset = target.scrollTop - this.scrollY;
            if (offset > 40 || offset < -40) {
                this.cancelEditingStatus();
                this.scrollY = 0;
            }
        }
        /** @type {?} */
        var scrollLeft = target.scrollLeft;
        if (scrollLeft === 0) {
            if (target.clientWidth === target.scrollWidth) {
                this.setScrollViewClass('none');
            }
            else {
                this.setScrollViewClass('left');
            }
        }
        else if (scrollLeft + target.clientWidth === target.scrollWidth) {
            this.setScrollViewClass('right');
        }
        else {
            this.setScrollViewClass('middle');
        }
        if (this.fixHeader) {
            ((/** @type {?} */ (this.fixHeaderContainerRefElement.nativeElement))).scrollLeft = scrollLeft;
        }
    };
    /**
     * @private
     * @param {?} position
     * @return {?}
     */
    DataTableComponent.prototype.setScrollViewClass = /**
     * @private
     * @param {?} position
     * @return {?}
     */
    function (position) {
        /** @type {?} */
        var element = this.tableViewRefElement.nativeElement;
        /** @type {?} */
        var className = 'devui-talbe-scorll-' + position;
        /** @type {?} */
        var elClassList = element.classList;
        if (!elClassList.contains(className)) {
            for (var index = 0; index < elClassList.length; index++) {
                /** @type {?} */
                var clName = elClassList[index];
                if (clName.startsWith('devui-talbe-scorll-')) {
                    this.renderer.removeClass(element, clName);
                }
            }
            this.renderer.addClass(element, className);
        }
    };
    /**
     * @private
     * @return {?}
     */
    DataTableComponent.prototype.unSubscription = /**
     * @private
     * @return {?}
     */
    function () {
        if (this.subscription) {
            this.subscription.unsubscribe();
            this.subscription = null;
        }
        if (this.colSubscription) {
            this.colSubscription.unsubscribe();
            this.colSubscription = null;
        }
    };
    /**
     * @private
     * @return {?}
     */
    DataTableComponent.prototype.setupScrollEvent = /**
     * @private
     * @return {?}
     */
    function () {
        var _this = this;
        if (!this.subscription) {
            this.subscription = this.registerOnScrollStream(this.scrollStream)
                .subscribe((/**
             * @param {?} _
             * @return {?}
             */
            function (_) { return _this.onScrollChange(); }));
        }
    };
    /**
     * @private
     * @param {?} scrollStream
     * @return {?}
     */
    DataTableComponent.prototype.registerOnScrollStream = /**
     * @private
     * @param {?} scrollStream
     * @return {?}
     */
    function (scrollStream) {
        return scrollStream
            .pipe(debounceTime(300), distinctUntilChanged());
    };
    /**
     * @param {?} rowItem
     * @param {?} status
     * @return {?}
     */
    DataTableComponent.prototype.onToggleChildrenTable = /**
     * @param {?} rowItem
     * @param {?} status
     * @return {?}
     */
    function (rowItem, status) {
        var _this = this;
        if (status === this.tableStatusEnum.open) {
            /** @type {?} */
            var loadChildrenResult = Promise.resolve(true);
            if (this.loadChildrenTable) {
                loadChildrenResult = this.loadChildrenTable(rowItem);
            }
            loadChildrenResult.then((/**
             * @return {?}
             */
            function () {
                // 异步加载子表格是检查选中状态
                if (rowItem.$checked && _this.checkableRelation.downward) {
                    _this.setCheckedStatus(rowItem.children, rowItem.$checked);
                }
            }));
        }
        else {
            this.childrenTableClose.emit(rowItem);
        }
    };
    /**
     * @private
     * @param {?} data
     * @param {?} open
     * @return {?}
     */
    DataTableComponent.prototype.setChildrenToogleStatus = /**
     * @private
     * @param {?} data
     * @param {?} open
     * @return {?}
     */
    function (data, open) {
        var _this = this;
        return data.map((/**
         * @param {?} item
         * @return {?}
         */
        function (item) {
            if (item.children) {
                item.$isChildTableOpen = open;
                item.children = _this.setChildrenToogleStatus(item.children, open);
            }
            return item;
        }));
    };
    // 切换表头的子表格展开收起
    // 切换表头的子表格展开收起
    /**
     * @param {?} status
     * @return {?}
     */
    DataTableComponent.prototype.onToggleAllChildrenTable = 
    // 切换表头的子表格展开收起
    /**
     * @param {?} status
     * @return {?}
     */
    function (status) {
        var _this = this;
        if (status === this.tableStatusEnum.open) {
            /** @type {?} */
            var loadAllChildrenResult = Promise.resolve(true);
            if (this.loadAllChildrenTable) {
                loadAllChildrenResult = this.loadAllChildrenTable();
            }
            loadAllChildrenResult.then((/**
             * @return {?}
             */
            function () {
                _this.dataSource.forEach((/**
                 * @param {?} item
                 * @return {?}
                 */
                function (item) {
                    if (item.$checked && item.children) {
                        _this.setCheckedStatus(item.children, true);
                    }
                }));
                _this.setChildrenToogleStatus(_this.dataSource, status);
            }));
        }
        else {
            this.setChildrenToogleStatus(this.dataSource, status);
            this.allChildrenTableClose.emit();
        }
    };
    /**
     * @return {?}
     */
    DataTableComponent.prototype.cancelEditingStatus = /**
     * @return {?}
     */
    function () {
        this.documentClickEvent.emit('cancel');
    };
    /**