@worktile/gantt 15.1.0-next.1 → 15.1.0-next.11

package/fesm2020/worktile-gantt.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Directive, Inject, Input, Output, ContentChild, HostBinding, Component, Injectable, ViewChild, Pipe, ViewChildren, PLATFORM_ID, ElementRef, Optional, SkipSelf, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, Directive, Inject, Input, Output, ContentChild, HostBinding, Component, Injectable, ViewChild, Pipe, ViewChildren, PLATFORM_ID, ElementRef, Optional, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, isPlatformServer, CommonModule } from '@angular/common';
-import { take, takeUntil, skip, switchMap, debounceTime as debounceTime$1, map, pairwise, auditTime, startWith as startWith$1, finalize } from 'rxjs/operators';
-import { BehaviorSubject, Subject, from, takeUntil as takeUntil$1, startWith, debounceTime, filter, merge, EMPTY, fromEvent, Observable } from 'rxjs';
+import { take, takeUntil, skip, switchMap, debounceTime, map, pairwise, auditTime as auditTime$1, startWith as startWith$1, finalize } from 'rxjs/operators';
+import { BehaviorSubject, Subject, from, takeUntil as takeUntil$1, startWith, auditTime, filter, merge, EMPTY, fromEvent, Observable, interval, animationFrameScheduler } from 'rxjs';
 import { fromUnixTime, getWeek, getDaysInMonth, differenceInCalendarDays, setDate, addSeconds, addMinutes, addHours, addDays, addWeeks, addMonths, addQuarters, addYears, startOfDay, startOfWeek, startOfMonth, startOfQuarter, startOfYear, endOfDay, endOfWeek, endOfMonth, endOfQuarter, endOfYear, getUnixTime, format, isWeekend, isToday, differenceInDays, differenceInCalendarQuarters, eachMonthOfInterval, eachYearOfInterval, eachWeekOfInterval, eachDayOfInterval, differenceInCalendarYears } from 'date-fns';
 export { addDays, addHours, addMinutes, addMonths, addQuarters, addSeconds, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarQuarters, differenceInDays, eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, endOfDay, endOfMonth, endOfQuarter, endOfWeek, endOfYear, format, fromUnixTime, getDaysInMonth, getUnixTime, getWeek, isToday, isWeekend, setDate, startOfDay, startOfMonth, startOfQuarter, startOfWeek, startOfYear } from 'date-fns';
 import { SelectionModel } from '@angular/cdk/collections';
@@ -41,6 +41,10 @@ class GanttSelectedEvent {
 }
 class GanttTableDragDroppedEvent {
 }
+class GanttTableDragStartedEvent {
+}
+class GanttTableDragEndedEvent {
+}
 class GanttTableDragEnterPredicateContext {
 }
 
@@ -1049,16 +1053,17 @@ class GanttUpper {
         this.ngZone.runOutsideAngular(() => {
             onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
                 this.element.style.opacity = '1';
+                const disabledLoadOnScroll = this.disabledLoadOnScroll;
                 this.dragContainer.dragStarted.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
+                    this.disabledLoadOnScroll = true;
                     this.dragStarted.emit(event);
                 });
                 this.dragContainer.dragMoved.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
                     this.dragMoved.emit(event);
                 });
                 this.dragContainer.dragEnded.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
+                    this.disabledLoadOnScroll = disabledLoadOnScroll;
                     this.dragEnded.emit(event);
-                    // this.computeRefs();
-                    // this.detectChanges();
                 });
             });
         });
@@ -1237,22 +1242,29 @@ class NgxGanttTableColumnComponent {
     set width(width) {
         this.columnWidth = coerceCssPixelValue(width);
     }
-    constructor(ganttUpper) {
+    constructor(ganttUpper, elementRef) {
         this.ganttUpper = ganttUpper;
+        this.elementRef = elementRef;
+    }
+    get classList() {
+        return this.elementRef.nativeElement.classList;
     }
 }
-NgxGanttTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttTableColumnComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttTableColumnComponent, selector: "ngx-gantt-column", inputs: { width: "width", name: "name", showExpandIcon: "showExpandIcon" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["cell"], descendants: true, static: true }, { propertyName: "headerTemplateRef", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
+NgxGanttTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttTableColumnComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttTableColumnComponent, selector: "ngx-gantt-column", inputs: { width: "width", name: "name", showExpandIcon: "showExpandIcon" }, host: { classAttribute: "gantt-table-column" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["cell"], descendants: true, static: true }, { propertyName: "headerTemplateRef", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttTableColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-gantt-column',
-                    template: ''
+                    template: '',
+                    host: {
+                        class: 'gantt-table-column'
+                    }
                 }]
         }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
