@worktile/gantt 12.1.0-next.0 → 12.1.3

package/bundles/worktile-gantt.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs/operators'), require('rxjs'), require('date-fns'), require('@angular/cdk/coercion'), require('@angular/cdk/scrolling'), require('@angular/cdk/drag-drop'), require('html2canvas')) :
-    typeof define === 'function' && define.amd ? define('@worktile/gantt', ['exports', '@angular/core', '@angular/common', 'rxjs/operators', 'rxjs', 'date-fns', '@angular/cdk/coercion', '@angular/cdk/scrolling', '@angular/cdk/drag-drop', 'html2canvas'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.worktile = global.worktile || {}, global.worktile.gantt = {}), global.ng.core, global.ng.common, global.rxjs.operators, global.rxjs, global.dateFns, global.ng.cdk.coercion, global.ng.cdk.scrolling, global.ng.cdk.dragDrop, global.html2canvas));
-}(this, (function (exports, i0, i1, operators, rxjs, dateFns, coercion, i6, i1$1, html2canvas) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs/operators'), require('rxjs'), require('date-fns'), require('@angular/cdk/collections'), require('@angular/cdk/coercion'), require('@angular/cdk/drag-drop'), require('html2canvas')) :
+    typeof define === 'function' && define.amd ? define('@worktile/gantt', ['exports', '@angular/core', '@angular/common', 'rxjs/operators', 'rxjs', 'date-fns', '@angular/cdk/collections', '@angular/cdk/coercion', '@angular/cdk/drag-drop', 'html2canvas'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.worktile = global.worktile || {}, global.worktile.gantt = {}), global.ng.core, global.ng.common, global.rxjs.operators, global.rxjs, global.dateFns, global.ng.cdk.collections, global.ng.cdk.coercion, global.ng.cdk.dragDrop, global.html2canvas));
+}(this, (function (exports, i0, i2, operators, rxjs, dateFns, collections, coercion, i1, html2canvas) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,9 +27,8 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var html2canvas__default = /*#__PURE__*/_interopDefaultLegacy(html2canvas);
 
     /*! *****************************************************************************
@@ -391,6 +390,11 @@
         }
         return GanttBarClickEvent;
     }());
+    var GanttSelectedEvent = /** @class */ (function () {
+        function GanttSelectedEvent() {
+        }
+        return GanttSelectedEvent;
+    }());
 
     var GanttDate = /** @class */ (function () {
         function GanttDate(date) {
@@ -660,11 +664,24 @@
         return GanttGroupInternal;
     }());
 
+    var defaultConfig = {
+        dateFormat: {
+            week: '第w周',
+            month: 'M月',
+            quarter: 'QQQ',
+            year: 'yyyy年',
+            yearMonth: 'yyyy年MM月',
+            yearQuarter: 'yyyy年QQQ',
+        }
+    };
+    var GANTT_GLOBAL_CONFIG = new i0.InjectionToken('GANTT_GLOBAL_CONFIG');
+
     var primaryDatePointTop = 18;
     var secondaryDatePointTop = 36;
     var viewOptions$5 = {
         min: new GanttDate().addYears(-1).startOfYear(),
-        max: new GanttDate().addYears(1).endOfYear()
+        max: new GanttDate().addYears(1).endOfYear(),
+        dateFormat: defaultConfig.dateFormat
     };
     var GanttView = /** @class */ (function () {
         function GanttView(start, end, options) {
@@ -817,7 +834,7 @@
             var points = [];
             for (var i = 0; i < quarters; i++) {
                 var start = this.start.addQuarters(i);
-                var point = new GanttDatePoint(start, start.format('yyyy年QQQ'), (this.getCellWidth() * 3) / 2 + i * (this.getCellWidth() * 3), primaryDatePointTop);
+                var point = new GanttDatePoint(start, start.format(this.options.dateFormat.yearQuarter), (this.getCellWidth() * 3) / 2 + i * (this.getCellWidth() * 3), primaryDatePointTop);
                 points.push(point);
             }
             return points;
@@ -827,7 +844,7 @@
             var points = [];
             for (var i = 0; i < months.length; i++) {
                 var start = new GanttDate(months[i]);
-                var point = new GanttDatePoint(start, start.getMonth() + 1 + "\u6708", i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+                var point = new GanttDatePoint(start, start.format(this.options.dateFormat.month), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
                 points.push(point);
             }
             return points;
@@ -866,7 +883,7 @@
             var points = [];
             for (var i = 0; i < years.length; i++) {
                 var start = new GanttDate(years[i]);
-                var point = new GanttDatePoint(start, start.format('yyyy') + "\u5E74", (this.getCellWidth() * 4) / 2 + i * (this.getCellWidth() * 4), primaryDatePointTop);
+                var point = new GanttDatePoint(start, "" + start.format(this.options.dateFormat.year), (this.getCellWidth() * 4) / 2 + i * (this.getCellWidth() * 4), primaryDatePointTop);
                 points.push(point);
             }
             return points;
@@ -876,7 +893,7 @@
             var points = [];
             for (var i = 0; i <= quarters; i++) {
                 var start = this.start.addQuarters(i);
-                var point = new GanttDatePoint(start, start.format('QQQ'), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+                var point = new GanttDatePoint(start, start.format(this.options.dateFormat.quarter), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
                 points.push(point);
             }
             return points;
@@ -917,7 +934,7 @@
             for (var i = 0; i < weeks.length; i++) {
                 var weekStart = new GanttDate(weeks[i]);
                 var increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
-                var point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format('yyyy年MM月'), (this.getCellWidth() * 7) / 2 + i * (this.getCellWidth() * 7), primaryDatePointTop);
+                var point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format(this.options.dateFormat.yearMonth), (this.getCellWidth() * 7) / 2 + i * (this.getCellWidth() * 7), primaryDatePointTop);
                 points.push(point);
             }
             return points;
@@ -968,7 +985,7 @@
             for (var i = 0; i < weeks.length; i++) {
                 var weekStart = new GanttDate(weeks[i]);
                 var increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
-                var point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format('yyyy年'), this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
+                var point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format(this.options.dateFormat.year), this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
                 points.push(point);
             }
             return points;
@@ -978,7 +995,7 @@
             var points = [];
             for (var i = 0; i < weeks.length; i++) {
                 var start = new GanttDate(weeks[i]);
-                var point = new GanttDatePoint(start, "\u7B2C" + start.format('w') + "\u5468", i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+                var point = new GanttDatePoint(start, "" + start.format(this.options.dateFormat.week), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
                 points.push(point);
             }
             return points;
@@ -1026,7 +1043,7 @@
             var pointTop = 27;
             for (var i = 0; i <= years; i++) {
                 var start = this.start.addYears(i);
-                var point = new GanttDatePoint(start, start.format('yyyy') + "\u5E74", i * this.getCellWidth() + this.getCellWidth() / 2, pointTop);
+                var point = new GanttDatePoint(start, "" + start.format(this.options.dateFormat.year), i * this.getCellWidth() + this.getCellWidth() / 2, pointTop);
                 points.push(point);
             }
             return points;
@@ -1101,40 +1118,43 @@
             return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
         }, []);
     }
-    function recursiveItems(items, level) {
+    function recursiveItems(items) {
         var result = [];
         (items || []).forEach(function (item) {
-            item.level = level;
             result.push(item);
             if (item.expanded && item.children) {
-                result.push.apply(result, __spreadArray([], __read(recursiveItems(item.children, level + 1))));
+                result.push.apply(result, __spreadArray([], __read(recursiveItems(item.children))));
             }
         });
         return result;
     }
-    function keyBy(array, key) {
-        var result = {};
-        array.forEach(function (item) {
-            var keyValue = item[key];
-            result[keyValue] = item;
+    function getFlatItems(items) {
+        var result = [];
+        (items || []).forEach(function (item) {
+            result.push(item);
+            if (item.children) {
+                result.push.apply(result, __spreadArray([], __read(getFlatItems(item.children))));
+            }
         });
         return result;
     }
 
     var GanttUpper = /** @class */ (function () {
-        function GanttUpper(elementRef, cdr, ngZone) {
+        function GanttUpper(elementRef, cdr, ngZone, config) {
             this.elementRef = elementRef;
             this.cdr = cdr;
             this.ngZone = ngZone;
+            this.config = config;
             this.originItems = [];
             this.originGroups = [];
             this.viewType = exports.GanttViewType.month;
             this.showTodayLine = true;
+            this.viewOptions = {};
             this.loadOnScroll = new i0.EventEmitter();
             this.dragStarted = new i0.EventEmitter();
+            this.dragMoved = new i0.EventEmitter();
             this.dragEnded = new i0.EventEmitter();
             this.barClick = new i0.EventEmitter();
-            this.computeAllRefs = true;
             this.linkDragEnded = new i0.EventEmitter();
             this.items = [];
             this.groups = [];
@@ -1142,9 +1162,40 @@
             this.expandChange = new i0.EventEmitter();
             this.firstChange = true;
             this.unsubscribe$ = new rxjs.Subject();
-            this.expandedItemIds = [];
+            this._selectable = false;
+            this._multiple = false;
             this.ganttClass = true;
         }
+        Object.defineProperty(GanttUpper.prototype, "selectable", {
+            get: function () {
+                return this._selectable;
+            },
+            set: function (value) {
+                var _a;
+                this._selectable = coercion.coerceBooleanProperty(value);
+                if (this._selectable) {
+                    this.selectionModel = this.initSelectionModel();
+                }
+                else {
+                    (_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.clear();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(GanttUpper.prototype, "multiple", {
+            get: function () {
+                return this._multiple;
+            },
+            set: function (value) {
+                this._multiple = coercion.coerceBooleanProperty(value);
+                if (this.selectable) {
+                    this.selectionModel = this.initSelectionModel();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(GanttUpper.prototype, "element", {
             get: function () {
                 return this.elementRef.nativeElement;
@@ -1171,21 +1222,6 @@
         GanttUpper.prototype.setupItems = function () {
             var _this = this;
             this.originItems = uniqBy(this.originItems, 'id');
-            // 根据上一次数据展开状态同步新的数据展开状态
-            this.originItems.forEach(function (originItem) {
-                var _a, _b;
-                var oldItem = _this.items.find(function (item) {
-                    return item.id === originItem.id;
-                });
-                if (!_this.firstChange) {
-                    if (oldItem && !((_a = oldItem.children) === null || _a === void 0 ? void 0 : _a.length) && ((_b = originItem.children) === null || _b === void 0 ? void 0 : _b.length)) {
-                        originItem.expanded = originItem.expanded || _this.expandedItemIds.includes(originItem.id);
-                    }
-                    else {
-                        originItem.expanded = _this.expandedItemIds.includes(originItem.id);
-                    }
-                }
-            });
             this.items = [];
             if (this.groups.length > 0) {
                 this.originItems.forEach(function (origin) {
@@ -1204,18 +1240,23 @@
             }
         };
         GanttUpper.prototype.setupExpandedState = function () {
-            var _this = this;
+            this.originItems = uniqBy(this.originItems, 'id');
             var items = [];
+            var flatOriginItems = getFlatItems(this.originItems);
             if (this.items.length > 0) {
                 items = recursiveItems(this.items);
             }
             else {
                 items = flatten(this.groups.map(function (group) { return recursiveItems(group.items); }));
             }
-            this.expandedItemIds = [];
             items.forEach(function (item) {
                 if (item.origin.expanded) {
-                    _this.expandedItemIds.push(item.id);
+                    var newItem = flatOriginItems.find(function (originItem) { return originItem.id === item.id; });
+                    if (newItem) {
+                        if (newItem.expanded === undefined) {
+                            newItem.expanded = true;
+                        }
+                    }
                 }
             });
         };
@@ -1246,28 +1287,41 @@
         };
         GanttUpper.prototype.computeRefs = function () {
             var _this = this;
-            if (this.computeAllRefs) {
-                this.groups.forEach(function (group) {
-                    var groupItems = recursiveItems(group.items);
-                    _this.computeItemsRefs.apply(_this, __spreadArray([], __read(groupItems)));
-                });
-                var items = recursiveItems(this.items);
-                this.computeItemsRefs.apply(this, __spreadArray([], __read(items)));
-            }
+            this.groups.forEach(function (group) {
+                var groupItems = recursiveItems(group.items);
+                _this.computeItemsRefs.apply(_this, __spreadArray([], __read(groupItems)));
+            });
+            var items = recursiveItems(this.items);
+            this.computeItemsRefs.apply(this, __spreadArray([], __read(items)));
+        };
+        GanttUpper.prototype.expandGroups = function (expanded) {
+            this.groups.forEach(function (group) {
+                group.setExpand(expanded);
+            });
+            this.expandChange.next();
+            this.cdr.detectChanges();
+        };
+        GanttUpper.prototype.initSelectionModel = function () {
+            return new collections.SelectionModel(this.multiple, []);
         };
         GanttUpper.prototype.onInit = function () {
             var _this = this;
             this.styles = Object.assign({}, defaultStyles, this.styles);
+            this.viewOptions.dateFormat = Object.assign({}, defaultConfig.dateFormat, this.config.dateFormat, this.viewOptions.dateFormat);
             this.createView();
             this.setupGroups();
             this.setupItems();
             this.computeRefs();
+            this.initSelectionModel();
             this.firstChange = false;
             this.ngZone.onStable.pipe(operators.take(1)).subscribe(function () {
                 _this.element.style.opacity = '1';
                 _this.dragContainer.dragStarted.subscribe(function (event) {
                     _this.dragStarted.emit(event);
                 });
+                _this.dragContainer.dragMoved.subscribe(function (event) {
+                    _this.dragMoved.emit(event);
+                });
                 _this.dragContainer.dragEnded.subscribe(function (event) {
                     _this.dragEnded.emit(event);
                     _this.computeRefs();
@@ -1313,19 +1367,58 @@
                 });
             });
         };
-        GanttUpper.prototype.trackBy = function (item, index) {
+        GanttUpper.prototype.trackBy = function (index, item) {
             return item.id || index;
         };
         GanttUpper.prototype.detectChanges = function () {
             this.cdr.detectChanges();
         };
+        GanttUpper.prototype.expandGroup = function (group) {
+            group.setExpand(!group.expanded);
+            this.expandChange.emit();
+            this.cdr.detectChanges();
+        };
+        // public functions
+        GanttUpper.prototype.expandAll = function () {
+            this.expandGroups(true);
+        };
+        GanttUpper.prototype.collapseAll = function () {
+            this.expandGroups(false);
+        };
+        GanttUpper.prototype.getGanttItem = function (id) {
+            return this.getGanttItems([id])[0] || null;
+        };
+        GanttUpper.prototype.getGanttItems = function (ids) {
+            var items = [];
+            if (this.items.length > 0) {
+                items = recursiveItems(this.items);
+            }
+            else {
+                items = flatten(this.groups.map(function (group) { return recursiveItems(group.items); }));
+            }
+            return items.filter(function (item) { return ids.includes(item.id); });
+        };
+        GanttUpper.prototype.isSelected = function (id) {
+            if (!this.selectable) {
+                return false;
+            }
+            if (!this.selectionModel.hasValue()) {
+                return false;
+            }
+            return this.selectionModel.isSelected(id);
+        };
         return GanttUpper;
     }());
-    GanttUpper.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttUpper, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    GanttUpper.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.2", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", viewOptions: "viewOptions", disabledLoadOnScroll: "disabledLoadOnScroll" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragEnded: "dragEnded", barClick: "barClick" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }], ngImport: i0__namespace });
+    GanttUpper.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttUpper, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    GanttUpper.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.2", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", viewOptions: "viewOptions", disabledLoadOnScroll: "disabledLoadOnScroll", selectable: "selectable", multiple: "multiple" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded", barClick: "barClick" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }], ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttUpper, decorators: [{
                 type: i0.Directive
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { originItems: [{
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [GANTT_GLOBAL_CONFIG]
+                        }] }];
+        }, propDecorators: { originItems: [{
                     type: i0.Input,
                     args: ['items']
                 }], originGroups: [{
@@ -1347,10 +1440,16 @@
                     type: i0.Input
                 }], disabledLoadOnScroll: [{
                     type: i0.Input
+                }], selectable: [{
+                    type: i0.Input
+                }], multiple: [{
+                    type: i0.Input
                 }], loadOnScroll: [{
                     type: i0.Output
                 }], dragStarted: [{
                     type: i0.Output
+                }], dragMoved: [{
+                    type: i0.Output
                 }], dragEnded: [{
                     type: i0.Output
                 }], barClick: [{
@@ -1423,7 +1522,7 @@
         return NgxGanttTableComponent;
     }());
     NgxGanttTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttTableComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NgxGanttTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttTableComponent, selector: "ngx-gantt-table", outputs: { columnChanges: "columnChanges" }, ngImport: i0__namespace, template: '', isInline: true });
+    NgxGanttTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttTableComponent, selector: "ngx-gantt-table", outputs: { 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__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttTableComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1432,183 +1531,132 @@
                     }]
             }], ctorParameters: function () { return []; }, propDecorators: { columnChanges: [{
                     type: i0.Output
+                }], rowBeforeTemplate: [{
+                    type: i0.ContentChild,
+                    args: ['rowBeforeSlot', { static: true }]
+                }], rowAfterTemplate: [{
+                    type: i0.ContentChild,
+                    args: ['rowAfterSlot', { static: true }]
                 }] } });
 
-    var scrollThreshold = 50;
-    var ScrollDirection;
-    (function (ScrollDirection) {
-        ScrollDirection[ScrollDirection["NONE"] = 0] = "NONE";
-        ScrollDirection[ScrollDirection["LEFT"] = 1] = "LEFT";
-        ScrollDirection[ScrollDirection["RIGHT"] = 2] = "RIGHT";
-    })(ScrollDirection || (ScrollDirection = {}));
-    var GanttDomService = /** @class */ (function () {
-        function GanttDomService() {
-            this.unsubscribe$ = new rxjs.Subject();
+    var GANTT_ABSTRACT_TOKEN = new i0.InjectionToken('gantt-abstract-token');
+
+    var angleRight = "<svg xmlns=\"http://www.w3.org/2000/svg\" fit=\"\"  preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\"><g id=\"amnavigation/angle-right\" stroke-width=\"1\" fill-rule=\"evenodd\"><path d=\"M7.978 11.498l-.005.005L2.3 5.831 3.13 5l4.848 4.848L12.826 5l.83.831-5.673 5.672-.005-.005z\"   transform=\"rotate(-90 7.978 8.252)\"></path></g></svg>";
+    var angleDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" fit=\"\"  preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\"><g id=\"aknavigation/angle-down\" stroke-width=\"1\" fill-rule=\"evenodd\"><path d=\"M7.978 11.997l-.005.006L2.3 6.33l.83-.831 4.848 4.848L12.826 5.5l.83.83-5.673 5.673-.005-.006z\" ></path></g></svg>";
+    var plusSquare = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\" fit=\"\"   preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\"><g id=\"kxaction/plus-square\" stroke-width=\"1\" fill-rule=\"evenodd\"><path d=\"M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm5.45 6.2V4.75h1.2V7.4h2.65v1.2H8.65v2.65h-1.2V8.6H4.8V7.4h2.65z\"></path></g></svg>";
+    var minusSquare = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\" fit=\"\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\"><g id=\"jnaction/minus-square\" stroke-width=\"1\" fill-rule=\"evenodd\"><path d=\"M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm2.8 6.2h6.5v1.2H4.8V7.4z\"></path></g></svg>";
+    var loadingIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"  viewBox=\"0 0 50 50\" style=\"enable-background:new 0 0 50 50\" xml:space=\"preserve\">\n<path fill=\"#aaa\" d=\"M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z\" transform=\"rotate(275.098 25 25)\">\n    <animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.6s\" repeatCount=\"indefinite\"></animateTransform>\n</path>\n</svg>";
+    var emptyIcon = "<svg\nwidth=\"148px\"\nheight=\"134px\"\nviewBox=\"0 0 148 134\"\nversion=\"1.1\"\nxmlns=\"http://www.w3.org/2000/svg\"\nxmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n<defs>\n  <filter x=\"0.0%\" y=\"0.0%\" width=\"100.0%\" height=\"100.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-1\">\n    <feGaussianBlur stdDeviation=\"0\" in=\"SourceGraphic\"></feGaussianBlur>\n  </filter>\n</defs>\n<g id=\"148x134\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n  <g id=\"\u7F16\u7EC4-6\" transform=\"translate(1.000000, 1.000000)\">\n    <ellipse\n      id=\"\u692D\u5706\u5F62\"\n      fill=\"#EDEEF2\"\n      opacity=\"0.3\"\n      filter=\"url(#filter-1)\"\n      cx=\"73.0800017\"\n      cy=\"115.920003\"\n      rx=\"73.0800017\"\n      ry=\"16.8000004\"\n    ></ellipse>\n    <g id=\"\u7F16\u7EC4-5\" transform=\"translate(15.120000, 0.000000)\">\n      <polygon\n        id=\"\u77E9\u5F62\"\n        fill=\"#E2E4E9\"\n        points=\"19.2789848 49.5600011 99.1200023 48.7200011 117.600003 75.9297673 117.600003 92.313049 0 92.313049 0 75.0356267\"\n      ></polygon>\n      <path\n        d=\"M23.5200005,0 L94.0800002,0 C97.7913538,2.06413823e-16 100.8,3.00864655 100.8,6.72000015 L100.8,99.1200023 L100.8,99.1200023 L16.8000004,99.1200023 L16.8000004,6.72000015 C16.8000004,3.00864655 19.8086469,1.56994302e-15 23.5200005,0 Z\"\n        id=\"\u77E9\u5F62\"\n        fill=\"#F9FAFB\"\n      ></path>\n      <path\n        d=\"M30.9200007,12.4400003 L86.6800019,12.4400003 C88.5356787,12.4400003 90.040002,13.9443236 90.040002,15.8000004 L90.040002,42.000001 C90.040002,43.8556778 88.5356787,45.360001 86.6800019,45.360001 L30.9200007,45.360001 C29.0643239,45.360001 27.5600006,43.8556778 27.5600006,42.000001 L27.5600006,15.8000004 C27.5600006,13.9443236 29.0643239,12.4400003 30.9200007,12.4400003 Z\"\n        id=\"\u77E9\u5F62\"\n        fill=\"#E8EAEE\"\n      ></path>\n      <text\n        id=\"&lt;/null&gt;\"\n        font-family=\"PingFangSC-Medium, PingFang SC\"\n        font-size=\"15.1200003\"\n        font-weight=\"400\"\n        fill=\"#BCBECD\"\n      >\n        <tspan x=\"33.6000008\" y=\"32.8000004\">&lt;/null&gt;</tspan>\n      </text>\n      <rect id=\"\u77E9\u5F62\" fill=\"#E8EAEE\" x=\"27.5600006\" y=\"52.0800012\" width=\"61.4800014\" height=\"5.04000011\" rx=\"2.52000006\"></rect>\n      <rect\n        id=\"\u77E9\u5F62\u5907\u4EFD\"\n        fill=\"#E8EAEE\"\n        x=\"27.5600006\"\n        y=\"63.8400014\"\n        width=\"61.4800014\"\n        height=\"5.04000011\"\n        rx=\"2.52000006\"\n      ></rect>\n      <path\n        d=\"M0,75.6000017 L29.280235,75.6000017 C32.0637502,75.6000017 34.3202352,77.8564866 34.3202352,80.6400018 L34.3202352,86.2591426 C34.3202352,89.0426578 36.5767201,91.2991427 39.3602353,91.2991427 L78.4136737,91.2991427 C81.1971889,91.2991427 83.4536738,89.0426578 83.4536738,86.2591426 L83.4536738,80.6400018 C83.4536738,77.8564866 85.7101587,75.6000017 88.4936739,75.6000017 L117.600003,75.6000017 L117.600003,75.6000017 L117.600003,110.880003 C117.600003,115.519195 113.839194,119.280003 109.200002,119.280003 L8.40000019,119.280003 C3.76080819,119.280003 -6.53729019e-15,115.519195 0,110.880003 L0,75.6000017 L0,75.6000017 Z\"\n        id=\"\u77E9\u5F62\"\n        fill=\"#EDEFF2\"\n      ></path>\n    </g>\n  </g>\n</g>\n</svg>";
+    var icons = {
+        'angle-right': angleRight,
+        'angle-down': angleDown,
+        'plus-square': plusSquare,
+        'minus-square': minusSquare,
+        loading: loadingIcon,
+        empty: emptyIcon
+    };
+
+    var GanttIconComponent = /** @class */ (function () {
+        function GanttIconComponent(elementRef) {
+            this.elementRef = elementRef;
+            this.isIcon = true;
         }
-        GanttDomService.prototype.monitorScrollChange = function () {
-            var _this = this;
-            rxjs.merge(rxjs.fromEvent(this.mainContainer, 'scroll'), rxjs.fromEvent(this.sideContainer, 'scroll'))
-                .pipe(operators.takeUntil(this.unsubscribe$))
-                .subscribe(function (event) {
-                _this.syncScroll(event);
-            });
-            rxjs.fromEvent(this.mainContainer, 'scroll')
-                .pipe(operators.startWith(), operators.takeUntil(this.unsubscribe$))
-                .subscribe(function (event) {
-                // if (this.mainContainer.scrollLeft > 0) {
-                //     this.side.classList.add('gantt-side-has-shadow');
-                // } else {
-                //     this.side.classList.remove('gantt-side-has-shadow');
-                // }
-            });
-        };
-        GanttDomService.prototype.syncScroll = function (event) {
-            var target = event.currentTarget;
-            this.calendarHeader.scrollLeft = this.mainContainer.scrollLeft;
-            this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
-            this.sideContainer.scrollTop = target.scrollTop;
-            this.mainContainer.scrollTop = target.scrollTop;
-        };
-        GanttDomService.prototype.disableBrowserWheelEvent = function () {
-            var container = this.mainContainer;
-            rxjs.fromEvent(container, 'wheel')
-                .pipe(operators.takeUntil(this.unsubscribe$))
-                .subscribe(function (event) {
-                var delta = event.deltaX;
-                if (!delta) {
-                    return;
-                }
-                if ((container.scrollLeft + container.offsetWidth === container.scrollWidth && delta > 0) ||
-                    (container.scrollLeft === 0 && delta < 0)) {
-                    event.preventDefault();
-                }
-            });
-        };
-        GanttDomService.prototype.initialize = function (root) {
-            this.root = root.nativeElement;
-            this.side = this.root.getElementsByClassName('gantt-side')[0];
-            this.container = this.root.getElementsByClassName('gantt-container')[0];
-            this.sideContainer = this.root.getElementsByClassName('gantt-side-container')[0];
-            this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
-            this.calendarHeader = this.root.getElementsByClassName('gantt-calendar-header')[0];
-            this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-grid')[0];
-            this.monitorScrollChange();
-            this.disableBrowserWheelEvent();
-        };
-        GanttDomService.prototype.getViewerScroll = function () {
-            var _this = this;
-            return rxjs.fromEvent(this.mainContainer, 'scroll').pipe(operators.map(function () { return _this.mainContainer.scrollLeft; }), operators.pairwise(), operators.map(function (_a) {
-                var _b = __read(_a, 2), previous = _b[0], current = _b[1];
-                var event = {
-                    target: _this.mainContainer,
-                    direction: ScrollDirection.NONE
-                };
-                if (current - previous < 0) {
-                    if (_this.mainContainer.scrollLeft < scrollThreshold && _this.mainContainer.scrollLeft > 0) {
-                        event.direction = ScrollDirection.LEFT;
-                    }
-                }
-                if (current - previous > 0) {
-                    if (_this.mainContainer.scrollWidth - _this.mainContainer.clientWidth - _this.mainContainer.scrollLeft < scrollThreshold) {
-                        event.direction = ScrollDirection.RIGHT;
-                    }
-                }
-                return event;
-            }));
-        };
-        GanttDomService.prototype.getResize = function () {
-            return rxjs.fromEvent(window, 'resize').pipe(operators.auditTime(150));
-        };
-        GanttDomService.prototype.scrollMainContainer = function (left) {
-            if (isNumber(left)) {
-                var scrollLeft = left - this.mainContainer.clientWidth / 2;
-                this.mainContainer.scrollLeft = scrollLeft > scrollThreshold ? scrollLeft : 0;
-                this.calendarHeader.scrollLeft = this.mainContainer.scrollLeft;
-                this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
+        Object.defineProperty(GanttIconComponent.prototype, "iconName", {
+            set: function (name) {
+                this.setSvg(name);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        GanttIconComponent.prototype.ngOnInit = function () { };
+        GanttIconComponent.prototype.ngAfterViewInit = function () { };
+        GanttIconComponent.prototype.setSvg = function (name) {
+            var iconSvg = icons[name];
+            if (iconSvg) {
+                this.elementRef.nativeElement.innerHTML = iconSvg;
+            }
+            else {
+                this.elementRef.nativeElement.innerHTML = '';
             }
         };
-        GanttDomService.prototype.ngOnDestroy = function () {
-            this.unsubscribe$.next();
-            this.unsubscribe$.complete();
-        };
-        return GanttDomService;
+        return GanttIconComponent;
     }());
-    GanttDomService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDomService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    GanttDomService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDomService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDomService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return []; } });
+    GanttIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttIconComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    GanttIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttIconComponent, selector: "gantt-icon", inputs: { iconName: "iconName" }, host: { properties: { "class.gantt-icon": "this.isIcon" } }, ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttIconComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'gantt-icon',
+                        template: ''
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { isIcon: [{
+                    type: i0.HostBinding,
+                    args: ['class.gantt-icon']
+                }], iconName: [{
+                    type: i0.Input
+                }] } });
 
-    var GanttDragContainer = /** @class */ (function () {
-        function GanttDragContainer() {
-            this.dragStarted = new i0.EventEmitter();
-            this.dragEnded = new i0.EventEmitter();
-            this.linkDragStarted = new i0.EventEmitter();
-            this.linkDragEntered = new i0.EventEmitter();
-            this.linkDragEnded = new i0.EventEmitter();
+    var IsGanttRangeItemPipe = /** @class */ (function () {
+        function IsGanttRangeItemPipe() {
         }
-        GanttDragContainer.prototype.emitLinkDragStarted = function (from, item) {
-            this.linkDraggingId = item.id;
-            this.linkDragFrom = from;
-            this.linkDragSource = this.linkDragFrom === 'source' ? item : null;
-            this.linkDragTarget = this.linkDragFrom === 'target' ? item : null;
-            this.linkDragStarted.emit({
-                source: this.linkDragSource && this.linkDragSource.origin,
-                target: this.linkDragTarget && this.linkDragTarget.origin
-            });
+        IsGanttRangeItemPipe.prototype.transform = function (value) {
+            return value === exports.GanttItemType.range;
         };
-        GanttDragContainer.prototype.emitLinkDragEntered = function (item) {
-            if (this.linkDragFrom === 'source') {
-                this.linkDragTarget = item;
-            }
-            else {
-                this.linkDragSource = item;
-            }
-            this.linkDragEntered.emit({
-                source: this.linkDragSource.origin,
-                target: this.linkDragTarget.origin
-            });
-        };
-        GanttDragContainer.prototype.emitLinkDragLeaved = function () {
-            if (this.linkDragFrom === 'source') {
-                this.linkDragTarget = null;
-            }
-            else {
-                this.linkDragSource = null;
-            }
+        return IsGanttRangeItemPipe;
+    }());
+    IsGanttRangeItemPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttRangeItemPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    IsGanttRangeItemPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttRangeItemPipe, name: "isGanttRangeItem" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttRangeItemPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'isGanttRangeItem'
+                    }]
+            }] });
+    var IsGanttBarItemPipe = /** @class */ (function () {
+        function IsGanttBarItemPipe() {
+        }
+        IsGanttBarItemPipe.prototype.transform = function (value) {
+            return value === exports.GanttItemType.bar;
         };
-        GanttDragContainer.prototype.emitLinkDragEnded = function () {
-            this.linkDraggingId = null;
-            if (this.linkDragSource && this.linkDragTarget) {
-                this.linkDragSource.addLink(this.linkDragTarget.id);
-                this.linkDragEnded.emit({
-                    source: this.linkDragSource.origin,
-                    target: this.linkDragTarget.origin
-                });
-            }
-            this.linkDragSource = null;
-            this.linkDragTarget = null;
+        return IsGanttBarItemPipe;
+    }());
+    IsGanttBarItemPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttBarItemPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    IsGanttBarItemPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttBarItemPipe, name: "isGanttBarItem" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttBarItemPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'isGanttBarItem'
+                    }]
+            }] });
+    var IsGanttCustomItemPipe = /** @class */ (function () {
+        function IsGanttCustomItemPipe() {
+        }
+        IsGanttCustomItemPipe.prototype.transform = function (value) {
+            return value === exports.GanttItemType.custom;
         };
-        return GanttDragContainer;
+        return IsGanttCustomItemPipe;
     }());
-    GanttDragContainer.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDragContainer, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    GanttDragContainer.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDragContainer });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDragContainer, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return []; } });
-
-    var GANTT_ABSTRACT_TOKEN = new i0.InjectionToken('gantt-abstract-token');
+    IsGanttCustomItemPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttCustomItemPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    IsGanttCustomItemPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttCustomItemPipe, name: "isGanttCustomItem" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttCustomItemPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'isGanttCustomItem'
+                    }]
+            }] });
 
     var defaultColumnWidth = 100;
     var minColumnWidth = 80;
