@ng-nest/ui 20.3.5 → 20.3.6

package/table/table-body.component.ts

@@ -1,301 +0,0 @@
-import {
-  Component,
-  OnInit,
-  ViewEncapsulation,
-  Renderer2,
-  ElementRef,
-  ChangeDetectorRef,
-  ChangeDetectionStrategy,
-  inject,
-  computed,
-  viewChild,
-  signal,
-  effect,
-  AfterViewInit,
-  AfterViewChecked
-} from '@angular/core';
-import { XTableBodyPrefix, XTableBodyProperty, XTableRow, XTableColumn, XTableCell } from './table.property';
-import { XRemoveNgTag, XResize, XNumber, XStripTags, XParentPath, XResizeObserver } from '@ng-nest/ui/core';
-import { Subject, fromEvent } from 'rxjs';
-import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
-import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
-import { debounceTime, takeUntil } from 'rxjs/operators';
-import { XEmptyComponent } from '@ng-nest/ui/empty';
-import { XOutletDirective } from '@ng-nest/ui/outlet';
-import { XCheckboxComponent } from '@ng-nest/ui/checkbox';
-import { FormsModule } from '@angular/forms';
-import { XButtonComponent } from '@ng-nest/ui/button';
-import { DomSanitizer } from '@angular/platform-browser';
-import { XInnerHTMLComponent } from '@ng-nest/ui/core';
-import { XTableCheckboxDragSelectDirective } from './checkbox-drag-select.directive';
-import { X_TABLE_CONTEXT } from './table.token';
-
-@Component({
-  selector: `${XTableBodyPrefix}`,
-  imports: [
-    NgClass,
-    NgTemplateOutlet,
-    FormsModule,
-    XEmptyComponent,
-    ScrollingModule,
-    XOutletDirective,
-    XCheckboxComponent,
-    XButtonComponent,
-    XInnerHTMLComponent,
-    XTableCheckboxDragSelectDirective
-  ],
-  templateUrl: './table-body.component.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class XTableBodyComponent extends XTableBodyProperty implements OnInit, AfterViewInit, AfterViewChecked {
-  renderer = inject(Renderer2);
-  elementRef = inject(ElementRef<HTMLElement>);
-  cdr = inject(ChangeDetectorRef);
-  tbody = viewChild.required<ElementRef<HTMLElement>>('tbody');
-  virtualBody = viewChild(CdkVirtualScrollViewport);
-  table = inject(X_TABLE_CONTEXT, { optional: true })!;
-  private doc = inject(DOCUMENT);
-  private unSubject = new Subject<void>();
-  private resizeObserver!: XResizeObserver;
-  private domSanitizer = inject(DomSanitizer);
-  tbodyStyle = signal<{ [property: string]: any }>({});
-
-  isEmpty = computed(() => this.data().length === 0);
-  getRowHeight = computed(() => (this.rowHeight() == 0 ? '' : this.rowHeight()));
-  getItemSize = computed(() =>
-    this.rowHeight() !== 0 && this.itemSize() > this.rowHeight() ? this.rowHeight() : this.itemSize()
-  );
-  docClientHeight = signal(this.doc.documentElement.clientHeight);
-  headHeight = signal(0);
-  captionHeight = signal(0);
-  footHeight = signal(0);
-  paginationHeight = signal(0);
-  checkboxDragging = signal(false);
-  expandChanged = signal<boolean>(false);
-
-  bodyHeightSignal = computed(() => {
-    const adaptionHeight = this.adaptionHeight();
-    if (adaptionHeight && adaptionHeight > 0) {
-      let bodyHeight =
-        this.docPercent() * this.docClientHeight() -
-        this.captionHeight() -
-        this.headHeight() -
-        this.footHeight() -
-        this.paginationHeight() -
-        adaptionHeight;
-      if (bodyHeight < 0) bodyHeight = 0;
-      return bodyHeight;
-    }
-    if (this.scroll()?.y && !this.bodyHeight()) {
-      return this.scroll()!.y;
-    }
-    return this.bodyHeight();
-  });
-
-  minBufferPxSignal = computed(() => {
-    const adaptionHeight = this.adaptionHeight();
-    if (adaptionHeight && adaptionHeight > 0) {
-      return this.bodyHeightSignal();
-    }
-    return this.minBufferPx();
-  });
-
-  maxBufferPxSignal = computed(() => {
-    const adaptionHeight = this.adaptionHeight();
-    if (adaptionHeight && adaptionHeight > 0) {
-      return this.bodyHeightSignal()! * 1.2;
-    }
-    return this.maxBufferPx();
-  });
-
-  treeData = computed<XTableRow[]>(() => {
-    if (!this.table.treeTable()) return [];
-    this.expandChanged();
-    const treeData: XTableRow[] = [];
-    const addItems = (data: XTableRow[]) => {
-      for (let item of data) {
-        treeData.push(item);
-        if (item.children && item.children.length > 0 && item.expanded) {
-          addItems(item.children);
-        }
-      }
-    };
-    addItems(this.data());
-    return treeData;
-  });
-
-  rows = computed<XTableRow[]>(() => {
-    if (!this.table.treeTable()) return this.data();
-    return this.treeData();
-  });
-
-  constructor() {
-    super();
-    effect(() => {
-      if (this.virtualBody()) {
-        this.virtualBody()!['_scrollStrategy']['_minBufferPx'] = this.minBufferPxSignal();
-      }
-    });
-    effect(() => {
-      if (this.virtualBody()) {
-        this.virtualBody()!['_scrollStrategy']['_maxBufferPx'] = this.maxBufferPxSignal();
-      }
-    });
-  }
-
-  ngOnInit() {
-    XRemoveNgTag(this.elementRef.nativeElement);
-    if (this.level() > 0) XRemoveNgTag(this.tbody().nativeElement);
-
-    fromEvent(this.doc.defaultView!, 'resize')
-      .pipe(debounceTime(30), takeUntil(this.unSubject))
-      .subscribe(() => {
-        this.docClientHeight.set(this.doc.documentElement.clientHeight);
-      });
-  }
-
-  ngAfterViewInit() {
-    this.table.virtualBody.set(this.virtualBody()!);
-    this.docClientHeight.set(this.doc.documentElement.clientHeight);
-    this.setSubject();
-    this.setScroll();
-  }
-
-  ngAfterViewChecked(): void {
-    let headHeight = 0;
-    for (let thead of this.table.theads()) {
-      headHeight += thead.nativeElement.clientHeight;
-    }
-    this.headHeight.set(headHeight);
-    const captionHeight = this.table.caption()?.nativeElement.clientHeight || 0;
-    this.captionHeight.set(captionHeight);
-    const footHeight = this.table.tfoot()?.nativeElement.clientHeight || 0;
-    this.footHeight.set(footHeight);
-    const paginationHeight = this.table.pagination()?.elementRef.nativeElement.clientHeight || 0;
-    this.paginationHeight.set(paginationHeight);
-  }
-
-  ngOnDestroy(): void {
-    this.unSubject.next();
-    this.unSubject.complete();
-    this.resizeObserver?.disconnect();
-  }
-
-  setSubject() {
-    if (this.virtualBody()) {
-      this.table.scrollContentEle.set(
-        this.virtualBody()!.elementRef.nativeElement.querySelector('.cdk-virtual-scroll-content-wrapper') as HTMLElement
-      );
-      if (this.scroll()?.x) {
-        this.renderer.setStyle(this.table.scrollContentEle()!, 'width', `${this.scroll()?.x}px`);
-      }
-      XResize(this.table.table().nativeElement, this.table.scrollContentEle()!)
-        .pipe(debounceTime(30), takeUntil(this.unSubject))
-        .subscribe((x) => {
-          this.resizeObserver = x.resizeObserver;
-          this.setScroll();
-        });
-    }
-    if (this.table.scrollContentEle()) {
-      fromEvent(this.virtualBody()!.elementRef.nativeElement, 'scroll')
-        .pipe(takeUntil(this.unSubject))
-        .subscribe((x) => {
-          const ele = x.srcElement as HTMLElement;
-          this.table.scrollTop.set(ele.scrollTop);
-          this.table.scrollLeft.set(ele.scrollLeft);
-          if (ele.scrollLeft >= 0 && this.table.theads().length > 0) {
-            for (let thead of this.table.theads()) {
-              thead.nativeElement.scrollLeft = this.table.scrollLeft();
-            }
-          }
-          this.table.scrollLeftMax.set(ele.scrollLeft + ele.clientWidth === ele.scrollWidth);
-        });
-    }
-  }
-
-  setScroll() {
-    if (!this.virtualBody()) return;
-    const ele = this.virtualBody()!.elementRef.nativeElement;
-    const hasY = ele.scrollHeight > this.bodyHeightSignal()!;
-    const hasX = this.table.scrollContentEle()!.clientWidth > ele.clientWidth;
-
-    if (!this.table.hasScrollY() && hasY) {
-      this.table.hasScrollY.set(true);
-      this.table.scrollYWidth.set(ele.offsetWidth - ele.clientWidth);
-    } else if (this.table.hasScrollY() && !hasY) {
-      this.table.hasScrollY.set(false);
-      this.table.scrollYWidth.set(0);
-    }
-
-    if (!this.table.hasScrollX() && hasX) {
-      this.table.hasScrollX.set(true);
-      this.table.scrollXHeight.set(ele.offsetHeight - ele.clientHeight);
-    } else if (this.table.hasScrollX() && !hasX) {
-      this.table.hasScrollX.set(false);
-      this.table.scrollXHeight.set(0);
-      this.table.scrollXWidth.set(null);
-    }
-    if (hasX) {
-      this.table.scrollXWidth.set(ele.offsetWidth + ele.scrollWidth - ele.clientWidth);
-    }
-
-    this.virtualBody()!.checkViewportSize();
-  }
-
-  setStyle() {
-    let height = this.rowHeight() === 0 ? '' : this.rowHeight();
-    if (this.cellConfig() && this.cellConfig()!.cells) {
-      const spt = this.cellConfig()!.cells?.map((x) => {
-        const gridAreaSpt = x.gridArea?.split('/');
-        return gridAreaSpt && gridAreaSpt.length > 3 ? Number(gridAreaSpt[2]) : 2;
-      });
-      height = ((Math.max(...spt!) - 1) * (height as number)) as XNumber;
-    }
-    this.tbodyStyle.set({
-      height: `${height}px`
-    });
-  }
-
-  setDomSanitizer(str: string) {
-    return this.domSanitizer.bypassSecurityTrustHtml(str);
-  }
-
-  getIndex(index: number, item: XTableRow) {
-    if (!isNaN(index)) return index;
-    return this.data().indexOf(item);
-  }
-
-  getFlex(column: XTableColumn) {
-    if (column.width) return 'none';
-    if (!column.flex) return 1;
-    return column.flex;
-  }
-
-  getTitle(row: XTableRow, column: XTableCell | any) {
-    let it = row[column.id as string];
-    return it ? XStripTags(it) : '';
-  }
-
-  onRowClick(event: Event, row: XTableRow) {
-    if (row.disabled) return;
-    if (this.table.allowCheckRow() && this.table.rowChecked()) {
-      if (!XParentPath(event.target as HTMLElement).includes('x-checkbox')) {
-        row[this.table.rowChecked()!.id] = !row[this.table.rowChecked()!.id];
-        this.table.bodyChecked(this.table.rowChecked()!, row);
-      }
-    }
-    this.activatedRow.set(row);
-    this.rowClick.emit(row);
-  }
-
-  onExpanded(event: Event, node: XTableRow) {
-    node.expanded = !node.expanded;
-    this.expandChanged.update((x) => !x);
-    event?.stopPropagation();
-  }
-
-  trackByItem(_index: number, item: XTableRow | XTableColumn) {
-    return item.id;
-  }
-}

package/table/table-foot.component.html

@@ -1,3 +0,0 @@
-<tfoot #tfoot class="x-table-footer" [style.height.px]="getRowHeight()!" [style.min-height.px]="getRowHeight()">
-  <ng-container *xOutlet="footer()">{{ footer() }}</ng-container>
-</tfoot>

package/table/table-foot.component.ts

@@ -1,38 +0,0 @@
-import {
-  Component,
-  OnInit,
-  ViewEncapsulation,
-  ElementRef,
-  ChangeDetectionStrategy,
-  inject,
-  computed,
-  viewChild,
-  ChangeDetectorRef
-} from '@angular/core';
-import { XTableFootPrefix, XTableFootProperty } from './table.property';
-import { XRemoveNgTag } from '@ng-nest/ui/core';
-import { XOutletDirective } from '@ng-nest/ui/outlet';
-import { X_TABLE_CONTEXT } from './table.token';
-
-@Component({
-  selector: `${XTableFootPrefix}`,
-  imports: [XOutletDirective],
-  templateUrl: './table-foot.component.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class XTableFootComponent extends XTableFootProperty implements OnInit {
-  tfoot = viewChild.required<ElementRef<HTMLElement>>('tfoot');
-  table = inject(X_TABLE_CONTEXT, { optional: true })!;
-  cdr = inject(ChangeDetectorRef);
-  getRowHeight = computed(() => (this.rowHeight() == 0 ? '' : this.rowHeight()));
-  private elementRef = inject(ElementRef);
-
-  ngOnInit() {
-    XRemoveNgTag(this.elementRef.nativeElement);
-  }
-
-  ngAfterViewInit() {
-    this.table.tfoot.set(this.tfoot());
-  }
-}

package/table/table-head.component.html

@@ -1,144 +0,0 @@
-<thead
-  #thead
-  [ngStyle]="theadStyle()"
-  [class.x-table-head-top]="position() === 'top'"
-  [class.x-table-head-bottom]="position() === 'bottom'"
->
-  @if (cellConfig()) {
-    <tr [style.gridTemplateColumns]="cellConfig()!.gridTemplateColumns" [style.min-height.px]="getHeaderHeight()">
-      @for (column of cellConfig()!.cells; track column.id) {
-        <th
-          [class.x-table-sticky]="table.getStickyLeft(column) || table.getStickyRight(column)"
-          [class.x-table-sticky-left]="table.getStickyLeft(column)"
-          [class.x-table-sticky-right]="table.getStickyRight(column)"
-          [class.x-table-sticky-left-last]="table.getStickyLeftLast(column)"
-          [class.x-table-sticky-right-first]="table.getStickyRightFirst(column)"
-          [class.x-table-width-drag]="column.dragWidth"
-          [style.grid-area]="column.gridArea"
-          [style.left.px]="column.left"
-          [style.right.px]="column.right"
-          [style.min-height.px]="getHeaderHeight()"
-          [title]="column?.label"
-        >
-          <ng-container *ngTemplateOutlet="columnBaseTpl; context: { column: column }"></ng-container>
-          @if (column.dragWidth) {
-            <div
-              class="x-table-drag-width"
-              x-drag
-              (dragMoved)="dragWidthMoved($event, column)"
-              (dragStarted)="dragWidthStarted($event, column)"
-              (dragEnded)="dragWidthEnded($event, column)"
-            ></div>
-          }
-        </th>
-      }
-    </tr>
-  } @else {
-    <ng-container *ngTemplateOutlet="columnsTpl"></ng-container>
-  }
-  @if (table.headSearchTpl()) {
-    <ng-container *ngTemplateOutlet="columnsTpl; context: { case: 'search' }"></ng-container>
-  }
-</thead>
-
-<ng-template #columnsTpl let-case="case">
-  <tr
-    cdkDropList
-    cdkDropListOrientation="horizontal"
-    (cdkDropListSorted)="dropListSorted($event)"
-    (cdkDropListDropped)="dropListDropped($event)"
-    [style.height.px]="getHeaderHeight()"
-    [style.min-height.px]="getHeaderHeight()"
-    [style.padding-right.px]="scrollYWidth()"
-    [style.min-width.px]="scrollXWidth()"
-    [class.x-table-search]="case === 'search'"
-  >
-    @for (column of initColumns(); track column.id) {
-      <th
-        cdkDrag
-        [cdkDragDisabled]="column.draggingWidth || !column.dragColumn"
-        (cdkDragStarted)="dragStarted($event, column)"
-        (cdkDragEnded)="dragEnded(column)"
-        [ngClass]="thClassMap()"
-        [class.x-table-th]="true"
-        [class.x-table-sticky]="table.getSticky(column)"
-        [class.x-table-sticky-left]="table.getStickyLeft(column)"
-        [class.x-table-sticky-right]="table.getStickyRight(column)"
-        [class.x-table-sticky-left-last]="table.getStickyLeftLast(column)"
-        [class.x-table-sticky-right-first]="table.getStickyRightFirst(column)"
-        [style.min-height.px]="getHeaderHeight()"
-        [style.width.px]="getColumnWidth(column)"
-        [style.left.px]="column.left"
-        [style.right.px]="getColumnRight(column.right)"
-        [style.flex]="getFlex(column)"
-      >
-        @switch (case) {
-          @case ('search') {
-            <ng-container *xOutlet="table.headSearchTpl()!; context: { $column: column }"></ng-container>
-          }
-          @default {
-            <ng-container *ngTemplateOutlet="columnBaseTpl; context: { column: column }"></ng-container>
-            @if (column.dragWidth) {
-              <div
-                class="x-table-drag-width"
-                x-drag
-                (dragMoved)="dragWidthMoved($event, column)"
-                (dragStarted)="dragWidthStarted($event, column);"
-                (dragEnded)="dragWidthEnded($event, column)"
-              ></div>
-            }
-          }
-        }
-      </th>
-    }
-  </tr>
-</ng-template>
-
-<ng-template #columnBaseTpl let-column="column">
-  @switch (column.type) {
-    @case ('checkbox') {
-      @if (column.headChecked) {
-        <x-checkbox
-          [data]="[{ id: true, label: column.label }]"
-          [(ngModel)]="table.checkedValues()[column.id]"
-          (ngModelChange)="table.headChecked($event, column)"
-          [indeterminate]="table.checkedValues()[column.id + table.indeterminate()]"
-          single
-        ></x-checkbox>
-      }
-      @if (!column.headChecked) {
-        <ng-container *ngTemplateOutlet="cloumnDefaultTpl; context: { column: column }"></ng-container>
-      }
-    }
-    @case ('index') {
-      <a
-        ><ng-container *xOutlet="columnTpl()[column.id]; context: { $column: column }">
-          <ng-container *xOutlet="table.headThTpl(); context: { $column: column }">
-            {{ column.label }}
-          </ng-container>
-        </ng-container></a
-      >
-    }
-    @default {
-      <ng-container *ngTemplateOutlet="cloumnDefaultTpl; context: { column: column }"></ng-container>
-    }
-  }
-</ng-template>
-
-<ng-template #cloumnDefaultTpl let-column="column">
-  <a [class.x-table-sort]="column.sort" (click)="onSort(column)" [style.text-align]="column.textAlign">
-    <ng-container *xOutlet="columnTpl()[column.id]; context: { $column: column }">
-      <ng-container *xOutlet="table.headThTpl(); context: { $column: column }">
-        {{ column.label }}
-      </ng-container>
-    </ng-container>
-    @if (column.sort) {
-      <x-icon
-        type="fto-bar-chart"
-        class="x-table-sort-icon"
-        [class.x-table-icon-up]="sortStr() === column.id + ' desc'"
-        [class.x-table-icon-down]="sortStr() === column.id + ' asc'"
-      ></x-icon>
-    }
-  </a>
-</ng-template>

package/table/table-head.component.ts

@@ -1,185 +0,0 @@
-import {
-  Component,
-  OnInit,
-  ViewEncapsulation,
-  ElementRef,
-  inject,
-  computed,
-  viewChild,
-  signal,
-  ChangeDetectorRef
-} from '@angular/core';
-import { XTableHeadPrefix, XTableHeadProperty, XTableColumn, XTableCell, XTablePrefix } from './table.property';
-import { XIsEmpty, XSort, XNumber, XIsFunction, XRemoveNgTag } from '@ng-nest/ui/core';
-import { CdkDragDrop, CdkDragSortEvent, CdkDragStart, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
-import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
-import { XDragDirective } from '@ng-nest/ui/drag';
-import { XCheckboxComponent } from '@ng-nest/ui/checkbox';
-import { XOutletDirective } from '@ng-nest/ui/outlet';
-import { XIconComponent } from '@ng-nest/ui/icon';
-import { FormsModule } from '@angular/forms';
-import { X_TABLE_CONTEXT } from './table.token';
-
-@Component({
-  selector: `${XTableHeadPrefix}`,
-  imports: [
-    NgStyle,
-    NgClass,
-    NgTemplateOutlet,
-    FormsModule,
-    XDragDirective,
-    DragDropModule,
-    XCheckboxComponent,
-    XOutletDirective,
-    XIconComponent
-  ],
-  templateUrl: './table-head.component.html',
-  encapsulation: ViewEncapsulation.None
-})
-export class XTableHeadComponent extends XTableHeadProperty implements OnInit {
-  table = inject(X_TABLE_CONTEXT, { optional: true })!;
-  cdr = inject(ChangeDetectorRef);
-
-  thead = viewChild.required<ElementRef<HTMLElement>>('thead');
-  sort = signal<XSort[]>([]);
-  sortStr = signal('');
-  theadStyle = computed(() => {
-    let height = this.getHeaderHeight();
-    if (this.cellConfig() && this.cellConfig()!.cells) {
-      const spt = this.cellConfig()!.cells?.map((x) => {
-        const gridAreaSpt = x.gridArea?.split('/');
-        return gridAreaSpt && gridAreaSpt.length > 3 ? Number(gridAreaSpt[2]) : 2;
-      });
-      height = ((Math.max(...spt!) - 1) * (height as number)) as XNumber;
-    }
-    return {
-      ['min-height']: `${height}px`
-    };
-  });
-  thClassMap = computed(() => ({
-    [`${XTablePrefix}-th-${this.table.rowSize()}`]: !XIsEmpty(this.table.rowSize())
-  }));
-
-  initColumns = computed(() => [...this.columns()]);
-  getRowHeight = computed(() => (this.rowHeight() == 0 ? '' : this.rowHeight()));
-  getHeaderHeight = computed(() => this.headerHeight() ?? this.getRowHeight());
-
-  private elementRef = inject(ElementRef);
-
-  ngOnInit() {
-    XRemoveNgTag(this.elementRef.nativeElement);
-  }
-
-  ngAfterViewInit() {
-    this.table.theads.update((x) => {
-      x.push(this.thead());
-      return [...x];
-    });
-  }
-
-  getFlex(column: XTableColumn) {
-    if (column.width) return 'none';
-    if (!column.flex) return 1;
-    return column.flex;
-  }
-
-  getColumnRight(right?: number) {
-    if (Number(right) >= 0) {
-      if (Number(this.scrollYWidth()) >= 0) {
-        return Number(right) + Number(this.scrollYWidth());
-      }
-      return Number(right);
-    }
-    return '';
-  }
-
-  getColumnWidth(column: XTableColumn) {
-    return column.width;
-  }
-
-  onSort(column: XTableColumn) {
-    if (!column.sort) return;
-    if (XIsEmpty(this.sort())) this.sort.set([]);
-    let sort = this.sort()!.find((y) => y.field === column.id);
-    if (sort) {
-      if (sort.value === 'asc') {
-        this.sort.set([]);
-        this.sortStr.set('');
-      } else {
-        sort.value = 'asc';
-      }
-    } else {
-      sort = { field: column.id, value: 'desc' };
-      this.sort.set([sort]);
-    }
-    if (!XIsEmpty(this.sort())) this.sortStr.set(`${sort.field} ${sort.value}`);
-    this.table.checkSort(this.sort());
-    this.table.sortChange.emit(this.sort());
-    this.table.resetScroll(false, true);
-  }
-
-  dragWidthMoved(
-    position: { x: number; y: number; offsetX: number; offsetY: number },
-    column: XTableColumn | XTableCell
-  ) {
-    if (column.width) {
-      (column.width as number) += position.offsetX;
-      if (column.width < 60) column.width = 60;
-      XIsFunction(column.dragWidthMoved) && column.dragWidthMoved({ position, column });
-      this.table.columnDragWidthMoved.emit({ position, column });
-      this.table.detectChanges();
-    }
-  }
-
-  dragWidthStarted(position: { x: number; y: number }, column: XTableColumn | XTableCell) {
-    column.draggingWidth = true;
-    if (column.width && XIsFunction(column.dragWidthStarted)) {
-      column.dragWidthStarted({ position, column });
-      this.table.columnDragWidthStarted.emit({ position, column });
-    }
-  }
-
-  dragWidthEnded(position: { x: number; y: number }, column: XTableColumn | XTableCell) {
-    column.draggingWidth = false;
-    if (column.width && XIsFunction(column.dragWidthEnded)) {
-      column.dragWidthEnded({ position, column });
-      this.table.columnDragWidthEnded.emit({ position, column });
-    }
-  }
-
-  dropListDropped(event: CdkDragDrop<XTableColumn[]>) {
-    const previous = this.initColumns()[event.previousIndex];
-    const current = this.initColumns()[event.currentIndex];
-    const middle = { left: previous.left, right: previous.right };
-    previous.left = current.left;
-    previous.right = current.right;
-    current.left = middle.left;
-    current.right = middle.right;
-    moveItemInArray(this.initColumns(), event.previousIndex, event.currentIndex);
-    this.table.columnDropListDropped.emit(this.initColumns());
-  }
-
-  dropListSorted(event: CdkDragSortEvent<XTableColumn[]>) {
-    const previous = this.columns()[event.previousIndex];
-    const current = this.columns()[event.currentIndex];
-    const middle = { left: previous.left, right: previous.right };
-    previous.left = current.left;
-    previous.right = current.right;
-    current.left = middle.left;
-    current.right = middle.right;
-    moveItemInArray(this.columns(), event.previousIndex, event.currentIndex);
-    this.table.detectChanges();
-  }
-
-  dragStarted(_event: CdkDragStart, column: XTableColumn) {
-    column.dragging = true;
-    this.table.detectChanges();
-    this.table.columnDragStarted.emit(column);
-  }
-
-  dragEnded(column: XTableColumn) {
-    column.dragging = false;
-    this.table.detectChanges();
-    this.table.columnDragEnded.emit(column);
-  }
-}