-                }] }]; }, propDecorators: { width: [{
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { width: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -1270,11 +1282,13 @@ class NgxGanttTableComponent {
     constructor() {
         this.draggable = false;
         this.dragDropped = new EventEmitter();
+        this.dragStarted = new EventEmitter();
+        this.dragEnded = new EventEmitter();
         this.columnChanges = new EventEmitter();
     }
 }
 NgxGanttTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttTableComponent, selector: "ngx-gantt-table", inputs: { draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", columnChanges: "columnChanges" }, queries: [{ propertyName: "rowBeforeTemplate", first: true, predicate: ["rowBeforeSlot"], descendants: true, static: true }, { propertyName: "rowAfterTemplate", first: true, predicate: ["rowAfterSlot"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
+NgxGanttTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttTableComponent, selector: "ngx-gantt-table", inputs: { draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", columnChanges: "columnChanges" }, queries: [{ propertyName: "rowBeforeTemplate", first: true, predicate: ["rowBeforeSlot"], descendants: true, static: true }, { propertyName: "rowAfterTemplate", first: true, predicate: ["rowAfterSlot"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -1287,6 +1301,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 type: Input
             }], dragDropped: [{
                 type: Output
+            }], dragStarted: [{
+                type: Output
+            }], dragEnded: [{
+                type: Output
             }], columnChanges: [{
                 type: Output
             }], rowBeforeTemplate: [{
@@ -1421,7 +1439,7 @@ class GanttTableHeaderComponent {
         this.columnsChange();
         this.columns.changes.pipe(takeUntil$1(this.unsubscribe$)).subscribe(() => {
             this.columnsChange();
-            this.cdr.detectChanges();
+            this.gantt.cdr.detectChanges();
         });
     }
     columnsChange() {
@@ -1719,13 +1737,15 @@ class GanttTableBodyComponent {
         this.document = document;
         this.draggable = false;
         this.dragDropped = new EventEmitter();
+        this.dragStarted = new EventEmitter();
+        this.dragEnded = new EventEmitter();
         this.itemClick = new EventEmitter();
         this.ganttTableClass = true;
         this.ganttTableEmptyClass = false;
         this.ganttTableDragging = false;
         this.hasExpandIcon = false;
         // 缓存 Element 和 DragRef 的关系，方便在 Item 拖动时查找
-        this.itemDragRefMap = new Map();
+        this.itemDragsMap = new Map();
         this.itemDragMoved = new Subject();
         this.destroy$ = new Subject();
     }
@@ -1747,17 +1767,17 @@ class GanttTableBodyComponent {
         this.cdkDrags.changes
             .pipe(startWith(this.cdkDrags), takeUntil$1(this.destroy$))
             .subscribe((drags) => {
-            this.itemDragRefMap.clear();
+            this.itemDragsMap.clear();
             drags.forEach((drag) => {
                 if (drag.data) {
                     // cdkDrag 变化时，缓存 Element 与 DragRef 的关系，方便 Drag Move 时查找
-                    this.itemDragRefMap.set(drag.element.nativeElement, drag);
+                    this.itemDragsMap.set(drag.element.nativeElement, drag);
                 }
             });
         });
         this.itemDragMoved
-            .pipe(debounceTime(30), 
-        //  debounce 可能会导致拖动结束后仍然执行 moved ，所以通过判断 dragging 状态来过滤无效 moved
+            .pipe(auditTime(30), 
+        //  auditTime 可能会导致拖动结束后仍然执行 moved ，所以通过判断 dragging 状态来过滤无效 moved
         filter((event) => event.source._dragRef.isDragging()), takeUntil$1(this.destroy$))
             .subscribe((event) => {
             this.onItemDragMoved(event);
@@ -1773,10 +1793,14 @@ class GanttTableBodyComponent {
     onItemDragStarted(event) {
         this.ganttTableDragging = true;
         // 拖动开始时隐藏所有的子项
-        const children = this.getChildrenElementsByElement(event.source.getPlaceholderElement());
+        const children = this.getChildrenElementsByElement(event.source.element.nativeElement);
         children.forEach((element) => {
             element.classList.add('drag-item-hide');
         });
+        this.dragStarted.emit({
+            source: event.source.data?.origin,
+            sourceParent: this.getParentByItem(event.source.data)?.origin
+        });
     }
     emitItemDragMoved(event) {
         this.itemDragMoved.next(event);
@@ -1797,12 +1821,12 @@ class GanttTableBodyComponent {
         }
         // 缓存放置目标Id 并计算鼠标相对应的位置
         this.itemDropTarget = {
-            id: this.itemDragRefMap.get(targetElement)?.data.id,
+            id: this.itemDragsMap.get(targetElement)?.data.id,
             position: this.getTargetPosition(targetElement, event)
         };
         // 执行外部传入的 dropEnterPredicate 判断是否允许拖入目标项
         if (this.dropEnterPredicate) {
-            const targetDragRef = this.itemDragRefMap.get(targetElement);
+            const targetDragRef = this.itemDragsMap.get(targetElement);
             if (this.dropEnterPredicate({
                 source: event.source.data.origin,
                 target: targetDragRef.data.origin,
@@ -1812,6 +1836,7 @@ class GanttTableBodyComponent {
             }
             else {
                 this.itemDropTarget = null;
+                this.cleanupDragArtifacts(false);
             }
         }
         else {
@@ -1820,31 +1845,38 @@ class GanttTableBodyComponent {
     }
     onItemDragEnded(event) {
         this.ganttTableDragging = false;
+        this.dragEnded.emit({
+            source: event.source.data?.origin,
+            sourceParent: this.getParentByItem(event.source.data)?.origin
+        });
     }
     onListDropped(event) {
         if (!this.itemDropTarget) {
             return;
         }
-        const targetDragRef = this.cdkDrags.find((item) => item.data?.id === this.itemDropTarget.id);
         const sourceItem = event.item.data;
+        const sourceParent = this.getParentByItem(sourceItem);
+        const sourceChildren = this.getExpandChildrenByDrag(event.item);
+        const targetDragRef = this.cdkDrags.find((item) => item.data?.id === this.itemDropTarget.id);
         const targetItem = targetDragRef?.data;
-        this.removeItem(sourceItem);
+        const targetParent = this.getParentByItem(targetItem);
+        this.removeItem(sourceItem, sourceChildren);
         switch (this.itemDropTarget.position) {
             case 'before':
             case 'after':
-                this.insertItem(targetItem, sourceItem, this.itemDropTarget.position);
+                this.insertItem(targetItem, sourceItem, sourceChildren, this.itemDropTarget.position);
                 sourceItem.updateLevel(targetItem.level);
                 break;
             case 'inside':
-                this.insertChildrenItem(targetItem, sourceItem);
+                this.insertChildrenItem(targetItem, sourceItem, sourceChildren);
                 sourceItem.updateLevel(targetItem.level + 1);
                 break;
         }
         this.dragDropped.emit({
             source: sourceItem.origin,
-            sourceParent: this.getParentByItem(sourceItem)?.origin,
+            sourceParent: sourceParent?.origin,
             target: targetItem.origin,
-            targetParent: this.getParentByItem(targetItem)?.origin,
+            targetParent: targetParent?.origin,
             dropPosition: this.itemDropTarget.position
         });
         this.cleanupDragArtifacts(true);
@@ -1856,14 +1888,14 @@ class GanttTableBodyComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    removeItem(item) {
-        this.renderData.splice(this.renderData.indexOf(item), 1);
-        this.flatData.splice(this.flatData.indexOf(item), 1);
+    removeItem(item, children) {
+        this.renderData.splice(this.renderData.indexOf(item), 1 + children.length);
+        this.flatData.splice(this.flatData.indexOf(item), 1 + children.length);
     }
-    insertItem(target, inserted, position) {
+    insertItem(target, inserted, children, position) {
         if (position === 'before') {
-            this.renderData.splice(this.renderData.indexOf(target), 0, inserted);
-            this.flatData.splice(this.flatData.indexOf(target), 0, inserted);
+            this.renderData.splice(this.renderData.indexOf(target), 0, inserted, ...children);
+            this.flatData.splice(this.flatData.indexOf(target), 0, inserted, ...children);
         }
         else {
             const dragRef = this.cdkDrags.find((drag) => drag.data === target);
@@ -1872,14 +1904,14 @@ class GanttTableBodyComponent {
             if (target.expanded) {
                 childrenCount = this.getChildrenElementsByElement(dragRef.element.nativeElement)?.length || 0;
             }
-            this.renderData.splice(this.renderData.indexOf(target) + 1 + childrenCount, 0, inserted);
-            this.flatData.splice(this.flatData.indexOf(target) + 1 + childrenCount, 0, inserted);
+            this.renderData.splice(this.renderData.indexOf(target) + 1 + childrenCount, 0, inserted, ...children);
+            this.flatData.splice(this.flatData.indexOf(target) + 1 + childrenCount, 0, inserted, ...children);
         }
     }
-    insertChildrenItem(target, inserted) {
+    insertChildrenItem(target, inserted, children) {
         if (target.expanded) {
-            this.renderData.splice(this.renderData.indexOf(target) + target.children.length + 1, 0, inserted);
-            this.flatData.splice(this.flatData.indexOf(target) + target.children.length + 1, 0, inserted);
+            this.renderData.splice(this.renderData.indexOf(target) + target.children.length + 1, 0, inserted, ...children);
+            this.flatData.splice(this.flatData.indexOf(target) + target.children.length + 1, 0, inserted, ...children);
         }
         target.children.push(inserted);
     }
@@ -1888,16 +1920,26 @@ class GanttTableBodyComponent {
             return n.children?.includes(item);
         });
     }
-    getChildrenElementsByElement(element) {
+    getExpandChildrenByDrag(dragRef) {
+        if (!dragRef.data.expanded) {
+            return [];
+        }
+        else {
+            const childrenElements = this.getChildrenElementsByElement(dragRef.element.nativeElement);
+            return childrenElements.map((element) => this.itemDragsMap.get(element).data);
+        }
+    }
+    getChildrenElementsByElement(dragElement) {
         // 通过循环持续查找 next element，如果 element 的 level 小于当前 item 的 level，则为它的 children
         const children = [];
-        const dragRef = this.itemDragRefMap.get(element);
-        let nextElement = element.nextElementSibling;
-        let nextDragRef = this.itemDragRefMap.get(nextElement);
+        const dragRef = this.itemDragsMap.get(dragElement);
+        // 如果当前的 Drag 正在拖拽，会创建 PlaceholderElement 占位，所以以 PlaceholderElement 向下查找
+        let nextElement = (dragRef.getPlaceholderElement() || dragElement).nextElementSibling;
+        let nextDragRef = this.itemDragsMap.get(nextElement);
         while (nextDragRef && nextDragRef.data.level > dragRef.data.level) {
             children.push(nextElement);
             nextElement = nextElement.nextElementSibling;
-            nextDragRef = this.itemDragRefMap.get(nextElement);
+            nextDragRef = this.itemDragsMap.get(nextElement);
         }
         return children;
     }
@@ -1924,18 +1966,18 @@ class GanttTableBodyComponent {
     cleanupDragArtifacts(dropped = false) {
         if (dropped) {
             this.itemDropTarget = null;
+            this.document.querySelectorAll('.drag-item-hide').forEach((element) => element.classList.remove('drag-item-hide'));
         }
         this.document.querySelectorAll('.drop-position-before').forEach((element) => element.classList.remove('drop-position-before'));
         this.document.querySelectorAll('.drop-position-after').forEach((element) => element.classList.remove('drop-position-after'));
         this.document.querySelectorAll('.drop-position-inside').forEach((element) => element.classList.remove('drop-position-inside'));
-        this.document.querySelectorAll('.drag-item-hide').forEach((element) => element.classList.remove('drop-item-hide'));
     }
 }
 GanttTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttTableBodyComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-GanttTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: { renderData: "renderData", flatData: "flatData", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate", draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", itemClick: "itemClick" }, host: { properties: { "class.gantt-table-draggable": "this.draggable", "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass", "class.gantt-table-dragging": "this.ganttTableDragging" } }, viewQueries: [{ propertyName: "cdkDrags", predicate: (CdkDrag), descendants: true }], ngImport: i0, template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"renderData\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!renderData?.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"renderData && renderData.length > 0\">\n    <ng-container *ngFor=\"let item of renderData; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ item.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!item.items\"\n        (click)=\"itemClick.emit({ event: $event, selectedValue: item.origin })\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n        (cdkDragStarted)=\"onItemDragStarted($event)\"\n        (cdkDragEnded)=\"onItemDragEnded($event)\"\n        (cdkDragMoved)=\"emitItemDragMoved($event)\"\n        class=\"gantt-table-item\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n        [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"rowBeforeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n\n        <div class=\"gantt-table-column\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n          <!-- drag icon -->\n          <gantt-icon\n            *ngIf=\"first && draggable\"\n            class=\"gantt-drag-handle\"\n            iconName=\"drag\"\n            cdkDragHandle\n            [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          ></gantt-icon>\n          <!-- expand icon -->\n          <div\n            *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n            class=\"gantt-expand-icon\"\n            [style.marginLeft.px]=\"item.level * 20\"\n          >\n            <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && item.expandable\">\n              <gantt-icon\n                *ngIf=\"!item.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren($event, item)\"\n              >\n              </gantt-icon>\n              <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <!-- column content -->\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n        <ng-template\n          [ngTemplateOutlet]=\"rowAfterTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }] });
+GanttTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: { renderData: "renderData", flatData: "flatData", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate", draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", itemClick: "itemClick" }, host: { properties: { "class.gantt-table-draggable": "this.draggable", "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass", "class.gantt-table-dragging": "this.ganttTableDragging" } }, viewQueries: [{ propertyName: "cdkDrags", predicate: (CdkDrag), descendants: true }], ngImport: i0, template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"renderData\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!renderData?.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"renderData && renderData.length > 0\">\n    <ng-container *ngFor=\"let item of renderData; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ item.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!item.items\"\n        (click)=\"itemClick.emit({ event: $event, selectedValue: item.origin })\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n        (cdkDragStarted)=\"onItemDragStarted($event)\"\n        (cdkDragEnded)=\"onItemDragEnded($event)\"\n        (cdkDragMoved)=\"emitItemDragMoved($event)\"\n        class=\"gantt-table-item\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n        [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"rowBeforeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n\n        <div [classList]=\"column.classList\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n          <!-- drag icon -->\n          <gantt-icon\n            *ngIf=\"first && draggable\"\n            class=\"gantt-drag-handle\"\n            iconName=\"drag\"\n            cdkDragHandle\n            [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          ></gantt-icon>\n          <!-- expand icon -->\n          <div\n            *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n            class=\"gantt-expand-icon\"\n            [style.marginLeft.px]=\"item.level * 20\"\n          >\n            <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)\">\n              <gantt-icon\n                *ngIf=\"!item.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren($event, item)\"\n              >\n              </gantt-icon>\n              <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <!-- column content -->\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n        <ng-template\n          [ngTemplateOutlet]=\"rowAfterTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttTableBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-table-body', template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"renderData\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!renderData?.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"renderData && renderData.length > 0\">\n    <ng-container *ngFor=\"let item of renderData; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ item.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!item.items\"\n        (click)=\"itemClick.emit({ event: $event, selectedValue: item.origin })\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n        (cdkDragStarted)=\"onItemDragStarted($event)\"\n        (cdkDragEnded)=\"onItemDragEnded($event)\"\n        (cdkDragMoved)=\"emitItemDragMoved($event)\"\n        class=\"gantt-table-item\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n        [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"rowBeforeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n\n        <div class=\"gantt-table-column\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n          <!-- drag icon -->\n          <gantt-icon\n            *ngIf=\"first && draggable\"\n            class=\"gantt-drag-handle\"\n            iconName=\"drag\"\n            cdkDragHandle\n            [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          ></gantt-icon>\n          <!-- expand icon -->\n          <div\n            *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n            class=\"gantt-expand-icon\"\n            [style.marginLeft.px]=\"item.level * 20\"\n          >\n            <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && item.expandable\">\n              <gantt-icon\n                *ngIf=\"!item.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren($event, item)\"\n              >\n              </gantt-icon>\n              <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <!-- column content -->\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n        <ng-template\n          [ngTemplateOutlet]=\"rowAfterTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'gantt-table-body', template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"renderData\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!renderData?.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"renderData && renderData.length > 0\">\n    <ng-container *ngFor=\"let item of renderData; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ item.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!item.items\"\n        (click)=\"itemClick.emit({ event: $event, selectedValue: item.origin })\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n        (cdkDragStarted)=\"onItemDragStarted($event)\"\n        (cdkDragEnded)=\"onItemDragEnded($event)\"\n        (cdkDragMoved)=\"emitItemDragMoved($event)\"\n        class=\"gantt-table-item\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n        [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"rowBeforeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n\n        <div [classList]=\"column.classList\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n          <!-- drag icon -->\n          <gantt-icon\n            *ngIf=\"first && draggable\"\n            class=\"gantt-drag-handle\"\n            iconName=\"drag\"\n            cdkDragHandle\n            [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          ></gantt-icon>\n          <!-- expand icon -->\n          <div\n            *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n            class=\"gantt-expand-icon\"\n            [style.marginLeft.px]=\"item.level * 20\"\n          >\n            <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)\">\n              <gantt-icon\n                *ngIf=\"!item.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren($event, item)\"\n              >\n              </gantt-icon>\n              <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <!-- column content -->\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n        <ng-template\n          [ngTemplateOutlet]=\"rowAfterTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [GANTT_ABSTRACT_TOKEN]
@@ -1968,6 +2010,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 type: Input
             }], dragDropped: [{
                 type: Output
+            }], dragStarted: [{
+                type: Output
+            }], dragEnded: [{
+                type: Output
             }], itemClick: [{
                 type: Output
             }], ganttTableClass: [{
@@ -2265,7 +2311,7 @@ class GanttLinksComponent {
             this.elementRef.nativeElement.style.visibility = 'hidden';
         });
         merge(this.ganttUpper.viewChange, this.ganttUpper.expandChange, this.ganttUpper.view.start$, this.ganttUpper.dragEnded, this.ganttUpper.linkDragEnded, this.ngZone.onStable.pipe(take(1)).pipe(switchMap(() => this.ganttUpper.table?.dragDropped || EMPTY)))
-            .pipe(skip(1), debounceTime$1(0), takeUntil(this.unsubscribe$))
+            .pipe(skip(1), debounceTime(0), takeUntil(this.unsubscribe$))
             .subscribe(() => {
             this.elementRef.nativeElement.style.visibility = 'visible';
             this.buildLinks();
@@ -2452,6 +2498,60 @@ function normalizePassiveListenerOptions(options) {
 /** Options used to bind passive event listeners. */
 const passiveListenerOptions = normalizePassiveListenerOptions({ passive: true });
 
+/**
+ * Proximity, as a ratio to width/height at which to start auto-scrolling the drop list or the
+ * viewport. The value comes from trying it out manually until it feels right.
+ */
+const SCROLL_PROXIMITY_THRESHOLD = 0.05;
+/**
+ * Gets whether the horizontal auto-scroll direction of a node.
+ * @param clientRect Dimensions of the node.
+ * @param pointerX Position of the user's pointer along the x axis.
+ */
+function getHorizontalScrollDirection(clientRect, pointerX) {
+    const { left, right, width } = clientRect;
+    const xThreshold = width * SCROLL_PROXIMITY_THRESHOLD;
+    if (pointerX >= left - xThreshold && pointerX <= left + xThreshold) {
+        return 1 /* AutoScrollHorizontalDirection.LEFT */;
+    }
+    else if (pointerX >= right - xThreshold && pointerX <= right + xThreshold) {
+        return 2 /* AutoScrollHorizontalDirection.RIGHT */;
+    }
+    return 0 /* AutoScrollHorizontalDirection.NONE */;
+}
+/**
+ * Checks whether the pointer coordinates are close to a ClientRect.
+ * @param rect ClientRect to check against.
+ * @param threshold Threshold around the ClientRect.
+ * @param pointerX Coordinates along the X axis.
+ * @param pointerY Coordinates along the Y axis.
+ */
+function isPointerNearClientRect(rect, threshold, pointerX, pointerY) {
+    const { top, right, bottom, left, width, height } = rect;
+    const xThreshold = width * threshold;
+    const yThreshold = height * threshold;
+    return pointerY > top - yThreshold && pointerY < bottom + yThreshold && pointerX > left - xThreshold && pointerX < right + xThreshold;
+}
+/**
+ * Gets the speed rate of auto scrolling
+ * @param clientRect Dimensions of the node.
+ * @param pointerX Position of the user's pointer along the x axis.
+ * @param horizontalScrollDirection The direction in which the mouse is dragged horizontally
+ */
+function getAutoScrollSpeedRates(clientRect, pointerX, horizontalScrollDirection) {
+    let autoScrollSpeedRates = 4;
+    const speedLevels = 4;
+    const { left, right, width } = clientRect;
+    const xThreshold = width * SCROLL_PROXIMITY_THRESHOLD;
+    if (horizontalScrollDirection === 1 /* AutoScrollHorizontalDirection.LEFT */) {
+        autoScrollSpeedRates = Math.ceil((xThreshold - (pointerX > left ? pointerX - left : 0)) / (xThreshold / speedLevels));
+    }
+    if (horizontalScrollDirection === 2 /* AutoScrollHorizontalDirection.RIGHT */) {
+        autoScrollSpeedRates = Math.ceil((xThreshold - (right > pointerX ? right - pointerX : 0)) / (xThreshold / speedLevels));
+    }
+    return autoScrollSpeedRates;
+}
+
 const scrollThreshold = 50;
 var ScrollDirection;
 (function (ScrollDirection) {
@@ -2535,7 +2635,7 @@ class GanttDomService {
             .subscribe(subscriber)));
     }
     getResize() {
-        return isPlatformServer(this.platformId) ? EMPTY : fromEvent(window, 'resize').pipe(auditTime(150));
+        return isPlatformServer(this.platformId) ? EMPTY : fromEvent(window, 'resize').pipe(auditTime$1(150));
     }
     scrollMainContainer(left) {
         if (isNumber(left)) {
@@ -2559,388 +2659,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                     args: [PLATFORM_ID]
                 }] }]; } });
 
-class GanttDragBackdropComponent {
+/**
+ * Proximity, as a ratio to width/height, at which a
+ * dragged item will affect the drop container.
+ */
+const DROP_PROXIMITY_THRESHOLD = 0.05;
+const dragMinWidth = 10;
+const autoScrollBaseStep = 2;
+const activeClass = 'gantt-bar-active';
+const dropActiveClass = 'gantt-bar-drop-active';
+const singleDropActiveClass = 'gantt-bar-single-drop-active';
+function createSvgElement(qualifiedName, className) {
+    const element = document.createElementNS('http://www.w3.org/2000/svg', qualifiedName);
+    element.classList.add(className);
+    return element;
 }
-GanttDragBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttDragBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GanttDragBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop", host: { classAttribute: "gantt-drag-backdrop" }, ngImport: i0, template: "<div class=\"gantt-drag-mask\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttDragBackdropComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gantt-drag-backdrop', host: {
-                        class: 'gantt-drag-backdrop'
-                    }, template: "<div class=\"gantt-drag-mask\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" }]
-        }] });
-
-class GanttCalendarHeaderComponent {
-    get view() {
-        return this.ganttUpper.view;
+class GanttBarDrag {
+    get dragDisabled() {
+        return !this.item.draggable || !this.ganttUpper.draggable;
     }
-    constructor(ganttUpper, ngZone, elementRef) {
-        this.ganttUpper = ganttUpper;
-        this.ngZone = ngZone;
-        this.elementRef = elementRef;
-        this.unsubscribe$ = new Subject();
-        this.headerHeight = headerHeight;
-        this.viewTypes = GanttViewType;
-        this.className = `gantt-calendar gantt-calendar-header`;
+    get linkDragDisabled() {
+        return !this.item.linkable || !this.ganttUpper.linkable;
     }
-    ngOnInit() {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
-                .pipe(takeUntil(this.unsubscribe$))
-                .subscribe(() => {
-                if (this.ganttUpper.viewType === GanttViewType.day)
-                    this.setTodayPoint();
-            });
-        });
+    get barHandleDragMoveAndScrollDistance() {
+        return this.barHandleDragMoveDistance + this.dragScrollDistance;
     }
-    setTodayPoint() {
-        const x = this.view.getTodayXPoint();
-        const today = new GanttDate().getDate();
-        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
-        const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0];
-        if (isNumber(x)) {
-            if (rect) {
-                rect.style.left = `${x - todayWidth / 2}px`;
-                rect.style.top = `${headerHeight - todayHeight}px`;
-                rect.innerHTML = today.toString();
-            }
-        }
-        else {
-            todayEle.style.display = 'none';
-        }
+    get autoScrollStep() {
+        return Math.pow(autoScrollBaseStep, this.autoScrollSpeedRates);
     }
-    trackBy(point, index) {
-        return point.text || index;
+    constructor(dragDrop, dom, dragContainer, _ngZone) {
+        this.dragDrop = dragDrop;
+        this.dom = dom;
+        this.dragContainer = dragContainer;
+        this._ngZone = _ngZone;
+        this.dragRefs = [];
+        this.destroy$ = new Subject();
+        /** Used to signal to the current auto-scroll sequence when to stop. */
+        this.stopScrollTimers$ = new Subject();
+        /** move distance when drag bar */
+        this.barDragMoveDistance = 0;
+        /** move distance when drag bar handle */
+        this.barHandleDragMoveDistance = 0;
+        /** scrolling state when drag */
+        this.dragScrolling = false;
+        /** dragScrollDistance */
+        this.dragScrollDistance = 0;
+        /** Horizontal direction in which the list is currently scrolling. */
+        this._horizontalScrollDirection = 0 /* AutoScrollHorizontalDirection.NONE */;
+        /** Speed ratio for auto scroll */
+        this.autoScrollSpeedRates = 1;
+        this.startScrollInterval = () => {
+            this.stopScrolling();
+            interval(0, animationFrameScheduler)
+                .pipe(takeUntil(this.stopScrollTimers$))
+                .subscribe(() => {
+                const node = this.dom.mainContainer;
+                const scrollStep = this.autoScrollStep;
+                if (this._horizontalScrollDirection === 1 /* AutoScrollHorizontalDirection.LEFT */) {
+                    node.scrollBy(-scrollStep, 0);
+                }
+                else if (this._horizontalScrollDirection === 2 /* AutoScrollHorizontalDirection.RIGHT */) {
+                    node.scrollBy(scrollStep, 0);
+                }
+            });
+        };
     }
-}
-GanttCalendarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttCalendarHeaderComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GanttCalendarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text\n      class=\"primary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"headerHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttCalendarHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gantt-calendar-header', template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text\n      class=\"primary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"headerHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n</svg>\n" }]
-        }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-const mainHeight = 5000;
-class GanttCalendarGridComponent {
-    get view() {
-        return this.ganttUpper.view;
+    createDragRef(element) {
+        const dragRef = this.dragDrop.createDrag(element);
+        return dragRef;
     }
-    constructor(ganttUpper, ngZone, elementRef) {
-        this.ganttUpper = ganttUpper;
-        this.ngZone = ngZone;
-        this.elementRef = elementRef;
-        this.unsubscribe$ = new Subject();
-        this.headerHeight = headerHeight;
-        this.mainHeight = mainHeight;
-        this.todayBorderRadius = todayBorderRadius;
-        this.viewTypes = GanttViewType;
-        this.className = `gantt-calendar gantt-calendar-grid`;
+    createDragScrollEvent(dragRef) {
+        return fromEvent(this.dom.mainContainer, 'scroll', passiveListenerOptions).pipe(takeUntil(dragRef.ended));
     }
-    setTodayPoint() {
-        const x = this.view.getTodayXPoint();
-        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
-        const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0];
-        if (isNumber(x)) {
-            if (line) {
-                line.style.left = `${x}px`;
-                line.style.top = `0px`;
-                line.style.bottom = `${-mainHeight}px`;
+    createMouseEvents() {
+        const dropClass = this.ganttUpper.config.linkOptions?.dependencyTypes?.length === 1 &&
+            this.ganttUpper.config.linkOptions?.dependencyTypes[0] === GanttLinkType.fs
+            ? singleDropActiveClass
+            : dropActiveClass;
+        fromEvent(this.barElement, 'mouseenter', passiveListenerOptions)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            if (this.dragContainer.linkDraggingId && this.dragContainer.linkDraggingId !== this.item.id) {
+                if (this.item.linkable) {
+                    this.barElement.classList.add(dropClass);
+                    this.dragContainer.emitLinkDragEntered({
+                        item: this.item,
+                        element: this.barElement
+                    });
+                }
             }
-        }
-        else {
-            todayEle.style.display = 'none';
-        }
+            else {
+                this.barElement.classList.add(activeClass);
+            }
+        });
+        fromEvent(this.barElement, 'mouseleave', passiveListenerOptions)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            if (!this.dragContainer.linkDraggingId) {
+                this.barElement.classList.remove(activeClass);
+            }
+            else {
+                this.dragContainer.emitLinkDragLeaved();
+            }
+            this.barElement.classList.remove(dropClass);
+        });
     }
-    ngOnInit() {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
-                .pipe(takeUntil(this.unsubscribe$))
-                .subscribe(() => {
-                this.setTodayPoint();
+    createBarDrag() {
+        const dragRef = this.createDragRef(this.barElement);
+        dragRef.lockAxis = 'x';
+        dragRef.withBoundaryElement(this.dom.mainItems);
+        dragRef.started.subscribe(() => {
+            this.setDraggingStyles();
+            this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
+            this.createDragScrollEvent(dragRef).subscribe(() => {
+                if (dragRef.isDragging()) {
+                    const dragScrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
+                    this.dragScrollDistance = dragScrollDistance;
+                    dragRef['_boundaryRect'] = this.dom.mainItems.getBoundingClientRect();
+                    this.barDragMove();
+                }
             });
+            this.dragContainer.dragStarted.emit({ item: this.item.origin });
         });
-    }
-    trackBy(point, index) {
-        return point.text || index;
-    }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-}
-GanttCalendarGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttCalendarGridComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GanttCalendarGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight - 1\">\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n    </g>\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttCalendarGridComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gantt-calendar-grid', template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight - 1\">\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n    </g>\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n" }]
-        }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class NgxGanttToolbarComponent {
-    constructor(ganttUpper) {
-        this.ganttUpper = ganttUpper;
-        this.ganttItemClass = true;
-        this.ganttViewsMap = keyBy(ganttViews, 'value');
-    }
-    selectView(view) {
-        this.ganttUpper.changeView(view);
-    }
-}
-NgxGanttToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttToolbarComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttToolbarComponent, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: { template: "template" }, host: { properties: { "class.gantt-toolbar": "this.ganttItemClass" } }, ngImport: i0, template: "<div class=\"toolbar-container\">\n  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let view of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div class=\"toolbar-view\" *ngIf=\"ganttViewsMap[view]\" [class.active]=\"view === this.ganttUpper.viewType\" (click)=\"selectView(view)\">\n          {{ ganttViewsMap[view].name }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-gantt-toolbar,gantt-toolbar', template: "<div class=\"toolbar-container\">\n  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let view of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div class=\"toolbar-view\" *ngIf=\"ganttViewsMap[view]\" [class.active]=\"view === this.ganttUpper.viewType\" (click)=\"selectView(view)\">\n          {{ ganttViewsMap[view].name }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }]; }, propDecorators: { template: [{
-                type: Input
-            }], ganttItemClass: [{
-                type: HostBinding,
-                args: ['class.gantt-toolbar']
-            }] } });
-
-class NgxGanttRootComponent {
-    get view() {
-        return this.ganttUpper.view;
-    }
-    constructor(elementRef, ngZone, dom, dragContainer, ganttUpper, printService) {
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-        this.dom = dom;
-        this.dragContainer = dragContainer;
-        this.ganttUpper = ganttUpper;
-        this.printService = printService;
-        this.unsubscribe$ = new Subject();
-        this.ganttUpper.dragContainer = dragContainer;
-    }
-    ngOnInit() {
-        // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
-        // the `onStable` will never emit any value.
-        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
-        // Normally this isn't in the zone, but it can cause performance regressions for apps
-        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
-        this.ngZone.runOutsideAngular(() => {
-            onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-                this.dom.initialize(this.elementRef);
-                if (this.printService) {
-                    this.printService.register(this.elementRef);
-                }
-                this.setupScrollClass();
-                this.setupResize();
-                this.setupViewScroll();
-                // 优化初始化时Scroll滚动体验问题，通过透明度解决，默认透明度为0，滚动结束后恢复
-                this.elementRef.nativeElement.style.opacity = '1';
-                this.ganttUpper.viewChange.pipe(startWith$1(null), takeUntil(this.unsubscribe$)).subscribe(() => {
-                    this.scrollToToday();
-                });
-            });
-        });
-    }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-    }
-    setupViewScroll() {
-        if (this.ganttUpper.disabledLoadOnScroll) {
-            return;
-        }
-        this.dom
-            .getViewerScroll(passiveListenerOptions)
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe((event) => {
-            if (event.direction === ScrollDirection.LEFT) {
-                const dates = this.view.addStartDate();
-                if (dates) {
-                    event.target.scrollLeft += this.view.getDateRangeWidth(dates.start, dates.end);
-                    if (this.ganttUpper.loadOnScroll.observers) {
-                        this.ngZone.run(() => this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() }));
-                    }
-                }
-            }
-            if (event.direction === ScrollDirection.RIGHT) {
-                const dates = this.view.addEndDate();
-                if (dates && this.ganttUpper.loadOnScroll.observers) {
-                    this.ngZone.run(() => this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() }));
-                }
-            }
-        });
-    }
-    setupResize() {
-        this.dom
-            .getResize()
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe(() => {
-            this.setupScrollClass();
-        });
-    }
-    setupScrollClass() {
-        const mainContainer = this.dom.mainContainer;
-        const height = mainContainer.offsetHeight;
-        const scrollHeight = mainContainer.scrollHeight;
-        if (scrollHeight > height) {
-            this.elementRef.nativeElement.className = 'gantt gantt-scroll';
-        }
-        else {
-            this.elementRef.nativeElement.className = 'gantt';
-        }
-    }
-    scrollToToday() {
-        const x = this.view.getTodayXPoint();
-        this.dom.scrollMainContainer(x);
-    }
-    scrollToDate(date) {
-        let x;
-        if (typeof date === 'number') {
-            x = this.view.getXPointByDate(new GanttDate(date));
-        }
-        else {
-            x = this.view.getXPointByDate(date);
-        }
-        this.dom.scrollMainContainer(x);
-    }
-}
-NgxGanttRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttRootComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: GanttDomService }, { token: GanttDragContainer }, { token: GANTT_UPPER_TOKEN }, { token: GanttPrintService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { classAttribute: "gantt" }, providers: [GanttDomService, GanttDragContainer], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "backdrop", first: true, predicate: GanttDragBackdropComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"gantt-side\" *ngIf=\"sideTemplate\" [style.width.px]=\"sideWidth\">\n  <div class=\"gantt-side-container\" cdkScrollable>\n    <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n  </div>\n</div>\n<div class=\"gantt-container\" *ngIf=\"mainTemplate\">\n  <gantt-calendar-header></gantt-calendar-header>\n  <gantt-calendar-grid></gantt-calendar-grid>\n  <gantt-drag-backdrop></gantt-drag-backdrop>\n  <div class=\"gantt-main\">\n    <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n  </div>\n</div>\n<ng-content></ng-content>\n<gantt-toolbar *ngIf=\"ganttUpper.showToolbar || ganttUpper.toolbarTemplate\" [template]=\"ganttUpper.toolbarTemplate\"> </gantt-toolbar>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: NgxGanttToolbarComponent, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: ["template"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttRootComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-gantt-root', providers: [GanttDomService, GanttDragContainer], host: {
-                        class: 'gantt'
-                    }, template: "<div class=\"gantt-side\" *ngIf=\"sideTemplate\" [style.width.px]=\"sideWidth\">\n  <div class=\"gantt-side-container\" cdkScrollable>\n    <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n  </div>\n</div>\n<div class=\"gantt-container\" *ngIf=\"mainTemplate\">\n  <gantt-calendar-header></gantt-calendar-header>\n  <gantt-calendar-grid></gantt-calendar-grid>\n  <gantt-drag-backdrop></gantt-drag-backdrop>\n  <div class=\"gantt-main\">\n    <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n  </div>\n</div>\n<ng-content></ng-content>\n<gantt-toolbar *ngIf=\"ganttUpper.showToolbar || ganttUpper.toolbarTemplate\" [template]=\"ganttUpper.toolbarTemplate\"> </gantt-toolbar>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: GanttDomService }, { type: GanttDragContainer }, { type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }, { type: GanttPrintService, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { sideWidth: [{
-                type: Input
-            }], sideTemplate: [{
-                type: ContentChild,
-                args: ['sideTemplate', { static: true }]
-            }], mainTemplate: [{
-                type: ContentChild,
-                args: ['mainTemplate', { static: true }]
-            }], backdrop: [{
-                type: ViewChild,
-                args: [GanttDragBackdropComponent, { static: true, read: ElementRef }]
-            }] } });
-
-const dragMinWidth = 10;
-const autoScrollStep = 10;
-const activeClass = 'gantt-bar-active';
-const dropActiveClass = 'gantt-bar-drop-active';
-const singleDropActiveClass = 'gantt-bar-single-drop-active';
-function createSvgElement(qualifiedName, className) {
-    const element = document.createElementNS('http://www.w3.org/2000/svg', qualifiedName);
-    element.classList.add(className);
-    return element;
-}
-class GanttBarDrag {
-    get dragDisabled() {
-        return !this.item.draggable || !this.ganttUpper.draggable;
-    }
-    get linkDragDisabled() {
-        return !this.item.linkable || !this.ganttUpper.linkable;
-    }
-    constructor(dragDrop, dom, dragContainer, root) {
-        this.dragDrop = dragDrop;
-        this.dom = dom;
-        this.dragContainer = dragContainer;
-        this.root = root;
-        this.dragRefs = [];
-        this.destroy$ = new Subject();
-        // scrolling state when drag
-        this.dragScrolling = false;
-    }
-    createDragRef(element) {
-        const dragRef = this.dragDrop.createDrag(element);
-        // dragRef.withPreviewContainer(this.dom.mainContainer as HTMLElement);
-        return dragRef;
-    }
-    createDragScrollEvent(dragRef) {
-        return fromEvent(this.dom.mainContainer, 'scroll', passiveListenerOptions).pipe(takeUntil(dragRef.ended));
-    }
-    createMouseEvents() {
-        const dropClass = this.ganttUpper.config.linkOptions?.dependencyTypes?.length === 1 &&
-            this.ganttUpper.config.linkOptions?.dependencyTypes[0] === GanttLinkType.fs
-            ? singleDropActiveClass
-            : dropActiveClass;
-        fromEvent(this.barElement, 'mouseenter', passiveListenerOptions)
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            if (this.dragContainer.linkDraggingId && this.dragContainer.linkDraggingId !== this.item.id) {
-                if (this.item.linkable) {
-                    this.barElement.classList.add(dropClass);
-                    this.dragContainer.emitLinkDragEntered({
-                        item: this.item,
-                        element: this.barElement
-                    });
-                }
-            }
-            else {
-                this.barElement.classList.add(activeClass);
-            }
-        });
-        fromEvent(this.barElement, 'mouseleave', passiveListenerOptions)
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            if (!this.dragContainer.linkDraggingId) {
-                this.barElement.classList.remove(activeClass);
-            }
-            else {
-                this.dragContainer.emitLinkDragLeaved();
-            }
-            this.barElement.classList.remove(dropClass);
-        });
-    }
-    createBarDrag() {
-        const dragRef = this.createDragRef(this.barElement);
-        dragRef.lockAxis = 'x';
-        dragRef.withBoundaryElement(this.dom.mainItems);
-        dragRef.started.subscribe(() => {
-            this.setDraggingStyles();
-            this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
-            this.createDragScrollEvent(dragRef).subscribe(() => {
-                if (this.dropListRef.isDragging()) {
-                    this.dragScrolling = true;
-                    const scrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
-                    this.barDragMove(dragRef, scrollDistance + this.barDragMoveDistance);
-                }
-            });
-            this.dragContainer.dragStarted.emit({ item: this.item.origin });
-        });
-        dragRef.moved.subscribe((event) => {
-            this.barDragMove(dragRef, event.distance.x);
-            if (!this.dragScrolling) {
-                this.barDragMoveDistance = event.distance.x;
-            }
-        });
-        dragRef.ended.subscribe((event) => {
-            this.item.updateRefs({
-                width: this.ganttUpper.view.getDateRangeWidth(this.item.start.startOfDay(), this.item.end.endOfDay()),
-                x: this.ganttUpper.view.getXPointByDate(this.item.start),
-                y: (this.ganttUpper.styles.lineHeight - this.ganttUpper.styles.barHeight) / 2 - 1
-            });
-            this.clearDraggingStyles();
-            this.closeDragBackdrop();
-            event.source.reset();
-            this.dragScrolling = false;
-            this.barDragMoveDistance = 0;
-            this.dragContainer.dragEnded.emit({ item: this.item.origin });
-        });
-        this.barDragRef = dragRef;
-        return dragRef;
+        dragRef.moved.subscribe((event) => {
+            this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
+            this.barDragMoveDistance = event.distance.x;
+            if (!this.dragScrolling) {
+                this.barDragMove();
+            }
+        });
+        dragRef.ended.subscribe((event) => {
+            this.clearDraggingStyles();
+            this.closeDragBackdrop();
+            event.source.reset();
+            this.stopScrolling();
+            this.dragScrolling = false;
+            this.dragScrollDistance = 0;
+            this.barDragMoveDistance = 0;
+            this.item.updateRefs({
+                width: this.ganttUpper.view.getDateRangeWidth(this.item.start.startOfDay(), this.item.end.endOfDay()),
+                x: this.ganttUpper.view.getXPointByDate(this.item.start),
+                y: (this.ganttUpper.styles.lineHeight - this.ganttUpper.styles.barHeight) / 2 - 1
+            });
+            this.dragContainer.dragEnded.emit({ item: this.item.origin });
+        });
+        this.barDragRef = dragRef;
+        return dragRef;
     }
     createBarHandleDrags() {
         const dragRefs = [];
@@ -2954,43 +2818,51 @@ class GanttBarDrag {
                 this.setDraggingStyles();
                 this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
                 this.createDragScrollEvent(dragRef).subscribe(() => {
-                    if (this.dropListRef.isDragging()) {
-                        this.dragScrolling = true;
-                        const scrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
-                        this.barHandleDragMove(scrollDistance + this.barHandleDragMoveDistance, isBefore);
+                    if (dragRef.isDragging()) {
+                        const dragScrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
+                        this.dragScrollDistance = dragScrollDistance;
+                        dragRef['_boundaryRect'] = this.dom.mainItems.getBoundingClientRect();
+                        if (this.dragScrolling && this.isStartGreaterThanEndWhenBarHandleDragMove(isBefore)) {
+                            this.stopScrolling();
+                            this.dragScrolling = false;
+                        }
+                        if (isBefore) {
+                            this.barBeforeHandleDragMove();
+                        }
+                        else {
+                            this.barAfterHandleDragMove();
+                        }
                     }
                 });
                 this.dragContainer.dragStarted.emit({ item: this.item.origin });
             });
             dragRef.moved.subscribe((event) => {
-                this.barHandleDragMove(event.distance.x, isBefore);
-                if (!this.dragScrolling) {
-                    this.barHandleDragMoveDistance = event.distance.x;
+                if (this.barHandleDragMoveRecordDays && this.barHandleDragMoveRecordDays > 0) {
+                    this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
                 }
-            });
-            dragRef.ended.subscribe((event) => {
-                if (isBefore) {
-                    const width = this.item.refs.width + event.distance.x * -1;
-                    if (width <= dragMinWidth) {
-                        this.item.updateDate(this.item.end.startOfDay(), this.item.end);
+                this.barHandleDragMoveDistance = event.distance.x;
+                if (!this.dragScrolling) {
+                    if (isBefore) {
+                        this.barBeforeHandleDragMove();
                     }
-                }
-                else {
-                    const width = this.item.refs.width + event.distance.x;
-                    if (width <= dragMinWidth) {
-                        this.item.updateDate(this.item.start, this.item.start.endOfDay());
+                    else {
+                        this.barAfterHandleDragMove();
                     }
                 }
-                this.item.updateRefs({
-                    width: this.ganttUpper.view.getDateRangeWidth(this.item.start.startOfDay(), this.item.end.endOfDay()),
-                    x: this.ganttUpper.view.getXPointByDate(this.item.start),
-                    y: (this.ganttUpper.styles.lineHeight - this.ganttUpper.styles.barHeight) / 2 - 1
-                });
+            });
+            dragRef.ended.subscribe((event) => {
                 this.clearDraggingStyles();
                 this.closeDragBackdrop();
                 event.source.reset();
+                this.stopScrolling();
                 this.dragScrolling = false;
+                this.dragScrollDistance = 0;
                 this.barHandleDragMoveDistance = 0;
+                this.item.updateRefs({
+                    width: this.ganttUpper.view.getDateRangeWidth(this.item.start.startOfDay(), this.item.end.endOfDay()),
+                    x: this.ganttUpper.view.getXPointByDate(this.item.start),
+                    y: (this.ganttUpper.styles.lineHeight - this.ganttUpper.styles.barHeight) / 2 - 1
+                });
                 this.dragContainer.dragEnded.emit({ item: this.item.origin });
             });
             dragRefs.push(dragRef);
@@ -3051,13 +2923,19 @@ class GanttBarDrag {
         return dragRefs;
     }
     openDragBackdrop(dragElement, start, end) {
-        // const dragBackdropElement = this.root.backdrop.nativeElement;
-        // const dragMaskElement = dragBackdropElement.querySelector('.gantt-drag-mask') as HTMLElement;
         const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop');
         const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask');
         const rootRect = this.dom.root.getBoundingClientRect();
         const dragRect = dragElement.getBoundingClientRect();
-        const left = dragRect.left - rootRect.left - this.dom.side.clientWidth;
+        let left = dragRect.left - rootRect.left - (this.dom.side.clientWidth + 1);
+        if (this.dragScrolling) {
+            if (this._horizontalScrollDirection === 1 /* AutoScrollHorizontalDirection.LEFT */) {
+                left += this.autoScrollStep;
+            }
+            else if (this._horizontalScrollDirection === 2 /* AutoScrollHorizontalDirection.RIGHT */) {
+                left -= this.autoScrollStep;
+            }
+        }
         const width = dragRect.right - dragRect.left;
         // Note: updating styles will cause re-layout so we have to place them consistently one by one.
         dragMaskElement.style.left = left + 'px';
@@ -3082,8 +2960,8 @@ class GanttBarDrag {
         this.barElement.style.pointerEvents = '';
         this.barElement.classList.remove('gantt-bar-draggable-drag');
     }
-    barDragMove(dragRef, distance) {
-        const currentX = this.item.refs.x + distance;
+    barDragMove() {
+        const currentX = this.item.refs.x + this.barDragMoveDistance + this.dragScrollDistance;
         const currentDate = this.ganttUpper.view.getDateByXPoint(currentX);
         const currentStartX = this.ganttUpper.view.getXPointByDate(currentDate);
         const dayWidth = this.ganttUpper.view.getDayOccupancyWidth(currentDate);
@@ -3094,31 +2972,62 @@ class GanttBarDrag {
             start = start.addDays(1);
             end = end.addDays(1);
         }
-        this.openDragBackdrop(dragRef['_preview'], this.ganttUpper.view.getDateByXPoint(currentX), this.ganttUpper.view.getDateByXPoint(currentX + this.item.refs.width));
+        if (this.dragScrolling) {
+            const left = currentX - this.barDragMoveDistance;
+            this.barElement.style.left = left + 'px';
+        }
+        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(currentX), this.ganttUpper.view.getDateByXPoint(currentX + this.item.refs.width));
+        if (!this.isStartOrEndInsideView(start, end)) {
+            return;
+        }
         this.item.updateDate(start, end);
         this.dragContainer.dragMoved.emit({ item: this.item.origin });
     }
-    barHandleDragMove(distance, isBefore) {
-        if (isBefore) {
-            const x = this.item.refs.x + distance;
-            const width = this.item.refs.width + distance * -1;
-            const start = this.ganttUpper.view.getDateByXPoint(x);
-            if (width > dragMinWidth) {
-                this.barElement.style.width = width + 'px';
+    barBeforeHandleDragMove() {
+        const { x, start, oneDayWidth } = this.startOfBarHandle();
+        const width = this.item.refs.width + this.barHandleDragMoveAndScrollDistance * -1;
+        const days = differenceInDays(this.item.end.value, start.value);
+        if (width > dragMinWidth && days > 0) {
+            this.barElement.style.width = width + 'px';
+            this.barElement.style.left = x + 'px';
+            this.openDragBackdrop(this.barElement, start, this.item.end);
+            if (!this.isStartOrEndInsideView(start, this.item.end)) {
+                return;
+            }
+            this.item.updateDate(start, this.item.end);
+        }
+        else {
+            if (this.barHandleDragMoveRecordDays > 0 && days <= 0) {
+                this.barElement.style.width = oneDayWidth + 'px';
+                const x = this.ganttUpper.view.getXPointByDate(this.item.end);
                 this.barElement.style.left = x + 'px';
-                this.openDragBackdrop(this.barElement, start, this.item.end);
-                this.item.updateDate(start, this.item.end);
             }
+            this.openDragBackdrop(this.barElement, this.item.end.startOfDay(), this.item.end);
+            this.item.updateDate(this.item.end.startOfDay(), this.item.end);
+        }
+        this.barHandleDragMoveRecordDays = days;
+        this.dragContainer.dragMoved.emit({ item: this.item.origin });
+    }
+    barAfterHandleDragMove() {
+        const { width, end } = this.endOfBarHandle();
+        const days = differenceInDays(end.value, this.item.start.value);
+        if (width > dragMinWidth && days > 0) {
+            this.barElement.style.width = width + 'px';
+            this.openDragBackdrop(this.barElement, this.item.start, end);
+            if (!this.isStartOrEndInsideView(this.item.start, end)) {
+                return;
+            }
+            this.item.updateDate(this.item.start, end);
         }
         else {
-            const width = this.item.refs.width + distance;
-            const end = this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width);
-            if (width > dragMinWidth) {
-                this.barElement.style.width = width + 'px';
-                this.openDragBackdrop(this.barElement, this.item.start, end);
-                this.item.updateDate(this.item.start, end);
+            if (this.barHandleDragMoveRecordDays > 0 && days <= 0) {
+                const oneDayWidth = this.ganttUpper.view.getDateRangeWidth(this.item.start, this.item.start.endOfDay());
+                this.barElement.style.width = oneDayWidth + 'px';
             }
+            this.openDragBackdrop(this.barElement, this.item.start, this.item.start.endOfDay());
+            this.item.updateDate(this.item.start, this.item.start.endOfDay());
         }
+        this.barHandleDragMoveRecordDays = days;
         this.dragContainer.dragMoved.emit({ item: this.item.origin });
     }
     calcLinkLinePositions(target, isBefore) {
@@ -3148,6 +3057,78 @@ class GanttBarDrag {
             this.linkDraggingLine = null;
         }
     }
+    startScrollingIfNecessary(pointerX, pointerY) {
+        const clientRect = this.dom.mainContainer.getBoundingClientRect();
+        const scrollLeft = this.dom.mainContainer.scrollLeft;
+        if (isPointerNearClientRect(clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
+            const horizontalScrollDirection = getHorizontalScrollDirection(clientRect, pointerX);
+            if ((horizontalScrollDirection === 1 /* AutoScrollHorizontalDirection.LEFT */ && scrollLeft > 0) ||
+                (horizontalScrollDirection === 2 /* AutoScrollHorizontalDirection.RIGHT */ &&
+                    scrollLeft < this.ganttUpper.view.width - clientRect.width)) {
+                this._horizontalScrollDirection = horizontalScrollDirection;
+                this.autoScrollSpeedRates = getAutoScrollSpeedRates(clientRect, pointerX, horizontalScrollDirection);
+                this.dragScrolling = true;
+                this._ngZone.runOutsideAngular(this.startScrollInterval);
+            }
+            else {
+                this.dragScrolling = false;
+                this.stopScrolling();
+            }
+        }
+    }
+    // Conditions to stop auto-scroll: when the start is greater than the end and the bar appears in the view
+    isStartGreaterThanEndWhenBarHandleDragMove(isBefore) {
+        let isStartGreaterThanEnd;
+        let isBarAppearsInView;
+        const scrollLeft = this.dom.mainContainer.scrollLeft;
+        const clientWidth = this.dom.mainContainer.clientWidth;
+        const xThreshold = clientWidth * DROP_PROXIMITY_THRESHOLD;
+        if (isBefore) {
+            const { start, oneDayWidth } = this.startOfBarHandle();
+            const xPointerByEndDate = this.ganttUpper.view.getXPointByDate(this.item.end);
+            isStartGreaterThanEnd = start.value > this.item.end.value;
+            isBarAppearsInView = xPointerByEndDate + oneDayWidth + xThreshold <= scrollLeft + clientWidth;
+        }
+        else {
+            const { end } = this.endOfBarHandle();
+            const xPointerByStartDate = this.ganttUpper.view.getXPointByDate(this.item.start);
+            isStartGreaterThanEnd = end.value < this.item.start.value;
+            isBarAppearsInView = scrollLeft + xThreshold <= xPointerByStartDate;
+        }
+        return isStartGreaterThanEnd && isBarAppearsInView ? true : false;
+    }
+    // Some data information about dragging start until it is equal to or greater than end
+    startOfBarHandle() {
+        const x = this.item.refs.x + this.barHandleDragMoveAndScrollDistance;
+        return {
+            x,
+            start: this.ganttUpper.view.getDateByXPoint(x),
+            oneDayWidth: this.ganttUpper.view.getDateRangeWidth(this.item.end.startOfDay(), this.item.end)
+        };
+    }
+    // Some data information about dragging end of bar handle
+    endOfBarHandle() {
+        const width = this.item.refs.width + this.barHandleDragMoveAndScrollDistance;
+        return {
+            width,
+            end: this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width)
+        };
+    }
+    stopScrolling() {
+        this.stopScrollTimers$.next();
+    }
+    isStartOrEndInsideView(start, end) {
+        const itemStart = start.getUnixTime();
+        const itemEnd = end.getUnixTime();
+        const viewStart = this.ganttUpper.view.start.getUnixTime();
+        const viewEnd = this.ganttUpper.view.end.getUnixTime();
+        if (itemStart < viewStart || itemEnd > viewEnd) {
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
     createDrags(elementRef, item, ganttUpper) {
         this.item = item;
         this.barElement = elementRef.nativeElement;
@@ -3161,13 +3142,6 @@ class GanttBarDrag {
                 const dragRef = this.createBarDrag();
                 const dragHandlesRefs = this.createBarHandleDrags();
                 this.dragRefs.push(dragRef, ...dragHandlesRefs);
-                // 创建拖拽容器并将所有元素添加到容器中，利用容器来实现自动滚动
-                if (!this.dropListRef) {
-                    this.dropListRef = this.dragDrop.createDropList(this.dom.mainContainer);
-                    this.dropListRef.autoScrollStep = autoScrollStep;
-                    this.dropListRef.withOrientation('horizontal');
-                }
-                this.dropListRef.withItems([dragRef, ...dragHandlesRefs]);
             }
             if (!this.linkDragDisabled) {
                 const linkDragRefs = this.createLinkHandleDrags();
@@ -3183,15 +3157,15 @@ class GanttBarDrag {
         this.dragRefs.forEach((dragRef) => dragRef.dispose());
         this.destroy$.next();
         this.destroy$.complete();
+        this.stopScrolling();
+        this.stopScrollTimers$.complete();
     }
 }
-GanttBarDrag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttBarDrag, deps: [{ token: i2.DragDrop }, { token: GanttDomService }, { token: GanttDragContainer }, { token: NgxGanttRootComponent, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable });
+GanttBarDrag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttBarDrag, deps: [{ token: i2.DragDrop }, { token: GanttDomService }, { token: GanttDragContainer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 GanttBarDrag.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttBarDrag });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttBarDrag, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i2.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }, { type: NgxGanttRootComponent, decorators: [{
-                    type: SkipSelf
-                }] }]; } });
+        }], ctorParameters: function () { return [{ type: i2.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }, { type: i0.NgZone }]; } });
 
 class GanttItemUpper {
     constructor(elementRef, ganttUpper) {
@@ -3199,10 +3173,11 @@ class GanttItemUpper {
         this.ganttUpper = ganttUpper;
         this.firstChange = true;
         this.unsubscribe$ = new Subject();
+        this.refsUnsubscribe$ = new Subject();
     }
     ngOnInit() {
         this.firstChange = false;
-        this.item.refs$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+        this.item.refs$.pipe(takeUntil(this.refsUnsubscribe$)).subscribe(() => {
             this.setPositions();
         });
     }
@@ -3212,11 +3187,10 @@ class GanttItemUpper {
         }
     }
     itemChange(item) {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
+        this.refsUnsubscribe$.next();
+        this.refsUnsubscribe$.complete();
         this.item = item;
-        this.setPositions();
-        this.item.refs$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+        this.item.refs$.pipe(takeUntil(this.refsUnsubscribe$)).subscribe(() => {
             this.setPositions();
         });
     }
@@ -3235,6 +3209,8 @@ class GanttItemUpper {
     ngOnDestroy() {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
+        this.refsUnsubscribe$.next();
+        this.refsUnsubscribe$.complete();
     }
 }
 GanttItemUpper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttItemUpper, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Directive });
@@ -3273,6 +3249,10 @@ class NgxGanttBarComponent extends GanttItemUpper {
         super.ngOnChanges(changes);
         if (!this.firstChange) {
             this.drag.updateItem(this.item);
+            if (changes.item.currentValue.refs?.width !== changes.item.previousValue.refs?.width ||
+                changes.item.currentValue.color !== changes.item.previousValue.color) {
+                this.setContentBackground();
+            }
         }
     }
     ngAfterViewInit() {
@@ -3300,30 +3280,32 @@ class NgxGanttBarComponent extends GanttItemUpper {
         this.barClick.emit({ event, item: this.item.origin });
     }
     setContentBackground() {
-        const contentElement = this.contentElementRef.nativeElement;
-        const color = this.item.color || barBackground;
-        const style = this.item.barStyle || {};
-        if (this.item.origin.start && this.item.origin.end) {
-            style.background = color;
-            style.borderRadius = '';
-        }
-        if (this.item.origin.start && !this.item.origin.end) {
-            style.background = linearGradient('to left', hexToRgb(color, 0.55), hexToRgb(color, 1));
-            style.borderRadius = '4px 12.5px 12.5px 4px';
-        }
-        if (!this.item.origin.start && this.item.origin.end) {
-            style.background = linearGradient('to right', hexToRgb(color, 0.55), hexToRgb(color, 1));
-            style.borderRadius = '12.5px 4px 4px 12.5px';
-        }
-        if (this.item.progress >= 0) {
-            const contentProgressElement = contentElement.querySelector('.gantt-bar-content-progress');
-            style.background = hexToRgb(color, 0.3);
-            style.borderRadius = '';
-            contentProgressElement.style.background = color;
-        }
-        for (const key in style) {
-            if (style.hasOwnProperty(key)) {
-                contentElement.style[key] = style[key];
+        if (this.item.refs?.width) {
+            const contentElement = this.contentElementRef.nativeElement;
+            const color = this.item.color || barBackground;
+            const style = this.item.barStyle || {};
+            if (this.item.origin.start && this.item.origin.end) {
+                style.background = color;
+                style.borderRadius = '';
+            }
+            if (this.item.origin.start && !this.item.origin.end) {
+                style.background = linearGradient('to left', hexToRgb(color, 0.55), hexToRgb(color, 1));
+                style.borderRadius = '4px 12.5px 12.5px 4px';
+            }
+            if (!this.item.origin.start && this.item.origin.end) {
+                style.background = linearGradient('to right', hexToRgb(color, 0.55), hexToRgb(color, 1));
+                style.borderRadius = '12.5px 4px 4px 12.5px';
+            }
+            if (this.item.progress >= 0) {
+                const contentProgressElement = contentElement.querySelector('.gantt-bar-content-progress');
+                style.background = hexToRgb(color, 0.3);
+                style.borderRadius = '';
+                contentProgressElement.style.background = color;
+            }
+            for (const key in style) {
+                if (style.hasOwnProperty(key)) {
+                    contentElement.style[key] = style[key];
+                }
             }
         }
     }
@@ -3332,10 +3314,10 @@ class NgxGanttBarComponent extends GanttItemUpper {
     }
 }
 NgxGanttBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttBarComponent, deps: [{ token: GanttDragContainer }, { token: GanttBarDrag }, { token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: { barClick: "barClick" }, host: { properties: { "class.gantt-bar": "this.ganttItemClass" } }, providers: [GanttBarDrag], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true }, { propertyName: "handles", predicate: ["handle"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"gantt-bar-layer\">\n  <div class=\"drag-handles\">\n    <ng-container *ngIf=\"item.draggable && ganttUpper.draggable\">\n      <span class=\"handle\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+NgxGanttBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: { barClick: "barClick" }, host: { properties: { "class.gantt-bar": "this.ganttItemClass" } }, providers: [GanttBarDrag], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true }, { propertyName: "handles", predicate: ["handle"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"gantt-bar-layer\">\n  <div class=\"drag-handles\">\n    <ng-container *ngIf=\"item.draggable && ganttUpper.draggable\">\n      <span class=\"handle\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"> </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-gantt-bar,gantt-bar', providers: [GanttBarDrag], template: "<div class=\"gantt-bar-layer\">\n  <div class=\"drag-handles\">\n    <ng-container *ngIf=\"item.draggable && ganttUpper.draggable\">\n      <span class=\"handle\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</div>\n" }]
+            args: [{ selector: 'ngx-gantt-bar,gantt-bar', providers: [GanttBarDrag], template: "<div class=\"gantt-bar-layer\">\n  <div class=\"drag-handles\">\n    <ng-container *ngIf=\"item.draggable && ganttUpper.draggable\">\n      <span class=\"handle\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"> </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: GanttDragContainer }, { type: GanttBarDrag }, { type: i0.ElementRef }, { type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
@@ -3390,59 +3372,176 @@ class NgxGanttBaselineComponent {
         itemElement.style.width = this.baselineItem.refs.width + 'px';
     }
 }
-NgxGanttBaselineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttBaselineComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttBaselineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: { baselineItem: "baselineItem" }, host: { properties: { "class.gantt-baseline": "this.ganttBaselineClass" } }, ngImport: i0, template: "<div #content *ngIf=\"baselineItem\" class=\"baseline-content\"></div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttBaselineComponent, decorators: [{
+NgxGanttBaselineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttBaselineComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttBaselineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: { baselineItem: "baselineItem" }, host: { properties: { "class.gantt-baseline": "this.ganttBaselineClass" } }, ngImport: i0, template: "<div #content *ngIf=\"baselineItem\" class=\"baseline-content\"></div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttBaselineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-gantt-baseline,gantt-baseline', template: "<div #content *ngIf=\"baselineItem\" class=\"baseline-content\"></div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }]; }, propDecorators: { baselineItem: [{
+                type: Input
+            }], ganttBaselineClass: [{
+                type: HostBinding,
+                args: ['class.gantt-baseline']
+            }] } });
+
+class GanttMainComponent {
+    constructor(ganttUpper) {
+        this.ganttUpper = ganttUpper;
+        this.barClick = new EventEmitter();
+        this.lineClick = new EventEmitter();
+        this.ganttMainClass = true;
+    }
+    trackBy(index, item) {
+        return item.id || index;
+    }
+}
+GanttMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttMainComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+GanttMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttMainComponent, selector: "gantt-main", inputs: { renderData: "renderData", flatData: "flatData", groupHeaderTemplate: "groupHeaderTemplate", itemTemplate: "itemTemplate", barTemplate: "barTemplate", rangeTemplate: "rangeTemplate" }, outputs: { barClick: "barClick", lineClick: "lineClick" }, host: { properties: { "class.gantt-main-container": "this.ganttMainClass" } }, ngImport: i0, template: "<!-- <gantt-links-overlay [groups]=\"groups\" [items]=\"items\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay> -->\n<!-- groups -->\n<!-- <div class=\"gantt-main-groups\" *ngIf=\"groups && groups.length > 0; else itemsTemplate\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"group.class\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: group }\"></ng-template>\n    </div>\n    <div *ngIf=\"group.expanded\" class=\"gantt-items\">\n      <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: group.items }\"></ng-template>\n    </div>\n  </ng-container>\n</div> -->\n\n<!-- items -->\n<!-- <ng-template #itemsTemplate>\n  <div class=\"gantt-main-items\" [style.width.px]=\"ganttUpper.view.width\">\n    <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items }\"></ng-template>\n  </div>\n</ng-template>\n\n<ng-template #ganttItems let-items=\"items\">\n  <ng-container *ngFor=\"let item of items\">\n    <div\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(item.id)\"\n    >\n      <ng-container *ngIf=\"item.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: item.origin,\n            refs: item.refs,\n            baseline: ganttUpper.baselineItemsMap[item.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[item.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(item.type | isGanttRangeItem) || (item.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"item.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"item\"></gantt-range>\n        <gantt-bar *ngIf=\"item.type | isGanttBarItem\" [item]=\"item\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[item.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[item.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children }\"\n    ></ng-template>\n  </ng-container>\n</ng-template> -->\n\n<gantt-links-overlay [flatData]=\"flatData\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of renderData; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n    </div>\n    <div\n      *ngIf=\"!data.items\"\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n    >\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: data.origin,\n            refs: data.refs,\n            baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"data.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n        <gantt-bar *ngIf=\"data.type | isGanttBarItem\" [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[data.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["flatData"], outputs: ["lineClick"] }, { kind: "component", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: ["barClick"] }, { kind: "component", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range" }, { kind: "component", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: ["baselineItem"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttBarItemPipe, name: "isGanttBarItem" }, { kind: "pipe", type: IsGanttCustomItemPipe, name: "isGanttCustomItem" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttMainComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gantt-main', template: "<!-- <gantt-links-overlay [groups]=\"groups\" [items]=\"items\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay> -->\n<!-- groups -->\n<!-- <div class=\"gantt-main-groups\" *ngIf=\"groups && groups.length > 0; else itemsTemplate\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"group.class\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: group }\"></ng-template>\n    </div>\n    <div *ngIf=\"group.expanded\" class=\"gantt-items\">\n      <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: group.items }\"></ng-template>\n    </div>\n  </ng-container>\n</div> -->\n\n<!-- items -->\n<!-- <ng-template #itemsTemplate>\n  <div class=\"gantt-main-items\" [style.width.px]=\"ganttUpper.view.width\">\n    <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items }\"></ng-template>\n  </div>\n</ng-template>\n\n<ng-template #ganttItems let-items=\"items\">\n  <ng-container *ngFor=\"let item of items\">\n    <div\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(item.id)\"\n    >\n      <ng-container *ngIf=\"item.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: item.origin,\n            refs: item.refs,\n            baseline: ganttUpper.baselineItemsMap[item.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[item.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(item.type | isGanttRangeItem) || (item.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"item.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"item\"></gantt-range>\n        <gantt-bar *ngIf=\"item.type | isGanttBarItem\" [item]=\"item\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[item.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[item.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children }\"\n    ></ng-template>\n  </ng-container>\n</ng-template> -->\n\n<gantt-links-overlay [flatData]=\"flatData\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of renderData; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n    </div>\n    <div\n      *ngIf=\"!data.items\"\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n    >\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: data.origin,\n            refs: data.refs,\n            baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"data.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n        <gantt-bar *ngIf=\"data.type | isGanttBarItem\" [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[data.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }]; }, propDecorators: { renderData: [{
+                type: Input
+            }], flatData: [{
+                type: Input
+            }], groupHeaderTemplate: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], barTemplate: [{
+                type: Input
+            }], rangeTemplate: [{
+                type: Input
+            }], barClick: [{
+                type: Output
+            }], lineClick: [{
+                type: Output
+            }], ganttMainClass: [{
+                type: HostBinding,
+                args: ['class.gantt-main-container']
+            }] } });
+
+class GanttCalendarHeaderComponent {
+    get view() {
+        return this.ganttUpper.view;
+    }
+    constructor(ganttUpper, ngZone, elementRef) {
+        this.ganttUpper = ganttUpper;
+        this.ngZone = ngZone;
+        this.elementRef = elementRef;
+        this.unsubscribe$ = new Subject();
+        this.headerHeight = headerHeight;
+        this.viewTypes = GanttViewType;
+        this.className = `gantt-calendar gantt-calendar-header`;
+    }
+    ngOnInit() {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
+                .pipe(takeUntil(this.unsubscribe$))
+                .subscribe(() => {
+                if (this.ganttUpper.viewType === GanttViewType.day)
+                    this.setTodayPoint();
+            });
+        });
+    }
+    setTodayPoint() {
+        const x = this.view.getTodayXPoint();
+        const today = new GanttDate().getDate();
+        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
+        const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0];
+        if (isNumber(x)) {
+            if (rect) {
+                rect.style.left = `${x - todayWidth / 2}px`;
+                rect.style.top = `${headerHeight - todayHeight}px`;
+                rect.innerHTML = today.toString();
+            }
+        }
+        else {
+            todayEle.style.display = 'none';
+        }
+    }
+    trackBy(point, index) {
+        return point.text || index;
+    }
+}
+GanttCalendarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttCalendarHeaderComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GanttCalendarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text\n      class=\"primary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"headerHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttCalendarHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-gantt-baseline,gantt-baseline', template: "<div #content *ngIf=\"baselineItem\" class=\"baseline-content\"></div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
+            args: [{ selector: 'gantt-calendar-header', template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text\n      class=\"primary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"headerHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n</svg>\n" }]
+        }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
-                }] }]; }, propDecorators: { baselineItem: [{
-                type: Input
-            }], ganttBaselineClass: [{
+                }] }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { className: [{
                 type: HostBinding,
-                args: ['class.gantt-baseline']
+                args: ['class']
             }] } });
 