-    var GanttTableHeaderComponent = /** @class */ (function () {
-        function GanttTableHeaderComponent(elementRef, gantt) {
-            this.elementRef = elementRef;
+    var GanttTableComponent = /** @class */ (function () {
+        function GanttTableComponent(gantt, ganttUpper, elementRef) {
             this.gantt = gantt;
-            this.tableWidth = 0;
-            this.className = "gantt-table-header gantt-table-row";
+            this.ganttUpper = ganttUpper;
+            this.elementRef = elementRef;
+            this.itemClick = new i0.EventEmitter();
+            this.ganttTableClass = true;
+            this.ganttTableEmptyClass = false;
         }
-        Object.defineProperty(GanttTableHeaderComponent.prototype, "columns", {
+        Object.defineProperty(GanttTableComponent.prototype, "columns", {
             set: function (columns) {
                 columns.forEach(function (column) {
                     if (!column.columnWidth) {
@@ -1620,20 +1668,33 @@
             enumerable: false,
             configurable: true
         });
-        GanttTableHeaderComponent.prototype.ngOnInit = function () { };
-        GanttTableHeaderComponent.prototype.ngAfterViewInit = function () {
-            this.tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
+        GanttTableComponent.prototype.ngOnInit = function () { };
+        GanttTableComponent.prototype.ngOnChanges = function (changes) {
+            var _a, _b;
+            if (!((_a = changes.groups.currentValue) === null || _a === void 0 ? void 0 : _a.length) && !((_b = changes.items.currentValue) === null || _b === void 0 ? void 0 : _b.length)) {
+                this.ganttTableEmptyClass = true;
+            }
+            else {
+                this.ganttTableEmptyClass = false;
+            }
         };
-        GanttTableHeaderComponent.prototype.dragFixed = function (config) {
+        GanttTableComponent.prototype.dragFixed = function (config) {
             if (config.movedWidth < config.minWidth) {
                 config.target.style.transform = "translate3d(" + (config.minWidth - config.originWidth) + "px, 0, 0)";
             }
         };
-        GanttTableHeaderComponent.prototype.dragStarted = function (event) {
+        GanttTableComponent.prototype.expandGroup = function (group) {
+            this.gantt.expandGroup(group);
+        };
+        GanttTableComponent.prototype.expandChildren = function (event, item) {
+            event.stopPropagation();
+            this.gantt.expandChildren(item);
+        };
+        GanttTableComponent.prototype.dragStarted = function (event) {
             var target = event.source.element.nativeElement;
             this.dragStartLeft = target.getBoundingClientRect().left;
         };
-        GanttTableHeaderComponent.prototype.dragMoved = function (event, column) {
+        GanttTableComponent.prototype.dragMoved = function (event, column) {
             var target = event.source.element.nativeElement;
             var left = target.getBoundingClientRect().left;
             var originWidth;
@@ -1657,8 +1718,7 @@
             });
             this.showAuxiliaryLine(event);
         };
-        GanttTableHeaderComponent.prototype.columnDragEnded = function (event, column) {
-            var beforeWidth = parseInt(column.columnWidth, 10);
+        GanttTableComponent.prototype.columnDragEnded = function (event, column) {
             var target = event.source.element.nativeElement;
             var left = target.getBoundingClientRect().left;
             var width = parseInt(column.columnWidth, 10) + (left - this.dragStartLeft);
@@ -1667,168 +1727,348 @@
             if (this.gantt.table) {
                 this.gantt.table.columnChanges.emit({ columns: this.columnList });
             }
-            this.tableWidth = this.tableWidth - beforeWidth + columnWidth;
             this.hideAuxiliaryLine();
             event.source.reset();
         };
-        GanttTableHeaderComponent.prototype.tableDragEnded = function (event) {
+        GanttTableComponent.prototype.tableDragEnded = function (event) {
             var target = event.source.element.nativeElement;
             var left = target.getBoundingClientRect().left;
             var tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
             var dragWidth = left - this.dragStartLeft;
-            var tempWidth = 0;
             this.columnList.forEach(function (column) {
                 var lastColumnWidth = parseInt(column.columnWidth, 10);
                 var distributeWidth = parseInt(String(dragWidth * (lastColumnWidth / tableWidth)), 10);
                 var columnWidth = Math.max(lastColumnWidth + distributeWidth || 0, minColumnWidth);
                 column.columnWidth = coercion.coerceCssPixelValue(columnWidth);
-                tempWidth += columnWidth;
             });
-            this.tableWidth = tempWidth;
             if (this.gantt.table) {
                 this.gantt.table.columnChanges.emit({ columns: this.columnList });
             }
             this.hideAuxiliaryLine();
             event.source.reset();
         };
-        GanttTableHeaderComponent.prototype.showAuxiliaryLine = function (event) {
+        GanttTableComponent.prototype.showAuxiliaryLine = function (event) {
             var tableRect = this.elementRef.nativeElement.getBoundingClientRect();
             var targetRect = event.source.element.nativeElement.getBoundingClientRect();
             var distance = { x: targetRect.left - tableRect.left, y: targetRect.top - tableRect.top };
             this.draglineElementRef.nativeElement.style.left = distance.x + "px";
             this.draglineElementRef.nativeElement.style.display = 'block';
         };
-        GanttTableHeaderComponent.prototype.hideAuxiliaryLine = function () {
+        GanttTableComponent.prototype.hideAuxiliaryLine = function () {
             this.draglineElementRef.nativeElement.style.display = 'none';
         };
-        return GanttTableHeaderComponent;
+        GanttTableComponent.prototype.trackBy = function (index, item) {
+            return item.id || index;
+        };
+        return GanttTableComponent;
     }());
-    GanttTableHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttTableHeaderComponent, deps: [{ token: i0__namespace.ElementRef }, { token: GANTT_ABSTRACT_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    GanttTableHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: { columns: "columns" }, host: { properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "draglineElementRef", first: true, predicate: ["dragLine"], descendants: true, static: true }], ngImport: i0__namespace, template: "<div\n  class=\"gantt-table-column\"\n  [class.border-right-0]=\"i === columnList.length - 1\"\n  *ngFor=\"let column of columnList; let i = index\"\n  [style.width]=\"column.columnWidth\"\n>\n  <ng-container *ngIf=\"column.headerTemplateRef; else default\" [ngTemplateOutlet]=\"column.headerTemplateRef\"></ng-container>\n  <ng-template #default>\n    {{ column.name }}\n  </ng-template>\n  <div\n    class=\"column-drag-trigger gantt-table-drag-trigger\"\n    cdkDrag\n    cdkDragLockAxis=\"x\"\n    cdkDragBoundary=\".gantt\"\n    (cdkDragMoved)=\"dragMoved($event, column)\"\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"columnDragEnded($event, column)\"\n  ></div>\n</div>\n\n<div\n  class=\"gantt-table-drag-trigger\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"dragMoved($event)\"\n  (cdkDragStarted)=\"dragStarted($event)\"\n  (cdkDragEnded)=\"tableDragEnded($event)\"\n></div>\n\n<div #dragLine class=\"gantt-table-drag-auxiliary-line\"></div>\n", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttTableHeaderComponent, decorators: [{
+    GanttTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttTableComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    GanttTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttTableComponent, selector: "gantt-table", inputs: { groups: "groups", items: "items", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.gantt-table": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass" } }, viewQueries: [{ propertyName: "draglineElementRef", first: true, predicate: ["dragLine"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"gantt-table-header gantt-table-row\">\n  <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let i = index\" [style.width]=\"column.columnWidth\">\n    <ng-container *ngIf=\"column.headerTemplateRef; else default\" [ngTemplateOutlet]=\"column.headerTemplateRef\"></ng-container>\n    <ng-template #default>\n      {{ column.name }}\n    </ng-template>\n    <div\n      class=\"gantt-table-drag-trigger\"\n      cdkDrag\n      cdkDragLockAxis=\"x\"\n      cdkDragBoundary=\".gantt\"\n      (cdkDragMoved)=\"dragMoved($event, column)\"\n      (cdkDragStarted)=\"dragStarted($event)\"\n      (cdkDragEnded)=\"columnDragEnded($event, column)\"\n    ></div>\n  </div>\n</div>\n<div class=\"gantt-table-body\">\n  <ng-container *ngIf=\"!groups.length && !items.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=\"groups && groups.length > 0; else itemsTemplate\">\n    <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [ngClass]=\"group.class\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"group.expanded\" (click)=\"expandGroup(group)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"group.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: group.origin, group: group.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ group.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"group.expanded\">\n        <ng-template\n          [ngTemplateOutlet]=\"ganttItems\"\n          [ngTemplateOutletContext]=\"{ group: group, items: group.items, level: 0 }\"\n        ></ng-template>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div\n  class=\"gantt-table-drag-trigger\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"dragMoved($event)\"\n  (cdkDragStarted)=\"dragStarted($event)\"\n  (cdkDragEnded)=\"tableDragEnded($event)\"\n></div>\n\n<div #dragLine class=\"gantt-table-drag-auxiliary-line\"></div>\n\n<ng-template #itemsTemplate>\n  <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items, level: 0 }\"></ng-template>\n</ng-template>\n\n<ng-template #ganttItems let-group=\"group\" let-items=\"items\" let-level=\"level\">\n  <ng-container *ngFor=\"let item of items; trackBy: trackBy\">\n    <div\n      (click)=\"itemClick.emit({ event: $event, selectedValue: this.item.origin })\"\n      class=\"gantt-table-item gantt-table-row\"\n      [class.gantt-table-item-first-level-group]=\"level === 0 && (item.type | isGanttRangeItem)\"\n      [class.gantt-table-item-with-group]=\"group\"\n      [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      [style.height.px]=\"gantt.styles.lineHeight\"\n      [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n    >\n      <ng-template\n        [ngTemplateOutlet]=\"rowBeforeTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n      ></ng-template>\n      <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let first = first\" [style.width]=\"column.columnWidth\">\n        <div *ngIf=\"first\" class=\"gantt-expand-icon\" [style.marginLeft.px]=\"level * 20\">\n          <ng-container *ngIf=\"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            ></gantt-icon>\n            <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n          </ng-container>\n        </div>\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-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children, level: level + 1, group: group }\"\n    ></ng-template>\n  </ng-container>\n</ng-template>\n", components: [{ type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "isGanttRangeItem": IsGanttRangeItemPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttTableComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'gantt-table-header',
-                        templateUrl: './gantt-table-header.component.html'
+                        selector: 'gantt-table',
+                        templateUrl: './gantt-table.component.html'
                     }]
             }], ctorParameters: function () {
-            return [{ type: i0__namespace.ElementRef }, { type: undefined, decorators: [{
+            return [{ type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [GANTT_ABSTRACT_TOKEN]
-                        }] }];
-        }, propDecorators: { columns: [{
+                        }] }, { type: GanttUpper, decorators: [{
+                            type: i0.Inject,
+                            args: [GANTT_UPPER_TOKEN]
+                        }] }, { type: i0__namespace.ElementRef }];
+        }, propDecorators: { groups: [{
+                    type: i0.Input
+                }], items: [{
+                    type: i0.Input
+                }], columns: [{
+                    type: i0.Input
+                }], groupTemplate: [{
+                    type: i0.Input
+                }], emptyTemplate: [{
+                    type: i0.Input
+                }], rowBeforeTemplate: [{
+                    type: i0.Input
+                }], rowAfterTemplate: [{
                     type: i0.Input
+                }], itemClick: [{
+                    type: i0.Output
                 }], draglineElementRef: [{
                     type: i0.ViewChild,
                     args: ['dragLine', { static: true }]
-                }], className: [{
+                }], ganttTableClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.gantt-table']
+                }], ganttTableEmptyClass: [{
                     type: i0.HostBinding,
-                    args: ['class']
+                    args: ['class.gantt-table-empty']
                 }] } });
 
-    var GanttPrintService = /** @class */ (function () {
-        function GanttPrintService() {
+    var scrollThreshold = 50;
+    var ScrollDirection;
+    (function (ScrollDirection) {
+        ScrollDirection[ScrollDirection["NONE"] = 0] = "NONE";
+        ScrollDirection[ScrollDirection["LEFT"] = 1] = "LEFT";
+        ScrollDirection[ScrollDirection["RIGHT"] = 2] = "RIGHT";
+    })(ScrollDirection || (ScrollDirection = {}));
+    var GanttDomService = /** @class */ (function () {
+        function GanttDomService() {
+            this.unsubscribe$ = new rxjs.Subject();
         }
-        GanttPrintService.prototype.setInlineStyles = function (targetElem) {
-            var e_1, _a;
-            var svgElements = Array.from(targetElem.getElementsByTagName('svg'));
-            try {
-                for (var svgElements_1 = __values(svgElements), svgElements_1_1 = svgElements_1.next(); !svgElements_1_1.done; svgElements_1_1 = svgElements_1.next()) {
-                    var svgElement = svgElements_1_1.value;
-                    this.recursElementChildren(svgElement);
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (svgElements_1_1 && !svgElements_1_1.done && (_a = svgElements_1.return)) _a.call(svgElements_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
+        GanttDomService.prototype.monitorScrollChange = function () {
+            var _this = this;
+            rxjs.merge(rxjs.fromEvent(this.mainContainer, 'scroll'), rxjs.fromEvent(this.sideContainer, 'scroll'))
+                .pipe(operators.takeUntil(this.unsubscribe$))
+                .subscribe(function (event) {
+                _this.syncScroll(event);
+            });
+            rxjs.fromEvent(this.mainContainer, 'scroll')
+                .pipe(operators.startWith(), operators.takeUntil(this.unsubscribe$))
+                .subscribe(function (event) {
+                // if (this.mainContainer.scrollLeft > 0) {
+                //     this.side.classList.add('gantt-side-has-shadow');
+                // } else {
+                //     this.side.classList.remove('gantt-side-has-shadow');
+                // }
+            });
         };
-        GanttPrintService.prototype.recursElementChildren = function (node) {
-            var e_2, _a, e_3, _b;
-            var transformProperties = [
-                'fill',
-                'color',
-                'font-size',
-                'stroke',
-                'font',
-                'text-anchor',
-                'stroke-dasharray',
-                'shape-rendering',
-                'stroke-width'
-            ];
-            if (!node.style) {
-                return;
-            }
-            var styles = getComputedStyle(node);
-            try {
-                for (var transformProperties_1 = __values(transformProperties), transformProperties_1_1 = transformProperties_1.next(); !transformProperties_1_1.done; transformProperties_1_1 = transformProperties_1.next()) {
-                    var transformProperty = transformProperties_1_1.value;
-                    node.style[transformProperty] = styles[transformProperty];
-                }
-            }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
-            finally {
-                try {
-                    if (transformProperties_1_1 && !transformProperties_1_1.done && (_a = transformProperties_1.return)) _a.call(transformProperties_1);
-                }
-                finally { if (e_2) throw e_2.error; }
-            }
-            try {
-                for (var _c = __values(Array.from(node.childNodes)), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var child = _d.value;
-                    this.recursElementChildren(child);
+        GanttDomService.prototype.syncScroll = function (event) {
+            var target = event.currentTarget;
+            this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
+            this.sideContainer.scrollTop = target.scrollTop;
+            this.mainContainer.scrollTop = target.scrollTop;
+        };
+        GanttDomService.prototype.disableBrowserWheelEvent = function () {
+            var container = this.mainContainer;
+            rxjs.fromEvent(container, 'wheel')
+                .pipe(operators.takeUntil(this.unsubscribe$))
+                .subscribe(function (event) {
+                var delta = event.deltaX;
+                if (!delta) {
+                    return;
                 }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                if ((container.scrollLeft + container.offsetWidth === container.scrollWidth && delta > 0) ||
+                    (container.scrollLeft === 0 && delta < 0)) {
+                    event.preventDefault();
                 }
-                finally { if (e_3) throw e_3.error; }
-            }
+            });
         };
-        GanttPrintService.prototype.register = function (root) {
+        GanttDomService.prototype.initialize = function (root) {
             this.root = root.nativeElement;
+            this.side = this.root.getElementsByClassName('gantt-side')[0];
+            this.container = this.root.getElementsByClassName('gantt-container')[0];
+            this.sideContainer = this.root.getElementsByClassName('gantt-side-container')[0];
             this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
+            this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-overlay')[0];
+            this.monitorScrollChange();
+            this.disableBrowserWheelEvent();
         };
-        GanttPrintService.prototype.print = function (name, ignoreElementClass) {
+        GanttDomService.prototype.getViewerScroll = function () {
             var _this = this;
-            if (name === void 0) { name = 'download'; }
-            var root = this.root;
-            var mainContainer = this.mainContainer;
-            // set print width
-            var printWidth = root.offsetWidth;
-            // set print height
-            var printHeight = root.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
-            html2canvas__default['default'](root, {
-                logging: false,
-                allowTaint: true,
-                useCORS: true,
-                width: printWidth,
-                height: printHeight,
-                ignoreElements: function (element) {
-                    if (ignoreElementClass && element.classList.contains(ignoreElementClass)) {
-                        return true;
+            return rxjs.fromEvent(this.mainContainer, 'scroll').pipe(operators.map(function () { return _this.mainContainer.scrollLeft; }), operators.pairwise(), operators.map(function (_a) {
+                var _b = __read(_a, 2), previous = _b[0], current = _b[1];
+                var event = {
+                    target: _this.mainContainer,
+                    direction: ScrollDirection.NONE
+                };
+                if (current - previous < 0) {
+                    if (_this.mainContainer.scrollLeft < scrollThreshold && _this.mainContainer.scrollLeft > 0) {
+                        event.direction = ScrollDirection.LEFT;
                     }
-                    if (element.classList.contains('gantt-calendar-today-overlay')) {
-                        return true;
+                }
+                if (current - previous > 0) {
+                    if (_this.mainContainer.scrollWidth - _this.mainContainer.clientWidth - _this.mainContainer.scrollLeft < scrollThreshold) {
+                        event.direction = ScrollDirection.RIGHT;
                     }
-                },
-                onclone: function (cloneDocument) {
-                    var ganttClass = root.className;
-                    var cloneGanttDom = cloneDocument.querySelector("." + ganttClass.replace(/\s+/g, '.'));
-                    var cloneGanttContainerDom = cloneDocument.querySelector('.gantt-container');
-                    var cloneCalendarOverlay = cloneDocument.querySelector('.gantt-calendar-grid-main');
-                    var cloneLinksOverlay = cloneDocument.querySelector('.gantt-links-overlay-main');
-                    // change targetDom width
-                    cloneGanttDom.style.width = printWidth + "px";
-                    cloneGanttDom.style.height = printHeight + "px";
-                    cloneGanttDom.style.overflow = "unset";
-                    cloneGanttContainerDom.style.backgroundColor = '#fff';
-                    cloneCalendarOverlay.setAttribute('height', "" + printHeight);
+                }
+                return event;
+            }));
+        };
+        GanttDomService.prototype.getResize = function () {
+            return rxjs.fromEvent(window, 'resize').pipe(operators.auditTime(150));
+        };
+        GanttDomService.prototype.scrollMainContainer = function (left) {
+            if (isNumber(left)) {
+                var scrollLeft = left - this.mainContainer.clientWidth / 2;
+                this.mainContainer.scrollLeft = scrollLeft > scrollThreshold ? scrollLeft : 0;
+                this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
+            }
+        };
+        GanttDomService.prototype.ngOnDestroy = function () {
+            this.unsubscribe$.next();
+            this.unsubscribe$.complete();
+        };
+        return GanttDomService;
+    }());
+    GanttDomService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDomService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    GanttDomService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDomService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDomService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return []; } });
+
+    var GanttDragContainer = /** @class */ (function () {
+        function GanttDragContainer() {
+            this.dragStarted = new i0.EventEmitter();
+            this.dragMoved = new i0.EventEmitter();
+            this.dragEnded = new i0.EventEmitter();
+            this.linkDragStarted = new i0.EventEmitter();
+            this.linkDragEntered = new i0.EventEmitter();
+            this.linkDragEnded = new i0.EventEmitter();
+        }
+        GanttDragContainer.prototype.emitLinkDragStarted = function (from, item) {
+            this.linkDraggingId = item.id;
+            this.linkDragFrom = from;
+            this.linkDragSource = this.linkDragFrom === 'source' ? item : null;
+            this.linkDragTarget = this.linkDragFrom === 'target' ? item : null;
+            this.linkDragStarted.emit({
+                source: this.linkDragSource && this.linkDragSource.origin,
+                target: this.linkDragTarget && this.linkDragTarget.origin
+            });
+        };
+        GanttDragContainer.prototype.emitLinkDragEntered = function (item) {
+            if (this.linkDragFrom === 'source') {
+                this.linkDragTarget = item;
+            }
+            else {
+                this.linkDragSource = item;
+            }
+            this.linkDragEntered.emit({
+                source: this.linkDragSource.origin,
+                target: this.linkDragTarget.origin
+            });
+        };
+        GanttDragContainer.prototype.emitLinkDragLeaved = function () {
+            if (this.linkDragFrom === 'source') {
+                this.linkDragTarget = null;
+            }
+            else {
+                this.linkDragSource = null;
+            }
+        };
+        GanttDragContainer.prototype.emitLinkDragEnded = function () {
+            this.linkDraggingId = null;
+            if (this.linkDragSource && this.linkDragTarget) {
+                this.linkDragSource.addLink(this.linkDragTarget.id);
+                this.linkDragEnded.emit({
+                    source: this.linkDragSource.origin,
+                    target: this.linkDragTarget.origin
+                });
+            }
+            this.linkDragSource = null;
+            this.linkDragTarget = null;
+        };
+        return GanttDragContainer;
+    }());
+    GanttDragContainer.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDragContainer, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    GanttDragContainer.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDragContainer });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDragContainer, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return []; } });
+
+    var GanttPrintService = /** @class */ (function () {
+        function GanttPrintService() {
+        }
+        GanttPrintService.prototype.setInlineStyles = function (targetElem) {
+            var e_1, _a;
+            var svgElements = Array.from(targetElem.getElementsByTagName('svg'));
+            try {
+                for (var svgElements_1 = __values(svgElements), svgElements_1_1 = svgElements_1.next(); !svgElements_1_1.done; svgElements_1_1 = svgElements_1.next()) {
+                    var svgElement = svgElements_1_1.value;
+                    this.recursElementChildren(svgElement);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (svgElements_1_1 && !svgElements_1_1.done && (_a = svgElements_1.return)) _a.call(svgElements_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        GanttPrintService.prototype.recursElementChildren = function (node) {
+            var e_2, _a, e_3, _b;
+            var transformProperties = [
+                'fill',
+                'color',
+                'font-size',
+                'stroke',
+                'font',
+                'text-anchor',
+                'stroke-dasharray',
+                'shape-rendering',
+                'stroke-width'
+            ];
+            if (!node.style) {
+                return;
+            }
+            var styles = getComputedStyle(node);
+            try {
+                for (var transformProperties_1 = __values(transformProperties), transformProperties_1_1 = transformProperties_1.next(); !transformProperties_1_1.done; transformProperties_1_1 = transformProperties_1.next()) {
+                    var transformProperty = transformProperties_1_1.value;
+                    node.style[transformProperty] = styles[transformProperty];
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (transformProperties_1_1 && !transformProperties_1_1.done && (_a = transformProperties_1.return)) _a.call(transformProperties_1);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            try {
+                for (var _c = __values(Array.from(node.childNodes)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var child = _d.value;
+                    this.recursElementChildren(child);
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+        };
+        GanttPrintService.prototype.register = function (root) {
+            this.root = root.nativeElement;
+            this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
+        };
+        GanttPrintService.prototype.print = function (name, ignoreElementClass) {
+            var _this = this;
+            if (name === void 0) { name = 'download'; }
+            var root = this.root;
+            var mainContainer = this.mainContainer;
+            // set print width
+            var printWidth = root.offsetWidth;
+            // set print height
+            var printHeight = root.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
+            html2canvas__default['default'](root, {
+                logging: false,
+                allowTaint: true,
+                useCORS: true,
+                width: printWidth,
+                height: printHeight,
+                ignoreElements: function (element) {
+                    if (ignoreElementClass && element.classList.contains(ignoreElementClass)) {
+                        return true;
+                    }
+                    if (element.classList.contains('gantt-calendar-today-overlay')) {
+                        return true;
+                    }
+                },
+                onclone: function (cloneDocument) {
+                    var ganttClass = root.className;
+                    var cloneGanttDom = cloneDocument.querySelector("." + ganttClass.replace(/\s+/g, '.'));
+                    var cloneGanttContainerDom = cloneDocument.querySelector('.gantt-container');
+                    var cloneCalendarOverlay = cloneDocument.querySelector('.gantt-calendar-overlay-main');
+                    var cloneLinksOverlay = cloneDocument.querySelector('.gantt-links-overlay-main');
+                    // change targetDom width
+                    cloneGanttDom.style.width = printWidth + "px";
+                    cloneGanttDom.style.height = printHeight + "px";
+                    cloneGanttDom.style.overflow = "unset";
+                    cloneGanttContainerDom.style.backgroundColor = '#fff';
+                    cloneCalendarOverlay.setAttribute('height', "" + printHeight);
                     cloneCalendarOverlay.setAttribute('style', "background: transparent");
                     if (cloneLinksOverlay) {
                         cloneLinksOverlay.setAttribute('height', "" + printHeight);
@@ -1853,62 +2093,78 @@
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
-    var GanttCalendarHeaderComponent = /** @class */ (function () {
-        function GanttCalendarHeaderComponent(ganttUpper, ngZone, elementRef) {
+    var mainHeight = 5000;
+    var GanttCalendarComponent = /** @class */ (function () {
+        function GanttCalendarComponent(ganttUpper, ngZone, elementRef) {
             this.ganttUpper = ganttUpper;
             this.ngZone = ngZone;
             this.elementRef = elementRef;
             this.unsubscribe$ = new rxjs.Subject();
             this.headerHeight = headerHeight;
+            this.mainHeight = mainHeight;
+            this.todayHeight = todayHeight;
+            this.todayWidth = todayWidth;
+            this.todayBorderRadius = todayBorderRadius;
             this.viewTypes = exports.GanttViewType;
-            this.className = "gantt-calendar gantt-calendar-header";
+            this.className = true;
         }
-        Object.defineProperty(GanttCalendarHeaderComponent.prototype, "view", {
+        Object.defineProperty(GanttCalendarComponent.prototype, "view", {
             get: function () {
                 return this.ganttUpper.view;
             },
             enumerable: false,
             configurable: true
         });
-        GanttCalendarHeaderComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.ngZone.onStable.pipe(operators.take(1)).subscribe(function () {
-                rxjs.merge(_this.ganttUpper.viewChange, _this.ganttUpper.view.start$)
-                    .pipe(operators.takeUntil(_this.unsubscribe$))
-                    .subscribe(function () {
-                    if (_this.ganttUpper.viewType === exports.GanttViewType.day)
-                        _this.setTodayPoint();
-                });
-            });
-        };
-        GanttCalendarHeaderComponent.prototype.setTodayPoint = function () {
+        GanttCalendarComponent.prototype.setTodayPoint = function () {
             var x = this.view.getTodayXPoint();
             var today = new GanttDate().getDate();
             var todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
             var rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0];
+            var line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0];
             if (isNumber(x)) {
                 if (rect) {
                     rect.style.left = x - todayWidth / 2 + "px";
                     rect.style.top = headerHeight - todayHeight + "px";
                     rect.innerHTML = today.toString();
                 }
+                if (line) {
+                    line.style.left = x + "px";
+                    line.style.top = headerHeight + "px";
+                    line.style.bottom = -mainHeight + "px";
+                }
             }
             else {
                 todayEle.style.display = 'none';
             }
         };
-        GanttCalendarHeaderComponent.prototype.trackBy = function (point, index) {
+        GanttCalendarComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.ngZone.onStable.pipe(operators.take(1)).subscribe(function () {
+                rxjs.merge(_this.ganttUpper.viewChange, _this.ganttUpper.view.start$)
+                    .pipe(operators.takeUntil(_this.unsubscribe$))
+                    .subscribe(function () {
+                    _this.setTodayPoint();
+                });
+            });
+        };
+        GanttCalendarComponent.prototype.ngAfterViewInit = function () { };
+        GanttCalendarComponent.prototype.ngOnChanges = function (changes) { };
+        GanttCalendarComponent.prototype.trackBy = function (index, point) {
             return point.text || index;
         };
-        return GanttCalendarHeaderComponent;
+        GanttCalendarComponent.prototype.ngOnDestroy = function () {
+            this.unsubscribe$.next();
+            this.unsubscribe$.complete();
+        };
+        return GanttCalendarComponent;
     }());
-    GanttCalendarHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttCalendarHeaderComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0__namespace.NgZone }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    GanttCalendarHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header", host: { properties: { "class": "this.className" } }, ngImport: i0__namespace, 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 class=\"primary-text\" *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\" [attr.x]=\"point.x\" [attr.y]=\"point.y\">\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text class=\"secondary-text\" [class.secondary-text-weekend]=\"point.additions?.isWeekend\" [attr.x]=\"point.x\" [attr.y]=\"point.y\">\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", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttCalendarHeaderComponent, decorators: [{
+    GanttCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttCalendarComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0__namespace.NgZone }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    GanttCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttCalendarComponent, selector: "gantt-calendar-overlay", host: { properties: { "class.gantt-calendar-overlay": "this.className" } }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-overlay-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text class=\"primary-text\" *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\" [attr.x]=\"point.x\" [attr.y]=\"point.y\">\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text class=\"secondary-text\" [class.secondary-text-weekend]=\"point.additions?.isWeekend\" [attr.x]=\"point.x\" [attr.y]=\"point.y\">\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]=\"mainHeight\"\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  <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]=\"headerHeight\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\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", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttCalendarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'gantt-calendar-header',
-                        templateUrl: './calendar-header.component.html'
+                        selector: 'gantt-calendar-overlay',
+                        templateUrl: './calendar.component.html'
                     }]
             }], ctorParameters: function () {
             return [{ type: GanttUpper, decorators: [{
@@ -1917,256 +2173,146 @@
                         }] }, { type: i0__namespace.NgZone }, { type: i0__namespace.ElementRef }];
         }, propDecorators: { className: [{
                     type: i0.HostBinding,
-                    args: ['class']
-                }] } });
-
-    var angleRight = "<svg xmlns=\"http://www.w3.org/2000/svg\" fit=\"\"  preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\"><g id=\"amnavigation/angle-right\" stroke-width=\"1\" fill-rule=\"evenodd\"><path d=\"M7.978 11.498l-.005.005L2.3 5.831 3.13 5l4.848 4.848L12.826 5l.83.831-5.673 5.672-.005-.005z\"   transform=\"rotate(-90 7.978 8.252)\"></path></g></svg>";
-    var angleDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" fit=\"\"  preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\"><g id=\"aknavigation/angle-down\" stroke-width=\"1\" fill-rule=\"evenodd\"><path d=\"M7.978 11.997l-.005.006L2.3 6.33l.83-.831 4.848 4.848L12.826 5.5l.83.83-5.673 5.673-.005-.006z\" ></path></g></svg>";
-    var plusSquare = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\" fit=\"\"   preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\"><g id=\"kxaction/plus-square\" stroke-width=\"1\" fill-rule=\"evenodd\"><path d=\"M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm5.45 6.2V4.75h1.2V7.4h2.65v1.2H8.65v2.65h-1.2V8.6H4.8V7.4h2.65z\"></path></g></svg>";
-    var minusSquare = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\" fit=\"\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\"><g id=\"jnaction/minus-square\" stroke-width=\"1\" fill-rule=\"evenodd\"><path d=\"M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm2.8 6.2h6.5v1.2H4.8V7.4z\"></path></g></svg>";
-    var loadingIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"  viewBox=\"0 0 50 50\" style=\"enable-background:new 0 0 50 50\" xml:space=\"preserve\">\n<path fill=\"#aaa\" d=\"M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z\" transform=\"rotate(275.098 25 25)\">\n    <animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.6s\" repeatCount=\"indefinite\"></animateTransform>\n</path>\n</svg>";
-    var emptyIcon = "<svg\nwidth=\"148px\"\nheight=\"134px\"\nviewBox=\"0 0 148 134\"\nversion=\"1.1\"\nxmlns=\"http://www.w3.org/2000/svg\"\nxmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n<defs>\n  <filter x=\"0.0%\" y=\"0.0%\" width=\"100.0%\" height=\"100.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-1\">\n    <feGaussianBlur stdDeviation=\"0\" in=\"SourceGraphic\"></feGaussianBlur>\n  </filter>\n</defs>\n<g id=\"148x134\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n  <g id=\"\u7F16\u7EC4-6\" transform=\"translate(1.000000, 1.000000)\">\n    <ellipse\n      id=\"\u692D\u5706\u5F62\"\n      fill=\"#EDEEF2\"\n      opacity=\"0.3\"\n      filter=\"url(#filter-1)\"\n      cx=\"73.0800017\"\n      cy=\"115.920003\"\n      rx=\"73.0800017\"\n      ry=\"16.8000004\"\n    ></ellipse>\n    <g id=\"\u7F16\u7EC4-5\" transform=\"translate(15.120000, 0.000000)\">\n      <polygon\n        id=\"\u77E9\u5F62\"\n        fill=\"#E2E4E9\"\n        points=\"19.2789848 49.5600011 99.1200023 48.7200011 117.600003 75.9297673 117.600003 92.313049 0 92.313049 0 75.0356267\"\n      ></polygon>\n      <path\n        d=\"M23.5200005,0 L94.0800002,0 C97.7913538,2.06413823e-16 100.8,3.00864655 100.8,6.72000015 L100.8,99.1200023 L100.8,99.1200023 L16.8000004,99.1200023 L16.8000004,6.72000015 C16.8000004,3.00864655 19.8086469,1.56994302e-15 23.5200005,0 Z\"\n        id=\"\u77E9\u5F62\"\n        fill=\"#F9FAFB\"\n      ></path>\n      <path\n        d=\"M30.9200007,12.4400003 L86.6800019,12.4400003 C88.5356787,12.4400003 90.040002,13.9443236 90.040002,15.8000004 L90.040002,42.000001 C90.040002,43.8556778 88.5356787,45.360001 86.6800019,45.360001 L30.9200007,45.360001 C29.0643239,45.360001 27.5600006,43.8556778 27.5600006,42.000001 L27.5600006,15.8000004 C27.5600006,13.9443236 29.0643239,12.4400003 30.9200007,12.4400003 Z\"\n        id=\"\u77E9\u5F62\"\n        fill=\"#E8EAEE\"\n      ></path>\n      <text\n        id=\"&lt;/null&gt;\"\n        font-family=\"PingFangSC-Medium, PingFang SC\"\n        font-size=\"15.1200003\"\n        font-weight=\"400\"\n        fill=\"#BCBECD\"\n      >\n        <tspan x=\"33.6000008\" y=\"32.8000004\">&lt;/null&gt;</tspan>\n      </text>\n      <rect id=\"\u77E9\u5F62\" fill=\"#E8EAEE\" x=\"27.5600006\" y=\"52.0800012\" width=\"61.4800014\" height=\"5.04000011\" rx=\"2.52000006\"></rect>\n      <rect\n        id=\"\u77E9\u5F62\u5907\u4EFD\"\n        fill=\"#E8EAEE\"\n        x=\"27.5600006\"\n        y=\"63.8400014\"\n        width=\"61.4800014\"\n        height=\"5.04000011\"\n        rx=\"2.52000006\"\n      ></rect>\n      <path\n        d=\"M0,75.6000017 L29.280235,75.6000017 C32.0637502,75.6000017 34.3202352,77.8564866 34.3202352,80.6400018 L34.3202352,86.2591426 C34.3202352,89.0426578 36.5767201,91.2991427 39.3602353,91.2991427 L78.4136737,91.2991427 C81.1971889,91.2991427 83.4536738,89.0426578 83.4536738,86.2591426 L83.4536738,80.6400018 C83.4536738,77.8564866 85.7101587,75.6000017 88.4936739,75.6000017 L117.600003,75.6000017 L117.600003,75.6000017 L117.600003,110.880003 C117.600003,115.519195 113.839194,119.280003 109.200002,119.280003 L8.40000019,119.280003 C3.76080819,119.280003 -6.53729019e-15,115.519195 0,110.880003 L0,75.6000017 L0,75.6000017 Z\"\n        id=\"\u77E9\u5F62\"\n        fill=\"#EDEFF2\"\n      ></path>\n    </g>\n  </g>\n</g>\n</svg>";
-    var icons = {
-        'angle-right': angleRight,
-        'angle-down': angleDown,
-        'plus-square': plusSquare,
-        'minus-square': minusSquare,
-        loading: loadingIcon,
-        empty: emptyIcon
-    };
-
-    var GanttIconComponent = /** @class */ (function () {
-        function GanttIconComponent(elementRef) {
-            this.elementRef = elementRef;
-            this.isIcon = true;
-        }
-        Object.defineProperty(GanttIconComponent.prototype, "iconName", {
-            set: function (name) {
-                this.setSvg(name);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        GanttIconComponent.prototype.ngOnInit = function () { };
-        GanttIconComponent.prototype.ngAfterViewInit = function () { };
-        GanttIconComponent.prototype.setSvg = function (name) {
-            var iconSvg = icons[name];
-            if (iconSvg) {
-                this.elementRef.nativeElement.innerHTML = iconSvg;
-            }
-            else {
-                this.elementRef.nativeElement.innerHTML = '';
-            }
-        };
-        return GanttIconComponent;
-    }());
-    GanttIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttIconComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    GanttIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttIconComponent, selector: "gantt-icon", inputs: { iconName: "iconName" }, host: { properties: { "class.gantt-icon": "this.isIcon" } }, ngImport: i0__namespace, template: '', isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttIconComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'gantt-icon',
-                        template: ''
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { isIcon: [{
-                    type: i0.HostBinding,
-                    args: ['class.gantt-icon']
-                }], iconName: [{
-                    type: i0.Input
+                    args: ['class.gantt-calendar-overlay']
                 }] } });
 
-    var IsGanttRangeItemPipe = /** @class */ (function () {
-        function IsGanttRangeItemPipe() {
-        }
-        IsGanttRangeItemPipe.prototype.transform = function (value) {
-            return value === exports.GanttItemType.range;
-        };
-        return IsGanttRangeItemPipe;
-    }());
-    IsGanttRangeItemPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttRangeItemPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    IsGanttRangeItemPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttRangeItemPipe, name: "isGanttRangeItem" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttRangeItemPipe, decorators: [{
-                type: i0.Pipe,
-                args: [{
-                        name: 'isGanttRangeItem'
-                    }]
-            }] });
-    var IsGanttBarItemPipe = /** @class */ (function () {
-        function IsGanttBarItemPipe() {
-        }
-        IsGanttBarItemPipe.prototype.transform = function (value) {
-            return value === exports.GanttItemType.bar;
-        };
-        return IsGanttBarItemPipe;
-    }());
-    IsGanttBarItemPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttBarItemPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    IsGanttBarItemPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttBarItemPipe, name: "isGanttBarItem" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttBarItemPipe, decorators: [{
-                type: i0.Pipe,
-                args: [{
-                        name: 'isGanttBarItem'
-                    }]
-            }] });
-    var IsGanttCustomItemPipe = /** @class */ (function () {
-        function IsGanttCustomItemPipe() {
-        }
-        IsGanttCustomItemPipe.prototype.transform = function (value) {
-            return value === exports.GanttItemType.custom;
-        };
-        return IsGanttCustomItemPipe;
-    }());
-    IsGanttCustomItemPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttCustomItemPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    IsGanttCustomItemPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttCustomItemPipe, name: "isGanttCustomItem" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: IsGanttCustomItemPipe, decorators: [{
-                type: i0.Pipe,
-                args: [{
-                        name: 'isGanttCustomItem'
-                    }]
-            }] });
-
-    var GanttTableBodyComponent = /** @class */ (function () {
-        function GanttTableBodyComponent(gantt) {
-            this.gantt = gantt;
-            this.ganttTableClass = true;
-            this.ganttTableEmptyClass = false;
+    var GanttDragBackdropComponent = /** @class */ (function () {
+        function GanttDragBackdropComponent() {
+            this.backdropClass = true;
         }
-        Object.defineProperty(GanttTableBodyComponent.prototype, "tempData", {
-            set: function (data) {
-                var 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.flatData = data;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GanttTableBodyComponent.prototype, "columns", {
-            set: function (columns) {
-                columns.forEach(function (column) {
-                    if (!column.columnWidth) {
-                        column.columnWidth = coercion.coerceCssPixelValue(defaultColumnWidth);
-                    }
-                });
-                this.columnList = columns;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        GanttTableBodyComponent.prototype.ngOnInit = function () { };
-        GanttTableBodyComponent.prototype.expandGroup = function (group) {
-            this.gantt.expandGroup(group);
-        };
-        GanttTableBodyComponent.prototype.expandChildren = function (item) {
-            this.gantt.expandChildren(item);
-        };
-        GanttTableBodyComponent.prototype.trackBy = function (item, index) {
-            return item.id || index;
-        };
-        return GanttTableBodyComponent;
+        GanttDragBackdropComponent.prototype.ngOnInit = function () { };
+        return GanttDragBackdropComponent;
     }());
-    GanttTableBodyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttTableBodyComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    GanttTableBodyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: { tempData: "tempData", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate" }, host: { properties: { "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass" } }, ngImport: i0__namespace, template: "<div class=\"gantt-table-body-container\">\n  <ng-container *ngIf=\"!flatData?.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=\"flatData && flatData.length > 0\">\n    <ng-container *ngFor=\"let data of flatData; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"data.expanded\" (click)=\"expandGroup(data)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"data.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: data.origin, group: data.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ data.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!data.items\"\n        class=\"gantt-table-item gantt-table-row\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"data.level === 0 && (data.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n      >\n        <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let first = first\" [style.width]=\"column.columnWidth\">\n          <div *ngIf=\"first\" class=\"gantt-expand-icon\" [style.marginLeft.px]=\"data.level * 20\">\n            <ng-container *ngIf=\"data.level < gantt.maxLevel - 1 && data.expandable\">\n              <gantt-icon\n                *ngIf=\"!data.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"data.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren(data)\"\n              ></gantt-icon>\n              <gantt-icon *ngIf=\"data.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: data.origin, item: data.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n", components: [{ type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "isGanttRangeItem": IsGanttRangeItemPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttTableBodyComponent, decorators: [{
+    GanttDragBackdropComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDragBackdropComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    GanttDragBackdropComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop", host: { properties: { "class.gantt-drag-backdrop": "this.backdropClass" } }, ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDragBackdropComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'gantt-table-body',
-                        templateUrl: './gantt-table-body.component.html'
+                        selector: 'gantt-drag-backdrop',
+                        templateUrl: "./drag-backdrop.component.html"
                     }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [GANTT_ABSTRACT_TOKEN]
-                        }] }];
-        }, propDecorators: { tempData: [{
-                    type: i0.Input
-                }], columns: [{
-                    type: i0.Input
-                }], groupTemplate: [{
-                    type: i0.Input
-                }], emptyTemplate: [{
-                    type: i0.Input
-                }], ganttTableClass: [{
-                    type: i0.HostBinding,
-                    args: ['class.gantt-table-body']
-                }], ganttTableEmptyClass: [{
+            }], ctorParameters: function () { return []; }, propDecorators: { backdropClass: [{
                     type: i0.HostBinding,
-                    args: ['class.gantt-table-empty']
+                    args: ['class.gantt-drag-backdrop']
                 }] } });
 
-    var mainHeight = 5000;
-    var GanttCalendarGridComponent = /** @class */ (function () {
-        function GanttCalendarGridComponent(ganttUpper, ngZone, elementRef) {
-            this.ganttUpper = ganttUpper;
-            this.ngZone = ngZone;
+    var NgxGanttRootComponent = /** @class */ (function () {
+        function NgxGanttRootComponent(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.ganttClass = true;
             this.unsubscribe$ = new rxjs.Subject();
-            this.headerHeight = headerHeight;
-            this.mainHeight = mainHeight;
-            this.todayBorderRadius = todayBorderRadius;
-            this.viewTypes = exports.GanttViewType;
-            this.className = "gantt-calendar gantt-calendar-grid";
+            this.ganttUpper.dragContainer = dragContainer;
         }
-        Object.defineProperty(GanttCalendarGridComponent.prototype, "view", {
+        Object.defineProperty(NgxGanttRootComponent.prototype, "view", {
             get: function () {
                 return this.ganttUpper.view;
             },
             enumerable: false,
             configurable: true
         });
-        GanttCalendarGridComponent.prototype.setTodayPoint = function () {
-            var x = this.view.getTodayXPoint();
-            var todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
-            var 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";
+        NgxGanttRootComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.ngZone.onStable.pipe(operators.take(1)).subscribe(function () {
+                _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(operators.startWith(null)).subscribe(function () {
+                    _this.scrollToToday();
+                });
+            });
+        };
+        NgxGanttRootComponent.prototype.setupViewScroll = function () {
+            var _this = this;
+            if (this.ganttUpper.disabledLoadOnScroll) {
+                return;
             }
-            else {
-                todayEle.style.display = 'none';
-            }
+            this.dom
+                .getViewerScroll()
+                .pipe(operators.takeUntil(this.unsubscribe$))
+                .subscribe(function (event) {
+                if (event.direction === ScrollDirection.LEFT) {
+                    var dates_1 = _this.view.addStartDate();
+                    if (dates_1) {
+                        event.target.scrollLeft += _this.view.getDateRangeWidth(dates_1.start, dates_1.end);
+                        _this.ngZone.run(function () {
+                            _this.ganttUpper.loadOnScroll.emit({ start: dates_1.start.getUnixTime(), end: dates_1.end.getUnixTime() });
+                        });
+                    }
+                }
+                if (event.direction === ScrollDirection.RIGHT) {
+                    var dates_2 = _this.view.addEndDate();
+                    if (dates_2) {
+                        _this.ngZone.run(function () {
+                            _this.ganttUpper.loadOnScroll.emit({ start: dates_2.start.getUnixTime(), end: dates_2.end.getUnixTime() });
+                        });
+                    }
+                }
+            });
         };
-        GanttCalendarGridComponent.prototype.ngOnInit = function () {
+        NgxGanttRootComponent.prototype.setupResize = function () {
             var _this = this;
-            this.ngZone.onStable.pipe(operators.take(1)).subscribe(function () {
-                rxjs.merge(_this.ganttUpper.viewChange, _this.ganttUpper.view.start$)
-                    .pipe(operators.takeUntil(_this.unsubscribe$))
-                    .subscribe(function () {
-                    _this.setTodayPoint();
-                });
+            this.dom
+                .getResize()
+                .pipe(operators.takeUntil(this.unsubscribe$))
+                .subscribe(function () {
+                _this.setupScrollClass();
             });
         };
-        GanttCalendarGridComponent.prototype.ngAfterViewInit = function () { };
-        GanttCalendarGridComponent.prototype.ngOnChanges = function (changes) { };
-        GanttCalendarGridComponent.prototype.trackBy = function (point, index) {
-            return point.text || index;
+        NgxGanttRootComponent.prototype.setupScrollClass = function () {
+            var mainContainer = this.dom.mainContainer;
+            var height = mainContainer.offsetHeight;
+            var scrollHeight = mainContainer.scrollHeight;
+            if (scrollHeight > height) {
+                this.elementRef.nativeElement.className = 'gantt gantt-scroll';
+            }
+            else {
+                this.elementRef.nativeElement.className = 'gantt';
+            }
         };
-        GanttCalendarGridComponent.prototype.ngOnDestroy = function () {
-            this.unsubscribe$.next();
-            this.unsubscribe$.complete();
+        NgxGanttRootComponent.prototype.scrollToToday = function () {
+            var x = this.view.getTodayXPoint();
+            this.dom.scrollMainContainer(x);
         };
-        return GanttCalendarGridComponent;
+        return NgxGanttRootComponent;
     }());
-    GanttCalendarGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttCalendarGridComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0__namespace.NgZone }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    GanttCalendarGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid", host: { properties: { "class": "this.className" } }, usesOnChanges: true, ngImport: i0__namespace, 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", directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttCalendarGridComponent, decorators: [{
+    NgxGanttRootComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttRootComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: GanttDomService }, { token: GanttDragContainer }, { token: GANTT_UPPER_TOKEN }, { token: GanttPrintService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NgxGanttRootComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { properties: { "class.gantt": "this.ganttClass" } }, providers: [GanttDomService, GanttDragContainer], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], ngImport: i0__namespace, template: "<div class=\"gantt-side\" [style.width.px]=\"sideWidth\">\n  <div class=\"gantt-side-container\">\n    <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n  </div>\n</div>\n<div class=\"gantt-container\">\n  <gantt-calendar-overlay></gantt-calendar-overlay>\n  <gantt-drag-backdrop></gantt-drag-backdrop>\n  <div class=\"gantt-main\">\n    <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n  </div>\n</div>\n", components: [{ type: GanttCalendarComponent, selector: "gantt-calendar-overlay" }, { type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }], directives: [{ type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttRootComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'gantt-calendar-grid',
-                        templateUrl: './calendar-grid.component.html'
+                        selector: 'ngx-gantt-root',
+                        templateUrl: './root.component.html',
+                        providers: [GanttDomService, GanttDragContainer]
                     }]
             }], ctorParameters: function () {
-            return [{ type: GanttUpper, decorators: [{
+            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }, { type: GanttDomService }, { type: GanttDragContainer }, { type: GanttUpper, decorators: [{
                             type: i0.Inject,
                             args: [GANTT_UPPER_TOKEN]
-                        }] }, { type: i0__namespace.NgZone }, { type: i0__namespace.ElementRef }];
-        }, propDecorators: { className: [{
+                        }] }, { type: GanttPrintService, decorators: [{
+                            type: i0.Optional
+                        }] }];
+        }, propDecorators: { sideWidth: [{
+                    type: i0.Input
+                }], ganttClass: [{
                     type: i0.HostBinding,
-                    args: ['class']
+                    args: ['class.gantt']
+                }], sideTemplate: [{
+                    type: i0.ContentChild,
+                    args: ['sideTemplate', { static: true }]
+                }], mainTemplate: [{
+                    type: i0.ContentChild,
+                    args: ['mainTemplate', { static: true }]
                 }] } });
 
     var LinkColors;
@@ -2181,7 +2327,8 @@
             this.cdr = cdr;
             this.elementRef = elementRef;
             this.ganttDragContainer = ganttDragContainer;
-            this.flatData = [];
+            this.groups = [];
+            this.items = [];
             this.lineClick = new i0.EventEmitter();
             this.links = [];
             this.linkItems = [];
@@ -2192,8 +2339,8 @@
         }
         GanttLinksComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.firstChange = false;
             this.buildLinks();
+            this.firstChange = false;
             this.ganttDragContainer.dragStarted.pipe(operators.takeUntil(this.unsubscribe$)).subscribe(function () {
                 _this.elementRef.nativeElement.style.visibility = 'hidden';
             });
@@ -2215,21 +2362,40 @@
             var lineHeight = this.ganttUpper.styles.lineHeight;
             var barHeight = this.ganttUpper.styles.barHeight;
             this.linkItems = [];
-            this.flatData.forEach(function (item, itemIndex) {
-                if (!item.hasOwnProperty('items')) {
-                    var ganttItem = item;
-                    if (ganttItem.refs) {
-                        var y = itemIndex * lineHeight + ganttItem.refs.y + barHeight / 2;
-                        _this.linkItems.push(Object.assign(Object.assign({}, ganttItem), { before: {
-                                x: ganttItem.refs.x,
-                                y: y
-                            }, after: {
-                                x: ganttItem.refs.x + ganttItem.refs.width,
-                                y: y
-                            } }));
+            if (this.groups.length > 0) {
+                var itemNum_1 = 0;
+                var groupNum_1 = 0;
+                this.groups.forEach(function (group) {
+                    groupNum_1++;
+                    if (group.expanded) {
+                        var items = recursiveItems(group.items);
+                        items.forEach(function (item, itemIndex) {
+                            var y = (groupNum_1 + itemNum_1 + itemIndex) * lineHeight + item.refs.y + barHeight / 2;
+                            _this.linkItems.push(Object.assign(Object.assign({}, item), { before: {
+                                    x: item.refs.x,
+                                    y: y
+                                }, after: {
+                                    x: item.refs.x + item.refs.width,
+                                    y: y
+                                } }));
+                        });
+                        itemNum_1 += items.length;
                     }
-                }
-            });
+                });
+            }
+            else {
+                var items = recursiveItems(this.items);
+                items.forEach(function (item, itemIndex) {
+                    var y = itemIndex * lineHeight + item.refs.y + barHeight / 2;
+                    _this.linkItems.push(Object.assign(Object.assign({}, item), { before: {
+                            x: item.refs.x,
+                            y: y
+                        }, after: {
+                            x: item.refs.x + item.refs.width,
+                            y: y
+                        } }));
+                });
+            }
         };
         GanttLinksComponent.prototype.generatePath = function (source, target) {
             if (source.before && source.after && target.before && target.after) {
@@ -2314,7 +2480,7 @@
         return GanttLinksComponent;
     }());
     GanttLinksComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttLinksComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: GanttDragContainer }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    GanttLinksComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: { flatData: "flatData" }, outputs: { lineClick: "lineClick" }, host: { properties: { "class.gantt-links-overlay": "this.ganttLinksOverlay" } }, usesOnChanges: true, ngImport: i0__namespace, 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 [attr.d]=\"link.path\" fill=\"transparent\" stroke-width=\"2\" [attr.stroke]=\"link.color\" pointer-events=\"none\"></path>\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        (mouseenter)=\"mouseEnterPath(link)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        [attr.d]=\"link.path\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    GanttLinksComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: { groups: "groups", items: "items" }, outputs: { lineClick: "lineClick" }, host: { properties: { "class.gantt-links-overlay": "this.ganttLinksOverlay" } }, usesOnChanges: true, ngImport: i0__namespace, 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 [attr.d]=\"link.path\" fill=\"transparent\" stroke-width=\"2\" [attr.stroke]=\"link.color\" pointer-events=\"none\"></path>\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        (mouseenter)=\"mouseEnterPath(link)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        [attr.d]=\"link.path\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n", directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttLinksComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2326,7 +2492,9 @@
                             type: i0.Inject,
                             args: [GANTT_UPPER_TOKEN]
                         }] }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: GanttDragContainer }];
-        }, propDecorators: { flatData: [{
+        }, propDecorators: { groups: [{
+                    type: i0.Input
+                }], items: [{
                     type: i0.Input
                 }], lineClick: [{
                     type: i0.Output
@@ -2355,11 +2523,10 @@
             }
         };
         GanttItemUpper.prototype.setPositions = function () {
-            var _a, _b, _c;
             var itemElement = this.elementRef.nativeElement;
-            itemElement.style.left = ((_a = this.item.refs) === null || _a === void 0 ? void 0 : _a.x) + 'px';
-            itemElement.style.top = ((_b = this.item.refs) === null || _b === void 0 ? void 0 : _b.y) + 'px';
-            itemElement.style.width = ((_c = this.item.refs) === null || _c === void 0 ? void 0 : _c.width) + 'px';
+            itemElement.style.left = this.item.refs.x + 'px';
+            itemElement.style.top = this.item.refs.y + 'px';
+            itemElement.style.width = this.item.refs.width + 'px';
             if (this.item.type === exports.GanttItemType.bar) {
                 itemElement.style.height = this.ganttUpper.styles.barHeight + 'px';
             }
@@ -2409,7 +2576,7 @@
         return NgxGanttRangeComponent;
     }(GanttItemUpper));
     NgxGanttRangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttRangeComponent, deps: [{ token: i0__namespace.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NgxGanttRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range", host: { properties: { "class.gantt-range": "this.ganttRangeClass" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"item.start && item.end\">\n  <div class=\"gantt-range-main\">\n    <div class=\"gantt-range-main-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  </div>\n  <div class=\"gantt-range-triangle left\"></div>\n  <div class=\"gantt-range-triangle right\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</ng-container>\n", directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    NgxGanttRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range", host: { properties: { "class.gantt-range": "this.ganttRangeClass" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"item.start && item.end\">\n  <div class=\"gantt-range-main\">\n    <div class=\"gantt-range-main-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  </div>\n  <div class=\"gantt-range-triangle left\"></div>\n  <div class=\"gantt-range-triangle right\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</ng-container>\n", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttRangeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2497,6 +2664,8 @@
                 var start = _this.ganttUpper.view.getDateByXPoint(x);
                 var end = start.addDays(days);
                 _this.openDragBackdrop(_this.barElement, _this.ganttUpper.view.getDateByXPoint(x), end);
+                _this.item.updateDate(start, end);
+                _this.dragContainer.dragMoved.emit({ item: _this.item.origin });
             });
             dragRef.ended.subscribe(function (event) {
                 var days = dateFns.differenceInCalendarDays(_this.item.end.value, _this.item.start.value);
@@ -2532,6 +2701,7 @@
                             _this.barElement.style.width = width + 'px';
                             _this.barElement.style.left = x + 'px';
                             _this.openDragBackdrop(_this.barElement, _this.ganttUpper.view.getDateByXPoint(x), _this.ganttUpper.view.getDateByXPoint(x + width));
+                            _this.item.updateDate(_this.ganttUpper.view.getDateByXPoint(x), _this.item.end);
                         }
                     }
                     else {
@@ -2540,7 +2710,9 @@
                             _this.barElement.style.width = width + 'px';
                             _this.openDragBackdrop(_this.barElement, _this.ganttUpper.view.getDateByXPoint(_this.item.refs.x), _this.ganttUpper.view.getDateByXPoint(_this.item.refs.x + width));
                         }
+                        _this.item.updateDate(_this.item.start, _this.ganttUpper.view.getDateByXPoint(_this.item.refs.x + width));
                     }
+                    _this.dragContainer.dragMoved.emit({ item: _this.item.origin });
                     event.source.reset();
                 });
                 dragRef.ended.subscribe(function (event) {
@@ -2690,11 +2862,11 @@
         };
         return GanttBarDrag;
     }());
-    GanttBarDrag.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttBarDrag, deps: [{ token: i1__namespace$1.DragDrop }, { token: GanttDomService }, { token: GanttDragContainer }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    GanttBarDrag.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttBarDrag, deps: [{ token: i1__namespace.DragDrop }, { token: GanttDomService }, { token: GanttDragContainer }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     GanttBarDrag.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttBarDrag });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttBarDrag, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }]; } });
+            }], ctorParameters: function () { return [{ type: i1__namespace.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }]; } });
 
     function linearGradient(sideOrCorner, color, stop) {
         return "linear-gradient(" + sideOrCorner + "," + color + " 0%," + stop + " 40%)";
@@ -2765,7 +2937,7 @@
         return NgxGanttBarComponent;
     }(GanttItemUpper));
     NgxGanttBarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttBarComponent, deps: [{ token: GanttDragContainer }, { token: GanttBarDrag }, { token: i0__namespace.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NgxGanttBarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", 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 }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"gantt-bar-layer\">\n  <div *ngIf=\"item.draggable && ganttUpper.draggable\" class=\"drag-handles\">\n    <ng-container>\n      <span class=\"handle\" (mousedown)=\"stopPropagation($event)\"></span>\n      <span class=\"handle\" (mousedown)=\"stopPropagation($event)\"></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", directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    NgxGanttBarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", 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 }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"gantt-bar-layer\">\n  <div *ngIf=\"item.draggable && ganttUpper.draggable\" class=\"drag-handles\">\n    <ng-container>\n      <span class=\"handle\" (mousedown)=\"stopPropagation($event)\"></span>\n      <span class=\"handle\" (mousedown)=\"stopPropagation($event)\"></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", directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttBarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2796,13 +2968,13 @@
             this.ganttMainClass = true;
         }
         GanttMainComponent.prototype.ngOnInit = function () { };
-        GanttMainComponent.prototype.trackBy = function (item, index) {
+        GanttMainComponent.prototype.trackBy = function (index, item) {
             return item.id || index;
         };
         return GanttMainComponent;
     }());
     GanttMainComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttMainComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    GanttMainComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttMainComponent, selector: "gantt-main", inputs: { tempData: "tempData", 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__namespace, template: "<gantt-links-overlay [flatData]=\"flatData\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n\n<div class=\"gantt-main-groups\" *ngIf=\"tempData && tempData.length > 0\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of tempData; 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 class=\"gantt-item\" [style.height.px]=\"ganttUpper.styles.lineHeight\" *ngIf=\"!data.items\">\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ item: data.origin, refs: data.refs }\"></ng-template>\n      </ng-container>\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    </div>\n  </ng-container>\n</div>\n", components: [{ type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["flatData"], outputs: ["lineClick"] }, { type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range" }, { type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: ["barClick"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "isGanttCustomItem": IsGanttCustomItemPipe, "isGanttRangeItem": IsGanttRangeItemPipe, "isGanttBarItem": IsGanttBarItemPipe } });
+    GanttMainComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttMainComponent, selector: "gantt-main", inputs: { groups: "groups", items: "items", groupHeaderTemplate: "groupHeaderTemplate", itemTemplate: "itemTemplate", barTemplate: "barTemplate", rangeTemplate: "rangeTemplate" }, outputs: { barClick: "barClick", lineClick: "lineClick" }, host: { properties: { "class.gantt-main-container": "this.ganttMainClass" } }, ngImport: i0__namespace, 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<!-- 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 [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n      </ng-container>\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    </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", components: [{ type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["groups", "items"], outputs: ["lineClick"] }, { type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range" }, { type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: ["barClick"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "isGanttCustomItem": IsGanttCustomItemPipe, "isGanttRangeItem": IsGanttRangeItemPipe, "isGanttBarItem": IsGanttBarItemPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttMainComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2814,9 +2986,9 @@
                             type: i0.Inject,
                             args: [GANTT_UPPER_TOKEN]
                         }] }];
-        }, propDecorators: { tempData: [{
+        }, propDecorators: { groups: [{
                     type: i0.Input
-                }], flatData: [{
+                }], items: [{
                     type: i0.Input
                 }], groupHeaderTemplate: [{
                     type: i0.Input
@@ -2835,62 +3007,23 @@
                     args: ['class.gantt-main-container']
                 }] } });
 
-    var GanttDragBackdropComponent = /** @class */ (function () {
-        function GanttDragBackdropComponent() {
-            this.backdropClass = true;
-        }
-        GanttDragBackdropComponent.prototype.ngOnInit = function () { };
-        return GanttDragBackdropComponent;
-    }());
-    GanttDragBackdropComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDragBackdropComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    GanttDragBackdropComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop", host: { properties: { "class.gantt-drag-backdrop": "this.backdropClass" } }, ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttDragBackdropComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'gantt-drag-backdrop',
-                        templateUrl: "./drag-backdrop.component.html"
-                    }]
-            }], ctorParameters: function () { return []; }, propDecorators: { backdropClass: [{
-                    type: i0.HostBinding,
-                    args: ['class.gantt-drag-backdrop']
-                }] } });
-
     var NgxGanttComponent = /** @class */ (function (_super) {
         __extends(NgxGanttComponent, _super);
-        function NgxGanttComponent(elementRef, cdr, ngZone, dom, dragContainer, printService) {
-            var _this = _super.call(this, elementRef, cdr, ngZone) || this;
-            _this.dom = dom;
-            _this.dragContainer = dragContainer;
-            _this.printService = printService;
+        function NgxGanttComponent(elementRef, cdr, ngZone, config) {
+            var _this = _super.call(this, elementRef, cdr, ngZone, config) || this;
             _this.maxLevel = 2;
             _this.linkDragStarted = new i0.EventEmitter();
             _this.linkDragEnded = new i0.EventEmitter();
             _this.lineClick = new i0.EventEmitter();
-            _this.flatData = [];
-            _this.tempData = [];
+            _this.selectedChange = new i0.EventEmitter();
             _this.ngUnsubscribe$ = new rxjs.Subject();
-            _this.dragContainer = dragContainer;
-            _this.computeAllRefs = false;
+            _this.sideTableWidth = sideWidth;
             return _this;
         }
         NgxGanttComponent.prototype.ngOnInit = function () {
             var _this = this;
             _super.prototype.onInit.call(this);
-            this.buildVirtualFlatData();
             this.ngZone.onStable.pipe(operators.take(1)).subscribe(function () {
-                _this.dom.initialize(_this.elementRef);
-                if (_this.printService) {
-                    _this.printService.register(_this.elementRef);
-                }
-                _this.setupViewScroll();
-                // 优化初始化时Scroll滚动体验问题，通过透明度解决，默认透明度为0，滚动结束后恢复
-                _this.elementRef.nativeElement.style.opacity = '1';
-                _this.viewChange.pipe(operators.startWith(null)).subscribe(function () {
-                    _this.scrollToToday();
-                });
-                _this.dragContainer.dragEnded.subscribe(function (event) {
-                    _this.computeTempDataRefs();
-                });
                 _this.dragContainer.linkDragStarted.pipe(operators.takeUntil(_this.ngUnsubscribe$)).subscribe(function (event) {
                     _this.linkDragStarted.emit(event);
                 });
@@ -2898,9 +3031,6 @@
                     _this.linkDragEnded.emit(event);
                 });
             });
-            this.view.start$.pipe(operators.skip(1), operators.takeUntil(this.unsubscribe$)).subscribe(function () {
-                _this.computeTempDataRefs();
-            });
         };
         NgxGanttComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
@@ -2912,40 +3042,9 @@
                 });
                 _this.cdr.detectChanges();
             });
-            this.virtualScroll.renderedRangeStream.subscribe(function (range) {
-                var 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.tempData = _this.flatData.slice(range.start, range.end);
-                _this.computeTempDataRefs();
-            });
         };
         NgxGanttComponent.prototype.ngOnChanges = function (changes) {
             _super.prototype.onChanges.call(this, changes);
-            if (!this.firstChange) {
-                if (changes.viewType && changes.viewType.currentValue) {
-                    this.tempData = this.flatData.slice(this.rangeStart, this.rangeEnd);
-                    this.computeTempDataRefs();
-                }
-                if (changes.originItems || changes.originGroups) {
-                    this.buildVirtualFlatData();
-                    this.tempData = this.flatData.slice(this.rangeStart, this.rangeEnd);
-                    this.computeTempDataRefs();
-                }
-            }
-        };
-        NgxGanttComponent.prototype.expandGroup = function (group) {
-            group.setExpand(!group.expanded);
-            this.afterExpand();
-            this.expandChange.emit();
-            this.cdr.detectChanges();
-        };
-        NgxGanttComponent.prototype.expandAll = function () {
-            this.expandGroups(true);
-        };
-        NgxGanttComponent.prototype.collapseAll = function () {
-            this.expandGroups(false);
         };
         NgxGanttComponent.prototype.expandChildren = function (item) {
             var _this = this;
@@ -2956,7 +3055,6 @@
                     this.childrenResolve(item.origin)
                         .pipe(operators.take(1), operators.finalize(function () {
                         item.loading = false;
-                        _this.afterExpand();
                         _this.expandChange.emit();
                         _this.cdr.detectChanges();
                     }))
@@ -2967,110 +3065,38 @@
                 }
                 else {
                     this.computeItemsRefs.apply(this, __spreadArray([], __read(item.children)));
-                    this.afterExpand();
                     this.expandChange.emit();
                 }
             }
             else {
                 item.setExpand(false);
-                this.afterExpand();
                 this.expandChange.emit();
             }
         };
-        NgxGanttComponent.prototype.buildVirtualFlatData = function () {
-            var virtualData = [];
-            if (this.groups.length) {
-                this.groups.forEach(function (group) {
-                    virtualData.push(group);
-                    if (group.expanded) {
-                        var items = recursiveItems(group.items, 0);
-                        virtualData.push.apply(virtualData, __spreadArray([], __read(items)));
-                    }
-                });
+        NgxGanttComponent.prototype.selectItem = function (selectEvent) {
+            var _a;
+            if (!this.selectable) {
+                return;
             }
-            if (this.items.length) {
-                virtualData.push.apply(virtualData, __spreadArray([], __read(recursiveItems(this.items, 0))));
+            var event = selectEvent.event, selectedValue = selectEvent.selectedValue;
+            this.selectionModel.toggle(selectedValue.id);
+            var selectedIds = this.selectionModel.selected;
+            if (this.multiple) {
+                var selectedValue_1 = this.getGanttItems(selectedIds).map(function (item) { return item.origin; });
+                this.selectedChange.emit({ event: event, selectedValue: selectedValue_1 });
             }
-            this.flatData = __spreadArray([], __read(virtualData));
-            this.flatDataMap = keyBy(this.flatData, 'id');
-        };
-        NgxGanttComponent.prototype.afterExpand = function () {
-            this.buildVirtualFlatData();
-            this.tempData = this.flatData.slice(this.rangeStart, this.rangeEnd);
-        };
-        NgxGanttComponent.prototype.trackBy = function (item, index) {
-            return item.id || index;
-        };
-        NgxGanttComponent.prototype.scrollToToday = function () {
-            var x = this.view.getTodayXPoint();
-            this.dom.scrollMainContainer(x);
-        };
-        NgxGanttComponent.prototype.setupViewScroll = function () {
-            var _this = this;
-            if (this.disabledLoadOnScroll) {
-                return;
+            else {
+                var selectedValue_2 = (_a = this.getGanttItem(selectedIds[0])) === null || _a === void 0 ? void 0 : _a.origin;
+                this.selectedChange.emit({ event: event, selectedValue: selectedValue_2 });
             }
-            this.dom
-                .getViewerScroll()
-                .pipe(operators.takeUntil(this.unsubscribe$))
-                .subscribe(function (event) {
-                if (event.direction === ScrollDirection.LEFT) {
-                    var dates_1 = _this.view.addStartDate();
-                    if (dates_1) {
-                        event.target.scrollLeft += _this.view.getDateRangeWidth(dates_1.start, dates_1.end);
-                        _this.ngZone.run(function () {
-                            _this.loadOnScroll.emit({ start: dates_1.start.getUnixTime(), end: dates_1.end.getUnixTime() });
-                        });
-                    }
-                }
-                if (event.direction === ScrollDirection.RIGHT) {
-                    var dates_2 = _this.view.addEndDate();
-                    if (dates_2) {
-                        _this.ngZone.run(function () {
-                            _this.loadOnScroll.emit({ start: dates_2.start.getUnixTime(), end: dates_2.end.getUnixTime() });
-                        });
-                    }
-                }
-                _this.cdr.detectChanges();
-            });
-        };
-        NgxGanttComponent.prototype.expandGroups = function (expanded) {
-            this.groups.forEach(function (group) {
-                group.setExpand(expanded);
-            });
-            this.afterExpand();
-            this.expandChange.next();
-            this.cdr.detectChanges();
-        };
-        NgxGanttComponent.prototype.computeTempDataRefs = function () {
-            var _this = this;
-            var tempItemData = [];
-            this.tempData.forEach(function (data) {
-                if (!data.hasOwnProperty('items')) {
-                    var item = data;
-                    if (item.links) {
-                        item.links.forEach(function (link) {
-                            if (_this.flatDataMap[link]) {
-                                tempItemData.push(_this.flatDataMap[link]);
-                            }
-                        });
-                    }
-                    tempItemData.push(data);
-                }
-            });
-            this.computeItemsRefs.apply(this, __spreadArray([], __read(uniqBy(tempItemData, 'id'))));
-            this.flatData = __spreadArray([], __read(this.flatData));
-            this.tempData = __spreadArray([], __read(this.tempData));
         };
         NgxGanttComponent.prototype.ngOnDestroy = function () {
             _super.prototype.onDestroy.call(this);
         };
         return NgxGanttComponent;
     }(GanttUpper));
-    NgxGanttComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: GanttDomService }, { token: GanttDragContainer }, { token: GanttPrintService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NgxGanttComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttComponent, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick" }, providers: [
-            GanttDomService,
-            GanttDragContainer,
+    NgxGanttComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NgxGanttComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttComponent, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick", selectedChange: "selectedChange" }, providers: [
             {
                 provide: GANTT_UPPER_TOKEN,
                 useExisting: NgxGanttComponent
@@ -3079,7 +3105,7 @@
                 provide: GANTT_ABSTRACT_TOKEN,
                 useExisting: i0.forwardRef(function () { return 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: "virtualScroll", first: true, predicate: i6.CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<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\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\">\n    <div class=\"gantt-side-container\">\n      <gantt-table-body\n        [tempData]=\"tempData\"\n        [columns]=\"columns\"\n        [groupTemplate]=\"groupTemplate\"\n        [emptyTemplate]=\"tableEmptyTemplate\"\n      ></gantt-table-body>\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        [tempData]=\"tempData\"\n        [flatData]=\"flatData\"\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\"></gantt-drag-backdrop>\n", components: [{ type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: ["columns"] }, { type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { type: i6__namespace.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: ["tempData", "columns", "groupTemplate", "emptyTemplate"] }, { type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { type: GanttMainComponent, selector: "gantt-main", inputs: ["tempData", "flatData", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate"], outputs: ["barClick", "lineClick"] }, { type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }], directives: [{ type: i6__namespace.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i6__namespace.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0__namespace.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 }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ngx-gantt-root>\n  <ng-template #sideTemplate>\n    <gantt-table\n      [groups]=\"groups\"\n      [items]=\"items\"\n      [columns]=\"columns\"\n      [groupTemplate]=\"groupTemplate\"\n      [emptyTemplate]=\"tableEmptyTemplate\"\n      [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n      [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n      (itemClick)=\"selectItem($event)\"\n    ></gantt-table>\n  </ng-template>\n  <ng-template #mainTemplate>\n    <gantt-main\n      [groups]=\"groups\"\n      [items]=\"items\"\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  </ng-template>\n</ngx-gantt-root>\n", components: [{ type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }, { type: GanttTableComponent, selector: "gantt-table", inputs: ["groups", "items", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate"], outputs: ["itemClick"] }, { type: GanttMainComponent, selector: "gantt-main", inputs: ["groups", "items", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate"], outputs: ["barClick", "lineClick"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3087,8 +3113,6 @@
                         templateUrl: './gantt.component.html',
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         providers: [
-                            GanttDomService,
-                            GanttDragContainer,
                             {
                                 provide: GANTT_UPPER_TOKEN,
                                 useExisting: NgxGanttComponent
@@ -3100,8 +3124,9 @@
                         ]
                     }]
             }], ctorParameters: function () {
-            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: GanttDomService }, { type: GanttDragContainer }, { type: GanttPrintService, decorators: [{
-                            type: i0.Optional
+            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [GANTT_GLOBAL_CONFIG]
                         }] }];
         }, propDecorators: { maxLevel: [{
                     type: i0.Input
@@ -3117,6 +3142,8 @@
                     type: i0.Output
                 }], lineClick: [{
                     type: i0.Output
+                }], selectedChange: [{
+                    type: i0.Output
                 }], table: [{
                     type: i0.ContentChild,
                     args: [NgxGanttTableComponent]
@@ -3126,128 +3153,6 @@
                 }], tableEmptyTemplate: [{
                     type: i0.ContentChild,
                     args: ['tableEmpty', { static: true }]
-                }], virtualScroll: [{
-                    type: i0.ViewChild,
-                    args: [i6.CdkVirtualScrollViewport]
-                }] } });
-
-    var NgxGanttRootComponent = /** @class */ (function () {
-        function NgxGanttRootComponent(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.ganttClass = true;
-            this.unsubscribe$ = new rxjs.Subject();
-            this.ganttUpper.dragContainer = dragContainer;
-        }
-        Object.defineProperty(NgxGanttRootComponent.prototype, "view", {
-            get: function () {
-                return this.ganttUpper.view;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        NgxGanttRootComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.ngZone.onStable.pipe(operators.take(1)).subscribe(function () {
-                _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(operators.startWith(null)).subscribe(function () {
-                    _this.scrollToToday();
-                });
-            });
-        };
-        NgxGanttRootComponent.prototype.setupViewScroll = function () {
-            var _this = this;
-            if (this.ganttUpper.disabledLoadOnScroll) {
-                return;
-            }
-            this.dom
-                .getViewerScroll()
-                .pipe(operators.takeUntil(this.unsubscribe$))
-                .subscribe(function (event) {
-                if (event.direction === ScrollDirection.LEFT) {
-                    var dates_1 = _this.view.addStartDate();
-                    if (dates_1) {
-                        event.target.scrollLeft += _this.view.getDateRangeWidth(dates_1.start, dates_1.end);
-                        _this.ngZone.run(function () {
-                            _this.ganttUpper.loadOnScroll.emit({ start: dates_1.start.getUnixTime(), end: dates_1.end.getUnixTime() });
-                        });
-                    }
-                }
-                if (event.direction === ScrollDirection.RIGHT) {
-                    var dates_2 = _this.view.addEndDate();
-                    if (dates_2) {
-                        _this.ngZone.run(function () {
-                            _this.ganttUpper.loadOnScroll.emit({ start: dates_2.start.getUnixTime(), end: dates_2.end.getUnixTime() });
-                        });
-                    }
-                }
-            });
-        };
-        NgxGanttRootComponent.prototype.setupResize = function () {
-            var _this = this;
-            this.dom
-                .getResize()
-                .pipe(operators.takeUntil(this.unsubscribe$))
-                .subscribe(function () {
-                _this.setupScrollClass();
-            });
-        };
-        NgxGanttRootComponent.prototype.setupScrollClass = function () {
-            var mainContainer = this.dom.mainContainer;
-            var height = mainContainer.offsetHeight;
-            var scrollHeight = mainContainer.scrollHeight;
-            if (scrollHeight > height) {
-                this.elementRef.nativeElement.className = 'gantt gantt-scroll';
-            }
-            else {
-                this.elementRef.nativeElement.className = 'gantt';
-            }
-        };
-        NgxGanttRootComponent.prototype.scrollToToday = function () {
-            var x = this.view.getTodayXPoint();
-            this.dom.scrollMainContainer(x);
-        };
-        return NgxGanttRootComponent;
-    }());
-    NgxGanttRootComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttRootComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: GanttDomService }, { token: GanttDragContainer }, { token: GANTT_UPPER_TOKEN }, { token: GanttPrintService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NgxGanttRootComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { properties: { "class.gantt": "this.ganttClass" } }, providers: [GanttDomService, GanttDragContainer], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], ngImport: i0__namespace, template: "<div class=\"gantt-side\" [style.width.px]=\"sideWidth\">\n  <div class=\"gantt-side-container\">\n    <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n  </div>\n</div>\n<div class=\"gantt-container\">\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", components: [{ type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }], directives: [{ type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttRootComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'ngx-gantt-root',
-                        templateUrl: './root.component.html',
-                        providers: [GanttDomService, GanttDragContainer]
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }, { type: GanttDomService }, { type: GanttDragContainer }, { type: GanttUpper, decorators: [{
-                            type: i0.Inject,
-                            args: [GANTT_UPPER_TOKEN]
-                        }] }, { type: GanttPrintService, decorators: [{
-                            type: i0.Optional
-                        }] }];
-        }, propDecorators: { sideWidth: [{
-                    type: i0.Input
-                }], ganttClass: [{
-                    type: i0.HostBinding,
-                    args: ['class.gantt']
-                }], sideTemplate: [{
-                    type: i0.ContentChild,
-                    args: ['sideTemplate', { static: true }]
-                }], mainTemplate: [{
-                    type: i0.ContentChild,
-                    args: ['mainTemplate', { static: true }]
                 }] } });
 
     var NgxGanttModule = /** @class */ (function () {
@@ -3259,11 +3164,9 @@
     NgxGanttModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttModule, declarations: [NgxGanttComponent,
             NgxGanttTableComponent,
             NgxGanttTableColumnComponent,
-            GanttTableHeaderComponent,
-            GanttTableBodyComponent,
+            GanttTableComponent,
             GanttMainComponent,
-            GanttCalendarHeaderComponent,
-            GanttCalendarGridComponent,
+            GanttCalendarComponent,
             GanttLinksComponent,
             NgxGanttBarComponent,
             GanttIconComponent,
@@ -3272,17 +3175,22 @@
             NgxGanttRootComponent,
             IsGanttRangeItemPipe,
             IsGanttBarItemPipe,
-            IsGanttCustomItemPipe], imports: [i1.CommonModule, i1$1.DragDropModule, i6.ScrollingModule], exports: [NgxGanttComponent,
+            IsGanttCustomItemPipe], imports: [i2.CommonModule, i1.DragDropModule], exports: [NgxGanttComponent,
             NgxGanttTableComponent,
             NgxGanttTableColumnComponent,
             NgxGanttRootComponent,
             NgxGanttBarComponent,
             NgxGanttRangeComponent] });
-    NgxGanttModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttModule, providers: [i6.CdkVirtualScrollViewport], imports: [[i1.CommonModule, i1$1.DragDropModule, i6.ScrollingModule]] });
+    NgxGanttModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttModule, providers: [
+            {
+                provide: GANTT_GLOBAL_CONFIG,
+                useValue: defaultConfig
+            }
+        ], imports: [[i2.CommonModule, i1.DragDropModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i1.CommonModule, i1$1.DragDropModule, i6.ScrollingModule],
+                        imports: [i2.CommonModule, i1.DragDropModule],
                         exports: [
                             NgxGanttComponent,
                             NgxGanttTableComponent,
@@ -3295,11 +3203,9 @@
                             NgxGanttComponent,
                             NgxGanttTableComponent,
                             NgxGanttTableColumnComponent,
-                            GanttTableHeaderComponent,
-                            GanttTableBodyComponent,
+                            GanttTableComponent,
                             GanttMainComponent,
-                            GanttCalendarHeaderComponent,
-                            GanttCalendarGridComponent,
+                            GanttCalendarComponent,
                             GanttLinksComponent,
                             NgxGanttBarComponent,
                             GanttIconComponent,
@@ -3310,7 +3216,12 @@
                             IsGanttBarItemPipe,
                             IsGanttCustomItemPipe
                         ],
-                        providers: [i6.CdkVirtualScrollViewport]
+                        providers: [
+                            {
+                                provide: GANTT_GLOBAL_CONFIG,
+                                useValue: defaultConfig
+                            }
+                        ]
                     }]
             }] });
 
@@ -3514,6 +3425,7 @@
             return dateFns.startOfYear;
         }
     });
+    exports.GANTT_GLOBAL_CONFIG = GANTT_GLOBAL_CONFIG;
     exports.GANTT_UPPER_TOKEN = GANTT_UPPER_TOKEN;
     exports.GanttBarClickEvent = GanttBarClickEvent;
     exports.GanttDate = GanttDate;
@@ -3526,6 +3438,7 @@
     exports.GanttLinkDragEvent = GanttLinkDragEvent;
     exports.GanttLoadOnScrollEvent = GanttLoadOnScrollEvent;
     exports.GanttPrintService = GanttPrintService;
+    exports.GanttSelectedEvent = GanttSelectedEvent;
     exports.GanttTableEvent = GanttTableEvent;
     exports.GanttUpper = GanttUpper;
     exports.GanttView = GanttView;
@@ -3539,6 +3452,7 @@
     exports.NgxGanttRootComponent = NgxGanttRootComponent;
     exports.NgxGanttTableColumnComponent = NgxGanttTableColumnComponent;
     exports.NgxGanttTableComponent = NgxGanttTableComponent;
+    exports.defaultConfig = defaultConfig;
     exports.primaryDatePointTop = primaryDatePointTop;
     exports.secondaryDatePointTop = secondaryDatePointTop;