@worktile/gantt 12.2.0-next.1 → 12.2.2

package/bundles/worktile-gantt.umd.js

@@ -1,10 +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/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 }; }
+    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')) :
+    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'], 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));
+})(this, (function (exports, i0, i2, operators, rxjs, dateFns, collections, coercion, i1) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -15,21 +13,18 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var html2canvas__default = /*#__PURE__*/_interopDefaultLegacy(html2canvas);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -266,7 +261,7 @@
                     ar[i] = from[i];
                 }
             }
-        return to.concat(ar || from);
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -564,24 +559,24 @@
         GanttViewType["week"] = "week";
     })(exports.GanttViewType || (exports.GanttViewType = {}));
 
-    var GanttLinkType;
+    exports.GanttLinkType = void 0;
     (function (GanttLinkType) {
         GanttLinkType[GanttLinkType["fs"] = 1] = "fs";
         GanttLinkType[GanttLinkType["ff"] = 2] = "ff";
         GanttLinkType[GanttLinkType["ss"] = 3] = "ss";
         GanttLinkType[GanttLinkType["sf"] = 4] = "sf";
-    })(GanttLinkType || (GanttLinkType = {}));
-    var GanttLinkPathType;
-    (function (GanttLinkPathType) {
-        GanttLinkPathType["curve"] = "curve";
-        GanttLinkPathType["line"] = "line";
-    })(GanttLinkPathType || (GanttLinkPathType = {}));
-    var LinkColors;
+    })(exports.GanttLinkType || (exports.GanttLinkType = {}));
+    exports.GanttLinkLineType = void 0;
+    (function (GanttLinkLineType) {
+        GanttLinkLineType["curve"] = "curve";
+        GanttLinkLineType["straight"] = "straight";
+    })(exports.GanttLinkLineType || (exports.GanttLinkLineType = {}));
+    exports.LinkColors = void 0;
     (function (LinkColors) {
         LinkColors["default"] = "#cacaca";
         LinkColors["blocked"] = "#FF7575";
         LinkColors["active"] = "#348FE4";
-    })(LinkColors || (LinkColors = {}));
+    })(exports.LinkColors || (exports.LinkColors = {}));
 
     exports.GanttItemType = void 0;
     (function (GanttItemType) {
@@ -598,7 +593,7 @@
             this.links = (this.origin.links || []).map(function (link) {
                 if (typeof link === 'string') {
                     return {
-                        type: GanttLinkType.fs,
+                        type: exports.GanttLinkType.fs,
                         link: link
                     };
                 }
@@ -668,8 +663,9 @@
             this.expanded = expanded;
             this.origin.expanded = expanded;
         };
-        GanttItemInternal.prototype.addLink = function (linkId) {
-            this.links = __spreadArray(__spreadArray([], __read(this.links)), [{ type: GanttLinkType.fs, link: linkId }]);
+        GanttItemInternal.prototype.addLink = function (link) {
+            console.log(link);
+            this.links = __spreadArray(__spreadArray([], __read(this.links)), [link]);
             this.origin.links = this.links;
         };
         return GanttItemInternal;
@@ -703,9 +699,9 @@
             yearQuarter: 'yyyy年QQQ'
         },
         linkOptions: {
-            dependencyTypes: [GanttLinkType.fs],
+            dependencyTypes: [exports.GanttLinkType.fs],
             showArrow: false,
-            linkPathType: GanttLinkPathType.curve
+            lineType: exports.GanttLinkLineType.curve
         }
     };
     var GANTT_GLOBAL_CONFIG = new i0.InjectionToken('GANTT_GLOBAL_CONFIG');
@@ -1179,7 +1175,9 @@
             this.cdr = cdr;
             this.ngZone = ngZone;
             this.config = config;
+            // eslint-disable-next-line @angular-eslint/no-input-rename
             this.originItems = [];
+            // eslint-disable-next-line @angular-eslint/no-input-rename
             this.originGroups = [];
             this.viewType = exports.GanttViewType.month;
             this.showTodayLine = true;
@@ -1200,6 +1198,16 @@
             this._multiple = false;
             this.ganttClass = true;
         }
+        Object.defineProperty(GanttUpper.prototype, "linkOptions", {
+            get: function () {
+                return Object.assign({}, defaultConfig.linkOptions, this.config.linkOptions, this._linkOptions);
+            },
+            set: function (options) {
+                this._linkOptions = options;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(GanttUpper.prototype, "selectable", {
             get: function () {
                 return this._selectable;
@@ -1338,7 +1346,7 @@
         GanttUpper.prototype.initSelectionModel = function () {
             return new collections.SelectionModel(this.multiple, []);
         };
-        GanttUpper.prototype.onInit = function () {
+        GanttUpper.prototype.ngOnInit = function () {
             var _this = this;
             this.styles = Object.assign({}, defaultStyles, this.styles);
             this.viewOptions.dateFormat = Object.assign({}, defaultConfig.dateFormat, this.config.dateFormat, this.viewOptions.dateFormat);
@@ -1348,25 +1356,32 @@
             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();
-                    _this.detectChanges();
+            // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
+            // the `onStable` will never emit any value.
+            var onStable$ = this.ngZone.isStable ? rxjs.from(Promise.resolve()) : this.ngZone.onStable.pipe(operators.take(1));
+            // Normally this isn't in the zone, but it can cause performance regressions for apps
+            // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
+            this.ngZone.runOutsideAngular(function () {
+                onStable$.pipe(operators.takeUntil(_this.unsubscribe$)).subscribe(function () {
+                    _this.element.style.opacity = '1';
+                    _this.dragContainer.dragStarted.pipe(operators.takeUntil(_this.unsubscribe$)).subscribe(function (event) {
+                        _this.dragStarted.emit(event);
+                    });
+                    _this.dragContainer.dragMoved.pipe(operators.takeUntil(_this.unsubscribe$)).subscribe(function (event) {
+                        _this.dragMoved.emit(event);
+                    });
+                    _this.dragContainer.dragEnded.pipe(operators.takeUntil(_this.unsubscribe$)).subscribe(function (event) {
+                        _this.dragEnded.emit(event);
+                        _this.computeRefs();
+                        _this.detectChanges();
+                    });
                 });
             });
             this.view.start$.pipe(operators.skip(1), operators.takeUntil(this.unsubscribe$)).subscribe(function () {
                 _this.computeRefs();
             });
         };
-        GanttUpper.prototype.onChanges = function (changes) {
+        GanttUpper.prototype.ngOnChanges = function (changes) {
             if (!this.firstChange) {
                 if (changes.viewType && changes.viewType.currentValue) {
                     this.createView();
@@ -1383,7 +1398,7 @@
                 }
             }
         };
-        GanttUpper.prototype.onDestroy = function () {
+        GanttUpper.prototype.ngOnDestroy = function () {
             this.unsubscribe$.next();
             this.unsubscribe$.complete();
         };
@@ -1443,9 +1458,9 @@
         };
         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 }, { 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: [{
+    GanttUpper.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", 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.5", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", viewOptions: "viewOptions", linkOptions: "linkOptions", 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 }], usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttUpper, decorators: [{
                 type: i0.Directive
             }], ctorParameters: function () {
             return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
@@ -1472,6 +1487,8 @@
                     type: i0.Input
                 }], viewOptions: [{
                     type: i0.Input
+                }], linkOptions: [{
+                    type: i0.Input
                 }], disabledLoadOnScroll: [{
                     type: i0.Input
                 }], selectable: [{
@@ -1520,12 +1537,11 @@
             enumerable: false,
             configurable: true
         });
-        NgxGanttTableColumnComponent.prototype.ngOnInit = function () { };
         return NgxGanttTableColumnComponent;
     }());
-    NgxGanttTableColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttTableColumnComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NgxGanttTableColumnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: NgxGanttTableColumnComponent, selector: "ngx-gantt-column", inputs: { width: "width", name: "name" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["cell"], descendants: true, static: true }, { propertyName: "headerTemplateRef", first: true, predicate: ["header"], 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: NgxGanttTableColumnComponent, decorators: [{
+    NgxGanttTableColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxGanttTableColumnComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NgxGanttTableColumnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NgxGanttTableColumnComponent, selector: "ngx-gantt-column", inputs: { width: "width", name: "name" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["cell"], descendants: true, static: true }, { propertyName: "headerTemplateRef", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxGanttTableColumnComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ngx-gantt-column',
@@ -1552,18 +1568,17 @@
         function NgxGanttTableComponent() {
             this.columnChanges = new i0.EventEmitter();
         }
-        NgxGanttTableComponent.prototype.ngOnInit = function () { };
         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" }, 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: [{
+    NgxGanttTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxGanttTableComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NgxGanttTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", 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.5", ngImport: i0__namespace, type: NgxGanttTableComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ngx-gantt-table',
                         template: ''
                     }]
-            }], ctorParameters: function () { return []; }, propDecorators: { columnChanges: [{
+            }], propDecorators: { columnChanges: [{
                     type: i0.Output
                 }], rowBeforeTemplate: [{
                     type: i0.ContentChild,
@@ -1575,6 +1590,22 @@
 
     var GANTT_ABSTRACT_TOKEN = new i0.InjectionToken('gantt-abstract-token');
 
+    var supports = (typeof window !== 'undefined' && !!window.CSS && CSS.supports) || (function () { return false; });
+    /**
+     * Note: we don't need to add vendor prefixes within `.scss` files since they're added automatically.
+     * This function is necessary when the `element.style` is updated directly through the JavaScript.
+     * This is not required to be used with CSS properties that don't require vendor prefixes (e.g. `opacity`).
+     */
+    function setStyleWithVendorPrefix(_a) {
+        var element = _a.element, style = _a.style, value = _a.value;
+        element.style[style] = value;
+        if (supports("-webkit-" + style + ": " + value)) {
+            // Note: some browsers still require setting `-webkit` vendor prefix. E.g. Mozilla 49 has implemented
+            // the 3D support for `transform`, but it requires setting `-webkit-` prefix.
+            element.style["-webkit-" + style] = value;
+        }
+    }
+
     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>";
@@ -1602,8 +1633,6 @@
             enumerable: false,
             configurable: true
         });
-        GanttIconComponent.prototype.ngOnInit = function () { };
-        GanttIconComponent.prototype.ngAfterViewInit = function () { };
         GanttIconComponent.prototype.setSvg = function (name) {
             var iconSvg = icons[name];
             if (iconSvg) {
@@ -1615,9 +1644,9 @@
         };
         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: [{
+    GanttIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", 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.5", 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.5", ngImport: i0__namespace, type: GanttIconComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'gantt-icon',
@@ -1638,9 +1667,9 @@
         };
         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: [{
+    IsGanttRangeItemPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: IsGanttRangeItemPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    IsGanttRangeItemPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: IsGanttRangeItemPipe, name: "isGanttRangeItem" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: IsGanttRangeItemPipe, decorators: [{
                 type: i0.Pipe,
                 args: [{
                         name: 'isGanttRangeItem'
@@ -1654,9 +1683,9 @@
         };
         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: [{
+    IsGanttBarItemPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: IsGanttBarItemPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    IsGanttBarItemPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: IsGanttBarItemPipe, name: "isGanttBarItem" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: IsGanttBarItemPipe, decorators: [{
                 type: i0.Pipe,
                 args: [{
                         name: 'isGanttBarItem'
@@ -1670,9 +1699,9 @@
         };
         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: [{
+    IsGanttCustomItemPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: IsGanttCustomItemPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    IsGanttCustomItemPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: IsGanttCustomItemPipe, name: "isGanttCustomItem" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: IsGanttCustomItemPipe, decorators: [{
                 type: i0.Pipe,
                 args: [{
                         name: 'isGanttCustomItem'
@@ -1702,7 +1731,6 @@
             enumerable: false,
             configurable: true
         });
-        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)) {
@@ -1714,7 +1742,11 @@
         };
         GanttTableComponent.prototype.dragFixed = function (config) {
             if (config.movedWidth < config.minWidth) {
-                config.target.style.transform = "translate3d(" + (config.minWidth - config.originWidth) + "px, 0, 0)";
+                setStyleWithVendorPrefix({
+                    element: config.target,
+                    style: 'transform',
+                    value: "translate3d(" + (config.minWidth - config.originWidth) + "px, 0, 0)"
+                });
             }
         };
         GanttTableComponent.prototype.expandGroup = function (group) {
@@ -1796,9 +1828,9 @@
         };
         return GanttTableComponent;
     }());
-    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: [{
+    GanttTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", 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.5", 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.5", ngImport: i0__namespace, type: GanttTableComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'gantt-table',
@@ -1839,6 +1871,36 @@
                     args: ['class.gantt-table-empty']
                 }] } });
 
+    /** Cached result of whether the user's browser supports passive event listeners. */
+    var supportsPassiveEvents;
+    /**
+     * Checks whether the user's browser supports passive event listeners.
+     * See: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+     */
+    function supportsPassiveEventListeners() {
+        if (supportsPassiveEvents == null && typeof window !== 'undefined') {
+            try {
+                window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
+                    get: function () { return (supportsPassiveEvents = true); }
+                }));
+            }
+            finally {
+                supportsPassiveEvents = supportsPassiveEvents || false;
+            }
+        }
+        return supportsPassiveEvents;
+    }
+    /**
+     * Normalizes an `AddEventListener` object to something that can be passed
+     * to `addEventListener` on any browser, no matter whether it supports the
+     * `options` parameter.
+     */
+    function normalizePassiveListenerOptions(options) {
+        return supportsPassiveEventListeners() ? options : !!options.capture;
+    }
+    /** Options used to bind passive event listeners. */
+    var passiveListenerOptions = normalizePassiveListenerOptions({ passive: true });
+
     var scrollThreshold = 50;
     var ScrollDirection;
     (function (ScrollDirection) {
@@ -1847,25 +1909,27 @@
         ScrollDirection[ScrollDirection["RIGHT"] = 2] = "RIGHT";
     })(ScrollDirection || (ScrollDirection = {}));
     var GanttDomService = /** @class */ (function () {
-        function GanttDomService() {
+        function GanttDomService(ngZone, platformId) {
+            this.ngZone = ngZone;
+            this.platformId = platformId;
             this.unsubscribe$ = new rxjs.Subject();
         }
         GanttDomService.prototype.monitorScrollChange = function () {
             var _this = this;
-            rxjs.merge(rxjs.fromEvent(this.mainContainer, 'scroll'), rxjs.fromEvent(this.sideContainer, 'scroll'))
-                .pipe(operators.takeUntil(this.unsubscribe$))
+            this.ngZone.runOutsideAngular(function () { return rxjs.merge(rxjs.fromEvent(_this.mainContainer, 'scroll', passiveListenerOptions), rxjs.fromEvent(_this.sideContainer, 'scroll', passiveListenerOptions))
+                .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');
-                // }
-            });
+            }); });
+            // fromEvent(this.mainContainer, 'scroll')
+            //     .pipe(startWith(), takeUntil(this.unsubscribe$))
+            //     .subscribe((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;
@@ -1874,9 +1938,10 @@
             this.mainContainer.scrollTop = target.scrollTop;
         };
         GanttDomService.prototype.disableBrowserWheelEvent = function () {
+            var _this = this;
             var container = this.mainContainer;
-            rxjs.fromEvent(container, 'wheel')
-                .pipe(operators.takeUntil(this.unsubscribe$))
+            this.ngZone.runOutsideAngular(function () { return rxjs.fromEvent(container, 'wheel')
+                .pipe(operators.takeUntil(_this.unsubscribe$))
                 .subscribe(function (event) {
                 var delta = event.deltaX;
                 if (!delta) {
@@ -1886,7 +1951,7 @@
                     (container.scrollLeft === 0 && delta < 0)) {
                     event.preventDefault();
                 }
-            });
+            }); });
         };
         GanttDomService.prototype.initialize = function (root) {
             this.root = root.nativeElement;
@@ -1898,9 +1963,14 @@
             this.monitorScrollChange();
             this.disableBrowserWheelEvent();
         };
-        GanttDomService.prototype.getViewerScroll = function () {
+        /**
+         * @returns An observable that will emit outside the Angular zone. Note, consumers should re-enter the Angular zone
+         * to run the change detection if needed.
+         */
+        GanttDomService.prototype.getViewerScroll = function (options) {
             var _this = this;
-            return rxjs.fromEvent(this.mainContainer, 'scroll').pipe(operators.map(function () { return _this.mainContainer.scrollLeft; }), operators.pairwise(), operators.map(function (_a) {
+            return new rxjs.Observable(function (subscriber) { return _this.ngZone.runOutsideAngular(function () { return rxjs.fromEvent(_this.mainContainer, 'scroll', options)
+                .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,
@@ -1912,15 +1982,17 @@
                     }
                 }
                 if (current - previous > 0) {
-                    if (_this.mainContainer.scrollWidth - _this.mainContainer.clientWidth - _this.mainContainer.scrollLeft < scrollThreshold) {
+                    if (_this.mainContainer.scrollWidth - _this.mainContainer.clientWidth - _this.mainContainer.scrollLeft <
+                        scrollThreshold) {
                         event.direction = ScrollDirection.RIGHT;
                     }
                 }
                 return event;
-            }));
+            }))
+                .subscribe(subscriber); }); });
         };
         GanttDomService.prototype.getResize = function () {
-            return rxjs.fromEvent(window, 'resize').pipe(operators.auditTime(150));
+            return i2.isPlatformServer(this.platformId) ? rxjs.EMPTY : rxjs.fromEvent(window, 'resize').pipe(operators.auditTime(150));
         };
         GanttDomService.prototype.scrollMainContainer = function (left) {
             if (isNumber(left)) {
@@ -1935,70 +2007,109 @@
         };
         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: [{
+    GanttDomService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttDomService, deps: [{ token: i0__namespace.NgZone }, { token: i0.PLATFORM_ID }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    GanttDomService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttDomService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttDomService, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return []; } });
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.NgZone }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.PLATFORM_ID]
+                        }] }];
+        } });
 