-class GanttMainComponent {
-    constructor(ganttUpper) {
+const mainHeight = 5000;
+class GanttCalendarGridComponent {
+    get view() {
+        return this.ganttUpper.view;
+    }
+    constructor(ganttUpper, ngZone, elementRef) {
         this.ganttUpper = ganttUpper;
-        this.barClick = new EventEmitter();
-        this.lineClick = new EventEmitter();
-        this.ganttMainClass = true;
+        this.ngZone = ngZone;
+        this.elementRef = elementRef;
+        this.unsubscribe$ = new Subject();
+        this.headerHeight = headerHeight;
+        this.mainHeight = mainHeight;
+        this.todayBorderRadius = todayBorderRadius;
+        this.viewTypes = GanttViewType;
+        this.className = `gantt-calendar gantt-calendar-grid`;
     }
-    trackBy(index, item) {
-        return item.id || index;
+    setTodayPoint() {
+        const x = this.view.getTodayXPoint();
+        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
+        const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0];
+        if (isNumber(x)) {
+            if (line) {
+                line.style.left = `${x}px`;
+                line.style.top = `0px`;
+                line.style.bottom = `${-mainHeight}px`;
+            }
+        }
+        else {
+            todayEle.style.display = 'none';
+        }
+    }
+    ngOnInit() {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
+                .pipe(takeUntil(this.unsubscribe$))
+                .subscribe(() => {
+                this.setTodayPoint();
+            });
+        });
+    }
+    trackBy(point, index) {
+        return point.text || index;
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
     }
 }
-GanttMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttMainComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-GanttMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttMainComponent, selector: "gantt-main", inputs: { renderData: "renderData", flatData: "flatData", groupHeaderTemplate: "groupHeaderTemplate", itemTemplate: "itemTemplate", barTemplate: "barTemplate", rangeTemplate: "rangeTemplate" }, outputs: { barClick: "barClick", lineClick: "lineClick" }, host: { properties: { "class.gantt-main-container": "this.ganttMainClass" } }, ngImport: i0, template: "<!-- <gantt-links-overlay [groups]=\"groups\" [items]=\"items\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay> -->\n<!-- groups -->\n<!-- <div class=\"gantt-main-groups\" *ngIf=\"groups && groups.length > 0; else itemsTemplate\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"group.class\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: group }\"></ng-template>\n    </div>\n    <div *ngIf=\"group.expanded\" class=\"gantt-items\">\n      <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: group.items }\"></ng-template>\n    </div>\n  </ng-container>\n</div> -->\n\n<!-- items -->\n<!-- <ng-template #itemsTemplate>\n  <div class=\"gantt-main-items\" [style.width.px]=\"ganttUpper.view.width\">\n    <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items }\"></ng-template>\n  </div>\n</ng-template>\n\n<ng-template #ganttItems let-items=\"items\">\n  <ng-container *ngFor=\"let item of items\">\n    <div\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(item.id)\"\n    >\n      <ng-container *ngIf=\"item.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: item.origin,\n            refs: item.refs,\n            baseline: ganttUpper.baselineItemsMap[item.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[item.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(item.type | isGanttRangeItem) || (item.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"item.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"item\"></gantt-range>\n        <gantt-bar *ngIf=\"item.type | isGanttBarItem\" [item]=\"item\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[item.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[item.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children }\"\n    ></ng-template>\n  </ng-container>\n</ng-template> -->\n\n<gantt-links-overlay [flatData]=\"flatData\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of renderData; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n    </div>\n    <div\n      *ngIf=\"!data.items\"\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n    >\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: data.origin,\n            refs: data.refs,\n            baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"data.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n        <gantt-bar *ngIf=\"data.type | isGanttBarItem\" [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[data.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["flatData"], outputs: ["lineClick"] }, { kind: "component", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: ["barClick"] }, { kind: "component", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range" }, { kind: "component", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: ["baselineItem"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttBarItemPipe, name: "isGanttBarItem" }, { kind: "pipe", type: IsGanttCustomItemPipe, name: "isGanttCustomItem" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttMainComponent, decorators: [{
+GanttCalendarGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttCalendarGridComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GanttCalendarGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight - 1\">\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n    </g>\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttCalendarGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-main', template: "<!-- <gantt-links-overlay [groups]=\"groups\" [items]=\"items\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay> -->\n<!-- groups -->\n<!-- <div class=\"gantt-main-groups\" *ngIf=\"groups && groups.length > 0; else itemsTemplate\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"group.class\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: group }\"></ng-template>\n    </div>\n    <div *ngIf=\"group.expanded\" class=\"gantt-items\">\n      <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: group.items }\"></ng-template>\n    </div>\n  </ng-container>\n</div> -->\n\n<!-- items -->\n<!-- <ng-template #itemsTemplate>\n  <div class=\"gantt-main-items\" [style.width.px]=\"ganttUpper.view.width\">\n    <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items }\"></ng-template>\n  </div>\n</ng-template>\n\n<ng-template #ganttItems let-items=\"items\">\n  <ng-container *ngFor=\"let item of items\">\n    <div\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(item.id)\"\n    >\n      <ng-container *ngIf=\"item.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: item.origin,\n            refs: item.refs,\n            baseline: ganttUpper.baselineItemsMap[item.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[item.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(item.type | isGanttRangeItem) || (item.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"item.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"item\"></gantt-range>\n        <gantt-bar *ngIf=\"item.type | isGanttBarItem\" [item]=\"item\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[item.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[item.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children }\"\n    ></ng-template>\n  </ng-container>\n</ng-template> -->\n\n<gantt-links-overlay [flatData]=\"flatData\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of renderData; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n    </div>\n    <div\n      *ngIf=\"!data.items\"\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n    >\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: data.origin,\n            refs: data.refs,\n            baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"data.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n        <gantt-bar *ngIf=\"data.type | isGanttBarItem\" [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[data.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'gantt-calendar-grid', template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight - 1\">\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n    </g>\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n" }]
         }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
