@worktile/gantt 15.1.0-next.9 → 15.1.0

package/fesm2015/worktile-gantt.mjs

@@ -2,6 +2,7 @@ import * as i0 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 { __awaiter, __decorate, __param } from 'tslib';
 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';
@@ -10,7 +11,7 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { coerceBooleanProperty, coerceCssPixelValue } from '@angular/cdk/coercion';
 import * as i3 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
-import { __awaiter, __decorate, __param } from 'tslib';
+import { InputBoolean } from 'ngx-tethys/core';
 import * as i2 from '@angular/cdk/drag-drop';
 import { CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
 
@@ -222,7 +223,7 @@ var LinkColors;
 (function (LinkColors) {
     LinkColors["default"] = "#cacaca";
     LinkColors["blocked"] = "#FF7575";
-    LinkColors["active"] = "#348FE4";
+    LinkColors["active"] = "#6698ff";
 })(LinkColors || (LinkColors = {}));
 
 var GanttItemType;
@@ -778,7 +779,7 @@ const sideWidth = 400;
 const sideMiddleWidth = 500;
 const sideMaxWidth = 600;
 const sideMinWidth = 400;
-const barBackground = '#348fe4';
+const barBackground = '#6698ff';
 const rangeHeight = 17;
 const todayHeight = 24;
 const todayWidth = 35;
@@ -1730,16 +1731,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
         }] });
 
 class GanttTableBodyComponent {
-    set renderData(data) {
+    set viewportItems(data) {
         const firstData = data[0];
         if (firstData && firstData.hasOwnProperty('items')) {
             this.hasGroup = true;
         }
         this.ganttTableEmptyClass = (data === null || data === void 0 ? void 0 : data.length) ? false : true;
-        this._renderData = data;
+        this._viewportItems = data;
     }
-    get renderData() {
-        return this._renderData;
+    get viewportItems() {
+        return this._viewportItems;
     }
     constructor(gantt, ganttUpper, cdr, document) {
         this.gantt = gantt;
@@ -1903,14 +1904,14 @@ class GanttTableBodyComponent {
         this.destroy$.complete();
     }
     removeItem(item, children) {
-        this.renderData.splice(this.renderData.indexOf(item), 1 + children.length);
-        this.flatData.splice(this.flatData.indexOf(item), 1 + children.length);
+        this.viewportItems.splice(this.viewportItems.indexOf(item), 1 + children.length);
+        this.flatItems.splice(this.flatItems.indexOf(item), 1 + children.length);
     }
     insertItem(target, inserted, children, position) {
         var _a;
         if (position === 'before') {
-            this.renderData.splice(this.renderData.indexOf(target), 0, inserted, ...children);
-            this.flatData.splice(this.flatData.indexOf(target), 0, inserted, ...children);
+            this.viewportItems.splice(this.viewportItems.indexOf(target), 0, inserted, ...children);
+            this.flatItems.splice(this.flatItems.indexOf(target), 0, inserted, ...children);
         }
         else {
             const dragRef = this.cdkDrags.find((drag) => drag.data === target);
@@ -1919,19 +1920,19 @@ class GanttTableBodyComponent {
             if (target.expanded) {
                 childrenCount = ((_a = this.getChildrenElementsByElement(dragRef.element.nativeElement)) === null || _a === void 0 ? void 0 : _a.length) || 0;
             }
-            this.renderData.splice(this.renderData.indexOf(target) + 1 + childrenCount, 0, inserted, ...children);
-            this.flatData.splice(this.flatData.indexOf(target) + 1 + childrenCount, 0, inserted, ...children);
+            this.viewportItems.splice(this.viewportItems.indexOf(target) + 1 + childrenCount, 0, inserted, ...children);
+            this.flatItems.splice(this.flatItems.indexOf(target) + 1 + childrenCount, 0, inserted, ...children);
         }
     }
     insertChildrenItem(target, inserted, children) {
         if (target.expanded) {
-            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);
+            this.viewportItems.splice(this.viewportItems.indexOf(target) + target.children.length + 1, 0, inserted, ...children);
+            this.flatItems.splice(this.flatItems.indexOf(target) + target.children.length + 1, 0, inserted, ...children);
         }
         target.children.push(inserted);
     }
     getParentByItem(item) {
-        return (this.flatData || []).find((n) => {
+        return (this.flatItems || []).find((n) => {
             var _a;
             return (_a = n.children) === null || _a === void 0 ? void 0 : _a.includes(item);
         });
@@ -1990,10 +1991,10 @@ class GanttTableBodyComponent {
     }
 }
 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", 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" }] });
+GanttTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", 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]=\"viewportItems\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!viewportItems?.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=\"viewportItems && viewportItems.length > 0\">\n    <ng-container *ngFor=\"let item of viewportItems; 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 [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" }]
+            args: [{ selector: 'gantt-table-body', template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"viewportItems\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!viewportItems?.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=\"viewportItems && viewportItems.length > 0\">\n    <ng-container *ngFor=\"let item of viewportItems; 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,
@@ -2005,9 +2006,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         type: Inject,
                         args: [DOCUMENT]
                     }] }];