+    function getDependencyType(path, dependencyTypes) {
+        if (dependencyTypes.includes(exports.GanttLinkType.ss) && path.from.pos === InBarPosition.start && path.to.pos === InBarPosition.start) {
+            return exports.GanttLinkType.ss;
+        }
+        if (dependencyTypes.includes(exports.GanttLinkType.ff) && path.from.pos === InBarPosition.finish && path.to.pos === InBarPosition.finish) {
+            return exports.GanttLinkType.ff;
+        }
+        if (dependencyTypes.includes(exports.GanttLinkType.sf) && path.from.pos === InBarPosition.start && path.to.pos === InBarPosition.finish) {
+            return exports.GanttLinkType.sf;
+        }
+        return exports.GanttLinkType.fs;
+    }
+    var InBarPosition;
+    (function (InBarPosition) {
+        InBarPosition["start"] = "start";
+        InBarPosition["finish"] = "finish";
+    })(InBarPosition || (InBarPosition = {}));
     var GanttDragContainer = /** @class */ (function () {
-        function GanttDragContainer() {
+        function GanttDragContainer(ganttUpper) {
+            this.ganttUpper = ganttUpper;
             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();
+            this.linkDragPath = { from: null, to: null };
         }
-        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;
+        GanttDragContainer.prototype.emitLinkDragStarted = function (from) {
+            this.linkDraggingId = from.item.id;
+            this.linkDragPath.from = from;
             this.linkDragStarted.emit({
-                source: this.linkDragSource && this.linkDragSource.origin,
-                target: this.linkDragTarget && this.linkDragTarget.origin
+                source: from.item.origin,
+                target: null
             });
         };
-        GanttDragContainer.prototype.emitLinkDragEntered = function (item) {
-            if (this.linkDragFrom === 'source') {
-                this.linkDragTarget = item;
-            }
-            else {
-                this.linkDragSource = item;
-            }
+        GanttDragContainer.prototype.emitLinkDragEntered = function (to) {
+            this.linkDragPath.to = to;
             this.linkDragEntered.emit({
-                source: this.linkDragSource.origin,
-                target: this.linkDragTarget.origin
+                source: this.linkDragPath.from.item.origin,
+                target: to.item.origin
             });
         };
         GanttDragContainer.prototype.emitLinkDragLeaved = function () {
-            if (this.linkDragFrom === 'source') {
-                this.linkDragTarget = null;
-            }
-            else {
-                this.linkDragSource = null;
-            }
+            this.linkDragPath.to = null;
         };
-        GanttDragContainer.prototype.emitLinkDragEnded = function () {
+        GanttDragContainer.prototype.emitLinkDragEnded = function (to) {
+            var _a;
+            this.linkDragPath.to = to;
+            var dependencyType = getDependencyType(this.linkDragPath, (_a = this.ganttUpper.linkOptions) === null || _a === void 0 ? void 0 : _a.dependencyTypes);
+            this.linkDragPath.from.item.addLink({
+                link: this.linkDragPath.to.item.id,
+                type: dependencyType
+            });
+            this.linkDragEnded.emit({
+                source: this.linkDragPath.from.item.origin,
+                target: this.linkDragPath.to.item.origin,
+                type: dependencyType
+            });
             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;
+            this.linkDragPath = { from: null, to: 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: [{
+    GanttDragContainer.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttDragContainer, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    GanttDragContainer.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttDragContainer });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttDragContainer, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return []; } });
+            }], ctorParameters: function () {
+            return [{ type: GanttUpper, decorators: [{
+                            type: i0.Inject,
+                            args: [GANTT_UPPER_TOKEN]
+                        }] }];
+        } });
+
+    var GanttDragBackdropComponent = /** @class */ (function () {
+        function GanttDragBackdropComponent() {
+        }
+        return GanttDragBackdropComponent;
+    }());
+    GanttDragBackdropComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttDragBackdropComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    GanttDragBackdropComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop", host: { classAttribute: "gantt-drag-backdrop" }, 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.5", ngImport: i0__namespace, type: GanttDragBackdropComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'gantt-drag-backdrop',
+                        templateUrl: "./drag-backdrop.component.html",
+                        host: {
+                            class: 'gantt-drag-backdrop'
+                        }
+                    }]
+            }] });
 
     var GanttPrintService = /** @class */ (function () {
         function GanttPrintService() {
@@ -2069,61 +2180,71 @@
             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);
-                        cloneLinksOverlay.setAttribute('style', "height: " + printHeight + "px");
+            return __awaiter(this, void 0, void 0, function () {
+                var root, mainContainer, printWidth, printHeight, html2canvas;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            root = this.root;
+                            mainContainer = this.mainContainer;
+                            printWidth = root.offsetWidth;
+                            printHeight = root.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
+                            return [4 /*yield*/, import(/* webpackChunkName: 'html2canvas' */ 'html2canvas')];
+                        case 1:
+                            html2canvas = (_a.sent()).default;
+                            html2canvas(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);
+                                        cloneLinksOverlay.setAttribute('style', "height: " + printHeight + "px");
+                                    }
+                                    // setInlineStyles for svg
+                                    _this.setInlineStyles(cloneGanttDom);
+                                }
+                            }).then(function (canvas) {
+                                var link = document.createElement('a');
+                                var dataUrl = canvas.toDataURL('image/png');
+                                link.download = name + ".png";
+                                link.href = dataUrl;
+                                link.click();
+                            });
+                            return [2 /*return*/];
                     }