-                }] }]; }, propDecorators: { renderData: [{
-                type: Input
-            }], flatData: [{
-                type: Input
-            }], groupHeaderTemplate: [{
-                type: Input
-            }], itemTemplate: [{
-                type: Input
-            }], barTemplate: [{
-                type: Input
-            }], rangeTemplate: [{
-                type: Input
-            }], barClick: [{
-                type: Output
-            }], lineClick: [{
-                type: Output
-            }], ganttMainClass: [{
+                }] }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { className: [{
                 type: HostBinding,
-                args: ['class.gantt-main-container']
+                args: ['class']
             }] } });
 
 class GanttLoaderComponent {
@@ -3472,6 +3571,166 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 }]
         }] });
 
+class GanttDragBackdropComponent {
+}
+GanttDragBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttDragBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GanttDragBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop", host: { classAttribute: "gantt-drag-backdrop" }, ngImport: i0, template: "<div class=\"gantt-drag-mask\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttDragBackdropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gantt-drag-backdrop', host: {
+                        class: 'gantt-drag-backdrop'
+                    }, template: "<div class=\"gantt-drag-mask\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" }]
+        }] });
+
+class NgxGanttToolbarComponent {
+    constructor(ganttUpper) {
+        this.ganttUpper = ganttUpper;
+        this.ganttItemClass = true;
+        this.ganttViewsMap = keyBy(ganttViews, 'value');
+    }
+    selectView(view) {
+        this.ganttUpper.changeView(view);
+    }
+}
+NgxGanttToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttToolbarComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttToolbarComponent, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: { template: "template" }, host: { properties: { "class.gantt-toolbar": "this.ganttItemClass" } }, ngImport: i0, template: "<div class=\"toolbar-container\">\n  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let view of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div class=\"toolbar-view\" *ngIf=\"ganttViewsMap[view]\" [class.active]=\"view === this.ganttUpper.viewType\" (click)=\"selectView(view)\">\n          {{ ganttViewsMap[view].name }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-gantt-toolbar,gantt-toolbar', template: "<div class=\"toolbar-container\">\n  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let view of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div class=\"toolbar-view\" *ngIf=\"ganttViewsMap[view]\" [class.active]=\"view === this.ganttUpper.viewType\" (click)=\"selectView(view)\">\n          {{ ganttViewsMap[view].name }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }]; }, propDecorators: { template: [{
+                type: Input
+            }], ganttItemClass: [{
+                type: HostBinding,
+                args: ['class.gantt-toolbar']
+            }] } });
+
+class NgxGanttRootComponent {
+    get view() {
+        return this.ganttUpper.view;
+    }
+    constructor(elementRef, ngZone, dom, dragContainer, ganttUpper, printService) {
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
+        this.dom = dom;
+        this.dragContainer = dragContainer;
+        this.ganttUpper = ganttUpper;
+        this.printService = printService;
+        this.unsubscribe$ = new Subject();
+        this.ganttUpper.dragContainer = dragContainer;
+    }
+    ngOnInit() {
+        // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
+        // the `onStable` will never emit any value.
+        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
+        // Normally this isn't in the zone, but it can cause performance regressions for apps
+        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
+        this.ngZone.runOutsideAngular(() => {
+            onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+                this.dom.initialize(this.elementRef);
+                if (this.printService) {
+                    this.printService.register(this.elementRef);
+                }
+                this.setupScrollClass();
+                this.setupResize();
+                this.setupViewScroll();
+                // 优化初始化时Scroll滚动体验问题，通过透明度解决，默认透明度为0，滚动结束后恢复
+                this.elementRef.nativeElement.style.opacity = '1';
+                this.ganttUpper.viewChange.pipe(startWith$1(null), takeUntil(this.unsubscribe$)).subscribe(() => {
+                    this.scrollToToday();
+                });
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+    }
+    setupViewScroll() {
+        if (this.ganttUpper.disabledLoadOnScroll) {
+            return;
+        }
+        this.dom
+            .getViewerScroll(passiveListenerOptions)
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe((event) => {
+            if (event.direction === ScrollDirection.LEFT) {
+                const dates = this.view.addStartDate();
+                if (dates) {
+                    event.target.scrollLeft += this.view.getDateRangeWidth(dates.start, dates.end);
+                    if (this.ganttUpper.loadOnScroll.observers) {
+                        this.ngZone.run(() => this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() }));
+                    }
+                }
+            }
+            if (event.direction === ScrollDirection.RIGHT) {
+                const dates = this.view.addEndDate();
+                if (dates && this.ganttUpper.loadOnScroll.observers) {
+                    this.ngZone.run(() => this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() }));
+                }
+            }
+        });
+    }
+    setupResize() {
+        this.dom
+            .getResize()
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe(() => {
+            this.setupScrollClass();
+        });
+    }
+    setupScrollClass() {
+        const mainContainer = this.dom.mainContainer;
+        const height = mainContainer.offsetHeight;
+        const scrollHeight = mainContainer.scrollHeight;
+        if (scrollHeight > height) {
+            this.elementRef.nativeElement.className = 'gantt gantt-scroll';
+        }
+        else {
+            this.elementRef.nativeElement.className = 'gantt';
+        }
+    }
+    scrollToToday() {
+        const x = this.view.getTodayXPoint();
+        this.dom.scrollMainContainer(x);
+    }
+    scrollToDate(date) {
+        let x;
+        if (typeof date === 'number') {
+            x = this.view.getXPointByDate(new GanttDate(date));
+        }
+        else {
+            x = this.view.getXPointByDate(date);
+        }
+        this.dom.scrollMainContainer(x);
+    }
+}
+NgxGanttRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttRootComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: GanttDomService }, { token: GanttDragContainer }, { token: GANTT_UPPER_TOKEN }, { token: GanttPrintService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { classAttribute: "gantt" }, providers: [GanttDomService, GanttDragContainer], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "backdrop", first: true, predicate: GanttDragBackdropComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"gantt-side\" *ngIf=\"sideTemplate\" [style.width.px]=\"sideWidth\">\n  <div class=\"gantt-side-container\" cdkScrollable>\n    <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n  </div>\n</div>\n<div class=\"gantt-container\" *ngIf=\"mainTemplate\">\n  <gantt-calendar-header></gantt-calendar-header>\n  <gantt-calendar-grid></gantt-calendar-grid>\n  <gantt-drag-backdrop></gantt-drag-backdrop>\n  <div class=\"gantt-main\">\n    <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n  </div>\n</div>\n<ng-content></ng-content>\n<gantt-toolbar *ngIf=\"ganttUpper.showToolbar || ganttUpper.toolbarTemplate\" [template]=\"ganttUpper.toolbarTemplate\"> </gantt-toolbar>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: NgxGanttToolbarComponent, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: ["template"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttRootComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-gantt-root', providers: [GanttDomService, GanttDragContainer], host: {
+                        class: 'gantt'
+                    }, template: "<div class=\"gantt-side\" *ngIf=\"sideTemplate\" [style.width.px]=\"sideWidth\">\n  <div class=\"gantt-side-container\" cdkScrollable>\n    <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n  </div>\n</div>\n<div class=\"gantt-container\" *ngIf=\"mainTemplate\">\n  <gantt-calendar-header></gantt-calendar-header>\n  <gantt-calendar-grid></gantt-calendar-grid>\n  <gantt-drag-backdrop></gantt-drag-backdrop>\n  <div class=\"gantt-main\">\n    <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n  </div>\n</div>\n<ng-content></ng-content>\n<gantt-toolbar *ngIf=\"ganttUpper.showToolbar || ganttUpper.toolbarTemplate\" [template]=\"ganttUpper.toolbarTemplate\"> </gantt-toolbar>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: GanttDomService }, { type: GanttDragContainer }, { type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }, { type: GanttPrintService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { sideWidth: [{
+                type: Input
+            }], sideTemplate: [{
+                type: ContentChild,
+                args: ['sideTemplate', { static: true }]
+            }], mainTemplate: [{
+                type: ContentChild,
+                args: ['mainTemplate', { static: true }]
+            }], backdrop: [{
+                type: ViewChild,
+                args: [GanttDragBackdropComponent, { static: true, read: ElementRef }]
+            }] } });
+
 class NgxGanttComponent extends GanttUpper {
     set loading(loading) {
         if (loading) {
@@ -3672,7 +3931,7 @@ NgxGanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             provide: GANTT_ABSTRACT_TOKEN,
             useExisting: forwardRef(() => NgxGanttComponent)
         }
-    ], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }, { propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header></gantt-calendar-header>\n    </div>\n  </div>\n  <gantt-loader *ngIf=\"loading\"></gantt-loader>\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatData; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatData]=\"flatData\"\n            [renderData]=\"renderData\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (itemClick)=\"selectItem($event)\"\n          ></gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [flatData]=\"flatData\"\n          [renderData]=\"renderData\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n</ngx-gantt-root>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: ["columns"] }, { kind: "component", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: ["renderData", "flatData", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate", "draggable", "dropEnterPredicate"], outputs: ["dragDropped", "itemClick"] }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["renderData", "flatData", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttLoaderComponent, selector: "gantt-loader" }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }, { propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header></gantt-calendar-header>\n    </div>\n  </div>\n  <gantt-loader *ngIf=\"loading\"></gantt-loader>\n\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatData; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatData]=\"flatData\"\n            [renderData]=\"renderData\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (dragStarted)=\"table.dragStarted.emit($event)\"\n            (dragEnded)=\"table.dragEnded.emit($event)\"\n            (itemClick)=\"selectItem($event)\"\n          ></gantt-table-body>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [flatData]=\"flatData\"\n          [renderData]=\"renderData\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n</ngx-gantt-root>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: ["columns"] }, { kind: "component", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: ["renderData", "flatData", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate", "draggable", "dropEnterPredicate"], outputs: ["dragDropped", "dragStarted", "dragEnded", "itemClick"] }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["renderData", "flatData", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttLoaderComponent, selector: "gantt-loader" }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-gantt', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -3684,7 +3943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                             provide: GANTT_ABSTRACT_TOKEN,
                             useExisting: forwardRef(() => NgxGanttComponent)
                         }
