ng-devui/fesm2022/ng-devui-data-table.mjs.map

DevUI components based on Angular

{"version":3,"file":"ng-devui-data-table.mjs","sources":["../../devui/data-table/data-table.token.ts","../../devui/data-table/data-table-row.token.ts","../../devui/data-table/force-update-reason.model.ts","../../devui/data-table/editor-host.directive.ts","../../devui/data-table/tmpl/data-table-cell-edit-tmpl.component.ts","../../devui/data-table/tmpl/data-table-cell-view-tmpl.component.ts","../../devui/data-table/tmpl/data-table-head-cell-tmpl.component.ts","../../devui/data-table/tmpl/data-table-column-tmpl.component.ts","../../devui/data-table/display-cell-value.pipe.ts","../../devui/data-table/data-table-cell.component.ts","../../devui/data-table/data-table-cell.component.html","../../devui/data-table/data-table-row.component.ts","../../devui/data-table/data-table-row.component.html","../../devui/data-table/data-table-body.component.ts","../../devui/data-table/data-table-body.component.html","../../devui/data-table/data-table.model.ts","../../devui/data-table/table/head/th/th.token.ts","../../devui/data-table/table/head/th/filter/filter.component.ts","../../devui/data-table/table/head/th/filter/filter.component.html","../../devui/data-table/table/head/th/sort/sort.component.ts","../../devui/data-table/table/head/th/sort/sort.component.html","../../devui/data-table/table/head/th/th.component.ts","../../devui/data-table/table/head/th/th.component.html","../../devui/data-table/data-table-head.component.ts","../../devui/data-table/data-table-head.component.html","../../devui/data-table/table/body/tbody.component.ts","../../devui/data-table/table/body/tbody.component.html","../../devui/data-table/table/row/tr.component.ts","../../devui/data-table/table/row/tr.component.html","../../devui/data-table/table/head/thead.component.ts","../../devui/data-table/table/head/thead.component.html","../../devui/data-table/data-table.component.ts","../../devui/data-table/data-table.component.html","../../devui/data-table/table-option-modal.component.ts","../../devui/data-table/table-option-modal.component.html","../../devui/data-table/table-option-toggle.component.ts","../../devui/data-table/table-option-toggle.component.html","../../devui/data-table/table/body/td/td.service.ts","../../devui/data-table/table/body/td/td.component.ts","../../devui/data-table/table/body/td/td.component.html","../../devui/data-table/tmpl/data-table-cell-tmpl.component.ts","../../devui/data-table/data-table.module.ts","../../devui/data-table/utils/utils.ts","../../devui/data-table/ng-devui-data-table.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const DATA_TABLE = new InjectionToken('DATA_TABLE');\n","import { InjectionToken } from '@angular/core';\n\nexport const DATA_TABLE_ROW = new InjectionToken('DATA_TABLE_ROW');\n","export enum ForceUpdateReason {\r\n  RowUpdate = 0,\r\n}\r\n","import { Directive, ViewContainerRef } from '@angular/core';\n\n@Directive({\n  selector: '[dEditorHost]',\n})\nexport class EditorDirective {\n  constructor(public viewContainerRef: ViewContainerRef) { }\n}\n","import { ChangeDetectionStrategy, Component, ContentChild, TemplateRef } from '@angular/core';\n\n@Component({\n  selector: 'd-cell-edit',\n  template: '',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DataTableCellEditTmplComponent {\n\n  @ContentChild(TemplateRef) template: TemplateRef<any>;\n\n  dataPicker;\n}\n","import { ChangeDetectionStrategy, Component, ContentChild, TemplateRef } from '@angular/core';\n\n@Component({\n  selector: 'd-cell',\n  template: '',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DataTableCellViewTmplComponent {\n\n  @ContentChild(TemplateRef) template: TemplateRef<any>;\n\n}\n","import { ChangeDetectionStrategy, Component, ContentChild, TemplateRef } from '@angular/core';\n\n@Component({\n  selector: 'd-head-cell',\n  template: '',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DataTableHeadCellTmplComponent {\n\n  @ContentChild(TemplateRef) template: TemplateRef<any>;\n\n}\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ContentChild,\r\n  EventEmitter,\r\n  Input,\r\n  OnChanges,\r\n  OnDestroy,\r\n  Output,\r\n  SimpleChanges,\r\n  TemplateRef,\r\n} from '@angular/core';\r\nimport { Observable } from 'rxjs';\r\nimport { FilterConfig } from '../data-table.model';\r\nimport { DataTableCellEditTmplComponent } from './data-table-cell-edit-tmpl.component';\r\nimport { DataTableCellViewTmplComponent } from './data-table-cell-view-tmpl.component';\r\nimport { DataTableHeadCellTmplComponent } from './data-table-head-cell-tmpl.component';\r\n\r\n@Component({\r\n  selector: 'd-column',\r\n  template: '',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class DataTableColumnTmplComponent implements OnChanges, OnDestroy {\r\n  @Input() advancedHeader: Array<{\r\n    header: string;\r\n    rowspan: number;\r\n    colspan: number;\r\n    [prop: string]: any;\r\n  }>;\r\n  @Input() headCellApplyAll = false;\r\n  @Input() maxWidth: string;\r\n  @Input() minWidth: string;\r\n  @Input() field: string;\r\n  @Input() header: string;\r\n  @Input() sortable: boolean;\r\n  @Input() editable: boolean;\r\n  @Input() filterable: boolean;\r\n  @Input() closeFilterWhenScroll: boolean;\r\n  @Input() cellClass: string;\r\n  @Input() nestedColumnIndent = 16;\r\n  @Input() width: string;\r\n  // @Input() fixed?: boolean;\r\n  @Input() fixedLeft?: string;\r\n  @Input() fixedRight?: string;\r\n  @Input() extraOptions: any;\r\n  @Input() order: number = Number.MAX_VALUE;\r\n  @Input() nestedColumn = false;\r\n  /**\r\n   * 传入筛选列表\r\n   */\r\n  @Input() filterList: Array<FilterConfig>;\r\n  @Output() filterChange = new EventEmitter<FilterConfig[]>();\r\n  @Output() filterToggle = new EventEmitter<{\r\n    isOpen: boolean;\r\n    checklist: FilterConfig[];\r\n  }>();\r\n  @Input() filterMultiple = true;\r\n  @Input() filterIconActive: boolean;\r\n  @Input() filterBoxWidth: any;\r\n  @Input() filterBoxHeight: any;\r\n  @Input() beforeFilter: (value) => boolean | Promise<boolean> | Observable<boolean>;\r\n  @ContentChild(DataTableCellViewTmplComponent) cellCmp: DataTableCellViewTmplComponent;\r\n  @ContentChild(DataTableCellEditTmplComponent) cellEditCmp: DataTableCellEditTmplComponent;\r\n  @ContentChild(DataTableHeadCellTmplComponent) headCellTmpl: DataTableHeadCellTmplComponent;\r\n  @Input() customFilterTemplate: TemplateRef<any>;\r\n  @Input() extraFilterTemplate: TemplateRef<any>;\r\n  @Input() searchFn: (term: string) => Observable<Array<any>>;\r\n  orderChange = new EventEmitter<SimpleChanges>();\r\n  widthChange = new EventEmitter<SimpleChanges>();\r\n  _formatter: (item: any, row?: any) => string;\r\n\r\n  // 鼠标是否移动到当前表头单元格\r\n  selected = false;\r\n\r\n  // @deprecated\r\n  @Input() fieldType = 'text';\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    const { order, width } = changes;\r\n    if (order) {\r\n      this.orderChange.emit(order.currentValue);\r\n    }\r\n    if (width) {\r\n      this.widthChange.emit(width.currentValue);\r\n    }\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.orderChange.unsubscribe();\r\n  }\r\n\r\n  emitFilterData(filterData) {\r\n    this.filterChange.emit(filterData);\r\n  }\r\n\r\n  emitFilterToggle(data: { isOpen: boolean; checklist: FilterConfig[] }) {\r\n    this.filterToggle.emit(data);\r\n  }\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { I18nFormat } from 'ng-devui/i18n';\nimport { formatDate } from 'ng-devui/utils';\nimport type { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';\n\n@Pipe({ name: 'disPlayCellValuePipe' })\nexport class DisPlayCellValuePipe implements PipeTransform {\n  datePicker = {\n    format: {\n      date: 'y-MM-dd',\n      time: 'y-MM-dd HH:mm',\n    },\n  };\n\n  transform(rowItem, rowIndex, column: DataTableColumnTmplComponent, lang?: string): any {\n    if (!column || !column.field) {\n      return null;\n    }\n\n    if (column.field === '$index') {\n      return rowIndex + 1;\n    }\n\n    if (lang) {\n      const format = I18nFormat.localFormat[lang];\n      this.datePicker.format.date = format.short;\n      this.datePicker.format.time = format.medinum;\n    }\n\n    const cellItem = rowItem[column.field];\n\n    switch (column.fieldType) {\n    case 'date': {\n      let pattern;\n      if (column.extraOptions && column.extraOptions.dateFormat) {\n        pattern = column.extraOptions.dateFormat;\n      } else {\n        pattern = column.extraOptions && column.extraOptions.showTime ? this.datePicker.format.time : this.datePicker.format.date;\n      }\n      return cellItem ? formatDate(new Date(cellItem), pattern) : '';\n    }\n    case 'select':\n    case 'treeSelect':\n      if (column.extraOptions && column.extraOptions.multiple) {\n        if (cellItem && cellItem.length > 0) {\n          let displayValue;\n          if (column.extraOptions.filterKey) {\n            displayValue = cellItem.map((item) => item[column.extraOptions.filterKey]).join(';');\n          } else {\n            displayValue = cellItem.join(';');\n          }\n          return displayValue;\n        } else {\n          return '--';\n        }\n      } else {\n        let displayValue;\n        if (column.extraOptions && column.extraOptions.filterKey) {\n          displayValue = cellItem ? cellItem[column.extraOptions.filterKey] : cellItem;\n        } else {\n          displayValue = cellItem;\n        }\n        return displayValue === 0 ? 0 : displayValue || '--';\n      }\n    default:\n      if (cellItem === null || cellItem === undefined || cellItem === '') {\n        return '--';\n      } else {\n        return cellItem;\n      }\n    }\n  }\n}\n","import {\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ComponentFactoryResolver,\r\n  ElementRef,\r\n  HostBinding,\r\n  Inject,\r\n  Input,\r\n  NgZone,\r\n  OnChanges,\r\n  OnDestroy,\r\n  OnInit,\r\n  SimpleChange,\r\n  ViewChild,\r\n} from '@angular/core';\r\nimport { I18nFormat, I18nService } from 'ng-devui/i18n';\r\nimport { InputNumberComponent } from 'ng-devui/input-number';\r\nimport { SelectComponent } from 'ng-devui/select';\r\nimport { TreeSelectComponent } from 'ng-devui/tree-select';\r\nimport { stopPropagationIfExist } from 'ng-devui/utils';\r\nimport { Subject, Subscription, fromEvent } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { DATA_TABLE_ROW } from './data-table-row.token';\r\nimport { DATA_TABLE } from './data-table.token';\r\nimport { EditorDirective } from './editor-host.directive';\r\nimport { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';\r\n\r\n@Component({\r\n  selector: 'd-data-table-cell,[dDataTableCell]',\r\n  templateUrl: './data-table-cell.component.html',\r\n  preserveWhitespaces: false,\r\n})\r\nexport class DataTableCellComponent implements OnInit, OnChanges, OnDestroy {\r\n  @ViewChild(EditorDirective) editorHost: EditorDirective;\r\n  @Input() rowIndex: number;\r\n  @Input() colIndex: number;\r\n  @Input() column: DataTableColumnTmplComponent;\r\n  @Input() rowItem: any;\r\n  @Input() editModel: string;\r\n  @Input() isEditRow: boolean;\r\n  @Input() timeout: number;\r\n  @Input() tableLevel: number;\r\n\r\n  @HostBinding('class.editable-cell') get isEditable() {\r\n    return this.column.editable && !this.isCellEdit && this.column.extraOptions?.editableTip !== 'btn' && !this.fieldEditDenied;\r\n  }\r\n  isCellEdit: boolean;\r\n  forceUpdateSubscription: Subscription;\r\n  documentClickSubscription: Subscription;\r\n  tdMousedownSubscription: Subscription;\r\n  tdMouseupSubscription: Subscription;\r\n  clickInTd: boolean;\r\n  cellEditorClickSubscription: Subscription;\r\n  cellActionSubscription: Subscription;\r\n  clickCount = 0; // 记录点击次数\r\n  timeoutId; // 延时id\r\n  fieldEditDenied: boolean;\r\n  templateEditorActive: boolean; // 通过模板生成的编辑控件激活\r\n  dynamicEditorActive: boolean; // 动态生成的编辑控件激活\r\n  unsubscribe$ = new Subject<void>();\r\n  lang: any;\r\n\r\n  constructor(\r\n    @Inject(DATA_TABLE) public dt: any,\r\n    @Inject(DATA_TABLE_ROW) public rowComponent: any,\r\n    private i18n: I18nService,\r\n    private changeDetectorRef: ChangeDetectorRef,\r\n    private componentFactoryResolver: ComponentFactoryResolver,\r\n    private cellRef: ElementRef,\r\n    private ngZone: NgZone\r\n  ) {}\r\n\r\n  ngOnInit(): void {\r\n    this.forceUpdateSubscription = this.rowComponent.forceUpdateEvent.subscribe(() => this.forceUpdate());\r\n    if (this.column.editable) {\r\n      this.tdMousedownSubscription = fromEvent(this.cellRef.nativeElement, 'mousedown').subscribe(() => {\r\n        this.clickInTd = true;\r\n      });\r\n\r\n      this.tdMouseupSubscription = fromEvent(this.cellRef.nativeElement, 'mouseup').subscribe(() => {\r\n        this.clickInTd = false;\r\n      });\r\n    }\r\n    this.ngZone.runOutsideAngular(() => {\r\n      this.cellRef.nativeElement.addEventListener('mouseup', this.onCellClick.bind(this));\r\n      this.cellRef.nativeElement.addEventListener('dblclick', this.onCellDBClick.bind(this));\r\n    });\r\n    this.lang = I18nFormat.getLocaleAndLang().currentLanguage;\r\n    this.i18n\r\n      .langChange()\r\n      .pipe(takeUntil(this.unsubscribe$))\r\n      .subscribe(() => {\r\n        this.lang = I18nFormat.getLocaleAndLang().currentLanguage;\r\n      });\r\n  }\r\n\r\n  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {\r\n    const rowItem = changes.rowItem;\r\n    if (rowItem) {\r\n      this.updateEditable(rowItem);\r\n    }\r\n  }\r\n\r\n  updateEditable(rowItem) {\r\n    const currentConfig = rowItem.currentValue.$editDeniedConfig;\r\n    if (!currentConfig) {\r\n      if (this.fieldEditDenied) {\r\n        this.fieldEditDenied = false;\r\n      }\r\n    } else {\r\n      const index = currentConfig.findIndex((config: string) => {\r\n        return config === this.column.field;\r\n      });\r\n      if (index === -1) {\r\n        if (this.fieldEditDenied) {\r\n          this.fieldEditDenied = false;\r\n        }\r\n      } else {\r\n        if (!this.fieldEditDenied) {\r\n          this.fieldEditDenied = true;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  onCellClick($event) {\r\n    const cellSelectedEventArg = {\r\n      rowIndex: this.rowIndex,\r\n      colIndex: this.colIndex,\r\n      column: this.column,\r\n      rowItem: this.rowItem,\r\n      cellComponent: this,\r\n      rowComponent: this.rowComponent,\r\n      event: $event,\r\n    };\r\n\r\n    this.clickCount++;\r\n    if (this.clickCount === 1) {\r\n      this.timeoutId = setTimeout(() => {\r\n        if (this.clickCount === 1) {\r\n          this.dt.onCellClick(cellSelectedEventArg);\r\n        }\r\n        this.clickCount = 0;\r\n        clearTimeout(this.timeoutId);\r\n      }, this.timeout);\r\n    }\r\n  }\r\n\r\n  onCellDBClick($event) {\r\n    const cellSelectedEventArg = {\r\n      rowIndex: this.rowIndex,\r\n      colIndex: this.colIndex,\r\n      column: this.column,\r\n      rowItem: this.rowItem,\r\n      cellComponent: this,\r\n      rowComponent: this.rowComponent,\r\n    };\r\n    this.dt.onCellDBClick(cellSelectedEventArg);\r\n  }\r\n\r\n  forceUpdate() {\r\n    this.changeDetectorRef.markForCheck();\r\n  }\r\n\r\n  finishCellEdit($event?: Event) {\r\n    if (this.editModel !== 'cell') {\r\n      return;\r\n    }\r\n\r\n    this.isCellEdit = false;\r\n    this.editorHost.viewContainerRef.clear();\r\n    this.dynamicEditorActive = false;\r\n    this.templateEditorActive = false;\r\n\r\n    if (this.documentClickSubscription) {\r\n      this.unSubscription(this.documentClickSubscription);\r\n    }\r\n\r\n    if (this.cellEditorClickSubscription) {\r\n      this.unSubscription(this.cellEditorClickSubscription);\r\n    }\r\n    stopPropagationIfExist($event);\r\n\r\n    this.dt.onCellEditEnd({\r\n      rowIndex: this.rowIndex,\r\n      colIndex: this.colIndex,\r\n      column: this.column,\r\n      rowItem: this.rowItem,\r\n      cellComponent: this,\r\n      rowComponent: this.rowComponent,\r\n    });\r\n  }\r\n\r\n  isCellEditEnable(column, rowItem) {\r\n    if (this.editModel === 'cell') {\r\n      return this.isCellEdit;\r\n    }\r\n\r\n    return this.isEditRow;\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    if (this.forceUpdateSubscription) {\r\n      this.unSubscription(this.forceUpdateSubscription);\r\n    }\r\n    if (this.documentClickSubscription) {\r\n      this.unSubscription(this.documentClickSubscription);\r\n    }\r\n    if (this.cellEditorClickSubscription) {\r\n      this.unSubscription(this.cellEditorClickSubscription);\r\n    }\r\n    if (this.cellActionSubscription) {\r\n      this.unSubscription(this.cellActionSubscription);\r\n    }\r\n    if (this.tdMousedownSubscription) {\r\n      this.unSubscription(this.tdMousedownSubscription);\r\n    }\r\n    if (this.tdMouseupSubscription) {\r\n      this.unSubscription(this.tdMouseupSubscription);\r\n    }\r\n    if (this.unsubscribe$) {\r\n      this.unsubscribe$.unsubscribe();\r\n    }\r\n  }\r\n\r\n  private unSubscription(sbscription: Subscription) {\r\n    if (sbscription) {\r\n      sbscription.unsubscribe();\r\n      /* eslint-disable-next-line no-param-reassign */\r\n      sbscription = null;\r\n    }\r\n  }\r\n\r\n  creatCellEditor() {\r\n    let componentFactory;\r\n    let editorComponent;\r\n    switch (this.column.fieldType) {\r\n    case 'number':\r\n      editorComponent = InputNumberComponent;\r\n      break;\r\n    case 'select':\r\n      editorComponent = SelectComponent;\r\n      break;\r\n    case 'treeSelect':\r\n      editorComponent = TreeSelectComponent;\r\n      break;\r\n    default:\r\n      this.templateEditorActive = true;\r\n    }\r\n\r\n    if (editorComponent) {\r\n      componentFactory = this.componentFactoryResolver.resolveComponentFactory(editorComponent);\r\n      const viewContainerRef = this.editorHost.viewContainerRef;\r\n      viewContainerRef.clear();\r\n      const componentRef = viewContainerRef.createComponent<{ writeValue: Function; registerOnChange: Function }>(componentFactory);\r\n      const componentInstance = componentRef.instance;\r\n      if (this.column.extraOptions) {\r\n        componentFactory.inputs.forEach((input) => {\r\n          if (this.column.extraOptions[input.templateName]) {\r\n            componentInstance[input.propName] = this.column.extraOptions[input.templateName];\r\n          }\r\n        });\r\n      }\r\n      componentInstance.writeValue(this.rowItem[this.column.field]);\r\n      componentInstance.registerOnChange((value) => {\r\n        this.rowItem[this.column.field] = value;\r\n        if (this.column.extraOptions && this.column.extraOptions.finishEditingAfterValueChange) {\r\n          this.finishCellEdit();\r\n        }\r\n      });\r\n      this.dynamicEditorActive = true;\r\n    }\r\n  }\r\n\r\n  cellEditing($event) {\r\n    $event.stopPropagation();\r\n    $event.preventDefault();\r\n    let beforeEdit = Promise.resolve(undefined);\r\n    if (this.dt.beforeCellEdit) {\r\n      beforeEdit = this.dt.beforeCellEdit(this.rowItem, this.column);\r\n    }\r\n    beforeEdit.then((extraOptions?: any) => {\r\n      if (extraOptions) {\r\n        this.column.extraOptions = extraOptions;\r\n      }\r\n      this.dt.cellEditorClickEvent.emit($event);\r\n      const cellSelectedEventArg = {\r\n        rowIndex: this.rowIndex,\r\n        colIndex: this.colIndex,\r\n        column: this.column,\r\n        rowItem: this.rowItem,\r\n        cellComponent: this,\r\n        rowComponent: this.rowComponent,\r\n      };\r\n      if (this.column.editable && this.editModel === 'cell') {\r\n        this.isCellEdit = true;\r\n        this.creatCellEditor();\r\n        this.documentClickSubscription = this.dt.documentClickEvent.subscribe((event) => {\r\n          const containTarget = !this.cellRef.nativeElement.contains(event.target) && !this.clickInTd;\r\n          const flag = this.dt.beforeCellEditEnd && containTarget ? this.dt.beforeCellEditEnd(this.rowItem, this.column) : true;\r\n          if ((event === 'cancel' || containTarget) && flag) {\r\n            this.ngZone.run(() => {\r\n              this.finishCellEdit();\r\n            });\r\n          }\r\n          this.clickInTd = false;\r\n        });\r\n        this.cellEditorClickSubscription = this.dt.cellEditorClickEvent.subscribe((event) => {\r\n          const containTarget = this.cellRef.nativeElement.contains(event.target);\r\n          const flag = this.dt.beforeCellEditEnd && !containTarget ? this.dt.beforeCellEditEnd(this.rowItem, this.column) : true;\r\n          if (!containTarget && flag) {\r\n            this.finishCellEdit();\r\n          }\r\n        });\r\n        this.dt.onCellEditStart(cellSelectedEventArg);\r\n      }\r\n    });\r\n  }\r\n\r\n  toggleChildTable(rowItem) {\r\n    rowItem.$isChildTableOpen = !rowItem.$isChildTableOpen;\r\n    this.dt.setRowChildToggleStatus(rowItem, rowItem.$isChildTableOpen);\r\n  }\r\n}\r\n","<ng-template *ngIf=\"!column.editable || fieldEditDenied\" [ngTemplateOutlet]=\"cellViewTemp\"></ng-template>\n\n<ng-container *ngIf=\"column.editable && !fieldEditDenied\">\n  <div *ngIf=\"!isCellEdit && column.extraOptions?.editableTip === 'btn'\" class=\"cell-container\">\n    <div class=\"cell-container-inner not-break modify-holder\">\n      <ng-template [ngTemplateOutlet]=\"cellViewTemp\"></ng-template>\n      <span class=\"cell-modify\" (click)=\"cellEditing($event)\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16px\" height=\"16px\" version=\"1.1\">\n          <g fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\n            <path\n              d=\"M 9.48528 3.41421 L 10.8995 2 L 13.7279 4.82843 L 12.3137 6.24264 L 9.48528 3.41421 Z M 5.24264 13.3137 L 2.41421 13.3137 L 2.41421 10.4853 L 8.77817 4.12132 L 11.6066 6.94975 L 5.24264 13.3137 Z\"\n            />\n          </g>\n        </svg>\n      </span>\n    </div>\n  </div>\n  <div *ngIf=\"!isCellEdit && column.extraOptions?.editableTip !== 'btn'\" class=\"cell-editable\" (click)=\"cellEditing($event)\">\n    <ng-template [ngTemplateOutlet]=\"cellViewTemp\"></ng-template>\n  </div>\n  <div [ngClass]=\"{ 'edit-padding-fix': dynamicEditorActive }\">\n    <ng-template dEditorHost></ng-template>\n  </div>\n  <ng-template\n    *ngIf=\"templateEditorActive\"\n    [ngTemplateOutlet]=\"column.cellEditCmp ? column.cellEditCmp.template : column.fieldType === 'date' ? dateEditTempate : textEditTempate\"\n    [ngTemplateOutletContext]=\"{\n      rowIndex: rowIndex,\n      colIndex: colIndex,\n      column: column,\n      rowItem: rowItem,\n      $implicit: this,\n      row: rowComponent\n    }\"\n  >\n  </ng-template>\n</ng-container>\n\n<ng-template #cellViewTemp>\n  <ng-container *ngIf=\"column.nestedColumn\">\n    <span *ngIf=\"tableLevel > 0\" class=\"cell-placeholder\" [ngStyle]=\"{ width: tableLevel * column.nestedColumnIndent + 'px' }\"></span>\n    <span [style.visibility]=\"rowItem.children ? 'visible' : 'hidden'\" class=\"childtable-toggler\" (click)=\"toggleChildTable(rowItem)\">\n      <ng-container *ngIf=\"rowItem['$isChildTableOpen']\">\n        <svg\n          *ngIf=\"!column.extraOptions?.iconFoldTable\"\n          width=\"16px\"\n          height=\"16px\"\n          viewBox=\"0 0 16 16\"\n          version=\"1.1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          class=\"svg-icon svg-icon-close\"\n        >\n          <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n            <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"2\"></rect>\n            <rect x=\"4\" y=\"7\" width=\"8\" height=\"2\"></rect>\n          </g>\n        </svg>\n\n        <span *ngIf=\"column.extraOptions?.iconFoldTable\" [innerHTML]=\"column.extraOptions?.iconFoldTable | safe : 'html'\"></span>\n      </ng-container>\n      <ng-container *ngIf=\"!rowItem['$isChildTableOpen']\">\n        <svg\n          *ngIf=\"!column.extraOptions?.iconUnFoldTable\"\n          width=\"16px\"\n          height=\"16px\"\n          viewBox=\"0 0 16 16\"\n          version=\"1.1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          class=\"svg-icon svg-icon-open-folder\"\n        >\n          <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n            <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"2\"></rect>\n            <path\n              d=\"M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z\"\n            ></path>\n          </g>\n        </svg>\n        <span *ngIf=\"column.extraOptions?.iconUnFoldTable\" [innerHTML]=\"column.extraOptions?.iconUnFoldTable | safe : 'html'\"></span>\n      </ng-container>\n    </span>\n  </ng-container>\n  <ng-template\n    [ngTemplateOutlet]=\"column.cellCmp ? column.cellCmp.template : textViewTemplate\"\n    [ngTemplateOutletContext]=\"{\n      rowIndex: rowIndex,\n      colIndex: colIndex,\n      column: column,\n      rowItem: rowItem,\n      cellItem: rowItem[column.field],\n      cellValue: rowItem | disPlayCellValuePipe : rowIndex : column : lang,\n      $implicit: this,\n      row: rowComponent,\n      tableLevel: tableLevel\n    }\"\n  >\n  </ng-template>\n</ng-template>\n\n<ng-template let-cellValue=\"cellValue\" #textViewTemplate>\n  <span [attr.title]=\"cellValue\">{{ cellValue }}</span>\n</ng-template>\n\n<ng-template let-rowIndex=\"rowIndex\" let-colIndex=\"colIndex\" let-rowItem=\"rowItem\" let-column=\"column\" let-cell=\"\" #textEditTempate>\n  <form class=\"form-inline edit-padding-fix\">\n    <div class=\"form-group full-width\">\n      <div class=\"input-group full-width\">\n        <input\n          [dAutoFocus]=\"cell && cell.isCellEdit\"\n          [type]=\"column.fieldType\"\n          class=\"devui-form-control\"\n          [name]=\"column.field\"\n          [(ngModel)]=\"rowItem[column.field]\"\n          [attr.maxlength]=\"column.extraOptions?.maxlength\"\n          [attr.minlength]=\"column.extraOptions?.minlength\"\n          [attr.pattern]=\"column.extraOptions?.pattern\"\n          (keydown.enter)=\"cell && cell.finishCellEdit($event)\"\n          [placeholder]=\"column.placeholder || ''\"\n        />\n      </div>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template let-rowIndex=\"rowIndex\" let-colIndex=\"colIndex\" let-rowItem=\"rowItem\" let-column=\"column\" let-cell=\"\" #dateEditTempate>\n  <form class=\"form-inline edit-padding-fix\">\n    <div class=\"devui-form-group\">\n      <div class=\"devui-input-group devui-dropdown-origin\">\n        <input\n          class=\"devui-form-control search\"\n          [name]=\"column.field\"\n          [(ngModel)]=\"rowItem[column.field]\"\n          dDatepicker\n          appendToBody\n          [dateFormat]=\"column.extraOptions?.dateFormat\"\n          #datePicker=\"datepicker\"\n          (ngModelChange)=\"!column.extraOptions?.showTime && cell && cell.finishCellEdit()\"\n          [maxDate]=\"column.extraOptions?.maxDate\"\n          [minDate]=\"column.extraOptions?.minDate\"\n          [cssClass]=\"column.extraOptions?.cssClass\"\n          [dateConfig]=\"column.extraOptions?.dateConfig\"\n          [locale]=\"column.extraOptions?.locale\"\n          [customViewTemplate]=\"column.extraOptions?.customViewTemplate\"\n          [disabled]=\"column.extraOptions?.disabled\"\n          [placeholder]=\"column.placeholder || ''\"\n          [autoOpen]=\"true\"\n          [showTime]=\"column.extraOptions?.showTime\"\n        />\n        <div class=\"devui-input-group-addon\" (click)=\"datePicker.toggle()\">\n          <i class=\"icon icon-calendar\"></i>\n        </div>\n      </div>\n    </div>\n  </form>\n</ng-template>\n","import {\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ElementRef,\r\n  EventEmitter,\r\n  forwardRef,\r\n  HostBinding,\r\n  Inject,\r\n  Input,\r\n  NgZone,\r\n  OnInit,\r\n  Output,\r\n} from '@angular/core';\r\nimport { DATA_TABLE_ROW } from './data-table-row.token';\r\nimport { DATA_TABLE } from './data-table.token';\r\nimport { ForceUpdateReason } from './force-update-reason.model';\r\nimport { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';\r\n\r\n@Component({\r\n  selector: 'd-data-table-row, [dDataTableRow]',\r\n  templateUrl: './data-table-row.component.html',\r\n  styleUrls: ['./data-table-row.component.scss'],\r\n  preserveWhitespaces: false,\r\n  providers: [\r\n    {\r\n      provide: DATA_TABLE_ROW,\r\n      useExisting: forwardRef(() => DataTableRowComponent),\r\n    },\r\n  ],\r\n})\r\nexport class DataTableRowComponent implements OnInit {\r\n  @Input() rowItem: any;\r\n  @HostBinding('style.font-weight') fontWeight = 'normal';\r\n  @HostBinding('style.vertical-align') verticalAlign = 'middle';\r\n  @Input() selectable: boolean;\r\n  @Input() checkable: boolean;\r\n  @Input() showExpandToggle: boolean;\r\n  @Input() rowIndex: number;\r\n  @Input() allChecked: boolean;\r\n  @Input() columns: DataTableColumnTmplComponent[];\r\n  @Input() editModel: string;\r\n  @Input() editRowItem: any;\r\n  @Input() resizeable: boolean;\r\n  @Input() timeout: number;\r\n  @Input() tableLevel: number;\r\n  @Input() nestedIndex: string;\r\n  @Input() generalRowHoveredData: boolean;\r\n  @Output() detailChange = new EventEmitter<any>();\r\n\r\n  forceUpdateEvent = new EventEmitter<ForceUpdateReason>();\r\n\r\n  clickCount = 0; // 记录点击次数\r\n  timeoutId; // 延时id\r\n\r\n  constructor(\r\n    @Inject(DATA_TABLE) public dt: any,\r\n    private changeDetectorRef: ChangeDetectorRef,\r\n    private rowRef: ElementRef,\r\n    private ngZone: NgZone\r\n  ) {}\r\n\r\n  ngOnInit(): void {\r\n    this.ngZone.runOutsideAngular(() => {\r\n      this.rowRef.nativeElement.addEventListener('mouseup', this.onRowClick.bind(this));\r\n      this.rowRef.nativeElement.addEventListener('dblclick', this.onRowDBClick.bind(this));\r\n      if (this.generalRowHoveredData) {\r\n        this.rowRef.nativeElement.addEventListener('mouseenter', this.onRowMouseEnter.bind(this));\r\n        this.rowRef.nativeElement.addEventListener('mouseleave', this.onRowMouseLeave.bind(this));\r\n      }\r\n    });\r\n  }\r\n\r\n  forceUpdate() {\r\n    this.changeDetectorRef.markForCheck();\r\n    this.forceUpdateEvent.emit(ForceUpdateReason.RowUpdate);\r\n  }\r\n\r\n  onRowClick($event) {\r\n    this.clickCount++;\r\n    if (this.clickCount === 1) {\r\n      this.timeoutId = setTimeout(() => {\r\n        if (this.clickCount === 1) {\r\n          this.dt.onRowClick({\r\n            rowIndex: this.rowIndex,\r\n            nestedIndex: this.nestedIndex,\r\n            rowItem: this.rowItem,\r\n            rowComponent: this,\r\n            event: $event,\r\n          });\r\n        }\r\n        this.clickCount = 0;\r\n        clearTimeout(this.timeoutId);\r\n      }, this.timeout);\r\n    }\r\n  }\r\n\r\n  onRowDBClick($event) {\r\n    this.dt.onRowDBClick({ rowIndex: this.rowIndex, nestedIndex: this.nestedIndex, rowItem: this.rowItem, rowComponent: this });\r\n  }\r\n\r\n  onRowMouseEnter($event) {\r\n    this.ngZone.run(() => {\r\n      this.rowItem.$hovered = true;\r\n    });\r\n  }\r\n\r\n  onRowMouseLeave($event) {\r\n    this.ngZone.run(() => {\r\n      this.rowItem.$hovered = false;\r\n    });\r\n  }\r\n\r\n  onRowCheckChange($event, rowIndex, nestedIndex, rowItem) {\r\n    rowItem.$checked = $event;\r\n    rowItem.$halfChecked = false;\r\n    this.dt.setRowCheckStatus({ rowItem, rowIndex, nestedIndex, checked: $event });\r\n  }\r\n\r\n  toggle() {\r\n    if (this.rowItem.$isDetailOpen === undefined) {\r\n      this.rowItem.$isDetailOpen = !!this.rowItem.$expandConfig?.expand;\r\n    }\r\n    this.rowItem.$isDetailOpen = !this.rowItem.$isDetailOpen;\r\n    if (this.rowItem.$expandConfig) {\r\n      this.rowItem.$expandConfig.expand = !this.rowItem.$expandConfig.expand;\r\n    }\r\n    this.detailChange.emit({ state: this.rowItem.$isDetailOpen, index: this.rowIndex });\r\n    this.dt.onDetailToggle({ state: this.rowItem.$isDetailOpen, index: this.rowIndex });\r\n  }\r\n\r\n  trackByFn(index, item) {\r\n    return index;\r\n  }\r\n}\r\n","<td *ngIf=\"showExpandToggle\" class=\"devui-detail-cell\" [ngClass]=\"{ 'devui-sticky-left-cell': columns[0]?.fixedLeft }\" [style.left]=\"0\">\n  <div *ngIf=\"rowItem.detail || rowItem?.$expandConfig\" (click)=\"toggle()\">\n    <span class=\"expand-icon-wrapper\" *ngIf=\"!rowItem['$isDetailOpen'] && !rowItem.$expandConfig?.expand\">\n      <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g id=\"操作/collapse2\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <polygon\n            id=\"路径\"\n            fill=\"#293040\"\n            fill-rule=\"nonzero\"\n            transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\n            points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\n          ></polygon>\n        </g>\n      </svg>\n    </span>\n    <span class=\"expand-icon-wrapper\" *ngIf=\"(rowItem && rowItem['$isDetailOpen']) || rowItem.$expandConfig?.expand\">\n      <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g id=\"操作/chevron_down\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <polygon id=\"chevron_down\" fill=\"#293040\" points=\"4.5 5 8 8.76923077 11.5 5 13 6.61538462 8 12 3 6.61538462\"></polygon>\n        </g>\n      </svg>\n    </span>\n  </div>\n</td>\n<td\n  *ngIf=\"checkable\"\n  class=\"devui-checkable-cell\"\n  [ngClass]=\"{ 'devui-sticky-left-cell': columns[0]?.fixedLeft }\"\n  [style.left]=\"showExpandToggle && columns[0]?.fixedLeft ? '36px' : '0'\"\n>\n  <d-checkbox\n    [ngModelOptions]=\"{ standalone: true }\"\n    (ngModelChange)=\"onRowCheckChange($event, rowIndex, nestedIndex, rowItem)\"\n    [ngModel]=\"rowItem.$checked\"\n    [halfchecked]=\"rowItem.$halfChecked\"\n    [disabled]=\"rowItem.$checkDisabled || rowItem.$disabled\"\n    dTooltip\n    [content]=\"rowItem.$checkBoxTips\"\n    [position]=\"['top', 'right', 'bottom', 'left']\"\n    [showAnimation]=\"true\"\n    (mouseup)=\"$event.stopPropagation()\"\n  >\n  </d-checkbox>\n</td>\n<ng-container *ngFor=\"let column of columns; let colIndex = index; trackBy: trackByFn\">\n  <td\n    dDataTableCell\n    [rowIndex]=\"rowIndex\"\n    [colIndex]=\"colIndex\"\n    [column]=\"column\"\n    [rowItem]=\"rowItem\"\n    [editModel]=\"rowItem.$$editModel || editModel\"\n    [isEditRow]=\"rowItem.$$edit\"\n    [timeout]=\"timeout\"\n    [tableLevel]=\"tableLevel\"\n    class=\"{{ column.cellClass ? column.cellClass : '' }}\"\n    [ngClass]=\"{\n      'devui-sticky-left-cell': column.fixedLeft,\n      'devui-sticky-right-cell': column.fixedRight,\n      'devui-last-sticky-left-cell': column.fixedLeft && !columns[colIndex + 1]?.fixedLeft,\n      'devui-first-sticky-right-cell': column.fixedRight && !columns[colIndex - 1]?.fixedRight\n    }\"\n    [style.left]=\"column.fixedLeft ? column.fixedLeft : null\"\n    [style.right]=\"column.fixedRight ? column.fixedRight : null\"\n  ></td>\n</ng-container>\n","import { Component, Inject, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';\r\nimport { TableExpandConfig, TableWidthConfig } from './data-table.model';\r\nimport { DATA_TABLE } from './data-table.token';\r\nimport { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';\r\n\r\n@Component({\r\n  selector: 'd-data-table-body, [dDataTableBody]',\r\n  templateUrl: './data-table-body.component.html',\r\n  styleUrls: ['./data-table-body.component.scss'],\r\n  preserveWhitespaces: false,\r\n})\r\nexport class DataTableBodyComponent implements OnChanges {\r\n  @Input() checkable: boolean;\r\n  @Input() showExpandToggle: boolean;\r\n  @Input() allChecked: boolean;\r\n  @Input() selectable: boolean;\r\n  @Input() editModel: string;\r\n  @Input() editRowItem: any;\r\n  @Input() dataSource: any[] = [];\r\n  @Input() resizeable: boolean;\r\n  @Input() columns: DataTableColumnTmplComponent[];\r\n  @Input() detailTemplateRef: TemplateRef<any>;\r\n  @Input() timeout: number;\r\n  @Input() type: string;\r\n  @Input() rowHoveredHighlight: boolean;\r\n  @Input() tableLevel: number;\r\n  @Input() nestedIndex = '-1';\r\n  @Input() virtualScroll;\r\n  @Input() tableWidthConfig: TableWidthConfig[];\r\n  @Input() headerExpandConfig: TableExpandConfig;\r\n  @Input() generalRowHoveredData: boolean;\r\n  childTdColspan: number;\r\n\r\n  constructor(@Inject(DATA_TABLE) public dt: any) {}\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (changes.columns && this.columns) {\r\n      let columnSpan = this.columns.length;\r\n      if (this.showExpandToggle) {\r\n        columnSpan += 1;\r\n      }\r\n      if (this.checkable) {\r\n        columnSpan += 1;\r\n      }\r\n      this.childTdColspan = columnSpan;\r\n    }\r\n  }\r\n\r\n  trackByFn(index, item) {\r\n    return index;\r\n  }\r\n}\r\n","<tr *ngIf=\"headerExpandConfig?.expand\">\n  <td [attr.colspan]=\"tableWidthConfig.length\">\n    <ng-template\n      [ngTemplateOutlet]=\"headerExpandConfig?.expandTemplateRef || default\"\n      [ngTemplateOutletContext]=\"{ $implicit: this, columns: columns }\"\n    >\n    </ng-template>\n    <ng-template #default>\n      <div>{{ headerExpandConfig?.description }}</div>\n    </ng-template>\n  </td>\n</tr>\n<ng-container *ngIf=\"!virtualScroll; else scrollViewTpl\">\n  <ng-container *ngFor=\"let rowItem of dataSource; trackBy: trackByFn; let rowIndex = index\">\n    <ng-template [ngTemplateOutlet]=\"trTable\" [ngTemplateOutletContext]=\"{ rowItem: rowItem, rowIndex: rowIndex }\"> </ng-template>\n  </ng-container>\n</ng-container>\n\n<ng-template #scrollViewTpl>\n  <ng-container *cdkVirtualFor=\"let rowItem of dataSource; trackBy: trackByFn; let rowIndex = index\">\n    <ng-template [ngTemplateOutlet]=\"trTable\" [ngTemplateOutletContext]=\"{ rowItem: rowItem || {}, rowIndex: rowIndex }\"> </ng-template>\n  </ng-container>\n</ng-template>\n\n<ng-template #trTable let-rowIndex=\"rowIndex\" let-rowItem=\"rowItem\">\n  <tr\n    *ngIf=\"!rowItem?.$draggable\"\n    dDataTableRow\n    [generalRowHoveredData]=\"generalRowHoveredData\"\n    [resizeable]=\"resizeable\"\n    [checkable]=\"checkable\"\n    [rowIndex]=\"rowIndex\"\n    [rowItem]=\"rowItem\"\n    [columns]=\"columns\"\n    [editRowItem]=\"editRowItem\"\n    [editModel]=\"editModel\"\n    [allChecked]=\"allChecked\"\n    [showExpandToggle]=\"showExpandToggle\"\n    [timeout]=\"timeout\"\n    [tableLevel]=\"tableLevel\"\n    [nestedIndex]=\"nestedIndex\"\n    class=\"{{ rowItem.$rowClass ? rowItem.$rowClass : '' }}\"\n    [ngClass]=\"{ 'table-row-selected': rowItem.$checked }\"\n  ></tr>\n  <tr\n    *ngIf=\"rowItem?.$draggable\"\n    dDataTableRow\n    dDraggable\n    [generalRowHoveredData]=\"generalRowHoveredData\"\n    [resizeable]=\"resizeable\"\n    [checkable]=\"checkable\"\n    [rowIndex]=\"rowIndex\"\n    [rowItem]=\"rowItem\"\n    [columns]=\"columns\"\n    [editRowItem]=\"editRowItem\"\n    [editModel]=\"editModel\"\n    [allChecked]=\"allChecked\"\n    [showExpandToggle]=\"showExpandToggle\"\n    [timeout]=\"timeout\"\n    [tableLevel]=\"tableLevel\"\n    [nestedIndex]=\"nestedIndex\"\n    class=\"{{ rowItem.$rowClass ? rowItem.$rowClass : '' }}\"\n    [ngClass]=\"{ 'table-row-selected': rowItem.$checked }\"\n    [dragData]=\"{ data: rowItem }\"\n    [dragScope]=\"rowItem?.$draggable['scope']\"\n    [dragOverClass]=\"rowItem?.$draggable['class']\"\n    [dragHandle]=\"rowItem?.$draggable['handler']\"\n  ></tr>\n  <tr *ngIf=\"rowItem && rowItem['$isDetailOpen'] && rowItem.detail\">\n    <td [attr.colspan]=\"checkable ? 2 : 1\"></td>\n    <td [attr.colspan]=\"columns.length\" class=\"detail-content\" [style.padding]=\"'13px'\">\n      <ng-template\n        [ngTemplateOutlet]=\"detailTemplateRef || default\"\n        [ngTemplateOutletContext]=\"{ $implicit: this, detail: rowItem.detail, rowIndex: rowIndex, rowItem: rowItem }\"\n      >\n      </ng-template>\n      <ng-template #default let-detail=\"detail\" let-rowIndex=\"rowIndex\" let-rowItem=\"rowItem\">\n        <div>{{ detail }}</div>\n      </ng-template>\n    </td>\n  </tr>\n  <tr class=\"expand-row\" *ngIf=\"rowItem?.$expandConfig?.expand\">\n    <td *ngIf=\"checkable\"></td>\n    <td *ngIf=\"showExpandToggle\"></td>\n    <td [attr.colspan]=\"columns.length\">\n      <ng-template\n        [ngTemplateOutlet]=\"rowItem.$expandConfig?.expandTemplateRef || default\"\n        [ngTemplateOutletContext]=\"{ $implicit: this, columns: columns, rowIndex: rowIndex, rowItem: rowItem }\"\n      >\n      </ng-template>\n      <ng-template #default>\n        <div>{{ rowItem.$expandConfig?.description }}</div>\n      </ng-template>\n    </td>\n  </tr>\n  <tr class=\"child-table\" *ngIf=\"rowItem && rowItem['$isChildTableOpen'] && rowItem['children']\">\n    <td [attr.colspan]=\"childTdColspan\">\n      <table\n        class=\"devui-table {{ type ? 'table-' + type : '' }} {{ rowHoveredHighlight ? 'table-hover' : '' }}\"\n        style=\"table-layout: fixed\"\n      >\n        <colgroup>\n          <col [style.width]=\"config.width\" *ngFor=\"let config of tableWidthConfig\" />\n        </colgroup>\n        <tbody\n          dDataTableBody\n          [dataSource]=\"rowItem['children']\"\n          [resizeable]=\"resizeable\"\n          [columns]=\"columns\"\n          [checkable]=\"checkable\"\n          [allChecked]=\"allChecked\"\n          [selectable]=\"selectable\"\n          [editModel]=\"editModel\"\n          [editRowItem]=\"editRowItem\"\n          [showExpandToggle]=\"showExpandToggle\"\n          [detailTemplateRef]=\"detailTemplateRef\"\n          [timeout]=\"timeout\"\n          [type]=\"type\"\n          [rowHoveredHighlight]=\"rowHoveredHighlight\"\n          [tableLevel]=\"tableLevel + 1\"\n          [nestedIndex]=\"nestedIndex + ',' + rowIndex\"\n          [tableWidthConfig]=\"tableWidthConfig\"\n          [generalRowHoveredData]=\"generalRowHoveredData\"\n        ></tbody>\n      </table>\n    </td>\n  </tr>\n</ng-template>\n","import { TemplateRef } from '@angular/core';\nimport type { DataTableCellComponent } from './data-table-cell.component';\nimport type { DataTableRowComponent } from './data-table-row.component';\nimport type { TableThComponent } from './table/head/th/th.component';\nimport type { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';\n\nexport interface CellSelectedEventArg {\n  rowIndex: number;\n  colIndex: number;\n  column: DataTableColumnTmplComponent;\n  rowItem: any;\n  cellComponent: DataTableCellComponent;\n  rowComponent: DataTableRowComponent;\n}\n\nexport enum SortDirection {\n  ASC = 'ASC',\n  DESC = 'DESC',\n  default = ''\n}\n\nexport interface RowSelectedEventArg {\n  rowIndex: number;\n  nestedIndex: string;\n  rowItem: any;\n  rowComponent: DataTableRowComponent;\n  event?: MouseEvent;\n}\n\nexport interface SortEventArg {\n  field?: string;\n  direction: SortDirection;\n  column?: DataTableColumnTmplComponent;\n  th?: TableThComponent;\n}\n\nexport interface RowCheckChangeEventArg {\n  rowIndex: number;\n  nestedIndex: string;\n  rowItem: any;\n  checked: boolean;\n}\n\nexport interface ColumnDefs {\n  render: (data: any, row: any) => any;\n  target: string;\n}\n\nexport interface FilterConfig {\n  id?: number | string;\n  name: string;\n  value: any;\n  checked?: boolean; // for Multiple\n  selected?: boolean; // for Radio\n}\n\nexport interface CheckableRelation {\n  upward: boolean;\n  downward: boolean;\n}\n\nexport interface TableExpandConfig {\n  expand?: boolean;\n  expandTemplateRef?: TemplateRef<any>;\n  description?: string;\n}\n\nexport interface ColumnResizeEventArg {\n  currentColumn: DataTableColumnTmplComponent;\n  nextColumn: DataTableColumnTmplComponent;\n}\n\nexport enum ColumnAdjustStrategy {\n  disable = 0, // 不可调整\n  mouseup = 1, // 列宽在鼠标松开时变化\n  mousemove = 2 // 列宽随着鼠标移动变化\n}\n\nexport interface TableCheckStatusArg {\n  pageAllChecked?: boolean;\n  pageHalfChecked?: boolean;\n}\n\nexport interface TableWidthConfig {\n  field: string;\n  width: string;\n}\n\nexport enum EditableTip {\n  hover = 'hover',\n  btn = 'btn'\n}\n\nexport interface RowToggleStatusEventArg {\n  rowItem: any;\n  open: boolean;\n}\n\nexport interface TableCheckOptions {\n  label: string;\n  onChecked: Function;\n}\n","import { InjectionToken } from '@angular/core';\n\nexport const TABLE_TH = new InjectionToken('TABLE_TH');\n","import { DOCUMENT } from '@angular/common';\r\nimport {\r\n  ChangeDetectorRef,\r\n  Component,\r\n  EventEmitter,\r\n  HostBinding,\r\n  Inject,\r\n  Input,\r\n  OnChanges,\r\n  OnDestroy,\r\n  OnInit,\r\n  Output,\r\n  SimpleChanges,\r\n  TemplateRef,\r\n  ViewChild,\r\n} from '@angular/core';\r\nimport { DropDownDirective } from 'ng-devui/dropdown';\r\nimport { I18nInterface, I18nService } from 'ng-devui/i18n';\r\nimport { BehaviorSubject, Observable, Subscription, of } from 'rxjs';\r\nimport { switchMap } from 'rxjs/operators';\r\nimport { FilterConfig } from '../../../../data-table.model';\r\nimport { TABLE_TH } from '../th.token';\r\n\r\n@Component({\r\n  selector: 'd-table-filter',\r\n  templateUrl: './filter.component.html',\r\n  styleUrls: ['./filter.component.scss'],\r\n})\r\nexport class FilterComponent implements OnInit, OnChanges, OnDestroy {\r\n  @Input() beforeFilter: (value) => boolean | Promise<boolean> | Observable<boolean>;\r\n  @Input() customFilterTemplate: TemplateRef<any>;\r\n  @Input() extraFilterTemplate: TemplateRef<any>;\r\n  @Input() searchFn: (term: string) => Observable<Array<any>>;\r\n  @Input() filterList: Array<FilterConfig>;\r\n  @Input() filterIconActive: boolean;\r\n  @Input() filterMultiple = true;\r\n  @Input() filterBoxWidth: any;\r\n  @Input() filterBoxHeight: any;\r\n  @Input() column: any; // 为配置column方式兼容自定义过滤模板context\r\n  @Input() closeWhenScroll: boolean;\r\n  @Input() showFilterIcon = false;\r\n\r\n  @Output() filterIconActiveChange = new EventEmitter<boolean>(true);\r\n  @Output() filterChange = new EventEmitter<FilterConfig[]>();\r\n  @Output() filterToggle = new EventEmitter<{\r\n    isOpen: boolean;\r\n    checklist: FilterConfig[];\r\n  }>();\r\n\r\n  @HostBinding('class.devui-icon-show')\r\n  get canShow() {\r\n    return this.showFilterIcon || this.filterIconActive || this.filterIconActiveInner;\r\n  }\r\n\r\n  isDirty = false;\r\n\r\n  get filterWidthNum() {\r\n    return parseInt(this.filterBoxWidth || 250);\r\n  }\r\n\r\n  @ViewChild('filterDropdown') filterDropdown;\r\n  private sourceSubject: BehaviorSubject<any>;\r\n  private sourceSubscription: Subscription;\r\n  private filterSubscription: Subscription;\r\n  private i18nSubscription: Subscription;\r\n  private searchElement;\r\n  checkedListForFilter = [];\r\n  filterListDisplay = [];\r\n  searchText = '';\r\n  selectedItem: any;\r\n  isFilterHidden = false;\r\n  filterHalfChecked: boolean;\r\n  filterAllChecked: boolean;\r\n  i18nCommonText: I18nInterface['common'];\r\n  filterIconActiveInner: boolean;\r\n  DEBONCE_TIME = 300;\r\n  document: Document;\r\n  filterPadding = 26;\r\n\r\n  constructor(\r\n    private ref: ChangeDetectorRef,\r\n    private i18n: I18nService,\r\n    @Inject(TABLE_TH) private thComponent: any,\r\n    @Inject(DOCUMENT) private doc: any\r\n  ) {\r\n    this.i18nCommonText = this.i18n.getI18nText().common;\r\n    this.document = this.doc;\r\n  }\r\n\r\n  ngOnInit() {\r\n    if (!this.searchFn) {\r\n      this.searchFn = (item) => {\r\n        return of((this.filterList ? this.filterList : []).filter((value) => value.name.toLowerCase().includes(item.toLowerCase())));\r\n      };\r\n    }\r\n    this.i18nSubscription = this.i18n.langChange().subscribe((data) => {\r\n      this.i18nCommonText = data.common;\r\n    });\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    const { filterList, filterMultiple, filterIconActive } = changes;\r\n    if (filterList || filterMultiple || filterIconActive) {\r\n      if (this.filterIconActive !== undefined) {\r\n        return;\r\n      }\r\n      if (this.filterList) {\r\n        if (!this.filterMultiple) {\r\n          this.selectedItem = this.filterList.filter((item) => item.selected)[0];\r\n          this.filterIconActiveInner = this.selectedItem !== undefined && !!Object.keys(this.selectedItem).length;\r\n        } else {\r\n          const checkedList = this.filterList.filter((item) => item.checked);\r\n          if (checkedList.length) {\r\n            this.filterIconActiveInner = true;\r\n          } else {\r\n            this.filterIconActiveInner = false;\r\n          }\r\n        }\r\n      }\r\n      this.filterIconActiveChange.emit(this.filterIconActiveInner);\r\n    }\r\n  }\r\n\r\n  closeFilter(dropdown: DropDownDirective) {\r\n    dropdown.toggle();\r\n  }\r\n\r\n  getFilterDataMultiple() {\r\n    // 兼容当前当用户未传入id时，使用name做重名判断\r\n    let keyValue = '';\r\n    if (this.checkedListForFilter.length) {\r\n      keyValue = Object.prototype.hasOwnProperty.call(this.checkedListForFilter[0], 'id') ? 'id' : 'name';\r\n    }\r\n    const checkedList = this.removeDuplication(this.checkedListForFilter, keyValue).filter((item) => item.checked);\r\n    this.setFilterIconActive(checkedList);\r\n    this.filterChange.emit(checkedList);\r\n  }\r\n\r\n  resetFilterData() {\r\n    this.isDirty = false;\r\n    this.filterList.forEach(