-                    // setInlineStyles for svg
-                    _this.setInlineStyles(cloneGanttDom);
-                }
-            }).then(function (canvas) {
-                var link = document.createElement('a');
-                var dataUrl = canvas.toDataURL('image/png');
-                link.download = name + ".png";
-                link.href = dataUrl;
-                link.click();
+                });
             });
         };
         return GanttPrintService;
     }());
-    GanttPrintService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttPrintService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    GanttPrintService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttPrintService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttPrintService, decorators: [{
+    GanttPrintService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttPrintService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    GanttPrintService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttPrintService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttPrintService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -2133,7 +2254,6 @@
             this.ganttUpper = ganttUpper;
             this.ngZone = ngZone;
             this.elementRef = elementRef;
-            this.unsubscribe$ = new rxjs.Subject();
             this.headerHeight = headerHeight;
             this.mainHeight = mainHeight;
             this.todayHeight = todayHeight;
@@ -2141,6 +2261,7 @@
             this.todayBorderRadius = todayBorderRadius;
             this.viewTypes = exports.GanttViewType;
             this.className = true;
+            this.unsubscribe$ = new rxjs.Subject();
         }
         Object.defineProperty(GanttCalendarComponent.prototype, "view", {
             get: function () {
@@ -2173,16 +2294,21 @@
         };
         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();
+            // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
+            // the `onStable` will never emit any value.
+            var onStable$ = this.ngZone.isStable ? rxjs.from(Promise.resolve()) : this.ngZone.onStable.pipe(operators.take(1));
+            // Normally this isn't in the zone, but it can cause performance regressions for apps
+            // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
+            this.ngZone.runOutsideAngular(function () {
+                onStable$.pipe(operators.takeUntil(_this.unsubscribe$)).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;
         };
@@ -2192,9 +2318,9 @@
         };
         return GanttCalendarComponent;
     }());
-    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: [{
+    GanttCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", 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.5", type: GanttCalendarComponent, selector: "gantt-calendar-overlay", host: { properties: { "class.gantt-calendar-overlay": "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  <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.5", ngImport: i0__namespace, type: GanttCalendarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'gantt-calendar-overlay',
@@ -2210,26 +2336,6 @@
                     args: ['class.gantt-calendar-overlay']
                 }] } });
 
-    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 NgxGanttRootComponent = /** @class */ (function () {
         function NgxGanttRootComponent(elementRef, ngZone, dom, dragContainer, ganttUpper, printService) {
             this.elementRef = elementRef;
@@ -2238,7 +2344,6 @@
             this.dragContainer = dragContainer;
             this.ganttUpper = ganttUpper;
             this.printService = printService;
-            this.ganttClass = true;
             this.unsubscribe$ = new rxjs.Subject();
             this.ganttUpper.dragContainer = dragContainer;
         }
@@ -2251,45 +2356,53 @@
         });
         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();
+            // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
+            // the `onStable` will never emit any value.
+            var onStable$ = this.ngZone.isStable ? rxjs.from(Promise.resolve()) : this.ngZone.onStable.pipe(operators.take(1));
+            // Normally this isn't in the zone, but it can cause performance regressions for apps
+            // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
+            this.ngZone.runOutsideAngular(function () {
+                onStable$.pipe(operators.takeUntil(_this.unsubscribe$)).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), operators.takeUntil(_this.unsubscribe$)).subscribe(function () {
+                        _this.scrollToToday();
+                    });
                 });
             });
         };
+        NgxGanttRootComponent.prototype.ngOnDestroy = function () {
+            this.unsubscribe$.next();
+        };
         NgxGanttRootComponent.prototype.setupViewScroll = function () {
             var _this = this;
             if (this.ganttUpper.disabledLoadOnScroll) {
                 return;
             }
             this.dom
-                .getViewerScroll()
+                .getViewerScroll(passiveListenerOptions)
                 .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 (_this.ganttUpper.loadOnScroll.observers) {
+                            _this.ngZone.run(function () { return _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() });
-                        });
+                    if (dates_2 && _this.ganttUpper.loadOnScroll.observers) {
+                        _this.ngZone.run(function () { return _this.ganttUpper.loadOnScroll.emit({ start: dates_2.start.getUnixTime(), end: dates_2.end.getUnixTime() }); });
                     }
                 }
             });
