@c-standard/angular-devui-extension/fesm2015/c-standard-angular-devui-extension-data-grid.mjs

an extensional components lib for devui

import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
import { Observable } from 'rxjs';
import { isEmpty, remove, find, isUndefined, isNull } from 'lodash-es';
import { DataStore } from '@c-standard/angular-devui-extension/data';
import { TemplateDirective } from '@c-standard/angular-devui-extension/template';
import * as i1 from 'ng-devui';
import { DataTableModule, TooltipModule, PaginationModule, LoadingModule, DragDropModule, CheckBoxModule } from 'ng-devui';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { CdkTableModule } from '@angular/cdk/table';

class DataGridComponent {
    constructor(ref) {
        this.ref = ref;
        this.sortMode = 'local';
        this.showCheckBox = false;
        this.showNumberColumn = true;
        this.draggable = false;
        this.selectionMode = 'multiple';
        this.scrollable = true;
        this.sortable = false;
        this.headerFilter = false;
        this.enablePaging = false;
        this.striped = false;
        this.border = '';
        this.loading = false;
        this.clickToSelect = false;
        // 触发事件
        /**
         * 1. 初始化事件
         * 2. 行选中事件
         * 3. 行点击事件
         * 4. 列点击事件
         */
        this.initialized = new EventEmitter();
        this.rowClick = new EventEmitter();
        this.rowDBClick = new EventEmitter();
        this.sortChange = new EventEmitter();
        this.rowCheckedChange = new EventEmitter();
        this.rowDrop = new EventEmitter();
        // todo 生成table的id 拖拽的scope方式一个页面加载多个table时冲突问题
        // 全选框默认值
        this.pageAllChecked = false;
        this.halfChecked = false;
        // 表格数据
        this.dataList = [];
        // 表格数据是否为空
        this.dataEmpty = false;
        this.sorts = [];
        this.filters = [];
        this.pager = {
            total: 0,
            pageIndex: 1,
            pageSize: 10,
        };
        // 选中所有
        this.checked = (data) => {
            data.$checked = true;
        };
        // 取消选中所有
        this.unChecked = (data) => {
            data.$checked = false;
        };
        // 判断数据是否存在选中状态
        this.hasChecked = (data) => {
            return data.$checked;
        };
        // 判断数据是否存在未选中状态
        this.hasUnChecked = (data) => {
            return !data.$checked;
        };
    }
    get dataSource() {
        return this._dataSource || [];
    }
    set dataSource(value) {
        this._dataSource = value;
        if (this.dataSource instanceof Array) {
            this.dataList = this.dataSource;
        }
    }
    get templates() {
        if (this.definitions != null) {
            const templates = {};
            for (const definition of this.definitions.toArray()) {
                templates[definition.template] = definition.templateRef;
            }
            return templates;
        }
        else {
            return {};
        }
    }
    ngOnInit() {
        // 加载数据
        this.loadData();
        // 组件初始化事件
        this.initialized.emit({
            element: this.ref,
            component: this,
        });
    }
    ngAfterContentInit() {
        for (const definition of this.definitions.toArray()) {
            this.templates[definition.template] = definition.templateRef;
        }
    }
    // 行点击事件
    onRowClick(e, rowData) {
        if (this.clickToSelect) {
            this.dataList.filter((t) => t !== e).forEach(this.unChecked);
            rowData['$checked'] = true;
        }
        this.rowClick.emit({
            event: e,
            data: rowData,
        });
    }
    // 行双击事件
    onRowDBClick(e, rowData) {
        this.rowDBClick.emit({
            event: e,
            data: rowData,
        });
    }
    // 筛选回调事件
    onGridFilterChange(e) {
        console.log(e);
    }
    // 排序回调事件
    onGridSortChange(e, column) {
        // 排序数组
        if (isEmpty(e.direction)) {
            remove(this.sorts, (t) => t.name === column.name);
        }
        else {
            const sort = find(this.sorts, (t) => t.name == column.name);
            if (sort) {
                sort.direction = e.direction;
            }
            else {
                this.sorts.push({
                    name: column.name,
                    direction: e.direction,
                });
            }
        }
        this.sortChange.emit({
            name: column.name,
            direction: e.direction,
        });
        this.refresh();
    }
    // 分页pageSize回调事件
    onPageSizeChange() {
        this.refresh();
    }
    // 分页pageIndex回调事件
    onPageIndexChange() {
        this.refresh();
    }
    // 行拖动事件
    onDrop(e) {
        let index = e.dropIndex;
        if (this.sortMode === 'local') {
            const fromIndex = e.dragFromIndex;
            if (-1 !== index) {
                /* 修正同一个container排序，往下拖动index多了1个位置*/
                if (-1 !== fromIndex && index > fromIndex) {
                    index--;
                }
                this.dataList.splice(index, 0, fromIndex === -1 ? e.dragData : this.dataList.splice(fromIndex, 1)[0]);
            }
            else {
                this.dataList.push(e.dragData);
            }
        }
        this.rowDrop.emit({
            current: e.dragData,
            before: this.dataList[index - 1],
            after: this.dataList[index + 1],
        });
    }
    // 全选 todo选中所有数据还是分页数据
    onAllCheckBoxChange(e) {
        this.halfChecked = false;
        if (e) {
            this.dataList.forEach(this.checked);
            this.pageAllChecked = true;
        }
        else {
            this.pageAllChecked = false;
            this.dataList.forEach(this.unChecked);
        }
    }
    // 行选中
    onRowCheckBoxChange(index, record) {
        if (this.selectionMode === 'single') {
            // 单选模式
            this.dataList.filter((t) => t !== record).forEach(this.unChecked);
        }
        else {
            // 多选模式
            const hasChecked = this.dataList.some(this.hasChecked);
            const hasUnChecked = this.dataList.some(this.hasUnChecked);
            this.pageAllChecked = !hasUnChecked;
            this.halfChecked = hasChecked && hasUnChecked;
        }
        this.rowCheckedChange.emit({
            index: index,
            checked: record.$checked,
            rowItem: record,
        });
    }
    getSelectedRows() {
        var _a;
        return (_a = this.dataTable) === null || _a === void 0 ? void 0 : _a.getCheckedRows();
    }
    setFilter(f) {
        if (isUndefined(f.value) || isNull(f.value)) {
            remove(this.filters, (t) => t.name === f.name);
        }
        else {
            const ft = find(this.filters, (t) => t.name == f.name);
            if (ft) {
                ft.value = f.value;
                ft.salt = f.salt;
            }
            else {
                this.filters.push(f);
            }
        }
        this.refresh();
    }
    // 刷新数据
    refresh() {
        this.loadData();
        // this.service.loadData()
        // todo 数据刷新使用 observable订阅方式
    }
    /**
     * 私有方法
     * @private
     */
    loadData() {
        var _a, _b;
        this.dataEmpty = false;
        if (this.dataSource instanceof DataStore) {
            this.onLoading = (_b = (_a = this.dataSource).load) === null || _b === void 0 ? void 0 : _b.call(_a, {
                page: this.pager.pageIndex,
                size: this.pager.pageSize,
                filter: this.filters,
                sorts: this.sorts,
            }).subscribe((resp) => {
                this.dataEmpty = true;
                if (resp.success) {
                    this.dataList = resp.data.list;
                    this.pager.total = resp.data.count;
                }
            });
        }
        else if (this.dataSource instanceof Observable) {
            this.onLoading = this.dataSource.subscribe((resp) => {
                this.dataEmpty = true;
                if (resp.success) {
                    this.pager.total = resp.data.count;
                    this.dataList = resp.data.list;
                }
            });
        }
        else {
            this.dataEmpty = true;
            this.dataList = this.dataSource;
        }
    }
}
DataGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DataGridComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
DataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DataGridComponent, selector: "d-data-grid", inputs: { dataSource: "dataSource", className: "className", viewName: "viewName", sortMode: "sortMode", columns: "columns", showCheckBox: "showCheckBox", showNumberColumn: "showNumberColumn", draggable: "draggable", selectionMode: "selectionMode", scrollable: "scrollable", sortable: "sortable", headerFilter: "headerFilter", enablePaging: "enablePaging", striped: "striped", border: "border", loading: "loading", clickToSelect: "clickToSelect" }, outputs: { initialized: "initialized", rowClick: "rowClick", rowDBClick: "rowDBClick", sortChange: "sortChange", rowCheckedChange: "rowCheckedChange", rowDrop: "rowDrop" }, queries: [{ propertyName: "definitions", predicate: TemplateDirective }], viewQueries: [{ propertyName: "dataTable", first: true, predicate: ["DataTable"], descendants: true }], ngImport: i0, template: "<!-- \u662F\u5426\u663E\u793A\u9009\u62E9\u6846, \u662F\u5426\u8FDB\u884C\u62D6\u62FD, \u662F\u5426\u663E\u793A\u5E8F\u53F7\u5217, \u9009\u62E9\u6A21\u5F0F:\u5355\u9009\u548C\u591A\u9009 -->\r\n<div class=\"x-data-table-content\">\r\n    <div\r\n        class=\"loading-template\"\r\n        dLoading\r\n        [showLoading]=\"loading\"\r\n        [loading]=\"onLoading\"\r\n        [message]=\"'\u52A0\u8F7D\u4E2D...'\"\r\n    ></div>\r\n    <d-data-table\r\n        #DataTable\r\n        dDroppable\r\n        [borderType]=\"border\"\r\n        [dropScope]=\"'multiple-group'\"\r\n        (dropEvent)=\"onDrop($event)\"\r\n        [checkable]=\"showCheckBox\"\r\n        [dataSource]=\"dataList\"\r\n        [scrollable]=\"true\"\r\n        [fixHeader]=\"true\"\r\n        [striped]=\"striped\"\r\n        [containFixHeaderHeight]=\"true\"\r\n        [switchWhileCrossEdge]=\"true\"\r\n        tableLayout=\"fixed\"\r\n        tableHeight=\"100%\"\r\n    >\r\n        <thead dTableHead>\r\n        <tr dTableRow>\r\n            <!-- \u62D6\u62FD\u5217 -->\r\n            <th\r\n                *ngIf=\"draggable\"\r\n                class=\"default\"\r\n                style=\"text-align: center\"\r\n            >\r\n                <span class=\"title\">#</span>\r\n            </th>\r\n            <!-- \u9009\u62E9\u6846 -->\r\n            <th\r\n                *ngIf=\"showCheckBox\"\r\n                class=\"default\"\r\n                style=\"text-align: center\"\r\n            >\r\n                    <span class=\"title default-cell\">\r\n                        <d-checkbox\r\n                            *ngIf=\"selectionMode === 'multiple'\"\r\n                            [(ngModel)]=\"pageAllChecked\"\r\n                            [halfchecked]=\"halfChecked\"\r\n                            (change)=\"onAllCheckBoxChange($event)\"\r\n                        ></d-checkbox>\r\n                    </span>\r\n            </th>\r\n            <!-- i18N NumberOrder -->\r\n            <th\r\n                *ngIf=\"showNumberColumn\"\r\n                class=\"default\"\r\n                style=\"text-align: center\"\r\n            >\r\n                <span class=\"title\">\u5E8F\u53F7 </span>\r\n            </th>\r\n            <th\r\n                dHeadCell\r\n                *ngFor=\"let column of columns\"\r\n                [resizeEnabled]=\"column.resizeEnabled || false\"\r\n                (sortChange)=\"onGridSortChange($event, column)\"\r\n                [filterable]=\"false\"\r\n                [customFilterTemplate]=\"customFilterTemplate\"\r\n                (filterChange)=\"onGridFilterChange($event)\"\r\n                [sortable]=\"column.sortable || false\"\r\n            >\r\n                {{ column.caption }}\r\n            </th>\r\n        </tr>\r\n        <tr\r\n            *ngIf=\"headerFilter\"\r\n            dTableRow\r\n        >\r\n            <th\r\n                dHeadCell\r\n                *ngIf=\"draggable\"\r\n            ></th>\r\n            <th\r\n                dHeadCell\r\n                *ngIf=\"showCheckBox\"\r\n            ></th>\r\n            <th\r\n                dHeadCell\r\n                *ngIf=\"showNumberColumn\"\r\n            ></th>\r\n            <th *ngFor=\"let column of columns\">\r\n                <ng-container\r\n                    *ngIf=\"column.filterable\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: { column: column } }\"\r\n                    [ngTemplateOutlet]=\"\r\n                            templates[column.filterTemplate || ''] || defaultTemplate\r\n                        \"\r\n                >\r\n                    <ng-template #defaultTemplate></ng-template>\r\n                </ng-container>\r\n            </th>\r\n        </tr>\r\n        </thead>\r\n        <tbody dTableBody>\r\n        <ng-template\r\n            let-rowIndex=\"rowIndex\"\r\n            let-rowItem=\"rowItem\"\r\n        >\r\n            <tr\r\n                dDraggable\r\n                dTableRow\r\n                [dragData]=\"rowItem\"\r\n                [draggable]=\"draggable\"\r\n                [dragScope]=\"'multiple-group'\"\r\n                [enableDragFollow]=\"true\"\r\n                [dragFollowOptions]=\"{ appendToBody: true }\"\r\n                [dragHandle]=\"'.table-drag-row-handle, .table-drag-row-handle *'\"\r\n                [ngClass]=\"{ 'table-row-selected': rowItem['$checked'] }\"\r\n                (click)=\"onRowClick($event, rowItem)\"\r\n                (dblclick)=\"onRowDBClick($event, rowItem)\"\r\n            >\r\n                <td\r\n                    *ngIf=\"draggable\"\r\n                    class=\"table-drag-row-handle default\"\r\n                >\r\n                    <i class=\"icon-drag-small\"></i>\r\n                </td>\r\n                <td\r\n                    *ngIf=\"showCheckBox\"\r\n                    class=\"default\"\r\n                    style=\"padding: 0; text-align: center\"\r\n                >\r\n                        <span>\r\n                            <d-checkbox\r\n                                [(ngModel)]=\"rowItem['$checked']\"\r\n                                (change)=\"onRowCheckBoxChange(rowIndex, rowItem)\"\r\n                            ></d-checkbox>\r\n                        </span>\r\n                </td>\r\n                <td\r\n                    *ngIf=\"showNumberColumn\"\r\n                    class=\"default\"\r\n                >\r\n                    {{ rowIndex + 1 }}\r\n                </td>\r\n                <td\r\n                    dTableCell\r\n                    *ngFor=\"let column of columns\"\r\n                >\r\n                    <ng-container *ngIf=\"column.template; else noCustomTemplate\">\r\n                        <ng-container\r\n                            [ngTemplateOutletContext]=\"{\r\n                                    $implicit: {\r\n                                        row: rowItem,\r\n                                        cell: rowItem[column.name],\r\n                                        column: column\r\n                                    }\r\n                                }\"\r\n                            [ngTemplateOutlet]=\"\r\n                                    templates[column.template || ''] || defaultTemplate\r\n                                \"\r\n                        >\r\n                            <ng-template #defaultTemplate>\r\n                                {{ rowItem[column.name] }}\r\n                            </ng-template>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #noCustomTemplate>\r\n                        <span *ngIf=\"column.format\">{{column.format(rowItem[column.name])}}</span>\r\n                        <span *ngIf=\"!column.format\">{{ rowItem[column.name] }}</span>\r\n                    </ng-template>\r\n                </td>\r\n            </tr>\r\n        </ng-template>\r\n        </tbody>\r\n        <ng-template #noResultTemplateRef>\r\n            <div\r\n                class=\"empty-data-container\"\r\n                *ngIf=\"dataEmpty && !loading\"\r\n            >\r\n                \u65E0\u6570\u636E\r\n            </div>\r\n        </ng-template>\r\n    </d-data-table>\r\n</div>\r\n<div\r\n    *ngIf=\"enablePaging\"\r\n    class=\"x-data-table-pagination\"\r\n>\r\n    <d-pagination\r\n        [(pageIndex)]=\"pager.pageIndex\"\r\n        [(pageSize)]=\"pager.pageSize\"\r\n        [canChangePageSize]=\"true\"\r\n        [canJumpPage]=\"true\"\r\n        [canViewTotal]=\"true\"\r\n        [maxItems]=\"4\"\r\n        (pageSizeChange)=\"onPageSizeChange()\"\r\n        (pageIndexChange)=\"onPageIndexChange()\"\r\n        [total]=\"pager.total\"\r\n    >\r\n    </d-pagination>\r\n</div>\r\n\r\n<!-- \u5B9A\u4E49\u5E38\u7528\u7684\u8FC7\u6EE4\u6A21\u677F\uFF0Cstring\u7C7B\u578B\uFF0Cnumber\u7C7B\u578B\uFF0C Boolean\u7C7B\u578B \u548C \u65F6\u95F4\u65E5\u671F\u7C7B\u578B -->\r\n<ng-template\r\n    #customFilterTemplate\r\n    let-filterList=\"filterListDisplay\"\r\n    let-dropdown=\"dropdown\"\r\n>\r\n    <ng-container\r\n        [ngTemplateOutletContext]=\"{ $implicit: { filterList: filterList, dropdown: dropdown } }\"\r\n        [ngTemplateOutlet]=\"defaultTemplate\"\r\n    >\r\n        <ng-template #defaultTemplate>\r\n            {{ 123 }}\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:120px}:host .x-data-table-content{flex:auto;display:block;position:relative;height:inherit;overflow:hidden}:host .x-data-table-content .loading-template{position:absolute!important;width:100%;height:calc(100% - 45px);margin-top:45px}:host .x-data-table-pagination{margin-top:16px;text-align:right}:host .empty-data-container{text-align:center;position:absolute;top:90px;width:100%}.default{text-align:center;width:60px;min-width:40px}.default span{display:inline-block}::ng-deep .sort-clickable{position:relative!important;top:0!important;left:0!important}::ng-deep .sort-clickable i{display:inline-block;vertical-align:middle;height:16px;margin-top:-3px}.table-column-header{-webkit-user-select:none;user-select:none}.table-data-empty-text{text-align:center;margin-top:20px}\n"], components: [{ type: i1.DataTableComponent, selector: "d-data-table", inputs: ["checkable", "headerCheckDisabled", "headerCheckVisible", "checkOptions", "showExpandToggle", "fixHeader", "scrollable", "editModel", "maxWidth", "maxHeight", "type", "rowHoveredHighlight", "generalRowHoveredData", "cssClass", "tableWidth", "tableHeight", "containFixHeaderHeight", "onlyOneColumnSort", "multiSort", "resizeable", "colDraggable", "colDropFreezeTo", "detailTemplateRef", "timeout", "showOperationArea", "showSortIcon", "showFilterIcon", "beforeCellEdit", "tableLevel", "checkableRelation", "loadChildrenTable", "loadAllChildrenTable", "virtualScroll", "headerExpandConfig", "virtualItemSize", "virtualMinBufferPx", "virtualMaxBufferPx", "lazy", "tableWidthConfig", "headerBg", "tableLayout", "borderType", "striped", "minHeight", "size", "shadowType", "tableOverflowType", "dataSource", "hideColumn", "pageAllChecked"], outputs: ["multiSortChange", "cellClick", "cellDBClick", "rowClick", "rowDBClick", "detialToggle", "cellEditStart", "cellEditEnd", "rowCheckChange", "checkAllChange", "loadMore", "resize", "childrenTableClose", "allChildrenTableClose", "tableScrollEvent", "columnDragEnd"], exportAs: ["dataTable"] }, { type: i1.TableTheadComponent, selector: "[dTableHead]", inputs: ["checkable", "checkDisabled", "checkOptions"] }, { type: i1.TableTrComponent, selector: "[dTableRow]", outputs: ["headerCheckStatusEvent", "checkStatusEvent"] }, { type: i1.CheckBoxComponent, selector: "d-checkbox", inputs: ["name", "label", "cssClass", "color", "disabled", "isShowTitle", "title", "labelTemplate", "halfchecked", "showAnimation", "beforeChange"], outputs: ["change"] }, { type: i1.TableThComponent, selector: "[dHeadCell]", inputs: ["resizeEnabled", "filterable", "beforeFilter", "customFilterTemplate", "extraFilterTemplate", "searchFn", "showFilterIcon", "filterList", "filterIconActive", "filterMultiple", "closeFilterWhenScroll", "filterBoxWidth", "filterBoxHeight", "sortable", "sortDirection", "showSortIcon", "colDraggable", "nestedColumn", "iconFoldTable", "iconUnFoldTable", "tableViewRefElement", "minWidth", "maxWidth", "fixedLeft", "fixedRight", "isLastFixedLeft", "isFirstFixedRight", "childrenTableOpen", "column"], outputs: ["filterChange", "filterToggle", "sortDirectionChange", "sortChange", "resizeEndEvent", "resizeStartEvent", "resizingEvent", "toggleChildrenTableEvent", "tapEvent"] }, { type: i1.TableTbodyComponent, selector: "[dTableBody]", inputs: ["dataSource", "rowTemplete", "nestedLayer", "nestedIndex", "virtualScroll", "tableWidthConfig", "minHeight", "minHeightStretchRow"] }, { type: i1.TableTdComponent, selector: "[dTableCell]", inputs: ["editable", "editableTip", "nestedColumn", "nestedLayer", "field", "rowItem", "fixedLeft", "fixedRight", "iconFoldTable", "iconUnFoldTable", "nestedColumnIndent", "beforeEditStart", "beforeEditEnd", "editing"], outputs: ["toggleChildTableEvent", "editStatusEvent", "editingChange"] }, { type: i1.PaginationComponent, selector: "d-pagination", inputs: ["pageSize", "pageSizeOptions", "pageSizeDirection", "pageIndex", "maxItems", "preLink", "nextLink", "size", "canJumpPage", "canChangePageSize", "canViewTotal", "cssClass", "showJumpButton", "showTruePageIndex", "id", "totalItemText", "goToText", "selectDirection", "lite", "showPageSelector", "haveConfigMenu", "autoFixPageIndex", "autoHide", "total"], outputs: ["pageIndexChange", "pageSizeChange"], exportAs: ["pagination"] }], directives: [{ type: i1.LoadingDirective, selector: "[dLoading]", inputs: ["message", "backdrop", "loadingTemplateRef", "positionType", "view", "showLoading", "loading", "zIndex"], exportAs: ["dLoading"] }, { type: i1.DroppableDirective, selector: "[dDroppable]", inputs: ["dragOverClass", "dropScope", "placeholderTag", "placeholderStyle", "placeholderText", "allowDropOnItem", "dragOverItemClass", "nestingTargetRect", "switchWhileCrossEdge", "defaultDropPosition", "dropSortCountSelector", "dropSortVirtualScrollOption"], outputs: ["dragEnterEvent", "dragOverEvent", "dragLeaveEvent", "dropEvent"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.DraggableDirective, selector: "[dDraggable]", inputs: ["dragData", "dragHandle", "dragEffect", "dragScope", "dragHandleClass", "dragOverClass", "disabled", "enableDragFollow", "dragFollowOptions", "originPlaceholder", "dragIdentity", "dragItemParentName", "dragItemChildrenName"], outputs: ["dragStartEvent", "dragEvent", "dragEndEvent", "dropEndEvent"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DataGridComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-data-grid', template: "<!-- \u662F\u5426\u663E\u793A\u9009\u62E9\u6846, \u662F\u5426\u8FDB\u884C\u62D6\u62FD, \u662F\u5426\u663E\u793A\u5E8F\u53F7\u5217, \u9009\u62E9\u6A21\u5F0F:\u5355\u9009\u548C\u591A\u9009 -->\r\n<div class=\"x-data-table-content\">\r\n    <div\r\n        class=\"loading-template\"\r\n        dLoading\r\n        [showLoading]=\"loading\"\r\n        [loading]=\"onLoading\"\r\n        [message]=\"'\u52A0\u8F7D\u4E2D...'\"\r\n    ></div>\r\n    <d-data-table\r\n        #DataTable\r\n        dDroppable\r\n        [borderType]=\"border\"\r\n        [dropScope]=\"'multiple-group'\"\r\n        (dropEvent)=\"onDrop($event)\"\r\n        [checkable]=\"showCheckBox\"\r\n        [dataSource]=\"dataList\"\r\n        [scrollable]=\"true\"\r\n        [fixHeader]=\"true\"\r\n        [striped]=\"striped\"\r\n        [containFixHeaderHeight]=\"true\"\r\n        [switchWhileCrossEdge]=\"true\"\r\n        tableLayout=\"fixed\"\r\n        tableHeight=\"100%\"\r\n    >\r\n        <thead dTableHead>\r\n        <tr dTableRow>\r\n            <!-- \u62D6\u62FD\u5217 -->\r\n            <th\r\n                *ngIf=\"draggable\"\r\n                class=\"default\"\r\n                style=\"text-align: center\"\r\n            >\r\n                <span class=\"title\">#</span>\r\n            </th>\r\n            <!-- \u9009\u62E9\u6846 -->\r\n            <th\r\n                *ngIf=\"showCheckBox\"\r\n                class=\"default\"\r\n                style=\"text-align: center\"\r\n            >\r\n                    <span class=\"title default-cell\">\r\n                        <d-checkbox\r\n                            *ngIf=\"selectionMode === 'multiple'\"\r\n                            [(ngModel)]=\"pageAllChecked\"\r\n                            [halfchecked]=\"halfChecked\"\r\n                            (change)=\"onAllCheckBoxChange($event)\"\r\n                        ></d-checkbox>\r\n                    </span>\r\n            </th>\r\n            <!-- i18N NumberOrder -->\r\n            <th\r\n                *ngIf=\"showNumberColumn\"\r\n                class=\"default\"\r\n                style=\"text-align: center\"\r\n            >\r\n                <span class=\"title\">\u5E8F\u53F7 </span>\r\n            </th>\r\n            <th\r\n                dHeadCell\r\n                *ngFor=\"let column of columns\"\r\n                [resizeEnabled]=\"column.resizeEnabled || false\"\r\n                (sortChange)=\"onGridSortChange($event, column)\"\r\n                [filterable]=\"false\"\r\n                [customFilterTemplate]=\"customFilterTemplate\"\r\n                (filterChange)=\"onGridFilterChange($event)\"\r\n                [sortable]=\"column.sortable || false\"\r\n            >\r\n                {{ column.caption }}\r\n            </th>\r\n        </tr>\r\n        <tr\r\n            *ngIf=\"headerFilter\"\r\n            dTableRow\r\n        >\r\n            <th\r\n                dHeadCell\r\n                *ngIf=\"draggable\"\r\n            ></th>\r\n            <th\r\n                dHeadCell\r\n                *ngIf=\"showCheckBox\"\r\n            ></th>\r\n            <th\r\n                dHeadCell\r\n                *ngIf=\"showNumberColumn\"\r\n            ></th>\r\n            <th *ngFor=\"let column of columns\">\r\n                <ng-container\r\n                    *ngIf=\"column.filterable\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: { column: column } }\"\r\n                    [ngTemplateOutlet]=\"\r\n                            templates[column.filterTemplate || ''] || defaultTemplate\r\n                        \"\r\n                >\r\n                    <ng-template #defaultTemplate></ng-template>\r\n                </ng-container>\r\n            </th>\r\n        </tr>\r\n        </thead>\r\n        <tbody dTableBody>\r\n        <ng-template\r\n            let-rowIndex=\"rowIndex\"\r\n            let-rowItem=\"rowItem\"\r\n        >\r\n            <tr\r\n                dDraggable\r\n                dTableRow\r\n                [dragData]=\"rowItem\"\r\n                [draggable]=\"draggable\"\r\n                [dragScope]=\"'multiple-group'\"\r\n                [enableDragFollow]=\"true\"\r\n                [dragFollowOptions]=\"{ appendToBody: true }\"\r\n                [dragHandle]=\"'.table-drag-row-handle, .table-drag-row-handle *'\"\r\n                [ngClass]=\"{ 'table-row-selected': rowItem['$checked'] }\"\r\n                (click)=\"onRowClick($event, rowItem)\"\r\n                (dblclick)=\"onRowDBClick($event, rowItem)\"\r\n            >\r\n                <td\r\n                    *ngIf=\"draggable\"\r\n                    class=\"table-drag-row-handle default\"\r\n                >\r\n                    <i class=\"icon-drag-small\"></i>\r\n                </td>\r\n                <td\r\n                    *ngIf=\"showCheckBox\"\r\n                    class=\"default\"\r\n                    style=\"padding: 0; text-align: center\"\r\n                >\r\n                        <span>\r\n                            <d-checkbox\r\n                                [(ngModel)]=\"rowItem['$checked']\"\r\n                                (change)=\"onRowCheckBoxChange(rowIndex, rowItem)\"\r\n                            ></d-checkbox>\r\n                        </span>\r\n                </td>\r\n                <td\r\n                    *ngIf=\"showNumberColumn\"\r\n                    class=\"default\"\r\n                >\r\n                    {{ rowIndex + 1 }}\r\n                </td>\r\n                <td\r\n                    dTableCell\r\n                    *ngFor=\"let column of columns\"\r\n                >\r\n                    <ng-container *ngIf=\"column.template; else noCustomTemplate\">\r\n                        <ng-container\r\n                            [ngTemplateOutletContext]=\"{\r\n                                    $implicit: {\r\n                                        row: rowItem,\r\n                                        cell: rowItem[column.name],\r\n                                        column: column\r\n                                    }\r\n                                }\"\r\n                            [ngTemplateOutlet]=\"\r\n                                    templates[column.template || ''] || defaultTemplate\r\n                                \"\r\n                        >\r\n                            <ng-template #defaultTemplate>\r\n                                {{ rowItem[column.name] }}\r\n                            </ng-template>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #noCustomTemplate>\r\n                        <span *ngIf=\"column.format\">{{column.format(rowItem[column.name])}}</span>\r\n                        <span *ngIf=\"!column.format\">{{ rowItem[column.name] }}</span>\r\n                    </ng-template>\r\n                </td>\r\n            </tr>\r\n        </ng-template>\r\n        </tbody>\r\n        <ng-template #noResultTemplateRef>\r\n            <div\r\n                class=\"empty-data-container\"\r\n                *ngIf=\"dataEmpty && !loading\"\r\n            >\r\n                \u65E0\u6570\u636E\r\n            </div>\r\n        </ng-template>\r\n    </d-data-table>\r\n</div>\r\n<div\r\n    *ngIf=\"enablePaging\"\r\n    class=\"x-data-table-pagination\"\r\n>\r\n    <d-pagination\r\n        [(pageIndex)]=\"pager.pageIndex\"\r\n        [(pageSize)]=\"pager.pageSize\"\r\n        [canChangePageSize]=\"true\"\r\n        [canJumpPage]=\"true\"\r\n        [canViewTotal]=\"true\"\r\n        [maxItems]=\"4\"\r\n        (pageSizeChange)=\"onPageSizeChange()\"\r\n        (pageIndexChange)=\"onPageIndexChange()\"\r\n        [total]=\"pager.total\"\r\n    >\r\n    </d-pagination>\r\n</div>\r\n\r\n<!-- \u5B9A\u4E49\u5E38\u7528\u7684\u8FC7\u6EE4\u6A21\u677F\uFF0Cstring\u7C7B\u578B\uFF0Cnumber\u7C7B\u578B\uFF0C Boolean\u7C7B\u578B \u548C \u65F6\u95F4\u65E5\u671F\u7C7B\u578B -->\r\n<ng-template\r\n    #customFilterTemplate\r\n    let-filterList=\"filterListDisplay\"\r\n    let-dropdown=\"dropdown\"\r\n>\r\n    <ng-container\r\n        [ngTemplateOutletContext]=\"{ $implicit: { filterList: filterList, dropdown: dropdown } }\"\r\n        [ngTemplateOutlet]=\"defaultTemplate\"\r\n    >\r\n        <ng-template #defaultTemplate>\r\n            {{ 123 }}\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:120px}:host .x-data-table-content{flex:auto;display:block;position:relative;height:inherit;overflow:hidden}:host .x-data-table-content .loading-template{position:absolute!important;width:100%;height:calc(100% - 45px);margin-top:45px}:host .x-data-table-pagination{margin-top:16px;text-align:right}:host .empty-data-container{text-align:center;position:absolute;top:90px;width:100%}.default{text-align:center;width:60px;min-width:40px}.default span{display:inline-block}::ng-deep .sort-clickable{position:relative!important;top:0!important;left:0!important}::ng-deep .sort-clickable i{display:inline-block;vertical-align:middle;height:16px;margin-top:-3px}.table-column-header{-webkit-user-select:none;user-select:none}.table-data-empty-text{text-align:center;margin-top:20px}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { dataSource: [{
                type: Input
            }], className: [{
                type: Input
            }], viewName: [{
                type: Input
            }], sortMode: [{
                type: Input
            }], columns: [{
                type: Input
            }], showCheckBox: [{
                type: Input
            }], showNumberColumn: [{
                type: Input
            }], draggable: [{
                type: Input
            }], selectionMode: [{
                type: Input
            }], scrollable: [{
                type: Input
            }], sortable: [{
                type: Input
            }], headerFilter: [{
                type: Input
            }], enablePaging: [{
                type: Input
            }], striped: [{
                type: Input
            }], border: [{
                type: Input
            }], loading: [{
                type: Input
            }], clickToSelect: [{
                type: Input
            }], initialized: [{
                type: Output
            }], rowClick: [{
                type: Output
            }], rowDBClick: [{
                type: Output
            }], sortChange: [{
                type: Output
            }], rowCheckedChange: [{
                type: Output
            }], rowDrop: [{
                type: Output
            }], dataTable: [{
                type: ViewChild,
                args: ['DataTable']
            }], definitions: [{
                type: ContentChildren,
                args: [TemplateDirective]
            }] } });

class DataGridModule {
}
DataGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DataGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
DataGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DataGridModule, declarations: [DataGridComponent], imports: [CommonModule,
        CdkTableModule,
        DataTableModule,
        TooltipModule,
        PaginationModule,
        LoadingModule,
        DragDropModule,
        CheckBoxModule,
        FormsModule], exports: [DataGridComponent] });
DataGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DataGridModule, imports: [[
            CommonModule,
            CdkTableModule,
            DataTableModule,
            TooltipModule,
            PaginationModule,
            LoadingModule,
            DragDropModule,
            CheckBoxModule,
            FormsModule,
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DataGridModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        DataGridComponent,
                    ],
                    exports: [
                        DataGridComponent,
                    ],
                    imports: [
                        CommonModule,
                        CdkTableModule,
                        DataTableModule,
                        TooltipModule,
                        PaginationModule,
                        LoadingModule,
                        DragDropModule,
                        CheckBoxModule,
                        FormsModule,
                    ],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { DataGridComponent, DataGridModule };
//# sourceMappingURL=c-standard-angular-devui-extension-data-grid.mjs.map