@worktile/gantt 13.1.0 → 14.0.0

package/fesm2015/worktile-gantt.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Directive, Inject, Input, Output, ContentChild, HostBinding, Component, Pipe, ViewChild, PLATFORM_ID, Injectable, ElementRef, Optional, SkipSelf, ViewChildren, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
+import { InjectionToken, EventEmitter, Directive, Inject, Input, Output, ContentChild, HostBinding, Component, Pipe, ViewChild, Injectable, PLATFORM_ID, ElementRef, Optional, SkipSelf, ViewChildren, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
 import { isPlatformServer, CommonModule } from '@angular/common';
-import { take, takeUntil, skip, map, pairwise, auditTime, startWith, debounceTime, switchMap, finalize } from 'rxjs/operators';
-import { BehaviorSubject, Subject, from, merge, fromEvent, Observable, EMPTY } from 'rxjs';
+import { take, takeUntil, skip, debounceTime, map, pairwise, auditTime, startWith, switchMap, finalize } from 'rxjs/operators';
+import { BehaviorSubject, Subject, from, merge, fromEvent, Observable, EMPTY, takeUntil as takeUntil$1 } from 'rxjs';
 import { fromUnixTime, getWeek, getDaysInMonth, differenceInCalendarDays, setDate, addSeconds, addMinutes, addHours, addDays, addWeeks, addMonths, addQuarters, addYears, startOfDay, startOfWeek, startOfMonth, startOfQuarter, startOfYear, endOfDay, endOfWeek, endOfMonth, endOfQuarter, endOfYear, getUnixTime, format, isWeekend, isToday, differenceInDays, differenceInCalendarQuarters, eachMonthOfInterval, eachYearOfInterval, eachWeekOfInterval, eachDayOfInterval, differenceInCalendarYears } from 'date-fns';
 export { addDays, addHours, addMinutes, addMonths, addQuarters, addSeconds, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarQuarters, differenceInDays, eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, endOfDay, endOfMonth, endOfQuarter, endOfWeek, endOfYear, format, fromUnixTime, getDaysInMonth, getUnixTime, getWeek, isToday, isWeekend, setDate, startOfDay, startOfMonth, startOfQuarter, startOfWeek, startOfYear } from 'date-fns';
 import { SelectionModel } from '@angular/cdk/collections';
 import { coerceBooleanProperty, coerceCssPixelValue } from '@angular/cdk/coercion';
-import * as i1 from '@angular/cdk/drag-drop';
+import * as i1$1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { __awaiter, __decorate, __param } from 'tslib';
+import { __decorate, __param, __awaiter } from 'tslib';
 
 class GanttDatePoint {
     constructor(start, text, x, y, additions) {
@@ -326,6 +326,22 @@ class GanttGroupInternal {
     }
 }
 
+class GanttBaselineItemInternal {
+    constructor(item) {
+        this.refs$ = new BehaviorSubject(null);
+        this.origin = item;
+        this.id = this.origin.id;
+        this.start = item.start ? new GanttDate(item.start) : null;
+        this.end = item.end ? new GanttDate(item.end) : null;
+    }
+    get refs() {
+        return this.refs$.getValue();
+    }
+    updateRefs(refs) {
+        this.refs$.next(refs);
+    }
+}
+
 const defaultConfig = {
     dateFormat: {
         week: '第w周',
@@ -784,6 +800,14 @@ function getFlatItems(items) {
     });
     return result;
 }
+function keyBy(array, key) {
+    const result = {};
+    array.forEach((item) => {
+        const keyValue = item[key];
+        result[keyValue] = item;
+    });
+    return result;
+}
 
 class GanttUpper {
     constructor(elementRef, cdr, ngZone, config) {
@@ -795,6 +819,8 @@ class GanttUpper {
         this.originItems = [];
         // eslint-disable-next-line @angular-eslint/no-input-rename
         this.originGroups = [];
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.originBaselineItems = [];
         this.viewType = GanttViewType.month;
         this.showTodayLine = true;
         this.viewOptions = {};
@@ -806,6 +832,8 @@ class GanttUpper {
         this.linkDragEnded = new EventEmitter();
         this.items = [];
         this.groups = [];
+        this.baselineItems = [];
+        this.baselineItemsMap = {};
         this.viewChange = new EventEmitter();
         this.expandChange = new EventEmitter();
         this.firstChange = true;
@@ -879,6 +907,15 @@ class GanttUpper {
             });
         }
     }
+    setupBaselineItems() {
+        this.originBaselineItems = uniqBy(this.originBaselineItems, 'id');
+        this.baselineItems = [];
+        this.originBaselineItems.forEach((origin) => {
+            const item = new GanttBaselineItemInternal(origin);
+            this.baselineItems.push(item);
+        });
+        this.baselineItemsMap = keyBy(this.baselineItems, 'id');
+    }
     setupExpandedState() {
         this.originItems = uniqBy(this.originItems, 'id');
         let items = [];
@@ -949,6 +986,8 @@ class GanttUpper {
         this.setupGroups();
         this.setupItems();
         this.computeRefs();
+        this.setupBaselineItems();
+        this.computeItemsRefs(...this.baselineItems);
         this.initSelectionModel();
         this.firstChange = false;
         // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
@@ -983,6 +1022,8 @@ class GanttUpper {
                 this.setupGroups();
                 this.setupItems();
                 this.computeRefs();
+                this.setupBaselineItems();
+                this.computeItemsRefs(...this.baselineItems);
                 this.viewChange.emit(this.view);
             }
             if (changes.originItems || changes.originGroups) {
@@ -991,6 +1032,10 @@ class GanttUpper {
                 this.setupItems();
                 this.computeRefs();
             }
+            if (changes.originBaselineItems) {
+                this.setupBaselineItems();
+                this.computeItemsRefs(...this.baselineItems);
+            }
         }
     }
     ngOnDestroy() {
@@ -1047,9 +1092,9 @@ class GanttUpper {
         return this.selectionModel.isSelected(id);
     }
 }
-GanttUpper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttUpper, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Directive });
-GanttUpper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttUpper, decorators: [{
+GanttUpper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttUpper, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Directive });
+GanttUpper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], originBaselineItems: ["baselineItems", "originBaselineItems"], 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttUpper, decorators: [{
             type: Directive
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
@@ -1062,6 +1107,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
             }], originGroups: [{
                 type: Input,
                 args: ['groups']
+            }], originBaselineItems: [{
+                type: Input,
+                args: ['baselineItems']
             }], viewType: [{
                 type: Input
             }], start: [{
@@ -1123,9 +1171,9 @@ class NgxGanttTableColumnComponent {
         this.columnWidth = coerceCssPixelValue(width);
     }
 }
-NgxGanttTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttTableColumnComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttTableColumnComponent, decorators: [{
+NgxGanttTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttTableColumnComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttTableColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-gantt-column',
@@ -1153,9 +1201,9 @@ class NgxGanttTableComponent {
         this.columnChanges = new EventEmitter();
     }
 }
-NgxGanttTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttTableComponent, decorators: [{
+NgxGanttTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttTableComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-gantt-table',
@@ -1293,9 +1341,9 @@ class GanttIconComponent {
         }
     }
 }
-GanttIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttIconComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GanttIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: GanttIconComponent, selector: "gantt-icon", inputs: { iconName: "iconName" }, host: { properties: { "class.gantt-icon": "this.isIcon" } }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttIconComponent, decorators: [{
+GanttIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttIconComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GanttIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: GanttIconComponent, selector: "gantt-icon", inputs: { iconName: "iconName" }, host: { properties: { "class.gantt-icon": "this.isIcon" } }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'gantt-icon',
@@ -1313,9 +1361,9 @@ class IsGanttRangeItemPipe {
         return value === GanttItemType.range;
     }
 }
-IsGanttRangeItemPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: IsGanttRangeItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-IsGanttRangeItemPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: IsGanttRangeItemPipe, name: "isGanttRangeItem" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: IsGanttRangeItemPipe, decorators: [{
+IsGanttRangeItemPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IsGanttRangeItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+IsGanttRangeItemPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: IsGanttRangeItemPipe, name: "isGanttRangeItem" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IsGanttRangeItemPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'isGanttRangeItem'
@@ -1326,9 +1374,9 @@ class IsGanttBarItemPipe {
         return value === GanttItemType.bar;
     }
 }
-IsGanttBarItemPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: IsGanttBarItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-IsGanttBarItemPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: IsGanttBarItemPipe, name: "isGanttBarItem" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: IsGanttBarItemPipe, decorators: [{
+IsGanttBarItemPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IsGanttBarItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+IsGanttBarItemPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: IsGanttBarItemPipe, name: "isGanttBarItem" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IsGanttBarItemPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'isGanttBarItem'
@@ -1339,9 +1387,9 @@ class IsGanttCustomItemPipe {
         return value === GanttItemType.custom;
     }
 }
-IsGanttCustomItemPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: IsGanttCustomItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-IsGanttCustomItemPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: IsGanttCustomItemPipe, name: "isGanttCustomItem" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: IsGanttCustomItemPipe, decorators: [{
+IsGanttCustomItemPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IsGanttCustomItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+IsGanttCustomItemPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: IsGanttCustomItemPipe, name: "isGanttCustomItem" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: IsGanttCustomItemPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'isGanttCustomItem'
@@ -1461,9 +1509,9 @@ class GanttTableComponent {
         return item.id || index;
     }
 }
-GanttTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttTableComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GanttTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "isGanttRangeItem": IsGanttRangeItemPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttTableComponent, decorators: [{
+GanttTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttTableComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GanttTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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, 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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gantt-table', 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" }]
         }], ctorParameters: function () {
@@ -1501,147 +1549,185 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 args: ['class.gantt-table-empty']
             }] } });
 
-/** Cached result of whether the user's browser supports passive event listeners. */
-let 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: () => (supportsPassiveEvents = true)
-            }));
-        }
-        finally {
-            supportsPassiveEvents = supportsPassiveEvents || false;
+class GanttLinkLine {
+    constructor() { }
+    generatePath(source, target, type) {
+        if (source.before && source.after && target.before && target.after) {
+            let path = '';
+            switch (type) {
+                case GanttLinkType.ss:
+                    path = this.generateSSPath(source, target);
+                    break;
+                case GanttLinkType.ff:
+                    path = this.generateFFPath(source, target);
+                    break;
+                case GanttLinkType.sf:
+                    path = this.generateFSAndSFPath(source, target, type);
+                    break;
+                default:
+                    path = this.generateFSAndSFPath(source, target);
+            }
+            return path;
         }
     }
-    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. */
-const passiveListenerOptions = normalizePassiveListenerOptions({ passive: true });
 
-const scrollThreshold = 50;
-var ScrollDirection;
-(function (ScrollDirection) {
-    ScrollDirection[ScrollDirection["NONE"] = 0] = "NONE";
-    ScrollDirection[ScrollDirection["LEFT"] = 1] = "LEFT";
-    ScrollDirection[ScrollDirection["RIGHT"] = 2] = "RIGHT";
-})(ScrollDirection || (ScrollDirection = {}));
-class GanttDomService {
-    constructor(ngZone, platformId) {
-        this.ngZone = ngZone;
-        this.platformId = platformId;
-        this.unsubscribe$ = new Subject();
+let GanttLinkLineCurve = class GanttLinkLineCurve extends GanttLinkLine {
+    constructor(ganttUpper) {
+        super();
+        this.ganttUpper = ganttUpper;
     }
-    monitorScrollChange() {
-        this.ngZone.runOutsideAngular(() => merge(fromEvent(this.mainContainer, 'scroll', passiveListenerOptions), fromEvent(this.sideContainer, 'scroll', passiveListenerOptions))
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe((event) => {
-            this.syncScroll(event);
-        }));
-        // 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');
-        //         // }
-        //     });
+    generateSSPath(source, target) {
+        const x1 = source.before.x;
+        const y1 = source.before.y;
+        const x4 = target.before.x;
+        const y4 = target.before.y;
+        const isMirror = y4 > y1 ? 0 : 1;
+        const radius = Math.abs(y4 - y1) / 2;
+        if (x4 > x1) {
+            return `M ${x1} ${y1}
+                    A ${radius} ${radius} 0 1 ${isMirror} ${x1} ${y4}
+                    L ${x4} ${y4}`;
+        }
+        else {
+            return `M ${x1} ${y1}
+                    L ${x4} ${y1}
+                    A ${radius} ${radius} 0 1 ${isMirror} ${x4} ${y4}`;
+        }
     }
-    syncScroll(event) {
-        const target = event.currentTarget;
-        this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
-        this.sideContainer.scrollTop = target.scrollTop;
-        this.mainContainer.scrollTop = target.scrollTop;
+    generateFFPath(source, target) {
+        const x1 = source.after.x;
+        const y1 = source.after.y;
+        const x4 = target.after.x;
+        const y4 = target.after.y;
+        const isMirror = y4 > y1 ? 1 : 0;
+        const radius = Math.abs(y4 - y1) / 2;
+        if (x4 > x1) {
+            return `M ${x1} ${y1}
+                    L ${x4} ${y1}
+                    A ${radius} ${radius} 0 1 ${isMirror} ${x4} ${y4}`;
+        }
+        else {
+            return `M ${x1} ${y1}
+                    A ${radius} ${radius} 0 1 ${isMirror} ${x1} ${y4}
+                    L ${x4} ${y4}`;
+        }
     }
-    disableBrowserWheelEvent() {
-        const container = this.mainContainer;
-        this.ngZone.runOutsideAngular(() => fromEvent(container, 'wheel')
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe((event) => {
-            const delta = event.deltaX;
-            if (!delta) {
-                return;
+    generateFSAndSFPath(source, target, type) {
+        var _a;
+        let x1 = source.after.x;
+        let y1 = source.after.y;
+        let x4 = target.before.x;
+        let y4 = target.before.y;
+        const bezierWeight = 0.5;
+        if (type === GanttLinkType.sf) {
+            x1 = target.after.x;
+            y1 = target.after.y;
+            x4 = source.before.x;
+            y4 = source.before.y;
+        }
+        let dx = Math.abs(x4 - x1) * bezierWeight;
+        let x2 = x1 + dx;
+        let x3 = x4 - dx;
+        const centerX = (x1 + x4) / 2;
+        const centerY = (y1 + y4) / 2;
+        let controlX = this.ganttUpper.styles.lineHeight / 2;
+        const controlY = this.ganttUpper.styles.lineHeight / 2;
+        if (x1 >= x4) {
+            if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
+                return `M ${x1} ${y1}
+                    C ${x1 + controlX} ${y1} ${x1 + controlX} ${y4 > y1 ? y1 + controlX : y1 - controlX} ${x1} ${y4 > y1 ? y1 + controlY : y1 - controlY}
+                    L ${x4} ${y4 > y1 ? y4 - controlY : y4 + controlY}
+                    C ${x4 - controlY} ${y4 > y1 ? y4 - controlY : y4 + controlY}  ${x4 - controlX} ${y4} ${x4} ${y4}
+                    `;
             }
-            if ((container.scrollLeft + container.offsetWidth === container.scrollWidth && delta > 0) ||
-                (container.scrollLeft === 0 && delta < 0)) {
-                event.preventDefault();
+            else {
+                controlX = this.ganttUpper.styles.lineHeight;
+                return `M ${x1} ${y1}
+                    C ${x1 + controlX} ${y1} ${x1 + controlX} ${y4 > y1 ? y1 + controlX : y1 - controlX} ${centerX} ${centerY}
+                    C ${x4 - controlX} ${y4 > y1 ? y4 - controlX : y4 + controlX} ${x4 - controlX} ${y4} ${x4} ${y4}
+                    `;
             }
-        }));
+        }
+        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}`;
     }
-    initialize(root) {
-        this.root = root.nativeElement;
-        this.side = this.root.getElementsByClassName('gantt-side')[0];
-        this.container = this.root.getElementsByClassName('gantt-container')[0];
-        this.sideContainer = this.root.getElementsByClassName('gantt-side-container')[0];
-        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
-        this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-overlay')[0];
-        this.monitorScrollChange();
-        this.disableBrowserWheelEvent();
+};
+GanttLinkLineCurve = __decorate([
+    __param(0, Inject(GANTT_UPPER_TOKEN))
+], GanttLinkLineCurve);
+
+class GanttLinkLineStraight extends GanttLinkLine {
+    constructor() {
+        super();
+        this.pathControl = 20;
     }
-    /**
-     * @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.
-     */
-    getViewerScroll(options) {
-        return new Observable((subscriber) => this.ngZone.runOutsideAngular(() => fromEvent(this.mainContainer, 'scroll', options)
-            .pipe(map(() => this.mainContainer.scrollLeft), pairwise(), map(([previous, current]) => {
-            const event = {
-                target: this.mainContainer,
-                direction: ScrollDirection.NONE
-            };
-            if (current - previous < 0) {
-                if (this.mainContainer.scrollLeft < scrollThreshold && this.mainContainer.scrollLeft > 0) {
-                    event.direction = ScrollDirection.LEFT;
-                }
-            }
-            if (current - previous > 0) {
-                if (this.mainContainer.scrollWidth - this.mainContainer.clientWidth - this.mainContainer.scrollLeft <
-                    scrollThreshold) {
-                    event.direction = ScrollDirection.RIGHT;
-                }
-            }
-            return event;
-        }))
-            .subscribe(subscriber)));
+    generateSSPath(source, target) {
+        const x1 = source.before.x;
+        const y1 = source.before.y;
+        const x4 = target.before.x;
+        const y4 = target.before.y;
+        const control = this.pathControl;
+        return `M ${x1} ${y1}
+                        L ${x4 > x1 ? x1 - control : x4 - control} ${y1}
+                        L ${x4 > x1 ? x1 - control : x4 - control} ${y4}
+                        L ${x4} ${y4}`;
     }
-    getResize() {
-        return isPlatformServer(this.platformId) ? EMPTY : fromEvent(window, 'resize').pipe(auditTime(150));
+    generateFFPath(source, target) {
+        const x1 = source.after.x;
+        const y1 = source.after.y;
+        const x4 = target.after.x;
+        const y4 = target.after.y;
+        const control = this.pathControl;
+        return `M ${x1} ${y1}
+                        L ${x4 > x1 ? x4 + control : x1 + control} ${y1}
+                        L ${x4 > x1 ? x4 + control : x1 + control} ${y4}
+                        L ${x4} ${y4}`;
     }
-    scrollMainContainer(left) {
-        if (isNumber(left)) {
-            const scrollLeft = left - this.mainContainer.clientWidth / 2;
-            this.mainContainer.scrollLeft = scrollLeft > scrollThreshold ? scrollLeft : 0;
-            this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
+    generateFSAndSFPath(source, target, type) {
+        let x1 = source.after.x;
+        let y1 = source.after.y;
+        let x4 = target.before.x;
+        let y4 = target.before.y;
+        const control = this.pathControl;
+        if (type === GanttLinkType.sf) {
+            x1 = target.after.x;
+            y1 = target.after.y;
+            x4 = source.before.x;
+            y4 = source.before.y;
+        }
+        if (x4 - x1 >= 40) {
+            return `M ${x1} ${y1}
+                        L ${x1 + control} ${y1}
+                        L ${x1 + control} ${y4}
+                        L ${x4} ${y4}`;
+        }
+        else {
+            return `M ${x1} ${y1}
+                        L ${x1 + control} ${y1}
+                        L ${x1 + control} ${y4 > y1 ? y1 + control : y1 - control}
+                        L ${x4 - control} ${y4 > y1 ? y1 + control : y1 - control}
+                        L ${x4 - control} ${y4}
+                        L ${x4} ${y4}`;
         }
     }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
+}
+
+function createLineGenerator(type, ganttUpper) {
+    switch (type) {
+        case GanttLinkLineType.curve:
+            return new GanttLinkLineCurve(ganttUpper);
+        case GanttLinkLineType.straight:
+            return new GanttLinkLineStraight();
+        default:
+            throw new Error('gantt link path type invalid');
     }
 }
-GanttDomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttDomService, deps: [{ token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
-GanttDomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttDomService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttDomService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () {
-        return [{ type: i0.NgZone }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [PLATFORM_ID]
-                    }] }];
-    } });
 
 function getDependencyType(path, dependencyTypes) {
     if (dependencyTypes.includes(GanttLinkType.ss) && path.from.pos === InBarPosition.start && path.to.pos === InBarPosition.start) {
@@ -1708,9 +1794,9 @@ class GanttDragContainer {
         this.linkDragPath = { from: null, to: null };
     }
 }
-GanttDragContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttDragContainer, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
-GanttDragContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttDragContainer });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttDragContainer, decorators: [{
+GanttDragContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttDragContainer, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
+GanttDragContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttDragContainer });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttDragContainer, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
         return [{ type: GanttUpper, decorators: [{
@@ -1719,718 +1805,617 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     }] }];
     } });
 
-class GanttDragBackdropComponent {
-}
-GanttDragBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttDragBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GanttDragBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop", host: { classAttribute: "gantt-drag-backdrop" }, ngImport: i0, template: "<div class=\"gantt-drag-mask\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttDragBackdropComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gantt-drag-backdrop', host: {
-                        class: 'gantt-drag-backdrop'
-                    }, template: "<div class=\"gantt-drag-mask\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" }]
-        }] });
-
-class GanttPrintService {
-    constructor() { }
-    setInlineStyles(targetElem) {
-        const svgElements = Array.from(targetElem.getElementsByTagName('svg'));
-        for (const svgElement of svgElements) {
-            this.recursElementChildren(svgElement);
-        }
-    }
-    recursElementChildren(node) {
-        const transformProperties = [
-            'fill',
-            'color',
-            'font-size',
-            'stroke',
-            'font',
-            'text-anchor',
-            'stroke-dasharray',
-            'shape-rendering',
-            'stroke-width'
-        ];
-        if (!node.style) {
-            return;
-        }
-        const styles = getComputedStyle(node);
-        for (const transformProperty of transformProperties) {
-            node.style[transformProperty] = styles[transformProperty];
-        }
-        for (const child of Array.from(node.childNodes)) {
-            this.recursElementChildren(child);
-        }
-    }
-    register(root) {
-        this.root = root.nativeElement;
-        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
-    }
-    print(name = 'download', ignoreElementClass) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const root = this.root;
-            const mainContainer = this.mainContainer;
-            // set print width
-            const printWidth = root.offsetWidth;
-            // set print height
-            const printHeight = root.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
-            const html2canvas = (yield import(/* webpackChunkName: 'html2canvas' */ 'html2canvas')).default;
-            html2canvas(root, {
-                logging: false,
-                allowTaint: true,
-                useCORS: true,
-                width: printWidth,
-                height: printHeight,
-                ignoreElements: (element) => {
-                    if (ignoreElementClass && element.classList.contains(ignoreElementClass)) {
-                        return true;
-                    }
-                    if (element.classList.contains('gantt-calendar-today-overlay')) {
-                        return true;
-                    }
-                },
-                onclone: (cloneDocument) => {
-                    const ganttClass = root.className;
-                    const cloneGanttDom = cloneDocument.querySelector(`.${ganttClass.replace(/\s+/g, '.')}`);
-                    const cloneGanttContainerDom = cloneDocument.querySelector('.gantt-container');
-                    const cloneCalendarOverlay = cloneDocument.querySelector('.gantt-calendar-overlay-main');
-                    const 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((canvas) => {
-                const link = document.createElement('a');
-                const dataUrl = canvas.toDataURL('image/png');
-                link.download = `${name}.png`;
-                link.href = dataUrl;
-                link.click();
-            });
-        });
-    }
-}
-GanttPrintService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttPrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-GanttPrintService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttPrintService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttPrintService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-const mainHeight = 5000;
-class GanttCalendarComponent {
-    constructor(ganttUpper, ngZone, elementRef) {
+class GanttLinksComponent {
+    constructor(ganttUpper, cdr, elementRef, ganttDragContainer) {
         this.ganttUpper = ganttUpper;
-        this.ngZone = ngZone;
+        this.cdr = cdr;
         this.elementRef = elementRef;
-        this.headerHeight = headerHeight;
-        this.mainHeight = mainHeight;
-        this.todayHeight = todayHeight;
-        this.todayWidth = todayWidth;
-        this.todayBorderRadius = todayBorderRadius;
-        this.viewTypes = GanttViewType;
-        this.className = true;
+        this.ganttDragContainer = ganttDragContainer;
+        this.groups = [];
+        this.items = [];
+        this.lineClick = new EventEmitter();
+        this.links = [];
+        this.ganttLinkTypes = GanttLinkType;
+        this.showArrow = false;
+        this.linkItems = [];
+        this.firstChange = true;
         this.unsubscribe$ = new Subject();
+        this.ganttLinksOverlay = true;
     }
-    get view() {
-        return this.ganttUpper.view;
+    ngOnInit() {
+        this.linkLine = createLineGenerator(this.ganttUpper.linkOptions.lineType, this.ganttUpper);
+        this.showArrow = this.ganttUpper.linkOptions.showArrow;
+        this.buildLinks();
+        this.firstChange = false;
+        this.ganttDragContainer.dragStarted.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.elementRef.nativeElement.style.visibility = 'hidden';
+        });
+        merge(this.ganttUpper.viewChange, this.ganttUpper.expandChange, this.ganttUpper.view.start$, this.ganttUpper.dragEnded, this.ganttUpper.linkDragEnded)
+            .pipe(skip(1), debounceTime(0), takeUntil(this.unsubscribe$))
+            .subscribe(() => {
+            this.elementRef.nativeElement.style.visibility = 'visible';
+            this.buildLinks();
+            this.cdr.detectChanges();
+        });
     }
-    setTodayPoint() {
-        const x = this.view.getTodayXPoint();
-        const today = new GanttDate().getDate();
-        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
-        const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0];
-        const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0];
-        if (isNumber(x)) {
-            if (rect) {
-                rect.style.left = `${x - todayWidth / 2}px`;
-                rect.style.top = `${headerHeight - todayHeight}px`;
-                rect.innerHTML = today.toString();
-            }
-            if (line) {
-                line.style.left = `${x}px`;
-                line.style.top = `${headerHeight}px`;
-                line.style.bottom = `${-mainHeight}px`;
-            }
+    ngOnChanges() {
+        if (!this.firstChange) {
+            this.buildLinks();
+        }
+    }
+    computeItemPosition() {
+        const lineHeight = this.ganttUpper.styles.lineHeight;
+        const barHeight = this.ganttUpper.styles.barHeight;
+        this.linkItems = [];
+        if (this.groups.length > 0) {
+            let itemNum = 0;
+            let groupNum = 0;
+            this.groups.forEach((group) => {
+                groupNum++;
+                if (group.expanded) {
+                    const items = recursiveItems(group.items);
+                    items.forEach((item, itemIndex) => {
+                        const y = (groupNum + itemNum + itemIndex) * lineHeight + item.refs.y + barHeight / 2;
+                        this.linkItems.push(Object.assign(Object.assign({}, item), { before: {
+                                x: item.refs.x,
+                                y
+                            }, after: {
+                                x: item.refs.x + item.refs.width,
+                                y
+                            } }));
+                    });
+                    itemNum += items.length;
+                }
+            });
         }
         else {
-            todayEle.style.display = 'none';
+            const items = recursiveItems(this.items);
+            items.forEach((item, itemIndex) => {
+                const y = itemIndex * lineHeight + item.refs.y + barHeight / 2;
+                this.linkItems.push(Object.assign(Object.assign({}, item), { before: {
+                        x: item.refs.x,
+                        y
+                    }, after: {
+                        x: item.refs.x + item.refs.width,
+                        y
+                    } }));
+            });
         }
     }
-    ngOnInit() {
-        // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
-        // the `onStable` will never emit any value.
-        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
-        // Normally this isn't in the zone, but it can cause performance regressions for apps
-        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
-        this.ngZone.runOutsideAngular(() => {
-            onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-                merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
-                    .pipe(takeUntil(this.unsubscribe$))
-                    .subscribe(() => {
-                    this.setTodayPoint();
+    buildLinks() {
+        this.computeItemPosition();
+        this.links = [];
+        this.linkItems.forEach((source) => {
+            if (source.origin.start || source.origin.end) {
+                source.links.forEach((link) => {
+                    const target = this.linkItems.find((item) => item.id === link.link);
+                    if (target && (target.origin.start || target.origin.end)) {
+                        let defaultColor = LinkColors.default;
+                        let activeColor = LinkColors.active;
+                        if (link.type === GanttLinkType.fs && source.end.getTime() > target.start.getTime()) {
+                            defaultColor = LinkColors.blocked;
+                            activeColor = 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.linkLine.generatePath(source, target, link.type),
+                            source: source.origin,
+                            target: target.origin,
+                            type: link.type,
+                            color: defaultColor,
+                            defaultColor,
+                            activeColor
+                        });
+                    }
                 });
-            });
+            }
         });
     }
-    trackBy(index, point) {
-        return point.text || index;
+    trackBy(index) {
+        return index;
+    }
+    onLineClick(event, link) {
+        this.lineClick.emit({
+            event,
+            source: link.source,
+            target: link.target
+        });
+    }
+    mouseEnterPath(link, index) {
+        link.color = link.activeColor || link.defaultColor;
+        if (index < this.links.length - 1) {
+            this.links.splice(index, 1);
+            this.links.push(link);
+        }
+    }
+    mouseLeavePath(link) {
+        link.color = link.defaultColor;
     }
     ngOnDestroy() {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }
 }
-GanttCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttCalendarComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GanttCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: GanttCalendarComponent, selector: "gantt-calendar-overlay", host: { properties: { "class.gantt-calendar-overlay": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n  <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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttCalendarComponent, decorators: [{
+GanttLinksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttLinksComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: GanttDragContainer }], target: i0.ɵɵFactoryTarget.Component });
+GanttLinksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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, template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  <ng-container *ngFor=\"let link of links; let i = index; trackBy: trackBy\">\n    <path\n      [attr.d]=\"link.path\"\n      fill=\"transparent\"\n      stroke-width=\"2\"\n      [attr.stroke]=\"link.color\"\n      pointer-events=\"none\"\n      [attr.style]=\"link.type === ganttLinkTypes.sf ? 'marker-start: url(#triangle' + i + ')' : 'marker-end: url(#triangle' + i + ')'\"\n    ></path>\n\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        [attr.d]=\"link.path\"\n        (mouseenter)=\"mouseEnterPath(link, i)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n    <defs *ngIf=\"showArrow\">\n      <marker\n        *ngIf=\"link.type === ganttLinkTypes.sf; else markerEnd\"\n        [id]=\"'triangle' + i\"\n        markerUnits=\"strokeWidth\"\n        markerWidth=\"5\"\n        markerHeight=\"4\"\n        refX=\"5\"\n        refY=\"2\"\n        orient=\"180\"\n      >\n        <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n      </marker>\n\n      <ng-template #markerEnd>\n        <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n          <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n        </marker>\n      </ng-template>\n    </defs>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttLinksComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-calendar-overlay', 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" }]
+            args: [{ selector: 'gantt-links-overlay', template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  <ng-container *ngFor=\"let link of links; let i = index; trackBy: trackBy\">\n    <path\n      [attr.d]=\"link.path\"\n      fill=\"transparent\"\n      stroke-width=\"2\"\n      [attr.stroke]=\"link.color\"\n      pointer-events=\"none\"\n      [attr.style]=\"link.type === ganttLinkTypes.sf ? 'marker-start: url(#triangle' + i + ')' : 'marker-end: url(#triangle' + i + ')'\"\n    ></path>\n\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        [attr.d]=\"link.path\"\n        (mouseenter)=\"mouseEnterPath(link, i)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n    <defs *ngIf=\"showArrow\">\n      <marker\n        *ngIf=\"link.type === ganttLinkTypes.sf; else markerEnd\"\n        [id]=\"'triangle' + i\"\n        markerUnits=\"strokeWidth\"\n        markerWidth=\"5\"\n        markerHeight=\"4\"\n        refX=\"5\"\n        refY=\"2\"\n        orient=\"180\"\n      >\n        <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n      </marker>\n\n      <ng-template #markerEnd>\n        <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n          <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n        </marker>\n      </ng-template>\n    </defs>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n" }]
         }], ctorParameters: function () {
         return [{ type: GanttUpper, decorators: [{
                         type: Inject,
                         args: [GANTT_UPPER_TOKEN]
-                    }] }, { type: i0.NgZone }, { type: i0.ElementRef }];
-    }, propDecorators: { className: [{
+                    }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: GanttDragContainer }];
+    }, propDecorators: { groups: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], lineClick: [{
+                type: Output
+            }], ganttLinksOverlay: [{
                 type: HostBinding,
-                args: ['class.gantt-calendar-overlay']
+                args: ['class.gantt-links-overlay']
             }] } });
 
-class NgxGanttRootComponent {
-    constructor(elementRef, ngZone, dom, dragContainer, ganttUpper, printService) {
-        this.elementRef = elementRef;
+/** Cached result of whether the user's browser supports passive event listeners. */
+let 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: () => (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. */
+const passiveListenerOptions = normalizePassiveListenerOptions({ passive: true });
+
+const scrollThreshold = 50;
+var ScrollDirection;
+(function (ScrollDirection) {
+    ScrollDirection[ScrollDirection["NONE"] = 0] = "NONE";
+    ScrollDirection[ScrollDirection["LEFT"] = 1] = "LEFT";
+    ScrollDirection[ScrollDirection["RIGHT"] = 2] = "RIGHT";
+})(ScrollDirection || (ScrollDirection = {}));
+class GanttDomService {
+    constructor(ngZone, platformId) {
         this.ngZone = ngZone;
-        this.dom = dom;
-        this.dragContainer = dragContainer;
-        this.ganttUpper = ganttUpper;
-        this.printService = printService;
+        this.platformId = platformId;
         this.unsubscribe$ = new Subject();
-        this.ganttUpper.dragContainer = dragContainer;
-    }
-    get view() {
-        return this.ganttUpper.view;
     }
-    ngOnInit() {
-        // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
-        // the `onStable` will never emit any value.
-        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
-        // Normally this isn't in the zone, but it can cause performance regressions for apps
-        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
-        this.ngZone.runOutsideAngular(() => {
-            onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-                this.dom.initialize(this.elementRef);
-                if (this.printService) {
-                    this.printService.register(this.elementRef);
-                }
-                this.setupScrollClass();
-                this.setupResize();
-                this.setupViewScroll();
-                // 优化初始化时Scroll滚动体验问题，通过透明度解决，默认透明度为0，滚动结束后恢复
-                this.elementRef.nativeElement.style.opacity = '1';
-                this.ganttUpper.viewChange.pipe(startWith(null), takeUntil(this.unsubscribe$)).subscribe(() => {
-                    this.scrollToToday();
-                });
-            });
-        });
+    monitorScrollChange() {
+        this.ngZone.runOutsideAngular(() => merge(fromEvent(this.mainContainer, 'scroll', passiveListenerOptions), fromEvent(this.sideContainer, 'scroll', passiveListenerOptions))
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe((event) => {
+            this.syncScroll(event);
+        }));
+        // 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');
+        //         // }
+        //     });
     }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
+    syncScroll(event) {
+        const target = event.currentTarget;
+        this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
+        this.sideContainer.scrollTop = target.scrollTop;
+        this.mainContainer.scrollTop = target.scrollTop;
     }
-    setupViewScroll() {
-        if (this.ganttUpper.disabledLoadOnScroll) {
-            return;
-        }
-        this.dom
-            .getViewerScroll(passiveListenerOptions)
+    disableBrowserWheelEvent() {
+        const container = this.mainContainer;
+        this.ngZone.runOutsideAngular(() => fromEvent(container, 'wheel')
             .pipe(takeUntil(this.unsubscribe$))
             .subscribe((event) => {
-            if (event.direction === ScrollDirection.LEFT) {
-                const dates = this.view.addStartDate();
-                if (dates) {
-                    event.target.scrollLeft += this.view.getDateRangeWidth(dates.start, dates.end);
-                    if (this.ganttUpper.loadOnScroll.observers) {
-                        this.ngZone.run(() => this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() }));
-                    }
+            const delta = event.deltaX;
+            if (!delta) {
+                return;
+            }
+            if ((container.scrollLeft + container.offsetWidth === container.scrollWidth && delta > 0) ||
+                (container.scrollLeft === 0 && delta < 0)) {
+                event.preventDefault();
+            }
+        }));
+    }
+    initialize(root) {
+        this.root = root.nativeElement;
+        this.side = this.root.getElementsByClassName('gantt-side')[0];
+        this.container = this.root.getElementsByClassName('gantt-container')[0];
+        this.sideContainer = this.root.getElementsByClassName('gantt-side-container')[0];
+        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
+        this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-overlay')[0];
+        this.monitorScrollChange();
+        this.disableBrowserWheelEvent();
+    }
+    /**
+     * @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.
+     */
+    getViewerScroll(options) {
+        return new Observable((subscriber) => this.ngZone.runOutsideAngular(() => fromEvent(this.mainContainer, 'scroll', options)
+            .pipe(map(() => this.mainContainer.scrollLeft), pairwise(), map(([previous, current]) => {
+            const event = {
+                target: this.mainContainer,
+                direction: ScrollDirection.NONE
+            };
+            if (current - previous < 0) {
+                if (this.mainContainer.scrollLeft < scrollThreshold && this.mainContainer.scrollLeft > 0) {
+                    event.direction = ScrollDirection.LEFT;
                 }
             }
-            if (event.direction === ScrollDirection.RIGHT) {
-                const dates = this.view.addEndDate();
-                if (dates && this.ganttUpper.loadOnScroll.observers) {
-                    this.ngZone.run(() => this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() }));
+            if (current - previous > 0) {
+                if (this.mainContainer.scrollWidth - this.mainContainer.clientWidth - this.mainContainer.scrollLeft <
+                    scrollThreshold) {
+                    event.direction = ScrollDirection.RIGHT;
                 }
             }
-        });
+            return event;
+        }))
+            .subscribe(subscriber)));
     }
-    setupResize() {
-        this.dom
-            .getResize()
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe(() => {
-            this.setupScrollClass();
-        });
+    getResize() {
+        return isPlatformServer(this.platformId) ? EMPTY : fromEvent(window, 'resize').pipe(auditTime(150));
     }
-    setupScrollClass() {
-        const mainContainer = this.dom.mainContainer;
-        const height = mainContainer.offsetHeight;
-        const scrollHeight = mainContainer.scrollHeight;
-        if (scrollHeight > height) {
-            this.elementRef.nativeElement.className = 'gantt gantt-scroll';
-        }
-        else {
-            this.elementRef.nativeElement.className = 'gantt';
+    scrollMainContainer(left) {
+        if (isNumber(left)) {
+            const scrollLeft = left - this.mainContainer.clientWidth / 2;
+            this.mainContainer.scrollLeft = scrollLeft > scrollThreshold ? scrollLeft : 0;
+            this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
         }
     }
-    scrollToToday() {
-        const x = this.view.getTodayXPoint();
-        this.dom.scrollMainContainer(x);
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
     }
 }
-NgxGanttRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttRootComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: GanttDomService }, { token: GanttDragContainer }, { token: GANTT_UPPER_TOKEN }, { token: GanttPrintService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { classAttribute: "gantt" }, providers: [GanttDomService, GanttDragContainer], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "backdrop", first: true, predicate: GanttDragBackdropComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"gantt-side\" [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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttRootComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-gantt-root', providers: [GanttDomService, GanttDragContainer], host: {
-                        class: 'gantt'
-                    }, 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" }]
+GanttDomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttDomService, deps: [{ token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+GanttDomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttDomService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttDomService, decorators: [{
+            type: Injectable
         }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: GanttDomService }, { type: GanttDragContainer }, { type: GanttUpper, decorators: [{
+        return [{ type: i0.NgZone }, { type: undefined, decorators: [{
                         type: Inject,
-                        args: [GANTT_UPPER_TOKEN]
-                    }] }, { type: GanttPrintService, decorators: [{
-                        type: Optional
+                        args: [PLATFORM_ID]
                     }] }];
-    }, propDecorators: { sideWidth: [{
-                type: Input
-            }], sideTemplate: [{
-                type: ContentChild,
-                args: ['sideTemplate', { static: true }]
-            }], mainTemplate: [{
-                type: ContentChild,
-                args: ['mainTemplate', { static: true }]
-            }], backdrop: [{
-                type: ViewChild,
-                args: [GanttDragBackdropComponent, { static: true, read: ElementRef }]
-            }] } });
+    } });
 
-class GanttLinkLine {
-    constructor() { }
-    generatePath(source, target, type) {
-        if (source.before && source.after && target.before && target.after) {
-            let path = '';
-            switch (type) {
-                case GanttLinkType.ss:
-                    path = this.generateSSPath(source, target);
-                    break;
-                case GanttLinkType.ff:
-                    path = this.generateFFPath(source, target);
-                    break;
-                case GanttLinkType.sf:
-                    path = this.generateFSAndSFPath(source, target, type);
-                    break;
-                default:
-                    path = this.generateFSAndSFPath(source, target);
-            }
-            return path;
-        }
-    }
+class GanttDragBackdropComponent {
 }
+GanttDragBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttDragBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GanttDragBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop", host: { classAttribute: "gantt-drag-backdrop" }, ngImport: i0, template: "<div class=\"gantt-drag-mask\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttDragBackdropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gantt-drag-backdrop', host: {
+                        class: 'gantt-drag-backdrop'
+                    }, template: "<div class=\"gantt-drag-mask\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" }]
+        }] });
 
-let GanttLinkLineCurve = class GanttLinkLineCurve extends GanttLinkLine {
-    constructor(ganttUpper) {
-        super();
-        this.ganttUpper = ganttUpper;
-    }
-    generateSSPath(source, target) {
-        const x1 = source.before.x;
-        const y1 = source.before.y;
-        const x4 = target.before.x;
-        const y4 = target.before.y;
-        const isMirror = y4 > y1 ? 0 : 1;
-        const radius = Math.abs(y4 - y1) / 2;
-        if (x4 > x1) {
-            return `M ${x1} ${y1}
-                    A ${radius} ${radius} 0 1 ${isMirror} ${x1} ${y4}
-                    L ${x4} ${y4}`;
-        }
-        else {
-            return `M ${x1} ${y1}
-                    L ${x4} ${y1}
-                    A ${radius} ${radius} 0 1 ${isMirror} ${x4} ${y4}`;
-        }
-    }
-    generateFFPath(source, target) {
-        const x1 = source.after.x;
-        const y1 = source.after.y;
-        const x4 = target.after.x;
-        const y4 = target.after.y;
-        const isMirror = y4 > y1 ? 1 : 0;
-        const radius = Math.abs(y4 - y1) / 2;
-        if (x4 > x1) {
-            return `M ${x1} ${y1}
-                    L ${x4} ${y1}
-                    A ${radius} ${radius} 0 1 ${isMirror} ${x4} ${y4}`;
-        }
-        else {
-            return `M ${x1} ${y1}
-                    A ${radius} ${radius} 0 1 ${isMirror} ${x1} ${y4}
-                    L ${x4} ${y4}`;
+class GanttPrintService {
+    constructor() { }
+    setInlineStyles(targetElem) {
+        const svgElements = Array.from(targetElem.getElementsByTagName('svg'));
+        for (const svgElement of svgElements) {
+            this.recursElementChildren(svgElement);
         }
     }
-    generateFSAndSFPath(source, target, type) {
-        var _a;
-        let x1 = source.after.x;
-        let y1 = source.after.y;
-        let x4 = target.before.x;
-        let y4 = target.before.y;
-        const bezierWeight = 0.5;
-        if (type === GanttLinkType.sf) {
-            x1 = target.after.x;
-            y1 = target.after.y;
-            x4 = source.before.x;
-            y4 = source.before.y;
+    recursElementChildren(node) {
+        const transformProperties = [
+            'fill',
+            'color',
+            'font-size',
+            'stroke',
+            'font',
+            'text-anchor',
+            'stroke-dasharray',
+            'shape-rendering',
+            'stroke-width'
+        ];
+        if (!node.style) {
+            return;
         }
-        let dx = Math.abs(x4 - x1) * bezierWeight;
-        let x2 = x1 + dx;
-        let x3 = x4 - dx;
-        const centerX = (x1 + x4) / 2;
-        const centerY = (y1 + y4) / 2;
-        let controlX = this.ganttUpper.styles.lineHeight / 2;
-        const controlY = this.ganttUpper.styles.lineHeight / 2;
-        if (x1 >= x4) {
-            if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
-                return `M ${x1} ${y1}
-                    C ${x1 + controlX} ${y1} ${x1 + controlX} ${y4 > y1 ? y1 + controlX : y1 - controlX} ${x1} ${y4 > y1 ? y1 + controlY : y1 - controlY}
-                    L ${x4} ${y4 > y1 ? y4 - controlY : y4 + controlY}
-                    C ${x4 - controlY} ${y4 > y1 ? y4 - controlY : y4 + controlY}  ${x4 - controlX} ${y4} ${x4} ${y4}
-                    `;
-            }
-            else {
-                controlX = this.ganttUpper.styles.lineHeight;
-                return `M ${x1} ${y1}
-                    C ${x1 + controlX} ${y1} ${x1 + controlX} ${y4 > y1 ? y1 + controlX : y1 - controlX} ${centerX} ${centerY}
-                    C ${x4 - controlX} ${y4 > y1 ? y4 - controlX : y4 + controlX} ${x4 - controlX} ${y4} ${x4} ${y4}
-                    `;
-            }
+        const styles = getComputedStyle(node);
+        for (const transformProperty of transformProperties) {
+            node.style[transformProperty] = styles[transformProperty];
         }
-        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}`;
+        for (const child of Array.from(node.childNodes)) {
+            this.recursElementChildren(child);
         }
-        return `M ${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
     }
-};
-GanttLinkLineCurve = __decorate([
-    __param(0, Inject(GANTT_UPPER_TOKEN))
-], GanttLinkLineCurve);
-
-class GanttLinkLineStraight extends GanttLinkLine {
-    constructor() {
-        super();
-        this.pathControl = 20;
-    }
-    generateSSPath(source, target) {
-        const x1 = source.before.x;
-        const y1 = source.before.y;
-        const x4 = target.before.x;
-        const y4 = target.before.y;
-        const control = this.pathControl;
-        return `M ${x1} ${y1}
-                        L ${x4 > x1 ? x1 - control : x4 - control} ${y1}
-                        L ${x4 > x1 ? x1 - control : x4 - control} ${y4}
-                        L ${x4} ${y4}`;
-    }
-    generateFFPath(source, target) {
-        const x1 = source.after.x;
-        const y1 = source.after.y;
-        const x4 = target.after.x;
-        const y4 = target.after.y;
-        const control = this.pathControl;
-        return `M ${x1} ${y1}
-                        L ${x4 > x1 ? x4 + control : x1 + control} ${y1}
-                        L ${x4 > x1 ? x4 + control : x1 + control} ${y4}
-                        L ${x4} ${y4}`;
-    }
-    generateFSAndSFPath(source, target, type) {
-        let x1 = source.after.x;
-        let y1 = source.after.y;
-        let x4 = target.before.x;
-        let y4 = target.before.y;
-        const control = this.pathControl;
-        if (type === GanttLinkType.sf) {
-            x1 = target.after.x;
-            y1 = target.after.y;
-            x4 = source.before.x;
-            y4 = source.before.y;
-        }
-        if (x4 - x1 >= 40) {
-            return `M ${x1} ${y1}
-                        L ${x1 + control} ${y1}
-                        L ${x1 + control} ${y4}
-                        L ${x4} ${y4}`;
-        }
-        else {
-            return `M ${x1} ${y1}
-                        L ${x1 + control} ${y1}
-                        L ${x1 + control} ${y4 > y1 ? y1 + control : y1 - control}
-                        L ${x4 - control} ${y4 > y1 ? y1 + control : y1 - control}
-                        L ${x4 - control} ${y4}
-                        L ${x4} ${y4}`;
-        }
+    register(root) {
+        this.root = root.nativeElement;
+        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
     }
-}
-
-function createLineGenerator(type, ganttUpper) {
-    switch (type) {
-        case GanttLinkLineType.curve:
-            return new GanttLinkLineCurve(ganttUpper);
-        case GanttLinkLineType.straight:
-            return new GanttLinkLineStraight();
-        default:
-            throw new Error('gantt link path type invalid');
+    print(name = 'download', ignoreElementClass) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const root = this.root;
+            const mainContainer = this.mainContainer;
+            // set print width
+            const printWidth = root.offsetWidth;
+            // set print height
+            const printHeight = root.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
+            const html2canvas = (yield import(/* webpackChunkName: 'html2canvas' */ 'html2canvas')).default;
+            html2canvas(root, {
+                logging: false,
+                allowTaint: true,
+                useCORS: true,
+                width: printWidth,
+                height: printHeight,
+                ignoreElements: (element) => {
+                    if (ignoreElementClass && element.classList.contains(ignoreElementClass)) {
+                        return true;
+                    }
+                    if (element.classList.contains('gantt-calendar-today-overlay')) {
+                        return true;
+                    }
+                },
+                onclone: (cloneDocument) => {
+                    const ganttClass = root.className;
+                    const cloneGanttDom = cloneDocument.querySelector(`.${ganttClass.replace(/\s+/g, '.')}`);
+                    const cloneGanttContainerDom = cloneDocument.querySelector('.gantt-container');
+                    const cloneCalendarOverlay = cloneDocument.querySelector('.gantt-calendar-overlay-main');
+                    const 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((canvas) => {
+                const link = document.createElement('a');
+                const dataUrl = canvas.toDataURL('image/png');
+                link.download = `${name}.png`;
+                link.href = dataUrl;
+                link.click();
+            });
+        });
     }
 }
+GanttPrintService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttPrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GanttPrintService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttPrintService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttPrintService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
 
-class GanttLinksComponent {
-    constructor(ganttUpper, cdr, elementRef, ganttDragContainer) {
+const mainHeight = 5000;
+class GanttCalendarComponent {
+    constructor(ganttUpper, ngZone, elementRef) {
         this.ganttUpper = ganttUpper;
-        this.cdr = cdr;
+        this.ngZone = ngZone;
         this.elementRef = elementRef;
-        this.ganttDragContainer = ganttDragContainer;
-        this.groups = [];
-        this.items = [];
-        this.lineClick = new EventEmitter();
-        this.links = [];
-        this.ganttLinkTypes = GanttLinkType;
-        this.showArrow = false;
-        this.linkItems = [];
-        this.firstChange = true;
+        this.headerHeight = headerHeight;
+        this.mainHeight = mainHeight;
+        this.todayHeight = todayHeight;
+        this.todayWidth = todayWidth;
+        this.todayBorderRadius = todayBorderRadius;
+        this.viewTypes = GanttViewType;
+        this.className = true;
         this.unsubscribe$ = new Subject();
-        this.ganttLinksOverlay = true;
     }
-    ngOnInit() {
-        this.linkLine = createLineGenerator(this.ganttUpper.linkOptions.lineType, this.ganttUpper);
-        this.showArrow = this.ganttUpper.linkOptions.showArrow;
-        this.buildLinks();
-        this.firstChange = false;
-        this.ganttDragContainer.dragStarted.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-            this.elementRef.nativeElement.style.visibility = 'hidden';
-        });
-        merge(this.ganttUpper.viewChange, this.ganttUpper.expandChange, this.ganttUpper.view.start$, this.ganttUpper.dragEnded, this.ganttUpper.linkDragEnded)
-            .pipe(skip(1), debounceTime(0), takeUntil(this.unsubscribe$))
-            .subscribe(() => {
-            this.elementRef.nativeElement.style.visibility = 'visible';
-            this.buildLinks();
-            this.cdr.detectChanges();
-        });
-    }
-    ngOnChanges() {
-        if (!this.firstChange) {
-            this.buildLinks();
-        }
+    get view() {
+        return this.ganttUpper.view;
     }
-    computeItemPosition() {
-        const lineHeight = this.ganttUpper.styles.lineHeight;
-        const barHeight = this.ganttUpper.styles.barHeight;
-        this.linkItems = [];
-        if (this.groups.length > 0) {
-            let itemNum = 0;
-            let groupNum = 0;
-            this.groups.forEach((group) => {
-                groupNum++;
-                if (group.expanded) {
-                    const items = recursiveItems(group.items);
-                    items.forEach((item, itemIndex) => {
-                        const y = (groupNum + itemNum + itemIndex) * lineHeight + item.refs.y + barHeight / 2;
-                        this.linkItems.push(Object.assign(Object.assign({}, item), { before: {
-                                x: item.refs.x,
-                                y
-                            }, after: {
-                                x: item.refs.x + item.refs.width,
-                                y
-                            } }));
-                    });
-                    itemNum += items.length;
-                }
-            });
+    setTodayPoint() {
+        const x = this.view.getTodayXPoint();
+        const today = new GanttDate().getDate();
+        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
+        const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0];
+        const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0];
+        if (isNumber(x)) {
+            if (rect) {
+                rect.style.left = `${x - todayWidth / 2}px`;
+                rect.style.top = `${headerHeight - todayHeight}px`;
+                rect.innerHTML = today.toString();
+            }
+            if (line) {
+                line.style.left = `${x}px`;
+                line.style.top = `${headerHeight}px`;
+                line.style.bottom = `${-mainHeight}px`;
+            }
         }
         else {
-            const items = recursiveItems(this.items);
-            items.forEach((item, itemIndex) => {
-                const y = itemIndex * lineHeight + item.refs.y + barHeight / 2;
-                this.linkItems.push(Object.assign(Object.assign({}, item), { before: {
-                        x: item.refs.x,
-                        y
-                    }, after: {
-                        x: item.refs.x + item.refs.width,
-                        y
-                    } }));
-            });
+            todayEle.style.display = 'none';
         }
     }
-    buildLinks() {
-        this.computeItemPosition();
-        this.links = [];
-        this.linkItems.forEach((source) => {
-            if (source.origin.start || source.origin.end) {
-                source.links.forEach((link) => {
-                    const target = this.linkItems.find((item) => item.id === link.link);
-                    if (target && (target.origin.start || target.origin.end)) {
-                        let defaultColor = LinkColors.default;
-                        let activeColor = LinkColors.active;
-                        if (link.type === GanttLinkType.fs && source.end.getTime() > target.start.getTime()) {
-                            defaultColor = LinkColors.blocked;
-                            activeColor = 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.linkLine.generatePath(source, target, link.type),
-                            source: source.origin,
-                            target: target.origin,
-                            type: link.type,
-                            color: defaultColor,
-                            defaultColor,
-                            activeColor
-                        });
-                    }
-                });
-            }
-        });
-    }
-    trackBy(index) {
-        return index;
-    }
-    onLineClick(event, link) {
-        this.lineClick.emit({
-            event,
-            source: link.source,
-            target: link.target
-        });
-    }
-    mouseEnterPath(link, index) {
-        link.color = link.activeColor || link.defaultColor;
-        if (index < this.links.length - 1) {
-            this.links.splice(index, 1);
-            this.links.push(link);
-        }
+    ngOnInit() {
+        // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
+        // the `onStable` will never emit any value.
+        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
+        // Normally this isn't in the zone, but it can cause performance regressions for apps
+        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
+        this.ngZone.runOutsideAngular(() => {
+            onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+                merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
+                    .pipe(takeUntil(this.unsubscribe$))
+                    .subscribe(() => {
+                    this.setTodayPoint();
+                });
+            });
+        });
     }
-    mouseLeavePath(link) {
-        link.color = link.defaultColor;
+    trackBy(index, point) {
+        return point.text || index;
     }
     ngOnDestroy() {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }
 }
-GanttLinksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttLinksComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: GanttDragContainer }], target: i0.ɵɵFactoryTarget.Component });
-GanttLinksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttLinksComponent, decorators: [{
+GanttCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttCalendarComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GanttCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: GanttCalendarComponent, selector: "gantt-calendar-overlay", host: { properties: { "class.gantt-calendar-overlay": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n  <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", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-links-overlay', template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  <ng-container *ngFor=\"let link of links; let i = index; trackBy: trackBy\">\n    <path\n      [attr.d]=\"link.path\"\n      fill=\"transparent\"\n      stroke-width=\"2\"\n      [attr.stroke]=\"link.color\"\n      pointer-events=\"none\"\n      [attr.style]=\"link.type === ganttLinkTypes.sf ? 'marker-start: url(#triangle' + i + ')' : 'marker-end: url(#triangle' + i + ')'\"\n    ></path>\n\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        [attr.d]=\"link.path\"\n        (mouseenter)=\"mouseEnterPath(link, i)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n    <defs *ngIf=\"showArrow\">\n      <marker\n        *ngIf=\"link.type === ganttLinkTypes.sf; else markerEnd\"\n        [id]=\"'triangle' + i\"\n        markerUnits=\"strokeWidth\"\n        markerWidth=\"5\"\n        markerHeight=\"4\"\n        refX=\"5\"\n        refY=\"2\"\n        orient=\"180\"\n      >\n        <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n      </marker>\n\n      <ng-template #markerEnd>\n        <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n          <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n        </marker>\n      </ng-template>\n    </defs>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n" }]
+            args: [{ selector: 'gantt-calendar-overlay', 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" }]
         }], ctorParameters: function () {
         return [{ type: GanttUpper, decorators: [{
                         type: Inject,
                         args: [GANTT_UPPER_TOKEN]
-                    }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: GanttDragContainer }];
-    }, propDecorators: { groups: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], lineClick: [{
-                type: Output
-            }], ganttLinksOverlay: [{
+                    }] }, { type: i0.NgZone }, { type: i0.ElementRef }];
+    }, propDecorators: { className: [{
                 type: HostBinding,
-                args: ['class.gantt-links-overlay']
+                args: ['class.gantt-calendar-overlay']
             }] } });
 
-class GanttItemUpper {
-    constructor(elementRef, ganttUpper) {
+class NgxGanttRootComponent {
+    constructor(elementRef, ngZone, dom, dragContainer, ganttUpper, printService) {
         this.elementRef = elementRef;
+        this.ngZone = ngZone;
+        this.dom = dom;
+        this.dragContainer = dragContainer;
         this.ganttUpper = ganttUpper;
-        this.firstChange = true;
+        this.printService = printService;
         this.unsubscribe$ = new Subject();
+        this.ganttUpper.dragContainer = dragContainer;
+    }
+    get view() {
+        return this.ganttUpper.view;
     }
     ngOnInit() {
-        this.firstChange = false;
-        this.item.refs$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-            this.setPositions();
+        // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
+        // the `onStable` will never emit any value.
+        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
+        // Normally this isn't in the zone, but it can cause performance regressions for apps
+        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
+        this.ngZone.runOutsideAngular(() => {
+            onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+                this.dom.initialize(this.elementRef);
+                if (this.printService) {
+                    this.printService.register(this.elementRef);
+                }
+                this.setupScrollClass();
+                this.setupResize();
+                this.setupViewScroll();
+                // 优化初始化时Scroll滚动体验问题，通过透明度解决，默认透明度为0，滚动结束后恢复
+                this.elementRef.nativeElement.style.opacity = '1';
+                this.ganttUpper.viewChange.pipe(startWith(null), takeUntil(this.unsubscribe$)).subscribe(() => {
+                    this.scrollToToday();
+                });
+            });
         });
     }
-    ngOnChanges() {
-        if (!this.firstChange) {
-            this.setPositions();
-        }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
     }
-    setPositions() {
-        const itemElement = this.elementRef.nativeElement;
-        itemElement.style.left = this.item.refs.x + 'px';
-        itemElement.style.top = this.item.refs.y + 'px';
-        itemElement.style.width = this.item.refs.width + 'px';
-        if (this.item.type === GanttItemType.bar) {
-            itemElement.style.height = this.ganttUpper.styles.barHeight + 'px';
+    setupViewScroll() {
+        if (this.ganttUpper.disabledLoadOnScroll) {
+            return;
         }
-        else if (this.item.type === GanttItemType.range) {
-            itemElement.style.height = rangeHeight + 'px';
+        this.dom
+            .getViewerScroll(passiveListenerOptions)
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe((event) => {
+            if (event.direction === ScrollDirection.LEFT) {
+                const dates = this.view.addStartDate();
+                if (dates) {
+                    event.target.scrollLeft += this.view.getDateRangeWidth(dates.start, dates.end);
+                    if (this.ganttUpper.loadOnScroll.observers) {
+                        this.ngZone.run(() => this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() }));
+                    }
+                }
+            }
+            if (event.direction === ScrollDirection.RIGHT) {
+                const dates = this.view.addEndDate();
+                if (dates && this.ganttUpper.loadOnScroll.observers) {
+                    this.ngZone.run(() => this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() }));
+                }
+            }
+        });
+    }
+    setupResize() {
+        this.dom
+            .getResize()
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe(() => {
+            this.setupScrollClass();
+        });
+    }
+    setupScrollClass() {
+        const mainContainer = this.dom.mainContainer;
+        const height = mainContainer.offsetHeight;
+        const scrollHeight = mainContainer.scrollHeight;
+        if (scrollHeight > height) {
+            this.elementRef.nativeElement.className = 'gantt gantt-scroll';
         }
         else {
+            this.elementRef.nativeElement.className = 'gantt';
         }
     }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
+    scrollToToday() {
+        const x = this.view.getTodayXPoint();
+        this.dom.scrollMainContainer(x);
     }
-}
-GanttItemUpper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttItemUpper, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Directive });
-GanttItemUpper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.8", type: GanttItemUpper, inputs: { template: "template", item: "item" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttItemUpper, decorators: [{
-            type: Directive
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
-                        type: Inject,
-                        args: [GANTT_UPPER_TOKEN]
-                    }] }];
-    }, propDecorators: { template: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }] } });
-
-class NgxGanttRangeComponent extends GanttItemUpper {
-    constructor(elementRef, ganttUpper) {
-        super(elementRef, ganttUpper);
-        this.ganttRangeClass = true;
+    scrollToDate(date) {
+        let x;
+        if (typeof date === 'number') {
+            x = this.view.getXPointByDate(new GanttDate(date));
+        }
+        else {
+            x = this.view.getXPointByDate(date);
+        }
+        this.dom.scrollMainContainer(x);
     }
 }
-NgxGanttRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttRangeComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range", host: { properties: { "class.gantt-range": "this.ganttRangeClass" } }, usesInheritance: true, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttRangeComponent, decorators: [{
+NgxGanttRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttRootComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: GanttDomService }, { token: GanttDragContainer }, { token: GANTT_UPPER_TOKEN }, { token: GanttPrintService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { classAttribute: "gantt" }, providers: [GanttDomService, GanttDragContainer], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "backdrop", first: true, predicate: GanttDragBackdropComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"gantt-side\" [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", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GanttCalendarComponent, selector: "gantt-calendar-overlay" }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttRootComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-gantt-range,gantt-range', 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" }]
+            args: [{ selector: 'ngx-gantt-root', providers: [GanttDomService, GanttDragContainer], host: {
+                        class: 'gantt'
+                    }, 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" }]
         }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
+        return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: GanttDomService }, { type: GanttDragContainer }, { type: GanttUpper, decorators: [{
                         type: Inject,
                         args: [GANTT_UPPER_TOKEN]
+                    }] }, { type: GanttPrintService, decorators: [{
+                        type: Optional
                     }] }];
-    }, propDecorators: { ganttRangeClass: [{
-                type: HostBinding,
-                args: ['class.gantt-range']
+    }, propDecorators: { sideWidth: [{
+                type: Input
+            }], sideTemplate: [{
+                type: ContentChild,
+                args: ['sideTemplate', { static: true }]
+            }], mainTemplate: [{
+                type: ContentChild,
+                args: ['mainTemplate', { static: true }]
+            }], backdrop: [{
+                type: ViewChild,
+                args: [GanttDragBackdropComponent, { static: true, read: ElementRef }]
             }] } });
 
 const dragMinWidth = 10;
@@ -2719,16 +2704,66 @@ class GanttBarDrag {
         this.destroy$.complete();
     }
 }
-GanttBarDrag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttBarDrag, deps: [{ token: i1.DragDrop }, { token: GanttDomService }, { token: GanttDragContainer }, { token: NgxGanttRootComponent, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable });
-GanttBarDrag.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttBarDrag });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttBarDrag, decorators: [{
+GanttBarDrag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttBarDrag, deps: [{ token: i1$1.DragDrop }, { token: GanttDomService }, { token: GanttDragContainer }, { token: NgxGanttRootComponent, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable });
+GanttBarDrag.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttBarDrag });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttBarDrag, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
-        return [{ type: i1.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }, { type: NgxGanttRootComponent, decorators: [{
+        return [{ type: i1$1.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }, { type: NgxGanttRootComponent, decorators: [{
                         type: SkipSelf
                     }] }];
     } });
 
+class GanttItemUpper {
+    constructor(elementRef, ganttUpper) {
+        this.elementRef = elementRef;
+        this.ganttUpper = ganttUpper;
+        this.firstChange = true;
+        this.unsubscribe$ = new Subject();
+    }
+    ngOnInit() {
+        this.firstChange = false;
+        this.item.refs$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.setPositions();
+        });
+    }
+    ngOnChanges() {
+        if (!this.firstChange) {
+            this.setPositions();
+        }
+    }
+    setPositions() {
+        const itemElement = this.elementRef.nativeElement;
+        itemElement.style.left = this.item.refs.x + 'px';
+        itemElement.style.top = this.item.refs.y + 'px';
+        itemElement.style.width = this.item.refs.width + 'px';
+        if (this.item.type === GanttItemType.bar) {
+            itemElement.style.height = this.ganttUpper.styles.barHeight + 'px';
+        }
+        else if (this.item.type === GanttItemType.range) {
+            itemElement.style.height = rangeHeight + 'px';
+        }
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+}
+GanttItemUpper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttItemUpper, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Directive });
+GanttItemUpper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: GanttItemUpper, inputs: { template: "template", item: "item" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttItemUpper, decorators: [{
+            type: Directive
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
+                        type: Inject,
+                        args: [GANTT_UPPER_TOKEN]
+                    }] }];
+    }, propDecorators: { template: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }] } });
+
 function linearGradient(sideOrCorner, color, stop) {
     return `linear-gradient(${sideOrCorner},${color} 0%,${stop} 40%)`;
 }
@@ -2741,7 +2776,6 @@ class NgxGanttBarComponent extends GanttItemUpper {
         this.ngZone = ngZone;
         this.barClick = new EventEmitter();
         this.ganttItemClass = true;
-        this.color = 'red';
     }
     ngOnInit() {
         super.ngOnInit();
@@ -2796,9 +2830,9 @@ class NgxGanttBarComponent extends GanttItemUpper {
         event.stopPropagation();
     }
 }
-NgxGanttBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttBarComponent, deps: [{ token: GanttDragContainer }, { token: GanttBarDrag }, { token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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, template: "<div class=\"gantt-bar-layer\">\n  <div class=\"drag-handles\">\n    <ng-container *ngIf=\"item.draggable && ganttUpper.draggable\">\n      <span class=\"handle\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttBarComponent, decorators: [{
+NgxGanttBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttBarComponent, deps: [{ token: GanttDragContainer }, { token: GanttBarDrag }, { token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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, template: "<div class=\"gantt-bar-layer\">\n  <div class=\"drag-handles\">\n    <ng-container *ngIf=\"item.draggable && ganttUpper.draggable\">\n      <span class=\"handle\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-gantt-bar,gantt-bar', providers: [GanttBarDrag], template: "<div class=\"gantt-bar-layer\">\n  <div class=\"drag-handles\">\n    <ng-container *ngIf=\"item.draggable && ganttUpper.draggable\">\n      <span class=\"handle\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</div>\n" }]
         }], ctorParameters: function () {
@@ -2819,6 +2853,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 args: ['handle']
             }] } });
 
+class NgxGanttRangeComponent extends GanttItemUpper {
+    constructor(elementRef, ganttUpper) {
+        super(elementRef, ganttUpper);
+        this.ganttRangeClass = true;
+    }
+}
+NgxGanttRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttRangeComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range", host: { properties: { "class.gantt-range": "this.ganttRangeClass" } }, usesInheritance: true, ngImport: i0, 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", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-gantt-range,gantt-range', 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" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
+                        type: Inject,
+                        args: [GANTT_UPPER_TOKEN]
+                    }] }];
+    }, propDecorators: { ganttRangeClass: [{
+                type: HostBinding,
+                args: ['class.gantt-range']
+            }] } });
+
+class NgxGanttBaselineComponent {
+    constructor(elementRef, ganttUpper) {
+        this.elementRef = elementRef;
+        this.ganttUpper = ganttUpper;
+        this.unsubscribe$ = new Subject();
+        this.ganttBaselineClass = true;
+    }
+    ngOnInit() {
+        this.baselineItem.refs$.pipe(takeUntil$1(this.unsubscribe$)).subscribe(() => {
+            this.setPositions();
+        });
+    }
+    setPositions() {
+        const itemElement = this.elementRef.nativeElement;
+        itemElement.style.left = this.baselineItem.refs.x + 'px';
+        itemElement.style.bottom = '2px';
+        itemElement.style.width = this.baselineItem.refs.width + 'px';
+    }
+}
+NgxGanttBaselineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttBaselineComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttBaselineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: { baselineItem: "baselineItem" }, host: { properties: { "class.gantt-baseline": "this.ganttBaselineClass" } }, ngImport: i0, template: "<div #content *ngIf=\"baselineItem\" class=\"baseline-content\"></div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttBaselineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-gantt-baseline,gantt-baseline', template: "<div #content *ngIf=\"baselineItem\" class=\"baseline-content\"></div>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
+                        type: Inject,
+                        args: [GANTT_UPPER_TOKEN]
+                    }] }];
+    }, propDecorators: { baselineItem: [{
+                type: Input
+            }], ganttBaselineClass: [{
+                type: HostBinding,
+                args: ['class.gantt-baseline']
+            }] } });
+
 class GanttMainComponent {
     constructor(ganttUpper) {
         this.ganttUpper = ganttUpper;
@@ -2830,11 +2921,11 @@ class GanttMainComponent {
         return item.id || index;
     }
 }
-GanttMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttMainComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-GanttMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "isGanttCustomItem": IsGanttCustomItemPipe, "isGanttRangeItem": IsGanttRangeItemPipe, "isGanttBarItem": IsGanttBarItemPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: GanttMainComponent, decorators: [{
+GanttMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttMainComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+GanttMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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, 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\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: item.origin,\n            refs: item.refs,\n            baseline: ganttUpper.baselineItemsMap[item.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[item.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(item.type | isGanttRangeItem) || (item.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"item.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"item\"></gantt-range>\n        <gantt-bar *ngIf=\"item.type | isGanttBarItem\" [item]=\"item\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[item.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[item.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children }\"\n    ></ng-template>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["groups", "items"], outputs: ["lineClick"] }, { kind: "component", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: ["barClick"] }, { kind: "component", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range" }, { kind: "component", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: ["baselineItem"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttBarItemPipe, name: "isGanttBarItem" }, { kind: "pipe", type: IsGanttCustomItemPipe, name: "isGanttCustomItem" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: GanttMainComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-main', template: "<gantt-links-overlay [groups]=\"groups\" [items]=\"items\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<!-- groups -->\n<div class=\"gantt-main-groups\" *ngIf=\"groups && groups.length > 0; else itemsTemplate\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"group.class\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: group }\"></ng-template>\n    </div>\n    <div *ngIf=\"group.expanded\" class=\"gantt-items\">\n      <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: group.items }\"></ng-template>\n    </div>\n  </ng-container>\n</div>\n<!-- 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" }]
+            args: [{ selector: 'gantt-main', template: "<gantt-links-overlay [groups]=\"groups\" [items]=\"items\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<!-- groups -->\n<div class=\"gantt-main-groups\" *ngIf=\"groups && groups.length > 0; else itemsTemplate\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"group.class\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: group }\"></ng-template>\n    </div>\n    <div *ngIf=\"group.expanded\" class=\"gantt-items\">\n      <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: group.items }\"></ng-template>\n    </div>\n  </ng-container>\n</div>\n<!-- items -->\n<ng-template #itemsTemplate>\n  <div class=\"gantt-main-items\" [style.width.px]=\"ganttUpper.view.width\">\n    <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items }\"></ng-template>\n  </div>\n</ng-template>\n\n<ng-template #ganttItems let-items=\"items\">\n  <ng-container *ngFor=\"let item of items\">\n    <div\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(item.id)\"\n    >\n      <ng-container *ngIf=\"item.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: item.origin,\n            refs: item.refs,\n            baseline: ganttUpper.baselineItemsMap[item.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[item.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(item.type | isGanttRangeItem) || (item.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"item.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"item\"></gantt-range>\n        <gantt-bar *ngIf=\"item.type | isGanttBarItem\" [item]=\"item\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[item.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[item.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children }\"\n    ></ng-template>\n  </ng-container>\n</ng-template>\n" }]
         }], ctorParameters: function () {
         return [{ type: GanttUpper, decorators: [{
                         type: Inject,
@@ -2943,9 +3034,15 @@ class NgxGanttComponent extends GanttUpper {
             this.selectedChange.emit({ event, selectedValue: _selectedValue });
         }
     }
+    scrollToToday() {
+        this.ganttRoot.scrollToToday();
+    }
+    scrollToDate(date) {
+        this.ganttRoot.scrollToDate(date);
+    }
 }
-NgxGanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: NgxGanttComponent, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick", selectedChange: "selectedChange" }, providers: [
+NgxGanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", 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
@@ -2954,8 +3051,8 @@ NgxGanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             provide: GANTT_ABSTRACT_TOKEN,
             useExisting: forwardRef(() => NgxGanttComponent)
         }
-    ], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ngx-gantt-root #ganttRoot>\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.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, 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 }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ngx-gantt-root #ganttRoot>\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", dependencies: [{ kind: "component", type: GanttTableComponent, selector: "gantt-table", inputs: ["groups", "items", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate"], outputs: ["itemClick"] }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["groups", "items", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-gantt', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -3004,8 +3101,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
 
 class NgxGanttModule {
 }
-NgxGanttModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxGanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttModule, declarations: [NgxGanttComponent,
+NgxGanttModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxGanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttModule, declarations: [NgxGanttComponent,
         NgxGanttTableComponent,
         NgxGanttTableColumnComponent,
         GanttTableComponent,
@@ -3017,6 +3114,7 @@ NgxGanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         GanttDragBackdropComponent,
         NgxGanttRangeComponent,
         NgxGanttRootComponent,
+        NgxGanttBaselineComponent,
         IsGanttRangeItemPipe,
         IsGanttBarItemPipe,
         IsGanttCustomItemPipe], imports: [CommonModule, DragDropModule], exports: [NgxGanttComponent,
@@ -3024,14 +3122,15 @@ NgxGanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         NgxGanttTableColumnComponent,
         NgxGanttRootComponent,
         NgxGanttBarComponent,
-        NgxGanttRangeComponent] });
-NgxGanttModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttModule, providers: [
+        NgxGanttRangeComponent,
+        NgxGanttBaselineComponent] });
+NgxGanttModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttModule, providers: [
         {
             provide: GANTT_GLOBAL_CONFIG,
             useValue: defaultConfig
         }
-    ], imports: [[CommonModule, DragDropModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NgxGanttModule, decorators: [{
+    ], imports: [CommonModule, DragDropModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxGanttModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, DragDropModule],
@@ -3041,7 +3140,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                         NgxGanttTableColumnComponent,
                         NgxGanttRootComponent,
                         NgxGanttBarComponent,
-                        NgxGanttRangeComponent
+                        NgxGanttRangeComponent,
+                        NgxGanttBaselineComponent
                     ],
                     declarations: [
                         NgxGanttComponent,
@@ -3056,6 +3156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                         GanttDragBackdropComponent,
                         NgxGanttRangeComponent,
                         NgxGanttRootComponent,
+                        NgxGanttBaselineComponent,
                         IsGanttRangeItemPipe,
                         IsGanttBarItemPipe,
                         IsGanttCustomItemPipe
@@ -3077,5 +3178,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GANTT_GLOBAL_CONFIG, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttDate, GanttDatePoint, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLinkLineType, GanttLinkType, GanttLoadOnScrollEvent, GanttPrintService, GanttSelectedEvent, GanttTableEvent, GanttUpper, GanttView, GanttViewType, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, defaultConfig, primaryDatePointTop, secondaryDatePointTop };
+export { GANTT_GLOBAL_CONFIG, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttBaselineItemInternal, GanttDate, GanttDatePoint, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLinkLineType, GanttLinkType, GanttLoadOnScrollEvent, GanttPrintService, GanttSelectedEvent, GanttTableEvent, GanttUpper, GanttView, GanttViewType, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttBaselineComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, defaultConfig, primaryDatePointTop, secondaryDatePointTop };
 //# sourceMappingURL=worktile-gantt.mjs.map