@@ -2320,14 +2433,17 @@
         };
         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-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: [{
+    NgxGanttRootComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", 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.5", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { classAttribute: "gantt" }, providers: [GanttDomService, GanttDragContainer], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "backdrop", first: true, predicate: GanttDragBackdropComponent, descendants: true, read: i0.ElementRef, 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.5", ngImport: i0__namespace, type: NgxGanttRootComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ngx-gantt-root',
                         templateUrl: './root.component.html',
-                        providers: [GanttDomService, GanttDragContainer]
+                        providers: [GanttDomService, GanttDragContainer],
+                        host: {
+                            class: 'gantt'
+                        }
                     }]
             }], ctorParameters: function () {
             return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }, { type: GanttDomService }, { type: GanttDragContainer }, { type: GanttUpper, decorators: [{
@@ -2338,31 +2454,31 @@
                         }] }];
         }, 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 }]
+                }], backdrop: [{
+                    type: i0.ViewChild,
+                    args: [GanttDragBackdropComponent, { static: true, read: i0.ElementRef }]
                 }] } });
 
-    var GanttLinkPath = /** @class */ (function () {
-        function GanttLinkPath() {
+    var GanttLinkLine = /** @class */ (function () {
+        function GanttLinkLine() {
         }
-        GanttLinkPath.prototype.generatePath = function (source, target, type) {
+        GanttLinkLine.prototype.generatePath = function (source, target, type) {
             if (source.before && source.after && target.before && target.after) {
                 var path = '';
                 switch (type) {
-                    case GanttLinkType.ss:
+                    case exports.GanttLinkType.ss:
                         path = this.generateSSPath(source, target);
                         break;
-                    case GanttLinkType.ff:
+                    case exports.GanttLinkType.ff:
                         path = this.generateFFPath(source, target);
                         break;
-                    case GanttLinkType.sf:
+                    case exports.GanttLinkType.sf:
                         path = this.generateFSAndSFPath(source, target, type);
                         break;
                     default:
@@ -2371,23 +2487,17 @@
                 return path;
             }
         };
-        return GanttLinkPath;
+        return GanttLinkLine;
     }());
-    GanttLinkPath.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttLinkPath, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    GanttLinkPath.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttLinkPath });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttLinkPath, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return []; } });
 