-                    ], template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header></gantt-calendar-header>\n    </div>\n  </div>\n  <gantt-loader *ngIf=\"loading\"></gantt-loader>\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatData; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatData]=\"flatData\"\n            [renderData]=\"renderData\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (itemClick)=\"selectItem($event)\"\n          ></gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [flatData]=\"flatData\"\n          [renderData]=\"renderData\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n</ngx-gantt-root>\n" }]
+                    ], template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header></gantt-calendar-header>\n    </div>\n  </div>\n  <gantt-loader *ngIf=\"loading\"></gantt-loader>\n\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatData; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatData]=\"flatData\"\n            [renderData]=\"renderData\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (dragStarted)=\"table.dragStarted.emit($event)\"\n            (dragEnded)=\"table.dragEnded.emit($event)\"\n            (itemClick)=\"selectItem($event)\"\n          ></gantt-table-body>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [flatData]=\"flatData\"\n          [renderData]=\"renderData\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n</ngx-gantt-root>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: GanttPrintService, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -3822,5 +4081,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GANTT_GLOBAL_CONFIG, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttBaselineItemInternal, GanttDate, GanttDatePoint, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLinkLineType, GanttLinkType, GanttLoadOnScrollEvent, GanttLoaderComponent, GanttPrintService, GanttSelectedEvent, GanttTableDragDroppedEvent, GanttTableDragEnterPredicateContext, GanttTableEvent, GanttUpper, GanttView, GanttViewType, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttBaselineComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, NgxGanttToolbarComponent, defaultConfig, ganttViews, primaryDatePointTop, registerView, secondaryDatePointTop };
+export { GANTT_GLOBAL_CONFIG, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttBaselineItemInternal, GanttDate, GanttDatePoint, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLinkLineType, GanttLinkType, GanttLoadOnScrollEvent, GanttLoaderComponent, GanttPrintService, GanttSelectedEvent, GanttTableDragDroppedEvent, GanttTableDragEndedEvent, GanttTableDragEnterPredicateContext, GanttTableDragStartedEvent, GanttTableEvent, GanttUpper, GanttView, GanttViewType, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttBaselineComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, NgxGanttToolbarComponent, defaultConfig, ganttViews, primaryDatePointTop, registerView, secondaryDatePointTop };
 //# sourceMappingURL=worktile-gantt.mjs.map