-    }, propDecorators: { renderData: [{
+    }, propDecorators: { viewportItems: [{
                 type: Input
-            }], flatData: [{
+            }], flatItems: [{
                 type: Input
             }], columns: [{
                 type: Input
@@ -2313,7 +2314,7 @@ class GanttLinksComponent {
         this.ngZone = ngZone;
         // @Input() groups: GanttGroupInternal[] = [];
         // @Input() items: GanttItemInternal[] = [];
-        this.flatData = [];
+        this.flatItems = [];
         this.lineClick = new EventEmitter();
         this.links = [];
         this.ganttLinkTypes = GanttLinkType;
@@ -2390,7 +2391,7 @@ class GanttLinksComponent {
         //         });
         //     });
         // }
-        this.flatData.forEach((item, itemIndex) => {
+        this.flatItems.forEach((item, itemIndex) => {
             if (!item.hasOwnProperty('items')) {
                 const ganttItem = item;
                 if (ganttItem.refs) {
@@ -2470,7 +2471,7 @@ class GanttLinksComponent {
     }
 }
 GanttLinksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttLinksComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: GanttDragContainer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-GanttLinksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: { flatData: "flatData" }, outputs: { lineClick: "lineClick" }, host: { properties: { "class.gantt-links-overlay": "this.ganttLinksOverlay" } }, usesOnChanges: true, ngImport: i0, template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  <ng-container *ngFor=\"let link of links; let i = index; trackBy: trackBy\">\n    <path\n      [attr.d]=\"link.path\"\n      fill=\"transparent\"\n      stroke-width=\"2\"\n      [attr.stroke]=\"link.color\"\n      pointer-events=\"none\"\n      [attr.style]=\"link.type === ganttLinkTypes.sf ? 'marker-start: url(#triangle' + i + ')' : 'marker-end: url(#triangle' + i + ')'\"\n    ></path>\n\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        [attr.d]=\"link.path\"\n        (mouseenter)=\"mouseEnterPath(link, i)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n    <defs *ngIf=\"showArrow\">\n      <marker\n        *ngIf=\"link.type === ganttLinkTypes.sf; else markerEnd\"\n        [id]=\"'triangle' + i\"\n        markerUnits=\"strokeWidth\"\n        markerWidth=\"5\"\n        markerHeight=\"4\"\n        refX=\"5\"\n        refY=\"2\"\n        orient=\"180\"\n      >\n        <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n      </marker>\n\n      <ng-template #markerEnd>\n        <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n          <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n        </marker>\n      </ng-template>\n    </defs>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\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"] }] });
+GanttLinksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: { flatItems: "flatItems" }, outputs: { lineClick: "lineClick" }, host: { properties: { "class.gantt-links-overlay": "this.ganttLinksOverlay" } }, usesOnChanges: true, ngImport: i0, template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  <ng-container *ngFor=\"let link of links; let i = index; trackBy: trackBy\">\n    <path\n      [attr.d]=\"link.path\"\n      fill=\"transparent\"\n      stroke-width=\"2\"\n      [attr.stroke]=\"link.color\"\n      pointer-events=\"none\"\n      [attr.style]=\"link.type === ganttLinkTypes.sf ? 'marker-start: url(#triangle' + i + ')' : 'marker-end: url(#triangle' + i + ')'\"\n    ></path>\n\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        [attr.d]=\"link.path\"\n        (mouseenter)=\"mouseEnterPath(link, i)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n    <defs *ngIf=\"showArrow\">\n      <marker\n        *ngIf=\"link.type === ganttLinkTypes.sf; else markerEnd\"\n        [id]=\"'triangle' + i\"\n        markerUnits=\"strokeWidth\"\n        markerWidth=\"5\"\n        markerHeight=\"4\"\n        refX=\"5\"\n        refY=\"2\"\n        orient=\"180\"\n      >\n        <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n      </marker>\n\n      <ng-template #markerEnd>\n        <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n          <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n        </marker>\n      </ng-template>\n    </defs>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\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: GanttLinksComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gantt-links-overlay', template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  <ng-container *ngFor=\"let link of links; let i = index; trackBy: trackBy\">\n    <path\n      [attr.d]=\"link.path\"\n      fill=\"transparent\"\n      stroke-width=\"2\"\n      [attr.stroke]=\"link.color\"\n      pointer-events=\"none\"\n      [attr.style]=\"link.type === ganttLinkTypes.sf ? 'marker-start: url(#triangle' + i + ')' : 'marker-end: url(#triangle' + i + ')'\"\n    ></path>\n\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        [attr.d]=\"link.path\"\n        (mouseenter)=\"mouseEnterPath(link, i)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n    <defs *ngIf=\"showArrow\">\n      <marker\n        *ngIf=\"link.type === ganttLinkTypes.sf; else markerEnd\"\n        [id]=\"'triangle' + i\"\n        markerUnits=\"strokeWidth\"\n        markerWidth=\"5\"\n        markerHeight=\"4\"\n        refX=\"5\"\n        refY=\"2\"\n        orient=\"180\"\n      >\n        <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n      </marker>\n\n      <ng-template #markerEnd>\n        <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n          <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n        </marker>\n      </ng-template>\n    </defs>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n" }]
@@ -2479,7 +2480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         type: Inject,
                         args: [GANTT_UPPER_TOKEN]
                     }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: GanttDragContainer }, { type: i0.NgZone }];
-    }, propDecorators: { flatData: [{
+    }, propDecorators: { flatItems: [{
                 type: Input
             }], lineClick: [{
                 type: Output
@@ -2552,6 +2553,25 @@ function isPointerNearClientRect(rect, threshold, pointerX, pointerY) {
     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;
@@ -2668,7 +2688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
  */
 const DROP_PROXIMITY_THRESHOLD = 0.05;
 const dragMinWidth = 10;
-const autoScrollStep = 5;
+const autoScrollBaseStep = 2;
 const activeClass = 'gantt-bar-active';
 const dropActiveClass = 'gantt-bar-drop-active';
 const singleDropActiveClass = 'gantt-bar-single-drop-active';
@@ -2684,6 +2704,12 @@ class GanttBarDrag {
     get linkDragDisabled() {
         return !this.item.linkable || !this.ganttUpper.linkable;
     }
+    get barHandleDragMoveAndScrollDistance() {
+        return this.barHandleDragMoveDistance + this.dragScrollDistance;
+    }
+    get autoScrollStep() {
+        return Math.pow(autoScrollBaseStep, this.autoScrollSpeedRates);
+    }
     constructor(dragDrop, dom, dragContainer, _ngZone) {
         this.dragDrop = dragDrop;
         this.dom = dom;
@@ -2703,13 +2729,15 @@ class GanttBarDrag {
         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 = autoScrollStep;
+                const scrollStep = this.autoScrollStep;
                 if (this._horizontalScrollDirection === 1 /* AutoScrollHorizontalDirection.LEFT */) {
                     node.scrollBy(-scrollStep, 0);
                 }
@@ -2818,16 +2846,32 @@ class GanttBarDrag {
                         const dragScrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
                         this.dragScrollDistance = dragScrollDistance;
                         dragRef['_boundaryRect'] = this.dom.mainItems.getBoundingClientRect();
-                        this.barHandleDragMove(isBefore);
+                        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.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
+                if (this.barHandleDragMoveRecordDays && this.barHandleDragMoveRecordDays > 0) {
+                    this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
+                }
                 this.barHandleDragMoveDistance = event.distance.x;
                 if (!this.dragScrolling) {
-                    this.barHandleDragMove(isBefore);
+                    if (isBefore) {
+                        this.barBeforeHandleDragMove();
+                    }
+                    else {
+                        this.barAfterHandleDragMove();
+                    }
                 }
             });
             dragRef.ended.subscribe((event) => {
@@ -2907,10 +2951,10 @@ class GanttBarDrag {
         let left = dragRect.left - rootRect.left - (this.dom.side.clientWidth + 1);
         if (this.dragScrolling) {
             if (this._horizontalScrollDirection === 1 /* AutoScrollHorizontalDirection.LEFT */) {
-                left += autoScrollStep;
+                left += this.autoScrollStep;
             }
             else if (this._horizontalScrollDirection === 2 /* AutoScrollHorizontalDirection.RIGHT */) {
-                left -= autoScrollStep;
+                left -= this.autoScrollStep;
             }
         }
         const width = dragRect.right - dragRect.left;
@@ -2960,44 +3004,51 @@ class GanttBarDrag {
         this.item.updateDate(start, end);
         this.dragContainer.dragMoved.emit({ item: this.item.origin });
     }
-    barHandleDragMove(isBefore) {
-        const distance = this.barHandleDragMoveDistance + this.dragScrollDistance;
-        if (isBefore) {
-            const x = this.item.refs.x + distance;
-            const width = this.item.refs.width + distance * -1;
-            const start = this.ganttUpper.view.getDateByXPoint(x);
-            const days = differenceInDays(this.item.end.value, start.value);
-            if (width > dragMinWidth && days > 0) {
-                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);
-                if (!this.isStartOrEndInsideView(start, this.item.end)) {
-                    return;
-                }
-                this.item.updateDate(start, this.item.end);
             }
-            else {
-                this.openDragBackdrop(this.barElement, this.item.end.startOfDay(), this.item.end);
-                this.item.updateDate(this.item.end.startOfDay(), 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);
-            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 {
-                this.openDragBackdrop(this.barElement, this.item.start, this.item.start.endOfDay());
-                this.item.updateDate(this.item.start, this.item.start.endOfDay());
+            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) {
@@ -3036,6 +3087,7 @@ class GanttBarDrag {
                 (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);
             }
@@ -3045,6 +3097,44 @@ class GanttBarDrag {
             }
         }
     }
+    // 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();
     }
@@ -3180,12 +3270,14 @@ class NgxGanttBarComponent extends GanttItemUpper {
         });
     }
     ngOnChanges(changes) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         super.ngOnChanges(changes);
         if (!this.firstChange) {
             this.drag.updateItem(this.item);
             if (((_a = changes.item.currentValue.refs) === null || _a === void 0 ? void 0 : _a.width) !== ((_b = changes.item.previousValue.refs) === null || _b === void 0 ? void 0 : _b.width) ||
-                changes.item.currentValue.color !== changes.item.previousValue.color) {
+                changes.item.currentValue.color !== changes.item.previousValue.color ||
+                ((_c = changes.item.currentValue.start) === null || _c === void 0 ? void 0 : _c.value) !== ((_d = changes.item.previousValue.start) === null || _d === void 0 ? void 0 : _d.value) ||
+                ((_e = changes.item.currentValue.end) === null || _e === void 0 ? void 0 : _e.value) !== ((_f = changes.item.previousValue.end) === null || _f === void 0 ? void 0 : _f.value)) {
                 this.setContentBackground();
             }
         }
@@ -3341,18 +3433,18 @@ class GanttMainComponent {
     }
 }
 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" }] });
+GanttMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttMainComponent, selector: "gantt-main", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", 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 [flatItems]=\"flatItems\" (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 viewportItems; 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: ["flatItems"], 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" }]
+            args: [{ selector: 'gantt-main', template: "<gantt-links-overlay [flatItems]=\"flatItems\" (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 viewportItems; 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: [{
+    }, propDecorators: { viewportItems: [{
                 type: Input
-            }], flatData: [{
+            }], flatItems: [{
                 type: Input
             }], groupHeaderTemplate: [{
                 type: Input
@@ -3708,19 +3800,20 @@ class NgxGanttComponent extends GanttUpper {
         super(elementRef, cdr, ngZone, config);
         this.printService = printService;
         this.maxLevel = 2;
+        this.virtualScrollEnabled = true;
         this.loadingDelay = 0;
         this.linkDragStarted = new EventEmitter();
         this.linkDragEnded = new EventEmitter();
         this.lineClick = new EventEmitter();
         this.selectedChange = new EventEmitter();
-        this.flatData = [];
-        this.renderData = [];
+        this.flatItems = [];
+        this.viewportItems = [];
         this._loading = false;
         this.computeAllRefs = false;
     }
     ngOnInit() {
         super.ngOnInit();
-        this.buildVirtualFlatData();
+        this.buildFlatItems();
         // 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));
@@ -3742,32 +3835,38 @@ class NgxGanttComponent extends GanttUpper {
         this.view.start$.pipe(skip(1), takeUntil(this.unsubscribe$)).subscribe(() => {
             this.computeTempDataRefs();
         });
+        if (!this.virtualScrollEnabled) {
+            this.viewportItems = this.flatItems.slice(this.rangeStart, this.rangeEnd);
+            this.computeTempDataRefs();
+        }
     }
     ngOnChanges(changes) {
         super.ngOnChanges(changes);
         if (!this.firstChange) {
             if (changes.viewType && changes.viewType.currentValue) {
-                this.renderData = this.flatData.slice(this.rangeStart, this.rangeEnd);
+                this.viewportItems = this.flatItems.slice(this.rangeStart, this.rangeEnd);
                 this.computeTempDataRefs();
             }
             if (changes.originItems || changes.originGroups) {
-                this.buildVirtualFlatData();
-                this.renderData = this.flatData.slice(this.rangeStart, this.rangeEnd);
+                this.buildFlatItems();
+                this.viewportItems = this.flatItems.slice(this.rangeStart, this.rangeEnd);
                 this.computeTempDataRefs();
             }
         }
     }
     ngAfterViewInit() {
-        this.virtualScroll.renderedRangeStream.pipe(takeUntil(this.unsubscribe$)).subscribe((range) => {
-            const linksElement = this.elementRef.nativeElement.querySelector('.gantt-links-overlay');
-            linksElement.style.top = `${-(this.styles.lineHeight * range.start)}px`;
-            this.rangeStart = range.start;
-            this.rangeEnd = range.end;
-            this.renderData = this.flatData.slice(range.start, range.end);
-            this.computeTempDataRefs();
-        });
+        if (this.virtualScrollEnabled) {
+            this.virtualScroll.renderedRangeStream.pipe(takeUntil(this.unsubscribe$)).subscribe((range) => {
+                const linksElement = this.elementRef.nativeElement.querySelector('.gantt-links-overlay');
+                linksElement.style.top = `${-(this.styles.lineHeight * range.start)}px`;
+                this.rangeStart = range.start;
+                this.rangeEnd = range.end;
+                this.viewportItems = this.flatItems.slice(range.start, range.end);
+                this.computeTempDataRefs();
+            });
+        }
     }
-    buildVirtualFlatData() {
+    buildFlatItems() {
         const virtualData = [];
         if (this.groups.length) {
             this.groups.forEach((group) => {
@@ -3781,22 +3880,26 @@ class NgxGanttComponent extends GanttUpper {
         if (this.items.length) {
             virtualData.push(...recursiveItems(this.items));
         }
-        this.flatData = [...virtualData];
-        this.flatDataMap = keyBy(this.flatData, 'id');
+        this.flatItems = [...virtualData];
+        this.flatItemsMap = keyBy(this.flatItems, 'id');
+        if (!this.virtualScrollEnabled) {
+            this.rangeStart = 0;
+            this.rangeEnd = this.flatItems.length - 1;
+        }
     }
     afterExpand() {
-        this.buildVirtualFlatData();
-        this.renderData = this.flatData.slice(this.rangeStart, this.rangeEnd);
+        this.buildFlatItems();
+        this.viewportItems = this.flatItems.slice(this.rangeStart, this.rangeEnd);
     }
     computeTempDataRefs() {
         const tempItemData = [];
-        this.renderData.forEach((data) => {
+        this.viewportItems.forEach((data) => {
             if (!data.hasOwnProperty('items')) {
                 const item = data;
                 if (item.links) {
                     item.links.forEach((link) => {
-                        if (this.flatDataMap[link.link]) {
-                            tempItemData.push(this.flatDataMap[link.link]);
+                        if (this.flatItemsMap[link.link]) {
+                            tempItemData.push(this.flatItemsMap[link.link]);
                         }
                     });
                 }
@@ -3804,8 +3907,8 @@ class NgxGanttComponent extends GanttUpper {
             }
         });
         this.computeItemsRefs(...uniqBy(tempItemData, 'id'));
-        this.flatData = [...this.flatData];
-        this.renderData = [...this.renderData];
+        this.flatItems = [...this.flatItems];
+        this.viewportItems = [...this.viewportItems];
     }
     expandChildren(item) {
         if (!item.expanded) {
@@ -3875,7 +3978,7 @@ class NgxGanttComponent extends GanttUpper {
     }
 }
 NgxGanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GanttPrintService, optional: true }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttComponent, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable", loading: "loading", loadingDelay: "loadingDelay" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick", selectedChange: "selectedChange" }, providers: [
+NgxGanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttComponent, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable", loading: "loading", virtualScrollEnabled: "virtualScrollEnabled", loadingDelay: "loadingDelay" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick", selectedChange: "selectedChange" }, providers: [
         {
             provide: GANTT_UPPER_TOKEN,
             useExisting: NgxGanttComponent
@@ -3884,7 +3987,10 @@ 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\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 });
+    ], 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    [ngClass]=\"{ 'gantt-normal-viewport': !virtualScrollEnabled }\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatItems; 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            [flatItems]=\"flatItems\"\n            [viewportItems]=\"viewportItems\"\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          >\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          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ["viewportItems", "flatItems", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate", "draggable", "dropEnterPredicate"], outputs: ["dragDropped", "dragStarted", "dragEnded", "itemClick"] }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["viewportItems", "flatItems", "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 });
+__decorate([
+    InputBoolean()
+], NgxGanttComponent.prototype, "virtualScrollEnabled", void 0);
 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: [
@@ -3896,7 +4002,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\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" }]
+                    ], 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    [ngClass]=\"{ 'gantt-normal-viewport': !virtualScrollEnabled }\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatItems; 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            [flatItems]=\"flatItems\"\n            [viewportItems]=\"viewportItems\"\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          >\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          [flatItems]=\"flatItems\"\n          [viewportItems]=\"viewportItems\"\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
@@ -3914,6 +4020,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 type: Input
             }], loading: [{
                 type: Input
+            }], virtualScrollEnabled: [{
+                type: Input
             }], loadingDelay: [{
                 type: Input
             }], linkDragStarted: [{
@@ -3947,11 +4055,9 @@ NgxGanttModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 NgxGanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttModule, declarations: [NgxGanttComponent,
         NgxGanttTableComponent,
         NgxGanttTableColumnComponent,
-        // GanttTableComponent,
         GanttTableHeaderComponent,
         GanttTableBodyComponent,
         GanttMainComponent,
-        // GanttCalendarComponent,
         GanttCalendarHeaderComponent,
         GanttCalendarGridComponent,
         GanttLinksComponent,
@@ -3998,11 +4104,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         NgxGanttComponent,
                         NgxGanttTableComponent,
                         NgxGanttTableColumnComponent,
-                        // GanttTableComponent,
                         GanttTableHeaderComponent,
                         GanttTableBodyComponent,
                         GanttMainComponent,
-                        // GanttCalendarComponent,
                         GanttCalendarHeaderComponent,
                         GanttCalendarGridComponent,
                         GanttLinksComponent,