-    var GanttLinkPathCurve = /** @class */ (function (_super) {
-        __extends(GanttLinkPathCurve, _super);
-        function GanttLinkPathCurve(ganttUpper) {
+    var GanttLinkLineCurve = /** @class */ (function (_super) {
+        __extends(GanttLinkLineCurve, _super);
+        function GanttLinkLineCurve(ganttUpper) {
             var _this = _super.call(this) || this;
             _this.ganttUpper = ganttUpper;
-            _this.bezierWeight = -0.5;
             return _this;
         }
-        GanttLinkPathCurve.prototype.generateSSPath = function (source, target) {
+        GanttLinkLineCurve.prototype.generateSSPath = function (source, target) {
             var x1 = source.before.x;
             var y1 = source.before.y;
             var x4 = target.before.x;
@@ -2401,7 +2511,7 @@
                 return "M " + x1 + " " + y1 + "\n                    L " + x4 + " " + y1 + "\n                    A " + radius + " " + radius + " 0 1 " + isMirror + " " + x4 + " " + y4;
             }
         };
-        GanttLinkPathCurve.prototype.generateFFPath = function (source, target) {
+        GanttLinkLineCurve.prototype.generateFFPath = function (source, target) {
             var x1 = source.after.x;
             var y1 = source.after.y;
             var x4 = target.after.x;
@@ -2415,75 +2525,65 @@
                 return "M " + x1 + " " + y1 + "\n                    A " + radius + " " + radius + " 0 1 " + isMirror + " " + x1 + " " + y4 + "\n                    L " + x4 + " " + y4;
             }
         };
-        GanttLinkPathCurve.prototype.generateFSAndSFPath = function (source, target, type) {
+        GanttLinkLineCurve.prototype.generateFSAndSFPath = function (source, target, type) {
+            var _a;
             var x1 = source.after.x;
             var y1 = source.after.y;
             var x4 = target.before.x;
             var y4 = target.before.y;
-            if (type === GanttLinkType.sf) {
+            var bezierWeight = 0.5;
+            if (type === exports.GanttLinkType.sf) {
                 x1 = target.after.x;
                 y1 = target.after.y;
                 x4 = source.before.x;
                 y4 = source.before.y;
             }
-            var dx = Math.abs(x4 - x1) * this.bezierWeight;
-            var x2 = x1 - dx;
-            var x3 = x4 + dx;
+            var dx = Math.abs(x4 - x1) * bezierWeight;
+            var x2 = x1 + dx;
+            var x3 = x4 - dx;
             var centerX = (x1 + x4) / 2;
             var centerY = (y1 + y4) / 2;
             var controlX = this.ganttUpper.styles.lineHeight / 2;
             var controlY = this.ganttUpper.styles.lineHeight / 2;
             if (x1 >= x4) {
-                if (y4 > y1) {
-                    if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
-                        return "M " + x1 + " " + y1 + "\n                    C " + (x1 + controlX) + " " + y1 + " " + (x1 + controlX) + " " + (y1 + controlX) + " " + x1 + " " + (y1 + controlY) + "\n                    L " + x4 + " " + (y4 - controlY) + "\n                    C " + (x4 - controlY) + " " + (y4 - controlY) + "  " + (x4 - controlX) + " " + y4 + " " + x4 + " " + y4;
-                    }
-                    else {
-                        controlX = this.ganttUpper.styles.lineHeight;
-                        return "M " + x1 + " " + y1 + "\n                    C " + (x1 + controlX) + " " + y1 + " " + (x1 + controlX) + " " + (y1 + controlX) + " " + centerX + " " + centerY + "\n                    C " + (x4 - controlX) + " " + (y4 - controlX) + " " + (x4 - controlX) + " " + y4 + " " + x4 + " " + y4 + "\n                    ";
-                    }
+                if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
+                    return "M " + x1 + " " + y1 + "\n                    C " + (x1 + controlX) + " " + y1 + " " + (x1 + controlX) + " " + (y4 > y1 ? y1 + controlX : y1 - controlX) + " " + x1 + " " + (y4 > y1 ? y1 + controlY : y1 - controlY) + "\n                    L " + x4 + " " + (y4 > y1 ? y4 - controlY : y4 + controlY) + "\n                    C " + (x4 - controlY) + " " + (y4 > y1 ? y4 - controlY : y4 + controlY) + "  " + (x4 - controlX) + " " + y4 + " " + x4 + " " + y4 + "\n                    ";
                 }
                 else {
-                    if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
-                        return "M " + x1 + " " + y1 + "\n                    C " + (x1 + controlX) + " " + y1 + " " + (x1 + controlX) + " " + (y1 - controlX) + " " + x1 + " " + (y1 - controlY) + "\n                    L " + x4 + " " + (y4 + controlY) + "\n                    C " + (x4 - controlY) + " " + (y4 + controlY) + " " + (x4 - controlX) + " " + y4 + " " + x4 + " " + y4 + "\n                    ";
-                    }
-                    else {
-                        controlX = this.ganttUpper.styles.lineHeight;
-                        return "M " + x1 + " " + y1 + "\n                    C " + (x1 + controlX) + " " + y1 + " " + (x1 + controlX) + " " + (y1 - controlX) + " " + centerX + " " + centerY + "\n                    C " + (x4 - controlX) + " " + (y4 + controlX) + " " + (x4 - controlX) + " " + y4 + " " + x4 + " " + y4 + "\n                    ";
-                    }
+                    controlX = this.ganttUpper.styles.lineHeight;
+                    return "M " + x1 + " " + y1 + "\n                    C " + (x1 + controlX) + " " + y1 + " " + (x1 + controlX) + " " + (y4 > y1 ? y1 + controlX : y1 - controlX) + " " + centerX + " " + centerY + "\n                    C " + (x4 - controlX) + " " + (y4 > y1 ? y4 - controlX : y4 + controlX) + " " + (x4 - controlX) + " " + y4 + " " + x4 + " " + y4 + "\n                    ";
                 }
             }
-            else if (x4 - x1 < 100) {
-                var radius = Math.abs(y4 - y1) / 4;
-                var lindWidth = x4 - x1 - radius;
-                lindWidth = Math.max(lindWidth, radius);
-                return "M " + x1 + " " + y1 + "\n                    L " + (x1 + lindWidth) + " " + y1 + "\n                    A " + radius + " " + radius + " 0 1 " + (y4 > y1 ? 1 : 0) + " " + (x1 + lindWidth) + " " + (y4 > y1 ? y1 + 2 * radius : y1 - 2 * radius) + "\n                    L " + (x4 - lindWidth) + " " + (y4 > y1 ? y1 + 2 * radius : y1 - 2 * radius) + "\n                    A " + radius + " " + radius + " 0 1 " + (y4 > y1 ? 0 : 1) + " " + (x4 - lindWidth) + " " + y4 + "\n                    L " + x4 + " " + y4 + "\n                    ";
+            else if (((_a = this.ganttUpper.linkOptions) === null || _a === void 0 ? void 0 : _a.showArrow) && x4 - x1 < 200) {
+                dx = Math.max(Math.abs(y4 - y1) * bezierWeight, 60);
+                x2 = x1 + dx;
+                x3 = x4 - dx;
+                return "M " + x1 + " " + y1 + " C " + x2 + " " + y1 + " " + x3 + " " + y4 + " " + x4 + " " + y4;
             }
             return "M " + x1 + " " + y1 + " C " + x2 + " " + y1 + " " + x3 + " " + y4 + " " + x4 + " " + y4;
         };
-        return GanttLinkPathCurve;
-    }(GanttLinkPath));
-    GanttLinkPathCurve = __decorate([
+        return GanttLinkLineCurve;
+    }(GanttLinkLine));
+    GanttLinkLineCurve = __decorate([
         __param(0, i0.Inject(GANTT_UPPER_TOKEN))
-    ], GanttLinkPathCurve);
+    ], GanttLinkLineCurve);
 
-    var GanttLinkPathLine = /** @class */ (function (_super) {
-        __extends(GanttLinkPathLine, _super);
-        function GanttLinkPathLine() {
+    var GanttLinkLineStraight = /** @class */ (function (_super) {
+        __extends(GanttLinkLineStraight, _super);
+        function GanttLinkLineStraight() {
             var _this = _super.call(this) || this;
             _this.pathControl = 20;
             return _this;
         }
-        GanttLinkPathLine.prototype.generateSSPath = function (source, target) {
+        GanttLinkLineStraight.prototype.generateSSPath = function (source, target) {
             var x1 = source.before.x;
             var y1 = source.before.y;
             var x4 = target.before.x;
             var y4 = target.before.y;
             var control = this.pathControl;
-            var centerY = (y1 + y4) / 2;
             return "M " + x1 + " " + y1 + "\n                        L " + (x4 > x1 ? x1 - control : x4 - control) + " " + y1 + "\n                        L " + (x4 > x1 ? x1 - control : x4 - control) + " " + y4 + "\n                        L " + x4 + " " + y4;
         };
-        GanttLinkPathLine.prototype.generateFFPath = function (source, target) {
+        GanttLinkLineStraight.prototype.generateFFPath = function (source, target) {
             var x1 = source.after.x;
             var y1 = source.after.y;
             var x4 = target.after.x;
@@ -2491,13 +2591,13 @@
             var control = this.pathControl;
             return "M " + x1 + " " + y1 + "\n                        L " + (x4 > x1 ? x4 + control : x1 + control) + " " + y1 + "\n                        L " + (x4 > x1 ? x4 + control : x1 + control) + " " + y4 + "\n                        L " + x4 + " " + y4;
         };
-        GanttLinkPathLine.prototype.generateFSAndSFPath = function (source, target, type) {
+        GanttLinkLineStraight.prototype.generateFSAndSFPath = function (source, target, type) {
             var x1 = source.after.x;
             var y1 = source.after.y;
             var x4 = target.before.x;
             var y4 = target.before.y;
             var control = this.pathControl;
-            if (type === GanttLinkType.sf) {
+            if (type === exports.GanttLinkType.sf) {
                 x1 = target.after.x;
                 y1 = target.after.y;
                 x4 = source.before.x;
@@ -2510,15 +2610,15 @@
                 return "M " + x1 + " " + y1 + "\n                        L " + (x1 + control) + " " + y1 + "\n                        L " + (x1 + control) + " " + (y4 > y1 ? y1 + control : y1 - control) + "\n                        L " + (x4 - control) + " " + (y4 > y1 ? y1 + control : y1 - control) + "\n                        L " + (x4 - control) + " " + y4 + "\n                        L " + x4 + " " + y4;
             }
         };
-        return GanttLinkPathLine;
-    }(GanttLinkPath));
+        return GanttLinkLineStraight;
+    }(GanttLinkLine));
 
-    function generatePathFactory(type, ganttUpper) {
+    function createLineGenerator(type, ganttUpper) {
         switch (type) {
-            case GanttLinkPathType.curve:
-                return new GanttLinkPathCurve(ganttUpper);
-            case GanttLinkPathType.line:
-                return new GanttLinkPathLine();
+            case exports.GanttLinkLineType.curve:
+                return new GanttLinkLineCurve(ganttUpper);
+            case exports.GanttLinkLineType.straight:
+                return new GanttLinkLineStraight();
             default:
                 throw new Error('gantt link path type invalid');
         }
@@ -2534,7 +2634,7 @@
             this.items = [];
             this.lineClick = new i0.EventEmitter();
             this.links = [];
-            this.ganttLinkTypes = GanttLinkType;
+            this.ganttLinkTypes = exports.GanttLinkType;
             this.showArrow = false;
             this.linkItems = [];
             this.firstChange = true;
@@ -2543,7 +2643,7 @@
         }
         GanttLinksComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.linkPath = generatePathFactory(this.ganttUpper.linkOptions.linkPathType, this.ganttUpper);
+            this.linkLine = createLineGenerator(this.ganttUpper.linkOptions.lineType, this.ganttUpper);
             this.showArrow = this.ganttUpper.linkOptions.showArrow;
             this.buildLinks();
             this.firstChange = false;
@@ -2551,7 +2651,7 @@
                 _this.elementRef.nativeElement.style.visibility = 'hidden';
             });
             rxjs.merge(this.ganttUpper.viewChange, this.ganttUpper.expandChange, this.ganttUpper.view.start$, this.ganttUpper.dragEnded, this.ganttUpper.linkDragEnded)
-                .pipe(operators.takeUntil(this.unsubscribe$), operators.skip(1), operators.debounceTime(0))
+                .pipe(operators.skip(1), operators.debounceTime(0), operators.takeUntil(this.unsubscribe$))
                 .subscribe(function () {
                 _this.elementRef.nativeElement.style.visibility = 'visible';
                 _this.buildLinks();
@@ -2612,16 +2712,30 @@
                     source.links.forEach(function (link) {
                         var target = _this.linkItems.find(function (item) { return item.id === link.link; });
                         if (target && (target.origin.start || target.origin.end)) {
-                            var color = LinkColors.default;
-                            if (link.type === GanttLinkType.fs && source.end.getTime() > target.start.getTime()) {
-                                color = LinkColors.blocked;
+                            var defaultColor = exports.LinkColors.default;
+                            var activeColor = exports.LinkColors.active;
+                            if (link.type === exports.GanttLinkType.fs && source.end.getTime() > target.start.getTime()) {
+                                defaultColor = exports.LinkColors.blocked;
+                                activeColor = exports.LinkColors.blocked;
+                            }
+                            if (link.color) {
+                                if (typeof link.color === 'string') {
+                                    defaultColor = link.color;
+                                    activeColor = link.color;
+                                }
+                                else {
+                                    defaultColor = link.color.default;
+                                    activeColor = link.color.active;
+                                }
                             }
                             _this.links.push({
-                                path: _this.linkPath.generatePath(source, target, link.type),
+                                path: _this.linkLine.generatePath(source, target, link.type),
                                 source: source.origin,
                                 target: target.origin,
                                 type: link.type,
-                                color: link.color || color
+                                color: defaultColor,
+                                defaultColor: defaultColor,
+                                activeColor: activeColor
                             });
                         }
                     });
@@ -2638,15 +2752,15 @@
                 target: link.target
             });
         };
-        GanttLinksComponent.prototype.mouseEnterPath = function (link) {
-            if (link.color === LinkColors.default) {
-                link.color = LinkColors.active;
+        GanttLinksComponent.prototype.mouseEnterPath = function (link, index) {
+            link.color = link.activeColor || link.defaultColor;
+            if (index < this.links.length - 1) {
+                this.links.splice(index, 1);
+                this.links.push(link);
             }
         };
         GanttLinksComponent.prototype.mouseLeavePath = function (link) {
-            if (link.color === LinkColors.active) {
-                link.color = LinkColors.default;
-            }
+            link.color = link.defaultColor;
         };
         GanttLinksComponent.prototype.ngOnDestroy = function () {
             this.unsubscribe$.next();
@@ -2654,9 +2768,9 @@
         };
         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: { 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\n      [attr.d]=\"link.path\"\n      fill=\"transparent\"\n      stroke-width=\"2\"\n      [attr.stroke]=\"link.color\"\n      pointer-events=\"none\"\n      [attr.style]=\"link.type === ganttLinkTypes.sf ? 'marker-start: url(#triangle' + i + ')' : 'marker-end: url(#triangle' + i + ')'\"\n    ></path>\n    <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    <defs *ngIf=\"showArrow\">\n      <marker\n        *ngIf=\"link.type === ganttLinkTypes.sf; else markerEnd\"\n        [id]=\"'triangle' + i\"\n        markerUnits=\"strokeWidth\"\n        markerWidth=\"5\"\n        markerHeight=\"4\"\n        refX=\"5\"\n        refY=\"2\"\n        orient=\"180\"\n      >\n        <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n      </marker>\n\n      <ng-template #markerEnd>\n        <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n          <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n        </marker>\n      </ng-template>\n    </defs>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n", directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttLinksComponent, decorators: [{
+    GanttLinksComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", 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.5", 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\n      [attr.d]=\"link.path\"\n      fill=\"transparent\"\n      stroke-width=\"2\"\n      [attr.stroke]=\"link.color\"\n      pointer-events=\"none\"\n      [attr.style]=\"link.type === ganttLinkTypes.sf ? 'marker-start: url(#triangle' + i + ')' : 'marker-end: url(#triangle' + i + ')'\"\n    ></path>\n\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        [attr.d]=\"link.path\"\n        (mouseenter)=\"mouseEnterPath(link, i)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n    <defs *ngIf=\"showArrow\">\n      <marker\n        *ngIf=\"link.type === ganttLinkTypes.sf; else markerEnd\"\n        [id]=\"'triangle' + i\"\n        markerUnits=\"strokeWidth\"\n        markerWidth=\"5\"\n        markerHeight=\"4\"\n        refX=\"5\"\n        refY=\"2\"\n        orient=\"180\"\n      >\n        <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n      </marker>\n\n      <ng-template #markerEnd>\n        <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n          <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n        </marker>\n      </ng-template>\n    </defs>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n", directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttLinksComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'gantt-links-overlay',
@@ -2685,14 +2799,14 @@
             this.firstChange = true;
             this.unsubscribe$ = new rxjs.Subject();
         }
-        GanttItemUpper.prototype.onInit = function () {
+        GanttItemUpper.prototype.ngOnInit = function () {
             var _this = this;
             this.firstChange = false;
             this.item.refs$.pipe(operators.takeUntil(this.unsubscribe$)).subscribe(function () {
                 _this.setPositions();
             });
         };
-        GanttItemUpper.prototype.onChanges = function () {
+        GanttItemUpper.prototype.ngOnChanges = function () {
             if (!this.firstChange) {
                 this.setPositions();
             }
@@ -2711,15 +2825,15 @@
             else {
             }
         };
-        GanttItemUpper.prototype.onDestroy = function () {
+        GanttItemUpper.prototype.ngOnDestroy = function () {
             this.unsubscribe$.next();
             this.unsubscribe$.complete();
         };
         return GanttItemUpper;
     }());
-    GanttItemUpper.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttItemUpper, deps: [{ token: i0__namespace.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    GanttItemUpper.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.2", type: GanttItemUpper, inputs: { template: "template", item: "item" }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: GanttItemUpper, decorators: [{
+    GanttItemUpper.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttItemUpper, deps: [{ token: i0__namespace.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    GanttItemUpper.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: GanttItemUpper, inputs: { template: "template", item: "item" }, usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttItemUpper, decorators: [{
                 type: i0.Directive
             }], ctorParameters: function () {
             return [{ type: i0__namespace.ElementRef }, { type: GanttUpper, decorators: [{
@@ -2739,20 +2853,11 @@
             _this.ganttRangeClass = true;
             return _this;
         }
-        NgxGanttRangeComponent.prototype.ngOnInit = function () {
-            _super.prototype.onInit.call(this);
-        };
-        NgxGanttRangeComponent.prototype.ngOnChanges = function () {
-            _super.prototype.onChanges.call(this);
-        };
-        NgxGanttRangeComponent.prototype.ngOnDestroy = function () {
-            _super.prototype.onDestroy.call(this);
-        };
         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: 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: [{
+    NgxGanttRangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", 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.5", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range", host: { properties: { "class.gantt-range": "this.ganttRangeClass" } }, usesInheritance: 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.5", ngImport: i0__namespace, type: NgxGanttRangeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ngx-gantt-range,gantt-range',
@@ -2770,17 +2875,19 @@
 
     var dragMinWidth = 10;
     var activeClass = 'gantt-bar-active';
-    var linkDropClass = 'gantt-bar-link-drop';
+    var dropActiveClass = 'gantt-bar-drop-active';
+    var singleDropActiveClass = 'gantt-bar-single-drop-active';
     function createSvgElement(qualifiedName, className) {
         var element = document.createElementNS('http://www.w3.org/2000/svg', qualifiedName);
         element.classList.add(className);
         return element;
     }
     var GanttBarDrag = /** @class */ (function () {
-        function GanttBarDrag(dragDrop, dom, dragContainer) {
+        function GanttBarDrag(dragDrop, dom, dragContainer, root) {
             this.dragDrop = dragDrop;
             this.dom = dom;
             this.dragContainer = dragContainer;
+            this.root = root;
             this.dragRefs = [];
             this.destroy$ = new rxjs.Subject();
         }
@@ -2800,20 +2907,28 @@
         });
         GanttBarDrag.prototype.createMouseEvents = function () {
             var _this = this;
-            rxjs.fromEvent(this.barElement, 'mouseenter')
+            var _a, _b, _c;
+            var dropClass = ((_b = (_a = this.ganttUpper.config.linkOptions) === null || _a === void 0 ? void 0 : _a.dependencyTypes) === null || _b === void 0 ? void 0 : _b.length) === 1 &&
+                ((_c = this.ganttUpper.config.linkOptions) === null || _c === void 0 ? void 0 : _c.dependencyTypes[0]) === exports.GanttLinkType.fs
+                ? singleDropActiveClass
+                : dropActiveClass;
+            rxjs.fromEvent(this.barElement, 'mouseenter', passiveListenerOptions)
                 .pipe(operators.takeUntil(this.destroy$))
                 .subscribe(function () {
                 if (_this.dragContainer.linkDraggingId && _this.dragContainer.linkDraggingId !== _this.item.id) {
                     if (_this.item.linkable) {
-                        _this.barElement.classList.add(linkDropClass);
-                        _this.dragContainer.emitLinkDragEntered(_this.item);
+                        _this.barElement.classList.add(dropClass);
+                        _this.dragContainer.emitLinkDragEntered({
+                            item: _this.item,
+                            element: _this.barElement
+                        });
                     }
                 }
                 else {
                     _this.barElement.classList.add(activeClass);
                 }
             });
-            rxjs.fromEvent(this.barElement, 'mouseleave')
+            rxjs.fromEvent(this.barElement, 'mouseleave', passiveListenerOptions)
                 .pipe(operators.takeUntil(this.destroy$))
                 .subscribe(function () {
                 if (!_this.dragContainer.linkDraggingId) {
@@ -2822,7 +2937,7 @@
                 else {
                     _this.dragContainer.emitLinkDragLeaved();
                 }
-                _this.barElement.classList.remove(linkDropClass);
+                _this.barElement.classList.remove(dropClass);
             });
         };
         GanttBarDrag.prototype.createBarDrag = function () {
@@ -2878,7 +2993,7 @@
                         if (width > dragMinWidth) {
                             _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.openDragBackdrop(_this.barElement, _this.ganttUpper.view.getDateByXPoint(x), _this.item.end);
                             _this.item.updateDate(_this.ganttUpper.view.getDateByXPoint(x), _this.item.end);
                         }
                     }
@@ -2886,7 +3001,7 @@
                         var width = _this.item.refs.width + event.distance.x;
                         if (width > dragMinWidth) {
                             _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.openDragBackdrop(_this.barElement, _this.item.start, _this.ganttUpper.view.getDateByXPoint(_this.item.refs.x + width));
                         }
                         _this.item.updateDate(_this.item.start, _this.ganttUpper.view.getDateByXPoint(_this.item.refs.x + width));
                     }
@@ -2925,7 +3040,7 @@
             var dragRefs = [];
             var handles = this.barElement.querySelectorAll('.link-handles .handle');
             handles.forEach(function (handle, index) {
-                var isBefore = index === 0;
+                var isBegin = index === 0;
                 var dragRef = _this.dragDrop.createDrag(handle);
                 dragRef.withBoundaryElement(_this.dom.root);
                 dragRef.beforeStarted.subscribe(function () {
@@ -2934,46 +3049,59 @@
                         _this.barDragRef.disabled = true;
                     }
                     _this.createLinkDraggingLine();
-                    _this.dragContainer.emitLinkDragStarted(isBefore ? 'target' : 'source', _this.item);
+                    _this.dragContainer.emitLinkDragStarted({
+                        element: _this.barElement,
+                        item: _this.item,
+                        pos: isBegin ? InBarPosition.start : InBarPosition.finish
+                    });
                 });
                 dragRef.moved.subscribe(function () {
-                    var positions = _this.calcLinkLinePositions(handle, isBefore);
+                    var positions = _this.calcLinkLinePositions(handle, isBegin);
                     _this.linkDraggingLine.setAttribute('x1', positions.x1.toString());
                     _this.linkDraggingLine.setAttribute('y1', positions.y1.toString());
                     _this.linkDraggingLine.setAttribute('x2', positions.x2.toString());
                     _this.linkDraggingLine.setAttribute('y2', positions.y2.toString());
                 });
                 dragRef.ended.subscribe(function (event) {
-                    event.source.reset();
                     handle.style.pointerEvents = '';
                     if (_this.barDragRef) {
                         _this.barDragRef.disabled = false;
                     }
+                    // 计算line拖动的落点位于目标Bar的值，如果值大于Bar宽度的一半，说明是拖动到Begin位置，否则则为拖动到End位置
+                    if (_this.dragContainer.linkDragPath.to) {
+                        var placePointX = event.source.getRootElement().getBoundingClientRect().x -
+                            _this.dragContainer.linkDragPath.to.element.getBoundingClientRect().x;
+                        _this.dragContainer.emitLinkDragEnded(Object.assign(Object.assign({}, _this.dragContainer.linkDragPath.to), { pos: placePointX < _this.dragContainer.linkDragPath.to.item.refs.width / 2
+                                ? InBarPosition.start
+                                : InBarPosition.finish }));
+                    }
+                    event.source.reset();
                     _this.barElement.classList.remove(activeClass);
                     _this.destroyLinkDraggingLine();
-                    _this.dragContainer.emitLinkDragEnded();
                 });
                 dragRefs.push(dragRef);
             });
             return dragRefs;
         };
         GanttBarDrag.prototype.openDragBackdrop = function (dragElement, start, end) {
-            var dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask');
-            var dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop');
+            var dragBackdropElement = this.root.backdrop.nativeElement;
+            var dragMaskElement = dragBackdropElement.querySelector('.gantt-drag-mask');
             var rootRect = this.dom.root.getBoundingClientRect();
             var dragRect = dragElement.getBoundingClientRect();
             var left = dragRect.left - rootRect.left - this.dom.side.clientWidth;
             var width = dragRect.right - dragRect.left;
+            // Note: updating styles will cause re-layout so we have to place them consistently one by one.
             dragMaskElement.style.left = left + 'px';
             dragMaskElement.style.width = width + 'px';
-            dragMaskElement.querySelector('.start').innerHTML = start.format('MM-dd');
-            dragMaskElement.querySelector('.end').innerHTML = end.format('MM-dd');
             dragMaskElement.style.display = 'block';
             dragBackdropElement.style.display = 'block';
+            // This will invalidate the layout, but we won't need re-layout, because we set styles previously.
+            dragMaskElement.querySelector('.start').innerHTML = start.format('MM-dd');
+            dragMaskElement.querySelector('.end').innerHTML = end.format('MM-dd');
         };
         GanttBarDrag.prototype.closeDragBackdrop = function () {
-            var dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask');
-            var dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop');
+            var dragBackdropElement = this.root.backdrop.nativeElement;
+            var dragMaskElement = dragBackdropElement.querySelector('.gantt-drag-mask');
             dragMaskElement.style.display = 'none';
             dragBackdropElement.style.display = 'none';
         };
@@ -3000,6 +3128,7 @@
             if (!this.linkDraggingLine) {
                 var svgElement = createSvgElement('svg', 'gantt-link-drag-container');
                 var linElement = createSvgElement('line', 'link-dragging-line');
+                linElement.style.pointerEvents = 'none';
                 svgElement.appendChild(linElement);
                 this.dom.root.appendChild(svgElement);
                 this.linkDraggingLine = linElement;
@@ -3012,7 +3141,7 @@
             }
         };
         GanttBarDrag.prototype.createDrags = function (elementRef, item, ganttUpper) {
-            var _a, _b;
+            var _d, _e;
             this.item = item;
             this.barElement = elementRef.nativeElement;
             this.ganttUpper = ganttUpper;
@@ -3024,11 +3153,11 @@
                 if (!this.dragDisabled) {
                     var dragRef = this.createBarDrag();
                     var dragHandlesRefs = this.createBarHandleDrags();
-                    (_a = this.dragRefs).push.apply(_a, __spreadArray([dragRef], __read(dragHandlesRefs)));
+                    (_d = this.dragRefs).push.apply(_d, __spreadArray([dragRef], __read(dragHandlesRefs)));
                 }
                 if (!this.linkDragDisabled) {
                     var linkDragRefs = this.createLinkHandleDrags();
-                    (_b = this.dragRefs).push.apply(_b, __spreadArray([], __read(linkDragRefs)));
+                    (_e = this.dragRefs).push.apply(_e, __spreadArray([], __read(linkDragRefs)));
                 }
             }
         };
@@ -3040,22 +3169,27 @@
         };
         return GanttBarDrag;
     }());
-    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: [{
+    GanttBarDrag.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttBarDrag, deps: [{ token: i1__namespace.DragDrop }, { token: GanttDomService }, { token: GanttDragContainer }, { token: NgxGanttRootComponent, skipSelf: true }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    GanttBarDrag.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttBarDrag });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GanttBarDrag, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i1__namespace.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }]; } });
+            }], ctorParameters: function () {
+            return [{ type: i1__namespace.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }, { type: NgxGanttRootComponent, decorators: [{
+                            type: i0.SkipSelf
+                        }] }];
+        } });
 
     function linearGradient(sideOrCorner, color, stop) {
         return "linear-gradient(" + sideOrCorner + "," + color + " 0%," + stop + " 40%)";
     }
     var NgxGanttBarComponent = /** @class */ (function (_super) {
         __extends(NgxGanttBarComponent, _super);
-        function NgxGanttBarComponent(dragContainer, drag, elementRef, ganttUpper) {
+        function NgxGanttBarComponent(dragContainer, drag, elementRef, ganttUpper, ngZone) {
             var _this = _super.call(this, elementRef, ganttUpper) || this;
             _this.dragContainer = dragContainer;
             _this.drag = drag;
             _this.ganttUpper = ganttUpper;
+            _this.ngZone = ngZone;
             _this.barClick = new i0.EventEmitter();
             _this.ganttItemClass = true;
             _this.color = 'red';
@@ -3063,17 +3197,24 @@
         }
         NgxGanttBarComponent.prototype.ngOnInit = function () {
             var _this = this;
-            _super.prototype.onInit.call(this);
+            _super.prototype.ngOnInit.call(this);
             this.dragContainer.dragEnded.pipe(operators.takeUntil(this.unsubscribe$)).subscribe(function () {
                 _this.setContentBackground();
             });
         };
         NgxGanttBarComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
             this.drag.createDrags(this.elementRef, this.item, this.ganttUpper);
             this.setContentBackground();
-        };
-        NgxGanttBarComponent.prototype.ngOnChanges = function () {
-            _super.prototype.onChanges.call(this);
+            this.handles.changes
+                .pipe(operators.startWith(this.handles), operators.switchMap(function () {
+                // Note: we need to explicitly subscribe outside of the Angular zone since `addEventListener`
+                // is called when the `fromEvent` is subscribed.
+                return new rxjs.Observable(function (subscriber) { return _this.ngZone.runOutsideAngular(function () { return rxjs.merge.apply(void 0, __spreadArray([], __read(_this.handles.toArray().map(function (handle) { return rxjs.fromEvent(handle.nativeElement, 'mousedown'); })))).subscribe(subscriber); }); });
+            }), operators.takeUntil(this.unsubscribe$))
+                .subscribe(function (event) {
+                event.stopPropagation();
+            });
         };
         NgxGanttBarComponent.prototype.onBarClick = function (event) {
             this.barClick.emit({ event: event, item: this.item.origin });
@@ -3109,14 +3250,11 @@
         NgxGanttBarComponent.prototype.stopPropagation = function (event) {
             event.stopPropagation();
         };
-        NgxGanttBarComponent.prototype.ngOnDestroy = function () {
-            _super.prototype.onDestroy.call(this);
-        };
         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: 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: [{
+    NgxGanttBarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxGanttBarComponent, deps: [{ token: GanttDragContainer }, { token: GanttBarDrag }, { token: i0__namespace.ElementRef }, { token: GANTT_UPPER_TOKEN }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NgxGanttBarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: { barClick: "barClick" }, host: { properties: { "class.gantt-bar": "this.ganttItemClass" } }, providers: [GanttBarDrag], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true }, { propertyName: "handles", predicate: ["handle"], descendants: true }], usesInheritance: true, 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\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</div>\n", 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.5", ngImport: i0__namespace, type: NgxGanttBarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ngx-gantt-bar,gantt-bar',
@@ -3127,7 +3265,7 @@
             return [{ type: GanttDragContainer }, { type: GanttBarDrag }, { type: i0__namespace.ElementRef }, { type: GanttUpper, decorators: [{
                             type: i0.Inject,
                             args: [GANTT_UPPER_TOKEN]
-                        }] }];
+                        }] }, { type: i0__namespace.NgZone }];
         }, propDecorators: { barClick: [{
                     type: i0.Output
                 }], contentElementRef: [{
@@ -3136,6 +3274,9 @@
                 }], ganttItemClass: [{
                     type: i0.HostBinding,
                     args: ['class.gantt-bar']
+                }], handles: [{
+                    type: i0.ViewChildren,
+                    args: ['handle']
                 }] } });
 
     var GanttMainComponent = /** @class */ (function () {
@@ -3145,15 +3286,14 @@
             this.lineClick = new i0.EventEmitter();
             this.ganttMainClass = true;
         }
-        GanttMainComponent.prototype.ngOnInit = function () { };
         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: { 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: [{
+    GanttMainComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", 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.5", 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.5", ngImport: i0__namespace, type: GanttMainComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'gantt-main',
@@ -3200,15 +3340,20 @@
         }
         NgxGanttComponent.prototype.ngOnInit = function () {
             var _this = this;
-            var _a;
-            _super.prototype.onInit.call(this);
-            this.linkOptions = Object.assign({}, defaultConfig.linkOptions, (_a = this.config) === null || _a === void 0 ? void 0 : _a.linkOptions, this.linkOptions);
-            this.ngZone.onStable.pipe(operators.take(1)).subscribe(function () {
-                _this.dragContainer.linkDragStarted.pipe(operators.takeUntil(_this.ngUnsubscribe$)).subscribe(function (event) {
-                    _this.linkDragStarted.emit(event);
-                });
-                _this.dragContainer.linkDragEnded.pipe(operators.takeUntil(_this.ngUnsubscribe$)).subscribe(function (event) {
-                    _this.linkDragEnded.emit(event);
+            _super.prototype.ngOnInit.call(this);
+            // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
+            // the `onStable` will never emit any value.
+            var onStable$ = this.ngZone.isStable ? rxjs.from(Promise.resolve()) : this.ngZone.onStable.pipe(operators.take(1));
+            // Normally this isn't in the zone, but it can cause performance regressions for apps
+            // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
+            this.ngZone.runOutsideAngular(function () {
+                onStable$.pipe(operators.takeUntil(_this.unsubscribe$)).subscribe(function () {
+                    _this.dragContainer.linkDragStarted.pipe(operators.takeUntil(_this.ngUnsubscribe$)).subscribe(function (event) {
+                        _this.linkDragStarted.emit(event);
+                    });
+                    _this.dragContainer.linkDragEnded.pipe(operators.takeUntil(_this.ngUnsubscribe$)).subscribe(function (event) {
+                        _this.linkDragEnded.emit(event);
+                    });
                 });
             });
         };
@@ -3223,9 +3368,6 @@
                 _this.cdr.detectChanges();
             });
         };
-        NgxGanttComponent.prototype.ngOnChanges = function (changes) {
-            _super.prototype.onChanges.call(this, changes);
-        };
         NgxGanttComponent.prototype.expandChildren = function (item) {
             var _this = this;
             if (!item.expanded) {
@@ -3262,21 +3404,18 @@
             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 });
+                var _selectedValue = this.getGanttItems(selectedIds).map(function (item) { return item.origin; });
+                this.selectedChange.emit({ event: event, selectedValue: _selectedValue });
             }
             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 });
+                var _selectedValue = (_a = this.getGanttItem(selectedIds[0])) === null || _a === void 0 ? void 0 : _a.origin;
+                this.selectedChange.emit({ event: event, selectedValue: _selectedValue });
             }
         };
-        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: 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", linkOptions: "linkOptions" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick", selectedChange: "selectedChange" }, providers: [
+    NgxGanttComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", 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.5", 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
@@ -3285,8 +3424,8 @@
                 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 }], 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: [{
+        ], 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, 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.5", ngImport: i0__namespace, type: NgxGanttComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ngx-gantt',
@@ -3316,8 +3455,6 @@
                     type: i0.Input
                 }], linkable: [{
                     type: i0.Input
-                }], linkOptions: [{
-                    type: i0.Input
                 }], linkDragStarted: [{
                     type: i0.Output
                 }], linkDragEnded: [{
@@ -3342,8 +3479,8 @@
         }
         return NgxGanttModule;
     }());
-    NgxGanttModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    NgxGanttModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttModule, declarations: [NgxGanttComponent,
+    NgxGanttModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxGanttModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    NgxGanttModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxGanttModule, declarations: [NgxGanttComponent,
             NgxGanttTableComponent,
             NgxGanttTableColumnComponent,
             GanttTableComponent,
@@ -3363,13 +3500,13 @@
             NgxGanttRootComponent,
             NgxGanttBarComponent,
             NgxGanttRangeComponent] });
-    NgxGanttModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: NgxGanttModule, providers: [
+    NgxGanttModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", 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: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxGanttModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [i2.CommonModule, i1.DragDropModule],
@@ -3417,195 +3554,131 @@
 
     Object.defineProperty(exports, 'addDays', {
         enumerable: true,
-        get: function () {
-            return dateFns.addDays;
-        }
+        get: function () { return dateFns.addDays; }
     });
     Object.defineProperty(exports, 'addHours', {
         enumerable: true,
-        get: function () {
-            return dateFns.addHours;
-        }
+        get: function () { return dateFns.addHours; }
     });
     Object.defineProperty(exports, 'addMinutes', {
         enumerable: true,
-        get: function () {
-            return dateFns.addMinutes;
-        }
+        get: function () { return dateFns.addMinutes; }
     });
     Object.defineProperty(exports, 'addMonths', {
         enumerable: true,
-        get: function () {
-            return dateFns.addMonths;
-        }
+        get: function () { return dateFns.addMonths; }
     });
     Object.defineProperty(exports, 'addQuarters', {
         enumerable: true,
-        get: function () {
-            return dateFns.addQuarters;
-        }
+        get: function () { return dateFns.addQuarters; }
     });
     Object.defineProperty(exports, 'addSeconds', {
         enumerable: true,
-        get: function () {
-            return dateFns.addSeconds;
-        }
+        get: function () { return dateFns.addSeconds; }
     });
     Object.defineProperty(exports, 'addWeeks', {
         enumerable: true,
-        get: function () {
-            return dateFns.addWeeks;
-        }
+        get: function () { return dateFns.addWeeks; }
     });
     Object.defineProperty(exports, 'addYears', {
         enumerable: true,
-        get: function () {
-            return dateFns.addYears;
-        }
+        get: function () { return dateFns.addYears; }
     });
     Object.defineProperty(exports, 'differenceInCalendarDays', {
         enumerable: true,
-        get: function () {
-            return dateFns.differenceInCalendarDays;
-        }
+        get: function () { return dateFns.differenceInCalendarDays; }
     });
     Object.defineProperty(exports, 'differenceInCalendarQuarters', {
         enumerable: true,
-        get: function () {
-            return dateFns.differenceInCalendarQuarters;
-        }
+        get: function () { return dateFns.differenceInCalendarQuarters; }
     });
     Object.defineProperty(exports, 'differenceInDays', {
         enumerable: true,
-        get: function () {
-            return dateFns.differenceInDays;
-        }
+        get: function () { return dateFns.differenceInDays; }
     });
     Object.defineProperty(exports, 'eachDayOfInterval', {
         enumerable: true,
-        get: function () {
-            return dateFns.eachDayOfInterval;
-        }
+        get: function () { return dateFns.eachDayOfInterval; }
     });
     Object.defineProperty(exports, 'eachMonthOfInterval', {
         enumerable: true,
-        get: function () {
-            return dateFns.eachMonthOfInterval;
-        }
+        get: function () { return dateFns.eachMonthOfInterval; }
     });
     Object.defineProperty(exports, 'eachWeekOfInterval', {
         enumerable: true,
-        get: function () {
-            return dateFns.eachWeekOfInterval;
-        }
+        get: function () { return dateFns.eachWeekOfInterval; }
     });
     Object.defineProperty(exports, 'endOfDay', {
         enumerable: true,
-        get: function () {
-            return dateFns.endOfDay;
-        }
+        get: function () { return dateFns.endOfDay; }
     });
     Object.defineProperty(exports, 'endOfMonth', {
         enumerable: true,
-        get: function () {
-            return dateFns.endOfMonth;
-        }
+        get: function () { return dateFns.endOfMonth; }
     });
     Object.defineProperty(exports, 'endOfQuarter', {
         enumerable: true,
-        get: function () {
-            return dateFns.endOfQuarter;
-        }
+        get: function () { return dateFns.endOfQuarter; }
     });
     Object.defineProperty(exports, 'endOfWeek', {
         enumerable: true,
-        get: function () {
-            return dateFns.endOfWeek;
-        }
+        get: function () { return dateFns.endOfWeek; }
     });
     Object.defineProperty(exports, 'endOfYear', {
         enumerable: true,
-        get: function () {
-            return dateFns.endOfYear;
-        }
+        get: function () { return dateFns.endOfYear; }
     });
     Object.defineProperty(exports, 'format', {
         enumerable: true,
-        get: function () {
-            return dateFns.format;
-        }
+        get: function () { return dateFns.format; }
     });
     Object.defineProperty(exports, 'fromUnixTime', {
         enumerable: true,
-        get: function () {
-            return dateFns.fromUnixTime;
-        }
+        get: function () { return dateFns.fromUnixTime; }
     });
     Object.defineProperty(exports, 'getDaysInMonth', {
         enumerable: true,
-        get: function () {
-            return dateFns.getDaysInMonth;
-        }
+        get: function () { return dateFns.getDaysInMonth; }
     });
     Object.defineProperty(exports, 'getUnixTime', {
         enumerable: true,
-        get: function () {
-            return dateFns.getUnixTime;
-        }
+        get: function () { return dateFns.getUnixTime; }
     });
     Object.defineProperty(exports, 'getWeek', {
         enumerable: true,
-        get: function () {
-            return dateFns.getWeek;
-        }
+        get: function () { return dateFns.getWeek; }
     });
     Object.defineProperty(exports, 'isToday', {
         enumerable: true,
-        get: function () {
-            return dateFns.isToday;
-        }
+        get: function () { return dateFns.isToday; }
     });
     Object.defineProperty(exports, 'isWeekend', {
         enumerable: true,
-        get: function () {
-            return dateFns.isWeekend;
-        }
+        get: function () { return dateFns.isWeekend; }
     });
     Object.defineProperty(exports, 'setDate', {
         enumerable: true,
-        get: function () {
-            return dateFns.setDate;
-        }
+        get: function () { return dateFns.setDate; }
     });
     Object.defineProperty(exports, 'startOfDay', {
         enumerable: true,
-        get: function () {
-            return dateFns.startOfDay;
-        }
+        get: function () { return dateFns.startOfDay; }
     });
     Object.defineProperty(exports, 'startOfMonth', {
         enumerable: true,
-        get: function () {
-            return dateFns.startOfMonth;
-        }
+        get: function () { return dateFns.startOfMonth; }
     });
     Object.defineProperty(exports, 'startOfQuarter', {
         enumerable: true,
-        get: function () {
-            return dateFns.startOfQuarter;
-        }
+        get: function () { return dateFns.startOfQuarter; }
     });
     Object.defineProperty(exports, 'startOfWeek', {
         enumerable: true,
-        get: function () {
-            return dateFns.startOfWeek;
-        }
+        get: function () { return dateFns.startOfWeek; }
     });
     Object.defineProperty(exports, 'startOfYear', {
         enumerable: true,
-        get: function () {
-            return dateFns.startOfYear;
-        }
+        get: function () { return dateFns.startOfYear; }
     });
     exports.GANTT_GLOBAL_CONFIG = GANTT_GLOBAL_CONFIG;
     exports.GANTT_UPPER_TOKEN = GANTT_UPPER_TOKEN;
@@ -3640,5 +3713,5 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=worktile-gantt.umd.js.map